/* ==========================================================================
   ZiraLock — shared system theme
   --------------------------------------------------------------------------
   Single source of truth for the colour theme used by the front page
   (index.php). Every page (public, admin and client) links this file so the
   whole system shares the same navy palette.

   Palette (taken from the front page):
     --primary         #102a43   page background / bars
     --primary-light   #1a3d5c   panels, cards, buttons
     --primary-lighter #224a73   borders, active states
     --body            #e2e8f0   body text
     --muted           #94a3b8   secondary text
     --white           #fff      headings / emphasis
   Load it AFTER bootstrap so the dark overrides win, and keep the
   `!important` flags: some pages re-load Bootstrap CSS inside <body> (and use
   inline style attributes), so the theme has to out-rank them.
   ========================================================================== */

:root {
  --primary: #102a43;
  --primary-light: #1a3d5c;
  --primary-lighter: #224a73;
  --primary-hover: #2b5c8c;
  --surface: #1a3d5c;
  --surface-2: #16314e;
  --body: #e2e8f0;
  --muted: #94a3b8;
  --white: #fff;
  --bg: #102a43;
  --border: #224a73;
  --link: #7fb0e0;
  --warning: #ffc107;
  --info: #17a2b8;
  --purple: #6f42c1;
  --success: #28a745;
  --danger: #dc3545;
  --orange: #fd7e14;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  background-color: var(--bg) !important;
}

body {
  background-color: var(--bg) !important;
  color: var(--body) !important;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--white);
}

legend { color: var(--white); }
label { color: var(--body); }

a { color: var(--link); }
a:hover, a:focus { color: var(--white); }

hr { border-top: 1px solid var(--border); }

code, kbd, pre {
  color: #a7d3f5;
  background-color: rgba(11, 29, 49, .55);
  border-radius: 4px;
}

blockquote { border-left-color: var(--border); color: var(--muted); }

::selection { background: var(--primary-lighter); color: var(--white); }

/* --------------------------------------------------------------------------
   Text / background utilities (Bootstrap's light defaults -> dark palette)
   -------------------------------------------------------------------------- */
