/* ============================================================================
   akdyn.css — ACE Reports design system (consolidated)
   ----------------------------------------------------------------------------
   Single source of truth for the repeated inline styles, page-level <style>
   blocks, and ad-hoc colors that were previously scattered across ~100 PHP
   pages. Layered on top of Bootstrap 5 — it adds tokens, utilities, and a few
   shared components; it does not replace Bootstrap.

   Conventions:
     - Design tokens live in :root as --ak-* variables.
     - Utility classes are prefixed .ak-  (widths, colors, helpers).
     - Component classes keep the names already used in page <style> blocks
       (.sort-btn, .status-pill, .kpi-card, .device-card, .rpt-badge, ...) so
       existing markup keeps working once the per-page <style> is removed.

   Sections:
     1. Design tokens
     2. Base / element defaults
     3. Layout & width utilities
     4. Color & background utilities
     5. Helper utilities
     6. Navbar / dropdown
     7. Sortable table headers
     8. Status pills & badges
     9. Dashboard cards (KPI / device)
    10. Accordion & list striping
   ============================================================================ */

/* ── 1. Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ak-surface:        #F8F8F8;   /* dominant page / panel tint (was inline x103) */
  --ak-surface-2:      #ECECEC;   /* alt stripe                                   */
  --ak-surface-3:      #F4F4F4;   /* nested list stripe                           */
  --ak-surface-muted:  lightgray; /* legacy "lightgray" fills                     */
  --ak-white:          #ffffff;
  --ak-border:         #dee2e6;

  /* Brand / accents (Bootstrap-aligned where possible) */
  --ak-primary:        #0d6efd;
  --ak-success:        #2e7d32;
  --ak-success-soft:   #198754;
  --ak-danger:         #b02a37;
  --ak-danger-bright:  tomato;
  --ak-warning:        #b45309;
  --ak-orange:         #fd7e14;
  --ak-teal:           #0d9488;
  --ak-purple:         #6610f2;

  /* Standard content width — the recurring "width:800px" card/table column */
  --ak-content-w:      800px;

  /* Nav dropdown hover (was inline <style> in header) */
  --ak-dropdown-hover: #AED6F1;
}

/* ── 2. Base / element defaults ───────────────────────────────────────────── */
/* Tables across the app are centered (was a global akdyn.css rule + 199 inline
   text-align:center). Kept as the default; opt out with Bootstrap .text-start. */
td, th { text-align: center; }

/* Most pages tint the page background; apply on <body> with class .ak-page. */
.ak-page { background-color: var(--ak-surface); }

/* ── 3. Layout & width utilities ──────────────────────────────────────────── */
/* Fixed pixel widths that recurred inline. Use these instead of style="width:..px". */
.ak-w-100  { width: 100px; }
.ak-w-130  { width: 130px; }
.ak-w-135  { width: 135px; }
.ak-w-155  { width: 155px; }   /* very common control width */
.ak-w-180  { width: 180px; }
.ak-w-230  { width: 230px; }
.ak-w-500  { width: 500px;  max-width: 100%; }
.ak-w-620  { width: 620px;  max-width: 100%; }
.ak-w-800  { width: 800px;  max-width: 100%; }   /* standard content width */
.ak-w-1100 { width: 1100px; max-width: 100%; }

/* The canonical centered content block (width:800px; mx-auto). */
.ak-content { width: var(--ak-content-w); max-width: 100%; margin-left: auto; margin-right: auto; }

/* Percentage widths that recurred inline. */
.ak-w-50p  { width: 50%; }
.ak-w-80p  { width: 80%; }
.ak-w-85p  { width: 85%; }
.ak-w-90p  { width: 90%; }
.ak-w-95p  { width: 95%; }

/* Max-width helpers. */
.ak-mw-260 { max-width: 260px; }
.ak-mw-340 { max-width: 340px; }
.ak-mw-640 { max-width: 640px; }
.ak-mw-900 { max-width: 900px; }
.ak-mw-100 { max-width: 100%; }

.ak-h-36   { height: 36px; }   /* recurring control height */

/* ── 4. Color & background utilities ──────────────────────────────────────── */
.ak-bg-surface  { background-color: var(--ak-surface)  !important; }
.ak-bg-surface2 { background-color: var(--ak-surface-2) !important; }
.ak-bg-muted    { background-color: var(--ak-surface-muted) !important; }
.ak-bg-white    { background-color: var(--ak-white) !important; }

.ak-text-success { color: var(--ak-success) !important; }
.ak-text-danger  { color: var(--ak-danger-bright) !important; }   /* tomato */
.ak-text-danger2 { color: var(--ak-danger)  !important; }
.ak-text-warning { color: var(--ak-warning) !important; }
.ak-text-orange  { color: var(--ak-orange)  !important; }
.ak-text-primary { color: var(--ak-primary) !important; }

