/* ============================================================
   TRADERIG — SHARED MOBILE & RESPONSIVE STYLES
   Linked in every app page, after the page's own <style> block.
   ============================================================ */

/* ── PERMISSION REVEAL ────────────────────────────────────────
   Pages embed: [data-perm] { display: none !important; }  [0,1,0]
   These rules use higher specificity [0,2,0] / [0,2,1] to reveal
   elements when JS adds the .perm-visible class. */
[data-perm].perm-visible      { display: block !important; }
a[data-perm].perm-visible     { display: flex  !important; }

/* sidenav-section labels are divs → block is correct */
div[data-perm].perm-visible   { display: block !important; }

/* stat-cards and module-cards keep their block nature */
.stat-card[data-perm].perm-visible    { display: block !important; }
.module-card[data-perm].perm-visible  { display: flex  !important; }
.card-head-action[data-perm].perm-visible { display: block !important; }

/* ── SIDENAV OVERLAY ─────────────────────────────────────────
   Managed by JS: overlay.style.display = open ? 'block' : 'none' */
.sidenav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .48);
  z-index: 190;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── GLOBAL OVERFLOW PROTECTION (all screens) ────────────────*/
html {
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── BASE TOUCH IMPROVEMENTS (all screens) ───────────────────*/
.nav-link,
.sidenav-link {
  min-height: 44px;
}

/* ── TOPBAR BREADCRUMB (all screens) ────────────────────────*/
.topbar-crumb,
.topbar-left nav.breadcrumb,
.topbar > nav.breadcrumb,
.topbar > .breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.topbar-crumb .tc-home,
.topbar-left .breadcrumb-item {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}
.topbar-crumb .tc-home:hover,
.topbar-left .breadcrumb-item:hover { color: var(--amber, #d97706); }

.topbar-crumb .tc-sep,
.topbar-left .breadcrumb-sep {
  color: var(--slate-light, #94a3b8);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.topbar-crumb .tc-cur,
.topbar-left .breadcrumb-current {
  color: var(--text, #1e293b);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── TABLET / iPAD (769 – 1024 px) ───────────────────────────*/
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --side-w: 200px; }

  .main,
  .app-main {
    padding: 28px 24px;
  }

  .stats-row       { grid-template-columns: 1fr 1fr !important; }
  .admin-grid      { grid-template-columns: 1fr 1fr !important; }
  .module-cards    { grid-template-columns: 1fr 1fr !important; }
  .bottom-grid     { grid-template-columns: 1fr !important; }

  /* sidenav stays visible on iPad — no hamburger needed */
}

/* ── MOBILE (≤ 768 px) ───────────────────────────────────────*/
@media (max-width: 768px) {
  /* ── App shell layout ── */
  :root { --side-w: 0px; }

  .sidenav {
    width: 240px !important;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 200;
  }
  .sidenav.open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(15, 23, 42, .28);
  }

  /* topbar spans full width on mobile */
  .topbar,
  .app-topbar {
    left: 0 !important;
  }

  /* main content fills full width */
  .main,
  .app-main {
    margin-left: 0 !important;
    padding: 20px 16px !important;
  }

  /* show hamburger */
  .hamburger { display: flex !important; }

  /* ── Grids ── */
  .stats-row    { grid-template-columns: 1fr 1fr !important; }
  .admin-grid   { grid-template-columns: 1fr 1fr !important; }
  .module-cards { grid-template-columns: 1fr !important; }
  .bottom-grid  { grid-template-columns: 1fr !important; }
  .grid-2,
  .grid-3,
  .grid-4       { grid-template-columns: 1fr !important; }

  /* ── Tables ── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table,
  .data-table   { min-width: 520px; }

  /* ── Cards ── */
  .stat-card    { padding: 14px 16px !important; }
  .module-card  { padding: 18px 16px !important; }

  /* ── Typography ── */
  .ws-greeting,
  .page-title   { font-size: clamp(22px, 6vw, 32px) !important; }

  /* ── Topbar ── */
  .topbar-greeting { font-size: 13px; }
  .topbar-right,
  .app-topbar-right { flex-shrink: 0 !important; gap: 8px !important; }
  .topbar-left,
  .app-topbar-left  { flex: 1; min-width: 0; overflow: hidden; }
  .topbar-crumb     { flex: 1; min-width: 0; overflow: hidden; }
  .topbar,
  .app-topbar { padding: 0 14px !important; gap: 8px !important; }
  nav.breadcrumb { font-size: 12px !important; }

  /* ── Touch targets ── */
  button, .btn, .btn-primary, .btn-secondary,
  .btn-outline, .btn-danger {
    min-height: 44px;
  }
  /* Hamburger must NOT inherit min-height — it has its own fixed size */
  .hamburger { min-height: auto !important; }

  /* ── Form inputs ── */
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }

  /* ── Settings tabs ── */
  .settings-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .settings-tab { white-space: nowrap; }

  /* ── People / incidents table headers ── */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .section-header .section-actions { width: 100%; }
  .section-header input[type="search"],
  .section-header .search-input    { width: 100% !important; }

  /* ── Modal / dialog ── */
  .modal-box,
  .modal-panel {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 20px 16px !important;
  }

  /* ── Profile form ── */
  .profile-grid { grid-template-columns: 1fr !important; }
  .profile-field { margin-bottom: 16px; }
}

/* ── SMALL PHONES (≤ 480 px) ──────────────────────────────── */
@media (max-width: 480px) {
  .stats-row  { grid-template-columns: 1fr !important; }
  .admin-grid { grid-template-columns: 1fr !important; }

  .main,
  .app-main {
    padding: 14px 12px !important;
  }

  .topbar,
  .app-topbar {
    padding: 0 14px !important;
  }

  .topbar-greeting { display: none; }
}

/* ── iOS Safari: full-height sidenav ─────────────────────────*/
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .sidenav { height: 100dvh !important; }
  }
}

/* ── SHARED-COMPONENTS responsive overrides ──────────────────
   Centralized rules for design-system classes.
   No page should need to re-declare these.
   ──────────────────────────────────────────────────────────── */

/* Prevent any text from overflowing its container globally */
* { box-sizing: border-box; }

/* Pill text: never wrap */
.pill { white-space: nowrap !important; }

/* KPI grid: single column below 480px */
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-value { font-size: 22px !important; }
}

/* Responsive grid utilities: collapse on mobile */
@media (max-width: 600px) {
  .rg-2, .rg-3, .rg-4 { grid-template-columns: 1fr !important; }
}

/* Page title: prevent overflow on very narrow screens */
@media (max-width: 400px) {
  .pg-title { font-size: 24px !important; letter-spacing: -.03em !important; }
  .kpi-grid { grid-template-columns: 1fr !important; }
}

/* All tables: horizontal scroll, never collapse */
.table-wrap, .data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
table, .data-table { min-width: 520px; }

/* Prevent long words / URLs from breaking layouts */
.activity-name, .activity-detail, .pg-sub, .kpi-sub, .card-head-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-sub { white-space: normal; word-break: break-word; }