/* ============================================================================
   MTS — V2 Design System · Components
   Subset of mts-html/css/mts.css needed so far (auth/login screens).
   More sections will be added as later components are implemented.
   ============================================================================ */

/* MudBlazor sets body{color:var(--mud-palette-text-primary);background-color:
   var(--mud-palette-background)} which are fixed light-theme values and do not
   follow our dark/light tokens, so inherited text/backgrounds (e.g. .fw7 titles,
   gaps around .page-header) render illegibly in dark mode. */
html{font-family:'Quicksand',sans-serif;}
body{color:var(--text);background-color:var(--bg);font-family:'Quicksand',sans-serif;}

/* Base typography helpers (scoped additions only — do not override existing
   global body/html rules already defined in app.css) */
h1,h2,h3,h4,h5{font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text);}
h1{font-size:clamp(24px,3.2vw,32px);}
h2{font-size:clamp(20px,2.4vw,26px);}
h3{font-size:clamp(16px,1.7vw,19px);}
.mono{font-family:'Fira Code',ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 1;}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);}
.label.accent-label{color:var(--accent);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--radius-sm);font-family:'Quicksand',sans-serif;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--text);transition:background .12s,border-color .12s,transform .04s,filter .12s;}
.btn:hover{border-color:var(--border-strong);color:var(--text);box-shadow:var(--shadow-sm);}
.btn:not(.btn-primary):not(.btn-danger):not(.btn-info):hover{filter:brightness(.95);}
html[data-mts-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-info):hover{filter:brightness(1.18);}
.btn:active{transform:translateY(1px);}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff;}
.btn-ghost{background:transparent;}
.btn-danger{background:var(--negative);color:#fff;border-color:var(--negative);}
.btn-danger:hover{filter:brightness(.93);color:#fff;}
.btn-info{background:var(--info);color:#fff;border-color:var(--info);}
.btn-info:hover{color:#fff;}
.btn-sm{padding:7px 12px;font-size:12.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn:disabled:hover{background:var(--surface-2);border-color:var(--border);color:var(--text);}
/* Bootstrap ships `.btn-primary:disabled`/`.btn-danger:disabled` overrides
   (blue/red) at the same specificity as our `.btn-primary`/`.btn-danger`. Restore
   the MTS accent/negative colors for disabled "Coming soon" CTAs. */
.btn-primary:disabled,.btn-primary.disabled{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-danger:disabled,.btn-danger.disabled{background:var(--negative);color:#fff;border-color:var(--negative);}
.btn-primary:disabled:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Inputs */
.input,select.input,textarea.input{width:100%;padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'Quicksand',sans-serif;font-size:14px;font-weight:500;color:var(--text);outline:none;transition:border-color .15s,background .15s,box-shadow .15s;}
.input:hover{border-color:var(--border-strong);}
.input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-bg);}
.input.error{border-color:var(--negative);background:var(--negative-bg);box-shadow:0 0 0 3px rgba(239,71,67,.12);}
.input::placeholder{color:var(--muted);}
.input-icon{position:relative;display:flex;align-items:center;}
.input-icon > svg{position:absolute;left:12px;width:15px;height:15px;color:var(--muted);pointer-events:none;}
.input-icon .input{padding-left:38px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field > .label{margin:0;}

/* Password field: right-side show/hide action */
.pw-field .input.has-actions{padding-right:76px;}
.pw-actions{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;}
.pw-btn{width:30px;height:30px;padding:0;border:none;background:transparent;border-radius:8px;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .12s,color .12s;}
.pw-btn:hover{background:var(--surface);color:var(--text);}
.pw-btn svg{width:16px !important;height:16px !important;position:static !important;left:auto !important;pointer-events:auto !important;}

/* Segmented strength meter (red -> green) */
.pw-strength{margin-top:9px;display:flex;flex-direction:column;gap:6px;}
.pw-bars{display:flex;gap:5px;}
.pw-bars i{flex:1;height:5px;border-radius:999px;background:var(--border);}
.pw-label{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);transition:color .18s;}

/* Checkbox */
.checkbox{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);font-weight:500;cursor:pointer;user-select:none;}
.checkbox input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--surface);cursor:pointer;position:relative;flex:0 0 auto;transition:background .12s,border-color .12s;}
.checkbox input:checked{background:var(--accent);border-color:var(--accent);}
.checkbox input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* Info icon (hover tooltip trigger) */
.info-icon{width:13px;height:13px;color:var(--muted);cursor:help;vertical-align:middle;flex-shrink:0;}
.info-icon:hover{color:var(--text-2);}
.label .info-icon{margin-left:2px;}

/* Layout helpers */
/* Bootstrap's `.row{flex-wrap:wrap; margin-right:-12px; margin-left:-12px}`
   grid rules are never overridden by this `.row` (same specificity, declared
   after bootstrap.min.css, but flex-wrap/margin aren't among its properties)
   so they leak through: nested `.row`s (e.g. the legend swatch+label rows)
   get pulled -12px on each side, overlapping their siblings. The mockup's
   `.row` has no such collision (no bootstrap loaded) and is implicitly
   nowrap with zero margin. */
.row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin:0;}
.col{display:flex;flex-direction:column;gap:12px;}
.spacer{flex:1;}

/* Bootstrap ships a `.row > *{width:100%}` grid rule that forces every direct
   child onto its own line. Neutralize it for V2 `.row`s anywhere inside the
   auth split layout (form side and hero side) so items sit on a single line
   as in the mockup. */
.auth .row{flex-wrap:nowrap;}
.auth .row > *:not(.live-dot):not(.check-dot){width:auto;max-width:none;flex-shrink:initial;padding:0;margin-top:0;}
.auth .row > .spacer{flex:1;}

/* Icon button (topbar theme toggle, etc.) */
.icon-btn{width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;display:grid;place-items:center;transition:background .12s,color .12s,border-color .12s,box-shadow .12s,filter .12s;}
.icon-btn:hover{color:var(--accent);border-color:var(--border-strong);box-shadow:var(--shadow-sm);filter:brightness(.95);}
html[data-mts-theme="dark"] .icon-btn:hover{filter:brightness(1.18);}
.icon-btn svg{width:18px;height:18px;}
.icon-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.theme-toggle .moon{display:none;}
html[data-mts-theme="dark"] .theme-toggle .sun{display:none;}
html[data-mts-theme="dark"] .theme-toggle .moon{display:block;}

/* Auth split layout */
.auth, .auth h1, .auth h2, .auth h3, .auth h4, .auth h5,
.auth input, .auth button, .auth select, .auth textarea{font-family:'Quicksand',sans-serif;}
.auth{display:grid;grid-template-columns:45% 1fr;min-height:100vh;background:var(--bg);}
.auth a{color:var(--accent-2);text-decoration:none;font-weight:600;}
.auth a:hover{text-decoration:none;}
.auth h1, .auth h2, .auth h3, .auth h4, .auth h5{color:#262626;font-weight:700;letter-spacing:-.02em;margin:0;}
.auth h1{font-size:clamp(24px,3.2vw,32px);}
html[data-mts-theme="dark"] .auth h1, html[data-mts-theme="dark"] .auth h2,
html[data-mts-theme="dark"] .auth h3, html[data-mts-theme="dark"] .auth h4,
html[data-mts-theme="dark"] .auth h5{color:var(--text);}
.auth-hero{position:relative;overflow:hidden;padding:40px 48px;background:var(--surface-2);display:flex;flex-direction:column;}
.auth-hero .stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,transparent 0 30px,color-mix(in srgb,var(--accent) 8%,transparent) 30px 31px);pointer-events:none;}
.auth-hero .glow{position:absolute;right:-100px;bottom:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--accent-bg) 0%,transparent 70%);pointer-events:none;}
.auth-hero .brand{position:relative;z-index:1;}
.auth-hero .content{margin-top:auto;position:relative;z-index:1;max-width:460px;}
.auth-hero .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--accent);margin-bottom:14px;}
.auth-hero .htitle{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:16px;}
.auth-hero .hbody{font-size:14.5px;line-height:1.55;color:var(--text-2);margin-bottom:30px;}
.auth-preview{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;max-width:380px;box-shadow:var(--shadow-md);}
.row > .live-dot{flex:0 0 auto;width:8px;height:8px;padding:0;border-radius:50%;background:var(--live);animation:mts-pulse 1.4s infinite;}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.pill-internal{background:var(--surface-3);color:var(--muted);}
.pill-live{background:var(--negative-bg);color:var(--negative);}
.pill .live-dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px var(--negative-bg);animation:mts-pulse 1.4s infinite;}
.check-dot{flex:0 0 auto;width:22px;height:22px;min-width:22px;min-height:22px;aspect-ratio:1/1;border-radius:50%;background:var(--accent-bg);color:var(--accent-2);display:grid;place-items:center;box-sizing:border-box;padding:0;}
.check-dot svg{width:13px;height:13px;}
@keyframes mts-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.bigtimer{font-family:'Fira Code',monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 1;font-size:clamp(48px,9vw,108px);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--accent);}
html[data-mts-theme="dark"] .bigtimer.live{text-shadow:0 0 30px rgba(255,161,22,.35);}
.bigtimer.idle{color:var(--muted);}