.text-dark       { color: var(--body) !important; }
.text-black      { color: var(--body) !important; }
.text-body       { color: var(--body) !important; }
.text-white      { color: var(--white) !important; }
.text-muted      { color: var(--muted) !important; }
.text-secondary  { color: var(--muted) !important; }
.text-primary    { color: var(--link) !important; }
.text-info       { color: #5ec8dd !important; }
.text-success    { color: #4cd07d !important; }
.text-danger     { color: #f2748a !important; }
.text-warning    { color: var(--warning) !important; }

.bg-white   { background-color: var(--bg) !important; }
.bg-light   { background-color: var(--bg) !important; }
.bg-body    { background-color: var(--bg) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--surface-2) !important; }
.bg-dark    { background-color: var(--bg) !important; }
.bg-default { background-color: var(--bg) !important; }

.border,
.border-top,
.border-right,
.border-bottom,
.border-left { border-color: var(--border) !important; }

.rounded,
.rounded-sm,
.rounded-lg { background-clip: padding-box; }

.shadow,
.shadow-sm,
.shadow-lg { box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important; }

.white { color: var(--white) !important; }

/* --------------------------------------------------------------------------
   Surfaces — cards, panels, jumbotron, list groups
   -------------------------------------------------------------------------- */
.card,
.card-body,
.card-img-top,
.card-img-bottom {
  background-color: var(--surface);
  color: var(--body);
  border-color: var(--border);
}

.card {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

.card-header {
  background-color: var(--surface-2) !important;
  color: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
}

.card-footer {
  background-color: var(--surface-2) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}

.card .list-group-item { background-color: var(--surface); }

.jumbotron {
  background-color: var(--primary) !important;
  color: var(--body) !important;
  border-bottom: 1px solid var(--border);
}

.list-group-item {
  background-color: var(--surface) !important;
  color: var(--body) !important;
  border-color: var(--border) !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--primary-lighter) !important;
  color: var(--white) !important;
}

.popover {
  background-color: var(--surface-2);
  border-color: var(--border);
}

.popover-header {
  background-color: var(--primary-light);
  color: var(--white);
  border-bottom-color: var(--border);
}

.popover-body { color: var(--body); }

/* --------------------------------------------------------------------------
   Tables (Bootstrap + plain tables)
   -------------------------------------------------------------------------- */
.table {
  color: var(--white) !important;
  border-color: var(--border);
}

.table th,
.table td {
  border-color: var(--border) !important;
  color: var(--white) !important;
}

.table thead th,
.table tbody + tbody {
  border-color: var(--border) !important;
}

.table thead th { color: var(--white) !important; }

.thead-light th {
  background-color: var(--surface-2) !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
}

.thead-dark th {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, .04) !important;
}

.table-hover tbody tr:hover {
  color: var(--white) !important;
  background-color: rgba(34, 74, 115, .55) !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td { border-color: var(--border) !important; }

.table-dark {
  background-color: var(--primary);
  color: var(--body);
}

/* Card headers/titles that use Bootstrap "bg-white" or legacy light utility classes
   on admin/index and the list pages render on the same dark index background. */
.card-header.bg-white {
  background-color: var(--bg) !important;
  color: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
}

.card-header.bg-white .small,
.card-header.bg-white a.small {
  color: var(--muted) !important;
}

/* Containers that were originally `class="container" style="background-color:#fff"` */
.container[style*="var(--bg)"],
.container[style*="var(--surface)"],
.container[style*="var(--primary-light)"],
.bg-white,
.container.bg-white {
  background-color: var(--bg) !important;
  color: var(--white) !important;
}

.table-responsive.bg-white {
  background-color: var(--bg) !important;
}

/* Status-tinted rows keep their meaning, darkened for the navy theme */
.table-primary, .table-primary > th, .table-primary > td { background-color: rgba(34, 74, 115, .45) !important; }
.table-secondary, .table-secondary > th, .table-secondary > td { background-color: rgba(148, 163, 184, .18) !important; }
.table-success, .table-success > th, .table-success > td { background-color: rgba(40, 167, 69, .18) !important; }
.table-info, .table-info > th, .table-info > td { background-color: rgba(23, 162, 184, .18) !important; }
.table-warning, .table-warning > th, .table-warning > td { background-color: rgba(255, 193, 7, .18) !important; }
.table-danger, .table-danger > th, .table-danger > td { background-color: rgba(220, 53, 69, .18) !important; }

.table-responsive { -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   DataTables (default + bootstrap4 skins)
   -------------------------------------------------------------------------- */
table.dataTable {
  color: var(--white) !important;
}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  border-color: var(--border) !important;
  color: var(--white) !important;
  background-color: var(--surface-2) !important;
}

table.dataTable tbody tr {
  background-color: transparent !important;
  color: var(--white) !important;
}

table.dataTable tbody tr td,
table.dataTable tbody tr th {
  color: var(--white) !important;
}

table.dataTable tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: rgba(34, 74, 115, .55) !important;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: rgba(255, 255, 255, .04) !important;
}

table.dataTable tbody tr.selected,
table.dataTable.display tbody tr.selected {
  background-color: var(--primary-lighter) !important;
  color: var(--white) !important;
}

table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td {
  border-top: 1px solid var(--border) !important;
}

table.dataTable.cell-border tbody th,
table.dataTable.cell-border tbody td {
  border-top: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
}

/* The default DataTables skin ships dark PNG sort arrows that are invisible on
   the navy header (and would clash with the Bootstrap-4 skin's CSS arrows),
   so drop them — the Bootstrap-4 skin still shows its own light arrows. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-image: none !important;
}

.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
  color: var(--muted) !important;
}

.dataTables_wrapper .dataTables_processing {
  background: rgba(16, 42, 67, .92);
  border: 1px solid var(--border);
  color: var(--body) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--primary) !important;
  color: var(--body) !important;
  border: 1px solid var(--border) !important;
}

.dataTables_wrapper .dataTables_length select option { color: var(--body); }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--body) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary-lighter) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary-lighter) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
  font-weight: 700;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

/* DataTables export buttons */
button.dt-button,
div.dt-button,
a.dt-button,
.dt-buttons .btn {
  background-color: var(--primary-light) !important;
  background-image: none !important;
  color: var(--body) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  font-weight: 600;
}

button.dt-button:hover,
div.dt-button:hover,
a.dt-button:hover,
.dt-buttons .btn:hover {
  background-color: var(--primary-lighter) !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
}

button.dt-button.disabled,
div.dt-button.disabled,
a.dt-button.disabled { opacity: .5; }

div.dt-button-collection {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
}

div.dt-button-collection a.dt-button.active:not(.disabled) {
  background-color: var(--primary-lighter) !important;
  color: var(--white) !important;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-control,
.custom-select,
.custom-file-input,
.custom-file-label,
.form-control-plaintext {
  background-color: var(--primary) !important;
  color: var(--body) !important;
  border: 1px solid var(--border) !important;
}

.form-control:focus,
.custom-select:focus {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border-color: var(--primary-lighter) !important;
  box-shadow: 0 0 0 .2rem rgba(34, 74, 115, .45) !important;
}

.form-control::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: rgba(11, 29, 49, .6) !important;
  color: var(--muted) !important;
  opacity: 1;
}

.form-control option,
.custom-select option {
  background-color: var(--primary);
  color: var(--body);
}

.input-group-text {
  background-color: var(--primary-light) !important;
  color: var(--body) !important;
  border: 1px solid var(--border) !important;
}

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

/* Checkboxes / radios / switches */
.form-check-input {
  background-color: var(--primary);
  border-color: var(--border);
}

.custom-control-label::before,
.custom-control-label::after { border-color: var(--border); }

.custom-control-label::before { background-color: var(--primary) !important; }

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary-lighter) !important;
  border-color: var(--primary-lighter) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(34, 74, 115, .45);
}

