/*
 * Site-side theme rules, loaded right after the BTDT module <link>s on every page
 * (templates/base/_theme_head.html) — the auth pages and the landing page do not load
 * app.css, so anything the theme engine needs everywhere lives here.
 */

/* The BTDT loader hides .dark-mode-enabled / .dark-mode-disabled elements with this
   class (btdt/docs/btdt.md: "Your stylesheet must define .display-none"). */
.display-none { display: none !important; }

/* Sticky header: the measured navbar height (static/js/ui-helpers.js keeps it current)
   offsets the sidebar and in-page anchor scrolling. */
:root { --navbar-height: 56px; }
html { scroll-padding-top: var(--navbar-height); }

/* BTDT's shared rules recolour .text-primary/.text-secondary to the *emphasis* tokens
   (a legibility choice for body copy). This site uses them as icon/accent utilities —
   sidebar icons, KPI figures — where the utility must mean "the primary colour", as it
   does in stock Bootstrap and in every palette's own swatch. Restored here, after the
   theme links, for every palette. */
.text-primary { color: var(--theme-text-primary, rgba(var(--bs-primary-rgb), var(--bs-text-opacity))) !important; }
.text-secondary { color: var(--theme-text-secondary, rgba(var(--bs-secondary-rgb), var(--bs-text-opacity))) !important; }
/* A Bootstrap Icon is a glyph — RTLCSS cannot mirror it. Icons that point along the
   reading direction (play, send, open-in-new, log in/out) are flipped here, for every
   root (app, auth, landing). Left/right arrow and chevron PAIRS are swapped in the
   templates instead (`{% if LANGUAGE_CODE == 'ar' %}bi-arrow-left…`), because a
   class-based flip would double-flip the ones JS picks per direction (tab-scroll.js).
   Rotational arrows (repeat, clockwise, counterclockwise) and vertical ones are not
   direction-of-reading and stay as they are. */
[dir="rtl"] .bi-play-fill,
[dir="rtl"] .bi-play-circle,
[dir="rtl"] .bi-send,
[dir="rtl"] .bi-send-check,
[dir="rtl"] .bi-box-arrow-up-right,
[dir="rtl"] .bi-box-arrow-right,
[dir="rtl"] .bi-box-arrow-in-right {
  display: inline-block;
  transform: scaleX(-1);
}
/* .link-primary is keyed to the same legibility token. It is also what a link inside
   muted copy must carry: Tailwind's preflight (a { color: inherit }) otherwise renders
   a bare <a> in the surrounding text colour, indistinguishable from prose. */
.link-primary { color: var(--theme-text-primary, rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1))) !important; }
/* --theme-text-* is the raw colour for most palettes and the emphasis token for a very
   light one (snow, blossom, amber…) whose primary vanishes on white — decided per palette
   in investment/theme/catalog.py::utility_modes. The same switch feeds the outline
   buttons and the active tab, which BTDT keys to the raw colour too. */
.btn-outline-primary { --bs-btn-color: var(--theme-text-primary); --bs-btn-border-color: var(--theme-text-primary); --bs-btn-disabled-color: var(--theme-text-primary); --bs-btn-disabled-border-color: var(--theme-text-primary); }
.btn-outline-secondary { --bs-btn-color: var(--theme-text-secondary); --bs-btn-border-color: var(--theme-text-secondary); --bs-btn-disabled-color: var(--theme-text-secondary); --bs-btn-disabled-border-color: var(--theme-text-secondary); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--theme-text-primary); }

/* Input-group addons and buttons take the control's own vertical padding, so they stay
   exactly as tall as the field beside them under every spacing module. Compact spacing
   shrinks .btn but never .input-group-text (the "SAR" addon kept Bootstrap's .375rem and
   held the whole group at 38px while the field was 34px); the field's height is pinned in
   base/styles/_a_controls.html from the same --theme-control-py. */
.input-group > .input-group-text,
.input-group > .btn {
    padding-top: calc(var(--theme-control-py, 0.75rem) / 2);
    padding-bottom: calc(var(--theme-control-py, 0.75rem) / 2);
    /* …and the field's border width (thick → 2px, none → 0): borders-none keeps a 1px
       border on outline buttons, which left the +/− buttons 2px taller than the field. */
    border-width: var(--theme-control-bw, var(--bs-border-width, 1px));
}
/* …and the addon's type size follows the field's (compact spacing sets .875rem on
   .form-control; an addon left at 1rem is 3px taller than the field it sits beside). */
