/*
 * Goldeneye brand theme — shadcn/NeoUI tokens generated from the legacy
 * Tombarany.hu palette (see migration/04-ui-and-design.md for the hex sources).
 * Loaded last in the CSS chain; rules are deliberately unlayered so they win
 * over the NeoUI theme files (which live in `@layer base`), including their
 * `.dark` variants. The app is single-theme: dark-red-and-gold, no toggle.
 */

@font-face {
    /* Self-hosted legacy Philosopher; the Google Fonts link in App.razor is the fallback. */
    font-family: "Philosopher";
    src: url("../fonts/philosopher-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Surfaces */
    --background: oklch(0.3683 0.1271 25.13);          /* #741719 page red */
    --foreground: oklch(1 0 0);                         /* white text */
    --card: oklch(0.4201 0.1700 25.77 / 0.302);         /* the ACTUAL legacy panel: left.box.bg.png = rgba(148,1,18,0.302) */
    --card-foreground: oklch(1 0 0);
    --popover: oklch(0.4209 0.1694 23.44);              /* #94011A popup background */
    --popover-foreground: oklch(1 0 0);
    --surface: oklch(0.3875 0.1409 25.39);              /* #7f1418 */
    --surface-foreground: oklch(1 0 0);

    /* Brand */
    --primary: oklch(0.4209 0.1694 23.44);              /* #94011A */
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.4956 0.1945 25.53);            /* #B70F1E zebra/selected */
    --secondary-foreground: oklch(1 0 0);
    --muted: oklch(0.3875 0.1409 25.39);                /* #7f1418 */
    --muted-foreground: oklch(0.8452 0 0);              /* #ccc */
    --accent: oklch(0.7903 0.1589 74.23);               /* #f6a924 gold */
    --accent-foreground: oklch(0.3683 0.1271 25.13);    /* red text on gold */

    /* Errors are GOLD on this site (legacy #eaa122), deliberately not red. */
    --destructive: oklch(0.7618 0.1529 74.47);          /* #eaa122 */
    --destructive-foreground: oklch(0.3683 0.1271 25.13);

    /* Structure */
    --border: oklch(0.4209 0.1694 23.44);               /* #94011A card borders */
    --input: oklch(0.8452 0 0 / 0.55);                  /* #ccc-ish input borders */
    --ring: oklch(0.7903 0.1589 74.23);                 /* gold focus ring */
    --radius: 0.375rem;

    /* Selection */
    --selection: oklch(0.7903 0.1589 74.23);
    --selection-foreground: oklch(0.3683 0.1271 25.13);

    /* Sidebar — same family, slightly darker red (#5f1214) */
    --sidebar: oklch(0.3211 0.1094 24.71);
    --sidebar-foreground: oklch(1 0 0);
    --sidebar-primary: oklch(0.4209 0.1694 23.44);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.4209 0.1694 23.44);       /* hover: #94011A */
    --sidebar-accent-foreground: oklch(0.7903 0.1589 74.23); /* gold text on hover */
    --sidebar-border: oklch(0.2733 0.0896 23.77);       /* #4a0e10 */
    --sidebar-ring: oklch(0.7903 0.1589 74.23);

    /* Charts — legacy chart colors first */
    --chart-1: oklch(0.7903 0.1589 74.23);              /* #f6a924 */
    --chart-2: oklch(0.9127 0.1902 100.64);             /* #ffe400 */
    --chart-3: oklch(0.5240 0.2108 23.09);              /* #C70228 */
    --chart-4: oklch(0.4956 0.1945 25.53);              /* #B70F1E */
    --chart-5: oklch(0.8452 0 0);                       /* #ccc */

    /* Typography: Philosopher for display/body, clean system sans for UI chrome */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Philosopher", Georgia, "Times New Roman", serif;
}

html {
    background-color: var(--background);
}

body {
    background-color: var(--background);
    color: var(--foreground);
}

::selection {
    background-color: var(--selection);
    color: var(--selection-foreground);
}

