/* ==========================================================================
   decker webclient theme + chrome  (wintermux "Catppuccin Mocha" look)
   --------------------------------------------------------------------------
   GoldenLayout is DISABLED for this client (see webclient.html guilib_import) --
   no dockable panes / tabs.  Layout is a single fixed window like wintermux:

       row 1  #toolbar     (ghost buttons)
       row 2  #main        (scrolling output -> #main-sub > #messagewindow)
       row 3  #input       (prompt + command line)
       row 4  #statusbar

   custom.css is linked by base.html AFTER webclient.css.  The GoldenLayout CDN
   stylesheets still load (they're hardcoded in base.html) but only target .lm_*
   elements, which never exist now, so they are inert.

   Palette ported from wintermux/src/wintermux/core/palette.py + ui/theme.py.
   ========================================================================== */

:root {
    --bg:          #282A3B;
    --crust:       #11111b;
    --surface0:    #313244;
    --surface1:    #45475a;
    --surface2:    #585b70;
    --overlay0:    #6c7086;
    --overlay1:    #7f849c;
    --subtext0:    #a6adc8;
    --subtext1:    #bac2de;
    --fg:          #e0e0e0;
    --fg-dim:      #888888;
    --border:      #333333;
    --statusbar-bg:#282826;

    --mauve:       #cba6f7;
    --lavender:    #b4befe;
    --red:         #f38ba8;
    --blue:        #89b4fa;
    --yellow:      #f9e2af;

    --mono: "Courier New", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
    --chrome-h: 2.1rem;
}

/* === Base ============================================================== */
html, body { height: 100%; width: 100%; }
body {
    background: var(--bg) !important;
    color: var(--fg);
    font-family: var(--mono);        /* inherited everywhere */
    font-size: .9em;
    line-height: 1.4em;
    overflow: hidden;
}
/* native controls don't inherit font-family -- set it on those explicitly */
input, textarea, button, select { font-family: var(--mono); }

a:link, a:visited { color: var(--blue); }
a:hover, a:active  { color: var(--lavender); }

/* === Output message classes =========================================== */
.out    { color: var(--fg); background-color: transparent; white-space: pre-wrap; }
.sys    { color: var(--yellow); }
.inp    { color: var(--overlay1); }
.err    { color: var(--red); }
.prompt { color: var(--subtext1); }
.deck-echo { color: var(--overlay1); }

/* === Layout: 4-row CSS grid (toolbar / output / input / statusbar) ====
   #toolbar and #input ship as position:fixed (webclient.css); we un-fix them
   so they sit in real grid rows.  #main is the scroll container (matches what
   default_out.js scrolls: #messagewindow.parent().parent()).
   ====================================================================== */
#clientwrapper {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto auto;   /* toolbar / output / input / status */
    grid-template-columns: 100%;
    background: var(--bg);
}

#clientwrapper #toolbar {
    position: static;            /* override webclient.css position:fixed */
    display: flex;               /* override goldenlayout.css display:none */
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    min-height: var(--chrome-h);
    padding: .15rem .4rem;
    background: var(--bg);
    border-bottom: 1px dashed var(--border);
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
}

#main {
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg);
}
#main-sub { padding: .25rem .5rem .9rem; }   /* extra bottom padding under output */
#messagewindow {
    overflow-wrap: break-word;
    white-space: pre-wrap;   /* preserve MUD ASCII (spaces+newlines) for messages
                                that don't land in .out, e.g. the connection screen */
}

