/* ==========================================================================
   Pingtr Design System — Purple brand + Neumorphism + Glassmorphism + Claymorphism
   Loaded LAST on every page so it wins over legacy component styles.
   Visual layer only: no markup, route, or logic changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --brand-50: #fff7ed;
    --brand-100: #ffedd5;
    --brand-200: #fed7aa;
    --brand-300: #ffb47a;
    --brand-400: #ffa054;
    --brand-500: #f78b26;
    --brand-600: #e8590c;
    --brand-700: #c2410c;
    --brand-900: #7c2d12;

    /* Neumorphism */
    --neu-bg: #1c1930;
    --neu-bg-2: #262141;
    --neu-light: rgba(255, 255, 255, 0.06);
    --neu-dark: rgba(0, 0, 0, 0.55);
    --neu-raised: -6px -6px 14px var(--neu-dark), 6px 6px 14px var(--neu-light);
    --neu-raised-sm: -3px -3px 8px var(--neu-dark), 3px 3px 8px var(--neu-light);
    --neu-inset: inset -4px -4px 10px var(--neu-dark), inset 4px 4px 10px var(--neu-light);
    --neu-border: 1px solid rgba(255, 255, 255, 0.09);
    --neu-radius: 18px;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-bg-2: rgba(255, 255, 255, 0.1);
    --glass-border: 1px solid rgba(255, 255, 255, 0.14);
    --glass-blur: 18px;
    --glass-shadow: 0 18px 44px rgba(9, 6, 24, 0.45);
    --glass-radius: 22px;

    /* Action palette — buttons & icon backgrounds (cyan → deep blue).
       Chosen to complement the green terminal text instead of repeating it. */
    --action-1: #ffa054;
    --action-2: #e8590c;
    --action-1-soft: #ffb47a;
    --action-glow: rgba(247, 139, 38, 0.35);

    /* Claymorphism */
    --clay-bg: linear-gradient(145deg, var(--action-1), var(--action-2));
    --clay-bg-2: linear-gradient(145deg, var(--action-1-soft), #1e40af);
    --clay-light: rgba(255, 214, 170, 0.32);
    --clay-dark: rgba(120, 45, 8, 0.6);
    --clay-shadow: -8px -8px 18px var(--clay-light), 8px 8px 18px var(--clay-dark);
    --clay-inset: inset -5px -5px 12px rgba(255, 214, 170, 0.26), inset 5px 5px 12px rgba(120, 45, 8, 0.55);
    --clay-text: #ffffff;
    --clay-radius: 24px;
}

html[data-theme="light"] {
    --neu-bg: #eef0f8;
    --neu-bg-2: #e7e9f5;
    --neu-light: rgba(255, 255, 255, 0.95);
    --neu-dark: rgba(148, 163, 184, 0.45);
    --neu-border: 1px solid rgba(255, 255, 255, 0.9);

    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-2: rgba(255, 255, 255, 0.72);
    --glass-border: 1px solid rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 18px 40px rgba(76, 29, 149, 0.14);

    --clay-shadow: -8px -8px 18px rgba(255, 255, 255, 0.95), 8px 8px 18px rgba(232, 89, 12, 0.26);
    --clay-inset: inset -5px -5px 12px rgba(255, 255, 255, 0.9), inset 5px 5px 12px rgba(232, 89, 12, 0.22);
}

/* --------------------------------------------------------------------------
   2. Utilities
   -------------------------------------------------------------------------- */
.neu {
    background: var(--neu-bg);
    border: var(--neu-border);
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-raised);
}
.neu-sm {
    background: var(--neu-bg);
    border: var(--neu-border);
    border-radius: 14px;
    box-shadow: var(--neu-raised-sm);
}
.neu-inset {
    background: var(--neu-bg);
    border: var(--neu-border);
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-inset);
}
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}
.glass-strong {
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(170%);
    backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(170%);
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}
.clay {
    background: var(--clay-bg);
    color: var(--clay-text);
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow);
    border: none;
}
.clay-sm {
    background: var(--clay-bg-2);
    color: var(--clay-text);
    border-radius: 16px;
    box-shadow: -5px -5px 12px var(--clay-light), 5px 5px 12px var(--clay-dark);
    border: none;
}
.clay-inset {
    background: var(--clay-bg-2);
    color: var(--clay-text);
    border-radius: 16px;
    box-shadow: var(--clay-inset);
    border: none;
}

