/* Harmonie Schelle theme on top of Tabler 1.6, in the house style: cream, navy and gold, Montserrat (see /lookup/branding).
   Based on the Lovable design in resources/ensemble-nexus (src/index.css).
   Tabler resolves light/dark with light-dark() and color-scheme, so every colour below is
   "light-dark(<light mode>, <dark mode>)". Must be imported after the Tabler CSS. */

/* ------------------------------------ Fonts (self-hosted, SIL Open Font License) ------------------------------------ */
/* Montserrat: the font of the house style, as on www.harmonieschelle.be and in the mailings */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-ext-K30JCnd.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-LaWOCQv.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-italic-latin-ext-20girnw.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-italic-latin-rZHggJM.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------ Palette ------------------------------------ */
/* Tabler declares its defaults on :root and on every [data-bs-theme=light] element, so override both */
:root,
[data-bs-theme=light],
[data-theme=light] {
    /* Brand colours (house style) */
    --hs-navy: #00144c;
    --hs-cream: #f7f3eb;
    --hs-gold: #fab800;

    /* Typography */
    --tblr-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

    /* Text */
    --tblr-body-color: light-dark(var(--hs-navy), #ede7de);
    --tblr-secondary-color: light-dark(#47598a, #a89c8a);
    --tblr-secondary: light-dark(#47598a, #a89c8a);
    --tblr-heading-color: inherit;
    --tblr-link-color: light-dark(#24428f, var(--hs-gold));
    --tblr-link-hover-color: light-dark(var(--hs-navy), #ffcd3f);

    /* Surfaces: page, cards/dropdowns/modals, table heads and other muted areas */
    --tblr-body-bg: light-dark(var(--hs-cream), #080f21);
    --tblr-bg-surface: light-dark(#faf8f5, #0f182e);
    --tblr-bg-surface-secondary: light-dark(#ebe7e0, #1c2640);
    --tblr-bg-surface-tertiary: light-dark(#f0ebe3, #151e36);
    --tblr-bg-forms: light-dark(#fdfcfa, #0c1428);
    --tblr-active-bg: light-dark(#ebe5da, #222e4f);

    /* Borders and corners */
    --tblr-border-color: light-dark(#e0dad1, #242c42);
    --tblr-border-color-translucent: light-dark(#e0dad1, #242c42);
    --tblr-border-radius-sm: 6px;
    --tblr-border-radius: 8px;
    --tblr-border-radius-lg: 10px;
    --tblr-border-radius-xl: 1rem;
    --tblr-shadow-card: none;

    /* Primary: navy with cream text, inverted in dark mode */
    --tblr-primary: light-dark(var(--hs-navy), var(--hs-cream));
    --tblr-primary-fg: light-dark(var(--hs-cream), var(--hs-navy));

    /* Status colours */
    --tblr-success: #29a36a;
    --tblr-warning: #f59f0a;
    --tblr-danger: #dc2828;
    --tblr-yellow: var(--hs-gold);
}

/* ------------------------------------ Headings ------------------------------------ */
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .page-title {
        font-size: 1.875rem;
    }
}

/* ------------------------------------ Sidebar ------------------------------------ */
/* The sidebar has data-bs-theme=dark (Navbar Dark setting or dark mode): navy in light mode, near-black navy in dark mode */
.navbar.navbar-vertical[data-bs-theme=dark] {
    --hs-sidebar-bg: var(--hs-navy);
    --hs-sidebar-accent: #0b2565;
    --hs-sidebar-border: #17295a;

    --tblr-navbar-bg: var(--hs-sidebar-bg);
    --tblr-navbar-border-color: var(--hs-sidebar-border);
    --tblr-navbar-color: rgb(237 231 222 / 70%);
    --tblr-navbar-hover-color: var(--hs-cream);
    --tblr-navbar-active-color: var(--hs-cream);
    --tblr-navbar-active-bg: var(--hs-sidebar-accent);
    --tblr-bg-surface: var(--hs-sidebar-bg);
    --tblr-border-color: var(--hs-sidebar-border);
}

html[data-bs-theme=dark] .navbar.navbar-vertical[data-bs-theme=dark] {
    --hs-sidebar-bg: #060b18;
    --hs-sidebar-accent: #121c36;
    --hs-sidebar-border: #121c36;
    --hs-sidebar-gradient: linear-gradient(180deg, #060b18 0%, #0c1834 100%);
}

/* Gradient over the solid colour (like the CoreUI "modern" demo): our navy at the top fading
   into a lighter blue at the bottom. The solid --tblr-navbar-bg stays for things that can't take a gradient (dropdowns) */
.navbar.navbar-vertical[data-bs-theme=dark] {
    --hs-sidebar-gradient: linear-gradient(180deg, var(--hs-navy) 0%, #0a2a7a 100%);
    background-image: var(--hs-sidebar-gradient);
}

/* Hover/active and inline submenus semi-transparent, so the gradient shows through */
.navbar.navbar-vertical[data-bs-theme=dark] {
    --tblr-navbar-active-bg: rgb(255 255 255 / 8%);
}

.navbar.navbar-vertical[data-bs-theme=dark] .navbar-collapse .dropdown-menu {
    background-color: transparent;
}

.navbar-vertical .navbar-nav .nav-link,
.navbar-vertical .dropdown-menu .dropdown-item {
    border-radius: var(--tblr-border-radius);
}

.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical .dropdown-menu .dropdown-item:hover {
    background-color: var(--tblr-navbar-active-bg);
}

.navbar-vertical .dropdown-menu .dropdown-item.active {
    color: var(--tblr-navbar-active-color);
    background-color: var(--tblr-navbar-active-bg);
}

/* Menu text: 14px/20px, medium weight */
.navbar-vertical .navbar-nav .nav-link,
.navbar-vertical .dropdown-menu .dropdown-item {
    font-family: var(--tblr-font-sans-serif);
    font-size: 14px;
    font-variation-settings: normal;
    font-weight: 500;
    line-height: 20px;
}

/* Full horizontal logo instead of Tabler's 2rem-high brand image */
.navbar-vertical .navbar-brand-image {
    width: 12.5rem;
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    /* Brand as high as the top bar, with a thin line under it that lines up with the top bar's bottom border */
    .navbar-vertical .navbar-brand {
        height: var(--hs-topbar-height);
        margin-inline: 0;
        border-bottom: 1px solid var(--tblr-navbar-border-color);
    }

    .navbar-vertical[data-bs-theme=dark] .navbar-brand {
        border-bottom-color: rgb(255 255 255 / 12%);
    }

    /* Logo starts where the menu icons start: the menu's inset (0.5rem) plus the link padding (0.75rem).
       Same selector as Tabler's brand padding, which would otherwise win */
    .navbar-vertical.navbar-expand-lg .navbar-brand {
        padding-inline-start: 1.25rem;
    }

    /* 95% of the brand box, left aligned */
    .navbar-vertical .navbar-brand > a {
        display: block;
        width: 95%;
    }

    .navbar-vertical .navbar-brand-image {
        display: block;
        width: 100%;
    }
}

/* Small gap between menu items, so the hover/active backgrounds don't touch */
.navbar-vertical .navbar-nav > .nav-item + .nav-item {
    margin-top: 0.25rem;
}

.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item + .dropdown-item,
.navbar-vertical .navbar-collapse .dropdown-menu .dropend + .dropdown-item,
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item + .dropend {
    margin-top: 2px;
}

/* Menu icons (top level only) a bit larger than Tabler's default */
.navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Submenu items: less indent than Tabler's (padding + icon width + icon margin) */
.navbar-vertical[class*=navbar-expand] .navbar-collapse .dropdown-menu .dropdown-item {
    padding-inline-start: calc(var(--tblr-sidebar-nav-padding-x) + 1rem);
}

.navbar-vertical[class*=navbar-expand] .navbar-collapse .dropdown-menu .dropdown-menu .dropdown-item {
    padding-inline-start: calc(var(--tblr-sidebar-nav-padding-x) + 1rem + var(--tblr-sidebar-nav-indent));
}

/* Dropdowns inside a dark navbar (sidebar submenus, user menu) in the navbar colour */
.navbar[data-bs-theme=dark] .dropdown-menu {
    background-color: var(--tblr-navbar-bg);
    border-color: var(--tblr-navbar-border-color);
}

.navbar[data-bs-theme=dark] .dropdown-menu .dropdown-item {
    color: var(--tblr-navbar-color);
}

.navbar[data-bs-theme=dark] .dropdown-menu .dropdown-item:hover {
    color: var(--tblr-navbar-hover-color);
}

/* ------------------------------------ Top bar ------------------------------------ */
:root {
    --hs-topbar-height: 65px;
}

/* No navbar-expand-* class on purpose: Tabler 1.6 hides the vertical sidebar when the page also has an
   expanding navbar (it then assumes a horizontal layout). That class is what gives navbar dropdowns
   position: absolute, so set it here */
.topbar {
    height: var(--hs-topbar-height);
    min-height: var(--hs-topbar-height);
}

/* White (only on a light top bar, i.e. not in dark mode) */
.topbar[data-bs-theme=light] {
    --tblr-navbar-bg: #ffffff;
}

.topbar .navbar-nav .dropdown-menu {
    position: absolute;
}

/* Theme and layout toggles: plain icons */
.topbar .topbar-icon {
    padding-inline: 0.5rem;
    font-size: 1.25rem;
    color: var(--tblr-secondary);
}

.topbar .topbar-icon:hover {
    color: var(--tblr-body-color);
}

/* User menu: only the profile picture, no hover background */
.user-menu-toggle,
.user-menu-toggle:hover,
.user-menu-toggle:focus,
.user-menu-toggle.show {
    background: none;
}

.topbar .user-menu-toggle {
    margin-inline-start: 0.5rem;
}

/* A real <img> with a crisp round edge: no translucent inset border, no margin from Tabler's nav icon spacing */
.user-menu-toggle .avatar {
    margin: 0;
    object-fit: cover;
    box-shadow: none;
}

/* ------------------------------------ Page layout ------------------------------------ */
/* Boxed layout: keep the max width, but align the content to the left (next to the sidebar) instead of centring it */
.page-wrapper .container-xxl {
    margin-inline-start: 0;
}

/* ------------------------------------ Components ------------------------------------ */
.card {
    --tblr-card-border-color: var(--tblr-border-color);
}

.btn {
    font-weight: 500;
}

/* ------------------------------------ Sign-in pages ------------------------------------ */
.login-title {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Random photo on the right (see LoginCoverExtension), toned to grayscale under a
   navy overlay so every picture becomes a navy duotone, with a quote at the bottom */
.login-cover {
    position: relative;
    overflow: hidden;
    background-color: var(--hs-navy);
}

.login-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.1) brightness(1.15);
}

.login-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        color-mix(in srgb, var(--hs-navy) 35%, transparent),
        color-mix(in srgb, var(--hs-navy) 80%, transparent)
    );
}

.login-cover-text {
    position: absolute;
    z-index: 2;
    right: 3rem;
    bottom: 3rem;
    left: 3rem;
    color: var(--hs-cream);
}

.login-cover-caption {
    font-size: .875rem;
    opacity: .6;
}