/* ePoslovanje IdP — dressed as the main platform (Web.Client / Admin.Client).
   Plain CSS on purpose: the IdP renders a handful of Razor Pages and must not drag in a
   component framework. Every value below is lifted from the app so the two read as one
   product:
     - palette, typography, radius, app bar + drawer sizes: UI.Shared/Branding/EposlovanjeTheme.cs
       (MudBlazor theme: Primary == Success == #17C653 green, Inter, 8px radius, 70px app bar,
       265px drawer, #F9F9F9 page background)
     - component shapes: MudBlazor 9.8's own rules for Filled/Outlined buttons, Outlined
       inputs (label in the notch, 2px green border on focus), NavMenu links, Alerts, Chips
     - cards: the dashboard's stat cards (Home.razor: white, 1px #E1E3EA border, 14px radius,
       a barely-there shadow)
   Brand red #e23d3a is an accent only (the logo carries it), never an action colour. */

/* ── Inter, self-hosted (SIL OFL) — same files as UI.Shared/wwwroot/fonts/inter, so the IdP
   renders the app's typeface without calling Google Fonts (which would hand the visitor's IP
   to a third party). latin + latin-ext: Croatian č ć đ š ž live in latin-ext. ── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-latin-400.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-latin-500.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter/inter-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-latin-600.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter/inter-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-latin-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    /* EposlovanjeTheme.PaletteLight */
    --primary: #17C653;
    --primary-rgb: 23, 198, 83;
    --primary-darken: #14A846;
    --primary-lighten: #DCF6E6;
    --success-text: #0F8E3C;          /* the app's green for text on white (dashboard, status) */
    --tertiary: #7239EA;
    --info: #3E97FF;
    --info-text: #2D6FBE;
    --info-lighten: #DCEAFB;
    --warning: #F6C000;
    --warning-text: #8C6A00;
    --warning-lighten: #FFF5D1;
    --error: #F1416C;
    --error-darken: #CF3860;
    --error-lighten: #FCE0E8;

    --background: #F9F9F9;
    --background-gray: #F1F1F4;
    --surface: #FFFFFF;
    --text-primary: #252F4A;
    --text-primary-rgb: 37, 47, 74;
    --text-secondary: #4B5675;
    --text-disabled: #99A1B7;
    --divider: #E1E3EA;
    --lines-inputs: #DBDFE9;
    --action-hover: rgba(75, 86, 117, 0.06);   /* ActionDefault @ HoverOpacity */

    --brand-red: #e23d3a;                       /* logo accent only */

    --radius: 8px;                              /* LayoutProperties.DefaultBorderRadius */
    --card-radius: 14px;                        /* dashboard stat cards */
    --card-pad: 32px;
    --appbar-height: 70px;                      /* LayoutProperties.AppbarHeight */
    --drawer-width: 265px;                      /* LayoutProperties.DrawerWidthLeft */

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
    --elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    --elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
    --elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }
/* html keeps the browser default font size (16px): every rem value here matches the Blazor apps, which never set html font-size. */
html { margin: 0; padding: 0; }
body {
    margin: 0; padding: 0;
    font-family: var(--font);
    font-size: 0.875rem; line-height: 1.5;
    color: var(--text-primary);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
}
/* The whole body is one flex column so the auth card sits in the visual middle of the
   viewport and the footer stays pinned to the bottom. */
body { min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

h1, h2, h3 { color: var(--text-primary); font-weight: 600; }
p { margin: 0 0 0.85rem; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 0.92em; }

/* Links — the app's green (PrimaryDarken: the theme's own shade, readable on white), never
   underlined; hover goes one step darker. Scoped rules below (app bar, drawer, menus,
   buttons) win on specificity and keep their own colours. */
a { color: var(--primary-darken); text-decoration: none; }
a:hover { color: var(--success-text); }
:focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.6); outline-offset: 2px; }

.muted { color: var(--text-secondary); }
.muted a { color: var(--primary-darken); }
.muted a:hover { color: var(--success-text); }


