/*
 * Traffic Guard responsive UI unification layer — 2026-09-25
 * Loaded last on all primary frontend pages.
 * Goal: one fluid layout system for desktop, laptop, tablet and phone
 * without changing existing route/business logic.
 */

:root{
  --tg-shell-max: 1920px;
  --tg-content-max: 1760px;
  --tg-gutter: clamp(12px, 1.4vw, 26px);
  --tg-section-gap: clamp(12px, 1.2vw, 22px);
  --tg-control-h: 42px;
  --tg-radius-xs: 10px;
  --tg-radius-sm: 12px;
  --tg-radius-md: 16px;
  --tg-radius-lg: 22px;
  --tg-radius-xl: 28px;
  --tg-surface: color-mix(in srgb, var(--tg-prod-surface, #0f172a) 92%, transparent);
  --tg-surface-2: color-mix(in srgb, var(--tg-prod-surface-strong, #111827) 96%, transparent);
  --tg-border: var(--tg-prod-border, rgba(148,163,184,.18));
  --tg-text: var(--tg-prod-text, #e5e7eb);
  --tg-muted: var(--tg-prod-muted, #94a3b8);
  --tg-accent: var(--tg-prod-accent, #38bdf8);
  --tg-shadow: 0 14px 34px rgba(2,6,23,.16);
  --tg-shadow-lg: 0 22px 56px rgba(2,6,23,.22);
}

html{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}

body.ta-page{
  margin:0;
}

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

img,video,canvas{
  height:auto;
}

video{
  object-fit:contain;
}

button,input,select,textarea{
  max-width:100%;
  font:inherit;
}

button,
.btn,
.ta-action-btn,
.va-btn,
.ds-btn,
[class*="-btn"]{
  min-height:var(--tg-control-h);
  touch-action:manipulation;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.ta-input{
  min-height:var(--tg-control-h);
}

textarea{resize:vertical}

/* ------------------------------
   Global application shell
   ------------------------------ */

#app-nav{
  width:100%;
  min-width:0;
  position:relative;
  z-index:1000;
}

.ta-topbar{
  width:100%;
  overflow:visible;
}

.ta-topbar .ta-inner{
  width:min(var(--tg-shell-max),100%);
  max-width:var(--tg-shell-max);
  margin-inline:auto;
  padding:10px var(--tg-gutter);
  gap:clamp(10px,1vw,18px);
}

.ta-brand{
  max-width:260px;
  gap:10px;
}

.ta-brand-icon{
  width:50px;
  height:50px;
  min-width:50px;
  border-radius:15px;
  box-shadow:0 10px 24px rgba(2,6,23,.26);
}

.ta-brand-logo{
  width:42px;
  height:42px;
}

.ta-brand-text{
  font-size:clamp(.92rem,1vw,1.04rem);
}

.ta-brand-subtext{
  font-size:.65rem;
}

.ta-nav{
  min-width:0;
  flex-wrap:nowrap;
  justify-content:flex-start;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 18px),transparent 100%);
  padding-inline:10px 14px;
}
.ta-nav::-webkit-scrollbar{display:none}

.ta-nav a{
  flex:0 0 auto;
  padding:9px 11px;
  border-radius:12px;
  font-size:.85rem;
}

.ta-actions{
  flex-wrap:nowrap;
  gap:7px;
}

.ta-action-btn,
.ta-page-pill,
.ta-live-clock{
  min-height:38px;
  padding:8px 11px;
  font-size:.8rem;
  box-shadow:none;
}

.ta-page-pill{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ta-mobile-menu{
  width:min(var(--tg-shell-max),100%);
  max-width:var(--tg-shell-max);
  margin-inline:auto;
  padding:0 var(--tg-gutter) 14px;
}

.ta-mobile-menu.open{
  display:grid;
  gap:8px;
  max-height:min(70vh,620px);
  overflow:auto;
  overscroll-behavior:contain;
}

.ta-mobile-title{
  position:sticky;
  top:0;
  z-index:1;
  padding:10px 2px 8px;
  font-weight:800;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.90));
}

html.theme-light .ta-mobile-title{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.92));
}

.ta-mobile-section{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:8px;
}

.ta-mobile-menu a{
  width:100%;
  min-height:44px;
  margin:0;
  border-radius:13px;
  justify-content:flex-start;
}

/* All content containers become fluid and share one horizontal rhythm. */
.app-main,
.ds-main,
.ta-main,
.page-surface,
.map-fixed-page,
.settings-workbench,
.va-page{
  width:min(var(--tg-content-max),calc(100% - (var(--tg-gutter) * 2))) !important;
  max-width:var(--tg-content-max) !important;
  min-width:0 !important;
  margin-inline:auto !important;
}

.app-main,
.ds-main{
  padding-block:clamp(12px,1.3vw,24px);
}

.ds-page-content,
.app-main > *,
.ds-main > *{
  min-width:0;
  max-width:100%;
}

/* ------------------------------
   Modern cards / panels
   ------------------------------ */

.ta-card,
.card,
.panel,
.section,
.glass-card,
.settings-panel,
.va-panel,
[class*="-card"]{
  min-width:0;
}

.ta-card,
.card,
.panel,
.settings-panel,
.va-panel{
  border-radius:var(--tg-radius-lg);
}

.tg-prod-page-header,
.settings-overview-top,
.va-hero-head,
[class*="-hero-head"],
[class*="-panel-head"]{
  min-width:0;
}

h1,h2,h3,h4,p,small,strong,span,label{
  overflow-wrap:anywhere;
}

h1{font-size:clamp(1.35rem,2.3vw,2.2rem)}
h2{font-size:clamp(1.08rem,1.55vw,1.55rem)}
h3{font-size:clamp(.98rem,1.2vw,1.22rem)}

/* ------------------------------
   Generic responsive grids
   ------------------------------ */

.kpi-grid,
.metrics-grid,
.metric-grid,
.stats-grid,
.summary-grid,
.camera-summary-grid,
.settings-overview-stats,
.settings-metric-grid,
.settings-form-grid,
.settings-export-grid,
.tabs-visibility-grid,
.va-kpis,
.va-meta,
[class*="kpi-grid"],
[class*="metric-grid"],
[class*="stats-grid"],
[class*="summary-grid"]{
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)) !important;
}

