/*
 * ParkKeeper mobile / PWA overrides.
 *
 * Loads AFTER the monolith's inline <style>, so these rules win.
 * The desktop layout is untouched at >=900px. Below that, the sidebar
 * becomes an off-canvas drawer, a hamburger appears in the topbar,
 * and a sticky bottom nav surfaces the four most-used destinations.
 *
 * Tap targets are 44px+. Inputs use 16px font-size to prevent iOS zoom.
 */

/* ---------- safe-area + PWA chrome ---------- */
:root {
  --pk-mobile-bottom-nav: 60px;
  --pk-safe-top: env(safe-area-inset-top, 0px);
  --pk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pk-safe-left: env(safe-area-inset-left, 0px);
  --pk-safe-right: env(safe-area-inset-right, 0px);
}

/* Standalone (installed PWA) — paint behind the status bar */
@media (display-mode: standalone) {
  body { padding-top: var(--pk-safe-top); padding-left: var(--pk-safe-left); padding-right: var(--pk-safe-right); }
}

/* Hide the hamburger + bottom nav on desktop; they only exist for mobile */
.pk-hamburger,
.pk-mobile-bottomnav,
.pk-drawer-scrim { display: none; }

/* ============================================================ */
/* TABLET / NARROW DESKTOP (<=900px)                              */
/* ============================================================ */
@media (max-width: 900px) {
  /* The monolith's existing 760px rule narrows the sidebar to an icon
     strip — we want it gone entirely on phones, but for tablets in
     900–760 range keep it narrow. The existing rule handles 760-.   */
}

