/* MTS application theme. AdminLTE's dark-mode class is applied by mts-theme.js. */
:root {
  color-scheme: light;
  --mts-page: #f4f7fb;
  --mts-surface: #ffffff;
  --mts-surface-muted: #f8fafc;
  --mts-text: #1f2937;
  --mts-muted: #64748b;
  --mts-border: #e2e8f0;
  --mts-input: #ffffff;
  --mts-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}

html[data-theme="dark"],
body.dark-mode {
  color-scheme: dark;
  --mts-page: #0f172a;
  --mts-surface: #1e293b;
  --mts-surface-muted: #172235;
  --mts-text: #e5e7eb;
  --mts-muted: #a8b3c2;
  --mts-border: #334155;
  --mts-input: #111c2e;
  --mts-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

html,
body,
.content-wrapper,
.main-footer,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.custom-select,
.table,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

body {
  background-color: var(--mts-page);
  color: var(--mts-text);
}

html[data-theme="dark"] body,
body.dark-mode {
  background-color: #0f172a !important;
  color: #e5e7eb;
}

/* The shared application shell */
.content-wrapper,
.main-footer {
  background-color: var(--mts-page);
  color: var(--mts-text);
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .main-footer,
body.dark-mode .content-wrapper,
body.dark-mode .main-footer {
  background-color: #0f172a !important;
  color: #e5e7eb;
}

.main-footer {
  border-top-color: var(--mts-border);
}

.card,
.info-box:not([class*="bg-"]),
.small-box:not([class*="bg-"]),
.callout,
.direct-chat-pane,
.list-group-item,
.custom-file-label {
  background-color: var(--mts-surface);
  color: var(--mts-text);
  border-color: var(--mts-border);
  box-shadow: var(--mts-shadow);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .info-box:not([class*="bg-"]),
html[data-theme="dark"] .small-box:not([class*="bg-"]),
body.dark-mode .card,
body.dark-mode .info-box:not([class*="bg-"]),
body.dark-mode .small-box:not([class*="bg-"]) {
  background-color: #1e293b !important;
  color: #e5e7eb;
  border-color: #334155 !important;
}

.card-header,
.card-footer,
.bg-white {
  background-color: var(--mts-surface) !important;
  color: var(--mts-text);
  border-color: var(--mts-border);
}

.text-dark,
.text-body,
h1,
h2,
h3,
h4,
h5,
h6,
label,
.card-title,
.info-box-text,
.small-box h3,
.small-box p {
  color: var(--mts-text);
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] .card-title,
body.dark-mode .text-dark,
body.dark-mode .text-body,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode label,
body.dark-mode .card-title {
  color: #e5e7eb !important;
}

.text-muted,
.text-secondary,
.description-block .description-text,
.form-text {
  color: var(--mts-muted) !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #1677d2;
}

/* Forms, tables and common Bootstrap components */
.form-control,
.custom-select,
.custom-file-label,
.input-group-text,
.select2-container--bootstrap4 .select2-selection,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  background-color: var(--mts-input);
  color: var(--mts-text);
  border-color: var(--mts-border);
}

.form-control::placeholder {
  color: var(--mts-muted);
}

.form-control:focus,
.custom-select:focus {
  background-color: var(--mts-input);
  color: var(--mts-text);
  border-color: #80bdff;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .input-group-text,
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .input-group-text {
  background-color: #111c2e !important;
  color: #e5e7eb !important;
  border-color: #475569 !important;
}

.table {
  color: var(--mts-text);
}

.table thead th,
.table-modern thead th,
.thead-light th {
  background-color: var(--mts-surface-muted) !important;
  color: var(--mts-muted) !important;
  border-color: var(--mts-border) !important;
}

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

html[data-theme="dark"] .table,
body.dark-mode .table {
  color: #e5e7eb;
}

.table-hover tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--mts-surface-muted);
}

.dropdown-menu,
.dropdown-item,
.modal-content,
.popover,
.toast,
.tooltip-inner {
  background-color: var(--mts-surface);
  color: var(--mts-text);
  border-color: var(--mts-border);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--mts-surface-muted);
  color: var(--mts-text);
}

.close {
  color: var(--mts-text);
  text-shadow: none;
}

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