.settings-form-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)) !important;
}

/* Toolbars must wrap rather than force the page wider. */
.toolbar,
.actions,
.filters,
.filter-bar,
.ta-actions,
.settings-global-actions,
.settings-panel-actions,
.settings-tabs-actions,
.camera-toolbar,
.camera-toolbar-search,
.camera-toolbar-actions,
.va-actions,
.va-toolbar,
.map-fixed-actions,
.map-fixed-filters,
[class*="-toolbar"],
[class*="-actions"]{
  min-width:0;
}

.toolbar,
.actions,
.filter-bar,
.settings-global-actions,
.settings-panel-actions,
.settings-tabs-actions,
.camera-toolbar,
.camera-toolbar-search,
.camera-toolbar-actions,
.va-actions,
.va-toolbar,
.map-fixed-actions{
  flex-wrap:wrap !important;
}

.toolbar > *,
.actions > *,
.settings-panel-actions > *,
.camera-toolbar-actions > *,
.va-actions > *{
  max-width:100%;
}

/* ------------------------------
   Tables: scroll INSIDE panel, never the whole page
   ------------------------------ */

.tg-table-scroll,
.table-wrap,
.table-responsive,
.va-table-wrap,
[class*="table-wrap"]{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--tg-radius-md);
  scrollbar-width:thin;
}

.tg-table-scroll > table,
.table-wrap > table,
.table-responsive > table,
.va-table-wrap > table{
  width:100%;
  min-width:680px;
}

table{
  border-collapse:separate;
  border-spacing:0;
  max-width:100%;
}

th,td{
  vertical-align:middle;
}

/* ------------------------------
   Settings
   ------------------------------ */

.settings-workbench{
  display:grid;
  gap:var(--tg-section-gap);
}

.settings-overview-top,
.settings-control-strip,
.settings-panel-head,
.settings-tabs-headline,
.settings-save-dock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.settings-overview-top > *,
.settings-control-strip > *,
.settings-panel-head > *,
.settings-tabs-headline > *,
.settings-save-dock > *{
  min-width:0;
}

.settings-panel-title{
  min-width:0;
  flex:1 1 360px;
}

.settings-panel-actions{
  flex:0 1 auto;
}

