/* PhayakAI unified visual language
   Shared across public, authentication, user dashboard, and admin surfaces. */
:root {
    --phayak-brand: #02abff;
    --phayak-brand-strong: #008bd6;
    --phayak-brand-soft: #e7f7ff;
    --phayak-navy: #071827;
    --phayak-navy-2: #0b2235;
    --phayak-ink: #102033;
    --phayak-muted: #64748b;
    --phayak-canvas: #f3f8fc;
    --phayak-surface: #ffffff;
    --phayak-line: #dce8f0;
    --phayak-success: #10b981;
    --phayak-danger: #ef4444;
    --phayak-warning: #f59e0b;
    --phayak-info: #02abff;
    --phayak-text-on-dark: #f5f9ff;
    --phayak-muted-on-dark: #b6c5d2;
    --phayak-success-text: #087a57;
    --phayak-danger-text: #b4233a;
    --phayak-warning-text: #9a5b00;
    --phayak-radius-sm: 10px;
    --phayak-radius-md: 14px;
    --phayak-radius-lg: 20px;
    --phayak-shadow-sm: 0 4px 14px rgba(12, 38, 58, .06);
    --phayak-shadow-md: 0 14px 38px rgba(12, 38, 58, .10);
    --phayak-focus: 0 0 0 3px rgba(2, 171, 255, .18);
    /* Compatibility aliases for the existing page-level stylesheets. */
    --night: var(--phayak-navy);
    --night-2: var(--phayak-navy-2);
    --night-3: #0d2b43;
    --violet: var(--phayak-brand);
    --violet-light: #70d2ff;
    --cyan: #58c9ff;
    --pink: #3bbcff;
    --green: var(--phayak-success);
    --login-night: var(--phayak-navy);
    --login-panel: var(--phayak-navy-2);
    --login-violet: var(--phayak-brand);
    --login-cyan: #58c9ff;
    --login-green: var(--phayak-success);
}

html {
    accent-color: var(--phayak-brand);
}

body {
    font-family: "Plus Jakarta Sans", "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Readability baseline shared by every surface. */
body {
    font-size: 16px;
    text-rendering: optimizeLegibility;
}

:where(p, li, label, small, td, th, input, select, textarea, button) {
    letter-spacing: normal;
}

:where(input, select, textarea)::placeholder {
    opacity: 1;
}

/* Semantic status language: color + shape/text, never color alone. */
:where(.status-success, .badge-success, .text-success, .positive, .profit-positive, .num-positive) {
    color: var(--phayak-success-text) !important;
}
:where(.status-error, .status-danger, .badge-error, .badge-danger, .text-danger, .negative, .profit-negative, .num-negative) {
    color: var(--phayak-danger-text) !important;
}
:where(.status-warning, .badge-warning, .text-warning) {
    color: var(--phayak-warning-text) !important;
}
:where(.status-info, .badge-info, .text-info) {
    color: #0077b6 !important;
}

:where(.status-success, .status-error, .status-danger, .status-warning, .status-info,
       .badge-success, .badge-error, .badge-danger, .badge-warning, .badge-info) {
    display: inline-flex;
    align-items: center;
    gap: .42em;
    padding: .32em .68em;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.25;
}

:where(.alert-success, .toast.success, .notification-success) {
    color: #047857 !important;
    border-color: rgba(16, 185, 129, .42) !important;
    background: #e9fbf4 !important;
}
:where(.alert-error, .toast.error, .notification-error) {
    color: #be123c !important;
    border-color: rgba(239, 68, 68, .42) !important;
    background: #fff0f3 !important;
}
:where(.alert-warning, .toast.warning, .notification-warning) {
    color: #a16207 !important;
    border-color: rgba(245, 158, 11, .48) !important;
    background: #fff8e7 !important;
}
:where(.alert-info, .toast.info, .notification-info) {
    color: #0369a1 !important;
    border-color: rgba(2, 171, 255, .42) !important;
    background: #eaf8ff !important;
}

.toast.success .toast-icon {
    color: #fff !important;
    background: #059669 !important;
}
.toast.error .toast-icon {
    color: #fff !important;
    background: #e11d48 !important;
}
.toast.warning .toast-icon {
    color: #fff !important;
    background: #d97706 !important;
}
.toast.info .toast-icon {
    color: #fff !important;
    background: #0284c7 !important;
}
.toast :where(.toast-message, .toast-close) {
    color: inherit !important;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: rgba(2, 171, 255, .14);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--phayak-brand) !important;
    outline-offset: 3px !important;
}

