/*
 * Bosques de la Constanza — capa visual del administrador.
 *
 * Se carga después del tema Material y del CSS aislado para estilizar las
 * raíces renderizadas por RadzenLayout, RadzenHeader, RadzenSidebar y
 * RadzenBody. Los componentes conservan su comportamiento y accesibilidad.
 */

:root {
    --brand-950: #111113;
    --brand-900: #1b1b1e;
    --brand-800: #25252a;
    --brand-700: #ff2f5d;
    --brand-600: #ff456d;
    --brand-100: #ffdce5;
    --brand-50: #fff1f4;

    --sand-700: #d91f4b;
    --sand-500: #ff2f5d;
    --sand-200: #ffc1cf;
    --sand-100: #ffe5eb;
    --sand-50: #fff5f7;

    --terra-700: #a72a36;
    --terra-600: #c43a46;
    --terra-100: #fde8ea;

    --blue-700: #4a647d;
    --blue-100: #e7eff6;

    --canvas: #f7f6f4;
    --canvas-warm: #faf8f6;
    --surface: #ffffff;
    --surface-muted: #faf9f8;
    --ink: #1b1b1e;
    --ink-soft: #434248;
    --ink-muted: #737178;
    --border: #e7e3e0;
    --border-strong: #d8d2ce;

    --color-primary: var(--brand-700);
    --color-primary-strong: var(--brand-900);
    --color-primary-soft: var(--brand-50);
    --color-secondary: var(--blue-700);
    --color-accent: var(--brand-700);
    --color-accent-soft: var(--brand-100);
    --color-surface: var(--surface);
    --color-background: var(--canvas);
    --color-background-muted: #f0eeec;
    --color-navigation: var(--brand-950);
    --color-text: var(--ink);
    --color-text-muted: var(--ink-muted);
    --color-success: #2dbf72;
    --color-warning: #bf711e;
    --color-error: var(--terra-600);
    --color-info: var(--blue-700);
    --color-border: var(--border);

    --shadow-sm: 0 3px 12px rgb(27 27 30 / 6%);
    --shadow-md: 0 16px 42px rgb(27 27 30 / 10%);
    --shadow-navigation: 12px 0 34px rgb(0 0 0 / 18%);

    --rz-primary: var(--brand-700);
    --rz-primary-light: #ff6a8b;
    --rz-primary-lighter: var(--brand-100);
    --rz-primary-dark: #d91f4b;
    --rz-on-primary: #ffffff;
    --rz-secondary: var(--blue-700);
    --rz-on-secondary: #ffffff;
    --rz-info: var(--blue-700);
    --rz-success: #2dbf72;
    --rz-warning: #bf711e;
    --rz-danger: var(--terra-600);
    --rz-base-50: #faf9f8;
    --rz-base-100: #f4f2f0;
    --rz-base-200: #eae6e3;
    --rz-base-300: #dad5d1;
    --rz-base-400: #b5b0ad;
    --rz-base-500: #89858a;
    --rz-base-600: #66636a;
    --rz-base-700: #49474c;
    --rz-base-800: #303034;
    --rz-base-900: var(--ink);
    --rz-body-background-color: var(--canvas);
    --rz-text-color: var(--ink);
    --rz-text-title-color: var(--brand-900);
    --rz-border-normal: 1px solid var(--border-strong);
    --rz-border-hover: 1px solid #aaa4a1;
    --rz-border-focus: 1px solid var(--brand-700);
    --rz-input-border: var(--rz-border-normal);
    --rz-input-hover-border: var(--rz-border-hover);
    --rz-input-focus-border: var(--rz-border-focus);
    --rz-input-disabled-border: 1px solid #dedad7;
    --rz-form-field-shadow: inset 0 0 0 1px var(--border-strong);
    --rz-form-field-hover-shadow: inset 0 0 0 1px #aaa4a1;
    --rz-form-field-focus-shadow:
        0 0 0 3px rgb(255 47 93 / 15%),
        inset 0 0 0 1px var(--brand-700);
}