.tick{display:flex;gap:3px;height:8px;margin-top:10px;}
.tick > i{flex:1;background:var(--surface-2);border-radius:1px;}
.tick > i.on{background:var(--accent);}
.tick > i.soon{background:var(--accent-bg);}

/* Page header */
.page-header{margin-bottom:4px;text-align:left;}
.page-header-titles{flex:0 0 auto;}
.page-header-titles h1{font-size:21px;margin-top:1px;font-weight:700;}
.page-header-actions{display:flex;align-items:center;gap:8px;}

@media (max-width:760px){
  .page-header{flex-wrap:wrap;row-gap:10px;}
  .page-header > .spacer{flex-basis:100%;height:0;}
  .page-header-actions{flex-wrap:wrap;}
  .period-label{min-width:0;}
}

/* Page header relocated into the top app bar */
.mts-topbar-header{flex:1;align-items:center;margin-bottom:0;margin-left:8px;min-width:0;}
.mts-topbar-header .page-header-titles{display:block;min-width:0;}
.mts-topbar-header .page-header-titles h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mts-topbar-header .label{white-space:nowrap;}
.mts-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.mts-topbar-header ~ .icon-btn{margin-left:10px;}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 24px;color:var(--text);}
.card-lg{border-radius:var(--radius-lg);}

