:root {
    --shell-bg: #eef3f8;
    --panel-bg: #ffffff;
    --grid-row-even: var(--panel-bg);
    --grid-row-odd: #f4f8fc;
    --grid-row-hot: color-mix(in srgb, var(--accent) 14%, var(--panel-bg));
    --grid-row-selected: color-mix(in srgb, var(--accent) 26%, var(--panel-bg));
    --grid-row-selected-focus: color-mix(in srgb, var(--accent) 34%, var(--panel-bg));
    --line: #d5dee8;
    --line-strong: #b8c5d2;
    --text: #172033;
    --muted: #617186;
    --nav-bg: #f9fbfd;
    --nav-active: #dfeaf6;
    --nav-hover: #eef4fa;
    --accent: #2d6f96;
    --accent-strong: #1f5777;
    --accent-soft: #e6f1f8;
    --brand-gold: #f0c56d;
    --warning: #9c6b18;
    --danger: #9a3d3d;
    --ok: #2f7457;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background:
        linear-gradient(180deg, #f7fafd 0, var(--shell-bg) 280px),
        var(--shell-bg);
}

a {
    color: inherit;
}

.dx-icon-refresh,
.dx-icon-add,
.dx-icon-open,
.dx-icon-columnchooser,
.dx-icon-exportxlsx,
.dx-icon-close,
.dx-icon-cancel,
.dx-icon-money,
.dx-icon-print,
.dx-icon-coffee,
.dx-icon-event,
.dx-icon-preferences,
.dx-icon-search,
.dx-icon-trash,
.dx-icon-save,
.dx-icon-codefile,
.dx-icon-folder,
.dx-icon-today,
.dx-icon-user,
.dx-icon-tel,
.dx-icon-arrivals,
.dx-icon-departures,
.dx-icon-presences,
.dx-icon-chevron-down {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex: 0 0 16px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.dx-icon-refresh {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.45 5.08h-2.13A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h8V3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.45 5.08h-2.13A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h8V3z'/%3E%3C/svg%3E");
}

.dx-icon-add {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
}

.dx-icon-open {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14zM5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14zM5 5h6v2H7v10h10v-4h2v6H5z'/%3E%3C/svg%3E");
}

.dx-icon-columnchooser {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3zm2 2v10h3V7zm5 0v10h4V7zm6 0v10h3V7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3zm2 2v10h3V7zm5 0v10h4V7zm6 0v10h3V7z'/%3E%3C/svg%3E");
}

.dx-icon-exportxlsx {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h10l4 4v14H5zm9 1.5V8h3.5zM8 12l2.2 3L8 18h2.2l1.1-1.6 1.1 1.6h2.2l-2.2-3 2.2-3h-2.2l-1.1 1.6-1.1-1.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h10l4 4v14H5zm9 1.5V8h3.5zM8 12l2.2 3L8 18h2.2l1.1-1.6 1.1 1.6h2.2l-2.2-3 2.2-3h-2.2l-1.1 1.6-1.1-1.6z'/%3E%3C/svg%3E");
}

.dx-icon-close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.3 5.71-1.41-1.42L12 9.17 7.11 4.29 5.7 5.71 10.59 10.6 5.7 15.49l1.41 1.42L12 12.02l4.89 4.89 1.41-1.42-4.89-4.89z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.3 5.71-1.41-1.42L12 9.17 7.11 4.29 5.7 5.71 10.59 10.6 5.7 15.49l1.41 1.42L12 12.02l4.89 4.89 1.41-1.42-4.89-4.89z'/%3E%3C/svg%3E");
}

.dx-icon-cancel {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7h7a5 5 0 1 1 0 10H9v-2h5a3 3 0 1 0 0-6H7.8l3.1 3.1L9.5 13.5 4 8l5.5-5.5 1.4 1.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7h7a5 5 0 1 1 0 10H9v-2h5a3 3 0 1 0 0-6H7.8l3.1 3.1L9.5 13.5 4 8l5.5-5.5 1.4 1.4z'/%3E%3C/svg%3E");
}

.dx-icon-money {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18v12H3zm2 2v8h14V8zm7 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6M6 10h2v2H6zm10 2h2v2h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18v12H3zm2 2v8h14V8zm7 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6M6 10h2v2H6zm10 2h2v2h-2z'/%3E%3C/svg%3E");
}

.dx-icon-print {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12v5H6zm-2 7h16a2 2 0 0 1 2 2v5h-4v4H6v-4H2v-5a2 2 0 0 1 2-2m4 7v2h8v-5H8zm11-4.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12v5H6zm-2 7h16a2 2 0 0 1 2 2v5h-4v4H6v-4H2v-5a2 2 0 0 1 2-2m4 7v2h8v-5H8zm11-4.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E");
}

.dx-icon-coffee {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h12v7a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zm14 2h1a3 3 0 0 1 0 6h-1v-2h1a1 1 0 0 0 0-2h-1zM3 20h16v2H3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h12v7a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zm14 2h1a3 3 0 0 1 0 6h-1v-2h1a1 1 0 0 0 0-2h-1zM3 20h16v2H3z'/%3E%3C/svg%3E");
}

.dx-icon-event,
.dx-icon-today {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3zm-1 8v10h12V10zm2 2h3v3H8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3zm-1 8v10h12V10zm2 2h3v3H8z'/%3E%3C/svg%3E");
}

.dx-icon-arrivals {
    background-color: #2f7457;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v12.2l5.6-5.6L20 12l-8 8-8-8 1.4-1.4 5.6 5.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v12.2l5.6-5.6L20 12l-8 8-8-8 1.4-1.4 5.6 5.6z'/%3E%3C/svg%3E");
}

.dx-icon-departures {
    background-color: #c33a3a;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 20h-2V7.8l-5.6 5.6L4 12l8-8 8 8-1.4 1.4L13 7.8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 20h-2V7.8l-5.6 5.6L4 12l8-8 8 8-1.4 1.4L13 7.8z'/%3E%3C/svg%3E");
}

.dx-icon-presences {
    background-color: #d4a400;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11h16v2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11h16v2H4z'/%3E%3C/svg%3E");
}

.dx-icon-preferences {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65-2-3.46-2.49 1a7.3 7.3 0 0 0-1.69-.98L15 3h-4l-.36 2.93c-.61.24-1.18.56-1.69.98l-2.49-1-2 3.46 2.11 1.65c-.04.32-.07.65-.07.98s.02.66.07.98l-2.11 1.65 2 3.46 2.49-1c.51.4 1.08.73 1.69.98L11 21h4l.36-2.93c.61-.24 1.18-.56 1.69-.98l2.49 1 2-3.46zM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65-2-3.46-2.49 1a7.3 7.3 0 0 0-1.69-.98L15 3h-4l-.36 2.93c-.61.24-1.18.56-1.69.98l-2.49-1-2 3.46 2.11 1.65c-.04.32-.07.65-.07.98s.02.66.07.98l-2.11 1.65 2 3.46 2.49-1c.51.4 1.08.73 1.69.98L11 21h4l.36-2.93c.61-.24 1.18-.56 1.69-.98l2.49 1 2-3.46zM13 15.5A3.5 3.5 0 1 1 13 8a3.5 3.5 0 0 1 0 7.5'/%3E%3C/svg%3E");
}

.dx-icon-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 3a6.5 6.5 0 0 1 5.18 10.43l5.45 5.44-1.42 1.42-5.44-5.45A6.5 6.5 0 1 1 9.5 3m0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 3a6.5 6.5 0 0 1 5.18 10.43l5.45 5.44-1.42 1.42-5.44-5.45A6.5 6.5 0 1 1 9.5 3m0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9'/%3E%3C/svg%3E");
}

