@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Core brand colors */
    --brand-rise: #D32E22; /* Rise - primary */
    --brand-glow: #FAB28E; /* Glow - accent */
    --brand-fade: #FEE1D2;
    --brand-ink: #0a0a0a; /* main text */
    --brand-paper: #FBF9F9; /* background */
    --brand-white: #FFFFFF;
    --brand-blue-ink: #00063D;
    --brand-calm: #D2E9FE;

    /* Typography */
    --font-family-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--brand-paper);
    color: var(--brand-ink);
    min-height: 100vh;
    font-size: 1rem; /* 16px */
    font-family: var(--font-family-sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Inputs */
input[type=text], input[type=date], textarea, select {
    width: 100%;
    max-width: 500px;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--brand-white);
    color: var(--brand-ink);
}

input[type=date] {
    max-width: 250px;
}

button {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: none;
    background: var(--brand-rise);
    color: var(--brand-white);
    cursor: pointer;
    transition: background 0.2s ease;
}

button:hover {
    background: #b8261c;
}

button.secondary {
    background: var(--brand-glow);
    color: var(--brand-ink);
}

button.secondary:hover {
    background: #f59f77;
}

button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Bootstrap button overrides */
.btn-primary {
    background-color: var(--brand-rise);
    border-color: var(--brand-rise);
}

.btn-primary:hover {
    background-color: #b8261c;
    border-color: #b8261c;
}

.btn-primary:focus,
.btn-primary.focus {
    background-color: #b8261c;
    border-color: #b8261c;
    box-shadow: 0 0 0 0.2rem rgba(211, 46, 34, 0.5);
}

.btn-secondary {
    background-color: var(--brand-glow);
    border-color: var(--brand-glow);
    color: var(--brand-ink);
}

.btn-secondary:hover {
    background-color: #f59f77;
    border-color: #f59f77;
    color: var(--brand-ink);
}

/* Headings follow brand sizes */
h1 { font-size: 38px; font-weight: 700; line-height: 1.1; }
h2 { font-size: 32px; font-weight: 600; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 600; }

.display-1 { font-size: 80px; font-weight: 700; }
.display-2 { font-size: 64px; font-weight: 700; }
.display-3 { font-size: 48px; font-weight: 700; }
.display-4 { font-size: 32px; font-weight: 700; }

.body-large { font-size: 18px; }
.body { font-size: 16px; }
.caption { font-size: 13px; color: rgba(0,0,0,0.6); }

a { color: var(--brand-blue-ink); text-decoration: none; }
a:hover { color: var(--brand-rise); text-decoration: underline; }

.container { width: 100%; max-width: 1100px; margin: 0 auto; }

/* Utility */
.muted { color: rgba(0,0,0,0.6); }

/* Keep existing minimal layout styles intact */
.centered { display:flex; align-items:center; justify-content:center; }

/* Tables and DataTables */
.table {
    font-size: 14px;
    margin-bottom: 1rem;
}

.table thead th {
    background-color: var(--brand-blue-ink) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-blue-ink) !important;
    font-weight: 600 !important;
    padding: 0.75rem !important;
}

.table thead {
    background-color: var(--brand-blue-ink);
}

.table-striped {
    background-color: var(--brand-white);
}

.table-striped tbody tr {
    background-color: var(--brand-white);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(251, 249, 249, 0.7);
}

.table-striped tbody tr:hover {
    background-color: rgba(211, 46, 34, 0.08);
}

.table-bordered {
    border-color: #e0e0e0;
}

.table-bordered td,
.table-bordered th {
    border-color: #e0e0e0 !important;
    padding: 0.75rem !important;
}

.thead-dark {
    background-color: var(--brand-blue-ink);
    color: var(--brand-white);
}

.thead-dark th {
    background-color: var(--brand-blue-ink) !important;
    border-color: var(--brand-blue-ink) !important;
    color: var(--brand-white) !important;
    font-weight: 600 !important;
}

/* DataTables header overrides */
.dataTables_wrapper .dataTables_header {
    background-color: var(--brand-paper);
    border-color: #e0e0e0;
}

.dt-head-left,
.dt-head-center,
.dt-head-right {
    background-color: var(--brand-blue-ink) !important;
}

.dt-head-left th,
.dt-head-center th,
.dt-head-right th {
    background-color: var(--brand-blue-ink) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-blue-ink) !important;
    font-weight: 600 !important;
}

/* Force DataTables rows to use brand striping */
.dataTables_wrapper table.dataTable tbody tr {
    background-color: var(--brand-white);
}

.dataTables_wrapper table.dataTable tbody tr:nth-of-type(odd) {
    background-color: rgba(251, 249, 249, 0.7);
}

.dataTables_wrapper table.dataTable tbody tr:hover {
    background-color: rgba(211, 46, 34, 0.08) !important;
}

