/* ============================================================
   ICM Admin — responsive.css
   ════════════════════════════════════════════════════════════
   Breakpoints:
     ≥1200px → Desktop wide
     ≤1199px → Desktop narrow (bento collapses partially)
     ≤1023px → Tablet (sidebar collapses, bottombar still hidden)
     ≤767px  → Mobile (drawer + bottombar + KPI 4 cols compact)
     ≤380px  → Small mobile (extra tight spacing)
============================================================ */

/* ━━━━━━ ≤1199px — Desktop narrow ━━━━━━ */
@media (max-width: 1199px) {
  .b-col-3 { grid-column:span 6; }
  .topbar-wrap{ padding:12px 18px 0; }
  /* KPI 6-strip → 3 columns × 2 rows */
  .kpi-strip-6{ grid-template-columns:repeat(3, 1fr); }
  /* Stats grid → 4 columns × 3 rows */
  .stats-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* ━━━━━━ ≤1023px — Tablet ━━━━━━ */
@media (max-width: 1023px) {
  /* Auto-collapse sidebar to icons-only */
  html { --sidebar-w:64px; }
  .side-brand-txt, .side-section-title, .side-link-text,
  .side-link-badge, .side-collapse-btn span{
    opacity:0; pointer-events:none; max-width:0; overflow:hidden;
  }
  .side-link{ justify-content:center; padding:9px; }
  .side-brand{ justify-content:center; padding:6px 0 14px; }
  .side-link.active::before{ inset-inline-start:-7px; }

  .b-col-3, .b-col-4 { grid-column:span 6; }
  .b-col-8 { grid-column:span 12; }

  .topbar-wrap{ padding:12px 12px 0; }
  .top-status{ display:none; }

  /* Subscribers page filters */
  .subs-toolbar{ grid-template-columns:1fr; }
  .subs-filters{ justify-content:flex-start; }

  /* Page padding */
  .page{ padding:18px 12px 26px; }
}

/* ━━━━━━ ≤767px — Mobile (drawer + bottombar) ━━━━━━ */
@media (max-width: 767px) {
  /* App becomes single column */
  .app{ grid-template-columns:1fr; }

  /* Sidebar → drawer */
  .sidebar{
    position:fixed; inset-block-start:0; inset-block-end:0;
    inset-inline-start:0;
    inline-size:280px; max-width:85vw;
    transform:translateX(100%); z-index:39;
    --sidebar-w:280px;
  }
  [dir="ltr"] .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0) !important; }
  .sidebar.open .side-brand-txt, .sidebar.open .side-section-title,
  .sidebar.open .side-link-text, .sidebar.open .side-link-badge{
    opacity:1; max-width:none; pointer-events:auto;
  }
  .sidebar.open .side-link{ justify-content:flex-start; padding:9px 11px; }
  .sidebar.open .side-brand{ justify-content:flex-start; padding:6px 6px 14px; }
  .sidebar .side-collapse-btn{ display:none; }

  /* Topbar — compact */
  .top-toggle{ display:flex; }
  .top-search{ display:none; }
  .user-pill .uname{ display:none; }
  .topbar-wrap{ padding:10px 8px 0; }
  .topbar{ padding:6px 8px; gap:6px; }
  .iconbtn{ inline-size:36px; block-size:36px; }
  .iconbtn .ic{ inline-size:17px; block-size:17px; }
  .top-actions{ gap:4px; }

  /* Page paddings */
  .page{ padding:14px 8px 90px; }
  .page-title{ font-size:20px; }
  .page-sub{ font-size:12px; }

  /* Bento single-column */
  .b-col-3, .b-col-4, .b-col-6, .b-col-8, .b-col-12{ grid-column:span 12; }
  .bento{ gap:10px; }

  /* Money Pulse compact */
  .hero-pulse{ padding:16px 16px 0; }
  .pulse-value{ font-size:34px; }
  .pulse-value small{ font-size:13px; }
  .spark{ block-size:50px; }
  .pulse-foot{ padding-block:10px 14px; }
  .pf-item b{ font-size:16px; }
  .pf-item span{ font-size:10px; }

  /* Card heads */
  .card-head{ padding:12px 12px 6px; }
  .card-list{ padding:4px 6px 8px; }
  .card-head b{ font-size:12.5px; }
  .card-head small{ font-size:10.5px; }

  /* ✨ KPI Strip — 4 COLUMNS on MOBILE (not 2!) ✨ */
  .kpi-strip{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:6px;
    margin-block-end:12px;
  }
  /* For 6-card variant on mobile: 4 in first row + 2 in second */
  .kpi-strip-6{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:5px;
  }
  /* Stats grid على الموبايل: 4 columns × 3 rows */
  .stats-grid{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:6px;
    margin-block-end:14px;
  }
  .stats-grid > .kpi-card{ min-block-size:80px; }
  .kpi-strip-6 > .kpi-card:nth-child(5),
  .kpi-strip-6 > .kpi-card:nth-child(6){
    /* الـ 5th + 6th cards: تخلوا fill النصف الباقى */
  }
  .kpi-card{
    padding:10px 8px;
    border-radius:var(--r-md);
  }
  .kpi-card .kpi-badge{
    inline-size:32px; block-size:32px;
    margin-block-end:8px;
    border-radius:8px;
  }
  .kpi-card .kpi-badge .ic{ inline-size:16px; block-size:16px; }
  .kpi-card .kpi-title{
    font-size:10px; line-height:1.2;
    margin-block-end:1px;
  }
  .kpi-card .kpi-sub{ display:none; }
  .kpi-card .kpi-value{
    font-size:18px;
    margin-block-end:4px;
    letter-spacing:-.3px;
  }
  .kpi-card .kpi-delta{
    font-size:9.5px; padding:2px 5px; gap:2px;
  }
  .kpi-card .kpi-delta .ic{ inline-size:9px; block-size:9px; }
  .kpi-card .kpi-delta span{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50px;
  }

  /* Mini KPI strip (Subscribers page) — even more compact */
  .kpi-strip-mini{ gap:5px; }
  .kpi-card.kpi-mini{ padding:9px 6px; }
  .kpi-card.kpi-mini .kpi-badge{
    inline-size:28px; block-size:28px;
    margin-block-end:6px;
  }
  .kpi-card.kpi-mini .kpi-badge .ic{ inline-size:14px; block-size:14px; }
  .kpi-card.kpi-mini .kpi-value{ font-size:17px; margin-block-end:2px; }
  .kpi-card.kpi-mini .kpi-title{ font-size:9.5px; }

  /* Network Snapshot — tighter on mobile */
  .circle-ring{ inline-size:110px; block-size:110px; }
  .circle-ring .center b{ font-size:22px; }
  .circle-ring .center small{ font-size:9px; }

  /* Dropdowns — better mobile positioning */
  .notif-panel{
    position:fixed;
    inset-block-start:56px;
    inset-inline:6px;
    inline-size:auto; max-width:none;
    max-block-size:calc(100dvh - 68px);
  }
  .shortcuts-panel{
    position:fixed;
    inset-block-start:60px;
    inset-inline:8px;
    inline-size:auto;
  }
  .shortcuts-grid{ grid-template-columns:repeat(4, 1fr); }
  .shortcut-card{ padding:10px 4px; }
  .shortcut-card b{ font-size:10.5px; }
  .shortcut-card small{ display:none; }
  .shortcut-ic{ inline-size:36px; block-size:36px; }

  .dd .dd-menu{
    position:fixed;
    inset-block-start:60px;
    inset-inline-end:8px;
    inset-inline-start:auto;
    min-inline-size:200px;
  }

  /* User dropdown — keep close */
  #userDd .dd-menu{
    inset-block-start:auto;
    inset-inline-end:8px;
    transform-origin:top right;
  }

  /* Subscribers page — mobile cards layout */
  .sub-row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "avatar info  actions"
      "avatar chips chips";
    gap:8px 10px;
    padding:10px 12px;
  }
  .sub-row > .sub-avatar{ grid-area:avatar; align-self:start; }
  .sub-row > .sub-info{ grid-area:info; }
  .sub-row > .sub-actions{ grid-area:actions; }
  .sub-row > .sub-chips-wrap{
    grid-area:chips;
    display:flex; gap:5px; flex-wrap:wrap;
    margin-block-start:2px;
  }
  .sub-chip-expiry, .sub-chip-balance{ display:none; }
  .sub-row > .sub-chips-wrap .sub-chip-expiry,
  .sub-row > .sub-chips-wrap .sub-chip-balance{ display:inline-flex; }
  .sub-name{ font-size:12.5px; }
  .sub-meta{ font-size:10.5px; gap:5px; }

  .subs-toolbar{ margin-block-end:10px; }
  .subs-search input{ padding:10px 10px; font-size:13px; }
  .subs-select{ font-size:11.5px; padding:8px 10px 8px 26px; min-height:36px; }

  /* Bottombar shown */
  .bottombar{ display:block; }

  /* Auth screen */
  .auth-card{ padding:24px 18px; }
  .auth-logo{ inline-size:54px; block-size:54px; }
  .auth-logo .ic{ inline-size:28px; block-size:28px; }
  .auth-title b{ font-size:18px; }

  /* Toast */
  .toast{ font-size:12px; padding:9px 12px; }

  /* Alerts */
  .alerts{ grid-template-columns:1fr; gap:8px; }
  .alert{ padding:10px 12px; }
  .alert .ab b{ font-size:12px; }
  .alert .ab small{ font-size:10.5px; }
}

