/* =============================================================
   City Traffic Police — Design System  (custom.css)
   ============================================================= */

/* ── 1. Design tokens ──────────────────────────────────────── */
:root {
  --ctp-primary: #0f1c2e;
  --ctp-accent: #0078d4;
  --ctp-accent-hover: #005fa3;
  --ctp-success: #059669;
  --ctp-warning: #d97706;
  --ctp-danger: #dc2626;
  --ctp-info: #0891b2;

  --ctp-bg: #f4f6f9;
  --ctp-surface: #ffffff;
  --ctp-border: #e2e8f0;
  --ctp-border-soft: #f1f5f9;

  --ctp-text-primary: #0f1c2e;
  --ctp-text-secondary: #475569;
  --ctp-text-muted: #94a3b8;

  --ctp-radius-sm: .375rem;
  --ctp-radius-md: .625rem;
  --ctp-radius-lg: .875rem;
  --ctp-radius-xl: 1rem;

  --ctp-shadow-sm: 0 1px 3px rgba(15, 28, 46, .07);
  --ctp-shadow-md: 0 4px 16px rgba(15, 28, 46, .09);
  --ctp-shadow-lg: 0 8px 28px rgba(15, 28, 46, .12);

  --bs-primary: #0f1c2e;
  --bs-primary-rgb: 15, 28, 46;
  --bs-link-color: var(--ctp-accent);
  --bs-link-hover-color: var(--ctp-accent-hover);
  --bs-body-bg: var(--ctp-bg);
  --bs-body-color: var(--ctp-text-primary);
  --bs-border-color: var(--ctp-border);
  --bs-border-radius: var(--ctp-radius-md);
}

/* ── 2. Global resets ──────────────────────────────────────── */
body {
  background: var(--ctp-bg);
  color: var(--ctp-text-primary);
}

/* ── 3. Layout shell ───────────────────────────────────────── */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 78px !important;
}

.content-wrapper .navbar {
  z-index: auto;
}

.app-brand {
  justify-content: center;
}

.light-style .menu .app-brand.demo,
.dark-style .menu .app-brand.demo {
  height: 64px;
}

/* ── 4. LEFT SIDEBAR ───────────────────────────────────────── */
.layout-menu {
  background: var(--ctp-primary) !important;
  border-right: none !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, .12);
}

.layout-menu .app-brand {
  padding: 0 1.25rem;
  height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layout-menu .app-brand-text {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.layout-menu-toggle {
  color: rgba(255, 255, 255, .5) !important;
}

.layout-menu-toggle:hover {
  color: #fff !important;
}

.menu-inner {
  padding: .5rem 0 1rem;
}

/* Nav items — WHITE text, not gray */
.bg-menu-theme .menu-item .menu-link {
  color: rgba(255, 255, 255, .85) !important;
  border-radius: var(--ctp-radius-md);
  margin: 2px .75rem;
  padding: .6rem .875rem !important;
  font-size: .82rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: .625rem;
}

.bg-menu-theme .menu-item .menu-link:hover {
  background: rgba(255, 255, 255, .09) !important;
  color: #fff !important;
}

.bg-menu-theme .menu-item.active>.menu-link,
.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle) {
  background: var(--ctp-accent) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(0, 120, 212, .35);
}

/* Icons — white */
.bg-menu-theme .menu-item .menu-icon,
.bg-menu-theme .menu-item .menu-icon i {
  color: rgba(255, 255, 255, .75) !important;
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

.bg-menu-theme .menu-item.active>.menu-link .menu-icon,
.bg-menu-theme .menu-item.active>.menu-link .menu-icon i,
.bg-menu-theme .menu-item .menu-link:hover .menu-icon,
.bg-menu-theme .menu-item .menu-link:hover .menu-icon i {
  color: #fff !important;
}

/* Menu text span — always white */
.bg-menu-theme .menu-item .menu-link .menu-text {
  color: inherit !important;
}

/* Section headers (MAIN / MANAGEMENT / GENERAL) */
.menu-header {
  color: rgba(255, 255, 255, .4) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 1rem 1.625rem .375rem !important;
}

.menu-header .menu-header-text {
  color: rgba(255, 255, 255, .4) !important;
}

.menu-inner-shadow {
  display: none;
}

.layout-menu::-webkit-scrollbar {
  width: 4px;
}

.layout-menu::-webkit-scrollbar-track {
  background: transparent;
}

.layout-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 4px;
}

/* ── 5. TOP NAVBAR ─────────────────────────────────────────── */
#layout-navbar {
  background: var(--ctp-surface) !important;
  border-bottom: 1px solid var(--ctp-border);
  box-shadow: var(--ctp-shadow-sm);
  min-height: 64px;
  padding: 0 1.5rem;
}

#layout-navbar .layout-menu-toggle a {
  color: var(--ctp-text-secondary);
}

.global-search-input-wrap {
  position: relative;
}

.global-search-input-wrap input {
  background: white;
  border: 1.5px solid var(--ctp-border);
  border-radius: var(--ctp-radius-md);
  padding: .45rem 1rem .45rem 2.5rem;
  font-size: .82rem;
  color: var(--ctp-text-primary);
  width: 260px;
  transition: border-color .15s, box-shadow .15s;
}