/* Progress bar */
.bar{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
.bar > span{display:block;height:100%;background:var(--accent);border-radius:3px;}

.console{position:relative;}
.auth-form{display:flex;flex-direction:column;padding:24px 40px;overflow-y:auto;}
.auth-form .topbar{display:flex;justify-content:flex-end;}
.auth-form .body{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0;}
.auth-form .body > .inner{width:100%;max-width:380px;}
.auth-form .foot{text-align:center;font-size:11.5px;color:var(--muted);padding:8px 0;}
.divider{display:flex;align-items:center;gap:12px;margin:8px 0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border);}
@media (max-width:900px){
  .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .auth-hero{padding:24px 22px;min-height:200px;}
  .auth-hero .htitle{font-size:26px;}
  .auth-hero .hbody{margin-bottom:16px;}
  .auth-preview{display:none;}
  .auth-form{padding:20px 22px;}
}
@media (max-width:640px){
  .auth-hero{min-height:140px;padding:18px;}
  .auth-hero .htitle{font-size:22px;}
}

/* Utility */
.text-accent{color:var(--accent-2);} .text-muted{color:var(--muted);} .text-pos{color:var(--positive);} .text-neg{color:var(--negative);}
.fw6{font-weight:600;} .fw7{font-weight:700;} .mt0{margin-top:0;} .center{text-align:center;}

/* App shell — sidebar + topbar (NavMenu / MainLayout) */
.kbd{padding:1px 5px;border:1px solid var(--border);border-radius:4px;font-size:10.5px;font-family:'Fira Code',monospace;font-feature-settings:"zero" 1;color:var(--muted);background:var(--surface);}

