/*
 * Screen-scoped styles for the admin and auth screens (wave 1, slice B).
 *
 * Everything here is a gap in the shared design system that could not be
 * closed without editing files three sibling agents also own. Tokens only —
 * no literal colours, no physical direction properties.
 *
 * Loaded per screen from {% block extra_head %}.
 */

/* --- Table cells ------------------------------------------------------- */

/* "No value" has to read as no value, not as a cell that failed to load.
   The em dash is decorative; the word is what a screen reader announces. */
.ds-cell-blank {
    color: var(--ds-text-muted);
}

/* A second line under a badge — the sale price beneath the sale badge. */
.ds-cell-note {
    display: block;
    margin-block-start: var(--ds-space-1);
    font-size: var(--ds-fs-xs);
    color: var(--ds-text-muted);
}

/* --- Forms ------------------------------------------------------------- */

/* A subheading inside a form grid (e.g. "Sale Settings"). The design system
   has no form-section macro; this is the gap. */
.ds-form-section {
    margin-block: var(--ds-space-4) 0;
    padding-block-start: var(--ds-space-4);
    border-block-start: 1px solid var(--ds-border);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-semibold);
    letter-spacing: var(--ds-tracking-caps);
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

/* The design system has no file_field macro, so the file input rides on
   .ds-input and needs the native button re-skinned. */
.ds-input[type="file"] {
    padding-block: var(--ds-space-2);
}

.ds-input[type="file"]::file-selector-button {
    margin-inline-end: var(--ds-space-4);
    padding-block: var(--ds-space-2);
    padding-inline: var(--ds-space-4);
    border: none;
    border-radius: var(--ds-radius-btn);
    background: var(--ds-bg-hover);
    color: var(--ds-text);
    font: inherit;
    cursor: pointer;
}

/* Two controls that act as one: an amount and the button that saves it. */
.ds-inline-field {
    display: flex;
    align-items: flex-end;
    gap: var(--ds-space-2);
}

.ds-inline-field .ds-field {
    flex: 1 1 auto;
    min-width: 0;
}

.ds-field--suffix {
    position: relative;
}

.ds-field__suffix {
    align-self: center;
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-sm);
}

/* --- Standing notes ----------------------------------------------------- */

/*
 * NOT alert(): base.html auto-closes every .alert that is not .alert-danger
 * five seconds after load, which is right for a flash and wrong for a
 * permanent explanation. A standing note on the page uses this instead.
 */
.ds-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    padding: var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    background: var(--ds-tint-warning);
    color: var(--ds-warning-ink);
    font-size: var(--ds-fs-sm);
    line-height: var(--ds-lh-body);
}

.ds-note--info {
    background: var(--ds-tint-info);
    color: var(--ds-info-ink);
}

.ds-note--danger {
    background: var(--ds-tint-danger);
    color: var(--ds-danger-ink);
}

/* --- Modals ------------------------------------------------------------ */

/*
 * Gap, not preference: the bootstrap build in base.html leaves
 * .modal-header at justify-content: normal and relies on .btn-close's
 * margin-inline-start: auto to push the close control to the end.
 * .ds-modal__close replaces .btn-close, so the X sits glued to the title.
 * Measured: header 798px wide, title at x=345 w=164, close at x=509.
 * The real fix belongs in design-system.css, which this slice may not touch.
 */
.ds-modal .modal-header {
    justify-content: space-between;
    gap: var(--ds-space-4);
}

.ds-modal .modal-title {
    flex: 1 1 auto;
}

.ds-modal__subject {
    font-size: var(--ds-fs-lg);
    margin-block: var(--ds-space-2) var(--ds-space-4);
}

/* --- Lists ------------------------------------------------------------- */

/* Checklists and hint lists: bullets replaced by an icon in the markup. */
.ds-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--ds-space-3);
}

.ds-list li {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-3);
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-sm);
}

.ds-list code {
    color: var(--ds-gold);
    font-family: var(--ds-font-mono);
}

.ds-list__icon {
    color: var(--ds-success);
    flex: none;
}

/* --- Two-column screen layout ------------------------------------------ */

.ds-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ds-space-6);
    align-items: start;
}

@media (max-width: 900px) {
    .ds-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Quick-add preview rows -------------------------------------------- */

.ds-slot {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    margin-block-end: var(--ds-space-3);
}

.ds-slot__body {
    min-width: 0;
}

.ds-slot__name {
    font-weight: var(--ds-fw-semibold);
}

.ds-slot__meta {
    font-size: var(--ds-fs-xs);
    color: var(--ds-text-muted);
}

/* --- Admin index -------------------------------------------------------- */

.ds-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ds-space-4);
}

.ds-tool {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-4);
    padding: var(--ds-card-padding);
    border-radius: var(--ds-radius-card);
    background: var(--ds-bg-card);
    color: inherit;
    text-decoration: none;
    transition: background var(--ds-transition);
}

.ds-tool:hover,
.ds-tool:focus-visible {
    background: var(--ds-bg-hover);
}

.ds-tool__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-tint-gold);
    color: var(--ds-gold);
}

.ds-tool__body {
    display: grid;
    gap: var(--ds-space-1);
    min-width: 0;
}

.ds-tool__title {
    font-weight: var(--ds-fw-semibold);
}

.ds-tool__blurb {
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-sm);
    line-height: var(--ds-lh-body);
}

/* --- Auth screens ------------------------------------------------------ */

/* Login and add-user are single, centred cards, per the login mockup. */
.ds-auth {
    max-width: 460px;
    margin-inline: auto;
}

.ds-auth__brand {
    text-align: center;
    margin-block-end: var(--ds-space-6);
}

.ds-auth__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 72px;
    block-size: 72px;
    border-radius: var(--ds-radius-md);
    background: linear-gradient(135deg, var(--ds-wine), var(--ds-wine-light));
    font-size: var(--ds-fs-2xl);
    margin-block-end: var(--ds-space-4);
}

.ds-auth__title {
    font-size: var(--ds-fs-2xl);
    font-weight: var(--ds-fw-bold);
    margin: 0;
}

.ds-auth__tagline {
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-sm);
    margin-block-start: var(--ds-space-1);
}

/* --- Progress ---------------------------------------------------------- */

.ds-progress {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    margin-block-start: var(--ds-space-4);
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-sm);
}