/* ═══ MOBILE RESPONSIVENESS ═══ */
/* Bottom nav height constant — used for padding calculations */
:root { --bn-height: 64px; }

/* Team portal bottom nav — hidden by default, shown on mobile touch devices */
#team-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:4px 0 max(4px,env(safe-area-inset-bottom));
  z-index:500;
  grid-template-columns:repeat(7,1fr);
  box-shadow:0 -2px 12px rgba(0,0,0,.1);
}
#team-bottom-nav .bn-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 2px;cursor:pointer;border-radius:8px;
  font-size:9px;color:var(--muted);font-weight:500;
  transition:color .15s;
  min-height:44px; /* touch target */
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
#team-bottom-nav .bn-item.active{color:var(--gold);}
#team-bottom-nav .bn-item .bn-icon{font-size:18px;line-height:1;}

@media(max-width:768px){
  /* Hide desktop sidebar on mobile */
  #screen-team .sidebar{ display:none !important; }
  #screen-team .app-body{ display:block; }

  /* app-main padding — bottom must clear the fixed nav */
  #screen-team .app-main{
    padding:12px 12px calc(var(--bn-height) + 12px + max(0px, env(safe-area-inset-bottom)));
    overflow-y:auto;
    height:calc(100vh - 52px); /* viewport minus topbar */
    box-sizing:border-box;
  }

  /* Show bottom nav */
  #team-bottom-nav{ display:grid; }

  /* Topbar compact — team portal */
  #screen-team .app-topbar{
    padding:8px 12px;
    flex-wrap:nowrap;
    gap:6px;
    height:52px;
    flex-shrink:0;
    overflow:visible; /* never clip signout/user pill */
  }
  #screen-team .topbar-signout{ flex-shrink:0; white-space:nowrap; }
  #screen-team .topbar-user{ flex-shrink:1; min-width:0; max-width:130px; overflow:hidden; }
  #screen-team .topbar-user-name{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #screen-team .topbar-user-role{ display:none; }

  /* KPI row — 2 cols on mobile */
  #screen-team .kpi-row{
    grid-template-columns:1fr 1fr !important;
    gap:10px;
  }
  #screen-team .kpi{ padding:12px; }
  #screen-team .kpi-val{ font-size:22px; }

  /* Team overview 2-panel → stack */
  #view-team-overview > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Kanban — single column scroll */
  #screen-team .kanban{
    grid-template-columns:1fr !important;
    overflow-x:visible;
  }
  #screen-team .kanban-col{ min-width:0; }

  /* Cards full width */
  #screen-team .card{ margin-bottom:10px; }

  /* WA panel — full height, compose always visible above nav */
  #screen-team .wa-wrap,
  #screen-team #team-wa-wrap {
    display:flex !important;
    flex-direction:column !important;
    height:calc(100vh - 52px - var(--bn-height) - 40px - max(0px, env(safe-area-inset-bottom))) !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  #screen-team .wa-left{
    display:flex !important;
    flex-direction:column !important;
    flex:1 !important;
    min-height:0 !important;
    height:auto !important;
  }
  #screen-team .wa-messages-area{
    flex:1 !important;
    overflow-y:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  #screen-team .wa-input-wrap{
    flex-shrink:0 !important;
    position:static !important;
    border-top:1px solid rgba(255,255,255,.1);
  }
  #screen-team .wa-right{ display:none !important; }

  /* Forms full width */
  #screen-team .form-row{ grid-template-columns:1fr !important; }

  /* Budget view */
  #screen-team .team-alloc-grid{ grid-template-columns:1fr !important; }

  /* Timeline */
  #screen-team .tl-row{ grid-template-columns:70px 24px 1fr !important; }

  /* Gantt — scroll horizontally */
  #screen-team #team-task-gantt-wrap{ overflow-x:auto; }
  #screen-team #team-task-gantt{ min-width:600px; }

  /* View header stack on mobile */
  #screen-team .view-header{
    flex-direction:column;align-items:flex-start;gap:8px;
    padding-bottom:4px;
  }
  #screen-team .view-header > div:last-child{
    width:100%;display:flex;justify-content:flex-end;
  }
}

/* Admin hamburger — always visible, used for collapse on desktop + slide-in on mobile */
#admin-hamburger{
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  padding:6px;color:var(--muted);font-size:18px;
  -webkit-tap-highlight-color:transparent;
  border-radius:6px;transition:background .15s,color .15s;
  flex-shrink:0;
}
#admin-hamburger:hover{background:var(--bg);color:var(--ink)}
@media(max-width:768px){
  #screen-admin .sidebar{
    position:fixed;top:0;left:-260px;bottom:0;
    width:240px;z-index:300;
    transition:left .25s ease,width 0s;
    box-shadow:4px 0 24px rgba(0,0,0,.15);
    overflow-y:auto;
  }
  #screen-admin .sidebar.open{ left:0; }
  /* On mobile the collapser button is hidden — overlay pattern is used instead */
  #screen-admin .sidebar .sidebar-collapser{ display:none; }
  #sidebar-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.4);z-index:299;
  }
  #sidebar-overlay.show{ display:block; }
  #screen-admin .app-main{ padding:12px; }
  #screen-admin .kpi-row{ grid-template-columns:1fr 1fr !important; }
  #screen-admin .form-row{ grid-template-columns:1fr !important; }
  #screen-admin .events-grid{ grid-template-columns:1fr !important; }
  #screen-admin .kanban{ grid-template-columns:1fr 1fr !important; overflow-x:auto; }
  /* BCC table scroll */
  #screen-admin .bcc-table-wrap{ overflow-x:auto; }
  #screen-admin .bcc-table{ min-width:700px; }
  /* Topbar — hide heavy status pills to prevent overflow */
  #screen-admin #ably-status-wrap{ display:none !important; }
  #screen-admin #worker-status-pill{ display:none !important; }
  #screen-admin #bridge-status-bar{ display:none !important; }
  #screen-admin .topbar-breadcrumb{ display:none; }
  #screen-admin .app-topbar{ padding:8px 10px; gap:6px; flex-wrap:nowrap; overflow:visible; }
  #screen-admin .topbar-logo{ flex-shrink:0; overflow:hidden; max-width:120px; white-space:nowrap; }
  #screen-admin .topbar-signout{ flex-shrink:0; white-space:nowrap; font-size:11px; padding:5px 9px; border:1px solid var(--border); border-radius:6px; }
  #screen-admin .topbar-user{ flex-shrink:1; min-width:0; max-width:130px; overflow:hidden; }
  #screen-admin .topbar-user-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #screen-admin .topbar-avatar{ flex-shrink:0; }
  #screen-admin .topbar-user-role{ display:none; }
}

