/* Alpine: hide until hydrated */
[x-cloak] {
    display: none !important;
}

/* TechPhoenix – charcoal gray (darker side) */
:root {
    /* Charcoal scale */
    --charcoal-950: #171923;
    --charcoal-900: #1A202C;
    --charcoal-800: #2D3748;
    --charcoal-700: #4A5568;
    --charcoal-600: #718096;
    --charcoal-500: #A0AEC0;
    /* Map legacy names for compatibility */
    --primary-teal: #4A5568;
    --dark-teal: #2D3748;
    --navy-light: #718096;
    --brand-cyan: #90CDF4;
    --brand-lavender: #B794F4;
    --cream-bg: #EDF2F7;
    --cream-bg-warm: #E2E8F0;
    --error-red: #C53030;
}

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

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

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

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

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

.text-primary-teal {
    color: var(--primary-teal);
}

.text-dark-teal {
    color: var(--dark-teal);
}

.text-brand-cyan {
    color: var(--brand-cyan);
}

.text-brand-lavender {
    color: var(--brand-lavender);
}

.border-primary-teal {
    border-color: var(--primary-teal);
}

.border-brand-cyan {
    border-color: var(--brand-cyan);
}

.hover\:bg-dark-teal:hover {
    background-color: var(--dark-teal);
}

.hover\:bg-primary-teal:hover {
    background-color: var(--primary-teal);
}

.hover\:bg-brand-cyan:hover {
    background-color: var(--brand-cyan);
}

.hover\:text-dark-teal:hover {
    color: var(--dark-teal);
}

.hover\:text-primary-teal:hover {
    color: var(--primary-teal);
}

.focus-ring-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--charcoal-600);
}

/* Buttons – charcoal */
.btn-primary {
    background: linear-gradient(180deg, #4A5568 0%, #2D3748 100%);
    color: #E2E8F0;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #2D3748 0%, #1A202C 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--charcoal-500);
}

.badge-cream {
    background-color: #E2E8F0;
    color: #2D3748;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-cream-light {
    background-color: #CBD5E0;
    color: #2D3748;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
}

.table-header-cream {
    background-color: var(--cream-bg);
}

.stat-icon-cream {
    background-color: #E2E8F0;
    color: #4A5568;
    padding: 0.75rem;
    border-radius: 9999px;
}

.stat-icon-cream-dark {
    background-color: #CBD5E0;
    color: #2D3748;
    padding: 0.75rem;
    border-radius: 9999px;
}

/* Earning entries analytics – distinct icon styles per card */
.stat-icon-earnings {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-earnings svg,
.stat-icon-earnings i {
    font-size: 1.25rem;
}

.stat-icon-earnings-usd {
    background-color: #D1FAE5;
    color: #047857;
}

.stat-icon-earnings-inr {
    background-color: #DBEAFE;
    color: #1D4ED8;
}

.stat-icon-earnings-year {
    background-color: #FEF3C7;
    color: #B45309;
}

.stat-icon-earnings-avg {
    background-color: #E2E8F0;
    color: #4A5568;
}

.link-primary {
    color: #4A5568;
}

.link-primary:hover {
    color: #2D3748;
}

input.focus-ring-primary:focus,
textarea.focus-ring-primary:focus,
select.focus-ring-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--charcoal-500);
    border-color: var(--charcoal-600);
}

.login-input {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.login-input:focus {
    border-color: #4A5568;
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.15);
}

.login-input:not(:placeholder-shown) {
    border-color: #4A5568;
    background-color: #ffffff;
}

.relative:has(.login-input:focus) .email-icon,
.relative:has(.login-input:focus) .password-icon {
    color: #4A5568;
    transition: color 0.2s;
}

.btn-primary.rounded-full {
    border-radius: 9999px;
}