/* =============================================================
   POS Dashboard — Design Tokens
   Bổ sung cho MudBlazor --mud-palette-* variables.
   Dùng cho: custom HTML, inline styles, non-MudBlazor elements.
   ============================================================= */
:root {
  /* Background & Surface */
  --pos-bg:             #F2F4F8;
  --pos-bg-alt:         #EEF1F7;
  --pos-surface:        #FFFFFF;

  /* Primary brand */
  --pos-primary:        #2051A3;
  --pos-primary-dark:   #1B3A5C;
  --pos-primary-light:  #3A6FCC;

  /* Accent */
  --pos-teal:           #1EAA90;

  /* Status */
  --pos-success:        #27AE60;
  --pos-success-bg:     #E8F6EE;
  --pos-danger:         #DC3545;
  --pos-danger-bg:      #FDECEA;
  --pos-warning:        #F39C12;
  --pos-warning-bg:     #FEF6E7;
  --pos-info:           #3A6FCC;
  --pos-info-bg:        #EBF0FB;

  /* Typography */
  --pos-text-heading:   #1A2B45;
  --pos-text-body:      #3D4F65;
  --pos-text-muted:     #6B7A8D;
  --pos-text-disabled:  #B0BAC9;

  /* Border */
  --pos-border:         #DDE3EE;
  --pos-border-strong:  #B8C4D8;

  /* Chart palette (theo thứ tự series) */
  --pos-chart-1:        #2051A3;
  --pos-chart-2:        #1EAA90;
  --pos-chart-3:        #F39C12;
  --pos-chart-4:        #DC3545;
  --pos-chart-5:        #3A6FCC;
  --pos-chart-budget:   #C8CEDE;

  /* Shadow */
  --pos-shadow-card:    0 2px 8px rgba(26, 43, 69, 0.08);
  --pos-shadow-hover:   0 4px 16px rgba(26, 43, 69, 0.14);

  /* Border radius */
  --pos-radius-sm:      4px;
  --pos-radius-md:      8px;
  --pos-radius-lg:      12px;
}

/* Scrollbar nhẹ nhàng hơn trên Chrome/Edge */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pos-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--pos-border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--pos-text-muted); }

/* Delta values: dùng trong các page hiển thị % so sánh */
.pos-delta-up   { color: var(--pos-success); font-weight: 600; }
.pos-delta-down { color: var(--pos-danger);  font-weight: 600; }

/* Flat button — bỏ box-shadow MudBlazor default (Elevation=2 = 0 2px 8px ...)
   Áp dụng cho mọi trạng thái: normal, hover, focus, active */
.mud-button-root,
.mud-button-root:hover,
.mud-button-root:focus,
.mud-button-root:active {
    box-shadow: none !important;
}

/* ── Sidebar: active nav item highlight ─────────────────────────────────
   DrawerBackground = #1B3A5C (dark navy).
   MudBlazor default active color (#2051A3) không đủ tương phản trên nền
   này → override để item được chọn nổi bật rõ ràng. */
.mud-drawer .mud-nav-link.active {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-left: 3px solid var(--pos-primary-light);
    padding-left: calc(16px - 3px) !important;
}

.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Hover nhẹ cho non-active items */
.mud-drawer .mud-nav-link:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── Sidebar visual hierarchy (3 cấp) ───────────────────────────────────
   Nền drawer tối #1B3A5C → dùng opacity trắng để phân tầng bậc:
   L1 (section)   → bold 700, trắng 95%  — landmark chính
   L2 (sub-group) → medium 500, trắng 65% — nhãn nhóm phụ
   L3 (leaf link) → normal 400, trắng 50% — destination, mờ nhất khi inactive  */

/* L1 — Cửa hàng / Vận hành / Quản trị */
.mud-drawer .mud-nav-menu > .mud-nav-group > .mud-nav-group-title {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 0.875rem;
}

/* L2 — Giám sát / Giao dịch / Báo cáo / Nhật ký ... */
.mud-drawer .mud-nav-menu > .mud-nav-group .mud-nav-group > .mud-nav-group-title {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.8125rem;
}

