:root {
  color-scheme: dark;
  --mdt-bg: #0b1220;
  --mdt-surface: rgba(15, 23, 42, .90);
  --mdt-blue: rgba(0, 131, 207, .418);
  --mdt-purple: rgba(89, 0, 255, .39);
  --mdt-focus: #3b82f6;
  --mdt-text: #e2e8f0;
  --mdt-muted: #94a3b8;
  --mdt-border: rgba(255, 255, 255, .10);
  --mdt-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--mdt-text); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
a { color: inherit; } img { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; } h5 { font-size: 1.18rem; }

.bg-overlay, .bg-overlay-dark {
  position: relative; background-color: var(--mdt-bg);
  background-image: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)), url("/uploads/civilians/background.png");
  background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
}
.bg-overlay-dark { min-height: 100vh; background-image: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.82)), url("/uploads/civilians/background.png"); }
.bg-overlay::before, .bg-overlay-dark::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 8%, rgba(89,0,255,.13), transparent 32%), radial-gradient(circle at 88% 85%, rgba(0,131,207,.12), transparent 36%); }
body > * { position: relative; z-index: 1; }

.navbar { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.navbar-mdt { position: sticky; top: 0; z-index: 900; background: var(--mdt-purple); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); border-bottom: 1px solid var(--mdt-border); box-shadow: 0 10px 35px rgba(0,0,0,.18); }
.navbar-brand { display: inline-flex; align-items: center; color: #fff; text-decoration: none; letter-spacing: .01em; }
.navbar-logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }

.container-fluid { width: 100%; margin-inline: auto; }
.row { --gutter-x: 1.25rem; --gutter-y: 0; display: flex; flex-wrap: wrap; margin: calc(var(--gutter-y) * -.5) calc(var(--gutter-x) * -.5); }
.row > * { width: 100%; padding: calc(var(--gutter-y) * .5) calc(var(--gutter-x) * .5); }
.g-2 { --gutter-x: .5rem; --gutter-y: .5rem; } .g-3 { --gutter-x: 1rem; --gutter-y: 1rem; } .g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.col-12 { width: 100%; } .col-7 { width: 58.333%; } .col-6 { width: 50%; } .col-5 { width: 41.667%; }