.dx-icon-trash {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V7H6zM8 4l1-1h6l1 1h4v2H4V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V7H6zM8 4l1-1h6l1 1h4v2H4V4z'/%3E%3C/svg%3E");
}

.dx-icon-save {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7zm-5 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6M6 5h9v4H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7zm-5 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6M6 5h9v4H6z'/%3E%3C/svg%3E");
}

.dx-icon-codefile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm-1 1.5L18.5 9H13zM9.4 17.6 6.8 15l2.6-2.6 1.4 1.4L9.6 15l1.2 1.2zm5.2 0-1.4-1.4 1.2-1.2-1.2-1.2 1.4-1.4 2.6 2.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm-1 1.5L18.5 9H13zM9.4 17.6 6.8 15l2.6-2.6 1.4 1.4L9.6 15l1.2 1.2zm5.2 0-1.4-1.4 1.2-1.2-1.2-1.2 1.4-1.4 2.6 2.6z'/%3E%3C/svg%3E");
}

.dx-icon-folder {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4 12 6h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM4 8v10h16V8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4 12 6h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM4 8v10h16V8z'/%3E%3C/svg%3E");
}

.dx-icon-user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0h2a6 6 0 0 1 12 0zM12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0h2a6 6 0 0 1 12 0zM12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8'/%3E%3C/svg%3E");
}

.dx-icon-tel {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79a15.1 15.1 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79a15.1 15.1 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02z'/%3E%3C/svg%3E");
}

.dx-icon-chevron-down {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
}

.app-shell {
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    transition: grid-template-columns 160ms ease;
}

.app-shell.is-collapsed {
    grid-template-columns: 82px minmax(0, 1fr);
}

.sidebar {
    background: var(--nav-bg);
    color: var(--text);
    overflow-y: auto;
    border-right: 1px solid var(--line);
    box-shadow: 10px 0 28px rgba(41, 63, 88, 0.08);
}

.brand-row {
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand-gold);
    color: #172033;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(103, 78, 17, 0.12);
}

.brand-text {
    display: grid;
    min-width: 0;
}

.brand-text span {
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-toggle {
    min-width: 34px;
    height: 34px;
}

.is-collapsed .brand-row {
    grid-template-columns: 42px;
    grid-template-rows: auto auto;
    justify-content: center;
    justify-items: center;
    gap: 8px;
}

.is-collapsed .brand-text {
    display: none;
}

.nav-group {
    padding: 14px 10px 6px;
}

.nav-group-title {
    min-height: 20px;
    padding: 0 10px 7px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.nav-link {
    min-height: 38px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    border-radius: 7px;
    color: var(--text);
    text-decoration: none;
}

.nav-link:hover {
    background: var(--nav-hover);
    color: var(--accent-strong);
}

.nav-link.active {
    background: var(--nav-active);
    color: var(--accent-strong);
    box-shadow: inset 3px 0 0 var(--accent);
}

.nav-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #eef3f8;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.nav-link.active .nav-icon {
    background: #ffffff;
    color: var(--accent-strong);
}

.is-collapsed .nav-link {
    grid-template-columns: 34px;
    justify-content: center;
}

.is-collapsed .nav-text {
    display: none;
}

.workspace {
    min-width: 0;
    min-height: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.top-bar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(41, 63, 88, 0.06);
}

.top-bar h1,
.page-heading h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
}

