/* Native cross-document view transitions for MPA navigation.
   Chrome 126+/Safari 18.2+ animate; Firefox ignores and snaps (graceful). */
@view-transition {
    navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* One system for the CRM and the public site (Anton's tokens, see config.js theme).
   Colours come from the Vuetify theme so day and night switch together; custom keys
   `muted`, `line` and `line-strong` are defined there. */

html, body {
    height: 100%;
}

::selection {
    background: rgba(var(--v-theme-primary), 0.18);
}

/* ===== Typography: Manrope for headings and figures, Open Sans for text ===== */
/* Vuetify's type classes (text-body-*, text-title-*) read these; unset, they fall back to Roboto. */
:root {
    --v-font-body: 'Open Sans', sans-serif;
    --v-font-heading: 'Manrope', sans-serif;
}

/* Plain headings get the face but no forced spacing, so page styles (small section titles) still win. */
h1, h2, h3 {
    font-family: 'Manrope', sans-serif;
}

body,
.v-application {
    font-family: 'Open Sans', sans-serif !important;
    font-feature-settings: 'tnum' 0;
}

.v-toolbar-title,
.v-card-title,
.text-display-large, .text-display-medium, .text-display-small,
.text-headline-large, .text-headline-medium, .text-headline-small,
.text-title-large, .text-title-medium, .text-title-small,
.v-list-item-title,
.nav-header .app-title {
    font-family: 'Manrope', sans-serif !important;
    letter-spacing: -0.01em !important;
}

.v-toolbar-title {
    font-weight: 600 !important;
}

.v-data-table td,
.text-figure {
    font-variant-numeric: tabular-nums;
}

.text-medium-emphasis,
.v-label,
.v-data-table th {
    color: rgb(var(--v-theme-muted)) !important;
    opacity: 1 !important;
}

/* The sentence under a page title that says what the page is for. */
.page-intro {
    font-size: 0.875rem;
    line-height: 1.43;
    color: rgb(var(--v-theme-muted));
    margin-bottom: 16px;
}

/* ===== Surfaces: one hairline, no hard offset shadows ===== */
.v-card {
    border: 1px solid rgb(var(--v-theme-line)) !important;
    border-radius: 18px !important;
}

.v-card > .v-toolbar {
    border-bottom: 1px solid rgb(var(--v-theme-line));
}

.v-overlay__content > .v-card {
    border: none !important;
    box-shadow: 0 24px 64px rgba(18, 27, 50, 0.18) !important;
}

.v-app-bar {
    border-bottom: 1px solid rgb(var(--v-theme-line)) !important;
}

.v-navigation-drawer {
    border-right: 1px solid rgb(var(--v-theme-line)) !important;
}

.v-snackbar__wrapper {
    border-radius: 12px !important;
}

/* ===== Buttons ===== */
.v-btn {
    font-family: 'Open Sans', sans-serif !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: 10px !important;
}

.v-btn--variant-outlined {
    border-color: rgb(var(--v-theme-line-strong)) !important;
}

/* Segmented controls: the group draws one rounded outline and the dividers; its buttons draw none. */
.v-btn-group {
    overflow: hidden;
    border: 1px solid rgb(var(--v-theme-line-strong)) !important;
    border-radius: 10px !important;
}

.v-btn-group .v-btn {
    border: 0 !important;
    border-radius: 0 !important;
}

.v-btn-group--divided .v-btn:not(:last-child) {
    border-inline-end: 1px solid rgb(var(--v-theme-line-strong)) !important;
}

.v-btn-group .v-btn--active {
    background: rgba(var(--v-theme-primary), 0.1);
}

.v-btn-group .v-btn--active > .v-btn__overlay {
    opacity: 0 !important;
}

/* ===== Inputs: borders meet 3:1 against the panel ===== */
.v-field--variant-outlined .v-field__outline {
    --v-field-border-width: 1px;
    --v-field-border-opacity: 1;
    color: rgb(var(--v-theme-line-strong));
}

.v-field--focused .v-field__outline {
    --v-field-border-width: 2px;
    color: rgb(var(--v-theme-primary));
}

.v-field {
    border-radius: 10px !important;
}

/* ===== Data table ===== */
.v-data-table th {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    border-bottom: 1px solid rgb(var(--v-theme-line)) !important;
}

.v-data-table tbody tr:hover {
    background-color: rgba(var(--v-theme-primary), 0.04) !important;
}

/* ===== Chips ===== */
.v-chip {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* Vuetify's 12% tint leaves amber, red and grey status text under 4.5:1; 7% clears it for every status colour. */
.v-chip--variant-tonal .v-chip__underlay {
    opacity: 0.07;
}

/* ===== Navigation ===== */
.nav-header .app-title {
    font-weight: 700;
}

.v-navigation-drawer .nav-items .nav-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgb(var(--v-theme-muted));
}

/* ===== Scrollbars ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--v-theme-on-surface), 0.18);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--v-theme-on-surface), 0.3);
}

/* ===== Links ===== */
/* Vuetify 4 ships its styles in cascade layers, so these unlayered rules win
   over any Vuetify rule regardless of specificity. Exclude components that
   render as an anchor (`v-btn` with href, list items) or their own text colour
   is replaced by this one. `:where` keeps it at zero specificity, so a class
   on a link (the public pages' own) wins without a more specific selector. */
:where(a:not(.v-btn, .v-list-item, .v-tab, .v-chip)) {
    color: rgb(var(--v-theme-primary));
    text-underline-offset: 3px;
    transition: opacity 0.15s;
}

:where(a:not(.v-btn, .v-list-item, .v-tab, .v-chip)):hover {
    opacity: 0.8;
}

/* Sidebar links are navigation, not inline links: text colour, accent only when active. */
.v-navigation-drawer .nav-link a:not(.v-btn) {
    color: rgb(var(--v-theme-on-surface));
}

.v-navigation-drawer .nav-link.active a:not(.v-btn) {
    color: rgb(var(--v-theme-primary));
}

/* Quoted staff message in a review item (ReviewItem.js) */
.review-quote {
    border-left: 1px solid rgba(var(--v-border-color), 0.6);
    padding-left: 10px;
}