.camera-toolbar{
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

.camera-toolbar-search{
  flex:1 1 360px;
}

.camera-toolbar-search .ta-input{
  flex:1 1 260px;
}

.camera-card-grid-list,
.tabs-visibility-grid{
  min-width:0;
}

.settings-save-dock{
  position:sticky;
  bottom:12px;
  z-index:30;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--tg-border);
  border-radius:var(--tg-radius-lg);
  background:color-mix(in srgb,var(--tg-surface-2) 94%,transparent);
  box-shadow:var(--tg-shadow-lg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* ------------------------------
   Analytics
   ------------------------------ */

.analytics-page,
.analytics-shell,
.analytics-workspace,
.analytics-content,
.analytics-layout,
.analytics-main,
.analytics-controls,
.analytics-filters,
.analytics-grid,
.analytics-kpis,
.analytics-charts,
.analytics-section,
.compare-grid,
.comparison-grid,
.chart-grid{
  min-width:0;
  max-width:100%;
}

.analytics-grid,
.analytics-kpis,
.chart-grid,
.compare-grid,
.comparison-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)) !important;
}

.analytics-controls,
.analytics-filters,
.analytics-toolbar{
  flex-wrap:wrap !important;
  gap:10px !important;
}

.analytics-controls > *,
.analytics-filters > *{
  min-width:0 !important;
  max-width:100%;
}

canvas{
  width:100% !important;
  max-width:100% !important;
}

/* ------------------------------
   Cameras / single / multiview / live
   ------------------------------ */

.camera-grid,
.cameras-grid,
.multi-grid,
.multiview-grid,
.video-grid,
.stream-grid,
.live-grid,
.single-grid,
[class*="camera-grid"],
[class*="video-grid"]{
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)) !important;
  gap:var(--tg-section-gap) !important;
  min-width:0;
}

.camera-card,
.video-card,
.stream-card,
.multi-card,
.single-card,
.player-card,
.video-wrap,
.stream-wrap,
.camera-view,
[class*="video-wrap"],
[class*="stream-wrap"]{
  min-width:0;
  max-width:100%;
}

.camera-card video,
.video-card video,
.stream-card video,
.camera-card img,
.video-card img,
.stream-card img,
#videoStream,
#liveVideo,
#player{
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#020617;
  border-radius:clamp(10px,1vw,16px);
}

/* ------------------------------
   Incidents
   ------------------------------ */

.incidents-layout,
.incident-layout,
.incidents-grid,
.incident-grid,
.incident-workspace,
.incident-detail-grid,
.incident-media-grid{
  min-width:0;
  max-width:100%;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)) !important;
}

.incident-card,
.incident-media,
.incident-details,
.review-panel{
  min-width:0;
  max-width:100%;
}

.incident-media img,
.incident-media video,
#incidentImage,
#incidentVideo{
  width:100%;
  max-height:min(70vh,760px);
  object-fit:contain;
}

.ta-global-incidents{
  max-width:min(430px,calc(100vw - 24px)) !important;
}

/* ------------------------------
   Operational map
   ------------------------------ */

.map-fixed-page{
  min-width:0;
}

.map-fixed-command__row,
.map-fixed-filters,
.map-fixed-layerbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.map-fixed-command__title{
  flex:1 1 360px;
  min-width:0;
}

.map-fixed-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)) !important;
  gap:10px;
}

.map-fixed-workspace{
  display:grid !important;
  grid-template-columns:minmax(260px,360px) minmax(0,1fr) !important;
  gap:var(--tg-section-gap) !important;
  min-width:0;
  max-width:100%;
}

.map-fixed-stage,
.map-fixed-list-panel,
#operationalMap,
.leaflet-container{
  min-width:0 !important;
  max-width:100% !important;
}

#operationalMap,
.leaflet-container{
  width:100% !important;
  min-height:clamp(420px,68vh,900px);
}

/* ------------------------------
   Video archive / recorder
   ------------------------------ */

.va-page{
  display:grid;
  gap:var(--tg-section-gap);
}

.va-grid{
  display:grid !important;
  grid-template-columns:minmax(260px,360px) minmax(0,1fr) !important;
  gap:var(--tg-section-gap) !important;
  min-width:0;
}

.va-player-panel,
.va-camera-list,
.va-meta,
#recordings{
  min-width:0;
}