.page-link {
  background-color: var(--mts-surface);
  border-color: var(--mts-border);
  color: #1677d2;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper select,
.dataTables_wrapper input {
  background-color: var(--mts-input);
  color: var(--mts-text);
  border-color: var(--mts-border);
}

/* Keep AdminLTE's navigation readable in both modes. */
.main-header.navbar,
.main-header.navbar-light {
  background-color: #0e7be6;
}

.main-header .nav-link,
.app-brand-title {
  color: #fff !important;
}

html[data-theme="dark"] .main-sidebar.sidebar-dark-primary,
html[data-theme="dark"] .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
html[data-theme="dark"] .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover,
body.dark-mode .main-sidebar.sidebar-dark-primary,
body.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
body.dark-mode .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
  background-color: #172235;
}

/* AdminLTE components that use fixed light colors. */
.dark-mode .bg-light,
html[data-theme="dark"] .bg-light {
  background-color: #334155 !important;
  color: #f8fafc !important;
}

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

.dark-mode .select2-dropdown,
html[data-theme="dark"] .select2-dropdown,
.dark-mode .select2-container--bootstrap4 .select2-selection,
html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection {
  background-color: var(--mts-input);
  color: var(--mts-text);
  border-color: var(--mts-border);
}



html[data-theme="dark"] .content-wrapper,
body.dark-mode .content-wrapper {
  background: #0f172a !important;
}

/* Custom page panels and modals. Several entry pages define their own light
   surfaces inline, so these theme rules intentionally use !important. */
html[data-theme="dark"],
body.dark-mode {
  --purchase-ink: #e5e7eb;
  --purchase-muted: #a8b3c2;
  --purchase-line: #475569;
  --purchase-soft: #172235;
  --bankin-ink: #e5e7eb;
  --bankin-line: #475569;
  --bankin-soft: #172235;
  --bankout-ink: #e5e7eb;
  --bankout-line: #475569;
  --bankout-soft: #172235;
  --bath-transfer-ink: #e5e7eb;
  --bath-transfer-line: #475569;
  --bath-transfer-soft: #172235;
  --banktobank-ink: #e5e7eb;
  --banktobank-line: #475569;
  --banktobank-soft: #172235;
  --receive-ink: #e5e7eb;
  --receive-muted: #a8b3c2;
  --receive-line: #475569;
  --receive-soft: #172235;
  --loan-ink: #e5e7eb;
  --loan-muted: #a8b3c2;
  --loan-line: #475569;
  --loan-soft: #172235;
  --exp-border: #475569;
  --exp-text: #e5e7eb;
  --exp-muted: #a8b3c2;
}

