/* Strict 4-Color Palette Theme */
:root {
    --color-dark: #222831;
    --color-gray: #4A4F57;
    --color-gold: #E6C35A;
    --color-light: rgba(255,255,255,0.85);
    
    /* Derived colors - NO OTHER COLORS */
    --text-muted: rgba(238, 238, 238, 0.7);
    --border-color: rgba(255, 211, 105, 0.3);
    --border-subtle: rgba(255, 211, 105, 0.15);
    
    /* Status colors using ONLY palette */
    --success-color: var(--color-gold);
    --warning-color: var(--color-gold);
    --danger-color: var(--color-gray);
    --info-color: var(--color-gold);

}

body {
    background: var(--color-dark);
    background-attachment: fixed;
    color: var(--color-light);
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
}

.container {
    margin-top: 30px;
    margin-bottom: 30px;
}

.table-responsive {
    margin-top: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.badge {
    font-size: 0.9em;
    padding: 8px 12px;
}

.btn {
    font-weight: 600;
    padding: 12px 28px;
    transition: all 0.3s ease;
    border: none;
    margin: 2px;
    border-radius: 10px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-primary {
    background: var(--color-gold) !important;
    color: #000000 !important;
    border: none;
}

.btn-success {
    background: var(--color-gold) !important;
    color: #000000 !important;
    border: none;
}

.btn-danger {
    background: var(--color-gray) !important;
    color: #000000 !important;
    border: 2px solid var(--color-gold);
}

.btn-warning {
    background: transparent !important;
    color: #000000 !important;
    border: 2px solid var(--color-gold);
}

.btn-secondary {
    background-color: var(--color-gray) !important;
    color: #000000 !important;
    border: 1px solid var(--border-color);
}

.btn-outline-success {
    background-color: transparent !important;
    color: #000000 !important;
    border: 2px solid var(--color-gold) !important;
}

.btn-outline-success:hover {
    background: var(--color-gold) !important;
    color: #000000 !important;
}

.btn-outline-warning {
    background-color: transparent !important;
    color: #000000 !important;
    border: 2px solid var(--color-gold) !important;
}

.btn-outline-warning:hover {
    background: var(--color-gold) !important;
    color: #000000 !important;
}

.btn-outline-secondary {
    background-color: transparent !important;
    color: #000000 !important;
    border: 2px solid var(--color-gray) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--color-gray) !important;
    color: #000000 !important;
}

/* Add styles for action buttons */
.action-buttons .btn {
    min-width: 100px;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 0.875rem;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 211, 105, 0.3);
}