/* ═══ HELP PANEL ═══ */
#help-panel-overlay{
  position:fixed;inset:0;background:rgba(11,15,26,.4);z-index:1800;
  display:none;backdrop-filter:blur(2px);
}
#help-panel-overlay.open{display:block}
#help-panel{
  position:fixed;top:0;right:-520px;bottom:0;width:min(520px,96vw);
  background:var(--surface);border-left:1px solid var(--border);
  z-index:1801;display:flex;flex-direction:column;
  transition:right .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.12);
}
#help-panel.open{right:0}
.help-topbar{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:#1A1F2E;color:#fff;
}
.help-topbar-title{flex:1;font-weight:700;font-size:15px;color:#fff}
.help-topbar-sub{font-size:11px;color:rgba(255,255,255,.45);margin-top:1px}
.help-close{background:rgba(255,255,255,.1);border:none;color:#fff;
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.help-close:hover{background:rgba(255,255,255,.2)}
.help-search-wrap{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.help-search{
  width:100%;padding:9px 14px 9px 36px;border:1.5px solid var(--border);
  border-radius:8px;font-size:13px;color:var(--ink);background:var(--bg);
  outline:none;transition:border-color .15s;
}
.help-search:focus{border-color:var(--gold)}
.help-search-wrap{position:relative}
.help-search-ico{position:absolute;left:28px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:14px;pointer-events:none}
.help-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0}
.help-tab{flex:1;padding:10px 0;font-size:12px;font-weight:600;color:var(--muted);
  background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;
  transition:all .15s}
.help-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.help-body{flex:1;overflow-y:auto;padding:16px}
/* Help topics */
.help-topic{margin-bottom:4px}
.help-topic-btn{
  width:100%;text-align:left;padding:12px 14px;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;cursor:pointer;
  display:flex;align-items:center;gap:10px;font-size:13px;
  font-weight:600;color:var(--ink);transition:all .15s;
}
.help-topic-btn:hover{border-color:var(--gold);background:var(--gold-bg)}
.help-topic-btn.open{border-color:var(--gold);background:var(--gold-bg);border-radius:8px 8px 0 0}
.help-topic-icon{font-size:17px;flex-shrink:0}
.help-topic-chevron{margin-left:auto;color:var(--muted);font-size:12px;transition:transform .2s}
.help-topic-btn.open .help-topic-chevron{transform:rotate(180deg)}
.help-topic-content{
  display:none;padding:14px 16px;background:var(--surface);
  border:1px solid var(--gold);border-top:none;
  border-radius:0 0 8px 8px;font-size:13px;color:var(--slate);line-height:1.6;
}
.help-topic-content.open{display:block}
.help-topic-content p{margin-bottom:8px}
.help-topic-content ul{margin-left:18px;margin-bottom:8px}
.help-topic-content li{margin-bottom:4px}
.help-topic-content strong{color:var(--ink)}
.help-topic-content code{background:var(--bg);border:1px solid var(--border);
  padding:1px 5px;border-radius:4px;font-size:11px;font-family:monospace;color:var(--violet)}
.help-steps{counter-reset:hs;list-style:none;margin-left:0}
.help-steps li{counter-increment:hs;display:flex;gap:10px;margin-bottom:10px}
.help-steps li::before{content:counter(hs);min-width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:var(--ink);font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.help-tip{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:6px;
  padding:10px 12px;margin-top:8px;font-size:12px;color:#1E40AF}
.help-warn{background:#FFFBEB;border:1px solid #FDE68A;border-radius:6px;
  padding:10px 12px;margin-top:8px;font-size:12px;color:#92400E}
/* Contextual banner */
.help-context-banner{
  background:var(--gold-bg);border:1px solid rgba(212,168,67,.3);
  border-radius:8px;padding:10px 14px;margin-bottom:14px;
  font-size:12px;color:#92400E;display:flex;gap:8px;align-items:flex-start;
}
/* Help button in topbar */
.help-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;font-weight:700;color:var(--muted);
  transition:all .2s;flex-shrink:0;
}
.help-btn:hover{border-color:var(--gold);background:var(--gold-bg);color:var(--gold)}
/* No results */
.help-no-results{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px}

@media print {
  body > *:not(#print-frame){display:none!important}
  #print-frame{display:block!important;position:static;width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ENHANCEMENTS — Phase 4b
   Comprehensive mobile-first fixes for day-of-event field use.
   All rules are scoped or use ≤768px breakpoint to avoid
   touching the existing desktop layout.
═══════════════════════════════════════════════════════════════ */

/* ── Global touch targets & scrolling ─────────────────────── */
@media(max-width:768px){
  /* Make sure the whole page doesn't overflow horizontally */
  html,body{ overflow-x:hidden; -webkit-text-size-adjust:100%; }

  /* Larger tap targets for all buttons */
  .btn{ min-height:44px; }
  .btn-sm{ min-height:38px; padding:8px 14px; }
  .btn-xs{ min-height:34px; padding:6px 10px; }
  .btn-icon{ min-width:44px; min-height:44px; }

  /* Nav links + nav items */
  .nav-link{ min-height:44px; }

  /* Inputs & selects: comfortable touch size */
  .form-input, .form-select, .form-textarea{
    font-size:16px !important; /* prevents iOS zoom on focus */
    min-height:44px;
    padding:10px 12px;
  }
  .form-select{ padding-right:32px; }

  /* ── Toast: move above bottom nav on mobile ─────────────── */
  .toast-container{
    bottom:calc(var(--bn-height, 64px) + 12px);
    right:12px;
    left:12px;
    align-items:stretch;
  }
  .toast{ min-width:0; width:100%; }
}

/* ── Landing page mobile ────────────────────────────────────── */
@media(max-width:768px){
  .landing-nav{ padding:0 4%; height:60px; }
  .nav-links{ display:none; } /* hide nav links on mobile, CTA sufficient */
  .nav-cta{ gap:6px; }
  .nav-cta .btn{ padding:8px 12px; font-size:12px; min-height:38px; }

  .hero{ padding:100px 5% 60px; }
  .hero-stats{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .hero-stat-val{ font-size:26px; }
  .hero-actions{ flex-direction:column; gap:10px; }
  .hero-actions .btn{ width:100%; justify-content:center; }

  .features-grid{ grid-template-columns:1fr; }
  .roles-grid{ grid-template-columns:1fr; }
  .role-card{ padding:24px; }
}

/* ── Login screen mobile ────────────────────────────────────── */
@media(max-width:480px){
  .login-screen{
    display:flex; align-items:flex-start; justify-content:center;
    padding:16px;
    padding-top:max(40px, env(safe-area-inset-top));
  }
  .login-card{
    padding:28px 20px;
    border-radius:16px;
    max-width:100%;
  }
}

/* ── Admin: full mobile treatment ───────────────────────────── */
@media(max-width:768px){
  /* Main content padding */
  #screen-admin .app-main{ padding:12px; box-sizing:border-box; }

  /* View padding reduced */
  #screen-admin .view{ padding:16px 0 0; }

  /* View header: stack vertically */
  #screen-admin .view-header{
    flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:16px;
  }
  #screen-admin .view-header .view-actions{
    width:100%; display:flex; flex-wrap:wrap; gap:6px;
  }
  #screen-admin .view-header .view-actions .btn{ flex:1; justify-content:center; min-width:0; }

  /* View title size */
  #screen-admin .view-title{ font-size:20px; }

  /* KPI row: 2-col grid */
  #screen-admin .kpi-row{ grid-template-columns:1fr 1fr !important; gap:10px; }
  #screen-admin .kpi{ padding:12px 14px; }
  #screen-admin .kpi-val{ font-size:22px; }

  /* Events grid: single column */
  #screen-admin .events-grid{ grid-template-columns:1fr !important; }

  /* All 2-col grids → 1-col */
  #screen-admin div[style*="grid-template-columns:1fr 1fr"],
  #screen-admin div[style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Form rows */
  #screen-admin .form-row{ grid-template-columns:1fr !important; }
  #screen-admin .form-row-3{ grid-template-columns:1fr !important; }

  /* Kanban: horizontal scroll with 2 visible cols */
  #screen-admin .kanban{
    display:flex !important; overflow-x:auto; gap:10px;
    padding-bottom:12px; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  #screen-admin .kanban-col{
    min-width:80vw; scroll-snap-align:start;
  }

  /* Tables: horizontal scroll */
  #screen-admin .data-table-wrap,
  #screen-admin .bcc-table-wrap,
  #screen-admin .activity-table-wrap,
  #screen-admin .user-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #screen-admin .data-table,
  #screen-admin .bcc-table,
  #screen-admin .activity-table{ min-width:640px; }
  #screen-admin .user-table-wrap .user-row{ min-width:640px; }

  /* Tab bar: scrollable horizontal */
  #screen-admin .tab-bar{
    overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  #screen-admin .tab-bar::-webkit-scrollbar{ display:none; }
  #screen-admin .tab-btn{ white-space:nowrap; flex-shrink:0; }

  /* BCC banner metrics: 3-col → 2-col wrap */
  #screen-admin .bcc-banner-metrics{
    grid-template-columns:repeat(3,1fr) !important; flex-wrap:wrap;
  }
  #screen-admin .bcc-banner-top{
    grid-template-columns:1fr !important; gap:10px;
  }
  #screen-admin .bcc-metric{ padding:10px 12px; }
  #screen-admin .bcc-metric-val{ font-size:14px; }

  /* BCC mini metrics: 2-col */
  #screen-admin .bcc-mini-metrics{
    grid-template-columns:1fr 1fr !important;
  }

  /* Analytics charts: single column */
  #screen-admin .chart-grid{ grid-template-columns:1fr !important; }
  #screen-admin .chart-wrap{ height:180px; }

  /* Team alloc grid: single column */
  #screen-admin .team-alloc-grid{ grid-template-columns:1fr !important; }

  /* Approval items: stack instead of grid */
  #screen-admin .approval-item{
    grid-template-columns:auto 1fr !important; gap:10px;
  }
  #screen-admin .ai-actions{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; }
  #screen-admin .ai-actions .btn{ flex:1; justify-content:center; }

  /* Budget rows: scrollable */
  #screen-admin .budget-row{ min-width:560px; }
  #screen-admin #bcc-budget-table-wrap{ overflow-x:auto; }

  /* State flow: scrollable */
  #screen-admin .state-flow{ overflow-x:auto; flex-wrap:nowrap; }

  /* Print kpi row: 2-col */
  #screen-admin .print-kpi-row{ grid-template-columns:1fr 1fr !important; }

  /* Gantt: scrollable */
  #screen-admin .gantt-wrap{ overflow-x:auto; }
  #screen-admin .gantt-header{ min-width:700px; }
  #screen-admin .gantt-row{ min-width:700px; }

  /* Member and vendor grids */
  #screen-admin .members-grid{ grid-template-columns:1fr 1fr !important; }
  #screen-admin .vendor-grid{ grid-template-columns:1fr !important; }

  /* Filters row in user mgmt */
  #screen-admin #user-search,
  #screen-admin #user-filter-role,
  #screen-admin #user-filter-status{
    width:100% !important; max-width:none !important;
  }

  /* Analytics filter select */
  #screen-admin #analytics-event-filter{ width:100% !important; }

  /* Notif panel: full width on mobile */
  .notif-panel{ width:calc(100vw - 24px); right:-8px; }

  /* Topbar: overflow:visible so signout is never clipped */
  #screen-admin .app-topbar{ padding:8px 12px; gap:6px; flex-wrap:nowrap; overflow:visible; }
  #screen-admin .topbar-logo{ font-size:15px; flex-shrink:0; overflow:hidden; max-width:120px; white-space:nowrap; }
  #screen-admin .topbar-logo .tl-mark{ width:24px; height:24px; }

  /* ROS table: horizontal scroll */
  #screen-admin .ros-table-wrap{ overflow-x:auto; }
  #screen-admin .ros-table{ min-width:580px; }

  /* Settings */
  #screen-admin .settings-row{ flex-wrap:wrap; gap:8px; }

  /* WA panel admin */
  #screen-admin .wa-wrap{
    grid-template-columns:1fr !important;
    height:calc(100vh - 130px) !important;
  }
  #screen-admin .wa-right{ display:none !important; }
  /* New WA hub 3-col → 1-col on mobile */
  #screen-admin .wa-hub{
    grid-template-columns:1fr !important;
    height:auto !important;
    max-height:none !important;
  }
  #screen-admin .wa-channels{ max-height:220px; border-right:none; border-bottom:1px solid rgba(255,255,255,.07); }
  #screen-admin .wa-tools{ display:none; }
  #screen-admin .wa-thread{ min-height:400px; }
}

