:root {
  --gold: #87a9d9;
  --gold-soft: #87a9d918;
  --accent: #87a9d9;
  --panel: #172238;
  --muted: #95a4bc;
  --line: #ffffff10;
  background: #0b1120;
  color: #e5edf8;
}
.tablet {
  background: #141d30;
  border-color: #27334b;
  border-radius: 8px;
  overflow: hidden;
}
.workspace {
  grid-template-columns: 218px minmax(0, 1fr);
}
.sidebar {
  background: #101829;
  padding: 22px 11px 0;
}
.device-bar {
  background: #0d1525;
  border-color: var(--line);
}
.topbar {
  background: #111a2d;
  border-bottom: 1px solid var(--line);
  min-height: 58px;
}
.main-layout,
main {
  background: #141d30;
}
.department {
  padding-bottom: 21px;
}
.nav-group {
  margin-top: 15px;
}
.nav-label {
  color: #aebbd0;
  letter-spacing: 0.3px;
  text-transform: none;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 10px;
  margin: 0 0 4px;
}
.nav-item {
  border-radius: 5px;
  font-size: 11px;
  min-height: 36px;
  padding: 9px 11px;
  color: #a7b4c9;
}
.nav-item.active {
  background: #243853;
  color: #e8f0ff;
  border-color: #365276;
  box-shadow: none;
}
.nav-item.active:after {
  display: none;
}
.nav-item:hover {
  background: #1b2a42;
  color: #e8f0ff;
}
.nav-group-count {
  display: none;
}
.nav-chevron {
  color: #6f86a9;
}
.officer,
.configuration-button {
  background: transparent;
  color: #b8c6dc;
}
.officer:hover,
.configuration-button:hover {
  background: #1c2b43;
}
.officer-avatar {
  border-color: #3c5376;
  background: #263b59;
}
.officer-info strong {
  font-weight: 600;
}
.button {
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.15px;
  min-height: 37px;
  font-weight: 600;
}
.button.primary {
  background: #7599c9;
  border-color: #86a9d5;
  color: #f6f9ff;
  box-shadow: none;
}
.button.primary:hover {
  background: #87a9d9;
}
.button.secondary {
  background: #1a2942;
  border-color: #354865;
  color: #c4d4eb;
}
.icon-button {
  border-color: #2e3e58;
  background: #18253d;
  color: #aebed6;
  border-radius: 5px;
}
.panel,
.hero-card,
.stat-card,
.admin-notice,
.profile-matricule,
.agent-profile-card {
  background: #172238;
  border-color: #293a55;
  box-shadow: none;
  border-radius: 7px;
}
.page-heading h1,
.workbench-header h1 {
  font-size: 26px;
  font-weight: 650;
  font-stretch: normal;
  letter-spacing: -0.7px;
}
.eyebrow {
  color: #809dc4;
  font-size: 8px;
  letter-spacing: 1.2px;
}
.workbench-header {
  padding: 24px 26px 20px;
}
.citizen-directory {
  background: #10192c;
  border-color: #293750;
}
.directory-search {
  border-color: #293750;
}
.directory-search > label,
.filter-search {
  background: #131f35;
  border-color: #2a3b56;
}
.citizen-row {
  border-radius: 4px;
  color: #becbe0;
  min-height: 56px;
  background: transparent;
}
.citizen-row.selected {
  background: #29405e;
  border-color: #3c5d87;
  color: #edf3ff;
}
.citizen-row.selected strong {
  color: #edf3ff;
}
.citizen-row small {
  color: #91a4c0;
}
.avatar {
  background: #243956;
  color: #a9c5e9;
  border-color: #365172;
}
.citizen-detail {
  background: #141d30;
}
.citizen-detail-head h2 {
  font-size: 25px;
  font-weight: 650;
  font-stretch: normal;
}
.citizen-detail-head {
  border-bottom: 1px solid var(--line);
}
.citizen-facts {
  gap: 20px;
}
.citizen-fact > span {
  font-size: 10px;
  color: #8fa1bb;
}
.citizen-fact > strong {
  font-size: 12px;
  font-weight: 600;
  color: #dce6f6;
}
.identity-photo {
  border-color: #385070;
  border-radius: 7px;
  background: #1e2c44;
}
.citizen-permits {
  border-color: #293750;
}
.dossier-tabs > button {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 0;
  color: #94a7c1;
}
.dossier-tabs > button.active {
  color: #bed5f5;
  border-color: #87a9d9;
}
.dossier-card {
  background: #17243b;
  border-color: #2c3d59;
  border-radius: 6px;
}
.citizen-action-grid {
  gap: 9px;
}
.citizen-action-grid > button {
  background: #1c2b44;
  border-color: #344966;
  border-radius: 5px;
  font-size: 11px;
  color: #d7e3f5;
  min-height: 49px;
}
.citizen-action-grid > button:hover {
  background: #294162;
  border-color: #577aa7;
}
.citizen-action-grid > button > svg:first-child {
  color: #9bbce8;
}
.citizen-action-heading h3 {
  font-size: 14px;
  font-weight: 600;
}
.modal,
.settings-modal {
  background: #14213b;
  border: 1px solid #3a4d70;
  border-radius: 7px;
  box-shadow: 0 28px 90px #0009;
}
.modal::backdrop,
.settings-modal::backdrop {
  background: #060c18bb;
  backdrop-filter: blur(5px);
}
.modal-head,
.modal-foot {
  border-color: #344563;
}
.modal-head h2 {
  font-size: 21px;
  font-weight: 650;
  font-stretch: normal;
}
.field > span {
  font-size: 11px;
  font-weight: 500;
  color: #b9c8de;
}
.field input,
.field select,
.field textarea,
select {
  background: #101c33;
  border: 1px solid #32435f;
  color: #d7e5f8;
  border-radius: 4px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #7297cb;
  box-shadow: 0 0 0 2px #87a9d915;
}
.rich-toolbar {
  background: #1c2d4b;
  border-color: #324563;
  border-radius: 4px 4px 0 0;
}
.photo-paste {
  border-color: #6386b8;
  background: #1d2e48;
  color: #a9c8ef;
  border-radius: 5px;
}
.evidence-gallery > a,
.evidence-photo {
  background: #101d33;
  border-color: #314564;
  border-radius: 5px;
}
.agent-profile-card {
  background: #17243a;
}
.agent-roster-summary {
  background: #141d30;
}
.agent-activity-section .agent-statistics > div {
  background: #17243a;
  border-color: #2c3e5a;
  border-radius: 5px;
}
.agent-portrait {
  background: #20334e;
  border-color: #3a5275;
  color: #93b8e9;
}
.agent-profile-title h2 {
  font-size: 24px;
  font-stretch: normal;
  font-weight: 650;
}
.agent-statistics strong {
  color: #dce8fa;
}
.agent-total-pill strong {
  color: #a8c7f0;
}
.auth-layout {
  background: #10192d;
}
.auth-story {
  background: linear-gradient(140deg, #101c32, #192e4b);
}
.auth-panel {
  background: #131e33;
}
.auth-story-copy h1 > span,
.auth-wordmark > span {
  color: #87a9d9;
}
.auth-story-copy h1 {
  font-stretch: normal;
}
.auth-lock,
.auth-connect {
  box-shadow: none;
}
.app-footer {
  background: #10192c;
  border-color: #2a3952;
  color: #8599b8;
}
* {
  scrollbar-color: #405879 #10192b;
}
::-webkit-scrollbar-track {
  background: #10192b;
}
::-webkit-scrollbar-thumb {
  background: #405879;
}
@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}
@media (max-width: 850px) {
  .workspace {
    grid-template-columns: 1fr;
  }
  .sidebar {
    background: #101829;
  }
  .workbench-header h1 {
    font-size: 23px;
  }
}

