/* ================================================
   LE MINERALE DASHBOARD — RESPONSIVE CSS
   Mobile-First Approach
   Breakpoints:
     xs  : ≤479px
     sm  : 480–767px
     md  : 768–991px
     lg  : 992–1199px
     xl  : ≥1200px (default / desktop)
   ================================================ */

/* ================================================
   BASE: CSS VARIABLES — RESPONSIVE TOKENS
   ================================================ */
:root {
  --topnav-h: 60px;
  --subnav-h: 48px;

  /* Font scale */
  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  32px;

  /* Spacing scale */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;

  /* Touch target minimum */
  --touch-min: 44px;
}

/* ================================================
   BASE RESETS FOR RESPONSIVE
   ================================================ */
*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas { max-width: 100%; height: auto; }

/* No horizontal scroll on root */
html, body { max-width: 100%; overflow-x: hidden; }

/* ================================================
   TYPOGRAPHY — DESKTOP (default xl)
   ================================================ */
body { font-size: var(--fs-base); }

.kpi-value         { font-size: var(--fs-4xl); }
.kpi-value.sm      { font-size: var(--fs-2xl); }
.cb-main           { font-size: var(--fs-3xl); }
.outlet-stat-num   { font-size: var(--fs-2xl); }
.usership-val      { font-size: var(--fs-2xl); }
.chart-title       { font-size: var(--fs-md); }
.kpi-label         { font-size: var(--fs-xs); }
.section-title     { font-size: 11px; }
th                 { font-size: var(--fs-xs); }
td                 { font-size: 12px; }
.nav-menu li a     { font-size: 13px; }

/* ================================================
   LAYOUT — PAGE WRAPPER (DESKTOP)
   ================================================ */
.page-wrap {
  margin-top: calc(var(--topnav-h) + 16px);
  padding: 0 24px 32px;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ================================================
   NAVIGATION — DESKTOP
   ================================================ */
.topnav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 0 24px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  flex-wrap: nowrap;
}
.nav-menu::-webkit-scrollbar { display: none; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Hamburger hidden on desktop */
.nav-hamburger { display: none; }

/* ================================================
   FILTER BAR — DESKTOP
   ================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
}

/* ================================================
   KPI GRID — DESKTOP (4–6 per row)
   ================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* ================================================
   CHART CARD — DESKTOP
   ================================================ */
.chart-card {
  padding: 18px 20px;
}
.chart-card canvas,
.chart-card [id*="Chart"],
.chart-card [id*="chart"] {
  width: 100% !important;
}

/* ================================================
   TABLE — RESPONSIVE CONTAINER
   ================================================ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-card {
  overflow: hidden;
}

table {
  width: 100%;
  min-width: 500px; /* ensures horizontal scroll on small screens */
  border-collapse: collapse;
}

/* Sticky header */
th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

/* ================================================
   BUTTONS — MINIMUM TOUCH TARGET
   ================================================ */
.btn-apply,
.btn-reset,
.btn-export,
.filter-toggle,
.fselect,
.finput,
.cb-tab,
.outlet-btn,
.status-toko-btn,
.trend-type-btn,
.nav-icon-btn {
  min-height: 36px;
}

/* ================================================
   MODAL — DESKTOP
   ================================================ */
.detail-modal-overlay,
[id*="modal"][style*="position:fixed"],
[id*="Modal"][style*="position:fixed"] {
  padding: 20px;
  overflow-y: auto;
  align-items: flex-start;
}

.detail-modal-box,
[class*="modal-box"] {
  width: 100%;
  max-width: 1100px;
  margin: auto;
}

/* ================================================
   USERSHIP GRIDS — DESKTOP
   ================================================ */
.usership-grid   { grid-template-columns: repeat(3, 1fr); }
.cb-all-grid     { grid-template-columns: repeat(3, 1fr); }
.us-category-grid { grid-template-columns: repeat(3, 1fr); }

/* ================================================
   OUTLET BREAKDOWN — DESKTOP
   ================================================ */
.outlet-breakdown { grid-template-columns: 1fr 1fr; }
.outlet-stats     { grid-template-columns: 1fr 1fr; }

/* ================================================
   TL KPIS — DESKTOP
   ================================================ */
