/*
 * Copyright (c) 2026, QuantumLynx Research. All Rights Reserved.
 *
 * QuantumLynx Research suite theme -- the Clipper look & feel, with Clipper's
 * hardcoded hex values collected into tokens. Source values:
 *   Clipper/src/static/css/clipper_common.css   (.main, .banner-table, modals)
 *   Clipper/src/static/css/clipper_buttons.css  (.form-btn)
 *   Clipper/src/static/css/login_register.css   (tan form card, alerts)
 *   Clipper/src/templates/footer.html           (QuantumLynx Research footer)
 * Dark theme only, as in Clipper.
 */

:root {
    --ql-bg: #333333;              /* page background (.main) */
    --ql-fg: #ffffff;              /* page text */
    --ql-fg-muted: #d6d0c8;
    --ql-panel: #0c0e0c;           /* dark panels / footer bar */
    --ql-panel-deep: #000000;

    --ql-banner-bg: #E5A627;       /* gold header banner */
    --ql-banner-fg: #181A17;

    --ql-accent: #E5A627;          /* links / highlights on dark */
    --ql-border: #DE971F;          /* panel borders */
    --ql-orange: #CA7216;

    --ql-card-bg: #D1AC8C;         /* tan form / content card */
    --ql-card-fg: #000000;
    --ql-card-link: #5D1F08;       /* Clipper #863B03 darkened to Clipper's #5D1F08 for WCAG AA on tan */
    --ql-card-link-hover: #2d170f;

    --ql-btn-bg: #712B06;          /* 3D brown button */
    --ql-btn-bg-hover: #863B03;
    --ql-btn-fg: #ffffff;
    --ql-btn-shadow: #1B0C06;

    --ql-surface-cream: #fffaf4;
    --ql-surface-sand: #f3eadf;
    --ql-modal-bg: #f7f2ea;
    --ql-modal-fg: #2d170f;
    --ql-modal-border: #5D1F08;

    --ql-footer-bg: #0c0e0c;
    --ql-footer-inner: #000000;
    --ql-footer-fg: #d3d3d3;       /* "lightgrey" */

    --ql-danger-bg: #f8d7da;
    --ql-danger-fg: #721c24;
    --ql-danger-border: #f5c6cb;
    --ql-success-bg: #d4edda;
    --ql-success-fg: #155724;
    --ql-success-border: #c3e6cb;

    --ql-focus: #FF9900;

    --ql-font-display: 'Times New Roman', Times, serif;
    --ql-font-body: Arial, Helvetica, sans-serif;

    --ql-radius: 8px;
    --ql-gutter: 20px;
}

/* ---------- Page ---------- */

html, body {
    margin: 0;
    padding: 0;
}

body.main {
    background-color: var(--ql-bg);
    color: var(--ql-fg);
    font-family: var(--ql-font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--ql-gutter);
    box-sizing: border-box;
}

h1, h2, h3, h4 {
    font-family: var(--ql-font-display);
    font-weight: normal;
}

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

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid var(--ql-focus);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ql-banner-bg);
    color: var(--ql-banner-fg);
    padding: 8px 16px;
    z-index: 10001;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
}

/* ---------- Header banner (Clipper .banner-table) ---------- */

.banner {
    background-color: var(--ql-banner-bg);
    color: var(--ql-banner-fg);
    font-family: var(--ql-font-display);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 6px 20px;
}

.banner a {
    color: var(--ql-banner-fg);
    text-decoration: none;
}

.banner a:hover {
    text-decoration: underline;
}

.banner-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banner-logo {
    height: 50px;
    width: auto;
}

.banner-title {
    font-size: 20pt;
}

.banner-title sup {
    font-size: 10pt;
}

.banner-build {
    font-size: 16pt;
    padding-left: 20px;
}

.banner-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
    padding: 0;
}

.banner-nav a {
    white-space: nowrap;
    font-size: 13pt;
    padding: 8px 0;
    display: inline-block;
}

.banner-nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- QuantumLynx Research footer (Clipper footer.html) ---------- */

.ql-footer {
    flex-shrink: 0;
    background-color: var(--ql-footer-bg);
}

.ql-footer-inner {
    background-color: var(--ql-footer-inner);
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ql-footer-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}

.ql-footer-brand:hover {
    text-decoration: none;
}

.ql-footer-logo {
    width: 80px;
    height: 80px;
    margin-right: 8px;
}

.ql-footer-name {
    font-size: 20pt;
    color: var(--ql-footer-fg);
    font-family: var(--ql-font-display);
    padding-top: 15px;
}

.ql-footer-tm {
    font-size: 10pt;
    color: var(--ql-footer-fg);
}

.ql-footer-links {
    display: flex;
    gap: 20px;
    font-size: 10pt;
    color: var(--ql-footer-fg);
}

.ql-footer-links a {
    color: var(--ql-footer-fg);
}

/* ---------- Cards, forms, buttons ---------- */

.card {
    background-color: var(--ql-card-bg);
    color: var(--ql-card-fg);
    border-radius: var(--ql-radius);
    padding: 24px 30px;
    margin: 20px 0;
}

.card a {
    color: var(--ql-card-link);
}

.card a:hover {
    color: var(--ql-card-link-hover);
}

.panel {
    background-color: var(--ql-panel);
    border: 1px solid var(--ql-border);
    border-radius: var(--ql-radius);
    padding: 16px 20px;
    margin: 20px 0;
}

.form-btns-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.form-btn,
a.form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ql-btn-bg);
    color: var(--ql-btn-fg);
    min-width: 150px;
    min-height: 30px;
    font-size: 12px;
    font-family: var(--ql-font-body);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 20px;
    text-decoration: none;
    box-shadow:
        0 4px 0 0 var(--ql-btn-shadow),
        0 5px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: all 0.1s ease;
}

.form-btn:hover,
a.form-btn:hover {
    background-color: var(--ql-btn-bg-hover);
    text-decoration: none;
}

.form-btn:active {
    top: 3px;
    box-shadow:
        0 1px 0 0 var(--ql-btn-shadow),
        0 2px 2px rgba(0, 0, 0, 0.2);
}

.form-btn:disabled {
    background-color: grey;
    cursor: not-allowed;
}

/* ---------- Alerts (flashed messages) ---------- */

.alert {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.alert-danger, .alert-error {
    background-color: var(--ql-danger-bg);
    color: var(--ql-danger-fg);
    border: 1px solid var(--ql-danger-border);
}

.alert-success, .alert-info {
    background-color: var(--ql-success-bg);
    color: var(--ql-success-fg);
    border: 1px solid var(--ql-success-border);
}

/* ---------- App-styled modal (Clipper clipper_common.css) ---------- */

.app-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.48);
    align-items: center;
    justify-content: center;
}

.app-modal.open {
    display: flex;
}

.app-modal-content {
    background-color: var(--ql-modal-bg);
    border: 2px solid var(--ql-modal-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--ql-modal-fg);
    max-width: 460px;
    min-width: 280px;
    padding: 18px 22px;
}

.app-modal-title {
    color: var(--ql-modal-border);
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.app-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
    :root { --ql-gutter: 16px; }
    .banner-title { font-size: 16pt; }
    .banner-build { font-size: 12pt; padding-left: 10px; }
    .ql-footer-inner { padding-left: 16px; padding-right: 16px; }
    .ql-footer-logo { width: 56px; height: 56px; }
    .ql-footer-name { font-size: 14pt; padding-top: 10px; }
    .card { padding: 18px 16px; }
}