/* DataTables pagination styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--brand-blue-ink) !important;
    border-color: #dee2e6 !important;
    background-color: var(--brand-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--brand-rise) !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--brand-rise) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-rise) !important;
}

/* Pagination */
.pagination .page-link {
    color: var(--brand-blue-ink);
    border-color: #dee2e6;
}

.pagination .page-link:hover {
    color: var(--brand-rise);
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-rise);
    border-color: var(--brand-rise);
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #dee2e6;
}

/* Alerts */
.alert-info {
    background-color: var(--brand-calm);
    border-color: #a8d5f7;
    color: var(--brand-blue-ink);
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* Progress bars */
.progress-bar {
    background-color: var(--brand-rise);
}

.progress-bar.bg-danger {
    background-color: #dc3545 !important;
}

.progress-bar.bg-warning {
    background-color: var(--brand-glow) !important;
}

.progress-bar.bg-success {
    background-color: #28a745 !important;
}

/* Form controls focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-rise);
    box-shadow: 0 0 0 0.2rem rgba(211, 46, 34, 0.25);
}

.form-control:focus {
    border-color: var(--brand-rise);
    box-shadow: 0 0 0 0.2rem rgba(211, 46, 34, 0.25);
}

/* Modal styling */
.modal-header {
    background-color: var(--brand-paper);
    border-bottom: 2px solid var(--brand-rise);
    padding: 1.5rem;
}

.modal-title {
    color: var(--brand-ink);
    font-weight: 700;
    font-size: 20px;
}

.modal-body {
    padding: 1.5rem;
    background-color: var(--brand-white);
}

.modal-content {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal-footer {
    background-color: var(--brand-paper);
    border-top: 1px solid #e0e0e0;
    padding: 1.5rem;
}

/* Button semantics: danger stays distinct for destructive actions */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
}

.btn-danger:focus,
.btn-danger.focus {
    background-color: #c82333;
    border-color: #c82333;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

/* Info buttons can use brand calm for non-destructive secondary actions */
.btn-info {
    background-color: var(--brand-calm);
    border-color: var(--brand-calm);
    color: var(--brand-blue-ink);
}

.btn-info:hover {
    background-color: #a8d5f7;
    border-color: #a8d5f7;
    color: var(--brand-blue-ink);
}

/* Success buttons stay green */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #218838;
}

/* Warning buttons use brand glow */
.btn-warning {
    background-color: var(--brand-glow);
    border-color: var(--brand-glow);
    color: var(--brand-ink);
}

.btn-warning:hover {
    background-color: #f59f77;
    border-color: #f59f77;
    color: var(--brand-ink);
}

/* Outline variants */
.btn-outline-primary {
    color: var(--brand-rise);
    border-color: var(--brand-rise);
}

.btn-outline-primary:hover {
    background-color: var(--brand-rise);
    border-color: var(--brand-rise);
    color: var(--brand-white);
}

/* Card and panel styling for better visual hierarchy */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: var(--brand-paper);
    border-bottom: 2px solid #e0e0e0;
    padding: 1.25rem;
    font-weight: 600;
    color: var(--brand-ink);
}

.card-body {
    padding: 1.5rem;
    background-color: var(--brand-white);
}

.card-footer {
    background-color: var(--brand-paper);
    border-top: 1px solid #e0e0e0;
    padding: 1rem 1.5rem;
}

/* --- Navbar Dark Theme Override --- */

/* Background Color: Using Blue Ink (Navy) as the "Dark" brand background */
.navbar.bg-brand-dark {
    background-color: var(--brand-blue-ink) !important;
    padding: 0.75rem 2rem; /* Added slightly more breathing room */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Logo Filter: Turns the black/colored logo image to pure white */
.nav-logo-invert {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Navigation Links */
.navbar.bg-brand-dark .nav-link {
    color: rgba(255, 255, 255, 0.75) !important; /* Soft white text */
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s ease, background-color 0.2s;
    border-radius: 6px;
    padding: 8px 16px !important;
}

/* Hover/Active State */
.navbar.bg-brand-dark .nav-link:hover,
.navbar.bg-brand-dark .nav-link:focus,
.navbar.bg-brand-dark .nav-link.active {
    color: var(--brand-white) !important;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight on hover */
}

/* User Info Text */
.nav-user-text {
    color: var(--brand-white);
    font-size: 14px;
    opacity: 0.9;
}

.nav-user-text strong {
    color: var(--brand-glow); /* Peach/Glow color for the username so it pops */
    font-weight: 600;
}

/* Custom Logout Button (Replaces green outline) */
.btn-nav-logout {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--brand-white);
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-nav-logout:hover {
    background-color: var(--brand-rise); /* Hover turns Brand Red */
    border-color: var(--brand-rise);
    color: var(--brand-white);
}

/* Centered Content Layout for Main Pages */
.content-center {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Override row centering */
.container-fluid.content-center-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Full-width centered content with proper spacing */
.page-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}