.global-search-input-wrap input:focus {
  border-color: var(--ctp-accent);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .1);
  outline: none;
}

.global-search-input-wrap .search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ctp-text-muted);
  font-size: .82rem;
  pointer-events: none;
}

/* ── 6. FOOTER ─────────────────────────────────────────────── */
.ctp-footer {
  background: var(--ctp-surface);
  border-top: 1px solid var(--ctp-border);
  padding: .875rem 1.5rem;
  font-size: .75rem;
  color: var(--ctp-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}

.ctp-footer a {
  color: var(--ctp-accent);
  text-decoration: none;
  font-weight: 600;
}

.ctp-footer a:hover {
  text-decoration: underline;
}

/* ── 7. NOTIFICATION DROPDOWN ──────────────────────────────── */
.notif-dropdown {
  width: 360px;
  padding: 0;
  border: 1px solid var(--ctp-border);
  border-radius: var(--ctp-radius-lg);
  box-shadow: var(--ctp-shadow-lg);
  overflow: hidden;
}

.notif-header {
  padding: 1rem 1.25rem .875rem;
  border-bottom: 1px solid var(--ctp-border-soft);
  background: var(--ctp-surface);
}

.notif-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ctp-text-primary);
  margin-bottom: .1rem;
}

.notif-badge-count {
  font-size: .7rem;
  font-weight: 700;
  color: var(--ctp-accent);
}

.notif-mark-all-btn {
  background: none;
  border: 1px solid var(--ctp-border);
  border-radius: var(--ctp-radius-sm);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ctp-text-secondary);
  padding: .25rem .65rem;
  cursor: pointer;
  transition: all .15s;
}

.notif-mark-all-btn:hover {
  background: var(--ctp-bg);
  color: var(--ctp-text-primary);
}

.notif-list-wrapper {
  max-height: 320px;
  overflow-y: auto;
}

.notif-list-wrapper::-webkit-scrollbar {
  width: 4px;
}

.notif-list-wrapper::-webkit-scrollbar-thumb {
  background: var(--ctp-border);
  border-radius: 4px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--ctp-border-soft);
  transition: background .15s;
}

.notif-item:hover {
  background: var(--ctp-bg);
}

.notif-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: .5rem;
  background: #dbeafe;
  color: var(--ctp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-message {
  font-size: .78rem;
  color: var(--ctp-text-primary);
  text-decoration: none;
  display: block;
  line-height: 1.4;
}

.notif-message:hover {
  color: var(--ctp-accent);
}

.notif-time {
  font-size: .7rem;
  color: var(--ctp-text-muted);
  margin-top: .2rem;
  display: block;
}

.notif-read-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--ctp-text-muted);
  font-size: .8rem;
  cursor: pointer;
  transition: color .15s;
  flex-shrink: 0;
}

.notif-read-btn:hover {
  color: var(--ctp-success);
}

.notif-empty {
  padding: 2rem;
  text-align: center;
}

.notif-empty-icon {
  font-size: 2rem;
  color: var(--ctp-text-muted);
  display: block;
  margin-bottom: .75rem;
}

.notif-empty-text {
  font-size: .82rem;
  color: var(--ctp-text-secondary);
  margin-bottom: .25rem;
}

.notif-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--ctp-border-soft);
  background: var(--ctp-surface);
}

.notif-view-all {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ctp-accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-view-all:hover {
  text-decoration: underline;
}

/* ── 8. USER DROPDOWN ──────────────────────────────────────── */
.dropdown-user .dropdown-menu {
  width: 220px;
  border: 1px solid var(--ctp-border);
  border-radius: var(--ctp-radius-lg);
  box-shadow: var(--ctp-shadow-lg);
  padding: .5rem 0;
}

.dropdown-user .dropdown-item {
  font-size: .82rem;
  color: var(--ctp-text-secondary);
  padding: .55rem 1rem;
  transition: background .12s, color .12s;
}

.dropdown-user .dropdown-item:hover {
  background: var(--ctp-bg);
  color: var(--ctp-text-primary);
}

.dropdown-user .dropdown-item i {
  color: var(--ctp-text-muted);
}

.dropdown-user .dropdown-divider {
  border-color: var(--ctp-border-soft);
  margin: .35rem 0;
}

.dropdown-user .user-info-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ctp-text-primary);
}

.dropdown-user .user-info-role {
  font-size: .7rem;
  color: var(--ctp-text-muted);
  text-transform: capitalize;
}

/* ── 9. CARDS ───────────────────────────────────────────────── */
.card {
  border: 1.5px solid var(--ctp-border);
  border-radius: var(--ctp-radius-lg);
  box-shadow: none;
  background: var(--ctp-surface);
  transition: box-shadow .2s, transform .2s;
}

.card:hover {
  box-shadow: var(--ctp-shadow-md);
}

.card-header {
  background: var(--ctp-surface);
  border-bottom: 1.5px solid var(--ctp-border-soft);
  padding: 1rem 1.5rem;
  font-weight: 700;
  font-size: .875rem;
  color: var(--ctp-text-primary);
  border-radius: var(--ctp-radius-lg) var(--ctp-radius-lg) 0 0 !important;
}

