/* Servit: layout and house styling. BEM-ish names with the sv- prefix; no CSS in .razor files. */

:root {
    --sv-primary: #1f4e79;
    --sv-primary-dark: #163a5a;
    --sv-accent: #2e86c1;
    --sv-bg: #f4f6f9;
    --sv-surface: #ffffff;
    --sv-border: #d9dee5;
    --sv-text: #1d2733;
    --sv-muted: #5f6b7a;
    --sv-success-bg: #e6f4ea;
    --sv-success-text: #1e6b34;
    --sv-error-bg: #fdecea;
    --sv-error-text: #9b1c1c;
    --sv-warning-bg: #fff6e0;
    --sv-warning-text: #7a5300;
    --sv-sidebar-width: 236px;
    /* Labels stand NEXT to their field, like the legacy windows (guarded by UiConventionTests). */
    --sv-label-width: 150px;
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--sv-bg);
    color: var(--sv-text);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

a {
    color: var(--sv-accent);
}

/* ---------- Shell ---------- */

.sv-shell {
    display: flex;
    min-height: 100vh;
}

.sv-sidebar {
    width: var(--sv-sidebar-width);
    flex: 0 0 var(--sv-sidebar-width);
    background: var(--sv-primary);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sv-sidebar__brand {
    display: block;
    padding: 18px 20px 14px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sv-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0 24px;
}

.sv-nav__group {
    margin: 14px 20px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.6);
}

.sv-nav__link {
    display: block;
    padding: 7px 20px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.sv-nav__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sv-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.sv-nav__kbd {
    font-family: inherit;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    background: none;
    padding: 0;
}

.sv-nav__link.active {
    background: rgba(255, 255, 255, 0.14);
    border-left-color: #ffffff;
    color: #ffffff;
    font-weight: 600;
}

.sv-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sv-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    background: var(--sv-surface);
    border-bottom: 1px solid var(--sv-border);
    position: sticky;
    top: 0;
    z-index: 5;
}

.sv-topbar__administration {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.sv-topbar__administration select {
    min-width: 280px;
    font-weight: 600;
}

.sv-topbar__label {
    color: var(--sv-muted);
    margin: 0;
}

.sv-topbar__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sv-topbar__link {
    text-decoration: none;
    font-weight: 600;
}

.sv-content {
    padding: 20px 24px 40px;
}

/* ---------- Page ---------- */

.sv-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.sv-page__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.sv-page__subtitle {
    color: var(--sv-muted);
    margin: 2px 0 0;
}

.sv-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sv-card {
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

.sv-card__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
}

/* ---------- Forms ---------- */

.sv-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 8px 24px;
}

.sv-form--narrow {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.sv-form--single {
    grid-template-columns: 1fr;
}

.sv-card--narrow {
    max-width: 560px;
}

/* A field is one row: the label on the left, the input (and an optional hint below it) on the right. */
.sv-field {
    display: grid;
    grid-template-columns: var(--sv-label-width) minmax(0, 1fr);
    align-items: center;
    gap: 2px 10px;
}

.sv-field > * {
    grid-column: 2;
    min-width: 0;
}

.sv-field > .sv-field__label {
    grid-column: 1;
}

.sv-field--wide {
    grid-column: 1 / -1;
}

.sv-field__label {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--sv-text);
    line-height: 1.25;
}

.sv-field__hint {
    font-size: 12px;
    color: var(--sv-muted);
}

/* A checkbox lines up with the inputs of the labelled rows above it. */
.sv-field--check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-left: calc(var(--sv-label-width) + 10px);
}

.sv-field--check > * {
    grid-column: auto;
}

.sv-field__pair {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sv-field__pair > * {
    flex: 1 1 0;
    min-width: 0;
}

.sv-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* ---------- Group boxes (the legacy "Order informatie" / "Bedrijfsgegevens" frames) ---------- */

.sv-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 12px 16px;
    align-items: start;
    margin-bottom: 12px;
}

.sv-group {
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
    padding: 6px 14px 12px;
    margin: 0;
    min-width: 0;
}

.sv-group > legend.sv-group__title {
    float: none;
    width: auto;
    padding: 0 6px;
    margin: 0 0 4px -6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sv-text);
}

.sv-group .sv-form {
    grid-template-columns: 1fr;
    gap: 6px;
}

/* ---------- Window toolbar (Sluiten, Toevoegen, ... with their shortcut keys) ---------- */

.sv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 12px;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
}

.sv-toolbar__separator {
    width: 1px;
    align-self: stretch;
    background: var(--sv-border);
    margin: 0 4px;
}

.sv-toolbar__spacer {
    flex: 1 1 auto;
}

.sv-shortcut {
    display: inline-flex;
}