.custom-switch .custom-control-label::after { background-color: var(--muted); }

.custom-file-label::after {
  background-color: var(--primary-light);
  color: var(--body);
  border-left-color: var(--border);
}

.custom-select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%2394a3b8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
}

/* Native pickers on dark */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(.8);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--primary-lighter) !important;
  border-color: var(--primary-lighter) !important;
  color: var(--white) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--white) !important;
}

.btn-brand {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--white);
  font-weight: 700;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--primary-lighter);
  border-color: var(--primary-lighter);
  color: var(--white);
}

.btn-secondary,
.btn-light,
.btn-default {
  background-color: var(--primary-light) !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-default:hover {
  background-color: var(--primary-lighter) !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-info {
  color: var(--body) !important;
  border-color: var(--border) !important;
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-info:hover {
  background-color: var(--primary-lighter) !important;
  border-color: var(--primary-lighter) !important;
  color: var(--white) !important;
}

.btn-link { color: var(--link); }
.btn-link:hover { color: var(--white); }

.btn:disabled,
.btn.disabled { opacity: .55; }

/* --------------------------------------------------------------------------
   Badges, alerts, progress, pagination
   -------------------------------------------------------------------------- */
.badge-primary { background-color: var(--primary-lighter) !important; color: var(--white) !important; }
.badge-secondary { background-color: #3f5875 !important; color: var(--body) !important; }
.badge-light { background-color: var(--primary-light) !important; color: var(--body) !important; }
.badge-dark { background-color: var(--bg) !important; color: var(--body) !important; }
.badge-info { background-color: var(--info) !important; color: var(--white) !important; }

.alert { color: var(--body); border-width: 1px; }

.alert-success {
  background-color: rgba(40, 167, 69, .14) !important;
  border-color: rgba(40, 167, 69, .45) !important;
  color: #9fe0b4 !important;
}

.alert-info {
  background-color: rgba(23, 162, 184, .14) !important;
  border-color: rgba(23, 162, 184, .45) !important;
  color: #9fdde9 !important;
}

.alert-warning {
  background-color: rgba(255, 193, 7, .14) !important;
  border-color: rgba(255, 193, 7, .45) !important;
  color: #ffe08a !important;
}

.alert-danger,
.alert-error {
  background-color: rgba(220, 53, 69, .16) !important;
  border-color: rgba(220, 53, 69, .45) !important;
  color: #f5b7bf !important;
}

.alert-secondary,
.alert-light {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--body) !important;
}

.alert a { color: var(--white); text-decoration: underline; }

.progress { background-color: var(--primary) !important; }
.progress-bar { background-color: var(--primary-lighter) !important; }

.pagination .page-link {
  background-color: var(--primary-light) !important;
  border-color: var(--border) !important;
  color: var(--body) !important;
}

.pagination .page-link:hover {
  background-color: var(--primary-lighter) !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-lighter) !important;
  border-color: var(--primary-lighter) !important;
  color: var(--white) !important;
}

.pagination .page-item.disabled .page-link {
  background-color: rgba(11, 29, 49, .5) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* --------------------------------------------------------------------------
   Navigation — tabs, pills, dropdowns, breadcrumbs
   -------------------------------------------------------------------------- */
.nav-tabs { border-bottom-color: var(--border) !important; }

.nav-tabs .nav-link {
  color: var(--muted) !important;
  border-color: transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus { border-color: var(--border) var(--border) transparent !important; color: var(--white) !important; }

.nav-tabs .nav-link.active {
  background-color: var(--surface) !important;
  border-color: var(--border) var(--border) var(--surface) !important;
  color: var(--white) !important;
}

.nav-pills .nav-link { color: var(--muted) !important; }
.nav-pills .nav-link.active { background-color: var(--primary-lighter) !important; color: var(--white) !important; }

.dropdown-menu {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.dropdown-item { color: var(--body) !important; }
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--primary-lighter) !important; color: var(--white) !important; }
.dropdown-divider { border-top-color: var(--border) !important; }
.dropdown-header { color: var(--muted) !important; }

.breadcrumb {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border);
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
.breadcrumb-item.active { color: var(--muted); }

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.modal-content {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--body) !important;
}

.modal-header,
.modal-footer { border-color: var(--border) !important; }
.modal-title { color: var(--white); }
.modal-backdrop.show { opacity: .75; }

.close {
  color: var(--white) !important;
  text-shadow: none;
  opacity: .8;
}
.close:hover { color: var(--white) !important; opacity: 1; }
.alert .close { color: inherit; }

/* --------------------------------------------------------------------------
   ZiraLock front-page components (shared so every page can use them)
   -------------------------------------------------------------------------- */
.brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--white);
}

