/* ============================================================================
   Company OS — mobile shell (phones only).

   SURGICAL BY CONSTRUCTION: every rule in this file lives inside
   @media (max-width:768px). Desktop rendering is untouchable from here.
   No JS changes: the existing .nav__item anchors (icons, labels, badges,
   .active state, #hash routing) are re-laid-out into a native-style bottom
   tab bar purely with CSS.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---- shell: content on top, tab bar pinned bottom ---------------------- */
  #app {
    grid-template-columns: 1fr;          /* kill the 230px sidebar column */
    grid-template-rows: 1fr auto;
    height: 100vh;
    height: 100dvh;                      /* survives the URL bar sliding away */
  }

  #main  { order: 1; min-height: 0; }    /* min-height:0 lets it scroll inside grid */
  #sidebar {
    order: 2;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid rgba(255,255,255,.10);
    /* clear the iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  }
  #sidebar::-webkit-scrollbar { display: none; }

  /* brand block + side footer belong to the desktop rail, not a tab bar */
  #sidebar .brand,
  #sidebar .sidefoot { display: none; }

  #navmount { display: flex; flex: 1; }
  .nav { display: flex; flex-direction: row; padding: 0; flex: 1; gap: 0; }
  .nav__group { display: none; }                    /* group captions make no sense in a bar */

  /* ---- tab items: icon over label, thumb-sized ---------------------------- */
  .nav__item {
    position: relative;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    min-height: 56px;                                /* >= 44px touch target */
    margin: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px) * 0);
    border-radius: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__item span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__item .ic  { width: 21px; height: 21px; opacity: .85; }

  /* active: lime top-rule + lift, instead of a full gold fill */
  .nav__item.active { background: rgba(212,160,23,.14); color: #fff; }
  .nav__item.active::before {
    content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 2.5px;
    background: var(--gold-2, #d4a017); border-radius: 0 0 3px 3px;
  }
  .nav__item.active .ic { opacity: 1; }
  .nav__item:hover { background: transparent; }      /* no hover state on touch */

  /* badge floats over the icon like a native app */
  .nav__item .badge {
    position: absolute; top: 5px; left: 50%; margin-left: 6px;
    min-width: 16px; padding: 0 4px; line-height: 16px; font-size: 9.5px;
    background: #c0392b; color: #fff; border-radius: 20px; text-align: center;
  }
  .nav__item.active .badge { background: #c0392b; }

  /* ---- topbar: compact, with the mark so branding survives --------------- */
  .topbar {
    padding: 10px 14px;
    gap: 10px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .topbar h1  { font-size: 16px; }
  .topbar .sub { font-size: 11px; }
  .topbar .btn.sm { padding: 6px 10px; font-size: 12px; min-height: 36px; }

  /* ---- content: breathe, never scroll sideways --------------------------- */
  #view { padding: 14px 14px 28px; max-width: 100%; }

  /* any desktop multi-column grid collapses to one column */
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }

  /* wide things scroll INSIDE themselves, so the page never does */
  .table-wrap, .tbl-wrap, .scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* comfortable tap targets for controls */
  .btn, button, select, input[type="text"], input[type="date"], input[type="search"] { min-height: 40px; }
  input, select, textarea { font-size: 16px; }        /* < 16px makes iOS zoom on focus */

  /* cards/panels: tighter padding on a small screen */
  .card, .panel, .box { padding: 14px; border-radius: 12px; }

  /* stop any stray fixed-width desktop container overflowing the viewport */
  #view > * { max-width: 100%; }
  img, canvas, svg, video { max-width: 100%; height: auto; }
}

/* Very small phones (SE-class): drop the tab labels, keep icons */
@media (max-width: 360px) {
  .nav__item { min-width: 60px; }
  .nav__item span { display: none; }
  .nav__item .ic { width: 22px; height: 22px; }
}