/* File: /assets/css/style.css */
/* V2 - With Dark Mode and Professional Layout */

/* --- 1. V2: Color & Style Variables --- */
:root {
    /* Light Mode (Default) */
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg: #ffffff;
    --card-shadow-color: rgba(0, 0, 0, 0.05);
    --card-shadow-hover: rgba(0, 0, 0, 0.1);
    --border-color: #dee2e6;
    --table-stripe-bg: rgba(0, 0, 0, 0.03);
    --table-hover-bg: rgba(0, 0, 0, 0.06);
    --modal-content-bg: #ffffff;
    --form-control-bg: #ffffff;
    --form-control-border: #ced4da;
    --form-control-focus: #86b7fe;
    --btn-outline-secondary: #6c757d;
    --btn-outline-secondary-hover: #ffffff;
}

:root.dark-mode {
    /* Dark Mode */
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --card-shadow-color: rgba(0, 0, 0, 0.15);
    --card-shadow-hover: rgba(0, 0, 0, 0.2);
    --border-color: #444;
    --table-stripe-bg: rgba(255, 255, 255, 0.04);
    --table-hover-bg: rgba(255, 255, 255, 0.07);
    --modal-content-bg: #2b2b2b;
    --form-control-bg: #2b2b2b;
    --form-control-border: #555;
    --form-control-focus: #5895da;
    --btn-outline-secondary: #aaa;
    --btn-outline-secondary-hover: #121212;
}
/* --- End Variables --- */


/* --- 2. V2: General Styles --- */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Update card shadows to use variables */
.card-shadow {
    background-color: var(--card-bg);
    box-shadow: 0 4px 12px var(--card-shadow-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.card-shadow:hover {
    box-shadow: 0 8px 16px var(--card-shadow-hover);
    transform: translateY(-2px);
}

/* Style filter buttons when clicked */
.btn-group .btn.active {
    background-color: #0d6efd;
    color: white;
}

/* Make table buttons a little smaller */
.table td .btn {
    margin: 0 2px;
}
/* --- End General Styles --- */


/* --- 3. V2: Dark Mode Component Styles --- */

/* Tables */
.table {
    border-color: var(--border-color);
    color: var(--text-color);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe-bg);
    color: var(--text-color);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg);
    color: var(--text-color);
}
.table-dark {
    /* Make dark header look good in both themes */
    border-color: #444; 
}

/* Modals (Popups) */
.modal-content {
    background-color: var(--modal-content-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); }
.btn-close {
    /* Makes the 'x' button white in dark mode */
    filter: var(--bg-color) = #121212 ? invert(1) brightness(2) : none;
}

/* Forms (Inputs, Dropdowns, Datalists) */
.form-control, .form-select {
    background-color: var(--form-control-bg);
    border: 1px solid var(--form-control-border);
    color: var(--text-color);
}
.form-control:focus, .form-select:focus {
    background-color: var(--form-control-bg);
    border-color: var(--form-control-focus);
    box-shadow: 0 0 0 0.25rem rgba(var(--form-control-focus), 0.25);
    color: var(--text-color);
}
/* Datalist autocomplete color */
datalist,
input:-webkit-autofill {
    color: var(--text-color) !important;
    background-color: var(--form-control-bg) !important;
}

/* Buttons */
.btn-outline-secondary {
    color: var(--btn-outline-secondary);
    border-color: var(--btn-outline-secondary);
}
.btn-outline-secondary:hover {
    color: var(--btn-outline-secondary-hover);
    background-color: var(--btn-outline-secondary);
    border-color: var(--btn-outline-secondary);
}

/* Toast Notification */
.toast {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}
.toast-header {
    border-bottom: 1px solid var(--border-color);
}
/* --- End Component Styles --- */