.sv-kbd {
    margin-left: 6px;
    padding: 0 4px;
    border: 1px solid var(--sv-border);
    border-radius: 3px;
    font-family: inherit;
    font-size: 11px;
    color: var(--sv-muted);
    background: #f7f8fa;
}

.k-button-solid-primary .sv-kbd {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
}

.sv-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 10px;
}

.sv-filters .sv-field {
    grid-template-columns: auto minmax(160px, 1fr);
}

/* ---------- Banners ---------- */

.sv-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    white-space: pre-line;
}

.sv-banner--success {
    background: var(--sv-success-bg);
    color: var(--sv-success-text);
}

.sv-banner--error {
    background: var(--sv-error-bg);
    color: var(--sv-error-text);
}

.sv-banner--warning {
    background: var(--sv-warning-bg);
    color: var(--sv-warning-text);
}

.sv-banner__close {
    background: none;
    border: 0;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

/* ---------- Grids ---------- */

/* A click on a row opens it (house rule); grids that edit inline or have nothing to open opt out. */
.k-grid:not(.sv-grid-static) .k-master-row {
    cursor: pointer;
}

.sv-grid-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.sv-number {
    text-align: right;
    white-space: nowrap;
}

.sv-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sv-badge--draft {
    background: #eceff3;
    color: var(--sv-muted);
}

.sv-badge--ready {
    background: var(--sv-warning-bg);
    color: var(--sv-warning-text);
}

.sv-badge--invoiced {
    background: #e3eefa;
    color: var(--sv-primary);
}

.sv-badge--paid {
    background: var(--sv-success-bg);
    color: var(--sv-success-text);
}

.sv-badge--blocked {
    background: var(--sv-error-bg);
    color: var(--sv-error-text);
}

/* ---------- Order window ---------- */

/* Two frames per row like the legacy window: Order informatie | Factuur informatie, Betaling | Data. */
.sv-order-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sv-totals-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding: 8px 14px;
    margin-bottom: 12px;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
    color: var(--sv-muted);
    font-variant-numeric: tabular-nums;
}

.sv-totals-bar strong {
    color: var(--sv-text);
    margin-left: 4px;
}

.sv-totals-bar__total {
    margin-left: auto;
}

.sv-totals-bar__total strong {
    font-size: 15px;
}

/* Dates, numbers and amounts keep a compact width and stand left, right after the label, instead of filling the frame. */
.sv-field .sv-input-date,
.sv-field .sv-input-number {
    width: 150px;
}

.sv-field .sv-input-amount {
    width: 170px;
}

.sv-field__pair > .sv-input-date,
.sv-field__pair > .sv-input-number {
    flex: 0 0 150px;
}

.sv-field__pair > .sv-input-amount {
    flex: 0 0 170px;
}

/* ---------- Article cards (legacy "Artikelen" / "Onderhoud artikelen - Wijzigen kaart") ---------- */

/* The frames of a card window stand below each other, like the legacy card. */
.sv-card-window {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    --sv-label-width: 190px;
}

.sv-radio-row {
    padding: 4px 0;
}

.sv-radio-row .k-radio-list {
    gap: 8px 40px;
}

.sv-field__pair--code-letter > :last-child {
    flex: 0 0 90px;
}

/* ---------- Keyboard grid (ServitGrid, after VSITelerikGridWithNavigation in ISAS) ---------- */

/* The legacy toolbar row above a browser: Wijzigen, Verwijderen, Kopiëren and the card navigation. */
.sv-grid-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.sv-grid-nav__separator {
    width: 1px;
    align-self: stretch;
    background: var(--sv-border);
    margin: 0 4px;
}

.sv-grid-nav__position {
    margin-left: 8px;
    color: var(--sv-muted);
    font-size: 12px;
}

/* The current row of a browser stands out like the legacy blue bar. The selector must outweigh Telerik's
   ".k-grid .k-table-row.k-selected>.k-table-td:not(.k-group-cell)" (0,5,0), or only the white text applies. */
.sv-grid-host .k-grid .k-master-row.k-selected > .k-table-td:not(.k-group-cell) {
    background: #2e6fb5;
    color: #ffffff;
}

/* ---------- Selection windows ---------- */

.sv-filters__summary {
    color: var(--sv-muted);
    margin-left: auto;
}

/* One line per record like the legacy browsers: long text is cut off with "..." instead of making rows tall. */
.k-grid .k-master-row > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-cell-ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sv-order-header {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
}

.sv-totals {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 16px;
    justify-content: end;
    font-variant-numeric: tabular-nums;
}

.sv-totals__label {
    color: var(--sv-muted);
}

.sv-totals__value {
    text-align: right;
}

.sv-totals__value--total,
.sv-totals__label--total {
    font-weight: 700;
    color: var(--sv-text);
    border-top: 1px solid var(--sv-border);
    padding-top: 4px;
}