.top-bar h1:focus,
.page-heading h2:focus,
.login-brand-panel h1:focus {
    outline: none;
}

.eyebrow {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.top-actions,
.heading-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hotel-context {
    min-width: 180px;
    display: grid;
    justify-items: end;
    gap: 1px;
    padding: 2px 6px;
}

.hotel-context span {
    color: var(--muted);
    font-size: 0.72rem;
}

.hotel-context strong {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 650;
}

.hotel-switcher {
    display: grid;
    grid-template-columns: minmax(180px, 240px) auto auto;
    gap: 6px;
    align-items: center;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 22% 18%, rgba(45, 111, 150, 0.14), transparent 32%),
        linear-gradient(135deg, #f8fbfe 0, #e7eef6 100%);
}

.login-window {
    width: min(760px, 96vw);
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1fr);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(41, 63, 88, 0.22);
}

.login-brand-panel {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: 30px;
    background: linear-gradient(160deg, #215f82 0, #2d6f96 64%, #6f879a 100%);
    color: #ffffff;
}

.login-brand-panel .eyebrow {
    color: rgba(255, 255, 255, 0.76);
}

.login-brand-panel h1 {
    margin: 0;
    color: #ffffff;
    font-size: 1.72rem;
    font-weight: 700;
}

.login-brand-panel p {
    max-width: 280px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.35;
}

.login-brand-mark {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-gold);
    color: #172033;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(103, 78, 17, 0.18), 0 12px 28px rgba(10, 25, 40, 0.22);
}

.login-form {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 34px;
}

.login-form label {
    display: grid;
    gap: 5px;
}

.login-form label > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.login-password {
    min-height: 38px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
}

.login-password:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    outline: none;
}

.login-message {
    padding: 9px 10px;
    border: 1px solid #d7b56d;
    background: #fff7e6;
    color: #6e4e10;
    font-size: 0.86rem;
}

.login-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.content {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 22px 22px;
    background: var(--shell-bg);
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 0 2px;
}

.module-placeholder p {
    color: var(--muted);
}

.reservation-management-summary {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.reservation-management-summary > div {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.reservation-management-summary span {
    color: var(--muted);
    font-size: 0.78rem;
}

.reservation-management-summary strong {
    margin-top: 4px;
    color: var(--text);
}

.reservation-management-module {
    margin-top: 0;
}

.reservation-account-document {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
    padding-right: 4px;
    padding-bottom: 16px;
}

.account-total-band {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}

.account-total-band > div {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.account-total-band span {
    color: var(--muted);
    font-size: 0.78rem;
}

.account-total-band strong {
    margin-top: 4px;
    color: var(--text);
    font-size: 1.05rem;
}

.account-total-band .account-due-total {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.account-total-band .account-due-total strong {
    color: var(--accent-strong);
    font-size: 1.22rem;
}

.account-section {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    overflow: visible;
}

.account-section h3 {
    margin: 0;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-header);
    font-size: 0.95rem;
}

.account-invoice-section {
    break-inside: avoid;
}

.account-invoice-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.92rem;
}

.account-invoice-table th,
.account-invoice-table td {
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    vertical-align: top;
}

.account-invoice-table th {
    color: var(--muted);
    font-weight: 700;
    text-align: left;
    background: color-mix(in srgb, var(--panel-header) 68%, var(--surface));
}

.account-invoice-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--shell-bg) 65%, var(--surface));
}