.card-footer {
  background: var(--ctp-surface);
  border-top: 1.5px solid var(--ctp-border-soft);
  padding: .875rem 1.5rem;
  border-radius: 0 0 var(--ctp-radius-lg) var(--ctp-radius-lg) !important;
}

/* ── 10. BUTTONS ────────────────────────────────────────────── */
.btn {
  font-weight: 600;
  font-size: .82rem;
  border-radius: var(--ctp-radius-md);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.btn-primary {
  background: var(--ctp-primary) !important;
  border-color: var(--ctp-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(15, 28, 46, .25);
}

.btn-primary:hover {
  background: #1a3d63 !important;
  border-color: #1a3d63 !important;
}

.btn-outline-secondary {
  border-color: var(--ctp-border) !important;
  color: var(--ctp-text-secondary) !important;
  background: var(--ctp-surface) !important;
}

.btn-outline-secondary:hover {
  background: var(--ctp-bg) !important;
  border-color: var(--ctp-accent) !important;
  color: var(--ctp-accent) !important;
}

.btn-sm {
  height: 36px;
  padding: 0 .875rem;
  font-size: .78rem;
}

/* ── 11. DATATABLES ─────────────────────────────────────────── */
.dataTables_wrapper {
  font-size: .82rem;
}

/* Label wrappers — hide text, keep controls */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 0 !important;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
}

/* Length select */
.dataTables_wrapper .dataTables_length select {
  height: 36px;
  font-size: .78rem !important;
  border: 1.5px solid var(--ctp-border);
  border-radius: var(--ctp-radius-md);
  color: var(--ctp-text-primary);
  background: var(--ctp-surface);
  padding: 0 .75rem;
  transition: border-color .15s, box-shadow .15s;
}

/* Search input with magnifier icon */
.dataTables_wrapper .dataTables_filter {
  position: relative;
  display: flex;
  align-items: center;
}

.dataTables_wrapper .dataTables_filter::before {
  content: '';
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: var(--ctp-text-muted);
  pointer-events: none;
  z-index: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dataTables_wrapper .dataTables_filter input {
  height: 36px;
  border: 1.5px solid var(--ctp-border);
  border-radius: var(--ctp-radius-md);
  font-size: .78rem;
  color: var(--ctp-text-primary);
  background: var(--ctp-surface);
  padding: 0 .75rem 0 2.1rem;
  min-width: 200px;
  transition: border-color .15s, box-shadow .15s;
  margin-left: 0 !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ctp-accent);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .1);
  outline: none;
}

/* Top toolbar — everything right-aligned */
.dt-top-bar {
  display: flex;
  align-items: center;
  padding: .875rem 1.25rem;
  border-bottom: 1.5px solid var(--ctp-border-soft);
  background: var(--ctp-surface);
  gap: .5rem;
}

/* Empty left side collapses */
.dt-top-bar__left {
  flex: 0 0 auto;
}

/* DT Buttons group */
.dt-buttons {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.dt-button,
.dt-button.btn {
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
  height: 36px;
  padding: 0 .875rem !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  border-radius: var(--ctp-radius-md) !important;
  border: 1.5px solid var(--ctp-border) !important;
  background: var(--ctp-surface) !important;
  color: var(--ctp-text-secondary) !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s !important;
  white-space: nowrap;
  box-shadow: none !important;
  line-height: 1 !important;
}

.dt-button:hover,
.dt-button.btn:hover {
  background: var(--ctp-bg) !important;
  border-color: var(--ctp-accent) !important;
  color: var(--ctp-accent) !important;
}

/* Export collection dropdown */
div.dt-button-collection {
  background: var(--ctp-surface) !important;
  border: 1.5px solid var(--ctp-border) !important;
  border-radius: var(--ctp-radius-lg) !important;
  box-shadow: var(--ctp-shadow-lg) !important;
  padding: .375rem 0 !important;
  min-width: 160px;
  z-index: 9999 !important;
}

div.dt-button-collection .dt-button,
div.dt-button-collection .dropdown-item {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  height: auto !important;
  padding: .55rem 1rem !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ctp-text-secondary) !important;
  width: 100%;
}

div.dt-button-collection .dt-button:hover,
div.dt-button-collection .dropdown-item:hover {
  background: var(--ctp-bg) !important;
  color: var(--ctp-accent) !important;
}

/* Table */
table.dataTable {
  border-collapse: collapse !important;
  width: 100% !important;
}

table.dataTable thead th,
table.dataTable thead td {
  background: #f8fafc;
  border-bottom: 2px solid var(--ctp-border);
  padding: .7rem 1rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ctp-text-muted);
  white-space: nowrap;
  border-right: 1px solid var(--ctp-border-soft);
}

table.dataTable thead th:last-child,
table.dataTable thead td:last-child {
  border-right: none;
}

/* Hide vendor sort arrows */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after {
  display: none !important;
}

table.dataTable tbody tr td {
  padding: .75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--ctp-border-soft);
  color: var(--ctp-text-primary);
  font-size: .82rem;
  border-right: 1px solid var(--ctp-border-soft);
}

table.dataTable tbody tr td:last-child {
  border-right: none;
}

table.dataTable tbody tr:last-child td {
  border-bottom: none;
}

table.dataTable tbody tr:hover td {
  background: #f8fafc;
}

