/*
 * cash-components.css — Shared layout classes for Cash Intelligence dashboards
 *
 * What it does:
 *   Defines the Hex-Reinforced Design System card/chart layout classes
 *   (.kpi-grid, .kpi-module, .module-title, .module-metric, .module-sub,
 *   .trend-up, .trend-down, .chart-row, .chart-container, .chart-title,
 *   .chart-canvas) used by all Cash/Frontend dashboard pages. These classes
 *   are copied verbatim from the canonical inline block in
 *   Credit/Frontend/dashboards/credit_customer.html so Cash pages render
 *   the same KPI-card + chart layout instead of raw stacked text.
 *   SECTION 2 (see banner below) adds the header / filter-bar / section-header
 *   / data-table classes, copied from ATM_INTEL + Credit canonical sources.
 *
 * Depends on:
 *   /shared/css/hex-design-system.css — CSS variables: --border-color,
 *   --hex-blue, --text-muted, --accent-green, --accent-red, --font-mono.
 *   Must be linked AFTER the three /shared/css/hex-*.css files and BEFORE
 *   each page's local *-styles.css so page-local overrides still win.
 */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* KPI Module */
.kpi-module {
    background: rgba(17, 24, 39, 0.6);
    border: 1px solid var(--border-color);
    position: relative;
    padding: 24px;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px,
            100% 100%, 0 100%);
}

.kpi-module::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='34' viewBox='0 0 20 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0l10 5.77v11.55L10 23.1 0 17.32V5.77L10 0zm0 34l-10-5.77V16.68l10 5.77 10-5.77v11.55L10 34z' fill='%233b82f6' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    pointer-events: none;
}

.module-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--hex-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.module-metric {
    font-family: var(--font-mono);
    font-size: 42px;
    font-weight: 700;
    color: white;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
}

.module-metric::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 90px;
    border: 1px solid rgba(59, 130, 246, 0.1);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}

.module-sub {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.trend-up {
    color: var(--accent-green);
}

.trend-down {
    color: var(--accent-red);
}

/* Chart Containers */
.chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.chart-container {
    background: rgba(17, 24, 39, 0.4);
    border: 1px solid var(--border-color);
    padding: 24px;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px,
            100% 100%, 0 100%);
}

.chart-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--hex-blue);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.chart-canvas {
    position: relative;
    height: 300px;
}

.chart-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
 * SECTION 2 — Header, filter bar / controls, section headers, data tables
 * ==========================================================================
 * Added 2026-06-11 to cover the second batch of undefined classes found by
 * audit across all 14 Cash dashboards (filter bar rendered browser-default).
 *
 * Canonical sources (copied, not invented):
 *   - ATM/ATM_INTEL/Frontend/css/atm_atm-styles.css — .logo-area, .hex-logo,
 *     .app-name, .app-sub, .back-link, .filter-panel, .filter-group,
 *     .date-input-group, .date-input, .city-select-group, .city-select,
 *     .btn-refresh, .content-area, .section-header, .header-icon,
 *     .header-title  (Cash pages mirror atm_cash_forecast.html structure)
 *   - ATM/ATM_INTEL/Frontend/atm_cash_forecast.html inline block —
 *     .data-table family incl. .sortable / .sort-asc / .sort-desc
 *   - Credit/Frontend/dashboards/credit_fraud.html inline block —
 *     .user-profile (+::before divider)
 *   - ATM/ATM_INTEL/Frontend/atm_ej_monitor.html inline block — .chart-header
 *   - .chart-sub and .denom-empty-state have no platform precedent —
 *     minimal definitions using hex design tokens.
 * ========================================================================== */

/* --- Command-bar header internals --- */
.logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hex-logo {
    width: 42px;
    height: 36px;
    background: var(--text-main);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-bg);
    font-weight: 800;
    font-size: 20px;
}

.app-name {
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 14px;
    color: var(--text-main);
}

.app-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 24px;
    position: relative;
}

.user-profile::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) skewX(-30deg);
    height: 30px;
    width: 1px;
    background: var(--border-color);
}

.back-link {
    color: var(--hex-blue);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    margin-right: 20px;
}

/* --- Filter bar / controls --- */
.filter-panel {
    margin: 24px 32px 0 32px;
    padding: 16px 24px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 24px;
}

.date-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.15);
    border: none;
    padding: 6px 16px;
    position: relative;
    transition: all 0.2s;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}

.date-input-group::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(0, 0, 0, 0.3);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    z-index: -1;
}

.date-input {
    background: transparent;
    border: none;
    color: var(--text-main);
    color-scheme: dark; /* light calendar icon on dark glass */
    font-family: var(--font-mono);
    font-size: 13px;
    outline: none;
    width: 110px;
}

.city-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.15);
    border: none;
    padding: 6px 16px;
    position: relative;
    transition: all 0.2s;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    width: 200px;
}

.city-select-group::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(0, 0, 0, 0.3);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    z-index: -1;
}

.city-select {
    background: transparent;
    border: none;
    color: var(--text-main);
    color-scheme: dark;
    font-family: var(--font-mono);
    font-size: 13px;
    outline: none;
    width: 100%;
    cursor: pointer;
}

.city-select option {
    background: var(--dark-bg);
    color: var(--text-main);
}

.btn-refresh {
    width: 52px;
    height: 44px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--hex-blue);
    color: var(--hex-blue);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
}

.btn-refresh:hover {
    background: var(--hex-blue);
    color: white;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* --- Content area + section headers --- */
.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 40px 32px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 200px;
    height: 1px;
    background: var(--hex-blue);
    box-shadow: 0 0 10px var(--hex-blue);
}

.header-icon {
    width: 32px;
    height: 28px;
    background: var(--hex-blue);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.header-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- Data table (sortable) --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    background: rgba(59, 130, 246, 0.15);
    color: var(--hex-blue);
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.data-table th:hover {
    background: rgba(59, 130, 246, 0.25);
}

.data-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 12px;
}

.data-table tr:hover {
    background: rgba(59, 130, 246, 0.05);
    cursor: pointer;
}

.data-table .sortable::after {
    content: ' \21C5';
    opacity: 0.4;
}

.data-table .sort-asc::after {
    content: ' \25B2';
    opacity: 1;
}

.data-table .sort-desc::after {
    content: ' \25BC';
    opacity: 1;
}

/* --- Chart header extras --- */
.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* No platform precedent — minimal, hex-token consistent */
.chart-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* --- Misc (JS-injected) --- */
/* No platform precedent — minimal, hex-token consistent */
.denom-empty-state {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    border: 1px dashed var(--border-color);
    background: rgba(17, 24, 39, 0.4);
}