/*
 * SBNW design foundation for BNWEAR.
 *
 * Keep this file after Bootstrap, scoped component CSS and the Syncfusion theme.
 * Intelo remains the preferred brand family, but no font files are bundled until
 * their redistribution rights are confirmed. Segoe UI/system fonts are the
 * intentional runtime fallback.
 */

:root {
    /* Brand and semantic colors */
    --sbnw-color-primary: #008232;
    --sbnw-color-primary-rgb: 0, 130, 50;
    --sbnw-color-accent: #95c11f;
    --sbnw-color-accent-rgb: 149, 193, 31;
    --sbnw-color-text: #050505;
    --sbnw-color-text-strong: #13131c;
    --sbnw-color-text-muted: #434549;
    --sbnw-color-surface: #ffffff;
    --sbnw-color-surface-subtle: #f9f9fb;
    --sbnw-color-surface-disabled: #e9ecef;
    --sbnw-color-surface-dark: #212326;
    --sbnw-color-border: #e0e0e0;
    --sbnw-color-disabled: #6c757d;
    --sbnw-color-focus: #95c11f;
    --sbnw-color-success: #008232;
    --sbnw-color-warning: #ffc107;
    --sbnw-color-danger: #dc3545;

    /* Typography */
    --sbnw-font-regular: "Intelo Regular", "Segoe UI", Arial, sans-serif;
    --sbnw-font-semibold: "Intelo Semibold", "Segoe UI Semibold", "Segoe UI", Arial, sans-serif;
    --sbnw-font-bold: "Intelo Bold", "Segoe UI", Arial, sans-serif;
    --sbnw-font-size-body: 15px;
    --sbnw-font-size-page-title: 30px;
    --sbnw-font-size-section-title: 22px;
    --sbnw-font-size-control: 14px;
    --sbnw-font-size-compact: 14px;
    --sbnw-line-height-body: 1.5;
    --sbnw-line-height-control: 1.25;

    /* Shape, depth and density */
    --sbnw-radius-sm: 4px;
    --sbnw-radius-md: 8px;
    --sbnw-radius-pill: 24px;
    --sbnw-border-width: 1px;
    --sbnw-border: var(--sbnw-border-width) solid var(--sbnw-color-border);
    --sbnw-shadow-surface: none;
    --sbnw-shadow-dialog: 0 12px 32px rgba(19, 19, 28, 0.16);
    --sbnw-focus-ring: 0 0 0 3px rgba(var(--sbnw-color-accent-rgb), 0.35);
    --sbnw-control-height: 36px;
    --sbnw-control-height-compact: 32px;
    --sbnw-grid-row-height: 35px;

    /* Compact spacing scale */
    --sbnw-space-1: 4px;
    --sbnw-space-2: 8px;
    --sbnw-space-3: 12px;
    --sbnw-space-4: 16px;
    --sbnw-space-5: 24px;
    --sbnw-space-6: 32px;

    /* Bootstrap theme bridge */
    --bs-primary: var(--sbnw-color-primary);
    --bs-primary-rgb: var(--sbnw-color-primary-rgb);
    --bs-success: var(--sbnw-color-success);
    --bs-success-rgb: var(--sbnw-color-primary-rgb);
    --bs-warning: var(--sbnw-color-warning);
    --bs-danger: var(--sbnw-color-danger);
    --bs-body-color: var(--sbnw-color-text);
    --bs-body-font-family: var(--sbnw-font-regular);
    --bs-body-font-size: var(--sbnw-font-size-body);
    --bs-body-line-height: var(--sbnw-line-height-body);
    --bs-link-color: var(--sbnw-color-primary);
    --bs-link-hover-color: var(--sbnw-color-accent);
    --bs-border-color: var(--sbnw-color-border);
    --bs-border-radius: var(--sbnw-radius-sm);
    --bs-border-radius-sm: var(--sbnw-radius-sm);
    --bs-border-radius-lg: var(--sbnw-radius-md);
}

html,
body {
    color: var(--sbnw-color-text);
    font-family: var(--sbnw-font-regular);
    font-size: var(--sbnw-font-size-body);
    line-height: var(--sbnw-line-height-body);
}

body,
button,
input,
select,
textarea {
    font-family: var(--sbnw-font-regular);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--sbnw-color-text-strong);
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

h1,
.h1 {
    font-size: var(--sbnw-font-size-page-title);
}

h2,
.h2 {
    font-size: var(--sbnw-font-size-section-title);
}