/* ── App bar (MudAppBar Elevation=1, Color.Surface; 70px; 24px gutters) ───────────── */
.topbar {
    position: sticky; top: 0; z-index: 1100;
    height: var(--appbar-height);
    background: var(--surface);
    box-shadow: var(--elevation-1);
}
.topbar__inner {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 24px;
}
/* Hamburger = MudIconButton Edge.Start: a 48px round button whose icon sits on the gutter. */
.topbar__menu {
    flex-shrink: 0;
    width: 48px; height: 48px; margin-left: -12px; padding: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 50%; cursor: pointer;
    color: var(--text-secondary);
}
.topbar__menu svg { width: 24px; height: 24px; fill: currentColor; }
.topbar__menu:hover { background: var(--action-hover); }
.topbar .brand { display: inline-flex; align-items: center; line-height: 0; margin-right: auto; text-decoration: none; }
.topbar .brand img { display: block; }
.topbar .brand .brand__wordmark { height: 26px; }
.topbar .brand .brand__mark { height: 28px; display: none; }
.topbar nav { display: flex; gap: 1rem; align-items: center; }
.topbar nav a, .topbar nav .link, .topbar nav .user {
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.8125rem; line-height: 1; display: inline-flex; align-items: center;
    background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
/* The signed-in username, as next to the app's account menu (body2, secondary text). */
.topbar nav .user { color: var(--text-secondary); font-weight: 500; }
.topbar nav .user:hover { color: var(--text-primary); }
/* "Odjava" — a Text button: label in the primary ink, hover tint. */
.topbar nav .link { color: var(--text-primary); font-weight: 600; border-radius: var(--radius); }
.topbar nav .link:hover { color: var(--text-primary); background: var(--action-hover); box-shadow: 0 0 0 6px var(--action-hover); }
/* The logout button rides inside a form — flex-align the form itself so the button sits on
   the same baseline as the neighbouring links. */
.topbar nav form.inline { display: inline-flex; align-items: center; margin: 0; }


/* ── Signed-in shell: drawer + content (MudDrawer Responsive, Breakpoint.Md) ───────── */
.shell { flex: 1; display: flex; width: 100%; min-height: 0; }
.sidebar {
    width: var(--drawer-width); flex-shrink: 0;
    background: var(--surface); border-right: 1px solid var(--divider);
    position: sticky; top: var(--appbar-height);
    height: calc(100vh - var(--appbar-height)); overflow-y: auto;
}
.sidebar__nav { padding: 16px 0; }
/* Section label = the NavMenu's overline (11px, 600, uppercase, secondary). */
.sidebar__section {
    font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0 16px 8px;
}
.sidebar__divider { border: 0; border-top: 1px solid var(--divider); margin: 12px 0; }
/* MudNavLink: full-width row, 8px 16px, 24px outlined icon + 12px gap, 14px text; active =
   primary text on the hover tint. */
.sidebar__link {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px;
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.875rem; line-height: 1.75;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar__link svg { width: 24px; height: 24px; fill: var(--text-secondary); flex-shrink: 0; }
.sidebar__link:hover { background: var(--action-hover); color: var(--text-secondary); }
.sidebar__link.is-active { color: var(--primary); font-weight: 500; background: var(--action-hover); }
.sidebar__link.is-active:hover { color: var(--primary); }

.drawer-overlay:not([hidden]) {
    position: fixed; inset: 0; z-index: 1150;
    background: rgba(33, 33, 33, 0.45);
}

.shell__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shell__content { flex: 1; padding: 24px; }
.shell__content .card { margin: 0; }
.shell__content .hub { max-width: 56rem; }

/* Desktop: the hamburger folds the drawer away (MudDrawer closed). */
@media (min-width: 960px) {
    .shell.is-drawer-flipped .sidebar { display: none; }
}

/* Below Md (960px) the drawer leaves the page and opens over it (DrawerVariant.Responsive's
   temporary mode), under the app bar, with a dimmed backdrop. */
@media (max-width: 959.98px) {
    .sidebar {
        position: fixed; left: 0; top: var(--appbar-height); bottom: 0; z-index: 1200;
        height: auto;
        transform: translateX(-100%); visibility: hidden;
        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 225ms;
        box-shadow: none;
    }
    .shell.is-drawer-flipped .sidebar {
        transform: none; visibility: visible;
        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
        box-shadow: var(--elevation-8);
    }
}
/* ── Anonymous (auth) layout — toolbar-less, like the app's PublicLayout ──────────── */
.auth-main {
    flex: 1;
    /* width:100% is load-bearing: .container's `margin: 0 auto` makes this flex item
       shrink-to-fit otherwise, and the card's percentage width would then collapse to its
       content width. */
    width: 100%;
    /* Column so the brand wordmark stacks centred ABOVE the card, the whole group centred
       vertically + horizontally. */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem 1rem 2.5rem;
}

/* PublicLayout: wordmark centred, 34px, 1.25rem above the card. */
.auth-brand { display: block; margin-bottom: 1.25rem; line-height: 0; }
.auth-brand img { height: 34px; display: block; }

/* The frame matches the rendered card's width — standard 46rem, or 30rem when the page uses
   card--narrow (login, forgot/reset, 2FA, …), detected with :has(). The card fills the frame
   (width:100%), so the absolutely-positioned language switcher lands inside the card, on the
   same row as its heading. */
.auth-card-frame { position: relative; width: 100%; max-width: 46rem; margin: 0 auto; }
.auth-card-frame:has(.card--narrow) { max-width: 30rem; }
/* Card-less pages (the anonymous Index hero): the frame must hug the hero's own width, or the
   hero sits pinned to the left of a 46rem frame and the flag floats in empty space. */
.auth-card-frame:has(.hero) { max-width: 30rem; }

/* top = the heading's vertical CENTRE: card padding + half the h1's 26px line box (20px text,
   line-height 1.3); translateY(-50%) then centres the flag on that line. */
.auth-lang { position: absolute; top: calc(var(--card-pad) + 13px); right: var(--card-pad); transform: translateY(-50%); display: flex; z-index: 2; }
/* Hero pages have no card padding, and the h1 runs the full hero width — the flag rides the
   wordmark's line instead: 1.25rem brand margin + half the 34px logo above the frame. */
.auth-card-frame:has(.hero) .auth-lang { top: calc(-1.25rem - 17px); right: 0; }
/* A card title never runs under the flag. */
.auth-card-frame .card h1 { padding-right: 2.5rem; }

footer { padding: 1rem 0 1.25rem; color: var(--text-disabled); text-align: center; font-size: 0.75rem; }

.hero { text-align: center; max-width: 30rem; margin: 0 auto; }
.hero h1 { margin: 0 0 0.75rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.hero p { line-height: 1.6; color: var(--text-secondary); font-size: 0.9375rem; }
.hero .actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }
.hero .muted { color: var(--text-secondary); font-size: 0.85rem; }


/* ── Language switcher (flag + MudMenu-like popover) ─────────────────────────────── */
.lang-menu { position: relative; }
.lang-menu summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center;
    padding: 4px; border-radius: var(--radius);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { background: var(--action-hover); }
.lang-menu img.flag {
    width: 26px; height: 18px; display: block;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.lang-menu .menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--surface);
    border-radius: var(--radius); box-shadow: var(--elevation-8);
    min-width: 170px; padding: 8px 0; z-index: 1300;
}
.lang-menu .menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 16px;
    color: var(--text-primary); text-decoration: none; font-size: 0.875rem; line-height: 1.75;
    white-space: nowrap;
}
.lang-menu .menu a:hover { background: var(--action-hover); color: var(--text-primary); }
.lang-menu .menu img.flag { width: 20px; height: 14px; }
.lang-menu .check { margin-left: auto; color: var(--primary); font-weight: 700; }