.hero-card {
  background:
    linear-gradient(90deg, rgba(12, 23, 42, 0.92) 0%, rgba(12, 23, 42, 0.68) 48%, rgba(12, 23, 42, 0.2) 100%),
    url("../img/los-santos.jpg") center/cover no-repeat;
}
.hero-card:after {
  opacity: 0.08;
}
.panel,
.hero-card,
.stat-card,
.quick-card,
.modal,
.settings-modal,
.admin-notice,
.profile-matricule,
.agent-profile-card,
.agent-activity-section .agent-statistics > div,
.dossier-card,
.citizen-row,
.nav-item,
.button,
.icon-button,
.photo-paste,
.evidence-photo,
.evidence-gallery > a,
.citizen-action-grid > button,
.field input,
.field select,
.field textarea,
select,
.identity-photo,
.agent-portrait,
.tablet {
  border-radius: 2px;
}
.citizen-actions-panel .citizen-action-section {
  margin-top: 18px;
  padding: 18px 0 0;
}
.citizen-actions-panel .citizen-action-heading {
  margin-bottom: 12px;
}
.citizen-actions-panel .citizen-action-heading h3 {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.citizen-actions-panel .citizen-action-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}
.citizen-actions-panel .citizen-action-grid > button {
  min-height: 43px;
  padding: 10px 9px;
  gap: 8px;
  font-size: 10px;
}
.citizen-actions-panel .citizen-action-grid > button > svg:first-child {
  width: 14px;
  height: 14px;
}
.citizen-actions-panel .citizen-action-grid > button > svg:last-child {
  display: none;
}
@media (max-width: 1000px) {
  .citizen-profile-grid {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .citizen-actions-panel > .identity-photo {
    width: 100%;
    max-width: 140px;
    height: 175px;
  }
  .identity-photo-label {
    text-align: center;
  }
  .citizen-actions-panel {
    display: block;
  }
}
@media (max-width: 650px) {
  .citizen-profile-grid {
    grid-template-columns: 1fr;
  }
  .citizen-actions-panel > .identity-photo {
    width: 80px;
    height: 100px;
    max-width: none;
  }
  .identity-photo-label {
    text-align: left;
  }
  .citizen-actions-panel .citizen-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tablet .workspace {
  height: 100dvh;
  min-height: 0;
}

.nav-group:not([open]) > .nav-label .nav-chevron {
  transform: rotate(0deg);
}
.nav-group[open] > .nav-label .nav-chevron {
  transform: rotate(90deg);
}

.button.personal-delete-button {
  background: #442632;
  border: 1px solid #814250;
  color: #ffb8bf;
}
.button.personal-delete-button:hover {
  background: #61313e;
}
.personal-delete-dialog {
  max-width: 460px;
}
.personal-delete-dialog .modal-body {
  padding: 24px;
  line-height: 1.8;
  color: var(--muted);
}
.delete-record-name {
  color: #e5edf8;
  font-weight: 600;
  margin-bottom: 12px;
}
.personal-delete-dialog .modal-foot {
  justify-content: flex-end;
}

.charge-section {
  display: block;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.charge-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 16px;
}
.charge-heading p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.6;
}
.charge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 12px;
  margin: 0 0 10px;
  background: #101c33;
}
.charge-row .field {
  flex: 1;
  min-width: 0;
}
.charge-row .icon-button {
  margin-top: 16px;
  width: 30px;
  height: 32px;
}
.charge-row .field > span {
  font-size: 9px;
}
.sentence-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #3b5375;
  background: #1c2d48;
  padding: 20px;
  gap: 16px;
}
.sentence-summary > div > span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 9px;
}
.sentence-summary strong {
  font-size: 22px;
  color: #c6dcfa;
}
.sentence-summary p {
  grid-column: 1/-1;
  font-size: 10px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}