/* ── Team portal extra mobile fixes ────────────────────────── */
@media(max-width:768px){
  /* View padding */
  #screen-team .view{ padding:16px 0 0; }
  #screen-team .view-title{ font-size:20px; }

  /* ROS tick view — larger tap targets */
  #screen-team .ros-tick-item{ padding:16px; }
  #screen-team .ros-tick-btns .btn{ flex:1; justify-content:center; min-height:44px; }
  #screen-team .ros-tick-time{ font-size:16px; }
  #screen-team .ros-tick-title{ font-size:15px; }

  /* Todo add row */
  #screen-team .todo-add-row{ flex-direction:column; }
  #screen-team .todo-add-row .form-input{ width:100%; }
  #screen-team .todo-add-row .btn{ width:100%; justify-content:center; }

  /* Todo items: full width readable */
  #screen-team .todo-item{ padding:12px; }
  #screen-team .todo-text{ font-size:14px; }

  /* Activity feed: more breathing room */
  #screen-team .feed-item{ padding:10px 0; gap:8px; }
  #screen-team .feed-actor,
  #screen-team .feed-action,
  #screen-team .feed-subject{ font-size:13px; }

  /* Member cards: 2-col on team */
  #screen-team .members-grid{ grid-template-columns:1fr 1fr !important; }
  #screen-team .vendor-grid{ grid-template-columns:1fr !important; }

  /* Timeline: condensed labels */
  #screen-team .tl-row{ grid-template-columns:64px 20px 1fr !important; gap:0 8px; }
  #screen-team .tl-date-cell{ font-size:10px; }

  /* Chart grid */
  #screen-team .chart-grid{ grid-template-columns:1fr !important; }
  #screen-team .chart-wrap{ height:180px; }
  #screen-team .team-bcc-alloc-grid{ grid-template-columns:1fr 1fr !important; }

  /* Team BCC header */
  #screen-team .team-bcc-header{ padding:16px; }

  /* Notif panel full width */
  #screen-team .notif-panel{ width:calc(100vw - 24px); right:-8px; }
  #screen-team .app-topbar{ padding:8px 12px; gap:6px; flex-wrap:nowrap; overflow:visible; }
  #screen-team .topbar-logo{ font-size:15px; flex-shrink:0; overflow:hidden; max-width:110px; white-space:nowrap; }
  #screen-team .topbar-logo .tl-mark{ width:24px; height:24px; }
}