/* Public and authentication surfaces: one calm midnight-blue atmosphere. */
body:has(.site-header),
body:has(.login-page),
body:has(.access-page),
body:has(.admin-access-page) {
    --night: var(--phayak-navy);
    --night-2: var(--phayak-navy-2);
    --night-3: #0d2b43;
    --white: #f8fcff;
    --text: #d8e7f2;
    --muted: #b8c8d5;
    --muted-2: #91a7b8;
    --violet: var(--phayak-brand);
    --violet-light: #70d2ff;
    --cyan: #58c9ff;
    --pink: #3bbcff;
    --green: var(--phayak-success);
    --red: #ff7185;
    --line: rgba(166, 211, 235, .15);
    --line-strong: rgba(166, 211, 235, .26);
    --login-night: var(--phayak-navy);
    --login-panel: var(--phayak-navy-2);
    --login-white: #f8fcff;
    --login-text: #d8e7f2;
    --login-muted: #b8c8d5;
    --login-line: rgba(166, 211, 235, .15);
    --login-violet: var(--phayak-brand);
    --login-cyan: #58c9ff;
    --login-green: var(--phayak-success);
    background-color: var(--phayak-navy) !important;
}

body:has(.site-header) :where(p, small),
body:has(.login-page) :where(p, small, label),
body:has(.access-page) :where(p, small),
body:has(.admin-access-page) :where(p, small, label),
body:has(.password-page) :where(p, small, label) {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
}

:where(.login-page, .access-page, .admin-access-page, .password-page)
    :where(.login-card-head p, .showcase-copy p, .login-footer p, .risk-note,
           .access-heading p, .access-card-copy p, .access-features span,
           .admin-context > p, .admin-warning, .password-card-head p,
           .password-footer p) {
    color: var(--phayak-muted-on-dark) !important;
}

:where(.login-page, .access-page, .admin-access-page, .password-page)
    :where(label, .field-label-row label, .login-field label, .password-field label) {
    color: #eef5fb !important;
    font-size: max(13px, .8125rem) !important;
    font-weight: 600 !important;
}

:where(.login-page, .access-page, .admin-access-page, .password-page)
    :where(input, select, textarea) {
    color: var(--phayak-text-on-dark) !important;
}

:where(.login-page, .access-page, .admin-access-page, .password-page)
    :where(input, textarea)::placeholder {
    color: #9cacc0 !important;
    opacity: 1 !important;
}

:where(.login-page, .access-page, .admin-access-page) {
    background-color: var(--phayak-navy) !important;
}

