/*
 * AuditTrack Card Background Authority v169
 * Scope: ภาพรวม, ประเด็นติดตาม, ประเด็นขับเคลื่อน
 *
 * Uses the soft KPI-card background style introduced in Settings > บริหารผู้ใช้งาน
 * while preserving each card's existing icon, content, layout and accent tone.
 * Hover must not change the colored side border/accent of summary cards.
 */

@media screen {
    /* Shared tone variables */
    .dashboard-kpi-card,
    .dashboard-mini-card,
    .audit-summary-grid .audit-summary-card,
    .next-summary-grid .audit-summary-card {
        --audit-card-bg-accent: #b73763;
        --audit-card-bg-accent-rgb: 183, 55, 99;
        --audit-card-bg-soft: rgba(var(--audit-card-bg-accent-rgb), .085);
        --audit-card-bg-border: rgba(var(--audit-card-bg-accent-rgb), .20);
        --audit-card-bg-neutral-border: #e4eaf1;
        --audit-card-bg-shadow: 0 10px 24px rgba(15, 23, 42, .055);
        --audit-card-bg-hover-shadow: 0 14px 32px rgba(15, 23, 42, .075);
    }

    /* Tone mapping: dashboard cards */
    .dashboard-kpi-card.is-primary {
        --audit-card-bg-accent: #2f76d2;
        --audit-card-bg-accent-rgb: 47, 118, 210;
    }

    .dashboard-kpi-card.is-progress {
        --audit-card-bg-accent: #b78324;
        --audit-card-bg-accent-rgb: 183, 131, 36;
    }

    .dashboard-kpi-card.is-success {
        --audit-card-bg-accent: #16805a;
        --audit-card-bg-accent-rgb: 22, 128, 90;
    }

    .dashboard-kpi-card.is-alert {
        --audit-card-bg-accent: #b02a37;
        --audit-card-bg-accent-rgb: 176, 42, 55;
    }

    /* Tone mapping: shared summary cards in audit_track.php and next_process.php */
    .audit-summary-grid .audit-summary-card.audit-summary-blue,
    .next-summary-grid .audit-summary-card.audit-summary-blue {
        --audit-card-bg-accent: #2f76d2;
        --audit-card-bg-accent-rgb: 47, 118, 210;
    }

    .audit-summary-grid .audit-summary-card.audit-summary-primary,
    .next-summary-grid .audit-summary-card.audit-summary-primary {
        --audit-card-bg-accent: #b73763;
        --audit-card-bg-accent-rgb: 183, 55, 99;
    }

    .audit-summary-grid .audit-summary-card.audit-summary-amber,
    .next-summary-grid .audit-summary-card.audit-summary-amber {
        --audit-card-bg-accent: #b78324;
        --audit-card-bg-accent-rgb: 183, 131, 36;
    }

    .audit-summary-grid .audit-summary-card.audit-summary-green,
    .next-summary-grid .audit-summary-card.audit-summary-green {
        --audit-card-bg-accent: #16805a;
        --audit-card-bg-accent-rgb: 22, 128, 90;
    }

    .audit-summary-grid .audit-summary-card.audit-summary-slate,
    .next-summary-grid .audit-summary-card.audit-summary-slate {
        --audit-card-bg-accent: #6e7781;
        --audit-card-bg-accent-rgb: 110, 119, 129;
    }

    /* New background standard: use only the background style from the new settings KPI cards. */
    .dashboard-kpi-card,
    .dashboard-mini-card,
    .audit-summary-grid .audit-summary-card,
    .next-summary-grid .audit-summary-card {
        background:
            radial-gradient(circle at 96% 12%, var(--audit-card-bg-soft) 0, transparent 42%),
            linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
        box-shadow: var(--audit-card-bg-shadow) !important;
        border-color: var(--audit-card-bg-neutral-border) !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }

    /* Preserve existing colored side accent. Do not let hover rewrite it. */
    .dashboard-kpi-card {
        border-left-color: var(--audit-card-bg-accent) !important;
    }

    .audit-summary-grid .audit-summary-card,
    .next-summary-grid .audit-summary-card {
        border-left-color: var(--audit-card-bg-accent) !important;
    }

    /* Hover: keep motion/shadow if already present, but freeze side-border color. */
    .dashboard-kpi-card:hover,
    .dashboard-mini-card:hover,
    .audit-summary-grid .audit-summary-card:hover,
    .next-summary-grid .audit-summary-card:hover {
        background:
            radial-gradient(circle at 96% 12%, var(--audit-card-bg-soft) 0, transparent 42%),
            linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
        border-color: var(--audit-card-bg-neutral-border) !important;
        box-shadow: var(--audit-card-bg-hover-shadow) !important;
    }

    .dashboard-kpi-card:hover,
    .audit-summary-grid .audit-summary-card:hover,
    .next-summary-grid .audit-summary-card:hover {
        border-left-color: var(--audit-card-bg-accent) !important;
    }

    /* Dashboard panel cards should share the same soft surface, but without side accent logic. */
    .audit-dashboard-card.dashboard-panel,
    .dashboard-panel.audit-dashboard-card,
    .dashboard-executive-embed .executive-panel {
        background:
            radial-gradient(circle at 98% 4%, rgba(183, 55, 99, .055) 0, transparent 38%),
            linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
        border-color: #e4eaf1 !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .045) !important;
    }

    .audit-dashboard-card.dashboard-panel:hover,
    .dashboard-panel.audit-dashboard-card:hover,
    .dashboard-executive-embed .executive-panel:hover {
        border-color: #e4eaf1 !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
    }

    body.eye-care-mode .dashboard-kpi-card,
    body.eye-care-mode .dashboard-mini-card,
    body.eye-care-mode .audit-summary-grid .audit-summary-card,
    body.eye-care-mode .next-summary-grid .audit-summary-card,
    body[data-audit-theme="eye-care"] .dashboard-kpi-card,
    body[data-audit-theme="eye-care"] .dashboard-mini-card,
    body[data-audit-theme="eye-care"] .audit-summary-grid .audit-summary-card,
    body[data-audit-theme="eye-care"] .next-summary-grid .audit-summary-card {
        background:
            radial-gradient(circle at 96% 12%, rgba(142, 79, 98, .10) 0, transparent 42%),
            linear-gradient(180deg, #f5efe3 0%, #efe5d5 100%) !important;
        border-color: #d4c6b1 !important;
        box-shadow: 0 10px 24px rgba(73, 57, 34, .08) !important;
    }

    body.eye-care-mode .dashboard-kpi-card,
    body.eye-care-mode .audit-summary-grid .audit-summary-card,
    body.eye-care-mode .next-summary-grid .audit-summary-card,
    body[data-audit-theme="eye-care"] .dashboard-kpi-card,
    body[data-audit-theme="eye-care"] .audit-summary-grid .audit-summary-card,
    body[data-audit-theme="eye-care"] .next-summary-grid .audit-summary-card {
        border-left-color: var(--audit-card-bg-accent) !important;
    }

    body.eye-care-mode .dashboard-kpi-card:hover,
    body.eye-care-mode .dashboard-mini-card:hover,
    body.eye-care-mode .audit-summary-grid .audit-summary-card:hover,
    body.eye-care-mode .next-summary-grid .audit-summary-card:hover,
    body[data-audit-theme="eye-care"] .dashboard-kpi-card:hover,
    body[data-audit-theme="eye-care"] .dashboard-mini-card:hover,
    body[data-audit-theme="eye-care"] .audit-summary-grid .audit-summary-card:hover,
    body[data-audit-theme="eye-care"] .next-summary-grid .audit-summary-card:hover {
        background:
            radial-gradient(circle at 96% 12%, rgba(142, 79, 98, .10) 0, transparent 42%),
            linear-gradient(180deg, #f5efe3 0%, #efe5d5 100%) !important;
        border-color: #d4c6b1 !important;
        box-shadow: 0 12px 28px rgba(73, 57, 34, .10) !important;
    }

    body.eye-care-mode .dashboard-kpi-card:hover,
    body.eye-care-mode .audit-summary-grid .audit-summary-card:hover,
    body.eye-care-mode .next-summary-grid .audit-summary-card:hover,
    body[data-audit-theme="eye-care"] .dashboard-kpi-card:hover,
    body[data-audit-theme="eye-care"] .audit-summary-grid .audit-summary-card:hover,
    body[data-audit-theme="eye-care"] .next-summary-grid .audit-summary-card:hover {
        border-left-color: var(--audit-card-bg-accent) !important;
    }
}

/*
 * AuditTrack V214: Dashboard seam cleanup
 *
 * The dashboard overview previously inherited the soft radial background and
 * card shadows from this authority layer. On wide screens those translucent
 * shadows/gradients can create straight rectangular cut lines around KPI cards,
 * mini cards and panels. Keep the same card geometry and colored left accents,
 * but render dashboard surfaces with the central solid surface/border tokens.
 */
@media screen {
    body .dashboard-page .audit-dashboard-card,
    body .dashboard-page .dashboard-access-card,
    body .dashboard-page .dashboard-kpi-card,
    body .dashboard-page .dashboard-mini-card,
    body .dashboard-page .dashboard-panel.audit-dashboard-card,
    body .dashboard-page .audit-dashboard-card.dashboard-panel {
        background: var(--audit-theme-surface) !important;
        background-color: var(--audit-theme-surface) !important;
        border-color: var(--audit-theme-border) !important;
        box-shadow: none !important;
        background-clip: padding-box !important;
    }

    body .dashboard-page .dashboard-kpi-card {
        border-left-color: var(--audit-card-bg-accent) !important;
        border-left-width: 5px !important;
    }

    body .dashboard-page .dashboard-mini-card > i,
    body .dashboard-page .dashboard-kpi-icon,
    body .dashboard-page .dashboard-access-icon {
        background: var(--audit-theme-surface-muted) !important;
        box-shadow: none !important;
    }

    body .dashboard-page .dashboard-kpi-card:hover,
    body .dashboard-page .dashboard-mini-card:hover,
    body .dashboard-page .dashboard-motion-panel:hover,
    body .dashboard-page .dashboard-panel.audit-dashboard-card:hover,
    body .dashboard-page .audit-dashboard-card.dashboard-panel:hover {
        background: var(--audit-theme-surface) !important;
        background-color: var(--audit-theme-surface) !important;
        border-color: var(--audit-theme-border) !important;
        box-shadow: none !important;
    }

    body .dashboard-page .dashboard-kpi-card:hover {
        border-left-color: var(--audit-card-bg-accent) !important;
    }

    body.eye-care-mode .dashboard-page .audit-dashboard-card,
    body.eye-care-mode .dashboard-page .dashboard-access-card,
    body.eye-care-mode .dashboard-page .dashboard-kpi-card,
    body.eye-care-mode .dashboard-page .dashboard-mini-card,
    body.eye-care-mode .dashboard-page .dashboard-panel.audit-dashboard-card,
    body.eye-care-mode .dashboard-page .audit-dashboard-card.dashboard-panel,
    body[data-audit-theme="eye-care"] .dashboard-page .audit-dashboard-card,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-access-card,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-kpi-card,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-mini-card,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-panel.audit-dashboard-card,
    body[data-audit-theme="eye-care"] .dashboard-page .audit-dashboard-card.dashboard-panel {
        background: var(--audit-theme-surface) !important;
        background-color: var(--audit-theme-surface) !important;
        border-color: var(--audit-theme-border) !important;
        box-shadow: none !important;
    }

    body.eye-care-mode .dashboard-page .dashboard-kpi-icon,
    body.eye-care-mode .dashboard-page .dashboard-mini-card > i,
    body.eye-care-mode .dashboard-page .dashboard-access-icon,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-kpi-icon,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-mini-card > i,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-access-icon {
        background: var(--audit-theme-surface-muted) !important;
        box-shadow: none !important;
    }

    body.eye-care-mode .dashboard-page .dashboard-kpi-card,
    body[data-audit-theme="eye-care"] .dashboard-page .dashboard-kpi-card {
        border-left-color: var(--audit-card-bg-accent) !important;
    }
}