/* =====================================================================
   ARARBOT page system — header / card / spacing dùng chung cho MỌI trang.
   Mục tiêu: thay 10 kiểu hero/header bespoke bằng 1 component nhất quán.
   Dùng token --sh-* từ app-shell.css (đã nạp trước file này).
   ===================================================================== */

/* ---- Khung trang chuẩn (padding + max-width) cho trang không tự bọc container ---- */
.app-main :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-sans);
    color: var(--text);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.018em;
}

.app-main :where(p, li, td, th, label, input, select, textarea, button) {
    font-family: var(--font-sans);
}

.app-main :where(button, .btn, [role="button"], input, select, textarea) {
    border-radius: var(--radius-md);
}

.app-main :where(button, .btn, [role="button"]) {
    font-weight: 600;
}

.app-main :where(input, select, textarea):focus-visible {
    border-color: var(--accent);
    outline: 0;
    box-shadow: var(--focus-ring);
}

.app-main :where(table) {
    font-variant-numeric: tabular-nums;
}

.pg-wrap {
    padding: clamp(16px, 2.2vw, 28px);
    max-width: 1440px;
    margin: 0 auto;
}

/* ---- Page header chuẩn ---- */
.pg-header {
    display: flex;
    align-items: flex-end;
    gap: 14px 22px;
    flex-wrap: wrap;
    margin: 0 0 24px;
}

.pg-header__main {
    min-width: 0;
}

.pg-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--accent, #16625d);
    margin: 0 0 7px;
}

.pg-title {
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--text, #16233a);
    margin: 0;
    text-wrap: balance;
}

.pg-sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-light, #5c6b80);
    margin: 7px 0 0;
    max-width: 72ch;
}

.pg-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

/* ---- Surface / card chuẩn ---- */
.surface-card {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e3ebf3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow, 0 1px 2px rgba(16, 40, 72, .05));
}

.surface-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e3ebf3);
}

.surface-card__head h2,
.surface-card__head h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
    color: var(--text, #16233a);
}

.surface-card__body {
    padding: 18px;
}

/* Shared production states */
.surface-card :where(p, td, th, dd, .pg-sub),
.stat-tile {
    overflow-wrap: anywhere;
}

:where(.surface-card, .stat-tile, .pg-wrap) :where(input, select, textarea) {
    max-width: 100%;
}

:where(.surface-card, .pg-wrap) table {
    width: 100%;
    border-collapse: collapse;
}

:where(.surface-card, .pg-wrap) th {
    text-align: left;
}

:where(.surface-card, .pg-wrap) :where(button, .btn, a.btn)[disabled],
:where(.surface-card, .pg-wrap) :where(button, .btn, a.btn)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .58;
    box-shadow: none;
    transform: none;
}

/* ---- Stat tile chuẩn (grid KPI) ---- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.stat-tile {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e3ebf3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow, 0 1px 2px rgba(16, 40, 72, .05));
    padding: 15px 16px;
}

.stat-tile__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-light, #8496a9);
}

.stat-tile__v {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-top: 6px;
    color: var(--text, #16233a);
    font-variant-numeric: tabular-nums;
}

.stat-tile__d {
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 5px;
    color: var(--text-light, #5c6b80);
}

/* Inbox/chat: bỏ rail điều hướng phụ (trùng 100% với sidebar chính) để mở rộng khu vực chat.
   Sidebar chính (app-shell) đã lo điều hướng; rail cũ chỉ tốn diện tích và gây 2 rail song song. */
.chat-app-sidebar {
    display: none !important;
}

.chat-app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}

/* Chuẩn hoá các control cũ (vốn thiết kế cho hero nền tối) khi đưa vào .pg-actions nền sáng */
.pg-actions .stats-range-picker {
    background: var(--card, #fff);
    border: 1px solid var(--border, #dbe4ee);
    color: var(--text, #16233a);
    box-shadow: var(--shadow, 0 1px 2px rgba(16, 40, 72, .05));
}

.pg-actions .stats-range-picker span,
.pg-actions .stats-range-picker select {
    color: var(--text, #16233a);
    background: transparent;
}

.pg-actions .stats-range-picker svg {
    fill: currentColor;
    opacity: .65;
}

@media (max-width: 700px) {
    .pg-wrap {
        padding: 14px 12px 24px;
    }

    .pg-header {
        align-items: stretch;
        margin-bottom: 18px;
    }

    .pg-actions {
        margin-left: 0;
        width: 100%;
    }

    .pg-actions > :where(button, .btn, a.btn) {
        min-height: 44px;
    }

    .surface-card__head,
    .surface-card__body {
        padding-inline: 14px;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-tile {
        min-width: 0;
        padding: 13px 14px;
    }

    .stat-tile__v {
        font-size: 22px;
    }
}

@media (max-width: 390px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}