/* ============================================================
   Fine Dashboard — Layout
   Sidebar + Main content grid, responsive breakpoints
   ============================================================ */

/* ── App Shell ── */
.app {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--color-border-light);
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--transition-base);
}

/* min-height + flex-centering (แทน fixed vertical padding) ให้สูงเท่ากับ .main__header
   เป๊ะ (--header-height ตัวแปรร่วม) — ก่อนหน้านี้ทั้งสองฝั่งใช้ padding บน/ล่างเท่ากัน
   แต่เนื้อหาข้างในสูงไม่เท่ากัน (โลโก้ 2 บรรทัด vs หัวข้อ 1 บรรทัด) ทำให้เส้นขอบล่างของ
   sidebar อยู่ต่ำกว่าเส้นขอบล่างของ main header ~8px เห็นเป็นรอยต่อไม่เรียบ */
.sidebar__header {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
  box-sizing: border-box;
  flex-shrink: 0;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar__logo-icon {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 1px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 122, 255, 0.22);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.12);
  flex-shrink: 0;
}

.sidebar__logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius-md) - 2px);
}

.sidebar__logo-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar__logo-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.2;
}

.sidebar__logo-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  margin-top: 1px;
}

.sidebar__filters {
  padding: var(--space-4) var(--space-5);
  flex: 1;
  overflow-y: auto;
}

.sidebar__module-switch {
  padding: var(--space-4) var(--space-5) 0;
  flex-shrink: 0;
}

.sidebar__module-switch .comparison-switch {
  width: 100%;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sidebar__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.sidebar__footer-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Hidden by default (mobile drawer + tablet); only shown by the desktop
   hover-expand rules below var(--sidebar-width-collapsed) rail. */
.sidebar__expand-hint {
  display: none;
}

/* ── Mobile Menu Toggle ── */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 200;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.mobile-menu-toggle:hover {
  background: var(--color-surface-hover);
}

.mobile-menu-toggle svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-primary);
}

/* ── Overlay ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ── Main Content ── */
.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main__header {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-8);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  background: var(--glass-bg-heavy);
  box-sizing: border-box;
}

.main__header-row {
  width: 100%;
}

.main__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.main__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.main__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Data-quality notification bell ──
   Flags month/file mismatches (e.g. a row in "M7" whose real date isn't July) so
   whoever spots it can go correct the accounting source instead of the number
   silently being wrong on the dashboard. */
.data-quality-notification {
  position: relative;
  flex-shrink: 0;
}

.data-quality-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.data-quality-bell:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-danger, #FF3B30);
  color: var(--color-danger, #FF3B30);
}

.data-quality-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: #FF3B30;
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--color-surface);
}

.data-quality-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 480px;
  max-width: 90vw;
  max-height: 400px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  z-index: 60;
  padding: var(--space-3);
}

.data-quality-panel__header {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #c0392b;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
  overflow-x: auto;
}

.data-quality-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.data-quality-panel__list li {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(255, 59, 48, 0.06);
  line-height: 1.5;
}

.data-quality-panel__list li strong {
  color: var(--color-text-primary);
}

.main__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.main__content {
  padding: var(--space-6) var(--space-8);
  flex: 1;
}

.main__content-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* ── Section Spacing ── */
.section {
  margin-bottom: var(--space-8);
}

.section__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section__title-icon {
  font-size: var(--font-size-xl);
}

/* ── "ค่าปรับรถไม่เข้ารับงาน" — หัวข้อ+ไอคอนใหญ่กว่าปกติ จัดสมดุลด้วย badge วงกลม ── */
.section__title--debt {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  gap: var(--space-3);
}

.section__title-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #FF3B30, #FF7066);
  box-shadow: 0 4px 14px rgba(255, 59, 48, .35);
}

/* ── Grid Systems ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5);
}

/* Grand summary row — 3 cards, collapses via the shared .kpi-grid breakpoints below */
.kpi-grid--grand {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── KPI groups: "ค่าปรับอื่นๆ" vs "ค่าปรับรถไม่เข้ารับงาน" as two distinct
   panels (neutral gray background + border) side by side, each with its own
   3-card grid. Panels — not a thin divider line — are what actually reads as
   "these are two separate groups" at a glance; the colored dot on each label
   is what tells the groups apart, not the panel background. ── */
.kpi-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.kpi-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
}

.kpi-panel--fine,
.kpi-panel--debt {
  background: rgba(0, 0, 0, .035);
  border-color: var(--color-border);
}

.kpi-panel__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--color-text-secondary);
}