/* ── Cards (dashboard stat-card look) ─────────────────────────────────────────────── */
.card {
    background: var(--surface); padding: var(--card-pad);
    border: 1px solid var(--divider); border-radius: var(--card-radius);
    width: 100%; max-width: 46rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
/* Compact flows (sign-in, forgot/reset password, 2FA, …). */
.card--narrow { max-width: 30rem; }
/* Card title = the theme's H3 (1.25rem, 600). No underline accent — the app has none. */
.card h1 { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.card h1 + p.muted { margin-top: -0.5rem; }
.card > p:last-child { margin-bottom: 0; }
/* Cross-links under a form ("Zaboravili ste lozinku?", "Novi ste?") keep clear of its buttons. */
.card form + p { margin-top: 1.25rem; }
/* …and an intro line above a form keeps clear of the first field's label in the notch. */
.card > p + form { margin-top: 1.25rem; }


/* ── Fields: MudTextField Variant.Outlined, label resting in the notch ───────────────
   The label stays where MudBlazor puts a filled field's label — 75% size, on the top border,
   over a gap cut out of it — so an empty and a filled field look the same and no script has
   to track the value. Focus: 2px green border + green label; error: red border + label.
   Applies to every `.field` with a label + text box; tick-box rows, the terms row and the
   six-box code input keep their own layout. */
.field { display: block; position: relative; margin: 0 0 1.25rem; }
.field > label { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--text-primary); }

.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input:not([type]),
.admin-toolbar input[type=text] {
    display: block; width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--lines-inputs); border-radius: var(--radius);
    font-family: inherit; font-size: 0.9375rem; line-height: 1.2; color: var(--text-primary);
    background: var(--surface);
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.field input:hover, .admin-toolbar input[type=text]:hover { border-color: var(--text-secondary); }
/* 2px border without moving the text: the second pixel is an inset shadow. */
.field input:focus, .admin-toolbar input[type=text]:focus {
    outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
}
.field input.input-validation-error { border-color: var(--error); }
.field input.input-validation-error:focus { box-shadow: inset 0 0 0 1px var(--error); }

.field:not(.checkbox):not(.terms-field):not(.field--stacked):not(:has(.otp-input)):has(> input, > .pw-wrap) > label {
    position: absolute; top: 0; left: 10px; z-index: 1;
    transform: translateY(-50%);
    margin: 0; padding: 0 4px;
    max-width: calc(100% - 20px);
    font-size: 0.703rem;          /* 15px × 0.75, as MudBlazor's shrunk label */
    font-weight: 500; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--surface);
    pointer-events: none;
}
.field:not(.checkbox):not(.field--stacked):has(> input, > .pw-wrap) { margin-top: 0.4rem; }
.field:focus-within > label { color: var(--primary); }
.field:has(.input-validation-error) > label { color: var(--error); }

