/* ---------------------------------------------------------------------------
   Room skins — one per entry in RoomUiCatalog (Contracts/Classes/RoomUiCatalog.cs).
   ClassRoom.razor puts "ui-<id>" on .room-stage, plus "theme-light" for skins whose
   tone is light. "Classic" has no rules here: it is the original Nebula Glass room
   from app.css. Loaded after app.css so equal-specificity rules win by order.
   Also holds the picker tiles shown in the class create/edit forms. ----------- */

/* ---- picker (RoomUiPicker.razor) ---- */
.room-ui-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.room-ui-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.room-ui-card:hover {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
}

.room-ui-card.selected {
    border-color: var(--mud-palette-primary);
    box-shadow: none;
}

.room-ui-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    text-align: start;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.room-ui-link {
    font-size: .7rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
    border-top: 1px dashed var(--mud-palette-lines-default);
    padding-top: 5px;
}

.room-ui-link:hover { text-decoration: underline; }

.room-ui-preview {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 56px;
    padding: 6px;
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.room-ui-preview i {
    border-radius: 4px;
    display: block;
}

.room-ui-preview i:first-child {
    grid-row: span 2;
}

.room-ui-name {
    font-weight: 700;
    font-size: .85rem;
}

.room-ui-desc {
    font-size: .7rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.room-ui-tone {
    align-self: flex-start;
    font-size: .65rem;
    padding: 0 8px;
    border-radius: 99px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* ---- Theater: dark, cinematic, soft spotlight ---- */
.room-stage.ui-theater {
    background: radial-gradient(900px 520px at 50% -8%, rgba(255, 255, 255, .10), transparent 65%),
                radial-gradient(700px 480px at 50% 120%, rgba(124, 140, 255, .18), transparent 65%),
                #07080f;
    animation: none;
}
.room-stage.ui-theater::before { display: none; }
.room-stage.ui-theater .pod {
    background: rgba(22, 24, 40, .74);
    border-color: rgba(255, 255, 255, .1);
    border-radius: 26px;
    box-shadow: none;
}
.room-stage.ui-theater .pod-accent-bar { height: 2px; opacity: .55; box-shadow: none; }
.room-stage.ui-theater .control-dock { border-radius: 28px !important; background: rgba(22, 24, 40, .78) !important; }

/* ---- Aurora: light, glassy, pastel ---- */
.room-stage.ui-aurora {
    background: radial-gradient(620px 420px at 12% 6%, #c7b8ff, transparent 70%),
                radial-gradient(540px 420px at 92% 14%, #a9e4ff, transparent 70%),
                radial-gradient(620px 460px at 62% 104%, #ffc9e0, transparent 70%),
                #eef0ff;
    animation: none;
}
.room-stage.ui-aurora::before { display: none; }
.room-stage.ui-aurora .pod {
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 24px;
    box-shadow: none;
}
.room-stage.ui-aurora .control-dock { background: rgba(255, 255, 255, .6) !important; }

/* ---- Brutalist: thick borders, hard shadows ---- */
.room-stage.ui-brutalist {
    background: radial-gradient(#0000001a 1.2px, transparent 1.2px) 0 0 / 22px 22px, #fff7e0;
    animation: none;
    box-shadow: none;
    border: 3px solid #111;
    border-radius: 20px;
}
.room-stage.ui-brutalist::before { display: none; }
.room-stage.ui-brutalist .pod {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 3px solid #111;
    border-radius: 16px;
    box-shadow: none;
}
.room-stage.ui-brutalist .pod:hover { box-shadow: none; }
.room-stage.ui-brutalist .pod-header { background: var(--pod-b); border-bottom: 3px solid #111; }
.room-stage.ui-brutalist .pod-accent-bar { display: none; }
.room-stage.ui-brutalist .pod-icon-chip { background: #fff; color: #111; border: 2px solid #111; box-shadow: none; }
.room-stage.ui-brutalist .control-dock {
    background: #ffd43b !important;
    border: 3px solid #111;
    border-radius: 18px !important;
    box-shadow: none;
    backdrop-filter: none;
}
.room-stage.ui-brutalist .dock-icon-btn.mud-icon-button-root { border: 2px solid #111; box-shadow: none; }

/* ---- Arcade: pixel, neon, dark ---- */
.room-stage.ui-arcade {
    background: linear-gradient(rgba(39, 240, 255, .07) 1px, transparent 1px) 0 0 / 34px 34px,
                linear-gradient(90deg, rgba(39, 240, 255, .07) 1px, transparent 1px) 0 0 / 34px 34px,
                #0d0b2e;
    animation: none;
    border-radius: 0;
    border: 4px solid #f2f0ff;
    box-shadow: none;
}
.room-stage.ui-arcade::before {
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
    background-size: auto;
}
.room-stage.ui-arcade .pod {
    background: #17124a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 4px solid #f2f0ff;
    border-radius: 0;
    box-shadow: none;
}
.room-stage.ui-arcade .pod-header { border-bottom: 3px solid #27f0ff; }
.room-stage.ui-arcade .pod-accent-bar { height: 4px; box-shadow: none; }
.room-stage.ui-arcade .pod-icon-chip { border-radius: 0; border: 2px solid #000; box-shadow: none; }
.room-stage.ui-arcade .control-dock {
    background: #17124a !important;
    border: 4px solid #f2f0ff;
    border-radius: 0 !important;
    box-shadow: none;
    backdrop-filter: none;
}
.room-stage.ui-arcade .dock-icon-btn.mud-icon-button-root { border-radius: 0 !important; border: 3px solid #000; box-shadow: none; }

/* ---- Mono: black, white, one lime accent ---- */
.room-stage.ui-mono { background: #0a0a0a; animation: none; box-shadow: none; border: 1px solid #232323; }
.room-stage.ui-mono::before { display: none; }
.room-stage.ui-mono .pod {
    --pod-a: #c6ff3d;
    --pod-b: #c6ff3d;
    background: #121212;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #232323;
    border-radius: 18px;
    box-shadow: none;
}
.room-stage.ui-mono .pod:hover { border-color: #c6ff3d; box-shadow: none; }
.room-stage.ui-mono .pod-accent-bar { height: 2px; box-shadow: none; }
.room-stage.ui-mono .pod-icon-chip { background: #c6ff3d; color: #0a0a0a; box-shadow: none; }
.room-stage.ui-mono .control-dock { background: #121212 !important; border: 1px solid #232323; border-radius: 16px !important; box-shadow: none; }

/* ---- Notebook: paper on a wooden desk ---- */
.room-stage.ui-notebook {
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .04) 0 3px, transparent 3px 9px), #c9a67a;
    animation: none;
}
.room-stage.ui-notebook::before { display: none; }
.room-stage.ui-notebook .pod {
    background: #fffdf5;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    box-shadow: none;
}
.room-stage.ui-notebook .pod-accent-bar { height: 4px; box-shadow: none; }
.room-stage.ui-notebook .pod-body { background: repeating-linear-gradient(transparent 0 27px, #e1ecf7 27px 28px); }
.room-stage.ui-notebook .control-dock {
    background: #fffdf5 !important;
    border: 2px solid #2b2a33;
    border-radius: 10px !important;
    box-shadow: none;
    backdrop-filter: none;
}

/* ---- Clay: soft, pillowy, pastel ---- */
.room-stage.ui-clay { background: #eef0ff; animation: none; box-shadow: none; }
.room-stage.ui-clay::before { display: none; }
.room-stage.ui-clay .pod {
    background: #eef0ff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 28px;
    box-shadow: none;
}
.room-stage.ui-clay .pod-accent-bar { display: none; }
.room-stage.ui-clay .control-dock {
    background: #eef0ff !important;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}

/* ---- Heritage: indigo, turquoise and gold ---- */
.room-stage.ui-heritage {
    background: repeating-linear-gradient(90deg, #d6a84f 0 14px, #13265e 14px 28px, #0f8a93 28px 42px, #13265e 42px 56px) 0 0 / 100% 10px no-repeat,
                radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(15, 138, 147, .12) 9px 10px, transparent 10px) 0 0 / 44px 44px,
                #fbf5e6;
    animation: none;
    box-shadow: none;
    padding-top: 28px;
}
.room-stage.ui-heritage::before { display: none; }
.room-stage.ui-heritage .pod {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid #e8dcc0;
    border-top: 5px solid #0f8a93;
    border-radius: 10px 10px 18px 18px;
    box-shadow: none;
}
.room-stage.ui-heritage .pod-accent-bar { display: none; }
.room-stage.ui-heritage .pod-title { color: #13265e; }
.room-stage.ui-heritage .control-dock {
    background: #13265e !important;
    border: 2px solid #d6a84f;
    backdrop-filter: none;
}
.room-stage.ui-heritage .control-dock,
.room-stage.ui-heritage .control-dock .mud-typography,
.room-stage.ui-heritage .control-dock .mud-switch-label { color: #fbf5e6 !important; }

/* ---- Simple: flat, gray, no shadows — classic desktop conferencing software
   (modeled on a reference screenshot), not this app's own "glass" look at all:
   square-ish panels, plain gray title bars, a flat rectangular toolbar instead
   of a floating glass pill, and explicitly no box-shadow anywhere, per request. */
.room-stage.ui-simple {
    background: #d7dadf;
    animation: none;
    box-shadow: none;
    border: 1px solid #b7bbc2;
    border-radius: 8px;
}
.room-stage.ui-simple::before { display: none; }

.room-stage.ui-simple .pod {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #b7bbc2;
    border-radius: 4px;
    box-shadow: none;
}
.room-stage.ui-simple .pod:hover { box-shadow: none; border-color: #8f94a0; }
.room-stage.ui-simple .pod.pod-collapsed { box-shadow: none; }

.room-stage.ui-simple .pod-header { background: #eceef1; border-bottom: 1px solid #d7dadf; }
.room-stage.ui-simple .pod-accent-bar { display: none; }
.room-stage.ui-simple .pod-icon-chip { background: #5a6270; box-shadow: none; }
.room-stage.ui-simple .pod-title { color: #23262b; }
.room-stage.ui-simple .pod-drag-grip { color: #9aa0ab; }
.room-stage.ui-simple .pod-btn { color: #5a6270; }
.room-stage.ui-simple .pod-btn:hover { background: #d7dadf; color: #23262b; }
.room-stage.ui-simple .pod-resize-handle { background-image: radial-gradient(circle, #9aa0ab 1.4px, transparent 1.4px); }

.room-stage.ui-simple .pod-body,
.room-stage.ui-simple .pod-body .mud-typography,
.room-stage.ui-simple .pod-body p,
.room-stage.ui-simple .pod-body span,
.room-stage.ui-simple .pod-body strong { color: #23262b; }
.room-stage.ui-simple .pod-body .mud-secondary-text,
.room-stage.ui-simple .pod-body .mud-typography-caption { color: #6b7280 !important; }
.room-stage.ui-simple .pod-body a, .room-stage.ui-simple .pod-body .mud-link { color: #2563a8 !important; }
.room-stage.ui-simple .pod-body .mud-input-outlined-border { border-color: #b7bbc2 !important; }
.room-stage.ui-simple .pod-body .mud-input-outlined { background: #fff; border-radius: 4px; }
.room-stage.ui-simple .pod-body .mud-input-slot,
.room-stage.ui-simple .pod-body input,
.room-stage.ui-simple .pod-body textarea { color: #23262b !important; -webkit-text-fill-color: #23262b; }
.room-stage.ui-simple .pod-body .mud-input-label { color: #6b7280 !important; }
.room-stage.ui-simple .pod-body::-webkit-scrollbar-thumb { background: #9aa0ab; }

/* Flat rectangular toolbar instead of the floating glass pill every other skin uses. */
.room-stage.ui-simple .control-dock {
    background: #2f2f33 !important;
    backdrop-filter: none;
    border: 1px solid #1c1c1f;
    border-radius: 6px !important;
    box-shadow: none;
}
.room-stage.ui-simple .control-dock,
.room-stage.ui-simple .control-dock .mud-typography,
.room-stage.ui-simple .control-dock .mud-switch-label { color: #e8e9ec !important; }
.room-stage.ui-simple .dock-divider { background: #4a4d55; }
/* Targets every MudBlazor "filled" button inside the dock by its own mud-button-filled
   class, not by dock-icon-btn/dock-btn — those custom classes land on a wrapper for a
   MudMenu's activator button (the Pods/more-options menus), never on the actual <button>
   MudBlazor renders, so a selector chained off them misses exactly those two buttons.
   mud-button-filled is what MudBlazor itself puts on the real element every time, icon
   button or menu activator alike, which is also where that elevation shadow comes from —
   overriding it here, instead of only the shadow property, is what actually removes it. */
.room-stage.ui-simple .control-dock .mud-button-filled {
    box-shadow: none !important;
    background: #45484f !important;
    transition: background-color .15s ease;
}
.room-stage.ui-simple .control-dock .mud-button-filled:hover {
    transform: none;
    box-shadow: none !important;
    background: #565a63 !important;
}

/* Flush-to-edge, Adobe-Connect-style layout for Simple's light variant specifically (the
   default room look): no breathing room around the toolbar/canvas, and the toolbar sits
   right on top of the canvas instead of the 12px gap every other skin keeps (app.css's
   .control-dock.mb-3). */
.room-stage.ui-simple.theme-light {
    padding: 0;
}
.room-stage.ui-simple.theme-light .control-dock {
    /* !important: the "mb-3" MudBlazor spacing utility on this element (ClassRoom.razor) sets
       margin-bottom with its own !important, so a plain override here is silently ignored. */
    margin-bottom: 3px !important;
}

/* ---- Room preview page (RoomPreview.razor) ---- */
.room-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0 0 10px;
    background: #fff;
    border-bottom: 1px solid #e3e6ef;
    color: #1f2147;
    font-size: .85rem;
}

.room-preview-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.room-preview-note { color: #7b7f99; font-size: .75rem; }
.room-preview-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.room-preview-chip {
    padding: 2px 12px;
    border-radius: 99px;
    border: 1px solid #d6d9e8;
    color: #4a4d6b;
    text-decoration: none;
    font-size: .78rem;
    transition: background .15s ease, color .15s ease;
}

.room-preview-chip:hover { background: #f1f2fa; }
.room-preview-chip.active { background: #4b3fcf; border-color: #4b3fcf; color: #fff; }

.preview-tile {
    position: relative;
    display: grid;
    place-items: center;
    font-size: 2rem;
    border-radius: 10px;
    background: rgba(125, 140, 255, .22);
    min-height: 0;
}

.preview-tile small {
    position: absolute;
    bottom: 3px;
    inset-inline: 4px;
    text-align: center;
    font-size: .62rem;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border-radius: 6px;
}