/* WindCircles — Light and Dark themes, house style round 3 (2026-10-22). Master: /var/www/housestyle/HOUSE-STYLE.md
   Palettes and shapes follow AeroLedger/GliderTrack theme-ivan.css (--t-* names). js/theme.js always sets
   html[data-theme] ("light" default, or "dark") and --fs (font size 80-150 %) before this file loads. */

/* ================= palettes ================= */
html[data-theme="light"] {
  --t-page: #f4f3ef; --t-panel: #fbfaf7; --t-tile: #ffffff; --t-field: #ffffff; --t-soft: #ebe9e3; --t-soft-2: #e1ded6;
  --t-line: #b9bbbe; --t-field-line: #b9bbbe; --t-row-line: #ebe9e3; --t-ink: #2b2d30; --t-muted: #5e6268; --t-strong: #3a3d41;
  --t-head-bg: #3a3d41; --t-head-ink: #f4f3ef; --t-head-sub: #c9cbce; --t-head-line: #8d9096; --t-head-hover: rgba(244, 243, 239, 0.14);
  --t-sub-on-bg: #b9bbbe; --t-sub-on-ink: #2b2d30; --t-sub-hover: #ebe9e3;
  --t-btn-bg: #f4f3ef; --t-btn-line: #5e6268; --t-btn-ink: #3a3d41; --t-btn-hover: #ebe9e3;
  --t-dis-bg: #ebe9e3; --t-dis-line: #b9bbbe; --t-dis-ink: #8d9096;
  --t-accent: #3d8bfd; --t-accent-deep: #1d4ed8; --t-accent-ink: #1d4ed8; --t-accent-soft: rgba(61, 139, 253, 0.14);
  --t-ok: #2f7d4f; --t-ok-soft: rgba(47, 125, 79, 0.1);
  --t-danger: #c0392b; --t-danger-solid: #c0392b; --t-danger-solid-2: #962d22;
  --t-red-bg: #f8d7d2; --t-red-ink: #8f1d12;
  --t-amber-bg: #fbecc9; --t-amber-ink: #7a4a00; --t-amber-bar: #b7791f;
  --t-scrim: rgba(43, 45, 48, 0.55);
  --t-card-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  --t-dialog-shadow: 0 16px 40px rgba(43, 45, 48, 0.25);
  --t-overlay: rgba(251, 250, 247, 0.94);      /* cards floating on the map */
  color-scheme: light;
}
html[data-theme="dark"] {
  --t-page: #0c1118; --t-panel: #151c27; --t-tile: #0c1118; --t-field: #0c1118; --t-soft: #1c2634; --t-soft-2: #243042;
  --t-line: #2a3648; --t-field-line: #34425a; --t-row-line: #222d3d; --t-ink: #e8eef7; --t-muted: #8b9bb0; --t-strong: #c9d4e3;
  --t-head-bg: #151c27; --t-head-ink: #e8eef7; --t-head-sub: #8b9bb0; --t-head-line: #3a4a62; --t-head-hover: rgba(232, 238, 247, 0.08);
  --t-sub-on-bg: #3a4a62; --t-sub-on-ink: #ffffff; --t-sub-hover: #1c2634;
  --t-btn-bg: #1c2634; --t-btn-line: #3a4a62; --t-btn-ink: #e8eef7; --t-btn-hover: #243042;
  --t-dis-bg: #141a24; --t-dis-line: #253041; --t-dis-ink: #5f6d81;
  --t-accent: #3d8bfd; --t-accent-deep: #2563eb; --t-accent-ink: #93c5fd; --t-accent-soft: rgba(61, 139, 253, 0.16);
  --t-ok: #4ade80; --t-ok-soft: rgba(74, 222, 128, 0.14);
  --t-danger: #f87171; --t-danger-solid: #b91c1c; --t-danger-solid-2: #991b1b;
  --t-red-bg: rgba(185, 28, 28, 0.28); --t-red-ink: #fecaca;
  --t-amber-bg: rgba(180, 120, 20, 0.26); --t-amber-ink: #fde68a; --t-amber-bar: #fbbf24;
  --t-scrim: rgba(4, 8, 14, 0.72);
  --t-card-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  --t-dialog-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --t-overlay: rgba(21, 28, 39, 0.94);
  color-scheme: dark;
}
html {
  --tech: "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "Roboto Mono", ui-monospace, monospace;
  --cond: "Bahnschrift SemiCondensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --radius: 4px;
  font-size: calc(16px * var(--fs, 1));           /* the whole page scales with Settings > Font size */
}
html, body { background: var(--t-page); color: var(--t-ink); font-family: var(--cond); }
html[data-theme="light"], html[data-theme="light"] body {
  background:
    linear-gradient(rgba(58, 61, 65, 0.035) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(58, 61, 65, 0.035) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--t-page);
}
html[data-theme="dark"], html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2a44 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #12352f 0%, transparent 55%),
    var(--t-page);
  background-attachment: fixed;
}

