@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
}

/* ─── Layout & Background ────────────────────────────────── */
.mud-layout {
    background-color: #e8eaf0 !important;
}

/* Скролл в контентной области DxDrawer */
.dxbl-fl-body,
.dxbl-drawer-target-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ─── Island Navbar — iOS 26 Liquid Glass ────────────────── */
.island-nav-wrapper {
    display: flex;
    justify-content: center;
    padding: 14px 36px;
}

.island-nav-wrapper .dxbl-toolbar {
    max-width: 1300px;
    width: 100%;
    border-radius: 32px !important;
    overflow: hidden !important;

    background: rgba(14, 14, 20, 0.90) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.40),
        0 2px 6px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

    transition: box-shadow 0.25s ease !important;
}

/* Убираем фоны DevExpress */
.island-nav-wrapper .dxbl-toolbar-root,
.island-nav-wrapper .dxbl-toolbar-items,
.island-nav-wrapper .dxbl-toolbar-item-container {
    background: transparent !important;
}

/* Обычные кнопки острова */
.island-nav-wrapper .dxbl-btn {
    border-radius: 20px !important;
    font-size: 1.08em !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Пастельные цвета по типу кнопки */
.island-nav-wrapper .dxbl-btn-danger,
.island-nav-wrapper .dxbl-btn-outline-danger {
    background: rgba(255, 110, 110, 0.20) !important;
    border-color: rgba(255, 130, 130, 0.40) !important;
    color: #ffb3b3 !important;
}

.island-nav-wrapper .dxbl-btn-success,
.island-nav-wrapper .dxbl-btn-outline-success {
    background: rgba(80, 210, 130, 0.20) !important;
    border-color: rgba(100, 220, 150, 0.40) !important;
    color: #a8f0c6 !important;
}

.island-nav-wrapper .dxbl-btn-info,
.island-nav-wrapper .dxbl-btn-outline-info {
    background: rgba(90, 160, 255, 0.20) !important;
    border-color: rgba(110, 180, 255, 0.40) !important;
    color: #b3d4ff !important;
}

.island-nav-wrapper .dxbl-btn-warning,
.island-nav-wrapper .dxbl-btn-outline-warning {
    background: rgba(255, 200, 80, 0.20) !important;
    border-color: rgba(255, 210, 100, 0.40) !important;
    color: #ffe5a0 !important;
}

/* ─── Активная кнопка — Glass эффект ────────────────────── */
.island-nav-wrapper a.nav-active {
    /* Матовое стекло поверх тёмного фона острова */
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.22) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.70),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        0 4px 20px rgba(0, 0, 0, 0.30) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* ─── Global: скруглённые карточки ───────────────────────── */
.mud-paper {
    border-radius: 16px !important;
}

.card {
    border-radius: 16px !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
.dxbl-drawer-content{
    height: 100vh !important;
}

/* ════════════════════════════════════════
   Global DxGrid modern style
   ════════════════════════════════════════ */

/* ── Карточка ── */
.dxbl-grid {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 16px rgba(30,58,95,0.10),
        0 12px 40px rgba(30,58,95,0.07) !important;
    border: 1px solid rgba(200,215,240,0.6) !important;
}

/* ── Шапка ── */
.dxbl-grid .dxbl-grid-header-row > th {
    background: linear-gradient(135deg, #1a3356 0%, #254d7a 100%) !important;
    color: #d8e8ff !important;
    font-weight: 700 !important;
    font-size: 0.78em !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid rgba(100,160,255,0.35) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    padding: 13px 10px !important;
    user-select: none !important;
}

/* иконка сортировки — чуть светлее */
.dxbl-grid .dxbl-grid-header-row .dxbl-sort-icon {
    color: rgba(180,210,255,0.8) !important;
}

/* ── Строка фильтра ── */
.dxbl-grid .dxbl-grid-filter-row > td {
    background: #eef2fb !important;
    border-bottom: 2px solid #c8d6f0 !important;
}

/* ── Строки данных — зебра ── */
.dxbl-grid .dxbl-grid-data-row > td {
    font-size: 0.875em !important;
    padding: 9px 10px !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
    background-color: #ffffff !important;
}

.dxbl-grid tr.dxbl-grid-data-row:nth-child(even) > td {
    background-color: #f6f9ff !important;
}

/* ── Hover ── */
.dxbl-grid .dxbl-grid-data-row:hover > td {
    background-color: #e8f0fe !important;
    box-shadow: inset 3px 0 0 #4a7fc1 !important;
}

/* ── Выделенная строка ── */
.dxbl-grid .dxbl-grid-selected-row > td {
    background-color: #d0e4ff !important;
    box-shadow: inset 3px 0 0 #1a6fd4 !important;
    font-weight: 500 !important;
}

/* ── Строка итогов (TotalSummary) ── */
.dxbl-grid .dxbl-grid-summary-row > td {
    background: linear-gradient(90deg, #f0f4ff 0%, #f8faff 100%) !important;
    font-weight: 700 !important;
    font-size: 0.85em !important;
    color: #1a3356 !important;
    border-top: 2px solid #c8d6f0 !important;
    padding: 10px 10px !important;
}

/* ── Строка группировки ── */
.dxbl-grid .dxbl-grid-group-row > td {
    background: #e4ecf8 !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    color: #254d7a !important;
    border-bottom: 1px solid #c8d6f0 !important;
}

/* ── Тулбар ── */
.dxbl-grid .dxbl-toolbar {
    background: #f4f7fe !important;
    border-bottom: 1px solid #dae2f4 !important;
    padding: 8px 14px !important;
}

/* ── Пейджер ── */
.dxbl-grid .dxbl-pager {
    background: #f4f7fe !important;
    border-top: 1px solid #dae2f4 !important;
    font-size: 0.84em !important;
    padding: 6px 12px !important;
}

/* Кнопки пейджера — скруглённые */
.dxbl-grid .dxbl-pager .dxbl-btn {
    border-radius: 8px !important;
    min-width: 30px !important;
    font-size: 0.82em !important;
}

/* Активная страница пейджера */
.dxbl-grid .dxbl-pager .dxbl-active {
    background: #254d7a !important;
    color: #fff !important;
    border-color: #254d7a !important;
}

/* ── Статусные бейджи — пилюли ── */
.status-active,
.status-confirmed,
.status-cancelled,
.status-pending {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.76em;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-active {
    background-color: rgba(255, 193, 7, 0.15);
    color: #7a5700;
    border: 1px solid rgba(255, 193, 7, 0.45);
}

.status-confirmed {
    background-color: rgba(40, 167, 69, 0.13);
    color: #145523;
    border: 1px solid rgba(40, 167, 69, 0.38);
}

.status-cancelled {
    background-color: rgba(220, 53, 69, 0.12);
    color: #7a1520;
    border: 1px solid rgba(220, 53, 69, 0.38);
}

.status-pending {
    background-color: rgba(13, 110, 253, 0.10);
    color: #0a3880;
    border: 1px solid rgba(13, 110, 253, 0.28);
}

/* ── Цвета строк по статусу ── */
.highlight-red > td,
.order-status-canceled-item > td {
    background-color: rgba(220, 53, 69, 0.08) !important;
    border-left: 3px solid rgba(220, 53, 69, 0.45) !important;
}

.highlight-green > td,
.order-status-success-item > td {
    background-color: rgba(40, 167, 69, 0.08) !important;
    border-left: 3px solid rgba(40, 167, 69, 0.45) !important;
}

.order-status-delivery-item > td {
    background-color: rgba(255, 193, 7, 0.10) !important;
    border-left: 3px solid rgba(255, 193, 7, 0.55) !important;
}