.tl-kpis {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* ================================================
   DONUT GROUP — DESKTOP
   ================================================ */
.donut-group {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ================================================
   CB METRICS — DESKTOP
   ================================================ */
.cb-metrics {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}


/* ================================================================
   ██████████  LG  ≤1199px (Laptop)
   ================================================================ */
@media (max-width: 1199px) {
  :root {
    --fs-4xl: 28px;
    --fs-3xl: 24px;
    --fs-2xl: 20px;
  }

  .page-wrap {
    padding: 0 20px 28px;
    max-width: 100%;
  }

  .topnav { padding: 0 20px; gap: 8px; }

  .nav-menu li a {
    padding: 7px 12px;
    font-size: 12px;
  }

  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }

  .kpi-value { font-size: 28px; }
}


/* ================================================================
   ████████    MD  ≤991px (Tablet Landscape)
   ================================================================ */
@media (max-width: 991px) {
  :root {
    --fs-base: 13px;
    --fs-md:   13px;
    --fs-lg:   15px;
    --fs-xl:   17px;
    --fs-2xl:  20px;
    --fs-3xl:  22px;
    --fs-4xl:  26px;
  }

  /* --- Page Wrap --- */
  .page-wrap {
    margin-top: calc(var(--topnav-h) + 12px);
    padding: 0 16px 24px;
  }

  /* --- Navigation: collapse to hamburger at md --- */
  .nav-hamburger { display: flex !important; }

  .nav-menu {
    display: none;
    position: fixed;
    top: var(--topnav-h);
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--lm-blue-light);
    box-shadow: 0 8px 32px rgba(0,174,239,0.12);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 12px 12px;
    z-index: 99;
    overflow-y: auto;
    max-height: calc(100vh - var(--topnav-h));
  }

  .nav-menu.open { display: flex; }

  .nav-menu li a {
    padding: 11px 14px;
    font-size: 13px;
    border-radius: 10px;
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
  }

  /* Compact nav-right */
  .sync-badge span:not(.sync-dot) { display: none; }
  .sync-badge { padding: 5px 8px; }

  /* --- KPI Grid: 3 per row --- */
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .kpi-value      { font-size: 24px; }
  .kpi-value.sm   { font-size: 18px; }
  .kpi-card       { padding: 14px 14px; }
  .kpi-icon       { width: 32px; height: 32px; margin-bottom: 8px; }
  .kpi-icon svg   { width: 16px; height: 16px; }

  /* --- Charts --- */
  .chart-card { padding: 14px 16px; }

  /* --- Usership --- */
  .usership-grid    { grid-template-columns: repeat(2, 1fr); }
  .cb-all-grid      { grid-template-columns: repeat(2, 1fr); }
  .us-category-grid { grid-template-columns: repeat(3, 1fr); }

  /* --- Outlet breakdown --- */
  .outlet-breakdown { grid-template-columns: 1fr; }

  /* --- TL KPIs: show but compact --- */
  .tl-kpis { gap: 12px; }
  .tl-kpi-val { font-size: 16px; }

  /* --- Filter: wrap naturally --- */
  .filter-bar {
    padding: 8px 12px;
    gap: 6px;
  }
  .fselect { min-width: 90px !important; font-size: 12px; }

  /* --- CB Metrics --- */
  .cb-metrics { grid-template-columns: repeat(3, 1fr); }
  .cb-main    { font-size: 24px; }

  /* --- Usership values --- */
  .usership-val { font-size: 20px; }
  .usership-card { padding: 12px 14px; }

  /* --- Table search --- */
  .table-search { min-width: 160px; }

  /* --- Modal --- */
  .detail-modal-box,
  [class*="modal-box"] {
    max-width: 95vw;
    border-radius: 16px;
  }
}


/* ================================================================
   ██████      SM-MD  ≤767px (Tablet Portrait)
   ================================================================ */