a,
.btn-link {
    color: var(--sbnw-color-primary);
    text-decoration-color: rgba(var(--sbnw-color-primary-rgb), 0.4);
    text-underline-offset: 2px;
}

a:hover,
.btn-link:hover {
    color: var(--sbnw-color-accent);
    text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--sbnw-color-focus);
    outline-offset: 2px;
}

/* Bootstrap controls */
.btn {
    min-height: var(--sbnw-control-height);
    border-radius: var(--sbnw-radius-sm);
    font-family: var(--sbnw-font-semibold);
    font-size: var(--sbnw-font-size-control);
    font-weight: 600;
    line-height: var(--sbnw-line-height-control);
    padding: 7px var(--sbnw-space-3);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.btn-primary {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--sbnw-color-text);
    background-color: var(--sbnw-color-accent);
    border-color: var(--sbnw-color-accent);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-check:focus + .btn-primary,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    box-shadow: var(--sbnw-focus-ring);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--sbnw-color-disabled);
    background-color: var(--sbnw-color-surface-disabled);
    border-color: var(--sbnw-color-border);
}

.btn-outline-primary {
    color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: var(--sbnw-color-text);
    background-color: var(--sbnw-color-accent);
    border-color: var(--sbnw-color-accent);
}

.form-control,
.form-select,
.input-group-text {
    min-height: var(--sbnw-control-height);
    border-color: var(--sbnw-color-border);
    border-radius: var(--sbnw-radius-sm);
    color: var(--sbnw-color-text);
    font-size: var(--sbnw-font-size-control);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sbnw-color-primary);
    box-shadow: var(--sbnw-focus-ring);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--sbnw-color-disabled);
    background-color: var(--sbnw-color-surface-disabled);
}

.form-check-input:checked {
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.valid.modified:not([type="checkbox"]) {
    outline-color: var(--sbnw-color-success);
}

.invalid {
    outline-color: var(--sbnw-color-danger);
}

.validation-message {
    color: var(--sbnw-color-danger);
}

/* Shared compact form language for Bootstrap and Syncfusion controls. */
.form-section {
    display: grid;
    gap: var(--sbnw-space-3);
    min-width: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sbnw-space-3) var(--sbnw-space-4);
    min-width: 0;
}

.form-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.form-field {
    display: grid;
    gap: var(--sbnw-space-1);
    min-width: 0;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-label {
    margin: 0;
    color: var(--sbnw-color-text-strong);
    font-family: var(--sbnw-font-semibold);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.form-help {
    margin: 0;
    color: var(--sbnw-color-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sbnw-space-2);
    padding-top: var(--sbnw-space-1);
}

.form-validation,
.validation-message,
.e-error {
    color: var(--sbnw-color-danger);
    font-size: 13px;
    line-height: 1.35;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-control.invalid,
.form-select.invalid {
    border-color: var(--sbnw-color-danger);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.14);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: rgba(var(--sbnw-color-primary-rgb), 0.65);
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 0.1em;
    border-color: var(--sbnw-color-border);
    border-radius: 3px;
}

.btn-secondary,
.btn-outline-secondary {
    color: var(--sbnw-color-text-strong);
    background-color: var(--sbnw-color-surface);
    border-color: var(--sbnw-color-border);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--sbnw-color-primary);
    background-color: var(--sbnw-color-surface-subtle);
    border-color: var(--sbnw-color-primary);
}

.btn-danger {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-danger);
    border-color: var(--sbnw-color-danger);
}

.inline-cell-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sbnw-space-1);
    height: 100%;
}

.inline-cell-actions .btn {
    min-height: 30px;
    padding: 4px var(--sbnw-space-2);
    font-size: 12px;
}

.card {
    background-color: var(--sbnw-color-surface);
    border: var(--sbnw-border);
    border-radius: var(--sbnw-radius-md);
    box-shadow: var(--sbnw-shadow-surface);
}

.card-primary:not(.card-outline) > .card-header {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
}

.card-primary.card-outline,
.card-primary.card-outline-tabs > .card-header a.active,
.card-primary.card-outline-tabs > .card-header a.active:hover {
    border-top-color: var(--sbnw-color-primary);
}

.alert-success {
    border-color: var(--sbnw-color-success);
}

.alert-warning {
    border-color: var(--sbnw-color-warning);
}

.alert-danger {
    border-color: var(--sbnw-color-danger);
}

