/*
 * Spellmonger custom webclient styling.
 *
 * Loaded by templates/webclient/base.html via /static/webclient/css/custom.css.
 * Overrides selectors from Evennia's webclient.css and Bootstrap 4 to give
 * the client a parchment-and-ink aesthetic without rewriting the markup.
 *
 * Palette: light parchment with dark warm-brown ink. The scrollback reads
 * like an illuminated manuscript rather than a terminal, while keeping
 * the monospace banner identity intact.
 */


/* ---- palette --------------------------------------------------------- */
:root {
    --sm-bg-deep:     #f4ead5;   /* parchment beige -- main page bg */
    --sm-bg-panel:    #ebdfc1;   /* aged parchment for scrollback */
    --sm-bg-input:    #fdf6e3;   /* cream paper for the input line */
    --sm-text:        #2b2520;   /* dark warm-brown ink */
    --sm-text-dim:    #6a5d4f;   /* faded ink */
    --sm-accent:      #7a3818;   /* heraldic russet for proper nouns */
    --sm-accent-cool: #2c5f7a;   /* medieval teal for places / system */
    --sm-danger:      #8b2c2c;   /* deep red for damage / errors */
    --sm-good:        #3d6e2c;   /* forest green for heals / successes */
    --sm-border:      #b8a17a;   /* tan binding */
    --sm-shadow:      0 1px 6px rgba(110,80,40,0.15);
}


/* ---- page surface ---------------------------------------------------- */
html, body {
    background-color: var(--sm-bg-deep);
    color: var(--sm-text);
    font-family: "Georgia", "Cambria", "Times New Roman", serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--sm-accent);
}

a:hover, a:focus {
    color: var(--sm-accent-cool);
    text-decoration: underline;
}


/* ---- top bar (nav menus, login/quit) -------------------------------- */
.navbar, .navbar-dark {
    background-color: var(--sm-bg-panel) !important;
    border-bottom: 1px solid var(--sm-border);
    color: var(--sm-text) !important;
    font-family: "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: 0.95rem;
}
.navbar a, .navbar .nav-link, .navbar-text {
    color: var(--sm-text) !important;
}

.navbar-brand {
    color: var(--sm-accent) !important;
    font-weight: bold;
    letter-spacing: 0.05em;
}


/* ---- main client wrapper -------------------------------------------- */
#clientwrapper, #wrapper {
    background-color: var(--sm-bg-panel);
    box-shadow: var(--sm-shadow);
    border: 1px solid var(--sm-border);
    border-radius: 4px;
}


/* ---- scrollback (the actual game text) ------------------------------ */
#messagewindow, .messagewindow {
    background-color: var(--sm-bg-panel);
    color: var(--sm-text);
    font-family: "Georgia", "Cambria", "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.55;
    padding: 0.75em 1em;
}

#messagewindow pre, .messagewindow pre {
    /* The connect banner is rendered as <pre>. Keep monospace identity
     * but tighten so the banner reads on narrow viewports. */
    font-family: "Menlo", "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.15;
    color: var(--sm-accent);
}


/* ---- command input -------------------------------------------------- */
#inputform, .input-row {
    background-color: var(--sm-bg-input);
    border-top: 1px solid var(--sm-border);
}

#inputfield, .inputfield {
    background-color: var(--sm-bg-input) !important;
    color: var(--sm-text) !important;
    border: 1px solid var(--sm-border) !important;
    font-family: "Menlo", "Consolas", "Courier New", monospace;
    font-size: 15px;
    padding: 0.5em 0.75em;
}

#inputfield:focus, .inputfield:focus {
    border-color: var(--sm-accent) !important;
    box-shadow: 0 0 0 0.1rem rgba(122,56,24,0.25) !important;
    outline: none !important;
}


/* ---- GoldenLayout dock + Evennia stock-class overrides ------------- */
/* The bottom input area is a GoldenLayout pane; Evennia's stock CSS
 * also hard-sets several backgrounds to black on body / .out / .card.
 * Override them so the parchment palette reaches every surface. */
