/**
 * =====================================================================
 * مطاعم أبوزيد — Mobile Responsive Optimization
 * mobile-fix.css  v2.0
 * RTL Arabic — Optimized for mobile without changing desktop or branding
 *
 * Breakpoints:
 *   ≤480px   → small phone
 *   ≤768px   → mobile / large phone
 *   769–1024px → tablet
 *   ≥1025px  → desktop (safety assertions only)
 * =====================================================================
 */


/* ════════════════════════════════════════════════════════════════
   0. HAMBURGER BUTTON + SIDEBAR OVERLAY
   Always defined; display controlled per breakpoint below
════════════════════════════════════════════════════════════════ */
.sidebar-toggle-btn {
  display: none;               /* hidden by default; shown in mobile query */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(14,125,146,0.08);
  border: 1.5px solid rgba(14,125,146,0.20);
  border-radius: 10px;
  color: var(--primary, #0E7D92);
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  order: -1;                   /* RTL: button before title in topbar */
  margin-left: 6px;
}
.sidebar-toggle-btn:hover,
.sidebar-toggle-btn:active {
  background: var(--primary, #0E7D92);
  color: #fff;
  border-color: var(--primary, #0E7D92);
}

/* Full-page dimmed overlay — tap to close sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 30, 42, 0.60);
  z-index: 95;                 /* below sidebar(100), above content */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.25s;
}
.sidebar-overlay.open { display: block; }


/* ════════════════════════════════════════════════════════════════
   1. MOBILE BASE  (≤768px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── CSS Variables ─────────────────────────────────────────── */
  :root {
    --sidebar-w:  0px;
    --topbar-h:   56px;
  }

  /* ── Global Reset ──────────────────────────────────────────── */
  html {
    font-size: 14px;
  }
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* ── SIDEBAR: slide-in from right (RTL) ────────────────────── */
  .sidebar {
    transform: translateX(105%);        /* push fully off screen to the right */
    width: 285px !important;
    z-index: 100;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.28);
    touch-action: pan-y;               /* allow vertical scroll inside sidebar; horizontal swipe = close */
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }

  /* ── SIDEBAR OVERLAY: touch-friendly close ─────────────────── */
  .sidebar-overlay {
    touch-action: none;                /* prevent scroll bleed through overlay */
  }

  /* ── MAIN WRAPPER ──────────────────────────────────────────── */
  .main-wrapper {
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  /* ── HAMBURGER: show ───────────────────────────────────────── */
  .sidebar-toggle-btn {
    display: flex;
  }

  /* ═══════════════════════════════════════════════════════
     TOP BAR
  ═══════════════════════════════════════════════════════ */
  .topbar {
    padding: 0 10px 0 12px;
    gap: 6px;
    flex-wrap: nowrap;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    position: sticky;
    top: 0;
    z-index: 50;
    overflow: hidden;
  }

  /* Page title — truncate cleanly */
  .topbar-title {
    font-size: 0.83rem;
    font-weight: 800;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Period buttons row — show as small scrollable strip on mobile */
  .topbar-period {
    display: flex;
    overflow-x: auto;
    flex-shrink: 0;
    max-width: 190px;
    gap: 3px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar-period::-webkit-scrollbar { display: none; }
  .period-btn { padding: 3px 8px; font-size: 0.68rem; }

  /* Actions area */
  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }

  /* Hide decorative elements */
  .topbar-time { display: none; }
  .sync-status { display: none; }

  /* P&L button: icon + short label */
  .pl-open-btn {
    padding: 6px 8px;
    font-size: 0.76rem;
    white-space: nowrap;
  }
  /* Hide the text inside P&L button, keep icon */
  .pl-open-btn > *:not(i) { display: none; }

  /* User chip: compact */
  .topbar-user-chip {
    padding: 3px 8px 3px 5px;
    gap: 5px;
    border-radius: 18px;
  }
  .topbar-user-chip .tc-name {
    font-size: 0.70rem;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-user-chip .tc-role { display: none; }
  .topbar-user-chip .tc-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
  }

  /* ═══════════════════════════════════════════════════════
     PAGE CONTENT CONTAINER
  ═══════════════════════════════════════════════════════ */
  .page-content {
    padding: 14px 12px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
  }

  /* All page sections */
  .page.active {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ═══════════════════════════════════════════════════════
     KPI GRIDS
  ═══════════════════════════════════════════════════════ */
  .kpi-grid,
  .kpi-grid-3,
  .kpi-grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* KPI card padding */
  .kpi-card,
  .kpi-card-v2 {
    padding: 14px 12px !important;
  }
  .kpi-v2-value { font-size: 1.45rem; }
  .kpi-value    { font-size: 1.25rem; }

  /* ═══════════════════════════════════════════════════════
     CHARTS GRIDS
  ═══════════════════════════════════════════════════════ */
  .charts-grid,
  .charts-grid-3,
  .charts-grid-equal {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .chart-card {
    padding: 14px !important;
    min-height: 0;
  }
  .chart-card canvas { max-width: 100%; }

  /* ═══════════════════════════════════════════════════════
     DEPARTMENT + DATASOURCE GRIDS
  ═══════════════════════════════════════════════════════ */
  .dept-grid         { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .datasource-grid   { grid-template-columns: 1fr !important; }
  .datasource-card   { padding: 14px !important; }
  .dept-card         { padding: 12px !important; }

  /* ═══════════════════════════════════════════════════════
     PILLARS GRID (expansion plan)
  ═══════════════════════════════════════════════════════ */
  .pillars-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ═══════════════════════════════════════════════════════
     DEPT KPI GRIDS (layers + dept-pages)
  ═══════════════════════════════════════════════════════ */
  .dept-kpi-grid   { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .kpi-cards-grid  { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .madar-kpi-grid  { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ═══════════════════════════════════════════════════════
     HR + PRIME COST GRIDS
  ═══════════════════════════════════════════════════════ */
  .hr-doc-alerts           { grid-template-columns: 1fr !important; }
  .prime-cost-manual-inputs{ grid-template-columns: 1fr 1fr !important; }

  /* ═══════════════════════════════════════════════════════
     BRANCH HEATMAP
  ═══════════════════════════════════════════════════════ */
  .branch-heatmap      { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .branch-heatmap-grid { grid-template-columns: 1fr 1fr !important; }
  .branch-cell-name    { font-size: 0.60rem; }

  /* ═══════════════════════════════════════════════════════
     FORM GRID
  ═══════════════════════════════════════════════════════ */
  .form-grid { grid-template-columns: 1fr !important; }

  /* ═══════════════════════════════════════════════════════
     TABLES — all scrollable
  ═══════════════════════════════════════════════════════ */
  .branches-table-wrap,
  .kpi-table-wrap,
  .followup-table-wrap,
  .audit-table-wrap,
  [class*="-table-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  table,
  .dashboard-table,
  .followup-table,
  .weekly-perf-table,
  .pl-table,
  .ref-table,
  .kpi-table,
  .audit-table {
    min-width: 500px;
  }

  /* ═══════════════════════════════════════════════════════
     SECTION HEADERS
  ═══════════════════════════════════════════════════════ */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }
  .section-title { font-size: 0.92rem; }

  /* ═══════════════════════════════════════════════════════
     HERO SECTIONS — all pages
  ═══════════════════════════════════════════════════════ */
  .cockpit-hero,
  .proj-hero,
  .dept-hero,
  .brief-hero,
  .expansion-hero,
  .weekly-hero {
    flex-direction: column !important;
    padding: 16px 14px !important;
    gap: 12px !important;
    border-right-width: 4px !important;
  }

  .cockpit-title,
  .proj-title,
  .dept-page-title,
  .weekly-title {
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
  }

  .cockpit-meta,
  .expansion-hero-kpis,
  .weekly-hero-kpis,
  .proj-hero-kpis {
    flex-wrap: wrap;
    gap: 5px;
  }
  .cockpit-meta-item {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  .hero-kpi        { min-width: 78px; padding: 9px 10px; }
  .hero-kpi-val    { font-size: 1.05rem; }
  .hero-kpi-label  { font-size: 0.65rem; }

  /* ═══════════════════════════════════════════════════════
     OVERVIEW PAGE — strategic banner inline styles
  ═══════════════════════════════════════════════════════ */
  #page-overview > div:first-child {
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px !important;
  }
  #page-overview > div:first-child > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  #page-overview > div:first-child > div:last-child button {
    flex: 1;
    min-width: 120px;
    font-size: 0.72rem !important;
    padding: 7px 8px !important;
    text-align: center;
    justify-content: center;
  }

  /* ═══════════════════════════════════════════════════════
     DEPT PAGE HEADERS
  ═══════════════════════════════════════════════════════ */
  .dept-header {
    flex-direction: column;
    gap: 10px;
  }
  .dept-header-right {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .dept-summary-strip { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

  /* ═══════════════════════════════════════════════════════
     DEPT TABS
  ═══════════════════════════════════════════════════════ */
  .dept-tabs {
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
  }
  .dept-tab {
    padding: 6px 10px;
    font-size: 0.73rem;
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  .followup-tabs { flex-wrap: wrap; gap: 5px; }
  .followup-tab  { padding: 5px 10px; font-size: 0.74rem; }

  /* ═══════════════════════════════════════════════════════
     FILTER BAR
  ═══════════════════════════════════════════════════════ */
  .dept-filter-bar,
  .filter-bar {
    flex-direction: column;
    gap: 8px;
  }
  .filter-search-wrap,
  .filter-search {
    width: 100%;
    min-width: unset;
  }

  /* ═══════════════════════════════════════════════════════
     COCKPIT ROWS (project + dept)
  ═══════════════════════════════════════════════════════ */
  .cockpit-project-row,
  .cockpit-dept-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 10px;
  }
  .cpr-progress-wrap {
    order: 3;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cpr-bar { flex: 1; }

  /* ═══════════════════════════════════════════════════════
     CEO COCKPIT — side-by-side grid → stack
  ═══════════════════════════════════════════════════════ */
  #page-ceo-cockpit > .page-content > div[style*="grid-template-columns:1fr 1fr"],
  #page-overview > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ═══════════════════════════════════════════════════════
     OWNER REF CARD
  ═══════════════════════════════════════════════════════ */
  .owner-ref-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px !important;
  }
  .owner-ref-card > div:last-child {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: 0 !important;
  }
  .owner-ref-card > div:last-child button {
    flex: 1;
    min-width: 100px;
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    white-space: nowrap;
    justify-content: center;
  }

  /* ═══════════════════════════════════════════════════════
     CASHFLOW ALERT BANNER
  ═══════════════════════════════════════════════════════ */
  .cashflow-alert-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 12px;
  }
  .cashflow-alert-text { flex: 1; min-width: 0; }
  .cashflow-alert-title { font-size: 0.82rem; }
  .cashflow-alert-sub   { font-size: 0.70rem; }
  .cashflow-alert-dismiss { margin-top: 4px; align-self: flex-end; }

  /* ═══════════════════════════════════════════════════════
     MODALS
  ═══════════════════════════════════════════════════════ */
  .modal-box {
    width: 96% !important;
    max-width: 96% !important;
    margin: auto;
    border-radius: 12px;
  }
  .modal-body { padding: 14px 12px; }
  .pl-table   { min-width: 500px; }

  /* Dept KPI detail drawer */
  .prod-modal-drawer,
  .kpi-modal-drawer {
    width: 100vw !important;
    border-radius: 12px 0 0 0;
  }
  .modal-metrics-row   { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .ytd-row             { grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 10px 12px; }
  .ytd-value           { font-size: 0.80rem; }

  /* ═══════════════════════════════════════════════════════
     FINANCIAL TIMELINE (expansion plan)
  ═══════════════════════════════════════════════════════ */
  .fin-timeline  { flex-direction: column; gap: 10px; }
  .fin-arrow     { transform: rotate(90deg); align-self: center; }
  .fin-year-card { min-width: 0; }

  /* ═══════════════════════════════════════════════════════
     INITIATIVES LIST
  ═══════════════════════════════════════════════════════ */
  .initiative-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  .initiative-progress-wrap { width: 100%; order: 2; }
  .initiative-status        { order: 3; }

  /* ═══════════════════════════════════════════════════════
     MANUAL INPUT (in index.html page)
  ═══════════════════════════════════════════════════════ */
  .mi-page-header    { flex-direction: column; gap: 10px; }
  .mi-header-right   { justify-content: flex-start; width: 100%; flex-wrap: wrap; }
  .mi-period-bar     { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mi-section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mi-fields-grid    { grid-template-columns: 1fr !important; }
  .mi-section-tabs   { flex-wrap: wrap; gap: 4px; }
  .mi-tab {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
  .mi-tab-label  { display: none; }

  /* ═══════════════════════════════════════════════════════
     PRODUCTIVITY PAGE
  ═══════════════════════════════════════════════════════ */
  #page-productivity    { padding: 14px 12px !important; }
  .prod-header          { flex-direction: column; align-items: flex-start; gap: 8px; }
  .prod-summary-strip   { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .prod-charts-row      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .prod-performers      { flex-direction: column; }
  .prod-conn-status     { flex-direction: column; align-items: flex-start; gap: 8px; }
  .prod-filter-bar      { flex-direction: column; gap: 8px; }
  .prod-filter-search,
  .prod-filter-select   { width: 100%; min-width: unset; }

  /* ═══════════════════════════════════════════════════════
     DEPT PAGES — padding + layout
  ═══════════════════════════════════════════════════════ */
  #page-dept-finance,
  #page-dept-operations,
  #page-dept-procurement,
  #page-dept-quality,
  #page-dept-hr,
  #page-dept-it,
  #page-dept-maintenance,
  #page-dept-franchise,
  #page-dept-bizdev,
  #page-dept-marketing {
    padding: 14px 12px !important;
  }

  /* ═══════════════════════════════════════════════════════
     EXEC FOLLOWUP TABLE
  ═══════════════════════════════════════════════════════ */
  .exec-followup-section { overflow-x: auto; }

  /* ═══════════════════════════════════════════════════════
     KPI INPUT ROWS
  ═══════════════════════════════════════════════════════ */
  .ref-row,
  .kpi-input-row,
  .kpi-row-header {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    font-size: 0.70rem;
  }

} /* end @media ≤768px */


/* ════════════════════════════════════════════════════════════════
   2. SMALL PHONE  (≤480px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  html { font-size: 13px; }

  /* Topbar */
  .topbar { padding: 0 8px 0 10px; gap: 4px; }
  .topbar-title { font-size: 0.76rem; }

  /* Avatar-only user chip on tiny screens */
  .topbar-user-chip .tc-name { display: none; }
  .topbar-user-chip { padding: 3px 5px; }

  /* Page content tighter */
  .page-content { padding: 10px 9px; }

  /* KPI grids stay 2-col on small phones */
  .kpi-grid,
  .kpi-grid-3,
  .kpi-grid-2 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* KPI values */
  .kpi-v2-value { font-size: 1.25rem; }
  .kpi-value    { font-size: 1.1rem; }

  /* Dept + Pillars: single column */
  .pillars-grid  { grid-template-columns: 1fr !important; gap: 8px !important; }
  .dept-grid     { grid-template-columns: 1fr !important; }
  .dept-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-cards-grid{ grid-template-columns: 1fr 1fr !important; }

  /* Summary strips stay 2-col */
  .dept-summary-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .prod-summary-strip { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

  /* Modal metrics */
  .modal-metrics-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

  /* Branch heatmap: 2 cols on tiny screens */
  .branch-heatmap { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }

  /* Prime cost */
  .prime-cost-manual-inputs { grid-template-columns: 1fr 1fr !important; }

  /* Hero titles */
  .cockpit-title,
  .proj-title,
  .dept-page-title,
  .weekly-title { font-size: 1.05rem !important; }

  /* Mi tabs: icon-only */
  .mi-tab-label { display: none; }
  .mi-tab-count { display: none; }
  .mi-field-count-badge { display: none; }
  .mi-period-bar { gap: 8px; }

  /* YTD row */
  .ytd-row { padding: 9px 10px; gap: 4px; }
  .ytd-value { font-size: 0.75rem; }

  /* Dept kpi card title */
  .dept-kpi-card .kpi-card-title { font-size: 0.78rem; }

  /* Cockpit project row: tighter */
  .cockpit-project-row,
  .cockpit-dept-row { padding: 8px 8px; gap: 6px; }

  /* Initiatives progress */
  .initiative-progress-wrap { width: 100%; }

  /* DKC actual value */
  .dkc-actual { font-size: 1.1rem; }

  /* Hamburger button size */
  .sidebar-toggle-btn { width: 36px; height: 36px; font-size: 0.95rem; }

} /* end @media ≤480px */


/* ════════════════════════════════════════════════════════════════
   3. TABLET  (769px – 1024px) — light, non-intrusive touch
════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  :root { --sidebar-w: 220px; }

  .sidebar {
    width: var(--sidebar-w) !important;
    transform: translateX(0) !important;
  }
  .main-wrapper {
    margin-right: var(--sidebar-w) !important;
    width: calc(100% - var(--sidebar-w)) !important;
  }

  /* Sidebar items compact */
  .nav-item     { padding: 9px 14px; font-size: 0.82rem; }
  .sidebar-logo-img { width: 100px; }
  .sidebar-logo .logo-title { font-size: 0.74rem; }
  .sidebar-footer { padding: 12px 14px; }

  /* Topbar */
  .topbar       { padding: 0 18px; gap: 10px; }
  .topbar-title { font-size: 0.92rem; }
  .topbar-time  { display: none; }
  .sidebar-toggle-btn { display: none; }

  /* KPI grids */
  .kpi-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-grid-3   { grid-template-columns: repeat(3, 1fr) !important; }
  .charts-grid  { grid-template-columns: 1fr !important; }
  .charts-grid-3{ grid-template-columns: repeat(2, 1fr) !important; }
  .pillars-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dept-grid    { grid-template-columns: repeat(2, 1fr) !important; }

  /* Page content */
  .page-content { padding: 18px 16px; }

  /* Department pages */
  #page-productivity,
  #page-dept-finance,
  #page-dept-operations,
  #page-dept-procurement,
  #page-dept-quality,
  #page-dept-hr,
  #page-dept-it,
  #page-dept-maintenance,
  #page-dept-franchise,
  #page-dept-bizdev,
  #page-dept-marketing {
    padding: 18px 16px !important;
  }

  /* Department pages with extra padding */
  #page-dept-maintenance,
  #page-dept-franchise,
  #page-dept-bizdev { padding: 18px 16px !important; }

} /* end tablet */


/* ════════════════════════════════════════════════════════════════
   4. DESKTOP SAFETY  (≥1025px) — guarantee nothing leaks
════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* Hamburger + overlay always hidden on desktop */
  .sidebar-toggle-btn { display: none !important; }
  .sidebar-overlay    { display: none !important; }

  /* Sidebar fully visible */
  .sidebar {
    transform: translateX(0) !important;
    width: var(--sidebar-w) !important;
  }

  /* Main wrapper back to desktop layout */
  .main-wrapper {
    margin-right: var(--sidebar-w) !important;
    width: calc(100% - var(--sidebar-w)) !important;
  }

} /* end desktop safety */


/* ════════════════════════════════════════════════════════════════
   5. LOGIN PAGE  (≤768px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Users grid: 2 columns */
  .users-grid,
  .login-users-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Credentials info banner */
  .credentials-info-banner {
    padding: 10px 12px;
    font-size: 0.76rem;
    flex-direction: column;
    gap: 6px;
  }

  /* Lock warning */
  .lock-warning { padding: 10px 12px; font-size: 0.76rem; }

  /* Password card */
  .pw-card { padding: 20px 14px !important; }

  /* User grid container */
  .user-grid-container { padding: 0 8px; }

  /* Login logo/header section */
  .login-logo-section {
    padding: 14px 16px;
  }
  .login-logo-section h1 { font-size: 1.25rem; }
  .login-logo-section p  { font-size: 0.78rem; }

  /* Login page body: fix background overflow */
  body.login-body {
    overflow-x: hidden;
    min-height: 100vh;
  }

} /* end login ≤768px */

@media (max-width: 480px) {

  /* Users grid stays 2 cols on small phones */
  .users-grid,
  .login-users-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* User card text tighter */
  .user-card-name { font-size: 0.78rem; }
  .user-card-role { font-size: 0.65rem; }

} /* end login ≤480px */


/* ════════════════════════════════════════════════════════════════
   6. DATA-ENTRY PAGE  (≤768px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  body.data-entry-body { overflow-x: hidden; }

  /* Header bar */
  .deh-header {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    min-height: auto !important;
  }
  .deh-header .deh-logo  { width: 34px !important; height: 34px !important; font-size: 0.95rem !important; }
  .deh-header .deh-titles h1 { font-size: 0.92rem !important; }
  .deh-header .deh-titles p  { font-size: 0.68rem !important; }
  .deh-header-actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  .deh-action-btn { font-size: 0.73rem !important; padding: 6px 10px !important; }

  /* Layout: stack sidebar above main */
  .deh-layout {
    flex-direction: column !important;
    height: auto !important;
  }

  /* Sidebar → horizontal scrollable tab strip */
  .deh-sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 48px !important;
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border, #d1e8ed) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .deh-sidebar::-webkit-scrollbar { display: none; }

  .deh-nav-item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    min-width: auto !important;
    justify-content: center !important;
  }
  .deh-nav-item .deh-nav-icon { font-size: 0.82rem !important; }
  .deh-nav-count { font-size: 0.58rem !important; }

  /* Main content */
  .deh-main {
    width: 100% !important;
    padding: 12px 10px !important;
    overflow-x: hidden;
  }

  /* Period bar */
  .deh-period-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .deh-period-bar .deh-period-selects {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  /* Summary strip: 2 cols */
  .deh-summary-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Fields grid: single column */
  .deh-fields-grid,
  .mi-fields-grid {
    grid-template-columns: 1fr !important;
  }

  /* Group title */
  .deh-group-title { font-size: 0.68rem !important; }

  /* Field cards */
  .deh-field-card,
  .mi-field-card { padding: 10px 12px !important; }

} /* end data-entry ≤768px */


/* ════════════════════════════════════════════════════════════════
   7. AUDIT REPORT PAGE  (≤768px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Header: stack vertically */
  .audit-header {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }

  /* Stats grid: 2 columns */
  .audit-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Scrollable table */
  .audit-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .audit-table { min-width: 520px; }

  /* Filter bar: stack */
  .audit-filter-bar { flex-direction: column; gap: 8px; }

} /* end audit ≤768px */


/* ════════════════════════════════════════════════════════════════
   8. OVERFLOW SAFETY  (≤768px) — catch anything that bleeds
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Grids and flex rows must not overflow */
  [class*="kpi-grid"],
  [class*="charts-grid"],
  [class*="dept-grid"],
  [class*="-strip"],
  [class*="-grid"] {
    min-width: 0;
    max-width: 100%;
  }

  /* Media: never wider than viewport */
  img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* Fixed-width inline styles: constrain gracefully */
  .page > * { max-width: 100%; overflow-x: hidden; }

  /* Badges and chips: don't wrap awkwardly */
  .status-badge,
  .nav-badge,
  .kpi-change,
  .kpi-v2-change,
  .legal-status-badge,
  .prime-cost-badge,
  .madar-badge,
  .conn-status,
  .cockpit-badge,
  .proj-badge,
  .dept-badge,
  .weekly-badge,
  .expansion-badge {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Long text: break gracefully, never overflow */
  .section-title,
  .chart-title,
  .chart-subtitle,
  .kpi-label,
  .kpi-v2-label,
  .dkc-name,
  .dept-kpi-card .kpi-card-title,
  .owner-ref-role,
  .cashflow-alert-sub {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Toast notification */
  .toast-container {
    bottom: 12px;
    left: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
  }
  .toast { max-width: 100%; }

  /* Inline-styled grids (cockpit side-by-side cards) */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline-styled 3-col grids */
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Any inline 4-col grid */
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

} /* end overflow safety */


/* ════════════════════════════════════════════════════════════════
   10. DATA-ENTRY PAGE — EXTRA FIXES  (≤480px)
    Supplements section 6 for very small phones where the header
    wraps awkwardly and the action buttons overflow.
════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Stack actions under logo */
  .deh-actions {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  /* Shrink action buttons to icon-only on tiny screens */
  .deh-btn > *:not(i) { display: none; }
  .deh-btn { padding: 7px 10px !important; }

  /* Avatar in header: tighter */
  .deh-avatar { width: 24px !important; height: 24px !important; font-size: 0.72rem !important; }

  /* Horizontal tab strip: smaller text */
  .deh-nav-item {
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
  }
  /* Hide icon on very small phones — keep text label only */
  .deh-nav-item .deh-nav-icon { display: none !important; }

} /* end data-entry ≤480px */


/* ════════════════════════════════════════════════════════════════
   11. FINE-TUNED TOUCH INTERACTIONS
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Minimum touch target: 44×44px for interactive elements */
  .nav-item,
  .period-btn,
  .dept-tab,
  .followup-tab,
  .mi-tab,
  .filter-btn,
  .deh-nav-item {
    min-height: 40px;
  }

  /* Prevent double-tap zoom on buttons */
  button, a {
    touch-action: manipulation;
  }

  /* Remove hover flicker on touch devices */
  @media (hover: none) {
    .kpi-card:hover,
    .kpi-card-v2:hover,
    .chart-card:hover,
    .dept-card:hover,
    .cockpit-project-row:hover,
    .cockpit-dept-row:hover,
    .nav-item:hover {
      transform: none !important;
    }
  }

  /* Scrollable containers — smooth momentum */
  .sidebar-nav,
  .deh-sidebar,
  .audit-table-wrap,
  .kpi-table-wrap,
  [class*="-table-wrap"],
  .modal-body {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

} /* end touch interactions */