.va-player-wrap video{
  width:100%;
  max-height:min(65vh,760px);
  aspect-ratio:16/9;
  object-fit:contain;
}

.recorder-layout,
.recorder-grid{
  min-width:0;
  grid-template-columns:minmax(260px,360px) minmax(0,1fr) !important;
}

/* ------------------------------
   Forms / dialogs / auth
   ------------------------------ */

form{
  min-width:0;
  max-width:100%;
}

.form-grid,
.form-row,
.field-grid,
.filters-grid{
  min-width:0;
}

.form-grid,
.field-grid,
.filters-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)) !important;
}

dialog,
.modal,
.modal-dialog,
.modal-content,
[role="dialog"]{
  max-width:min(920px,calc(100vw - (var(--tg-gutter) * 2))) !important;
  max-height:calc(100dvh - (var(--tg-gutter) * 2));
}

.modal-content,
dialog{
  overflow:auto;
  overscroll-behavior:contain;
}

.login-stage,
.auth-stage{
  width:100%;
  min-height:100dvh;
  padding:max(18px,env(safe-area-inset-top)) var(--tg-gutter) max(18px,env(safe-area-inset-bottom));
}

.login-card,
.auth-card{
  width:min(460px,100%) !important;
  max-width:100% !important;
  margin-inline:auto;
}

/* ------------------------------
   Responsive breakpoints
   ------------------------------ */

@media (max-width:1380px){
  .ta-topbar .ta-inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "nav nav";
  }
  .ta-brand{grid-area:brand}
  .ta-nav{grid-area:nav;padding-top:2px}
  .ta-actions{grid-area:actions}
}

@media (max-width:1180px){
  .ta-topbar .ta-inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions";
  }
  .ta-nav{display:none !important}
  .ta-mobile-toggle{display:inline-flex !important}
  .ta-page-pill{display:none}

  .map-fixed-workspace,
  .va-grid,
  .recorder-layout,
  .recorder-grid{
    grid-template-columns:1fr !important;
  }

  .map-fixed-list-panel,
  .va-camera-list{
    max-height:360px;
    overflow:auto;
  }
}

@media (max-width:860px){
  :root{
    --tg-gutter:clamp(10px,2.2vw,18px);
    --tg-section-gap:12px;
  }

  .ta-brand{
    max-width:min(48vw,220px);
  }

  .ta-live-clock{display:none}

  .tg-command-btn{display:none !important}

  .settings-overview-top,
  .settings-control-strip,
  .settings-panel-head,
  .settings-tabs-headline,
  .settings-save-dock,
  .va-hero-head,
  .tg-prod-page-header{
    align-items:stretch !important;
  }

  .settings-panel-actions,
  .settings-global-actions,
  .settings-tabs-actions,
  .settings-save-actions,
  .va-actions{
    width:100%;
  }

  .settings-panel-actions > *,
  .settings-global-actions > *,
  .settings-tabs-actions > *,
  .settings-save-actions > *,
  .va-actions > *{
    flex:1 1 160px;
  }

  .camera-grid,
  .cameras-grid,
  .multi-grid,
  .multiview-grid,
  .video-grid,
  .stream-grid,
  .live-grid,
  .single-grid,
  [class*="camera-grid"],
  [class*="video-grid"],
  .analytics-grid,
  .chart-grid,
  .compare-grid,
  .comparison-grid,
  .incidents-layout,
  .incident-layout,
  .incidents-grid,
  .incident-grid,
  .incident-detail-grid,
  .incident-media-grid{
    grid-template-columns:1fr !important;
  }

  #operationalMap,
  .leaflet-container{
    min-height:58dvh;
  }
}

