@media (prefers-color-scheme: dark) {
  :root {
    /* Brand colours - Dark Mode */
    --gt-brand: #06beaf;
    --gt-brand-dark: #2c948c;
    --gt-brand-glow: rgba(8, 172, 158, 0.25);
    --gt-brand-soft: #0f2a28;
    --gt-accent: #06beaf;

    /* Surface & background - Dark Mode */
    --gt-surface: #1e3b39;
    --gt-bg: #0f2a28;
    --gt-border: #2b4846;

    /* Text - Dark Mode */
    --gt-text-primary: #f1f9f8;
    --gt-text-muted: #4c726f;

    /* Status - Dark Mode */
    --gt-success: #1c7b71;
    --gt-danger: #f87171;

    /* Shape - Dark Mode */
    --gt-radius-sm: 6px;
    --gt-radius: 12px;
    --gt-radius-lg: 18px;

    /* Elevation - Dark Mode */
    --gt-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
    --gt-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --gt-shadow-lg: 0 12px 40px rgba(8, 172, 158, 0.2);

    /* Motion */
    --gt-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Gradient - Dark Mode */
    --gt-gradient: #2c948c;
  }
}

/* ──────────────────────────────────────────────────────────
   Dark Mode: data-theme="dark" Attribute
   For manual theme switching
──────────────────────────────────────────────────────────── */
[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] html {
  --gt-brand: #06beaf;
  --gt-brand-dark: #2c948c;
  --gt-brand-glow: rgba(8, 172, 158, 0.25);
  --gt-brand-soft: #0f2a28;
  --gt-accent: #06beaf;

  --gt-surface: #1e3b39;
  --gt-bg: #0f2a28;
  --gt-border: #2b4846;

  --gt-text-primary: #f1f9f8;
  --gt-text-muted: #4c726f;

  --gt-success: #1c7b71;
  --gt-danger: #f87171;

  --gt-radius-sm: 6px;
  --gt-radius: 12px;
  --gt-radius-lg: 18px;

  --gt-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --gt-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --gt-shadow-lg: 0 12px 40px rgba(8, 172, 158, 0.2);

  --gt-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  --gt-gradient: #2c948c;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: PAGE HERO HEADER
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .page-hero {
    background: linear-gradient(
      135deg,
      #176962 0%,
      #157971 40%,
      #0b635c 100%
    ) !important;
    border-color: rgba(8, 172, 158, 0.3) !important;
    box-shadow: 0 8px 32px rgba(8, 172, 158, 0.15) !important;
  }
}

