/* =====================================================================
   RMS — site.css  (v3 — bold navy + emerald redesign)
   ---------------------------------------------------------------------
   Every class name that existed in the previous stylesheet is KEPT and
   restyled (badge-*, alert-*, btn-*, card, stat-tile, table.grid,
   pagination-wrap, form-*, login-*, toolbar, search-box, empty-state...)
   so every other page in the app that already references them inherits
   the new look automatically. New, additive classes are appended at the
   bottom for the richer dashboard components (quick actions, activity
   feed, dropdowns, notification panel, modals, section collapsing).

   SIGNATURE IDEA: a colour-coded "operations rail". Each functional
   area of the app (Leasing, Finance, Operations, Reports) is assigned
   one accent colour, used consistently in the sidebar section labels,
   stat tiles, badges and activity dots — so people navigate by colour,
   not just by label, the way a physical key-rack is organised by wing.

   PALETTE  : deep navy sidebar over a light slate canvas, emerald as the
              brand/core-action colour, rose/sky/amber for danger/info/
              warning states. Layered shadows + hover lift for cards.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand ---- */
  --primary:#059669;         /* emerald — brand / core actions */
  --primary-dark:#047857;
  --primary-light:#ECFDF5;
  --primary-soft:#D1FAE5;

  /* ---- Operations-rail accent colours (signature) ---- */
  --rail-leasing:#8B5CF6;    /* violet  */
  --rail-finance:#059669;    /* emerald */
  --rail-ops:#F59E06;        /* amber   */
  --rail-reports:#0EA5E9;    /* sky     */

  /* ---- Semantic ---- */
  --accent:#059669;
  --danger:#F43F5E;
  --warning:#F59E06;
  --info:#0EA5E9;

  /* ---- Neutrals ---- */
  --dark:#0B1B2B;
  --sidebar-bg-1:#0B1B2B;
  --sidebar-bg-2:#122035;
  --sidebar-text:#94A3B8;
  --sidebar-active:#059669;
  --bg:#F0F2F7;
  --card-bg:#ffffff;
  --border:#E2E8F0;
  --text:#0F172A;
  --text-muted:#64748B;

  /* ---- Shape / shadow ---- */
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
  --shadow-md:0 2px 6px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.10);
  --shadow-lg:0 6px 12px rgba(15,23,42,.07), 0 28px 70px rgba(15,23,42,.20);

  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.page-title,.brand span,.stat-value,.login-card h1{ font-family:var(--font-display); }

a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:none; color:var(--primary-dark); }

::selection{ background:var(--primary-soft); color:var(--primary-dark); }

:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

/* ---------- Top loading bar (partial postback feedback) ---------- */
#rmsLoadingBar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--rail-leasing),var(--primary),var(--rail-reports));
  box-shadow:0 0 12px rgba(5,150,105,.6);
  z-index:4000; transition:width .25s ease, opacity .3s ease; opacity:0;
}
#rmsLoadingBar.active{ opacity:1; }

/* ---------- Layout ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:264px; color:var(--sidebar-text);
  background:
    radial-gradient(900px 320px at -15% -12%, rgba(5,150,105,.20), transparent 58%),
    linear-gradient(180deg,var(--sidebar-bg-1),var(--sidebar-bg-2));
  flex-shrink:0; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; overflow-x:hidden;
  transition:transform .25s ease, width .2s ease; z-index:1000;
  border-right:1px solid rgba(255,255,255,.04);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:6px; }

.sidebar .brand{
  display:flex; align-items:center; gap:12px; padding:22px 20px;
  color:#fff; font-size:18px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08);
  letter-spacing:-.01em;
}
.sidebar .brand .logo-badge{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,#34D399,#059669 70%,#047857);
  display:flex; align-items:center; justify-content:center; font-weight:800;
  box-shadow:0 8px 20px rgba(5,150,105,.45), inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff; flex-shrink:0;
}

.sidebar nav{ padding:14px 12px 24px; }

.nav-section-title{
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#64748B;
  font-weight:700; padding:16px 10px 8px; transition:color .15s ease;
}
.nav-section-title:hover{ color:#E2E8F0; }
.nav-section-title::before{
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0;
  box-shadow:0 0 8px currentColor;
}
.nav-section-title .chev{ margin-left:auto; font-size:10px; transition:transform .2s ease; opacity:.7; }
.nav-section-title.collapsed .chev{ transform:rotate(-90deg); }

/* colour-code each section (signature "operations rail") */
#secLeasing{ color:var(--rail-leasing); }
#secFinance{ color:var(--rail-finance); }
#secOps{ color:var(--rail-ops); }
#secReports{ color:var(--rail-reports); }