@media (max-width:640px){
  :root{
    --tg-gutter:10px;
    --tg-control-h:44px;
    --tg-radius-lg:16px;
    --tg-radius-xl:20px;
  }

  .app-main,
  .ds-main{
    width:calc(100% - 20px) !important;
    padding-block:10px 18px;
  }

  .ta-topbar .ta-inner{
    min-height:64px;
    padding:8px 10px;
    gap:8px;
  }

  .ta-brand{
    gap:7px;
    max-width:min(54vw,190px);
  }

  .ta-brand-icon{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:12px;
  }

  .ta-brand-logo{
    width:36px;
    height:36px;
  }

  .ta-brand-text{font-size:.87rem}
  .ta-brand-subtext{display:none}

  .ta-actions{gap:5px}
  .ta-action-btn{
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .ta-mobile-menu{
    padding:0 10px 12px;
  }

  .ta-mobile-section{
    grid-template-columns:1fr;
  }

  .ta-mobile-menu a{
    min-height:46px;
    border-radius:12px;
  }

  .settings-overview-stats,
  .settings-metric-grid,
  .camera-summary-grid,
  .va-kpis,
  .va-meta,
  .kpi-grid,
  .metrics-grid,
  .metric-grid,
  .stats-grid,
  [class*="kpi-grid"],
  [class*="metric-grid"],
  [class*="stats-grid"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .settings-form-grid,
  .settings-export-grid,
  .form-grid,
  .field-grid,
  .filters-grid{
    grid-template-columns:1fr !important;
  }

  .settings-save-dock{
    bottom:max(8px,env(safe-area-inset-bottom));
    padding:10px;
  }

  .settings-save-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .camera-toolbar-search,
  .camera-toolbar-actions{
    width:100%;
  }

  .camera-toolbar-actions{
    display:grid !important;
    grid-template-columns:1fr;
  }

  .tg-table-scroll > table,
  .table-wrap > table,
  .table-responsive > table,
  .va-table-wrap > table{
    min-width:620px;
  }

  .ta-global-incidents{
    left:10px !important;
    right:10px !important;
    top:72px !important;
    max-width:none !important;
  }

  #operationalMap,
  .leaflet-container{
    min-height:56dvh;
    border-radius:14px !important;
  }

  .map-fixed-command__row,
  .map-fixed-actions,
  .map-fixed-filters,
  .map-fixed-layerbar{
    width:100%;
  }

  .map-fixed-actions > *,
  .map-fixed-filters > *{
    flex:1 1 140px;
  }

  dialog,
  .modal,
  .modal-dialog,
  .modal-content,
  [role="dialog"]{
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:16px !important;
  }
}

@media (max-width:420px){
  .settings-overview-stats,
  .settings-metric-grid,
  .camera-summary-grid,
  .va-kpis,
  .va-meta,
  .kpi-grid,
  .metrics-grid,
  .metric-grid,
  .stats-grid,
  [class*="kpi-grid"],
  [class*="metric-grid"],
  [class*="stats-grid"]{
    grid-template-columns:1fr !important;
  }

  .ta-brand-stack{max-width:120px}
}

/* Landscape phones / short tablets */
@media (max-height:620px) and (orientation:landscape){
  .ta-topbar{position:relative}
  .ta-mobile-menu.open{max-height:72dvh}
  #operationalMap,.leaflet-container{min-height:78dvh}
}

/* Touch targets and hover behavior */
@media (pointer:coarse){
  a,button,input,select,label{touch-action:manipulation}
  .ta-nav a,.ta-mobile-menu a,.btn,.ta-action-btn{min-height:44px}
}

@media (hover:none){
  .ta-nav a:hover,
  .ta-action-btn:hover,
  .ta-brand:hover .ta-brand-icon{
    transform:none;
  }
}

/* Print remains readable and avoids navigation noise. */
@media print{
  #app-nav,.ta-topbar,.settings-save-dock,.ta-global-incidents,.ds-toast-host{display:none!important}
  body{background:#fff!important;color:#000!important;overflow:visible}
  .app-main,.ds-main,.ta-main,.page-surface{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  .tg-table-scroll{overflow:visible!important}
}

/* ------------------------------
   Legacy/page-specific layout reconciliation
   ------------------------------ */

@media (max-width:1180px){
  .tg27-hero,
  .tg27-main-grid,
  .tg27-two-col,
  .tg27-bottom-grid,
  .hero-analytics,
  .od-visualization,
  .amp-workspace,
  .amp-comparison__visuals,
  .amp-comparison__bottom,
  .manual-hero,
  .manual-grid,
  .cal-grid,
  .hero,
  .ops-shell,
  .ops-dashboard,
  .markup-layout{
    grid-template-columns:1fr !important;
  }

  .tg27-kpis,
  .tg27-snapshot-grid,
  .tg27-map-card-grid,
  .amp-command__stats,
  body.analytics-modern-pro .tw-kpis,
  body.analytics-modern-pro .advanced-metrics-grid,
  body.analytics-modern-pro .kpi-grid,
  .manual-kpis,
  .ops-summary-grid,
  .ops-kpi-grid,
  .ops-side,
  .ops-two,
  .ops-tools{
    grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)) !important;
  }

  body.analytics-modern-pro .tw-grid-main,
  body.analytics-modern-pro .od-visualization{
    grid-template-columns:1fr !important;
  }

  body.analytics-modern-pro .analytics-filter-main,
  .amp-comparison__settings,
  .amp-comparison__periods,
  .va-filter-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)) !important;
  }

  .amp-comparison__kpis{
    grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)) !important;
  }
}