/* Field-level validation text = MudBlazor helper text in the error colour. */
.text-danger { color: var(--error-darken); font-size: 0.8125rem; }
.field > .text-danger, .field .field-validation-error {
    display: block; margin: 4px 14px 0; font-size: 0.75rem; line-height: 1.5; color: var(--error-darken);
}
.field > .text-danger:empty { display: none; }

/* Tick-box rows — MudCheckBox in the primary colour. */
.field.checkbox { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.field.checkbox label { margin-bottom: 0; font-weight: 400; font-size: 0.875rem; color: var(--text-primary); }
.field.checkbox input, input[type=checkbox] { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; }


/* ── Buttons: MudButton ───────────────────────────────────────────────────────────── */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 64px; padding: 6px 16px;
    font-family: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0;
    border: 0; border-radius: var(--radius);
    background: var(--primary); color: #fff;
    box-shadow: var(--elevation-2);
    text-decoration: none; cursor: pointer;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover { background: var(--primary-darken); color: #fff; box-shadow: var(--elevation-4); }
.button:disabled, .button[disabled] {
    background: var(--background-gray); color: var(--text-disabled); box-shadow: none; cursor: default;
}
/* A form's submit is Size.Large (8px 22px, 15px) — the one action the page exists for. */
form > .button[type=submit], .hero .actions .button, .card > p > .button { padding: 8px 22px; font-size: 0.9375rem; }

/* Outlined Primary: green label, half-opacity green border, hover tint. */
.button-outline, .button-secondary {
    background: transparent; color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.5);
    box-shadow: none;
}
.button-outline { padding: 5px 15px; }
form > .button-outline[type=submit] { padding: 7px 21px; }
.hero .actions .button-secondary { padding: 7px 21px; }
.button-outline:hover, .button-secondary:hover {
    background: rgba(var(--primary-rgb), 0.06); color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.5); box-shadow: none;
}
/* Filled Error. */
.button-danger { background: var(--error); }
.button-danger:hover { background: var(--error-darken); }
.button.button-small, form > .button.button-small[type=submit] { padding: 3px 9px; font-size: 0.8125rem; min-width: 0; }

/* On the auth cards the submit spans the card, in one column with the provider buttons. */
.auth-main .card--narrow form > .button[type=submit] { width: 100%; min-height: 40px; }


