/*
 * Visual refinement v7
 * Presentation-only overrides. No payroll logic is changed.
 */
:root{
  --v7-page:#edf2f8;
  --v7-surface:#ffffff;
  --v7-surface-soft:#f7f9fc;
  --v7-border:#d8e1ec;
  --v7-text:#13233d;
  --v7-muted:#62738d;
  --v7-blue:#2f6fed;
  --v7-blue-dark:#1f56c5;
  --v7-green:#159a61;
  --v7-green-dark:#087948;
  --v7-amber:#d88912;
  --v7-navy:#10264d;
  --v7-shadow:0 10px 28px rgba(17,39,78,.08);
}

/* ---------- Main workspace ---------- */
body.app-page{
  background:var(--v7-page)!important;
  color:var(--v7-text);
}
body.app-page::before{display:none!important}
.app-shell{
  grid-template-columns:248px minmax(0,1fr)!important;
  gap:16px!important;
  max-width:none!important;
  width:100%!important;
  padding:14px!important;
}
.main-area{min-width:0!important;padding:0 0 16px!important}

.topbar{
  min-height:78px;
  top:14px!important;
  padding:15px 20px!important;
  margin-bottom:14px!important;
  border:1px solid var(--v7-border)!important;
  border-radius:18px!important;
  background:var(--v7-surface)!important;
  box-shadow:0 6px 18px rgba(17,39,78,.06)!important;
  backdrop-filter:none!important;
}
.topbar::after{display:none!important}
.topbar h1{font-size:1.55rem!important;line-height:1.15!important;color:var(--v7-text)!important}
.topbar .eyebrow{color:#657997!important}
.topbar-account{
  min-width:132px;
  padding:9px 13px!important;
  border-radius:14px!important;
  border:1px solid #d8e2ef!important;
  background:#f8fafd!important;
  box-shadow:none!important;
}
.topbar-status-dot{background:#22b86c!important;box-shadow:0 0 0 5px rgba(34,184,108,.12)!important}

.card,.summary-band,.summary-report-panel,.summary-report-meta,.summary-report-actions,
.payroll-period-summary-band,.send-progress,.payslip-summary-strip,.table-wrap,.empty-action{
  border-color:var(--v7-border)!important;
  background:var(--v7-surface)!important;
  box-shadow:var(--v7-shadow)!important;
  backdrop-filter:none!important;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:248px!important;
  height:calc(100vh - 28px)!important;
  min-height:0!important;
  top:14px!important;
  padding:12px 11px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,#102750 0%,#0f2348 58%,#0c1d3b 100%)!important;
  box-shadow:0 16px 38px rgba(8,24,55,.22)!important;
  overflow:hidden!important;
}
.side-brand{
  min-height:58px;
  padding:4px 4px 11px!important;
  margin-bottom:9px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.side-brand-mark{width:42px!important;height:42px!important;border-radius:12px!important}
.side-brand-mark img{width:28px!important;height:28px!important}
.side-brand-copy strong{font-size:.9rem!important;max-width:136px!important}
.side-brand-copy span,.side-brand-copy small{font-size:.68rem!important;max-width:140px!important}

/* Clean chevron collapse/expand button */
.sidebar-collapse-btn{
  position:relative!important;
  width:34px!important;height:34px!important;
  margin-left:auto!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  background:linear-gradient(135deg,#3b7cff,#1dbb91)!important;
  box-shadow:0 8px 18px rgba(20,92,200,.32)!important;
}
.sidebar-collapse-btn:hover{transform:translateY(-1px)!important;filter:brightness(1.08)!important}
.collapse-icon{
  position:relative!important;
  display:block!important;
  width:14px!important;height:14px!important;
  background:none!important;
}
.collapse-icon::before,.collapse-icon::after{
  content:""!important;
  position:absolute!important;
  left:3px!important;
  width:8px!important;height:2px!important;
  border-radius:99px!important;
  background:currentColor!important;
  transform-origin:left center!important;
}
.collapse-icon::before{top:4px!important;transform:rotate(-42deg)!important}
.collapse-icon::after{bottom:4px!important;transform:rotate(42deg)!important}
.app-shell.sidebar-collapsed .collapse-icon::before{left:4px!important;transform:rotate(42deg)!important}
.app-shell.sidebar-collapsed .collapse-icon::after{left:4px!important;transform:rotate(-42deg)!important}

.sidebar-workspace-chip{
  min-height:42px!important;
  margin:0 1px 9px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.sidebar-workspace-chip b{font-size:.72rem!important}
.sidebar-workspace-chip small{font-size:.62rem!important}
.workspace-pulse{width:8px!important;height:8px!important;margin-right:7px!important}

.sidebar-search{
  min-height:40px!important;
  margin:0 1px 9px!important;
  padding:5px 7px 5px 10px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.sidebar-search button{width:30px!important;height:30px!important;border-radius:9px!important;background:rgba(255,255,255,.12)!important}
.sidebar-search input{font-size:.76rem!important}

.side-nav{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 2px 7px 0!important;
  margin:0 -3px 0 0!important;
}
.nav-group{margin-bottom:7px!important;padding:0!important;border-radius:13px}
.nav-section{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px 8px 4px!important;
  font-size:.59rem!important;
  letter-spacing:.14em!important;
  color:#9db1ce!important;
}
.nav-section::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:none}
.side-nav a{
  min-height:40px!important;
  margin-bottom:3px!important;
  padding:6px 8px!important;
  gap:9px!important;
  border-radius:11px!important;
  color:#edf4ff!important;
  border:1px solid rgba(255,255,255,.04)!important;
  background:transparent!important;
  transform:none!important;
}
.side-nav a:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.09)!important}
.side-nav a b{font-size:.78rem!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.nav-icon-wrap{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.08)!important;
}
.nav-icon{width:17px!important;height:17px!important}
.nav-mini-badge{font-size:.55rem!important;padding:2px 6px!important}

/* Navigation group colors for instant identification */
.nav-overview .nav-section{color:#75adff!important}
.nav-overview a.active,.nav-overview a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(46,115,237,.48),rgba(46,115,237,.24))!important;
  border-color:rgba(116,169,255,.46)!important;
  box-shadow:inset 3px 0 0 #69a6ff!important;
}
.nav-overview .nav-icon-wrap{color:#cce1ff!important;background:rgba(71,135,244,.20)!important}
.nav-workforce .nav-section{color:#52d9bc!important}
.nav-workforce a.active,.nav-workforce a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(20,167,126,.42),rgba(20,167,126,.20))!important;
  border-color:rgba(83,218,185,.38)!important;
  box-shadow:inset 3px 0 0 #48d4af!important;
}
.nav-workforce .nav-icon-wrap{color:#bdf7e9!important;background:rgba(47,197,159,.17)!important}
.nav-payroll .nav-section{color:#ffc66c!important}
.nav-payroll a.active,.nav-payroll a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(216,137,18,.39),rgba(216,137,18,.19))!important;
  border-color:rgba(255,198,108,.38)!important;
  box-shadow:inset 3px 0 0 #ffc35c!important;
}
.nav-payroll .nav-icon-wrap{color:#ffe2af!important;background:rgba(234,165,52,.16)!important}
.nav-personal .nav-section{color:#d79bff!important}
.nav-personal a.active,.nav-personal a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(159,83,214,.39),rgba(159,83,214,.19))!important;
  border-color:rgba(216,155,255,.34)!important;
  box-shadow:inset 3px 0 0 #d59bff!important;
}
.nav-personal .nav-icon-wrap{color:#eed4ff!important;background:rgba(172,97,224,.16)!important}
.nav-admin .nav-section{color:#ff929f!important}
.nav-admin a.active,.nav-admin a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(220,71,92,.40),rgba(220,71,92,.18))!important;
  border-color:rgba(255,146,159,.35)!important;
  box-shadow:inset 3px 0 0 #ff8c9b!important;
}
.nav-admin .nav-icon-wrap{color:#ffd0d6!important;background:rgba(226,84,105,.17)!important}

.sidebar-bottom{
  flex:0 0 auto!important;
  padding:8px 0 0!important;
  margin-top:0!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  background:transparent!important;
}
.theme-toggle-block{margin-bottom:6px!important}
.theme-toggle-btn{
  min-height:40px!important;
  padding:6px 8px!important;
  gap:8px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
.theme-toggle-icon{width:28px!important;height:28px!important;border-radius:9px!important;display:grid;place-items:center;background:rgba(106,143,255,.16)!important;color:#b9ccff!important}
.theme-toggle-copy b{font-size:.73rem!important}
.theme-toggle-copy small{font-size:.58rem!important}
.theme-toggle-switch{width:34px!important;height:19px!important;flex-basis:34px!important;padding:2px!important}
.theme-toggle-switch i{width:15px!important;height:15px!important}
.dark-mode .theme-toggle-switch i{transform:translateX(15px)!important}
.side-user{
  min-height:48px!important;
  padding:6px 7px!important;
  gap:8px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
.avatar.account-avatar-link{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important;font-size:.8rem!important}
.side-user-copy strong{font-size:.73rem!important;max-width:116px!important}
.side-user-copy span{font-size:.58rem!important;max-width:120px!important}
.logout{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  border-radius:9px!important;
  background:rgba(235,87,108,.13)!important;
  color:#ffc0c9!important;
}
.logout:hover{background:rgba(235,87,108,.23)!important}

.app-shell.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)!important}
.app-shell.sidebar-collapsed .sidebar{width:76px!important;padding:11px 8px!important}
.app-shell.sidebar-collapsed .sidebar-collapse-btn{right:-13px!important;top:15px!important;width:30px!important;height:30px!important}
.app-shell.sidebar-collapsed .side-brand-mark{width:38px!important;height:38px!important}
.app-shell.sidebar-collapsed .side-nav a{min-height:38px!important;padding:4px!important}
.app-shell.sidebar-collapsed .nav-icon-wrap{width:32px!important;height:32px!important;flex-basis:32px!important}

/* ---------- Dashboard hero ---------- */
.dashboard-hero{
  min-height:248px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.72fr)!important;
  gap:24px!important;
  align-items:stretch!important;
  margin-bottom:14px!important;
  padding:28px 30px!important;
  border:0!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 86% 10%,rgba(61,210,174,.20),transparent 25%),
    radial-gradient(circle at 5% 0%,rgba(111,158,255,.27),transparent 25%),
    linear-gradient(120deg,#173a78 0%,#2154a9 58%,#1d6b91 100%)!important;
  box-shadow:0 14px 32px rgba(21,58,119,.20)!important;
}
.dashboard-hero::before{display:none!important}
.hero-main{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;max-width:none!important}
.hero-main .eyebrow.light{color:#bcd8ff!important;text-shadow:none!important}
.hero-main h2{
  max-width:760px!important;
  margin:6px 0 10px!important;
  font-size:clamp(2rem,2.45vw,2.75rem)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
  color:#ffffff!important;
  text-wrap:balance;
}
.hero-main p{
  max-width:720px!important;
  margin:0!important;
  color:rgba(239,246,255,.84)!important;
  font-size:.96rem!important;
  line-height:1.6!important;
}
.hero-actions{margin-top:20px!important;gap:10px!important}
.hero-actions .btn.glass{
  min-height:42px!important;
  padding:10px 16px!important;
  color:#1d407f!important;
  background:#ffffff!important;
  border:1px solid rgba(255,255,255,.84)!important;
  box-shadow:0 8px 18px rgba(5,30,78,.18)!important;
}
.hero-actions .btn.glass:hover{background:#f4f8ff!important}
.hero-actions .btn.glass.subtle{
  color:#ffffff!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  box-shadow:none!important;
}
.hero-actions .btn.glass.subtle:hover{background:rgba(255,255,255,.16)!important}

.hero-note{
  min-width:0!important;
  padding:22px!important;
  border-radius:18px!important;
  color:var(--v7-text)!important;
  background:#ffffff!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 16px 30px rgba(6,34,85,.20)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  position:relative!important;
  overflow:hidden!important;
}
.hero-note::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--v7-blue)}
.hero-note[data-status="finished"]::before{background:var(--v7-green)}
.hero-note h3{margin:0 0 7px!important;color:var(--v7-text)!important;font-size:1.18rem!important}
.hero-note p,.hero-note span,.hero-note small{color:var(--v7-muted)!important}
.hero-note p{font-size:.82rem!important;margin:0!important}
.hero-note .hero-amount{margin:15px 0 11px!important;font-size:1.9rem!important;color:var(--v7-text)!important}
.hero-note .mini-info-row{padding:10px 0!important;border-top:1px solid #e1e8f1!important}
.hero-note .mini-info-row b{color:var(--v7-blue-dark)!important}
.hero-note[data-status="finished"] .mini-info-row b{color:var(--v7-green-dark)!important}
.hero-note small{font-size:.74rem!important;line-height:1.45!important}

/* ---------- Dashboard statistics ---------- */
.grid.stats.dashboard-stats{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.dashboard-stats .stat-card{
  min-height:104px!important;
  padding:16px 17px!important;
  border-radius:16px!important;
  background:#ffffff!important;
  border:1px solid var(--v7-border)!important;
  box-shadow:0 7px 20px rgba(17,39,78,.06)!important;
}
.dashboard-stats .stat-card::after{display:none!important}
.dashboard-stats .stat-card:nth-child(1){border-top:4px solid #5578ff!important}
.dashboard-stats .stat-card:nth-child(2){border-top:4px solid #8b5cf6!important}
.dashboard-stats .stat-card:nth-child(3){border-top:4px solid #17a9de!important}
.dashboard-stats .stat-card:nth-child(4){border-top:4px solid #17b978!important}
.dashboard-stats .stat-icon{
  width:44px!important;height:44px!important;flex:0 0 44px!important;
  border-radius:13px!important;
  box-shadow:0 9px 18px rgba(46,102,230,.18)!important;
}
.dashboard-stats .stat-card span{font-size:.65rem!important;letter-spacing:.12em!important}
.dashboard-stats .stat-card strong{font-size:1.42rem!important;line-height:1.1!important;margin-top:4px!important}
.dashboard-stats .stat-card small{font-size:.72rem!important}

.section-title{
  margin:18px 0 12px!important;
  align-items:center!important;
}
.section-title h2{font-size:1.35rem!important;color:var(--v7-text)!important}
.section-title p{margin-top:6px!important;color:var(--v7-muted)!important}
.section-title > .btn,.section-title .btn{background:#ffffff!important;border-color:#ccd8e6!important}

/* ---------- Period cards: clearly Open vs Finished ---------- */
.period-grid{
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;
  gap:14px!important;
}
.period-card{
  position:relative!important;
  min-height:218px!important;
  padding:21px 20px 18px!important;
  border-radius:17px!important;
  overflow:hidden!important;
  text-decoration:none!important;
  box-shadow:0 8px 22px rgba(17,39,78,.07)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.period-card:hover{transform:translateY(-2px)!important}
.period-card::before{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;top:0!important;
  width:auto!important;height:6px!important;
  border-radius:0!important;
}
.period-card::after{
  content:""!important;
  position:absolute!important;
  right:-50px!important;bottom:-70px!important;
  width:170px!important;height:170px!important;
  border-radius:50%!important;
  pointer-events:none!important;
}
.period-card > *{position:relative;z-index:1}
.period-card h3{margin:0 0 13px!important;font-size:1.08rem!important;color:var(--v7-text)!important}
.period-card .meta{display:flex!important;gap:7px!important;flex-wrap:wrap!important;margin-bottom:12px!important}
.period-card .pill{font-size:.68rem!important;padding:6px 9px!important;box-shadow:none!important}
.period-card .meta .pill:first-child::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;
}
.period-card .moneyline{padding:11px 0!important;border-top:1px dashed rgba(91,111,143,.28)!important}
.period-card .moneyline span{font-size:.82rem!important;color:#61738d!important}
.period-card .moneyline b{font-size:.94rem!important;color:var(--v7-text)!important}
.period-card .moneyline:last-child b{font-size:1.08rem!important}

.period-card.period-open{
  background:linear-gradient(145deg,#ffffff 0%,#f5f8ff 72%,#ebf2ff 100%)!important;
  border:1px solid #aac7f4!important;
}
.period-card.period-open::before{background:linear-gradient(90deg,#2f6fed,#6b9bff)!important}
.period-card.period-open::after{background:radial-gradient(circle,rgba(47,111,237,.13),transparent 67%)!important}
.period-card.period-open:hover{border-color:#78a5ea!important;box-shadow:0 13px 28px rgba(47,111,237,.13)!important}
.period-card.period-open .pill.blue{background:#e5efff!important;border-color:#bfd5fb!important;color:#245bc7!important}

.period-card.period-finished{
  background:linear-gradient(145deg,#ffffff 0%,#f2fbf6 70%,#e5f7ed 100%)!important;
  border:1px solid #9dd5b6!important;
}
.period-card.period-finished::before{background:linear-gradient(90deg,#159a61,#52c88e)!important}
.period-card.period-finished::after{background:radial-gradient(circle,rgba(21,154,97,.13),transparent 67%)!important}
.period-card.period-finished:hover{border-color:#72bf95!important;box-shadow:0 13px 28px rgba(21,154,97,.13)!important}
.period-card.period-finished .pill.green{background:#def6e9!important;border-color:#b3e3c8!important;color:#087948!important}
.period-card .pill.gray{background:#f2f5f9!important;border-color:#dae2ed!important;color:#5d6e87!important}
.period-card .pill.amber{background:#fff1d7!important;border-color:#f2d39c!important;color:#a56909!important}

/* ---------- Controls and data views ---------- */
.btn{
  border-radius:11px!important;
  background:#ffffff!important;
  border-color:#ccd8e6!important;
  color:#203654!important;
  box-shadow:0 3px 9px rgba(17,39,78,.05)!important;
}
.btn.primary{background:linear-gradient(135deg,#2f6fed,#5487f5)!important;border-color:transparent!important;color:#fff!important}
.btn.danger{background:linear-gradient(135deg,#dd5367,#c83d53)!important;border-color:transparent!important;color:#fff!important}
.filters{background:#f7f9fc!important;border-color:#dce4ee!important;border-radius:14px!important}
input,select,textarea{border-radius:10px!important;background:#ffffff!important;border-color:#cad6e5!important}
.table-wrap{border-radius:14px!important}
.data-table thead th{background:#f0f4f9!important;color:#52647e!important}
.data-table tbody tr:nth-child(even){background:#fafbfd!important}
.data-table tbody tr:hover td{background:#f2f6fb!important}

/* ---------- Dark mode ---------- */
html.dark-mode body.app-page,body.dark-mode.app-page{
  --v7-page:#0b1220;
  --v7-surface:#111b2d;
  --v7-surface-soft:#152238;
  --v7-border:#263651;
  --v7-text:#edf3ff;
  --v7-muted:#aab8ce;
  background:#0b1220!important;
}
.dark-mode .topbar,.dark-mode .card,.dark-mode .summary-band,.dark-mode .summary-report-panel,
.dark-mode .summary-report-meta,.dark-mode .summary-report-actions,.dark-mode .payroll-period-summary-band,
.dark-mode .send-progress,.dark-mode .payslip-summary-strip,.dark-mode .table-wrap,.dark-mode .empty-action{
  background:#111b2d!important;border-color:#263651!important;color:#edf3ff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22)!important;
}
.dark-mode .topbar-account{background:#152238!important;border-color:#2b3e5d!important}
.dark-mode .dashboard-hero{
  background:
    radial-gradient(circle at 86% 10%,rgba(43,199,151,.16),transparent 25%),
    radial-gradient(circle at 5% 0%,rgba(83,125,231,.20),transparent 25%),
    linear-gradient(120deg,#122951 0%,#193c76 58%,#17506b 100%)!important;
}
.dark-mode .hero-note{background:#101a2b!important;border-color:#2b3d5a!important}
.dark-mode .hero-note h3,.dark-mode .hero-note .hero-amount{color:#f2f7ff!important}
.dark-mode .hero-note p,.dark-mode .hero-note span,.dark-mode .hero-note small{color:#aebcd1!important}
.dark-mode .hero-note .mini-info-row{border-color:#2b3a55!important}
.dark-mode .hero-note .mini-info-row b{color:#88b3ff!important}
.dark-mode .hero-note[data-status="finished"] .mini-info-row b{color:#7de0aa!important}
.dark-mode .dashboard-stats .stat-card{background:#111b2d!important;border-color:#263651!important}
.dark-mode .dashboard-stats .stat-card strong,.dark-mode .section-title h2{color:#edf3ff!important}
.dark-mode .section-title > .btn,.dark-mode .section-title .btn{background:#152238!important;border-color:#2d405f!important;color:#eaf2ff!important}

.dark-mode .period-card{box-shadow:0 10px 28px rgba(0,0,0,.22)!important}
.dark-mode .period-card h3,.dark-mode .period-card .moneyline b{color:#f2f7ff!important}
.dark-mode .period-card .moneyline span{color:#afbdd1!important}
.dark-mode .period-card .moneyline{border-color:rgba(174,190,216,.22)!important}
.dark-mode .period-card.period-open{
  background:linear-gradient(145deg,#122039 0%,#162a4a 70%,#18345c 100%)!important;
  border-color:#3d669f!important;
}
.dark-mode .period-card.period-open::before{background:linear-gradient(90deg,#5d91ff,#83adff)!important}
.dark-mode .period-card.period-open::after{background:radial-gradient(circle,rgba(80,135,255,.18),transparent 67%)!important}
.dark-mode .period-card.period-open .pill.blue{background:#193762!important;border-color:#315f9d!important;color:#c3d9ff!important}
.dark-mode .period-card.period-finished{
  background:linear-gradient(145deg,#10231a 0%,#143222 70%,#163d29 100%)!important;
  border-color:#397858!important;
}
.dark-mode .period-card.period-finished::before{background:linear-gradient(90deg,#26c979,#68dca2)!important}
.dark-mode .period-card.period-finished::after{background:radial-gradient(circle,rgba(38,201,121,.17),transparent 67%)!important}
.dark-mode .period-card.period-finished .pill.green{background:#163b27!important;border-color:#2a6744!important;color:#bff1d3!important}
.dark-mode .period-card .pill.gray{background:#18263c!important;border-color:#2d405e!important;color:#bfcbdd!important}
.dark-mode .period-card .pill.amber{background:#3a2b10!important;border-color:#6c4e1c!important;color:#ffd998!important}
.dark-mode .btn{background:#152238!important;border-color:#2d405f!important;color:#eaf2ff!important}
.dark-mode .btn.primary{background:linear-gradient(135deg,#477dff,#6897ff)!important;border-color:transparent!important}
.dark-mode .filters{background:#111c2e!important;border-color:#263651!important}
.dark-mode input,.dark-mode select,.dark-mode textarea{background:#111c2e!important;border-color:#30435f!important;color:#edf3ff!important}
.dark-mode .data-table thead th{background:#16243a!important;color:#b7c4d8!important}
.dark-mode .data-table tbody tr:nth-child(even){background:#101a2b!important}
.dark-mode .data-table tbody tr:hover td{background:#17263d!important}

/* ---------- Responsive ---------- */
@media (max-width:1250px){
  .dashboard-hero{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)!important}
  .grid.stats.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:1100px){
  .app-shell,.app-shell.sidebar-collapsed{grid-template-columns:1fr!important;padding:10px!important}
  .sidebar,.app-shell.sidebar-collapsed .sidebar{
    width:auto!important;height:calc(100vh - 20px)!important;top:10px!important;left:10px!important;right:10px!important;
    padding:12px 11px!important;border-radius:18px!important;
  }
  .app-shell.sidebar-collapsed .sidebar-collapse-btn{position:static!important;width:34px!important;height:34px!important}
  .app-shell.sidebar-collapsed .side-nav a{min-height:40px!important;padding:6px 8px!important;justify-content:flex-start!important}
  .app-shell.sidebar-collapsed .nav-icon-wrap{width:30px!important;height:30px!important;flex-basis:30px!important}
  .topbar{top:10px!important}
}
@media (max-width:860px){
  .dashboard-hero{grid-template-columns:1fr!important;padding:23px 20px!important}
  .hero-main h2{font-size:2rem!important}
  .grid.stats.dashboard-stats{grid-template-columns:1fr!important}
  .period-grid{grid-template-columns:1fr!important}
}