/* ============================================================
   components.css — PL-Signum Component System
   ============================================================
   SINGLE SOURCE OF TRUTH for interactive-component geometry:
   control heights, radii, focus rings, shadows, transitions.
   Loaded AFTER dashboard.css so its normalization wins ties.

   Rule for new UI: use the tokens below (and the normalized
   primitives) — never invent a new button/input/badge shape.
   ============================================================ */

:root {
    /* Geometry tokens */
    --radius-sm: 5px;   /* chips, badges, small buttons   */
    --radius-md: 8px;   /* buttons, inputs, dropdowns     */
    --radius-lg: 12px;  /* cards, modals, drawers         */
    --ctl-h: 28px;      /* standard control height        */
    --ctl-h-sm: 24px;   /* compact control height         */
    /* Elevation tokens */
    --shadow-1: 0 2px 8px rgba(0,0,0,.18);
    --shadow-2: 0 12px 32px rgba(0,0,0,.35);
    /* Focus ring — one look for keyboard focus everywhere */
    --focus-ring: 0 0 0 2px rgba(79,142,247,.45);
}

/* ── Buttons — every button primitive shares height, radius,
      focus ring and transition ─────────────────────────────── */
.btn-ghost,
.btn-acc,
.btn-bulk,
.btn-breakdown,
.rcp-add-btn-primary,
.upload-label,
.lens-btn,
.fm-foot button,
.pl-btn,
.dates-modal button,
.sch-modal-foot button,
.rb-modal-foot button,
.rb-btn {
    border-radius: var(--radius-md);
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .btn-ghost:focus-visible,
    .btn-acc:focus-visible,
    .btn-bulk:focus-visible,
    .lens-btn:focus-visible,
    button:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

/* ── Inputs & selects — one field look ──────────────────────── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="search"],
select,
textarea {
    border-radius: var(--radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    input[type="text"]:focus-visible,
    input[type="number"]:focus-visible,
    input[type="date"]:focus-visible,
    input[type="search"]:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

/* ── Badges & chips — same pill geometry everywhere ─────────── */
.badge,
.issue-chip,
.pl-cov-chip,
.var-chip,
.commit-missed-badge,
.commit-pending-badge,
.plan-amended-mark,
.ap-ver-badge,
.sch-dwg-chip {
    border-radius: var(--radius-sm);
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Overlays — modals, popovers, drawers share elevation ───── */
/* NB: the modal BOXES get the elevation — a `> div` selector here used to
   hit #rowModal's header/body/footer children, rendering each section as
   its own floating pill inside the Add/Edit Document form. */
.sch-modal,
.dates-modal,
#funnelMenu,
.cycle-drawer,
#breakdownModal,
#rowModal,
.rb-modal {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

/* ── Scrollbars — one slim style app-wide (WebKit) ──────────── */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--muted);
    }

::-webkit-scrollbar-track {
    background: transparent;
}

/* ── PLAN toolbar — same control standard as the register toolbar ───── */
#sch-toolbar button,
#sch-toolbar select,
#sch-toolbar .btn-ghost,
#sch-toolbar .btn-acc,
#sch-toolbar label {
    height: var(--ctl-h) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-md);
    font-size: var(--fs-md) !important;
    padding: 0 10px !important;
    box-sizing: border-box;
}

#sch-toolbar input[type="text"],
#sch-toolbar input[type="number"] {
    height: var(--ctl-h);
    box-sizing: border-box;
}