.account-invoice-table .numeric {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.account-invoice-table .strong {
    font-weight: 700;
}

.account-invoice-table tfoot td {
    border-bottom: 0;
    background: var(--panel-header);
    font-weight: 800;
}

.empty-account-line {
    color: var(--muted);
    text-align: center;
}

@media (max-width: 1100px) {
    .reservation-management-summary {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .account-total-band {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

.data-alert {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #d7b56d;
    border-radius: 8px;
    background: #fff7e6;
    color: #6e4e10;
}

.analysis-datebar {
    display: flex;
    align-items: end;
    gap: 10px;
}

.analysis-page {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.analysis-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px;
}

.analysis-kpi,
.analysis-panel {
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(41, 63, 88, 0.08);
}

.analysis-kpi {
    padding: 16px 18px;
}

.analysis-kpi span,
.analysis-panel-header span,
.analysis-revenue-list span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.analysis-kpi strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 1.9rem;
    line-height: 1;
}

.action-kpi {
    cursor: default;
}

.analysis-main-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) repeat(2, minmax(220px, 0.9fr));
    gap: 14px;
}

.analysis-panel {
    padding: 16px;
}

.analysis-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.analysis-panel-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.analysis-revenue-list {
    display: grid;
    gap: 8px;
}

.analysis-revenue-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.analysis-revenue-list > div:last-child {
    border-bottom: 0;
}

.analysis-revenue-list strong {
    font-size: 1.05rem;
}

.analysis-total {
    margin-top: 2px;
}

.analysis-total strong {
    color: var(--accent);
    font-size: 1.45rem;
}

.analysis-gauge-panel {
    min-height: 228px;
}

.analysis-meter {
    --meter-angle: -120deg;
    position: relative;
    width: min(210px, 100%);
    aspect-ratio: 2 / 1;
    margin: 22px auto 8px;
    overflow: hidden;
    border-radius: 210px 210px 0 0;
    background:
        conic-gradient(from 270deg at 50% 100%, #81b29a 0deg, #f2cc8f 120deg, #e07a5f 240deg, transparent 0),
        color-mix(in srgb, var(--accent) 8%, white);
}

.analysis-meter::after {
    content: "";
    position: absolute;
    inset: 32px 32px 0;
    border-radius: 160px 160px 0 0;
    background: var(--panel-bg);
}

.analysis-meter span {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 800;
}

.analysis-meter-needle {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 84%;
    border-radius: 99px;
    background: #1f2937;
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(var(--meter-angle));
}

.analysis-meter-needle::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1f2937;
    transform: translateX(-50%);
}

.analysis-gauge-panel p {
    margin: 8px 0 0;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
}

.analysis-chart-panel {
    min-height: 390px;
}

.module-placeholder {
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.tableau-page {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scheduler-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(41, 63, 88, 0.08);
}

.scheduler-scroll-host {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.scheduler-scroll-surface {
    min-width: 4390px;
    height: 100%;
    min-height: 100%;
}

.hotel-scheduler {
    height: 100%;
    width: 100%;
}

.hotel-scheduler .dxbl-sc-apt-template {
    width: 100%;
    height: 100%;
    min-width: 0;
}

.hotel-scheduler .dxbl-sc-horizontal-apt {
    margin-top: 7px !important;
}

.hotel-scheduler .scheduler-floor-0 {
    background-color: #fff8df !important;
}

.hotel-scheduler .scheduler-floor-1 {
    background-color: #eaf7ef !important;
}

.hotel-scheduler .scheduler-floor-2 {
    background-color: #eaf3fb !important;
}

.hotel-scheduler .scheduler-floor-3 {
    background-color: #f7edf9 !important;
}

.hotel-scheduler .scheduler-floor-4 {
    background-color: #fff0e8 !important;
}

.hotel-scheduler .scheduler-floor-5 {
    background-color: #edf8f8 !important;
}

.hotel-scheduler .scheduler-floor-6 {
    background-color: #f4f1e9 !important;
}

.hotel-scheduler .scheduler-floor-7 {
    background-color: #f0f6e8 !important;
}

.scheduler-resource-header {
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 8px;
    box-sizing: border-box;
}

.scheduler-resource-caption {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fake-room-badge {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #7e3ff2;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.treatment-color-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.treatment-color-swatch {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid #8b95a1;
    border-radius: 3px;
}

.treatment-color-swatch-large {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
}

.scheduler-reservation-slot {
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
}

.scheduler-reservation {
    width: 100%;
    max-width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    overflow: hidden;
    border-radius: 6px;
    box-sizing: border-box;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(28, 39, 50, 0.14);
}

.scheduler-reservation span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(22, 33, 45, 0.38);
}

.reservation-sheet {
    width: min(1320px, 98vw);
    max-height: min(760px, 94vh);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: auto;
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 22px 60px rgba(22, 33, 45, 0.28);
}

.reservation-window-title {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    font-weight: 600;
}

.window-close-button {
    width: 34px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.window-close-button:hover {
    background: #e81123;
    color: #ffffff;
}

.window-close-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.reservation-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfd;
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.sheet-header h3 {
    margin: 0;
    font-size: 1.15rem;
}

.sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sheet-grid > div,
.sheet-notes > div {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.sheet-grid span,
.sheet-notes span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sheet-grid strong,
.sheet-notes p {
    margin: 0;
    overflow-wrap: anywhere;
}

.sheet-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sheet-loading {
    min-height: 160px;
    display: grid;
    place-items: center;
    color: var(--muted);
}

.customer-window {
    width: min(1120px, 98vw);
    max-height: min(700px, 96vh);
    display: grid;
    grid-template-rows: 30px minmax(0, 1fr) 50px;
    overflow: hidden;
    border: 1px solid #aeb7c2;
    border-radius: 3px;
    background: #f6f6f6;
    box-shadow: 0 22px 60px rgba(22, 33, 45, 0.28);
}

.customer-window-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    border-bottom: 1px solid #cfd5dc;
    background: #ffffff;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
}

.customer-form-body {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    overflow: auto;
}

.customer-form-group {
    min-width: 0;
    border: 1px solid #cfd5dc;
    background: #ffffff;
}

.customer-form-group h4 {
    margin: 0;
    padding: 5px 10px;
    background: #e6e6e6;
    color: #111827;
    font-size: 0.8rem;
    font-weight: 700;
}

.customer-group-content {
    padding: 12px;
}

.customer-main-grid,
.customer-contact-grid,
.customer-extra-grid {
    display: grid;
    grid-template-columns: 74px repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.customer-contact-grid {
    grid-template-columns: 74px repeat(10, minmax(0, 1fr));
}

.customer-extra-grid {
    grid-template-columns: 74px repeat(8, minmax(0, 1fr));
}

.customer-group-icon {
    grid-row: span 4;
    min-height: 82px;
    display: grid;
    place-items: center;
    border: 1px solid #d6dce4;
    background: #f8fafc;
    color: #6b7280;
}

.customer-group-icon.tall {
    grid-row: span 2;
}

.customer-group-icon .dx-icon-user,
.customer-group-icon .dx-icon-tel,
.customer-group-icon .dx-icon-preferences {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    -webkit-mask-size: 34px 34px;
    mask-size: 34px 34px;
}

.readonly-editor {
    position: relative;
    min-height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 5px 26px 5px 9px;
    overflow: hidden;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.readonly-editor.multiline {
    min-height: 46px;
    justify-content: flex-start;
}

.readonly-editor span {
    color: #706274;
    font-size: 0.76rem;
}

.readonly-editor strong {
    min-width: 0;
    overflow: hidden;
    color: #111827;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readonly-editor.multiline strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.readonly-editor .dx-icon-chevron-down {
    position: absolute;
    right: 7px;
    top: 50%;
    color: #268bd2;
    transform: translateY(-50%);
}

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}

.span-5 {
    grid-column: span 5;
}

.span-6 {
    grid-column: span 6;
}

.span-7 {
    grid-column: span 7;
}

.span-8 {
    grid-column: span 8;
}

.span-9 {
    grid-column: span 9;
}

.span-10 {
    grid-column: span 10;
}

.span-11 {
    grid-column: span 11;
}

.span-12 {
    grid-column: span 12;
}

.span-all {
    grid-column: 2 / -1;
}

.customer-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid #cfd5dc;
    background: #ffffff;
}

.room-window {
    width: min(1000px, 96vw);
    max-height: min(480px, 92vh);
    display: grid;
    grid-template-rows: 30px minmax(0, 1fr) 50px;
    overflow: hidden;
    border: 1px solid #aeb7c2;
    border-radius: 3px;
    background: #f6f6f6;
    box-shadow: 0 22px 60px rgba(22, 33, 45, 0.28);
}

.room-edit-window {
    height: min(680px, 96vh);
    max-height: min(680px, 96vh);
}

.room-form-body {
    padding: 10px;
    overflow: auto;
}

.room-group-content {
    padding: 12px;
}

.room-details-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.room-details-grid .room-notes-field {
    grid-column: 1 / -1;
}

.maintenance-window {
    width: min(980px, 96vw);
    max-height: min(560px, 92vh);
}

.maintenance-details-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.dish-window {
    width: min(840px, 96vw);
    max-height: min(560px, 92vh);
}

.dish-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.dish-translations-grid {
    min-height: 260px;
}

.consumption-day-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 220px) auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}

.arrivals-toolbar {
    display: grid;
    grid-template-columns: auto auto auto minmax(180px, 220px) auto auto auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}

.daily-menu-editor {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.daily-menu-editor-fields {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1fr);
    gap: 8px;
}

.daily-menu-notes-field {
    grid-column: 1 / -1;
}

.daily-menu-edit-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 10px;
}

.daily-menu-edit-sections section {
    display: grid;
    gap: 6px;
    align-content: start;
}

.daily-menu-edit-sections h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.daily-menu-drop-field {
    border-color: var(--line-strong);
}

.daily-menu-drop-field:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--panel-bg));
}

