/* Base Variables & Overrides */
:root {
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur: 16px;
    --primary: #1E3A8A;
    --violet: #7C3AED;
    --cyan: #06B6D4;
}

body {
    background-image: radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
    background: #f4f7fe;
    /* Fallback */
    background: linear-gradient(135deg, #f0f4fd 0%, #ffffff 100%);
}

/* Glassmorphism Classes */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.glass-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.03);
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-card:hover {
    box-shadow: 0 12px 30px 0 rgba(31, 38, 135, 0.07);
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.75);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Animations */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
    }

    50% {
        box-shadow: 0 0 20px 10px rgba(124, 58, 237, 0.1);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 3s infinite ease-in-out;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* AI Speaking Waveform Animation base classes */
.waveform-bar {
    animation: waveform 1.2s ease-in-out infinite;
    transform-origin: bottom;
}

@keyframes waveform {

    0%,
    100% {
        height: 20%;
    }

    50% {
        height: 100%;
    }
}

/* Typing Indicator Animation */
.typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Ambient Background Gradients (Shared across pages) */
.ambient-glow {
    position: fixed;
    top: -20%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, rgba(244, 247, 254, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.ambient-glow-2 {
    position: fixed;
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(244, 247, 254, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Avatar processing rings */
@keyframes spin-slow {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes ping-slow {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.ring-1 {
    animation: spin-slow 12s linear infinite;
    border-top-color: transparent;
    border-right-color: transparent;
}

.ring-2 {
    animation: spin-reverse 8s linear infinite;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

/* Ambient Glow */
.ambient-glow {
    position: fixed;
    top: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.ambient-glow-2 {
    position: fixed;
    bottom: -20%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.08);
}

/* OTP Inputs */
.otp-input {
    width: 3.5rem;
    height: 4rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Hide arrows on number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom Scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Hide complete scrollbar class for smooth UI */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* DataTable Custom Aesthetic Overrides */
div.dt-container {
    font-family: 'Outfit', sans-serif;
    color: #334155;
    padding-bottom: 0.75rem;
}

div.dt-length select {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 2rem 0.5rem 1rem !important;
    color: #475569 !important;
    font-size: 0.875rem !important;
    min-width: 4rem;
}

div.dt-search input {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    color: #475569 !important;
    font-size: 0.875rem !important;
    margin-left: 0.5rem;
}

div.dt-search input:focus,
div.dt-length select:focus {
    outline: none !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 1px #14b8a6 !important;
}

div.dt-paging button {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.75rem !important;
    margin: 0 0.125rem !important;
    transition: all 0.2s;
}

div.dt-paging button:hover:not(.current) {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

div.dt-paging button.current {
    background-color: #14b8a6 !important;
    border-color: #14b8a6 !important;
    color: #ffffff !important;
}

table.dataTable thead th,
table.dataTable thead td {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    color: #64748b !important;
    font-weight: 500 !important;
    padding: 1rem !important;
}

table.dataTable tbody td {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 1rem !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #f1f5f9 !important;
}

/* DataTables: hide scrollbars on horizontal scroll areas; keep touch/trackpad scroll */
div.dt-container .dt-scroll,
div.dt-container .dt-scroll-body,
div.dt-container .dt-scroll-head {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

div.dt-container .dt-scroll::-webkit-scrollbar,
div.dt-container .dt-scroll-body::-webkit-scrollbar,
div.dt-container .dt-scroll-head::-webkit-scrollbar {
    display: none;
}

/* CSS-only Tabs via Radio Hacks */
.tab-panel {
    display: none;
}

/* Show the active panel */
#tab-general-radio:checked~.tab-content-container #tab-general,
#tab-mail-radio:checked~.tab-content-container #tab-mail {
    display: block;
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nav Labels Inactive State */
.tab-nav-container label {
    color: #94a3b8;
    /* text-slate-400 */
}

.tab-nav-container label:hover {
    background-color: #1e293b;
    /* bg-slate-800 */
    color: #ffffff;
    /* text-white */
}

.tab-nav-container label .icon-fill {
    display: none;
}

.tab-nav-container label .icon-outline {
    display: block;
}

/* Nav Labels Active State */
#tab-general-radio:checked~.tab-nav-container .label-general,
#tab-mail-radio:checked~.tab-nav-container .label-mail {
    background-color: rgba(20, 184, 166, 0.1);
    /* bg-brand-500/10 */
    color: #14b8a6;
    /* text-brand-500 */
}

#tab-general-radio:checked~.tab-nav-container .label-general:hover,
#tab-mail-radio:checked~.tab-nav-container .label-mail:hover {
    background-color: rgba(20, 184, 166, 0.15);
    color: #0d9488;
}

#tab-general-radio:checked~.tab-nav-container .label-general .icon-outline,
#tab-mail-radio:checked~.tab-nav-container .label-mail .icon-outline {
    display: none;
}

#tab-general-radio:checked~.tab-nav-container .label-general .icon-fill,
#tab-mail-radio:checked~.tab-nav-container .label-mail .icon-fill {
    display: block;
}