:root{/*theme v3*/
  --bg:#F5F5F3; --card:#FFFFFF; --ink:#141414; --muted:#6E6E6A; --line:#E5E5E1;
  --pine:#0F0F0F; --pine-2:#1C1C1C; --brand:#141414; --brand-2:#2B2B2B;
  --amber:#B97A17; --amber-bg:#FBF1DF; --red:#BE4040; --red-bg:#FBE9E9;
  --blue:#3557B7; --blue-bg:#E9EEFB; --ok-bg:#E4F4EC;
  --r:14px; --shadow:0 1px 2px rgba(16,16,16,.05),0 8px 24px -16px rgba(16,16,16,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:15px/1.55 'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand b{font-family:'Sora',sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.shell{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--pine);color:#DCE8E1;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;transition:transform .25s}
.brand{display:flex;gap:12px;align-items:center;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{font-family:'Sora';font-weight:700;font-size:22px;background:var(--brand-2);color:#06231A;width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.brand b{font-size:16px;display:block;color:#fff}
.brand small{color:#8FA79C;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.sidebar nav{padding:14px 12px;flex:1;overflow-y:auto}
.sidebar nav a{display:flex;align-items:center;gap:12px;color:#B9CCC2;padding:10px 12px;border-radius:10px;font-weight:500;font-size:14.5px;margin-bottom:2px}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.sidebar nav a.active{background:var(--brand);color:#fff}
.ni{width:20px;text-align:center;opacity:.85}
.side-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.08)}
.who b{color:#fff;font-size:14px;display:block}
.who small{color:#8FA79C;font-size:12px}
.logout{display:inline-block;margin-top:8px;color:#9FE3C8;font-size:13px}

.main{flex:1;margin-left:248px;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topbar h1{font-size:20px;margin:0;flex:1}
.month-chip{background:var(--pine);color:#CFF3E3;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;font-size:18px;padding:4px 10px;cursor:pointer}
.content{padding:26px 28px 60px;max-width:1280px}
.scrim{display:none;position:fixed;inset:0;background:rgba(10,20,16,.45);z-index:35}

.flash{margin:18px 28px -6px;padding:12px 16px;border-radius:12px;font-weight:500}
.flash.ok{background:var(--ok-bg);color:#0B5B41}
.flash.err{background:var(--red-bg);color:var(--red)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card h2{font-size:16px;margin:0 0 14px}
.stat .num{font-family:'Sora';font-size:26px;font-weight:700}
.stat .lbl{color:var(--muted);font-size:13px;font-weight:500;margin-top:2px}
.stat.warn .num{color:var(--amber)} .stat.bad .num{color:var(--red)} .stat.good .num{color:var(--brand)}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.toolbar .sp{flex:1}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:9px 16px;font:600 14px 'Inter';cursor:pointer}
.btn:hover{background:#0B6349;text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#F1F4F0}
.btn.danger{background:var(--red)} .btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}

.tw{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:640px}
th{font:600 12px 'Inter';letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFBF9;white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FAFCFA}
td small{color:var(--muted)}

.badge{display:inline-block;font:600 12px 'Inter';padding:3px 10px;border-radius:999px;white-space:nowrap}
.b-pending{background:var(--amber-bg);color:var(--amber)}
.b-in_progress{background:var(--blue-bg);color:var(--blue)}
.b-completed,.b-active,.b-paid{background:var(--ok-bg);color:#0B5B41}
.b-on_hold,.b-inactive{background:#EEF0ED;color:var(--muted)}
.b-unpaid{background:var(--red-bg);color:var(--red)}
.b-partial{background:var(--amber-bg);color:var(--amber)}
.b-hosting{background:var(--blue-bg);color:var(--blue)}
.b-domain{background:#F2EAFB;color:#7440B0}

form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
form .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
label{display:block;font:600 12.5px 'Inter';color:var(--muted);margin:12px 0 5px}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:14px 'Inter';background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-2);outline-offset:0;border-color:var(--brand-2)}
textarea{min-height:76px;resize:vertical}
fieldset{border:1px solid var(--line);border-radius:12px;margin:16px 0 0;padding:4px 14px 14px}
legend{font:600 13px 'Sora';color:var(--brand);padding:0 6px}

.modal{display:none;position:fixed;inset:0;background:rgba(10,20,16,.5);z-index:60;padding:24px;overflow-y:auto}
.modal.open{display:block}
.modal .box{background:#fff;border-radius:16px;max-width:720px;margin:2vh auto;padding:24px 26px 26px;box-shadow:0 24px 60px -20px rgba(0,0,0,.35)}
.modal h2{margin:0 0 4px;font-size:18px}
.modal .x{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}

.pw{font-family:ui-monospace,monospace;font-size:13px}
.pw span{filter:blur(4px);transition:.15s}
.pw.show span{filter:none}
.pw button{background:none;border:none;cursor:pointer;font-size:13px;color:var(--brand);padding:0 4px}

.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted);font-weight:500}
.kv dd{margin:0;word-break:break-word}
.prog{background:#EEF1ED;border-radius:999px;height:8px;overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;background:var(--brand-2)}
.muted{color:var(--muted)} .right{text-align:right} .nowrap{white-space:nowrap}
.mt{margin-top:18px}
.empty{padding:34px;text-align:center;color:var(--muted)}
.link-danger{color:var(--red);font-size:13px}

@media(max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:840px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .scrim.on{display:block}
  .main{margin-left:0}
  .burger{display:block}
  .content{padding:18px 16px 60px}
  .flash{margin:14px 16px -4px}
  form .row,form .row3{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:8px}
}
@media(max-width:560px){ .g2,.g3,.g4{grid-template-columns:1fr 1fr} .topbar h1{font-size:17px} .month-chip{display:none} }
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.b-present{background:#E3F2EB;color:#0E7A5C}
.b-absent{background:#F7E3E3;color:#B23B3B}
.b-half_day{background:#F5EDDC;color:#8A6D1F}
.b-leave{background:#E3EAF5;color:#3B5FB2}


/* ===== v3 additions: accent, hovers, priority, notif bar, charts ===== */
:root{--acc:#E8402A;--acc-dark:#C5341F}
a:hover{color:var(--acc)}
.btn{transition:transform .12s ease, background .15s ease, box-shadow .15s ease}
.btn:hover{background:#2B2B2B;transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
.btn.ghost:hover{background:#EFEFEC;color:var(--ink);transform:translateY(-1px)}
.btn.danger:hover{background:#A32F2F}
.btn.sm:hover{transform:none}
table tr{transition:background .12s ease}
table tr:hover td{background:#FAFAF7}
.items tr:hover td{background:inherit}
.card{transition:box-shadow .15s ease}
.card:hover{box-shadow:0 2px 4px rgba(16,16,16,.06),0 14px 34px -18px rgba(16,16,16,.22)}
.nav a{transition:background .13s ease,color .13s ease,padding-left .13s ease}
.nav a:hover{padding-left:22px}
.stat b{transition:color .15s}
.stat:hover b{color:var(--acc)}
/* priority badges */
.p-normal{background:#EDEDEA;color:#555}
.p-medium{background:#E9EEFB;color:#3557B7}
.p-high{background:#FBF1DF;color:#B97A17}
.p-critical{background:#E8402A;color:#fff}
/* pending-tasks alert bar */
.alertbar{background:var(--acc);color:#fff;padding:10px 26px;font:600 13.5px 'Inter';display:flex;gap:10px;align-items:center;justify-content:center;text-align:center}
.alertbar a{color:#fff;text-decoration:underline}
.alertbar .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* sidebar logo */
.brand img{height:40px;width:auto;display:block}
/* progress bars already exist; chart canvas sizing */
.chartbox{position:relative;height:230px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.grid3{grid-template-columns:1fr}}
/* announcement card */
.ann{border-left:4px solid var(--acc);background:#fff;border-radius:10px;padding:12px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.ann small{color:var(--muted)}
select:hover,input:hover,textarea:hover{border-color:#bdbdb8}
select:focus,input:focus,textarea:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px rgba(232,64,42,.12)}