/* ============================
   SBMDSS Animations System
   Entrance animations scoped to html.interactive
   to prevent double-play on Blazor Server SSR → Interactive switch
   ============================ */

/* ===== KEYFRAMES (always defined) ===== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes headerSlide {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes tableRowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes cardBounce {
    from { opacity: 0; transform: scale(0.85) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes stepSlide {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes stepSlideBack {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes counterPop {
    from { opacity: 0; transform: translateY(10px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes breadcrumbSlide {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes successPop {
    from { opacity: 0; transform: scale(0) rotate(-45deg); }
    60% { transform: scale(1.2) rotate(0deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes snackbarSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes menuDrop {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tooltipFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== ENTRANCE ANIMATIONS (only after interactive mode) ===== */

html.interactive .fade-in { animation: fadeIn 0.4s ease-out both; }
html.interactive .slide-up { animation: slideUp 0.4s ease-out both; }
html.interactive .slide-in-left { animation: slideInLeft 0.35s ease-out both; }
html.interactive .scale-in { animation: scaleIn 0.3s ease-out both; }
html.interactive .header-animate { animation: headerSlide 0.5s ease-out both; }
html.interactive .card-bounce { animation: cardBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
html.interactive .step-transition { animation: stepSlide 0.35s ease-out both; }
html.interactive .step-transition-back { animation: stepSlideBack 0.35s ease-out both; }
html.interactive .counter-animate { animation: counterPop 0.4s ease-out both; }
html.interactive .success-check { animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
html.interactive .empty-state-float { animation: emptyFloat 3s ease-in-out infinite; }

/* Staggered children */
html.interactive .stagger-children > * {
    opacity: 0;
    animation: slideUp 0.35s ease-out forwards;
}
html.interactive .stagger-children > *:nth-child(1) { animation-delay: 0.04s; }
html.interactive .stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
html.interactive .stagger-children > *:nth-child(3) { animation-delay: 0.12s; }
html.interactive .stagger-children > *:nth-child(4) { animation-delay: 0.16s; }
html.interactive .stagger-children > *:nth-child(5) { animation-delay: 0.20s; }
html.interactive .stagger-children > *:nth-child(6) { animation-delay: 0.24s; }
html.interactive .stagger-children > *:nth-child(7) { animation-delay: 0.28s; }
html.interactive .stagger-children > *:nth-child(8) { animation-delay: 0.32s; }

/* Table row stagger */
html.interactive .table-animate .mud-table-body .mud-table-row {
    animation: tableRowIn 0.3s ease-out both;
}
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(1) { animation-delay: 0.02s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(2) { animation-delay: 0.04s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(3) { animation-delay: 0.06s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(4) { animation-delay: 0.08s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(5) { animation-delay: 0.10s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(6) { animation-delay: 0.12s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(7) { animation-delay: 0.14s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(8) { animation-delay: 0.16s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(9) { animation-delay: 0.18s; }
html.interactive .table-animate .mud-table-body .mud-table-row:nth-child(10) { animation-delay: 0.20s; }

/* Skeleton shimmer */
html.interactive .skeleton-animate .mud-skeleton {
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Breadcrumb */
html.interactive .mud-breadcrumbs {
    animation: breadcrumbSlide 0.3s ease-out both;
}

/* ===== Чип типа в «Новости и обновления» — единый тонированный стиль для всех типов.
   Цвет берётся из переменных --tc (основной) и --tcr (rgb) — заданы инлайн на чипе. ===== */
.news-type-chip {
    background-color: rgba(var(--tcr), 0.16) !important;
    color: var(--tc) !important;
    font-weight: 600 !important;
    border: none !important;
}

/* ===== Snackbar — theme-adaptive surface with severity accent (left bar + tint + icon container) ===== */

/* Уведомления вверху-справа: сдвигаем ниже AppBar. MudBlazor по умолчанию ставит top:24px —
   переопределяем именно его (padding провайдера на позицию не влияет). */
.mud-snackbar-location-top-right,
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center { top: 55px !important; }

.mud-snackbar {
    background-color: var(--mud-palette-surface) !important;
    background-image: none !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: 0 20px 44px -12px rgba(0, 0, 0, 0.4),
                0 6px 18px rgba(0, 0, 0, 0.18) !important;
    padding: 12px 14px 12px 24px !important;
    min-width: 340px;
    max-width: 460px;
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    position: relative;
    overflow: hidden;
}

/* Left accent bar — severity color */
.mud-snackbar::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 8px;
    background: var(--mud-palette-info);
    z-index: 2;
}

/* Per-severity accent bar color */
.mud-snackbar.mud-alert-filled-success::before { background: var(--mud-palette-success); }
.mud-snackbar.mud-alert-filled-error::before   { background: var(--mud-palette-error); }
.mud-snackbar.mud-alert-filled-warning::before { background: var(--mud-palette-warning); }
.mud-snackbar.mud-alert-filled-info::before    { background: var(--mud-palette-info); }
.mud-snackbar.mud-alert-filled-normal::before  { background: var(--mud-palette-primary); }

/* Icon container — severity-tinted rounded square, like ConfirmActionDialog */
.mud-snackbar .mud-alert-icon {
    background: rgba(var(--mud-palette-info-rgb), 0.18) !important;
    color: var(--mud-palette-info) !important;
    border-radius: 9px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin-right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    z-index: 1;
}
.mud-snackbar .mud-alert-icon > svg,
.mud-snackbar .mud-alert-icon > .mud-icon-root {
    font-size: 1.3rem !important;
    width: 1.3rem !important;
    height: 1.3rem !important;
}
.mud-snackbar.mud-alert-filled-success .mud-alert-icon { background: rgba(var(--mud-palette-success-rgb), 0.2) !important; color: var(--mud-palette-success) !important; }
.mud-snackbar.mud-alert-filled-error   .mud-alert-icon { background: rgba(var(--mud-palette-error-rgb), 0.2)   !important; color: var(--mud-palette-error)   !important; }
.mud-snackbar.mud-alert-filled-warning .mud-alert-icon { background: rgba(var(--mud-palette-warning-rgb), 0.22) !important; color: var(--mud-palette-warning) !important; }
.mud-snackbar.mud-alert-filled-info    .mud-alert-icon { background: rgba(var(--mud-palette-info-rgb), 0.2)    !important; color: var(--mud-palette-info)    !important; }
.mud-snackbar.mud-alert-filled-normal  .mud-alert-icon { background: rgba(var(--mud-palette-primary-rgb), 0.2) !important; color: var(--mud-palette-primary) !important; }

.mud-snackbar .mud-alert-message {
    color: var(--mud-palette-text-primary) !important;
    line-height: 1.45;
    padding: 7px 0;
    position: relative;
    z-index: 1;
}

/* Close (×) — visible and always clickable */
.mud-snackbar .mud-snackbar-close-button,
.mud-snackbar .mud-snackbar-close-button * {
    pointer-events: auto !important;
    cursor: pointer;
}
.mud-snackbar .mud-snackbar-close-button {
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.65;
    border-radius: 6px;
    margin-left: 6px;
    position: relative;
    z-index: 1;
    transition: opacity 0.18s ease, background-color 0.18s ease;
}
.mud-snackbar .mud-snackbar-close-button:hover {
    opacity: 1;
    background: var(--mud-palette-action-default-hover) !important;
}

/* Mobile: safe width inside viewport */
@media (max-width: 599px) {
    .mud-snackbar {
        min-width: auto !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 8px !important;
    }
}

/* Tooltip */
html.interactive .mud-tooltip {
    animation: tooltipFade 0.15s ease-out;
}

/* Menu dropdown */
html.interactive .mud-popover-open .mud-list {
    animation: menuDrop 0.2s ease-out both;
}


/* ===== TRANSITIONS (always active, no double-play issue) ===== */

/* Stat card hover */
.stat-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Tab indicator smooth */
.mud-tabs .mud-tab-slider {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Drawer smooth transition */
.mud-drawer {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mud-drawer-content {
    transition: opacity 0.2s ease;
}

/* Theme transition — disabled, causes desync between elements (tables, selects lag behind background) */

/* AppBar icon buttons — 32px on desktop, 44px on mobile */
.mud-appbar .mud-icon-button {
    width: 32px;
    height: 32px;
}
@media (max-width: 599px) {
    .mud-appbar .mud-toolbar-gutters {
        min-height: 52px;
        padding: 0 12px;
        align-items: center;
    }
    /* Cancel Edge.Start negative margin */
    .mud-appbar .mud-icon-button.mud-icon-button-edge-start {
        margin-left: 0 !important;
    }
    .mud-appbar .mud-icon-button {
        width: 36px;
        height: 36px;
    }
    .mud-appbar .profile-btn {
        height: 36px;
        padding: 0 8px;
    }
}

/* Theme toggle button */
.theme-toggle-btn {
    transition: transform 0.2s ease !important;
}
.theme-toggle-btn:active {
    transform: scale(0.85);
}

/* Profile button */
.profile-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.profile-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
}
.profile-btn:active {
    transform: scale(0.95);
}

/* Interactive elements color transitions */
.mud-button-root, .mud-icon-button, .mud-chip, .mud-nav-link {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

/* AppBar shadow */
.mud-appbar {
    transition: box-shadow 0.3s ease !important;
}

/* Dialog overlay */
.mud-overlay {
    transition: opacity 0.3s ease !important;
}

/* Input focus glow */
.mud-input-outlined:focus-within .mud-input-outlined-border {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 0 0 2px rgba(35, 46, 80, 0.15);
}

/* Progress bar fill */
.mud-progress-linear .mud-progress-linear-bar {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== Date cell (tables) ===== */
.date-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: nowrap;
}
.date-cell-date {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}
.date-cell-sep {
    color: var(--mud-palette-text-disabled);
    opacity: 0.6;
}
.date-cell-time {
    color: var(--mud-palette-text-secondary);
}

/* ===== Grid lines — clearer vertical & horizontal dividers between cells (scoped to .grid-lines) ===== */
.grid-lines .mud-table-body .mud-table-row .mud-table-cell {
    border-right: 1px solid var(--mud-palette-lines-default) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}
.grid-lines .mud-table-body .mud-table-row .mud-table-cell:last-child {
    border-right: none !important;
}
.grid-lines .mud-table-head .mud-table-cell {
    border-right: 1px solid var(--mud-palette-lines-default) !important;
}
.grid-lines .mud-table-head .mud-table-cell:last-child {
    border-right: none !important;
}

/* ===== Clickable table rows ===== */
.reports-table .mud-table-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.reports-table .mud-table-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb, 46, 81, 250), 0.04) !important;
}

/* ===== Filter panel — plain div instead of MudPaper to avoid position:relative ===== */
.filter-panel-content {
    padding: 16px;
    margin-top: 8px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ===== DatePicker popover — hide empty actions footer ===== */
.mud-picker-actions {
    display: none !important;
}

/* ===== Date range row with arrow ===== */
.date-range-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.date-range-input {
    flex: 1 1 200px;
    min-width: 0;
}
.date-range-arrow {
    flex: 0 0 auto;
    opacity: 0.7;
}
/* Hide arrow when fields wrap to separate lines (mobile) */
@media (max-width: 599px) {
    .date-range-arrow {
        display: none !important;
    }
}

/* ===== Column headers — light primary tint (для обоих: кликабельных и нет) ===== */
.reports-table .mud-table-head,
.styled-grid .mud-table-head {
    background-color: var(--mud-palette-primary-hover);
}
.reports-table .mud-table-head .mud-table-cell,
.styled-grid .mud-table-head .mud-table-cell {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--mud-palette-primary) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}
.reports-table .mud-table-head .mud-table-sort-label,
.reports-table .mud-table-head .mud-table-sort-label-icon,
.styled-grid .mud-table-head .mud-table-sort-label,
.styled-grid .mud-table-head .mud-table-sort-label-icon {
    color: var(--mud-palette-primary) !important;
}

/* ===== User management tab buttons (Linear/Clerk-inspired segmented pill) ===== */
.user-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 0;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-gray-lighter);
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.user-tab-btn:hover:not(.is-active) {
    background: var(--mud-palette-gray-light);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.user-tab-btn:active { transform: scale(0.985); }
.user-tab-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.user-tab-btn .user-tab-icon {
    font-size: 1.3rem;
    opacity: 0.8;
}
.user-tab-btn .user-tab-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-tab-btn .user-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--mud-palette-gray-light);
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-tab-btn.is-active.active-primary {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(35, 46, 80, 0.22);
}
.user-tab-btn.is-active.active-primary .user-tab-icon { opacity: 1; }
.user-tab-btn.is-active.active-primary .user-tab-count {
    background: #ffffff;
    color: var(--mud-palette-primary);
}

.user-tab-btn.is-active.active-warning {
    background: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
    color: #1a1a1a;
    box-shadow: 0 4px 14px rgba(245, 124, 0, 0.28);
}
.user-tab-btn.is-active.active-warning .user-tab-icon { opacity: 1; }
.user-tab-btn.is-active.active-warning .user-tab-count {
    background: #ffffff;
    color: var(--mud-palette-warning);
}

/* ===== Floating bulk actions panel (bottom-center pill) ===== */
.bulk-actions-float {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    pointer-events: none;
}
.bulk-actions-float > * {
    pointer-events: auto;
}
.bulk-actions-panel {
    /* appbar-background stays dark in both themes (#232e50 light / #1e293b dark) */
    background: var(--mud-palette-appbar-background);
    color: white;
    border-radius: 12px;
    padding: 6px 8px 6px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.18);
    width: auto;
    animation: bulkFloatSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.bulk-actions-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 2px;
    flex-shrink: 0;
}
/* Delete button inside bulk-actions panel — stronger red for contrast vs. navy/blue panel background */
.bulk-actions-panel .mud-button-filled.mud-button-filled-error {
    background-color: #b31515 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.bulk-actions-panel .mud-button-filled.mud-button-filled-error:hover {
    background-color: #8f1010 !important;
}
@keyframes bulkFloatSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ===== Empty state ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.fade-in-up {
    animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Filter button badge pulse when active ===== */
.mud-badge.mud-badge-primary .mud-badge-dot,
.mud-badge.mud-badge-primary > .mud-badge {
    transition: transform 0.2s ease;
}

/* ===== Description cell (tables) — truncate long text ===== */
.description-cell {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--mud-palette-text-primary);
}
@media (max-width: 959px) {
    .description-cell {
        max-width: 150px;
    }
}
@media (max-width: 599px) {
    .description-cell {
        max-width: 100px;
    }
}

/* ===== Touch targets for mobile tables ===== */
@media (max-width: 599px) {
    .mud-table-container .mud-icon-button,
    .mud-data-grid .mud-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}


/* ===== Unified dialog styling (Phase 1) =====
   Apply Class="sbm-dialog" on any <MudDialog> to get the consistent look. */

.mud-dialog.sbm-dialog {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.28),
                0 4px 12px -2px rgba(0, 0, 0, 0.1);
    animation: sbmDialogEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sbmDialogEnter {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Title row */
.mud-dialog.sbm-dialog .mud-dialog-title {
    padding: 18px 24px 14px;
    background: var(--mud-palette-gray-lighter);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.005em;
    line-height: 1.35;
    margin: 0;
}

/* Content area */
.mud-dialog.sbm-dialog .mud-dialog-content {
    padding: 20px 24px;
}

/* Bottom action row */
.mud-dialog.sbm-dialog .mud-dialog-actions {
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-gray-lighter);
    gap: 8px;
    margin: 0;
}

/* Buttons inside action row — unified sizing/radius */
.mud-dialog.sbm-dialog .mud-dialog-actions .mud-button-root {
    text-transform: none;
    font-weight: 500;
    border-radius: 8px;
    min-height: 38px;
    padding: 0 16px;
    letter-spacing: 0.01em;
}

/* Close-icon button position (if TitleContent uses one, nothing to do; if not, we'll handle in Phase 3) */

/* Simple manual tabs — replaces MudTabs inside dialogs (avoids JS-interop layout delay) */
.simple-tabs-toolbar {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 20px;
    min-height: 56px;
}
.simple-tab {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    padding: 14px 22px;
    min-height: 56px;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.simple-tab:hover:not(.is-active) {
    color: var(--mud-palette-text-primary);
    background: rgba(0, 0, 0, 0.04);
}
.simple-tab.is-active {
    color: var(--mud-palette-primary);
    border-bottom: 3px solid var(--mud-palette-primary);
    font-weight: 600;
}
.simple-tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -3px;
}
.simple-tabs-panels {
    padding-top: 0;
}

/* Dialog header — icon + title, animated on mode switch */
.dialog-inline-header {
    display: flex;
    align-items: center;
    gap: 14px;
    animation: dialogHeaderMorph 0.32s cubic-bezier(0.2, 0, 0, 1);
}
.dialog-header-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.35;
}
/* Dialogs that render header inside content area (so state changes re-render it) */
.mud-dialog.sbm-dialog-custom-header { padding: 0 !important; }
.mud-dialog.sbm-dialog-custom-header .mud-dialog-title { display: none !important; }
.mud-dialog.sbm-dialog-custom-header .mud-dialog-content {
    padding: 0 !important;
    margin: 0 !important;
}
.dialog-inline-header {
    margin: 0;
    padding: 18px 24px 14px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: background-color 0.28s ease, border-color 0.28s ease;
}
/* Mode-tinted backgrounds — color-mix даёт корректную dark-адаптацию.
   info = голубой (edit), success = зелёный (add), neutral surface (view). */
.dialog-inline-header.mode-edit {
    background: color-mix(in srgb, var(--mud-palette-info) 11%, var(--mud-palette-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-info) 45%, transparent);
}
.dialog-inline-header.mode-add {
    background: color-mix(in srgb, var(--mud-palette-success) 11%, var(--mud-palette-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
}
.dialog-inline-body {
    padding: 20px 24px;
    outline: none;
}

/* === Appbar утилиты — для шапок страниц на --mud-palette-appbar-background.
       Используют appbar-text (белый и в light, и в dark), а opacity делает текст
       чуть приглушённее. Раньше было хардкоженное rgba(255,255,255,...). === */
.appbar-icon {
    color: var(--mud-palette-appbar-text);
    opacity: 0.85;
    font-size: 2.5rem;
}
.appbar-subtitle {
    color: var(--mud-palette-appbar-text);
    opacity: 0.7;
}
.appbar-border-faint {
    border-color: color-mix(in srgb, var(--mud-palette-appbar-text) 40%, transparent) !important;
}

/* === Inline-блок (для условных секций «Оборудование», «Якорь», «ГРП», «Подтверждение»
       и подобных в Form.razor / ReportDialog).
       Цвета через color-mix от --mud-palette-info — корректно работают в обеих темах. === */
.inline-equipment-block {
    margin: 16px 0;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--mud-palette-info) 9%, var(--mud-palette-surface));
    border: 1px dashed color-mix(in srgb, var(--mud-palette-info) 65%, transparent);
    border-radius: 8px;
}
/* Поля внутри синего блока — фон совпадает с блоком, чтобы не было белых/тёмных "вставок".
   Только контейнер и legend (нотч лейбла) — не трогаем fieldset/input чтобы не ломать клики. */
.inline-equipment-block .mud-input-outlined,
.inline-equipment-block .mud-input,
.inline-equipment-block .mud-input-control,
.inline-equipment-block legend,
.inline-equipment-block .mud-input-label-outlined {
    background: color-mix(in srgb, var(--mud-palette-info) 9%, var(--mud-palette-surface)) !important;
}
.inline-equipment-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: color-mix(in srgb, var(--mud-palette-info) 85%, var(--mud-palette-text-primary));
    margin-bottom: 10px;
}
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0 12px;
    margin-bottom: 6px;
}

/* === Пункты выпадающего списка технологий: название + описание под ним === */
.tech-select-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
    white-space: normal;
}
.tech-select-name {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}
/* Скрыто в закрытом поле, видно только в раскрытом списке (.mud-popover) */
.tech-select-purpose {
    display: none;
}
.mud-popover .tech-select-purpose {
    display: block;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    white-space: normal;
    margin-top: 1px;
}

/* === «Назначение технологии» — info-карточка под select'ом технологии. === */
.tech-purpose {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-info);
    border-radius: 4px;
}
.tech-purpose-icon {
    color: var(--mud-palette-info);
    flex-shrink: 0;
    margin-top: 1px;
}
.tech-purpose-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-bottom: 2px;
}
.tech-purpose-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

/* === Sticky-блок «шапка + вкладки» в диалогах с custom-header.
       Раскладка через flex: mud-dialog-content становится flex-column,
       sticky-top — фиксированной зоной сверху, dialog-inline-body —
       растягивающейся зоной с собственным скроллом. Это даёт скроллбар
       внутри body (как в ReportDialog), а не на всём диалоге. === */
.mud-dialog.sbm-dialog-custom-header {
    max-height: 92vh !important;
    display: flex;
    flex-direction: column;
}
.mud-dialog.sbm-dialog-custom-header .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.dialog-sticky-top {
    flex-shrink: 0;
    background: var(--mud-palette-surface);
}
/* Внутри sticky-обёртки убираем margin-bottom у toolbar (он теперь над body) */
.dialog-sticky-top .simple-tabs-toolbar {
    margin-bottom: 0;
}
/* Тело диалога — единственная прокручиваемая зона. */
.mud-dialog.sbm-dialog-custom-header .dialog-inline-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.dialog-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.dialog-header-icon.mode-view {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
    color: var(--mud-palette-text-secondary);
}
.dialog-header-icon.mode-edit {
    background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent);
    color: var(--mud-palette-info);
}
.dialog-header-icon.mode-add {
    background: color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
    color: var(--mud-palette-success);
}
@keyframes dialogHeaderMorph {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Smooth field state transitions when dialog toggles view↔edit */
.mud-dialog.sbm-dialog .mud-input-outlined-border {
    transition: border-color 0.22s ease, border-width 0.22s ease, box-shadow 0.22s ease !important;
}
.mud-dialog.sbm-dialog .mud-input-label {
    transition: color 0.22s ease !important;
}

/* Primary action (first filled button) slides in when it appears */
.mud-dialog.sbm-dialog .mud-dialog-actions > .mud-button-filled {
    animation: dialogActionAppear 0.25s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes dialogActionAppear {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Confirm dialog: severity icon + body */
.confirm-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    flex-shrink: 0;
}
.confirm-dialog-icon.sev-info    { background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent);    color: var(--mud-palette-info); }
.confirm-dialog-icon.sev-warning { background: color-mix(in srgb, var(--mud-palette-warning) 24%, transparent); color: var(--mud-palette-warning); }
.confirm-dialog-icon.sev-danger  { background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);   color: var(--mud-palette-error); }
.confirm-dialog-icon.sev-success { background: color-mix(in srgb, var(--mud-palette-success) 22%, transparent); color: var(--mud-palette-success); }

