/* ============================================================
   admin-panels.css — shared floating-panel component + form/button
   primitives used by the Admin Tools-family pages (admin-tools.html,
   deathroll.html, gallery-management.html).
   ============================================================
   This is the CSS that was byte-for-byte (or near enough) pasted into
   each of those pages' own <style> blocks. Extracted here so a look
   change only needs one edit instead of three. What's NOT here:
   each panel's own width/height/background-opacity (intentionally
   different per tool -- kept as a small override in that page's own
   <style>, after this stylesheet's <link>), and event-manager.html's
   .modal/.modal-content system, which is a different, unrelated
   component (not this one, just similarly-purposed) and was never
   actually duplicated with these three.
   ============================================================ */

/* ---- Buttons ---- */
.btn-cfg {
    border-radius: 2px;
    padding: 0.55rem 1.4rem;
    font-size: 0.8rem;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    transition: all 0.2s ease;
}
.btn-gold {
    border: 1px solid var(--crystal-gold);
    color: var(--crystal-gold);
}
.btn-gold:hover {
    background: color-mix(in srgb, var(--crystal-gold) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}
.btn-gold:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-aether {
    border: 1px solid var(--aether);
    color: var(--aether);
}
.btn-aether:hover {
    background: color-mix(in srgb, var(--aether) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}
.btn-restore {
    border: 1px solid var(--aether);
    color: var(--aether);
}
.btn-restore:hover {
    background: color-mix(in srgb, var(--aether) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}
.btn-remove {
    border: 1px solid var(--ember);
    color: var(--ember);
}
.btn-remove:hover {
    background: color-mix(in srgb, var(--ember) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}
.btn-small {
    padding: 0.3rem 0.8rem;
    font-size: 0.68rem;
}

/* ---- Floating panel shell (draggable header, native resize handle) ---- */
.floating-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(7, 11, 24, 0.5);
}
.floating-panel-overlay.open {
    display: block;
}

.floating-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width/height/min-width/min-height are set per-page, after this
       stylesheet loads -- each tool's panel is sized differently on
       purpose (e.g. denser tools run smaller). background/backdrop-filter
       now use the site's Theme-tool transparency setting (--surface-bg /
       --surface-blur, see css/theme.css) instead of a fixed value --
       note this changes the *default* look too: "None" (alpha 1, 0px
       blur) is fully opaque with no blur, replacing the old always-on
       rgba(13,20,40,0.8) + 14px blur. Matches how every other surface on
       the site (and the dashboard's own reference implementation) treats
       "None" as truly off, not a baseline amount of frost. */
    width: 560px;
    height: 640px;
    min-width: 380px;
    min-height: 400px;
    max-width: calc(100vw - 3rem);
    max-height: calc(100vh - 3rem);
    background: var(--surface-bg);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--aether-dim);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    display: none;
    flex-direction: column;
    overflow: hidden;
    resize: both;
}

/* Every tool sets its own min-width/min-height above (some inline via
   JS, some in that page's own <style> block) -- 460/420/380/360px,
   never revisited with a phone screen in mind. Below this breakpoint the
   panel stops being a centered floating box (a desktop pattern -- native
   drag-to-move and the resize:both corner handle are both mouse-only
   affordances with no touch equivalent, just dead space on a phone) and
   becomes a true full-screen sheet instead: edge-to-edge, no corners, no
   resize. `!important` is deliberate and narrow-purpose here -- it's
   what lets this one rule override every per-tool width/height/min-*
   override (inline and stylesheet alike) from a single shared place,
   instead of editing each tool's own file. inset:0 replacing the
   centered top/left/transform also solves the old narrow-landscape
   case for free (a short phone screen no longer needs its own separate
   height rule -- full-screen already fits either dimension). */
@media (max-width: 600px) {
    .floating-panel {
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-width: unset !important;
        min-height: unset !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        resize: none !important;
    }
    .panel-header {
        cursor: default;
    }
    .panel-close {
        width: 2.75rem !important;
        height: 2.75rem !important;
        font-size: 1.1rem !important;
    }
    .field-row {
        flex-direction: column;
        gap: 0.9rem;
    }
}
.floating-panel.open {
    display: flex;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--aether-dim);
    cursor: grab;
    user-select: none;
    flex: 0 0 auto;
}
.panel-header:active {
    cursor: grabbing;
}
.panel-title {
    font-family: 'Cinzel', serif;
    color: var(--crystal-gold);
    font-size: 1.05rem;
}
.panel-close {
    background: transparent;
    border: 1px solid var(--aether-dim);
    color: var(--parchment-dim);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.panel-close:hover {
    background: color-mix(in srgb, var(--ember) calc(var(--surface-alpha) * 100%), transparent);
    border-color: var(--ember);
    color: var(--void-deep);
}

.panel-body {
    flex: 1;
    overflow: auto;
    padding: 1.1rem;
}

.panel-section {
    margin-bottom: 1.75rem;
}
.panel-section h4 {
    font-family: 'Cinzel', serif;
    color: var(--aether);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(111, 215, 232, 0.15);
}

/* ---- Form fields ---- */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.9rem;
}
.field label {
    font-size: 0.75rem;
    color: var(--parchment-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.field select,
.field input[type='text'],
.field input[type='number'],
.field input[type='file'],
.field textarea {
    background: var(--void-soft);
    border: 1px solid var(--aether-dim);
    color: var(--parchment);
    padding: 0.5rem 0.7rem;
    border-radius: 2px;
    font-family: 'Spectral', serif;
    font-size: 0.85rem;
}
.field textarea {
    resize: vertical;
    min-height: 4rem;
}
.field-row {
    display: flex;
    gap: 0.75rem;
}
.field-row .field {
    flex: 1;
}

.panel-error {
    color: var(--ember);
    font-size: 0.8rem;
    margin-top: 0.4rem;
}
.panel-success {
    color: var(--aether);
    font-size: 0.8rem;
    margin-top: 0.4rem;
}
.panel-note {
    color: var(--parchment-dim);
    font-size: 0.72rem;
    margin-top: 0.3rem;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.toggle-row label {
    font-size: 0.85rem;
    color: var(--parchment);
}

/* ---- Admin row (list item pattern -- history lists, message pool, etc.) ---- */
.admin-row {
    background: rgba(20, 29, 56, 0.4);
    border: 1px solid var(--aether-dim);
    border-radius: 3px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
}
.admin-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.admin-row .r-content {
    color: var(--parchment);
    font-size: 0.85rem;
    flex: 1;
    white-space: pre-wrap;
}
.admin-row .r-inactive {
    opacity: 0.45;
}
.admin-row-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.admin-row .r-thumb {
    max-width: 80px;
    max-height: 80px;
    border-radius: 3px;
    margin-top: 0.5rem;
    display: block;
}
.admin-row .r-meta {
    font-size: 0.68rem;
    color: var(--parchment-dim);
    margin-top: 0.3rem;
}

/* ---- Roster search/browse dropdown (Death Roll, Attendance Manager) ---- */
.roster-browse-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 0.5rem;
    border: 1px solid var(--aether-dim);
    border-radius: 4px;
    padding: 0.4rem;
}
.roster-browse-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--parchment);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.roster-browse-item:hover {
    background: color-mix(in srgb, var(--aether-dim) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}
.roster-browse-item img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.roster-browse-item.added {
    opacity: 0.4;
    pointer-events: none;
}

/* ---- Status line / lists ---- */
.status-line {
    font-size: 0.82rem;
    color: var(--parchment);
    margin-bottom: 0.4rem;
}
.status-list {
    list-style: none;
    font-size: 0.78rem;
    color: var(--parchment-dim);
}
.status-list li {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(111, 215, 232, 0.08);
}

table.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
table.log-table th {
    text-align: left;
    color: var(--parchment-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    padding: 0.4rem;
    border-bottom: 1px solid var(--aether-dim);
}
table.log-table td {
    padding: 0.4rem;
    border-bottom: 1px solid rgba(111, 215, 232, 0.08);
    color: var(--parchment);
    vertical-align: top;
}
.status-ok {
    color: var(--aether);
}
.status-fail {
    color: var(--ember);
}