html[data-theme="dark"] .modal-content,
body.dark-mode .modal-content {
  background-color: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .modal-body,
body.dark-mode .modal-body {
  background-color: #172235 !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .modal-footer,
body.dark-mode .modal-footer,
html[data-theme="dark"] .card-footer,
body.dark-mode .card-footer {
  background-color: #1e293b !important;
  color: #e5e7eb !important;
  border-top-color: #334155 !important;
}

html[data-theme="dark"] .section-block,
body.dark-mode .section-block,
html[data-theme="dark"] .receive-section,
body.dark-mode .receive-section,
html[data-theme="dark"] .loan-section,
body.dark-mode .loan-section,
html[data-theme="dark"] .expense-form-panel,
body.dark-mode .expense-form-panel,
html[data-theme="dark"] .ledger-option-group,
body.dark-mode .ledger-option-group {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
  box-shadow: none;
}

html[data-theme="dark"] .section-heading,
body.dark-mode .section-heading {
  border-bottom-color: #475569 !important;
}

html[data-theme="dark"] .section-title,
body.dark-mode .section-title,
html[data-theme="dark"] .receive-section-title,
body.dark-mode .receive-section-title,
html[data-theme="dark"] .loan-section-title,
body.dark-mode .loan-section-title,
html[data-theme="dark"] .expense-form-panel h6,
body.dark-mode .expense-form-panel h6,
html[data-theme="dark"] .col-form-label,
body.dark-mode .col-form-label,
html[data-theme="dark"] .receive-filter label,
body.dark-mode .receive-filter label,
html[data-theme="dark"] #expenseForm label,
body.dark-mode #expenseForm label,
html[data-theme="dark"] #categoryForm label,
body.dark-mode #categoryForm label {
  color: #e5e7eb !important;
}

html[data-theme="dark"] .choice-pills .custom-control-label,
body.dark-mode .choice-pills .custom-control-label,
html[data-theme="dark"] .payment-grid .custom-control-label,
body.dark-mode .payment-grid .custom-control-label,
html[data-theme="dark"] .source-radio-wrap .custom-control-label,
body.dark-mode .source-radio-wrap .custom-control-label,
html[data-theme="dark"] .ledger-option > span,
body.dark-mode .ledger-option > span {
  background: #26374d !important;
  color: #e5e7eb !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .choice-pills .custom-control-input:checked ~ .custom-control-label,
body.dark-mode .choice-pills .custom-control-input:checked ~ .custom-control-label,
html[data-theme="dark"] .payment-grid .custom-control-input:checked ~ .custom-control-label,
body.dark-mode .payment-grid .custom-control-input:checked ~ .custom-control-label,
html[data-theme="dark"] .ledger-option input:checked + span,
body.dark-mode .ledger-option input:checked + span {
  background: #174e63 !important;
  color: #d9f7ff !important;
  border-color: #38bdf8 !important;
}

html[data-theme="dark"] .split-amounts,
body.dark-mode .split-amounts,
html[data-theme="dark"] .split-payment-panel,
body.dark-mode .split-payment-panel,
html[data-theme="dark"] .split-payment-row,
body.dark-mode .split-payment-row,
html[data-theme="dark"] .split-empty-state,
body.dark-mode .split-empty-state,
html[data-theme="dark"] .movement-preview,
body.dark-mode .movement-preview,
html[data-theme="dark"] .history-summary,
body.dark-mode .history-summary {
  background: #172235 !important;
  color: #e5e7eb !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .split-line-title,
body.dark-mode .split-line-title,
html[data-theme="dark"] .split-row-label,
body.dark-mode .split-row-label,
html[data-theme="dark"] .split-helper,
body.dark-mode .split-helper,
html[data-theme="dark"] .history-filter,
body.dark-mode .history-filter {
  color: #a8b3c2 !important;
}


html[data-theme="dark"] .modal .table-responsive,
body.dark-mode .modal .table-responsive {
  border-color: #334155 !important;
}

html[data-theme="dark"] .amount-preview,
body.dark-mode .amount-preview {
  background: #172235 !important;
  color: #99f6e4 !important;
  border-color: #2dd4bf !important;
}

html[data-theme="dark"] .type-display,
body.dark-mode .type-display {
  background: #172235 !important;
  color: #99f6e4 !important;
}

html[data-theme="dark"] .movement-preview .after,
body.dark-mode .movement-preview .after,
html[data-theme="dark"] .ledger-option input:checked + span i,
body.dark-mode .ledger-option input:checked + span i {
  color: #7dd3fc !important;
}

html[data-theme="dark"] .history-summary .label,
body.dark-mode .history-summary .label {
  color: #cbd5e1 !important;
}

/* Login page */
html[data-theme="dark"] .auth-shell,
body.dark-mode .auth-shell {
  --panel: rgba(23, 34, 53, .96);
  --ink: #f1f5f9;
  --muted: #a8b3c2;
  --line: rgba(148, 163, 184, .25);
}

html[data-theme="dark"] .auth-input,
body.dark-mode .auth-input {
  background: #111c2e;
  color: #f1f5f9;
  border-color: #475569;
}

html[data-theme="dark"] .mini-note,
body.dark-mode .mini-note {
  color: #a8b3c2;
}

/* One compact control is shared by the authenticated shell and login page. */
.mts-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  padding: .35rem .7rem;
  font-size: .82rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.mts-theme-toggle:hover,
.mts-theme-toggle:focus-visible {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.mts-theme-toggle .mts-theme-toggle-label {
  font-weight: 600;
}

.auth-theme-toggle {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
}

@media (max-width: 576px) {
  .mts-theme-toggle-label {
    display: none;
  }

  .auth-theme-toggle {
    top: 12px;
    right: 12px;
  }
}