.daily-menu-dish-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 5px;
    align-items: stretch;
}

.daily-menu-clear-dish {
    min-width: 32px;
    width: 32px;
    padding-inline: 0;
}

.daily-menu-draggable-dish {
    cursor: grab;
    user-select: none;
}

.daily-menu-draggable-dish:active {
    cursor: grabbing;
}

.dish-register-entry-grid {
    display: grid;
    grid-template-columns: 34px minmax(160px, 1fr) 78px minmax(160px, 1fr) 78px;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--line);
    background: var(--panel-bg);
}

.dish-register-entry-grid > * {
    min-width: 0;
    padding: 5px 7px;
    border-bottom: 1px solid var(--line);
}

.dish-register-entry-grid > :nth-child(-n + 5) {
    font-size: 0.78rem;
    font-weight: 700;
    background: #eef3f8;
}

.dish-register-entry-grid > :nth-child(10n + 6),
.dish-register-entry-grid > :nth-child(10n + 7),
.dish-register-entry-grid > :nth-child(10n + 8),
.dish-register-entry-grid > :nth-child(10n + 9),
.dish-register-entry-grid > :nth-child(10n + 10) {
    background: var(--grid-row-odd);
}

.dish-register-dish-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dish-register-quantity-edit {
    width: 100%;
}

.dish-register-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.consumption-window {
    width: min(920px, 96vw);
}

.consumption-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.consumption-form-grid .span-all {
    grid-column: 1 / -1;
}

.daily-menu-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(180px, 220px) auto auto auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}

.daily-menu-toolbar .dxbl-btn:last-child {
    justify-self: end;
}

.dish-register-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 220px) auto auto auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}

.dish-register-save-actions {
    justify-self: end;
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.dish-register-workspace {
    min-height: calc(100vh - 178px);
    display: grid;
    grid-template-columns: minmax(460px, 0.95fr) minmax(560px, 1.2fr);
    gap: 10px;
}

.dish-register-reservations,
.dish-register-detail {
    min-width: 0;
}

.dish-register-detail {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.dish-register-menu-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 110px;
    gap: 8px;
    padding: 10px;
}

.dish-register-menu-summary > div {
    border: 1px solid #cfd5dc;
    background: #ffffff;
    min-height: 58px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dish-register-menu-summary span {
    color: #607086;
    font-size: 0.78rem;
}

.dish-register-quantities-panel {
    min-height: 0;
}

.dish-register-quantities-grid {
    min-height: 360px;
}

.dish-register-notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
}

.daily-menu-workspace {
    min-height: calc(100vh - 178px);
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(420px, 1fr) minmax(250px, 330px);
    gap: 10px;
}

.daily-menu-side-panel,
.daily-menu-preview-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #cfd5dc;
    background: #ffffff;
}

.daily-menu-side-panel {
    display: grid;
    grid-template-rows: 30px minmax(0, 1fr);
}

.daily-menu-side-panel > header {
    padding: 6px 10px;
    background: #e6e6e6;
    color: #111827;
    font-size: 0.8rem;
    font-weight: 700;
}

.daily-menu-preview-panel {
    overflow: auto;
    padding: 14px;
    background: #f3f6f8;
}

.daily-menu-print-card {
    width: min(720px, 100%);
    min-height: 780px;
    margin: 0 auto;
    padding: 42px 52px;
    border: 1px solid #d8dee6;
    background: #ffffff;
    color: #172033;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
}

.daily-menu-print-card > header {
    text-align: center;
    border-bottom: 1px solid #d7dde5;
    padding-bottom: 22px;
    margin-bottom: 30px;
}

.daily-menu-print-card > header span {
    display: block;
    min-height: 18px;
    color: #64748b;
    font-size: 0.9rem;
}

.daily-menu-print-card h1 {
    margin: 10px 0;
    font-size: 2rem;
    font-weight: 700;
}

.daily-menu-print-card > header strong {
    color: #334155;
    font-size: 1rem;
    font-weight: 600;
}

.daily-menu-meals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.daily-menu-meals section {
    min-width: 0;
}

.daily-menu-meals h3 {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d7dde5;
    font-size: 1.18rem;
}

.daily-menu-meals ol {
    margin: 0;
    padding-left: 24px;
}

.daily-menu-meals li {
    margin-bottom: 12px;
    line-height: 1.35;
}

.daily-menu-print-card footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #d7dde5;
    color: #475569;
    line-height: 1.35;
}

@media print {
    .print-body {
        margin: 0;
        background: #ffffff;
    }

    .print-body .daily-menu-print-card {
        width: auto;
        min-height: auto;
        margin: 0;
        border: 0;
        box-shadow: none;
    }
}

.boolean-grid-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.boolean-grid-icon img {
    width: 18px;
    height: 18px;
    display: block;
}

.maintenance-edit-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 8px;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.maintenance-edit-field span {
    color: #706274;
    font-size: 0.76rem;
}

.maintenance-edit-field .dxbl-text-edit,
.maintenance-edit-field .dxbl-combobox,
.maintenance-edit-field .dxbl-date-edit,
.maintenance-edit-field .dxbl-memo {
    border: 0;
    box-shadow: none;
}

.maintenance-edit-check {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.simple-edit-window {
    width: min(560px, 94vw);
    max-height: min(420px, 90vh);
    display: grid;
    grid-template-rows: 36px minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: #f6f8fb;
    box-shadow: 0 22px 60px rgba(22, 33, 45, 0.28);
}

.simple-edit-body {
    min-height: 0;
    display: grid;
    gap: 8px;
    padding: 14px;
    overflow: auto;
}

.simple-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.treatment-edit-window {
    width: min(760px, 94vw);
    max-height: min(560px, 90vh);
}

.treatment-edit-body {
    grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.2fr);
    align-content: start;
}

.treatment-edit-body .span-all {
    grid-column: 1 / -1;
}

