/**
 * LocationPicker (§4.4): "where is this device?", styled once for every host.
 *
 * COLOURS COME FROM css/design-tokens.css, never literals. Both hosts link the tokens
 * (admin_tickets.html through its design-system.css pair, admin_locations.html the tokens file
 * alone, so it takes no component classes), and the tokens already flip for prefers-color-scheme,
 * html.theme-dark and html.theme-light. So this file has no dark block of its own: one would
 * follow the OS setting only and ignore a forced theme.
 *
 * The control has to REFUSE as legibly as it accepts: the verdict sits next to the input while
 * the person types, and the submit is visibly disabled until there is somewhere to go.
 */

.lp-heading {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.lp-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lp-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text);
}

.lp-input::placeholder { color: var(--text-muted); }

.lp-input-code {
    font-family: monospace;
    text-transform: uppercase;
}

/* ⚠️ THE CONTROL CARRIES ITS OWN BUTTON CHROME, ON PURPOSE. The two hosts disagree about what
   a bare `.btn` looks like: admin_locations.html gives it a background, admin_tickets.html
   defines only padding and weight and expects a `.btn-primary` modifier -- so on the ticket
   screen "Put it here" rendered as plain text with no button around it. A shared control that
   looks like a button in one host and a word in the other is not a shared control. */
.lp-btn {
    white-space: nowrap;
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--btn-bg);
    color: var(--btn-text);
    cursor: pointer;
}

.lp-btn:hover:not([disabled]) { background: var(--btn-bg-hover); }

.lp-btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

.lp-btn-secondary:hover:not([disabled]) { background: var(--btn-secondary-bg-hover); }

.lp-wide {
    width: 100%;
    padding: 0.5rem 0.875rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.lp-verdict {
    margin: 0.375rem 0 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    min-height: 1.15rem;
}

.lp-verdict-idle     { color: var(--text-muted); }
.lp-verdict-checking { color: var(--text-muted); font-style: italic; }
.lp-verdict-ok       { color: var(--success-text); }
.lp-verdict-refuse   { color: var(--warning-text); }
.lp-verdict-error    { color: var(--error-text); }

.lp-or {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0.625rem 0 0.5rem;
}

/* The flexbox checkbox rule from CLAUDE.md: without a fixed-width box the input expands to fill
   the row and looks broken. */
.lp-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text);
    cursor: pointer;
}

.lp-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.lp-candidates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.lp-chip {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-nested);
    color: var(--text);
    font-family: monospace;
    font-size: 0.8125rem;
    cursor: pointer;
}

.lp-chip:hover { background: var(--bg-hover); }

/* A chip for a PERSON reads as text, not as a spot code. */
.lp-chip-person { font-family: inherit; }

.lp-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--info-text);
    text-decoration: underline;
    cursor: pointer;
}

.lp button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}


