:root {
  /* Core surfaces */
  --color-bg: #071323;
  --color-sidebar: #091626;
  --color-surface: #111f36;
  --color-surface-hover: #172943;
  --color-surface-soft: #15243c;
  --color-border: #243651;
  --color-border-subtle: rgba(125, 157, 194, 0.16);

  /* Text */
  --color-text: #f3f7ff;
  --color-text-muted: #91a0b9;
  --color-text-subtle: #687993;
  --color-label: #9fb1c9;

  /* Brand / data colors */
  --color-mint: #6ff0cc;
  --color-mint-bright: #80f5d3;
  --color-mint-dark: #2aa899;
  --color-lavender: #a39aff;
  --color-blue: #72b5ff;
  --color-orange: #f4b66c;
  --color-coral: #ff8f9b;
  --color-teal: #71d8c8;

  /* Effects */
  --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.18);
  --shadow-glow: 0 0 28px rgba(111, 240, 204, 0.14);
  --radius-card: 16px;
  --radius-control: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 34% 0%, rgba(26, 65, 87, 0.18), transparent 32rem),
    var(--color-bg);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sidebar {
  background: linear-gradient(180deg, #0a1728 0%, var(--color-sidebar) 100%);
  border-right: 1px solid var(--color-border-subtle);
}

.card {
  background: linear-gradient(145deg, #15243d 0%, #101d32 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card--featured {
  background:
    radial-gradient(circle at 82% 12%, rgba(75, 196, 173, 0.27), transparent 29%),
    linear-gradient(145deg, #19404a 0%, #13283d 100%);
}

.nav-link {
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: 160ms ease;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-mint-bright);
  background: rgba(93, 190, 181, 0.09);
  border-color: rgba(111, 240, 204, 0.18);
}

.nav-link.is-active {
  box-shadow: inset 3px 0 0 var(--color-mint);
}

.eyebrow {
  color: var(--color-mint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

.subtle {
  color: var(--color-text-subtle);
}

.button-primary {
  color: #06251f;
  background: linear-gradient(135deg, var(--color-mint-bright), #68dfc0);
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-glow);
  font-weight: 750;
  transition: 160ms ease;
}

.button-primary:hover {
  background: linear-gradient(135deg, #94f8db, var(--color-mint));
  transform: translateY(-1px);
}

.button-secondary,
.date-control {
  color: var(--color-text);
  background: rgba(27, 45, 70, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.icon-box {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--color-mint);
  background: rgba(87, 191, 178, 0.12);
  border: 1px solid rgba(111, 240, 204, 0.14);
  border-radius: 10px;
}

.icon-box--lavender {
  color: var(--color-lavender);
  background: rgba(163, 154, 255, 0.12);
}

.icon-box--blue {
  color: var(--color-blue);
  background: rgba(114, 181, 255, 0.12);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-mint-bright);
  background: rgba(111, 240, 204, 0.11);
  border: 1px solid rgba(111, 240, 204, 0.16);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 650;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.chart-income {
  color: var(--color-mint);
  stroke: var(--color-mint);
}

.chart-expenses {
  color: var(--color-lavender);
  stroke: var(--color-lavender);
}

.progress-track {
  height: 6px;
  overflow: hidden;
  background: #243450;
  border-radius: 999px;
}

.progress-value {
  height: 100%;
  background: linear-gradient(90deg, var(--color-mint-dark), var(--color-mint));
  border-radius: inherit;
}

/* LMS-SMS application layer: keep PocketWise tokens as the single visual source of truth. */
:root {
  --color-focus: var(--color-mint-bright);
  --color-success: var(--color-mint);
  --color-warning: var(--color-orange);
  --color-danger: var(--color-coral);
  --color-info: var(--color-blue);
  --color-on-accent: #06251f;
  --color-modal: #182b47;
  --color-overlay: rgba(7, 19, 35, 0.78);
  --sm-canvas: var(--color-bg);
  --sm-card: var(--color-surface);
  --sm-surface: var(--color-surface-soft);
  --sm-field-bg: var(--color-surface-soft);
  --sm-ink: var(--color-text);
  --sm-ink-soft: var(--color-text-muted);
  --sm-muted: var(--color-text-subtle);
  --sm-line: var(--color-border);
  --sm-input-border: var(--color-border);
  --sm-link: var(--color-blue);
  --sm-action: var(--color-mint-dark);
  --sm-action-rgb: 42, 168, 153;
  --sm-accent: var(--color-mint);
  --sm-accent-soft: rgba(111, 240, 204, 0.12);
  --sm-header-bg: var(--color-sidebar);
  --sm-bar: var(--color-sidebar);
  --sm-brand: var(--color-sidebar);
  --sm-brand-dark: var(--color-bg);
  --sm-brand-soft: var(--color-surface-hover);
  --sm-hover: rgba(111, 240, 204, 0.08);
  --sm-stripe: rgba(125, 157, 194, 0.05);
  --sm-badge: var(--color-text-subtle);
  --sm-radius: var(--radius-card);
  --sm-radius-sm: var(--radius-control);
  --sm-shadow-menu: var(--shadow-card);
  --sm-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--sm-font);
}

body {
  background-image:
    radial-gradient(circle at 34% 0%, rgba(26, 65, 87, 0.18), transparent 32rem),
    linear-gradient(var(--color-bg), var(--color-bg));
}

#mainNav,
#mainNav.bg-primary,
#mainNav.bg-nav,
.navbar.bg-primary {
  background: linear-gradient(180deg, var(--color-sidebar), var(--color-bg)) !important;
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), inset 0 -2px 0 var(--color-mint-dark) !important;
}

#mainNav .nav-link,
#mainNav .nav-link.text-white,
.navbar .nav-link {
  color: var(--color-text-muted) !important;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

#mainNav .nav-link:hover,
#mainNav .nav-link:focus-visible,
#mainNav .nav-item.show > .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--color-mint-bright) !important;
  background: rgba(111, 240, 204, 0.09) !important;
  border-color: rgba(111, 240, 204, 0.18);
}

#mainNav .dropdown-menu,
.dropdown-menu,
.popover {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}

.modal-content {
  color: var(--color-text) !important;
  background: var(--color-modal) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}

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

.dropdown-item,
.dropdown-menu a {
  color: var(--color-text-muted) !important;
  border-radius: var(--radius-control);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
  color: var(--color-mint-bright) !important;
  background: var(--color-surface-hover) !important;
}

.card,
.panel,
.list-group,
.table-responsive,
.dataTables_wrapper,
.alert,
.toast {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.table,
.dataTable {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.table thead th,
.dataTable thead th,
.table-primary,
.table-warning,
.table-danger,
.table-info {
  color: var(--color-text) !important;
  background: var(--color-surface-soft) !important;
  border-color: var(--color-border) !important;
}

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

.table tbody tr:hover,
.dataTable tbody tr:hover {
  background: var(--color-surface-hover) !important;
}

.form-control,
.custom-select,
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]),
.date-control {
  color: var(--color-text) !important;
  background: var(--color-surface-soft) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-control) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle) !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  color: var(--color-text) !important;
  border-color: var(--color-focus) !important;
  box-shadow: 0 0 0 3px rgba(128, 245, 211, 0.24) !important;
  outline: none !important;
}

button,
.btn,
.button-primary,
.button-secondary {
  border-radius: var(--radius-control);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

.button-primary,
.btn-primary {
  color: var(--color-on-accent) !important;
  background: linear-gradient(135deg, var(--color-mint-bright), var(--color-mint-dark)) !important;
  border-color: transparent !important;
  font-weight: 700;
}

.button-primary:hover,
.btn-primary:hover {
  color: var(--color-on-accent) !important;
  background: linear-gradient(135deg, var(--color-mint-bright), var(--color-mint)) !important;
  transform: translateY(-1px);
}

.btn-set-adviser,
table .btn.btn-set-adviser,
input[type="button"].btn.btn-set-adviser {
  color: var(--color-on-accent) !important;
   background-color: var(--color-mint) !important;
  background: linear-gradient(135deg, var(--color-mint-bright), var(--color-mint-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(111, 240, 204, 0.24);
  font-weight: 700;
}

.btn-set-adviser:hover:not(:disabled),
table .btn.btn-set-adviser:hover:not(:disabled),
input[type="button"].btn.btn-set-adviser:hover:not(:disabled) {
  color: var(--color-on-accent) !important;
  background: linear-gradient(135deg, var(--color-mint-bright), var(--color-mint)) !important;
  border-color: var(--color-mint-bright) !important;
  box-shadow: 0 8px 24px rgba(111, 240, 204, 0.32);
  transform: translateY(-1px);
}

.btn-set-adviser:focus-visible,
table .btn.btn-set-adviser:focus-visible,
input[type="button"].btn.btn-set-adviser:focus-visible {
  color: var(--color-on-accent) !important;
  border-color: var(--color-focus) !important;
  box-shadow: 0 0 0 3px rgba(128, 245, 211, 0.24), 0 6px 18px rgba(111, 240, 204, 0.24) !important;
}

.dt-container .dt-buttons .dt-button {
  color: var(--color-lavender) !important;
  background: linear-gradient(135deg, rgba(163, 154, 255, 0.28), rgba(114, 181, 255, 0.2)) !important;
  border: 1px solid rgba(163, 154, 255, 0.62) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: 0 5px 16px rgba(163, 154, 255, 0.14);
  font-weight: 700;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

.dt-container .dt-buttons .dt-button:hover:not(.disabled) {
  color: var(--color-text) !important;
  background: linear-gradient(135deg, var(--color-surface-hover), var(--color-surface-soft)) !important;
  border-color: var(--color-mint) !important;
  box-shadow: 0 7px 22px rgba(111, 240, 204, 0.22);
  transform: translateY(-1px);
}

.dt-container .dt-buttons .dt-button:focus-visible {
  color: var(--color-text) !important;
  border-color: var(--color-focus) !important;
  box-shadow: 0 0 0 3px rgba(128, 245, 211, 0.24), 0 5px 16px rgba(163, 154, 255, 0.14) !important;
  outline: none !important;
}

.dt-container .dt-buttons .dt-button:active:not(.disabled) {
  color: var(--color-on-accent) !important;
  background: var(--color-mint) !important;
}

.dt-container .dt-buttons .dt-button.disabled,
.dt-container .dt-buttons .dt-button:disabled {
  color: var(--color-text-subtle) !important;
  background: var(--color-surface-soft) !important;
  border-color: var(--color-border) !important;
  box-shadow: none;
  opacity: 0.55;
}

.button-secondary,
.btn-secondary,
.btn-light,
.btn-outline-primary {
  color: var(--color-text) !important;
  background: var(--color-surface-soft) !important;
  border-color: var(--color-border) !important;
}

.button-secondary:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-primary:hover {
  color: var(--color-mint-bright) !important;
  background: var(--color-surface-hover) !important;
  border-color: var(--color-mint-dark) !important;
}

.btn-danger,
.alert-danger,
.badge-danger,
.status-error {
  color: var(--color-text) !important;
  background: rgba(255, 143, 155, 0.16) !important;
  border-color: rgba(255, 143, 155, 0.38) !important;
}

.btn-warning,
.alert-warning,
.badge-warning,
.status-warning {
  color: var(--color-text) !important;
  background: rgba(244, 182, 108, 0.16) !important;
  border-color: rgba(244, 182, 108, 0.38) !important;
}

.btn-success,
.alert-success,
.badge-success,
.status-success {
  color: var(--color-mint-bright) !important;
  background: rgba(111, 240, 204, 0.12) !important;
  border-color: rgba(111, 240, 204, 0.3) !important;
}

.btn-info,
.alert-info,
.badge-info,
.status-info {
  color: var(--color-blue) !important;
  background: rgba(114, 181, 255, 0.12) !important;
  border-color: rgba(114, 181, 255, 0.3) !important;
}

.badge,
.badge-primary {
  color: var(--color-mint-bright) !important;
  background: rgba(111, 240, 204, 0.11) !important;
  border: 1px solid rgba(111, 240, 204, 0.16) !important;
}

.text-dark,
.text-body,
.text-muted,
label,
.form-check-label,
.modal-title,
.modal-body,
.card-title,
.card-text {
  color: var(--color-text) !important;
}

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

.progress,
.progress-track {
  background: var(--color-surface-hover) !important;
  border-radius: 999px;
}

.progress-bar,
.progress-value {
  background: linear-gradient(90deg, var(--color-mint-dark), var(--color-mint)) !important;
  border-radius: inherit;
}

.chart-income,
.chart-income path,
.chart-income line {
  color: var(--color-mint) !important;
  stroke: var(--color-mint) !important;
}

.chart-expenses,
.chart-expenses path,
.chart-expenses line {
  color: var(--color-lavender) !important;
  stroke: var(--color-lavender) !important;
}

.disabled,
:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.55;
  box-shadow: none !important;
  transform: none !important;
}

.is-loading,
.loading {
  cursor: wait;
  opacity: 0.72;
}

.modal-backdrop {
  background-color: rgba(7, 19, 35, 0.78) !important;
}

@media (max-width: 991.98px) {
  #mainNav .navbar-nav {
    padding: 0.5rem 0 0.75rem;
    background: var(--color-sidebar);
  }

  .table-responsive,
  .dataTables_wrapper {
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 0.9375rem;
  }

  .card,
  .modal-content,
  .alert {
    border-radius: var(--radius-control);
  }

  .button-primary,
  .button-secondary,
  .btn {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}