:where(.login-page, .access-page, .admin-access-page)::before {
    background-image:
        linear-gradient(rgba(138, 205, 239, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(138, 205, 239, .025) 1px, transparent 1px) !important;
}

.login-brand-mark,
.brand-mark {
    border-color: rgba(2, 171, 255, .34) !important;
    background: linear-gradient(145deg, rgba(2, 171, 255, .25), rgba(88, 201, 255, .07)) !important;
    box-shadow: 0 0 30px rgba(2, 171, 255, .12) !important;
}

.login-brand-mark svg,
.brand-mark svg {
    stroke: #71d2ff !important;
}

.login-brand > span:last-child > span,
.brand > span:last-child > span {
    color: #70d2ff !important;
}

.showcase-kicker,
.panel-kicker,
.eyebrow,
.section-kicker,
.admin-kicker {
    color: #70d2ff !important;
}

.showcase-copy h1 em,
.hero h1 em,
.admin-context > h1 em {
    background: linear-gradient(100deg, #70d8ff, var(--phayak-brand) 54%, #7ebcff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.button-primary,
.login-submit,
.admin-login-submit {
    background: linear-gradient(135deg, var(--phayak-brand-strong), var(--phayak-brand)) !important;
    box-shadow: 0 13px 32px rgba(2, 171, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.button-primary:hover,
.login-submit:hover,
.admin-login-submit:hover {
    box-shadow: 0 17px 40px rgba(2, 171, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.input-shell:focus-within,
.admin-input-shell:focus-within {
    border-color: rgba(2, 171, 255, .66) !important;
    background: rgba(2, 171, 255, .06) !important;
    box-shadow: var(--phayak-focus) !important;
}

.input-shell input,
.admin-input-shell input {
    caret-color: var(--phayak-brand);
}

/* Keep browser/password-manager autofill inside the dark input surface. */
.input-shell input:-webkit-autofill,
.input-shell input:-webkit-autofill:hover,
.input-shell input:-webkit-autofill:focus,
.admin-input-shell input:-webkit-autofill,
.admin-input-shell input:-webkit-autofill:hover,
.admin-input-shell input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fcff !important;
    caret-color: #f8fcff !important;
    -webkit-box-shadow: 0 0 0 1000px #101e2d inset !important;
    box-shadow: 0 0 0 1000px #101e2d inset !important;
    border-radius: 4px;
    transition: background-color 9999s ease-out 0s;
}

.field-label-row a,
.login-footer a {
    color: #70d2ff !important;
}

.showcase-trust i {
    color: var(--phayak-brand) !important;
}

.access-card:hover {
    border-color: rgba(2, 171, 255, .42) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .36), 0 0 42px rgba(2, 171, 255, .08) !important;
}

.access-icon,
.admin-access .access-icon {
    color: #70d2ff !important;
    border-color: rgba(2, 171, 255, .25) !important;
    background: linear-gradient(145deg, rgba(2, 171, 255, .18), rgba(88, 201, 255, .04)) !important;
}

.login-brand > b,
.operations-head b,
.admin-kicker {
    color: #70d2ff !important;
    border-color: rgba(2, 171, 255, .22) !important;
}

/* User dashboard: align existing premium layout to shared tokens. */
.phayak-saas-dashboard {
    --brand: var(--phayak-brand);
    --brand-strong: var(--phayak-brand-strong);
    --brand-soft: var(--phayak-brand-soft);
    --ink: var(--phayak-ink);
    --muted: var(--phayak-muted);
    --surface: var(--phayak-surface);
    --line: var(--phayak-line);
    background: var(--phayak-canvas) !important;
}

.phayak-saas-dashboard :where(.card, .section-card, .metric-card, .chart-card, .table-card, .info-card) {
    border-color: var(--phayak-line) !important;
    box-shadow: var(--phayak-shadow-sm) !important;
}

.phayak-saas-dashboard :where(p, small, label, .subtitle, .description, .stat-label, .metric-label) {
    color: #52677b;
}

.phayak-saas-dashboard :where(.status-indicator, .nav-menu-btn, .data-table td, .data-table th) {
    font-size: max(13px, .8125rem) !important;
}

body.phayak-saas-dashboard.dark-theme {
    --ink: #f4f9fd !important;
    --muted: #c1ced8 !important;
    --subtle: #a8b8c5 !important;
}

body.phayak-saas-dashboard.dark-theme :where(
    p, small, label, .subtitle, .description, .stat-label, .metric-label,
    .data-table td, .data-table th, .account-number
) {
    color: #c1ced8 !important;
}

body.phayak-saas-dashboard.dark-theme .latency-badge {
    min-width: 48px;
    border: 1px solid #405668 !important;
    color: #e8f2f8 !important;
    background: #263b4b !important;
    font-weight: 700 !important;
    text-align: center;
}
body.phayak-saas-dashboard.dark-theme .latency-badge.good {
    border-color: #28765d !important;
    color: #d8fff0 !important;
    background: #126347 !important;
}
body.phayak-saas-dashboard.dark-theme .latency-badge.fair {
    border-color: #9a681c !important;
    color: #fff4d1 !important;
    background: #7a4d0d !important;
}
body.phayak-saas-dashboard.dark-theme .latency-badge.poor {
    border-color: #a34255 !important;
    color: #fff0f3 !important;
    background: #8d3044 !important;
}

body.phayak-saas-dashboard.dark-theme :where(h1, h2, h3, h4, strong, .stat-value, .metric-value) {
    color: #f7fbff !important;
}

body.phayak-saas-dashboard.dark-theme :where(input, select, textarea)::placeholder {
    color: #9fb0be !important;
    opacity: 1 !important;
}

/* Admin dashboard: preserve danger semantics, remove the old red brand theme. */
body.admin-redesign,
body:has(.admin-header) {
    --admin-bg: var(--phayak-canvas);
    --admin-panel: var(--phayak-surface);
    --admin-line: var(--phayak-line);
    --admin-ink: var(--phayak-ink);
    --admin-muted: var(--phayak-muted);
    --admin-primary: var(--phayak-brand);
    --admin-blue: var(--phayak-brand);
    --admin-red: var(--phayak-danger);
    --admin-green: var(--phayak-success);
    background: var(--phayak-canvas) !important;
    color: var(--phayak-ink);
    font-family: "Plus Jakarta Sans", "Prompt", sans-serif !important;
}

body:has(.admin-header) .admin-header {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid var(--phayak-line) !important;
    box-shadow: 0 6px 24px rgba(12, 38, 58, .06) !important;
}

body:has(.admin-header) .admin-logo,
body:has(.admin-header) .section-title {
    color: var(--phayak-ink) !important;
}

body:has(.admin-header) .admin-mark {
    background: linear-gradient(135deg, var(--phayak-brand-strong), var(--phayak-brand)) !important;
    border-radius: var(--phayak-radius-sm) !important;
}

body:has(.admin-header) :where(.stat-card, .table-card, .points-card, .notification-panel) {
    background: var(--phayak-surface) !important;
    border: 1px solid var(--phayak-line) !important;
    border-radius: var(--phayak-radius-md) !important;
    box-shadow: var(--phayak-shadow-sm) !important;
}

body:has(.admin-header) .data-table th {
    background: #edf6fb !important;
    color: #31485a !important;
}

body:has(.admin-header) .data-table tbody tr:hover {
    background: #eef9ff !important;
}

body:has(.admin-header) :where(p, small, label, .notification-message, .notification-time, .page-info, .loading) {
    color: #4b6073 !important;
    font-size: max(13px, .8125rem);
}

body:has(.admin-header) :where(.data-table td, .data-table th, input, select, textarea, button) {
    font-size: max(13px, .8125rem);
}

body:has(.admin-header) :where(.stat-card h3, .notification-title) {
    color: #263b4d !important;
}

body:has(.admin-header) :where(input, textarea)::placeholder {
    color: #687b8b !important;
    opacity: 1 !important;
}

body:has(.admin-header) :where(.admin-btn-primary, .btn-refresh, .btn-edit, .points-btn.all, .points-btn.individual) {
    background: linear-gradient(135deg, var(--phayak-brand-strong), var(--phayak-brand)) !important;
    color: white !important;
}

body:has(.admin-header) :where(.search-input, .points-input, input, select):focus {
    border-color: var(--phayak-brand) !important;
    box-shadow: var(--phayak-focus) !important;
}

body:has(.admin-header) .notification-header {
    background: linear-gradient(135deg, var(--phayak-brand-strong), var(--phayak-brand)) !important;
}

/* Legacy base-template components. */
.auth-page {
    background: linear-gradient(145deg, var(--phayak-navy), var(--phayak-navy-2)) !important;
}

.auth-card {
    border-color: var(--phayak-line) !important;
    border-radius: var(--phayak-radius-lg) !important;
    box-shadow: var(--phayak-shadow-md) !important;
}

.auth-card::before,
.btn-primary {
    background: linear-gradient(90deg, var(--phayak-brand-strong), var(--phayak-brand)) !important;
}

.auth-logo h1,
.auth-footer a {
    color: var(--phayak-brand-strong) !important;
}

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

/* ==========================================================================
   Readability boost — clearer text, higher contrast, easier scanning.
   Applied globally to all surfaces without changing layout.
   Uses !important to win against dashboard-saas.css specificity debt.
   ========================================================================== */

/* Slightly larger base + comfortable line-height for body copy and tables. */
body {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
}

/* Brighten text on dark surfaces (login, dashboard dark, admin header). */
body:has(.site-header),
body:has(.login-page),
body:has(.access-page),
body:has(.admin-access-page) {
    --text: #eaf2fa;
    --muted: #cdd9e4;
    --muted-2: #aebfce;
    --login-text: #eaf2fa;
    --login-muted: #cdd9e4;
    --phayak-muted-on-dark: #c8d6e2;
}

/* Crisper text shadow on dark backgrounds so letters separate from the panel. */
body:has(.site-header) :where(p, small),
body:has(.login-page) :where(p, small, label),
body:has(.access-page) :where(p, small),
body:has(.admin-access-page) :where(p, small, label),
body:has(.password-page) :where(p, small, label) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Labels are already bright; keep them readable but not glaring. */
:where(.login-page, .access-page, .admin-access-page, .password-page)
    :where(label, .field-label-row label, .login-field label, .password-field label) {
    color: #f2f8fd !important;
    font-weight: 600 !important;
}

/* Table cells: enforce readable size + weight against saas.css 14px overrides. */
td, th {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 450 !important;
}

/* Body copy and data text: never smaller than 14.5px. */
p, li, small, label, span, div {
    line-height: 1.55 !important;
}

/* Headings: clearer hierarchy. */
h1, h2, h3, h4 {
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

/* Form inputs: legible without zooming (prevents iOS auto-zoom). */
input, select, textarea {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Buttons: confident tap targets and readable labels. */
button, .btn, a.btn {
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

/* Muted/secondary text on light surfaces: lift from slate to readable slate. */
.text-muted, .muted, .secondary-text {
    color: #475569 !important;
}

/* Muted/secondary text on dark surfaces: ensure readable contrast. */
.notification-message, .trade-meta, .stat-label, .section-subtitle {
    color: #c8d6e2 !important;
}