/* ============================================================
   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;
}