/* =====================================================================================================
   R65 — "Control Room" look (DESIGN.md, 4 Nov 2026). Loaded LAST, after style.css / dashboard.css /
   reports.css, so it only re-skins: no page, field, URL or data changes. Mobile first.
   Fonts: IBM Plex Sans + IBM Plex Mono (IDs only), stored with the app (assets/fonts, OFL licence).
   Remove this one <link> in includes/header.php to go back to the R64 look.
   ===================================================================================================== */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-mono-500.woff2") format("woff2"); }

/* ---- 1. Tokens ---- */
:root {
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-id: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --sh-1: 0 1px 2px rgba(16,17,29,.06);
  --sh-2: 0 8px 24px rgba(16,17,29,.14);
  --sb-bg: #16171D; --sb-bg-2: #202129; --sb-line: #2A2C35; --sb-text: #C9CAD3; --sb-muted: #8E93A3; --sb-on: #FFFFFF;
  --tap: 44px;
}
:root[data-palette="indigo"]:not([data-theme="dark"]) {
  --bg: #F7F7F9; --surface: #FFFFFF; --surface-2: #F0F0F4; --border: #E3E4EA; --text: #1A1B22; --text-2: #5E6270;
  --muted-bg: #ECEDF1; --ink: #1A1B22; --input-bg: #FFFFFF; --bg-alt: #F0F0F4; --bg-2: #F7F7F9; --color-bg-subtle: #F0F0F4;
}
:root[data-palette="indigo"][data-theme="dark"] {
  --bg: #111217; --surface: #1C1D24; --surface-2: #24252E; --border: #2E303A; --text: #E6E7EC; --text-2: #9BA0AE;
  --input-bg: #15161C; --muted-bg: #2A2B34; --btn-secondary-bg: #24252E; --bg-alt: #24252E; --bg-2: #24252E; --color-bg-subtle: #24252E;
}
:root:not([data-theme="dark"]) {
  --good: #1E7B4F; --good-bg: #E6F4EC; --warn: #9A5B00; --warn-bg: #FDF1DC;
  --bad: #B4332F; --bad-bg: #FCE9E8; --info: #2F5FB8; --info-bg: #E8EFFB;
}
:root[data-theme="dark"] { --sb-bg: #0B0C10; --sb-bg-2: #17181E; --sb-line: #22232B; }

/* ---- 2. Base type ---- */
body { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
.mono, .tk-no, .asset-code, code, kbd { font-family: var(--font-id); font-weight: 500; letter-spacing: -.01em; }
::selection { background: var(--accent-bg); color: var(--text); }
.tabnum, .num, td.r, .kpi-val { font-variant-numeric: tabular-nums; }

/* Labels: sentence case and muted, so the CAPITALS data stands out (DESIGN.md section 3). */
.tkv-facts dt, .tkv-label, .rb-lab, .dash-ins .mod, label.lbl-caps { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }

/* ---- 3. One focus ring for everything (keyboard only) ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-search-box:focus-within, .sh-search:focus-within, .login-input:focus-within, .gsearch-bar .gsearch-input:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); box-shadow: none;
}
.ui-pop a:focus-visible, .ui-pop button[role="menuitem"]:focus-visible, .bd-mi:focus-visible, .mc-hrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- 4. Shapes ---- */
.card, .table-wrap, .stat-tile, .tw-sum, .report-card, .kpi, .wcard, .dash-ins, .tk-card, .rb-step { border-radius: var(--r-lg); }
.card, .kpi, .wcard, .report-card { box-shadow: var(--sh-1); }
.btn, .btn-secondary, .btn-danger, .chip-d,
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=search],
input[type=date], input[type=time], input[type=file], select, textarea, .login-input, .tk-search-box { border-radius: var(--r-md); }
.ui-pop { border-radius: var(--r-lg); box-shadow: var(--sh-2); }

/* ---- 5. Buttons ---- */
.btn, .btn-secondary, .btn-danger { min-height: 36px; font-weight: 500; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.btn[disabled], .btn-secondary[disabled], .btn-danger[disabled] { opacity: .45; cursor: not-allowed; }
/* "Saving…" inside the clicked button (assets/js/app.js) instead of a full-screen "Please wait" straight away */
.btn.is-loading, .btn-secondary.is-loading, .btn-danger.is-loading, button.is-loading { opacity: 1 !important; cursor: progress !important; }
.btn-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: itp-spin .8s linear infinite; }
@keyframes itp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation: none; border-right-color: currentColor; opacity: .6; } }

/* ---- 6. Desktop shell: dark side menu (DESIGN.md section 4) ---- */
.sidebar { background: var(--sb-bg); border-right: 1px solid var(--sb-line); color: var(--sb-text); }
.sb-brand, .sb-brand:hover { color: var(--sb-on); }
.sb-mark { border-radius: var(--r-md); width: 30px; height: 30px; font-size: 14px; }
.sb-name { font-weight: 600; font-size: 14px; }
.sb-brand.has-logo .sb-logo { background: #FFFFFF; border-radius: var(--r-md); padding: 6px 8px; } /* a dark-ink logo stays readable on the dark menu */
.sb-brand.has-logo .sb-name { color: var(--sb-muted); }
.sb-new { border-radius: var(--r-md); height: 38px; box-shadow: none; }
.sb-item { min-height: 36px; border-radius: var(--r-md); color: var(--sb-text); font-weight: 500; }
.sb-item .ui-ico { opacity: .9; }
.sb-item:hover { background: var(--sb-bg-2); color: var(--sb-on); }
.sb-item.is-active { background: var(--sb-bg-2); color: var(--sb-on); font-weight: 600; box-shadow: inset 0 0 0 1px var(--sb-line); }
.sb-item.is-active::before { display: none; }
.sb-foot { border-top-color: var(--sb-line); }
.sb-count { background: var(--sb-line); color: var(--sb-on); }
.sb-warn { border-radius: var(--r-md); }
.sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--sb-line); border-radius: 4px; }

