/* ===========================================================================
   NSMS world-class theme (theme-v1) — loads AFTER app.css and upgrades the
   whole system: modern palette, depth, motion, and true 3D buttons that
   visibly press down and change colour when pressed.
   =========================================================================== */
:root{
  --navy:#0b2545; --navy-2:#13315c; --ink:#1c2b3a; --paper:#f4f7fb;
  --teal:#2a9d8f; --gold:#c9a227; --copper:#b06a3b; --crimson:#b3303a;
  --line:#e3e9f2; --shadow:0 10px 28px rgba(11,37,69,.10);
}
html,body{background:
  radial-gradient(1100px 500px at 110% -10%, #eaf1fb 0%, transparent 60%),
  radial-gradient(900px 420px at -10% 110%, #e7f4f1 0%, transparent 55%),
  var(--paper) !important;
  color:var(--ink); -webkit-font-smoothing:antialiased;}

/* ---------- header & brand ---------- */
.app-header{background:linear-gradient(100deg,var(--navy) 0%,var(--navy-2) 70%,#1b4979 100%) !important;
  box-shadow:0 4px 18px rgba(11,37,69,.35); border-bottom:3px solid var(--gold);}
.app-header .brand,.app-header .brand a{font-weight:800; letter-spacing:.4px;}
.role-pill{background:var(--gold) !important; color:var(--navy) !important; font-weight:800;
  border-radius:999px; padding:3px 12px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);}

/* ---------- sidebar ---------- */
.sidebar{background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%) !important;
  border-right:1px solid var(--line) !important; box-shadow:2px 0 14px rgba(11,37,69,.05);}
.sidebar h3{color:#7d8da3; text-transform:uppercase; letter-spacing:1.6px; font-size:11px;}
.nav-item{border-radius:10px; margin:2px 8px; padding:9px 14px !important; color:#33445c !important;
  font-weight:600; transition:all .16s ease; border-left:4px solid transparent; cursor:pointer;}
.nav-item:hover{background:#eaf1fb !important; transform:translateX(3px); color:var(--navy) !important;}
.nav-item.active{background:linear-gradient(95deg,var(--navy),#1b4979) !important; color:#fff !important;
  border-left:4px solid var(--gold); box-shadow:0 6px 14px rgba(11,37,69,.28);}

/* ---------- cards ---------- */
.card{border-radius:16px !important; border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important; transition:box-shadow .2s ease, transform .2s ease;}
.card:hover{box-shadow:0 14px 34px rgba(11,37,69,.14) !important;}
.card h2{color:var(--navy); letter-spacing:.2px;}
.card h2::after{content:""; display:block; width:46px; height:4px; margin-top:6px;
  border-radius:4px; background:linear-gradient(90deg,var(--gold),var(--teal));}

/* ---------- stats ---------- */
.stat{border-radius:16px !important; background:linear-gradient(160deg,#fff, #f2f7ff) !important;
  border:1px solid var(--line) !important; box-shadow:var(--shadow) !important;}
.stat .num{color:var(--navy) !important; font-weight:800 !important;}
.stat .lbl{color:#7d8da3 !important; text-transform:uppercase; letter-spacing:1px; font-size:11px;}

/* ---------- forms ---------- */
.field label{font-weight:700; color:#33445c; font-size:13px;}
input,select,textarea{border:1.5px solid var(--line) !important; border-radius:10px !important;
  padding:10px 12px !important; background:#fff !important; transition:border .15s, box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:none !important; border-color:var(--teal) !important;
  box-shadow:0 0 0 4px rgba(42,157,143,.16) !important;}

/* ---------- tables ---------- */
table{border-collapse:separate !important; border-spacing:0; width:100%;}
thead th{background:linear-gradient(180deg,#13315c,#0b2545) !important; color:#fff !important;
  padding:10px 12px !important; font-size:12px; letter-spacing:.6px; text-transform:uppercase;}
thead th:first-child{border-top-left-radius:10px;} thead th:last-child{border-top-right-radius:10px;}
tbody td{padding:9px 12px !important; border-bottom:1px solid var(--line) !important;}
tbody tr:nth-child(even){background:#f7fafd;}
tbody tr:hover{background:#eef5ff;}

/* ---------- 3D BUTTONS: raised, pressed-down + colour change on press ---------- */
button,.btn3d{
  position:relative; border:none !important; border-radius:12px !important;
  font-weight:800 !important; letter-spacing:.3px; cursor:pointer;
  padding:10px 18px !important; color:#fff !important;
  background:linear-gradient(180deg,#2f5d96 0%,var(--navy) 100%);
  box-shadow:0 6px 0 #07182e, 0 10px 18px rgba(11,37,69,.30) !important; /* the 3D ledge */
  transform:translateY(0); transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
button:hover,.btn3d:hover{filter:brightness(1.09);}
button:active,.btn3d:active{ /* visibly pressed: sinks onto its ledge + colour changes */
  transform:translateY(5px) !important;
  box-shadow:0 1px 0 #07182e, inset 0 3px 8px rgba(0,0,0,.35) !important;
  filter:brightness(.86) saturate(1.25);
}
.btn3d.emerald,button.emerald{background:linear-gradient(180deg,#37b489 0%,#1d7a52 100%);
  box-shadow:0 6px 0 #0e3d29, 0 10px 18px rgba(29,122,82,.30) !important;}
.btn3d.emerald:active{box-shadow:0 1px 0 #0e3d29, inset 0 3px 8px rgba(0,0,0,.35) !important;}
.btn3d.copper,button.copper{background:linear-gradient(180deg,#cd8a52 0%,var(--copper) 100%);
  box-shadow:0 6px 0 #5e3115, 0 10px 18px rgba(176,106,59,.30) !important;}
.btn3d.copper:active{box-shadow:0 1px 0 #5e3115, inset 0 3px 8px rgba(0,0,0,.35) !important;}
.btn3d.crimson,button.crimson{background:linear-gradient(180deg,#d4555f 0%,var(--crimson) 100%);
  box-shadow:0 6px 0 #5e131a, 0 10px 18px rgba(179,48,58,.30) !important;}
.btn3d.crimson:active{box-shadow:0 1px 0 #5e131a, inset 0 3px 8px rgba(0,0,0,.35) !important;}
button:disabled{filter:grayscale(.5) brightness(.9); cursor:not-allowed; transform:none !important;}
button:focus-visible,.btn3d:focus-visible{outline:3px solid rgba(201,162,39,.65) !important; outline-offset:2px;}

/* ---------- misc polish ---------- */
.muted{color:#7d8da3 !important;}
.error{color:#b3303a; font-weight:600;}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c5d2e3;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#9fb3cd}
@media print{ .sidebar,.app-header,button,.btn3d{display:none !important;} .card{box-shadow:none !important;} }