/* GUARDER OS v3.6 — ADAPTIVE COMMAND CENTER
   Responsive layout layer only. Business logic and stored data are untouched.
   Uses the actual main content width (container queries) so split-screen,
   different monitor resolutions and browser zoom adapt naturally. */

:root{
  --titan-fluid-gap:clamp(8px,.78vw,14px);
  --titan-fluid-pad:clamp(10px,1vw,20px);
}

/* Adapt to the usable OS canvas instead of only the physical monitor width. */
.main-area{
  container-type:inline-size;
  container-name:guarder-main;
  min-width:0;
}
#dashboard{min-width:0;overflow-x:clip}

/* Fluid typography / spacing on every desktop size. */
.titan-command-head h1{font-size:clamp(19px,1.65cqw,27px)}
.titan-command-head .muted{font-size:clamp(8px,.7cqw,11px)}
.titan-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr));gap:var(--titan-fluid-gap)}
.titan-kpi{min-width:0;min-height:clamp(78px,7.1cqw,100px);padding:clamp(10px,.9cqw,15px)}
.titan-kpi-icon{width:clamp(36px,3.1cqw,44px);height:clamp(36px,3.1cqw,44px);font-size:clamp(15px,1.3cqw,19px)}
.titan-kpi small{font-size:clamp(8.5px,.72cqw,10.5px)}
.titan-kpi b{font-size:clamp(16px,1.5cqw,22px)}
.titan-kpi em{font-size:clamp(7px,.58cqw,8.5px)}

.titan-command-grid{gap:var(--titan-fluid-gap);min-width:0}
.titan-panel{min-width:0;padding:clamp(11px,.92cqw,15px)!important}
.titan-panel-head h3{font-size:clamp(11px,.92cqw,14px)!important}
.titan-map-panel,.titan-chart-panel{min-height:clamp(380px,32cqw,500px)}
.titan-map-layout{height:clamp(330px,27.5cqw,420px);min-width:0}
.titan-line-chart{height:clamp(250px,22cqw,330px)}
.titan-korea{width:clamp(112px,9.6cqw,150px);height:clamp(212px,18cqw,278px)}
.ring-a{width:clamp(125px,10.5cqw,162px);height:clamp(125px,10.5cqw,162px)}
.ring-b{width:clamp(205px,18cqw,278px);height:clamp(205px,18cqw,278px)}
.ring-c{width:clamp(285px,25.5cqw,395px);height:clamp(285px,25.5cqw,395px)}
.titan-list-panel{min-height:clamp(155px,12.5cqw,190px)}