.mts-sidebar{width:var(--side-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100%;font-family:'Quicksand',sans-serif;}
.mts-side-brand{padding:18px 16px 16px;display:flex;align-items:center;}
.mts-side-brand a{display:flex;cursor:pointer;}
.mts-logo{height:26px;max-width:150px;object-fit:contain;}
html[data-mts-theme="dark"] .mts-logo.mts-logo-light{display:none;}
.mts-logo.mts-logo-dark{display:none;}
html[data-mts-theme="dark"] .mts-logo.mts-logo-dark{display:block;}
.mts-side-search{margin:0 12px 14px;display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:13px;transition:border-color .12s,box-shadow .12s;}
.mts-side-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.mts-side-search svg{width:14px;height:14px;flex:0 0 auto;}
.mts-side-search .kbd{margin-left:auto;}
.mts-side-search-input{flex:1;min-width:0;border:none;background:transparent;outline:none;padding:0;color:var(--text);font-family:'Quicksand',sans-serif;font-size:13px;font-weight:500;}
.mts-side-search-input::placeholder{color:var(--muted);}
.mts-nav-hint{padding:2px 12px 4px 36px;font-size:11.5px;font-weight:600;color:var(--accent-2);letter-spacing:.01em;}
.mts-nav-hint-sub{padding-left:44px;}
.mts-nav-empty{padding:10px 14px;font-size:12.5px;color:var(--muted);font-style:italic;}
.mts-side-label{padding:6px 18px;}
.mts-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;}
.mts-nav-link{position:relative;}
.mts-nav-link .mud-nav-link{display:flex;align-items:center;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--text-2);background:transparent;cursor:pointer;text-decoration:none;transition:background .12s,color .12s;}
.mts-nav-link .mud-nav-link:hover{background:var(--surface-2);color:var(--text);text-decoration:none;}
.mts-nav-link .mud-nav-link.active{background:var(--accent-bg) !important;color:var(--accent-2) !important;font-weight:700;}
.mts-nav-link .mud-nav-link.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--accent);}
.mts-nav-link .mud-nav-link-text{display:flex;align-items:center;gap:11px;flex:1;}
.mts-nav-link svg{width:18px;height:18px;flex:0 0 auto;}
.mts-nav-link .kbd{margin-left:auto;}
.mts-nav-settings-header{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--text-2);background:transparent;border:none;cursor:pointer;transition:background .12s,color .12s;text-align:left;}
.mts-nav-settings-header:hover{background:var(--surface-2);color:var(--text);}
.mts-nav-settings-header>svg:first-child{width:18px;height:18px;flex:0 0 auto;}
.mts-nav-settings-header>span{flex:1;}
.mts-nav-chevron{width:16px;height:16px;flex:0 0 auto;transition:transform .2s;}
.mts-nav-chevron.open{transform:rotate(180deg);}
.mts-nav-sub{display:flex;flex-direction:column;gap:1px;margin-top:2px;padding-left:12px;}
.mts-nav-sub-link{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text-2);text-decoration:none;transition:background .12s,color .12s;}
.mts-nav-sub-link:hover{background:var(--surface-2);color:var(--text);text-decoration:none;}
.mts-nav-sub-link.active{background:var(--accent-bg);color:var(--accent-2);font-weight:700;}
.mts-nav-sub-link svg{width:16px;height:16px;flex:0 0 auto;}
.mts-side-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--border);}
.mts-side-user .data{min-width:0;flex:1;}
.mts-side-user .data .nm{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mts-side-user .data p{margin:0;font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mts-side-user .data p.rl{font-weight:700;letter-spacing:.04em;}
.mts-side-signout{flex:0 0 auto;color:var(--muted);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;cursor:pointer;}
.mts-side-signout:hover{background:var(--negative-bg);color:var(--negative);}
.mts-side-signout svg{width:16px;height:16px;}

/* Avatar (gradient circle with initials) */
.avatar{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:0 0 auto;background:linear-gradient(135deg,var(--accent),var(--accent-2));}

/* Settings avatar (uploaded image, circular) */
.settings-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:linear-gradient(135deg,var(--accent),var(--accent-2));}

/* Collapser (settings sections) */
.collapser{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:14px;overflow:hidden;}
.collapser > .summary{padding:16px 22px;display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);text-decoration:none;}
.collapser > .summary .chev{margin-left:auto;transition:transform .2s;color:var(--muted);display:grid;place-items:center;}
.collapser > .summary .chev svg{width:16px;height:16px;}
.collapser.open > .summary{background:var(--surface-2);border-bottom:1px solid var(--border);color:var(--text);}
.collapser.open > .summary .chev{transform:rotate(180deg);}
.collapser .body{padding:22px 24px;}