/* ── Alerts: MudAlert Variant.Text (tinted background, darker text, leading icon) ──── */
.flash, .alert, .validation-summary-errors, div.text-danger[role=alert]:not(.validation-summary-valid):not(:empty) {
    position: relative;
    display: block;
    padding: 10px 16px 10px 46px;
    border: 0; border-radius: var(--radius);
    font-size: 0.875rem; line-height: 1.5;
    margin: 0 0 1rem;
}
.flash::before, .alert::before, .validation-summary-errors::before,
div.text-danger[role=alert]:not(.validation-summary-valid):not(:empty)::before {
    content: ""; position: absolute; left: 14px; top: 11px; width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat;
}
/* Success (green). */
.flash {
    background: var(--primary-lighten); color: var(--success-text);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}
/* "Please do that again" — warning, not success: nothing went through yet. */
.flash--notice {
    background: var(--warning-lighten); color: var(--warning-text);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z'/%3E%3C/svg%3E");
}
/* Errors — the danger box and model-level form errors (asp-validation-summary, keyed off
   .validation-summary-errors, which the framework stamps only when the summary actually holds
   errors: the empty div on a clean render stays invisible). No bullets: these are sentences
   to read, not a list to scan. */
.alert {
    background: var(--info-lighten); color: var(--info-text);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}
.alert-danger, .validation-summary-errors, div.text-danger[role=alert]:not(.validation-summary-valid):not(:empty) {
    background: var(--error-lighten); color: var(--error-darken);
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}
.validation-summary-errors ul, div.text-danger[role=alert] ul { margin: 0; padding: 0; list-style: none; }
.validation-summary-errors li + li { margin-top: 0.35rem; }
.validation-summary-valid { display: none; }
[role=alert] ul { margin: 0; padding-left: 0; list-style: none; }

/* Above an auth card a notice takes the card's width: narrow (login, 2FA, …) or standard. */
.auth-main > .flash--notice { width: 100%; max-width: 30rem; margin: 0 auto 0.75rem; }
.auth-main:has(.card:not(.card--narrow)) > .flash--notice { max-width: 46rem; }


/* ── "Moj profil" hub (signed-in homepage) ────────────────────────────────────────── */
.hub { width: 100%; max-width: 46rem; display: flex; flex-direction: column; gap: 1.5rem; }
.hub .card { max-width: none; }
.hub .card h2 { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.hub > .flash { margin: 0; }

/* Identity summary — label/value rows that collapse to a stack on phones. */
.account-facts { display: grid; grid-template-columns: 13rem 1fr; gap: 0.6rem 1rem; margin: 0 0 1.5rem; }
.account-facts dt { color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.6; }
.account-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .account-facts { grid-template-columns: 1fr; gap: 0; }
    .account-facts dt { margin-top: 0.75rem; }
    .account-facts dt:first-child { margin-top: 0; }
}

.hub-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Ecosystem application tiles — small outlined cards; hover lights the border green. */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.app-tile {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--divider); border-radius: 12px;
    background: var(--surface);
    text-decoration: none; color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-tile:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.14); color: var(--text-primary); }
.app-tile .app-name { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); }
.app-tile .app-desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.4; }

/* "Natrag na Moj profil" footer link under manage forms. */
.form-footer { margin: 1.5rem 0 0; font-size: 0.875rem; }


/* ── 2FA (TwoFactor + EnableAuthenticator) ────────────────────────────────────────── */
.status-on { color: var(--success-text); font-weight: 600; }
.status-off { color: var(--text-secondary); font-weight: 600; }

.actions-column { display: flex; flex-direction: column; gap: 1.25rem; align-items: stretch; margin-top: 1.25rem; }
.actions-column form { margin: 0; }
.actions-column form + form { border-top: 1px solid var(--divider); padding-top: 1.25rem; }

.setup-steps { margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.7; }

