/* ─────────────────────────────────────────────────────────────────────────────
   res.css — Responsive overrides for the Mashreq Globe
   Breakpoints:  ≤1200px  ≤1024px  ≤768px  ≤640px  ≤480px
───────────────────────────────────────────────────────────────────────────── */

/* ── 1200px: large laptops / small desktops ── */
@media (max-width: 1200px) {
  #slide-panel  { max-width: 480px; }
  #left-panel   { width: 290px; }
  .logo         { height: 44px !important; width: auto !important; }
  .header-tag   { font-size: 1.1rem; letter-spacing: 2px; }
}

/* ── 1024px: tablets landscape / small laptops ── */
@media (max-width: 1024px) {
  #slide-panel  { max-width: 420px; right: -420px; }
  #left-panel   { width: 270px; top: 74px; left: 18px; }
  #legend       { left: 18px; bottom: 18px; min-width: 200px; padding: 12px 16px; }
  .legend-title { font-size: 0.58rem; }
  .legend-item  { font-size: 0.74rem; }
  .header-tag   { font-size: 1rem; letter-spacing: 2px; }
  .logo         { height: 40px !important; width: auto !important; }
  .globe-hint   { font-size: 0.62rem; letter-spacing: 1.5px; }
  #settings-panel { width: 300px; left: -310px; }
}

/* ── 768px: tablets portrait ── */
@media (max-width: 768px) {
  /* Header */
  header        { padding: 10px 18px; }
  .logo         { height: 34px !important; width: auto !important; margin-left: 12px; }
  .header-tag   { font-size: 0.82rem; letter-spacing: 1.5px; }

  /* Picker */
  #location-picker-wrap { max-width: calc(100vw - 220px); }
  #location-picker      { max-width: 500px; }
  .loc-pill             { font-size: 0.74rem; padding: 5px 12px; }

  /* Slide panel */
  #slide-panel  { max-width: 100vw; width: 100vw; right: -100vw; }
  #slide-panel.open { right: 0; }

  /* Left panel */
  #left-panel   {
    width: calc(100vw - 36px);
    max-width: 340px;
    left: 18px;
    top: 70px;
    max-height: calc(100vh - 100px);
  }

  /* Panel internals */
  .panel-header   { padding: 18px 18px 14px; }
  .panel-body     { padding: 16px 18px; }
  #panel-image    { height: 190px; }
  #panel-title    { font-size: 1.25rem; }
  .panel-flag     { font-size: 1.7rem; }
  .info-grid      { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* KPI */
  .kpi-grid       { gap: 7px; }
  .kpi-val        { font-size: 0.95rem; }

  /* Donut */
  .donut-canvas-wrap, #donut-chart { width: 90px; height: 90px; }
  .donut-val      { font-size: 1.2rem; }

  /* Legend */
  #legend         { min-width: 160px; padding: 10px 14px; bottom: 14px; left: 14px; }
  .legend-dot     { width: 10px; height: 10px; }
  .legend-item    { font-size: 0.7rem; gap: 8px; }

  /* Hint */
  .globe-hint     { bottom: 14px; font-size: 0.58rem; letter-spacing: 1.2px; }

  /* Settings */
  #settings-panel { width: 280px; left: -290px; }
  #settings-toggle { left: 14px; width: 38px; height: 38px; font-size: 1rem; }
}

/* ── 640px: large phones / small tablets ── */
@media (max-width: 640px) {
  /* Header — hide tag, shrink logo */
  .header-tag     { display: none; }
  .logo           { height: 30px !important; width: auto !important; margin-left: 8px; }
  header          { padding: 8px 14px; }

  /* Picker */
  #location-picker-wrap { max-width: calc(100vw - 28px); bottom: 20px; padding: 5px 8px; }
  #location-picker      { max-width: 100%; }
  .loc-pill             { font-size: 0.72rem; padding: 5px 10px; gap: 5px; }
  .loc-pill-flag        { font-size: 0.9rem; }

  /* Slide panel — full screen bottom sheet feel */
  #slide-panel    {
    top: auto;
    bottom: -100vh;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: 88vh;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px 18px 0 0;
    transition: bottom .45s cubic-bezier(.25,.46,.45,.94);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
  }
  #slide-panel.open { bottom: 0; right: 0; }

  /* Left panel — full width, shorter */
  #left-panel     {
    width: calc(100vw - 28px);
    max-width: 100%;
    left: 14px;
    top: 60px;
    max-height: 55vh;
  }

  /* Panel image */
  #panel-image    { height: 160px; margin-bottom: 14px; }
  #panel-title    { font-size: 1.1rem; }
  .panel-flag     { font-size: 1.5rem; }
  .panel-close    { top: 14px; right: 14px; width: 30px; height: 30px; }

  /* Info grid — single column */
  .info-grid      { grid-template-columns: 1fr 1fr; gap: 6px; }
  .info-card      { padding: 9px 10px; }
  .info-card-label { font-size: 0.6rem; }
  .info-card-value { font-size: 0.82rem; }

  /* KPI grid — single column */
  .kpi-grid       { grid-template-columns: 1fr 1fr; gap: 6px; }
  .kpi-lbl        { font-size: 0.56rem; }
  .kpi-val        { font-size: 0.9rem; }

  /* Donut — stack vertically */
  .donut-wrap     { flex-direction: column; align-items: center; gap: 12px; }
  .donut-canvas-wrap, #donut-chart { width: 100px; height: 100px; }

  /* Legend — hide to save space */
  #legend         { display: none; }

  /* Hint */
  .globe-hint     { bottom: 46px; font-size: 0.55rem; letter-spacing: 1px; }

  /* Settings — full width */
  #settings-panel { width: 100vw; left: -100vw; border-right: none; }
  #settings-panel.open { left: 0; }
  #settings-toggle { left: 12px; }

  /* Bar chart */
  #bar-chart      { height: 90px; }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  .logo           { height: 26px !important; width: auto !important; }
  header          { padding: 6px 10px; }

  /* Picker */
  #location-picker-wrap { bottom: 14px; padding: 4px 6px; }
  .loc-pill             { font-size: 0.68rem; padding: 4px 9px; gap: 4px; }
  .loc-pill-flag        { font-size: 0.9rem; }

  /* Slide panel */
  #slide-panel    { height: 92vh; border-radius: 14px 14px 0 0; }

  /* Left panel */
  #left-panel     { top: 52px; max-height: 50vh; }

  /* Panel */
  #panel-image    { height: 130px; }
  #panel-title    { font-size: 1rem; }
  .panel-header   { padding: 14px 14px 10px; }
  .panel-body     { padding: 12px 14px; }
  .panel-btn      { padding: 11px; font-size: 0.82rem; }

  /* Info + KPI grids */
  .info-grid      { grid-template-columns: 1fr; }
  .kpi-grid       { grid-template-columns: 1fr 1fr; }

  /* Hint */
  .globe-hint     { display: none; }
}