.card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.card-body { flex: 1 1 auto; padding: 1.25rem; } .card-img-top { width: 100%; object-fit: cover; }
.card-mdt, .login-card { background: linear-gradient(145deg, rgba(0,166,207,.48), rgba(0,131,207,.30)); border: 1px solid rgba(103,232,249,.28); border-radius: 18px; color: var(--mdt-text); box-shadow: 0 14px 42px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.card-mdt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(165,243,252,.14), transparent 38%); }
.card-mdt { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card-mdt:hover, .hover-lift:hover { transform: translateY(-5px); border-color: rgba(103,232,249,.5); box-shadow: 0 24px 58px rgba(0,0,0,.38), 0 0 28px rgba(0,166,207,.12); }
.login-card { width: min(430px, calc(100vw - 2rem)); background: var(--mdt-surface); border-radius: 22px; box-shadow: var(--mdt-shadow); }
.login-card::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, rgba(89,0,255,.9), rgba(0,131,207,.9)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 40px; padding: .52rem .9rem; border: 1px solid transparent; border-radius: 9px; color: #fff; background: rgba(255,255,255,.08); text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); } .btn:focus-visible { outline: 3px solid rgba(59,130,246,.35); outline-offset: 2px; } .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { min-height: 34px; padding: .34rem .68rem; font-size: .875rem; } .btn-xs { min-height: 28px; padding: .2rem .48rem; font-size: .75rem; border-radius: 7px; }
.btn-primary { background: #3b82f6; border-color: #3b82f6; } .btn-secondary { background: #475569; border-color: #64748b; } .btn-danger { background: #dc3545; border-color: #dc3545; }
.btn-warning { background: #f59e0b; border-color: #f59e0b; color: #111827; } .btn-info { background: #0dcaf0; border-color: #0dcaf0; color: #111827; }
.btn-outline-danger { color: #fca5a5; border-color: rgba(220,53,69,.7); background: rgba(220,53,69,.08); } .btn-outline-info { color: #67e8f9; border-color: rgba(13,202,240,.6); background: transparent; }
.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; } .btn-outline-secondary { color: #cbd5e1; border-color: #64748b; background: transparent; }
.btn-outline-success { color: #86efac; border-color: #198754; background: transparent; } .btn-outline-warning { color: #fcd34d; border-color: #f59e0b; background: transparent; }

.form-label { display: inline-block; margin-bottom: .42rem; font-weight: 600; }
.form-control, .form-select { display: block; width: 100%; min-height: 42px; padding: .55rem .75rem; color: #fff; background-color: rgba(11,18,32,.84); border: 1px solid rgba(148,163,184,.35); border-radius: 9px; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.form-control::placeholder { color: #64748b; } .form-control:focus, .form-select:focus { border-color: var(--mdt-focus); box-shadow: 0 0 0 .2rem rgba(59,130,246,.2); background-color: rgba(11,18,32,.96); }
textarea.form-control { min-height: 92px; resize: vertical; } .form-control-sm, .form-select-sm { min-height: 34px; padding: .32rem .55rem; font-size: .875rem; }
.form-text { margin-top: .3rem; color: var(--mdt-muted); font-size: .8rem; }
.input-group { display: flex; width: 100%; } .input-group > .form-control, .input-group > .form-select { flex: 1; min-width: 0; border-radius: 0; }
.input-group > :first-child { border-radius: 9px 0 0 9px; } .input-group > :last-child { border-radius: 0 9px 9px 0; }
.input-group-text { display: flex; align-items: center; padding: .5rem .7rem; color: var(--mdt-text); background: rgba(71,85,105,.58); border: 1px solid rgba(148,163,184,.35); }

.table-responsive { width: 100%; overflow-x: auto; border-radius: 12px; } .table { width: 100%; border-collapse: collapse; vertical-align: middle; }
.table th, .table td { padding: .72rem .8rem; border-bottom: 1px solid rgba(255,255,255,.075); text-align: left; }
.table th { color: #cbd5e1; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.04); }
.table-dark { color: var(--mdt-text); background: transparent; } .table-hover tbody tr { transition: background .15s ease; } .table-hover tbody tr:hover { background: rgba(255,255,255,.045); }
.table-sm th, .table-sm td { padding: .48rem .58rem; }

.badge { display: inline-flex; align-items: center; padding: .32em .62em; border-radius: 6px; font-size: .76em; font-weight: 700; line-height: 1; }
.rounded-pill { border-radius: 999px !important; }
.bg-dark { background-color: rgba(11,18,32,.78) !important; } .bg-secondary { background-color: #475569 !important; } .bg-info { background-color: #0dcaf0 !important; } .bg-danger { background-color: #dc3545 !important; } .bg-success { background-color: #198754 !important; }

.modal { position: fixed; inset: 0; z-index: 1100; display: none; overflow-y: auto; padding: 1rem; background: rgba(3,7,18,.72); backdrop-filter: blur(7px); }
.modal.show { display: block; animation: modalFade .16s ease-out; } .modal-dialog { width: min(500px, 100%); margin: 4vh auto; pointer-events: none; }
.modal-lg { width: min(820px, 100%); } .modal-xl { width: min(1140px, 100%); } .modal-dialog-scrollable { max-height: 92vh; }
.modal-dialog-scrollable .modal-content { max-height: 92vh; } .modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-content { display: flex; flex-direction: column; pointer-events: auto; color: var(--mdt-text); background: linear-gradient(155deg, rgba(15,23,42,.98), rgba(11,18,32,.98)); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: var(--mdt-shadow); overflow: hidden; }
.modal-header, .modal-footer { display: flex; align-items: center; padding: 1rem 1.2rem; border-color: var(--mdt-border); }
.modal-header { justify-content: space-between; border-bottom: 1px solid var(--mdt-border); } .modal-footer { justify-content: flex-end; gap: .55rem; border-top: 1px solid var(--mdt-border); }
.modal-title { margin: 0; font-size: 1.08rem; } .modal-body { padding: 1.2rem; } .modal-open { overflow: hidden; }
.btn-close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; }
.btn-close::before { content: "\00d7"; font-size: 1.55rem; line-height: 1; } .btn-close:hover { background: rgba(255,255,255,.14); } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.accordion-item { overflow: hidden; background: rgba(11,18,32,.76); } .accordion-header { margin: 0; }
.accordion-button { display: flex; align-items: center; width: 100%; padding: 1rem; border: 0; text-align: left; cursor: pointer; }
.accordion-button::after { content: "+"; margin-left: auto; font-size: 1.35rem; color: var(--mdt-muted); transition: transform .2s ease; }
.accordion-button[aria-expanded="true"]::after { transform: rotate(45deg); } .accordion-collapse { display: none; } .accordion-collapse.show { display: block; } .accordion-body { border-top: 1px solid var(--mdt-border); }

.nav { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .nav-link { display: block; padding: .65rem 1rem; color: var(--mdt-muted); text-decoration: none; cursor: pointer; }
.nav-tabs { gap: .25rem; border-bottom: 1px solid var(--mdt-border); } .nav-tabs-dark .nav-link { border: 1px solid transparent; border-radius: 9px 9px 0 0; }
.nav-tabs-dark .nav-link:hover { color: var(--mdt-text); background: rgba(255,255,255,.04); } .nav-tabs-dark .nav-link.active { color: #fff; background: rgba(30,41,59,.9); border-color: var(--mdt-border); border-bottom-color: transparent; }

.alert { padding: .75rem 1rem; border: 1px solid transparent; border-radius: 9px; } .alert-danger { color: #fecaca; background: rgba(127,29,29,.52); border-color: rgba(248,113,113,.3); }
.spinner-border { display: inline-block; width: 1rem; height: 1rem; border: .16em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .65s linear infinite; }
.spinner-border-sm { width: .82rem; height: .82rem; } @keyframes spin { to { transform: rotate(360deg); } }

.mdt-icon { display: inline-flex; align-items: center; justify-content: center; font-style: normal; line-height: 1; }
.icon-box-arrow-right::before { content: "\21aa"; } .icon-person-vcard-fill::before, .icon-person-badge::before { content: "\25c9"; } .icon-car-front-fill::before { content: "\25c8"; }
.icon-book-half::before, .icon-journal-text::before { content: "\25a4"; } .icon-clipboard2-pulse-fill::before { content: "\271a"; } .icon-receipt-cutoff::before { content: "\25a7"; }
.icon-heart-pulse-fill::before { content: "\2665"; } .icon-gear-fill::before { content: "\2699"; } .icon-plus-lg::before, .icon-folder-plus::before, .icon-person-plus::before, .icon-person-plus-fill::before { content: "+"; }
.icon-trash::before { content: "\232b"; } .icon-pencil::before { content: "\270e"; } .icon-folder2-open::before { content: "\25b1"; } .icon-journal-x::before, .icon-x::before, .icon-x-lg::before { content: "\00d7"; }
.icon-file-earmark-pdf::before { content: "PDF"; font-size: .63em; font-weight: 800; } .icon-paperclip::before { content: "\223f"; } .icon-check-lg::before { content: "\2713"; }
.icon-search::before { content: "\2315"; } .icon-person-fill::before, .icon-people-fill::before { content: "\25cf"; } .icon-lock-fill::before { content: "\25a0"; } .icon-shield-half::before { content: "\25c6"; }
.icon-image::before { content: "\25a3"; } .icon-camera-video::before { content: "\25b6"; }

.d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; }
.justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; }
.gap-2 { gap: .5rem !important; } .gap-3 { gap: 1rem !important; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .min-vh-100 { min-height: 100vh !important; }
.text-center { text-align: center !important; } .text-end { text-align: right !important; } .text-nowrap { white-space: nowrap !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-decoration-none { text-decoration: none !important; } .text-uppercase { text-transform: uppercase !important; }
.text-white { color: #fff !important; } .text-white-50 { color: rgba(255,255,255,.56) !important; } .text-secondary { color: var(--mdt-muted) !important; } .text-dark { color: #111827 !important; }
.text-primary { color: #60a5fa !important; } .text-info { color: #67e8f9 !important; } .text-danger { color: #f87171 !important; } .text-success { color: #4ade80 !important; } .text-warning { color: #fbbf24 !important; }
.small { font-size: .875rem !important; } .fs-3 { font-size: 1.75rem !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; } .display-4 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.fw-bold { font-weight: 700 !important; } .fw-semibold { font-weight: 600 !important; } .rounded { border-radius: 10px !important; }
.border { border: 1px solid var(--mdt-border) !important; } .border-0 { border: 0 !important; } .border-secondary { border-color: rgba(148,163,184,.35) !important; } .shadow-lg { box-shadow: var(--mdt-shadow) !important; } .cursor-pointer { cursor: pointer; }
.m-0, .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; }
.mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .my-4 { margin-block: 1.5rem !important; }
.me-1 { margin-right: .25rem !important; } .me-2 { margin-right: .5rem !important; } .ms-3 { margin-left: 1rem !important; }
.p-0 { padding: 0 !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .px-1 { padding-inline: .25rem !important; } .px-3 { padding-inline: 1rem !important; } .px-4 { padding-inline: 1.5rem !important; }
.py-0 { padding-block: 0 !important; } .py-2 { padding-block: .5rem !important; } .py-4 { padding-block: 1.5rem !important; } .py-5 { padding-block: 3rem !important; } .img-fluid { max-width: 100%; height: auto; } .align-middle { vertical-align: middle; }

@media (min-width: 576px) { .col-sm-6 { width: 50%; } }
@media (min-width: 768px) { .col-md-3 { width: 25%; } .col-md-4 { width: 33.333%; } .col-md-5 { width: 41.667%; } .col-md-6 { width: 50%; } .col-md-8 { width: 66.667%; } .col-md-9 { width: 75%; } }
@media (min-width: 992px) { .col-lg-1 { width: 8.333%; } .col-lg-2 { width: 16.667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.333%; } .col-lg-8 { width: 66.667%; } }
@media (max-width: 720px) { .navbar { align-items: flex-start; gap: .7rem; flex-direction: column; padding-block: .7rem !important; } .navbar > .d-flex { width: 100%; gap: .5rem !important; flex-wrap: wrap; } .container-fluid { padding-inline: 1rem !important; } .modal { padding: .5rem; } .modal-dialog { margin: 1vh auto; } .modal-content { border-radius: 14px; } .table th, .table td { padding: .55rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }