/* The drawer's CONTENT language — what goes inside the shell that
   components/drawer.css draws. Every saved-view settings drawer and the
   panels that step out of them are built from these classes and nothing else:

     .global-drawer__section   one group, hairline between groups
     .global-drawer__legend    small-caps heading over a group's controls
     .global-drawer__field     one control row inside a section
     .global-drawer__rowbtn    the neutral row that steps into a panel or does an act
     .global-drawer__input     the drawer's text box (the view's name)
     .global-drawer__cols      a checklist (columns, metric cards), draggable or not
     .global-drawer__kinds     the view-type picker, a skin on .global-segmented
     .global-drawer__footer    the staged-save footer with its Reset / Save pair

   Loaded on every page from base.html, so a rename here restyles every
   drawer that speaks it. */

/* View-type picker: five equal icon cells, one per view kind. This IS the shared segmented control
   (.global-segmented + --equal + __btn, components/segmented.css) — the canon in
   docs/plans/controls-canon.md names the view switcher as its labels variant, and
   the approved mock draws one connected strip rather than five loose cards. Only
   two things are local: the track fills the drawer width instead of hugging its
   buttons, and the cells are square icons with no label. */
.global-segmented.global-drawer__kinds {
    display: grid;
}

.global-segmented__btn.global-drawer__kind {
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
}

.global-drawer__kind:disabled {
    cursor: default;
    opacity: 0.55;
}

/* The drawer SHELL (scrim, panel, body, slide) is components/drawer.css, driven
   by skillbridge.drawer.dock(); `.drawer-panel--dock` styles nothing — it is the
   marker drawer.js reads to leave this always-present panel out of the push
   count. */

.global-drawer__section {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.global-drawer__section:first-child {
    padding-top: 0;
}

.global-drawer__section:last-child {
    border-bottom: none;
}

/* The SETTINGS drawer draws no rules between its groups — the approved mock sets
   them apart with the small-caps legend and space alone, and the drawer structure
   names exactly one divider, the one above Delete view. Scoped to sections that
   carry data-drawer-section so the opportunity-create drawer, which shares this
   class without that attribute, keeps its rules. */
.global-drawer__section[data-drawer-section] {
    border-bottom: none;
}

/* The view-type picker and the "[Type] settings" section beneath it are one block,
   so the pair closes up tighter than the gap between groups. */
.global-drawer__section--tight {
    padding-bottom: var(--spacing-xs);
}

/* Settings sections space themselves with their own padding, so a section's last
   field/hint must not stack its in-flow margin on top of that: with the read-back
   and quick-filter groups gone, that slack left one panel mixing 20/33/47px seams.
   Zeroing the trailing margin (one level of nesting deep — Actions ends in a
   sharing row whose own last child is a hint) makes every group seam the same
   16+16. Scoped to [data-drawer-section] like the divider rule above, so the
   create/detail drawers that share these classes keep their rhythm. */
.global-drawer__section[data-drawer-section] > :last-child,
.global-drawer__section[data-drawer-section] > :last-child > :last-child {
    margin-bottom: 0;
}

/* :last-child is blind to Alpine: a trailing x-if template (the card lines'
   separator picker) or x-show'd global-empty-state line is still the DOM's last child,
   so the visibly-last cols box above it kept its margin and the old wide seam
   with it. A cols box that is the last RENDERED element of its group — the only
   things after it are template tags or the global-empty-state <p>s, so it is the last
   div — drops the margin too; the global-empty-state line carries its own top margin
   (rule below), which collapses with a cols margin where one remains, so
   nothing else moves. */
.global-drawer__section[data-drawer-section] > :last-child > .global-drawer__cols:last-of-type {
    margin-bottom: 0;
}

/* The drawer's one act row: every whole-row control wears it — the rows that
   open a panel (Filters, Table / Calendar / Board / Card settings), Set as
   default, Who sees it, Delete view. Label left, an optional current value
   and a chevron right, like a HubSpot settings row (Nick 08-28: "they should
   all sort of look the same, going down the line"). Delete is deliberately NOT
   red; the confirm dialog is what guards it. Disabled = the act already done
   (the lit star reading "Default view"). */
.global-drawer__rowbtn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    min-height: var(--control-h-base);
    padding: 0 var(--spacing-smd);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    cursor: pointer;
}

