/* Base Fonts & Body */
body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }

/* Brand Colors */
.brand-bg-navy { background-color: #0A2342; }
.brand-bg-gold { background-color: #B28A3D; }
.brand-text-gold { color: #B28A3D; }
.brand-text-near-black { color: #1D1D1F; }
.brand-hover-gold:hover { background-color: #c9a661; }
.brand-hover-navy:hover { background-color: #1a3b63; }

/* Login Page Specifics */
.btn-gold { background-color: #B28A3D; color: white; transition: all 0.2s; }
.btn-gold:hover { background-color: #c9a661; }
.input-field { background-color: #f3f4f6; border: 1px solid #e5e7eb; transition: all 0.2s; }
.input-field:focus { border-color: #B28A3D; background-color: white; outline: none; box-shadow: 0 0 0 3px rgba(178, 138, 61, 0.1); }
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Dashboard Status Animations */
.alert-card { border-left: 5px solid #ef4444; animation: pulse-border 1.5s infinite; }
@keyframes pulse-border { 0%, 100% { border-color: #ef4444; } 50% { border-color: #f87171; } }

.acknowledged-card { border-left: 5px solid #f59e0b; }

.alert-banner { 
    background-color: #ef4444; color: white; padding: 1rem; text-align: center; 
    font-weight: bold; display: none; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; 
    animation: pulse-red 1.5s infinite; 
}
@keyframes pulse-red { 0%, 100% { background-color: #ef4444; } 50% { background-color: #dc2626; } }

/* UI Utilities */
.modal-backdrop { background-color: rgba(0,0,0,0.5); z-index: 150; }
.modal { z-index: 200; }
.nav-btn.active { background-color: #B28A3D; color: #FFFFFF; }
.nav-btn.active svg { color: #FFFFFF; }
.tab-btn { border-color: transparent; }
.tab-btn.active { border-color: #B28A3D; color: #0A2342; }
.view-toggle-btn.active { background-color: #0A2342; color: white; }

/* Sidebar Responsive Layout */
.sidebar-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 1.5rem 1rem;
}

.sidebar-header {
    flex-shrink: 0;
    padding-bottom: 1.5rem;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.sidebar-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Consistent spacing between all nav buttons */
.sidebar-nav .nav-btn {
    margin-bottom: 0.375rem; /* 6px - consistent spacing between tabs */
}

.sidebar-nav .nav-btn:last-child {
    margin-bottom: 0; /* Remove margin from last tab */
}

/* Ensure all nav buttons (including logout) have same font size */
.sidebar-nav .nav-btn,
.sidebar-footer .nav-btn {
    font-size: 1rem; /* 16px - consistent across all tabs */
    font-weight: 500;
}

.sidebar-footer {
    flex-shrink: 0;
    padding-top: 0.75rem; /* Match the top padding of sidebar-nav for equal spacing */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Sidebar mobile styles */
    .sidebar-container {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 9999;
    }
    
    .sidebar-container.mobile-open {
        transform: translateX(0);
    }
    
    /* Main content margin on mobile when sidebar is closed */
    main {
        width: 100%;
        margin-left: 0;
    }
    
    /* Table horizontal scroll on mobile */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Responsive tables */
    table {
        min-width: 100%;
        font-size: 0.875rem;
    }
    
    /* Modal responsive on mobile */
    .modal {
        max-width: 95vw;
        margin: 1rem;
    }
    
    /* Form inputs on mobile */
    input, select, textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Reduce padding on cards on mobile */
    .p-6, .p-8 {
        padding: 1rem;
    }
    
    /* Stack buttons vertically on mobile */
    .flex.flex-wrap {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Hide some columns on mobile tables if needed */
    .mobile-hide {
        display: none;
    }
}