/* ALEXBANK Brand Colors & Styling */
:root {
    --alex-green: #007336;
    --alex-green-dark: #004d24;
    --alex-orange: #f37021;
    --alex-orange-hover: #d95e12;
}

[hidden] { display: none !important; }
button:disabled { opacity: .55; cursor: wait; }
.auth-panel { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse at top right, #00351f55, transparent 60%), #020617; }
.auth-card { width: 100%; max-width: 440px; background: #0f172ae8; border: 1px solid #334155; border-top: 3px solid #f37021; border-radius: 22px; padding: 30px; box-shadow: 0 20px 70px #0005; }
.auth-logo { width: 240px; max-width: 100%; background: white; padding: 10px; border-radius: 10px; }
.auth-panel label, .management-card label { display: block; font-size: 12px; color: #cbd5e1; font-weight: 700; }
.auth-input { display: block; width: 100%; margin-top: 7px; padding: 11px 12px; background: #020617; color: #f8fafc; border: 1px solid #334155; border-radius: 10px; font-size: 14px; }
.auth-input:focus-visible { outline: 2px solid #f37021; outline-offset: 2px; }
.auth-submit { width: 100%; padding: 12px; border-radius: 10px; background: #007336; color: white; font-weight: 800; font-size: 14px; }
.auth-submit:hover { background: #008b42; }
.account-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px; border: 1px solid #334155; border-radius: 16px; background: #0f172a; }
.account-toolbar button, .management-card button:not(.auth-submit) { padding: 8px 10px; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; font-size: 12px; }
.management-card { width: 100%; max-width: 850px; max-height: 90vh; overflow-y: auto; background: #0f172a; border: 1px solid #334155; padding: 22px; border-radius: 18px; }
.account-row { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border: 1px solid #1e293b; border-radius: 10px; }
.account-row p, .audit-entry p { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.audit-entry { padding: 14px; background: #020617; border: 1px solid #1e293b; border-radius: 10px; }
.audit-entry strong { font-size: 13px; }
.audit-changes { color: #cbd5e1; font-size: 12px; line-height: 1.9; margin-top: 10px; overflow-wrap: anywhere; }
@media (max-width: 480px) { .auth-card { padding: 22px; } .management-card { padding: 15px; } }
@media (max-width: 639px) {
 .header-identity { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 10px !important; }
 .header-identity > div:first-child { grid-column: 2; grid-row: 1; max-width: 140px; padding: 8px !important; }
 .header-identity > div:first-child img { max-width: 120px; height: auto; }
 .header-identity > div:nth-child(3) { grid-column: 1; grid-row: 1; min-width: 0; }
 .header-identity > div:nth-child(3) h1 { font-size: 13px; line-height: 1.7; }
 .header-identity > div:nth-child(3) .rounded-full { display: none; }
 .header-identity > div:nth-child(3) p { display: none; }
 .header-identity > div:last-child { grid-column: 1 / -1; grid-row: 2; }
}

@layer utilities {
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: #090d16;
    }
    ::-webkit-scrollbar-thumb {
        background: #1e293b;
        border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #007336;
    }
}

/* Animations */
@keyframes scaleUp {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-scale-up {
    animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Alexbank Glow Effects */
.card-glow-alex:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 115, 54, 0.2), 0 8px 10px -6px rgba(243, 112, 33, 0.15);
}

/* Progress bar transitions */
.smooth-progress {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Numbers font styling */
.font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}

/* Status Badges */
.badge-achieved {
    background: rgba(0, 115, 54, 0.2);
    color: #34d399;
    border: 1px solid rgba(0, 115, 54, 0.5);
}

.badge-on-track {
    background: rgba(243, 112, 33, 0.15);
    color: #fb923c;
    border: 1px solid rgba(243, 112, 33, 0.4);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

/* Print Styling for reports */
@media print {
    header, footer, button, .no-print {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}