/* --------------------------------------------------------------------------
   3. Ambient brand background (whole site)
   -------------------------------------------------------------------------- */
body {
    background-image:
        radial-gradient(1100px 520px at 88% -12%, rgba(247, 139, 38, 0.14), transparent 62%),
        radial-gradient(900px 480px at 6% 8%, rgba(255, 160, 84, 0.1), transparent 60%);
    background-attachment: fixed;
}
html[data-theme="light"] body {
    background-image:
        radial-gradient(1100px 520px at 88% -12%, rgba(247, 139, 38, 0.12), transparent 62%),
        radial-gradient(900px 480px at 6% 8%, rgba(255, 160, 84, 0.1), transparent 60%);
}
/* keep the ambient brand wash on the landing page, which sets its own light background */
html[data-theme="light"] body:has(.lp-light) {
    background-color: #f5f6fa !important;
    background-image:
        radial-gradient(1100px 520px at 88% -12%, rgba(247, 139, 38, 0.13), transparent 62%),
        radial-gradient(900px 480px at 6% 8%, rgba(255, 160, 84, 0.11), transparent 60%) !important;
}

/* --------------------------------------------------------------------------
   4. Glass surfaces — navigation & overlays
   -------------------------------------------------------------------------- */
.navbar,
.user-topbar,
.dash-header,
.up-header,
.site-footer,
.dropdown-menu,
.notif-dropdown,
.modal,
.modal-content,
.toast,
.auth-card,
.login-card {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}
html[data-theme="light"] .navbar,
html[data-theme="light"] .user-topbar,
html[data-theme="light"] .dash-header,
html[data-theme="light"] .up-header,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .notif-dropdown,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .login-card {
    background: var(--glass-bg-2) !important;
}

.up-sidebar,
.dash-sidebar,
.admin-dashboard .dash-sidebar {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(160%);
    backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(160%);
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}
html[data-theme="light"] .up-sidebar,
html[data-theme="light"] .dash-sidebar,
html[data-theme="light"] .admin-dashboard .dash-sidebar {
    background: var(--glass-bg-2) !important;
}

/* --------------------------------------------------------------------------
   5. Neumorphic cards & panels
   -------------------------------------------------------------------------- */
.card,
.form-card,
.settings-card,
.panel,
.stat,
.result-card,
.dash-card,
.dash-section,
.info-box,
.method-option,
.ticket-row,
.tbl,
.table-wrap,
.up-card,
.lp-panel,
.lp-tools-card,
.lp-stats,
.lp-why,
.lp-mini,
.wb-card {
    background: var(--neu-bg) !important;
    border: var(--neu-border) !important;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-raised) !important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat,
html[data-theme="light"] .result-card,
html[data-theme="light"] .dash-card,
html[data-theme="light"] .dash-section,
html[data-theme="light"] .info-box,
html[data-theme="light"] .method-option,
html[data-theme="light"] .ticket-row,
html[data-theme="light"] .tbl,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .lp-panel,
html[data-theme="light"] .lp-tools-card,
html[data-theme="light"] .lp-stats,
html[data-theme="light"] .lp-why,
html[data-theme="light"] .lp-mini {
    background: var(--neu-bg) !important;
}

.card:hover,
.stat:hover,
.result-card:hover,
.dash-card:hover,
.tool-card:hover,
.lp-tools-card .tool-card:hover {
    box-shadow: var(--neu-raised), 0 0 0 1px rgba(247, 139, 38, 0.35) !important;
}