html,
body {
    background:
        radial-gradient(circle at 92% 8%, rgb(255 47 93 / 6%), transparent 25rem),
        var(--canvas);
    color: var(--ink);
    font-family: Aptos, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

/* Shell global: estas raíces pertenecen a componentes Radzen. */

.rz-layout.admin-shell {
    min-height: 100dvh;
    background: var(--canvas) !important;
}

.rz-header.topbar {
    height: 74px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: rgb(255 255 255 / 96%) !important;
    box-shadow: 0 7px 22px rgb(27 27 30 / 7%) !important;
    backdrop-filter: blur(16px);
}

.topbar::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-700), var(--sand-500) 52%, transparent 88%);
    content: "";
    opacity: .7;
}

.topbar .header-content {
    height: 100%;
    padding-inline: 22px 26px;
}

.topbar .rz-button.rz-variant-text.menu-toggle {
    display: inline-grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    place-items: center;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--brand-900) !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgb(27 27 30 / 20%) !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.topbar .rz-button.rz-variant-text.menu-toggle .rzi {
    margin: 0 !important;
    font-size: 23px !important;
}

.topbar .rz-button.rz-variant-text.menu-toggle:hover {
    background: var(--brand-700) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgb(255 47 93 / 24%) !important;
    transform: translateY(-1px);
}

.topbar .rz-button.rz-variant-text.menu-toggle:active {
    box-shadow: 0 4px 10px rgb(27 27 30 / 18%) !important;
    transform: translateY(0);
}

.topbar .rz-button.rz-variant-text.menu-toggle:focus-visible {
    outline: 3px solid rgb(255 47 93 / 28%);
    outline-offset: 2px;
}

.topbar .brand-symbol {
    display: grid !important;
    width: 42px;
    height: 42px;
    padding: 8px;
    place-items: center;
    border: 1px solid var(--brand-100);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(255 47 93 / 10%);
}

.topbar .brand-symbol img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar .brand-lockup {
    gap: 12px;
}

.topbar .brand-lockup strong {
    color: var(--brand-900);
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.005em;
}

.topbar .brand-lockup > div > span,
.topbar .user-summary span {
    color: var(--ink-muted);
}

.topbar .user-summary strong {
    color: var(--ink);
}

.topbar .rz-button.rz-variant-text {
    min-height: 40px !important;
    border: 1px solid transparent !important;
    color: var(--brand-900) !important;
    text-transform: none !important;
}

.topbar .rz-button.rz-variant-text:hover {
    border-color: var(--border) !important;
    background: var(--brand-50) !important;
}

