/* ============================================================
 * panel-shell.css — Unified Panel / Modal Shell
 * ============================================================
 * Shared structural primitives for every backdrop + content-box
 * pattern in the app.  Each panel keeps its own specific class
 * for z-index, unique sizing, and any colour overrides; the
 * panel-shell classes handle everything that was duplicated.
 *
 * ── Composing a panel ──────────────────────────────────────
 *
 *   <div class="my-panel panel-shell [backdrop-modifier]">
 *     <div class="my-content panel-shell-content [size] [look]">
 *       <div class="my-header panel-shell-header"> … </div>
 *       <div class="my-body   panel-shell-body">   … </div>
 *     </div>
 *   </div>
 *
 * ── Backdrop modifiers (.panel-shell--*) ───────────────────
 *   All modifiers use --modal-overlay-darkness / --modal-overlay-blur CSS
 *   variables (user-configurable via Settings → Preferences) so every popup
 *   is consistent.  The modifier classes are retained for semantic clarity.
 *   --heavy-blur       same darkness + blur as default  (settings, admin, game-settings, permission)
 *   --medium-blur      same darkness + blur as default  (modal-overlay generic)
 *   --no-blur          same darkness, no blur            (wake modal — opacity-driven)
 *   --child-overlay    transparent + no blur             (admin panel — backdrop is a child div)
 *
 * ── Content-box size modifiers (.panel-shell-content--*) ───
 *   --sm    max-width:  500 px
 *   --md    max-width:  700 px
 *   --lg    max-width: 1000 px
 *   --wide  max-width:  900 px
 *   --xl    max-width: 1600 px  width: 95%
 *
 * ── Content-box appearance modifiers ───────────────────────
 *   --rounded-lg      border-radius: 20px   (admin, settings, game-settings)
 *   --dark-gradient   dark gradient bg      (admin, permission modal)
 *   --purple          translucent purple    (wake modal)
 * ============================================================ */


/* ------------------------------------------------------------------ */
/* Backdrop                                                            */
/* ------------------------------------------------------------------ */

.panel-shell {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, var(--modal-overlay-darkness));
    backdrop-filter: blur(var(--modal-overlay-blur));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modifier: stronger blur + slightly lighter backdrop */
.panel-shell--heavy-blur {
    background: rgba(0, 0, 0, var(--modal-overlay-darkness));
    backdrop-filter: blur(var(--modal-overlay-blur));
}

/* Modifier: medium blur (generic modal-overlay) */
.panel-shell--medium-blur {
    background: rgba(0, 0, 0, var(--modal-overlay-darkness));
    backdrop-filter: blur(var(--modal-overlay-blur));
}

/* Modifier: no blur — used by panels that rely on opacity transitions */
.panel-shell--no-blur {
    background: rgba(0, 0, 0, var(--modal-overlay-darkness));
    backdrop-filter: none;
}

/* Modifier: panel delegates its backdrop to a child overlay element */
.panel-shell--child-overlay {
    background: transparent;
    backdrop-filter: none;
}


/* ------------------------------------------------------------------ */
/* Content box                                                         */
/* ------------------------------------------------------------------ */

.panel-shell-content {
    background: var(--secondary-bg);
    border: 2px solid var(--accent-color);
    border-radius: 16px;
    width: 90%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
}

/* ── Size modifiers ── */
.panel-shell-content--sm   { max-width:  500px; }
.panel-shell-content--md   { max-width:  700px; }
.panel-shell-content--lg   { max-width: 1000px; }
.panel-shell-content--wide { max-width:  900px; }
.panel-shell-content--xl   { max-width: 1600px; width: 95%; }

/* ── Appearance modifiers ── */

/* Slightly larger corner radius used by settings / admin panels */
.panel-shell-content--rounded-lg {
    border-radius: 20px;
}

/* Deep dark gradient background used by the admin and permission modals */
.panel-shell-content--dark-gradient {
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.98) 0%, rgba(30, 30, 45, 0.98) 100%);
}

/* Semi-transparent purple tint used by the wake modal */
.panel-shell-content--purple {
    background: rgba(60, 30, 90, 0.5);
    border: 1px solid rgba(130, 90, 180, 0.6);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}


/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.panel-shell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--accent-color);
    flex-shrink: 0;
}

.panel-shell-header h2,
.panel-shell-header h3 {
    margin: 0;
    color: var(--text-primary);
}


/* ------------------------------------------------------------------ */
/* Body                                                                */
/* ------------------------------------------------------------------ */

.panel-shell-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;  /* allows flex child to shrink below content size */
}