/* L3 — leaf link (inactive) */
.mud-drawer .mud-nav-menu > .mud-nav-group .mud-nav-group .mud-nav-link:not(.mud-nav-group-title) {
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 0.8125rem;
    font-weight: 400;
}

/* L3 active — đảm bảo specificity cao hơn rule L3 inactive ở trên */
.mud-drawer .mud-nav-menu > .mud-nav-group .mud-nav-group .mud-nav-link.active {
    color: #ffffff !important;
    font-weight: 600;
}

/* ── Responsive: Page header (title + action button) ────────────────────
   Thay thế MudStack Row="true" Justify.SpaceBetween — tự wrap trên mobile.
   Dùng: <div class="pos-page-header mb-4"> ... </div>
         <MudText ... Class="pos-page-header-title"> ... </MudText>
         <MudButton ... Class="pos-page-header-btn"> ... </MudButton>      */
.pos-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.pos-page-header-title { flex: 1; min-width: 0; }

@media (max-width: 599.98px) {          /* xs: mobile dọc */
    .pos-page-header { gap: 12px; }
    .pos-page-header-title { flex-basis: 100%; }
    .pos-page-header-btn { width: 100% !important; }
}

/* ── DataTable standard (pos-table) ─────────────────────────────────────
   Dùng cho mọi DataTable trong POS.Web.
   Xem PosTableBase<T> để dùng logic sort/paginate đi kèm.
   QUAN TRỌNG: MudPaper chứa table PHẢI có Style="overflow-x:auto"
   để table scroll được trên mobile — không thêm → bị clip. */
.pos-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* iOS scroll mượt có momentum */
    max-width: 100%;
}

.pos-table {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
    font-size: 0.875rem;
}

.pos-table thead tr {
    background-color: #EEF1F7;
    color: #1A2B45;
    border-bottom: 2px solid #2051A3;
}

.pos-table th {
    padding: 10px 16px;
    white-space: nowrap;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}

.pos-table th:hover { background-color: #E3E8F4; }

.pos-table td {
    padding: 8px 16px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: middle;
}

.pos-table tbody tr:hover           { background-color: rgba(25, 118, 210, 0.05); }
.pos-table tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); }

/* Sort icon: ⇅ / ↑ / ↓ */
.pos-sort    { font-size: 0.7rem; color: #6B7A8D; margin-left: 3px; }
.pos-sort.on { color: #2051A3; font-weight: 700; }

/* ── Pivot / Cross-tab report table (rpt-pivot-table) ───────────────────
   Dùng cho SalesByCategoryPage — bảng tổng hợp theo ngành hàng × ngày.
   Kết hợp với class pos-table để inherit base styles.               */
.rpt-pivot-table thead tr {
    background-color: #4FC3F7;   /* cyan nhạt theo ảnh thiết kế */
    color: #1A2B45;
    border-bottom: 2px solid #039BE5;
}

.rpt-pivot-table th {
    padding: 8px 12px;
    white-space: nowrap;
    font-weight: 600;
    text-align: center;
    cursor: default;
    user-select: none;
    line-height: 1.3;
}

.rpt-pivot-table th:hover { background-color: #4FC3F7; } /* no hover effect on header */

.rpt-pivot-table td {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: top;
    line-height: 1.4;
}

.rpt-pivot-table tbody tr:hover           { background-color: rgba(79, 195, 247, 0.06); }
.rpt-pivot-table tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); }

/* Total footer row */
.rpt-pivot-table tfoot tr.rpt-pivot-total {
    background-color: #ECEFF1;
    border-top: 2px solid #B0BEC5;
    font-weight: 700;
}

.rpt-pivot-table tfoot tr.rpt-pivot-total td {
    padding: 8px 12px;
    border-bottom: none;
    vertical-align: middle;
}

/* ── Flat UI overrides ───────────────────────────────────────────────────
   Làm mảnh border của input Outlined (MudTextField, MudSelect, MudAutocomplete...).
   Mặc định MudBlazor dùng 1px nhưng màu khá nhạt → tăng tương phản nhẹ.
   KHÔNG thêm border cho MudPaper/MudCard — hairline shadow (E1–E5 = 0 0 0 1px)
   đã tạo viền rồi; thêm border CSS sẽ gây viền đôi.                       */

/* Border mặc định (không lỗi, không focus): dùng --pos-border-strong (#B8C4D8) */
.mud-input-outlined:not(.mud-input-error):not(.mud-focused) .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--pos-border-strong);
}

