.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}

.mud-nav-link {
    white-space: normal !important;
}

.user-button {
    text-transform: none;
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom: 2px;
}

/* ===== MOBILE RESPONSIVE (phones < 600px) ===== */
@media (max-width: 599.98px) {
    /* Toolbar: stack title and action buttons vertically */
    .mobile-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .mobile-toolbar > .mud-stack {
        align-items: stretch !important;
    }

    /* Filter: wrap into multiple rows */
    .mobile-filter {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .mobile-filter > * {
        min-width: calc(50% - 8px);
        flex: 1 1 calc(50% - 8px);
    }
    .mobile-filter > .mud-button-root {
        flex: 0 0 calc(50% - 8px);
    }

    /* Data grid: limit height so it doesn't push content off screen */
    .mobile-grid .mud-table-container {
        max-height: 55vh !important;
    }

    /* Reduce main content padding */
    .mud-main-content .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .mud-main-content .mud-container.mt-4 {
        margin-top: 8px !important;
    }

    /* KCS detail row: card-like stacking */
    .kcs-detail-row > .mud-grid {
        row-gap: 2px;
    }

    /* Larger touch targets for icon buttons */
    .mud-table .mud-icon-button {
        min-width: 36px;
        min-height: 36px;
    }

    /* Stat cards: compact on mobile */
    .stat-card .mud-icon-root.mud-svg-icon {
        width: 28px !important;
        height: 28px !important;
    }

    /* Dialog: reduce internal padding on mobile */
    .mud-dialog .mud-dialog-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Pager: compact on mobile */
    .mud-table-pagination .mud-table-pagination-actions {
        gap: 0;
    }

    /* PWA Install Banner: stack vertically on mobile */
    .pwa-install-content {
        flex-wrap: wrap;
    }
    .pwa-install-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===== PWA Install Banner ===== */
#pwa-install-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
    padding: 12px 16px;
    align-items: center;
    justify-content: center;
    animation: pwa-slide-up 0.3s ease-out;
}
@keyframes pwa-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    width: 100%;
}
.pwa-install-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex-shrink: 0;
}
.pwa-install-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.pwa-install-text strong {
    font-size: 0.95rem;
    color: #1a1a2e;
}
.pwa-install-text span {
    font-size: 0.8rem;
    color: #666;
    margin-top: 2px;
}
.pwa-install-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.pwa-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.pwa-btn-primary {
    background: #1E6CB6;
    color: #fff;
}
.pwa-btn-primary:hover {
    background: #185A9A;
}
.pwa-btn-text {
    background: transparent;
    color: #666;
}
.pwa-btn-text:hover {
    background: rgba(0,0,0,0.05);
}

/* Tablet and below (< 960px) */
@media (max-width: 959.98px) {
    /* Reduce main content top/bottom margins */
    .mud-main-content .mud-container.mt-4 {
        margin-top: 8px !important;
    }
    .mud-main-content .mud-container.mb-4 {
        margin-bottom: 8px !important;
    }
}

/* ====================================================================
   DAILUC design system (theo nhận diện thương hiệu thật cpc.com.vn)
   - Card corner 14px (rounded.xl), control corner 8px do theme đặt
   - Shadow đúng evidence: card-shadow / card-shadow-light
   - Appbar trắng cần viền dưới #f0d9c8 để tách khỏi nội dung
   ==================================================================== */
.mud-card,
.mud-dialog,
.mud-expansion-panels {
    border-radius: 14px;
}

/* card-shadow: 0px 4px 6px -1px rgba(0,0,0,.1) — thay elevation-1..4 mặc định */
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-card.mud-elevation-1,
.mud-card.mud-elevation-2 {
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* card-shadow-light: 1px 4px 9px 0px #e9e9e9 cho elevation-3..4 */
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4 {
    box-shadow: 1px 4px 9px 0px rgb(233, 233, 233);
}

/* Appbar/Drawer trắng: thêm viền border-subtle để tách lớp thay vì đổ bóng đậm */
.mud-appbar {
    border-bottom: 1px solid #f0d9c8;
    box-shadow: none;
}
.mud-drawer {
    border-right: 1px solid #f0d9c8;
}

/* PWA banner dùng brand-primary mới */
.pwa-btn-primary {
    background: #c02d23;
}
.pwa-btn-primary:hover {
    background: #8a211a;
}

/* Snackbar (thông báo) mức Info/Normal: nền kem brand thay cho xanh mặc định MudBlazor */
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-normal {
    background-color: #FFEEE0 !important;
    color: #222222 !important;
}