/* ============================================================
   CIP — shared responsive layer (0012).

   Loaded by the ADMIN pages only — the TV display pages keep their
   fixed large-screen composition untouched. This file adapts the
   locked CIP components (shell, topbar, panels, tables, modals,
   toolbars) to tablet and phone viewports: proper breakpoints, no
   scaled-down desktop. Tokens, colors and typography are inherited
   from each page — nothing visual is redefined here.
   ============================================================ */

/* ---------- shared behaviors (all sizes) ---------- */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* 0013 · General UI rule: important actions must never be pushed out of
   their container by fixed sizes, long text or large media — control rows
   WRAP instead of clipping, everywhere. */
.radio-row { flex-wrap: wrap; }
.radio-row .radio-pill { min-width: 0; }
.row-tools { flex-wrap: wrap; justify-content: flex-end; }
.t-foot { flex-wrap: wrap; }
.ph-tools { min-width: 0; }
.panel-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qa-btn { min-width: 0; }
.fbe-actions { min-width: 0; }

/* ---------- touch devices: comfortable targets ---------- */
@media (pointer: coarse) {
  .btn-ghost, .page-btn, .btn-neutral.sm, .btn-primary.sm, .ctl-btn, .swatch, .tt-btn, .modal-close {
    min-height: 40px;
  }
  .page-btn, .swatch { min-width: 40px; }
  .check-item, .radio-pill { min-height: 46px; }
}

/* ---------- tablet ≤ 1024px ----------
   (each page already collapses the sidebar to an icon rail here) */
@media (max-width: 1024px) {
  .main { padding-left: 18px; padding-right: 18px; }
  .modal { max-width: min(600px, calc(100vw - 32px)); }
}

/* ---------- large phones / small tablets ≤ 820px ---------- */
@media (max-width: 820px) {
  .main { padding: 20px 14px 16px; }
  .page-head h1 { font-size: 24px; }
  .page-head p { font-size: 13.5px; }

  /* toolbars stack and stretch */
  .panel-head { padding: 14px 16px 12px; }
  .panel-body { padding: 16px 16px 18px; }
  .ph-tools { width: 100%; }
  .ph-tools .search.sm { min-width: 0; max-width: none; flex: 1 1 160px; }
  .ph-tools .sel, .ph-tools .date-in { flex: 1 1 130px; min-width: 0; }
  .ph-tools .btn-primary.sm, .ph-tools .btn-neutral.sm { flex: 1 1 auto; }

  /* tables stay usable: horizontal scroll with a sensible minimum */
  .table-wrap table { min-width: 620px; }

  thead th { padding: 10px 10px; font-size: 10px; }
  tbody td { padding: 8px 10px; }

  /* dialogs breathe on small screens */
  .overlay { padding: 12px 10px 10px; }
  .modal { max-width: 100%; }
  .modal-head { padding: 20px 18px 16px; }
  .modal-body { padding: 18px 18px 6px; max-height: 68vh; }
  .modal-foot { padding: 16px 18px 20px; flex-wrap: wrap; }
  .modal-foot .btn-primary, .modal-foot .btn-neutral { flex: 1 1 auto; }

  /* full-screen form builder stacks (0012) */
  .fbe-head { padding: 10px 12px; }
  .fbe-actions { width: 100%; }
  .fbe-actions .btn-ghost, .fbe-actions .btn-primary.sm, .fbe-actions .btn-neutral.sm { flex: 1 1 auto; }
  .fbe-body { padding: 14px 12px 20px; gap: 14px; }
}

/* ---------- phones ≤ 640px ---------- */
@media (max-width: 640px) {
  :root { --sidebar-w: 62px; }
  .sidebar { padding: 16px 8px 14px; }
  .side-brand { padding: 4px 0 14px; }
  .side-brand .mark { font-size: 20px; }
  .nav-item { height: 42px; }
  .side-foot { font-size: 8px; }

  .topbar { gap: 12px; padding: 0 12px; }
  .topbar-brand .co { font-size: 13px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .icon-btn { width: 36px; height: 36px; }

  .main { padding: 16px 10px 12px; }

  /* iOS: prevent focus-zoom by keeping form text ≥16px */
  .cell-input, .control input, .control textarea, .control select, .search input,
  .fbe-title-in, #fbe-label-in, .fbe-props input, .fbe-props textarea, .fbe-props select {
    font-size: 16px;
  }

  .kpi-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }
  .check-grid { grid-template-columns: 1fr; }
  .radio-row { flex-direction: column; }
  .mode-pills { flex-direction: column; }
  .dl-sheet { grid-template-columns: 1fr; gap: 2px 0; }
  .dl-sheet dt { margin-top: 10px; }

  .table-foot { padding: 12px 12px; }
  .fb-form-head { padding: 12px 12px; }
  .fb-form-head .btn-primary.sm, .fb-form-head .btn-ghost, .fb-form-head .btn-neutral.sm { flex: 1 1 auto; }

  .page-footer { padding: 18px 12px 20px; }
}

/* ============================================================
   0015 · UI hardening (approved fix request, 2026-08-14).
   Loads AFTER each page's inline <style>, so ties resolve here.
   ============================================================ */