table.dataTable tbody tr:nth-child(even) td {
  background: #fafbfc;
}

table.dataTable tbody tr:nth-child(even):hover td {
  background: #f4f6f9;
}

/* Bottom bar */
.dt-bottom-bar {
  padding: .75rem 1.25rem;
  border-top: 1.5px solid var(--ctp-border-soft);
  background: var(--ctp-surface);
}

.dataTables_wrapper .dataTables_info {
  font-size: .75rem;
  color: var(--ctp-text-muted);
  padding-top: 0;
}

/* Pagination — NO opacity on previous/next */
.dataTables_wrapper .dataTables_paginate {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  font-size: .75rem !important;
  border-radius: var(--ctp-radius-sm) !important;
  margin: 0 1px;
  border: 1.5px solid transparent !important;
  color: var(--ctp-text-secondary) !important;
  background: transparent !important;
  transition: all .12s;
  font-weight: 500;
  opacity: 1 !important;
  /* no fading */
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ctp-bg) !important;
  border-color: var(--ctp-border) !important;
  color: var(--ctp-text-primary) !important;
  opacity: 1 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ctp-primary) !important;
  border-color: var(--ctp-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(15, 28, 46, .2) !important;
  font-weight: 700;
  opacity: 1 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
  background: var(--ctp-bg) !important;
  border-color: var(--ctp-accent) !important;
  color: var(--ctp-accent) !important;
  opacity: 1 !important;
}

/* Disabled state — visible but clearly inactive (no opacity reduction) */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  border: 1.5px solid var(--ctp-border-soft) !important;
  background: var(--ctp-surface) !important;
  color: var(--ctp-text-muted) !important;
  cursor: default;
  opacity: 1 !important;
  pointer-events: none;
}

/* Processing spinner */
.dt-processing-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Filter panel — uniform 36px height everywhere */
#filtersContainer {
  padding: 1rem 1.25rem;
  border-bottom: 1.5px solid var(--ctp-border-soft);
  background: #fafbfc;
}

#filtersContainer .form-control,
#filtersContainer .form-select,
#filtersContainer .form-control-sm,
#filtersContainer .form-select-sm,
#filtersContainer input[type="date"],
#filtersContainer input[type="text"],
#filtersContainer input[type="search"],
#filtersContainer select {
  height: 36px !important;
  min-height: 36px !important;
  font-size: .8rem !important;
  border: 1.5px solid var(--ctp-border) !important;
  border-radius: var(--ctp-radius-md) !important;
  background: var(--ctp-surface) !important;
  color: var(--ctp-text-primary) !important;
  padding: 0 .75rem !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
}

#filtersContainer .form-control:focus,
#filtersContainer .form-select:focus,
#filtersContainer input:focus,
#filtersContainer select:focus {
  border-color: var(--ctp-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .1) !important;
  outline: none !important;
}

#filtersContainer .btn,
#filtersContainer button.btn {
  height: 36px !important;
  min-height: 36px !important;
  font-size: .8rem !important;
  padding: 0 .875rem !important;
  border-radius: var(--ctp-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#filtersContainer .btn-outline-secondary {
  border: 1.5px solid var(--ctp-border) !important;
  color: var(--ctp-text-secondary) !important;
  background: var(--ctp-surface) !important;
}

#filtersContainer .btn-outline-secondary:hover {
  border-color: var(--ctp-accent) !important;
  background: var(--ctp-bg) !important;
  color: var(--ctp-accent) !important;
}

#filtersContainer label.form-label {
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--ctp-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: .3rem !important;
}

#filtersContainer hr {
  border-color: var(--ctp-border-soft);
  margin-top: .875rem;
  margin-bottom: 0;
}

/* Select2 inside filters */
#filtersContainer .select2-container .select2-selection--single {
  height: 36px !important;
  border: 1.5px solid var(--ctp-border) !important;
  border-radius: var(--ctp-radius-md) !important;
  display: flex !important;
  align-items: center !important;
}

#filtersContainer .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  font-size: .8rem !important;
  padding: 0 .75rem !important;
  color: var(--ctp-text-primary) !important;
}

#filtersContainer .select2-container .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
}

/* ── 12. DASHBOARD ──────────────────────────────────────────── */
.dash-header {
  background: linear-gradient(135deg, var(--ctp-primary) 0%, #1a3d63 100%);
  border-radius: var(--ctp-radius-xl);
  padding: 2rem 2.5rem;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.dash-header::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 120, 212, .35) 0%, transparent 70%);
  top: -120px;
  right: -80px;
  border-radius: 50%;
  pointer-events: none;
}

.dash-header__bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(0, 120, 212, .25) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .04) 0%, transparent 40%);
  pointer-events: none;
}

.dash-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.dash-header__left {
  flex: 1;
  min-width: 0;
}

.dash-header__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dash-header__greeting-wrap {
  margin-bottom: .25rem;
}

.dash-header__greeting {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .3rem;
}

.dash-header__name {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}

.dash-header__sub {
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
}

.dash-header__meta {
  margin-top: .75rem;
}

.dash-header__wave {
  display: inline-block;
  margin-left: .35rem;
  animation: wave 2.2s ease-in-out infinite;
}