/* ── Modals: bottom-sheet style on mobile ───────────────────── */
@media(max-width:600px){
  .modal-overlay{
    align-items:flex-end;
    padding:0;
    /* Safe-area padding so sheet clears the home indicator */
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
  .modal{
    border-radius:20px 20px 0 0;
    max-height:92vh;
    width:100%;
    max-width:100%;
    /* Restore horizontal padding lost when we zeroed overlay padding */
    padding:20px 20px 24px;
    box-sizing:border-box;
    /* Scroll inside the sheet when content is tall */
    overflow-y:auto;
  }
  .modal-lg{
    max-width:100%;
  }
  .modal-title{ font-size:18px; }
  .modal-footer{ flex-direction:column-reverse; gap:8px; }
  .modal-footer .btn{ width:100%; justify-content:center; min-height:48px; }

  /* Search overlay: align to bottom on mobile.
     Note: .search-box lives inside .search-overlay which is
     already position:fixed, so we use flex alignment only. */
  .search-overlay{
    align-items:flex-end;
    padding-top:0;
  }
  .search-box{
    border-radius:16px 16px 0 0;
    max-width:100%;
    width:100%;
    max-height:80vh;
    overflow-y:auto;
    box-sizing:border-box;
  }

  /* Print modal full screen */
  .print-modal{ max-width:100%; border-radius:20px 20px 0 0; margin:0; }
  .print-overlay{
    align-items:flex-end; padding:0;
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
}

/* ── Help panel: full-width on small phones ─────────────────── */
/* Use 98vw not 100vw to avoid triggering horizontal scroll.
   The off-screen position (right:-98vw) must match the width
   so the CSS transition slides it correctly to right:0. */
@media(max-width:480px){
  #help-panel{
    width:98vw;
    right:-98vw;
  }
  #help-panel.open{
    right:0;
  }
}

