/* ==========================================================================
   AGGROW UI Responsive
   Cross-module responsive and consistency bridge for existing feature CSS.
   ========================================================================== */

:root {
    --ag-appbar-height: 56px;
    --ag-page-gap-top: 12px;
    --ag-page-pad-x: 14px;
    --ag-page-pad-bottom: 16px;
}

.mud-main-content,
.mud-container,
.mud-grid,
.mud-grid-item,
.mud-stack,
.mud-paper {
    min-width: 0;
}

.ag-appbar {
    min-height: var(--ag-appbar-height) !important;
    height: var(--ag-appbar-height);
    border-bottom: 1px solid var(--ag-appbar-border);
    background: var(--ag-appbar-bg) !important;
    overflow: visible;
}

.ag-appbar .mud-toolbar {
    min-height: var(--ag-appbar-height) !important;
    height: var(--ag-appbar-height);
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: visible;
}

.ag-appbar-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 10px;
    text-decoration: none;
}

.ag-appbar-brand img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.ag-top-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 4px 0;
}

.ag-top-menu::-webkit-scrollbar {
    display: none;
}

.ag-top-menu .top-nav-btn {
    min-width: auto !important;
    min-height: 44px;
    height: 44px;
    padding: 6px 10px !important;
    white-space: nowrap;
}

.ag-top-menu .top-nav-btn .mud-button-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    line-height: 1.2;
    font-size: .875rem;
}

.ag-top-menu .mud-button-start-icon,
.ag-top-menu .mud-button-end-icon {
    margin: 0 2px !important;
    flex: 0 0 auto;
}

.ag-top-menu .mud-badge-root {
    overflow: visible;
}

.ag-top-menu .mud-badge {
    top: 2px;
    right: 2px;
}

.ag-main-content {
    min-height: 100vh;
    overflow-x: hidden;
    padding: calc(var(--ag-appbar-height) + var(--ag-page-gap-top)) 0 0 !important;
}

.ag-page-frame {
    width: 100%;
    max-width: 100vw;
    min-height: calc(100vh - var(--ag-appbar-height) - var(--ag-page-gap-top));
    padding: 0 var(--ag-page-pad-x) var(--ag-page-pad-bottom);
    box-sizing: border-box;
}

.ag-page-frame > :first-child {
    margin-top: 0 !important;
}

.mud-paper,
.ag-section,
.approval-section,
.approval-sidebar-panel,
.approval-summary-item,
.approval-health-item,
.approval-palette-block,
.approval-node,
.tg-section,
.tg-summary-card,
.tg-list-item,
.bulk-setup-shell,
.bulk-status-card,
.bulk-group-status-list,
.db-panel,
.db-panel-lg,
.pl-signal-card,
.th-filter-bar,
.th-kpi-card,
.ct-toolbar,
.vendor-toolbar,
.pricing-policy-layout > *,
.pricing-policy-profile-list,
.pricing-policy-settings,
.pricing-policy-backtest,
.od-dialog .mud-dialog,
.audit-hero,
.audit-meta,
.dv-filter-bar,
.dv-table-container,
.dv-detail-panel,
.bk-filter-bar,
.bk-kpi-bar,
.bk-kpi-card,
.bk-preview-panel,
.bk-empty,
.ocr-filelist,
.ocr-chat,
.ocr-json-view,
.ocr-table-wrap,
.profit-exec,
.profit-risk-cell,
.profit-formula-box {
    border-radius: var(--ag-radius) !important;
}