/* === Input bar ======================================================== */
#clientwrapper #input {
    position: static;            /* override webclient.css position:fixed */
    width: auto;
    height: auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;      /* resize handle stacks above the input form */
}
#deck-input-resize {
    flex: 0 0 auto;
    height: 6px;
    cursor: ns-resize;
    background: var(--bg);
    border-top: 1px dashed var(--border);
    border-bottom: 1px solid var(--border);
}
#deck-input-resize:hover { background: var(--surface0); }
#inputform.wrapper { height: auto; }
#prompt {
    color: var(--subtext1);
    padding: 0 .5rem;
    max-height: 3rem;
    overflow: hidden;
}
#inputcontrol {
    display: flex;
    height: auto;
    align-items: stretch;
}
#inputfield, #inputsizer {
    flex: 1 1 auto;
    min-height: 1.9rem;
    max-height: 60vh;
    background: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--mono) !important;
    font-size: 1rem !important;
    padding: .3rem .5rem !important;
    resize: none;                /* resized via the top handle instead */
}
#inputfield:focus {
    background: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid var(--fg) !important;   /* solid white border on focus */
    box-shadow: none !important;
    outline: none !important;
}
#inputfield::placeholder { color: var(--overlay0); }
.input-group-btn { display: flex; }
#inputsend {
    width: 2.4rem;
    background: var(--bg) !important;
    color: var(--subtext1) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 1.1rem;
    cursor: pointer;
}
#inputsend:hover { color: var(--mauve) !important; }

/* === Status bar (added in webclient.html block client) ================= */
#statusbar {
    min-height: var(--chrome-h);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .6rem;
    background: var(--statusbar-bg);
    border-top: 1px solid var(--border);
    color: var(--subtext0);
    font-size: .8em;
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
#statusbar .sb-pipe { color: var(--overlay0); margin: 0 2px; }
#statusbar .sb-state-ok     { color: var(--blue); }
#statusbar .sb-state-bad    { color: var(--red); }
#statusbar #sb-frz { color: var(--red); font-weight: bold; min-width: 1.5rem; }
#statusbar #sb-log { color: var(--blue); font-weight: bold; min-width: 1.5rem; }
#statusbar .sb-grow { flex: 1 1 auto; }

/* === Toolbar buttons: wintermux QToolButton style =====================
   Flat text labels, borderless until hover; checked toggles get a subtle
   surface0 fill (NOT an accent box). Matches theme.py QToolButton rules. */
.deck-toolbtn {
    background: transparent;
    color: var(--fg);
    border: 1px solid transparent;
    font-family: var(--mono);
    font-size: .82rem;
    line-height: 1.4;
    padding: .1rem .45rem;
    cursor: pointer;
    border-radius: 0;
}
.deck-toolbtn:hover  { border-color: var(--border); }
.deck-toolbtn.active { background: var(--surface0); border-color: var(--border); }
.deck-toolsep {
    align-self: stretch;
    width: 0;
    margin: .2rem .25rem;
    border-left: 1px solid var(--border);
}

/* === Dialog buttons: wintermux QPushButton "ghost" style (bordered) === */
.deck-btn {
    background: transparent;
    color: var(--subtext1);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.4;
    padding: .12rem .5rem;
    cursor: pointer;
    border-radius: 0;
}
.deck-btn:hover  { color: var(--fg); border-color: var(--fg); }
.deck-btn:active { background: var(--surface1); }