/* Admin chrome — always the theme color (later stylesheets must not turn these light blue) */
.admin-main, .admin-wrapper { background-color: var(--bg) !important; }
.topbar {
  background-color: var(--primary) !important;
  color: var(--body) !important;
  border-bottom: 1px solid var(--primary-lighter) !important;
}
.menu-bar {
  background-color: var(--primary) !important;
  border-bottom: 1px solid var(--primary-lighter) !important;
}
.menu-bar .nav-link { color: var(--muted) !important; }
.menu-bar .nav-link.active { color: var(--white) !important; border-bottom: 2px solid var(--primary-lighter) !important; }
.admin-sidebar {
  background-color: var(--primary) !important;
  border-right: 1px solid var(--primary-lighter) !important;
}
.admin-sidebar .sidebar-header { border-bottom: 1px solid var(--primary-lighter) !important; }
.sidebar-group-toggle {
  background-color: transparent !important;
  color: var(--muted) !important;
  border: 0 !important;
}
.sidebar-group-toggle:hover { background-color: var(--primary-light) !important; color: var(--white) !important; }
.sidebar-link { color: var(--muted) !important; background-color: transparent !important; }
.sidebar-link:hover { background-color: var(--primary-light) !important; color: var(--white) !important; }
.sidebar-link.active { background-color: var(--primary-lighter) !important; color: var(--white) !important; }
.sidebar-link.active i { color: var(--white) !important; }

