/* ═══════════════════════════════════════════════════════════════
   DARKNET WEB PANEL — RESPONSIVE
   Breakpoints: 480 → 640 → 768 → 900 → 1024 → 1280 → 1440 → 2560+
   Mobile-first with iOS safe area & dvh support
   ═══════════════════════════════════════════════════════════════ */

/* ─── iOS Safe Area Custom Properties ─── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ─── Dynamic viewport height (iOS Safari fix) ─── */
@supports (height: 100dvh) {
  #setup  { height: 100dvh; }
  #panel  { height: 100dvh; }
}

/* ─── Sidebar Mobile Overlay Backdrop ─── */
#sbOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 39;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

/* ─── Global table overflow fix (all screen sizes) ─── */
.tbl-wrap,
.adm-user-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl-wrap table   { min-width: 380px; }
.adm-table        { min-width: 520px; }

/* ════════════════════════════════════════════════════════════════
   ULTRAWIDE / 4K  (≥ 2560px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {
  .sb          { width: 320px; }
  .tb          { height: 68px; padding: 0 40px; gap: 14px; }
  .tb-logo     { font-size: 18px; }
  .tab-body    { padding: 36px 40px; }
  .stat-grid   { grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 36px; }
  .sv          { font-size: 68px; }
  .sc          { padding: 28px 24px; border-radius: 26px; }
  .adm-overview-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .adm-stat-num { font-size: 56px; }
  .setup-card  { max-width: 560px; padding: 52px 56px 48px; }
  .sw, .nuke-card { max-width: 780px; }
  .msg-txt, .am-txt { font-size: 15px; }
  .ov-banner   { padding: 32px 36px; }
  .ov-title    { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════
   LARGE SCREENS  (≥ 1440px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .stat-grid         { grid-template-columns: repeat(4, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(4, 1fr); }
  .setup-card        { max-width: 520px; }
}

/* ════════════════════════════════════════════════════════════════
   MEDIUM DESKTOP  (1280px – 1439px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1439px) {
  .stat-grid         { grid-template-columns: repeat(4, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════════
   SMALL DESKTOP / LAPTOP  (1024px – 1279px)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .stat-grid         { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .sv                { font-size: 46px; }
  .adm-stat-num      { font-size: 40px; }
}

/* ════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE  (≤ 1023px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .stat-grid         { grid-template-columns: repeat(2, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid         { grid-template-columns: 1fr; }
  .det-hero          { flex-direction: column; text-align: center; gap: 16px; }
  .batt-hero         { text-align: center; }
  .det-actions       { flex-wrap: wrap; }
  .sb                { width: 240px; }
  .adm-section-row   { grid-template-columns: 1fr; }
  .adm-modal-grid    { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   TABLET PORTRAIT  (≤ 900px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .stat-grid         { grid-template-columns: repeat(2, 1fr); }
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .sb                { width: 220px; }
  .sv                { font-size: 42px; }
  .adm-stat-num      { font-size: 38px; }
  .tbl-wrap table    { min-width: 420px; }
  .adm-section-row   { grid-template-columns: 1fr; }
  .adm-modal-grid    { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   SMALL TABLET  (≤ 768px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tb            { gap: 7px; padding: 0 12px; }
  .tb-logo       { font-size: 13px; letter-spacing: 0.3px; }
  .tb-pills      { gap: 3px; }
  .pill          { font-size: 9px; padding: 3px 8px; }
  #liveClock     { display: none; }

  .det-hero      { padding: 20px; }
  .dh-icon       { width: 64px; height: 64px; font-size: 32px; border-radius: 18px; }
  .dh-name       { font-size: 18px; }
  .batt-num      { font-size: 44px; }

  .sim-row       { grid-template-columns: 1fr; }
  .sim-tog       { flex-direction: column; }

  .sc            { padding: 18px 16px; }
  .sv            { font-size: 38px; }

  .adm-half      { padding: 12px; }
  .adm-stat-num  { font-size: 34px; }
  .adm-subtabs   { flex-wrap: wrap; }

  .note-card,
  .pin-card      { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  (≤ 640px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* — iOS input zoom prevention (any input < 16px triggers zoom) — */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input:not([type]),
  textarea,
  select { font-size: 16px !important; }

  /* — Setup Screen — */
  .setup-card    { padding: 28px 22px; border-radius: 20px; }
  .setup-h       { font-size: 26px; }
  .cat-svg       { width: 130px; height: 130px; }
  .cat-stage     { height: 158px; margin-bottom: 20px; }

  /* — Stat Grid — */
  .stat-grid     { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .sv            { font-size: 36px; }
  .sl            { font-size: 9px; }

  /* — Tabs — */
  .tabs          { padding: 0 8px; gap: 1px; overflow-x: auto; scroll-behavior: smooth; }
  .tab           { padding: 12px 9px; font-size: 8.5px; letter-spacing: 0.2px; white-space: nowrap; flex-shrink: 0; }
  .tab-body      { padding: 14px; }

  /* — Topbar — */
  .tb            { gap: 5px; padding: 0 10px; }
  .tb-btn        { display: none; }
  /* Always show: logout (⏻), refresh (↻), sidebar (☰) */
  .tb-btn:nth-of-type(1),
  .tb-btn:nth-of-type(2),
  .tb-btn:nth-of-type(3) { display: flex; }
  .tb-pills      { display: none; }
  .tb-dots       { display: none; }
  #liveClock     { display: none; }
  #userBadge     { display: none !important; }

  /* — Sidebar Drawer — */
  .sb {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100% !important;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    box-shadow: 6px 0 50px rgba(0,0,0,.85), 6px 0 24px rgba(255,45,120,.15);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }
  /* Show sidebar: panel open, not collapsed */
  #panel.open .sb                      { transform: translateX(0); }
  /* Hide sidebar: panel collapsed (toggled off by ☰) */
  #panel.sb-collapsed .sb             { transform: translateX(-100%) !important; }
  /* Sidebar overlay backdrop */
  #panel.open:not(.sb-collapsed) #sbOverlay { display: block; }

  /* Main content top padding when sidebar open prevents content shift */
  .main { position: relative; }

  /* — Modals — */
  .overlay       { padding: 12px; align-items: flex-end; }
  .modal {
    padding: 24px;
    border-radius: 20px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--safe-bottom);
  }

  /* — Overview Banner — */
  .ov-banner     { flex-direction: column; text-align: center; padding: 18px 16px; gap: 12px; }
  .ov-mini-cat   { width: 62px; height: 62px; }
  .ov-title      { font-size: 15px; margin-bottom: 6px; }
  .ov-stats      { justify-content: center; gap: 10px; }
  .ov-s          { font-size: 11px; }

  /* — Device Detail — */
  .det-hero      { padding: 18px; gap: 12px; }
  .dh-icon       { width: 58px; height: 58px; font-size: 28px; border-radius: 16px; }
  .dh-name       { font-size: 16px; margin-bottom: 8px; }
  .batt-num      { font-size: 38px; letter-spacing: -2px; }
  .batt-label    { font-size: 8px; }
  .batt-bar      { width: 60px; margin: 0 auto; margin-top: 8px; }
  .pin-digits    { font-size: 22px; letter-spacing: 5px; }
  .pin-actions   { flex-wrap: wrap; gap: 5px; }

  /* — Sim Row — */
  .sim-row       { grid-template-columns: 1fr; }
  .sim-tog       { flex-direction: column; }
  .sim-card      { padding: 14px; }
  .sim-ph        { font-size: 17px; }

  /* — Device Actions — */
  .det-actions   { flex-wrap: wrap; gap: 7px; }
  .da            { padding: 11px 10px; font-size: 12px; min-width: calc(50% - 3.5px); }

  /* — Messages — */
  .msg-top       { flex-direction: column; align-items: flex-start; gap: 10px; }
  .msg-bar       { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sbox          { min-width: 0; width: 100%; flex-basis: 100%; order: -1; }
  .simbar        { flex-direction: column; gap: 10px; padding: 12px; }
  .ms-div        { display: none; }
  .msg-dn        { font-size: 13px; }
  .msg-cnt       { font-size: 10px; }

  /* — All Messages — */
  #amWrap        { height: calc(100vh - 310px) !important; height: calc(100dvh - 310px) !important; }
  .am-card       { flex-direction: column; gap: 8px; }
  .am-left       { min-width: unset; max-width: unset; display: flex; align-items: center; gap: 10px; }
  .am-cn         { font-size: 12px; }
  .am-id, .am-name, .am-num, .am-note { display: inline; }
  .am-dt         { margin-left: 0; }

  /* — Send SMS — */
  .sw            { max-width: 100%; }
  .sc2           { padding: 20px; }
  .sc2-t         { font-size: 17px; }
  .sc2-s         { font-size: 11px; margin-bottom: 16px; }
  .sinp, .sarea  { font-size: 16px; /* prevent iOS zoom */ }
  .fi            { font-size: 16px; /* prevent iOS zoom */ }
  .otp-note-inp  { font-size: 16px; }

  /* — Nuke Panel — */
  .nuke-card     { padding: 20px; max-width: 100%; }
  .nuke-inp      { font-size: 16px; }
  .nuke-area     { font-size: 16px; }

  /* — Toast — */
  .toast {
    white-space: normal;
    text-align: center;
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    bottom: calc(20px + var(--safe-bottom));
    transform: translateY(20px);
    border-radius: 16px;
    font-size: 12px;
    padding: 11px 20px;
  }
  .toast.show { transform: translateY(0); }

  /* — OTP Bar — */
  #otpBar {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 0;
    padding: 8px 14px;
    gap: 8px;
  }
  #otpBar.show   { height: auto !important; min-height: 52px; }
  .otp-num       { font-size: 22px; letter-spacing: 4px; order: 1; }
  .otp-lbl       { order: 0; }
  .otp-src       { width: 100%; order: 3; font-size: 9px; }
  .otp-cpbtn     { order: 2; padding: 6px 14px; font-size: 10px; }
  .otp-x         { order: 4; flex-shrink: 0; }

  /* — Admin Panel — */
  .adm-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .adm-subtabs   { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-subtab    { flex-shrink: 0; padding: 8px 10px; font-size: 8.5px; }
  .adm-stat-num  { font-size: 30px; }
  .adm-stat-card { padding: 14px; border-radius: 14px; }
  .adm-search-bar { flex-wrap: wrap; }
  .adm-settings-row { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* — Tables — */
  .tbl-wrap table   { min-width: 420px; }
  .adm-table        { min-width: 560px; }
  .tbl-wrap th, .tbl-wrap td { padding: 9px 12px; }
  .adm-table th, .adm-table td { padding: 9px 10px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════
   TINY PHONES  (≤ 480px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stat-grid     { grid-template-columns: 1fr 1fr; gap: 7px; }
  .sv            { font-size: 30px; }
  .sl            { font-size: 8.5px; }
  .sc            { padding: 14px 12px; border-radius: 16px; }

  .setup-card    { padding: 22px 16px; }
  .setup-h       { font-size: 22px; }
  .cat-svg       { width: 118px; height: 118px; }
  .cat-stage     { height: 144px; }

  .tab           { padding: 11px 7px; font-size: 8px; letter-spacing: 0; }
  .tabs          { gap: 0; padding: 0 6px; }

  .da            { padding: 10px 8px; font-size: 11px; }

  .adm-subtab    { font-size: 8px; padding: 7px 6px; }
  .adm-overview-grid { gap: 6px; }
  .adm-stat-num  { font-size: 26px; letter-spacing: -1px; }
  .adm-stat-lbl  { font-size: 8.5px; }

  .pin-digits    { font-size: 18px; letter-spacing: 3px; }
  .batt-num      { font-size: 32px; }
  .dh-name       { font-size: 15px; }
  .dh-icon       { width: 52px; height: 52px; font-size: 26px; }
  .dh-badges     { justify-content: center; }

  .nuke-card     { padding: 16px; }
  .otp-num       { font-size: 20px; letter-spacing: 3px; }

  .tb-logo       { font-size: 11px; letter-spacing: 0; }
}

/* ════════════════════════════════════════════════════════════════
   LANDSCAPE PHONE  (short viewport, ≤ 430px tall)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 896px) and (max-height: 430px) and (orientation: landscape) {
  .tb            { height: 44px; }
  .tabs          { overflow-x: auto; }

  #setup         { padding: 12px; }
  .cat-stage     { height: 110px; margin-bottom: 10px; }
  .cat-svg       { width: 90px; height: 90px; }
  .setup-h       { font-size: 20px; }
  .setup-sub     { margin-bottom: 12px; font-size: 11px; }
  .setup-card    { padding: 20px 18px; }
  .cta           { padding: 13px; }

  .stat-grid     { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sv            { font-size: 28px; }
  .tab-body      { padding: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   HIGH-DPI / RETINA
   ════════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  ::-webkit-scrollbar { width: 2px; }
}

/* ════════════════════════════════════════════════════════════════
   TOUCH DEVICES — performance optimizations
   ════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Kill expensive repaints */
  .adm-stat-card::before            { box-shadow: none !important; }
  .adm-stat-card:hover              { transform: none !important; }
  .tb-gl                            { animation: none !important; -webkit-background-clip: text; }
  .gold-grad                        { animation: none !important; }
  .adm-toggle input:checked + .adm-toggle-slider { box-shadow: none; }
  .adm-act-btn:hover                { box-shadow: none; }
  .adm-btn-primary:hover            { box-shadow: none; }
  .overlay                          { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #apBtn                            { display: none; }
  #otpBar                           { box-shadow: none; }
  .sc:hover                         { transform: none; }
  .ic:hover                         { transform: none; }
  .da:hover                         { transform: none; }

  /* Minimum tap target sizes (WCAG 2.5.5 — 44×44px) */
  .tab                              { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .tb-btn                           { min-height: 36px; min-width: 36px; }
  .mbtn, .mfb                       { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
  .da                               { min-height: 44px; }
  .sbf                              { min-height: 36px; }
  .sfbtn                            { min-height: 44px; }
  .stb                              { min-height: 44px; }
  .adm-subtab                       { min-height: 36px; }
  .adm-btn, .adm-act-btn            { min-height: 36px; }
  .dev-item                         { min-height: 52px; }

  /* Bigger delete buttons for touch */
  .msg-del-btn, .am-del-btn         { width: 34px; height: 34px; border-radius: 8px; }

  /* Always show delete buttons on touch (no hover) */
  .msg-bub .msg-del-btn             { background: rgba(255,69,96,.07); border-color: rgba(255,69,96,.18); color: rgba(255,69,96,.55); }
  .am-card .am-del-btn              { background: rgba(255,69,96,.07); border-color: rgba(255,69,96,.18); color: rgba(255,69,96,.55); }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:      0.01ms !important;
  }
  .cat-wrap    { animation: none; }
  .ov-mini-cat { animation: none; }
  #sakuraCanvas { display: none; }
}