/*
 * KeyAutoFlow unified visual system v1
 * Presentation only: no layout ownership, business state or interaction logic.
 */

body.ph-unified {
    color-scheme: dark;

    --ph-bg: #020513;
    --ph-bg-2: #050a1d;
    --ph-surface: rgba(10, 16, 36, 0.88);
    --ph-surface-strong: rgba(13, 21, 48, 0.96);
    --ph-surface-soft: rgba(17, 27, 57, 0.74);
    --ph-input: rgba(3, 8, 25, 0.76);
    --ph-line: rgba(147, 164, 255, 0.16);
    --ph-line-strong: rgba(111, 143, 255, 0.34);
    --ph-text: #f6f8ff;
    --ph-muted: #9ba9c8;
    --ph-muted-2: #74819f;
    --ph-blue: #3b82f6;
    --ph-cyan: #22d3ee;
    --ph-violet: #7c3aed;
    --ph-green: #34d399;
    --ph-amber: #fbbf24;
    --ph-danger: #fb7185;
    --ph-shadow: 0 28px 84px rgba(0, 0, 0, 0.42);
    --ph-shadow-soft: 0 16px 48px rgba(0, 0, 0, 0.24);
    --ph-radius-sm: 10px;
    --ph-radius-md: 14px;
    --ph-radius-lg: 20px;
    --ph-radius-xl: 28px;

    /* Compatibility aliases used by the existing pages. */
    --bg: var(--ph-bg);
    --bg-2: var(--ph-bg-2);
    --panel: var(--ph-surface);
    --panel2: var(--ph-surface-strong);
    --panel-2: var(--ph-surface-strong);
    --panel-3: var(--ph-surface-soft);
    --panel-soft: var(--ph-surface-soft);
    --panel-strong: var(--ph-surface-strong);
    --border: var(--ph-line);
    --line: var(--ph-line);
    --line-strong: var(--ph-line-strong);
    --text: var(--ph-text);
    --muted: var(--ph-muted);
    --muted-2: var(--ph-muted-2);
    --blue: var(--ph-blue);
    --blue-2: var(--ph-cyan);
    --cyan: var(--ph-cyan);
    --violet: var(--ph-violet);
    --green: var(--ph-green);
    --gold: var(--ph-amber);
    --amber: var(--ph-amber);
    --red: var(--ph-danger);
    --danger: var(--ph-danger);
    --shadow: var(--ph-shadow);
    --shadow-soft: var(--ph-shadow-soft);

    min-width: 320px;
    color: var(--ph-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 50% -5%, rgba(53, 104, 255, 0.18), transparent 32%),
        radial-gradient(circle at 12% 24%, rgba(124, 58, 237, 0.09), transparent 25%),
        radial-gradient(circle at 88% 30%, rgba(34, 211, 238, 0.07), transparent 26%),
        linear-gradient(180deg, var(--ph-bg), var(--ph-bg-2) 54%, var(--ph-bg)) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    accent-color: var(--ph-blue);
}

body.ph-unified::before {
    background:
        linear-gradient(rgba(103, 124, 210, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 124, 210, 0.024) 1px, transparent 1px) !important;
    background-size: 56px 56px !important;
}

body.ph-unified ::selection {
    color: #ffffff;
    background: rgba(59, 130, 246, 0.55);
}

body.ph-unified :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ph-text);
    text-wrap: balance;
}

body.ph-unified :where(p, .subtitle, .lead, .muted, .text-secondary) {
    text-wrap: pretty;
}

body.ph-unified :where(a, button, input, select, textarea) {
    font: inherit;
}

body.ph-unified :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ph-cyan) !important;
    outline-offset: 3px;
}

body.ph-unified :where(button, .btn, .button, .action, .action-btn, .ux-btn) {
    border-radius: var(--ph-radius-md);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

body.ph-unified :where(button, .btn, .button, .action, .action-btn, .ux-btn):not(:disabled):hover {
    transform: translateY(-1px);
}

body.ph-unified :where(button, .btn, .button, .action, .action-btn, .ux-btn):disabled {
    cursor: not-allowed;
    opacity: 0.56;
    box-shadow: none !important;
}

body.ph-unified :where(
    .btn-primary,
    .btn-success,
    .button.primary,
    .action.primary,
    .action-btn.primary,
    .ux-btn.primary,
    button.primary
) {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--ph-blue), #3568f4 56%, var(--ph-cyan)) !important;
    box-shadow: 0 14px 34px rgba(48, 111, 255, 0.24) !important;
}

body.ph-unified :where(
    .btn-secondary,
    .btn-outline-light,
    .btn-ghost,
    .button.secondary,
    .ux-btn.secondary,
    .btn.secondary,
    button.secondary,
    a.secondary,
    .refresh
) {
    color: #c6d3ec !important;
    border-color: var(--ph-line) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body.ph-unified :where(.btn-danger, .button.danger, button.danger) {
    color: #ffadba !important;
    border-color: rgba(251, 113, 133, 0.25) !important;
    background: rgba(251, 113, 133, 0.09) !important;
}

body.ph-unified :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .form-select
) {
    color: var(--ph-text) !important;
    border-color: var(--ph-line) !important;
    border-radius: 12px;
    background-color: var(--ph-input) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

body.ph-unified :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .form-select
):focus {
    border-color: rgba(34, 211, 238, 0.46) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08) !important;
}