.nav-group{ overflow:hidden; max-height:600px; transition:max-height .25s ease, opacity .2s ease; opacity:1; }
.nav-group.collapsed{ max-height:0; opacity:0; }

.sidebar a.nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; margin:2px 0;
  border-radius:var(--radius-sm); color:var(--sidebar-text); font-size:13.5px; font-weight:500;
  position:relative; transition:background .15s ease, color .15s ease, padding-left .15s ease;
}
.sidebar a.nav-link:hover{ background:rgba(255,255,255,.07); text-decoration:none; color:#fff; padding-left:16px; }
.sidebar a.nav-link.active{
  background:linear-gradient(90deg, rgba(5,150,105,.28), rgba(5,150,105,.05));
  color:#fff; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.sidebar a.nav-link.active::before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:0 6px 6px 0; background:var(--primary);
  box-shadow:0 0 12px rgba(5,150,105,.8);
}
.sidebar a.nav-link .icon{ width:20px; text-align:center; font-size:15px; flex-shrink:0; }
.sidebar a.nav-link .label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Desktop collapse-to-icons mode */
.sidebar.icon-mode{ width:80px; }
.sidebar.icon-mode .brand span,
.sidebar.icon-mode .nav-section-title,
.sidebar.icon-mode a.nav-link .label{ display:none; }
.sidebar.icon-mode a.nav-link{ justify-content:center; padding:12px; }
.sidebar.icon-mode a.nav-link.active::before{ left:0; }
.sidebar.icon-mode .nav-group{ max-height:none !important; opacity:1 !important; }

.rail-collapse-btn{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:rgba(255,255,255,.08); color:#fff; border:none; cursor:pointer;
  margin-left:auto; flex-shrink:0; transition:background .15s ease, transform .15s ease;
}
.rail-collapse-btn:hover{ background:rgba(5,150,105,.55); }

.main-wrap{ margin-left:264px; flex:1; display:flex; flex-direction:column; min-width:0; transition:margin-left .2s ease; }
.sidebar.icon-mode ~ .main-wrap{ margin-left:80px; }

/* ---------- Topbar ---------- */
.topbar{
  height:68px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 18px rgba(15,23,42,.05);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  position:sticky; top:0; z-index:900;
}
.topbar .page-title{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.topbar .topbar-right{ display:flex; align-items:center; gap:14px; }
.menu-toggle{
  display:none; background:var(--primary-light); color:var(--primary); border:none; border-radius:10px;
  width:36px; height:36px; font-size:17px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.icon-btn{
  position:relative; width:38px; height:38px; border-radius:var(--radius-sm);
  background:#fff; border:1px solid var(--border); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.icon-btn:hover{ background:var(--primary-light); border-color:var(--primary-soft); color:var(--primary-dark); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn .dot-badge{
  position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 3px;
  background:var(--danger); color:#fff; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(244,63,94,.45);
}

.topbar .user-chip{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 8px 4px 4px; border-radius:var(--radius-pill); transition:background .15s ease; }
.topbar .user-chip:hover{ background:var(--bg); }
.topbar .avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#34D399,#059669 70%,#047857);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  box-shadow:0 4px 12px rgba(5,150,105,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.topbar .role-badge{ font-size:11px; color:var(--text-muted); }

/* ---------- Dropdown (notifications / user menu) ---------- */
.dropdown-wrap{ position:relative; }
.dropdown-panel{
  position:absolute; right:0; top:calc(100% + 10px); width:320px; background:#fff;
  border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid var(--border);
  padding:10px; z-index:1200; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.dropdown-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-panel .dd-title{ font-size:12px; font-weight:700; text-transform:uppercase; color:var(--text-muted); padding:8px 10px; }
.dropdown-panel .dd-item{ padding:10px; border-radius:10px; font-size:13px; display:flex; gap:10px; align-items:flex-start; }
.dropdown-panel .dd-item:hover{ background:var(--bg); }
.dropdown-panel .dd-item .dd-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; box-shadow:0 0 6px currentColor; }

/* ---------- Content ---------- */
.content{ padding:26px; flex:1; }
.footer-note{ padding:16px 26px; color:var(--text-muted); font-size:12px; }

/* ---------- Greeting / page header ---------- */
.page-header{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.page-header h2{ margin:0 0 4px; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.page-header p{ margin:0; color:var(--text-muted); font-size:13.5px; }

/* ---------- Cards ---------- */
.card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#D6DEEC; }
.card + .card{ margin-top:18px; }
.card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap; }
.card-header h3{ margin:0; font-size:16px; font-weight:700; }

/* ---------- Stat tiles ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.stat-tile{
  background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; border:1px solid var(--border); position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat-tile::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary); }
.stat-tile.accent::after{ background:var(--rail-finance); }
.stat-tile.warning::after{ background:var(--rail-ops); }
.stat-tile.danger::after{ background:var(--danger); }
.stat-tile .stat-label{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.stat-tile .stat-value{ font-size:30px; font-weight:800; margin-top:8px; letter-spacing:-.02em; }
.stat-tile .stat-sub{ font-size:12px; color:var(--text-muted); margin-top:6px; }
/* gradient icon chips */
.stat-tile .stat-icon{
  position:absolute; right:16px; top:16px; width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,#34D399,#059669);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 8px 18px rgba(5,150,105,.38), inset 0 1px 0 rgba(255,255,255,.28);
}
.stat-tile.accent .stat-icon{ background:linear-gradient(135deg,#10B981,#047857); box-shadow:0 8px 18px rgba(5,150,105,.38); }
.stat-tile.warning .stat-icon{ background:linear-gradient(135deg,#FBBF24,#F59E06); box-shadow:0 8px 18px rgba(245,158,11,.38); }
.stat-tile.danger .stat-icon{ background:linear-gradient(135deg,#FB7185,#F43F5E); box-shadow:0 8px 18px rgba(244,63,94,.38); }

@media(max-width:1100px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .stat-grid{ grid-template-columns:1fr; } }

.two-col{ display:grid; grid-template-columns:2fr 1fr; gap:18px; }
@media(max-width:960px){ .two-col{ grid-template-columns:1fr; } }

/* ---------- Quick actions ---------- */
.quick-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.action-chip{
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:10px 18px 10px 12px; font-size:13.5px; font-weight:600;
  color:var(--text); box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.action-chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none; border-color:var(--primary-soft); }
.action-chip .chip-ico{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff; flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.action-chip.c1 .chip-ico{ background:var(--rail-leasing); }
.action-chip.c2 .chip-ico{ background:var(--rail-finance); }
.action-chip.c3 .chip-ico{ background:var(--rail-ops); }
.action-chip.c4 .chip-ico{ background:var(--rail-reports); }

/* ---------- Activity feed / alerts ---------- */
.activity-feed{ list-style:none; margin:0; padding:0; }
.activity-item{ display:flex; gap:12px; padding:12px 4px; border-bottom:1px dashed var(--border); }
.activity-item:last-child{ border-bottom:none; }
.activity-dot{ width:10px; height:10px; border-radius:50%; margin-top:5px; flex-shrink:0; box-shadow:0 0 6px currentColor; }
.activity-item .activity-title{ font-size:13.5px; font-weight:600; }
.activity-item .activity-meta{ font-size:12px; color:var(--text-muted); margin-top:2px; }

.alert-list{ display:flex; flex-direction:column; gap:10px; }
.alert-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border); font-size:13px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.alert-row:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.alert-row .alert-ico{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; background:var(--primary-light); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; border:none; border-radius:var(--radius-sm);
  padding:10px 18px; font-size:13.5px; font-weight:600; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
  font-family:var(--font-body);
}
.btn-primary{
  background:linear-gradient(135deg,#10B981,#059669 60%,#047857); color:#fff;
  box-shadow:0 6px 18px rgba(5,150,105,.32), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{ background:linear-gradient(135deg,#34D399,#059669 60%,#047857); text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 26px rgba(5,150,105,.42); }
.btn-outline{ background:#fff; color:var(--primary); border:1px solid var(--primary-soft); }
.btn-outline:hover{ background:var(--primary-light); text-decoration:none; }
.btn-danger{ background:var(--danger); color:#fff; box-shadow:0 6px 18px rgba(244,63,94,.30), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-danger:hover{ background:#E11D48; transform:translateY(-1px); box-shadow:0 10px 26px rgba(244,63,94,.40); }
.btn-success{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(5,150,105,.32), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-success:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn:focus-visible{ outline-offset:2px; }

/* ---------- Forms ---------- */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:var(--text); }
.form-control{
  width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:13.5px; background:#fff; color:var(--text); font-family:var(--font-body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover{ border-color:#CBD5E1; }
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-light); }
.form-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:700px){ .form-row{ grid-template-columns:1fr; } }
.required:after{ content:" *"; color:var(--danger); }
.field-error{ color:var(--danger); font-size:12px; margin-top:4px; display:block; }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 500px at 12% 12%, rgba(5,150,105,.28), transparent 60%),
    radial-gradient(700px 420px at 88% 88%, rgba(14,165,233,.20), transparent 55%),
    linear-gradient(135deg,#0B1B2B,#122035);
  padding:20px;
}
.login-card{
  width:100%; max-width:410px; background:#fff; border-radius:20px; padding:36px 34px;
  box-shadow:var(--shadow-lg);
}
.login-card h1{ font-size:23px; margin:0 0 6px; font-weight:800; }
.login-card p.sub{ color:var(--text-muted); margin:0 0 22px; font-size:13px; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-sm); }
table.grid{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.grid th{
  text-align:left; background:#F8FAFC; color:var(--text-muted); font-weight:700;
  padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
  text-transform:uppercase; font-size:11px; letter-spacing:.04em;
}
table.grid td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.grid tr{ transition:background .12s ease; }
table.grid tr:hover td{ background:var(--primary-light); }

.badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-success{ background:#D1FAE5; color:#047857; }
.badge-warning{ background:#FEF3C7; color:#B45309; }
.badge-danger{ background:#FFE4E6; color:#BE123C; }
.badge-info{ background:#E0F2FE; color:#0369A1; }
.badge-muted{ background:#F1F5F9; color:#64748B; }

.toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.toolbar .search-box{ display:flex; align-items:center; gap:8px; flex:1; max-width:340px; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:6px 8px 6px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.toolbar .search-box:focus-within{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-light); }
.toolbar .search-box input.form-control{ border:none; padding:4px; }
.toolbar .search-box input.form-control:focus{ box-shadow:none; }

.alert{ padding:13px 16px; border-radius:12px; font-size:13.5px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.alert-success{ background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }
.alert-danger{ background:#FFF1F2; color:#BE123C; border:1px solid #FECDD3; }
.alert-info{ background:#F0F9FF; color:#075985; border:1px solid #BAE6FD; }

.empty-state{ text-align:center; padding:56px 20px; color:var(--text-muted); }
.empty-state .empty-ico{ font-size:34px; margin-bottom:10px; opacity:.5; }

/* pagination */
.pagination-wrap{ margin-top:14px; text-align:right; font-size:12.5px; }
.pagination-wrap a, .pagination-wrap span{ padding:7px 12px; margin-left:4px; border-radius:8px; background:#fff; border:1px solid var(--border); transition:background .12s ease, border-color .12s ease; }
.pagination-wrap a:hover{ border-color:var(--primary); color:var(--primary); }
.pagination-wrap span.current{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 4px 12px rgba(5,150,105,.35); }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(11,27,43,.60); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:3000;
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  background:#fff; border-radius:18px; width:100%; max-width:480px; padding:26px;
  box-shadow:var(--shadow-lg); transform:translateY(10px) scale(.98); transition:transform .18s ease;
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-box h3{ margin:0 0 6px; }
.modal-box .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ---------- Skeleton loading ---------- */
.skeleton{ background:linear-gradient(90deg,#E9EDF3 25%,#F4F7FA 37%,#E9EDF3 63%); background-size:400% 100%; animation:skeleton-shine 1.3s ease infinite; border-radius:8px; }
@keyframes skeleton-shine{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:960px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar.icon-mode{ width:264px; }
  .main-wrap{ margin-left:0; }
  .sidebar.icon-mode ~ .main-wrap{ margin-left:0; }
  .menu-toggle{ display:flex; align-items:center; justify-content:center; }
  .rail-collapse-btn{ display:none; }
  .two-col{ grid-template-columns:1fr; }
}
@media(max-width:800px){
  .content{ padding:18px; }
  .topbar{ padding:0 16px; }
  .page-header{ align-items:flex-start; flex-direction:column; }
  .card{ padding:18px; }
  .toolbar .search-box{ max-width:none; }
  .login-card{ padding:28px 22px; }
}
@media(max-width:700px){
  .form-row{ grid-template-columns:1fr; }
}
@media(max-width:600px){
  .stat-grid{ grid-template-columns:1fr; }
  .topbar .role-badge{ display:none; }
  .footer-note{ padding:14px 18px; }
}