/* ── Dark mode mobile adjustments ─────────────────────────── */
@media(max-width:768px){
  body.dark .sidebar.open{ background:var(--surface); }
}

/* ── Run-of-Show admin: card view on mobile ─────────────────── */
@media(max-width:640px){
  /* Convert ROS table to card list on mobile */
  #screen-admin .ros-table,
  #screen-admin .ros-table thead,
  #screen-admin .ros-table tbody,
  #screen-admin .ros-table th,
  #screen-admin .ros-table td,
  #screen-admin .ros-table tr{
    display:block;
  }
  #screen-admin .ros-table thead{ display:none; }
  #screen-admin .ros-table tr{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    margin-bottom:8px;
    padding:12px 14px;
    position:relative;
  }
  #screen-admin .ros-table td{
    padding:3px 0;
    border-bottom:none;
    font-size:13px;
  }
  #screen-admin .ros-time{
    font-size:16px; font-weight:700;
    display:block; margin-bottom:4px;
  }
  #screen-admin .ros-table td:last-child{
    margin-top:10px;
    display:flex; gap:6px; flex-wrap:wrap;
  }
  #screen-admin .ros-table td:last-child .btn{ flex:1; justify-content:center; }
}

/* ── BCC activity lines: card view on mobile ────────────────── */
@media(max-width:640px){
  #screen-admin .activity-table,
  #screen-admin .activity-table thead,
  #screen-admin .activity-table tbody,
  #screen-admin .activity-table th,
  #screen-admin .activity-table td,
  #screen-admin .activity-table tr{
    display:block;
  }
  #screen-admin .activity-table thead{ display:none; }
  #screen-admin .activity-table tbody tr{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    margin-bottom:8px;
    padding:12px 14px;
  }
  #screen-admin .activity-table td{ padding:3px 0; border:none; font-size:13px; }
  #screen-admin .at-actions{ margin-top:8px; }
  #screen-admin .at-actions .btn{ flex:1; justify-content:center; }
}

/* ── User management table: card list on mobile ─────────────── */
@media(max-width:640px){
  #screen-admin .user-table-wrap{ overflow-x:visible; }
  #screen-admin .user-row.header{ display:none; }
  #screen-admin .user-row{
    display:flex !important; flex-direction:column !important;
    gap:8px; min-width:0; padding:14px;
    background:var(--surface); border-radius:var(--radius-sm);
    margin-bottom:6px;
  }
  #screen-admin .user-name-cell{ flex-direction:row; align-items:center; gap:10px; }
  #screen-admin .user-actions{
    display:flex; flex-wrap:wrap; gap:6px;
  }
  #screen-admin .user-actions .btn{ flex:1; justify-content:center; }
}

/* ── BCC approval items: stacked on mobile ──────────────────── */
@media(max-width:600px){
  .approval-item{
    grid-template-columns:auto 1fr !important;
    gap:10px !important;
  }
  .approval-item .ai-actions{
    grid-column:1/-1;
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .approval-item .ai-actions .btn{ flex:1; justify-content:center; }
}

/* ── Funnel chart: responsive label ─────────────────────────── */
@media(max-width:600px){
  .funnel-row{ flex-wrap:wrap; gap:4px; }
  .funnel-label{ min-width:0; text-align:left; font-size:11px; width:100%; }
  .funnel-amt{ min-width:0; }
}

/* ── Audit timeline: condensed on mobile ────────────────────── */
@media(max-width:600px){
  .audit-item{ grid-template-columns:72px 14px 1fr !important; }
  .audit-time strong{ font-size:11px; }
  .audit-time{ font-size:10px; }
}

/* ── WA Template grid: single col on mobile ─────────────────── */
@media(max-width:480px){
  .wa-template-grid{ grid-template-columns:1fr !important; }
}

/* ── Bridge status bar: hide on tiny screens ─────────────────── */
@media(max-width:400px){
  #bridge-status-bar .bridge-pill:nth-child(n+3){ display:none; }
}

/* ── Presence strip: limit on mobile ────────────────────────── */
@media(max-width:768px){
  .presence-strip .presence-avatar:nth-child(n+4){ display:none; }
}

/* ── Gantt controls: wrap on mobile ─────────────────────────── */
@media(max-width:640px){
  .gantt-controls{ flex-wrap:wrap; gap:6px; }
  .gantt-team-legend{ flex-wrap:wrap; }
}

/* ── Chart grid admin extra ──────────────────────────────────── */
@media(max-width:768px){
  #screen-admin div[style*="grid-template-columns:1fr 1fr;gap:16px"],
  #screen-admin div[style*="grid-template-columns: 1fr 1fr; gap: 16px"]{
    grid-template-columns:1fr !important;
  }
  /* Spend pipeline */
  #screen-admin #analytics-spend-pipeline .funnel-row{ flex-direction:column; gap:4px; }
}

/* ── Bottom nav: larger icons on small screens ───────────────── */
@media(max-width:360px){
  #team-bottom-nav{ grid-template-columns:repeat(7,1fr); }
  #team-bottom-nav .bn-item{ font-size:8px; padding:2px 1px; }
  #team-bottom-nav .bn-item .bn-icon{ font-size:16px; }
}

/* ── Admin hamburger: better hit target ──────────────────────── */
@media(max-width:768px){
  #admin-hamburger{
    width:44px; height:44px;
    border-radius:8px;
    display:flex;
    align-items:center; justify-content:center;
  }
}