.appbar { background: var(--surface); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ab-greet { font-weight: 600; font-size: 15px; }
.ab-icon { border-radius: var(--r-md); }

/* ---- 7. Tables ---- */
th { font-weight: 500; }
.table-wrap thead th, .rpt-table th { background: var(--surface-2); color: var(--text-2); }

/* ---- 8. Status path tick: SVG, not a "✓" character (looked different on every phone) ---- */
.ticket-path .step.is-done > span::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 9. Login and Forgot password: calm, no gradient or decorative ring ---- */
.login-side { background: var(--sb-bg) !important; color: var(--sb-on); }
.login-side::after { display: none; }
.login-side-brand .sb-mark { background: var(--accent); }
.login-side-copy h2 { font-weight: 600; font-size: 30px; letter-spacing: -.015em; }
.login-side-copy li { color: var(--sb-text); opacity: 1; }
.login-side-copy li .ui-ico { background: var(--sb-bg-2); color: var(--sb-on); border-radius: var(--r-md); }
.login-side-foot { color: var(--sb-muted); opacity: 1; }
.login-card { border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.login-card h1 { font-weight: 600; }
.login-mark .sb-mark { border-radius: var(--r-lg); }
.login-input { height: 46px; }
.login-btn { height: 46px; font-weight: 600; }
.login-eye { min-height: 36px; padding: 4px 6px; }

/* ---- 10. Dashboard ---- */
.dash-tabs { border-radius: var(--r-lg); }
.dash-tab { border-radius: var(--r-md); }
.dash-tab[aria-selected="true"] { box-shadow: none; }
.dash-ctl select, .dash-ibtn { border-radius: var(--r-md); }
.dash-bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kpi { min-height: 0; }
.kpi-val { font-size: 28px; font-weight: 600; }
a.kpi:hover { transform: none; }
.kpi-scope { border-radius: var(--r-sm); }
.dash-head h1 { font-weight: 600; }

/* ---- 11. Reports list: plain rows, no icon tiles ---- */
.rpt-mod-h { font-size: 16px; font-weight: 600; }
.rpt-mod-ico { background: none; width: auto; height: auto; color: var(--text-2); }
.report-ico { background: none !important; flex-basis: 24px; height: 24px; color: var(--text-2) !important; margin-top: 1px; }
.report-card { padding: 14px 16px; gap: 12px; }
.report-body strong { font-size: 15px; font-weight: 600; }
a.report-card:hover { box-shadow: var(--sh-1); border-color: var(--accent); }
.rpt-saved-ico { background: none; color: var(--text-2); }
.rb-n { border-radius: var(--r-sm); }

/* ---- 12. Phones and small tablets (up to 860 px, the app's existing phone break point) ---- */
@media (max-width: 860px) {
  body { font-size: 15px; }
  /* 16px text in every box stops iPhone zooming in when a box is tapped */
  input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=search], input[type=url],
  input[type=date], input[type=time], input[type=datetime-local], select, textarea { font-size: 16px; min-height: 46px; }
  textarea { min-height: 96px; }
  .login-input input, .tk-search-box input, .sh-search input, .gsearch-bar .gsearch-input { font-size: 16px; }
  /* 44px tap targets */
  .btn, .btn-secondary, .btn-danger { min-height: var(--tap); }
  .btn-sm { min-height: 38px; }
  .chip, .dash-tab, .tkv-jump .chip { min-height: 40px; }
  .ab-icon, .ab-user-btn { min-width: var(--tap); min-height: var(--tap); }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .bb-item { font-size: 11px; }
  .bb-fab { border-radius: var(--r-lg); width: 52px; height: 44px; margin-top: 6px; border: 0; box-shadow: none; }
  .bb-fab-wrap { align-items: center; }
  .ui-sheet { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .more-grid > a, .more-grid > button[role="menuitem"] { border-radius: var(--r-lg); }
  .tk-card { border-radius: var(--r-lg); }

  /* Ticket page buttons: full width, text wraps instead of running out of the button */
  .tkv-actions .btn, .tkv-actions .btn-secondary { white-space: normal; height: auto; padding-top: 10px; padding-bottom: 10px; }

  /* Dashboard tiles: one clean row each (label left, number right) instead of squeezed 2-up tiles */
  .dash-kpis { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .bd-grid:not(.is-edit) .bw-xs, .bd-grid:not(.is-edit) .bw-s { grid-column: 1 / -1; }  /* number tiles: one per row on a phone */
  .bd-grid { gap: 8px; }
  .kpi { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; }
  .kpi-label { flex: 1 1 auto; min-width: 0; font-size: 14px; }
  .kpi-val { order: 2; font-size: 24px; }
  .kpi-sub { flex: 1 1 100%; order: 3; min-height: 0; margin-top: 0; }
  .kpi .mc-spark { display: none; }

  /* Reports list: compact rows */
  .report-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .report-card { padding: 12px 14px; }
  .report-body > span:not(.report-tags) { font-size: 14px; }
}

/* Login on a phone: the brand sits on top, the form fills the screen (no grey card floating on grey). */
@media (max-width: 860px) {
  .login-main { align-items: stretch; padding: 24px 16px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  .login-card { max-width: none; box-shadow: none; border: 0; background: transparent; padding: 8px 4px; }
  .login-mark { justify-content: flex-start; } .login-card h1, .login-card .subtitle { text-align: left; }
  .login-logo { text-align: left; }
}

@media print {
  .sidebar { display: none !important; }
}
.table-wrap thead th, .tk-table th { text-transform: none; letter-spacing: 0; }