/* =====================================================================
   Quran Tester - shared stylesheet
   =====================================================================
   Used by: minimaltest.html, commonphrase.html, irab.html, occurrencetest.html
   (and their -ar.html Arabic counterparts, where they exist)

   This file covers the colour palette, base typography/resets, and the
   component classes that are genuinely identical or near-identical
   across the apps: the Surah/Juz/Page selection panel (tabs,
   checkbox lists, select-all), buttons, loading indicators, and
   field help/error text.

   Each app keeps its own <style> block (loaded AFTER this file) for
   anything specific to that app's own layout - this file is not meant
   to force every app's markup to look identical, just to share the
   parts that already are.

   Logical properties (margin-inline-*, border-inline-*, etc.) are used
   instead of left/right so this stylesheet behaves correctly for a
   future RTL (Arabic) version without any extra work.

   THEMES: the default (no attribute needed) is the gold/dark palette
   below. [data-theme="plain-light"] and [data-theme="plain-dark"] give
   a second, simpler blue-accented palette (based on the original
   occurrencetest.html look), each just remapping the same variable
   names - no other CSS in this file or any app needs to change. See
   QuranPicker.wireThemeToggle() in quran-picker.js for how the choice
   is applied and remembered.
   ===================================================================== */

:root {
    --bg: #101a16;
    --panel: #17241f;
    --panel-alt: #1e2f28;
    --border: #2c3d35;
    --text: #ede6d6;
    --text-muted: #93a89b;
    --accent: #c9a15a;
    --accent-text: #1a1408;
    --accent-soft: rgba(201, 161, 90, 0.16);
    --success: #4caf6e;
    --success-text: #0d2113;
    --highlight-bg: #4a3a1c;
    --highlight-text: #f3d9a4;
    --danger: #c96a5a;
    --danger-bg: #3a2420;

    /* Font used specifically for Quran text (ayahs, phrases, surah/juz
       names) - kept separate from the general body font so it can be
       swapped later (e.g. a font picker) without touching every app. */
    --quran-font: "Amiri", serif;
}

[data-theme="plain-light"] {
    --bg: #f5f5f5;
    --panel: #ffffff;
    --panel-alt: #f8f9fa;
    --border: #dddddd;
    --text: #2c3e50;
    --text-muted: #666666;
    --accent: #3498db;
    --accent-text: #ffffff;
    --accent-soft: rgba(52, 152, 219, 0.12);
    --success: #27ae60;
    --success-text: #ffffff;
    --highlight-bg: #eaf3fb;
    --highlight-text: #1b4f72;
    --danger: #e74c3c;
    --danger-bg: #fadbd8;
}

[data-theme="plain-dark"] {
    --bg: #1a1a1a;
    --panel: #2d2d2d;
    --panel-alt: #3a3a3a;
    --border: #4a4a4a;
    --text: #e0e0e0;
    --text-muted: #b0b0b0;
    --accent: #3498db;
    --accent-text: #ffffff;
    --accent-soft: rgba(52, 152, 219, 0.18);
    --success: #2ecc71;
    --success-text: #0d3320;
    --highlight-bg: #2c3e50;
    --highlight-text: #aed6f1;
    --danger: #ff6b6b;
    --danger-bg: #4a2a2a;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    /* Explicit positioning context (rather than leaving the side-menu
       toggle button to resolve against the initial containing block) and
       a guaranteed minimum height, so the button positions identically on
       every page regardless of content length or text direction. */
    position: relative;
    min-height: 100vh;
}

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

h1, h2 {
    font-family: "Spectral", Georgia, serif;
    font-weight: 600;
    color: var(--text);
}

/* Shared "app card" shell (used by minimaltest.html and irab.html) */
.container {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 8px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text);
}

select,
input[type="text"],
input[type="number"] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--panel-alt);
    color: var(--text);
    font-family: inherit;
}

input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

.control-group {
    margin-bottom: 15px;
}