/* === Thin scrollbars ================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--surface2) var(--bg); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface2); }
::-webkit-scrollbar-thumb:hover { background: var(--mauve); }

/* === Dialogs (our themed modal) ======================================= */
.deck-dialog {
    display: none;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    z-index: 20;
    width: 640px; max-width: 92vw; max-height: 80vh;
    background-color: var(--bg);          /* FramelessDialog paints BG */
    color: var(--fg);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.deck-dialog.open { display: flex; flex-direction: column; }
.deck-dialog-title {                       /* _TitleBar: SURFACE2 bg, centered title */
    display: flex; align-items: center; justify-content: center;
    position: relative;
    padding: .4rem 1.6rem;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    font-weight: bold;
    cursor: move;
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.deck-dialog-title .deck-dialog-x {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    cursor: pointer; color: var(--subtext1); font-size: 1.1rem; line-height: 1; padding: 0 .2rem;
}
.deck-dialog-title .deck-dialog-x:hover { color: var(--red); }
.deck-dialog-body { padding: .7rem; overflow: auto; display: flex; flex-direction: column; gap: .5rem; }

/* titled-border panel = wintermux TitledListPanel (legend on top border,
   +/- footer interrupting the BOTTOM border, borderless buttons) */
.deck-panel {
    position: relative;
    border: 1px solid var(--border);
    padding: .25rem .45rem .55rem;
    margin: 0;
    min-inline-size: 0;          /* allow fieldset to shrink in flex */
    display: flex;
    flex-direction: column;
}
.deck-panel > legend {
    color: var(--mauve);
    padding: 0 .3rem;
    width: auto;
    font-size: .78rem;
    margin-left: .2rem;
}
.deck-panel-foot {
    position: absolute;
    right: 12px;
    bottom: -0.62rem;            /* straddle the bottom border line */
    display: flex;
    gap: .1rem;
    background: var(--bg);       /* opaque -> "interrupts" the border */
    padding: 0 .25rem;
}
.deck-btn.deck-pm {              /* footer +/- : borderless, glyph only */
    border: 0;
    background: transparent;
    color: var(--subtext1);
    padding: 0 .3rem;
    font-size: 1.35rem;
    line-height: 1;
    min-width: 1rem;
}
.deck-btn.deck-pm:hover { color: var(--mauve); background: transparent; }

.deck-panel .deck-list { border: 0; }
.deck-list { border: 1px solid var(--border); max-height: 30vh; overflow: auto; }

/* custom dropdown = wintermux QComboBox (native <select> popups can't be
   styled, so we build our own with a mauve highlight) */
.deck-select {
    position: relative;
    display: flex; align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: .2rem .4rem;
    cursor: pointer;
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.deck-select:focus, .deck-select.open { border-color: var(--fg); outline: none; }
.deck-select-val { flex: 1 1 auto; }
.deck-select-arrow { color: var(--overlay1); margin-left: .5rem; font-size: .7rem; }
.deck-select-menu {
    display: none;
    position: absolute; top: 100%; left: -1px; right: -1px;
    background: var(--bg);
    border: 1px solid var(--border);
    z-index: 30; max-height: 44vh; overflow: auto;
}
.deck-select.open .deck-select-menu { display: block; }
.deck-select-opt { padding: .2rem .5rem; }
.deck-select-opt:hover { background: var(--surface0); }
.deck-select-opt.sel { background: var(--mauve); color: var(--crust); }
.deck-select-opt.deck-opt-disabled { color: var(--overlay0); cursor: not-allowed; }
.deck-select-opt.deck-opt-disabled:hover { background: transparent; }
.deck-select.deck-disabled { opacity: .45; pointer-events: none; }

/* deactivated form fields (e.g. action-type-irrelevant inputs) */
.deck-form input:disabled { opacity: .45; cursor: not-allowed; }
.deck-list-row {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem .5rem; border-bottom: 1px dashed var(--border); cursor: pointer;
}
.deck-list-row:last-child { border-bottom: 0; }
.deck-list-row:hover { background: var(--surface0); }
.deck-list-row.selected { background: var(--surface1); }
.deck-list-row .deck-row-main { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-list-row .deck-row-off { color: var(--fg-dim); font-style: italic; }
.deck-list-empty { padding: .5rem; color: var(--fg-dim); }

.deck-form { display: grid; grid-template-columns: max-content 1fr; gap: .5rem .6rem; align-items: center; }
.deck-form label { color: var(--subtext0); }
.deck-form > label:not(.deck-form-check) { text-align: right; }   /* macOS QFormLayout */
.deck-form input[type=text], .deck-form input[type=number], .deck-form select, .deck-form textarea {
    background: var(--bg); color: var(--fg); border: 1px solid var(--border);
    font-family: var(--mono); padding: .2rem .4rem; width: 100%; box-sizing: border-box;
}
.deck-form input:focus, .deck-form select:focus, .deck-form textarea:focus { border-color: var(--fg); outline: none; }
.deck-form .deck-form-full { grid-column: 1 / -1; }
.deck-form-check { display: flex; align-items: center; gap: .4rem; }
/* custom checkbox = wintermux QCheckBox indicator (surface0 square -> mauve) */
.deck-dialog input[type=checkbox] {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; margin: 0;
    border: 1px solid var(--border);
    background: var(--surface0);
    border-radius: 0;
    vertical-align: middle;
    cursor: pointer;
    flex: 0 0 auto;
}
.deck-dialog input[type=checkbox]:checked { background: var(--mauve); border-color: var(--mauve); }

/* two-column editor: item list left, form right (wintermux layout) */
.deck-editor { display: flex; gap: .7rem; align-items: stretch; }
.deck-col-list { display: flex; flex-direction: column; width: 200px; min-width: 160px; }
.deck-col-list .deck-panel { flex: 1 1 auto; }
.deck-col-list .deck-list { flex: 1 1 auto; max-height: 46vh; border: 0; }
.deck-col-form { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.deck-form-dim { opacity: .35; pointer-events: none; }       /* no item selected */
.deck-color-row { display: flex; align-items: center; gap: .5rem; }
.deck-color-row input[type=color] { width: 2rem; height: 1.3rem; padding: 0; border: 1px solid var(--border); background: var(--bg); }

.deck-dialog-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.deck-dialog-actions .deck-grow { flex: 1 1 auto; }

/* tabs = wintermux QTabWidget */
.deck-tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--border); margin-bottom: .7rem; }
.deck-tab {
    padding: .25rem .8rem;
    border: 1px solid var(--border); border-bottom: 0;
    background: var(--bg); color: var(--fg-dim);
    cursor: pointer; margin-bottom: -1px;
}
.deck-tab:hover { color: var(--fg); }
.deck-tab.active { color: var(--fg); border-bottom: 2px solid var(--mauve); }
.deck-tabpane { display: none; }
.deck-tabpane.active { display: block; }

/* Display-tab color palette + default colors (wintermux) */
.deck-grouplbl { color: var(--mauve); margin: .7rem 0 .25rem; font-size: .85rem; }
.deck-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin: .2rem 0 .5rem; max-width: 320px; }
.deck-swatch { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.deck-swatch span { font-size: 9px; color: var(--fg-dim); }
.deck-defaults { display: flex; align-items: center; gap: .5rem; }
.deck-dialog input[type=color] { width: 24px; height: 22px; padding: 0; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }

/* actions sub-panel inside the trigger form: clearance for the +/- footer */
.deck-actions { margin: .6rem 0 1rem; }

/* help dialog: FIXED size so it doesn't resize per topic; panes fill it and
   the content scrolls internally. */
#deck-dlg-help { width: 720px; height: 70vh; }
#deck-dlg-help .deck-dialog-body { flex: 1 1 auto; min-height: 0; }
#deck-dlg-help .deck-editor { flex: 1 1 auto; min-height: 0; }
#deck-dlg-help .deck-col-list .deck-list { max-height: none; }
.deck-help-content { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: .3rem .6rem; }
.deck-help h2 { color: var(--mauve); margin: .4rem 0 .3rem; font-size: 1rem; }
.deck-help h3 { color: var(--lavender); margin: .7rem 0 .2rem; font-size: .9rem; }
.deck-help p { margin: .3rem 0; }
.deck-help code { background: var(--surface0); color: var(--lavender); padding: 1px 4px; }
.deck-help kbd { background: var(--surface1); color: var(--fg); padding: 1px 5px; border: 1px solid var(--border); }
.deck-help table { border-collapse: collapse; width: 100%; margin: .3rem 0; }
.deck-help th { text-align: left; padding: 3px 10px; border-bottom: 1px solid var(--border); color: var(--mauve); }
.deck-help td { padding: 3px 10px; border-bottom: 1px solid var(--surface0); vertical-align: top; }

/* === Freeze "PAUSED" badge =========================================== */
#deck-paused-badge {
    display: none;
    position: absolute;
    top: calc(var(--chrome-h) + .4rem);
    right: 1rem;
    z-index: 8;
    background: rgba(243,139,168,.18);
    color: var(--red);
    border: 1px solid var(--red);
    font-family: var(--mono);
    font-size: .75rem; font-weight: bold;
    padding: .15rem .5rem;
    pointer-events: none;
}
#deck-paused-badge.on { display: block; }