/* SME Finance Monitor — Custom CSS */

/* Smooth dark mode transitions */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: ease;
}

/* Opt out of transitions on elements that shouldn't animate */
img,
video,
canvas,
[transition-none] {
    transition: none !important;
}

/* Color scheme hint for scrollbars */
:root {
    color-scheme: light dark;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
.dark ::-webkit-scrollbar-thumb {
    background: #374151;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Avatar upload hover overlay */
.avatar-upload-wrap {
    position: relative;
    display: inline-block;
}
.avatar-upload-wrap .overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.avatar-upload-wrap:hover .overlay {
    opacity: 1;
}

/* Flash message fade-out */
.flash-message {
    animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Focus ring override for brand color */
[type="text"]:focus,
[type="email"]:focus,
[type="password"]:focus,
[type="tel"]:focus,
[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
}

/* Active tab indicator */
.tab-active {
    border-bottom-color: #4f46e5;
    color: #4f46e5;
}
.dark .tab-active {
    border-bottom-color: #818cf8;
    color: #818cf8;
}