/* ============================================================
   VetNexus.Web — operator / clinic console theme.

   Maps the Forge scaffold's --brand-* names, and Bootstrap 5.3's own
   variables, onto the VetNexus "Forest + Cream" tokens declared in
   vetnexus-tokens.css — which MUST be linked before this file. Nothing
   below names a palette colour; every value is a --vn-* token, so a
   palette swap is a tokens-file edit (docs/design-system.md §6).

   Light / dark follows Bootstrap's data-bs-theme attribute (the theme
   toggle in _Layout.cshtml), not the OS alone, so the tokens' semantic
   aliases are re-pinned here for both sides of the switch.
   ============================================================ */

:root {
    /* Type — specs/34 §2.1. The font files are not bundled yet, so both
       stacks fall through to the system faces. No @font-face here. */
    --vn-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --vn-font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
}

/* ── Light ───────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    /* Semantic tokens, pinned so an explicit light choice beats an OS
       dark preference (vetnexus-tokens.css only knows prefers-color-scheme). */
    --vn-bg-page: var(--vn-cream-100);
    --vn-bg-surface: #FFFFFF;
    --vn-bg-surface-quiet: var(--vn-cream-050);
    --vn-bg-brand: var(--vn-forest-800);
    --vn-border-hairline: var(--vn-cream-300);
    --vn-text-primary: var(--vn-ink-800);
    --vn-text-secondary: var(--vn-ink-500);
    --vn-text-on-brand: var(--vn-cream-050);
    --vn-action-primary: var(--vn-forest-800);
    --vn-action-primary-hover: var(--vn-forest-700);
    --vn-action-link: var(--vn-forest-600);

    /* Scaffold names, kept so the rest of this file and any view that
       reached for them keeps working. Every one is a token alias. */
    --brand-primary: var(--vn-action-primary);
    --brand-primary-hover: var(--vn-action-primary-hover);
    --brand-primary-rgb: 23, 59, 51;                 /* forest-800 */
    --brand-primary-tint: var(--vn-forest-100);
    --brand-on-primary: var(--vn-text-on-brand);
    --brand-accent: var(--vn-forest-600);
    --brand-surface: var(--vn-bg-surface);
    --brand-surface-muted: var(--vn-bg-page);
    --brand-surface-quiet: var(--vn-bg-surface-quiet);
    --brand-border: var(--vn-border-hairline);
    --brand-text: var(--vn-text-primary);
    --brand-text-muted: var(--vn-text-secondary);
    --brand-nav-bg: var(--vn-forest-800);
    --brand-nav-border: var(--vn-forest-900);
    --brand-nav-text: var(--vn-cream-050);
    --brand-nav-text-muted: var(--vn-forest-200);
    --brand-nav-active: var(--vn-forest-700);
    --brand-hero-gradient: var(--vn-forest-800);     /* flat fill — no gradients */
    --brand-radius: var(--vn-radius-md);             /* 12px */
    --brand-shadow: 0 6px 18px rgba(23, 59, 51, 0.10);   /* one soft forest-tinted shadow */
    --brand-shadow-sm: var(--brand-shadow);
    --brand-shadow-md: var(--brand-shadow);
    --brand-shadow-lg: var(--brand-shadow);
    --brand-focus-ring: 0 0 0 3px rgba(23, 59, 51, 0.18);

    /* Bootstrap 5.3 — mapped once, so a Bootstrap control is a VetNexus control. */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--vn-action-link);
    --bs-link-color-rgb: 60, 114, 94;                /* forest-600 */
    --bs-link-hover-color: var(--vn-action-primary-hover);
    --bs-link-hover-color-rgb: 33, 81, 69;           /* forest-700 */
    --bs-body-bg: var(--vn-bg-page);
    --bs-body-bg-rgb: 247, 245, 240;                 /* cream-100 */
    --bs-body-color: var(--vn-text-primary);
    --bs-body-color-rgb: 28, 33, 31;                 /* ink-800 */
    --bs-emphasis-color: var(--vn-ink-900);
    --bs-secondary-color: var(--vn-text-secondary);
    --bs-secondary-bg: var(--vn-bg-surface-quiet);
    --bs-tertiary-bg: var(--vn-cream-200);
    --bs-border-color: var(--vn-border-hairline);
    --bs-heading-color: var(--vn-text-primary);
    --bs-body-font-family: var(--vn-font-body);
    --bs-focus-ring-color: rgba(23, 59, 51, 0.25);
}