.status-message {
    margin: var(--sbnw-space-3) 0 0;
    padding: var(--sbnw-space-2) var(--sbnw-space-3);
    color: var(--sbnw-color-text-muted);
    background-color: var(--sbnw-color-surface-subtle);
    border: var(--sbnw-border);
    border-left: 4px solid var(--sbnw-color-primary);
    border-radius: var(--sbnw-radius-sm);
    font-size: 13px;
}

.status-message-danger {
    color: var(--sbnw-color-danger);
    border-left-color: var(--sbnw-color-danger);
}

/* Shared, compact layout for authenticated administration pages. */
.admin-page {
    display: grid;
    gap: var(--sbnw-space-3);
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.page-section {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background-color: var(--sbnw-color-surface);
    border: var(--sbnw-border);
    border-radius: var(--sbnw-radius-sm);
}

.page-header,
.page-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: var(--sbnw-space-2) var(--sbnw-space-3);
    color: var(--sbnw-color-text-strong);
    background-color: var(--sbnw-color-surface-subtle);
    border-bottom: var(--sbnw-border);
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

.page-title,
.page-section-title {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

.page-title {
    font-size: 20px;
    line-height: 1.25;
}

.page-title:focus {
    outline: none;
}

.page-section-title {
    font-size: 16px;
    line-height: 1.35;
}

.page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--sbnw-space-1);
    margin-left: var(--sbnw-space-3);
}

.page-section-body {
    min-width: 0;
    max-width: 100%;
    padding: var(--sbnw-space-3);
}

.page-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--sbnw-space-3);
    width: 100%;
    max-width: 720px;
    margin-bottom: var(--sbnw-space-3);
}

.page-filter-control {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 360px;
}

.page-filter-bar-surface {
    align-items: center;
    max-width: none;
    padding: var(--sbnw-space-3);
    background-color: var(--sbnw-color-surface-subtle);
    border: var(--sbnw-border);
    border-radius: var(--sbnw-radius-sm);
}

.summary-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(320px, 480px);
    align-items: start;
    max-width: 880px;
}

.summary-panel {
    min-width: 0;
    overflow: hidden;
    background-color: var(--sbnw-color-surface);
    border: var(--sbnw-border);
    border-radius: var(--sbnw-radius-sm);
}

.summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sbnw-space-3);
    min-height: var(--sbnw-control-height);
    padding: var(--sbnw-space-1) var(--sbnw-space-2);
    border-bottom: var(--sbnw-border);
}

.summary-row:last-child {
    border-bottom: 0;
}

.summary-row-total {
    color: var(--sbnw-color-text-strong);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.06);
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

.summary-label {
    min-width: 0;
    color: var(--sbnw-color-text-muted);
}

.summary-value {
    min-width: 7ch;
    color: var(--sbnw-color-text-strong);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.summary-action {
    width: 32px;
    min-width: 32px;
}

.page-icon-action.e-btn.e-link,
.page-icon-action.e-btn.e-flat {
    width: var(--sbnw-control-height);
    min-width: var(--sbnw-control-height);
    color: var(--sbnw-color-primary);
}

.page-icon-action.e-btn.e-link:hover,
.page-icon-action.e-btn.e-link:focus,
.page-icon-action.e-btn.e-flat:hover,
.page-icon-action.e-btn.e-flat:focus {
    color: var(--sbnw-color-primary);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.08);
}

.page-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sbnw-space-2);
    margin-top: var(--sbnw-space-3);
}

.content-subsection-title {
    margin: 0 0 var(--sbnw-space-2);
    color: var(--sbnw-color-text-strong);
    font-family: var(--sbnw-font-semibold);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.table-scroll {
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.admin-data-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--sbnw-color-text);
    font-size: var(--sbnw-font-size-compact);
}

.admin-data-table th,
.admin-data-table td {
    padding: var(--sbnw-space-2);
    text-align: left;
    border-bottom: var(--sbnw-border);
}

.admin-data-table th {
    color: var(--sbnw-color-text-strong);
    background-color: var(--sbnw-color-surface-subtle);
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

.admin-data-table tbody tr:hover {
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.06);
}

.admin-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-data-table .numeric-cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.admin-data-table-compact {
    max-width: 720px;
}

.inventory-filter {
    margin-bottom: 0;
}

.inventory-filter .e-checkbox-wrapper {
    min-height: var(--sbnw-control-height);
    display: inline-flex;
    align-items: center;
}

.info-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sbnw-space-4);
}

.info-video {
    min-width: 0;
    overflow: hidden;
    background-color: var(--sbnw-color-surface-dark);
    border: var(--sbnw-border);
    border-radius: var(--sbnw-radius-sm);
}