[data-theme="dark"] .page-hero {
  background: linear-gradient(
    135deg,
    #176962 0%,
    #157971 40%,
    #0b635c 100%
  ) !important;
  border-color: rgba(8, 172, 158, 0.3) !important;
  box-shadow: 0 8px 32px rgba(8, 172, 158, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: CARDS & CONTAINERS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .card,
  .list-card,
  [class*="card-"],
  .container-fluid > .row > [class*="col-"] > div:not(.navbar),
  .panel,
  .widget {
    background-color: var(--gt-surface) !important;
    border-color: var(--gt-border) !important;
  }
}

[data-theme="dark"] .card,
[data-theme="dark"] .list-card,
[data-theme="dark"] [class*="card-"],
[data-theme="dark"]
  .container-fluid
  > .row
  > [class*="col-"]
  > div:not(.navbar),
[data-theme="dark"] .panel,
[data-theme="dark"] .widget {
  background-color: var(--gt-surface) !important;
  border-color: var(--gt-border) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: TABLES
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  table,
  .table,
  .datatable {
    background-color: var(--gt-surface) !important;
    color: var(--gt-text-primary) !important;
  }

  .table thead th,
  .table thead td {
    background-color: #0f2a28 !important;
    color: var(--gt-text-primary) !important;
    border-color: var(--gt-border) !important;
  }

  .table tbody tr {
    border-color: var(--gt-border) !important;
  }

  .table tbody tr:hover {
    background-color: #2b4846 !important;
  }

  .table tbody td {
    border-color: var(--gt-border) !important;
  }

  .dataTables_wrapper {
    color: var(--gt-text-primary) !important;
  }
}

[data-theme="dark"] table,
[data-theme="dark"] .table,
[data-theme="dark"] .datatable {
  background-color: var(--gt-surface) !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td {
  background-color: #0f2a28 !important;
  color: var(--gt-text-primary) !important;
  border-color: var(--gt-border) !important;
}

[data-theme="dark"] .table tbody tr {
  border-color: var(--gt-border) !important;
}

[data-theme="dark"] .table tbody tr:hover {
  background-color: #2b4846 !important;
}

[data-theme="dark"] .table tbody td {
  border-color: var(--gt-border) !important;
}

[data-theme="dark"] .dataTables_wrapper {
  color: var(--gt-text-primary) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: FORMS & INPUTS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  textarea,
  select,
  .form-control,
  .input-group-text,
  .select2-container .select2-selection {
    background-color: #1e3b39 !important;
    color: var(--gt-text-primary) !important;
    border-color: var(--gt-border) !important;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="search"]:focus,
  textarea:focus,
  select:focus,
  .form-control:focus,
  .select2-container.select2-container--open .select2-selection,
  .select2-container--focus .select2-selection {
    background-color: #0f2a28 !important;
    color: var(--gt-text-primary) !important;
    border-color: var(--gt-brand) !important;
    box-shadow: 0 0 0 3px rgba(8, 172, 158, 0.1) !important;
  }

  label,
  .form-label {
    color: var(--gt-text-primary) !important;
  }

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

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .select2-container .select2-selection {
  background-color: #1e3b39 !important;
  color: var(--gt-text-primary) !important;
  border-color: var(--gt-border) !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"]
  .select2-container.select2-container--open
  .select2-selection,
[data-theme="dark"] .select2-container--focus .select2-selection {
  background-color: #0f2a28 !important;
  color: var(--gt-text-primary) !important;
  border-color: var(--gt-brand) !important;
  box-shadow: 0 0 0 3px rgba(8, 172, 158, 0.1) !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label {
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .form-text,
[data-theme="dark"] small {
  color: var(--gt-text-muted) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: BUTTONS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .btn {
    border-color: var(--gt-border) !important;
    color: var(--gt-text-primary) !important;
  }

  .btn-primary,
  .btn-info,
  .btn-success,
  .btn-danger,
  .btn-warning {
    background-color: var(--gt-brand) !important;
    border-color: var(--gt-brand) !important;
    color: #ffffff !important;
  }

  .btn-primary:hover,
  .btn-info:hover,
  .btn-success:hover,
  .btn-danger:hover,
  .btn-warning:hover {
    background-color: var(--gt-brand-dark) !important;
    border-color: var(--gt-brand-dark) !important;
  }

  .btn-secondary,
  .btn-outline-secondary {
    background-color: #2b4846 !important;
    border-color: #2b4846 !important;
    color: var(--gt-text-primary) !important;
  }

  .btn-secondary:hover,
  .btn-outline-secondary:hover {
    background-color: #354e4c !important;
    border-color: #354e4c !important;
  }

  .btn-light {
    background-color: #2b4846 !important;
    border-color: #2b4846 !important;
    color: var(--gt-text-primary) !important;
  }

  .btn-light:hover {
    background-color: #354e4c !important;
    border-color: #354e4c !important;
  }

  .btn-dark {
    background-color: #0f2a28 !important;
    border-color: #0f2a28 !important;
    color: var(--gt-text-primary) !important;
  }
}

[data-theme="dark"] .btn {
  border-color: var(--gt-border) !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-info,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-warning {
  background-color: var(--gt-brand) !important;
  border-color: var(--gt-brand) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-info:hover,
[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-warning:hover {
  background-color: var(--gt-brand-dark) !important;
  border-color: var(--gt-brand-dark) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline-secondary {
  background-color: #2b4846 !important;
  border-color: #2b4846 !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #354e4c !important;
  border-color: #354e4c !important;
}

[data-theme="dark"] .btn-light {
  background-color: #2b4846 !important;
  border-color: #2b4846 !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .btn-light:hover {
  background-color: #354e4c !important;
  border-color: #354e4c !important;
}

[data-theme="dark"] .btn-dark {
  background-color: #0f2a28 !important;
  border-color: #0f2a28 !important;
  color: var(--gt-text-primary) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: DROPDOWNS & MENUS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .dropdown-menu,
  .select2-dropdown {
    background-color: var(--gt-surface) !important;
    border-color: var(--gt-border) !important;
    color: var(--gt-text-primary) !important;
  }

  .dropdown-item {
    color: var(--gt-text-primary) !important;
  }

  .dropdown-item:hover,
  .dropdown-item:focus,
  .dropdown-item.active {
    background-color: var(--gt-brand) !important;
    color: #ffffff !important;
  }

  .select2-results__option {
    color: var(--gt-text-primary) !important;
  }

  .select2-results__option--highlighted {
    background-color: var(--gt-brand) !important;
  }
}

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .select2-dropdown {
  background-color: var(--gt-surface) !important;
  border-color: var(--gt-border) !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .dropdown-item.active {
  background-color: var(--gt-brand) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-results__option {
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .select2-results__option--highlighted {
  background-color: var(--gt-brand) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: MODALS & ALERTS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .modal-content,
  .offcanvas {
    background-color: var(--gt-surface) !important;
    color: var(--gt-text-primary) !important;
  }

  .modal-header {
    border-color: var(--gt-border) !important;
    background-color: #0f2a28 !important;
  }

  .modal-footer {
    border-color: var(--gt-border) !important;
  }

  .close,
  .btn-close {
    color: var(--gt-text-primary) !important;
  }

  .alert-primary {
    background-color: rgba(8, 172, 158, 0.2) !important;
    border-color: var(--gt-brand) !important;
    color: var(--gt-text-primary) !important;
  }

  .alert-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: #1c7b71 !important;
    color: var(--gt-text-primary) !important;
  }

  .alert-danger {
    background-color: rgba(248, 113, 113, 0.2) !important;
    border-color: #f87171 !important;
    color: var(--gt-text-primary) !important;
  }

  .alert-warning {
    background-color: rgba(251, 191, 36, 0.2) !important;
    border-color: #fbbf24 !important;
    color: var(--gt-text-primary) !important;
  }

  .alert-info {
    background-color: rgba(8, 172, 158, 0.2) !important;
    border-color: var(--gt-brand) !important;
    color: var(--gt-text-primary) !important;
  }
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas {
  background-color: var(--gt-surface) !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .modal-header {
  border-color: var(--gt-border) !important;
  background-color: #0f2a28 !important;
}

[data-theme="dark"] .modal-footer {
  border-color: var(--gt-border) !important;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .alert-primary {
  background-color: rgba(8, 172, 158, 0.2) !important;
  border-color: var(--gt-brand) !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #1c7b71 !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(248, 113, 113, 0.2) !important;
  border-color: #f87171 !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(251, 191, 36, 0.2) !important;
  border-color: #fbbf24 !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .alert-info {
  background-color: rgba(8, 172, 158, 0.2) !important;
  border-color: var(--gt-brand) !important;
  color: var(--gt-text-primary) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: BADGES & LABELS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .badge,
  .label,
  .tag {
    background-color: var(--gt-brand) !important;
    color: #ffffff !important;
  }

  .badge-secondary,
  .label-secondary {
    background-color: #354e4c !important;
    color: var(--gt-text-primary) !important;
  }

  .badge-success {
    background-color: #1c7b71 !important;
    color: #ffffff !important;
  }

  .badge-danger {
    background-color: #f87171 !important;
    color: #ffffff !important;
  }

  .badge-warning {
    background-color: #fbbf24 !important;
    color: #000000 !important;
  }
}

[data-theme="dark"] .badge,
[data-theme="dark"] .label,
[data-theme="dark"] .tag {
  background-color: var(--gt-brand) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .badge-secondary,
[data-theme="dark"] .label-secondary {
  background-color: #354e4c !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .badge-success {
  background-color: #1c7b71 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .badge-danger {
  background-color: #f87171 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .badge-warning {
  background-color: #fbbf24 !important;
  color: #000000 !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: BORDERS & SEPARATORS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  hr,
  .divider {
    border-color: var(--gt-border) !important;
  }
}

[data-theme="dark"] hr,
[data-theme="dark"] .divider {
  border-color: var(--gt-border) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: SCROLLBAR
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: #0f2a28;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #354e4c;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #415a58;
  }
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background-color: #0f2a28;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #354e4c;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #415a58;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: CODE & PRE ELEMENTS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  code,
  pre {
    background-color: #0f2a28 !important;
    color: #a1e8a1 !important;
    border-color: var(--gt-border) !important;
  }
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: #0f2a28 !important;
  color: #a1e8a1 !important;
  border-color: var(--gt-border) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: PLACEHOLDERS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  input::placeholder,
  textarea::placeholder {
    color: #4c726f !important;
    opacity: 0.7;
  }
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #4c726f !important;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: PROGRESS BARS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .progress {
    background-color: #2b4846 !important;
  }

  .progress-bar {
    background-color: var(--gt-brand) !important;
  }
}

[data-theme="dark"] .progress {
  background-color: #2b4846 !important;
}

[data-theme="dark"] .progress-bar {
  background-color: var(--gt-brand) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: NAV & TABS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .nav-tabs {
    border-color: var(--gt-border) !important;
  }

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

  .nav-tabs .nav-link:hover {
    border-color: var(--gt-border) !important;
    color: var(--gt-text-primary) !important;
  }

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

[data-theme="dark"] .nav-tabs {
  border-color: var(--gt-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--gt-text-muted) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--gt-border) !important;
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--gt-surface) !important;
  border-color: var(--gt-border) var(--gt-border) var(--gt-surface) !important;
  color: var(--gt-brand) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: LINKS
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  a {
    color: var(--gt-brand) !important;
  }

  a:hover {
    color: var(--gt-brand-dark) !important;
  }

  a.muted,
  a.text-muted {
    color: var(--gt-text-muted) !important;
  }
}

[data-theme="dark"] a {
  color: var(--gt-brand) !important;
}

[data-theme="dark"] a:hover {
  color: var(--gt-brand-dark) !important;
}

[data-theme="dark"] a.muted,
[data-theme="dark"] a.text-muted {
  color: var(--gt-text-muted) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: UTILITY TEXT CLASSES
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .text-muted {
    color: var(--gt-text-muted) !important;
  }

  .text-dark {
    color: var(--gt-text-primary) !important;
  }

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

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

[data-theme="dark"] .text-muted {
  color: var(--gt-text-muted) !important;
}

[data-theme="dark"] .text-dark {
  color: var(--gt-text-primary) !important;
}

[data-theme="dark"] .text-light {
  color: var(--gt-text-muted) !important;
}

[data-theme="dark"] .text-secondary {
  color: var(--gt-text-muted) !important;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE: UTILITY BACKGROUND CLASSES
─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .bg-light {
    background-color: #2b4846 !important;
  }

  .bg-white {
    background-color: var(--gt-surface) !important;
  }

  .bg-gray {
    background-color: #1e3b39 !important;
  }

  .bg-secondary {
    background-color: #2b4846 !important;
  }
}

[data-theme="dark"] .bg-light {
  background-color: #2b4846 !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--gt-surface) !important;
}

[data-theme="dark"] .bg-gray {
  background-color: #1e3b39 !important;
}

[data-theme="dark"] .bg-secondary {
  background-color: #2b4846 !important;
}