/* ============================================================================
 * Aditya Buildcon — V12 look for the admin apps (Attendance, Finance, Website admin).
 * Same colours as the Hub (hub/ab-theme.css). Dark by default; light with <html data-theme="light">.
 * This file: colour tokens + the shared pieces (theme button, Switch bar, Find window).
 * Each app adds its own v12-app.css that re-skins its existing screens with these tokens.
 * Contrast checked to WCAG AA (white text on --v-accent-strong is 4.6:1).
 * ========================================================================== */
:root {
  color-scheme: dark;
  --v-bg: #141517; --v-panel: #222326; --v-panel-2: #18191B; --v-panel-3: #2D2E32; --v-line: #36373B;
  --v-text: #F2F2F0; --v-muted: #A9AAAD; --v-faint: #8E8F93;
  --v-card: #FFFFFF; --v-card-2: #F5F4F1; --v-card-3: #EDECE8; --v-card-line: #E4E3DF; --v-card-text: #1A1B1E; --v-card-muted: #5A5C61; --v-card-faint: #6B6D72;
  --v-accent: #E8692A; --v-accent-strong: #C4511A; --v-accent-ink: #B4471A; --v-accent-soft: #FBE9DF;
  --v-good: #1E8A4C; --v-good-soft: #E1F2E7; --v-warn: #9A6200; --v-warn-soft: #FCF0D6; --v-bad: #C8141E; --v-bad-soft: #FCE4E4; --v-info: #2F6FDE; --v-info-soft: #E3ECFC;
  --v-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --v-r-xl: 28px; --v-r-l: 22px; --v-r-m: 16px; --v-r-s: 12px;
  --v-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);
  --v-focus: 0 0 0 3px rgba(232,105,42,.6);
}
:root[data-theme="light"] {
  color-scheme: light;
  --v-bg: #ECEBE7; --v-panel: #FFFFFF; --v-panel-2: #F5F4F1; --v-panel-3: #EDECE8; --v-line: #E2E1DC;
  --v-text: #1A1B1E; --v-muted: #5A5C61; --v-faint: #6B6D72;
  --v-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
}

/* theme button */
.v12-iconbtn { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--v-line); background: var(--v-panel-2); color: var(--v-text); cursor: pointer; padding: 0; }
.v12-iconbtn:hover { background: var(--v-panel-3); }
.v12-iconbtn svg, .v12-ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.v12-findbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--v-line); background: var(--v-panel-2); color: var(--v-muted); cursor: pointer; font: inherit; font-size: 14px; white-space: nowrap; }
.v12-findbtn:hover { background: var(--v-panel-3); color: var(--v-text); }
.v12-findbtn kbd { font: 12px var(--v-font); border: 1px solid var(--v-line); border-radius: 6px; padding: 1px 6px; }
@media (max-width: 900px), (hover: none) { .v12-findbtn kbd { display: none; } }
@media (max-width: 560px) { .v12-findbtn .v12-findtxt { display: none; } .v12-findbtn { width: 40px; padding: 0; justify-content: center; } }

/* the Switch bar between systems: floating on computers, inside the menu on phones */
.v12-switchwrap { position: fixed; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; pointer-events: none; z-index: 35; padding: 0 12px; }
.v12-switch { pointer-events: auto; display: flex; align-items: center; gap: 4px; background: var(--v-panel); border: 1px solid var(--v-line); border-radius: 999px; padding: 5px; box-shadow: var(--v-shadow); font-family: var(--v-font); }
.v12-switch .lbl { font-size: 11px; letter-spacing: .12em; color: var(--v-faint); padding: 0 10px; }
.v12-switch a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--v-muted); white-space: nowrap; }
@media (hover: hover) { .v12-switch a:hover { color: var(--v-text); background: var(--v-panel-3); text-decoration: none; } }
.v12-switch a[aria-current="page"] { background: var(--v-accent-strong); color: #FFFFFF; }
.v12-switch .nm-short { display: none; }
.v12-drawer-switch { display: none; padding: 10px 12px 4px; border-top: 1px solid var(--v-line); }
.v12-drawer-switch .grp { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-faint); padding: 2px 0 6px; }
.v12-drawer-switch .row { display: flex; flex-wrap: wrap; gap: 6px; }
.v12-drawer-switch a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--v-panel-3); color: var(--v-text); font-weight: 600; font-size: 13px; text-decoration: none; }
.v12-drawer-switch a[aria-current="page"] { background: var(--v-accent-strong); color: #FFFFFF; }
@media (max-width: 920px) { .v12-switchwrap { display: none; } .v12-drawer-switch { display: block; } }
@media print { .v12-switchwrap, .v12-drawer-switch, .v12-iconbtn, .v12-findbtn { display: none !important; } }

/* Find a page or task (Ctrl K) */
dialog.v12-pal { border: 1px solid var(--v-line); border-radius: var(--v-r-l); background: var(--v-panel); color: var(--v-text); padding: 0; width: min(640px, calc(100vw - 24px)); box-shadow: var(--v-shadow); font-family: var(--v-font); margin-top: 10vh; }
dialog.v12-pal::backdrop { background: rgba(0,0,0,.55); }
.v12-pal-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--v-line); color: var(--v-muted); }
.v12-pal-in input { flex: 1; border: 0; outline: none; background: transparent; color: var(--v-text); font: inherit; font-size: 16px; min-height: 34px; box-shadow: none; }
.v12-pal-list { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow: auto; }
.v12-pal-list a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--v-r-s); text-decoration: none; color: var(--v-text); cursor: pointer; }
.v12-pal-list a:hover, .v12-pal-list a.sel { background: var(--v-panel-3); text-decoration: none; }
.v12-pal-list .grp { font-size: 12px; color: var(--v-faint); margin-left: auto; white-space: nowrap; }
.v12-pal-list .sub { display: block; font-size: 12px; color: var(--v-muted); }
.v12-pal-list .none { padding: 14px 12px; color: var(--v-muted); }
.v12-pal-foot { padding: 9px 16px; border-top: 1px solid var(--v-line); font-size: 12px; color: var(--v-faint); }