.info-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.info-note {
    margin: var(--sbnw-space-3) 0 0;
    color: var(--sbnw-color-text-muted);
    font-size: 13px;
}

.info-table {
    max-width: 560px;
}

.info-table td:first-child {
    width: 38%;
    color: var(--sbnw-color-text-muted);
    font-family: var(--sbnw-font-semibold);
}

.data-grid-container {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
}

.data-grid-container > .e-grid,
.data-grid-container .e-grid {
    width: 100% !important;
    max-width: 100%;
}

.data-grid-container .e-content {
    overflow-x: auto !important;
}

.data-grid-container .e-toolbar,
.data-grid-container .e-pager {
    max-width: 100%;
}

.account-data-layout {
    display: grid;
    gap: var(--sbnw-space-4);
    min-width: 0;
    width: 100%;
    margin-top: var(--sbnw-space-4);
}

.account-data-layout > * {
    min-width: 0;
}

.account-data-layout-compact {
    min-width: 0;
    width: 100%;
    max-width: 720px;
}

.overview-table {
    min-width: 0;
    width: 100%;
    max-width: 720px;
}

.bmd-export-actions {
    justify-content: flex-start;
    margin: var(--sbnw-space-3) 0 0;
}

.bmd-export-page .e-spinner-pane.e-spin-overlay {
    position: fixed;
}

.e-ddl.e-control.e-lib.e-popup.e-popup-open {
    z-index: 1000;
}

/* Bridge the existing panel classes while pages move to the shared pattern. */
.mypanel_header {
    color: var(--sbnw-color-text-strong);
    background-color: var(--sbnw-color-surface-subtle);
    border-color: var(--sbnw-color-border);
    font-family: var(--sbnw-font-semibold);
    font-size: var(--sbnw-font-size-body);
    font-weight: 600;
}

.mypanel_body {
    background-color: var(--sbnw-color-surface);
    border-color: var(--sbnw-color-border);
}

@media (max-width: 640.98px) {
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sbnw-space-3);
    }

    .form-actions {
        align-items: stretch;
    }

    .form-actions .btn,
    .form-actions .e-btn {
        flex: 1 1 auto;
    }

    .admin-page {
        gap: var(--sbnw-space-2);
    }

    .page-header,
    .page-section-header {
        padding: var(--sbnw-space-2);
    }

    .page-title {
        font-size: 18px;
    }

    .page-section-body {
        padding: var(--sbnw-space-2);
    }

    .page-filter-bar {
        gap: var(--sbnw-space-2);
    }

    .page-filter-control {
        flex-basis: 100%;
        max-width: none;
    }

    .summary-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .summary-panel {
        width: 100%;
    }

    .summary-row {
        gap: var(--sbnw-space-2);
    }

    .info-video-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sbnw-space-3);
    }

    .login-page,
    .register-page {
        justify-content: center;
        padding: var(--sbnw-space-3);
    }

    .login-box {
        width: 100%;
    }

    .sbnw-dialog.e-dialog,
    .sbnw-dialog-small.e-dialog,
    .sbnw-dialog-large.e-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .sbnw-dialog .e-dlg-header-content,
    .sbnw-dialog .e-dlg-content,
    .sbnw-dialog .e-footer-content {
        padding-right: var(--sbnw-space-3);
        padding-left: var(--sbnw-space-3);
    }
}

.login-page,
.register-page {
    background-color: var(--sbnw-color-surface-subtle);
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding: var(--sbnw-space-4);
}

.login-box {
    width: min(380px, 100%);
    margin: 0;
}

.login-box .card {
    overflow: hidden;
    border: var(--sbnw-border);
    border-top: 3px solid var(--sbnw-color-primary);
    border-radius: var(--sbnw-radius-md);
}

.login-brand {
    display: grid;
    justify-items: center;
    gap: var(--sbnw-space-2);
    padding: var(--sbnw-space-4) var(--sbnw-space-4) var(--sbnw-space-3);
    text-align: center;
    background-color: var(--sbnw-color-surface);
    border-bottom: var(--sbnw-border);
}

.login-brand-logo {
    display: block;
    width: min(250px, 100%);
    height: auto;
    max-height: 72px;
    object-fit: contain;
}