/* ── Topbar: keep all items visible on mobile ─────────────────── */
/* ROOT CAUSE FIX: overflow:hidden was clipping the Sign Out button
   and user pill off-screen on narrow phones. The topbar is a
   flex-wrap:nowrap row — items pushed past the clipped edge vanish.
   Solution: use overflow:visible and constrain individual children. */
@media(max-width:768px){
  .app-topbar{
    overflow:visible;   /* never clip topbar children */
  }
  .topbar-spacer{
    flex:1;
    min-width:0;        /* spacer can fully collapse */
  }

  /* Icon buttons: fixed 36px squares, never shrink */
  .search-btn,
  .notif-bell,
  .theme-toggle,
  .help-btn{
    width:36px; height:36px;
    min-width:36px; min-height:36px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    padding:0;
    border-radius:8px;
    font-size:17px;
  }

  /* Sign out: always visible, never shrinks */
  .topbar-signout{
    flex-shrink:0;
    white-space:nowrap;
    font-size:12px;
    padding:6px 10px;
    min-height:34px;
    border-radius:6px;
    border:1px solid var(--border);
  }

  /* User pill: allowed to shrink, text truncates, avatar stays */
  .topbar-user{
    flex-shrink:1;
    min-width:0;
    max-width:130px;
    overflow:hidden;
  }
  .topbar-user-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar-avatar{ flex-shrink:0; }

  /* Logo: never pushes right-side items off screen */
  .topbar-logo{
    flex-shrink:0;
    white-space:nowrap;
    overflow:hidden;
    max-width:120px;
  }
}

/* ── Safe area insets for notched phones ─────────────────────── */
@supports(padding-bottom: env(safe-area-inset-bottom)){
  #team-bottom-nav{
    padding-bottom:max(4px, env(safe-area-inset-bottom));
  }
  @media(max-width:768px){
    #screen-team .app-main{
      padding-bottom:calc(var(--bn-height) + 12px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ── View-specific: dashboard overview ───────────────────────── */
@media(max-width:768px){
  /* Event dashboard inline grids */
  #screen-admin #view-event div[style*="grid-template-columns:2fr 1fr"],
  #screen-admin #view-event div[style*="grid-template-columns: 2fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* BCC mini metrics 2-col */
  .bcc-mini-metrics{ grid-template-columns:1fr 1fr !important; }
  .bcc-mini-top{ grid-template-columns:1fr !important; }
}

/* ── Form select filters: full width on mobile ───────────────── */
@media(max-width:640px){
  #bcc-team-filter,
  #bcc-state-filter{
    width:100% !important; max-width:none !important;
  }
  /* BCC filter row: stack */
  #bcc-view-activities .flex.items-center.justify-between{
    flex-direction:column !important; align-items:flex-start !important; gap:10px;
  }
  #bcc-view-activities .flex.gap-2{
    flex-wrap:wrap; width:100%;
  }
  #bcc-view-activities .flex.gap-2 .btn{ flex:1; justify-content:center; }
}

/* ── Tab count badges: ensure visible on mobile ──────────────── */
@media(max-width:480px){
  .tab-count{ display:inline-flex; }
}

/* ── Checklist items: touch-friendly ────────────────────────── */
@media(max-width:768px){
  .cl-item{ padding:14px 16px; gap:14px; }
  .cl-section-head{ padding:12px 16px; font-size:14px; }
}

/* ── Feature cards: prevent text overflow ───────────────────── */
@media(max-width:480px){
  .feat-p{ font-size:13px; }
  .section-h2{ font-size:clamp(22px,6vw,32px); }
}

/* ── Topbar: ultra-compact on tiny phones (≤480px) ───────────── */
/* On phones ≤480px wide the full topbar still cannot fit.
   Hide the user name text (avatar initial is sufficient ID),
   collapse the logo to icon-only, and replace "Sign out" text
   with a power icon — all without touching the HTML. */
@media(max-width:480px){
  /* User name hidden — avatar initial identifies the user */
  .topbar-user-name{ display:none !important; }
  .topbar-user{ padding:4px 5px; gap:0; max-width:none; }
  .topbar-avatar{ width:30px; height:30px; }

  /* Logo: icon only — hide the "Eventflow" text label */
  .topbar-logo{
    max-width:32px;
    font-size:0 !important;   /* hides text node */
    gap:0;
    overflow:visible;
  }
  .topbar-logo .tl-mark{
    width:28px; height:28px;
    flex-shrink:0;
  }

  /* Sign out: icon-only power button */
  .topbar-signout{
    font-size:0 !important;   /* hides text */
    width:34px; height:34px;
    min-width:34px; min-height:34px;
    padding:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px;
  }
  .topbar-signout::after{
    content:"⏻";
    font-size:17px;
    color:var(--muted);
    display:block;
  }

  /* Hide help button — panel reachable via sidebar on larger screens */
  .help-btn{ display:none !important; }

  /* Tighten topbar gap */
  .app-topbar{ gap:3px; padding-left:8px; padding-right:8px; }
}

/* ── Topbar: landscape phones ─────────────────────────────────── */
/* In landscape on a phone the topbar must still be compact.
   Reduced height + tighter padding to maximise content area. */
@media(max-height:500px) and (max-width:900px){
  .app-topbar{ height:44px !important; padding-top:4px; padding-bottom:4px; }
  #screen-team .app-main{
    height:calc(100vh - 44px) !important;
  }
  #team-bottom-nav{ display:none !important; }
  #screen-team .sidebar{ display:flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GOVERNANCE MODULES — Mobile Responsive (Phase 5)
   Covers: WBS, Risk Register, Issue Log, Stakeholder Register,
   RACI Matrix, Lifecycle Phases, Payment Schedule, Settings-Finance
   All rules scoped to ≤768px or ≤600px to preserve desktop layout.