@keyframes wave {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(20deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(15deg);
  }

  80% {
    transform: rotate(-5deg);
  }
}

/* Datetime card */
.dash-datetime-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ctp-radius-lg);
  padding: 1.25rem 1.75rem;
  text-align: center;
  min-width: 140px;
  backdrop-filter: blur(6px);
}

.dash-datetime-card__date {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .15rem;
}

.dash-datetime-card__big {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -.04em;
}

.dash-datetime-card__month {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  margin-bottom: .5rem;
}

.dash-datetime-card__divider {
  height: 1px;
  background: rgba(255, 255, 255, .12);
  margin: .5rem 0;
}

.dash-datetime-card__time {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .03em;
}

/* Role pill */
.dash-role-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dash-role-pill--admin {
  background: rgba(96, 165, 250, .15);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, .3);
}

.dash-role-pill--warden {
  background: rgba(251, 191, 36, .15);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, .3);
}

.dash-role-pill--citizen {
  background: rgba(52, 211, 153, .15);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, .3);
}

.dash-role-pill--user {
  background: rgba(167, 139, 250, .15);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, .3);
}

/* Stat cards */
.stat-card {
  background: var(--ctp-surface);
  border-radius: var(--ctp-radius-lg);
  padding: 1.5rem 1.75rem;
  border: 1.5px solid var(--ctp-border);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ctp-shadow-md);
  border-color: transparent;
}

.stat-card__icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.stat-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ctp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.stat-card__body {
  flex: 1;
  min-width: 0;
}

.stat-card__label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ctp-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}

.stat-card__value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ctp-text-primary);
  line-height: 1;
  margin-bottom: .2rem;
}

.stat-card__value--sm {
  font-size: 1.4rem;
}

.stat-card__sub {
  font-size: .72rem;
  color: var(--ctp-text-muted);
}

.stat-card__sub-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: .3rem;
}

.stat-card__sub-dot.active {
  background: var(--ctp-success);
}

.stat-card__trend {
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .2rem;
}

.stat-card__trend.up {
  color: var(--ctp-success);
}

.stat-card__trend.down {
  color: var(--ctp-danger);
}

.stat-card--blue .stat-card__icon {
  background: #eff6ff;
  color: #2563eb;
}

.stat-card--pink .stat-card__icon {
  background: #fdf2f8;
  color: #be185d;
}

.stat-card--green .stat-card__icon {
  background: #f0fdf4;
  color: #059669;
}

.stat-card--purple .stat-card__icon {
  background: #f5f3ff;
  color: #7c3aed;
}

/* Action cards */
.action-card {
  background: var(--ctp-surface);
  border-radius: var(--ctp-radius-lg);
  border: 1.5px solid var(--ctp-border);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ctp-shadow-md);
}

.action-card__top {
  padding: 1.5rem 1.75rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.action-card__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--ctp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.action-card__body {
  padding: 0 1.75rem 1rem;
}

.action-card__badge {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ctp-text-muted);
  background: var(--ctp-bg);
  border: 1px solid var(--ctp-border);
  border-radius: 50px;
  padding: .2rem .65rem;
}

.action-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ctp-text-primary);
  margin-bottom: .3rem;
}

.action-card__desc {
  font-size: .8rem;
  color: var(--ctp-text-secondary);
  line-height: 1.5;
}

.action-card__footer {
  border-top: 1.5px solid var(--ctp-border-soft);
  padding: .875rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-card__link {
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: gap .15s;
}

.action-card__link:hover {
  gap: .55rem;
}

.action-icon-blue {
  background: #eff6ff;
}

.action-icon-blue i {
  color: #2563eb;
}

.action-icon-purple {
  background: #fdf4ff;
}

.action-icon-purple i {
  color: #9333ea;
}

.action-icon-green {
  background: #f0fdf4;
}

.action-icon-green i {
  color: #16a34a;
}

/* Dash panels */
.dash-panel {
  background: var(--ctp-surface);
  border: 1.5px solid var(--ctp-border);
  border-radius: var(--ctp-radius-lg);
  overflow: hidden;
}

.dash-panel__header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1.5px solid var(--ctp-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dash-panel__header-left {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-width: 0;
}

.dash-panel__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ctp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.dash-panel__title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ctp-text-primary);
  margin-bottom: .05rem;
}

.dash-panel__subtitle {
  font-size: .72rem;
  color: var(--ctp-text-muted);
}

.dash-panel__action {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ctp-accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-panel__action:hover {
  color: var(--ctp-accent-hover);
}

.dash-panel__body {
  padding: 1rem 1.5rem;
}

/* Section title */
.dash-section-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ctp-text-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.dash-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ctp-border);
}

/* User avatar with status */
.u-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.u-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.u-avatar__status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ctp-surface);
}

.u-avatar__status.active {
  background: #22c55e;
}

.u-avatar__status.inactive {
  background: #94a3b8;
}

/* Status badge */
.dash-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 50px;
}

.dash-status-badge i {
  font-size: .5rem;
}

.dash-status-badge--active {
  background: #dcfce7;
  color: #16a34a;
}

.dash-status-badge--inactive {
  background: #f1f5f9;
  color: #64748b;
}

/* Role bars */
.role-bar-item {
  margin-bottom: .875rem;
}