.login-title {
    margin: 0;
    color: var(--sbnw-color-text-strong);
    font-family: var(--sbnw-font-semibold);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.login-title:focus {
    outline: none;
}

.login-card-body,
.register-card-body {
    color: var(--sbnw-color-text-muted);
    background-color: var(--sbnw-color-surface);
    padding: var(--sbnw-space-4);
}

.login-form {
    display: grid;
    gap: var(--sbnw-space-3);
}

.login-form .form-actions,
.login-submit {
    width: 100%;
}

.login-logo a,
.register-logo a {
    color: var(--sbnw-color-text-strong);
}

.login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
    border-color: var(--sbnw-color-primary);
}

/*
 * Syncfusion bridge. These selectors target the documented, component-level
 * CSS class surface and deliberately avoid generated element IDs or page markup.
 */
.e-control,
.e-control-wrapper,
.e-popup,
.e-dialog,
.e-grid,
.e-tab {
    font-family: var(--sbnw-font-regular);
}

.e-control.e-btn,
.e-btn,
.e-css.e-btn {
    min-height: var(--sbnw-control-height-compact);
    border-radius: var(--sbnw-radius-sm);
    font-family: var(--sbnw-font-semibold);
    font-size: var(--sbnw-font-size-control);
    font-weight: 600;
}

.e-control.e-btn.e-primary,
.e-btn.e-primary,
.e-btn.e-flat.e-primary,
.e-css.e-btn.e-flat.e-primary,
.e-css.e-btn.e-primary {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.e-btn.e-primary:hover,
.e-btn.e-primary:focus,
.e-btn.e-primary:active,
.e-btn.e-flat.e-primary:hover,
.e-btn.e-flat.e-primary:focus,
.e-btn.e-flat.e-primary:active,
.e-css.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:focus,
.e-css.e-btn.e-primary:active,
.e-css.e-btn.e-flat.e-primary:hover,
.e-css.e-btn.e-flat.e-primary:focus,
.e-css.e-btn.e-flat.e-primary:active {
    color: var(--sbnw-color-text);
    background-color: var(--sbnw-color-accent);
    border-color: var(--sbnw-color-accent);
}

.e-btn.e-primary:focus,
.e-btn.e-flat.e-primary:focus,
.e-css.e-btn.e-primary:focus {
    box-shadow: var(--sbnw-focus-ring);
}

.e-btn:disabled,
.e-btn.e-disabled,
.e-btn.e-primary:disabled,
.e-btn.e-primary.e-disabled,
.e-btn.e-flat.e-primary:disabled,
.e-btn.e-flat.e-primary.e-disabled,
.e-css.e-btn:disabled,
.e-css.e-btn.e-disabled,
.e-css.e-btn.e-primary:disabled,
.e-css.e-btn.e-primary.e-disabled,
.e-css.e-btn.e-flat.e-primary:disabled,
.e-css.e-btn.e-flat.e-primary.e-disabled {
    color: var(--sbnw-color-disabled);
    background-color: var(--sbnw-color-surface-disabled);
    border-color: var(--sbnw-color-border);
}

.e-input-group,
.e-input-group.e-control-wrapper {
    min-height: var(--sbnw-control-height-compact);
    border-color: var(--sbnw-color-border);
    border-radius: var(--sbnw-radius-sm);
    font-family: var(--sbnw-font-regular);
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--sbnw-color-border);
}

.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input,
input.e-input,
textarea.e-input {
    color: var(--sbnw-color-text);
    font-family: var(--sbnw-font-regular);
    font-size: var(--sbnw-font-size-control);
}

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    border-color: var(--sbnw-color-primary);
    box-shadow: var(--sbnw-focus-ring);
}

.e-input-group:hover:not(.e-input-focus):not(.e-disabled):not(.e-error),
.e-input-group.e-control-wrapper:hover:not(.e-input-focus):not(.e-disabled):not(.e-error) {
    border-color: rgba(var(--sbnw-color-primary-rgb), 0.65);
}

.e-input-group.e-disabled,
.e-input-group.e-control-wrapper.e-disabled,
.e-input-group input.e-input:disabled,
.e-input-group input.e-input[readonly] {
    color: var(--sbnw-color-disabled);
    background-color: var(--sbnw-color-surface-disabled);
}

.e-input-group.e-error,
.e-input-group.e-control-wrapper.e-error {
    border-color: var(--sbnw-color-danger);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.14);
}

.e-checkbox-wrapper .e-frame {
    border-color: var(--sbnw-color-border);
    border-radius: 3px;
}

.e-checkbox-wrapper:hover .e-frame,
.e-checkbox-wrapper:focus-within .e-frame {
    border-color: var(--sbnw-color-primary);
}

.e-checkbox-wrapper:focus-within .e-frame {
    box-shadow: var(--sbnw-focus-ring);
}

