/* ============================================
   Base Styles - Reset & Typography
   ============================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color var(--transition-normal), 
                border-color var(--transition-normal), 
                color var(--transition-normal);
}

body {
    /* The stack itself moved into --font-sans (_variables.css): it is SHARED
       by every design (D5), and changing the app's font is that one line. */
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: var(--base-font-size, 15px);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Chat page body - no scroll, fixed to viewport */
body.chat-page {
    height: 100vh;
    overflow: hidden;
}

/* Prevent text selection during resize */
body.resizing-sidebar {
    user-select: none;
    cursor: col-resize !important;
}

body.resizing-sidebar * {
    cursor: col-resize !important;
}

/* ===========================================
   Scrollbars — the app-wide thin skin
   =========================================== */
/* ONE definition for every scrollbar in the app, the page's own included: a
   5px thumb in --border on a transparent track, --text-muted on hover. Both
   halves are needed — scrollbar-width/-color covers Firefox, the
   ::-webkit-scrollbar rules cover Chrome/Safari — and the colours are theme
   tokens, so it follows data-theme everywhere.

   Per-element scroll rules keep only BEHAVIOUR (scrollbar-gutter,
   overscroll-behavior, max-height); never re-declare the skin on an element —
   that is the duplication this section deleted from six files on 2026-08-13. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-lg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===========================================
   Typography Scale
   =========================================== */
/* Heading sizes are left to browser / Bootstrap defaults.
   Fluid --base-font-size in _variables.css drives overall scale
   via font-size on <body>; no stepped media-query overrides needed. */

/* Ensure headings always use the theme text color so they remain
   visible in dark mode even when inside Bootstrap .card elements
   that reset color to their own defaults. */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
}

/* ===========================================
   Main Content Layout
   =========================================== */

.main-content {
    flex: 1;
    padding: var(--base-spacing) calc(var(--base-spacing) * 1.5);
    /* Full-viewport width on every page (matches chat-main-content behavior).
       No 2400px cap — content uses the entire screen on 2K/4K displays. */
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

/* Chat page has special full-screen layout — override the .main-content cap so the
   3-panel workspace grid uses the entire viewport width with no side gutters */
.chat-main-content {
    padding: 0;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--bg) 0%, #f0f4f8 100%);
    /* Reset the container cap from .main-content — chat must be full-width */
    max-width: 100%;
    margin: 0;
    width: 100%;
}

/* Dark theme gradient */
[data-theme="dark"] .chat-main-content {
    background: linear-gradient(135deg, #0f1419 0%, #1a1a2e 100%);
}

/* ===========================================
   Smooth cross-page navigation (View Transitions)
   ===========================================
   Same-origin navigations crossfade instead of hard-cutting, so server-rendered
   page loads feel like desktop routing. Progressive enhancement: browsers without
   the API just navigate normally. Paired with prerender speculation rules
   (fragments/scripts.html :: scripts-auth) so the target page is ready on click.
   Persistent chrome (the sidebar rail) is pinned via view-transition-name in
   _sidebar.css, so only the page content crossfades. */
@view-transition {
    navigation: auto;
}

/* Respect reduced-motion: swap instantly, no crossfade. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

@media (max-width: 767.98px) {
    .main-content {
        padding: 1rem;
    }
    
    .chat-main-content {
        padding: 0;
    }
}

/* ===========================================
   Utility Text Classes
   =========================================== */

.text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Same remap, same reason as .text-muted above: Bootstrap's status text
   utilities are frozen --bs-* values that follow neither the theme nor the
   design. Measured on all four cards, which is what phase 4 added:

     .text-danger   #dc3545   4.29–4.53:1 light   2.70–3.77:1 dark
     .text-success  #198754   4.30–4.53:1 light   2.70–3.76:1 dark
     .text-warning  #ffc107   1.55–1.63:1 light   7.50–10.46:1 dark
     .text-info     #0dcaf0   1.86–1.96:1 light   6.24–8.71:1 dark

   Each is a range because a design owns its card: بنفسجي's is #f7f9fc and the
   other three are white, and the four dark cards run from #13231c to #143a44.
   Amber and cyan are the ones to notice: at 1.55:1 and 1.86:1 they are very
   nearly invisible on a light card, and they were used that way on 32 routed
   sites. Both are a Bootstrap colour picked for a dark-first palette.

   All four take --*-text, the readable-as-text shade tuned per theme against
   the page background — 5.70:1 at the tightest, 10.22:1 at the widest — which
   also puts an outline button, an alert and a bare icon on one value per
   status instead of three. .text-danger's light half was a hand-rolled
   color-mix of the FILL red; --danger-text is the same idea with a number
   beside it.

   Scoped BELOW the badge chips on purpose: .badge.text-success is (0,2,0) and
   keeps its own tuned mix, which is measured against the chip's tint rather
   than against the card.

   NOT touched: the was-validated BORDER and its ✓/✗ icons, which stay on
   Bootstrap's own --bs-form-valid-* / --bs-form-invalid-* tokens deliberately,
   because the two glyphs are baked-in data URIs and re-theming the border
   alone would put a themed ring around an unthemed mark (the known deviation
   in CLAUDE.md's form-validation section). The .invalid-feedback MESSAGE is a
   different thing and did move — it was never on a --bs-* token, it was on
   --danger — see _forms.css. */
.text-danger {
    color: var(--danger-text) !important;
}

.text-success {
    color: var(--success-text) !important;
}

.text-warning {
    color: var(--warning-text) !important;
}

.text-info {
    color: var(--info-text) !important;
}

.bg-gradient {
    background: var(--primary-fill) !important;
}

/* ===========================================
   Bidirectional Text Support (Arabic/English)
   =========================================== */

.bidi-content {
    unicode-bidi: plaintext;
    text-align: start;
}

.bidi-content[dir="rtl"] {
    text-align: right;
}

.bidi-content * {
    unicode-bidi: embed;
}

.bidi-content[dir="rtl"] ul,
.bidi-content[dir="rtl"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

.bidi-content[dir="rtl"] blockquote {
    border-left: none;
    border-right: 3px solid var(--primary);
    padding-left: 0;
    padding-right: 1rem;
}

.bidi-content .doc-reference {
    direction: ltr;
    unicode-bidi: isolate;
}