/* =============================================================================
   Application shell.

   Element styling for the chrome every page sits inside: body, links, cards,
   dropdowns, modals, form controls, tables, the sidebar and the header.

   Every rule names a token. Colour is defined once, in srijova-palette.css, so
   switching palette repaints the whole shell without a rule here changing.

   Scoped to the class names the app already uses rather than restyling from scratch,
   so layout, spacing and responsive behaviour are untouched - only colour moves.

   LOAD ORDER: after app.css and srijova-design-system.css, so it wins where those
   sheets hardcode a colour instead of naming one.
   ============================================================================= */

/* The variable aliases that used to live here moved to srijova-palette.css, beside
   the palettes they point at. Keeping them next to the definitions is what makes
   "one source of truth" checkable at a glance. What remains below is element styling:
   rules that name a token, which is exactly what should live in a shell stylesheet. */

/* -----------------------------------------------------------------------------
   Element-level rules held back from Phase 1.

   These were excluded from srijova-theme.css because that file was meant to publish
   variables without repainting anything. They belong here, where the shell is being
   moved onto tokens deliberately.
   ----------------------------------------------------------------------------- */

html {
    background: var(--itj-bg-app);
}

body {
    background: var(--itj-bg-app);
    color: var(--itj-text-primary);
    /* Colour transitions only. Transitioning `all` would animate layout properties
       during theme switches and make every hover feel sluggish. */
    transition: background-color var(--itj-transition), color var(--itj-transition);
}

a {
    color: var(--itj-primary);
}

a:hover {
    color: var(--itj-primary-hover);
}

::selection {
    background: var(--itj-primary-soft);
    color: var(--itj-text-primary);
}

/* -----------------------------------------------------------------------------
   Shell surfaces.

   Scoped to the template's own class names rather than restyled from scratch, so
   layout, spacing and responsive behaviour are untouched - only colour moves.
   ----------------------------------------------------------------------------- */

/* Cards and panels: one border and one soft shadow. Heavier shadows are reserved
   for things that genuinely float - dropdowns, popovers, modals. */
.card,
.srijova-surface {
    background: var(--itj-bg-surface);
    border-color: var(--itj-border);
    box-shadow: var(--itj-shadow-sm);
}

/* Dropdowns, popovers and modals do float, so they get the elevated surface and a
   stronger shadow - that difference is what reads as "above the page". */
.dropdown-menu,
.modal-content,
.popover {
    background: var(--itj-bg-elevated);
    border-color: var(--itj-border);
    box-shadow: var(--itj-shadow-lg);
    color: var(--itj-text-primary);
}

.dropdown-item {
    color: var(--itj-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--itj-bg-hover);
    color: var(--itj-text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--itj-bg-selected);
    color: var(--itj-primary);
}

.dropdown-header {
    color: var(--itj-text-muted);
}

.dropdown-divider {
    border-color: var(--itj-border-subtle);
}

/* Form controls. Dark mode's usual failure is a light input on a dark card, or dark
   text inside a dark input - both come from a hardcoded background, so both are
   fixed by naming the surface. */
.form-control,
.form-select,
.input-group-text {
    background: var(--itj-bg-surface);
    border-color: var(--itj-border);
    color: var(--itj-text-primary);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--itj-text-muted);
    opacity: 1; /* Firefox dims placeholders by default, which fails contrast in dark. */
}

.form-control:focus,
.form-select:focus {
    background: var(--itj-bg-surface);
    border-color: var(--itj-primary);
    box-shadow: var(--itj-focus-ring);
    color: var(--itj-text-primary);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--itj-bg-surface-2);
    color: var(--itj-text-disabled);
}

.form-label,
.col-form-label {
    color: var(--itj-text-secondary);
}

/* Tables: header on the secondary surface so it separates from the body without a
   heavy border, and hover on the shared hover token so rows feel the same as menus. */
.table {
    --bs-table-bg: transparent;
    color: var(--itj-text-primary);
    border-color: var(--itj-border-subtle);
}

.table > thead th {
    background: var(--itj-bg-surface-2);
    color: var(--itj-text-secondary);
    border-color: var(--itj-border-subtle);
}

.table > tbody td {
    border-color: var(--itj-border-subtle);
}

.table > tbody tr:hover > td {
    background: var(--itj-bg-hover);
}

/* Bootstrap's .text-muted is fixed grey, which is unreadable on a dark surface. */
.text-muted {
    color: var(--itj-text-muted) !important; /* overriding Bootstrap's own !important */
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--itj-border) !important; /* same reason */
}

.bg-white,
.bg-body {
    background: var(--itj-bg-surface) !important; /* same reason */
}

/* Keyboard focus must stay visible in both themes, and must not be replaced by
   hover styling - a mouse user's hover and a keyboard user's focus are different
   states and need to look different. */
