/* =========================================================
   p-controls.css — shared admin controls: tabs / segmented / chips / steps / picker
   Source of truth: _analysis/tabs_system_mockup.html ("Spec" section).
   TS0 — tokens + markup migrated 1:1 from the mockup's numbers. No page migrates to this file yet.
   UC1a (13.10.2026, _analysis/uikit_components_plan.md §2.3.3): Roboto, brand tab bar, r4, chips 28,
   selected segment = brand tint + edge, --p-* = aliases of --pl-*.
   ========================================================= */
:root{
  /* UC1a: --p-* are aliases of the UI kit tokens (plerdy-kit.css :root, _analysis/uikit_components_plan.md §2.2).
     The fallbacks keep this file working on a page without plerdy-kit.css. This :root loads after the kit,
     so it must only ALIAS --pl-*, never redefine them. */
  --p-brand:var(--pl-brand,#1474E3); --p-brand-dark:var(--pl-brand-hover,#006DCA); --p-brand-bg:var(--pl-brand-bg,#EAF2FD); --p-brand-line:var(--pl-brand,#1474E3);
  --p-ink:var(--pl-ink,#191B23); --p-muted:var(--pl-muted,#6C6E79); --p-muted-2:var(--pl-muted-2,#8A8E9B); --p-line:var(--pl-line,#E0E3E6); --p-line-str:var(--pl-subtle,#C4C7CF);
  --p-track:var(--pl-surface,#F4F5F9); --p-page:#F7F8FA; --p-card:var(--pl-bg,#fff);
  --p-red:var(--pl-danger,#C74952); --p-red-bg:var(--pl-danger-bg,#FFF1F0); --p-red-line:#F2B8B8;
  --p-green:var(--pl-success,#0A7E22); --p-amber:var(--pl-warn,#9F6A00);
  --p-font:var(--pl-font,Roboto,Arial,sans-serif);
  --p-input-line:var(--pl-border-input,#8A8E9B);
  /* D1 → owner 13.10 (final): active accents = ink, not brand — black gives the right accent, brand everywhere = too much blue. One-token switch. */
  --p-tab-bar: var(--p-ink);
}

/* =========================================================
   1. SECTION TABS  (.p-tabs)  — switch the section/view of the page
   ========================================================= */
/* Bottom line = inset shadow, not border-bottom: overflow-x:auto clips at the padding edge, so a bar at bottom:-1px
   over a border got cut to 1px and floated above the line. The inset line sits inside the box; the bar covers it. */
.p-tabs{display:flex;gap:4px;box-shadow:inset 0 -1px 0 var(--p-line);margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.p-tabs a,.p-tabs button{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:0;background:none;
  font:500 14px/20px var(--p-font);color:var(--p-muted);text-decoration:none;cursor:pointer;white-space:nowrap;border-radius:4px 4px 0 0}
/* R4-KIT (owner 13.10, item 2): accent bars are straight — radius 0, 2px, ink. A rounded cap on the bar reads as an "AI" pill. */
.p-tabs a:after,.p-tabs button:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:0;background:transparent}
.p-tabs a:hover,.p-tabs button:hover{color:var(--p-ink);background:var(--p-track)}
.p-tabs .on,.p-tabs [aria-current="page"],.p-tabs [aria-selected="true"]{color:var(--p-ink);font-weight:600}
.p-tabs .on:after,.p-tabs [aria-current="page"]:after,.p-tabs [aria-selected="true"]:after{background:var(--p-tab-bar)}
.p-tabs .on:hover,.p-tabs [aria-current="page"]:hover,.p-tabs [aria-selected="true"]:hover{background:none}
/* .cnt = .pl-count (UC1a): 16h, min-w 16, r4, 12/16 500 */
.p-tabs .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;font-size:12px;line-height:16px;padding:0 5px;border-radius:4px;background:var(--p-track);color:var(--p-muted);font-weight:500;font-variant-numeric:tabular-nums}
.p-tabs .on .cnt,.p-tabs [aria-current="page"] .cnt,.p-tabs [aria-selected="true"] .cnt{background:var(--p-ink);color:#fff}
.p-tabs .dis,.p-tabs :disabled{color:var(--p-muted-2);cursor:not-allowed}
.p-tabs .dis:hover,.p-tabs :disabled:hover{background:none;color:var(--p-muted-2)}
.p-tabs :focus-visible{outline:2px solid var(--p-brand);outline-offset:-2px}
/* R3-KIT: the first tab's TEXT sits on the page axis (H1 / cards), not 14px to the right of it.
   Only the first tab loses its left padding (bar starts at the text); the strip and its baseline stay where they are,
   so nothing pokes into the gutter. In a modal head this aligns the first tab with the modal title too.
   --card strips keep the symmetric padding (they sit inside a card frame). No hover fill on the flush tab
   (the fill would touch the text) — colour change only. */
.p-tabs:not(.p-tabs--card)>:is(a,button):first-child,.p-tabs:not(.p-tabs--card)>li:first-child>:is(a,button){padding-left:0}
.p-tabs:not(.p-tabs--card)>:is(a,button):first-child:after,.p-tabs:not(.p-tabs--card)>li:first-child>:is(a,button):after{left:0}
.p-tabs:not(.p-tabs--card)>:is(a,button):first-child:hover,.p-tabs:not(.p-tabs--card)>li:first-child>:is(a,button):hover{background:none}
/* joined: tabs are the header of a card */
.p-tabs--card{background:#fff;border:1px solid var(--p-line);border-bottom:0;border-radius:4px 4px 0 0;padding:0 8px}

/* =========================================================
   2. SEGMENTED  (.p-seg) — mode of the SAME data (device, compare, preview state)
   ========================================================= */
.p-seg{display:inline-flex;height:36px;padding:2px;gap:2px;border:1px solid var(--p-line-str);border-radius:4px;background:#fff}
.p-seg a,.p-seg button{display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:0;border-radius:4px;background:none;
  font:500 13px/18px var(--p-font);color:var(--p-muted);text-decoration:none;cursor:pointer;white-space:nowrap;
  align-self:stretch;height:auto;min-height:0} /* stretch: page CSS often sets align-items:center on the group -> 18px items */
.p-seg a:hover,.p-seg button:hover{color:var(--p-ink);background:var(--p-track)}
.p-seg .on,.p-seg .on:hover,.p-seg [aria-pressed="true"],.p-seg [aria-pressed="true"]:hover,.p-seg [aria-selected="true"],.p-seg [aria-selected="true"]:hover{background:var(--p-ink);color:#fff;font-weight:600;box-shadow:none}
/* UC1a §2.1: selected = brand tint + brand edge + brand 600 (one language for chip, segment, option row) */
.p-seg .cnt{font-weight:600;font-size:12px}
.p-seg .on .cnt,.p-seg [aria-pressed="true"] .cnt,.p-seg [aria-selected="true"] .cnt{color:#fff}
.p-seg svg{width:16px;height:16px;flex:none}
.p-seg :focus-visible{outline:2px solid var(--p-brand);outline-offset:-2px}
.p-seg .dis,.p-seg .dis:hover,.p-seg :disabled,.p-seg :disabled:hover{color:var(--p-muted-2);background:none;cursor:not-allowed}
.p-seg--sm{height:32px}
.p-seg--sm a,.p-seg--sm button{padding:0 10px;font-size:12px;line-height:16px}
.p-seg--icon a,.p-seg--icon button{padding:0 8px}
/* old light */
.p-seg--quiet{background:var(--p-track);border-color:var(--p-line)}
.p-seg--quiet .on,.p-seg--quiet .on:hover,.p-seg--quiet [aria-pressed="true"],.p-seg--quiet [aria-pressed="true"]:hover{background:#fff;color:var(--p-ink);font-weight:500;box-shadow:0 1px 2px rgba(25,27,35,.12)}

/* =========================================================
   3. FILTER CHIPS  (.p-chips) — narrow a list (status, quick filters)
   ========================================================= */
.p-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* :where(:not(.p-head *)) — `.p-chip` is ALSO the status chip next to H1 (page-head.css, admin/partials/page_head.blade.php,
   form_constructor.js). This file loads later, so the filter-chip skin (border, 30px, white bg, red --warn) was repainting it.
   :where keeps specificity at (0,1,0), so page bridges like `.dp-chip.is-on` still win. */
.p-chip:where(:not(.p-head *)){display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--p-line-str);border-radius:4px;background:#fff;
  font:500 13px/18px var(--p-font);color:var(--p-muted);text-decoration:none;cursor:pointer;white-space:nowrap}
.p-chip:where(:not(.p-head *)) b{font-weight:600;color:var(--p-ink)}
/* text-decoration: Bootstrap `a:hover{text-decoration:underline}` (0,1,1) is stronger than `.p-chip{text-decoration:none}` (0,1,0) -> a.p-chip got underlined on hover (TS25) */
.p-chip:where(:not(.p-head *)):hover{border-color:var(--p-muted-2);color:var(--p-ink);text-decoration:none}
.p-chip:where(:not(.p-head *)).on,.p-chip:where(:not(.p-head *))[aria-pressed="true"],.p-chip:where(:not(.p-head *))[aria-selected="true"]{background:var(--p-brand-bg);border-color:var(--p-brand-line);color:var(--p-brand)}
.p-chip:where(:not(.p-head *)).on b,.p-chip:where(:not(.p-head *))[aria-pressed="true"] b,.p-chip:where(:not(.p-head *))[aria-selected="true"] b{color:var(--p-brand)}
.p-chip:where(:not(.p-head *)).empty{color:var(--p-muted-2);border-style:dashed;cursor:default}
.p-chip:where(:not(.p-head *)).empty:hover{border-color:var(--p-line-str);color:var(--p-muted-2)}
.p-chip--warn:where(:not(.p-head *)){background:#fff;border-color:var(--p-red-line);color:var(--p-red)} /* background: page-head.css `.p-chip--warn` paints #FFF4E5 */
.p-chip--warn:where(:not(.p-head *)) b{color:var(--p-red)}
.p-chip--warn:where(:not(.p-head *)) .dot{width:6px;height:6px;border-radius:50%;background:var(--p-red)}
.p-chip--warn:where(:not(.p-head *)).on,.p-chip--warn:where(:not(.p-head *))[aria-pressed="true"],.p-chip--warn:where(:not(.p-head *))[aria-selected="true"]{background:var(--p-red-bg);border-color:var(--p-red);color:var(--p-red)}
.p-chip:where(:not(.p-head *)) .x{margin-left:2px;font-size:14px;line-height:1;opacity:.7}
.p-chips .sep{width:1px;height:20px;background:var(--p-line);margin:0 4px}
.p-chip:where(:not(.p-head *)):focus-visible{outline:2px solid var(--p-brand);outline-offset:1px}
.rail{position:relative;overflow:hidden}
.rail .p-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:40px}
.rail:after{content:"";position:absolute;right:0;top:0;bottom:0;width:60px;background:linear-gradient(90deg,rgba(247,248,250,0),var(--p-page) 70%);pointer-events:none}
.rail .arr{position:absolute;right:0;top:0;width:30px;height:30px;border-radius:4px;border:1px solid var(--p-line-str);background:#fff;z-index:2;cursor:pointer;color:var(--p-muted)}

/* =========================================================
   4. STEPPER (.p-steps) — wizard, not tabs
   ========================================================= */
.p-steps{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--p-line);border-radius:4px;padding:6px;counter-reset:s;list-style:none;margin:0}
.p-steps li{display:flex;align-items:center}
.p-steps li+li:before{content:"";width:28px;height:1px;background:var(--p-line-str);margin:0 4px}
.p-steps a,.p-steps button{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:0;background:none;border-radius:4px;
  font:500 14px/20px var(--p-font);color:var(--p-muted);cursor:pointer;text-decoration:none}
.p-steps a:hover,.p-steps button:hover{background:var(--p-track);color:var(--p-ink);text-decoration:none}
.p-steps .n{width:24px;height:24px;border-radius:50%;border:1px solid var(--p-line-str);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--p-muted);background:#fff}
.p-steps .on,.p-steps [aria-current="step"]{color:var(--p-ink);font-weight:600}
.p-steps .on .n,.p-steps [aria-current="step"] .n{background:var(--p-ink);border-color:var(--p-ink);color:#fff}
.p-steps .done .n{background:var(--pl-success-bg,#ECFBCD);border-color:transparent;color:var(--p-green)}
.p-steps .warn .n{background:var(--pl-warn-bg,#FFF6E6);border-color:transparent;color:var(--p-amber)}

/* =========================================================
   5. ENTITY SWITCHER (.p-picker) — site picker instead of slick slider
   ========================================================= */
.p-picker{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border:1px solid var(--p-input-line);border-radius:4px;background:#fff;font-weight:600;cursor:pointer}
.p-picker .fav{width:16px;height:16px;border-radius:4px;background:#D3E3F9}
.p-picker .caret{color:var(--p-muted);font-size:11px}
.p-picker small{font-weight:400;color:var(--p-muted)}
.p-picker:focus-visible{outline:2px solid var(--p-brand);outline-offset:1px}