/* Work Reporting System - Organic & Sky Blue Design System */

:root {
    /* Primary Colors - Sky Blue */
    --primary-sky-blue: #87CEEB;
    --primary-sky-blue-dark: #4682B4;
    --primary-sky-blue-light: #B0E0E6;
    --primary-sky-blue-hover: #6BB6FF;
    
    /* Organic Colors */
    --organic-sage: #9CAF88;
    --organic-sage-light: #B8C5A6;
    --organic-sage-dark: #7A8B6B;
    
    --organic-earth: #D2B48C;
    --organic-earth-light: #E6D3A3;
    --organic-earth-dark: #B8956F;
    
    --organic-warm-brown: #A0826D;
    --organic-warm-brown-light: #C4A484;
    --organic-warm-brown-dark: #8B6F47;
    
    --organic-beige: #F5F5DC;
    --organic-beige-light: #FEFEF2;
    --organic-beige-dark: #E8E8D0;
    
    /* Accent Colors */
    --accent-success: #8FBC8F;
    --accent-warning: #DEB887;
    --accent-danger: #CD853F;
    --accent-info: var(--primary-sky-blue-light);
    
    /* Neutral Colors */
    --neutral-white: #FFFFFF;
    --neutral-off-white: #FEFEFE;
    --neutral-light-gray: #F8F9FA;
    --neutral-gray: #E9ECEF;
    --neutral-dark-gray: #6C757D;
    --neutral-text: #2C3E50;
    
    /* Shadows */
    --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.15);
    --shadow-heavy: 0 8px 16px rgba(0,0,0,0.2);
}

/* Global Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--organic-beige-light) 0%, var(--organic-beige) 100%);
    color: var(--neutral-text);
    min-height: 100vh;
    padding-bottom: 80px; /* Space for fixed footer */
}

/* Header Styles */
.navbar {
    background: linear-gradient(135deg, var(--primary-sky-blue) 0%, var(--primary-sky-blue-dark) 100%) !important;
    box-shadow: var(--shadow-medium);
    border-bottom: 3px solid var(--organic-sage);
}

.navbar-brand {
    color: var(--neutral-white) !important;
    font-weight: 600;
    font-size: 1.3rem;
}

.navbar-brand img {
    border-radius: 8px;
    box-shadow: var(--shadow-light);
}

.navbar-nav .nav-link {
    color: var(--neutral-white) !important;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--organic-beige) !important;
    transform: translateY(-1px);
}

/* Sidebar Styles */
.sidebar {
    background: linear-gradient(180deg, var(--organic-beige) 0%, var(--organic-beige-dark) 100%);
    border-right: 3px solid var(--organic-sage-light);
    box-shadow: var(--shadow-light);
}

.sidebar .nav-link {
    color: var(--neutral-text);
    padding: 12px 20px;
    margin: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.sidebar .nav-link:hover {
    background: var(--organic-sage-light);
    color: var(--neutral-text);
    transform: translateX(5px);
    border-left-color: var(--primary-sky-blue);
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--primary-sky-blue-light) 0%, var(--primary-sky-blue) 100%);
    color: var(--neutral-white);
    border-left-color: var(--primary-sky-blue-dark);
    box-shadow: var(--shadow-light);
}

.sidebar .nav-link i {
    margin-right: 10px;
    width: 20px;
}

/* Card Styles */
.card {
    background: var(--neutral-white);
    border: 2px solid var(--organic-beige-dark);
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy);
    border-color: var(--organic-sage-light);
}

.card-header {
    background: linear-gradient(135deg, var(--organic-beige) 0%, var(--organic-beige-dark) 100%);
    border-bottom: 2px solid var(--organic-sage-light);
    border-radius: 14px 14px 0 0 !important;
    color: var(--neutral-text);
    font-weight: 600;
}

/* Dashboard Metric Cards */
.border-left-primary {
    border-left: 6px solid var(--primary-sky-blue) !important;
    background: linear-gradient(135deg, var(--neutral-white) 0%, var(--primary-sky-blue-light) 100%);
}

.border-left-success {
    border-left: 6px solid var(--accent-success) !important;
    background: linear-gradient(135deg, var(--neutral-white) 0%, var(--organic-sage-light) 100%);
}

