/* ============================================================
   WAO Finance — Global styles
   Aligned with docs/UI-GUIDELINES.md
   ============================================================ */

:root {
    --wao-primary: #1F4E78;
    --wao-primary-dark: #152D42;
    --wao-secondary: #D9E1F2;
    --wao-surface: #FFFFFF;
    --wao-background: #F5F7FA;
    --wao-text-primary: #1E293B;
    --wao-text-secondary: #64748B;
    --wao-border: #E2E8F0;
    --wao-divider: #CCCCCC;
    --wao-highlight: #FFF2CC;
    --wao-success: #22C55E;
    --wao-success-bg: #DCFCE7;
    --wao-warning: #F97316;
    --wao-warning-bg: #FFEDD5;
    --wao-error: #EF4444;
    --wao-error-bg: #FEE2E2;
    --wao-info: #94A3B8;
    --wao-info-bg: #F1F5F9;
    --wao-radius: 8px;
    --wao-radius-sm: 4px;
    --wao-radius-lg: 12px;
    --wao-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .06);
    --wao-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --wao-shadow-lg: 0 16px 32px rgba(15, 23, 42, .12);
}

html, body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: var(--wao-text-primary);
    background: var(--wao-background);
    font-feature-settings: "tnum";
}

.mono-num {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Auth pages (Login / Register / ForgotPassword...)
   Full-viewport split layout
   ============================================================ */

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 45%) 1fr;
    background: var(--wao-background);
}

/* Brand panel */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    background: linear-gradient(135deg, var(--wao-primary) 0%, var(--wao-primary-dark) 100%);
    color: #fff;
    overflow: hidden;
}

.auth-brand::before,
.auth-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .08) 0%, transparent 70%);
    pointer-events: none;
}
.auth-brand::before { width: 520px; height: 520px; top: -200px; right: -180px; }
.auth-brand::after  { width: 380px; height: 380px; bottom: -160px; left: -140px; }

.auth-brand__inner {
    position: relative;
    max-width: 440px;
    z-index: 1;
}

.auth-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 40px;
}
.auth-brand__logo svg { color: rgba(255, 255, 255, .85); }

.auth-brand__title {
    font-size: 34px;
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 16px;
    letter-spacing: -.01em;
}

.auth-brand__tagline {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 32px;
}

.auth-brand__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.auth-brand__pills span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .06);
}

.auth-brand__footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .04em;
}

/* Form panel */
.auth-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    background: var(--wao-surface);
}

.auth-form__inner {
    width: 100%;
    max-width: 420px;
    margin: auto;
}

.auth-form__header { margin-bottom: 32px; }
.auth-form__header h2 {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--wao-text-primary);
    letter-spacing: -.01em;
}
.auth-form__header p {
    font-size: 14px;
    color: var(--wao-text-secondary);
    margin: 0;
}

.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field { display: flex; flex-direction: column; gap: 6px; }

.auth-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--wao-text-primary);
    letter-spacing: .01em;
}
.auth-field label .req { color: var(--wao-error); margin-left: 2px; }

.auth-input {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--wao-surface);
    border: 1px solid var(--wao-border);
    border-radius: var(--wao-radius);
    transition: border-color .15s, box-shadow .15s;
}
.auth-input:focus-within {
    border-color: var(--wao-primary);
    box-shadow: 0 0 0 3px rgba(31, 78, 120, .12);
}
.auth-input__icon {
    color: var(--wao-text-secondary);
    margin-left: 14px;
    flex-shrink: 0;
}
.auth-input input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--wao-text-primary);
    outline: none;
    font-family: inherit;
}
.auth-input input::placeholder { color: #94A3B8; }

.auth-input__toggle {
    background: none;
    border: none;
    color: var(--wao-text-secondary);
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wao-radius-sm);
}
.auth-input__toggle:hover { color: var(--wao-primary); }
.auth-input__toggle:focus-visible {
    outline: 2px solid var(--wao-primary);
    outline-offset: 1px;
}

.auth-error {
    color: var(--wao-error);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -4px;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wao-text-primary);
    cursor: pointer;
    user-select: none;
}
.auth-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--wao-primary);
    cursor: pointer;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: var(--wao-radius);
    background: var(--wao-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s, transform .05s, box-shadow .15s;
    box-shadow: var(--wao-shadow-sm);
}
.auth-submit:hover { background: var(--wao-primary-dark); box-shadow: var(--wao-shadow-md); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:focus-visible {
    outline: 2px solid var(--wao-primary);
    outline-offset: 3px;
}

.auth-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--wao-radius);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 20px;
}
.auth-alert--error {
    background: var(--wao-error-bg);
    color: #991B1B;
    border: 1px solid #FECACA;
}
.auth-alert svg { flex-shrink: 0; }

.auth-form__help {
    text-align: center;
    margin: 24px 0 0;
    font-size: 13px;
    color: var(--wao-text-secondary);
}
.auth-form__help strong { color: var(--wao-text-primary); font-weight: 600; }

/* ============================================================
   MudBlazor text contrast override — default Color.Secondary
   có contrast thấp (xám nhạt), force dùng WAO slate darker
   để đọc rõ trên nền trắng + nền light-blue panel.
   ============================================================ */
.mud-text-secondary,
.mud-typography-body1.mud-secondary-text,
.mud-typography-body2.mud-secondary-text,
.mud-typography-caption.mud-secondary-text,
.mud-typography-subtitle1.mud-secondary-text,
.mud-typography-subtitle2.mud-secondary-text,
.mud-alert .mud-alert-message,
[class*="mud-typography"][class*="secondary-text"] {
    color: var(--wao-text-secondary) !important;
}