/* Boot splash (index.html #app placeholder, shown until Blazor renders) */
.mts-splash{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);}
.mts-splash-inner{text-align:center;}
.mts-splash-logo{display:block;height:48px;max-width:200px;object-fit:contain;margin:0 auto;}
.mts-splash-logo-dark{display:none;}
html[data-mts-theme="dark"] .mts-splash-logo-light{display:none;}
html[data-mts-theme="dark"] .mts-splash-logo-dark{display:block;}
.mts-splash-text{margin-top:18px;font-family:'Quicksand',sans-serif;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em;}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
.rep-grid{margin-bottom:16px;}
@media (max-width:1280px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:1024px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:900px){ .rep-grid{grid-template-columns:1fr !important;} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.daily-chart-row{display:flex;gap:14px;min-width:0;}
@media (max-width:760px){ .daily-chart-row{gap:4px;} }
@media (max-width:480px){ .daily-chart-row{gap:2px;} }

/* KPI cards */
.kpi{padding:18px 22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);}
.kpi .v{font-size:30px;font-weight:700;margin-top:8px;letter-spacing:-.02em;}
.kpi .v small{color:var(--muted);font-size:18px;}
.kpi .sub{font-size:12px;margin-top:8px;font-weight:600;color:var(--muted);}
.kpi .sub.up{color:var(--positive);} .kpi .sub.warn{color:var(--negative);}
.kpi.accent-top{position:relative;overflow:hidden;}
.kpi.accent-top::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);}

/* Filter tabs */
.tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.tab{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;background:var(--surface);color:var(--text-2);border:1px solid var(--border);cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.tab .n{font-size:11px;opacity:.7;}
.tab.active{background:var(--accent-bg);color:var(--accent-2);border-color:transparent;}

/* Segmented control */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px;}
.seg button{padding:5px 12px;border-radius:6px;font-size:12.5px;font-weight:700;color:var(--text-2);background:transparent;border:none;cursor:pointer;font-family:'Quicksand',sans-serif;}
.seg button.active{background:var(--accent);color:#fff;}

/* Period navigation (prev/next + period label) */
.period-nav{display:flex;align-items:center;gap:8px;}
.period-label{min-width:230px;text-align:center;white-space:nowrap;margin:0;}

/* Search box */
.searchbox{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:13px;}
.searchbox svg{width:14px;height:14px;flex:0 0 auto;}
.searchbox input{border:none;background:transparent;outline:none;color:var(--text);font-family:'Quicksand',sans-serif;font-size:13px;width:140px;}
.searchbox input::placeholder{color:var(--muted);}

/* Avatar stack */
.avatar-stack{display:flex;}
.avatar-stack .avatar{border:2px solid var(--surface);}
.avatar-stack .avatar+.avatar{margin-left:-6px;}

/* List/table */
.list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;}
.list-divider{display:flex;align-items:center;gap:12px;padding:14px 20px;}
.list-divider::before,.list-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.list-head,.list-row{display:grid;align-items:center;gap:14px;padding:13px 20px;}
.list-head{background:var(--surface-2);border-bottom:1px solid var(--border);}
.list-head > *{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);}
.list-row{border-top:1px solid var(--border);}
.list-row:first-of-type{border-top:none;}
.list-row:hover{background:var(--surface-2);}
.list-row.dim{opacity:.55;}
.list-body{max-height:520px;overflow-y:auto;}
.swatch{width:6px;height:34px;border-radius:3px;flex:0 0 auto;background:var(--accent);}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sub{color:var(--muted);font-size:12px;}

/* Bootstrap's `.row > *{width:100%}` grid rule forces every direct child of a
   `.row` onto its own line. Neutralize it inside `.list` rows and `.card`s so
   the swatch, title block, and trailing columns sit on a single line as in
   the mockup. */
.list .row > *,.card .row > *{width:auto;max-width:none;flex-shrink:initial;padding:0;margin-top:0;}
.list .row > .spacer,.card .row > .spacer{flex:1;}
.list .row > .swatch,.card .row > .swatch{width:6px;flex:0 0 auto;}
.list .row > .pill,.card .row > .pill{padding:3px 10px;}

/* Same Bootstrap `.row > *{width:100%}` collision, scoped to Collapser bodies
   (Settings pages) so action rows/buttons sit on a single line as in the mockup. */
.collapser .body .row > *{width:auto;max-width:none;flex-shrink:initial;padding:0;margin-top:0;}
.collapser .body .row > .spacer{flex:1;}
.collapser .body .row > .swatch{width:6px;flex:0 0 auto;}

/* Same Bootstrap `.row > *{width:100%}` collision, scoped to PageHeader so the
   actions area sits inline to the right of the title as in the mockup. */