:focus-visible {
    outline: 2px solid var(--itj-primary);
    outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   Shell chrome, targeted at the elements rather than the variables.

   The variable aliases above are not enough here. app.css declares
   --menu-bg twice more, under [data-menu-styles="dark"] and [data-header-styles="dark"],
   which are attributes this app always sets. Those declarations have the same
   specificity as the aliases, so which one wins comes down to file order - a duel
   that is easy to lose again the next time a stylesheet is added.

   Styling .app-sidebar and .app-header directly ends the argument: whatever
   --menu-bg happens to resolve to, the element is painted from the token.
   ----------------------------------------------------------------------------- */

.app-sidebar {
    background: var(--itj-sidebar-bg);
    border-right: 1px solid var(--itj-border-subtle);
}

/* The sidebar stays navy in both themes. In dark it is deliberately DEEPER than the
   page, not lighter - that difference is what keeps it reading as a separate surface
   instead of a panel floating on top of one. */
.app-sidebar .side-menu__item,
.app-sidebar .side-menu__label {
    color: var(--itj-sidebar-text);
}

.app-sidebar .slide__category .category-name,
.app-sidebar .side-menu__subcopy small {
    color: var(--itj-sidebar-muted);
}

.app-sidebar .side-menu__item:hover {
    background: var(--itj-sidebar-hover);
    color: var(--itj-sidebar-text);
}

.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item.active .side-menu__tile {
    background: var(--itj-sidebar-selected);
    color: var(--itj-text-inverse);
}

.app-header {
    background: var(--itj-bg-surface);
    border-bottom: 1px solid var(--itj-border);
    color: var(--itj-text-primary);
}

/* -----------------------------------------------------------------------------
   Headings.

   Page titles across the app are set in brand navy, either literally or through a
   local --*-navy variable. On a dark page that is near-invisible. The local variables
   are re-pointed file by file; this catches the headings that name no variable at all.
   ----------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--itj-text-primary);
}

/* Panels that hardcode white. Scoped to dark only, so light mode is untouched and
   this cannot mask a page that has already been migrated properly. */





/* -----------------------------------------------------------------------------
   Palette menu swatches.

   Literal colours on purpose: each dot has to show what the palette LOOKS like, so
   it cannot be drawn from the palette currently in effect - all four would render
   identically. These are the only hardcoded colours in this file.
   ----------------------------------------------------------------------------- */

.sj-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    vertical-align: -2px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.sj-swatch--coastal    { background: linear-gradient(135deg, #87B6BC, #BED4CB); }
.sj-swatch--terracotta { background: linear-gradient(135deg, #BF4646, #EDDCC6); }
.sj-swatch--slate      { background: linear-gradient(135deg, #576A8F, #B7BDF7); }
.sj-swatch--pastel     { background: linear-gradient(135deg, #9FA1FF, #AEE2FF 55%, #D9F9DF); }

/* The sidebar carries the palette's signature gradient, so its own text colour comes
   from the palette too - Coastal and Pastel need dark text on light gradients,
   Terracotta and Slate need white on dark ones. */
.app-sidebar {
    background: var(--sj-sidebar);
    color: var(--sj-sidebar-text);
}

.app-sidebar .side-menu__item,
.app-sidebar .side-menu__label,
.app-sidebar .main-sidebar-header .header-logo {
    color: var(--sj-sidebar-text);
}

.app-sidebar .slide__category .category-name,
.app-sidebar .side-menu__subcopy small {
    color: var(--sj-sidebar-muted);
}

.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item.active .side-menu__tile {
    background: var(--sj-active);
    color: var(--sj-sidebar-text);
}


/* =============================================================================
   Alias layer.

   The names the codebase already uses, pointed at the palette. This is what lets a
   900-reference migration land without a 900-line rename: colour is defined once,
   above, and every existing rule resolves to it.

   These are aliases, not a second system. Nothing below assigns a literal colour.
   New code should use --sj-* directly; the aliases exist to be deleted, file by
   file, as the old names are retired.
   ============================================================================= */

:root {
    /* --- theme package vocabulary (--itj-*) --- */
    --itj-bg-app: var(--sj-bg);
    --itj-bg-surface: var(--sj-surface);
    --itj-bg-surface-2: var(--sj-surface-2);
    --itj-bg-surface-3: var(--sj-surface-3);
    --itj-bg-elevated: var(--sj-elevated);
    --itj-bg-hover: var(--sj-hover);
    --itj-bg-selected: var(--sj-selected);
    --itj-text-primary: var(--sj-text);
    --itj-text-secondary: var(--sj-text-2);
    --itj-text-muted: var(--sj-muted);
    --itj-text-disabled: var(--sj-text-disabled);
    --itj-text-inverse: var(--sj-text-inverse);
    --itj-border: var(--sj-border);
    --itj-border-subtle: var(--sj-border-subtle);
    --itj-border-strong: var(--sj-border-strong);
    --itj-primary: var(--sj-primary);
    --itj-primary-hover: var(--sj-primary-hover);
    --itj-primary-soft: var(--sj-primary-soft);
    --itj-success: var(--sj-success);
    --itj-success-soft: var(--sj-success-soft);
    --itj-warning: var(--sj-warning);
    --itj-warning-soft: var(--sj-warning-soft);
    --itj-danger: var(--sj-danger);
    --itj-danger-soft: var(--sj-danger-soft);
    --itj-info: var(--sj-info);
    --itj-info-soft: var(--sj-info-soft);
    --itj-shadow-sm: var(--sj-shadow-sm);
    --itj-shadow-md: var(--sj-shadow-md);
    --itj-shadow-lg: var(--sj-shadow-lg);
    --itj-focus-ring: var(--sj-focus-ring);
    --itj-transition: var(--sj-transition);
    --itj-sidebar-bg: var(--sj-sidebar);
    --itj-sidebar-text: var(--sj-sidebar-text);
    --itj-sidebar-muted: var(--sj-sidebar-muted);
    --itj-sidebar-hover: var(--sj-sidebar-hover);
    --itj-sidebar-selected: var(--sj-sidebar-selected);
    --itj-radius-lg: var(--sj-radius);
    --itj-font-family: var(--sj-font);

    /* --- design system vocabulary (--srijova-*) : 834 references --- */
    --srijova-bg: var(--sj-bg);
    --srijova-surface: var(--sj-surface);
    --srijova-surface-hover: var(--sj-hover);
    --srijova-border: var(--sj-border);
    --srijova-border-strong: var(--sj-border-strong);
    --srijova-text: var(--sj-text);
    --srijova-text-muted: var(--sj-text-2);
    --srijova-text-subtle: var(--sj-muted);
    --srijova-brand-50: var(--sj-primary-soft);
    --srijova-success: var(--sj-success);
    --srijova-success-bg: var(--sj-success-soft);
    --srijova-warning: var(--sj-warning);
    --srijova-danger: var(--sj-danger);
    --srijova-danger-bg: var(--sj-danger-soft);
    --srijova-shadow-sm: var(--sj-shadow-sm);
    --srijova-shadow-md: var(--sj-shadow-md);
    --srijova-shadow-lg: var(--sj-shadow-lg);

    /* --- admin template vocabulary --- */
    --default-background: var(--sj-bg);
    --default-text-color: var(--sj-text-2);
    --default-border: var(--sj-border);
    --custom-white: var(--sj-surface);
    --custom-black: var(--sj-text);
    --muted: var(--sj-text-2);
    --form-control-bg: var(--sj-surface);
    --form-control-border: var(--sj-border);
    --header-bg: var(--sj-surface);
    --header-border-color: var(--sj-border);
    --header-prime-color: var(--sj-text);
    --menu-bg: var(--sj-sidebar);
    --menu-prime-color: var(--sj-sidebar-text);
    --menu-border-color: var(--sj-border-subtle);
    --default-font-family: var(--sj-font);

    /* app.css freezes these at the old Action Blue. Re-pointing them here - after
       app.css - is what lets its 24 rgba(var(--primary-rgb), a) washes follow the
       palette instead of staying blue under a red or teal theme. */
    --primary-rgb: var(--sj-primary-rgb);
    --secondary-rgb: var(--sj-accent-rgb);
    --primary-color: var(--sj-primary);
}


/* -----------------------------------------------------------------------------
   Sidebar brand block.

   The logo, wordmark and tagline sat on page-text colours - --custom-black and
   --muted - which are correct on a white card and wrong on a coloured rail. They
   used to be corrected by a [data-menu-styles="dark"] override; that attribute is
   gone, so the correction went with it and the brand fell back to dark-on-colour.

   Pointing them at the sidebar tokens fixes every palette at once: Coastal and
   Pastel get dark text on their light gradients, Terracotta and Slate white on
   their dark ones.
   ----------------------------------------------------------------------------- */

.app-sidebar .main-sidebar-header .header-logo,
.app-sidebar .main-sidebar-header .brand-text__name {
    color: var(--sj-sidebar-text);
}

.app-sidebar .main-sidebar-header .brand-text__tld {
    /* Slightly recessed rather than a different colour, so it reads as part of the
       wordmark on every palette instead of needing a per-palette value. */
    opacity: .72;
}

.app-sidebar .main-sidebar-header .brand-text__tag {
    color: var(--sj-sidebar-muted);
    opacity: 1;
}

/* The icon tile is drawn from the sidebar's own text colour, not the page primary -
   a blue tile on a red rail is what made this look bolted on. */
.app-sidebar .main-sidebar-header .brand-icon {
    background: color-mix(in srgb, var(--sj-sidebar-text) 14%, transparent);
    color: var(--sj-sidebar-text);
    border: 1px solid color-mix(in srgb, var(--sj-sidebar-text) 18%, transparent);
}

.app-sidebar .main-sidebar-header {
    border-bottom: 1px solid color-mix(in srgb, var(--sj-sidebar-text) 14%, transparent);
}

.app-sidebar .sidebar-collapse {
    background: color-mix(in srgb, var(--sj-sidebar-text) 10%, transparent);
    color: var(--sj-sidebar-text);
}

.app-sidebar .sidebar-collapse:hover {
    background: color-mix(in srgb, var(--sj-sidebar-text) 20%, transparent);
}