.e-checkbox-wrapper .e-frame.e-check,
.e-checkbox-wrapper .e-frame.e-stop {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-checkbox-wrapper .e-checkbox:active + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
    border-color: var(--sbnw-color-primary);
    box-shadow: var(--sbnw-focus-ring);
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop,
.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop,
.e-checkbox-wrapper:hover .e-frame.e-check,
.e-checkbox-wrapper:hover .e-frame.e-stop,
.e-css.e-checkbox-wrapper:hover .e-frame.e-check,
.e-css.e-checkbox-wrapper:hover .e-frame.e-stop {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop,
.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop {
    box-shadow: var(--sbnw-focus-ring);
}

.e-checkbox-wrapper.e-focus .e-frame,
.e-checkbox-wrapper.e-focus .e-frame.e-check,
.e-css.e-checkbox-wrapper.e-focus .e-frame,
.e-css.e-checkbox-wrapper.e-focus .e-frame.e-check {
    outline-color: var(--sbnw-color-focus);
}

.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check,
.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-stop,
.e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check,
.e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-stop {
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.45);
    border-color: rgba(var(--sbnw-color-primary-rgb), 0.45);
}

.e-grid .e-editedrow .e-rowcell,
.e-grid .e-addedrow .e-rowcell {
    padding: var(--sbnw-space-1);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.04);
}

.e-grid .e-editedrow .e-input-group,
.e-grid .e-addedrow .e-input-group,
.e-grid .e-editedrow .e-input-group.e-control-wrapper,
.e-grid .e-addedrow .e-input-group.e-control-wrapper {
    min-height: var(--sbnw-control-height-compact);
}

.e-grid .e-griderror,
.e-grid .e-error {
    color: var(--sbnw-color-danger);
    font-size: 12px;
}

.e-grid {
    color: var(--sbnw-color-text);
    border-color: var(--sbnw-color-border);
    border-radius: var(--sbnw-radius-sm);
    font-size: var(--sbnw-font-size-compact);
}

.e-grid .e-gridheader,
.e-grid .e-toolbar,
.e-grid .e-headercell {
    color: var(--sbnw-color-text-strong);
    background-color: var(--sbnw-color-surface-subtle);
    border-color: var(--sbnw-color-border);
}

.e-grid .e-headercell {
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

.e-grid .e-row {
    height: var(--sbnw-grid-row-height);
}

.e-grid .e-rowcell,
.e-grid .e-summarycell {
    border-color: var(--sbnw-color-border);
}

.e-grid .e-row:hover .e-rowcell,
.e-grid .e-rowcell.e-selectionbackground {
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.08);
}

.e-grid .e-toolbar .e-btn:hover,
.e-grid .e-toolbar .e-btn:focus {
    color: var(--sbnw-color-primary);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.08);
}

.e-pager .e-pager-default,
.e-pager .e-numericitem,
.e-pager .e-icons {
    color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-border);
}

.e-pager div.e-icons.e-pager-default,
.e-pager .e-spacing,
.e-pager .e-firstpage,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-lastpage {
    color: var(--sbnw-color-primary);
}

.e-pager .e-pager-default:hover,
.e-pager .e-numericitem:hover,
.e-pager .e-icons:hover {
    color: var(--sbnw-color-primary);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.08);
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-accent);
}

.e-pager .e-focused,
.e-pager .e-currentitem.e-numericitem.e-focused {
    box-shadow: inset 0 0 0 1px var(--sbnw-color-primary);
}

.e-pager .e-disable,
.e-pager .e-disable:hover {
    color: var(--sbnw-color-disabled);
    background-color: var(--sbnw-color-surface);
    border-color: var(--sbnw-color-border);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-family: var(--sbnw-font-regular);
    font-size: var(--sbnw-font-size-control);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--sbnw-color-text-muted);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
    color: var(--sbnw-color-primary);
    outline-color: var(--sbnw-color-focus);
}

.e-tab .e-tab-header {
    border-bottom: var(--sbnw-border);
}

.e-tab,
.e-tab > .e-content,
.e-tab > .e-content > .e-item {
    min-width: 0;
    width: 100% !important;
    max-width: 100%;
}

.e-tab > .e-content {
    overflow: hidden;
}

.e-tab .e-tab-header .e-toolbar-item {
    min-height: var(--sbnw-control-height);
    margin: 0;
    border-radius: var(--sbnw-radius-sm) var(--sbnw-radius-sm) 0 0;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    min-height: var(--sbnw-control-height);
    padding: 0 var(--sbnw-space-3);
}