/* ━━━━━━ ≤380px — Small phones ━━━━━━ */
@media (max-width: 380px) {
  /* Stats grid → 3 columns × 4 rows */
  .stats-grid{ grid-template-columns:repeat(3, 1fr) !important; gap:5px; }
  .stats-grid > .kpi-card{ min-block-size:74px; }

  /* Even tighter KPI strip */
  .kpi-strip{ gap:5px; }
  .kpi-card{ padding:8px 5px; }
  .kpi-card .kpi-badge{ inline-size:28px; block-size:28px; margin-block-end:6px; }
  .kpi-card .kpi-badge .ic{ inline-size:14px; block-size:14px; }
  .kpi-card .kpi-value{ font-size:15px; }
  .kpi-card .kpi-title{ font-size:9px; }
  .kpi-card .kpi-delta{ font-size:8.5px; padding:1.5px 4px; }

  /* Money Pulse smaller */
  .pulse-value{ font-size:30px; }
  .pf-item b{ font-size:14px; }

  /* Even more compact shortcuts on small */
  .shortcuts-grid{ grid-template-columns:repeat(3, 1fr); }
  .shortcut-ic{ inline-size:32px; block-size:32px; }
  .shortcut-card b{ font-size:9.5px; }

  /* Topbar */
  .iconbtn{ inline-size:34px; block-size:34px; }
  .top-toggle{ inline-size:34px; block-size:34px; }
}

/* ━━━━━━ Reduced motion ━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  *{ animation:none !important; transition:none !important; }
}

/* ━━━━━━ Print ━━━━━━ */
@media print {
  .sidebar, .topbar-wrap, .bottombar, .scrim, .toast-stack{ display:none !important; }
  .app{ grid-template-columns:1fr; }
  .card, .kpi-card{ box-shadow:none; border:1px solid #ccc; }
}