:root {
    /* --- NEW THEME: YELLOW & BLACK --- */
    --brand-yellow: #FFC107;       /* Vibrant Industrial Yellow */
    --brand-yellow-dark: #d39e00;  /* Darker shade for hover */
    --brand-black: #1a1a1a;        /* Deep Black (Sidebar) */
    --brand-dark-grey: #2c2c2c;    /* Lighter Black for hover/cards */
    
    --text-dark: #212529;          /* Main text (Almost Black) */
    --text-light: #6c757d;         /* Secondary text (Grey) */
    --bg-light: #f4f6f9;           /* Light Grey (Dashboard Background) */
    --white: #ffffff;
    
    --danger: #dc3545;
    --success: #198754;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%; /* Important for portal layout */
}

/* --- BUTTONS (Yellow Theme) --- */
.btn-yellow {
    background-color: var(--brand-yellow);
    color: #000; /* Black text on yellow reads best */
    border: 1px solid var(--brand-yellow);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 700; /* Bold text for industrial look */
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.btn-yellow:hover {
    background-color: var(--brand-yellow-dark);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-color: var(--brand-yellow-dark);
}

/* Outline Button Variant */
.btn-outline-yellow {
    background: transparent;
    color: var(--brand-black);
    border: 2px solid var(--brand-yellow);
    font-weight: 600;
}

.btn-outline-yellow:hover {
    background: var(--brand-yellow);
    color: #000;
}

/* --- AUTH CARDS (Login/Signup) --- */
.auth-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Dark Gradient background for login page */
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
}

.auth-card {
    background: var(--white);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    /* Sharp Yellow Shadow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    border-top: 5px solid var(--brand-yellow);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h2 {
    color: var(--brand-black);
    font-weight: 800;
    margin: 0;
}

/* --- INPUTS --- */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--brand-black);
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 2px solid #e9ecef; /* Thicker, lighter borders */
    border-radius: 4px; /* Square corners look more technical */
    box-sizing: border-box; 
    font-size: 16px;
    transition: all 0.3s;
    background-color: #fcfcfc;
}

.form-control:focus {
    border-color: var(--brand-yellow);
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.15); /* Yellow Glow */
}

/* --- ICONS & TABLES --- */
.icon-shape {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Squared off icons */
    background: var(--brand-black);
    color: var(--brand-yellow);
}

.table>:not(caption)>*>* {
    padding: 1rem 0.5rem;
    border-bottom-color: #e0e0e0;
}

/* --- ALERTS & MESSAGES --- */
/* --- ALERTS & MESSAGES (Restored Glass Style) --- */
.messages-container {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: 90%;
    max-width: 450px;
}

/* Glassmorphism Look */
.alert-modern {
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    backdrop-filter: blur(8px);                  /* The blur effect */
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;                         /* Rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);  /* Soft shadow */
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Alert Colors (Restored) */
.alert-modern.success { border-left: 6px solid #2ecc71; color: #1e6b3c; }
.alert-modern.danger, .alert-modern.error { border-left: 6px solid #e74c3c; color: #7b1e1e; }
.alert-modern.info { border-left: 6px solid #ff6600; color: #964000; }
.alert-modern.warning { border-left: 6px solid #FFC107; color: #856404; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 992px) {
    .messages-container {
        width: 100%;
        max-width: 800px;
    }
}

.btn-close-custom {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.4;
    padding-left: 15px;
}

.btn-close-custom:hover { opacity: 1; color: #000; }

/* --- PORTAL SIDEBAR & LAYOUT (Black & Yellow) --- */

#wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

#sidebar-wrapper {
    width: 260px;
    background: var(--brand-black); /* Uses #1a1a1a */
    color: #fff;
    border-right: 1px solid #000;
    height: 100%;
    overflow-y: auto;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 1000;
}

#page-content-wrapper {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    position: relative;
    background-color: var(--bg-light);
}

/* Sidebar Heading */
.sidebar-heading {
    padding: 1.5rem 1.25rem;
    font-size: 1.2rem;
    font-weight: 800; /* Bolder */
    color: var(--brand-yellow); /* Uses #FFC107 */
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

/* Only affect items INSIDE the sidebar */
#sidebar-wrapper .list-group-item {
    background: transparent;
    color: #aaa;
    border: none;
    padding: 15px 20px;
    transition: 0.2s;
    border-left: 4px solid transparent;
    font-weight: 500;
}

#sidebar-wrapper .list-group-item:hover {
    background: var(--brand-dark-grey); /* Dark Grey Hover */
    color: var(--brand-yellow);
    border-left-color: var(--brand-yellow);
    padding-left: 25px; 
}

#sidebar-wrapper .list-group-item.active {
    background: var(--brand-dark-grey);
    color: var(--brand-yellow);
    border-left-color: var(--brand-yellow);
    font-weight: 700;
}
/* Mobile Toggle Button */
#mobile-toggle-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 999;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-black);
    border: 2px solid var(--brand-yellow);
    color: var(--brand-yellow);
}

@media (max-width: 768px) {
    #mobile-toggle-btn { display: flex; }
    
    #sidebar-wrapper {
        margin-left: -260px;
        position: absolute;
        height: 100vh;
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }

    #wrapper.toggled #sidebar-wrapper { margin-left: 0; }
    
    #wrapper.toggled #page-content-wrapper {
        opacity: 0.4;
        
    }
}

/* --- FORCE BLACK TEXT ON YELLOW BUTTONS --- */

/* 1. Your Custom Button */
.btn-yellow {
    color: #000000 !important; /* Force pure black */
    font-weight: 700;          /* Make it bold for better legibility */
}

/* 2. Bootstrap's Standard Warning Button (if you use it) */
.btn-warning {
    background-color: var(--brand-yellow) !important;
    border-color: var(--brand-yellow) !important;
    color: #000000 !important; 
    font-weight: 700;
}

/* 3. Hover States (Keep text black even when hovering) */
.btn-yellow:hover, 
.btn-warning:hover {
    color: #000000 !important;
    background-color: var(--brand-yellow-dark) !important; 
}

/* Optional: Pulse Animation to catch attention */
@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(211, 37, 37, 1);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.live {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-urgent {
    0% {
        transform: scale(0.95);
        /* box-shadow: 0 0 0 0 rgba(211, 37, 37, 1); */
    }
    70% {
        transform: scale(1);
        /* box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); */
    }
    100% {
        transform: scale(0.95);
        /* box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); */
    }
}

.urgent {
    animation: pulse-urgent 2s infinite;
}

/* These styles apply to lists inside your White Cards */
.card .list-group-item {
    background-color: #fff;      /* Force White Background */
    border: none;                /* Reset default borders */
    border-bottom: 1px solid #e9ecef; /* Add a nice light grey separator */
    color: var(--text-dark);     /* Normal text color */
}

/* Remove border from the very last item so it looks clean */
.card .list-group-item:last-child {
    border-bottom: none;
}

/* Light Grey Hover for Tasks (Instead of Black) */
.card .list-group-item:hover {
    background-color: #f8f9fa;   /* Very light grey */
    color: var(--text-dark);     /* Keep text dark */
    transform: none;             /* detailed sidebar animation not needed here */
    padding-left: 1rem;          /* Prevent the "slide" animation */
}

.icon-down {
  display: inline-block;
  animation: dropFade 1.5s infinite;
}

@keyframes dropFade {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(10px); opacity: 0; }
  51%  { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}