/* Default link gold lives in the base layer so component utilities (e.g. NeoUI's
   hover:text-accent-foreground on outline LinkButtons) can override it — an
   unlayered rule here made hover text gold-on-gold and invisible. */
@layer base {
    a {
        color: var(--accent);
    }
}

/* The sidebar's resting gold text is a deliberate brand choice (approved look);
   keep it explicit now that the generic rule is layered. Active items carry their
   own gold-chip rule. */
[data-collapsible] a:not([data-active="true"]) {
    color: var(--accent);
}

/* Signature lowercase feel of the legacy skin (kept as-is per decision):
   form labels, buttons and section headers. */
label,
button,
legend,
h1,
h2,
h3 {
    text-transform: lowercase;
}

/* Content areas use Philosopher; NeoUI chrome (sidebar, inputs, menus) stays on --font-sans. */
.ge-main,
.ge-auth-wrap {
    font-family: var(--font-heading);
}

/* ---- Layout chrome ------------------------------------------------------- */

.ge-sidebar-logo {
    display: block;
    padding: 0.75rem 0.5rem 0.5rem;
}

.ge-sidebar-logo img {
    width: 100%;
    height: auto;
}

.ge-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.ge-main {
    flex: 1;
    padding: 1.5rem 2rem 3rem;
    /* Legacy red-silk backdrop, recreated as a scalable SVG (img/swirl.svg).
       Fixed attachment keeps it anchored to the viewport for a stable, deep feel. */
    background: #6e1316 url("../img/swirl.svg") no-repeat fixed center / cover;
}

.ge-page-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 400;
    margin: 0 0 1.5rem;
}

/* ---- Auth pages ---------------------------------------------------------- */

.ge-auth-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.ge-auth-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #6e1316 url("../img/swirl.svg") no-repeat fixed center / cover;
}

.ge-login-logo {
    margin-bottom: 2rem;
}

.ge-login-logo img {
    display: block;
    width: min(320px, 80vw);
    height: auto;
}

/* Legacy centered form card: 480 wide, translucent tile, #94011A border. */
.ge-login-card {
    width: min(480px, 92vw);
}

.ge-form-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    line-height: 1.2;
    text-transform: lowercase;
    margin-bottom: 1.5rem;
}