═══════════════════════════════════════════════════════════════ */

/* ── WBS: Tree indentation collapses on mobile ───────────────── */
@media(max-width:768px){
  /* Flatten deep indentation — no node should be indented >28px on mobile */
  .wbs-depth-1 > .wbs-node-card { margin-left:12px !important; }
  .wbs-depth-2 > .wbs-node-card { margin-left:20px !important; }
  .wbs-depth-3 > .wbs-node-card { margin-left:28px !important; }

  /* Task list indentation follows */
  .wbs-task-list             { margin-left:20px !important; }
  .wbs-depth-1 .wbs-task-list{ margin-left:28px !important; }
  .wbs-depth-2 .wbs-task-list{ margin-left:36px !important; }
  .wbs-depth-3 .wbs-task-list{ margin-left:44px !important; }

  /* Node card: stack stats below title on narrow screens */
  .wbs-node-card{
    flex-wrap:wrap;
    gap:8px;
  }
  .wbs-node-left{ min-width:0; flex:1 1 100%; }
  .wbs-node-right{
    flex:0 0 100%;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
  }

  /* Always show action buttons on mobile (no hover on touch) */
  .wbs-node-actions{ opacity:1 !important; }

  /* Progress bar: full width on mobile */
  .wbs-progress-bar{ width:100% !important; }

  /* Node stats: reduce spacing */
  .wbs-node-stats{ gap:8px; }
  .wbs-mini-stat{ min-width:28px; }

  /* WBS summary bar: 2 cols */
  .wbs-summary-bar{ gap:8px; }
  .wbs-stat{ min-width:calc(50% - 4px); padding:10px 12px; }
  .wbs-stat-val{ font-size:18px; }

  /* WBS tree header: stack add button */
  .wbs-root-node{ flex-wrap:wrap; gap:8px; }
  .wbs-add-btn{ margin-left:0 !important; width:100%; }

  /* BCC rollup table: scroll */
  .wbs-bcc-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wbs-bcc-table{ min-width:520px; }

  /* Gantt WBS filter: full width */
  #gantt-wbs-filter{ min-width:0 !important; max-width:100% !important; width:100% !important; }

  /* Task filter bar: wrap and stack on mobile */
  #task-search-bar{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  #task-search-bar .form-input{ width:100% !important; min-width:0 !important; }
  #task-search-bar .form-select,
  select#task-filter-team,
  select#task-filter-priority,
  select#task-filter-status,
  select#task-filter-wbs{
    width:calc(50% - 3px) !important;
    min-width:0 !important;
    max-width:none !important;
    flex:1 1 calc(50% - 3px) !important;
    font-size:13px !important;
  }
}

/* ── WBS modals: full-screen on mobile ───────────────────────── */
@media(max-width:600px){
  #wbs-modal,
  #wbs-assign-modal{
    padding:0 !important;
    align-items:flex-end !important;
  }
  .wbs-modal-box,
  .wbs-assign-modal-box{
    max-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    max-height:90vh !important;
  }
  .wbs-assign-body-scroll{ max-height:60vh; }
}

/* ── Risk Register ────────────────────────────────────────────── */
@media(max-width:768px){
  /* KPI strip: 3-col → 2-col wrap */
  #screen-admin #view-risk-register div[style*="repeat(5,1fr)"],
  #screen-admin #view-risk div[style*="repeat(5,1fr)"]{
    grid-template-columns:1fr 1fr 1fr !important;
  }

  /* Heat map + sidebar: stack vertically */
  #screen-admin #view-risk-register div[style*="1fr 220px"],
  #screen-admin #view-risk div[style*="1fr 220px"]{
    grid-template-columns:1fr !important;
  }

  /* Risk heat map matrix: scroll horizontally */
  #screen-admin .risk-heatmap-wrap,
  #screen-admin div[style*="overflow-x:auto"] > table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Risk register table: scroll */
  #screen-admin .risk-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #screen-admin .risk-table{ min-width:640px; }
}

@media(max-width:600px){
  /* Risk KPI strip: 2-col */
  #screen-admin #view-risk-register div[style*="repeat(5,1fr)"],
  #screen-admin #view-risk div[style*="repeat(5,1fr)"]{
    grid-template-columns:1fr 1fr !important;
  }
}

/* ── Issue Log ────────────────────────────────────────────────── */
@media(max-width:768px){
  /* KPI strip: 3-col → 2-col wrap */
  #screen-admin #view-issue-log div[style*="repeat(5,1fr)"]{
    grid-template-columns:1fr 1fr 1fr !important;
  }

  /* Issue table: scroll */
  #screen-admin .issue-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #screen-admin .issue-table{ min-width:620px; }
}

@media(max-width:600px){
  #screen-admin #view-issue-log div[style*="repeat(5,1fr)"]{
    grid-template-columns:1fr 1fr !important;
  }
}

/* ── Stakeholder Register ─────────────────────────────────────── */
@media(max-width:768px){
  /* KPI strip: 2-col */
  #screen-admin #view-stakeholder div[style*="repeat(4,1fr)"],
  #screen-admin #view-stakeholders div[style*="repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr !important;
  }

  /* Register table: scroll — engagement matrix has many columns */
  #screen-admin #view-stakeholder div[style*="overflow-x:auto"],
  #screen-admin #view-stakeholders div[style*="overflow-x:auto"]{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100vw;
  }
  #screen-admin #view-stakeholder table,
  #screen-admin #view-stakeholders table{
    min-width:700px;
  }

  /* RACI matrix: always scroll, never wrap */
  #screen-admin .raci-wrap,
  #screen-admin div[style*="192px "]{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  /* The RACI grid uses inline 192px fixed col — give table room */
  #screen-admin div[style*="grid-template-columns:192px"]{
    min-width:600px;
  }

  /* Comms plan: scroll */
  #screen-admin .comms-table-wrap{ overflow-x:auto; }
}