.qr-block { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; }
.qr-block img { border: 1px solid var(--divider); border-radius: var(--radius); padding: 8px; background: #fff; max-width: 100%; height: auto; }
.shared-key {
    background: var(--background-gray); border-radius: var(--radius);
    padding: 0.4rem 0.75rem; font-size: 0.875rem; letter-spacing: 0.05em;
    overflow-wrap: anywhere; text-align: center;
}

/* Recovery codes — a warning alert: shown once, must be saved. */
.recovery-codes {
    background: var(--warning-lighten); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-bottom: 1.5rem; color: var(--text-primary);
}
.recovery-codes__title { margin: 0 0 0.4rem; font-weight: 700; color: var(--warning-text); }
.recovery-codes ul {
    margin: 0.6rem 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem;
}
.recovery-codes code { font-size: 0.9375rem; letter-spacing: 0.04em; }
@media (max-width: 480px) {
    .recovery-codes ul { grid-template-columns: 1fr; }
}

/* Six-box one-time-code input (_OtpInput partial). */
.otp-input { display: flex; gap: 8px; margin: 0.35rem 0 0.25rem; }
.field .otp-input input[type=text] {
    width: 3rem; height: 3.4rem; padding: 0;
    text-align: center; font-size: 1.45rem; font-weight: 600;
    font-feature-settings: "tnum";
    border: 1px solid var(--lines-inputs); border-radius: var(--radius);
}
.field .otp-input input[type=text]:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); outline: none; }
@media (max-width: 380px) {
    .otp-input { gap: 5px; }
    .field .otp-input input[type=text] { width: 2.6rem; height: 3rem; font-size: 1.25rem; }
}


/* ── /Admin pages ─────────────────────────────────────────────────────────────────── */
.card--wide { max-width: 64rem; }
/* List pages (Users, OIDC clients) span the whole content column. */
.card--full { max-width: none; }

.admin-toolbar { display: flex; gap: 0.75rem; align-items: center; margin: 0 0 1.25rem; flex-wrap: wrap; }
.admin-toolbar input[type=text] { flex: 1 1 240px; width: auto; }
.admin-toolbar .button { min-height: 40px; }
.admin-toolbar a { margin-left: auto; }

/* MudTable: 14px cells, 1px #E1E3EA row lines, #F1F1F4 hover. */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table th {
    text-align: left; padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    font-size: 0.875rem; font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.admin-table tr:hover td { background: var(--background-gray); }
.admin-table .row-actions a { color: var(--primary-darken); text-decoration: none; }

/* Chips — MudChip Filled, small. */
.badge {
    display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: #fff;
}
.badge--active { background: var(--primary); }
.badge--locked { background: var(--error); }
.badge--admin { background: var(--tertiary); }

.admin-pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; font-size: 0.875rem; }

.admin-section { font-size: 1.125rem; margin: 1.75rem 0 0.75rem; }
.admin-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.admin-actions form { margin: 0; }
.admin-inline-form { max-width: 28rem; }

/* Per-user actions dropdown (Admin Users list + UserDetail) — a MudIconButton + MudMenu. */
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.row-menu { position: relative; display: inline-block; }
.row-menu summary {
    list-style: none; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; font-weight: 700; color: var(--text-secondary);
    background: transparent;
}
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover, .row-menu[open] summary { background: var(--action-hover); }
.row-menu .menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--elevation-8);
    min-width: 250px; padding: 8px 0; z-index: 60;
    display: flex; flex-direction: column;
}
.row-menu .menu form { margin: 0; }
.row-menu .menu a,
.row-menu .menu button {
    display: block; width: 100%; text-align: left;
    padding: 6px 16px; border: 0; border-radius: 0;
    background: transparent; color: var(--text-primary);
    font-family: inherit; font-size: 0.875rem; line-height: 1.75; cursor: pointer; text-decoration: none;
}
.row-menu .menu a:hover,
.row-menu .menu button:hover { background: var(--action-hover); color: var(--text-primary); }
.row-menu .menu .menu-danger { color: var(--error-darken); }
.row-menu .menu .menu-danger:hover { background: var(--error-lighten); color: var(--error-darken); }
.menu-divider { height: 1px; background: var(--divider); margin: 4px 0; }

/* The dropdown must not get clipped by the table's scroll context — on wide screens the
   table fits anyway, so let overflow show; narrow screens keep horizontal scrolling. */
@media (min-width: 1100px) {
    .admin-table-wrap { overflow-x: visible; }
}


/* ── External sign-in providers (Google / Certilia) ───────────────────────────────── */
.auth-divider {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 1.5rem 0 1.25rem; color: var(--text-disabled); font-size: 0.8125rem;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--divider); }