.input-group > .input-group-text { font-size: var(--theme-control-fs, 1rem); }
/* Small groups (the table search boxes) are Bootstrap's -sm ratio of the same metrics:
   two-thirds of the vertical padding and .875 of the type size — .25rem/.875rem under the
   default spacing, exactly the stock .input-group-sm values — matching the -sm field pin in
   base/styles/_a_controls.html. Without this the addon took the full-size metrics above
   and stood 3px taller than the small field beside it. */
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    padding-top: calc(var(--theme-control-py, 0.75rem) / 3);
    padding-bottom: calc(var(--theme-control-py, 0.75rem) / 3);
    font-size: calc(var(--theme-control-fs, 1rem) * 0.875);
}

/* An avatar must be a CIRCLE, never an ellipse. Tailwind preflight (tailwind-lite.css,
   loaded last) sets `img { height: auto }`, and an author rule outranks the HTML `height`
   attribute — which is only a presentational hint — so a non-square photo rendered as a
   RECTANGLE at its natural ratio and `border-radius: 50%` drew an ellipse. The class
   selector wins over preflight's bare `img` regardless of load order.

   `aspect-ratio` (not a fixed height) keeps the box square from whatever width the markup
   sets, so the 24px navbar avatar and the 64px profile one both work from one rule; and
   `object-fit: cover` CROPS the photo to that square instead of squashing it, which is
   what "clipped to a circle" has to mean for a portrait or landscape upload. */
img.rounded-circle {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Bootstrap's .table-light is a FIXED light variant (#f8f9fa on #000) that ignores
   data-bs-theme, so every <thead class="table-light"> stayed white in dark mode. Key it to
   the surface tokens: under the default palette in light mode --bs-tertiary-bg IS #f8f9fa,
   so nothing moves there; in dark mode and under other palettes it follows the theme. */
.table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-secondary-bg);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-body-color);
}

/* The navbar toggler's focus ring: Bootstrap draws it in currentColor, and BTDT makes
   the toggler inherit the navbar's full-strength text colour, so a tap left a thick
   black frame around the button. Use the same translucent primary ring as form controls. */
.navbar-toggler:focus {
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width, 0.25rem) rgba(var(--bs-primary-rgb), 0.25);
}

/* Dark mode: BTDT's dark layer turns --bs-white into a near-black surface colour, yet its
   [data-bs-theme="dark"] .navbar rule still keys the navbar text to --bs-white — so the
   brand and every nav link vanished (contrast 1.1:1, measured). Key them to the body
   colour instead, which the dark layer sets to a light grey. */
[data-bs-theme="dark"] .navbar {
    --bs-navbar-color: rgba(var(--bs-body-color-rgb), 0.85);
    --bs-navbar-hover-color: var(--bs-body-color);
    --bs-navbar-active-color: var(--bs-body-color);
    --bs-navbar-brand-color: var(--bs-body-color);
    --bs-navbar-brand-hover-color: var(--bs-body-color);
    --bs-navbar-toggler-border-color: rgba(var(--bs-body-color-rgb), 0.1);
}
/* …and in dark mode the primary itself is a mid grey (#4a4a4a on #121212 is 2.1:1), so
   .text-primary/.text-secondary figures use the emphasis tokens there — BTDT's own
   default for these utilities, which light mode overrides above to keep the stock look. */
[data-mode="dark"] .text-primary,
[data-mode="dark"] .link-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-mode="dark"] .text-secondary { color: var(--bs-secondary-text-emphasis) !important; }
[data-mode="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-text-emphasis); }
[data-mode="dark"] .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text-emphasis); --bs-btn-border-color: var(--bs-secondary-text-emphasis); }
[data-mode="dark"] .sidebar .nav-link.sidebar-investor:not(.active) { color: var(--bs-success-text-emphasis); }
[data-mode="dark"] .sidebar .nav-link.sidebar-support { color: var(--bs-danger-text-emphasis); }

