
:root{
 --navy:#06143a;--navy2:#08295b;--blue:#1257d5;--red:#ef233c;--green:#0ca968;
 --orange:#ff9418;--purple:#7437b8;--bg:#f4f7fb;--card:#fff;--ink:#0b1837;
 --muted:#65728b;--line:#e5eaf2;--shadow:0 7px 22px rgba(13,35,76,.08);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:inherit}.app-top{height:92px;background:linear-gradient(110deg,#040d2c,#07163d 70%,#06143a);color:#fff;display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:50;border-bottom:4px solid var(--red)}
.brand-lockup{display:flex;align-items:center;gap:14px;min-width:315px}.brand-mark{width:56px;height:56px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 4px 16px #0003;overflow:hidden}
.brand-mark img{width:48px;height:48px;object-fit:contain}.brand-mark .fallback{font-size:25px;font-weight:900;color:#123b8f}.brand-title{font-size:23px;font-weight:800;letter-spacing:-.4px}.brand-title .it{color:#ff2942}.brand-tag{font-size:12px;margin-top:4px;opacity:.95}
.searchbox{margin:auto;max-width:400px;width:34%;position:relative}.searchbox input{width:100%;border:1px solid #415073;background:#071333;color:#fff;border-radius:24px;padding:13px 46px 13px 18px;outline:none}.searchbox span{position:absolute;right:17px;top:11px;font-size:20px}
.top-user{margin-left:auto;display:flex;align-items:center;gap:12px}.avatar{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:800}.top-user small{display:block;opacity:.8;margin-top:3px}
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:calc(100vh - 92px)}.sidebar{background:linear-gradient(180deg,#082b60,#061d46 60%,#06163b);color:#fff;padding:10px 10px 20px;position:sticky;top:92px;height:calc(100vh - 92px);overflow:auto}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;margin:3px 0;font-size:14px;font-weight:600}.nav a:hover{background:#ffffff10}.nav a.active{background:linear-gradient(90deg,#df172d,#fa1640);box-shadow:0 7px 18px #e21c3940}.nav .ico{width:22px;text-align:center;font-size:18px}
.company-card{border:1px solid #ffffff36;border-radius:14px;margin:24px 8px 0;padding:16px;background:#06173b80}.company-card b{color:#ff3349}.company-card p{font-size:12px;line-height:1.55;margin:10px 0}.main{padding:18px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:12px}.kpi{background:#fff;border:1px solid #edf0f5;border-radius:13px;padding:16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start;min-height:110px}.kpi-icon{width:48px;height:48px;border-radius:10px;color:#fff;display:grid;place-items:center;font-size:23px;font-weight:800;flex:0 0 auto}.kpi span{font-size:12px;color:#25314c}.kpi strong{display:block;font-size:23px;margin-top:7px}.kpi small{display:block;margin-top:8px;color:var(--muted);font-size:10px}
.bg-blue{background:linear-gradient(145deg,#316df0,#0643ba)}.bg-red{background:linear-gradient(145deg,#ff384c,#d80721)}.bg-green{background:linear-gradient(145deg,#18bb75,#008b4e)}.bg-purple{background:linear-gradient(145deg,#8d4ac5,#5c1da1)}.bg-orange{background:linear-gradient(145deg,#ffae2b,#f47a00)}
.grid3{display:grid;grid-template-columns:1.55fr .95fr 1fr;gap:12px;margin-top:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.panel{background:#fff;border:1px solid #edf0f5;border-radius:13px;box-shadow:var(--shadow);padding:17px;min-width:0}.panel h3{font-size:15px;margin:0 0 15px}.panel-head{display:flex;justify-content:space-between;align-items:center}.view{font-size:12px;color:#074fd5}
.fake-chart{height:235px;position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 45px,#edf0f4 46px);overflow:hidden}.fake-chart svg{position:absolute;inset:0;width:100%;height:100%}
.donut{width:180px;height:180px;margin:18px auto;border-radius:50%;background:conic-gradient(var(--green) 0 29%,#1457dc 29% 68%,var(--orange) 68% 86%,var(--red) 86%);position:relative}.donut:after{content:"Total\A 0";white-space:pre;position:absolute;inset:40px;background:#fff;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:800;font-size:17px}
.activity{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.activity:last-child{border:0}.activity .dot{width:31px;height:31px;border-radius:7px;color:#fff;display:grid;place-items:center}.activity b{font-size:12px}.activity small{display:block;color:var(--muted);margin-top:3px}
.table-clean{width:100%;border-collapse:collapse;font-size:12px}.table-clean th,.table-clean td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}.table-clean th{color:var(--muted);font-size:11px}
.app-footer{background:#05183e;color:#d9e2f2;padding:12px 22px;font-size:11px;display:flex;justify-content:space-between}
.ops-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.ops-title h1{margin:0;font-size:24px}.ops-title small{color:var(--muted)}
form.inline{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:9px;align-items:end}.full{grid-column:1/-1}label{font-size:12px;color:#52647a;font-weight:700}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #cfdbe8;border-radius:9px;background:#fff;font:inherit}textarea{min-height:78px;resize:vertical}button,.btn{border:0;border-radius:9px;padding:10px 13px;font-weight:700;cursor:pointer}.primary{background:var(--navy2);color:#fff}.soft{background:#eaf2fb;color:var(--navy2)}.danger{background:var(--red);color:#fff}.success{background:#e7f7ee;color:#08713e}.flash{background:#eaf7ef;border:1px solid #bfe3ca;padding:10px 14px;border-radius:10px;margin-bottom:14px}.tinyform{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.tinyform input,.tinyform select{width:auto;min-width:90px;padding:7px}.tinyform button{padding:7px 9px}.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef3f8;font-size:11px;font-weight:700}
@media(max-width:1250px){.kpis{grid-template-columns:repeat(3,1fr)}.grid3{grid-template-columns:1fr 1fr}.grid3>.panel:last-child{grid-column:1/-1}}
@media(max-width:850px){.app-top{height:auto;min-height:76px;padding:10px 12px}.brand-lockup{min-width:0}.brand-title{font-size:17px}.brand-mark{width:45px;height:45px}.brand-mark img{width:39px;height:39px}.searchbox{display:none}.top-user .details{display:none}.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:8px}.nav{display:flex;overflow:auto}.nav a{white-space:nowrap}.nav .ico{display:none}.company-card{display:none}.main{padding:10px}.kpis{grid-template-columns:repeat(2,1fr)}.grid3,.grid2{grid-template-columns:1fr}.grid3>.panel:last-child{grid-column:auto}form.inline{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.brand-tag{display:none}.kpis{grid-template-columns:1fr 1fr}.kpi{padding:11px;min-height:95px}.kpi-icon{width:38px;height:38px}.kpi strong{font-size:18px}form.inline{grid-template-columns:1fr}.full{grid-column:auto}}

/* V5.1.3 final approved transparent branding */
.brand-lockup{min-width:315px;display:flex;align-items:center}
.brand-final{display:block;height:58px;width:auto;max-width:330px;object-fit:contain}
.login-brand-final{display:block;width:min(610px,92%);height:auto;object-fit:contain}
@media(max-width:850px){
 .brand-lockup{min-width:0}
 .brand-final{height:45px;max-width:245px}
 .login-brand-final{width:min(430px,96%)}
}
