:root{
  --bg:#f4f6f9; --sidebar:#172033; --sidebar-2:#0f1626; --line:#e6e9ef;
  --ink:#1f2733; --muted:#6b7686; --accent:#2f6fed; --accent-soft:#eaf1fe;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;}
a{text-decoration:none}

/* layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:248px;flex:0 0 248px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:#c7d0e0;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:0;z-index:1030}
.sidebar .brand{padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.07);color:#fff;
  font-weight:700;letter-spacing:.2px;font-size:1.12rem;display:flex;align-items:center;gap:10px}
.sidebar .brand .dot{width:10px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 4px rgba(47,111,237,.25)}
.sidebar .nav-section{padding:16px 14px 4px 22px;font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:#6f7c93}
.sidebar a.nav-link{color:#c7d0e0;padding:10px 22px;display:flex;align-items:center;gap:11px;border-left:3px solid transparent;font-size:.93rem}
.sidebar a.nav-link:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar a.nav-link.active{background:rgba(47,111,237,.16);color:#fff;border-left-color:var(--accent)}
.sidebar .nav-link svg{width:18px;height:18px;opacity:.85;flex:0 0 18px}
.sidebar .foot{margin-top:auto;padding:16px 22px;font-size:.72rem;color:#5b6781;border-top:1px solid rgba(255,255,255,.07)}

.content{margin-left:248px;flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 26px;display:flex;
  align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1020}
.topbar h1{font-size:1.2rem;font-weight:650;margin:0}
.topbar .crumb{color:var(--muted);font-size:.85rem}
.main{padding:24px 26px 60px}

/* cards & stats */
.card{border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-head h2{font-size:1rem;margin:0;font-weight:600}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .n{font-size:1.7rem;font-weight:700;line-height:1}
.stat .l{color:var(--muted);font-size:.82rem}
.stat .ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}

/* table */
table.dataTable{font-size:.9rem}
table.dataTable thead th{background:#fbfcfe;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;color:var(--muted)}
.badge-pri{font-weight:600;letter-spacing:.02em}
.btn-icon{padding:.25rem .5rem;line-height:1}
.table-actions .btn{margin-right:4px}

/* form */
.form-section{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  margin:22px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.req:after{content:" *";color:#d92d20}
.calc-box{background:var(--accent-soft);border:1px dashed #b9d0fb;border-radius:10px;padding:14px 16px}
.calc-box .v{font-weight:600}

@media (max-width:860px){
  .sidebar{transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none}
  .content{margin-left:0}
  .menu-toggle{display:inline-flex!important}
}
.menu-toggle{display:none}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1025}
.backdrop.show{display:block}

/* filter panel */
.filterbar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.filterbar label.flabel{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:4px;display:block}
.filterbar .daterange{min-width:0}
.filterbar .daterange input[type=date]{flex:1 1 0;min-width:0}
.ms-dd .form-select{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-dd .dropdown-menu{min-width:260px;max-height:300px;overflow:auto}
.ms-dd .form-check{margin-bottom:.15rem}
.ms-dd .ms-search{position:sticky;top:0}
.filter-pills .badge{font-weight:500}