/* ── Dark ────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --vn-bg-page: var(--vn-night-900);
    --vn-bg-surface: var(--vn-night-800);
    --vn-bg-surface-quiet: var(--vn-night-700);
    --vn-bg-brand: var(--vn-forest-700);
    --vn-border-hairline: var(--vn-night-600);
    --vn-text-primary: var(--vn-ink-100);
    --vn-text-secondary: var(--vn-ink-300);
    --vn-text-on-brand: var(--vn-ink-900);
    --vn-action-primary: var(--vn-forest-400);
    --vn-action-primary-hover: var(--vn-forest-300);
    --vn-action-link: var(--vn-forest-300);

    --brand-primary-rgb: 127, 168, 145;              /* forest-400 */
    --brand-primary-tint: var(--vn-night-600);
    --brand-accent: var(--vn-forest-400);
    --brand-nav-bg: var(--vn-night-800);
    --brand-nav-border: var(--vn-night-600);
    --brand-nav-text: var(--vn-ink-100);
    --brand-nav-text-muted: var(--vn-ink-300);
    --brand-nav-active: var(--vn-night-600);
    --brand-hero-gradient: var(--vn-forest-700);
    --brand-shadow: 0 6px 18px rgba(14, 36, 30, 0.45);   /* forest-900 tint */
    --brand-focus-ring: 0 0 0 3px rgba(127, 168, 145, 0.28);

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--vn-action-link);
    --bs-link-color-rgb: 165, 196, 176;              /* forest-300 */
    --bs-link-hover-color: var(--vn-forest-200);
    --bs-link-hover-color-rgb: 195, 217, 203;        /* forest-200 */
    --bs-body-bg: var(--vn-bg-page);
    --bs-body-bg-rgb: 16, 22, 20;                    /* night-900 */
    --bs-body-color: var(--vn-text-primary);
    --bs-body-color-rgb: 232, 234, 231;              /* ink-100 */
    --bs-emphasis-color: var(--vn-cream-050);
    --bs-secondary-color: var(--vn-text-secondary);
    --bs-secondary-bg: var(--vn-bg-surface-quiet);
    --bs-tertiary-bg: var(--vn-night-600);
    --bs-border-color: var(--vn-border-hairline);
    --bs-heading-color: var(--vn-text-primary);
    --bs-body-font-family: var(--vn-font-body);
    --bs-focus-ring-color: rgba(127, 168, 145, 0.30);
}

html, body {
    min-height: 100%;
}

body {
    font-family: var(--vn-font-body);
    background-color: var(--brand-surface-muted);
    color: var(--brand-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--vn-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--brand-text);
}

a { color: var(--vn-action-link); }
a:hover { color: var(--brand-primary-hover); }

/* ── Top app bar — forest-ink surface ────────────────────── */
.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--brand-nav-bg);
    border-bottom: 1px solid var(--brand-nav-border);
    color: var(--brand-nav-text);
    --bs-navbar-color: var(--brand-nav-text-muted);
    --bs-navbar-hover-color: var(--brand-nav-text);
    --bs-navbar-active-color: var(--brand-nav-text);
    --bs-navbar-brand-color: var(--brand-nav-text);
    --bs-navbar-brand-hover-color: var(--brand-nav-text);
    --bs-navbar-toggler-border-color: transparent;
}

.app-navbar .navbar-toggler {
    color: var(--brand-nav-text);
}

.app-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    font-family: var(--vn-font-display);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--brand-nav-text) !important;
}

/* The wordmark: "Vet" heavy, "Nexus" regular. No icon. */
.app-navbar .navbar-brand .wordmark-strong {
    font-weight: 700;
}

.app-navbar .nav-link {
    color: var(--brand-nav-text-muted) !important;
    font-weight: 500;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible,
.app-navbar .nav-link.active,
.app-navbar .nav-link.show {
    color: var(--brand-nav-text) !important;
    background-color: var(--brand-nav-active);
}

/* Theme toggle + user menu buttons */
.app-navbar .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    color: var(--brand-nav-text-muted);
    background: transparent;
    border: 1px solid transparent;
}

.app-navbar .btn-icon:hover,
.app-navbar .btn-icon:focus-visible {
    color: var(--brand-nav-text);
    background-color: var(--brand-nav-active);
}