.page-header > *{width:auto;max-width:none;flex-shrink:initial;padding:0;margin-top:0;}
.page-header > .spacer{flex:1;}

/* Same Bootstrap `.row > *{width:100%}` collision, scoped to modal bodies so
   rows like the session's billable/unbooked toggle sit on a single line. */
.mts-modal-body .row > *{width:auto;max-width:none;flex-shrink:initial;padding:0;margin-top:0;}

/* Pills (status variants) */
.pill-active{background:var(--positive-bg);color:var(--positive);}
.pill-risk{background:var(--negative-bg);color:var(--negative);}
.pill-draft{background:var(--surface-3);color:var(--text-2);}
.pill-archived{background:var(--surface-3);color:var(--faint);}
.pill-bill{background:var(--accent-bg);color:var(--accent-2);}

/* Modal dialogs (named mts-modal-* to avoid colliding with Bootstrap's .modal*) */
.mts-modal-overlay{position:fixed;inset:0;background:rgba(15,12,8,.45);backdrop-filter:blur(4px);z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px;}
.mts-modal{width:100%;max-width:560px;max-height:calc(100vh - 32px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;text-align:left;}
.mts-modal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 24px;border-bottom:1px solid var(--border);}
.mts-modal-head h3{margin:0;}
.mts-modal-x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;}
.mts-modal-x:hover{background:var(--surface-2);color:var(--text);}
.mts-modal-x svg{width:16px;height:16px;}
.mts-modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;}
.mts-modal-foot{padding:14px 24px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;gap:8px;align-items:center;}
.mts-modal-foot .btn:not(.btn-primary):not(.btn-danger):not(.btn-info){background:var(--surface);border-color:var(--border-strong);}
.modal-dontask{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--text-2);cursor:pointer;user-select:none;}
.modal-dontask input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);}

.billable-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.billable-pill{border:none;font-family:'Quicksand',sans-serif;cursor:pointer;transition:filter .12s,box-shadow .12s;}
.billable-pill:hover:not(:disabled){filter:brightness(.93);box-shadow:var(--shadow-sm);}
.billable-pill:disabled{cursor:not-allowed;opacity:.7;}
.billable-on{background:var(--accent);color:#fff;}
.billable-off{background:var(--surface-3);color:var(--text-2);}
.billable-detail{font-size:13px;color:var(--text-2);}
.billable-detail.billable-muted{font-style:italic;color:var(--muted);}
.billable-amount{color:var(--accent-2);}

/* Book document modal — type switcher, context chip, date range card */
.doc-type-bar{display:flex;gap:6px;}
.doc-type-btn{flex:1;padding:9px 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);font-family:'Quicksand',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:border-color .13s,background .13s,color .13s;}
.doc-type-btn svg{width:15px;height:15px;}
.doc-type-btn:hover{border-color:var(--accent-2);color:var(--text);}
.doc-type-btn.active{border-color:var(--accent-2);background:var(--accent-bg);color:var(--accent-2);}
.ctx-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:700;}
.ctx-avatar{width:24px;height:24px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex:0 0 auto;}
.date-card{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px;}
.date-field{display:flex;flex-direction:column;gap:5px;}
.date-field .label{margin:0;}
.date-field input[type=date]{width:100%;padding:10px 13px;background:var(--surface);border:1px solid var(--border);border-radius:9px;font-family:'Fira Code',monospace;font-feature-settings:"tnum" 1,"zero" 1;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;}
.date-field input[type=date]:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-bg);}
.date-arrow{display:flex;align-items:center;justify-content:center;color:var(--muted);}
.date-arrow svg{width:18px;height:18px;}
.duration-badge{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--accent-bg);border-radius:9px;font-size:13px;font-weight:600;color:var(--accent-2);}
.duration-badge svg{width:15px;height:15px;flex:0 0 auto;}
.duration-days{font-family:'Fira Code',monospace;font-feature-settings:"tnum" 1,"zero" 1;font-size:16px;font-weight:700;}
.date-warn{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--negative-bg);border-radius:9px;font-size:12.5px;font-weight:600;color:var(--negative);}
.date-warn svg{width:15px;height:15px;flex:0 0 auto;}