.kpi-panel__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.kpi-panel--fine .kpi-panel__label::before { background: var(--color-danger); }
.kpi-panel--debt .kpi-panel__label::before { background: #4A9FDB; }

/* auto-fit + collapsing empty tracks so the "ค่าปรับอื่นๆ" panel (4 cards)
   and "ค่าปรับรถไม่เข้ารับงาน" panel (3 cards) each fill their own row width
   evenly without needing a separate column-count modifier per panel. */
.kpi-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kpi-grid--grand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Side-by-side panels get cramped once each needs room for 3 cards —
     stack them instead of shrinking cards further. */
  .kpi-groups {
    grid-template-columns: 1fr;
  }
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.charts-grid--wide {
  grid-template-columns: 1fr;
}

.charts-grid--trio {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }

  .charts-grid--trio {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .charts-grid--trio {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .main {
    margin-left: 0;
  }

  .main__header {
    padding-left: calc(var(--space-8) + 48px);
  }

  .main__content {
    padding: var(--space-5) var(--space-4);
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* ── Sidebar Hover-Expand (desktop only — mobile keeps the slide-in drawer above) ──
   Collapsed = a real, visible 64px icon rail (glass background, border, shadow) with
   the brand mark centered in it — not the old 8px invisible hot-zone. The logo icon
   is the one piece of chrome that is always on screen; everything else (title text,
   module switch, filters, footer) fades in only once expanded. .main's margin-left
   grows in the same transition (via the ~ sibling selector) so content and rail move
   in lockstep. Filters/footer/module-switch stay pinned at the full expanded width
   at all times and are simply clipped by the sidebar's own overflow-x: hidden, so
   their internal text/grids never reflow mid-transition — only opacity animates.
   The header is the one exception: its width (and the logo-text's max-width) genuinely
   animates between the collapsed/expanded rail widths so the brand mark can be
   perfectly centered in the 64px rail instead of sitting off-centre at a fixed
   left-padding, which is what made the previous version look unbalanced. */
@media (min-width: 1025px) {
  .main {
    margin-left: var(--sidebar-width-collapsed);
    transition: margin-left var(--transition-fast);
  }

  .sidebar:hover ~ .main,
  .sidebar:focus-within ~ .main {
    margin-left: var(--sidebar-width);
  }

  .sidebar {
    width: var(--sidebar-width-collapsed);
    background: var(--glass-bg-heavy);
    border-right-color: var(--color-border-light);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-sm);
    transition: width var(--transition-fast), box-shadow var(--transition-fast);
    will-change: width;
  }

  .sidebar:hover,
  .sidebar:focus-within {
    width: var(--sidebar-width);
    box-shadow: var(--shadow-lg);
  }

  /* Header shrinks/grows with the rail (unlike the sections below, which stay at
     full width) so the logo mark can sit dead-centre in the 64px collapsed rail. */
  .sidebar__header {
    width: var(--sidebar-width-collapsed);
    padding-left: 14px;
    padding-right: 14px;
    transition: width var(--transition-fast), padding var(--transition-fast);
  }

  .sidebar:hover .sidebar__header,
  .sidebar:focus-within .sidebar__header {
    width: var(--sidebar-width);
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Title/subtitle collapse to zero width (not just opacity) so they stop reserving
     row space and the icon can genuinely centre in the row while collapsed. */
  .sidebar__logo-text {
    max-width: 0;
    opacity: 0;
    transition: max-width var(--transition-fast), opacity 100ms ease;
  }

  .sidebar:hover .sidebar__logo-text,
  .sidebar:focus-within .sidebar__logo-text {
    max-width: 180px;
    opacity: 1;
    transition: max-width var(--transition-fast), opacity 160ms ease 90ms;
  }

  .sidebar__module-switch,
  .sidebar__filters,
  .sidebar__footer {
    width: var(--sidebar-width);
    flex-shrink: 0;
  }

  .sidebar__module-switch,
  .sidebar__filters,
  .sidebar__footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  .sidebar:hover .sidebar__module-switch,
  .sidebar:hover .sidebar__filters,
  .sidebar:hover .sidebar__footer,
  .sidebar:focus-within .sidebar__module-switch,
  .sidebar:focus-within .sidebar__filters,
  .sidebar:focus-within .sidebar__footer {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 80ms;
  }

  /* Expand affordance: a small pill anchored to the bottom of the rail (grounded,
     not floating loose in empty mid-air like the previous corner-tick) that fades
     out once the sidebar is actually open. */
  .sidebar__expand-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-fast);
  }

  .sidebar__expand-hint::before {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--color-text-muted);
    border-right: 1.5px solid var(--color-text-muted);
    transform: rotate(45deg) translateX(-1px);
  }

  .sidebar:hover .sidebar__expand-hint,
  .sidebar:focus-within .sidebar__expand-hint {
    opacity: 0;
  }
}

@media (max-width: 1024px) {
  .sidebar__expand-hint {
    display: none;
  }
}

@media (max-width: 640px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .kpi-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .kpi-panel {
    padding: var(--space-4);
  }

  .main__header {
    padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 48px);
  }

  .main__title {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi-panel__grid {
    grid-template-columns: 1fr;
  }
}