/* App-level overrides layered on top of adminlte.css. Do not edit adminlte.css directly. */

:root {
    /* Calm VMS default: muted slate-navy instead of bright Bootstrap blue */
    --app-primary: #3a5169;
    --app-primary-rgb: 58, 81, 105;
}

/* Softer status colors for widgets/badges, used instead of AdminLTE's vivid defaults */
.small-box.text-bg-success, .small-box.bg-success { background-color: #4c8c6e !important; }
.small-box.text-bg-warning, .small-box.bg-warning { background-color: #c99a4b !important; color: #fff !important; }
.small-box.text-bg-danger, .small-box.bg-danger { background-color: #b95c5c !important; }
.small-box.text-bg-secondary, .small-box.bg-secondary { background-color: #6b7785 !important; }

body {
    font-family: var(--app-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Distinct page background so white cards visibly stand out instead of blending in */
.app-content {
    background-color: #eef1f6;
    min-height: calc(100vh - 120px);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* -- Theme colors -- */
.btn-primary {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.btn-outline-primary {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--app-primary) !important;
    color: #fff !important;
}

.text-bg-primary, .bg-primary {
    background-color: var(--app-primary) !important;
}

a, .small-box-footer {
    color: var(--app-primary);
}

.nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--app-primary) !important;
}

.badge.text-bg-primary {
    background-color: var(--app-primary) !important;
}

.card-primary.card-outline {
    border-top-color: var(--app-primary) !important;
}

/* -- Theme switcher swatches -- */
.theme-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
}

.theme-swatch.active {
    border-color: #212529;
}

/* -- App footer -- */
.app-footer {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
}

/* -- DataTables x AdminLTE spacing -- */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 0.5rem;
}

table.dataTable {
    width: 100% !important;
}

/* -- Modern colored modals: left accent banner + themed header, follows global theme color -- */
.modal-accent .modal-content {
    border: none;
    border-left: 6px solid var(--app-primary);
    border-radius: 0.5rem;
    overflow: hidden;
}

.modal-accent .modal-header {
    background-color: var(--app-primary);
    color: #fff;
    border-bottom: none;
}

.modal-accent .modal-header .modal-title,
.modal-accent .modal-header small {
    color: #fff;
}

.modal-accent .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-accent .modal-body {
    background-color: #f8f9fb;
}

.modal-accent .modal-footer {
    background-color: #f8f9fb;
    border-top: 1px solid #e9ecef;
}

/* -- Checklist item drag-to-reorder -- */
.checklist-row {
    cursor: grab;
    transition: box-shadow 0.15s ease;
}

.checklist-row.dragging {
    opacity: 0.5;
}

.checklist-row .drag-handle {
    cursor: grab;
    color: #adb5bd;
}

/* Export/CSV/Excel buttons: solid theme-colored fill so contrast never depends on
   inherited/dark-mode text-color variables (previous outline style could render
   as same-color-as-background in some contexts, making them invisible until :hover). */
.dt-buttons .dt-button,
.dt-buttons .dt-button.btn {
    color: #fff !important;
    background-color: var(--app-primary) !important;
    border: 1px solid var(--app-primary) !important;
    opacity: 1 !important;
    font-weight: 500;
}

.dt-buttons .dt-button:hover {
    filter: brightness(1.15);
}

.dt-buttons .dt-button i,
.dt-buttons .dt-button i.bi {
    color: #fff !important;
}

/* -- Colored header bar -- */
.app-header {
    background-color: var(--app-primary) !important;
    border-bottom: none !important;
}

.app-header .nav-link,
.app-header .nav-link i {
    color: rgba(255, 255, 255, 0.92) !important;
}

.app-header .nav-link:hover {
    color: #fff !important;
}

.app-header .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.app-header .btn-outline-secondary {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.app-header .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* -- Modern card / row shading -- */
.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.015);
}

.table > tbody > tr:hover > * {
    background-color: rgba(var(--app-primary-rgb), 0.06);
}

.app-content-header {
    background-color: transparent;
}

/* -- Subtle interaction polish -- */
.small-box {
    border-radius: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.small-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-primary-rgb), 0.2);
}

.card-title {
    display: flex;
    align-items: center;
}

.app-content-header h3 {
    font-weight: 700;
}

/* -- Standardized button shape/spacing across the whole app -- */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn i.bi {
    line-height: 1;
}

.badge {
    font-weight: 500;
    padding: 0.4em 0.65em;
}

/* -- Banner: colored gradient accent so it reads as a distinct header block -- */
.page-banner {
    background: linear-gradient(135deg, var(--app-primary), rgba(var(--app-primary-rgb), 0.75));
    color: #fff;
    border-radius: 0.5rem;
}

.page-banner .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* -- Filter card: tinted header to visually separate from the listing below -- */
.filter-card > .card-header {
    background-color: rgba(var(--app-primary-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--app-primary-rgb), 0.12);
}

/* -- Modal headers: colored to match the app header/banner instead of default white,
   so every modal across the app reads as belonging to the same system -- */
.modal-header {
    background-color: var(--app-primary);
    color: #fff;
    border-bottom: none;
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}

.modal-header .modal-title {
    color: #fff;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

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