/* ========== Base / Bootstrap complements ========== */
html {
    font-size: 14px;
    height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    height: 100%;
    min-height: 100vh;
    /* margin-bottom: 60px;  -- removed unless required elsewhere */
    display: flex;
    flex-direction: column;
}

/* The main content wrapper just before <footer> in _Layout.cshtml */
.page-content {
    flex: 1 0 auto;
    min-height: 0;
    padding-bottom: 3.5rem;
}

/* Footer stays in normal flow and above background content */
footer.border-top.footer.text-muted {
    /* position: relative; */
    /* z-index: 100; */
    background: #fff;
}

/* ========== Karaoke Admin Page (scoped) ========== */
/* Wrap your page content in <div class="kq-admin-page"> inside the Razor page */
.kq-admin-page .kq-grid {
    display: grid;
    grid-template-columns: clamp(280px, 28%, 420px) minmax(560px, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* Panels */
.kq-admin-page :where(.panel) {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem;
    background: #fff;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Events listbox fills its panel width */
.kq-admin-page select#eventsList {
    width: 100%;
    min-height: 420px;
    font-size: .95rem;
    line-height: 1.25;
}

/* Edit form grid: labels fixed, inputs flexible (no overflow) */
.kq-admin-page .form-grid {
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    width: 100%;
}

    /* Ensure Bootstrap controls don’t overflow the grid cell */
    .kq-admin-page .form-grid .form-control {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

/* Optional polish */
.kq-admin-page .panel h2 {
    margin-bottom: .75rem;
}

.kq-admin-page .form-actions {
    margin-top: 1rem;
}

/* Stack on narrow screens */
@media (max-width: 992px) {
    .kq-admin-page .kq-grid {
        grid-template-columns: 1fr;
    }
}

/* Safety rails */
.kq-admin-page .kq-grid {
    transform: none;
    filter: none;
}

/* Validation messages align under inputs */
.kq-admin-page .form-grid .text-danger,
.kq-admin-page .form-grid .field-validation-error,
.kq-admin-page .form-grid [data-valmsg-for] {
    grid-column: 2 / 3;
    margin-top: .25rem;
    display: block;
}

/* ===== QueueManagement: 3-column grid ===== */
.kq-admin-page .kq-grid.kq-grid--queue {
    display: grid;
    grid-template-columns: clamp(280px, 30%, 520px) clamp(44px, 5vw, 64px) minmax(360px, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    width: 100%;
}

/* Panels within queue grid */
.kq-admin-page :where(.panel.panel-flex) {
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.kq-admin-page :where(.panel.panel-flex .form-select) {
    flex: 1 1 auto;
    min-height: 320px;
}

/* Middle arrow panel */
.kq-admin-page :where(.panel.panel-center) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .75rem; /* keeps the column slim */
}

.kq-admin-page .panel.panel-center .btn {
    width: 44px;
    height: 36px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
}

/* Keep things readable on narrow screens by stacking */
@media (max-width: 992px) {
    .kq-admin-page .kq-grid.kq-grid--queue {
        grid-template-columns: 1fr;
    }
}

/* Strike-through completed items in the right listbox */
.kq-admin-page #queueList option[data-completed="true"] {
    text-decoration: line-through;
    color: #4b5563; /* slightly darker for contrast */
}

/* Full-page overlay for busy state on QueueManagement */
.kq-admin-page #kqBusy.kq-busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    z-index: 2000; /* higher than Bootstrap modals so it covers everything */
    display: none;
}

.kq-admin-page #kqBusy .kq-busy-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.kq-admin-page.is-busy #kqBusy {
    display: block;
}

.kq-admin-page.is-busy {
    pointer-events: none;
}

    .kq-admin-page.is-busy #kqBusy {
        pointer-events: auto;
    }

    .kq-admin-page.is-busy, .kq-admin-page.is-busy * {
        cursor: wait !important;
    }