@media (max-width:860px){
  .layout,
  .grid,
  .cols,
  .preview-media,
  .ops-topbar,
  .ops-status-strip,
  .amp-comparison__periods,
  .amp-comparison__settings,
  .amp-period__inputs,
  .cal-hero{
    grid-template-columns:1fr !important;
  }

  .charts-grid,
  .advanced-metrics-grid,
  .manual-checkgrid,
  .feature-grid,
  .field-grid,
  .field-grid-3,
  .incident-type-grid,
  .zone-stat-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)) !important;
  }

  .tg27-camera-row,
  .tg27-incident-card,
  .tg27-event{
    grid-template-columns:1fr !important;
  }

  .tg27-dynamics-layout,
  .tg27-flow-cards{
    grid-template-columns:1fr !important;
  }

  .amp-command__actions{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)) !important;
  }
}

@media (max-width:640px){
  .tg27-kpis,
  .tg27-snapshot-grid,
  .tg27-map-card-grid,
  .amp-command__stats,
  body.analytics-modern-pro .tw-kpis,
  body.analytics-modern-pro .advanced-metrics-grid,
  body.analytics-modern-pro .kpi-grid,
  .manual-kpis,
  .ops-summary-grid,
  .ops-kpi-grid,
  .ops-side,
  .ops-two,
  .ops-tools,
  .amp-comparison__kpis{
    grid-template-columns:1fr !important;
  }

  .stat-row,
  .camera-list-item,
  .point-row,
  .map-fixed-list-item{
    grid-template-columns:1fr !important;
  }

  .tg27-bar-row{
    grid-template-columns:minmax(58px,auto) minmax(0,1fr) auto !important;
  }
}

/* ==============================================================
   Mobile hardening pass — 2026-09-25 v2
   Verified targets: 320 / 375 / 768 / 1024 / 1440+
   ============================================================== */

/* Keep the desktop navigation inside its grid column; long route sets
   scroll inside the nav instead of changing the page's intrinsic width. */
.ta-topbar .ta-inner > .ta-nav,
.ta-nav{
  justify-self:stretch !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}

/* Prevent long unbroken values (IDs, URLs, hashes) from widening cards. */
.ta-card,
.card,
.panel,
.settings-panel,
.va-panel,
.incident-card,
.camera-card,
.video-card,
.stream-card,
.poly-card,
.qm-panel,
.vq-page .panel{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Legacy specialist pages that still own fixed desktop grids. */
.poly-layout,
.poly-toolbar,
.poly-toolbar-main,
.poly-side,
.poly-row,
.poly-inline-tools,
.poly-preset-grid,
.qm-kpis,
.qm-form-grid,
.vq-page .summary,
.vq-page .layout,
.vq-page .grid,
.markup-form{
  min-width:0;
  max-width:100%;
}

@media (max-width:1180px){
  .poly-layout,
  .poly-toolbar{
    grid-template-columns:1fr !important;
  }

  .poly-side{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .vq-page .layout{
    grid-template-columns:1fr !important;
  }

  .qm-kpis,
  .vq-page .summary{
    grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)) !important;
  }
}

@media (max-width:760px){
  .poly-side,
  .poly-toolbar-main,
  .poly-row,
  .poly-inline-tools,
  .poly-preset-grid,
  .markup-form,
  .qm-form-grid{
    grid-template-columns:1fr !important;
  }

  .qm-kpis,
  .vq-page .summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* iOS Safari zooms focused controls below 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size:16px !important;
  }

  /* Keep sticky/fixed controls clear of device safe areas. */
  .ta-topbar .ta-inner{
    padding-left:max(10px,env(safe-area-inset-left)) !important;
    padding-right:max(10px,env(safe-area-inset-right)) !important;
  }

  .settings-save-dock{
    margin-left:max(0px,env(safe-area-inset-left));
    margin-right:max(0px,env(safe-area-inset-right));
  }
}