/* Border khi focus: giữ màu primary MudBlazor (--mud-palette-primary) */
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px;
}

/* Dropdown list item (MudSelect, MudAutocomplete, MudMenu)
   Default MudBlazor: padding 8px + .mud-list-item-text margin 4px = 24px spacing/item
   Target: padding 5px + text-margin 2px → gọn hơn ~10px/item (~34px/row)
   Mobile: giữ min 34px đủ tap target (WCAG 2.5.5 ≥ 24px) */
.mud-list-item {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.mud-list-item-text {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

/* Sidebar nav link — padding dọc desktop
   4px padding + 1px margin = 10px/item (giảm ~30% so với 5px+2px=14px trước)
   margin override: Margin.Dense mặc định 2px → giảm xuống 1px */
.mud-drawer .mud-nav-link {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

/* ── Vấn đề 1: Button thấp hơn input trong filter panel ─────────────────
   Nguyên nhân: MudItem chứa button dùng align-center, nhưng input có floating
   label làm tổng chiều cao của hàng lớn hơn button → button trôi giữa, trông nhỏ.
   Fix: align-self: flex-end trên MudStack (direct child của MudItem) —
   override align-items:center của parent mà không cần :has().
   MudStack Row="true" render class "mud-stack mud-stack-row".
   Chỉ áp sm+ vì mobile button group ở hàng riêng (xs="12"). */
@media (min-width: 600px) {
    .mud-grid-item.align-center > .mud-stack.mud-stack-row {
        align-self: flex-end !important;
        margin-bottom: 0 !important;
    }
}

/* ── Vấn đề 3: KPI cards chiều cao không đồng nhất ─────────────────────
   Nguyên nhân: wrapper div dùng flex:1, cao bằng nhau theo flex stretch,
   nhưng MudPaper bên trong chỉ cao theo content → label 2 dòng = card cao hơn.
   Fix: MudPaper fill 100% chiều cao wrapper.
   Selector: .d-flex.flex-wrap > div > .mud-paper (pattern KPI row dùng plain div) */
.d-flex.flex-wrap > div > .mud-paper {
    height: 100%;
    box-sizing: border-box;
}

/* ── Mobile safety — tap targets & readability (xs ≤ 599px) ─────────────
   Nguyên tắc: desktop compact (density cao), mobile nới đủ vùng chạm.
   Ngưỡng tối thiểu: 40px cho mọi element tương tác (WCAG 2.5.5 target size).
   LineHeight nới lên 1.5 (từ 1.45) để text dễ đọc hơn trên màn nhỏ.       */
@media (max-width: 599.98px) {

    /* Line-height: nới từ 1.45 → 1.5 trên mobile */
    :root { --mud-typography-default-lineheight: 1.5; }

    /* Button tap target: min 40px (MudBlazor default Medium = 36px) */
    .mud-button-root {
        min-height: 40px !important;
    }

    /* Icon button: padding 8px → tổng 8+24+8 = 40px tap area */
    .mud-icon-button {
        padding: 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Dropdown list item (MudSelect, MudAutocomplete): nới về 8px */
    .mud-list-item {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Sidebar nav link: nới tap target trên mobile (override desktop 4px) */
    .mud-drawer .mud-nav-link {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    /* MudTablePager select & pagination buttons: đủ vùng chạm */
    .mud-table-pagination .mud-select .mud-input-root {
        min-height: 40px !important;
    }
}