/* Severity-tinted title area — формула color-mix согласована с trigger-hint в Form.razor */
.mud-dialog.sbm-dialog.confirm-sev-warning .mud-dialog-title {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    border-bottom-color: color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
}
.mud-dialog.sbm-dialog.confirm-sev-danger .mud-dialog-title {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    border-bottom-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}
.mud-dialog.sbm-dialog.confirm-sev-success .mud-dialog-title {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    border-bottom-color: color-mix(in srgb, var(--mud-palette-success) 38%, transparent);
}
.mud-dialog.sbm-dialog.confirm-sev-info .mud-dialog-title {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    border-bottom-color: color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
}

.confirm-dialog-body {
    padding: 4px 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}
.confirm-dialog-body b { font-weight: 600; }

/* Temp password dialog — credential rows with copy buttons */
.temp-password-body {
    padding: 4px 0;
}
.credential-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.credential-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.credential-value-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-gray-lighter);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
}
.credential-value {
    flex: 1;
    font-family: "SF Mono", ui-monospace, Consolas, monospace;
    font-size: 0.98rem;
    color: var(--mud-palette-text-primary);
    user-select: all;
    cursor: text;
    word-break: break-all;
    padding: 6px 0;
    line-height: 1.3;
    background: transparent;
}
.credential-value.credential-password {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.credential-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

/* Email verification dialog */
.mud-dialog.email-dialog {
    min-width: 420px;
    max-width: 460px;
}
@media (max-width: 599px) {
    .mud-dialog.email-dialog {
        min-width: auto !important;
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
    }
}

/* Mobile — compact dialog with margins */
@media (max-width: 599px) {
    .mud-dialog.sbm-dialog {
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
        max-height: 85vh !important;
        margin: auto !important;
        border-radius: 14px !important;
    }
    .mud-dialog.sbm-dialog .mud-dialog-title { padding: 14px 16px 10px; font-size: 1.05rem; }
    .mud-dialog.sbm-dialog .mud-dialog-content { padding: 12px 16px; overflow-x: hidden; }
    .mud-dialog.sbm-dialog .mud-dialog-actions { padding: 10px 14px; }
    .dialog-inline-header { padding: 14px 16px 10px; }
    .dialog-inline-body { overflow-x: hidden; padding: 14px 12px; }
    .simple-tab { padding: 12px 14px; font-size: 0.9rem; }

}

@media (max-width: 599px) {
    /* Reduce spacing between form fields on mobile */
    .mud-input-outlined {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .mud-stack > .mud-input-control {
        margin-bottom: -4px;
    }
}

/* ===== Mobile responsiveness ===== */

/* Horizontal scroll for tables on narrow screens */
.table-animate {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Adaptive content padding */
@media (max-width: 599px) {
    .mud-main-content {
        padding: 12px 8px !important;
        padding-top: 64px !important;
    }

    /* Smaller page headings */
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }
    .page-header-icon {
        font-size: 1.8rem !important;
    }

    /* Touch targets: minimum 44x44px */
    .mud-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Bulk actions — full width on mobile */
    .bulk-actions-float {
        left: 12px !important;
        right: 12px;
        transform: none !important;
        width: auto;
    }
    .bulk-actions-panel {
        width: 100%;
        justify-content: center;
    }

    /* Profile security row — compact padding */
    .security-row {
        padding: 12px !important;
    }
}

/* ===== Mobile card list (replaces tables on xs/sm) ===== */
.mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mobile-card {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    gap: 10px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.mobile-card:active {
    transform: scale(0.98);
}
.mobile-card-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mobile-card-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* === Бэйдж «устар.» — оранжевый, совпадает с палитрой warning-badge формы === */
.legacy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 0 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: color-mix(in srgb, var(--mud-palette-warning) 90%, var(--mud-palette-text-primary));
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
    line-height: 1;
    user-select: none;
}

/* Колонка № в таблице отчётов: число + бэйдж в одну строку */
.report-num-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.mobile-card-left {
    flex: 1;
    min-width: 0;
}
.mobile-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mobile-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}
.mobile-card-date {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}
.mobile-card-time {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}
.mobile-card-body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.mobile-card-action {
    flex-shrink: 0;
    margin-left: 4px;
}


/* Handbook tabs — desktop */
.handbook-desktop-tabs {
    display: inline-flex;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.handbook-desktop-tabs .simple-tab {
    border-bottom: 3px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.handbook-desktop-tabs .simple-tab.is-active {
    border-bottom: 3px solid var(--mud-palette-primary);
    transition: color 0.25s ease, border-color 0.25s ease;
}

/* Handbook tabs — mobile */
.handbook-tabs-mobile {
    border-radius: 12px;
}
.handbook-tabs-mobile .mud-tab {
    text-transform: none;
    font-weight: 500;
    min-width: auto;
    padding: 6px 16px;
}

/* User management tabs — stack vertically on narrow screens */
@media (max-width: 599px) {
    .user-tab-btn {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
        gap: 6px !important;
        flex: 1 1 100% !important;
    }
    .user-tab-btn .user-tab-icon {
        display: none;
    }
}

/* Tables — compact on mobile */
@media (max-width: 599px) {
    .mud-table-cell {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }
    .mud-table-head .mud-table-cell {
        padding: 8px !important;
        font-size: 0.75rem !important;
    }
    /* Date: stack vertically instead of inline */
    .date-cell {
        flex-direction: column;
        gap: 0 !important;
        font-size: 0.8rem;
    }
    .date-cell-sep {
        display: none;
    }
    /* Pager — compact */
    .mud-table-pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
    .mud-table-pagination .mud-table-pagination-caption {
        font-size: 0.75rem;
    }
}


/* Звёздочка обязательных полей — скрыта через ::after, валидация сохраняется */
.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    content: "" !important;
}

/* === Status chips (success / warning) — soft-tinted palette, consistent with Form trigger-hint badges.
     color-mix mirrors the exact formula used in Form.razor .trigger-field helper-text.
     Targets only semantic status chips; MudButton is unaffected (different CSS class tree). === */
.mud-chip.mud-chip-color-success.mud-chip-filled {
    background-color: color-mix(in srgb, var(--mud-palette-success) 14%, transparent) !important;
    color: color-mix(in srgb, var(--mud-palette-success) 90%, var(--mud-palette-text-primary)) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 38%, transparent) !important;
    box-shadow: none !important;
}
.mud-chip.mud-chip-color-warning.mud-chip-filled {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent) !important;
    color: color-mix(in srgb, var(--mud-palette-warning) 90%, var(--mud-palette-text-primary)) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 35%, transparent) !important;
    box-shadow: none !important;
}

/* ── Datetime group: карточка «дата + время» (паттерн Google Calendar / Linear) ──
   Каждое событие (мобилизация / начало / окончание / демобилизация) — отдельная
   карточка с меткой и двумя пикерами внутри. Убирает разрозненность двух полей. */

.dt-group {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    padding: 10px 14px 14px;
    background: var(--mud-palette-surface);
    transition: border-color .18s, box-shadow .18s;
}
.dt-group:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}
.dt-group-label {
    font-size: 0.69rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    user-select: none;
}
.dt-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}
/* Дата занимает оставшееся место, время — фиксировано */
.dt-group-row > :first-child { flex: 1 1 130px; min-width: 0; }
.dt-group-row > :last-child  { flex: 0 0 105px; }

/* Подсказка под dt-group когда дата введена частично (без полного ДД.ММ.ГГГГ) —
   smart-clamp в InputMaskHelper защищает от невалидных значений, но не от незавершённых.
   Раньше пользователь мог отправить отчёт с частичной датой → null в БД без предупреждения. */
.dt-group-warning {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--mud-palette-warning);
    line-height: 1.3;
    padding-left: 2px;
}

/* Accessibility: disable animations for sensitive users */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}