.global-drawer__rowbtn:hover:not(:disabled) {
    border-color: var(--color-text-muted);
}

/* A row that is one of a set of choices (Who sees it) says which is live. */
.global-drawer__rowbtn[aria-pressed="true"] {
    border-color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.global-drawer__rowbtn:disabled {
    opacity: 0.5;
    cursor: default;
}

.global-drawer__rowbtn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.global-drawer__rowbtn-label {
    flex: 1 1 auto;
    text-align: left;
}

.global-drawer__rowbtn-value {
    color: var(--color-text-secondary);
}

/* The key that does the row's act (Save changes · Ctrl+S). */
.global-drawer__kbd {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* A legend with room for a chip beside it. The row carries the legend's bottom
   margin so a chip sits on the legend's line, not under it. */
.global-drawer__legendrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
}

.global-drawer__legendrow .global-drawer__legend {
    margin: 0;
}

/* A segmented control standing alone in a panel group (row height, the
   calendar's default view) spans the column like every other control there;
   the base .global-segmented is inline and would sit short on the left. */
.global-drawer__seg {
    display: flex;
    width: 100%;
}

/* Section legend mirrors HubSpot's drawer headers: 11px uppercase. This is the
   top tier — text-secondary — with each group label (.global-drawer__label) a notch
   down in muted, so every group reads on the same small-caps rhythm. */
.global-drawer__legend {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.global-drawer__hint {
    margin: 0 0 var(--spacing-smd);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Edit-columns checkbox list — a bordered scroll box (like the create drawer's
   field chrome) so the list reads as one control, not loose rows. */
/* The search box over a checklist sits a hair above it, as one control. */
.global-drawer__cols-search {
    margin-bottom: var(--spacing-xs);
}

.global-drawer__cols {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: var(--spacing-smd);
    padding: var(--spacing-xs);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
}

.global-drawer__col {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xsm) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-drawer__col:hover {
    background: var(--color-surface-subtle);
}

/* Checkboxes here use the shared .global-checkbox component —
   shared/css/components/checkbox.css. The rows carry that class. */

.global-drawer__col-name {
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.global-drawer__col-stage {
    margin-left: auto;
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

/* One row of a card-line picker (_opps_drawer_lines.html): the piece's checkbox
   label, what KIND of piece it is, and — on the pieces that are in the line — the
   buttons that move it. Rides inside .global-drawer__cols, which already supplies the
   bordered scroll box, so the row supplies only its own layout. The label does not
   grow: the kind chip reads as part of the piece, and only the move buttons are
   pushed right, so the arrows line up down the list however long the labels are. */
.global-drawer__line-piece {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.global-drawer__line-piece .global-drawer__col-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-drawer__line-moves {
    display: flex;
    gap: var(--spacing-xs);
    margin-left: auto;
    padding-right: var(--spacing-xs);
}

/* Drag reorder (table column list): a grip handle sits left of the checkbox
   label. The row is a plain flex container; the label carries the click target so
   grabbing the handle never toggles the box. */
.global-drawer__col-handle {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    cursor: grab;
}

.global-drawer__col-handle:active {
    cursor: grabbing;
}

.global-drawer__col-check {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    cursor: pointer;
}

/* SortableJS drag placeholder — the gap the row will drop into. */
.global-drawer__col--ghost {
    opacity: 0.4;
}

/* Grouped drawer checklists (calendar Event categories + Task types): the group
   row (a toggle-all category, or a plain section label) reads bold, and each leaf
   checkbox is indented under it, mirroring the header filter dropdowns. */
.global-drawer__subgroup + .global-drawer__subgroup {
    margin-top: var(--spacing-sm);
}

.global-drawer__col--group .global-drawer__col-name,
.global-drawer__col-name.global-drawer__col--group {
    font-weight: var(--font-weight-medium);
}

.global-drawer__col--sub {
    padding-left: var(--spacing-lg);
}

/* Details by Job (task view): one list holds the ticked fields and, under group
   heads, the rest, so it grows with the panel instead of scrolling in a box. A
   ticked row wraps to show its Show when block under it; an unticked row keeps a
   hidden grip so its box lines up with the ticked ones at any font size. */
.global-drawer__cols--tall {
    max-height: none;
}

.global-drawer__col--rule {
    flex-wrap: wrap;
}

.global-drawer__col-rule {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.global-drawer__col-when {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-lg);
}

.global-drawer__col-spacer {
    display: inline-flex;
    visibility: hidden;
}

.global-drawer__col-head {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-2xs);
}

.global-drawer__note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* In the settings drawers the global-empty-state line under a cols box carries its own
   top margin (not just the box's bottom one, which the seam rules zero when the
   box ends its group) — the two collapse where both exist, so the gap stays
   12px in every visibility state. The lead-detail drawer's sections carry no
   data-drawer-section and its empties keep their flush default. */
.global-drawer__section[data-drawer-section] .global-drawer__note {
    margin-top: var(--spacing-smd);
}

.global-drawer__field {
    margin-bottom: var(--spacing-smd);
}

/* Group label — one small-caps treatment for every group inside a section, so
   "Row height", "Sort by", "Date filter" etc. all match the section legend's
   idiom instead of floating as loose dark labels. Muted keeps it a
   tier below the legend above it. */
.global-drawer__label {
    display: block;
    margin-bottom: var(--spacing-xsm);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.global-drawer__input {
    width: 100%;
    height: var(--control-h-base);
    padding: 0 var(--spacing-smd);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
}

.global-drawer__input:focus {
    outline: none;
    border-color: var(--color-focus-ring);
    box-shadow: var(--shadow-focus-ring);
}

.global-drawer__input--name {
    flex: 1;
}

/* Full-width sort-direction pair — the adaptive labels ("Most recent" /
   "Oldest", "A → Z" / "Z → A" …) run long, so this shared .global-segmented spans
   the whole field with each option flexing to half, sitting under the Sort-by
   select. Every segmented control in a drawer wears `--picker` (segmented.css)
   so it stands at the same height and in the same pill as that select; only the
   view-kind icon strip above keeps the recessed track. */
.global-drawer__sortdir {
    display: grid;
    width: 100%;
    margin-top: var(--spacing-xsm);
}

.global-drawer__btn {
    min-height: var(--control-h-base);
    padding: 0 var(--spacing-smd);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-button);
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.global-drawer__btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Keyboard focus ring — the action buttons (save / delete / save-as-new) had none,
   so a keyboard user tabbing the drawer saw nothing. Matches .global-drawer-close. */
.global-drawer__btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.global-drawer__btn--primary {
    color: var(--color-neutral-ink-fg);
    background: var(--color-action);
    border: 1px solid var(--color-action);
}

.global-drawer__btn--primary:hover:not(:disabled) {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.global-drawer__btn--ghost {
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

.global-drawer__btn--ghost:hover:not(:disabled) {
    border-color: var(--color-text-muted);
}

/* The one rule in the settings drawer: it sets the last row (Delete view, an
   .global-drawer__rowbtn like every other act) apart from Actions. */
.global-drawer__delete {
    border-top: 1px solid var(--color-border-subtle);
}

/* Staged-save footer: pinned to the bottom of the drawer panel. .global-drawer-body is the flex child that
   grows, so this sibling never scrolls away. It renders ONLY while edits are
   staged, which is what makes the unsaved state readable without a badge. */
.global-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-smd);
    flex: 0 0 auto;
    padding: var(--spacing-smd) var(--spacing-mdlg);
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
}

.global-drawer__footer-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.global-drawer__footer-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* A checklist dimmed while the switch above it is off (the bills drawer's
   metric cards): the boxes stay there to tick, they just do nothing yet. */
.global-drawer__cols--off {
    opacity: 0.55;
}

/* On a phone every row and button is tall enough for a thumb (44px). */
@media (max-width: 767.98px) {
    .global-drawer__rowbtn,
    .global-drawer__btn {
        min-height: var(--control-h-touch);
    }
}