/* Caption/helper text dùng cho description/evidence — đủ đậm đọc rõ */
.wao-muted {
    color: var(--wao-text-secondary) !important;
    font-size: 0.8125rem;
}

/* Text primary chuẩn WAO (đè opacity default) */
.mud-typography {
    color: var(--wao-text-primary);
}

.auth-form__footer {
    text-align: center;
    font-size: 11px;
    color: var(--wao-text-secondary);
    letter-spacing: .04em;
    padding-top: 32px;
    border-top: 1px solid var(--wao-border);
    margin-top: 32px;
}

/* Validation from Blazor InputText.modified */
.auth-input input.invalid { /* do nothing, show error below */ }

@media (max-width: 960px) {
    .auth-page {
        grid-template-columns: 1fr;
    }
    .auth-brand {
        padding: 32px 24px;
        min-height: 240px;
    }
    .auth-brand__title { font-size: 24px; }
    .auth-brand__logo { margin-bottom: 16px; font-size: 24px; }
    .auth-brand__tagline { margin-bottom: 16px; }
    .auth-form { padding: 32px 24px; }
}

/* ============================================================
   Legacy Blazor error boundary
   ============================================================ */
.blazor-error-boundary {
    background: #FEE2E2;
    color: #991B1B;
    padding: 12px 20px;
    border-left: 4px solid var(--wao-error);
}
.blazor-error-boundary::after { content: "Đã xảy ra lỗi."; }

/* Hide default Identity validation summary from page (we use field-level) */
.validation-summary-errors ul { display: none; }

/* Util: state chips (sẽ dùng ở các trang review) */
.wao-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}
.wao-chip--ok      { color: #166534; background: var(--wao-success-bg); }
.wao-chip--treo    { color: #9A3412; background: var(--wao-warning-bg); }
.wao-chip--review  { color: #991B1B; background: var(--wao-error-bg); }
.wao-chip--pending { color: #475569; background: var(--wao-info-bg); }
.wao-chip--locked  { color: #fff; background: var(--wao-primary); }
.wao-chip--primary { color: #fff; background: var(--wao-primary); }

/* ============================================================
   Memo cell — nội dung CK đầy đủ không cắt ký tự (CEO chốt 2026-05-08).
   Dùng cho cột "Nội dung CK" trong table đơn lẻ + dữ liệu cũ + chip gợi ý.
   ============================================================ */
.wao-memo-cell {
    white-space: normal;
    word-break: break-word;
    max-width: 280px;
}
.wao-suggest-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 320px;
}
.wao-suggest-memo {
    white-space: normal;
    word-break: break-word;
    font-size: 0.85em;
    color: var(--mud-palette-text-secondary);
}
.wao-suggest-warning {
    font-size: 0.8em;
    color: var(--mud-palette-warning);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   Empty state — list pages with no data
   ============================================================ */
.wao-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #64748B;
}
.wao-empty-state__icon { font-size: 64px !important; color: #94A3B8; margin-bottom: 16px; }
.wao-empty-state__heading { font-size: 18px; font-weight: 500; color: #1E293B; margin-bottom: 8px; }
.wao-empty-state__subtext { font-size: 14px; margin-bottom: 16px; }

/* ============================================================
   S1 (UX audit 2026-04-25) — Mobile responsive
   Áp cho Dashboard, Bank/COD/Order/Purchase review, ĐNTT pages.
   ============================================================ */

/* Tables: horizontal scroll khi mobile (table không tự shrink readable) */
.wao-tree-table,
.mud-table,
.mud-simple-table {
    max-width: 100%;
}

/* Wrapper class — wrap quanh table dài */
.wao-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 0 8px;
}

@media (max-width: 600px) {
    /* Reduce container padding */
    .mud-container { padding-left: 8px !important; padding-right: 8px !important; }

    /* Smaller fonts cho readability */
    .mono-num { font-size: 0.875rem; }

    /* KPI card: stack tightly */
    .mud-paper.pa-3 { padding: 12px !important; }

    /* Stats chip row: wrap auto */
    .mud-stack-row { flex-wrap: wrap !important; gap: 6px !important; }

    /* Tables: enable horizontal scroll */
    .wao-tree-table { font-size: 0.8125rem; }
    .mud-table-root { overflow-x: auto; display: block; }

    /* H4 page title smaller on mobile */
    .mud-typography-h4 { font-size: 1.25rem !important; }
    .mud-typography-h5 { font-size: 1.125rem !important; }
    .mud-typography-h6 { font-size: 1rem !important; }

    /* Filter bar: compact */
    .mud-paper.pa-4 { padding: 12px !important; }

    /* Hide non-essential metadata trên mobile */
    .wao-mobile-hide { display: none !important; }
}

/* TOC mobile chip strip cho Dashboard (S2) */
.wao-toc-chip {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-primary);
    background: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.wao-toc-chip:hover, .wao-toc-chip:active {
    background: var(--mud-palette-primary);
    color: white;
}

@media (max-width: 600px) {
    .wao-toc-mobile { display: block !important; }
}

@media (max-width: 480px) {
    /* Phone narrow */
    .mono-num { font-size: 0.8125rem; }
    .mud-typography-h5.mono-num { font-size: 1rem !important; }
    .wao-empty-state__heading { font-size: 16px; }

    /* Filter MudGrid: 1 col mỗi field */
    .mud-grid-item { flex-basis: 100% !important; max-width: 100% !important; }
}