.e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover,
.e-tab .e-tab-header .e-toolbar-item:not(.e-active):focus-within {
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.06);
}

.e-tab .e-tab-header .e-toolbar-item:focus-within .e-tab-wrap {
    box-shadow: inset 0 0 0 2px rgba(var(--sbnw-color-accent-rgb), 0.55);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active.e-itop .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active.e-ibottom .e-tab-text {
    color: var(--sbnw-color-primary);
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

.e-tab .e-tab-header .e-indicator {
    height: 3px;
    background-color: var(--sbnw-color-primary);
}

.e-tab .e-content .e-item {
    padding: var(--sbnw-space-3) 0 0;
}

.e-grid .e-emptyrow td {
    padding: var(--sbnw-space-4);
    color: var(--sbnw-color-text-muted);
    background-color: var(--sbnw-color-surface-subtle);
    text-align: center;
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
}

.e-dropdownbase .e-list-item.e-hover,
.e-dropdownbase .e-list-item:hover {
    color: var(--sbnw-color-text);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.08);
}

.e-calendar .e-content td.e-today span.e-day,
.e-calendar .e-content td.e-focused-date.e-today span.e-day {
    color: var(--sbnw-color-primary);
    box-shadow: inset 2px 0 var(--sbnw-color-primary),
        inset 0 2px var(--sbnw-color-primary),
        inset -2px 0 var(--sbnw-color-primary),
        inset 0 -2px var(--sbnw-color-primary);
}

.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-today.e-selected span.e-day,
.e-calendar .e-content.e-year td.e-selected:hover span.e-day,
.e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
.e-calendar .e-content td.e-today.e-selected:hover span.e-day,
.e-calendar .e-content td.e-selected:hover span.e-day,
.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    color: var(--sbnw-color-surface);
    background: var(--sbnw-color-primary);
    box-shadow: inset 0 0 0 1px var(--sbnw-color-primary);
}

.e-calendar .e-content .e-footer {
    color: var(--sbnw-color-primary);
}

.e-calendar .e-btn.e-today.e-flat.e-primary,
.e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.e-calendar .e-btn.e-today.e-flat.e-primary:hover,
.e-calendar .e-btn.e-today.e-flat.e-primary:focus,
.e-calendar .e-btn.e-today.e-flat.e-primary:active,
.e-calendar .e-btn.e-today.e-flat.e-primary.e-active,
.e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover,
.e-calendar .e-css.e-btn.e-today.e-flat.e-primary:focus,
.e-calendar .e-css.e-btn.e-today.e-flat.e-primary:active,
.e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-active {
    color: var(--sbnw-color-text);
    background-color: var(--sbnw-color-accent);
    border-color: var(--sbnw-color-accent);
    box-shadow: var(--sbnw-focus-ring);
}

.e-calendar .e-header .e-prev:hover,
.e-calendar .e-header .e-prev:focus,
.e-calendar .e-header .e-next:hover,
.e-calendar .e-header .e-next:focus {
    color: var(--sbnw-color-primary);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.08);
}

.e-dialog {
    color: var(--sbnw-color-text);
    background-color: var(--sbnw-color-surface);
    border: var(--sbnw-border);
    border-radius: var(--sbnw-radius-md);
    box-shadow: var(--sbnw-shadow-dialog);
}

.sbnw-dialog.e-dialog {
    width: min(480px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden;
}

.sbnw-dialog-small.e-dialog {
    width: min(400px, calc(100vw - 32px)) !important;
}

.sbnw-dialog-large.e-dialog {
    width: min(740px, calc(100vw - 32px)) !important;
}

.sbnw-dialog .e-dlg-header-content {
    padding: var(--sbnw-space-3) var(--sbnw-space-4);
    border-bottom: var(--sbnw-border);
}

.sbnw-dialog .e-dlg-header {
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.35;
}

.sbnw-dialog .e-dlg-content {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    padding: var(--sbnw-space-4);
    overflow: auto;
}

.sbnw-dialog .e-footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sbnw-space-2);
    padding: var(--sbnw-space-3) var(--sbnw-space-4);
    border-top: var(--sbnw-border);
}

.sbnw-dialog .e-footer-content .e-btn {
    margin: 0;
}

.sbnw-dialog + .e-dlg-overlay,
.e-dlg-container .e-dlg-overlay {
    background-color: rgba(19, 19, 28, 0.35);
}

.e-btn.e-danger,
.e-css.e-btn.e-danger {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-danger);
    border-color: var(--sbnw-color-danger);
}