/* Neumorphic inset wells: inputs, dropdowns, code/output areas */
.form-input,
.auth-input,
.input-row input[type="text"],
.input-row input[type="email"],
.input-row input[type="password"],
.input-row input[type="number"],
.input-row input[type="date"],
.input-row select,
.input-row textarea,
textarea.form-input,
select.form-input,
.output-area,
.output-content,
.up-dropdown {
    background: var(--neu-bg-2) !important;
    border: var(--neu-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--neu-inset) !important;
    color: var(--color-text, var(--text, #e8e8ee));
}
.form-input:focus,
.auth-input:focus,
.input-row input:focus,
.input-row select:focus,
.input-row textarea:focus {
    border-color: var(--brand-400) !important;
    box-shadow: var(--neu-inset), 0 0 0 3px rgba(247, 139, 38, 0.22) !important;
}

/* --------------------------------------------------------------------------
   6. Claymorphism — primary actions & hero elements
   -------------------------------------------------------------------------- */
.btn-primary,
.lp-btn-primary,
.lp-promo-btn,
.auth-btn,
.btn-login,
.up-hbtn,
.hbtn,
.pay-btn,
.submit-btn {
    background: var(--clay-bg) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 16px;
    box-shadow: var(--clay-shadow) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover,
.lp-btn-primary:hover,
.lp-promo-btn:hover,
.auth-btn:hover,
.btn-login:hover,
.up-hbtn:hover,
.hbtn:hover,
.pay-btn:hover,
.submit-btn:hover {
    background: var(--clay-bg-2) !important;
    transform: translateY(-2px);
    box-shadow: -6px -6px 14px var(--clay-light), 6px 6px 18px var(--clay-dark) !important;
}
.btn-primary:active,
.auth-btn:active,
.btn-login:active {
    transform: translateY(0);
    box-shadow: var(--clay-inset) !important;
}

.btn-secondary,
.lp-btn-alt,
.up-link,
.dash-header-icons button,
.dash-menu-toggle,
.up-burger {
    background: var(--neu-bg-2) !important;
    color: var(--color-text, var(--text, #e8e8ee)) !important;
    border: var(--neu-border) !important;
    border-radius: 14px;
    box-shadow: var(--neu-raised-sm) !important;
}
.btn-secondary:hover,
.lp-btn-alt:hover,
.up-link:hover,
.dash-menu-toggle:hover,
.up-burger:hover {
    box-shadow: var(--neu-inset) !important;
    color: var(--brand-300) !important;
}

/* Tabs & pills */
.tab,
.nav-tabs .tab,
.pill,
.chip {
    background: var(--neu-bg-2) !important;
    border: var(--neu-border) !important;
    border-radius: 999px;
    box-shadow: var(--neu-raised-sm) !important;
}
.tab.active,
.nav-tabs .tab.active {
    background: var(--clay-bg-2) !important;
    color: #fff !important;
    box-shadow: var(--clay-inset) !important;
}

/* --------------------------------------------------------------------------
   7. Sidebar links & list rows
   -------------------------------------------------------------------------- */
.sidebar-item,
.up-link,
.dash-sidebar .sidebar-item,
.dash-sidebar .sidebar-group,
.dash-activity-item,
.notif-dropdown-item {
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: none !important;
    color: var(--color-text, var(--text, #e8e8ee));
}
.sidebar-item:hover,
.up-link:hover,
.dash-sidebar .sidebar-item:hover,
.dash-sidebar .sidebar-group:hover,
.dash-activity-item:hover,
.notif-dropdown-item:hover {
    background: var(--neu-bg-2) !important;
    box-shadow: var(--neu-raised-sm) !important;
    color: var(--color-text, var(--text, #e8e8ee)) !important;
}
.sidebar-item.active,
.dash-sidebar .sidebar-item.active {
    background: var(--clay-bg-2) !important;
    color: #fff !important;
    box-shadow: var(--clay-inset) !important;
}
.sidebar-item.active svg,
.dash-sidebar .sidebar-item.active svg {
    color: #fff !important;
    filter: none !important;
}

/* --------------------------------------------------------------------------
   8. Logo — clay badge on every page
   -------------------------------------------------------------------------- */
.brand-logo-img,
.login-logo-img,
.logo-icon,
.dash-logo-icon,
.login-logo-icon,
.auth-logo-mark,
.up-brand .logo-icon {
    border-radius: 12px;
    box-shadow: var(--clay-shadow);
    background: var(--clay-bg);
    padding: 4px 8px;
    color: #fff;
}
.logo,
.dash-logo,
.login-logo,
.auth-logo,
.up-brand {
    color: var(--color-text, var(--text, #e8e8ee));
}

/* --------------------------------------------------------------------------
   9. Badges, alerts, toasts
   -------------------------------------------------------------------------- */
.badge,
.up-badge,
.sidebar-badge,
.alert-success,
.alert-error,
.alert-info,
.alert-warning,
.security-badge,
.error-banner {
    border-radius: 999px;
    box-shadow: var(--neu-raised-sm);
}
.alert-success { border-left: 4px solid var(--color-success, #f78b26); }
.alert-error { border-left: 4px solid var(--color-error, #f87171); }
.alert-info { border-left: 4px solid var(--brand-400); }
.alert-warning { border-left: 4px solid var(--color-warn, #fbbf24); }

/* --------------------------------------------------------------------------
   10. Landing specifics
   -------------------------------------------------------------------------- */
.lp-glass {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
}
html[data-theme="dark"] body:has(.lp-light) .lp-glass {
    background: var(--glass-bg) !important;
    box-shadow: var(--glass-shadow);
}
.lp-panel-cta,
.lp-promo {
    border-radius: var(--clay-radius) !important;
}
.lp-panel-cta {
    background: var(--neu-bg) !important;
    border: var(--neu-border) !important;
    box-shadow: var(--neu-raised) !important;
}
.lp-promo {
    box-shadow: var(--clay-shadow) !important;
}
.lp-tools-card .tool-card,
.tool-card {
    background: var(--neu-bg-2) !important;
    border: var(--neu-border) !important;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-raised-sm) !important;
}
.tool-card-icon {
    background: var(--clay-bg) !important;
    color: #fff !important;
    box-shadow: var(--clay-shadow);
}

/* --------------------------------------------------------------------------
   11. Scrollbars
   -------------------------------------------------------------------------- */
* {
    scrollbar-color: var(--action-2) transparent;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--action-1), var(--action-2));
    border-radius: 999px;
}
::-webkit-scrollbar-track {
    background: rgba(247, 139, 38, 0.08);
}

/* --------------------------------------------------------------------------
   12. ACTIVE MENU — one consistent "you are here" treatment, site-wide
   -------------------------------------------------------------------------- */

/* --- horizontal public navigation (navbar + mobile drawer) --- */
.nav-link-item.active,
.nav-links .nav-link-item.active,
.topbar-nav .nav-link-item.active,
.drawer .nav-link-item.active {
    background: var(--clay-bg) !important;
    color: #fff !important;
    border-radius: 999px;
    padding-inline: 0.85rem;
    box-shadow: var(--clay-shadow) !important;
    font-weight: 700;
}
.nav-link-item.active::after,
.nav-links .nav-link-item.active::after {
    background: #fff !important;
    opacity: 0.9;
}
.nav-link-item.active .tool-icon {
    color: #fff !important;
}

/* --- dropdown parent that contains the current page --- */
.nav-dropdown.has-active > .dropdown-toggle {
    color: var(--brand-300) !important;
    background: var(--neu-bg-2) !important;
    border-radius: 999px;
    box-shadow: var(--neu-raised-sm) !important;
    font-weight: 700;
}

/* --- dropdown child --- */
.dropdown-item.active,
.nav-dropdown .dropdown-item.active {
    background: var(--clay-bg) !important;
    color: #fff !important;
    border-radius: 10px;
    box-shadow: var(--clay-inset) !important;
    font-weight: 700;
}
.dropdown-item.active .tool-icon { color: #fff !important; }

/* --- user panel sidebar --- */
.up-link.active {
    background: var(--clay-bg) !important;
    color: #fff !important;
    border-radius: 14px;
    box-shadow: var(--clay-inset) !important;
    font-weight: 700;
    position: relative;
}
.up-link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: var(--brand-300);
}
.up-link.active svg { color: #fff !important; }
.up-link.active .up-badge { background: rgba(255, 255, 255, 0.24); color: #fff !important; }

/* --- user panel header dropdown links (profile, ...) --- */
.up-dd-link.active {
    background: var(--clay-bg) !important;
    color: #fff !important;
    border-radius: 10px;
    box-shadow: var(--clay-inset) !important;
    font-weight: 700;
}
.up-dd-link.active svg { color: #fff !important; }
.up-avatar-btn.active,
.up-hbtn.active {
    box-shadow: var(--clay-inset) !important;
    border-color: var(--brand-400) !important;
}

/* --- admin dashboard sidebar --- */
.sidebar-item.active,
.dash-sidebar .sidebar-item.active,
.admin-dashboard .sidebar-item.active {
    background: var(--clay-bg) !important;
    color: #fff !important;
    box-shadow: var(--clay-inset) !important;
    font-weight: 700;
    position: relative;
}
.sidebar-item.active::before,
.dash-sidebar .sidebar-item.active::before,
.admin-dashboard .sidebar-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 58%;
    border-radius: 999px;
    background: var(--brand-200);
}
.sidebar-item.active svg,
.dash-sidebar .sidebar-item.active svg,
.admin-dashboard .sidebar-item.active svg { color: #fff !important; filter: none !important; }
.sidebar-item.active .sub-bullet { color: #fff !important; }
.sidebar-item.active .sidebar-badge { background: rgba(255, 255, 255, 0.24); color: #fff !important; }

/* parent group of the current page */
.sidebar-group.active,
.dash-sidebar .sidebar-group.active,
.admin-dashboard .sidebar-group.active {
    color: var(--brand-300) !important;
    background: var(--neu-bg-2) !important;
    box-shadow: var(--neu-inset) !important;
    font-weight: 700;
}
.sidebar-group.active .group-chevron,
.dash-sidebar .sidebar-group.active .group-chevron { color: var(--brand-300) !important; }
.sidebar-submenu { border-inline-start: 2px solid var(--brand-600); margin-inline-start: 10px; }
.sub-bullet { color: var(--brand-300) !important; }
.sidebar-section-title { color: var(--brand-200) !important; letter-spacing: 0.02em; }
html[data-theme="light"] .sidebar-section-title { color: var(--brand-600) !important; }

/* --- accessibility --- */
[aria-current="page"] { position: relative; }

/* --------------------------------------------------------------------------
   12b. Theme toggle switch (admin setting) — hides every toggle site-wide
   -------------------------------------------------------------------------- */
html[data-theme-toggle="off"] .theme-toggle,
html[data-theme-toggle="off"] .nav-theme-toggle,
html[data-theme-toggle="off"] .dash-theme-toggle,
html[data-theme-toggle="off"] .up-hbtn.theme-toggle {
    display: none !important;
}

/* --------------------------------------------------------------------------
   13b. TEXT COLOUR SYSTEM — every text on the site uses the brand orange
   -------------------------------------------------------------------------- */
:root {
    --color-text: #ffb37a;
    --color-text-secondary: #ffa054;
    --color-text-dim: #d98f52;
    --text: #ffb37a;
    --text-secondary: #ffa054;
    --text-dim: #d98f52;
    --text-muted: #d98f52;
}
html[data-theme="light"] {
    --color-text: #8a3d0a;
    --color-text-secondary: #a85310;
    --color-text-dim: #6f4a2a;
    --text: #8a3d0a;
    --text-secondary: #a85310;
    --text-dim: #6f4a2a;
    --text-muted: #6f4a2a;
}

/* components that hardcode a grey instead of using a token */
body { color: var(--color-text); }
.navbar .logo,
.navbar .nav-link-item,
.navbar .dropdown-toggle,
.navbar .dropdown-item,
.user-topbar, .user-topbar-link,
.site-footer, .site-footer .logo, .footer-links a, .footer-brand p, .footer-copy,
.dash-header, .dash-page-title, .dash-page-sub, .dash-sidebar, .sidebar-item,
.sidebar-section-title, .dash-main, .table-wrap, .tbl,
.up-shell, .up-main, .up-link, .up-brand, .up-user, .up-footer, .up-nav-label,
.auth-card, .login-card, .auth-label, .auth-logo-sub, .auth-foot, .auth-link,
.form-label, .settings-label, .settings-name, .settings-desc, .card, .panel,
.stat, .badge, .tab, .empty-state, .hint, .form-card, .settings-card {
    color: var(--color-text) !important;
}
.navbar .nav-link-item, .dropdown-item, .footer-links a, .footer-brand p,
.footer-copy, .dash-page-sub, .sidebar-section-title, .up-nav-label,
.settings-desc, .auth-logo-sub, .auth-foot, .badge, .tab {
    color: var(--color-text-dim) !important;
}
.navbar .nav-link-item:hover, .dropdown-item:hover, .footer-links a:hover {
    color: var(--color-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn-primary, .auth-btn, .btn-login, .lp-btn-primary, .lp-promo-btn,
    .up-hbtn, .hbtn, .pay-btn, .submit-btn,
    .card, .stat, .result-card, .dash-card, .tool-card {
        transition: none !important;
        transform: none !important;
    }
}