*{box-sizing:border-box}
:root{
 --navy:#083b5c;--navy-dark:#062f4a;--navy-soft:#0d486c;
 --orange:#f07a00;--bg:#f3f6f8;--text:#17212b;--muted:#6b7785;
 --line:#dbe2e8;--blue:#1f6fa5;--blue-soft:#eaf3f8;--white:#fff;
}
html,body{min-height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.app-shell{min-height:100vh}

/* LEFT NAV — calm, LIA Digital-inspired */
.sidebar{
 position:fixed;z-index:50;left:0;top:58px;bottom:0;width:238px;
 background:var(--navy-dark);color:#dce8f0;display:flex;flex-direction:column;
 border-right:1px solid #05283e;transition:width .18s ease;overflow:hidden
}
.sidebar-top{
 position:fixed;left:0;top:0;width:238px;height:58px;background:#fff;
 border-bottom:1px solid var(--line);display:flex;align-items:center;
 justify-content:space-between;padding:0 12px;z-index:60;transition:width .18s ease
}
.sidebar-brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.brand-mark{width:30px;height:30px;border-radius:6px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:15px;flex:0 0 30px}
.brand-name{font-size:14px;font-weight:700;color:#173d56;white-space:nowrap}.brand-sub{font-size:10px;color:#83909b;margin-top:1px}
.collapse-menu,.top-menu-btn{border:0;background:transparent;color:var(--navy);cursor:pointer;font-size:21px;line-height:1;padding:6px 8px;border-radius:5px}
.collapse-menu:hover,.top-menu-btn:hover{background:#eef3f6}

.sidebar-user{margin:13px 10px 8px;padding:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:7px;display:flex;align-items:center;gap:9px}
.user-avatar{width:30px;height:30px;border-radius:50%;background:#1a597f;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 30px}
.user-info{min-width:0}.user-info strong{display:block;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info span{display:block;color:#9db3c3;font-size:9px;margin-top:3px;letter-spacing:.4px}
.sidebar-scroll{padding:5px 8px 12px;overflow-y:auto;flex:1}
.side-link,.group-toggle{
 width:100%;display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 10px;
 border:0;border-radius:4px;color:#c5d5df;text-decoration:none;background:transparent;
 font-size:12px;text-align:left;cursor:pointer
}
.side-link:hover,.group-toggle:hover{background:var(--navy-soft);color:#fff}
.side-link.active{background:#0f567e;color:#fff;border-left:3px solid #78b9d9;padding-left:7px}
.side-icon{width:18px;display:inline-flex;justify-content:center;color:#86aabd;font-size:14px;flex:0 0 18px}
.side-link.active .side-icon,.group-toggle:hover .side-icon{color:#fff}
.menu-group{margin:2px 0}.group-toggle{justify-content:space-between;color:#d6e2ea;font-weight:600}
.group-toggle>span:first-child{display:flex;align-items:center;gap:8px}
.chevron{font-size:14px;color:#7898aa;transition:transform .15s ease}
.menu-group.open>.group-toggle .chevron{transform:rotate(180deg)}
.submenu{display:none;padding:2px 0 3px 10px}.menu-group.open .submenu{display:block}
.submenu .side-link{min-height:34px;font-size:11.5px;padding-left:10px}
.submenu .side-link:before{content:"";width:1px;height:16px;background:#275a76;margin-right:1px}
.logout-link{margin:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;text-decoration:none;color:#a9bfcd;font-size:12px}
.logout-link:hover{color:#fff;background:var(--navy-soft);border-radius:5px}

/* TOP HEADER */
.main-area{margin-left:238px;min-width:0;width:calc(100% - 238px);min-height:100vh;transition:margin-left .18s ease,width .18s ease}
.topbar{
 height:58px;background:#fff;border-bottom:1px solid var(--line);
 display:flex;align-items:center;justify-content:space-between;padding:0 18px;
 position:sticky;top:0;z-index:35
}
.topbar-left{display:flex;align-items:center;gap:10px}.topbar-title{font-size:15px;font-weight:700;color:#25465c}
.topbar-user{display:flex;align-items:center;gap:8px;font-size:11px}.topbar-name{font-weight:700;color:#314654}.topbar-role{font-size:9px;color:#81909b;background:#edf2f5;border-radius:12px;padding:4px 7px}

/* COLLAPSED DESKTOP */
body.nav-collapsed .sidebar{width:68px}
body.nav-collapsed .sidebar-top{width:68px;justify-content:center;padding:0}
body.nav-collapsed .brand-text,body.nav-collapsed .sidebar-user,
body.nav-collapsed .side-label,body.nav-collapsed .chevron{display:none}
body.nav-collapsed .sidebar-brand{display:none}
body.nav-collapsed .collapse-menu{display:block}
body.nav-collapsed .sidebar-scroll{padding:8px 7px}
body.nav-collapsed .side-link,body.nav-collapsed .group-toggle{justify-content:center;padding:9px 0}
body.nav-collapsed .side-link.active{border-left:0;border-radius:5px}
body.nav-collapsed .menu-group.open .submenu{display:none}
body.nav-collapsed .logout-link{justify-content:center;padding:11px 0;margin:8px 7px}
body.nav-collapsed .main-area{margin-left:68px;width:calc(100% - 68px)}

/* CONTENT */
.wrap{max-width:1280px;margin:0 auto;padding:26px 22px 8px}
h1{font-size:31px;line-height:1.2;margin:0 0 12px;color:#172235}
h2{color:#172235}h3{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.card{background:#fff;border:1px solid #dfe6ef;border-radius:10px;padding:18px;box-shadow:0 2px 7px rgba(0,0,0,.04)}
.metric{font-size:28px;font-weight:700;margin-top:6px}.muted{color:var(--muted)}.small{font-size:12px}
.btn{display:inline-block;border:0;border-radius:6px;padding:9px 13px;background:#24689f;color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:#1e5989}.btn.secondary{background:#64748b}.btn.success{background:#287a58}.btn.danger{background:#a9433b}.btn.warn{background:#987027}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.field label{display:block;font-weight:600;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:6px;background:#fff}
.field textarea{min-height:80px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:9px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}th{background:#edf2f7}
.tablewrap{overflow:auto}.flash{padding:12px;border-radius:7px;margin-bottom:15px}.flash.success{background:#dcfce7;color:#166534}.flash.error{background:#fee2e2;color:#991b1b}.flash.warning{background:#fef3c7;color:#92400e}
.pill{display:inline-block;padding:3px 8px;border-radius:99px;background:#e2e8f0;font-size:12px}.login{max-width:420px;margin:70px auto}.login h1{text-align:center}
footer{text-align:center;color:#718096;padding:30px}.qrbox{background:#fff;border:1px dashed #94a3b8;padding:18px;text-align:center}.actions{display:flex;gap:7px;flex-wrap:wrap}.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.sidebar-overlay{display:none}

/* MOBILE: drawer */
@media(max-width:860px){
 .sidebar{top:0;width:238px;transform:translateX(-100%);transition:transform .18s ease;box-shadow:8px 0 30px rgba(0,0,0,.18)}
 .sidebar-top{position:absolute;top:0;width:238px}
 .sidebar.mobile-open{transform:translateX(0)}
 .sidebar-overlay{position:fixed;z-index:45;inset:0;background:rgba(5,14,25,.45)}
 .sidebar-overlay.show{display:block}
 .main-area{margin-left:0;width:100%}
 .topbar{height:58px;padding:0 13px}
 .topbar-title{font-size:14px}
 .topbar-user{display:none}
 .top-menu-btn{font-size:21px}
 body.nav-collapsed .sidebar{width:238px;transform:translateX(-100%)}
 body.nav-collapsed .sidebar-top{width:238px}
 body.nav-collapsed .brand-text,body.nav-collapsed .sidebar-user,body.nav-collapsed .side-label,body.nav-collapsed .chevron{display:initial}
 body.nav-collapsed .sidebar-user{display:flex}
 body.nav-collapsed .brand-text{display:block}
 body.nav-collapsed .sidebar-brand{display:flex}
 body.nav-collapsed .side-link,body.nav-collapsed .group-toggle{justify-content:flex-start;padding:8px 10px}
 body.nav-collapsed .logout-link{justify-content:flex-start;padding:10px;margin:8px}
 .wrap{padding:22px 15px 8px}
}
@media(max-width:700px){.two{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.card{padding:15px}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}