.e-btn.e-danger:hover,
.e-btn.e-danger:focus,
.e-css.e-btn.e-danger:hover,
.e-css.e-btn.e-danger:focus {
    color: var(--sbnw-color-surface);
    background-color: #b02a37;
    border-color: #b02a37;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.22);
}

.dialog-form {
    display: grid;
    gap: var(--sbnw-space-3);
    min-width: 0;
}

.dialog-message {
    margin: 0;
    line-height: 1.5;
}

.upload-form {
    display: grid;
    gap: var(--sbnw-space-2);
}

.upload-form .e-upload {
    border: var(--sbnw-border);
    border-radius: var(--sbnw-radius-sm);
    background-color: var(--sbnw-color-surface-subtle);
}

.upload-form .e-upload .e-file-select-wrap,
.upload-form .e-upload .e-upload-files {
    padding: var(--sbnw-space-3);
}

.upload-form .e-upload .e-file-select-wrap {
    border-bottom-color: var(--sbnw-color-border);
}

.e-toast-container .e-toast {
    color: var(--sbnw-color-text);
    background-color: var(--sbnw-color-surface);
    border: var(--sbnw-border);
    border-left: 4px solid var(--sbnw-color-primary);
    border-radius: var(--sbnw-radius-sm);
    box-shadow: var(--sbnw-shadow-dialog);
}

.e-toast-container .e-toast.e-toast-danger {
    border-left-color: var(--sbnw-color-danger);
}

.e-toast-container .e-toast.e-toast-success {
    border-left-color: var(--sbnw-color-success);
}

.e-toast-container .e-toast .e-toast-title {
    color: var(--sbnw-color-text-strong);
    font-family: var(--sbnw-font-semibold);
    font-weight: 600;
}

.e-toast-container .e-toast .e-toast-message {
    color: var(--sbnw-color-text-muted);
}

.e-dialog .e-dlg-header-content,
.e-dialog .e-footer-content {
    background-color: var(--sbnw-color-surface-subtle);
    border-color: var(--sbnw-color-border);
}

.e-dialog .e-dlg-header {
    color: var(--sbnw-color-text-strong);
    font-family: var(--sbnw-font-semibold);
    font-size: var(--sbnw-font-size-section-title);
    font-weight: 600;
}

.e-dialog .e-dlg-closeicon-btn:hover,
.e-dialog .e-dlg-closeicon-btn:focus {
    color: var(--sbnw-color-primary);
    background-color: rgba(var(--sbnw-color-primary-rgb), 0.08);
}

/* Syncfusion's dialog footer uses a deliberately specific flat-button rule. */
.e-dialog .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-color: var(--sbnw-color-primary);
}

.e-dialog .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):hover,
.e-dialog .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus,
.e-dialog .e-footer-content .e-btn.e-primary.e-flat:not([disabled]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):active {
    color: var(--sbnw-color-text);
    background-color: var(--sbnw-color-accent);
    border-color: var(--sbnw-color-accent);
}

/* Application shell bridge for the Syncfusion Sidebar root. */
#Sidebar.e-sidebar {
    color: var(--sbnw-color-surface);
    background-color: var(--sbnw-color-primary);
    border-right: 1px solid rgba(19, 19, 28, 0.12);
    overflow: hidden;
}

#Sidebar.e-sidebar.e-left.e-over {
    box-shadow: 8px 0 24px rgba(19, 19, 28, 0.18);
}

.e-sidebar-overlay {
    background-color: rgba(19, 19, 28, 0.42);
}

@media (min-width: 641px) {
    .e-sidebar-overlay {
        display: none !important;
    }
}

#Sidebar.e-sidebar.e-dock.e-close .displayText {
    display: none;
}

#Sidebar.e-sidebar.e-dock.e-close .nav-link {
    padding-right: 14px;
    padding-left: 14px;
}

#Sidebar.e-sidebar.e-dock.e-close .nav-link .oi {
    margin-right: 0;
}

#Sidebar.e-sidebar.e-dock.e-close .separator {
    margin-right: 12px;
    margin-left: 12px;
}

@media (max-width: 640.98px) {
    .e-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    #Sidebar.e-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    #Sidebar.e-sidebar.e-dock.e-close {
        width: 0 !important;
        min-width: 0 !important;
        border-right: 0;
        visibility: hidden;
    }

    #Sidebar.e-sidebar.e-open {
        width: min(232px, calc(100vw - 40px)) !important;
        visibility: visible;
    }
}