.rz-sidebar.sidebar {
    width: 276px !important;
    padding: 18px 10px 24px !important;
    border: 0 !important;
    background:
        radial-gradient(circle at 10% 0%, rgb(255 47 93 / 12%), transparent 17rem),
        linear-gradient(180deg, #1a1a1d, #121214 58%, #0e0e10) !important;
    box-shadow: var(--shadow-navigation) !important;
}

.rz-sidebar.sidebar.rz-sidebar-expanded {
    width: 276px !important;
    opacity: 1;
    pointer-events: auto;
}

.rz-sidebar.sidebar.rz-sidebar-collapsed {
    width: 0 !important;
    padding-inline: 0 !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    box-shadow: none !important;
}
.sidebar nav {
    height: 100%;
    padding-right: 2px;
    overflow-y: auto;
    scrollbar-color: #4c4b51 transparent;
    scrollbar-width: thin;
}

.sidebar .rz-panel-menu,
.sidebar .rz-panel-menu-list,
.sidebar .rz-navigation-item,
.sidebar .rz-navigation-item-wrapper {
    border: 0 !important;
    background: transparent !important;
}

.sidebar .rz-navigation-item-link {
    min-height: 46px;
    margin: 3px 4px !important;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #d9d8dd !important;
    font-size: .88rem;
    font-weight: 650;
    text-transform: none;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.sidebar .rz-navigation-item-link .rzi,
.sidebar .rz-navigation-item-icon,
.sidebar .rz-navigation-item-link .rz-navigation-item-icon-children {
    color: #96949d !important;
}

.sidebar .rz-navigation-item-link:hover {
    border-color: rgb(255 255 255 / 10%) !important;
    background: rgb(255 255 255 / 8%) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

.sidebar .rz-navigation-item-link.rz-state-active,
.sidebar .rz-navigation-item-link.active {
    border-color: var(--brand-700) !important;
    background: var(--brand-700) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgb(255 47 93 / 20%);
}

.sidebar .rz-navigation-item-link.rz-state-active .rzi,
.sidebar .rz-navigation-item-link.active .rzi {
    color: #ffffff !important;
}

.sidebar .rz-navigation-item-wrapper-expanded > .rz-navigation-item-link {
    color: #ffffff !important;
}

.sidebar .rz-navigation-menu {
    padding-left: 8px !important;
}

.rz-body.content-body {
    background:
        radial-gradient(circle at 96% 1%, rgb(255 47 93 / 6%), transparent 29rem),
        linear-gradient(180deg, #faf9f7 0, var(--canvas) 300px) !important;
}

.content-body main {
    max-width: 1480px;
    padding: 34px 38px 54px;
}

/* Jerarquía de página */

.page-stack {
    gap: 18px !important;
}

.page-header {
    position: relative;
    min-height: 112px;
    margin: 0 !important;
    padding: 22px 24px 22px 28px;
    overflow: hidden;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 20%, rgb(195 138 57 / 13%), transparent 15rem),
        linear-gradient(130deg, #ffffff 0 67%, #f8f3e9);
    box-shadow: var(--shadow-sm);
}

.page-header::before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, var(--brand-700), var(--sand-500));
    content: "";
}

.page-header::after {
    position: absolute;
    right: -30px;
    bottom: -70px;
    width: 190px;
    height: 190px;
    border: 1px solid rgb(195 138 57 / 13%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.page-header h1 {
    color: var(--brand-900);
    font-size: clamp(1.8rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.page-header p {
    margin-top: 7px;
    color: var(--ink-muted);
    font-size: .98rem;
}

.page-header__actions {
    position: relative;
    z-index: 1;
}

/* Superficies y acciones Radzen */

.rz-card {
    border-color: var(--border) !important;
    border-radius: 15px !important;
    box-shadow: var(--shadow-sm) !important;
}

.rz-card:hover {
    border-color: var(--border-strong) !important;
}

.rz-button {
    border-radius: 10px !important;
    font-weight: 750 !important;
    text-transform: none !important;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined) {
    border-color: var(--brand-700) !important;
    background: linear-gradient(180deg, var(--brand-600), var(--brand-700)) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgb(31 106 85 / 20%) !important;
}

.rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):hover {
    border-color: var(--brand-900) !important;
    background: var(--brand-900) !important;
    box-shadow: 0 7px 17px rgb(18 61 51 / 24%) !important;
    transform: translateY(-1px);
}

.rz-button.rz-variant-outlined {
    border-color: #91aa9e !important;
    background: #ffffff !important;
    color: var(--brand-900) !important;
}

.rz-button.rz-variant-outlined:hover {
    border-color: var(--brand-700) !important;
    background: var(--brand-50) !important;
}

.rz-button.rz-danger.rz-variant-text,
.rz-button.rz-danger.rz-variant-outlined {
    color: var(--terra-700) !important;
}

.rz-button.rz-danger.rz-variant-text:hover {
    background: var(--terra-100) !important;
}

:where(
    .rz-textbox,
    .rz-textarea,
    .rz-inputtext,
    .rz-dropdown,
    .rz-multiselect,
    .rz-numeric,
    .rz-datepicker,
    .rz-password
) {
    border: var(--rz-border-normal) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--ink) !important;
}

:where(.rz-textbox, .rz-textarea, .rz-inputtext)::placeholder {
    color: #66776e;
    opacity: 1;
}


:where(
    .rz-textbox,
    .rz-textarea,
    .rz-inputtext,
    .rz-dropdown,
    .rz-multiselect,
    .rz-numeric,
    .rz-datepicker,
    .rz-password
):not(.rz-state-disabled):not(:disabled):hover {
    border: var(--rz-border-hover) !important;
}

.rz-textbox:focus,
.rz-textarea:focus,
.rz-inputtext:focus,
.rz-dropdown:focus-within,
.rz-multiselect:focus-within,
.rz-numeric:focus-within,
.rz-datepicker:focus-within,
.rz-password:focus-within {
    border: var(--rz-border-focus) !important;
    box-shadow: 0 0 0 3px rgb(31 106 85 / 15%) !important;
    outline: none !important;
}
/* Radzen reutiliza .rz-inputtext en la etiqueta interna del dropdown.
   El contorno pertenece únicamente al control exterior. */
.rz-dropdown > .rz-dropdown-label.rz-inputtext {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.rz-form-field.rz-variant-outlined .rz-form-field-content {
    min-height: 46px;
    border: 0 !important;
    border-radius: 10px !important;
    background: #ffffff;
    box-shadow: var(--rz-form-field-shadow) !important;
}

.rz-form-field.rz-variant-outlined:not(.rz-state-disabled):hover .rz-form-field-content {
    box-shadow: var(--rz-form-field-hover-shadow) !important;
}

.rz-form-field.rz-variant-outlined.rz-state-focused .rz-form-field-content,
.rz-form-field.rz-variant-outlined:focus-within .rz-form-field-content {
    box-shadow: var(--rz-form-field-focus-shadow) !important;
}

.rz-form-field.rz-variant-outlined.rz-state-disabled .rz-form-field-content {
    background: #f3f6f4 !important;
    box-shadow: inset 0 0 0 1px #d5dfd9 !important;
}

.rz-form-field.rz-variant-outlined:has(.invalid) .rz-form-field-content {
    box-shadow: inset 0 0 0 1px var(--terra-600) !important;
}

.rz-form-field.rz-variant-outlined.rz-state-focused:has(.invalid) .rz-form-field-content,
.rz-form-field.rz-variant-outlined:focus-within:has(.invalid) .rz-form-field-content {
    box-shadow:
        0 0 0 3px rgb(172 81 64 / 14%),
        inset 0 0 0 1px var(--terra-600) !important;
}

.rz-form-field.rz-variant-outlined .rz-form-field-content :where(
    .rz-textbox,
    .rz-textarea,
    .rz-inputtext,
    .rz-dropdown,
    .rz-multiselect,
    .rz-numeric,
    .rz-datepicker,
    .rz-password
) {
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rz-form-field-label {
    color: var(--ink-soft) !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
}

.rz-dropdown-panel,
.rz-popup {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
}

/* Toolbar de listados */

.list-toolbar {
    padding: 16px 18px !important;
    border-color: var(--border) !important;
    background:
        linear-gradient(180deg, #ffffff, #fbfcfb) !important;
    box-shadow: 0 4px 16px rgb(18 61 51 / 6%) !important;
}

.list-toolbar > .rz-stack {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 16px !important;
    align-items: end !important;
}

.list-toolbar__search {
    width: 100%;
    max-width: none;
}

.list-toolbar__filters {
    width: auto;
    min-width: 220px;
    align-items: end !important;
    justify-content: flex-end !important;
}

.list-toolbar__filter {
    width: min(280px, 100%);
}

.list-toolbar__filter .rz-dropdown {
    width: 100% !important;
}

/* Estados vacíos */

.empty-state {
    position: relative;
    min-height: 238px;
    padding: 38px 24px !important;
    overflow: hidden;
    border-style: solid !important;
    background:
        radial-gradient(circle at 80% 10%, rgb(195 138 57 / 10%), transparent 15rem),
        linear-gradient(145deg, #ffffff, #f8faf8) !important;
    box-shadow: var(--shadow-sm) !important;
}

.empty-state::before,
.empty-state::after {
    position: absolute;
    border: 1px solid rgb(31 106 85 / 7%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.empty-state::before {
    top: -60px;
    left: -45px;
    width: 160px;
    height: 160px;
}

.empty-state::after {
    right: -75px;
    bottom: -110px;
    width: 230px;
    height: 230px;
}

.empty-state > * {
    position: relative;
    z-index: 1;
}

.empty-state__icon {
    display: grid !important;
    width: 68px;
    height: 68px;
    margin: 0 0 16px !important;
    place-items: center;
    border: 1px solid var(--sand-200);
    border-radius: 19px;
    background: linear-gradient(145deg, #fffaf1, var(--sand-100));
    color: var(--sand-700) !important;
    font-size: 35px !important;
    box-shadow: inset 0 1px 0 #ffffff;
}

.empty-state .rz-text-h5 {
    color: var(--brand-900) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
}

.empty-state .muted {
    max-width: 520px;
    color: var(--ink-muted) !important;
}

.empty-state .rz-button {
    margin-top: 18px;
}

.grid-primary {
    color: var(--brand-900);
    font-weight: 800;
    line-height: 1.25;
}

.grid-secondary {
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: .8rem;
    line-height: 1.25;
}

.vehicles-grid .plate {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid var(--sand-200);
    border-radius: 8px;
    background: var(--sand-100);
    color: var(--sand-700);
    font-size: .82rem;
    letter-spacing: .055em;
}
/* Tablas Radzen */

.rz-data-grid {
    border-color: var(--border) !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 18px rgb(18 61 51 / 7%) !important;
}

.rz-grid-table th {
    height: 54px !important;
    border-color: var(--border) !important;
    background: linear-gradient(180deg, var(--brand-50), #e8f2ed) !important;
    color: var(--brand-900) !important;
}

.rz-grid-table td {
    min-height: 52px;
    border-color: #eaf0ec !important;
    color: var(--ink-soft) !important;
}

.rz-grid-table tbody tr:nth-child(even) td {
    background: #fcfdfc;
}

.rz-grid-table tbody tr:hover td {
    background: #f0f7f3 !important;
}

.rz-column-title {
    color: var(--brand-900);
    font-size: .78rem;
    font-weight: 800 !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.rz-paginator {
    min-height: 58px !important;
    border-color: var(--border) !important;
    background: #ffffff !important;
    color: var(--ink-muted);
}

.rz-paginator-page.rz-state-active {
    background: var(--brand-700) !important;
    color: #ffffff !important;
}

.rz-badge {
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: .74rem !important;
    font-weight: 800 !important;
}

.rz-badge-success {
    background: #dff1e8 !important;
    color: #155b40 !important;
}

.rz-badge-warning {
    background: var(--sand-100) !important;
    color: var(--sand-700) !important;
}

.rz-badge-danger {
    background: var(--terra-100) !important;
    color: var(--terra-700) !important;
}

.rz-badge-info {
    background: var(--blue-100) !important;
    color: var(--blue-700) !important;
}

.rz-badge-light {
    background: #edf1ef !important;
    color: #53635b !important;
}

.plate {
    border-color: #b6c4bc;
    background: linear-gradient(180deg, #ffffff, #f2f5f3);
    color: var(--brand-900);
    box-shadow: inset 0 0 0 2px #ffffff;
}

/* Diálogos, notificaciones y pestañas */

.rz-dialog {
    border: 1px solid var(--border) !important;
    box-shadow: 0 24px 80px rgb(8 43 35 / 24%) !important;
}

.rz-dialog-titlebar {
    border-bottom-color: var(--border) !important;
    background:
        linear-gradient(100deg, #ffffff, var(--brand-50)) !important;
}

.rz-dialog-title {
    color: var(--brand-900) !important;
    font-weight: 800 !important;
}

.rz-tabview-nav {
    border-bottom: 1px solid var(--border) !important;
}

.rz-tabview-selected {
    color: var(--brand-800) !important;
}

.rz-notification-item {
    border-radius: 13px !important;
    box-shadow: var(--shadow-md) !important;
}

/* Dashboard y login */

.metric-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--metric-accent, var(--brand-700)) 16%, var(--border)) !important;
    background: linear-gradient(145deg, #ffffff 0 72%, color-mix(in srgb, var(--metric-accent, var(--brand-700)) 7%, #fff)) !important;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.metric-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: inherit;
    background: var(--metric-accent, var(--brand-700));
    content: "";
}

.metric-card::after {
    position: absolute;
    top: -38px;
    right: -38px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--metric-accent, var(--brand-700)) 8%, transparent);
    content: "";
    pointer-events: none;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgb(27 27 30 / 10%) !important;
}

.metric-card__icon {
    box-shadow: 0 8px 18px rgb(27 27 30 / 14%);
}

/* Centro de notificaciones administrativas */

.notification-trigger {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.topbar .notification-trigger__button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 13px !important;
    background: var(--surface) !important;
    color: var(--brand-900) !important;
    box-shadow: var(--shadow-sm) !important;
}

.topbar .notification-trigger__button:hover {
    border-color: #a9c3b7 !important;
    background: var(--brand-50) !important;
}

.notification-trigger__badge {
    position: absolute !important;
    top: -5px;
    right: -5px;
    z-index: 2;
    min-width: 21px;
    height: 21px;
    padding: 0 5px !important;
    border: 2px solid var(--surface);
    border-radius: 999px !important;
    pointer-events: none;
    font-size: .68rem !important;
    line-height: 17px !important;
    text-align: center;
}

.admin-notification-tray {
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    background: var(--canvas) !important;
    box-shadow: 0 28px 80px rgb(11 45 38 / 24%) !important;
}

.admin-notification-tray .rz-dialog-titlebar,
.admin-notification-tray .rz-dialog-side-titlebar {
    min-height: 72px;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--border) !important;
    background:
        radial-gradient(circle at 82% 10%, rgb(195 138 57 / 14%), transparent 11rem),
        var(--surface) !important;
}

.admin-notification-tray .rz-dialog-title,
.admin-notification-tray .rz-dialog-side-title {
    color: var(--brand-900) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
}

.admin-notification-tray__content {
    padding: 18px !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at 100% 0, rgb(195 138 57 / 7%), transparent 18rem),
        var(--canvas) !important;
}

.notification-center__summary {
    padding: 16px !important;
    border: 1px solid var(--border) !important;
    border-radius: 15px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

.notification-center__summary-icon,
.notification-item__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--brand-800);
}

.notification-center__summary-icon {
    width: 44px;
    height: 44px;
    border: 1px solid #cce0d6;
    border-radius: 13px;
    background: var(--brand-50);
    font-size: 23px;
}

.notification-list {
    display: grid;
    gap: 10px;
    padding-block: 4px 2px;
}

.notification-item {
    position: relative;
    padding: 15px !important;
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

.notification-item::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: transparent;
    content: "";
}

.notification-item--unread {
    border-color: #bfd8cc !important;
    background: linear-gradient(135deg, #ffffff, var(--brand-50)) !important;
}

.notification-item--unread::before {
    background: linear-gradient(180deg, var(--brand-600), var(--sand-500));
}

.notification-item__icon {
    width: 38px;
    height: 38px;
    border: 1px solid #cfe1d8;
    border-radius: 11px;
    background: var(--brand-50);
    font-size: 20px;
}

.notification-item__content {
    min-width: 0;
    flex: 1 1 auto;
}

.notification-item__title {
    color: var(--brand-900) !important;
    font-weight: 800 !important;
}

.notification-item__message {
    color: var(--ink-soft) !important;
    line-height: 1.45 !important;
}

.notification-item__time {
    color: var(--ink-muted);
    font-size: .76rem;
}

.notification-item__actions {
    margin-top: 7px;
    padding-top: 9px;
    border-top: 1px solid #e8eee9;
}

.notification-item__new {
    flex: 0 0 auto;
}

.notification-empty {
    margin-top: 4px;
    padding: 38px 22px !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: 15px !important;
    background: rgb(255 255 255 / 72%) !important;
    text-align: center;
    box-shadow: none !important;
}

.notification-empty__icon {
    display: grid !important;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: var(--brand-50);
    color: var(--brand-700) !important;
    font-size: 28px !important;
}
.login-page {
    background:
        radial-gradient(circle at 12% 14%, rgb(255 47 93 / 16%), transparent 27rem),
        radial-gradient(circle at 92% 86%, rgb(255 47 93 / 10%), transparent 24rem),
        #141416 !important;
}

.login-card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 1100px) {
    .rz-sidebar.sidebar {
        position: fixed !important;
        top: 74px !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1050 !important;
        height: calc(100dvh - 74px) !important;
    }

    .rz-header.topbar {
        position: sticky !important;
        top: 0;
        z-index: 1100;
    }

    .content-body main {
        padding: 28px 24px 44px;
    }
}

@media (max-width: 760px) {
    .topbar-actions {
        gap: 4px !important;
    }

    .admin-notification-tray {
        width: 100vw !important;
        max-width: none !important;
    }

    .admin-notification-tray__content {
        padding: 14px !important;
    }

    .notification-center__summary > .rz-stack {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .notification-center__summary .rz-button {
        width: 100%;
    }

    .notification-item__actions {
        align-items: stretch !important;
        flex-direction: column-reverse !important;
    }

    .notification-item__actions .rz-button {
        width: 100%;
        min-height: 44px;
    }

    .rz-header.topbar {
        height: 66px !important;
    }

    .topbar .header-content {
        padding-inline: 12px;
    }

    .topbar .user-summary,
    .topbar .rz-button-text,
    .topbar .brand-lockup > div > span {
        display: none !important;
    }

    .topbar .rz-button {
        width: 42px !important;
        min-width: 42px !important;
        padding-inline: 0 !important;
    }

    .topbar .brand-symbol {
        width: 38px;
        height: 38px;
        padding: 7px;
        border-radius: 11px;
    }

    .rz-sidebar.sidebar {
        top: 66px !important;
        height: calc(100dvh - 66px) !important;
    }

    .rz-sidebar.sidebar.rz-sidebar-expanded {
        width: min(88vw, 304px) !important;
        transform: translateX(0);
    }

    .rz-sidebar.sidebar.rz-sidebar-collapsed {
        width: 0 !important;
        transform: translateX(-100%);
    }

    .content-body main {
        min-height: calc(100dvh - 66px);
        padding: 20px 14px 34px;
    }

    .page-header {
        min-height: 0;
        padding: 20px 18px 20px 22px;
        align-items: stretch;
    }

    .page-header__actions,
    .page-header__actions > .rz-button {
        width: 100%;
    }

    .list-toolbar > .rz-stack {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch !important;
    }

    .list-toolbar__filters,
    .list-toolbar__filter {
        width: 100%;
        min-width: 0;
    }

    .empty-state {
        min-height: 220px;
        padding: 32px 18px !important;
    }

    .empty-state__icon {
        width: 60px;
        height: 60px;
        border-radius: 17px;
        font-size: 31px !important;
    }
}

@media (max-width: 380px) {
    .topbar .brand-lockup {
        display: none !important;
    }
}
@media (max-width: 460px) {
    .topbar .brand-icon {
        display: none !important;
    }

    .topbar .brand-lockup strong {
        max-width: 145px;
        font-size: .86rem;
    }

    .page-header h1 {
        font-size: 1.65rem;
    }
}

@media print {
    body,
    .rz-layout.admin-shell,
    .rz-body.content-body,
    .rz-body.content-body main {
        min-height: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .rz-card.receipt {
        max-width: none !important;
        border: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar .rz-navigation-item-link,
    .rz-button {
        transition: none !important;
    }
}