/* Card Styles */
.card {
    background-color: var(--color-gray);
    border: 1px solid rgba(255, 211, 105, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(255, 211, 105, 0.15);
    border-color: rgba(255, 211, 105, 0.4);
}

.card-header {
    background: var(--color-gray);
    color: var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem;
    font-weight: 600;
}

.card-body {
    padding: 2rem;
    color: var(--color-light);
}

/* Modal styles */
.modal-content {
    background-color: var(--color-gray);
    border-radius: 20px;
    border: 1px solid rgba(255, 211, 105, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    color: var(--color-light);
}

.modal-header {
    background: var(--color-gray);
    border-bottom: 2px solid var(--color-gold);
    padding: 1rem;
    border-radius: 20px 20px 0 0;
    color: var(--color-gold);
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    font-size: 1.5rem;
    color: white;
    opacity: 0.8;
    cursor: pointer;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-body {
    padding: 1rem;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Statistics Page Styling */
.stats-container {
    padding: 20px;
}

.stat-card {
    background: var(--color-gray);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 211, 105, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(255, 211, 105, 0.2);
    border-color: rgba(255, 211, 105, 0.5);
}

.stat-card h3 {
    font-size: 1.2rem;
    color: var(--color-light);
    margin-bottom: 15px;
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: white;
}

.stat-card.bg-warning, .card.bg-warning {
    background: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-dark) !important;
}

.stat-card.bg-warning:hover, .card.bg-warning:hover {
    filter: brightness(1.1);
    box-shadow: 0 15px 50px rgba(255, 211, 105, 0.3) !important;
}

.stat-card.bg-warning h3, .stat-card.bg-warning .stat-number {
    color: var(--color-dark) !important;
}

.stat-card.bg-success, .card.bg-success {
    background: var(--color-dark) !important;
    border: 2px solid var(--color-gold) !important;
    color: var(--color-light) !important;
}

.stat-card.bg-success:hover, .card.bg-success:hover {
    background: rgba(34, 40, 49, 0.9) !important;
    box-shadow: 0 15px 50px rgba(255, 211, 105, 0.2) !important;
}

.stat-card.bg-success h3, .stat-card.bg-success .stat-number {
    color: var(--color-gold) !important;
}

.stat-card.bg-primary, .card.bg-primary {
    background: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-dark) !important;
}

.stat-card.bg-primary:hover, .card.bg-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 15px 50px rgba(255, 211, 105, 0.3) !important;
}

.stat-card.bg-primary h3, .card.bg-primary .card-header {
    color: var(--color-dark) !important;
}

.stat-card.bg-primary .stat-number {
    color: var(--color-dark) !important;
}

.badge {
    padding: 8px 12px;
    font-size: 0.9rem;
}

.month-filter select {
    min-width: 150px;
}

/* Form Elements */
/* One-line cases table: prevent wrapping and keep actions inline */
.cases-table td, .cases-table th { white-space: nowrap; vertical-align: middle; }
.cases-table .doc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.cases-table .doc-actions form { display: inline-flex !important; align-items: center; gap: 8px; }
.cases-table .doc-actions input[type=file] { max-width: 180px; }
/* Force consistent button colors in cases table */
.cases-table .btn, .cases-table label.btn {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    border-color: var(--color-gold) !important;
    position: relative; /* ensure clicks not hidden */
    z-index: 1;
    pointer-events: auto;
}
.cases-table .btn:hover, .cases-table label.btn:hover { filter: brightness(1.05); }

/* Document tables: fixed layout and truncation */
.doc-table { table-layout: fixed; width: 100%; }
.doc-table th, .doc-table td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.doc-table .col-date { width: 190px; }
.doc-table .col-actions { width: 220px; text-align: left; }
.doc-table .col-doc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Compact, consistent action buttons inside document tables */
.doc-table .col-actions { width: 220px; overflow: visible; white-space: nowrap; padding-right: 10px; }
.doc-table .btn-group { display: inline-flex; gap: 12px; flex-wrap: nowrap; }
.doc-table .btn-group .btn { padding: 8px 14px; font-size: 0.9rem; line-height: 1.1; border-radius: 10px; min-width: 84px; margin-right: 0; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 768px) {
  .doc-table .col-actions { width: 180px; }
  .doc-table .btn-group { gap: 8px; }
  .doc-table .btn-group .btn { padding: 5px 10px; font-size: 0.8rem; min-width: 60px; }
}

.form-control, .form-select {
    background-color: #23232b !important;
    border: 1px solid var(--border-subtle);
    color: var(--color-light);
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.25s ease;
}

.form-control:focus, .form-select:focus {
    background-color:#23232b;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 0.25rem rgba(255, 211, 105, 0.2);
    color: var(--color-light);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Make select dropdown options readable on dark background */
.form-select option {
    background-color: #23232b;
    color: var(--color-light);
}

/* File inputs and date/number inputs should match the same dark input background */
input[type="file"], input[type="date"], input[type="tel"], input[type="number"] {
    background-color: #23232b;
    color: var(--color-light);
}

.form-label {
    color: var(--color-light);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-check-label {
    color: var(--color-light);
}

.form-text {
    color: var(--text-muted);
}

/* Style for date inputs */
input[type="date"] {
    min-height: 38px;
    color-scheme: dark;
}

/* Alert styling */
.alert {
    margin-bottom: 20px;
    animation: slideIn 0.5s ease-out;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
}

.alert-success {
    background-color: rgba(255, 211, 105, 0.1);
    color: var(--color-gold);
    border-color: var(--color-gold);
}

.alert-error, .alert-danger {
    background-color: var(--color-dark);
    color: var(--color-light);
    border-color: var(--color-gray);
}

.alert-warning {
    background-color: rgba(255, 211, 105, 0.1);
    color: var(--color-gold);
    border-color: var(--color-gold);
}

.alert-info {
    background-color: var(--color-gray);
    color: var(--color-light);
    border-color: var(--color-gold);
}

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



@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Navbar Enhancement */
.navbar {
    background: var(--color-dark) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 1rem 2rem;
    border-bottom: 2px solid var(--color-gold);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--color-light) !important;
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--color-gold) !important;
    transform: translateY(-2px);
}

.bg-primary {
    background: var(--color-dark) !important;
    border-bottom: 2px solid var(--color-gold);
}

.navbar-brand {
    color: var(--color-gold) !important;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 1rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
}

.navbar-collapse .navbar-nav {
    align-items: center;
}

.navbar-brand:hover {
    transform: translateY(-2px);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    color: var(--color-light) !important;
}

.nav-link {
    position: relative;
    padding: 0.5rem 1rem !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-gold);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 80%;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Table Enhancements */
.table {
    margin-bottom: 0;
    background: var(--color-gray);
    color: var(--color-light);
    border-radius: 15px;
    overflow: hidden;
}

.table thead th {
    background: var(--color-gray);
    border-bottom: 2px solid var(--color-gold);
    font-weight: 600;
    color: var(--color-gold);
    padding: 1rem;
}

.table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}