.treatment-edit-options {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.treatment-edit-preview {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.treatment-color-editor {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.treatment-color-editor > span {
    color: #706274;
    font-size: 0.76rem;
}

.treatment-color-picker-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #d5dce5;
    background: #f8fafc;
}

.treatment-color-input {
    width: 46px;
    height: 38px;
    padding: 1px;
    border: 1px solid #9fa8b3;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
}

.treatment-color-picker-summary {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.treatment-color-picker-summary strong {
    font-size: 0.88rem;
}

.treatment-color-picker-summary span {
    color: var(--muted);
    font-size: 0.78rem;
}

.treatment-color-editor > .treatment-color-presets-title {
    margin-top: 2px;
}

.maintenance-photo-panel {
    min-width: 0;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.maintenance-photo-preview {
    min-height: 150px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #cfd5dc;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.86rem;
}

.maintenance-photo-preview img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
}

.maintenance-photo-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.maintenance-photo-input {
    display: none;
}

.maintenance-grid-thumb {
    width: 48px;
    height: 34px;
    display: block;
    object-fit: cover;
    border: 1px solid #cfd5dc;
    background: #f8fafc;
}

.maintenance-grid-thumb-empty {
    width: 48px;
    height: 34px;
    display: block;
    border: 1px dashed #cfd5dc;
    background: #f8fafc;
}

.price-list-window {
    width: min(720px, 96vw);
    max-height: min(340px, 92vh);
}

.price-list-window .customer-form-body {
    grid-template-rows: minmax(0, 1fr);
}

.cost-window {
    width: min(1120px, 98vw);
    max-height: min(720px, 96vh);
}

.cost-window .customer-form-body {
    grid-template-rows: auto minmax(0, 1fr);
}

.cost-edit-body {
    overflow: hidden;
}

.price-list-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.cost-period-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.cost-details-panel,
.cost-details-panel .customer-group-content {
    min-height: 0;
}

.cost-details-grid {
    height: 330px;
}

.cost-detail-toolbar {
    padding: 8px 12px 0;
}

.readonly-check {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.readonly-check span {
    width: 18px;
    height: 18px;
    border: 1px solid #8b95a1;
    background: #ffffff;
}

.readonly-check span.checked {
    background: #ff6b00;
    border-color: #ff6b00;
    position: relative;
}

.readonly-check span.checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.readonly-check strong {
    font-size: 0.9rem;
    font-weight: 600;
}

.reservation-form-layout {
    display: grid;
    grid-template-columns: minmax(760px, 1fr) 424px;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 16px;
    min-height: 0;
    overflow: hidden;
}

.reservation-form-group {
    min-width: 0;
    border: 1px solid #cfd5dc;
    background: #ffffff;
}

.reservation-form-group h4 {
    margin: 0;
    padding: 6px 12px;
    background: #e6e6e6;
    color: #1f2933;
    font-size: 0.78rem;
    font-weight: 700;
}

.booking-form-group {
    grid-column: 1;
}

.options-form-group {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.payment-form-group {
    grid-column: 1;
}

.booking-form-grid {
    display: grid;
    grid-template-columns: minmax(155px, 1fr) minmax(155px, 1fr) 74px minmax(170px, 1fr) minmax(170px, 1fr);
    gap: 6px;
    padding: 18px 16px 12px;
}

.form-field {
    position: relative;
    min-height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 5px 9px;
    overflow: hidden;
    border: 1px solid #9fa8b3;
    background: #ffffff;
}

.form-field span,
.date-navigator span {
    color: #706274;
    font-size: 0.76rem;
}

.form-field strong {
    min-width: 0;
    overflow: hidden;
    color: #27313c;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-field {
    grid-column: 1 / 4;
}

.compact-field {
    text-align: right;
}

.people-field {
    grid-column: 4;
    grid-row: 1;
}

.children-under-14-field {
    grid-column: 5;
    grid-row: 1;
}

.booking-arrival-field {
    grid-column: 4;
    grid-row: 2;
}

.booking-departure-field {
    grid-column: 5;
    grid-row: 2;
}

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

.date-navigator {
    min-height: 210px;
    height: 210px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-items: center;
    justify-items: center;
    padding: 10px;
    border: 1px solid #aeb7c2;
    background: #fbfbfb;
}

.date-navigator strong {
    color: #1368b1;
    font-size: 0.9rem;
    font-weight: 650;
    text-transform: lowercase;
}

.date-navigator b {
    color: #27313c;
    font-size: 3.1rem;
    font-weight: 500;
}

.date-navigator small {
    color: #667385;
    font-size: 0.84rem;
    text-transform: lowercase;
}

.arrival-calendar {
    grid-column: 4 / 5;
    grid-row: 3 / 7;
}

.departure-calendar {
    grid-column: 5 / 6;
    grid-row: 3 / 7;
}

.total-days {
    grid-column: 4 / 6;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9fa8b3;
    color: #5e4f38;
    font-size: 0.82rem;
    font-weight: 600;
}

.notes-field {
    grid-column: 1 / 6;
    min-height: 54px;
}

.notes-field strong,
.payment-note-field strong {
    white-space: normal;
}

.options-form-group {
    min-height: 0;
    overflow: hidden;
}

.options-form-group > :not(h4) {
    margin-left: 20px;
    margin-right: 20px;
}

.options-top-row {
    display: grid;
    grid-template-columns: auto auto minmax(150px, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    min-width: 0;
}

.readonly-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b3745;
    font-size: 0.82rem;
    font-style: italic;
}

.readonly-switch span {
    width: 32px;
    height: 18px;
    position: relative;
    display: inline-block;
    border-radius: 18px;
    background: #c7cdd4;
}

.readonly-switch span::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
}

.readonly-switch.is-on span {
    background: #e94148;
}

.readonly-switch.is-on span::after {
    left: 17px;
}

.expiration-field {
    min-height: 36px;
    min-width: 0;
}

.option-select-field {
    min-height: 38px;
    margin-top: 12px;
    min-width: 0;
}

.change-field {
    width: 220px;
    min-height: 36px;
    margin-top: 12px;
    margin-left: auto !important;
    text-align: right;
}

.reservation-options-grid {
    margin-top: 12px;
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    min-width: 0;
    height: 220px;
    overflow: hidden;
}

.reservation-options-grid .dxbl-grid,
.reservation-options-grid .dxbl-grid-table,
.reservation-options-grid table {
    width: 100%;
    max-width: 100%;
}

.payment-grid {
    display: grid;
    grid-template-columns: 160px 160px minmax(0, 1fr);
    gap: 6px;
    padding: 16px;
}

.money-field {
    text-align: right;
}

.reservation-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px 16px;
}

.reservation-actions > div {
    display: flex;
    gap: 10px;
}

.module-placeholder {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
}

.module-placeholder h3 {
    margin: 0 0 6px;
}

.reservations-heading {
    align-items: flex-end;
}

.reservations-filters {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.reservation-list-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(41, 63, 88, 0.08);
}

.reservation-list-grid {
    height: 100%;
}

.reservation-list-grid,
.reservation-options-grid {
    --dxbl-grid-selection-bg: var(--grid-row-selected);
    --dxbl-grid-selection-focus-bg: var(--grid-row-selected-focus);
    --dxbl-grid-selection-color: var(--text);
    --dxbl-grid-selection-focus-color: var(--text);
}

.reservation-list-grid .newhotel-grid-cell,
.reservation-options-grid .newhotel-grid-cell {
    --dxbl-grid-border-color: transparent;
    --dxbl-grid-cell-border-color: transparent;
    border: 0 none transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.reservation-list-grid .dxbl-grid-table,
.reservation-list-grid .dxbl-grid-table th,
.reservation-list-grid .dxbl-grid-table td,
.reservation-options-grid .dxbl-grid-table,
.reservation-options-grid .dxbl-grid-table th,
.reservation-options-grid .dxbl-grid-table td {
    --dxbl-grid-border-color: transparent;
    --dxbl-grid-cell-border-color: transparent;
    border-color: transparent !important;
}

.reservation-list-grid .newhotel-grid-row-even,
.reservation-list-grid .newhotel-grid-row-even > td,
.reservation-options-grid .newhotel-grid-row-even,
.reservation-options-grid .newhotel-grid-row-even > td {
    background-color: var(--grid-row-even);
}

.reservation-list-grid .newhotel-grid-row-odd,
.reservation-list-grid .newhotel-grid-row-odd > td,
.reservation-options-grid .newhotel-grid-row-odd,
.reservation-options-grid .newhotel-grid-row-odd > td {
    background-color: var(--grid-row-odd);
}

.reservation-list-grid .newhotel-grid-row-even:hover,
.reservation-list-grid .newhotel-grid-row-even:hover > td,
.reservation-list-grid .newhotel-grid-row-odd:hover,
.reservation-list-grid .newhotel-grid-row-odd:hover > td,
.reservation-options-grid .newhotel-grid-row-even:hover,
.reservation-options-grid .newhotel-grid-row-even:hover > td,
.reservation-options-grid .newhotel-grid-row-odd:hover,
.reservation-options-grid .newhotel-grid-row-odd:hover > td {
    background-color: var(--grid-row-hot);
}

.reservation-list-grid .dxbl-grid-table .dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell),
.reservation-options-grid .dxbl-grid-table .dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: var(--grid-row-selected) !important;
    color: var(--text) !important;
}

.reservation-list-grid .dxbl-grid-table .dxbl-grid-focused-row.dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell),
.reservation-options-grid .dxbl-grid-table .dxbl-grid-focused-row.dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge) > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell),
.reservation-list-grid .dxbl-grid-table .dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge):hover > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell),
.reservation-options-grid .dxbl-grid-table .dxbl-grid-selected-row:not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge):hover > td:not(.dxbl-grid-empty-cell):not(.dxbl-grid-indent-cell) {
    background-color: var(--grid-row-selected-focus) !important;
    color: var(--text) !important;
}