/* ================= type scale (AeroLedger) ================= */
h1 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--t-strong); }
h2, h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; color: var(--t-strong); }
a { color: var(--t-accent-ink); }
.tech { font-family: var(--tech); }
.muted, .hint { color: var(--t-muted); }
.hint { font-size: 0.85rem; margin: 0.3rem 0 0; }
:focus-visible { outline: 3px solid var(--t-accent); outline-offset: 2px; }

/* ================= header (banner), GliderTrack style ================= */
.topbar {
  position: sticky; top: 0; z-index: 1200;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--t-head-bg); color: var(--t-head-ink);
  border-bottom: 3px solid var(--t-accent);
}
.brand { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.brand-mark {                                     /* logo mark stays blue in every theme */
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--cond); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #3d8bfd, #1d4ed8); color: #fff;
}
.brand-text { display: flex; flex-direction: column; gap: 0.05rem; line-height: 1.2; min-width: 0; }
.brand-text strong {
  font-family: var(--tech); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 1.05rem; color: var(--t-head-ink); white-space: nowrap;
}
.brand-title-row { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.brand-copy { color: var(--t-head-sub); font-size: 0.8rem; white-space: nowrap; }   /* same size and colour as the line under the title */
.brand-copy a { color: inherit; text-decoration: none; }
.brand-copy a:hover { text-decoration: underline; }
.brand-text .user-name { color: var(--t-head-sub); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions {
  margin-left: auto; min-width: 0;
  display: flex; flex-wrap: nowrap; gap: 0.3rem; align-items: center;
  overflow-x: auto; scrollbar-width: none;          /* scrolls sideways, never wraps */
}
.topbar-actions::-webkit-scrollbar { display: none; }
.topbar-actions[hidden] { display: none; }
.topbar .btn { flex: 0 0 auto; white-space: nowrap; }
.topbar .btn:not(.btn-primary):not(:disabled) { background: transparent; border-color: var(--t-head-line); color: var(--t-head-ink); }
.topbar .btn:not(.btn-primary):not(:disabled):hover { background: var(--t-head-hover); }
.topbar .btn[aria-current="page"] { background: var(--t-head-ink); color: var(--t-head-bg); }

/* ================= main tabs: detached, in the content column, sticky ================= */
.tabbar {
  position: sticky; top: var(--wc-topbar-h, 0px); z-index: 1100;
  width: 100%; max-width: min(1680px, 100%); margin: 0 auto; box-sizing: border-box;
  padding: 0.8rem 1.5rem 0;
  background: var(--t-page);
}
html[data-theme="light"] .tabbar,
html[data-theme="light"] .page-sub > .settings-tabs {
  background:
    linear-gradient(rgba(58, 61, 65, 0.035) 1px, transparent 1px) 0 0 / 100% 24px fixed,
    linear-gradient(90deg, rgba(58, 61, 65, 0.035) 1px, transparent 1px) 0 0 / 24px 100% fixed,
    var(--t-page);
}
.tabbar[hidden] { display: none; }
.main-nav {
  display: flex; flex-wrap: nowrap; gap: 0.3rem; align-items: flex-end;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 2px solid var(--t-strong);
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-btn {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  color: var(--t-strong); background: transparent; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--cond); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.55rem 1rem;
}
.nav-btn:hover { background: var(--t-soft); }
.nav-btn.active, .nav-btn.active:hover { background: var(--t-strong); border-color: var(--t-strong); color: var(--t-page); }

/* ================= sub-tabs: hang from the main tab line, mirror the tabs, sticky, no page title ================= */
.settings-tabs {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-start;
  padding: 0 0 0.5rem; margin: 0 0 0.85rem;
  position: sticky; top: calc(var(--wc-topbar-h, 0px) + var(--wc-tabbar-h, 0px)); z-index: 1050;
  background: var(--t-page);
}
.settings-tabs .chip {
  cursor: pointer;
  border: 1px solid transparent; border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  background: transparent; color: var(--t-strong);
  font-family: var(--cond); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; padding: 0.5rem 0.95rem;
}
.settings-tabs .chip:hover { background: var(--t-sub-hover); }
.settings-tabs .chip.active, .settings-tabs .chip.active:hover { background: var(--t-sub-on-bg); border-color: var(--t-sub-on-bg); color: var(--t-sub-on-ink); }

/* ================= buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  border: 1px solid var(--t-btn-line); border-radius: var(--radius); background: var(--t-btn-bg); color: var(--t-btn-ink);
  font-family: var(--cond); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.45rem 0.9rem; cursor: pointer; line-height: 1.25;
}
.btn:hover { background: var(--t-btn-hover); }
.btn-primary { background: var(--t-accent); border-color: var(--t-accent-deep); color: #fff; }
.btn-primary:hover { background: var(--t-accent-deep); }
.btn-danger { background: transparent; border-color: var(--t-danger); color: var(--t-danger); }
.btn-danger:hover { background: var(--t-danger-solid); border-color: var(--t-danger-solid); color: #fff; }
.btn-danger-solid { background: var(--t-danger-solid); border-color: var(--t-danger-solid-2); color: #fff; }
.btn-danger-solid:hover { background: var(--t-danger-solid-2); }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.btn-chip { padding: 0.4rem 0.8rem; }
.btn-block { width: 100%; }
/* disabled: the same grey for every kind of button, so it never looks clickable */
.btn:disabled, .btn[aria-disabled="true"], button.chip:disabled {
  background: var(--t-dis-bg) !important; border-color: var(--t-dis-line) !important; color: var(--t-dis-ink) !important;
  cursor: not-allowed; box-shadow: none; opacity: 1;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ================= cards, forms, tables ================= */
.card { background: var(--t-panel); border: 1px solid var(--t-line); border-radius: var(--radius); box-shadow: var(--t-card-shadow); padding: 1rem 1.1rem; }
.card h3 { margin: 0 0 0.6rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.card-head h3 { margin: 0; }
label, .field-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--t-strong); margin: 0.6rem 0 0.25rem; }
input, select, textarea {
  font-family: var(--cond); font-size: 1rem; color: var(--t-ink);
  background: var(--t-field); border: 1px solid var(--t-field-line); border-radius: var(--radius);
  padding: 0.45rem 0.55rem; box-sizing: border-box; max-width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); }
input:disabled, select:disabled { background: var(--t-soft); color: var(--t-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--t-accent); width: 1.05rem; height: 1.05rem; }
.form-msg { color: var(--t-danger); font-size: 0.85rem; min-height: 1.2em; margin: 0.5rem 0 0; }
.form-msg.ok { color: var(--t-ok); }
.form-msg:empty { min-height: 0; margin: 0; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
  text-align: left; background: var(--t-soft); color: var(--t-strong);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  border-bottom: 2px solid var(--t-line); padding: 0.45rem 0.6rem; white-space: nowrap;
}
.data-table td { border-bottom: 1px solid var(--t-row-line); padding: 0.45rem 0.6rem; vertical-align: middle; }
.data-table tbody tr:hover td { background: rgba(61, 139, 253, 0.06); }
.data-table .row-actions { white-space: nowrap; text-align: right; }
.data-table .row-actions .btn + .btn { margin-left: 0.25rem; }
.badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 99px; font-size: 0.75rem; font-weight: 600; background: var(--t-soft); border: 1px solid var(--t-line); color: var(--t-strong); }
.badge-role-admin { background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent-ink); }
.badge-pending { background: var(--t-amber-bg); border-color: var(--t-amber-bar); color: var(--t-amber-ink); }