/* ---------- 1) Long values never overlap (all admin pages) ----------
   At rest: one line, ellipsis inside the border. While editing: the
   real value and caret (ellipsis released on focus). Bidi text renders
   by its own direction (unicode-bidi: plaintext).                    */
.field, .control, .form-grid > *, .m-section .field { min-width: 0; }

.control input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.control select,
.control textarea,
.search input,
.cell-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}
.control textarea { white-space: pre-wrap; }
/* editing: the full value + caret — ellipsis only at rest (specificity
   matches the base rule's :not() chain above) */
.control input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.search input:focus,
.cell-input:focus { text-overflow: clip; }

/* status pills / badges: label stays inside its pill */
.radio-pill, .badge, .status { min-width: 0; }
.radio-pill { max-width: 100%; }
.badge, .status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 2) Standard button system (three sizes) ----------
   Same CIP blue theme and shapes — only the METRICS are standardized.
   .btn-lg  main submits      52px / 16px / 14px 24px
   .btn-md  secondary actions 44px / 14px / 12px 18px
   .btn-sm  table + filters   36px / 13px / 10px 14px
   Defaults (no explicit class): primary→lg · neutral→md · ghost→sm;
   the legacy `sm` modifier maps to btn-sm.                          */
button.btn-lg, a.btn-lg,
button.btn-primary:not(.btn-md):not(.btn-sm):not(.sm),
a.btn-primary:not(.btn-md):not(.btn-sm):not(.sm) {
  height: 52px; font-size: 16px; padding: 14px 24px; white-space: nowrap;
}
button.btn-md, a.btn-md,
button.btn-neutral:not(.btn-lg):not(.btn-sm):not(.sm),
a.btn-neutral:not(.btn-lg):not(.btn-sm):not(.sm) {
  height: 44px; font-size: 14px; padding: 12px 18px; white-space: nowrap;
}
button.btn-sm, a.btn-sm,
button.btn-ghost:not(.btn-lg):not(.btn-md),
a.btn-ghost:not(.btn-lg):not(.btn-md),
button.btn-primary.sm, button.btn-neutral.sm, button.btn-ghost.sm {
  height: 36px; font-size: 13px; padding: 10px 14px; white-space: nowrap;
}
/* primary keeps its uppercase tracking readable at 16px */
button.btn-primary:not(.sm):not(.btn-sm), a.btn-primary:not(.sm):not(.btn-sm) { letter-spacing: 0.08em; }

/* settings + details logo actions are MEDIUM secondary actions
   (specificity matches the ghost→sm default above; later rule wins) */
.logo-actions button.btn-ghost:not(.btn-lg):not(.btn-sm),
.logo-actions button.btn-neutral:not(.btn-lg):not(.btn-sm) {
  height: 44px; font-size: 14px; padding: 12px 18px;
}

/* ── 0019 · CIP PRODUCT LOGO ───────────────────────────────────────────────
   The platform wordmark used to be typographic — the letters "CIP" with a
   gradient clipped to the text. It is now the official product logo image.

   This is PRODUCT branding: identical for every tenant. It is deliberately
   NOT the per-company logo, which keeps its own separate mechanism above
   (.topbar-brand .co-logo) and its own company-name text fallback.

   Definite height + width:auto reproduces the aspect ratio (1.58:1) exactly,
   so the mark is never stretched and the branding box stays the size the
   text occupied — no header grows, nothing shifts. The asset has a genuinely
   transparent background and is never recoloured or filtered, so the same
   file sits correctly on both the light and the dark surface. */
.side-brand .mark img {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .side-brand .mark img { height: 22px; }
}

/* Login hero — matches the optical size of the old clamp(48px,6.5vw,64px)
   wordmark. The letter-spacing/negative-margin pair existed purely to
   optically centre letter-spaced text; both must be neutralised for an
   image child or the logo sits off-centre. */
.brand-name.has-logo {
  margin-right: 0;
  letter-spacing: normal;
}
.brand-name.has-logo img {
  display: block;
  height: clamp(46px, 6.2vw, 62px);
  width: auto;
  object-fit: contain;
}

/* 0021 · Sidebar overflow — the sidebar is a sticky, exactly-100dvh flex
   column with no overflow rule. Once the navigation grows past the viewport
   (many departments, or simply a short window) `.side-spacer` collapses to 0
   and everything after it — Logout and the version footer — is laid out
   below the sidebar's bottom edge with no way to reach it: the sidebar
   cannot scroll, and scrolling the PAGE does not help because the sidebar is
   sticky and already full height. Making the sidebar its own scroll
   container restores access, and because it is the nearest scrollable
   ancestor of every nav item the wheel scrolls it on hover, with no click
   and no JavaScript. `overscroll-behavior: contain` keeps that wheel from
   chaining into the page mid-gesture; `overflow-x: hidden` guarantees the
   fix can never introduce a horizontal scrollbar.

   Nothing visual changes: when the navigation fits, an `auto` container
   renders identically to the current `visible` one — no scrollbar, no
   reserved gutter, no reflow. Sizes, spacing, colours and the icon rail are
   untouched. A pinned footer is deliberately NOT used: --sidebar-bg is a
   translucent gradient over backdrop-filter, so a sticky footer would show
   the scrolled navigation through itself — a visual regression. */
.sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}