/* KPI / alert cards shared by the home dashboards */
.v12-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.v12-kpi { background: var(--v-card); color: var(--v-card-text); border-radius: var(--v-r-l); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 138px; text-decoration: none; border: 1px solid transparent; transition: transform .15s; text-align: left; font: inherit; cursor: pointer; }
:root[data-theme="light"] .v12-kpi { border-color: var(--v-card-line); }
.v12-kpi:hover { transform: translateY(-2px); text-decoration: none; }
.v12-kpi .kt { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; position: static; padding: 0; border: 0; background: none; }
.v12-kpi .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--v-accent-soft); color: var(--v-accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.v12-kpi .ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v12-kpi .val { font: 700 30px/1.1 var(--v-display); color: var(--v-accent-ink); font-variant-numeric: tabular-nums; margin-top: auto; overflow-wrap: anywhere; }
.v12-kpi .val.warn { color: var(--v-warn); } .v12-kpi .val.bad { color: var(--v-bad); } .v12-kpi .val.good { color: var(--v-good); } .v12-kpi .val.plain { color: var(--v-card-text); }
.v12-kpi .unit { font-size: 13px; color: var(--v-card-muted); }
.v12-kpi svg.spark { width: 100%; height: 30px; display: block; }
.v12-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.v12-alert { background: var(--v-card); color: var(--v-card-text); border-radius: var(--v-r-l); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-height: 128px; text-decoration: none; border: 1px solid transparent; cursor: pointer; text-align: left; font: inherit; }
:root[data-theme="light"] .v12-alert { border-color: var(--v-card-line); }
.v12-alert:hover { text-decoration: none; }
.v12-alert .t { font-size: 15px; font-weight: 600; }
.v12-alert .s { font-size: 13px; color: var(--v-card-muted); }
.v12-alert .go { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 11px; background: var(--v-card-2); color: var(--v-card-text); }
.v12-alert.hot { background: var(--v-accent-strong); color: #FFFFFF; }
.v12-alert.hot .s { color: #FFFFFF; }
.v12-alert.hot .go { background: #FFFFFF; color: var(--v-card-text); }
.v12-allclear { display: flex; gap: 12px; align-items: center; min-height: 0; }
.v12-hello { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.v12-hello h2 { margin: 0; font: 700 28px/1.15 var(--v-display); letter-spacing: -.01em; color: var(--v-text); }
.v12-hello p { margin: 4px 0 0; color: var(--v-muted); font-size: 14px; }
.v12-sec { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font: 600 17px/1.2 var(--v-font); color: var(--v-text); }
.v12-sec::before { content: ''; width: 4px; height: 18px; border-radius: 4px; background: var(--v-accent); flex: none; }
.v12-sec .more { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--v-muted); }
.v12-bar { height: 8px; border-radius: 8px; background: var(--v-card-3); overflow: hidden; }
.v12-bar > span { display: block; height: 100%; background: var(--v-accent); border-radius: 8px; }
.v12-bar.near > span { background: #D08A00; } .v12-bar.over > span { background: var(--v-bad); } .v12-bar.good > span { background: var(--v-good); }
@media (prefers-reduced-motion: reduce) { .v12-kpi { transition: none; } }
.v12-kpi .unit { min-height: 2.5em; }
@media (min-width: 1200px) { .v12-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .v12-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v12-kpi { min-height: 0; padding: 13px 14px; gap: 6px; border-radius: var(--v-r-m); }
  .v12-kpi .kt { font-size: 13px; } .v12-kpi .ic { width: 26px; height: 26px; }
  .v12-kpi .val { font-size: 25px; }
  .v12-kpi .unit { font-size: 12px; }
  .v12-hello h2 { font-size: 23px; }
  .v12-alerts { gap: 10px; } .v12-alert { min-height: 0; }
}
/* apps without a side menu keep the floating bar on phones, with short names */
@media (max-width: 920px) {
  .v12-switchwrap.always { display: flex; bottom: 10px; padding: 0 8px; }
  .v12-switchwrap.always .v12-switch .lbl, .v12-switchwrap.always .nm-full { display: none; }
  .v12-switchwrap.always .nm-short { display: inline; }
  .v12-switchwrap.always .v12-switch { gap: 2px; padding: 4px; max-width: 100%; }
  .v12-switchwrap.always .v12-switch a { padding: 0 11px; font-size: 13px; }
}