/* ================= dialogs ================= */
.modal-overlay { position: fixed; inset: 0; z-index: 3000; background: var(--t-scrim); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--t-panel); color: var(--t-ink); border: 1px solid var(--t-line); border-radius: var(--radius);
  box-shadow: var(--t-dialog-shadow); width: min(30rem, 100%); max-height: calc(100dvh - 2rem); overflow: auto;
}
.modal-wide { width: min(46rem, 100%); }
.modal-head { background: var(--t-head-bg); color: var(--t-head-ink); border-bottom: 3px solid var(--t-accent); padding: 0.6rem 1rem; border-radius: var(--radius) var(--radius) 0 0; }
html[data-theme="dark"] .modal-head { background: #1c2634; }
.modal-head .modal-title { margin: 0; color: var(--t-head-ink); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.modal-form, .modal-text { padding: 0.4rem 1rem 0; }
.modal > .form-msg { padding: 0 1rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding: 1rem; }

/* ================= Font size control (Settings > Interface, under Theme) ================= */
.font-ctl { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.font-ctl [data-fs-step="-1"], .font-ctl [data-fs-step="1"] { min-width: 2.6rem; font-size: 1.1rem; }
.font-ctl .font-value { min-width: 3.6rem; text-align: center; font-family: var(--tech); font-weight: 700; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 4000; padding: 0.55rem 1rem; border-radius: var(--radius);
  background: var(--t-panel); color: var(--t-ink); border: 1px solid var(--t-line); border-left: 5px solid var(--t-ok); box-shadow: var(--t-dialog-shadow); font-size: 0.9rem; max-width: min(40rem, 92vw); }
.toast.toast-error { border-left-color: var(--t-danger); }
.toast.hidden { display: none; }

@media (max-width: 720px) {
  .tabbar { padding: 0.5rem 0.75rem 0; }
  .nav-btn { padding: 0.5rem 0.7rem; font-size: 0.82rem; letter-spacing: 0.03em; }
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .settings-tabs .chip { flex: 0 0 auto; white-space: nowrap; padding: 0.5rem 0.7rem; font-size: 0.85rem; }
}
@media (max-width: 1100px) {
  .topbar .btn-chip { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
}

/* Dark: the sticky tab rows carry the same fixed glows as the page, so no band shows behind them */
html[data-theme="dark"] .tabbar,
html[data-theme="dark"] .page-sub > .settings-tabs {
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2a44 0%, transparent 60%) fixed,
    radial-gradient(900px 500px at 110% 10%, #12352f 0%, transparent 55%) fixed,
    var(--t-page);
}