.mud-paper:not(.mud-elevation-0),
.approval-node,
.ai-chat-box,
.mud-dialog,
.mud-popover {
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

.mud-paper,
.approval-section,
.approval-sidebar-panel,
.approval-summary-item,
.approval-health-item,
.approval-palette-block,
.tg-section,
.tg-summary-card,
.tg-list-item,
.bulk-setup-shell,
.bulk-status-card,
.db-panel,
.db-panel-lg,
.pl-signal-card,
.th-filter-bar,
.th-kpi-card,
.ct-toolbar,
.vendor-toolbar,
.dv-filter-bar,
.dv-table-container,
.dv-detail-panel,
.bk-filter-bar,
.bk-kpi-bar,
.bk-kpi-card,
.bk-preview-panel,
.bk-empty,
.ocr-filelist,
.ocr-chat,
.ocr-json-view,
.ocr-table-wrap,
.profit-exec,
.profit-risk-cell,
.profit-formula-box {
    border-color: var(--ag-border) !important;
}

.approval-section-head,
.tg-section-head,
.ag-section-head,
.bulk-group-status-title,
.daily-header,
.ct-toolbar,
.vendor-toolbar,
.pricing-policy-page .mud-stack-row:first-child,
.dv-filter-bar,
.bk-filter-bar,
.th-filter-bar,
.ocr-section-header,
.ocr-chat-header {
    background: var(--ag-surface-soft) !important;
}

.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.db-section-title,
.ag-page-title,
.approval-title,
.tg-title,
.ct-title,
.th-page-title,
.bk-page-title,
.dv-page-title {
    letter-spacing: 0 !important;
}

.dv-page-title,
.bk-page-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-typography-caption,
.ag-kpi-label,
.kpi-compact-label,
.th-kpi-label,
.pl-signal-label {
    letter-spacing: .01em;
}

.mud-button-root,
.mud-chip,
.mud-input,
.mud-select,
.mud-table,
.mud-data-grid,
.mud-dialog {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.mud-table,
.mud-data-grid,
.db-table,
.db-table-sm {
    font-size: .82rem;
}

.mud-table thead th,
.mud-data-grid-header-cell,
.db-th-daily,
.db-th-bold,
.bulk-group-status-title,
.audit-trace-label,
.dv-table th,
.bk-thead-cell {
    color: var(--ag-text-muted) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.dv-table th,
.bk-thead-cell {
    background: rgba(var(--ag-primary-rgb), .055) !important;
}

.dv-table th,
.dv-table td,
.bk-thead-cell {
    padding: 8px 10px !important;
}

.mud-table tbody tr:hover,
.mud-data-grid-row:hover,
.ag-list-item:hover,
.approval-flow-item:hover,
.approval-type-item:hover,
.tg-list-item:hover,
.bulk-group-status-row.selectable:hover,
.dv-table tr:hover {
    background-color: rgba(var(--ag-primary-rgb), .055) !important;
}

.dv-table tr.dv-row-selected {
    background: rgba(var(--ag-primary-rgb), .12) !important;
}

.mud-table-container,
.mud-data-grid,
.table-scroll-mobile,
.bulk-grid-container,
.approval-canvas,
.tg-list,
.approval-sidebar-body,
.approval-list,
.bulk-group-status-list,
.dv-list-scroll,
.dv-detail-scroll,
.ocr-chat-messages,
.ocr-json-view,
.ocr-filelist-items {
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.42) transparent;
}

.mud-table-container::-webkit-scrollbar,
.mud-data-grid::-webkit-scrollbar,
.table-scroll-mobile::-webkit-scrollbar,
.bulk-grid-container::-webkit-scrollbar,
.approval-canvas::-webkit-scrollbar,
.tg-list::-webkit-scrollbar,
.approval-sidebar-body::-webkit-scrollbar,
.approval-list::-webkit-scrollbar,
.bulk-group-status-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mud-table-container::-webkit-scrollbar-thumb,
.mud-data-grid::-webkit-scrollbar-thumb,
.table-scroll-mobile::-webkit-scrollbar-thumb,
.bulk-grid-container::-webkit-scrollbar-thumb,
.approval-canvas::-webkit-scrollbar-thumb,
.tg-list::-webkit-scrollbar-thumb,
.approval-sidebar-body::-webkit-scrollbar-thumb,
.approval-list::-webkit-scrollbar-thumb,
.bulk-group-status-list::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.35);
    border-radius: 999px;
}