/* ── 5. Helper utilities ──────────────────────────────────────────────────── */
.ak-nowrap   { white-space: nowrap; }
.ak-prewrap  { white-space: pre-wrap; }
.ak-pointer  { cursor: pointer; }
.ak-noselect { user-select: none; }
.ak-vmid     { vertical-align: middle; }
.ak-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-breakall { word-break: break-all; }
.ak-hidden   { visibility: hidden; }
.ak-center-y { display: flex; align-items: center; }

/* ── 6. Navbar / dropdown ─────────────────────────────────────────────────── */
.navbar { background-color: var(--ak-white); }
.dropdown-item:hover { background-color: var(--ak-dropdown-hover); }

/* ── 7. Sortable table headers (tableSort.js convention) ──────────────────── */
/* Standard look: full-width btn-info header buttons with ▲▼ arrows. Markup:
   <th class="p-0 text-center">
     <button class="btn btn-info sort-btn" data-col=".." data-type="..">Label</button>
   </th>                                                                          */
th .sort-btn,
th a.btn {
  display: block;
  width: 100%;
  white-space: nowrap;
  border-radius: 0;
  font-weight: 700;
}

/* ── 8. Status pills & badges ─────────────────────────────────────────────── */
.status-pill {
  font-size: .75rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-weight: 600;
}
.pill-pass { background: #d1e7dd; color: #0a3622; }
.pill-fail { background: #f8d7da; color: #58151c; }
.pill-na   { background: #e9ecef; color: #495057; }
.pill-old  { background: #ffe5d0; color: #7a3a00; }

.issue-badge {
  font-size: 1rem;
  padding: .55rem .85rem;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Report-freshness badge (deviceDashboard) */
.rpt-badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: .3rem .75rem; border-radius: 10px; border: 1.5px solid; line-height: 1.2;
}
.rpt-badge .rpt-badge-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; opacity: .8; white-space: nowrap; }
.rpt-badge .rpt-badge-date  { font-size: .9rem; font-weight: 700; }
.rpt-badge.rpt-fresh { color: #198754; border-color: #198754; background: #e8f3ee; }
.rpt-badge.rpt-aging { color: #cc9a06; border-color: #cc9a06; background: #fdf6e3; }
.rpt-badge.rpt-old   { color: #dc3545; border-color: #dc3545; background: #fbe9eb; }
.rpt-badge.rpt-never { color: #495057; border-color: #495057; background: #eceef0; }

/* ── 9. Dashboard cards (KPI / device) ────────────────────────────────────── */
.kpi-card {
  border: none; border-radius: 14px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover  { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }
.kpi-card.active { outline: 3px solid var(--ak-primary); outline-offset: 2px; }
.kpi-value { font-size: 2rem;   font-weight: 700; line-height: 1; }
.kpi-label { font-size: .78rem; opacity: .9; text-transform: uppercase; letter-spacing: .5px; }
.kpi-icon  { font-size: 2.2rem; opacity: .4; }

.device-card {
  border: 2px solid transparent; border-right-width: 11px; border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease; cursor: pointer; height: 100%;
}
.device-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); }
.device-card.rpt-fresh { border-color: #198754; }
.device-card.rpt-aging { border-color: #ffc107; }
.device-card.rpt-old   { border-color: #dc3545; }
.device-card.rpt-never { border-color: #495057; }

.device-meta { background: #F8F9FA; border-radius: 8px; padding: .6rem .75rem; }
.meta-label  { font-size: .62rem; text-transform: uppercase; letter-spacing: .5px; color: #98a2b3; font-weight: 700; line-height: 1.4; }
.meta-value  { font-size: .9rem; font-weight: 600; color: #212529; word-break: break-word; }
.meta-value.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.filter-bar    { background: #fff; border-radius: 14px; padding: 1rem; box-shadow: 0 .25rem .5rem rgba(0,0,0,.04); }
.modal-section { background: #F8F9FA; border-radius: 10px; padding: 1rem; }
.contract-icon { width: 36px; height: 36px; object-fit: contain; }

/* ── 10. Accordion & list striping ────────────────────────────────────────── */
.ak-accordion .accordion-item:nth-of-type(odd)  { background-color: #FFFFFF; }
.ak-accordion .accordion-item:nth-of-type(even) { background-color: #ECECEC; }
.ak-accordion .accordion-item:nth-of-type(odd)  .accordion-button.collapsed { background-color: #FFFFFF; }
.ak-accordion .accordion-item:nth-of-type(even) .accordion-button.collapsed { background-color: #ECECEC; }
.file-list .list-group-item:nth-of-type(even)   { background-color: #F4F4F4; }