/* ============================================================ */
/* PHONE (<=760px) — override the monolith's 60px icon strip      */
/* and turn the sidebar into a drawer.                             */
/* ============================================================ */
@media (max-width: 760px) {
  html, body {
    font-size: 15px;
    /* Kill horizontal scroll — content must never exceed the viewport */
    max-width: 100vw;
    overflow-x: hidden !important;
  }
  /* Defensive: anything outside flow that grew the page horizontally */
  * { max-width: 100% !important; }
  /* …except elements that intentionally use horizontal scroll */
  .toolbar, .scroll-x, .table-wrap, table, pre, code, .dash-grid,
  .pk-mobile-bottomnav, .sidebar { max-width: none !important; }

  /* The monolith uses a flex row: aside.sidebar + main.main.
     Phone layout: main fills the screen, sidebar slides in from left. */
  body { display: block; }
  /* The monolith wraps everything in <div class="app"> which is display:flex.
     With the sidebar position:fixed out of flow, main needs to fill .app. */
  .app, .app-shell, .layout, .app-layout {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Full-screen drawer — covers everything when open. No more floating X */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2,.7,.2,1);
    z-index: 1050 !important;
    padding-top: calc(var(--pk-safe-top) + 56px);
    padding-bottom: calc(var(--pk-safe-bottom) + 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.pk-drawer-open .sidebar { transform: translateX(0) !important; }
  /* Undo the desktop "icon only" rule from the inline @media (max-width:760px) */
  .sidebar-header,
  .org-card,
  .sidebar-footer,
  .nav-section { display: block !important; }
  .nav-item { justify-content: flex-start !important; padding: 12px 16px !important; min-height: 44px; }
  .nav-item span { display: inline !important; }

  /* Scrim no longer needed — drawer covers full screen. Keep selector so JS
     doesn't blow up if the element exists. */
  .pk-drawer-scrim { display: none !important; }
  @keyframes pk-fade { from { opacity: 0 } to { opacity: 1 } }

  /* Main fills the screen */
  .main {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  /* Topbar: compact, with hamburger on the left */
  .topbar {
    padding: 6px 10px !important;
    padding-top: calc(6px + var(--pk-safe-top)) !important;
    gap: 6px !important;
    flex-wrap: nowrap;
    min-height: 48px;
  }
  .topbar-left {
    flex: 1; min-width: 0;
    overflow: hidden;
    gap: 6px;
    font-size: 11px;
  }
  .topbar-left #userEmail {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 40vw;
  }
  .topbar-right { gap: 4px !important; }
  .topbar-right .btn { padding: 6px !important; min-width: 36px !important; min-height: 36px !important; justify-content: center; }
  .topbar-right .btn span { display: none; }   /* show icon only */
  .topbar .auth-pill { display: none !important; }   /* save space */
  .topbar .role-pill { font-size: 9px; padding: 2px 6px; }

  .pk-hamburger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    flex-shrink: 0;
    position: relative;
    z-index: 1100;
    margin-right: 2px;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s;
  }
  .pk-hamburger:active { background: var(--surface-2); }
  body.pk-drawer-open .pk-hamburger {
    /* Drawer is full-screen — close button sits in the top-right corner
       of the drawer, the standard mobile pattern. */
    position: fixed;
    top: calc(var(--pk-safe-top) + 10px);
    right: 12px;
    left: auto;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
    box-shadow: none;
  }
  body.pk-drawer-open .pk-hamburger:active { background: rgba(255,255,255,0.20); }
  .pk-hamburger svg { width: 22px; height: 22px; }
  .pk-hamburger-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 99px;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
  }
  .pk-hamburger-badge.is-on { display: inline-flex; }

  /* Content area: fills remaining height, leaves room for bottom nav */
  .content {
    padding: 10px 12px calc(var(--pk-mobile-bottom-nav) + var(--pk-safe-bottom) + 12px) 12px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Page header — stack title and actions, compact */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 10px !important;
    gap: 8px !important;
  }
  .page-title h1 { font-size: 18px !important; }
  .page-title p  { font-size: 12px !important; margin-top: 2px !important; }
  .page-header > div[style*="display:flex"],
  .page-header > div[style*="display: flex"] {
    flex-wrap: wrap; gap: 6px !important;
  }
  .page-header .btn { flex: 1 1 auto; min-height: 38px !important; padding: 7px 10px !important; font-size: 13px; justify-content: center; }
  .page-header .btn .icon { font-size: 14px; }

  /* ---------- Toolbars ----------
     Row 1: full-width search input.
     Row 2: a horizontal-scrolling strip of filter dropdowns + action buttons.
     mobile.js wraps every non-search child of .toolbar into a .pk-filter-row
     div so we can scroll them as one unit. A right-edge fade hints "more →". */
  .toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
    position: relative;
    overflow: visible;
  }
  .toolbar .search-wrap {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto;
  }
  .toolbar .search-wrap input {
    width: 100% !important;
    font-size: 15px !important;
    padding: 9px 12px 9px 36px !important;
  }
  .toolbar .search-wrap .icon { left: 12px; font-size: 16px; }

  /* The filter strip — horizontal, scrollable, no wrap */
  .toolbar .pk-filter-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 24px;  /* room for the fade gradient on the right */
    margin: 0;
    width: 100%;
  }
  .toolbar .pk-filter-row::-webkit-scrollbar { display: none; }
  .toolbar .pk-filter-row > * {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  /* Filter pills — selects + buttons sit compact */
  .toolbar .filter-select,
  .toolbar select,
  .toolbar .btn,
  .pk-filter-row .filter-select,
  .pk-filter-row select,
  .pk-filter-row .btn {
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 7px 28px 7px 10px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .pk-filter-row .btn { padding: 7px 12px !important; }

  /* Right-edge fade "more →" indicator, anchored over the toolbar */
  .toolbar::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 10px;
    height: 38px;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface) 80%);
    opacity: 0;
    transition: opacity .15s;
    border-radius: 0 8px 8px 0;
  }
  .toolbar.has-overflow::after { opacity: 1; }
  /* Tiny chevron on top of the fade */
  .toolbar.has-overflow::before {
    content: "›";
    position: absolute;
    right: 8px;
    bottom: 16px;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
    transition: opacity .15s;
  }

  /* Form inputs: 16px stops iOS from zooming when focused */
  input[type="text"], input[type="email"], input[type="search"],
  input[type="tel"], input[type="number"], input[type="password"],
  select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  .search-wrap input { padding-left: 36px; }

  /* Buttons: comfortable tap area without being huge */
  .btn { min-height: 38px !important; padding: 7px 12px !important; font-size: 13px; }
  .btn-sm { min-height: 34px !important; padding: 6px 10px !important; font-size: 12px; }
  .btn .icon, .btn-sm .icon { font-size: 14px; }

  /* Grids — single column */
  .field-grid,
  .lj-board,
  .sk-editor,
  .an-grid,
  [class*="grid-2"],
  [class*="grid-3"] { grid-template-columns: 1fr !important; }

  /* Cards: tighter padding for phone scale */
  .card, .panel, .an-card {
    padding: 10px 12px !important;
    border-radius: 10px;
  }
  .toolbar { padding: 8px 10px !important; border-radius: 10px !important; }
  .legend { font-size: 10px !important; gap: 10px !important; margin-bottom: 10px !important; }
  .lj-board, .lj-col { padding: 8px !important; }
  /* Modal section / sub-cards usually have inline padding 12-18px; cap it */
  [style*="padding:18px"], [style*="padding: 18px"],
  [style*="padding:22px"], [style*="padding: 22px"],
  [style*="padding:24px"], [style*="padding: 24px"],
  [style*="padding:26px"], [style*="padding: 26px"] {
    padding: 12px !important;
  }

  /* Empty states — shorter so they don't dominate the viewport */
  .empty { padding: 30px 16px !important; font-size: 13px; }
  .empty-tab { padding: 20px 14px !important; font-size: 12px; }
  .empty svg, .empty-tab svg { width: 40px; height: 40px; }

  /* ---------- Tables ----------
     Shrink hard so everything FITS on a phone screen — no horizontal scroll.
     Tiny font, minimal cell padding, content allowed to wrap. */
  .table-wrap, .scroll-x { max-width: 100%; }
  table {
    font-size: 11px !important;
    width: 100% !important;
    table-layout: auto;
    border-collapse: collapse;
  }
  th, td {
    padding: 6px 5px !important;
    font-size: 11px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
    line-height: 1.35;
  }
  th { font-size: 9px !important; letter-spacing: 0.3px !important; padding: 5px 4px !important; }
  /* Tiny badges so they don't wrap onto two lines */
  .badge,
  .role-pill,
  .role-badge,
  .status-pill,
  table .badge,
  table span[style*="border-radius:99px"],
  table span[style*="border-radius: 99px"],
  td > span[style*="padding:2px 8px"],
  td > span[style*="padding: 2px 8px"] {
    font-size: 9px !important;
    padding: 1px 5px !important;
    white-space: nowrap !important;
    border-radius: 99px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
  }
  /* Row actions — compact icon-only edit/delete buttons */
  .row-actions { gap: 4px !important; }
  .row-actions .btn,
  .row-actions .btn-sm {
    padding: 4px 6px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    font-size: 11px !important;
  }
  .row-actions .btn .icon, .row-actions .btn-sm .icon { font-size: 13px; }
  /* Secondary text in cells (emails, "(you)", hints) */
  .you, td small, td .small, td .text-muted {
    font-size: 9px !important;
    line-height: 1.3;
  }

  /* ---------- Modals: full-screen sheets on mobile ---------- */
  .modal-backdrop, .modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    overflow-y: auto;
    z-index: 900 !important;   /* above bottom nav (800), below open drawer (1050) */
  }
  .modal, .modal-content, .dialog, .pk-modal {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .modal-header {
    padding: calc(var(--pk-safe-top) + 14px) 16px 12px !important;
    position: sticky; top: 0;
    background: var(--surface);
    z-index: 5;
  }
  .modal-header h2, .modal-header h3 { font-size: 17px !important; line-height: 1.25; }
  .modal-body {
    padding: 14px 16px !important;
    max-height: none !important;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-footer {
    padding: 12px 16px calc(12px + var(--pk-safe-bottom)) !important;
    position: sticky; bottom: 0;
    background: var(--surface-2);
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .modal-footer .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  /* Big close button affordance for full-screen modals */
  .modal-close, .pk-modal-close, [aria-label="Close"] { min-width: 44px; min-height: 44px; }

  /* Footer status — let it wrap */
  .footer-status { flex-wrap: wrap; gap: 6px; font-size: 11px; }

  /* ---------- DASHBOARD CANVAS (mobile) ----------
     Desktop dashboard is an absolute-positioned canvas with fixed-pixel
     widget widths. On mobile we replace the canvas with a clean 2-column
     CSS grid so widgets become uniform "tiles":
       • small stats (quarter/third)            → 1 column wide, 110px tall
       • wide single-line (size-wide)           → full width, 78px tall
       • medium / large (half/two-thirds/full)  → full width, 150px tall
       • extra-large                            → full width, 220px tall
       • feed (any size)                        → full width, 230px scrollable
       • chart                                  → full width, 200px
       • notes                                  → full width, auto (min 110)
     Stored left/top positions are ignored on mobile, preserved for desktop. */
  .dash-grid {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .dash-widget {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    /* Default: span both columns, compact */
    grid-column: span 2 !important;
    min-height: 110px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  /* Small stat tiles — 2 per row, compact */
  .dash-widget.size-quarter,
  .dash-widget.size-third {
    grid-column: span 1 !important;
    min-height: 88px !important;
    padding: 8px 10px !important;
  }
  /* Wide one-liner */
  .dash-widget.size-wide {
    grid-column: span 2 !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
  }
  /* Medium */
  .dash-widget.size-half,
  .dash-widget.size-two-thirds {
    grid-column: span 2 !important;
    min-height: 120px !important;
  }
  /* Large */
  .dash-widget.size-full { grid-column: span 2 !important; min-height: 140px !important; }
  .dash-widget.size-extra { grid-column: span 2 !important; min-height: 180px !important; }

  /* Type-specific sizing — feeds and charts always full-width and tall enough */
  .dash-widget[data-type="feed"] {
    grid-column: span 2 !important;
    min-height: 180px !important;
  }
  .dash-widget[data-type="chart"] {
    grid-column: span 2 !important;
    min-height: 160px !important;
  }
  .dash-widget[data-type="logged-jobs"] {
    grid-column: span 2 !important;
    min-height: 220px !important;
  }
  .dash-widget[data-type="storage"] {
    grid-column: span 2 !important;
    min-height: 120px !important;
  }
  .dash-widget[data-type="status"],
  .dash-widget[data-type="noc"] {
    grid-column: span 2 !important;
    min-height: 120px !important;
  }
  .dash-widget[data-type="embed"] {
    grid-column: span 2 !important;
    min-height: 220px !important;
  }
  .dash-widget[data-type="notes"] {
    grid-column: span 2 !important;
    min-height: 90px !important;
  }
  /* Stats stay 2-up regardless of stored size */
  .dash-widget[data-type="stat"] {
    grid-column: span 1 !important;
    min-height: 88px !important;
  }

  /* Centre big stat numbers nicely in the compact tiles */
  .dash-widget[data-type="stat"] .dash-widget-body {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .dash-widget[data-type="stat"] .dash-widget-head { margin-bottom: 2px !important; min-height: 12px !important; }
  .dash-widget[data-type="stat"] .dash-widget-title { font-size: 9.5px !important; letter-spacing: 0.4px !important; }
  .dash-stat-value { font-size: 26px !important; line-height: 1; font-weight: 700; }

  /* Edit/drag affordances don't apply on mobile */
  .dash-widget.dragging,
  .dash-grid.dragging-active { transition: none !important; transform: none !important; }
  .dash-grid.editing { padding: 0 !important; }
  .dash-grid.editing .dash-widget { cursor: default !important; }

  /* Hide the desktop-only "iOS-style" remove/resize handles on phone — drag
     resize doesn't work with touch + a CSS grid layout. Editing the dashboard
     can be done on a larger screen. */
  .dash-ios-remove,
  .dash-ios-resize { display: none !important; }
  /* The "Add widget" slot is absolute-positioned by JS — make it sit at the
     bottom of the column instead. */
  .dash-add-slot {
    position: static !important;
    grid-column: span 2 !important;
    width: 100% !important;
    left: auto !important; top: auto !important;
    min-height: 70px !important;
  }
  /* "Customise mode" pill wraps so it doesn't push the buttons off screen */
  .dash-mode-pill {
    display: block;
    flex-basis: 100%;
    font-size: 11px;
    text-align: center;
  }

  /* ---------- FLATTEN MULTI-COLUMN GRIDS ----------
     Many sections use `grid-template-columns: repeat(auto-fit, minmax(…, 1fr))`
     or hard 1fr 1fr / repeat(N, 1fr). On a 400px viewport these still try to
     show 2-3 columns and overflow. Most collapse to single column; profile-style
     grids stay 2-up because the cards are tile-shaped and look right that way. */
  .field-grid,
  .lj-board,
  .sk-editor,
  .sk-source-grid,
  .an-grid,
  .dwp-body,
  .settings-layout,
  .res-detail-grid,
  .form-row,
  .res-drawer-main-grid {
    grid-template-columns: 1fr !important;
  }
  /* Tile-style grids: 2 columns on phones, 1 on very narrow phones */
  .profile-grid,
  .deleted-grid,
  .an-stat-grid,
  .dash-widget-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  @media (max-width: 380px) {
    .profile-grid,
    .deleted-grid,
    .an-stat-grid,
    .dash-widget-picker {
      grid-template-columns: 1fr !important;
    }
  }
  /* Profile cards a bit shorter on phones */
  .profile-card { min-height: 140px !important; padding: 10px 8px !important; font-size: 12px; }
  .profile-card .profile-card-name { font-size: 13px !important; }
  .profile-card .profile-card-id { font-size: 11px !important; }

  /* Inline grids written as `style="display:grid;grid-template-columns:1fr 1fr…"`
     in the monolith. We can't override inline style without !important, and we
     don't want to break the 7-column calendar grids. Target inline grids
     containing `1fr 1fr` or `1fr 1fr 1fr`, not `repeat(7`. */
  [style*="grid-template-columns:1fr 1fr"]:not([style*="repeat(7"]):not(.cal-grid):not(.res-cal-grid),
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="repeat(7"]):not(.cal-grid):not(.res-cal-grid) {
    grid-template-columns: 1fr !important;
  }
  /* Inline auto-fit/auto-fill grids — force min column width to 100% so they collapse */
  [style*="minmax(120px"],
  [style*="minmax(140px"],
  [style*="minmax(150px"],
  [style*="minmax(160px"],
  [style*="minmax(170px"],
  [style*="minmax(180px"],
  [style*="minmax(200px"],
  [style*="minmax(220px"],
  [style*="minmax(240px"],
  [style*="minmax(300px"],
  [style*="minmax(320px"],
  [style*="minmax(360px"] {
    grid-template-columns: 1fr !important;
  }

  /* Two-up '1fr 1fr auto' becomes stacked */
  [style*="grid-template-columns:1fr 1fr auto"],
  [style*="grid-template-columns: 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Skidata editor 300px+1fr already collapses at 820px — covered by the
     monolith's own media query. */

  /* ---------- ANY ROW WITH FIXED WIDTHS ----------
     Cards/widgets/sections that hard-code px widths overflow at 400px. */
  [style*="width:340px"],
  [style*="width:460px"],
  [style*="width:320px"],
  [style*="width:300px"],
  [style*="width:280px"],
  [style*="width:260px"],
  [style*="width:240px"],
  [style*="width:220px"],
  [style*="max-width:720px"],
  [style*="max-width:600px"],
  [style*="max-width:480px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- DASHBOARD WIDGET CONTENT ---------- */
  .dash-widget-title { font-size: 11px !important; }
  .dash-widget-title-text { white-space: normal !important; }   /* allow wrap on mobile */

  /* ---------- PAGE-HEADER SHRINKAGE ----------
     Some inline page-headers nest a flex row of action buttons. Make them
     full-width and wrap. */
  .page-header [style*="display:flex"],
  .page-header [style*="display: flex"] {
    width: 100%;
    flex-wrap: wrap !important;
  }

  /* ---------- bottom nav ---------- */
  .pk-mobile-bottomnav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--pk-mobile-bottom-nav) + var(--pk-safe-bottom));
    padding-bottom: var(--pk-safe-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 800;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  }
  .pk-mobile-bottomnav > button {
    flex: 1 1 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font: 500 10px/1.2 inherit;
    padding: 6px 4px;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .pk-mobile-bottomnav > button svg {
    width: 22px; height: 22px;
  }
  .pk-mobile-bottomnav > button.is-active {
    color: var(--accent);
  }
  .pk-mobile-bottomnav > button .pk-bn-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
  }
  .pk-mobile-bottomnav > button .pk-bn-badge.is-on { display: inline-flex; }
}

/* ============================================================ */
/* SMALL PHONE (<=380px) — squeeze a little harder                */
/* ============================================================ */
@media (max-width: 380px) {
  .topbar-left .role-pill { display: none; }
  .page-title h1 { font-size: 18px; }
  .btn { padding: 8px 10px; font-size: 12px; }
}

/* ============================================================ */
/* LANDSCAPE PHONE — keep bottom nav but shrink it                */
/* ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .pk-mobile-bottomnav { height: calc(48px + var(--pk-safe-bottom)); }
  :root { --pk-mobile-bottom-nav: 48px; }
  .pk-mobile-bottomnav > button { font-size: 9px; }
}

/* ============================================================ */
/* Offline indicator                                              */
/* ============================================================ */
.pk-offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: calc(8px + var(--pk-safe-top)) 12px 8px;
  background: var(--warning-bg);
  color: var(--warning);
  border-bottom: 1px solid var(--warning);
  text-align: center;
  font-size: 12px; font-weight: 500;
  z-index: 9999;
  display: none;
}
body.pk-offline .pk-offline-banner { display: block; }