/*
 * The theme: what a server admin's choices actually paint, and the appearance screen itself.
 *
 * Two halves, and they are deliberately not allowed to mix.
 *
 *   THE THEMED HALF - everything under .oasis-themed and the .oasis-* component classes.
 *   These read the --oasis-* custom properties that lib/theme.php emits into :root, so a
 *   page that adds one line to its <head> is themed and every later change follows it. Not
 *   one value in here comes from an admin as text: the properties are written by PHP from
 *   parsed colours and clamped integers, and CSS treats an unparseable custom property as
 *   an invalid value at computed-value time - the declaration is dropped, the page renders.
 *
 *   THE ADMIN HALF - everything under .thm-*, which is admin/appearance.php's own screen.
 *   It uses LITERAL colours, never var(--oasis-*), because that screen is the one that fixes
 *   a bad theme and must never be subject to one. admin.php does not emit the :root block at
 *   all; the preview carries the properties on its own wrapper instead. See lib/theme.php.
 *
 * No scrollbar rules here. The launcher draws its own in home-style.css and a second set
 * fights it.
 */

/* ==========================================================================
   THE PERMANENT BRAND
   ==========================================================================
   The ENFORCEMENT is not here. oasis_theme_brand_lock_css() emits the same layout inline in
   the page, with !important on every property that could hide it, above whatever stylesheet
   the page loads - so the brand survives even this file failing to load. What is here is the
   copy that makes it LOOK right, on a page that only links this stylesheet: the appearance
   screen's preview is exactly that case, because the admin page deliberately does not emit
   the :root block. The two say the same thing on purpose.

   The colours are literals. If the mark read var(--oasis-accent) then setting the accent to
   the panel colour would make the brand vanish into its own background, which is the removal
   this is written to prevent. */
.oasis-brandlock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(9, 9, 9, .92);
    border: 1px solid #2c2b29;
    color: #d1cfcb;
    font-family: 'Bender', 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .9);
}
/* Deliberately NOT `.oasis-brandlock > *`. A display rule on every child outranks the
   [hidden] attribute, and the separator, the community name and the tagline are hidden by
   the preview script whenever they are empty. */
.oasis-brandlock-mark,
.oasis-brandlock-word { display: inline-block; }
/* The mark is a bordered tile, matching the O in the launcher header. Drawn as a box rather
   than left as a bare letter because "O" immediately followed by "OASIS" reads as one word. */
.oasis-brandlock-mark {
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border: 1px solid #b4a072;
    color: #b4a072;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(180, 160, 114, .55);
}
.oasis-brandlock-word {
    color: #b4a072;
    font-weight: 700;
    letter-spacing: .18em;
}
.oasis-brandlock-sep {
    color: #4a4845;
}
.oasis-brandlock-community {
    color: #d1cfcb;
    font-weight: 700;
    letter-spacing: .1em;
}
.oasis-brandlock-tagline {
    color: #6e6d6b;
    font-size: 11px;
    letter-spacing: .14em;
}

/* ==========================================================================
   THE THEMED COMPONENTS
   ==========================================================================
   The vocabulary another page uses once it has called oasis_theme_head(). Everything reads
   the custom properties, so a page written against these classes needs no further work when
   an admin changes a colour. */

.oasis-themed {
    background-color: var(--oasis-page-bg, #090909);
    color: var(--oasis-text, #d1cfcb);
}

/* The background art, dimmed by the admin's own slider. A separate layer rather than a
   background on the body: the dimming is a solid over the picture, and doing it with a
   gradient on the same element would fight whatever else the page puts there. */
.oasis-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--oasis-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.oasis-bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--oasis-page-bg-rgb, 9 9 9) / var(--oasis-bg-dim-alpha, .55));
}

