/* ═══════════════════════════════════════════════════════════════════════════
   TVDT Admin Blazor - Minimal Custom Styles v3.0
   MudBlazor 8.14 | .NET 10 | C# 14
   
   DESIGN PHILOSOPHY:
   - MudTheme is the single source of truth
   - Only business-specific components here
   - Minimal overrides, maximum MudBlazor leverage
   - Outlook-inspired density and professional layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. GLOBAL RESET & BASE (Minimal)
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. LAYOUT STRUCTURE (Non-MudBlazor)
   ═══════════════════════════════════════════════════════════════════════════ */

.page-container {
    min-height: calc(100vh - 64px);
    padding: 20px;
}

.content-wrapper {
    max-width: 1920px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PAGE HEADER (Custom Business Component)
   ═══════════════════════════════════════════════════════════════════════════ */

.page-header {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: white;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 8px; /*24px;*/
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

.page-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.page-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.page-header__icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.page-header__content {
    flex: 1;
    min-width: 0;
}

.page-header__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.page-header__subtitle {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.page-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Compact Variant */
.page-header--compact {
    padding: 12px 20px;
    background: white;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-table-lines);
}

    .page-header--compact .page-header__icon {
        width: 40px;
        height: 40px;
        background: var(--mud-palette-primary-lighten);
        color: var(--mud-palette-primary);
        font-size: 20px;
    }

    .page-header--compact .page-header__title {
        font-size: 18px;
        color: var(--mud-palette-text-primary);
    }

/* ═══════════════════════════════════════════════════════════════════════════
   4. QUICK STATS CARDS (Business Component)
   ═══════════════════════════════════════════════════════════════════════════ */

.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 8px; /*    24px;*/
}

.stat-card {
    position: relative;
    padding: 16px;
    background: white;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        opacity: 0;
        transition: opacity 200ms;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }

        .stat-card:hover::before {
            opacity: 1;
        }

.stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Color Variants */
.stat-card--primary::before {
    background: var(--mud-palette-primary);
}

.stat-card--primary .stat-card__icon {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
}

.stat-card--success::before {
    background: var(--mud-palette-success);
}

.stat-card--success .stat-card__icon {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success);
}

.stat-card--warning::before {
    background: var(--mud-palette-warning);
}

.stat-card--warning .stat-card__icon {
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning);
}

.stat-card--error::before {
    background: var(--mud-palette-error);
}

.stat-card--error .stat-card__icon {
    background: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error);
}

.stat-card--info::before {
    background: var(--mud-palette-info);
}

.stat-card--info .stat-card__icon {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info);
}

.stat-card__content {
    flex: 1;
    min-width: 0;
}

.stat-card__label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.stat-card__value {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
    margin: 0;
}