.sv-quick-entry {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.sv-quick-entry__input {
    flex: 1 1 auto;
}

.sv-address {
    white-space: pre-line;
    line-height: 1.5;
}

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

.sv-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.sv-tile {
    display: block;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--sv-text);
}

.sv-tile:hover {
    border-color: var(--sv-accent);
}

.sv-tile__label {
    color: var(--sv-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sv-tile__value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 4px;
}

.sv-tile__hint {
    color: var(--sv-muted);
    font-size: 12px;
}

/* ---------- Login ---------- */

.sv-empty {
    min-height: 100vh;
}

.sv-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-accent) 100%);
    padding: 24px;
}

.sv-login__card {
    width: 100%;
    max-width: 440px;
    background: var(--sv-surface);
    border-radius: 10px;
    padding: 28px 28px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.sv-login__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-primary);
    margin: 0;
}

.sv-login__form {
    display: grid;
    gap: 12px;
}

.sv-login .sv-field {
    --sv-label-width: 100px;
}

.sv-login__subtitle {
    color: var(--sv-muted);
    margin: 4px 0 20px;
}

.sv-password {
    position: relative;
}

.sv-password__input {
    padding-right: 42px;
}

.sv-password__toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
}

.sv-password__toggle--on {
    opacity: 1;
}

/* ---------- Log ---------- */

.sv-log {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    white-space: pre-wrap;
    background: #0f1720;
    color: #d5e1ee;
    border-radius: 6px;
    padding: 12px;
    max-height: 420px;
    overflow: auto;
}

/* The tab content stretches; a long screen is split in tabs, never an endless page (house rule). */
.sv-tabstrip {
    margin-top: 4px;
}

@media (max-width: 900px) {
    .sv-shell {
        flex-direction: column;
    }

    .sv-sidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    .sv-order-header,
    .sv-order-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .sv-order-groups {
        grid-template-columns: 1fr;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* ---------- Customer card (CustomerEdit.razor, legacy "Klanten - Wijzigen kaart") ---------- */

/* The postal code is short, the city takes the rest of the pair. */
.sv-field__pair--postal > :first-child {
    flex: 0 0 34%;
}

/* "Totaal open post" reads like an amount. */
.sv-customer-card__amount .k-input-inner {
    text-align: right;
}

/* The Toevoegen (F7) bar on top of a tab of the card. */
.sv-customer-card__tabbar {
    align-items: center;
    margin-top: 0;
    margin-bottom: 8px;
}

.sv-customer-card__summary {
    margin-left: auto;
    font-weight: 600;
}

/* The address tabs are one narrow column like the legacy card, not fields spread over the full width. */
.sv-customer-card__column,
.sv-contact-form {
    max-width: 760px;
    /* The legacy labels are long ("Standaard uurkorting percentage"): one line each. */
    --sv-label-width: 220px;
}

/* Belangrijk: Website 1 on the left, the note on the right. */
.sv-customer-card__important {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 12px 24px;
    align-items: start;
}

/* A text area lines its label up with its first line instead of its middle. */
.sv-field--top {
    align-items: start;
}

.sv-field--top > .sv-field__label {
    padding-top: 6px;
}

/* Schakelaars: a column of switches without labels on the left. */
.sv-switches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv-switches__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sv-field__pair--with-check > :first-child {
    flex: 1 1 auto;
}

.sv-field__inline-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.sv-field__pair--percentage > :first-child {
    flex: 0 0 120px;
}

.sv-field__pair--percentage > span {
    flex: 0 0 auto;
}

/* ---------- Reports (Factuuroverzicht, Openstaande posten) ---------- */

/* The totals line between the filters and the grid of a report. */
.sv-report-summary {
    margin: 0 0 10px;
    padding: 6px 10px;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: 6px;
    font-weight: 600;
}

/* ---------- Reports menu "Printen" (task 5114): list of reports, range filters ---------- */

/* The numbered list of /reports, numbered like the legacy menu "Printen". */
.sv-report-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 900px;
}

.sv-report-list__item {
    display: grid;
    grid-template-columns: 48px minmax(200px, auto) 1fr;
    align-items: baseline;
    gap: 4px 14px;
    min-height: 48px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sv-border);
}

.sv-report-list__number {
    color: var(--sv-muted);
    font-weight: 600;
    text-align: right;
}

.sv-report-list__link {
    font-weight: 600;
    color: var(--sv-accent);
}

.sv-report-list__description {
    color: var(--sv-muted);
    font-size: 13px;
}

/* A "van / t/m" filter: two inputs with "t/m" between them, next to one label. */
.sv-report-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sv-report-range__separator {
    flex: 0 0 auto;
    color: var(--sv-muted);
}

/* In the filter row a checkbox stands next to the other filters, not under the inputs of a form. */
.sv-filters .sv-field--check {
    padding-left: 0;
}