/* Assign users modal — project badge, search bar, user rows, role pills, toggle */
.proj-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 6px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:700;}
.proj-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.modal-search{position:relative;}
.modal-search .input{padding-left:36px;}
.modal-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none;}
.u-section{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:10px 0 6px;}
.u-list{max-height:300px;overflow-y:auto;margin:0 -6px;padding:0 6px;}
.u-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;transition:background .1s;}
.u-row:hover{background:var(--surface-2);}
.u-row.assigned{background:var(--accent-bg);}
.u-avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.u-meta{flex:1;min-width:0;}
.u-name{font-size:13.5px;font-weight:700;}
.u-email{font-size:11.5px;color:var(--muted);margin-top:1px;}
.role-pill{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;flex:0 0 auto;}
.role-admin{background:var(--negative-bg);color:var(--negative);}
.role-manager{background:var(--info-bg);color:var(--info);}
.role-user{background:var(--accent-bg);color:var(--accent-2);}
.u-toggle{position:relative;width:38px;height:22px;flex:0 0 auto;}
.u-toggle input{opacity:0;width:0;height:0;position:absolute;}
.u-track{position:absolute;inset:0;background:var(--border);border-radius:999px;cursor:pointer;transition:background .18s;}
.u-toggle input:checked+.u-track{background:var(--accent-2);}
.u-track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s;}
.u-toggle input:checked+.u-track::after{transform:translateX(16px);}
.assign-summary{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.assign-count{font-size:14px;font-weight:700;color:var(--accent-2);}

/* Download report modal — format cards, range chips, include grid, preview */
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.fmt-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;border-radius:11px;border:2px solid var(--border);background:var(--surface);cursor:pointer;transition:border-color .14s,background .14s;user-select:none;}
.fmt-card:hover{border-color:var(--accent-2);background:var(--accent-bg);}
.fmt-card.active{border-color:var(--accent-2);background:var(--accent-bg);}
.fmt-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:16px;font-weight:800;letter-spacing:-.5px;}
.fmt-csv{background:#D1FAE5;color:#065F46;}
.fmt-pdf{background:#FEE2E2;color:#991B1B;}
.fmt-xlsx{background:#DCFCE7;color:#166534;}
.fmt-html{background:#DBEAFE;color:#1E40AF;}
html[data-mts-theme="dark"] .fmt-csv{background:rgba(16,185,129,.15);color:#6EE7B7;}
html[data-mts-theme="dark"] .fmt-pdf{background:rgba(239,68,68,.15);color:#FCA5A5;}
html[data-mts-theme="dark"] .fmt-xlsx{background:rgba(34,197,94,.15);color:#86EFAC;}
html[data-mts-theme="dark"] .fmt-html{background:rgba(59,130,246,.15);color:#93C5FD;}
.fmt-label{font-size:12px;font-weight:700;}
.fmt-desc{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.4;}
.date-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;}
.date-sep{color:var(--muted);font-size:13px;font-weight:600;text-align:center;}
.range-chips{display:flex;flex-wrap:wrap;gap:6px;}
.range-chip{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.range-chip:hover{border-color:var(--accent-2);color:var(--accent-2);}
.range-chip.active{background:var(--accent-bg);color:var(--accent-2);border-color:transparent;}
.include-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.include-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:border-color .12s,background .12s;}
.include-row:hover{border-color:var(--accent-2);}
.include-row.on{border-color:var(--accent-2);background:var(--accent-bg);}
.include-row-label{flex:1;font-size:12.5px;font-weight:600;}
.include-row-sub{font-size:11px;color:var(--muted);}
.sm-toggle{position:relative;width:32px;height:18px;flex:0 0 auto;}
.sm-toggle input{opacity:0;width:0;height:0;position:absolute;}
.sm-track{position:absolute;inset:0;background:var(--border);border-radius:999px;cursor:pointer;transition:background .16s;}
.sm-toggle input:checked+.sm-track{background:var(--accent-2);}
.sm-track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .16s;}
.sm-toggle input:checked+.sm-track::after{transform:translateX(14px);}
.preview-box{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--surface-2);border-radius:10px;border:1px solid var(--border);}
.preview-box svg{width:16px;height:16px;color:var(--accent-2);flex:0 0 auto;}
.preview-text{font-size:12.5px;color:var(--text-2);line-height:1.5;}
.preview-text strong{color:var(--text);}
.invoice-block-note{margin-top:8px;font-size:12px;line-height:1.55;color:var(--muted);}
.invoice-block-note strong{color:var(--text-2);margin-right:3px;}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.link-btn:hover{color:var(--accent-2);}