/**
 * Custom Styles
 * Essential Energy Holding - Portal de Licitaciones
 * Supplements Tailwind CSS utility classes.
 */

/* =============================================
   Base & Typography
   ============================================= */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* =============================================
   Scrollbar styling (Global & Responsive)
   ============================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #d4d4d8;
    border-radius: 4px;
}

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

@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background-color: #52525b;
    }
}

@media (prefers-color-scheme: light) {
    ::-webkit-scrollbar-thumb {
        background-color: #f0f0f0ff;
    }
}

/* Enforce style based on class-based dark mode toggle (html.dark) */
html.dark ::-webkit-scrollbar-thumb,
html.dark::-webkit-scrollbar-thumb {
    background-color: #52525b;
}

html:not(.dark) ::-webkit-scrollbar-thumb,
html:not(.dark)::-webkit-scrollbar-thumb {
    background-color: #f0f0f0ff;
}

/* Standard/Firefox support */
* {
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8;
}

@media (prefers-color-scheme: dark) {
    * {
        scrollbar-color: #52525b transparent;
    }
}

@media (prefers-color-scheme: light) {
    * {
        scrollbar-color: #f0f0f0ff;
    }
}

html.dark,
html.dark * {
    scrollbar-color: #52525b transparent;
}

html:not(.dark),
html:not(.dark) * {
    scrollbar-color: #f0f0f0ff;
}

/* =============================================
   Flash message auto-dismiss animation
   ============================================= */
.flash-message {
    animation: flashFadeIn 0.3s ease-out;
}
@keyframes flashFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   Sidebar active indicator
   ============================================= */
.sidebar-active {
    position: relative;
}
.sidebar-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: #1B3A5C;
    border-radius: 0 3px 3px 0;
}

/* =============================================
   Card hover effects
   ============================================= */
.card-hover {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-hover:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* =============================================
   Modal overlay
   ============================================= */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* =============================================
   Status badge colors
   ============================================= */
.badge-published    { background: #dcfce7; color: #166534; }
.badge-draft        { background: #f1f5f9; color: #475569; }
.badge-under_review { background: #fef3c7; color: #92400e; }
.badge-closed       { background: #fee2e2; color: #991b1b; }
.badge-awarded      { background: #dbeafe; color: #1e40af; }
.badge-urgent       { background: #fecaca; color: #991b1b; }

/* =============================================
   File drop zone
   ============================================= */
.drop-zone {
    border: 2px dashed #cbd5e1;
    transition: border-color 0.2s, background-color 0.2s;
}
.drop-zone:hover,
.drop-zone.drag-over {
    border-color: #1B3A5C;
    background-color: #f0f5fa;
}

/* =============================================
   Loading spinner
   ============================================= */
.spinner {
    border: 3px solid #e2e8f0;
    border-top: 3px solid #1B3A5C;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================================
   Icon glow
   ============================================= */
.icon-glow {
    filter: drop-shadow(0 0 8px currentColor);
}