/* --------------------------------------------------------------------------
   Admin sidebar layout — fixed sidebar + collapsible groups
   -------------------------------------------------------------------------- */
.admin-wrapper {
  display: flex !important;
  min-height: calc(100vh - 56px);
}
.admin-sidebar {
  position: sticky !important;
  top: 56px;
  width: 260px;
  min-width: 260px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  z-index: 1030;
  flex-shrink: 0;
}
.admin-main {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* Sidebar links & groups */
.sidebar-body { padding: 8px 0; }
.sidebar-group { margin: 0; }
.sidebar-link {
  display: block;
  padding: 10px 20px;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.sidebar-link i { width: 20px; text-align: center; margin-right: 8px; }

/* Group toggle buttons */
.sidebar-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-group-toggle span { flex: 1; text-align: left; }
.sidebar-group-toggle .toggle-chevron {
  transition: transform .2s;
  font-size: .7rem;
}
.sidebar-group-toggle.open .toggle-chevron {
  transform: rotate(180deg);
}

/* Collapsible sections — collapsed by default */
.sidebar-collapse {
  display: none;
  padding: 0;
}
.sidebar-collapse.show {
  display: block;
}

/* Mobile: off-canvas sidebar */
@media (max-width: 991.98px) {
  .admin-sidebar {
    position: fixed !important;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    z-index: 1050;
    transition: left .25s ease;
    box-shadow: none;
  }
  .admin-sidebar.open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .4);
  }
  .admin-main {
    margin-left: 0 !important;
  }
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1040;
}
.sidebar-backdrop.show {
  display: block;
}

/* Chevron rotation for open state */
.sidebar-group-toggle[aria-expanded="true"] .toggle-chevron {
  transform: rotate(180deg);
}

.bg-nav {
  background: rgba(16, 42, 67, .95);
  border-bottom: 1px solid var(--primary-lighter);
}

.hero {
  background: radial-gradient(1000px 450px at 50% -10%, var(--primary-light) 0%, var(--primary) 60%);
  padding: 72px 0 64px;
}

.hero h1 { font-weight: 800; color: var(--white); }
.hero .lead { color: var(--muted); max-width: 640px; }

.glass-card {
  background: rgba(26, 61, 92, .6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(34, 74, 115, .5);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
  border-color: rgba(34, 74, 115, .8);
}

.glass-card-inner {
  background: rgba(22, 49, 78, .7);
  border: 1px solid rgba(34, 74, 115, .3);
  border-radius: 12px;
}

.glass-card:hover .glass-card-inner { border-color: rgba(34, 74, 115, .6); }

.icon-glass {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 74, 115, .4), rgba(16, 42, 67, .6));
  border: 1px solid rgba(34, 74, 115, .5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--white);
}

.stat-card {
  background: linear-gradient(135deg, rgba(26, 61, 92, .8), rgba(16, 42, 67, .9));
  border: 1px solid rgba(34, 74, 115, .5);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.feature-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(34, 74, 115, .4);
  border: 1px solid rgba(34, 74, 115, .6);
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--white);
  margin: 2px;
}

.section-title {
  font-weight: 800;
  color: var(--white);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary-lighter));
  border-radius: 2px;
}

footer {
  border-top: 1px solid var(--primary-lighter);
  color: var(--muted);
}

/* Panels used by the admin dashboard / data screens */
.dt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Scrollbars (dark) + misc
   -------------------------------------------------------------------------- */
* {
  scrollbar-color: var(--primary-lighter) var(--primary);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--primary); }
::-webkit-scrollbar-thumb { background: var(--primary-lighter); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }

.img-thumbnail {
  background-color: var(--primary);
  border-color: var(--border);
}

.text-shadow-none { text-shadow: none; }

/* --------------------------------------------------------------------------
   Mobile table scroll — contained horizontal scroll on small screens
   -------------------------------------------------------------------------- */
.table-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  .table-scroll {
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .table-scroll .table {
    margin-bottom: 0;
    min-width: 600px;
  }
  .table-scroll .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}