/* The Identity package's _LoginPartial sits on the bar too: the sign-in
   pair when anonymous, a dropdown with an avatar when signed in. Everything
   it can render is given a legible colour against the forest here. */
.app-navbar .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--vn-cream-050);
    color: var(--vn-forest-800);
    font-weight: 600;
    font-size: 0.8125rem;
}

.app-navbar .btn-outline-primary {
    --bs-btn-color: var(--brand-nav-text);
    --bs-btn-border-color: var(--brand-nav-text-muted);
    --bs-btn-hover-color: var(--brand-nav-text);
    --bs-btn-hover-bg: var(--brand-nav-active);
    --bs-btn-hover-border-color: var(--brand-nav-text);
    --bs-btn-active-color: var(--brand-nav-text);
    --bs-btn-active-bg: var(--brand-nav-active);
    --bs-btn-active-border-color: var(--brand-nav-text);
}

.app-navbar .btn-primary {
    --bs-btn-color: var(--vn-forest-800);
    --bs-btn-bg: var(--vn-cream-050);
    --bs-btn-border-color: var(--vn-cream-050);
    --bs-btn-hover-color: var(--vn-forest-900);
    --bs-btn-hover-bg: var(--vn-cream-200);
    --bs-btn-hover-border-color: var(--vn-cream-200);
    --bs-btn-active-color: var(--vn-forest-900);
    --bs-btn-active-bg: var(--vn-cream-300);
    --bs-btn-active-border-color: var(--vn-cream-300);
}

.app-navbar .btn-link,
.app-navbar .dropdown-toggle:not(.nav-link),
.app-navbar .text-body,
.app-navbar .text-muted,
.app-navbar .text-secondary {
    color: var(--brand-nav-text) !important;
}

/* Dropdown menus keep the surface colour; only the bar is forest. */
.app-navbar .dropdown-menu {
    --bs-dropdown-bg: var(--brand-surface);
    --bs-dropdown-color: var(--brand-text);
    --bs-dropdown-link-color: var(--brand-text);
    --bs-dropdown-link-hover-color: var(--brand-text);
    --bs-dropdown-link-hover-bg: var(--brand-surface-quiet);
    --bs-dropdown-link-active-color: var(--brand-on-primary);
    --bs-dropdown-link-active-bg: var(--brand-primary);
    --bs-dropdown-border-color: var(--brand-border);
    --bs-dropdown-divider-bg: var(--brand-border);
    --bs-dropdown-header-color: var(--brand-text-muted);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    color: var(--brand-text);
}

.app-navbar .dropdown-menu .text-body,
.app-navbar .dropdown-menu .btn-link {
    color: var(--brand-text) !important;
}

.app-navbar .dropdown-menu .text-muted,
.app-navbar .dropdown-menu .text-secondary {
    color: var(--brand-text-muted) !important;
}

/* ── Hero — a flat forest band ───────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--brand-radius);
    padding: 4rem 2.5rem;
    color: var(--vn-cream-050);
    background: var(--brand-hero-gradient);
    box-shadow: var(--brand-shadow);
}

.hero h1 {
    color: var(--vn-cream-050);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero p.lead {
    color: var(--vn-forest-100);
    max-width: 42rem;
}

.hero .btn-light {
    --bs-btn-color: var(--vn-forest-800);
    --bs-btn-bg: var(--vn-cream-050);
    --bs-btn-border-color: var(--vn-cream-050);
    --bs-btn-hover-color: var(--vn-forest-900);
    --bs-btn-hover-bg: var(--vn-cream-200);
    --bs-btn-hover-border-color: var(--vn-cream-200);
    --bs-btn-active-color: var(--vn-forest-900);
    --bs-btn-active-bg: var(--vn-cream-300);
    --bs-btn-active-border-color: var(--vn-cream-300);
    font-weight: 600;
}

.hero .btn-outline-light {
    --bs-btn-color: var(--vn-cream-050);
    --bs-btn-border-color: var(--vn-forest-300);
    --bs-btn-hover-color: var(--vn-forest-900);
    --bs-btn-hover-bg: var(--vn-cream-050);
    --bs-btn-hover-border-color: var(--vn-cream-050);
    --bs-btn-active-color: var(--vn-forest-900);
    --bs-btn-active-bg: var(--vn-cream-050);
    --bs-btn-active-border-color: var(--vn-cream-050);
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    --bs-card-bg: var(--brand-surface);
    --bs-card-color: var(--brand-text);
    --bs-card-border-color: var(--brand-border);
    --bs-card-cap-bg: var(--brand-surface-quiet);
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}

.card.card-hover:hover {
    transform: translateY(-2px);
}

.card .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background-color: var(--brand-primary-tint);
    color: var(--brand-primary);
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-surface {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    overflow: hidden;
}

.table-surface > .table {
    margin-bottom: 0;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--brand-text);
    --bs-table-border-color: var(--brand-border);
    --bs-table-hover-bg: var(--brand-surface-quiet);
    --bs-table-hover-color: var(--brand-text);
}

.table thead th {
    background-color: var(--brand-surface-quiet);
    color: var(--brand-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--brand-border);
}

.table tbody td {
    vertical-align: middle;
    border-top: 1px solid var(--brand-border);
}

.table tbody tr:hover {
    background-color: var(--brand-surface-quiet);
}

/* Icon-only row actions */
.row-actions {
    display: inline-flex;
    gap: 0.25rem;
}