/* Ultra-wide / large command-centre monitor: use the space instead of stretching text. */
@container guarder-main (min-width:1500px){
  #dashboard{padding:20px 24px 26px}
  .titan-command-grid{
    grid-template-columns:minmax(0,1.14fr) minmax(0,1fr) minmax(290px,.57fr);
    grid-template-areas:
      "map chart rail"
      "bottom bottom rail";
  }
  .titan-map-panel{grid-area:map}.titan-chart-panel{grid-area:chart}
  .titan-right-rail{grid-area:rail}.titan-bottom-grid{grid-area:bottom}
  .titan-map-layout{grid-template-columns:105px minmax(0,1fr)}
  .titan-right-rail{grid-template-rows:1.22fr .96fr 1.03fr}
  .titan-bottom-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Standard 1440/1600 desktop: keep full 3-column command-centre feel. */
@container guarder-main (min-width:1280px) and (max-width:1499px){
  #dashboard{padding:17px 18px 22px}
  .titan-command-grid{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.96fr) minmax(250px,.58fr);
    grid-template-areas:
      "map chart rail"
      "bottom bottom rail";
  }
  .titan-map-panel{grid-area:map}.titan-chart-panel{grid-area:chart}
  .titan-right-rail{grid-area:rail}.titan-bottom-grid{grid-area:bottom}
  .titan-map-layout{grid-template-columns:88px minmax(0,1fr)}
  .titan-right-rail{grid-template-rows:1.16fr .95fr 1fr}
  .titan-bottom-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Laptop / 125–150% Windows scaling: right rail moves below map+chart. */
@container guarder-main (min-width:980px) and (max-width:1279px){
  #dashboard{padding:15px 16px 20px}
  .titan-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .titan-command-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "map chart"
      "rail rail"
      "bottom bottom";
  }
  .titan-map-panel{grid-area:map}.titan-chart-panel{grid-area:chart}
  .titan-right-rail{grid-area:rail;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none}
  .titan-bottom-grid{grid-area:bottom;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .titan-map-layout{grid-template-columns:82px minmax(0,1fr)}
  .titan-map-panel,.titan-chart-panel{min-height:420px}
  .titan-map-layout{height:355px}
  .titan-line-chart{height:270px}
}

/* Half-screen desktop / small laptop: cards reorganise instead of shrinking to unreadable sizes. */
@container guarder-main (min-width:720px) and (max-width:979px){
  #dashboard{padding:13px 13px 18px}
  .titan-command-head{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
  .titan-command-head .mission-status{width:auto;min-width:110px}
  .titan-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .titan-command-grid{display:grid;grid-template-columns:1fr;grid-template-areas:"map" "chart" "rail" "bottom"}
  .titan-map-panel{grid-area:map}.titan-chart-panel{grid-area:chart}
  .titan-right-rail{grid-area:rail;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .titan-right-rail>.titan-panel:first-child{grid-column:1 / -1}
  .titan-bottom-grid{grid-area:bottom;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .titan-bottom-grid>.titan-panel:last-child{grid-column:1 / -1}
  .titan-map-panel,.titan-chart-panel{min-height:390px}
  .titan-map-layout{grid-template-columns:82px minmax(0,1fr);height:330px}
  .titan-line-chart{height:255px}
  .titan-region-list>div{font-size:8.5px}
}

/* Tablet / narrow split-screen: one readable column. */
@container guarder-main (max-width:719px){
  #dashboard{padding:11px 10px 16px}
  .titan-command-head{display:block}
  .titan-command-head .mission-status{margin-top:9px;width:100%;display:flex;justify-content:space-between;align-items:center}
  .titan-command-head .muted{display:block!important;line-height:1.55}
  .titan-kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .titan-kpi{grid-template-columns:38px minmax(0,1fr);min-height:78px;padding:10px}
  .titan-kpi b{font-size:16px}
  .titan-command-grid{display:block}
  .titan-map-panel,.titan-chart-panel,.titan-right-rail,.titan-bottom-grid{margin-bottom:9px}
  .titan-right-rail,.titan-bottom-grid{display:grid;grid-template-columns:1fr;gap:9px}
  .titan-map-panel,.titan-chart-panel{min-height:360px}
  .titan-map-layout{grid-template-columns:1fr;height:auto;gap:8px}
  .titan-region-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:5px}
  .titan-region-list>div{padding:6px;border:1px solid #103b56;background:#061522;font-size:7.5px}
  .titan-map-canvas{height:300px}
  .titan-line-chart{height:240px}
  .titan-finance-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .titan-footer-metrics{grid-template-columns:1fr 1fr}
}

/* Very narrow tablet/mobile: preserve tap targets and readable numbers. */
@container guarder-main (max-width:500px){
  .titan-kpi-grid{grid-template-columns:1fr}
  .titan-kpi{grid-template-columns:42px minmax(0,1fr)}
  .titan-region-list{grid-template-columns:1fr 1fr}
  .titan-map-canvas{height:270px}
  .titan-finance-summary{grid-template-columns:1fr}
  .titan-footer-metrics{grid-template-columns:1fr}
  .titan-motto{letter-spacing:.16em}
}

/* Viewport height adaptation: short monitors should not force huge panels. */
@media (max-height:820px) and (min-width:900px){
  #dashboard{padding-top:12px;padding-bottom:14px}
  .titan-command-head{margin-bottom:9px}
  .titan-kpi{min-height:76px}
  .titan-map-panel,.titan-chart-panel{min-height:360px}
  .titan-map-layout{height:300px}
  .titan-line-chart{height:225px}
  .titan-list-panel{min-height:145px}
  .titan-footer-metrics{margin-top:8px}
}

/* Large/tall command centre display: allow map/chart to breathe. */
@media (min-height:1050px) and (min-width:1500px){
  .titan-map-panel,.titan-chart-panel{min-height:520px}
  .titan-map-layout{height:448px}
  .titan-line-chart{height:350px}
}

/* Sidebar/topbar also respond gracefully to small desktop windows. */
@media (max-width:1100px){
  .app-shell{grid-template-columns:76px minmax(0,1fr)!important}
  .sidebar{padding:14px 8px}
  .sidebar-brand>div:last-child,.sidebar-status{display:none}
  .nav-menu button{font-size:0!important;justify-content:center;padding:10px 8px!important}
  .nav-menu button span{font-size:16px!important;width:auto!important;text-align:center}
  .titan-sidebar-brand:after{display:none}
  .topbar{padding-inline:10px}
  .global-search{display:none}
  .profile>div:last-child,.topbar #exportBtn,.topbar .file-label{display:none}
}

@media (max-width:760px){
  .app-shell{grid-template-columns:64px minmax(0,1fr)!important}
  .topbar{height:62px}
  .topbar h2{font-size:14px}
  .nav-menu button{min-height:40px}
}

@media(prefers-reduced-motion:reduce){
  .titan-scan{animation:none!important}
}