@media (max-width:420px){
  .qm-kpis,
  .vq-page .summary{
    grid-template-columns:1fr !important;
  }

  .poly-status,
  .poly-card-head,
  .qm-panel-head,
  .vq-page .panel-title{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .settings-save-actions{
    grid-template-columns:1fr !important;
  }
}

/* 320px devices: preserve all three essential header actions without
   squeezing the brand into the action group. */
@media (max-width:340px){
  .ta-brand-stack{
    display:none !important;
  }

  .ta-brand{
    width:42px !important;
    max-width:42px !important;
    min-width:42px !important;
  }

  .ta-actions{
    gap:4px !important;
  }

  .ta-action-btn{
    width:40px !important;
    min-width:40px !important;
    padding:0 !important;
  }
}

/* Dense horizontal data remains scrollable locally with a visible affordance. */
.tg-table-scroll,
.table-wrap,
.table-responsive,
.va-table-wrap,
[class*="table-wrap"]{
  position:relative;
  scrollbar-gutter:stable;
}

/* Respect users asking for reduced motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Mobile navigation behaves as a compact floating command panel instead of
   pushing the entire page downward. */
@media (max-width:1180px){
  .ta-mobile-menu{
    position:fixed !important;
    top:76px !important;
    right:14px !important;
    left:auto !important;
    width:min(680px,calc(100vw - 28px)) !important;
    max-width:calc(100vw - 28px) !important;
    max-height:calc(100dvh - 90px) !important;
    margin:0 !important;
    padding:12px !important;
    overflow:auto !important;
    border:1px solid var(--tg-border) !important;
    border-radius:20px !important;
    background:rgba(9,16,30,.97) !important;
    box-shadow:0 24px 70px rgba(2,6,23,.48) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    z-index:1200 !important;
  }

  html.theme-light .ta-mobile-menu{
    background:rgba(255,255,255,.98) !important;
  }

  .ta-mobile-menu.open{
    display:grid !important;
  }
}

@media (max-width:640px){
  .ta-mobile-menu{
    top:70px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 82px) !important;
    border-radius:18px !important;
  }
}

@media (max-width:1180px){
  body.tg-mobile-nav-open{
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  .ta-mobile-menu{
    background:#08111f !important;
  }

  html.theme-light .ta-mobile-menu{
    background:#ffffff !important;
  }
}

/* ==============================================================
   Fluid viewport pass — 2026-09-26 v3
   Fixes narrow centered pages on wide / high-DPI / browser-zoomed screens.
   The previous pass prevented overflow but still capped the working area.
   This pass makes the application shell truly fluid.
   ============================================================== */

:root{
  --tg-shell-max:100%;
  --tg-content-max:100%;
  --tg-wide-gutter:clamp(10px,1.15vw,28px);
}

/* The navigation must use the real viewport, not a fixed desktop canvas. */
#app-nav,
.ta-topbar,
.ta-topbar .ta-inner,
.ta-mobile-menu{
  max-width:none !important;
}

.ta-topbar .ta-inner{
  width:100% !important;
  margin-inline:0 !important;
  padding-inline:var(--tg-wide-gutter) !important;
  box-sizing:border-box !important;
}

/* Main workspaces fill the viewport while preserving a small fluid gutter. */
.app-main,
.ds-main,
.ta-main,
.page-surface,
.map-fixed-page,
.settings-workbench,
.va-page{
  width:calc(100% - (var(--tg-wide-gutter) * 2)) !important;
  max-width:none !important;
  margin-inline:var(--tg-wide-gutter) !important;
  box-sizing:border-box !important;
}

.ds-page-content,
.app-main > *,
.ds-main > *{
  width:100%;
  max-width:none !important;
  box-sizing:border-box;
}

/* Page-level shells from older generations must not re-introduce a fixed
   central canvas after the global shell has become fluid. Only top-level
   page shells are targeted; inner reading/form cards keep their own widths. */
.ds-page-content > :is(
  .tg27-dashboard,
  .dashboard-page,
  .dashboard-stage15,
  .dashboard-stage19,
  .cc-shell,
  .platform-shell,
  .prodpack,
  .rel-shell,
  .s42-shell,
  .s43-shell,
  .s58,
  .stage45-shell,
  .stage46-shell,
  .suite,
  .tg44,
  .tg47-shell,
  .tg48-shell,
  .tg49-shell,
  .tg50-shell,
  .va-stage19,
  .diag51,
  .ops-shell
),
.app-main > :is(
  .dashboard-page,
  .dashboard-stage15,
  .dashboard-stage19,
  .cc-shell,
  .platform-shell,
  .prodpack,
  .rel-shell,
  .s42-shell,
  .s43-shell,
  .s58,
  .stage45-shell,
  .stage46-shell,
  .suite,
  .tg44,
  .tg47-shell,
  .tg48-shell,
  .tg49-shell,
  .tg50-shell,
  .va-stage19,
  .diag51,
  .ops-shell
),
body > #app.container{
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  box-sizing:border-box !important;
}