@media (max-width: 767px) {
  :root {
    --fs-base: 13px;
    --fs-md:   13px;
    --fs-2xl:  18px;
    --fs-3xl:  20px;
    --fs-4xl:  22px;
  }

  /* --- Page Wrap --- */
  .page-wrap {
    margin-top: calc(var(--topnav-h) + 10px);
    padding: 0 12px 20px;
  }

  .topnav { padding: 0 14px; gap: 8px; }

  /* --- KPI Grid: 2 per row --- */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .kpi-value    { font-size: 22px; }
  .kpi-value.sm { font-size: 16px; }
  .kpi-card     { padding: 12px 12px; }

  /* --- Usership --- */
  .usership-grid    { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cb-all-grid      { grid-template-columns: 1fr; }
  .us-category-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* --- Chart card --- */
  .chart-card { padding: 12px 14px; }
  .chart-title { font-size: 13px; }

  /* --- CB Metrics: 2 per row --- */
  .cb-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cb-main    { font-size: 22px; }
  .cb-sub     { font-size: 15px; }

  /* --- TL card: hide individual KPIs, show in body --- */
  .tl-kpis { display: none; }
  .tl-header { padding: 12px 14px; }
  .tl-avatar { width: 36px; height: 36px; font-size: 12px; }
  .tl-name   { font-size: 13px; }

  /* --- Filter bar: wrap, full width inputs --- */
  .filter-bar {
    padding: 8px 10px;
    gap: 6px;
  }
  .filter-toggle-group { flex-wrap: wrap; }
  .fselect {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 6px);
    font-size: 12px;
  }
  .finput { width: 100%; }
  .filter-divider { display: none; }
  .btn-reset, .btn-apply { min-height: var(--touch-min); padding: 8px 14px; }

  /* --- Table --- */
  .table-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }
  .table-search { width: 100%; min-width: 0; font-size: 12px; }

  /* --- Outlet breakdown --- */
  .outlet-breakdown { grid-template-columns: 1fr; }
  .outlet-stats     { grid-template-columns: 1fr 1fr; }

  /* --- Donut group --- */
  .donut-group { grid-template-columns: repeat(2, 1fr); }

  /* --- Performance card --- */
  .perf-header { flex-direction: column; align-items: flex-start; }
  .outlet-toggle { flex-wrap: wrap; gap: 4px; }

  /* --- Modal: near full screen --- */
  .detail-modal-overlay,
  [id*="modal"][style*="position:fixed"],
  [id*="Modal"][style*="position:fixed"] {
    padding: 10px;
    align-items: flex-start;
  }
  .detail-modal-box,
  [class*="modal-box"],
  .outlet-modal-box {
    max-width: 98vw !important;
    width: 98vw !important;
    border-radius: 14px;
    max-height: 92vh;
    overflow-y: auto;
  }

  /* --- Loading box --- */
  .loader-box { padding: 28px 32px; }

  /* --- Nav: user pill compact --- */
  .user-name, .user-role { display: none; }
  .user-pill { padding: 4px; }
}


/* ================================================================
   ████        SM  ≤599px (Mobile)
   ================================================================ */