/* Stacked navbar (below navbar-expand-lg): Bootstrap renders an open dropdown
   menu in flow (position: static), i.e. a block — inside the full-width stacked
   item it would span the whole navbar. Shrink it to its content, like a popped
   menu; the notifications menu's inline width (360px) still wins. Lives HERE,
   not in base/styles/_b_sidebar.html, because the logged-out homepage and the
   auth base load only _theme_head.html — this file reaches all three roots. */
@media (max-width: 991.98px) {
    .navbar .navbar-nav .dropdown-menu { width: max-content; }
}

/* The viewer's OWN row in the investors table. Bootstrap's .table-info is a
   fixed light-only palette (the .table-light trap above): its pale blue stays
   pale in dark mode and drowns the row's chevron/buttons. Key the highlight to
   the primary-subtle tokens instead, which follow the palette and the mode. */
.table tr.table-self {
    --bs-table-bg: var(--bs-primary-bg-subtle);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-primary-border-subtle);
    --bs-table-hover-bg: var(--bs-primary-bg-subtle);
    --bs-table-hover-color: var(--bs-body-color);
}

/* Active tab: ONE deterministic indicator across every module combination (user
   decision 2026-09-02) — the theme's accent underline, on every theme and mode.
   Before this, only the accent-bottom module drew a line; accent-none (the
   default) left the stock Bootstrap notch, whose --bs-body-bg bottom border is
   invisible on the bg-body-tertiary page, so the highlight appeared and
   vanished per theme. This file loads after every module; the !important plus
   .active's extra specificity also outranks the personality modules' own
   !important border resets. Top/side borders go transparent so the look is a
   clean underline, never a boxed hybrid. */
/* Narrow screens: the tab strips never wrap into stacked rows — the three
   overflow-capable strips carry flex-nowrap + overflow-x-auto and scroll
   sideways instead (getbootstrap-style). The scrollbar is hidden; the accent
   underline and the cut-off last tab are the scroll affordance. */
.nav-tabs {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { display: none; }
/* Inside a nowrap strip a flex item shrinks to min-content, wrapping a
   multi-word label ("Sales & Income") onto two lines inside its own button —
   keep icon, label and count badge on one line. */
.nav-tabs .nav-link { white-space: nowrap; }

/* No box around a tab in ANY state (user taste 2026-09-02): Bootstrap draws a
   rounded border box on hover/focus (--bs-nav-tabs-link-hover-border-color), and
   some BTDT personality modules re-draw it with !important. The only border a tab
   ever shows is the active underline below (whose rule outranks this one on
   specificity, so the underline colour survives). */
.nav-tabs .nav-link,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom: max(3px, var(--accent-size, 3px)) solid
        var(--accent-color, rgba(var(--bs-primary-rgb), 1)) !important;
}

/* Toasts: solid, and clear of the navbar.

   Bootstrap makes the toast surface 15% TRANSLUCENT — `--bs-toast-bg:
   rgba(var(--bs-body-bg-rgb), .85)` — and the container is fixed over the page, so
   whatever sits underneath shows through every notification (measured: a toast over a
   red block sampled (248,217,217) in light mode and (46,15,15) in dark, instead of the
   surface colour). Toasts are the ONLY component using that pattern: a grep of
   bootstrap 5.3.8 for `rgba(var(--bs-body-bg-rgb)` returns just these two variables.
   Keyed to the surface tokens so it follows every palette and dark mode, and reading
   the plain `--bs-body-bg` rather than the `-rgb` triplet also keeps it correct under
   the BTDT background-tint modules, which set the colour but never the triplet. */
.toast {
    --bs-toast-bg: var(--bs-body-bg);
    --bs-toast-header-bg: var(--bs-tertiary-bg);
}

/* The stack hangs BELOW the sticky navbar instead of over it, at every width. The
   containers carry Bootstrap's `top-0` utility (`top: 0 !important`), so the offset is
   a MARGIN — overriding `top` would need an `!important` of its own in a shared
   stylesheet. `--toast-top` is 0 here because the auth pages and the landing page reach
   this file with no navbar at all; base/styles/_a_controls.html points it at the
   measured `--navbar-height` for the app shell, which is the only root that has one. */
#toast-container {
    margin-top: var(--toast-top, 0px);
}