.external-providers { display: flex; flex-direction: column; gap: 0.75rem; }
.button-external {
    display: flex; align-items: center; justify-content: center; gap: 0.65rem;
    width: 100%; min-height: 40px; padding: 8px 22px;
    font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.4;
    border-radius: var(--radius); cursor: pointer; text-decoration: none;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.button-external svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Certilia brand blue — colour lifted from their official sign-in button. */
.button-certilia { background: #2d74b5; color: #fff; border: 0; }
.button-certilia:hover { background: #25608f; }
.button-certilia svg { fill: #fff; }

/* Google branding: white button, dark-grey label, the multi-colour G carries its own fills
   (guidelines forbid recolouring). The border is the app's input line. */
.button-google { background: #fff; color: #3c4043; border: 1px solid var(--lines-inputs); }
.button-google:hover { background: #f8f9fa; border-color: var(--text-disabled); }

/* Future providers without bespoke branding fall back to Outlined Primary. */
.button-external-generic { background: transparent; color: var(--primary); border: 1px solid rgba(var(--primary-rgb), 0.5); }
.button-external-generic:hover { background: rgba(var(--primary-rgb), 0.06); }
.button-external-generic svg { fill: currentColor; }

/* Povezani računi (Manage/ExternalLogins) */
.linked-logins { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.linked-login {
    display: flex; align-items: center; gap: 0.65rem;
    border: 1px solid var(--divider); border-radius: var(--radius); padding: 0.6rem 0.85rem;
}
.linked-login form { margin: 0 0 0 auto; }
.linked-login__mark { display: flex; }
.linked-login__mark svg { width: 20px; height: 20px; }
/* The mark spans reuse the provider button classes for colour only — strip the button
   chrome and restore the brand fill on a plain card row. */
span.button-certilia, span.button-google, span.button-external-generic { background: transparent; border: 0; padding: 0; }
span.button-certilia svg { fill: #2d74b5; }
.linked-login__name { font-weight: 600; }
.section-sub { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }


/* ── Masked inputs on account-mutation forms ──────────────────────────────────────────
   type="text" + disc masking instead of type="password": Firefox offers its saved-logins
   dropdown on EVERY password-typed field regardless of autocomplete tokens, and these forms
   must never get credentials pre-offered. The layout script falls back to type="password"
   on browsers without text-security support. */
.password-mask { -webkit-text-security: disc; }

/* Reveal-password eye — injected by the layout script onto every password input (MudBlazor's
   end adornment). The wrapper keeps the input's block flow; the button sits inside its right
   edge. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 2.75rem; box-sizing: border-box; }
.pw-eye {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; padding: 4px; border-radius: 50%;
    background: none; border: 0; cursor: pointer; color: var(--text-secondary);
}
.pw-eye:hover { color: var(--text-primary); background: var(--action-hover); }
/* password-mask fields mask via text-security; revealing them = lifting it. */
input.password-mask.pw-revealed { -webkit-text-security: none; }


/* ── Terms of use ─────────────────────────────────────────────────────────────────────
   The consent tick-box on the register form, and the document itself — shown either in the
   dialog on that page or on its own at /Legal/Terms. */

/* The row is its own flex line so the validation message sits UNDER the label rather than
   becoming a third flex item beside it. */
.terms-field { margin-top: 1.25rem; }
.terms-field__row { display: flex; align-items: flex-start; gap: 0.6rem; }
.terms-field__row input[type=checkbox] { margin-top: 0.1rem; flex-shrink: 0; }
.terms-field__row label { margin-bottom: 0; font-weight: 400; font-size: 0.875rem; line-height: 1.45; color: var(--text-primary); }
.terms-field__row label a { font-weight: 600; }
.terms-field > .text-danger { margin-left: 0; }

.recaptcha-notice { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.4; }

/* MudDialog: 8px radius, elevation 24-ish shadow, dark scrim. */
.terms-dialog {
    border: 0; border-radius: var(--radius);
    padding: 0; background: var(--surface); color: var(--text-primary);
    box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
    /* Narrower than the viewport on a phone, never wider than a comfortable measure. */
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(85vh, 52rem);
    overflow: hidden;
    display: flex; flex-direction: column;
}
/* The display above outranks the browser's own `dialog:not([open]) { display: none }`, which
   left the closed dialog standing in the page under the register card. */
.terms-dialog:not([open]) { display: none; }
.terms-dialog::backdrop { background: rgba(33, 33, 33, 0.45); }
.terms-dialog__body { overflow-y: auto; padding: 1.5rem 1.75rem 0.5rem; }
.terms-dialog__actions {
    padding: 0.9rem 1.75rem 1.1rem; border-top: 1px solid var(--divider);
    display: flex; justify-content: flex-end; background: var(--surface);
}

/* Document typography — the HTML comes from the terms file, so these selectors are the only
   thing giving it shape. */
.legal-doc { font-size: 0.875rem; line-height: 1.6; }
.legal-doc h1 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.75rem; }
.legal-doc h2 { font-size: 1rem; margin: 1.35rem 0 0.4rem; }
.legal-doc p { margin: 0 0 0.55rem; }
.legal-doc .lead { color: var(--text-secondary); margin-bottom: 1.25rem; }
.legal-doc hr { border: 0; border-top: 1px solid var(--divider); margin: 1.5rem 0 1rem; }
.legal-doc .legal-footer { color: var(--text-secondary); font-size: 0.8rem; }


/* ── Phones and touch screens (mobile audit 09.10.2026) ─────────────────────────────
   Everything below sits inside a phone-width (xs, < 600px) or a touch-only (pointer: coarse)
   media query: a desktop with a mouse renders exactly as above. */

@media (max-width: 599.98px) {
    :root { --card-pad: 20px; --appbar-height: 56px; }

    /* App bar: 16px gutters; the round mark replaces the wordmark (as in the app bar), and
       the username gives way (ellipsis) instead of pushing into the logo — it is on the
       overview page anyway. */
    .topbar__inner { padding: 0 16px; gap: 0.75rem; }
    .topbar__menu { margin-left: -12px; }
    .topbar .brand { flex-shrink: 0; }
    .topbar .brand .brand__wordmark { display: none; }
    .topbar .brand .brand__mark { display: block; }
    .topbar nav { gap: 1rem; min-width: 0; }
    .topbar nav .user {
        display: block; min-width: 0; flex: 0 1 auto;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        line-height: 1.3;
    }
    .topbar nav form.inline, .topbar nav .lang-menu { flex-shrink: 0; }

    /* "Odjava" was a 47x15px button - far under a thumb. Padding makes the button itself
       at least 47px tall and 63px wide (the 13px label needs 18px / 13px of it); the equal
       negative margin hands that space back, so the header, the gaps and the label stay
       exactly where they were (the 16px gap to the username keeps 3px free, as does the
       16px gutter on the right). position:relative keeps the extra space above the drawer
       and content that follow. */
    .topbar nav form.inline .link { padding: 18px 13px; margin: -18px -13px; position: relative; }
    .topbar nav .link:hover { box-shadow: none; }

    /* MudContainer px-2 py-4: 8px sides, 16px top on a phone. */
    .shell__content { padding: 16px 8px; }

    .auth-main { padding: 1rem 0.5rem 2rem; }
    .auth-brand img { height: 30px; }
    .auth-card-frame:has(.hero) .auth-lang { top: calc(-1.25rem - 15px); }
    .hero { padding: 0 0.5rem; }

    /* iOS Safari zooms the page into any input whose text is under 16px and never zooms back
       out — 16px on a phone, as in the app's mud-overrides.css. */
    .field input[type=text], .field input[type=email], .field input[type=password],
    .field input[type=number], .field input:not([type]),
    .admin-toolbar input[type=text] { font-size: 16px; }

    .hub { gap: 1rem; }
}

@media (pointer: coarse) {
    /* Reveal-password eye: 28px visually; the invisible ::before grows the tap target to 44px
       without moving or resizing the icon. */
    .pw-eye::before { content: ""; position: absolute; inset: -8px; }

    /* "Zapamti me" / "Prihvaćam uvjete": a bigger box to hit, and the label (already tied to
       the box with for=) gets some vertical padding so the whole row is a target. */
    .field.checkbox input[type=checkbox],
    .terms-field__row input[type=checkbox] { width: 20px; height: 20px; }
    .field.checkbox label { padding: 0.5rem 0; }
    .terms-field__row input[type=checkbox] { margin-top: 0; }

    /* Buttons at least 40px tall under a finger. */
    .button { min-height: 40px; }
}