/* ══════════════════════════════════════════════════════════════════════
   css/mobile.css  —  MOBILE RESPONSIVE (original)
   Original 768px/480px breakpoints, plus login-card/admin-card/user-row
   styles. Untouched from the live file -- loaded AFTER base.css so it can
   override via media queries, exactly as it did when both were one file.
   (original index.html lines: original lines 406-574)
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — breakpoints 768px / 480px
   ═══════════════════════════════════════════════ */

/* Tablet & Mobile: hide sidebar by default, show as drawer */
@media (max-width: 768px) {
  /* Header */
  .hdr { padding: 0 10px; height: 48px; gap: 6px; }
  .logo-sub { display: none; }
  .logo { flex-shrink: 0; }
  .db-badge { font-size: 10px; padding: 3px 7px; flex-shrink: 0; }
  .db-badge span:not(.db-dot) { display: none; }

  /* Right-side header cluster (user info + db badge + tabs):
     tighten spacing so everything has a chance to fit before
     falling back to the scroll safety-net below. */
  .hdr-right { gap: 6px; }

  /* User info pill: collapse to avatar + caret only on mobile.
     "Administrator" name text and the role chip were previously
     always rendered at full size, which — combined with the tabs
     and admin/logout buttons — overflowed the header on phones
     and pushed the tabs off-screen with no way to reach them. */
  .user-info-hdr { gap: 0; padding: 3px 5px; }
  .user-info-hdr .ui-name,
  .user-info-hdr .ui-role { display: none; }
  #user-info-bar { gap: 3px; }

  /* Admin / Logout buttons: icon only on mobile, full tap target kept */
  .admin-btn, .logout-btn { padding: 6px 8px !important; min-width: 30px; text-align: center; }
  .admin-btn .btn-lbl, .logout-btn .btn-lbl { display: none; }

  /* Tabs: shrink padding; labels collapse further at 480px below */
  .tabs { gap: 0; }
  .tab { padding: 6px 9px; font-size: 11px; white-space: nowrap; }

  /* Safety net: if the header's content still doesn't fit at some
     extreme viewport width, make it scrollable instead of letting
     content silently clip off-screen and become unreachable. */
  .hdr { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hdr::-webkit-scrollbar { display: none; }
  .hdr > * { flex-shrink: 0; }

  /* Layout: stack vertically */
  .main { flex-direction: column; height: calc(100vh - 48px); position: relative; }

  /* Sidebar becomes slide-in drawer */
  .sb {
    position: fixed; top: 48px; left: -280px; bottom: 0;
    width: 272px; min-width: 272px;
    z-index: 300; transition: left 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .sb.open { left: 0; }

  /* Sidebar overlay backdrop */
  .sb-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.35); z-index: 299;
  }
  .sb-overlay.show { display: block; }

  /* Content takes full width */
  .content { width: 100%; flex: 1; min-height: 0; }

  /* Mobile top bar with filter toggle */
  .mobile-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--bg2);
    border-bottom: 1px solid var(--bdr);
    position: sticky; top: 0; z-index: 100;
  }
  .mob-filter-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 6px;
    background: var(--goldlt); border: 1px solid var(--goldbr);
    color: var(--gold); font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
  }
  .mob-filter-btn:active { opacity: 0.7; }

  /* Chart explorer step bar — horizontal scroll */
  .step-bar {
    overflow-x: auto; white-space: nowrap;
    padding: 8px 12px; gap: 6px;
    scrollbar-width: none;
  }
  .step-bar::-webkit-scrollbar { display: none; }
  .sbtn2 { font-size: 11px; padding: 5px 10px; }

  /* Period table — horizontal scroll */
  .ptw { max-height: 240px; }

  /* Chart canvas height on mobile */
  #mc { height: 220px !important; }

  /* Chat input area */
  .cinput { padding: 8px 10px; }
  .ci { font-size: 13px; }

  /* Message bubbles */
  .msg { gap: 8px; }
  .mbub { font-size: 12px; }
  .mav { width: 28px; height: 28px; font-size: 12px; flex-shrink: 0; }

  /* AI card tables — force horizontal scroll */
  .mbub table { min-width: 400px; }

  /* Indexes grid — 2 columns on mobile */
  .idx-grid { grid-template-columns: 1fr 1fr !important; }

  /* Quick pills — wrap */
  .qpills { gap: 5px; }
  .qp { font-size: 11px; padding: 5px 10px; }

  /* Hide db badge text on small screens (id was previously mistyped
     as #db-text — the real element is #db-txt; the rule above,
     `.db-badge span:not(.db-dot)`, was already covering this, but
     fixing the id here too for clarity/robustness) */
  #db-txt { display: none; }

  /* Tighten the empty-state card so it doesn't look like a blank
     broken screen on short mobile viewports */
  .empty { padding: 24px 16px; min-height: 160px; }

  /* Highlight panel on mobile */
  .hli { padding: 6px 8px; }
  .hli-nm { font-size: 11px; }
  .hli-ds { font-size: 10px; }

  /* Planet chips — wrap tightly on mobile */
  .planet-chips { gap: 3px; }
  .planet-chip  { font-size: 10px; padding: 4px 7px; }

  /* Tooltip — full width on mobile, pinned to bottom */
  #ctt { max-width: calc(100vw - 16px) !important; font-size: 11px; padding: 9px 11px; }
}