body.ph-unified :where(input, textarea)::placeholder {
    color: var(--ph-muted-2) !important;
    opacity: 0.9;
}

body.ph-unified :where(select option) {
    color: var(--ph-text);
    background: #081027;
}

body.ph-unified :where(
    .card,
    .panel,
    .metric-card,
    .stat-card,
    .mini-card,
    .price-card,
    .feature-card,
    .guide-card,
    .integrity-card,
    .section-summary-card,
    .ux-card,
    .login-card
) {
    border-color: var(--ph-line) !important;
    background: linear-gradient(180deg, var(--ph-surface-strong), var(--ph-surface)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        var(--ph-shadow-soft);
}

body.ph-unified :where(.card, .panel, .metric-card, .stat-card, .mini-card, .ux-card) {
    border-radius: var(--ph-radius-lg);
}

body.ph-unified :where(.sidebar, .control-sidebar, aside.sidebar) {
    border-color: var(--ph-line) !important;
    background: rgba(5, 10, 29, 0.94) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.018);
    backdrop-filter: blur(20px);
}

body.ph-unified :where(.nav, .nav-link, .admin-nav-link, .control-nav) {
    border-radius: 12px;
    color: #aebdda;
}

body.ph-unified :where(.nav, .nav-link, .admin-nav-link, .control-nav):hover,
body.ph-unified :where(.nav, .nav-link, .admin-nav-link, .control-nav).active {
    color: #ffffff !important;
    border-color: rgba(84, 139, 255, 0.2) !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(34, 211, 238, 0.055)) !important;
}

body.ph-unified :where(.brand-mark, .brand-badge, .logo, .mark) {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ph-blue), var(--ph-violet) 58%, var(--ph-cyan)) !important;
    box-shadow: 0 14px 34px rgba(59, 130, 246, 0.24) !important;
}

body.ph-unified :where(.table-wrap, .table-responsive) {
    overflow: auto;
    border: 1px solid var(--ph-line);
    border-radius: var(--ph-radius-md);
    background: rgba(4, 9, 26, 0.54);
}

body.ph-unified :where(table, .table, .data-table) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ph-text);
    --bs-table-border-color: var(--ph-line);
    width: 100%;
    color: var(--ph-text);
    border-color: var(--ph-line) !important;
    background: transparent !important;
}

body.ph-unified :where(table, .table, .data-table) :where(th) {
    color: #8fa2c8 !important;
    background: rgba(59, 130, 246, 0.055) !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

body.ph-unified :where(table, .table, .data-table) :where(td, th) {
    border-color: var(--ph-line) !important;
}

body.ph-unified :where(table, .table, .data-table) tbody tr:hover > * {
    background-color: rgba(59, 130, 246, 0.045) !important;
}

body.ph-unified :where(.modal-content, .dropdown-menu, .popover) {
    color: var(--ph-text);
    border-color: var(--ph-line) !important;
    border-radius: var(--ph-radius-lg) !important;
    background: rgba(8, 15, 35, 0.97) !important;
    box-shadow: var(--ph-shadow) !important;
    backdrop-filter: blur(24px);
}

body.ph-unified :where(.modal-header, .modal-footer) {
    border-color: var(--ph-line) !important;
}

body.ph-unified :where(.badge, .pill, .status-pill, .control-badge, .badge-soft) {
    border: 1px solid var(--ph-line);
    border-radius: 999px;
}

body.ph-unified :where(.notice, .note, .alert, .panel-muted) {
    border-color: var(--ph-line) !important;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.07) !important;
}

body.ph-unified :where(.error, .alert-danger) {
    color: #ffb3bf !important;
    border-color: rgba(251, 113, 133, 0.28) !important;
    background: rgba(251, 113, 133, 0.09) !important;
}

body.ph-unified :where(.yes, .success, .active-status, .status-ok) {
    color: #72e8bd !important;
}

body.ph-unified :where(hr) {
    border-color: var(--ph-line);
    opacity: 1;
}

body.ph-unified * {
    scrollbar-color: rgba(111, 143, 255, 0.42) rgba(4, 9, 26, 0.52);
    scrollbar-width: thin;
}

body.ph-unified *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.ph-unified *::-webkit-scrollbar-track {
    background: rgba(4, 9, 26, 0.52);
}

body.ph-unified *::-webkit-scrollbar-thumb {
    border: 2px solid rgba(4, 9, 26, 0.52);
    border-radius: 999px;
    background: rgba(111, 143, 255, 0.42);
}

/* Medium-width navigation: keep swipe/trackpad scrolling without a heavy bar. */
@media (max-width: 1000px) {
    body.ph-unified :where(.app > .sidebar, .control-app > .control-sidebar) {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body.ph-unified :where(.app > .sidebar, .control-app > .control-sidebar)::-webkit-scrollbar {
        display: none;
    }
}

/* Cabinet uses its bottom navigation at this breakpoint; do not show two menus. */
@media (max-width: 900px) {
    body.ph-unified .dashboard-app {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ph-unified .dashboard-app > .sidebar {
        display: none;
    }
}

@media (max-width: 720px) {
    body.ph-unified {
        --ph-radius-lg: 16px;
        --ph-radius-xl: 22px;
    }

    body.ph-unified :where(.card, .panel, .metric-card, .stat-card, .mini-card, .ux-card) {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 12px 32px rgba(0, 0, 0, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ph-unified *,
    body.ph-unified *::before,
    body.ph-unified *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}