/*
 * @file Eldora brand stylesheet — the SINGLE editable source of the Eldora look.
 * @description Drop-in replacement for aipractice-applications's `runtime-config/{env}/theme.css`. aipractice-applications's local brand
 * overlay (VITE_BRAND_DIR) loads this file directly in dev (and a future Eldora fork serves it from the
 * theme-assets CDN). It carries three things:
 *   1. `@font-face` for the self-hosted Eldora fonts (relative `fonts/*.woff2` URLs).
 *   2. the `:root` `--theme-*` brand block — colours + fonts (overrides jdb's zero-specificity tokens.css
 *      fallback, and is parsed by the overlay to build the matching Mantine palette).
 *   3. Eldora "chrome" rules — the dark menu bar / title band / navigation rail and rectangular buttons that
 *      the `--theme-*` token layer alone cannot express. These use `!important` to win over the app CSS.
 * Edit THIS file to tune the Eldora look, then restart the dev server.
 */

/* === 1. Self-hosted Eldora fonts === */

/* Body font (Roboto). */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/Roboto-Regular.woff2) format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/Roboto-Medium.woff2) format("woff2");
}

/* Display font (Bricolage Grotesque). */
@font-face {
    font-family: "Bricolage";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fonts/Bricolage-SemiBold.woff2) format("woff2");
}

/* === 2. Brand token block — the SPA / Hosted-UI `--theme-*` custom properties === */
:root {
    --theme-font: "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif;
    --theme-serif-font: "Bricolage", "Roboto", system-ui, sans-serif;
    --theme-primary: #80ba27;
    --theme-primary-hover: #71a422;
    --theme-secondary: #212631;
    --theme-secondary-soft: #d9dbdf;
    --theme-background: #f1f1f1;
    --theme-surface: #ffffff;
    --theme-surface-muted: #e9e9ea;
    --theme-border: #babcbf;
    --theme-text: #212631;
    --theme-text-muted: #6a6e75;
    --theme-text-strong: #0e1015;
    --theme-shadow: rgba(128, 186, 39, 0.18);

    /* Eldora dark slate reused by the chrome rules below. */
    --eldora-chrome: #212631;
}

/* === 3. Eldora chrome (dark menu bar + rail, rectangular buttons) === */

/* Top menu bar: white tab / menu text on the now-dark slate banner (bg = --theme-secondary). */
.app-tabs .mantine-Tabs-tab,
.app-tabs .mantine-Tabs-tab .mantine-Tabs-tabLabel,
.app-tabs__login {
    color: #ffffff !important;
}

/* NOTE: the "Admin — {workspace}" title band keeps its inline per-workspace colour (red for Production,
   orange for Testing, …) on purpose — it signals which workspace you are in, so it is NOT overridden here. */

/* Left navigation rail: a flush dark panel — square corners, hard against the window's left edge and up to
   the title band (no floating-card inset). */
.workspace-nav-column {
    position: relative !important;
    background: var(--eldora-chrome) !important;
    border-radius: 0 !important;
    border-right: none !important;
    /* The rail sits at its natural top (flush under the title band once the card radius is gone); a 1px lift
       just swallows the hairline divider so no light line shows between the band and the rail. */
    margin-top: -1px !important;
}

/* Extend the rail's dark background left to the window edge without disturbing the flex layout (no margins,
   so the nav links keep their position). The strip spans the full rail height. */
.workspace-nav-column::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 100% !important;
    width: 100vw !important;
    background: var(--eldora-chrome) !important;
}

/* Nav-link labels are white on the dark rail; inline-block so an underline hugs the text width. The label's
   left padding is moved to a margin so the underline starts exactly at the text (not 8px to its left). */
.projects-menu__link .mantine-NavLink-label {
    color: #ffffff !important;
    display: inline-block !important;
    padding-left: 0 !important;
    margin-left: 8px !important;
}

/* Larger left-menu labels. The extra `.workspace-nav-column` raises specificity so this beats the app's
   `--theme-action-size` !important rule regardless of stylesheet load order. */
.workspace-nav-column .projects-menu__link .mantine-NavLink-label {
    font-size: 16px !important;
}

/* Eldora nav items use an UNDERLINE indicator, not a filled background. Strip the app's green active fill and
   every hover/resting background so items are flat on the dark rail in all states. */
.projects-menu__link,
.projects-menu__link:hover,
.projects-menu__link[data-active="true"],
.projects-menu__link[data-active="true"]:hover,
.projects-menu__link[data-active="true"][data-hovered="true"] {
    background-color: transparent !important;
}

/* Selected AND hovered items → the same grey underline under the label, aligned to the text. */
.projects-menu__link[data-active="true"] .mantine-NavLink-label,
.projects-menu__link:hover .mantine-NavLink-label {
    border-bottom: 2px solid rgba(255, 255, 255, 0.6) !important;
    padding-bottom: 2px !important;
}

/* Buttons & nav pills: rectangular with a small corner radius (eldora style) instead of the JDB pill. */
.mantine-Button-root {
    --button-radius: 6px !important;
    border-radius: 6px !important;
}
.projects-menu__link {
    border-radius: 6px !important;
}