.role-bar-item:last-child {
  margin-bottom: 0;
}

.role-bar-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .35rem;
}

.role-bar-item__count {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ctp-text-primary);
}

.role-bar-track {
  height: 6px;
  background: #f1f5f9;
  border-radius: 50px;
  overflow: hidden;
}

.role-bar-fill {
  height: 100%;
  border-radius: 50px;
  transition: width .5s;
}

.role-bar-admin {
  background: #2563eb;
}

.role-bar-warden {
  background: #d97706;
}

.role-bar-citizen {
  background: #059669;
}

.role-bar-default {
  background: var(--ctp-text-muted);
}

/* System info */
.dash-sysinfo {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px solid #bae6fd;
  border-radius: var(--ctp-radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
}

.dash-sysinfo__icon {
  width: 40px;
  height: 40px;
  background: #0ea5e9;
  border-radius: var(--ctp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

.dash-sysinfo__content {
  flex: 1;
  min-width: 0;
}

.dash-sysinfo__title {
  font-size: .75rem;
  font-weight: 700;
  color: #0c4a6e;
  margin-bottom: .1rem;
}

.dash-sysinfo__val {
  font-size: .72rem;
  color: #0369a1;
  margin-bottom: 0;
}

.dash-sysinfo__status {
  flex-shrink: 0;
}

.dash-sysinfo__online {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--ctp-success);
}

.dash-sysinfo__online i {
  font-size: .5rem;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

/* Quick links */
.ql-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .5rem;
  border-radius: var(--ctp-radius-md);
  text-decoration: none;
  transition: background .12s;
  color: var(--ctp-text-primary);
}

.ql-row:hover {
  background: var(--ctp-bg);
  color: var(--ctp-text-primary);
}

.ql-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ctp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .9rem;
}

.ql-label {
  font-size: .82rem;
  font-weight: 600;
  flex: 1;
}

.ql-chevron {
  color: var(--ctp-border);
  font-size: .75rem;
}

/* Recent table */
.recent-table td,
.recent-table th {
  vertical-align: middle;
  padding: .75rem 1.75rem;
  font-size: .82rem;
}

.recent-table th {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ctp-text-muted);
  border-bottom: 1.5px solid var(--ctp-border-soft);
  background: #fafbfc;
}

.recent-table tr:last-child td {
  border-bottom: none;
}

.recent-table tbody tr:hover td {
  background: #fafbfc;
}

.dash-empty-row {
  text-align: center;
  padding: 2rem !important;
  color: var(--ctp-text-muted);
  font-size: .82rem;
}

.dash-empty-row i {
  font-size: 1.5rem;
  opacity: .4;
}

/* Role badges in table */
.role-badge-base {
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 50px;
  display: inline-block;
}

.role-badge-admin {
  background: #dbeafe;
  color: #1d4ed8;
}

.role-badge-warden {
  background: #fef3c7;
  color: #92400e;
}

.role-badge-citizen {
  background: #d1fae5;
  color: #065f46;
}

.role-badge-default {
  background: #f1f5f9;
  color: #475569;
}

/* ── 13. LOGIN PAGE ─────────────────────────────────────────── */
.ctp-login-page {
  min-height: 100vh;
  display: flex;
}

.ctp-hero {
  position: relative;
  flex: 0 0 52%;
  background: linear-gradient(145deg, var(--ctp-primary) 0%, #152d4a 55%, #1a3d63 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 5rem;
  overflow: hidden;
  color: #fff;
}

.ctp-hero::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(0, 120, 212, .35) 0%, transparent 70%);
  top: -120px;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
}

.ctp-hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ctp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50px;
  padding: .35rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 2rem;
}

.ctp-hero__badge i {
  color: #fbbf24;
}

.ctp-hero__heading {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
}

.ctp-hero__heading span {
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ctp-hero__sub {
  font-size: .95rem;
  color: rgba(255, 255, 255, .65);
  max-width: 380px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.ctp-hero__footer-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
  margin-top: 2.5rem;
}

.ctp-hero__footer-note i {
  color: rgba(255, 255, 255, .35);
}

.ctp-features {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  z-index: 1;
}

.ctp-feature {
  display: flex;
  align-items: center;
  gap: .875rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--ctp-radius-lg);
  padding: .75rem 1rem;
  max-width: 340px;
  transition: background .2s;
}

.ctp-feature:hover {
  background: rgba(255, 255, 255, .10);
}

.ctp-feature__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--ctp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .95rem;
}

.ctp-feature__text strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .1rem;
}

.ctp-feature__text span {
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
}

/* Form panel */
.ctp-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  padding: 2rem;
  min-height: 100vh;
}

.ctp-form-box {
  width: 100%;
  max-width: 420px;
}

.ctp-form-box__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2.5rem;
}

.ctp-form-box__logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--ctp-primary), var(--ctp-accent));
  border-radius: var(--ctp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 4px 14px rgba(0, 120, 212, .35);
}

.ctp-form-box__logo-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ctp-primary);
  line-height: 1;
}