.ge-form-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Gold submit button — matched to the legacy .buttonYellow: #eaa122 base with
   bevel borders (#f3ca64 top / #ecab33 sides) and WHITE text, as on the old site. */
button.ge-button-gold {
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    background: linear-gradient(180deg, #f3ca64 0%, #eaa122 55%, #dd9317 100%);
    border: 1px solid #ecab33;
    border-top-color: #f3ca64;
    color: #fff;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.3);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}

button.ge-button-gold:hover {
    background: linear-gradient(180deg, #ffd977 0%, #f9b437 55%, #ea9f1d 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgb(246 169 36 / 0.45);
    transform: translateY(-1px);
}

.ge-remember-me {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
}

.ge-remember-me input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

/* Validation errors render in gold, like the old site. */
.ge-validation-error,
.validation-message {
    color: var(--destructive);
    font-size: 0.875rem;
    margin: 0.25rem 0 0.75rem;
}

/* ---- Read-only detail rows (GFormRow) ------------------------------------ */
/* Legacy editor-label/editor-field rhythm: 186px right-aligned lowercase label. */

.ge-form-row {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.ge-form-label {
    flex: 0 0 186px;
    text-align: right;
    text-transform: lowercase;
    color: var(--muted-foreground);
}

.ge-form-value {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .ge-form-row {
        flex-direction: column;
        gap: 0.125rem;
    }

    .ge-form-label {
        flex-basis: auto;
        text-align: left;
    }
}

/* ---- Sidebar footer / logout -------------------------------------------- */

.ge-user-badge {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    min-width: 0;
}

.ge-user-badge-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ge-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ge-user-company {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ge-logout-form {
    display: contents;
}

.ge-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border: none;
    border-radius: calc(var(--radius) * 0.8);
    background: transparent;
    color: var(--sidebar-foreground);
    cursor: pointer;
}

.ge-logout-button:hover {
    color: var(--accent);
    background-color: var(--sidebar-accent);
}

/* ---- Dashboard ----------------------------------------------------------- */

.ge-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .ge-dashboard {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ge-rate-box h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--accent);
    margin: 0.75rem 0 0.125rem;
}

.ge-rate-box .ge-rate-date {
    color: var(--foreground);
    font-size: 1.125rem;
    margin-top: 0;
}

.ge-rate-value {
    margin: 0;
    font-size: 1rem;
}

.ge-rate-separator {
    margin: 0.5rem 0;
}

.ge-price-chart {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
}

.ge-denied-card {
    max-width: 480px;
}

.ge-denied-card p {
    margin: 0 0 1rem;
}

/* Icon-collapsed sidebar: NeoUI hides its own components' label spans, but our
   custom pieces (logo wordmark, raw logout button, user badge text) need explicit
   rules keyed on the sidebar's data-collapsible attribute. */
[data-collapsible="icon"] .ge-sidebar-logo {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0.5rem;
}

/* The wordmark's leftmost square is the sun glyph — crop to it as the collapsed brand mark. */
[data-collapsible="icon"] .ge-sidebar-logo img {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    object-position: left center;
}

[data-collapsible="icon"] .ge-user-badge-text {
    display: none;
}

/* Footer collapses to a vertical stack: avatar on top, logout icon under it. */
[data-collapsible="icon"] .ge-user-badge {
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

[data-collapsible="icon"] .ge-user-badge > span:first-child {
    width: 2rem;
    height: 2rem;
}

/* ---- Legacy visual "pop" pass (2026-08-19, from Attila's reference shots) ---- */

/* Panels: glassy red glow — translucent white-over-swirl with the #94011A frame,
   soft drop shadow and a 1px inner highlight, like the legacy formContent tiles. */
[data-slot="card"] {
    background: var(--card);
    border-color: rgb(148 1 26 / 0.9);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* Active sidebar item: the legacy selected-menu look — gold gradient, dark red text.
   (NeoUI marks the anchor with data-active but no data-sidebar attribute, so the
   selector scopes through the sidebar root's data-collapsible attribute instead.) */
[data-collapsible] a[data-active="true"],
[data-collapsible] a[data-active="true"]:hover,
[data-collapsible] button[data-active="true"],
[data-collapsible] button[data-active="true"]:hover {
    background: linear-gradient(180deg, #f4c454, #eaa122);
    color: #5f1214;
    font-weight: 600;
}

/* Page-title ornament: the little gold dotted cross of the legacy headings. */
.ge-page-title::before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 15px;
    margin-right: 0.6rem;
    background: url("../img/title-ornament.png") no-repeat center;
}

/* ---- Golden footer (legacy footer.bg.png, resampled into a CSS gradient) ------ */

.ge-footer {
    margin-top: auto;
}

.ge-footer-band {
    height: 71px;
    background: linear-gradient(180deg,
        #190505 0,
        #230600 1px,
        #753c03 2px,
        #bc7f29 3px,
        #a07025 4px,
        #84590e 9%,
        #8e6010 25%,
        #a06b12 50%,
        #b27914 75%,
        #bd7f0f 93%,
        #bb801d 96%,
        #ba8133 98%,
        #5b1d18 100%);
    border-bottom: 2px solid #610507;
}

.ge-footer-copy {
    margin: 0;
    padding: 0.55rem 1rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgb(255 240 224 / 0.92);
    background: #741719;
    border-top: 1px solid #9b2b2f;
    border-bottom: 1px solid #530f11;
}

/* ---- Blazor circuit-error banner: branded, Hungarian, hidden until Blazor
       reveals it (server restart / lost SignalR circuit). ---------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0.6rem 2.5rem 0.7rem 1.25rem;
    background: #4a0e10;
    border-top: 2px solid #eaa122;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 -4px 14px rgb(0 0 0 / 0.4);
}

#blazor-error-ui .reload {
    color: #f6a924;
    font-weight: 600;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: #ccc;
}

/* Open select trigger: NeoUI pairs bg-background with text-accent-foreground in the
   expanded+hover state; our accent-foreground is dark red, so the value vanished.
   Force readable text while expanded. */
button[role="combobox"][aria-expanded="true"] {
    color: var(--foreground);
}

/* ---- DataTable action icons + modernized pager (2026-08-19 design round) ----- */

/* Row action icon buttons (edit/delete ghosts): gold so they read as actionable;
   hover flips to the gold-gradient chip like the sidebar's active item. */
.ge-datagrid td button {
    color: #f6a924;
}

.ge-datagrid td button:hover {
    background: linear-gradient(180deg, #f4c454, #eaa122);
    color: #5f1214;
}

/* Pager: shadcn-style — square bordered chips, gold iconography, tidy type.
   (NeoUI's DataTable owns page state internally and exposes no page API, so this
   is a restyle of its built-in pagination bar rather than a replacement.) */
.ge-datagrid .flex.items-center.gap-1 button {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgb(255 255 255 / 0.22);
    background: rgb(255 255 255 / 0.05);
    color: #f6a924;
    border-radius: 0.5rem;
}

.ge-datagrid .flex.items-center.gap-1 button svg {
    width: 1rem;
    height: 1rem;
}

.ge-datagrid .flex.items-center.gap-1 button:hover:not(:disabled) {
    background: linear-gradient(180deg, #f4c454, #eaa122);
    border-color: #ecab33;
    color: #5f1214;
}

.ge-datagrid .flex.items-center.gap-1 button:disabled {
    opacity: 0.35;
}

/* Pager texts: warm light instead of grey-muted. */
.ge-datagrid .text-muted-foreground {
    color: rgb(255 236 214 / 0.85);
}

/* Table action items: identical hit-area, spacing and gold treatment whether the
   cell renders icon Buttons (Rates etc.) or icon links (Clients view/edit). */
.ge-datagrid td .row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ge-datagrid td .row-actions a,
.ge-datagrid td a.edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.45rem;
    color: #f6a924;
}

.ge-datagrid td .row-actions a:hover,
.ge-datagrid td a.edit-link:hover {
    background: linear-gradient(180deg, #f4c454, #eaa122);
    color: #5f1214;
}

/* Buttons and button-shaped links behave identically: pointer cursor and the
   legacy lowercase, whether rendered as <button> or as a NeoUI LinkButton <a>. */
button,
a.inline-flex.no-underline {
    cursor: pointer;
}

a.inline-flex.no-underline {
    text-transform: lowercase;
}

/* NeoUI's Link-variant button paints text-primary — the brand dark red, which
   disappears against the red backdrop (the login page's "elfelejtett jelszó" was
   unreadable). Links are gold on this site, hover matching the gold button hover. */
a.inline-flex.text-primary {
    color: var(--accent);
}

a.inline-flex.text-primary:hover {
    color: #ffd977;
}

/* ---- Sectioned form layout (2026 redesign, option C from migration/07) ------- */

.ge-form-page {
    max-width: 60rem;
    margin-inline: auto;
}

.ge-form-section {
    margin-bottom: 1.5rem;
    border: 1px solid rgb(148 1 26 / 0.9);
    border-radius: calc(var(--radius) * 1.5);
    background: var(--card);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* Flat variant (?flat=1): no card chrome, sections separated by their headers. */
.ge-form-page.flat .ge-form-section {
    border-color: transparent;
    background: none;
    box-shadow: none;
    margin-bottom: 2.25rem;
}

.ge-form-section-head {
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.09);
}

.ge-form-page.flat .ge-form-section-head {
    padding-inline: 0;
    border-bottom-color: rgb(148 1 26 / 0.8);
}

.ge-form-section-head h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    line-height: 1.3;
    color: #fff;
}

.ge-form-section-head p {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    /* Linear-style opacity discipline: non-actionable text sits at ~60%. */
    color: rgb(255 236 214 / 0.6);
}

.ge-form-section-body {
    padding: 1.3rem 1.5rem 1.45rem;
}

.ge-form-page.flat .ge-form-section-body {
    padding-inline: 0;
}

/* Paired short fields share a row (Baymard: clusters yes, whole-form columns no). */
.ge-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    align-items: start;
}

@media (max-width: 760px) {
    .ge-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ---- Sticky dirty-state save bar --------------------------------------------- */

.ge-save-bar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 30;
    margin-top: 1.25rem;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ge-save-bar.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.ge-save-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    border: 1px solid rgb(148 1 26 / 0.9);
    border-radius: 0.75rem;
    background: rgb(52 9 11 / 0.93);
    backdrop-filter: blur(6px);
    box-shadow: 0 -6px 24px rgb(0 0 0 / 0.45);
}

.ge-save-bar-hint {
    font-size: 0.85rem;
    color: rgb(255 236 214 / 0.7);
}

.ge-save-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Desktop density: sections flow in two columns so a whole record fits with
   minimal scrolling (sections stay single-column inside — scan order per card
   is preserved; only the CARDS are side by side). */
.ge-form-page {
    max-width: 100rem;
}

.ge-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1280px) {
    .ge-form-columns {
        grid-template-columns: 1fr;
    }
}

/* Hybrid form variant (Attila, 2026-08-19): ONE wide card around the whole form,
   sections become headed groups inside it; field layout unchanged. */
.ge-form-page.hybrid {
    background: var(--card);
    border: 1px solid rgb(148 1 26 / 0.9);
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.06);
    padding: 1.75rem 2rem 1.5rem;
}

.ge-form-page.hybrid .ge-form-section {
    border: none;
    background: none;
    box-shadow: none;
    margin-bottom: 1.9rem;
}

.ge-form-page.hybrid .ge-form-section-head {
    padding: 0 0 0.6rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.ge-form-page.hybrid .ge-form-section-body {
    padding: 0.95rem 0 0;
}

/* Short forms (one section, a handful of fields) keep the legacy narrow column
   instead of stretching the wide card across the screen. */
.ge-form-page.narrow {
    max-width: 40rem;
}

/* Form controls share one height — NeoUI's text Input and Select trigger ship
   with different vertical metrics and looked mismatched side by side. */
.ge-form-page .ge-form-section-body input:not([type="checkbox"]):not([type="radio"]),
.ge-form-page .ge-form-section-body button[role="combobox"],
.ge-form-page .ge-form-section-body .ge-date-trigger {
    height: 2.75rem;
}

/* ---- Date trigger (GDatePicker) ---------------------------------------------- */

/* NeoUI's own DatePicker bakes w-[280px] and h-9 into the trigger's class list, which
   is why dates were narrower and shorter than every neighbouring control. GDatePicker
   renders its own trigger, and this is the shape it takes everywhere — inside a form
   section (where the rule above matches too) and on the contract list's filter bar. */
button.ge-date-trigger {
    height: 2.75rem;
    min-width: 12rem;
    justify-content: flex-start;
    gap: 0.55rem;
    font-weight: 400;
}

/* Inside a form the date fills its Field, like every input and select trigger. On the
   contract list's filter bar it sizes to its own content instead. */
.ge-form-page .ge-form-section-body button.ge-date-trigger {
    width: 100%;
}

/* The filter bar's submit matches the date trigger beside it. The rule lives here
   rather than in Contracts.razor.css because scoped CSS never reaches the markup a
   child component renders — the Button's <button> carries the component's own scope. */
.filter-form button[type="submit"] {
    height: 2.75rem;
}

/* The placeholder reads as absent data, not as a value. */
button.ge-date-trigger .ge-date-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.ge-date-trigger.invalid {
    border-color: var(--destructive);
}

/* ---- Checkboxes -------------------------------------------------------------- */

/* NeoUI renders a checkbox as <button role="checkbox" data-state="checked|unchecked">
   at h-4 w-4 (16px), a size below the rest of the form controls. */
button[role="checkbox"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-color: rgb(148 1 26 / 0.9);
}

/* Checked uses the brand gold with a dark-red tick — the same accent language as the
   active sidebar item. The tick is an SVG stroked with currentColor, so `color` sets it. */
button[role="checkbox"][data-state="checked"] {
    background: linear-gradient(180deg, #f4c454, #eaa122);
    border-color: #ecab33;
    color: #5f1214;
}

/* NeoUI's horizontal Field centres its control with a :has([data-slot=checkbox]) rule,
   but the checkbox button carries no data-slot attribute, so the selector never matched
   and the box sat top-aligned against its label. Same intent, hooks that exist. */
[data-slot="field"][data-orientation="horizontal"]:has(button[role="checkbox"]) {
    align-items: center;
}

/* Contract wizard quantity boxes. Lives here, not in the page's scoped CSS: the
   class is passed to a NeoUI Input COMPONENT, and Blazor's scoped-CSS attribute
   never lands on a child component's own markup, so a scoped rule can't match. */
.product-table .quantity-input {
    max-width: 6rem;
    margin-left: auto;
}

/* NeoUI Calendar day cells: the day button is inline-flex inside a block td, so
   every cell carries ~5px of phantom baseline space — except the selected one,
   which made the highlight sit visibly offset in some rows. Flex-level buttons
   collapse the line box; the tr.flex>td>button shape exists only in the calendar. */
tr.flex > td > button.h-9.w-9 {
    display: flex;
}

/* Same phantom space, second source: the EMPTY cells padding the first and last
   week hold no button to flex, so they kept their line box and left those two rows
   at 41px against the middle rows' 36px — the day button then sat at the top of an
   over-tall row with 5px of slack under it, which is the residual misalignment in
   exactly the first and last rows. Flexing the cell collapses the line box whether
   or not it holds a day. */
tr.flex > td {
    display: flex;
}

/* Calendar selected day. Stock shadcn paints the CELL with bg-accent as a
   range-selection backdrop — near-invisible grey there, vivid gold here — so
   square gold corners peeked out behind the rounded dark day button. The cell
   layer goes; the selected DAY becomes the rounded gold chip, matching hover
   and the sidebar's active item. */
tr.flex > td:has([aria-selected]) {
    background: transparent;
}

/* NeoUI emits aria-selected as an EMPTY attribute (aria-selected=""), so match
   on presence — only the selected day carries the attribute at all. */
tr.flex > td > button[aria-selected],
tr.flex > td > button[aria-selected]:hover,
tr.flex > td > button[aria-selected]:focus {
    background: linear-gradient(180deg, #f4c454, #eaa122);
    color: #5f1214;
    border-radius: 0.45rem;
    font-weight: 600;
}

/* ---- GDatePicker own caption (Dropdown mode, currently ToS only) -------------
   NeoUI's Dropdown caption used native <select>s (untheme-able OS list) and
   overflowed the panel; GDatePicker renders its own GSelect-based caption above
   a Label-mode calendar instead. The wrapper takes over as the visible panel and
   the calendar's inner chrome + internal "january 2011" caption are stripped. */
.ge-cal {
    /* Column so the day grid centers under the caption — the caption (fixed month
       basis) is wider than the Calendar's 7-column table, which otherwise hugged
       the left of the popover. The caption itself still stretches edge to edge. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.ge-cal-caption {
    align-self: stretch;
}

.ge-cal-owncaption {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.35);
    padding-top: 0.7rem;
}

.ge-cal-owncaption .inline-block.bg-background {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.ge-cal-owncaption div.relative.flex.w-full.items-center.justify-center {
    display: none;
}

.ge-cal-caption {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
}

/* Fixed basis so the caption's width never follows the month name — an auto basis
   made the whole popover jump between "május" and "szeptember" (the longest). The
   7.75rem fits "szeptember" with slack; grow only soaks up space the grid grants. */
.ge-cal-monthwrap {
    flex: 1 0 7.75rem;
}

.ge-cal-yearwrap {
    flex: 0 0 5.25rem;
}

.ge-cal-menuwrap {
    position: relative;
}

.ge-cal-ddl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    height: 2.25rem;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
    color: var(--foreground);
    background: transparent;
    border: 1px solid var(--input);
    border-radius: 0.4rem;
}

.ge-cal-ddl:hover {
    background: var(--sidebar-accent);
    color: var(--accent);
}

.ge-cal-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    /* max-content so long month names never force a horizontal scrollbar. */
    width: max-content;
    min-width: 100%;
    max-height: 15rem;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 70;
    padding: 0.25rem;
    background: var(--popover);
    border: 1px solid rgb(0 0 0 / 0.4);
    border-radius: 0.5rem;
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
    /* Themed thin scrollbar — the default classic tracks painted white frames. */
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.35) transparent;
}

.ge-cal-menu::-webkit-scrollbar {
    width: 8px;
}

.ge-cal-menu::-webkit-scrollbar-track {
    background: transparent;
}

.ge-cal-menu::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 0.3);
    border-radius: 4px;
}

.ge-cal-menu > button {
    display: block;
    width: 100%;
    padding: 0.3rem 0.6rem;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--popover-foreground);
    background: transparent;
    border: 0;
    border-radius: 0.35rem;
    white-space: nowrap;
}

.ge-cal-menu > button:hover {
    background: var(--secondary);
}

.ge-cal-menu > button.is-selected {
    background: linear-gradient(180deg, #f4c454, #eaa122);
    color: #5f1214;
    font-weight: 600;
}

.ge-cal-caption > button {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
}

/* ---- Accept-terms page (moved from scoped CSS 2026-08-20; global so the rules
   also reach the NeoUI Card markup without ::deep). The card is wide and the ÁSZF
   body is a spread-height scroll window: the page is a full-height flex column and
   the body soaks up whatever the viewport offers, so the accept row stays on
   screen without page scrolling — on phones too. *@ */

/* The auth layout only sets MIN-height, which lets content grow past the viewport;
   the spread-height scroll window needs a HARD viewport cap on the whole chain —
   scoped to this page via :has so login/change-password keep their natural sizing. */
.ge-auth-page:has(.terms-page) {
    height: 100dvh;
}

.ge-auth-wrap:has(.terms-page) {
    min-height: 0;
}

.terms-page {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.terms-logo img {
    margin-inline: auto;
    width: min(240px, 60vw);
}

.terms-page .terms-card {
    width: min(1100px, 96vw);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.terms-page .terms-card > * {
    /* NeoUI CardContent — must become the flex column the body stretches in. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.terms-page .terms-card form {
    display: flex;
    flex-direction: column;
}

.terms-effective {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.terms-body {
    flex: 1;
    min-height: 12rem;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--input);
    border-radius: var(--radius, 0.375rem);
    background-color: var(--background);
    font-size: 0.9375rem;
    line-height: 1.65;
    overflow-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.35) transparent;
}

.terms-body::-webkit-scrollbar { width: 8px; }
.terms-body::-webkit-scrollbar-track { background: transparent; }
.terms-body::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.3); border-radius: 4px; }

/* Admin-authored HTML: keep headings proportionate inside the scroll window. */
.terms-body h1, .terms-body h2, .terms-body h3 {
    font-size: 1.15rem;
    line-height: 1.4;
    margin: 0.75rem 0 0.5rem;
}

.terms-page .ge-form-title {
    margin-bottom: 0.75rem;
}

.terms-page .ge-form-buttons {
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .terms-page .terms-card {
        width: 100vw;
    }

    .terms-body {
        padding: 0.75rem;
    }
}