@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   Global Reset & Focus Outline Fix (Eliminates jarring white/black browser focus rings)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

*:focus,
*:focus-visible,
button:focus,
button:focus-visible,
button:active,
input:focus,
input:focus-visible,
input:active,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
a:focus,
a:focus-visible,
a:active {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================================
   Light Mode (Default & html.light: Warm Alabaster & Obsidian Surfaces)
   ========================================================================== */
:root,
html,
html.light {
    --font-main: 'Plus Jakarta Sans', sans-serif;

    /* Base Surfaces */
    --color-charcoal-bg: #f7f6f2;
    --color-charcoal-card: #ffffff;
    --color-charcoal-card-border: #e5e2d8;
    --color-charcoal-input: #fcfbfa;
    --color-charcoal-input-border: #ded9cd;
    --color-charcoal-input-focus: #18191c;

    /* Neutral Elements */
    --color-cool-gray-muted: #6c707d;
    --color-cool-gray-light: #484b56;
    --color-cool-gray-border: #e3dfd4;
    --color-cool-gray-hover: #eeece4;
    --color-cool-gray-active: #e2ded4;
    --color-cool-gray-disabled: #b5b1a6;

    /* Primary Actions */
    --color-soft-ivory: #141518;
    --color-soft-ivory-dim: #32353e;
    --color-soft-ivory-btn: #16171a;
    --color-soft-ivory-btn-hover: #2a2b32;
    --color-charcoal-btn-text: #f7f6f2;

    /* Status Colors */
    --color-success: #10b981;
    --color-success-hover: #059669;
    --color-success-active: #047857;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-success-text: #065f46;

    --color-error: #ef4444;
    --color-error-hover: #dc2626;
    --color-error-active: #b91c1c;
    --color-error-bg: #fef2f2;
    --color-error-border: #fecaca;
    --color-error-text: #991b1b;

    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-active: #b45309;
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;

    --color-info: #3b82f6;
    --color-info-hover: #2563eb;
    --color-info-active: #1d4ed8;
    --color-info-bg: #eff6ff;
    --color-info-border: #bfdbfe;
    --color-info-text: #1e40af;

    /* Interactive States */
    --color-interactive-hover: #eeece4;
    --color-interactive-active: #e2ded4;
    --color-interactive-focus: #18191c;
    --color-interactive-disabled: #f4f2eb;
    --color-interactive-disabled-text: #99958c;

    --color-overlay: rgba(0, 0, 0, 0.4);
    --color-selection-bg: rgba(22, 23, 26, 0.12);
    --color-focus-ring: rgba(22, 23, 26, 0.12);
    --card-shadow: 0 10px 25px -5px rgba(22, 23, 26, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Dark Mode (html.dark: Charcoal Black & Soft Ivory Surfaces)
   ========================================================================== */
html.dark {
    --color-charcoal-bg: #111214;
    --color-charcoal-card: #18191c;
    --color-charcoal-card-border: #27282e;
    --color-charcoal-input: #131417;
    --color-charcoal-input-border: #2d2e36;
    --color-charcoal-input-focus: #4e515e;

    --color-cool-gray-muted: #9aa0ac;
    --color-cool-gray-light: #cfd3dc;
    --color-cool-gray-border: #2c2d35;
    --color-cool-gray-hover: #222329;
    --color-cool-gray-active: #2a2c33;
    --color-cool-gray-disabled: #555861;

    --color-soft-ivory: #f6f5f0;
    --color-soft-ivory-dim: #dedbd2;
    --color-soft-ivory-btn: #f1efe7;
    --color-soft-ivory-btn-hover: #e4e1d7;
    --color-charcoal-btn-text: #121316;

    --color-success: #34d399;
    --color-success-hover: #10b981;
    --color-success-active: #059669;
    --color-success-bg: #102a22;
    --color-success-border: #1d5b46;
    --color-success-text: #6ee7b7;

    --color-error: #f87171;
    --color-error-hover: #ef4444;
    --color-error-active: #dc2626;
    --color-error-bg: #321b1e;
    --color-error-border: #713036;
    --color-error-text: #fca5a5;

    --color-warning: #fbbf24;
    --color-warning-hover: #f59e0b;
    --color-warning-active: #d97706;
    --color-warning-bg: #302613;
    --color-warning-border: #6b4d1b;
    --color-warning-text: #fcd34d;

    --color-info: #60a5fa;
    --color-info-hover: #3b82f6;
    --color-info-active: #2563eb;
    --color-info-bg: #17283e;
    --color-info-border: #2d4f7a;
    --color-info-text: #93c5fd;

    --color-interactive-hover: #222329;
    --color-interactive-active: #2a2c33;
    --color-interactive-focus: #4e515e;
    --color-interactive-disabled: #292b30;
    --color-interactive-disabled-text: #636773;

    --color-overlay: rgba(0, 0, 0, 0.65);
    --color-selection-bg: rgba(154, 160, 172, 0.2);
    --color-focus-ring: rgba(154, 160, 172, 0.18);
    --card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Global Reset & Guaranteed Window Scrolling
   ========================================================================== */

html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-charcoal-bg);
    color: var(--color-soft-ivory);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: background-color 0.25s ease, color 0.25s ease;
}

#app-main {
    flex: 1 0 auto;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: opacity 0.16s ease-in-out, transform 0.16s ease-in-out;
}

.page-entering {
    opacity: 0.9;
}

.page-entered {
    opacity: 1;
    animation: page-fade-in 0.18s ease-out;
}

@keyframes page-fade-in {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   Skeleton Shimmer Loading System
   ========================================================================== */

.skeleton-box {
    position: relative;
    overflow: hidden;
    background-color: var(--color-charcoal-input);
    border: 1px solid var(--color-charcoal-card-border);
}

.skeleton-box::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer-anim 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

:root:not(.dark) .skeleton-box::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.05) 50%,
        transparent 100%
    );
}