/* ── Lifecycle Phases ─────────────────────────────────────────── */
@media(max-width:768px){
  /* Phase cards: full width, no min-width */
  #screen-admin #view-lifecycle .phase-card,
  #screen-admin #view-lifecycle-phases .phase-card{
    min-width:0 !important;
    width:100%;
  }

  /* Phase header tab row: scroll horizontally */
  #screen-admin .lifecycle-tabs,
  #screen-admin .phase-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #screen-admin .lifecycle-tabs::-webkit-scrollbar,
  #screen-admin .phase-tabs::-webkit-scrollbar{ display:none; }

  /* Detail panel 2-col → 1-col */
  #screen-admin div[style*="grid-template-columns:1fr 1fr;gap:20px"]{
    grid-template-columns:1fr !important;
  }

  /* Entry/exit criteria cards: stack */
  #screen-admin .criteria-grid{
    grid-template-columns:1fr !important;
  }

  /* Phase approval/status buttons: full width */
  #screen-admin .phase-actions{
    display:flex; flex-direction:column; gap:6px;
  }
  #screen-admin .phase-actions .btn{ width:100%; justify-content:center; }

  /* Phase stage cards: min-width on the scroll strip */
  #screen-admin .phases-strip{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #screen-admin .phase-stage-card{ min-width:200px; flex-shrink:0; }
}

/* ── Payment Schedule ─────────────────────────────────────────── */
@media(max-width:768px){
  /* KPI summary row: 2-col */
  #screen-admin div[style*="repeat(3,1fr);gap:8px"]{
    grid-template-columns:1fr 1fr !important;
  }

  /* Payment table: wrap to card list on mobile */
  .payment-schedule-table{ display:block; }
  .payment-schedule-table thead{ display:none; }
  .payment-schedule-table tbody{ display:block; }
  .payment-schedule-table tr{
    display:flex;
    flex-direction:column;
    gap:4px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 14px;
    margin-bottom:8px;
  }
  .payment-schedule-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:3px 0;
    border:none;
    font-size:13px;
  }
  .payment-schedule-table td::before{
    content:attr(data-label);
    font-size:10px;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-right:8px;
    white-space:nowrap;
    flex-shrink:0;
  }

  /* Cash flow chart: fill width */
  #bcc-cashflow-chart-wrap{ overflow-x:auto; }
  #bcc-cashflow-chart-wrap canvas{ min-width:340px; }
}

/* ── Settings — Finance tab ──────────────────────────────────── */
@media(max-width:768px){
  /* Payment labels 3-col → 1-col */
  #settings-panel-finance div[style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Settings rows: wrap */
  #settings-panel-finance .settings-row{
    flex-wrap:wrap; gap:10px;
  }
  /* Number inputs: comfortable width */
  #psr-threshold,
  #psr-deposit-pct,
  #psr-deposit-days{ width:100% !important; }
}

/* ── Kanban: mobile touch layout ─────────────────────────────── */
@media(max-width:768px){
  /* Admin kanban: horizontal snap-scroll columns */
  #screen-admin #task-kanban,
  #screen-admin .kanban{
    display:flex !important;
    overflow-x:auto;
    gap:10px;
    padding-bottom:12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  #screen-admin #task-kanban .kanban-col,
  #screen-admin .kanban .kanban-col{
    min-width:82vw;
    scroll-snap-align:start;
    flex-shrink:0;
  }

  /* Team kanban: single-column vertical stack — no horizontal scroll needed.
     Removing overflow-x:auto prevents touch capture on the container.        */
  #screen-team #team-task-kanban{
    display:flex !important;
    flex-direction:column !important;
    overflow-x:visible !important;
    gap:16px;
  }
  #screen-team #team-task-kanban .kanban-col{
    min-width:0 !important;
    width:100% !important;
    flex-shrink:0;
  }

  /* Task cards: drag disabled on touch (set via JS _isTouchDevice).
     No draggable attribute on mobile so no touch-action override needed.
     Scroll is now unobstructed since no card is draggable.                   */

  /* kanban col drop-zone highlight via pointer events only — fine on desktop */
  .kanban-col.drag-over{
    pointer-events:auto;
  }
}

/* ── Billing / payment schedule empty state ──────────────────── */
@media(max-width:600px){
  #bcc-payment-schedule .card-body{ padding:12px; }
}

/* ── WBS view toggle (tree/table): stack on mobile ───────────── */
@media(max-width:640px){
  #screen-admin #view-wbs .view-header > div:last-child{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  #screen-admin #view-wbs .view-header > div:last-child .btn{
    flex:1; justify-content:center;
  }
}

/* ── Risk / Issue modal: bottom-sheet on mobile ──────────────── */
/* Risk and issue modals use the global .modal class so they
   already get the bottom-sheet treatment at ≤600px.
   This rule handles any module-specific wide modal boxes.   */
@media(max-width:600px){
  .risk-modal-content,
  .issue-modal-content,
  .stakeholder-modal-content{
    width:100% !important;
    max-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    margin:0 !important;
  }
}

/* ── Governance tab bars: horizontal scroll ──────────────────── */
@media(max-width:768px){
  /* Stakeholder 4-tab bar */
  #screen-admin .stakeholder-tabs,
  /* Generic governance tabs that may not have a class */
  #screen-admin #view-stakeholder .tab-bar,
  #screen-admin #view-risk-register .tab-bar,
  #screen-admin #view-issue-log .tab-bar,
  #screen-admin #view-lifecycle .tab-bar{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  #screen-admin .stakeholder-tabs::-webkit-scrollbar{ display:none; }
}

/* ── Admin topbar: hide governance icon labels on ≤480px ─────── */
/* Keep icon, hide text on very small screens */
@media(max-width:480px){
  #screen-admin .topbar-event-name{
    max-width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}