.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-content,
.mud-dialog .mud-dialog-actions,
.ocr-layout,
.ocr-left,
.ocr-right,
.ct-page,
.ct-toolbar-left,
.ct-toolbar-right {
    min-width: 0;
}

.mud-dialog-content {
    overflow-x: hidden;
}

.mud-input-control,
.mud-select,
.mud-autocomplete {
    max-width: 100%;
}

.mud-input-control .mud-input,
.mud-input-slot,
.mud-select-input {
    min-width: 0 !important;
}

.mud-button-root .mud-button-label,
.mud-chip-content,
.mud-tab,
.mud-typography,
.ag-kpi-value,
.kpi-compact-value,
.th-kpi-value,
.pl-signal-value {
    overflow-wrap: anywhere;
}

.ag-filter-bar,
.ct-toolbar,
.th-filter-bar,
.bk-filter-bar,
.daily-header,
.approval-header,
.tg-header,
.vendor-toolbar {
    max-width: 100%;
}

.ag-filter-bar .mud-stack-row,
.bk-filter-bar,
.th-filter-row,
.ct-toolbar-left,
.ct-toolbar-right,
.daily-header-actions,
.pl-product-toolbar,
.pl-product-filters,
.approval-header-actions,
.tg-actions,
.dv-filter-bar,
.ocr-right-toolbar,
.ocr-chat-input,
.profit-section-title {
    min-width: 0;
}

.kpi-compact-row,
.th-kpi-grid,
.approval-summary,
.tg-summary-grid,
.bulk-period-status {
    align-items: stretch;
}

.kpi-compact-card,
.th-kpi-card,
.approval-summary-item,
.tg-summary-card,
.bulk-status-card,
.pl-signal-card {
    min-width: 0;
}

.kpi-compact-value,
.th-kpi-value,
.ag-kpi-value,
.pl-signal-value {
    font-variant-numeric: tabular-nums;
}

.dv-page-subtitle,
.bk-page-subtitle,
.th-page-subtitle,
.profit-section-subtitle,
.profit-exec-copy {
    color: var(--ag-text-muted) !important;
}

.profit-page .mud-paper,
.profit-section,
.profit-exec {
    background-color: var(--ag-surface-soft);
}