.grid-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.grid-toolbar-left,
.grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-toolbar-right {
    margin-left: auto;
}

.edit-command-button {
    --edit-command-color: var(--accent);
    border-color: var(--edit-command-color) !important;
    background: #f2f4f7 !important;
    color: var(--edit-command-color) !important;
}

.edit-command-button .dx-icon-add,
.edit-command-button .dx-icon-folder,
.edit-command-button .dx-icon-trash {
    background-color: currentColor;
}

.edit-command-button:not(:disabled):not(.dxbl-disabled):hover,
.edit-command-button:not(:disabled):not(.dxbl-disabled):active,
.edit-command-button:not(:disabled):not(.dxbl-disabled).dxbl-active,
.edit-command-button:not(:disabled):not(.dxbl-disabled).dxbl-btn-pressed {
    border-color: var(--edit-command-color) !important;
    background: var(--edit-command-color) !important;
    color: #ffffff !important;
}

.edit-command-button:disabled,
.edit-command-button.dxbl-disabled {
    opacity: 0.52;
}

.edit-command-new {
    --edit-command-color: #2f7457;
}

.edit-command-edit {
    --edit-command-color: #b98400;
}

.edit-command-delete {
    --edit-command-color: #b3261e;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    padding: 12px 16px;
    background: var(--danger);
    color: #fff;
    border-radius: 8px;
}

#blazor-error-ui .reload {
    margin-left: 12px;
    color: #fff;
    font-weight: 700;
}

#blazor-error-ui .dismiss {
    margin-left: 10px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .app-shell,
    .app-shell.is-collapsed {
        grid-template-columns: 1fr;
    }

    .sidebar {
        max-height: 340px;
    }

    .brand-text {
        display: none;
    }

    .login-window {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 210px;
    }

    .top-bar,
    .page-heading,
    .module-placeholder {
        align-items: stretch;
        flex-direction: column;
    }

    .scheduler-panel {
        min-height: 360px;
    }

    .sheet-grid,
    .sheet-notes {
        grid-template-columns: 1fr;
    }
}