.border-left-info {
    border-left: 6px solid var(--accent-info) !important;
    background: linear-gradient(135deg, var(--neutral-white) 0%, var(--organic-beige-light) 100%);
}

.border-left-warning {
    border-left: 6px solid var(--accent-warning) !important;
    background: linear-gradient(135deg, var(--neutral-white) 0%, var(--organic-earth-light) 100%);
}

/* Button Styles */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-sky-blue) 0%, var(--primary-sky-blue-dark) 100%);
    border: 2px solid var(--primary-sky-blue-dark);
    color: var(--neutral-white);
    font-weight: 600;
    border-radius: 12px;
    padding: 10px 20px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-sky-blue-hover) 0%, var(--primary-sky-blue) 100%);
    border-color: var(--primary-sky-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--organic-sage) 0%, var(--organic-sage-dark) 100%);
    border: 2px solid var(--organic-sage-dark);
    color: var(--neutral-white);
    font-weight: 600;
    border-radius: 12px;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--organic-sage-light) 0%, var(--organic-sage) 100%);
    transform: translateY(-2px);
}

.btn-outline-primary {
    border: 2px solid var(--primary-sky-blue);
    color: var(--primary-sky-blue-dark);
    background: var(--neutral-white);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: var(--primary-sky-blue);
    color: var(--neutral-white);
    transform: translateY(-1px);
}

.btn-outline-success {
    border: 2px solid var(--accent-success);
    color: var(--organic-sage-dark);
    background: var(--neutral-white);
    border-radius: 10px;
}

.btn-outline-success:hover {
    background: var(--accent-success);
    color: var(--neutral-white);
}

.btn-outline-warning {
    border: 2px solid var(--accent-warning);
    color: var(--organic-warm-brown-dark);
    background: var(--neutral-white);
    border-radius: 10px;
}

.btn-outline-warning:hover {
    background: var(--accent-warning);
    color: var(--neutral-white);
}

.btn-outline-danger {
    border: 2px solid var(--accent-danger);
    color: var(--organic-warm-brown-dark);
    background: var(--neutral-white);
    border-radius: 10px;
}

.btn-outline-danger:hover {
    background: var(--accent-danger);
    color: var(--neutral-white);
}

.btn-outline-info {
    border: 2px solid var(--accent-info);
    color: var(--primary-sky-blue-dark);
    background: var(--neutral-white);
    border-radius: 10px;
}

.btn-outline-info:hover {
    background: var(--accent-info);
    color: var(--neutral-white);
}

/* Form Styles */
.form-control {
    border: 2px solid var(--organic-beige-dark);
    border-radius: 10px;
    padding: 12px 16px;
    background: var(--neutral-white);
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-sky-blue);
    box-shadow: 0 0 0 0.2rem rgba(135, 206, 235, 0.25);
    background: var(--primary-sky-blue-light);
}

.form-label {
    color: var(--neutral-text);
    font-weight: 600;
    margin-bottom: 8px;
}