/* ===== Large-format scaling ===== */
.kq-admin-page {
    font-size: 1.5rem;
}

    .kq-admin-page h1,
    .kq-admin-page h2,
    .kq-admin-page h3 {
        font-size: 1.2em;
        font-weight: 700;
    }

    .kq-admin-page select,
    .kq-admin-page button,
    .kq-admin-page .form-check-label,
    .kq-admin-page .form-control {
        font-size: 1.2rem;
    }

    .kq-admin-page .info-pane {
        font-size: 1.2rem;
    }

    .kq-admin-page select option {
        font-size: 1.2rem;
    }

    .kq-admin-page .panel-center .btn {
        font-size: 2.2rem;
        width: 70px;
        height: 70px;
        padding: 0;
    }

    /* Accessibility: visible focus */
    .kq-admin-page :where(button, .btn, select, [tabindex]:not([tabindex="-1"])):focus-visible {
        outline: 3px solid #2563eb;
        outline-offset: 2px;
    }

    .kq-admin-page .panel-center .btn:focus-visible {
        box-shadow: 0 0 0 4px rgba(37,99,235,.35);
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .kq-admin-page .spinner,
    .kq-admin-page [aria-busy="true"]::before {
        animation: none !important;
        transition: none !important;
    }
}

/* Mobile touch comfort for arrow buttons */
@media (max-width: 576px) {
    .kq-admin-page .panel-center .btn {
        width: 80px;
        height: 80px;
        font-size: 2.4rem;
    }
}


/* ===== Unified control buttons (QueueManagement) ===== */

/* Brand-ish tokens (adjust to taste) */
:root {
    --kq-ctrl-bg: #2563eb; /* enabled background (blue-600) */
    --kq-ctrl-bg-hover: #1d4ed8; /* hover */
    --kq-ctrl-bg-active: #1e40af; /* active/pressed */
    --kq-ctrl-text: #ffffff; /* icon/text on enabled */
    --kq-ctrl-border: transparent; /* border when enabled */

    --kq-ctrl-disabled-bg: #e5e7eb; /* disabled background (gray-200) */
    --kq-ctrl-disabled-text: #9ca3af; /* disabled icon/text (gray-400) */
    --kq-ctrl-disabled-border: #d1d5db; /* disabled border (gray-300) */
}

/* Base: same shape/sizing everywhere the class is used */
.kq-admin-page .kq-ctrl {
    /* sizing tuned for both middle & right columns */
    inline-size: 48px; /* width */
    block-size: 40px; /* height */
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem; /* arrow size */
    line-height: 1;
    font-weight: 600;
    color: var(--kq-ctrl-text);
    background-color: var(--kq-ctrl-bg);
    border: 1px solid var(--kq-ctrl-border);
    box-shadow: none;
    transition: background-color .12s ease-out, transform .06s ease-out, box-shadow .12s ease-out;
}

    /* Hover / Active (enabled only) */
    .kq-admin-page .kq-ctrl:not(:disabled):hover {
        background-color: var(--kq-ctrl-bg-hover);
    }

    .kq-admin-page .kq-ctrl:not(:disabled):active {
        background-color: var(--kq-ctrl-bg-active);
        transform: translateY(1px);
    }

    /* Disabled: clearly different */
    .kq-admin-page .kq-ctrl:disabled,
    .kq-admin-page .kq-ctrl[aria-disabled="true"] {
        color: var(--kq-ctrl-disabled-text);
        background-color: var(--kq-ctrl-disabled-bg);
        border-color: var(--kq-ctrl-disabled-border);
        cursor: not-allowed;
        opacity: 1; /* keep fully opaque; rely on color change */
        box-shadow: none;
    }

    /* Keyboard focus (accessible & visible) */
    .kq-admin-page .kq-ctrl:focus-visible {
        outline: 3px solid #f59e0b; /* amber focus ring for contrast */
        outline-offset: 2px;
    }

/* Make the middle panel use these exact sizes (overrides earlier defaults) */
.kq-admin-page .panel.panel-center .kq-ctrl {
    inline-size: 56px;
    block-size: 44px;
    font-size: 1.15rem;
}

/* Optional: larger touch targets on very small screens */
@media (max-width: 576px) {
    .kq-admin-page .panel.panel-center .kq-ctrl {
        inline-size: 70px;
        block-size: 70px;
        font-size: 2rem;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .kq-admin-page .kq-ctrl {
        transition: none !important;
    }
}

/* ---- If you want square buttons instead of rounded, reduce the radius ---- */
/* .kq-admin-page .kq-ctrl { border-radius: 4px; } */

/* Make the priority input narrow and keep number spinner usable */
#priority {
    max-width: 6rem; /* ~96px; adjust to taste */
    min-width: 4.5rem; /* ensures spinners don’t clip */
}

/* Align the help text nicely with the input baseline and allow wrap on small screens */
.priority-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap; /* wraps help text under input on small screens */
}

.priority-help {
    font-size: 1.2rem; /* same as .form-text */
    color: #6c757d; /* Bootstrap text-muted color */
}