.ctp-form-box__logo-text small {
  font-size: .7rem;
  color: var(--ctp-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ctp-form-box__heading {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ctp-primary);
  margin-bottom: .3rem;
  letter-spacing: -.02em;
}

.ctp-form-box__sub {
  font-size: .875rem;
  color: var(--ctp-text-secondary);
  margin-bottom: 2rem;
}

/* Field */
.ctp-field {
  margin-bottom: 1.25rem;
}

.ctp-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}

.ctp-field__header .ctp-label {
  margin-bottom: 0;
}

.ctp-label {
  font-size: .8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .4rem;
  display: block;
}

.ctp-input-wrap {
  position: relative;
}

.ctp-input-icon {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ctp-text-muted);
  font-size: .9rem;
  pointer-events: none;
  z-index: 5;
}

.ctp-input {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--ctp-border);
  border-radius: var(--ctp-radius-md);
  background: #fff;
  padding: 0 1rem 0 2.75rem;
  font-size: .875rem;
  color: var(--ctp-primary);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.ctp-input:focus {
  border-color: var(--ctp-accent);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .12);
}

.ctp-input.is-invalid {
  border-color: var(--ctp-danger);
}

.ctp-input-suffix {
  position: absolute;
  right: .875rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--ctp-text-muted);
  font-size: .9rem;
  z-index: 5;
  background: none;
  border: none;
  padding: 0;
}

.ctp-input-suffix:hover {
  color: var(--ctp-text-secondary);
}

.ctp-btn-submit {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, var(--ctp-primary), var(--ctp-accent));
  border: none;
  border-radius: var(--ctp-radius-md);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 4px 14px rgba(0, 120, 212, .30);
}

.ctp-btn-submit:hover {
  opacity: .92;
  transform: translateY(-1px);
}

.ctp-btn-submit:active {
  transform: translateY(0);
}

.ctp-btn-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.ctp-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.ctp-remember-row label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: #475569;
  cursor: pointer;
}

.ctp-remember-row input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--ctp-accent);
  cursor: pointer;
}

.ctp-forgot {
  font-size: .8rem;
  color: var(--ctp-accent);
  text-decoration: none;
  font-weight: 600;
}

.ctp-forgot:hover {
  text-decoration: underline;
}

.ctp-roles {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.ctp-role-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 600;
  border: 1.5px solid;
}

.ctp-role-badge--admin {
  color: #1a3d63;
  background: #dbeafe;
  border-color: #93c5fd;
}

.ctp-role-badge--warden {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

.ctp-role-badge--citizen {
  color: #065f46;
  background: #d1fae5;
  border-color: #6ee7b7;
}

.ctp-footer-note {
  margin-top: 2rem;
  text-align: center;
  font-size: .72rem;
  color: var(--ctp-text-muted);
}

/* Alerts */
.ctp-alert-error {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: var(--ctp-radius-md);
  padding: .75rem 1rem;
  font-size: .82rem;
  color: #b91c1c;
  margin-bottom: 1.5rem;
}

.ctp-alert-error i {
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

.ctp-alert-success {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: var(--ctp-radius-md);
  padding: .75rem 1rem;
  font-size: .82rem;
  color: #15803d;
  margin-bottom: 1.5rem;
}

.ctp-alert-success i {
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

.ctp-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ctp-text-secondary);
  text-decoration: none;
  transition: color .15s;
}

.ctp-back-link:hover {
  color: var(--ctp-accent);
}

@media (max-width: 991px) {
  .ctp-hero {
    display: none;
  }

  .ctp-form-panel {
    background: #fff;
  }
}

/* Feature icon backgrounds */
.fi-blue {
  background: rgba(96, 165, 250, .15);
}

.fi-blue i {
  color: #60a5fa;
}

.fi-purple {
  background: rgba(167, 139, 250, .15);
}

.fi-purple i {
  color: #a78bfa;
}

.fi-green {
  background: rgba(52, 211, 153, .15);
}

.fi-green i {
  color: #34d399;
}

.fi-amber {
  background: rgba(251, 191, 36, .15);
}

.fi-amber i {
  color: #fbbf24;
}

/* ── 14. FORMS ──────────────────────────────────────────────── */
.form-control,
.form-select {
  height: 40px;
  border: 1.5px solid var(--ctp-border);
  border-radius: var(--ctp-radius-md);
  background: var(--ctp-surface);
  font-size: .82rem;
  color: var(--ctp-text-primary);
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ctp-accent);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .1);
  outline: none;
}

textarea.form-control {
  height: auto;
}

.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ctp-text-primary);
  margin-bottom: .4rem;
}

.form-text {
  font-size: .75rem;
  color: var(--ctp-text-muted);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--ctp-danger);
}

.invalid-feedback {
  font-size: .75rem;
  color: var(--ctp-danger);
}

/* ── 15. BADGES & PILLS ─────────────────────────────────────── */
.badge {
  font-size: .72rem;
  font-weight: 700;
  border-radius: 50px;
  padding: .3rem .7rem;
}