/* Dashboard is the most visible example: remove its 1580px ceiling and let
   columns share all available space. */
body.page-dashboard .ds-main,
body.page-dashboard .ds-page-content,
body.page-dashboard .tg27-dashboard,
body.page-dashboard .dashboard-page,
.page-dashboard-stage32 .tg27-dashboard,
.page-dashboard-stage33 .tg27-dashboard,
.page-dashboard-stage34 .tg27-dashboard{
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  box-sizing:border-box !important;
}

body.page-dashboard .tg27-dashboard{
  padding:clamp(12px,1.15vw,26px) !important;
}

/* Avoid fixed minimums deciding the desktop geometry. */
.page-dashboard-stage32 .tg27-main-grid,
.page-dashboard-stage33 .tg27-main-grid,
.page-dashboard-stage34 .tg27-main-grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
}

.tg27-hero{
  grid-template-columns:minmax(0,1fr) minmax(280px,clamp(320px,22vw,430px)) !important;
}

.tg27-snapshot-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)) !important;
}

/* Wide workstations: use the extra pixels rather than adding empty margins. */
@media (min-width:1800px){
  .tg27-kpis{
    gap:clamp(14px,1vw,22px) !important;
  }

  .tg27-main-grid,
  .tg27-two-col,
  .tg27-bottom-grid{
    gap:clamp(16px,1.15vw,26px) !important;
  }

  .tg27-panel,
  .tg27-hero-copy,
  .tg27-status-card{
    padding:clamp(20px,1.25vw,30px) !important;
  }

  .map-fixed-workspace{
    grid-template-columns:minmax(300px,420px) minmax(0,1fr) !important;
  }

  .va-grid,
  .recorder-layout,
  .recorder-grid{
    grid-template-columns:minmax(300px,420px) minmax(0,1fr) !important;
  }
}

/* Laptop / tablet: collapse complex desktop grids based on available CSS
   pixels, so browser zoom and OS DPI scaling naturally trigger reflow. */
@media (max-width:1280px){
  .page-dashboard-stage32 .tg27-main-grid,
  .page-dashboard-stage33 .tg27-main-grid,
  .page-dashboard-stage34 .tg27-main-grid,
  .tg27-main-grid,
  .tg27-two-col,
  .tg27-bottom-grid{
    grid-template-columns:1fr !important;
  }

  .tg27-hero{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:860px){
  :root{ --tg-wide-gutter:10px; }

  .app-main,
  .ds-main,
  .ta-main,
  .page-surface,
  .map-fixed-page,
  .settings-workbench,
  .va-page{
    width:calc(100% - 20px) !important;
    margin-inline:10px !important;
  }
}

@media (max-width:520px){
  :root{ --tg-wide-gutter:8px; }

  .app-main,
  .ds-main,
  .ta-main,
  .page-surface,
  .map-fixed-page,
  .settings-workbench,
  .va-page{
    width:calc(100% - 16px) !important;
    margin-inline:8px !important;
  }

  body.page-dashboard .tg27-dashboard{
    padding:8px !important;
  }
}

/* Any root emitted directly by the Jinja content block participates in the
   fluid canvas. This closes the gap for older pages whose root class is
   simply .wrap/.main instead of a newer named page shell. */
.ds-page-content > *{
  width:100%;
  max-width:none !important;
  min-width:0;
  box-sizing:border-box;
}