/* Theme system: html.<theme> swaps CSS variables. Default is blue (white
   text on a blue background). The theme button cycles blue -> red -> green ->
   white -> blue. Adapted from the ~/python/tn frontend. */

:root {
    --bg-r: 11; --bg-g: 30; --bg-b: 58;
    --bg-color: #0b1e3a;
    --card-color: #1e3a5f;
    --text-color: #fff;
    --muted-color: #cdd9ea;
    --link-color: #aad4ff;
    --accent-color: #4da6ff;
    --theme-btn-bg: #0b1e3a;
    --theme-btn-text: #fff;
}

html.blue {
    --bg-r: 11; --bg-g: 30; --bg-b: 58;
    --bg-color: #0b1e3a;
    --card-color: #1e3a5f;
    --text-color: #fff;
    --muted-color: #cdd9ea;
    --link-color: #aad4ff;
    --accent-color: #4da6ff;
    --theme-btn-bg: #0b1e3a;
    --theme-btn-text: #fff;
}

html.red {
    --bg-r: 80; --bg-g: 18; --bg-b: 18;
    --bg-color: #501212;
    --card-color: #7d2a2a;
    --text-color: #fff;
    --muted-color: #f0cccc;
    --link-color: #ffaaaa;
    --accent-color: #ff4d4d;
    --theme-btn-bg: #501212;
    --theme-btn-text: #fff;
}

html.green {
    --bg-r: 11; --bg-g: 58; --bg-b: 20;
    --bg-color: #0b3a14;
    --card-color: #1e5f2e;
    --text-color: #fff;
    --muted-color: #cceccf;
    --link-color: #aaffaa;
    --accent-color: #4dff4d;
    --theme-btn-bg: #0b3a14;
    --theme-btn-text: #fff;
}

html.white {
    --bg-r: 236; --bg-g: 239; --bg-b: 241;
    --bg-color: #eceff1;
    --card-color: #ffffff;
    --text-color: #0b1e3a;
    --muted-color: #4a5568;
    --link-color: #0645ad;
    --accent-color: #0078d7;
    --theme-btn-bg: #ffffff;
    --theme-btn-text: #0b1e3a;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 72px 0 2rem 0;
    background: var(--bg-color);
    color: var(--text-color);
    transition: background .3s ease, color .3s ease;
}

h1 { color: var(--text-color); margin: 0; font-size: 1.3rem; }

/* === TOPBAR === */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 56px;
    display: flex;
    align-items: center;
    background: rgba(var(--bg-r), var(--bg-g), var(--bg-b), .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(127, 127, 127, .25);
}
.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    width: 100%;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.theme-btn {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    padding: 7px 14px;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.theme-btn:hover { filter: brightness(1.1); }

/* === CONTENT === */
.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

/* All buttons share the same look as the theme (Blue) button: theme-button
   background/text with a subtle gray border. */
.action-btn {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    padding: 10px 18px;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: filter .15s ease, transform .05s ease, border-color .15s ease;
}
.action-btn:hover:not(:disabled) { filter: brightness(1.1); }
.action-btn:active:not(:disabled) { transform: translateY(1px); }
.action-btn:disabled { opacity: .55; cursor: default; }

/* The last-clicked button looks the same, just with a brighter-blue border.
   Only the border color changes (still 1px), so there is no layout shift. */
.action-btn.active {
    border-color: var(--accent-color);
}

/* === OUTPUT === */
.output-wrap {
    background: var(--card-color);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    overflow: hidden;
}
.status {
    padding: .6rem 0;
    font-weight: 700;
    min-height: 1.2rem;
    color: var(--text-color);
}
.status:empty { display: none; }
.output {
    margin: 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
    white-space: pre;
}

@media (max-width: 600px) {
    .output { font-size: 11px; }
    h1 { font-size: 1.05rem; }
}

/* === REPORT TABLE VIEW === */
.report-view[hidden] { display: none; }

.report-title {
    margin: 0 0 .15rem 0;
    font-size: 1.15rem;
    color: var(--text-color);
}
.report-subtitle {
    margin-bottom: 1rem;
    color: var(--muted-color);
    font-size: .9rem;
}

/* NOTE: no overflow on this wrapper. An element with overflow other than
   visible becomes the scroll container for position: sticky, which stops the
   header pinning to the viewport (that caused the header to overlay rows).
   Vertical scrolling happens on the page, so the sticky header pins against
   the fixed topbar as intended. */
.table-wrap {
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

.report-table {
    width: 100%;
    /* separate (not collapse) + NO overflow clipping. An overflow other than
       visible here makes the table its own scroll container, which pins the
       sticky header 56px down from the TABLE's top edge (over the first rows)
       instead of against the viewport. Keep overflow visible. */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-color);
    font-size: .9rem;
}

.report-table th,
.report-table td {
    padding: .5rem .75rem;
    text-align: left;
    border-bottom: 1px solid rgba(127, 127, 127, .25);
    white-space: nowrap;
}

/* Numeric columns right-align, with tabular figures for clean alignment. */
.report-table th.num,
.report-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.report-table tbody tr:hover { background: rgba(127, 127, 127, .12); }

/* Sticky header: pins just under the 56px fixed topbar when scrolling. The
   solid, opaque background plus the high z-index keep data rows from showing
   through or above the header as they scroll past. */
.report-table thead th {
    position: sticky;
    top: 56px;
    z-index: 5;
    background: var(--card-color);
    color: var(--muted-color);
    font-weight: 700;
    /* A top border + stronger bottom divider give the pinned row a clear edge
       against the rows scrolling beneath it. */
    border-top: 1px solid rgba(127, 127, 127, .25);
    border-bottom: 2px solid var(--accent-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* Sortable headers: pointer cursor + a sort-direction arrow. */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-color); }
th .arrow { color: var(--accent-color); margin-left: .3rem; font-size: .75rem; }
th.sort-asc .arrow::after { content: "\25B2"; }   /* ▲ */
th.sort-desc .arrow::after { content: "\25BC"; }  /* ▼ */

/* === LEGEND === */
/* A card with a responsive grid of term -> definition pairs, in the normal
   UI font rather than monospace plain text. */
.legend {
    margin: 1.5rem 0 0 0;
    background: var(--card-color);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    padding: 1rem 1.25rem 1.25rem;
}
.legend-title {
    margin: 0 0 .75rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}
.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .5rem 1.5rem;
}
.legend-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: .5rem;
    align-items: baseline;
    font-size: .9rem;
    line-height: 1.4;
}
.legend-term {
    font-weight: 700;
    color: var(--accent-color);
    white-space: nowrap;
}
.legend-def { color: var(--muted-color); }
.legend-note {
    margin: 1rem 0 0 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(127, 127, 127, .25);
    font-size: .85rem;
    font-style: italic;
    color: var(--muted-color);
}

@media (max-width: 600px) {
    .report-table { font-size: 12px; }
    .legend-grid { grid-template-columns: 1fr; }
}

/* === SCRAPE PROGRESS MODAL === */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.modal-overlay[hidden] { display: none; }

.modal-dialog {
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--card-color);
    color: var(--text-color);
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    padding: 1.25rem 1.5rem 1.5rem;
}

.modal-title {
    margin: 0 0 .9rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Spinner next to the modal title. */
.spinner {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid rgba(127, 127, 127, .4);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scrape-log {
    margin: 0;
    padding: .9rem 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 6rem;
    background: var(--bg-color);
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 6px;
    font-family: "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted-color);
    white-space: pre-wrap;
    word-break: break-word;
}