.oasis-panel {
    background: var(--oasis-panel-bg, #141414);
    border: 1px solid var(--oasis-panel-border, #2c2b29);
    border-radius: var(--oasis-panel-radius, 0);
    padding: var(--oasis-panel-pad, 16px);
    color: var(--oasis-text, #d1cfcb);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, .9),
                0 0 20px rgb(var(--oasis-accent-rgb, 180 160 114) / calc(var(--oasis-glow-alpha, .4) * .35));
}

.oasis-heading {
    color: var(--oasis-accent, #b4a072);
    font-family: 'Bender', 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgb(var(--oasis-accent-rgb, 180 160 114) / var(--oasis-glow-alpha, .4));
}

.oasis-muted { color: var(--oasis-text-muted, #6e6d6b); }
.oasis-accent { color: var(--oasis-accent, #b4a072); }
.oasis-online { color: var(--oasis-online, #3db846); }
.oasis-warning { color: var(--oasis-warning, #b8463d); }

.oasis-rule {
    border: 0;
    border-top: 1px solid var(--oasis-panel-border, #2c2b29);
    margin: 14px 0;
}

/* A link and a button share the hover, because the house rule is one hover in this launcher:
   tarkov gold ground, BLACK lettering. Never the browser's blue-and-white. */
.oasis-link,
.oasis-btn {
    display: inline-block;
    font-family: 'Bender', 'Segoe UI', sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--oasis-accent, #b4a072);
    border: 1px solid var(--oasis-panel-border, #2c2b29);
    background: transparent;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.oasis-link:hover, .oasis-link:focus-visible,
.oasis-btn:hover,  .oasis-btn:focus-visible {
    background: var(--oasis-accent, #b4a072);
    border-color: var(--oasis-accent, #b4a072);
    /* Black on gold with the shipped palette - lib/theme.php picks whichever of black or
       white can actually be read on the accent the admin chose, so a dark accent does not
       produce a hover nobody can read. Never the browser's blue-and-white. */
    color: var(--oasis-accent-ink, #000);
    outline: none;
}

.oasis-hero {
    position: relative;
    min-height: 220px;
    border: 1px solid var(--oasis-panel-border, #2c2b29);
    border-radius: var(--oasis-panel-radius, 0);
    background-image: var(--oasis-hero-image, none);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* The optional page effects. Off is the ABSENCE of the class, so a toggle that fails to save
   leaves the effect where it was rather than turning something on. */
.oasis-themed.oasis-scanlines .oasis-panel {
    background-image: repeating-linear-gradient(
        180deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px);
}
.oasis-themed:not(.oasis-glitch) .glitch-text::before,
.oasis-themed:not(.oasis-glitch) .glitch-text::after {
    display: none;
}
.oasis-themed:not(.oasis-crt) .crt-overlay {
    display: none;
}

.oasis-density-compact .oasis-panel { padding: 10px; }
.oasis-density-roomy   .oasis-panel { padding: 24px; }

/* ==========================================================================
   THE APPEARANCE SCREEN
   ==========================================================================
   Literal colours throughout - see the file header. */

.thm-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 18px;
    align-items: start;
}
@media (max-width: 1200px) {
    .thm-split { grid-template-columns: minmax(0, 1fr); }
}

/* The preview follows the form down a long page, because the whole point of it is to be
   looked at while a control at the bottom is being dragged. */
.thm-preview-col { position: sticky; top: 14px; }

.thm-preview-stage {
    border: 1px solid #2c2b29;
    background: #0b0b0b;
    padding: 14px;
    display: grid;
    gap: 12px;
    /* The theme's own properties land on THIS element, from
       oasis_theme_scope_style(), so everything below is themed and the admin
       chrome around it is not. */
}

.thm-preview-frame {
    background: var(--oasis-page-bg, #090909);
    border: 1px solid var(--oasis-panel-border, #2c2b29);
    padding: 14px;
    display: grid;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.thm-preview-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--oasis-bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: calc(1 - var(--oasis-bg-dim-alpha, .55));
    pointer-events: none;
}
.thm-preview-frame > * { position: relative; }

.thm-preview-hero {
    min-height: 110px;
    border: 1px solid var(--oasis-panel-border, #2c2b29);
    border-radius: var(--oasis-panel-radius, 0);
    background-image: var(--oasis-hero-image, none);
    background-size: cover;
    background-position: center;
    background-color: #101010;
    display: flex;
    align-items: flex-end;
    padding: 10px;
}

.thm-preview-panel {
    background: var(--oasis-panel-bg, #141414);
    border: 1px solid var(--oasis-panel-border, #2c2b29);
    border-radius: var(--oasis-panel-radius, 0);
    padding: var(--oasis-panel-pad, 16px);
    color: var(--oasis-text, #d1cfcb);
    font-size: 12px;
    box-shadow: 0 0 18px rgb(var(--oasis-accent-rgb, 180 160 114) / calc(var(--oasis-glow-alpha, .4) * .35));
}
.thm-preview-title {
    color: var(--oasis-accent, #b4a072);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 6px;
    text-shadow: 0 0 12px rgb(var(--oasis-accent-rgb, 180 160 114) / var(--oasis-glow-alpha, .4));
}
.thm-preview-muted { color: var(--oasis-text-muted, #6e6d6b); font-size: 11px; }
.thm-preview-body  { color: var(--oasis-text, #d1cfcb); font-size: 12px; line-height: 1.5; }
.thm-preview-body :is(h1, h2, h3, h4) { color: var(--oasis-accent, #b4a072); font-size: 13px; }

.thm-preview-status { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; }
.thm-preview-status .on   { color: var(--oasis-online, #3db846); }
.thm-preview-status .warn { color: var(--oasis-warning, #b8463d); }

.thm-preview-btn {
    display: inline-block;
    border: 1px solid var(--oasis-accent, #b4a072);
    color: var(--oasis-accent, #b4a072);
    background: transparent;
    padding: 5px 12px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: default;
}
.thm-preview-btn:hover {
    background: var(--oasis-accent, #b4a072);
    color: var(--oasis-accent-ink, #000);
}

.thm-preview-panels { display: grid; gap: 6px; }
.thm-preview-row {
    border-left: 3px solid var(--oasis-accent, #b4a072);
    padding: 4px 8px;
    background: var(--oasis-panel-bg, #141414);
    color: var(--oasis-text, #d1cfcb);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The preview's live/stale marker. Literal colours: it is chrome, not content. */
.thm-preview-note {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6e6d6b;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.thm-preview-note b { color: #b4a072; font-weight: 700; }

/* ------------------------------------------------------------- colour rows --- */

.thm-color {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.thm-color-chip {
    width: 34px;
    height: 26px;
    border: 1px solid #2c2b29;
    flex: 0 0 auto;
    /* Painted by assets/theme.js from the field's value. A background-color set from a
       stored string is the one place a colour could reach CSS unparsed, so it is set as a
       property on a DOM node rather than written into a style attribute in PHP. */
}
.thm-color-hex {
    width: 108px;
    font-family: 'Consolas', monospace;
    letter-spacing: .05em;
    text-transform: lowercase;
}
.thm-swatches {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-left: auto;
}
.thm-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #2c2b29;
    padding: 0;
    cursor: pointer;
    background-clip: padding-box;
}
.thm-swatch:hover,
.thm-swatch:focus-visible {
    border-color: #b4a072;
    outline: none;
    transform: scale(1.15);
}
.thm-swatch.is-current { border-color: #b4a072; box-shadow: 0 0 0 1px #b4a072; }

/* The contrast readout beside a colour that has a rule. Gold when it passes, red when it
   does not - and the screen refuses nothing on that basis, it corrects and says so. */
.thm-contrast {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6e6d6b;
    flex-basis: 100%;
}
.thm-contrast.is-pass b { color: #3db846; }
.thm-contrast.is-fail b { color: #b8463d; }

/* ------------------------------------------------------- panel order list --- */

.thm-order { display: grid; gap: 4px; max-width: 460px; }
.thm-order-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #2c2b29;
    background: #101010;
    padding: 5px 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #d1cfcb;
}
.thm-order-row.is-off { color: #4a4845; border-style: dashed; }
.thm-order-name { flex: 1 1 auto; }
.thm-order-move {
    background: transparent;
    border: 1px solid #2c2b29;
    color: #b4a072;
    width: 24px;
    height: 22px;
    line-height: 1;
    cursor: pointer;
    font-family: 'Bender', 'Segoe UI', sans-serif;
}
.thm-order-move:hover:not(:disabled),
.thm-order-move:focus-visible:not(:disabled) {
    background: #b4a072;
    color: #000;
    border-color: #b4a072;
    outline: none;
}
.thm-order-move:disabled { opacity: .3; cursor: default; }

/* ------------------------------------------------------------- odds and ends --- */

.thm-reset-cell { white-space: nowrap; }

.thm-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.thm-image-choice { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.thm-image-thumb {
    width: 120px;
    height: 68px;
    border: 1px solid #2c2b29;
    background: #0b0b0b center / cover no-repeat;
    flex: 0 0 auto;
}

.thm-audit-value {
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: #8a8a8a;
    word-break: break-all;
}
.thm-audit-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #2c2b29;
    vertical-align: -1px;
    margin-right: 5px;
}

.thm-selftest {
    border: 1px solid #b8463d;
    background: rgba(184, 70, 61, .1);
    padding: 10px 12px;
    color: #e0705f;
    font-size: 12px;
}

/* The brand block sits inside the preview so an admin can see it is there and see that no
   control on the page touches it. It keeps its literal colours - it is the same markup the
   launcher renders, so a preview that themed it would be lying. */
.thm-preview-brand { display: flex; justify-content: flex-start; }