@keyframes skeleton-shimmer-anim {
    100% {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   Responsive Clamp Typography
   ========================================================================== */

.text-clamp-title {
    font-size: clamp(1.2rem, 5vw, 1.45rem);
    line-height: 1.25;
}

.text-clamp-subtitle {
    font-size: clamp(0.8125rem, 2.5vw, 0.875rem);
    line-height: 1.45;
}

.text-clamp-body {
    font-size: clamp(0.8125rem, 2.4vw, 0.875rem);
}

.text-clamp-small {
    font-size: clamp(0.725rem, 2.2vw, 0.8125rem);
}

/* ==========================================================================
   Card Container
   ========================================================================== */

.auth-container {
    width: 100%;
    max-width: 24rem; /* 384px */
    margin: 0 auto;
}

.login-card {
    background-color: var(--color-charcoal-card);
    border: 1px solid var(--color-charcoal-card-border);
    box-shadow: var(--card-shadow);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

.custom-input {
    background-color: var(--color-charcoal-input);
    border: 1px solid var(--color-charcoal-input-border);
    color: var(--color-soft-ivory);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-input::placeholder {
    color: var(--color-cool-gray-muted);
}

.custom-input:focus {
    outline: none;
    border-color: var(--color-charcoal-input-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary-ivory {
    background-color: var(--color-soft-ivory-btn);
    color: var(--color-charcoal-btn-text);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary-ivory:hover {
    background-color: var(--color-soft-ivory-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary-ivory:active {
    transform: translateY(0);
}

.btn-secondary-dark {
    background-color: var(--color-charcoal-input);
    border: 1px solid var(--color-cool-gray-border);
    color: var(--color-soft-ivory);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary-dark:hover {
    background-color: var(--color-cool-gray-hover);
    border-color: var(--color-charcoal-input-focus);
    transform: translateY(-1px);
}

.btn-secondary-dark:active {
    transform: translateY(0);
}

.text-ivory {
    color: var(--color-soft-ivory);
}

.text-cool-gray {
    color: var(--color-cool-gray-muted);
}

/* ==========================================================================
   Status Utility Classes
   ========================================================================== */

.text-success {
    color: var(--color-success-text);
}

.bg-success {
    background-color: var(--color-success-bg);
}

.border-success {
    border-color: var(--color-success-border);
}

.text-error {
    color: var(--color-error-text);
}

.bg-error {
    background-color: var(--color-error-bg);
}

.border-error {
    border-color: var(--color-error-border);
}

.text-warning {
    color: var(--color-warning-text);
}

.bg-warning {
    background-color: var(--color-warning-bg);
}

.border-warning {
    border-color: var(--color-warning-border);
}

.text-info {
    color: var(--color-info-text);
}

.bg-info {
    background-color: var(--color-info-bg);
}

.border-info {
    border-color: var(--color-info-border);
}

/* ==========================================================================
   Interactive States
   ========================================================================== */

.is-disabled,
button:disabled,
input:disabled {
    color: var(--color-interactive-disabled-text);
    border-color: var(--color-charcoal-card-border);
    cursor: not-allowed;
    opacity: 0.7;
}

::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-soft-ivory);
}

/* ==========================================================================
   Toast Notification Styles
   ========================================================================== */
#toast-container {
    box-sizing: border-box;
}

.toast-item {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-charcoal-card);
    border: 1px solid var(--color-charcoal-card-border);
    border-radius: 14px;
    box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    width: 100%;
    box-sizing: border-box;
}

.toast-item.toast-leave {
    opacity: 0;
    transform: translateX(100%);
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(30px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toast-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 639px) {
    #toast-container {
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        align-items: center !important;
    }

    .toast-item {
        width: 100% !important;
        max-width: 100% !important;
        animation: toast-slide-down 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .toast-item.toast-leave {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

/* OTP Box Focus Animations & Centering */
.otp-box, .otp-box-reset {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    caret-color: var(--color-soft-ivory);
    transition: all 0.15s ease-in-out;
}

.otp-box:focus, .otp-box-reset:focus {
    border-color: var(--color-soft-ivory);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    transform: translateY(-2px);
}

/* Modal Backdrop & Dialog */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 16px;
    animation: modal-fade-in 0.2s ease-out forwards;
}

.modal-dialog {
    background: var(--color-charcoal-card);
    border: 1px solid var(--color-charcoal-card-border);
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
    animation: modal-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Professional Dashboard Styles
   ========================================================================== */

.is-dashboard-page #app-main {
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
}

/* Mobile & Tablet Header: Normal relative flow (scrolls with page as requested) */
.dash-header-bar {
    position: relative;
    width: 100%;
    height: 4rem; /* 64px */
    z-index: 25;
}

/* Desktop Header: Strictly Fixed at top */
@media (min-width: 1024px) {
    .dash-header-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4rem !important;
        z-index: 35 !important;
    }

    .dash-sidebar-fixed {
        position: fixed !important;
        top: 4rem !important; /* 64px header */
        left: 0 !important;
        bottom: 0 !important;
        width: 16rem !important;
        overflow-y: auto !important;
        z-index: 30 !important;
    }

    .dash-content-offset {
        margin-left: 16rem !important;
        padding-top: 5.5rem !important; /* Generous breathing room below fixed header */
        width: calc(100% - 16rem) !important;
        max-width: none !important;
    }
}

.mobile-bottom-nav-fixed {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4.25rem !important;
    z-index: 45 !important;
}

.nav-btn.nav-active {
    background-color: var(--color-charcoal-bg) !important;
    color: var(--color-soft-ivory) !important;
    border-color: var(--color-charcoal-card-border) !important;
    font-weight: 600 !important;
}

.nav-btn.nav-active iconify-icon {
    color: #0284c7 !important;
}

html.dark .nav-btn.nav-active iconify-icon {
    color: #38bdf8 !important;
}

.mob-btn.nav-active {
    color: #0284c7 !important;
}

html.dark .mob-btn.nav-active {
    color: #38bdf8 !important;
}

.pro-card {
    background: var(--color-charcoal-card);
    border: 1px solid var(--color-charcoal-card-border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
}

/* Results table horizontal scroll fix for mobile */
.pro-card > div[class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.35) rgba(255, 255, 255, 0.04);
}

.pro-card > div[class*="overflow-x-auto"]::-webkit-scrollbar {
    height: 8px;
}

.pro-card > div[class*="overflow-x-auto"]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    margin: 0 12px;
}

.pro-card > div[class*="overflow-x-auto"]::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(56, 189, 248, 0.1);
    transition: background 0.2s ease;
}

.pro-card > div[class*="overflow-x-auto"]::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.5);
}

/* Sort header hover */
th[id^="sort-"] {
    transition: color 0.15s ease;
    cursor: pointer;
}

th[id^="sort-"]:hover {
    color: var(--color-soft-ivory);
}

th[id^="sort-"]:hover .sort-icon {
    opacity: 1 !important;
}

/* ==========================================================================
   Clean Professional Minimalist Icons (No tacky gradients or hover scales)
   ========================================================================== */
.pro-icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--color-charcoal-bg);
    border: 1px solid var(--color-charcoal-card-border);
    color: var(--color-soft-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   VIP Badge & Interactive Tooltip with Tail Pointer
   ========================================================================== */
.vip-badge {
    position: relative;
    user-select: none;
}

.vip-tooltip {
    position: absolute;
    bottom: calc(100% + 9px);
    right: 0;
    left: auto;
    transform: translateY(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    z-index: 9999;
    white-space: nowrap;
    background-color: var(--color-charcoal-card);
    color: var(--color-soft-ivory);
    border: 1px solid var(--color-charcoal-card-border);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

/* Tooltip Arrow Outer Border */
.vip-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    left: auto;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-charcoal-card-border) transparent transparent transparent;
}

/* Tooltip Arrow Inner Fill */
.vip-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 21px;
    left: auto;
    margin-top: -1px;
    border-width: 4px;
    border-style: solid;
    border-color: var(--color-charcoal-card) transparent transparent transparent;
    z-index: 1;
}

/* Active or Hovered State */
.vip-badge:hover .vip-tooltip,
.vip-badge:focus .vip-tooltip,
.vip-badge.is-active .vip-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   Fixed Header & Immovable Mobile Bottom Navigation
   ========================================================================== */
@media (min-width: 1024px) {
    .dash-header-bar {
        position: sticky;
        top: 0;
        z-index: 40;
    }
    .dash-sidebar-fixed {
        position: sticky;
        top: 4rem;
        height: calc(100vh - 4rem);
    }
}

.mobile-bottom-nav-fixed {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 3.75rem !important;
    z-index: 50 !important;
}