body {
    background: var(--sm-bg-deep) !important;
    color: var(--sm-text) !important;
}
.out, .messagewindow .out {
    background-color: var(--sm-bg-panel) !important;
    color: var(--sm-text) !important;
}
.card {
    background-color: var(--sm-bg-panel) !important;
    color: var(--sm-text) !important;
    border-color: var(--sm-border) !important;
}
.lm_goldenlayout, .lm_root, .lm_content,
.lm_item_container, .lm_stack, .lm_items,
.lm_splitter {
    background-color: var(--sm-bg-deep) !important;
    color: var(--sm-text) !important;
}
.lm_header {
    background-color: var(--sm-bg-panel) !important;
    border-bottom: 1px solid var(--sm-border) !important;
}
.lm_header .lm_tab,
.lm_header .lm_title {
    color: var(--sm-text) !important;
}
.lm_header .lm_tab.lm_active {
    background-color: var(--sm-bg-input) !important;
    color: var(--sm-accent) !important;
    border-bottom: 1px solid var(--sm-accent) !important;
}
.inputwrap, .inputfieldwrapper, .input-group {
    background-color: var(--sm-bg-input) !important;
}
.inputfield, textarea.inputfield {
    background-color: var(--sm-bg-input) !important;
    color: var(--sm-text) !important;
    border: 1px solid var(--sm-border) !important;
}
#inputsizer {
    background-color: var(--sm-bg-input) !important;
    color: var(--sm-text) !important;
}
.inputsend, #inputsend, button.inputsend {
    background-color: var(--sm-accent) !important;
    color: var(--sm-bg-deep) !important;
    border: 1px solid var(--sm-border) !important;
}
/* Evennia's stock prompt class -- the HP/Stam status line at the
 * bottom is rendered with .prompt, which Evennia sets to pure white. */
.prompt {
    color: var(--sm-text) !important;
}
.sys { color: var(--sm-good) !important; }
.inp { color: var(--sm-text-dim) !important; }
.err { color: var(--sm-danger) !important; }


/* ---- Evennia color-code spans (server emits |w...|n, |c, |r, |g) ---
 * Evennia's actual classes are zero-padded three-digit (.color-015,
 * not .color-15). Match the real selectors so the parchment palette
 * actually replaces ANSI white/bright on player-facing text. */
/* Bright/standard whites -- dark ink, bold for emphasis. */
.color-015, .color-bright-white,
.color-007, .color-white {            /* |w / |W */
    color: var(--sm-text) !important;
    font-weight: 600;
}
/* |x / |X -- "bright black" / dark gray. Render as the dim-ink palette
 * variable so labels and grouping headers stay visible on parchment. */
.color-008, .color-000, .color-016,
.color-bright-black, .color-black {
    color: var(--sm-text-dim) !important;
}
/* Cyans -- |c / |C : place names. Use the medieval teal. */
.color-006, .color-cyan,
.color-014, .color-bright-cyan {
    color: var(--sm-accent-cool) !important;
}
/* Reds -- |r / |R : damage, errors. Deep red. */
.color-001, .color-red,
.color-009, .color-bright-red,
.color-013 {
    color: var(--sm-danger) !important;
}
/* Greens -- |g / |G : heals, successes. Forest green. */
.color-002, .color-green,
.color-010, .color-bright-green {
    color: var(--sm-good) !important;
}
/* Yellows -- |y / |Y : warnings, inventory headers, hint callouts.
 * Use a deep amber rather than dim russet so labels READ on parchment. */
.color-003, .color-yellow,
.color-011, .color-bright-yellow,
.color-226, .color-227 {
    color: #7a4a0c !important;
    font-weight: 600;
}
/* Magentas -- |m / |M */
.color-005, .color-magenta,
.color-013, .color-bright-magenta {
    color: #6b2c5a !important;
}
/* Blues -- |b / |B */
.color-004, .color-blue,
.color-012, .color-bright-blue {
    color: #1f4870 !important;
}

/* Catch-all for any element Evennia or GoldenLayout sets to literal
 * white via inline style or rogue class. */
