/* Late theme bridge for legacy Django templates and plugin widgets. */

body.app-body {
  background: var(--csr-page-gradient) !important;
  color: var(--csr-text) !important;
}

body.app-body,
body.app-body input,
body.app-body textarea,
body.app-body select,
body.app-body button {
  font-family: var(--font-body) !important;
}

body.app-body h1,
body.app-body h2,
body.app-body h3,
body.app-body h4,
body.app-body h5,
body.app-body h6,
body.app-body .navbar-brand,
body.app-body .card-title,
body.app-body strong {
  font-family: var(--font-display) !important;
}

html body.app-body .app-navbar,
html body.app-body .navbar.fixed-top {
  background: color-mix(in srgb, var(--csr-surface) 92%, transparent) !important;
  border-bottom: 1px solid var(--csr-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  color: var(--csr-text) !important;
}

html body.app-body .app-navbar .navbar-brand,
html body.app-body .app-navbar .nav-link,
html body.app-body .app-navbar .navbar-nav .nav-link,
html body.app-body .navbar.fixed-top .navbar-brand,
html body.app-body .navbar.fixed-top .nav-link,
html body.app-body .navbar.fixed-top .navbar-nav .nav-link {
  color: var(--csr-text) !important;
  font-family: var(--font-display) !important;
}

html body.app-body .app-navbar .navbar-brand:hover,
html body.app-body .app-navbar .nav-link:hover,
html body.app-body .app-navbar .navbar-nav .nav-link:hover,
html body.app-body .navbar.fixed-top .navbar-brand:hover,
html body.app-body .navbar.fixed-top .nav-link:hover,
html body.app-body .navbar.fixed-top .navbar-nav .nav-link:hover {
  color: var(--csr-accent) !important;
}

html body.app-body .app-navbar .navbar-toggler,
html body.app-body .navbar.fixed-top .navbar-toggler {
  border-color: var(--csr-border-strong) !important;
}

.app-main,
.app-main > form,
.app-main > .container,
.app-main > .row,
.app-main .container {
  color: var(--csr-text) !important;
}

.app-main > form,
.app-main > .container:not(.app-main),
.app-main > .row {
  background: color-mix(in srgb, var(--csr-surface) 90%, transparent);
  border: 1px solid var(--csr-border);
  border-radius: var(--csr-radius-lg);
  box-shadow: var(--csr-shadow);
  padding: 1rem;
}

:root {
  --csr-sidebar-width: 292px;
}

html body.app-body .app-sidebar {
  background: color-mix(in srgb, var(--csr-surface) 94%, transparent);
  border-right: 1px solid var(--csr-border);
  box-shadow: var(--csr-shadow);
  color: var(--csr-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  z-index: 1020;
}

.app-sidebar-toggle {
  align-items: center;
  background: var(--csr-surface-2);
  border: 1px solid var(--csr-border-strong);
  border-radius: var(--csr-radius);
  color: var(--csr-text);
  display: inline-flex;
  font-weight: 900;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.45rem 0.78rem;
}

.app-sidebar-toggle:hover,
.app-sidebar-toggle:focus {
  background: var(--csr-surface-3);
  border-color: var(--csr-accent);
  color: var(--csr-accent);
}

.app-sidebar-toggle i {
  color: var(--csr-accent);
}

html body.app-body .app-footer {
  bottom: auto !important;
  left: auto !important;
  position: static !important;
  right: auto !important;
  width: auto;
}

.app-sidebar-inner {
  display: grid;
  gap: 1rem;
  min-height: 100%;
}

.app-sidebar-brand {
  align-items: center;
  border-bottom: 1px solid var(--csr-border);
  display: flex;
  gap: 0.75rem;
  padding: 0.2rem 0.2rem 1rem;
}

.app-sidebar-logo {
  height: 42px;
  width: 42px;
  object-fit: contain;
}

.app-sidebar-brand strong,
.app-sidebar-brand span {
  display: block;
  line-height: 1.2;
}

.app-sidebar-brand strong {
  color: var(--csr-text);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 900;
}

.app-sidebar-brand span,
.app-sidebar-heading {
  color: var(--csr-subtle);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-sidebar-nav,
.app-sidebar-section {
  display: grid;
  gap: 0.55rem;
}

.app-sidebar-section {
  padding-bottom: 0.55rem;
}

.app-sidebar-link,
.app-sidebar-page-menu .nav-link,
.app-sidebar-page-menu .dropdown-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--csr-radius);
  color: var(--csr-text) !important;
  display: flex;
  gap: 0.72rem;
  min-height: 40px;
  padding: 0.55rem 0.68rem !important;
  text-decoration: none;
  width: 100%;
}

.app-sidebar-link i,
.app-sidebar-page-menu .nav-link i,
.app-sidebar-page-menu .dropdown-item i {
  color: var(--csr-accent);
  flex: 0 0 1.1rem;
  text-align: center;
}

.app-sidebar-static-link {
  align-items: center;
  border: 1px solid var(--csr-border);
  border-radius: var(--csr-radius);
  color: var(--csr-text);
  display: grid;
  gap: 0.12rem 0.72rem;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  min-height: 40px;
  padding: 0.55rem 0.68rem;
}

.app-sidebar-static-link i {
  color: var(--csr-accent);
  grid-row: span 2;
  text-align: center;
}

.app-sidebar-static-link span {
  font-weight: 800;
}

.app-sidebar-static-link small {
  color: var(--csr-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.app-sidebar-link:hover,
.app-sidebar-link:focus,
.app-sidebar-page-menu .nav-link:hover,
.app-sidebar-page-menu .nav-link:focus,
.app-sidebar-page-menu .dropdown-item:hover,
.app-sidebar-page-menu .dropdown-item:focus {
  background: var(--csr-surface-3);
  border-color: var(--csr-border);
  color: var(--csr-accent) !important;
}

.app-sidebar-button {
  border: 1px solid transparent;
  font: inherit;
  text-align: left;
}

.app-sidebar-theme .dropdown-toggle::after,
.app-sidebar-page-menu .dropdown-toggle::after {
  margin-left: auto;
}

.app-sidebar .dropdown-menu {
  background: var(--csr-surface);
  border: 1px solid var(--csr-border);
  border-radius: var(--csr-radius);
  box-shadow: var(--csr-shadow);
  color: var(--csr-text);
  margin-top: 0.45rem;
}

.app-sidebar-theme .theme-menu {
  width: min(88vw, 520px);
}

.app-sidebar-page-menu:empty {
  display: none;
}

.app-sidebar-page-menu .navbar-nav {
  display: grid;
  gap: 0.45rem;
  margin: 0 !important;
  width: 100%;
}

.app-sidebar-page-menu .nav-item,
.app-sidebar-page-menu .dropdown {
  width: 100%;
}

.app-sidebar-page-menu .dropdown-menu {
  max-height: 44vh;
  overflow-y: auto;
  width: 100%;
}

.app-sidebar-page-menu .dropdown-divider {
  border-color: var(--csr-border);
}

@media (min-width: 992px) {
  html body.app-body .app-sidebar {
    bottom: 0;
    display: block !important;
    left: 0;
    position: fixed;
    top: var(--csr-nav-height);
    width: var(--csr-sidebar-width);
  }

  html body.app-body .app-main-with-sidebar.container {
    margin-left: var(--csr-sidebar-width);
    margin-right: 0;
    max-width: none;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    width: calc(100% - var(--csr-sidebar-width));
  }

  html body.app-body .app-footer-with-sidebar {
    margin-left: var(--csr-sidebar-width);
    width: calc(100% - var(--csr-sidebar-width));
  }
}

@media (max-width: 991.98px) {
  html body.app-body .app-sidebar {
    bottom: 0;
    left: 0;
    max-width: min(88vw, 360px);
    position: fixed;
    top: var(--csr-nav-height);
    width: min(88vw, 360px);
  }

  html body.app-body .app-sidebar.collapse:not(.show) {
    display: none;
  }

  html body.app-body .app-main-with-sidebar.container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.app-main [style*="color: #ffc107"],
.app-main [style*="color:#ffc107"],
.app-main [style*="color: #EAE0C8"],
.app-main [style*="color:#EAE0C8"],
.app-main [style*="color: #495057"],
.app-main [style*="color:#495057"],
.app-main [style*="color: black"],
.app-main [style*="color:black"],
.app-main [style*="color: #000"],
.app-main [style*="color:#000"],
.app-main [style*="font-family"] {
  color: var(--csr-text) !important;
  font-family: var(--font-body) !important;
}

.app-main [style*="color: #ffc107"] strong,
.app-main [style*="color:#ffc107"] strong,
.app-main [style*="color: #EAE0C8"] strong,
.app-main [style*="color:#EAE0C8"] strong {
  color: var(--csr-accent) !important;
}

.app-main [style*="background-color: #121212"],
.app-main [style*="background-color:#121212"],
.app-main [style*="background: #121212"],
.app-main [style*="background:#121212"] {
  background: var(--csr-surface-2) !important;
}

.app-main [style*="border: 1.5px solid #495057"],
.app-main [style*="border:1.5px solid #495057"],
.app-main [style*="border: 2px solid #ffc107"],
.app-main [style*="border:2px solid #ffc107"],
.app-main [style*="border: 3px solid #39FF14"],
.app-main [style*="border:3px solid #39FF14"] {
  border-color: var(--csr-border-strong) !important;
}

.app-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand),
.app-body .btn-link {
  color: var(--csr-accent) !important;
  text-decoration: none;
}

.app-body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover,
.app-body .btn-link:hover,
.app-body .btn-link:focus {
  color: var(--csr-accent-2) !important;
  text-decoration: none;
}

.app-body .btn,
.app-body button.btn,
.app-body input.btn,
.app-body a.btn,
.app-body label.btn {
  min-height: 2.25rem;
  border-radius: var(--csr-radius) !important;
  border: 1px solid var(--csr-border-strong) !important;
  background: var(--csr-surface-2) !important;
  color: var(--csr-text) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.app-body .btn-primary,
.app-body .btn-success,
.app-body .btn-outline-success:hover,
.app-body .btn-outline-warning:hover,
.app-body .btn-dark:hover,
.app-body input[type="submit"].btn:hover,
.app-body button.btn:hover,
.app-body a.btn:hover {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--csr-accent), var(--csr-accent-2)) !important;
  color: var(--csr-accent-contrast) !important;
}

.app-body .btn-dark,
.app-body .btn-secondary,
.app-body .btn-outline-primary,
.app-body .btn-outline-secondary,
.app-body .btn-outline-info,
.app-body .btn-outline-light,
.app-body .btn-outline-danger,
.app-body .btn-outline-warning,
.app-body .btn-outline-success {
  border-color: var(--csr-border-strong) !important;
  background: var(--csr-surface-2) !important;
  color: var(--csr-text) !important;
}

.app-body .btn-danger,
.app-body .btn-outline-danger:hover {
  border-color: transparent !important;
  background: var(--csr-danger) !important;
  color: var(--csr-accent-contrast) !important;
}

.app-body .text-dark,
.app-body .text-light,
.app-body .text-warning,
.app-body .text-white,
.app-body .text-muted {
  color: var(--csr-text) !important;
}

.app-body .bg-dark,
.app-body .bg-light,
.app-body .bg-white,
.app-body .table-primary,
.app-body .table-secondary,
.app-body .table-light,
.app-body .table-dark {
  background: var(--csr-surface-2) !important;
  color: var(--csr-text) !important;
}

.app-main table,
.app-main .table,
.modal-content table {
  width: 100%;
  color: var(--csr-text) !important;
  background: color-mix(in srgb, var(--csr-surface) 88%, transparent) !important;
  border-color: var(--csr-border) !important;
}

.app-main table:not(.table) {
  border-collapse: collapse;
}

.app-main table th,
.app-main table td,
.app-main .table th,
.app-main .table td,
.modal-content table th,
.modal-content table td {
  border-color: var(--csr-border) !important;
  color: var(--csr-text) !important;
  background-color: transparent !important;
}

.app-main table thead th,
.app-main .table thead th,
.custom-thead-grey th,
.table-bordered th,
.archive-table th,
.dashboard-panel th {
  background: var(--csr-surface-3) !important;
  color: var(--csr-text) !important;
  border-color: var(--csr-border-strong) !important;
}

.app-main .table-striped > tbody > tr:nth-of-type(odd) > *,
.app-main .table-hover > tbody > tr:hover > *,
.app-main tr.table-primary > *,
.app-main tr.table-secondary > * {
  background: color-mix(in srgb, var(--csr-accent) 9%, var(--csr-surface-2)) !important;
  color: var(--csr-text) !important;
}

.app-main tbody tr:hover > td,
.app-main tbody tr:hover > th {
  background: color-mix(in srgb, var(--csr-accent) 14%, var(--csr-surface-2)) !important;
}

.dropdown-content,
.app-body .dropdown-menu,
.app-body .dropdown-menu-left,
.app-body .dropdown-menu-right {
  background: color-mix(in srgb, var(--csr-surface) 96%, transparent) !important;
  border: 1px solid var(--csr-border) !important;
  border-radius: var(--csr-radius-lg) !important;
  box-shadow: var(--csr-shadow) !important;
  color: var(--csr-text) !important;
}

.dropdown-content .btn,
.dropdown-content .btn-link,
.app-body .dropdown-item {
  background: transparent !important;
  color: var(--csr-text) !important;
}

.dropdown-content .btn:hover,
.dropdown-content .btn-link:hover,
.app-body .dropdown-item:hover,
.app-body .dropdown-item:focus {
  background: var(--csr-surface-3) !important;
  color: var(--csr-accent) !important;
}

.app-body .card,
.app-body .modal-content,
.app-body .modal-header,
.app-body .modal-body,
.app-body .modal-footer,
.app-body .popover,
.app-body .toast,
.app-body .alert,
.app-body .list-group-item {
  background: var(--csr-surface) !important;
  border-color: var(--csr-border) !important;
  color: var(--csr-text) !important;
}

.app-body .modal-header,
.app-body .modal-footer {
  background: var(--csr-surface-2) !important;
}

.app-body .close,
.app-body .btn-close {
  color: var(--csr-text) !important;
  opacity: 0.85;
}

.app-body .form-control,
.app-body .form-select,
.app-body .form-check-input,
.app-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.app-body select,
.app-body textarea,
.app-body .ui.input input,
.app-body .ui.form input,
.app-body .ui.form textarea,
.app-body .ui.form select {
  background: var(--csr-surface-2) !important;
  border: 1px solid var(--csr-border-strong) !important;
  color: var(--csr-text) !important;
  border-radius: var(--csr-radius) !important;
}

.app-body .form-control::placeholder,
.app-body input::placeholder,
.app-body textarea::placeholder {
  color: var(--csr-subtle) !important;
  opacity: 1;
}

.app-body label,
.app-body legend,
.app-body .form-label,
.app-body .control-label,
.app-body .helptext,
.app-body small {
  color: var(--csr-muted) !important;
}

.app-body .breadcrumb,
.app-body .pagination,
.app-body .page-link {
  background: transparent !important;
  color: var(--csr-muted) !important;
}

.app-body .page-link {
  border-color: var(--csr-border) !important;
  background: var(--csr-surface-2) !important;
  color: var(--csr-text) !important;
}

.app-body .page-item.active .page-link,
.app-body .page-link:hover {
  border-color: var(--csr-accent) !important;
  background: var(--csr-accent) !important;
  color: var(--csr-accent-contrast) !important;
}

.app-body .dataTables_wrapper,
.app-body .dataTables_info,
.app-body .dataTables_length,
.app-body .dataTables_filter,
.app-body .dataTables_paginate {
  color: var(--csr-muted) !important;
}

.app-body .dataTables_wrapper .dataTables_filter input,
.app-body .dataTables_wrapper .dataTables_length select {
  background: var(--csr-surface-2) !important;
  border-color: var(--csr-border-strong) !important;
  color: var(--csr-text) !important;
}

.app-body .ui.segment,
.app-body .ui.form,
.app-body .ui.dropdown,
.app-body .ui.menu,
.app-body .ui.message,
.app-body .martor-toolbar,
.app-body .martor-preview,
.app-body .main-martor,
.app-body .editor-toolbar,
.app-body .ace_editor,
.app-body .ace_gutter {
  background: var(--csr-surface) !important;
  border-color: var(--csr-border) !important;
  color: var(--csr-text) !important;
}

.app-body .ace_gutter,
.app-body .martor-toolbar,
.app-body .editor-toolbar {
  background: var(--csr-surface-2) !important;
}

.app-body .ui.button,
.app-body .ui.buttons .button {
  background: var(--csr-surface-2) !important;
  border-color: var(--csr-border-strong) !important;
  color: var(--csr-text) !important;
}

.app-body .ui.button:hover,
.app-body .ui.buttons .button:hover {
  background: linear-gradient(135deg, var(--csr-accent), var(--csr-accent-2)) !important;
  color: var(--csr-accent-contrast) !important;
}

.archive-shell,
.dashboard-shell,
.archive-title,
.dashboard-title,
.archive-subtitle,
.dashboard-subtitle,
.archive-table,
.table-dashboard {
  color: var(--csr-text) !important;
}

.archive-subtitle,
.dashboard-subtitle,
.pagination-row,
.diagnostic-notes,
.reconciliation-note {
  color: var(--csr-muted) !important;
}

.archive-panel,
.dashboard-panel,
.kpi-card,
.chart-card {
  background: var(--csr-surface) !important;
  border-color: var(--csr-border) !important;
  box-shadow: var(--csr-shadow) !important;
}

.archive-control,
.dashboard-control {
  background: var(--csr-surface-2) !important;
  border-color: var(--csr-border-strong) !important;
  color: var(--csr-text) !important;
}

.archive-pill {
  background: var(--csr-surface-3) !important;
  color: var(--csr-text) !important;
}

.archive-pill-ok {
  background: var(--csr-success) !important;
  color: var(--csr-accent-contrast) !important;
}