.badge.bg-success {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.badge.bg-danger {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.badge.bg-warning {
  background: #fef3c7 !important;
  color: #d97706 !important;
}

.badge.bg-info {
  background: #e0f2fe !important;
  color: #0891b2 !important;
}

/* ── 16. ICON COLOUR HELPERS ────────────────────────────────── */
.icon-bg-blue {
  background: #dbeafe;
}

.icon-cl-blue {
  color: #2563eb;
}

.icon-bg-pink {
  background: #fce7f3;
}

.icon-cl-pink {
  color: #be185d;
}

.icon-bg-green {
  background: #d1fae5;
}

.icon-cl-green {
  color: #059669;
}

.icon-bg-purple {
  background: #ede9fe;
}

.icon-cl-purple {
  color: #7c3aed;
}

.icon-bg-sky {
  background: #f0f9ff;
}

.icon-cl-sky {
  color: #0ea5e9;
}

.icon-bg-amber {
  background: #fffbeb;
}

.icon-cl-amber {
  color: #d97706;
}

.icon-bg-red {
  background: #fef2f2;
}

.icon-cl-red {
  color: #dc2626;
}

/* ── 17. TYPOGRAPHY UTILITIES ───────────────────────────────── */
.fs-small {
  font-size: .82rem !important;
}

.fs-xs {
  font-size: .75rem !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

/* ── 18. ROLE PAGE HELPERS ──────────────────────────────────── */
.role-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}

.role-row-card {
  transition: box-shadow .2s, transform .15s;
}

.role-row-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ctp-shadow-md);
}

.role-slug {
  font-size: .68rem;
  color: var(--ctp-text-muted);
}

.role-stat {
  display: flex;
  flex-direction: column;
}

.role-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.role-stat-label {
  font-size: .72rem;
  color: var(--ctp-text-muted);
}

.role-avatars {
  display: flex;
}

.role-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-right: -8px;
}

.role-avatar-more {
  font-size: .7rem;
  font-weight: 700;
  color: var(--ctp-text-muted);
  margin-left: 12px;
}

/* ── 19. PERMISSION PAGE ────────────────────────────────────── */
.perm-group-header {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ctp-text-muted);
  padding: .5rem 0 .35rem;
  border-bottom: 1px solid var(--ctp-border-soft);
  margin-bottom: .5rem;
}

.perm-checked {
  background: rgba(0, 120, 212, .04) !important;
}

/* ── 20. APP LAYOUT TWEAKS ──────────────────────────────────── */
.layout-page {
  background: var(--ctp-bg);
}

/* SweetAlert overrides */
.colored-toast.swal2-icon-success {
  background-color: #28c76f !important;
}

.colored-toast.swal2-icon-error {
  background-color: #d34c4d !important;
}

.colored-toast.swal2-icon-warning {
  background-color: #e68f3c !important;
}

.colored-toast.swal2-icon-info {
  background-color: #00bad1 !important;
}

.colored-toast .swal2-title {
  color: white !important;
}

.colored-toast .swal2-close {
  color: white !important;
}

.colored-toast .swal2-html-container {
  color: white !important;
}

/* Parsley */
.parsley-errors-list.filled li {
  color: #d34c4d !important;
}

.parsley-errors-list {
  list-style: none;
  padding-left: 0;
}

/* DataTables group row colours */
table.dataTable tr.dtrg-group.dtrg-start.dtrg-level-0 th {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

table.dataTable tr.dtrg-group.dtrg-end.dtrg-level-0 td {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
  font-size: .8125rem;
  letter-spacing: 1px;
  font-weight: bold;
}

/* Print */
@media print {
  body {
    background-color: transparent !important;
  }

  .page-break {
    page-break-before: always;
  }

  .fixed-footer {
    position: fixed !important;
    bottom: 0 !important;
  }

  .fixed-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
  }

  .dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  .dataTables_paginate,
  .dataTables_length,
  .dt-buttons {
    display: none !important;
  }
}

/* Misc utilities */
.menu-icon {
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: .5rem;
  font-size: 1.1rem !important;
}

.tox-promotion {
  display: none !important;
}

/* ── PAGE-AUTH (from vendor/css/pages/page-auth.css) ────────── */
.authentication-wrapper {
  display: flex;
  flex-basis: 100%;
  min-height: 100vh;
  width: 100%;
}
.authentication-wrapper .authentication-inner {
  width: 100%;
}
.authentication-wrapper.authentication-basic {
  align-items: center;
  justify-content: center;
}
.authentication-wrapper.authentication-cover {
  align-items: flex-start;
}
.authentication-wrapper.authentication-cover .authentication-inner {
  display: flex;
  overflow: hidden;
  border-radius: 0.625rem;
  margin: 2rem auto;
  max-height: 97vh;
}
@media (max-width: 575.98px) {
  .authentication-wrapper.authentication-cover .authentication-inner {
    border-radius: 0;
    margin: 0;
    max-height: 100vh;
  }
}
.auth-cover-bg {
  width: 100%;
  height: 100%;
  min-height: 32.125rem;
  background-color: #f0f0f6;
  border-radius: 0.375rem;
  overflow: hidden;
}
.authentication-bg { background-color: #fff; }

/* ── PAGE-PROFILE (from vendor/css/pages/page-profile.css) ──── */
.user-profile-header-banner img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.user-profile-header {
  margin-top: -2rem;
}
.user-profile-header .user-profile-img {
  border: 0.25rem solid #fff;
  margin-top: -3rem;
}
@media (max-width: 767.98px) {
  .user-profile-header-banner img { height: 150px; }
  .user-profile-header .user-profile-img { width: 80px; margin-top: -2.25rem; }
}