/* Small phones */
@media (max-width: 480px) {
  .hdr { padding: 0 8px; }
  .tabs { gap: 0; }
  .tab { padding: 6px 8px; font-size: 11px; }
  .tab-lbl { display: none; }
  .logo-tx { font-size: 13px; }
  .cmsgs { padding: 10px; gap: 8px; }
  .mbub { padding: 8px 10px !important; }
  .mav { width: 24px; height: 24px; font-size: 11px; }

  /* Stack best/worst cards vertically */
  .mbub > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══ LOGIN SYSTEM ══ */
#login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  display:flex;align-items:center;justify-content:center;z-index:9999;font-family:var(--font)}
.login-card{background:rgba(255,255,255,0.97);border-radius:16px;padding:36px 40px;width:400px;
  box-shadow:0 25px 50px rgba(0,0,0,0.45);animation:loginIn .35s ease-out}
@keyframes loginIn{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-ic{width:54px;height:54px;background:linear-gradient(135deg,#b8860b,#6d28d9);
  border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 10px}
.login-logo-tx{font-size:21px;font-weight:800;color:#18181b;letter-spacing:-.3px}
.login-logo-sub{font-size:10px;color:#71717a;letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:11px;font-weight:700;color:#52525b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.login-field input{width:100%;padding:10px 13px;border:1.5px solid #e4e4e7;border-radius:8px;font-size:13px;
  color:#18181b;outline:none;transition:border-color .2s;font-family:inherit;background:#fafafa}
.login-field input:focus{border-color:#b8860b;background:#fff}
.login-field input.err{border-color:#b91c1c;background:#fef2f2}
.login-btn{width:100%;padding:12px;background:linear-gradient(135deg,#b8860b,#9a7209);border:none;
  border-radius:9px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px}
.login-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(184,134,11,0.35)}
.login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.login-err{background:#fef2f2;border:1px solid #fecaca;border-radius:7px;padding:9px 13px;
  font-size:12px;color:#b91c1c;margin-bottom:12px;display:none}
.login-err.show{display:block}
.login-pending{background:#fff8e7;border:1px solid rgba(184,134,11,0.35);border-radius:7px;padding:9px 13px;
  font-size:12px;color:#b8860b;margin-bottom:12px;display:none}
.login-pending.show{display:block}
.login-footer{text-align:center;font-size:10px;color:#a1a1aa;margin-top:16px;padding-top:12px;border-top:1px solid #f0f0f0}
/* Admin panel */
#admin-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:8888;display:none;
  align-items:center;justify-content:center}
#admin-overlay.show{display:flex}
.admin-card{background:#fff;border-radius:14px;width:700px;max-height:82vh;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);display:flex;flex-direction:column}
.admin-hdr{padding:14px 20px;background:var(--bg3);border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.admin-body{overflow-y:auto;padding:16px 20px;flex:1}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:9px;
  border:1px solid var(--bdr);margin-bottom:7px;background:var(--bg2);transition:background .1s}
.user-row:hover{background:var(--bg3)}
.user-badge{padding:2px 9px;border-radius:10px;font-size:10px;font-weight:700;white-space:nowrap}
.badge-employee{background:rgba(29,78,216,0.1);color:#1d4ed8;border:1px solid rgba(29,78,216,0.25)}
.badge-manager{background:rgba(21,128,61,0.1);color:#15803d;border:1px solid rgba(21,128,61,0.25)}
.badge-admin{background:rgba(184,134,11,0.12);color:#b8860b;border:1px solid rgba(184,134,11,0.3)}
.badge-pending{background:rgba(185,28,28,0.08);color:#b91c1c;border:1px solid rgba(185,28,28,0.2)}
.user-info-hdr{display:flex;align-items:center;gap:8px;padding:4px 11px;border-radius:7px;
  background:var(--bg3);border:1px solid var(--bdr);cursor:pointer;font-size:12px}
.user-info-hdr:hover{border-color:var(--gold)}
.user-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#b8860b,#6d28d9);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
.role-chip{padding:2px 8px;border-radius:8px;font-size:10px;font-weight:700}