/* Table Styles */
.table {
    background: var(--neutral-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

.table-dark {
    background: linear-gradient(135deg, var(--primary-sky-blue-dark) 0%, var(--primary-sky-blue) 100%);
    color: var(--neutral-white);
}

.table-bordered {
    border: 2px solid var(--organic-beige-dark);
}

.table tbody tr:nth-child(even) {
    background: var(--organic-beige-light);
}

.table tbody tr:hover {
    background: var(--organic-sage-light);
    transform: scale(1.01);
    transition: all 0.2s ease;
}

/* Badge Styles */
.badge {
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 600;
}

.bg-primary {
    background: linear-gradient(135deg, var(--primary-sky-blue) 0%, var(--primary-sky-blue-dark) 100%) !important;
}

.bg-success {
    background: linear-gradient(135deg, var(--accent-success) 0%, var(--organic-sage-dark) 100%) !important;
}

.bg-warning {
    background: linear-gradient(135deg, var(--accent-warning) 0%, var(--organic-earth-dark) 100%) !important;
}

.bg-danger {
    background: linear-gradient(135deg, var(--accent-danger) 0%, var(--organic-warm-brown-dark) 100%) !important;
}

.bg-info {
    background: linear-gradient(135deg, var(--accent-info) 0%, var(--primary-sky-blue) 100%) !important;
}

.bg-secondary {
    background: linear-gradient(135deg, var(--organic-sage) 0%, var(--organic-sage-dark) 100%) !important;
}

/* Alert Styles */
.alert {
    border-radius: 12px;
    border: none;
    box-shadow: var(--shadow-light);
}

.alert-success {
    background: linear-gradient(135deg, var(--accent-success) 0%, var(--organic-sage-light) 100%);
    color: var(--organic-sage-dark);
    border-left: 6px solid var(--organic-sage-dark);
}

.alert-danger {
    background: linear-gradient(135deg, var(--accent-danger) 0%, var(--organic-warm-brown-light) 100%);
    color: var(--organic-warm-brown-dark);
    border-left: 6px solid var(--organic-warm-brown-dark);
}

.alert-warning {
    background: linear-gradient(135deg, var(--accent-warning) 0%, var(--organic-earth-light) 100%);
    color: var(--organic-earth-dark);
    border-left: 6px solid var(--organic-earth-dark);
}

.alert-info {
    background: linear-gradient(135deg, var(--accent-info) 0%, var(--primary-sky-blue-light) 100%);
    color: var(--primary-sky-blue-dark);
    border-left: 6px solid var(--primary-sky-blue-dark);
}

/* Modal Styles */
.modal-content {
    border-radius: 16px;
    border: 3px solid var(--organic-sage-light);
    box-shadow: var(--shadow-heavy);
}

.modal-header {
    background: linear-gradient(135deg, var(--organic-beige) 0%, var(--organic-beige-dark) 100%);
    border-bottom: 2px solid var(--organic-sage-light);
    border-radius: 13px 13px 0 0;
}

.modal-title {
    color: var(--neutral-text);
    font-weight: 600;
}

/* Progress Bar Styles */
.progress {
    background: var(--organic-beige-dark);
    border-radius: 10px;
    height: 12px;
}

.progress-bar {
    background: linear-gradient(135deg, var(--primary-sky-blue) 0%, var(--primary-sky-blue-dark) 100%);
    border-radius: 10px;
}

/* Login Page Specific Styles */
.login-container {
    background: linear-gradient(135deg, var(--organic-beige-light) 0%, var(--organic-sage-light) 100%);
}

.login-container .card {
    border: 3px solid var(--primary-sky-blue-light);
    background: var(--neutral-white);
}

.company-logo {
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    border: 3px solid var(--organic-sage-light);
}

/* Footer Styles */
footer {
    background: linear-gradient(135deg, var(--organic-warm-brown-dark) 0%, var(--organic-warm-brown) 100%) !important;
    color: var(--organic-beige-light) !important;
    border-top: 4px solid var(--organic-sage);
}

/* Text Colors */
.text-primary { color: var(--primary-sky-blue-dark) !important; }
.text-success { color: var(--accent-success) !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-danger { color: var(--accent-danger) !important; }
.text-info { color: var(--accent-info) !important; }
.text-muted { color: var(--neutral-dark-gray) !important; }

/* Font Weights */
.font-weight-bold { font-weight: 700 !important; }
.text-xs { font-size: 0.75rem; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card, .alert, .modal-content {
    animation: fadeInUp 0.5s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        background: var(--organic-beige);
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .btn {
        /* This rule was too broad and caused layout issues with small buttons and the navbar toggler on mobile. */
    }
    
    .navbar-toggler {
        position: absolute;
        left: 15px;
        right: auto;
        padding: 0.5rem 0.75rem; /* Larger touch target */
        font-size: 1.25rem; /* Larger icon */
        top: 8px;
    }

    .navbar-brand {
        margin-left: 50px; /* Space for the toggler */
        font-size: 1.1rem; /* Slightly smaller on mobile */
    }

    .navbar-nav {
        margin-left: auto;
        margin-right: 0;
        flex-direction: row;
    }
    
    .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .navbar .container-fluid {
        gap: 15px;
    }
}

/* Custom Utility Classes */
.shadow-organic {
    box-shadow: 0 4px 8px rgba(156, 175, 136, 0.3) !important;
}

.bg-organic-light {
    background: var(--organic-beige-light) !important;
}

.bg-organic {
    background: var(--organic-beige) !important;
}

.border-organic {
    border-color: var(--organic-sage-light) !important;
}

.text-organic {
    color: var(--organic-sage-dark) !important;
}