.filter-options-box {
    margin-top: 15px;
    padding: 15px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.field-help {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-block-start: 0.4rem;
}

.field-error {
    color: var(--danger);
    font-size: 13px;
    margin-block-start: 5px;
    display: none;
}

/* =====================================================================
   Surah / Juz / Page selection panel (tabs)
   ===================================================================== */

.tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-block-end: 1rem;
    border-block-end: 1px solid var(--border);
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    border-block-end: 2px solid transparent;
    white-space: nowrap;
}

.tab-btn.active {
    color: var(--text);
    border-block-end-color: var(--accent);
    font-weight: 700;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.select-all-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block-end: 0.6rem;
    margin-block-end: 0.6rem;
    border-block-end: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.select-all-row label {
    margin: 0;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

.checkbox-list {
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    padding: 4px;
}

.checkbox-list label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: normal;
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-list .arabic-name {
    font-family: var(--quran-font);
    font-size: 1.05rem;
}

.list-loading,
.loading-text {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 14px;
}

.loading-dots {
    display: inline-block;
    width: 1.1em;
    text-align: start;
}

/* =====================================================================
   Buttons
   ===================================================================== */

button {
    font-family: inherit;
    border: 1px solid var(--border);
    background: var(--panel-alt);
    color: var(--text);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
}

button:hover {
    border-color: var(--accent);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
    font-weight: 700;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-success {
    background-color: var(--success);
    color: var(--success-text);
    border-color: var(--success);
    font-weight: 700;
}

.btn-success:hover {
    filter: brightness(1.08);
}

.btn-secondary {
    background: var(--panel-alt);
    color: var(--text);
    border: 1px solid var(--border);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* =====================================================================
   Error banner
   ===================================================================== */

.error {
    display: none;
    color: var(--danger);
    padding: 10px 14px;
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    border-radius: 4px;
    margin-block-end: 10px;
}

/* =====================================================================
   Side menu (theme, language switch, app list, GitHub link)
   ===================================================================== */

.side-menu-toggle {
    /* Anchored to the page, not the viewport, so it scrolls away with the
       content above it rather than following the user down the page. */
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 1000;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-menu-toggle:hover {
    border-color: var(--accent);
}

.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.side-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.side-menu-panel {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    width: 280px;
    max-width: 85vw;
    background: var(--panel);
    border-inline-start: 1px solid var(--border);
    z-index: 1002;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

/* translateX is a physical (not logical) transform, so RTL pages need an
   explicit override to slide in from their own end edge (the left). */
[dir="rtl"] .side-menu-panel {
    transform: translateX(-100%);
}

.side-menu-panel.open {
    transform: translateX(0);
}

.side-menu-close {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    padding: 4px 8px;
    border-radius: 4px;
}

.side-menu-close:hover {
    border-color: var(--border);
}

.side-menu-section {
    margin-bottom: 22px;
}

.side-menu-heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.side-menu-theme-row,
.side-menu-lang-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Shared look for the theme buttons and the two language boxes, so the
   language switch reads as clearly as the theme control does. Used on
   <button>, <a>, and <span> alike (<span> for the current, non-clickable
   choice in either row). */
.side-menu-toggle-btn {
    flex: 1;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-alt);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

.side-menu-toggle-btn:hover {
    border-color: var(--accent);
}

.side-menu-toggle-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
    cursor: default;
}

.side-menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-menu-list li a,
.side-menu-list li span {
    display: block;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.side-menu-list li a:hover {
    background: var(--panel-alt);
}

.side-menu-list li.current span {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}

.side-menu-github {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.side-menu-github:hover {
    color: var(--accent);
}

/* =====================================================================
   Page footer (small credit/link line at the bottom of a page)
   ===================================================================== */

.home-footer {
    margin-top: 56px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.home-footer a {
    color: var(--text-muted);
    text-decoration: underline;
}

.home-footer a:hover {
    color: var(--accent);
}

/* =====================================================================
   Small screens
   ===================================================================== */

@media (max-width: 600px) {
    .tab-btn {
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
    }

    .checkbox-list {
        grid-template-columns: 1fr;
    }

    .side-menu-panel {
        width: 260px;
    }
}