.row-actions .btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: 10px;
}

.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--brand-border);
    background-color: var(--brand-surface);
    color: var(--brand-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--brand-focus-ring);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--brand-focus-ring);
}

.input-group-text {
    background-color: var(--brand-surface-quiet);
    border-color: var(--brand-border);
    color: var(--brand-text-muted);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    border-radius: 10px;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.btn-primary {
    --bs-btn-color: var(--brand-on-primary);
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-color: var(--brand-on-primary);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: var(--brand-on-primary);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-on-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-color: var(--brand-on-primary);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-link {
    --bs-btn-color: var(--vn-action-link);
    --bs-btn-hover-color: var(--brand-primary-hover);
}

/* ── Auth pages ──────────────────────────────────────────── */
.auth-shell {
    min-height: calc(100vh - 64px);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    padding: 2rem;
}

.auth-card h1 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.auth-card .auth-sub {
    color: var(--brand-text-muted);
    margin-bottom: 1.5rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--brand-text-muted);
    margin: 1.25rem 0;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--brand-border);
}

.provider-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--brand-border);
    background-color: var(--brand-surface);
    color: var(--brand-text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.provider-button:hover {
    background-color: var(--brand-surface-quiet);
    border-color: var(--brand-primary);
    color: var(--brand-text);
}

.provider-button i {
    font-size: 1.125rem;
}

/* Third-party sign-in glyphs carry their owners' brand colours, not ours. */
.provider-button.google i { color: #ea4335; }
.provider-button.microsoft i { color: #0078d4; }
.provider-button.github i { color: inherit; }
.provider-button.facebook i { color: #1877f2; }
.provider-button.linkedin i { color: #0a66c2; }
.provider-button.amazon i { color: #ff9900; }

/* ── Toast region ────────────────────────────────────────── */
.toast-region {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast-region .toast {
    --bs-toast-bg: var(--brand-surface);
    --bs-toast-color: var(--brand-text);
    --bs-toast-border-color: var(--brand-border);
    --bs-toast-header-bg: var(--brand-surface-quiet);
    --bs-toast-header-color: var(--brand-text-muted);
    pointer-events: auto;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    box-shadow: var(--brand-shadow);
}

/* ── Footer ──────────────────────────────────────────────── */
.app-footer {
    margin-top: 4rem;
    padding: 2rem 0;
    background-color: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-size: 0.875rem;
}

.app-footer a {
    color: var(--brand-text-muted);
    text-decoration: none;
}

.app-footer a:hover {
    color: var(--vn-action-link);
}

/* ── Misc ────────────────────────────────────────────────── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.page-header .subtitle {
    color: var(--brand-text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.badge-soft-primary {
    background-color: var(--brand-primary-tint);
    color: var(--brand-primary);
}

/* The same badge sitting on the hero's forest fill, where the tinted
   treatment above disappears. Lives here rather than as an inline style on
   the view so the two variants stay next to each other and a theme change
   reaches both. */
.hero .badge-soft-primary.hero-badge {
    background-color: var(--vn-forest-600);
    color: var(--vn-cream-050);
}

/* The VetNutriLab logo in the console navbar; white lettering on the brand band. */
.app-navbar .navbar-brand img {
    display: block;
    height: 30px;
    width: auto;
}