[style*="color: white"], [style*="color:#fff"], [style*="color: #fff"],
[style*="color:#FFFFFF"], [style*="color: #FFFFFF"],
[style*="color:#ffffff"], [style*="color: #ffffff"] {
    color: var(--sm-text) !important;
}

/* GoldenLayout button labels (splitbutton/panebutton/etc.) ship as
 * color: white on a dark bg. Re-paint them brown-on-parchment so
 * the chrome controls are legible too. */
#splitbutton, #panebutton, #undobutton, #optionsbutton {
    color: var(--sm-text) !important;
}


/* ---- right-side sidebar panes (Map / Sheet / Quest) ----------------- */
/* Three GoldenLayout components registered by spellmonger_panes.js.
 * Each renders a .pane > .pane-header + .pane-body. Parchment theme
 * matches the main scrollback. */
.pane {
    height: 100%;
    overflow-y: auto;
    background-color: var(--sm-bg-panel);
    color: var(--sm-text);
    font-family: "Georgia", "Cambria", "Times New Roman", serif;
    padding: 0;
}

.pane-header {
    background-color: var(--sm-bg-input);
    border-bottom: 1px solid var(--sm-border);
    padding: 0.5em 0.85em;
    font-family: "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sm-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pane-body {
    padding: 0.75em 1em;
    font-size: 14px;
    line-height: 1.5;
}

.pane-body .muted {
    color: var(--sm-text-dim);
    font-style: italic;
    font-size: 13px;
}

.pane-body h4 {
    color: var(--sm-accent);
    font-family: "Georgia", "Cambria", "Times New Roman", serif;
    font-size: 1rem;
    margin: 0.75em 0 0.25em;
    border-bottom: 1px dotted var(--sm-border);
    padding-bottom: 0.15em;
}

.pane-body ul {
    list-style-type: none;
    padding-left: 0.75em;
    margin: 0.25em 0;
}

.pane-body ul li {
    padding: 0.15em 0;
    border-left: 2px solid var(--sm-border);
    padding-left: 0.5em;
    margin-bottom: 0.2em;
}

/* HP/stam bars used by the Sheet pane (Phase 3). */
.bar {
    background-color: var(--sm-bg-deep);
    border: 1px solid var(--sm-border);
    border-radius: 2px;
    height: 8px;
    margin: 0.25em 0 0.6em;
    overflow: hidden;
}
.bar > .fill {
    height: 100%;
    background-color: var(--sm-good);
    transition: width 0.3s ease;
}
.bar > .fill.hp     { background-color: var(--sm-danger); }
.bar > .fill.stam   { background-color: #b87a1d; }
.bar > .fill.mana   { background-color: var(--sm-accent-cool); }

/* Map pane (Phase 4): "you are here" label above a flex-filling iframe.
 * The body uses display:flex so the iframe stretches to fill remaining
 * vertical space inside the tab without overflow scrolling. */
.map-pane-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
}
.map-pane-body .map-here {
    padding: 0.5em 1em;
    border-bottom: 1px dotted var(--sm-border);
    font-size: 13px;
    flex: 0 0 auto;
}
.map-pane-body .map-here-name {
    color: var(--sm-accent);
    font-weight: 600;
}
.map-pane-body .map-iframe {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background-color: var(--sm-bg-deep);
}


/* ---- mobile-responsive breakpoints ---------------------------------- */

@media (max-width: 768px) {
    .navbar {
        padding: 0.4rem 0.75rem;
    }
    .navbar-brand {
        font-size: 1.0rem;
    }
    #messagewindow, .messagewindow {
        font-size: 15px;
        padding: 0.5em 0.6em;
    }
    #messagewindow pre, .messagewindow pre {
        font-size: 11px;
        line-height: 1.05;
    }
    #inputfield, .inputfield {
        font-size: 16px;     /* 16px+ stops iOS Safari from zooming on focus */
        padding: 0.65em 0.75em;
    }
    .menu-secondary, .sidebar {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #inputsend .button-label, .send-button .button-label {
        display: none;
    }
}


/* ---- accessibility: respect prefers-reduced-motion ------------------ */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}