.table tbody tr:hover {
    background-color: rgba(255, 211, 105, 0.08);
    transform: scale(1.01);
}

.table tbody td {
    color: var(--color-light);
    padding: 1rem;
    vertical-align: middle;
}

/* Ensure table text and links are clearly visible in the cases table */
.card .table thead th,
.table-responsive .table thead th {
    color: var(--color-gold) !important;
}

.card .table tbody td,
.table-responsive .table tbody td {
    color: var(--color-light) !important;
}

.table a, .table a:link, .table a:visited {
    color: var(--color-light) !important;
}

.table-responsive {
    background: var(--color-gray);
    border-radius: 15px;
    border: 1px solid rgba(255, 211, 105, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Navbar customization */
.navbar {
    margin-bottom: 30px;
}

/* Badge styling */
.badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
}

.badge.bg-success, .badge.bg-warning, .badge.bg-info {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
}

.badge.bg-danger, .badge.bg-secondary {
    background: var(--color-gray) !important;
    color: var(--color-light) !important;
    border: 1px solid var(--color-gold);
}

.bg-success {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
}

.bg-warning {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
}

.bg-danger {
    background: var(--color-gray) !important;
    color: var(--color-light) !important;
}

.bg-info {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
}

.text-white {
    color: #E6C35A !important;
}

/* Description styling */
.description-preview {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Shadow and glass effect utilities */
.shadow {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.shadow-lg {
    box-shadow: 0 15px 50px rgba(255, 211, 105, 0.3) !important;
}

/* Nav pills styling */
.nav-pills .nav-link {
    color: var(--color-light);
    background-color: transparent;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
    background: var(--color-gold);
    color: var(--color-dark);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: rgba(255, 211, 105, 0.15);
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.9em;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8em;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .navbar-brand {
        font-size: 1.2rem;
        position: static;
        transform: none;
        margin: 0 auto;
    }
    
    .navbar .container {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.btn,
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info,
.btn-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-secondary,
.btn-sm,
.btn-lg {
    background: var(--color-gold) !important;
    color: #222831 !important;
    border-color: var(--color-gold) !important;
}

.btn:focus,
.btn:active {
    box-shadow: 0 0 0 0.25rem rgba(255, 211, 105, 0.35) !important;
}