/* #4057: the Update Location suggestion block above the picker. Tokens only. */
.location-suggest { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.location-suggest-current { margin-bottom: 0.5rem; }
.location-suggest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.location-suggest-text { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.location-suggest-shelves-box { margin-top: 1rem; }   /* the shelf window sits one block gap (16px) under the Use line, like the blocks around it */
.location-suggest-shelves-box[hidden] { display: none; }
.location-suggest-shelves-label { margin-bottom: 0.35rem; }
.location-suggest-retry { margin-top: 0.5rem; }
.location-suggest-chip { min-width: 2.75rem; }

/* #4170: the shelves laid out like the physical shelf, one row per shelf letter, every spot in place. An empty spot is the Use button above;
   an occupied or unavailable spot is a greyed span (not a button). Rows wrap inside the sheet (the sheet scrolls, the page never does). */
.location-shelves-legend { margin: -0.15rem 0 0.5rem; }
.location-shelf-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }   /* the label is the prefix, or the range name when the prefix is blank: a long name is cut to ONE line with an ellipsis and never pushes the free count or the chevron out of the card */
.location-shelf-free { flex: none; white-space: nowrap; margin-left: auto; }   /* "6 free" at the right, before the chevron */
.location-other-title { flex: 1 1 auto; min-width: 0; }   /* "Other shelves" takes the room; the count and the chevron sit at the right */
/* the window onto one shelf's real grid: about three rows tall (a fixed max-height, never 100vh), scrolling inside the sheet. The grid is its own scroll
   box and the offset parent the panel scrolls to the suggested spot with; overscroll-behavior stops the scroll chaining into the sheet; min-width and
   min-height 0 let it shrink inside the flex sheet. */
.location-shelf-window { margin-bottom: 0.75rem; min-width: 0; }
.location-window-head { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; margin-bottom: 0.25rem; }
.location-window-grid { position: relative; max-height: 10.5rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.125rem; }
.location-spot-suggested { outline: 2px solid var(--info-border); outline-offset: 1px; }   /* the suggested spot, in the accent token the focus rings use */
/* "Other shelves": one closed list; each row is one 44px line (label, N free, chevron) that swaps the window to that shelf */
.location-other-shelves.ds-disclosure { margin-bottom: 0; }   /* the shared card carries a bottom margin for form use */
.location-other-list { padding: 0; }
.location-shelf-pick { display: flex; align-items: center; gap: 0.5rem; box-sizing: border-box; width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; background: transparent; border: 0; border-top: 1px solid var(--border); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.location-shelf-pick:first-child { border-top: 0; }
.location-shelf-pick:focus-visible { outline: 2px solid var(--info-border); outline-offset: -2px; }
.location-shelf-spots { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.375rem; min-width: 0; }   /* even cells, so the rows line up like a shelf */
.location-shelf-gap { grid-column: 1 / -1; height: 0.25rem; }   /* a new segment of the same letter starts on its own line */
/* ONE box for every cell (a free spot's button and a taken or unused spot's span), so the labels sit on the same line */
.location-shelf-spots > .location-suggest-chip, .location-shelf-spots > .location-spot {
    box-sizing: border-box; width: 100%; min-width: 0; height: 2.25rem; margin: 0; padding: 0 0.25rem; display: flex; align-items: center; justify-content: center;
    font-size: 0.8125rem; line-height: 1.2; border-width: 1px; border-style: solid; border-radius: 0.375rem; }
.location-shelf-spots > .location-suggest-chip { border-color: transparent; }   /* the shared cell rule sets a border width and style: without a colour a free button would draw currentColor; transparent keeps today's flat chip and the same box */
.location-spot { border-color: var(--border); background: transparent; color: var(--text-muted); cursor: not-allowed; }
/* taken: no fill, muted text and a small filled dot after the code (currentColor); not used: no fill, struck through */
.location-spot-occupied::after { content: ''; display: inline-block; flex: none; width: 0.4rem; height: 0.4rem; margin-left: 0.3rem; border-radius: 50%; background: currentColor; }
.location-spot-unavailable { text-decoration: line-through; opacity: 0.6; }
@media (max-width: 768px) {
    .location-suggest-use { min-height: 44px; width: 100%; }
    .location-shelf-spots > .location-suggest-chip, .location-shelf-spots > .location-spot { height: 44px; }
}

/* The Device location sheet (#location-picker-modal, #4057). The page's own .modal-content padding (2rem) stacked on the header and body
   padding, so on a phone about 56px of dead space sat inside each edge and the 90% width added a 5% gutter on top. The sheet's
   .modal-content carries no padding (the header and body carry the only padding, as .invoice-doc does) and on a phone the window leaves a 12px
   gutter. Scoped to this one sheet; the shared .modal rules are untouched. */
#location-picker-modal .modal-content {
    padding: 0;
    max-width: 460px;
}

/* The header's own bottom margin (design-system 1.5rem) stacked on the body padding, so the first line sat about 40px under the header's border;
   with it gone the first visible line sits one body padding (16px on a phone) under it. An empty suggestion host (Remote Support tickets, the
   chip-opened picker) is a flex child that still took a gap slot: it takes no space now. The Clear link sits one flex gap (0.75rem, 12px)
   under the last control, no extra margin (it had 1rem on top of the gap). */
#location-picker-modal .modal-header {
    margin-bottom: 0;
}

#location-picker-modal #location-suggest-host:empty {
    display: none;
}

#location-picker-modal .lp-clear-row {
    text-align: right;
}

@media (max-width: 480px) {
    #location-picker-modal .modal-content {
        width: calc(100% - 24px);
    }

    #location-picker-modal .modal-header,
    #location-picker-modal .modal-body {
        padding: 16px;
    }
}