.stat-card__change {
    font-size: 11px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stat-card__change--positive {
    color: var(--mud-palette-success);
}

.stat-card__change--negative {
    color: var(--mud-palette-error);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FILTER PANEL (Collapsible Business Component)
   ═══════════════════════════════════════════════════════════════════════════ */

.filter-panel {
    background: white;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.filter-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    /*    background: var(--mud-palette-background-gray);*/
    border-bottom: 1px solid var(--mud-palette-divider-light);
    cursor: pointer;
    user-select: none;
    transition: background 100ms;
}

    .filter-panel__header:hover {
        background: var(--mud-palette-table-hover);
    }

.filter-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.filter-panel__toggle {
    color: var(--mud-palette-text-secondary);
    transition: transform 200ms;
    font-size: 18px;
}

.filter-panel--expanded .filter-panel__toggle {
    transform: rotate(180deg);
}

.filter-panel__body {
    padding: 20px;
    display: none;
}

.filter-panel--expanded .filter-panel__body {
    display: block;
}

.filter-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.filter-panel__actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider-light);
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. DATA GRID ENHANCEMENTS (Minimal Overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

.datagrid-container {
    background: white;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.datagrid-toolbar {
    padding: 12px 20px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    flex-wrap: wrap;
}

.datagrid-toolbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.datagrid-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* MudDataGrid - Only essential overrides */
.mud-table-head .mud-table-cell {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mud-table-row:hover {
    background: var(--mud-palette-table-hover);
}

/* Action buttons in grid */
.grid-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. DOCUMENT GRID (Business-Specific Component)
   ═══════════════════════════════════════════════════════════════════════════ */

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.document-card {
    position: relative;
    background: white;
    border: 2px solid var(--mud-palette-table-lines);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .document-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        border-color: var(--mud-palette-primary);
    }

.document-card--selected {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
}

.document-card__checkbox {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.document-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary-lighten);
    border-radius: 12px;
    align-self: flex-start;
}

.document-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.document-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
    line-height: 1.4;
}

.document-card__author {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.document-card__description {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.document-card__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.document-card__stats {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

    .document-card__stats span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.document-card__actions {
    display: flex;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
    opacity: 0;
    transition: opacity 200ms;
}

.document-card:hover .document-card__actions {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. SEARCH PAGE (Business-Specific)
   ═══════════════════════════════════════════════════════════════════════════ */

.search-hero {
    background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-primary) 100%);
    color: white;
    border-radius: 8px;
    padding: 32px;
    margin-bottom: 8px;
}

    .search-hero .mud-input {
        background-color: white;
    }

.search-result-item {
    padding: 20px;
    background: white;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 8px;
    margin-bottom: 16px;
    transition: all 200ms;
    border-left: 4px solid transparent;
}

    .search-result-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        border-left-color: var(--mud-palette-primary);
    }

.result-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    color: var(--mud-palette-primary);
    transition: color 200ms;
}

    .result-title:hover {
        color: var(--mud-palette-primary-darken);
        text-decoration: underline;
    }

.result-description {
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.filters-section {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-table-lines);
    padding: 20px;
}

.empty-state {
    padding: 64px 32px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

    .empty-state .mud-icon-root {
        font-size: 64px;
        opacity: 0.5;
    }
/* WRAPPER CHÍNH */
.info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

/* ICON CONTAINER */
.info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--mud-palette-primary-hover, #eef2ff);
    border-radius: 10px;
}

/* TEXT CONTENT */
.info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    /* GIÚP NHẤN MẠNH TIÊU ĐỀ */
    .info-content .font-semibold {
        font-weight: 600;
    }

/* MÀU NHẸ */
.info-section {
    padding: 8px 0;
}

/* TỔNG THỂ MỀM MẠI – LÀM UI "thở" hơn */
.info-item:not(:last-child) {
    border-bottom: 1px dashed var(--border-main, #ddd);
    padding-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. CUSTOM SCROLLBAR (Outlook-Style)
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-text-disabled);
    border-radius: 6px;
    border: 3px solid var(--mud-palette-background-gray);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-text-secondary);
    }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-text-disabled) var(--mud-palette-background-gray);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. LOADING & SKELETON STATES
   ═══════════════════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient( 90deg, var(--mud-palette-background-gray) 25%, var(--mud-palette-divider-light) 50%, var(--mud-palette-background-gray) 75% );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton--text {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton--circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
    .page-container {
        padding: 12px;
    }

    .page-header {
        padding: 16px;
    }

    .page-header__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header__icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .page-header__title {
        font-size: 18px;
    }

    .quick-stats {
        grid-template-columns: 1fr;
    }

    .filter-panel__grid {
        grid-template-columns: 1fr;
    }

    .document-grid {
        grid-template-columns: 1fr;
    }

    .datagrid-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .datagrid-toolbar__left,
    .datagrid-toolbar__right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-panel__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .quick-stats {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

*:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    .page-header,
    .filter-panel,
    .datagrid-toolbar,
    .mud-button,
    .mud-pagination {
        display: none;
    }

    body {
        background: white;
        font-size: 12pt;
    }

    .document-card,
    .search-result-item {
        border: 1px solid #000;
        box-shadow: none;
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }

    .mud-table-cell {
        padding: 8pt;
        font-size: 11pt;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   
   ═══════════════════════════════════════════════════════════════════════════ */