/* ═══════════════════════════════════════════════════════
   CyberLiveMonitor Mobile - Phone-first responsive overrides
   ═══════════════════════════════════════════════════════ */

/* ─── Viewport & Touch ─── */
@media(max-width:760px){
  html{overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{overflow-x:hidden;-webkit-overflow-scrolling:touch;width:100%}
  #header,#stats-bar,#main,#map-col,#right-col{min-width:0}
  #main{padding:0 8px 10px}

  /* ── Header ── */
  /* Clean single-row top bar: keep only site selector, the live status dot,
     refresh and the bell. Everything else moves into the ☰ overflow menu. */
  #header{padding:5px 8px;gap:5px;flex-wrap:nowrap;position:relative;overflow:visible}
  .logo-title{font-size:10px;letter-spacing:1px}
  /* De-crowd: hide the centered masthead + spacers, let the site picker fill the bar
     so the active site name is clearly visible in the top field. */
  .header-center{display:none}
  .h-spacer{display:none}
  .site-dd{flex:1;min-width:0}
  .site-selector{min-width:0;max-width:none;width:100%;font-size:12px;padding:4px 9px}
  .h-btn{padding:4px;font-size:16px;min-width:0;justify-content:center}
  .notif-bell{padding:3px 6px;font-size:14px}
  #live-status{font-size:9px;flex-shrink:0}
  /* Uniform height so every visible top-bar control matches on mobile too. */
  #header .h-btn,#header .site-selector,#header #live-status,#header .h-menu-btn{height:36px}
  /* Keep the site picker panel inside the viewport on small screens. */
  .site-dd-menu{min-width:200px;max-width:82vw}
  /* hide the moved buttons + clock; reveal the hamburger */
  .h-menu-hide{display:none!important}
  .h-menu-btn{display:flex!important}
  #live-clock,.h-sep{display:none}
  .logo-wrap{min-width:0;flex-shrink:1;overflow:hidden}
  .logo-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .h-menu{min-width:62vw;max-width:280px}

  /* ── Stats Bar: 3-column grid on mobile (6 cards → 2 rows of 3) ── */
  #stats-bar{grid-template-columns:repeat(3,1fr);gap:6px;padding:6px 8px}
  .stat-card{padding:8px 10px;border-radius:6px}
  .stat-value{font-size:18px}
  .stat-label{font-size:8px;letter-spacing:.5px}
  .stat-sub{font-size:10px;margin-top:3px}

  /* ── Map ── */
  #map-wrap{border-radius:6px}
  /* Canvas must consume single-finger touches for pan/zoom instead of
     letting the browser scroll the page. The map is short on phones
     (≤270px tall), so page scroll can start from above or below it. */
  #world-canvas{touch-action:none}
  .map-hdr{top:5px;left:8px;right:8px}
  .map-title{font-size:8px;letter-spacing:1px}
  .map-legend{gap:5px}
  .map-leg{font-size:8px}
  /* Map toolbar: single horizontal row with touch-scroll overflow. Keeps
     the toolbar to ~46px height regardless of how many buttons exist so
     the map itself retains most of its vertical space. */
  .map-zoom-btns{position:absolute;flex-direction:row;flex-wrap:nowrap;align-items:center;bottom:6px;left:6px;right:6px;gap:6px;padding:4px 6px;background:rgba(var(--bg1-rgb),.72);border:1px solid var(--bd2);border-radius:8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:20;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:calc(100% - 12px)}
  .map-zoom-btns::-webkit-scrollbar{display:none}
  .map-zoom-btn{width:38px;height:38px;min-width:38px;min-height:38px;font-size:14px;border-radius:6px;flex-shrink:0}
  #map-mode-btn{width:auto!important;min-width:48px;padding:0 10px!important;font-size:10px!important}
  .map-zoom-level{font-size:9px;margin-top:0;margin-inline-start:4px;flex-shrink:0;padding:0 4px}
  .map-target-lbl{font-size:9px;bottom:52px;left:6px;right:6px;padding:4px 8px;text-align:center;background:rgba(var(--bg1-rgb),.78);border:1px solid var(--bd2);border-radius:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t2);z-index:10;font-family:'Heebo',sans-serif;direction:ltr}
  .map-live-badge{font-size:7px;top:40px;right:6px;left:auto;transform:none;padding:2px 6px;letter-spacing:1.5px;gap:4px;border-radius:8px;width:auto}

  /* ── AI Panel ── */
  #ai-panel{margin:0}
  .ai-hdr{flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px;position:relative;padding-inline-end:44px}
  #ai-toggle-btn{position:absolute;top:8px;transform:none;inset-inline-end:8px;margin:0!important;min-width:30px;min-height:30px}
  .ai-title{font-size:12px}
  .ai-sub{font-size:9px}
  .ai-provider-badge{font-size:9px;padding:2px 6px}
  .ai-btn{font-size:10px;padding:4px 8px}
  .ai-hist-btn{font-size:9px;padding:3px 6px}

  /* ── Chart ── */
  #chart-wrap{border-radius:6px}
  .chart-hdr{flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px;padding-inline-end:44px;margin-inline-start:-14px;margin-inline-end:-14px;position:relative}
  #chart-toggle-btn{top:8px!important;transform:none!important}
  .chart-title{font-size:13px;text-align:start}
  #chart-subtitle{font-size:10px!important;text-align:start}
  #chart-range-tabs{justify-content:flex-start}
  #chart-range-tabs .ftab{padding:4px 8px;font-size:11px}
  .chart-legend{justify-content:flex-start;gap:8px}

  /* ── Log Section ── */
  /* Hard width clamp + min-width:0 on every container in the chain so the
     log-table (which has inline min-width:980px and explicit <col> widths)
     can't push the grid item wider than the viewport. Without min-width:0
     on each grid/flex descendant the min-content of the table leaks
     upwards and the whole #main column overflows on iPhone. */
  #log-section{max-width:100vw!important;width:100%!important;min-width:0!important;overflow:hidden!important;contain:layout}
  #log-body-wrap{max-width:100%;min-width:0;overflow:hidden}
  .log-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;width:100%}
  /* Force a fixed table layout with auto column widths so the inline
     min-width:980px and the <colgroup><col width=...> hints get neutralised
     and the visible 5 columns (#, time, status, IP, country) share the
     viewport evenly. */
  .log-table{table-layout:fixed!important;width:100%!important;min-width:0!important;max-width:100%!important}
  .log-table colgroup,.log-table col{display:none!important;width:auto!important}
  .log-table th,.log-table td{min-width:0!important;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-word;padding:8px 4px!important;font-size:11px}
  /* Explicit column widths as PERCENTAGES summing to exactly 100% so
     table-layout:fixed has zero ambiguity and the expand-detail row can't
     trigger a column-width recompute. Order of visible cols: # (chevron),
     time, status, IP, country. Scoped to thead/data-row only. */
  .log-table thead th:nth-child(1),.log-table tr.data-row td:nth-child(1){width:10%!important;padding:8px 2px!important}
  .log-table thead th:nth-child(2),.log-table tr.data-row td:nth-child(2){width:17%!important}
  .log-table thead th:nth-child(3),.log-table tr.data-row td:nth-child(3){width:18%!important}
  .log-table thead th:nth-child(4),.log-table tr.data-row td:nth-child(4){width:40%!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .log-table thead th:nth-child(5),.log-table tr.data-row td:nth-child(5){width:15%!important;text-align:center;padding:8px 2px!important}
  /* Compact IP cell: smaller monospace so a full IPv4 fits on one line. */
  .log-table tr.data-row td:nth-child(4){font-size:10px!important;line-height:1.3;letter-spacing:-.2px}
  .log-table tr.data-row td:nth-child(4) .copy-btn-mini,.log-table tr.data-row td:nth-child(4) .copy-btn{display:none!important}
  /* Hide the inline status help (?) button on phones — full explanation
     lives in the expanded row, the icon just steals horizontal space here. */
  .log-table .status-help-mini{display:none!important}
  /* Tighten the chevron+star cell so the # column doesn't bloat */
  .log-table .fav-star{width:18px;height:18px;font-size:11px;padding:0;margin:0}
  .log-table .expand-chevron{font-size:12px}
  /* Expanded detail row content must wrap, not push the table wider.
     Keep the row as a real table-row so it positions correctly under the
     clicked data-row, but isolate its internal layout from the table's
     fixed column-width calculation with contain:layout. The td also forces
     width:0 + max-width:none so its intrinsic content can never push the
     table wider; the inner .ep div handles its own width. */
  .log-table tr.expand-detail td{padding:0!important;white-space:normal;overflow:visible;width:0;max-width:none;contain:layout}
  .log-table tr.expand-detail td > *{max-width:100vw;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .log-table tr.expand-detail .ep{width:100%;box-sizing:border-box}

  /* Log header: column layout with grouped wrapped button row at the end.
     Title on top, filter tabs as a horizontal scroll strip, search full-width,
     then all action buttons (calendar/hour/help/catalog/CSV/PDF/pause) flow
     in a single wrapped row instead of stacking one-per-line. */
  .log-hdr{flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px;max-width:100%}
  .log-title{font-size:13px;margin-inline-end:0;text-align:start;white-space:normal;flex-wrap:wrap}
  .log-total-badge{font-size:13px;padding:1px 8px;margin-inline-start:4px}
  #log-subtitle{font-size:9px!important;text-align:start;line-height:1.35}

  /* Break display:contents so the button group becomes a real wrapping flex row (shown only when panel is open) */
  #log-hdr-btns{flex-wrap:wrap;gap:6px;align-items:center;width:100%}

  /* Filter tabs: horizontal scroll strip (9 tabs — never fit in one row on phone) */
  .filter-tabs{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px;flex:1 0 100%;max-width:100%}
  .filter-tabs::-webkit-scrollbar{display:none}
  .ftab{padding:6px 11px;font-size:11px;flex-shrink:0;min-height:32px}

  /* Search: full width on its own row */
  .log-search{width:100%;max-width:none;flex:1 0 100%;height:38px}

  /* Calendar / hour / help / catalog buttons: compact wrapped row.
     Hide English/long labels, keep just icons. Export trio stays grouped. */
  #cal-wrap,#hour-chart-btn,#hour-filter-clear,#log-date-clear,#status-help-btn,#atk-cat-btn{flex:0 0 auto}
  #cal-btn,#hour-chart-btn{padding:6px 10px!important;font-size:12px!important;height:36px!important}
  #cal-btn-text,#hour-btn-text{display:none}
  .status-help-btn .hide-sm,.atk-cat-btn .hide-sm{display:none!important}
  .status-help-btn,.atk-cat-btn{padding:6px 9px!important;min-height:36px;font-size:11px!important}
  .ai-hist-btn{padding:5px 9px;font-size:11px;min-height:36px}
  #log-pause-btn{min-width:36px;height:36px;margin-inline-start:4px!important}

  /* Collapse/expand chevron stays pinned to the top right of the header */
  #log-toggle-btn{position:absolute;top:8px;transform:none;inset-inline-end:8px;margin:0!important;min-width:30px;min-height:30px}
  .log-hdr{position:relative;padding-inline-end:44px}

  /* Advanced filters: 2-column grid instead of a 6-row vertical stack.
     Label + flag dropdown span full width at the top, then 4 selects in 2x2. */
  #adv-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px;align-items:center}
  .adv-filter-label{grid-column:1 / -1;font-size:11px;padding:0;margin-bottom:-2px}
  .flag-dd-wrap{grid-column:1 / -1;width:100%}
  .flag-dd-trigger{width:100%;justify-content:space-between}
  .adv-select{width:100%;min-width:0;min-height:38px}
  #filter-chips{grid-column:1 / -1;width:100%;display:flex;flex-wrap:wrap;gap:4px}

  /* Pagination: nav row first (prev-arrow · page jump-select · next-arrow),
     then a meta row (record count · rows-per-page select).
     The numbered buttons are replaced by the jump-select in JS on mobile,
     and .pi-page ("page X of Y") is hidden — the jump-select shows it.
     !important on font sizes: the dyn-fsize <style> sets them !important. */
  #pagination-wrap{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;padding:12px 10px}
  .page-btns{order:1;width:100%;justify-content:center;flex-wrap:nowrap;gap:12px}
  .page-info-text{order:2;text-align:center;font-size:12px}
  #pagination-wrap>span{order:3}
  .pi-page{display:none}
  .page-btns .page-btn{min-width:44px;height:44px;border-radius:9px;font-size:18px!important}
  .page-jump{font-size:14px;gap:8px}
  .page-jump .page-jump-sel{min-height:44px;min-width:64px;font-size:16px!important;border-radius:9px}
  .page-size-sel{min-height:36px;padding-top:0;padding-bottom:0}

  /* ── Right column panels ── */
  .panel{padding:10px 10px}
  .panel-title{font-size:9px;letter-spacing:1px;margin-bottom:8px}

  /* ── Regional table ── */
  .reg-table{font-size:11px}
  .reg-table th,.reg-table td{padding:6px 5px}

  /* ── Feed ── */
  .feed-item{font-size:11px;padding:4px 5px;gap:4px}
  .feed-ip{min-width:85px;font-size:10px}
  .feed-country{font-size:10px}
  .feed-time{font-size:9px}

  /* ── Gauge ── */
  .gauge-pct{font-size:18px}
  .gauge-label{font-size:8px}
  .gs-val{font-size:11px}
  .gs-lbl{font-size:8px}

  /* ── Insights bar ── */
  .ins-card{padding:8px}
  .ins-icon{width:28px;height:28px;font-size:16px}
  .ins-val{font-size:11px}
  .ins-lbl{font-size:8px}

  /* ── USERS ONLINE inline panel ── */
  /* Header: title row + stats full-width row below, toggle pinned right */
  .lu-inline-hdr{padding:8px 10px;padding-inline-end:44px;position:relative;gap:6px;flex-wrap:wrap;align-items:center}
  .lu-inline-hdr > div:first-child{flex:1 1 auto;min-width:0}
  #lu-inline-toggle{position:absolute;top:8px;transform:none;inset-inline-end:8px;margin:0!important;min-width:30px;min-height:30px}
  .lu-inline-tools{flex-wrap:nowrap;gap:4px;flex:0 0 auto;order:2;margin-top:0}
  .lu-inline-hdr > div:nth-child(2){flex:1 1 100%;order:3}
  .lu-inline-title{font-size:11px;letter-spacing:1px}
  .lu-inline-hdr > div:first-child > div:last-child{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .lu-inline-search{width:100%;max-width:none;flex:1 1 auto;min-height:34px;padding:6px 10px!important;font-size:13px!important}
  .lu-inline-btn{width:34px!important;height:34px!important;min-width:34px;min-height:34px}

  /* Body: reasonable height for phone viewport */
  .lu-inline-body{max-height:60vh}

  /* Stats bar inside panel body: 3-column grid */
  .lu-inline-body .lu-stats,#lu-stats-bar{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0;padding:0;border-bottom:1px solid var(--bd1)}
  .lu-stat{padding:8px 6px;min-width:0;border-inline-end:1px solid var(--bd1);border-bottom:1px solid var(--bd1)}
  .lu-stat-val{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lu-stat-lbl{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Header inline-count: single row flex — all stats in one line */
  .lu-inline-count{display:flex!important;flex-wrap:nowrap!important;border:1px solid var(--bd1);border-radius:4px;overflow:hidden;width:auto;background:none}
  .lu-inline-count .lu-stat{flex:1 1 0;min-width:0;padding:3px 4px;border-inline-end:1px solid var(--bd1);border-bottom:none;background:none}
  .lu-inline-count .lu-stat:last-child{border-inline-end:none}
  .lu-inline-count .lu-stat-val{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lu-inline-count .lu-stat-lbl{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lu-inline-panel.open .lu-inline-count{display:none!important}

  /* Table: hide non-essential columns on phone.
     Columns order: 1=#, 2=Status, 3=IP, 4=Country, 5=Device, 6=Browser,
                    7=Type, 8=Landing, 9=Req, 10=Session, 11=Seen.
     Keep on phone: 1 (#), 2 (Status), 3 (IP), 4 (Country), 9 (Req), 11 (Seen). */
  .lu-inline-body .lu-table th:nth-child(5),.lu-inline-body .lu-table td:nth-child(5),
  .lu-inline-body .lu-table th:nth-child(6),.lu-inline-body .lu-table td:nth-child(6),
  .lu-inline-body .lu-table th:nth-child(7),.lu-inline-body .lu-table td:nth-child(7),
  .lu-inline-body .lu-table th:nth-child(8),.lu-inline-body .lu-table td:nth-child(8),
  .lu-inline-body .lu-table th:nth-child(10),.lu-inline-body .lu-table td:nth-child(10),
  #live-users-modal .lu-table th:nth-child(5),#live-users-modal .lu-table td:nth-child(5),
  #live-users-modal .lu-table th:nth-child(6),#live-users-modal .lu-table td:nth-child(6),
  #live-users-modal .lu-table th:nth-child(7),#live-users-modal .lu-table td:nth-child(7),
  #live-users-modal .lu-table th:nth-child(8),#live-users-modal .lu-table td:nth-child(8),
  #live-users-modal .lu-table th:nth-child(10),#live-users-modal .lu-table td:nth-child(10){display:none}

  /* Table padding + sizing on phone */
  .lu-inline-body > div[style*="max-height"]{max-height:none!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lu-table{min-width:0;width:100%;table-layout:fixed}
  .lu-table th,.lu-table td{padding:8px 6px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lu-table th:nth-child(3),.lu-table td:nth-child(3){max-width:120px}
  .lu-table th:nth-child(4),.lu-table td:nth-child(4){max-width:70px}
  .lu-table tr td:first-child{width:28px;font-size:10px}
  .lu-ip{font-size:11px;direction:ltr}
  .lu-badge{font-size:9px;padding:1px 5px}

  /* Expanded detail row: give it breathing space on phone */
  .lu-detail-row td{padding:8px 4px!important}
  .lu-tl-item{font-size:11px;gap:4px;padding:4px 0}
  .lu-tl-url{word-break:break-all;max-width:100%}

  /* ── Live Users modal (fullscreen) ── */
  #live-users-overlay{padding:0!important}
  #live-users-modal{width:100%!important;height:100%!important;max-height:100%!important;border-radius:0;max-width:none}
  .lu-hdr{flex-direction:column;gap:5px;padding:8px 10px}
  .lu-hdr > div{flex-wrap:wrap;gap:5px}
  .lu-title{font-size:13px!important;letter-spacing:1px}
  .lu-count{font-size:17px;padding:2px 10px;min-width:34px}
  .lu-timer{font-size:11px;padding:2px 7px}
  .lu-refresh-badge{font-size:9px;padding:2px 7px;letter-spacing:.5px}
  .lu-toggle-btn{width:30px;height:30px;font-size:14px}
  .lu-close-btn{width:30px;height:30px;font-size:14px}
  .lu-search{flex:1 1 100%;width:100%}
  .lu-stat{padding:5px 4px;min-width:0}
  #live-users-modal .lu-stat-val{font-size:15px}
  #live-users-modal .lu-stat-lbl{font-size:9px}
  #live-users-modal .lu-table th{padding:8px 8px;font-size:10px;letter-spacing:.5px}
  #live-users-modal .lu-table td{padding:8px 8px;font-size:12px}
  #live-users-modal .lu-ip{font-size:12px}
  #live-users-modal .lu-reqs{font-size:13px}
  #live-users-modal .lu-session{font-size:11px}
  #live-users-modal .lu-country{font-size:12px}

  /* ── Modals general ── */
  .modal{border-radius:8px;margin:8px}
  .modal-hdr{padding:10px 12px}
  .modal-body{padding:10px 12px}
  .modal-footer{padding:8px 12px;gap:6px}
  .form-grid{grid-template-columns:1fr!important;gap:8px}
  .form-group.full{grid-column:1}
  .form-input,.form-select,.form-textarea{font-size:14px;padding:8px 10px}
  .form-label{font-size:12px}
  .btn-primary,.btn-secondary{font-size:13px;padding:8px 14px;width:100%}

  /* ── Settings drawer ── */
  .dr-body{padding:10px}
  .st-sec{padding:10px}
  .st-row:not(.flex-sb){flex-direction:column;gap:6px;align-items:stretch}
  .st-row.flex-sb{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
  .st-label{font-size:12px}
  .st-select,.st-input,.model-select{font-size:13px;width:100%}
  .range-row{width:100%}
  .range-row input[type="range"]{width:100%}
  .key-row{flex-direction:column;gap:6px}
  .key-row .st-input{width:100%}
  .ai-key-block{padding:10px}
  .ai-provider-tabs{width:100%}
  .ai-prov-btn{flex:1;font-size:12px}
  .ml-grid{grid-template-columns:1fr!important}
  .map-label-btns{flex-wrap:wrap}
  .ml-btn{font-size:10px;padding:4px 6px}

  /* ── Notifications ── */
  .notif{font-size:12px;padding:8px 12px;max-width:calc(100vw - 16px)}

  /* ── Confirm dialog ── */
  .confirm-box{max-width:calc(100vw - 24px);min-width:auto}
  .confirm-box .btn-primary,.confirm-box .btn-secondary{min-width:0;flex:1}

  /* ── Help tooltips - show below and full-width ── */
  .st-help:hover::after{right:auto;left:0;min-width:200px;max-width:calc(100vw - 60px)}

  /* ── AI History modal (floating) ── */
  #ai-hist-modal{left:2%!important;top:2%!important;width:96%!important;height:94%!important;border-radius:8px;min-width:auto!important}

  /* ── DevLog panel ── */
  #devlog-panel{right:0!important;left:0!important;bottom:0!important;width:100%!important;height:50vh!important;border-radius:12px 12px 0 0;min-width:auto!important}

  /* ── Stat detail popups ── */
  #insight-popup{left:4px!important;right:4px!important;width:auto!important}

  /* ── Expanded row details ──
     Phone view: collapse the 3-column desktop grid to a single column,
     shrink padding/typography, and let cells wrap so content doesn't get
     squeezed or clipped inside the LIVE LOG row. */
  .log-table tr.expand-detail td{padding:0!important}
  .ep{padding:10px 10px!important;max-height:75vh!important;border-inline-start-width:3px!important;font-size:12px;position:relative}
  /* Stack head vertically: icon row, full-width title, severity row.
     Close button is absolutely pinned so the title row gets the entire
     row width instead of competing with it for space. */
  .ep-head{display:block!important;padding:10px 10px;padding-inline-end:42px;margin-bottom:10px;position:relative}
  .ep-head > button:first-child{position:absolute!important;top:8px;inset-inline-end:8px;margin:0!important}
  .ep-head-icon{font-size:22px;display:inline-block;vertical-align:middle;margin-inline-end:8px}
  .ep-head-text{display:block;width:100%;min-width:0;margin-top:6px}
  .ep-type-name{font-size:14px;margin-bottom:3px;white-space:normal;word-break:break-word;line-height:1.35}
  .ep-type-sub{font-size:11px;line-height:1.5;white-space:normal;word-break:break-word}
  .ep-head-right{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px;width:100%}
  .ep-severity{font-size:10px;padding:3px 10px}
  .ep-occ-badge{font-size:11px;padding:3px 9px}
  .ep-grid{grid-template-columns:1fr!important;gap:8px}
  .ep-card{padding:0;overflow:hidden}
  .ep-card-title{font-size:12px;padding:8px 10px}
  .ep-card-body{padding:8px 10px;gap:6px}
  .ep-row{flex-wrap:wrap;gap:4px;padding:5px 0;align-items:flex-start}
  .ep-lbl{font-size:11px;flex:0 0 auto}
  .ep-val{font-size:12px;max-width:100%!important;min-width:0;text-align:end;word-break:break-word;overflow-wrap:anywhere;white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 auto}
  .ep-val.mono{font-size:11px}
  .ep-val.wrap{font-size:12px}
  .ep-tips{padding:8px 10px;gap:4px}
  .ep-tip-item{font-size:11px;padding:6px 8px;line-height:1.55}

  /* ── Scrollbar ── */
  ::-webkit-scrollbar{width:3px}
  ::-webkit-scrollbar-thumb{background:rgba(var(--hi-rgb),.1)}
}

/* ─── Extra small phones (< 380px) ─── */
@media(max-width:380px){
  #stats-bar{grid-template-columns:1fr 1fr;gap:4px;padding:4px 6px}
  .stat-card{padding:7px 8px}
  .stat-value{font-size:13px}
  .stat-label{font-size:7px}
  .stat-sub{font-size:9px}
  #map-wrap{height:180px}
  .logo-title{display:none}
  .h-btn{padding:3px;font-size:15px;justify-content:center}
  .ftab{padding:4px 7px;font-size:10px}
  .mob-nav-btn{padding:3px 8px;font-size:9px}
  .mob-nav-btn .nav-icon{font-size:17px}
  /* Log header: even tighter on tiny screens */
  .log-title{font-size:12px}
  #log-subtitle{font-size:8px!important}
  .log-hdr{padding:6px 8px;padding-inline-end:40px;gap:6px}

  /* ONLINE USERS: drop the leading # column and Seen on tiny phones to give
     IP and Country more breathing room (final columns: Status, IP, Country, Req). */
  .lu-inline-body .lu-table th:nth-child(1),.lu-inline-body .lu-table td:nth-child(1),
  .lu-inline-body .lu-table th:nth-child(11),.lu-inline-body .lu-table td:nth-child(11),
  #live-users-modal .lu-table th:nth-child(1),#live-users-modal .lu-table td:nth-child(1),
  #live-users-modal .lu-table th:nth-child(11),#live-users-modal .lu-table td:nth-child(11){display:none}
  .lu-inline-body .lu-stats,#lu-stats-bar{grid-template-columns:repeat(2,1fr)}
  .lu-inline-hdr > div:first-child > div:last-child{display:none}
  .lu-inline-title{font-size:10px}
  .lu-inline-count .lu-stat-val{font-size:11px}
  .lu-inline-count .lu-stat-lbl{font-size:7px}
  /* Advanced filters: fall back to single column — 2 cols too cramped for dropdowns */
  #adv-filters{grid-template-columns:1fr;padding:6px 8px}
  .ai-hist-btn{padding:4px 7px;font-size:10px}
  #cal-btn,#hour-chart-btn,.status-help-btn,.atk-cat-btn{padding:5px 8px!important;font-size:11px!important;height:34px!important;min-height:34px}
  #log-pause-btn{min-width:34px;height:34px}

  /* Expanded row: even tighter typography on tiny screens */
  .ep{padding:8px 8px!important}
  .ep-head{padding:8px;gap:6px}
  .ep-head-icon{font-size:20px}
  .ep-type-name{font-size:13px}
  .ep-type-sub{font-size:10px}
  .ep-card-title{font-size:11px;padding:7px 9px}
  .ep-card-body{padding:7px 9px;gap:5px}
  .ep-lbl{font-size:10px}
  .ep-val,.ep-val.wrap{font-size:11px}
  .ep-val.mono{font-size:10px}
}

/* ─── Landscape phone ─── */
@media(max-height:500px) and (orientation:landscape){
  #map-wrap{height:200px}
  #stats-bar{grid-template-columns:repeat(4,1fr);gap:4px}
  .stat-card{padding:6px 8px}
  .stat-value{font-size:14px}
  #mobile-nav{display:none!important}
  body{padding-bottom:0!important}
}

/* ─── Touch improvements ─── */
@media(pointer:coarse){
  .ftab,.page-btn,.ml-btn,.ai-btn,.ai-hist-btn,.ai-prov-btn,.h-btn,.mob-nav-btn,.lu-toggle-btn,
  .map-zoom-btn,.dl-btn,.dl-filter{min-height:36px;min-width:36px}
  .log-table tr.data-row td{padding:10px 6px}
  .st-help{width:20px;height:20px;font-size:10px}
}

/* ─── Safe area (notch) support ─── */
@supports(padding:env(safe-area-inset-bottom)){
  @media(max-width:760px){
    #mobile-nav .mob-nav-inner{padding-bottom:max(6px,env(safe-area-inset-bottom))}
    body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
    #header{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  }
}

/* ═══════════════════════════════════════════════════════
   TABLET (761-1100px) — iPad portrait, landscape and
   mid-size tablets. Between full desktop and phone-first
   layouts. Main grid is already 1-col at ≤1100 (layout.css),
   so here we mostly tune spacing, heights and touch targets.
   ═══════════════════════════════════════════════════════ */
@media(min-width:761px) and (max-width:1100px){
  /* ── Layout rhythm ── */
  #main,#second-row{padding:0 14px 14px;gap:14px}
  #insights-bar{padding:0 14px 14px;gap:12px;grid-template-columns:repeat(6,1fr)}
  #stats-bar{grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 14px}

  /* ── Right column: 2 cols on wide tablet, 1 col on narrow ── */
  #right-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

  /* ── Map: taller than mobile, shorter than desktop ── */
  #map-wrap{height:440px}

  /* ── Header spacing on tablet ── */
  #header{padding:8px 14px;gap:10px}
  .logo-title{font-size:12px}
  .site-selector{max-width:180px}

  /* ── Log table: keep desktop density but allow x-scroll if overflow ── */
  #log-section{max-width:100%;overflow:hidden}
  .log-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .log-table th{padding:8px 7px;font-size:12px}
  .log-table td{padding:var(--log-row-pad,8px) 7px;font-size:12px}
  .log-hdr{gap:8px;padding:10px 12px;flex-wrap:wrap}
  .log-search{width:160px}
  .filter-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-tabs::-webkit-scrollbar{display:none}

  /* ── Expand-detail grid: 2 cols on tablet (3 too cramped) ── */
  .ep-grid{grid-template-columns:1fr 1fr;gap:10px}
  .ep-card{overflow:hidden}
  .ep-card-body{padding:10px 12px}

  /* ── Settings drawer: fixed side drawer instead of full-screen ── */
  #settings-drawer{width:420px;max-width:92vw}
  [dir=rtl] #settings-drawer{right:-420px}
  [dir=ltr] #settings-drawer{left:-420px}

  /* ── Modals: readable width, not full-screen ── */
  .modal{max-width:min(760px,calc(100vw - 32px))}
  #report-modal{max-width:min(900px,calc(100vw - 32px))}
  .drag-popup{max-width:calc(100vw - 32px)}

  /* ── AI history / DevLog ── */
  #ai-hist-modal{left:5%!important;top:5%!important;width:90%!important;height:88%!important}
  #devlog-panel{width:min(640px,95vw)!important}

  /* ── Floating popups near click ── */
  #regional-detail,#insight-popup,#map-tooltip,#server-tooltip,#viewer-tooltip{max-width:calc(100vw - 32px)}

  /* ── Smart Learning — full-screen on mobile ── */
  #smart-learning{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 80px)!important;
    min-width:0!important;
    min-height:0!important;
    left:8px!important;
    top:8px!important;
    border-radius:10px
  }
  #sl-handle{padding:10px 12px;gap:8px;cursor:default}
  #sl-summary{font-size:10px;white-space:normal!important;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #sl-body{padding:12px 14px;height:calc(100% - 50px)}

  /* ── Map users widget ── */
  #map-users-widget{max-width:calc(100% - 20px);max-height:calc(100% - 20px)}
}

/* ── Narrow tablet portrait (iPad portrait 768-900) ── */
@media(min-width:761px) and (max-width:900px){
  #stats-bar{grid-template-columns:repeat(3,1fr)}
  #insights-bar{grid-template-columns:repeat(3,1fr)}
  #right-col{grid-template-columns:1fr}
  #map-wrap{height:380px}
  .log-table th{padding:7px 6px;font-size:11px}
  .log-table td{padding:var(--log-row-pad,7px) 6px;font-size:11px}
  .ep-grid{grid-template-columns:1fr}
}

/* ── Tablet touch targets — larger than mobile's 36px min ── */
@media(min-width:761px) and (max-width:1100px) and (pointer:coarse){
  .ftab,.page-btn,.h-btn,.ai-btn,.ai-hist-btn,.ai-prov-btn,.ml-btn,
  .lu-toggle-btn,.map-zoom-btn,.dl-btn,.dl-filter{min-height:40px;min-width:40px}
  .log-table tr.data-row td{padding:12px 8px}
  .adv-select,.st-select,.st-input{min-height:40px}
  .st-help{width:22px;height:22px;font-size:11px}
  /* Bigger tap slop on small icon buttons */
  .panel-toggle,.close-btn,.exp-btn{min-width:32px;min-height:32px}
}

/* ── Prevent iOS auto-zoom on focus: inputs must be ≥16px ── */
@media(max-width:1100px){
  input[type=text],input[type=password],input[type=email],input[type=number],
  input[type=search],textarea,select,.form-input,.form-select,.form-textarea,
  .st-input,.st-select,.pw-input,.log-search,.adv-select{font-size:16px}
}

/* ═══ PASSWORD & RESET DIALOGS MOBILE ═══ */
@media(max-width:760px){
  .pw-box{padding:24px 20px;max-width:calc(100vw - 24px)}
  .pw-input{font-size:16px;letter-spacing:3px;padding:12px 40px 12px 12px}
  .rs-box{padding:28px 20px;max-width:calc(100vw - 24px)}
}

/* ═══ SETUP WIZARD MOBILE ═══ */
@media(max-width:760px){
  .wiz-container{padding:10px;max-height:100vh;overflow-y:auto}
  .wiz-header{padding:20px 16px 14px}
  .wiz-shield{font-size:36px}
  .wiz-shield-ring{inset:-12px}.wiz-ring-2{inset:-22px}
  .wiz-title{font-size:20px;letter-spacing:2px}
  .wiz-pro{font-size:16px}
  .wiz-tagline{gap:8px}.wiz-tag-text{font-size:7px;letter-spacing:2px}.wiz-tag-line-l,.wiz-tag-line-r{flex:0 0 24px}
  .wiz-body{padding:16px 14px}
  .wiz-heading{font-size:17px}
  .wiz-desc{font-size:12px}
  .wiz-url-wrap{flex-wrap:wrap}
  .wiz-url-input{font-size:14px;padding:10px 6px}
  .wiz-detect-btn{width:100%;text-align:center;margin-top:2px}
  .wiz-row{flex-direction:column;gap:10px}
  .wiz-actions{flex-direction:column-reverse}
  .wiz-save-btn{width:100%;justify-content:center}
  .wiz-back-btn{width:100%;text-align:center}
  .wiz-footer-stats{gap:12px}.wiz-ft-item{font-size:7px}
  .wiz-server-row{grid-template-columns:1fr}
  .wiz-token-input{min-width:0;font-size:10px !important}
  .wiz-tree{font-size:11px}
  .wiz-verify-item{flex-wrap:wrap;font-size:11px}
  .wiz-confirm-text{font-size:12px}

  /* ── Online Users Widget (.muw) — bottom sheet on phones ──
     Default desktop style is a 280px draggable card pinned inside #map-wrap.
     On phones that's tiny, clipped, and unusable. Convert it to a fixed
     bottom sheet that escapes #map-wrap, fills the width, and shows large
     touch-friendly rows. Inline JS styles (top/left/right) get overridden
     with !important so the widget can't drift outside the viewport. */
  .muw{
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    border-radius:18px 18px 0 0!important;
    max-height:78vh!important;min-height:0!important;
    resize:none!important;
    opacity:1!important;
    z-index:9998!important;
    box-shadow:0 -12px 40px rgba(0,0,0,.7),0 0 1px rgba(var(--green-rgb),.4)!important;
  }
  .muw-handle{padding:14px 16px;cursor:default!important;gap:10px}
  .muw-handle:active{cursor:default!important}
  .muw-pulse{width:10px;height:10px}
  .muw-title{font-size:13px;letter-spacing:2.5px}
  .muw-total{font-size:26px}
  .muw-close{width:36px;height:36px;font-size:16px;border-radius:8px}
  .muw-body{padding:12px 14px 16px}
  .muw-grid{gap:8px;margin-bottom:12px}
  .muw-stat{padding:12px 6px;border-radius:10px}
  .muw-stat-val{font-size:22px}
  .muw-stat-lbl{font-size:11px;margin-top:4px}
  .muw-list-title{font-size:10px;margin-bottom:8px}
  .muw-list{gap:5px}
  .muw-user{padding:10px 10px;gap:8px;border-radius:10px}
  .muw-user-flag{width:22px;height:16px}
  .muw-user-ip{font-size:13px}
  .muw-user-pages{font-size:11px;padding:3px 8px;min-width:26px}
  .muw-user-type{font-size:14px}
  .muw-user-status,.muw-user-role{font-size:10px;padding:2px 7px}
  .muw-footer{padding:9px 12px;font-size:10px}
  .muw-empty{padding:24px 12px;font-size:13px}

  /* ── Pseudo-fullscreen for the map (iOS-safe fallback) ──
     iOS Safari on iPhone has no Fullscreen API. We instead lift #map-wrap
     out of the document flow and stretch it to the viewport. The existing
     ✕ in the toolbar exits this mode. */
  body.map-pseudo-fs{overflow:hidden!important;position:fixed!important;left:0;right:0;top:0;bottom:0;width:100%}
  #map-wrap.pseudo-fs{
    position:fixed!important;
    inset:0!important;
    left:0!important;right:0!important;top:0!important;bottom:0!important;
    width:100vw!important;height:100vh!important;height:100dvh!important;
    max-width:none!important;max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    z-index:99999!important;
    background:#020a14!important;
  }
  #map-wrap.pseudo-fs #world-canvas{width:100%!important;height:100%!important}
  /* Ensure the toolbar (with the ✕ exit button) stays reachable above the
     iOS home-indicator safe area when in pseudo-fullscreen. */
  #map-wrap.pseudo-fs .map-zoom-btns{bottom:max(8px,env(safe-area-inset-bottom))!important}
}

/* Pseudo-fullscreen also needs to work on tablets / desktop fallback path,
   so its core rules live outside the 760px breakpoint too. */
body.map-pseudo-fs{overflow:hidden}
#map-wrap.pseudo-fs{
  position:fixed;
  inset:0;
  width:100vw;height:100vh;
  max-width:none;max-height:none;
  margin:0;border-radius:0;
  z-index:99999;
  background:#020a14;
}
#map-wrap.pseudo-fs #world-canvas{width:100%;height:100%}