@media (max-width: 1180px) {
    .bulk-workspace,
    .pricing-policy-layout,
    .approval-workspace,
    .tg-grid {
        grid-template-columns: 1fr !important;
    }

    .approval-sidebar {
        position: static !important;
    }

    .ocr-body {
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .ocr-left {
        width: 100% !important;
        max-height: none;
    }
}

@media (max-width: 960px) {
    :root {
        --ag-page-gap-top: 10px;
        --ag-page-pad-x: 12px;
    }

    .ag-main-content {
        padding-top: calc(var(--ag-appbar-height) + var(--ag-page-gap-top)) !important;
    }

    .mud-table-container,
    .mud-data-grid,
    .table-scroll-mobile,
    .bulk-grid-container {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .approval-palette,
    .approval-two-col,
    .tg-ai-grid,
    .bulk-period-status,
    .th-kpi-grid,
    .kpi-compact-row,
    .profit-risk-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    :root {
        --ag-page-gap-top: 8px;
        --ag-page-pad-x: 8px;
        --ag-page-pad-bottom: 14px;
    }

    .ag-appbar .mud-toolbar {
        padding-left: 4px;
        padding-right: 4px;
    }

    .ag-main-content {
        padding: calc(var(--ag-appbar-height) + var(--ag-page-gap-top)) 0 0 !important;
    }

    .mud-stack-row,
    .ag-toolbar,
    .ag-control-row,
    .approval-header,
    .approval-section-head,
    .approval-flow-actions,
    .tg-header,
    .tg-section-head,
    .daily-header,
    .ct-toolbar,
    .vendor-toolbar,
    .dv-filter-bar,
    .bk-filter-bar,
    .ocr-right-toolbar,
    .ocr-chat-input,
    .profit-section-title,
    .profit-pl-line,
    .bulk-selected-strip {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mud-table .mud-stack-row,
    .mud-data-grid .mud-stack-row,
    .mud-chipset .mud-stack-row {
        flex-direction: row !important;
        align-items: center !important;
    }

    .approval-section-actions,
    .approval-header-actions,
    .tg-actions,
    .tg-sticky-actions,
    .daily-header-actions,
    .ct-toolbar-left,
    .ct-toolbar-right,
    .th-filter-row,
    .th-filter-dates,
    .th-filter-actions,
    .pl-product-filters {
        width: 100%;
    }

    .approval-section-actions > *,
    .approval-header-actions > *,
    .tg-actions > *,
    .tg-sticky-actions > *,
    .daily-header-actions > *,
    .ct-toolbar-left > *,
    .ct-toolbar-right > *,
    .th-filter-row > *,
    .th-filter-dates > *,
    .th-filter-actions > *,
    .pl-product-filters > *,
    .ag-control-row > *,
    .dv-filter-bar > *,
    .bk-filter-bar > *,
    .ocr-right-toolbar > *,
    .ocr-chat-input > *,
    .profit-section-title > *,
    .profit-pl-line > *,
    .bulk-selected-strip > * {
        max-width: 100% !important;
    }

    .approval-summary,
    .tg-summary-grid,
    .approval-flow-health,
    .approval-palette,
    .approval-two-col,
    .tg-ai-grid,
    .bulk-period-status,
    .th-kpi-grid,
    .kpi-compact-row,
    .pl-signal-grid,
    .profit-risk-breakdown {
        grid-template-columns: 1fr !important;
    }

    .approval-node {
        width: min(320px, calc(100vw - 56px)) !important;
    }

    .approval-canvas {
        padding: 14px !important;
    }

    .mud-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }

    .mud-dialog-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mud-button-root {
        min-height: 36px;
    }

    .mud-table table,
    .mud-table .mud-table-root,
    .mud-data-grid table {
        min-width: 760px;
    }

    .ocr-layout {
        height: auto !important;
        min-height: calc(100vh - 64px);
        overflow: visible !important;
    }

    .ocr-body,
    .ocr-left,
    .ocr-right {
        overflow: visible !important;
    }

    .ocr-filelist,
    .ocr-chat {
        max-height: none !important;
    }

    .ocr-chat-messages {
        min-height: 180px;
        max-height: 42vh;
    }

    .dv-list-scroll,
    .dv-detail-scroll {
        max-height: none !important;
    }

    /* ================================================================
       MudTable toolbar global fix: tất cả màn hình có MudTable
       với nhiều nút/chip trong ToolBarContent sẽ bị vỡ do
       MudToolBar mặc định là flex-wrap: nowrap
       ================================================================ */
    .mud-table-toolbar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
        row-gap: 6px;
        overflow: visible !important;
    }

    /* Spacer đẩy buttons ra ngoài màn hình → ẩn trên mobile */
    .mud-table-toolbar .mud-spacer {
        display: none !important;
    }

    /* ChipSet xuống dòng riêng, wrap chips */
    .mud-table-toolbar .mud-chip-set {
        order: 5;
        width: 100%;
        flex-wrap: wrap !important;
        gap: 4px;
    }

    /* Buttons không bị thu hẹp */
    .mud-table-toolbar > .mud-button-root {
        flex-shrink: 0;
        white-space: nowrap;
        min-width: auto;
    }

    /* TextField / Select xuống dòng full width */
    .mud-table-toolbar > .mud-input-control,
    .mud-table-toolbar > .mud-select {
        order: 6;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 420px) {
    :root {
        --ag-page-pad-x: 6px;
    }

    .ag-section-body,
    .tg-section-body,
    .approval-section-body {
        padding: 10px !important;
    }

    .mud-tabs-toolbar {
        min-height: 40px;
    }

    .mud-tab {
        min-width: auto;
        padding-left: 10px;
        padding-right: 10px;
        font-size: .78rem;
    }
}