@media (max-width: 599px) {
  :root {
    --fs-base: 12px;
    --fs-md:   13px;
    --fs-2xl:  16px;
    --fs-3xl:  18px;
    --fs-4xl:  20px;
  }

  body { font-size: 12px; }

  /* --- Page Wrap --- */
  .page-wrap {
    padding: 0 10px 16px;
    margin-top: calc(var(--topnav-h) + 8px);
  }

  .topnav { padding: 0 12px; gap: 6px; }
  .nav-logo img { height: 30px; }
  .nav-logo-text { font-size: 14px; }

  /* --- KPI Grid: 2 per row, compact --- */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }

  .kpi-value    { font-size: 20px; }
  .kpi-value.sm { font-size: 15px; }
  .kpi-card     { padding: 10px 10px; }
  .kpi-icon     { width: 28px; height: 28px; margin-bottom: 6px; }
  .kpi-icon svg { width: 14px; height: 14px; }
  .kpi-label    { font-size: 9px; }
  .kpi-sub      { font-size: 11px; }

  /* --- Section title --- */
  .section-title { font-size: 10px; margin-bottom: 8px; }

  /* --- Chart --- */
  .chart-card   { padding: 10px 12px; }
  .chart-title  { font-size: 12px; }
  .chart-header { margin-bottom: 10px; }

  /* --- Filter bar --- */
  .filter-bar {
    padding: 8px 8px;
    gap: 5px;
  }
  .fselect {
    flex: 1 1 calc(50% - 5px);
    min-width: 0 !important;
    padding: 8px 24px 8px 10px;
    font-size: 12px;
  }
  .filter-toggle {
    padding: 8px 12px;
    font-size: 11px;
    min-height: var(--touch-min);
  }
  .status-toko-btn {
    padding: 8px 10px;
    font-size: 11px;
    min-height: var(--touch-min);
  }

  /* --- Table --- */
  th { font-size: 9px; padding: 8px 10px; }
  td { font-size: 11px; padding: 8px 10px; }

  /* --- CB Metrics: 2 per row --- */
  .cb-metrics { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .cb-main    { font-size: 20px; }
  .cb-sub     { font-size: 14px; }
  .cb-metric  { padding: 10px 10px; }

  /* --- Usership: 1 per row (stacked) --- */
  .usership-grid    { grid-template-columns: 1fr; gap: 8px; }
  .usership-card    { padding: 10px 12px; }
  .usership-val     { font-size: 18px; }
  .us-category-grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Outlet --- */
  .outlet-stat-num  { font-size: 18px; }
  .outlet-breakdown { grid-template-columns: 1fr; gap: 10px; }

  /* --- Donut group: 2 per row --- */
  .donut-group { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* --- TL Card --- */
  .tl-kpis { display: none; }
  .tl-name  { font-size: 12px; }
  .tl-meta  { font-size: 10px; }

  /* --- Buttons: full touch target --- */
  .btn-export,
  .btn-apply,
  .btn-reset {
    padding: 10px 14px;
    min-height: var(--touch-min);
    font-size: 12px;
  }

  /* --- Modal --- */
  .detail-modal-box,
  [class*="modal-box"],
  .outlet-modal-box {
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: 14px 14px 0 0;
    max-height: 92vh;
    margin: auto 0 0 0 !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  /* --- Toast --- */
  .toast {
    right: 12px;
    bottom: 16px;
    left: 12px;
    font-size: 12px;
  }

  /* --- Nav icon buttons --- */
  .nav-icon-btn { width: 36px; height: 36px; }

  /* --- Chatbot tabs --- */
  .chatbot-tabs { flex-wrap: wrap; gap: 5px; }
  .cb-tab {
    padding: 8px 14px;
    font-size: 11px;
    min-height: var(--touch-min);
  }

  /* --- Perf card meta --- */
  .perf-meta { flex-direction: column; gap: 6px; }
  .perf-meta-item { font-size: 11px; }
}


/* ================================================================
   ██          XS  ≤479px (Mobile Small)
   ================================================================ */
@media (max-width: 479px) {
  :root {
    --fs-base: 12px;
    --fs-md:   12px;
    --fs-2xl:  15px;
    --fs-3xl:  17px;
    --fs-4xl:  19px;
  }

  /* --- Page Wrap --- */
  .page-wrap {
    padding: 0 8px 14px;
    margin-top: calc(var(--topnav-h) + 6px);
  }

  .topnav { padding: 0 10px; gap: 4px; }

  /* --- KPI Grid: still 2 per row but tighter --- */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .kpi-value    { font-size: 18px; }
  .kpi-value.sm { font-size: 14px; }
  .kpi-card     { padding: 9px 9px; }
  .kpi-label    { font-size: 8px; }

  /* --- Chart title & legend font --- */
  .chart-title { font-size: 11px; }
  .chart-legend { font-size: 10px; gap: 8px; }
  .leg-dot { width: 8px; height: 8px; }

  /* --- Filter compact --- */
  .fselect {
    flex: 1 1 100%;
    font-size: 12px;
  }

  /* --- Table --- */
  th { font-size: 8px; padding: 7px 8px; }
  td { font-size: 11px; padding: 7px 8px; }

  /* --- CB Metrics: 2 per row --- */
  .cb-main { font-size: 18px; }
  .cb-sub  { font-size: 13px; }

  /* --- Usership grid: 1 col --- */
  .usership-grid    { grid-template-columns: 1fr; }
  .us-category-grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Donut group: 2 col or 1 col --- */
  .donut-group { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* --- outlet --- */
  .outlet-stat-num { font-size: 16px; }
  .outlet-stat     { padding: 8px 10px; }

  /* --- Nav logo: text hidden on tiny screens --- */
  .nav-logo-sub { display: none; }
  .nav-logo-text { font-size: 13px; }
  .nav-logo img { height: 28px; }

  /* --- User avatar only --- */
  .user-pill svg { display: none; }

  /* --- Loader --- */
  .loader-box { padding: 24px 24px; }
  .loader-logo { width: 48px; height: 48px; }

  /* --- Rank badge --- */
  .rank-badge { width: 22px; height: 22px; font-size: 10px; }

  /* --- Perf card --- */
  .outlet-stats { grid-template-columns: 1fr 1fr; gap: 5px; }
}


/* ================================================================
   INLINE GRID FIXES — Override fixed inline grid-template-columns
   These target common patterns used in the HTML files
   ================================================================ */

/* Summary / index.html: main layout grid (chart + sidebar) */
@media (max-width: 991px) {
  /* Generic: any inline-style 2-column grid */
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns:1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  /* dmo summary 4-col → 2-col */
  .dmo-summary-grid,
  [id="lapserModalSummary"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 599px) {
  /* Any fixed 2-col inline grid → 1 col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

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

  /* dmo 4-col → 1-col */
  .dmo-summary-grid,
  [id="lapserModalSummary"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 479px) {
  .dmo-summary-grid,
  [id="lapserModalSummary"] {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ================================================================
   MODAL FULLSCREEN ON MOBILE — Override inline styles
   ================================================================ */
@media (max-width: 599px) {
  /* Inline max-width on modal boxes */
  [style*="max-width:1100px"],
  [style*="max-width: 1100px"],
  [style*="max-width:760px"],
  [style*="max-width: 760px"] {
    max-width: 100vw !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
  }

  /* Modal overlay */
  [style*="position:fixed"][style*="inset:0"],
  [style*="position: fixed"][style*="inset: 0"] {
    padding: 0 !important;
    align-items: flex-end !important;
  }
}


/* ================================================================
   TABLE HORIZONTAL SCROLL CONTAINER
   Ensures any table wrapper scrolls horizontally
   ================================================================ */
.table-wrap,
.dmo-tbl-wrap,
[id*="tableWrap"],
[id*="TableWrap"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Add scroll indicator on mobile */
@media (max-width: 767px) {
  .table-wrap::after,
  .dmo-tbl-wrap::after {
    content: '';
    display: block;
  }
}


/* ================================================================
   FILTER BAR — SPECIAL HANDLING
   On tablet/mobile: wrap filters in a scrollable row or stack
   ================================================================ */
@media (max-width: 767px) {
  .filter-bar {
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }

  /* Period mode bar — wrap */
  .period-mode-bar,
  .store-toolbar,
  .period-filter-wrap {
    flex-wrap: wrap;
    gap: 5px;
  }

  /* Toggle groups — allow wrap */
  .filter-toggle-group,
  .status-toko-group,
  .chatbot-tabs,
  .outlet-toggle {
    flex-wrap: wrap;
    gap: 4px;
  }
}


/* ================================================================
   CHART CANVAS RESPONSIVE FIX
   ChartJS sets inline width/height; override on mobile
   ================================================================ */
.chart-card > canvas,
.chart-card > div > canvas,
[class*="chart-container"] > canvas {
  max-width: 100% !important;
  width: 100% !important;
}

@media (max-width: 599px) {
  /* Reduce chart min-height on mobile */
  .chart-card canvas { min-height: 160px; }
}


/* ================================================================
   LOGIN PAGE — RESPONSIVE
   ================================================================ */
@media (max-width: 599px) {
  .login-card,
  [class*="login"] > [class*="card"],
  [id="loginBox"] {
    margin: 12px;
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
}


/* ================================================================
   PRINT MEDIA — HIDE NAV & FILTERS
   ================================================================ */
@media print {
  .topnav,
  .nav-hamburger,
  .filter-bar,
  .loading-overlay,
  .toast,
  .btn-export { display: none !important; }

  .page-wrap { margin-top: 0 !important; padding: 0 !important; }
  body { font-size: 12px; }
}


/* ================================================================
   UTILITY: NO OVERFLOW HELPER
   ================================================================ */
.responsive-overflow-hidden { overflow-x: hidden !important; }

/* Prevent any element from breaking layout */
@media (max-width: 767px) {
  * { max-width: 100%; }
  /* But allow tables and inputs to scroll */
  table, input, select, textarea { max-width: none; }
  .table-wrap, .dmo-tbl-wrap { max-width: 100%; }
}


/* ================================================================
   ACCESSIBILITY: FOCUS STYLES (visible on all screens)
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--lm-blue);
  outline-offset: 2px;
}