:root {
  --dm-primary: #5b57d9;
  --dm-primary-dark: #403da7;
  --dm-primary-soft: #eeedff;
  --dm-primary-wash: #f7f6ff;
  --dm-ink: #11183f;
  --dm-copy: #46506b;
  --dm-muted: #77809a;
  --dm-line: #e4e6f2;
  --dm-canvas: #f8f9fe;
  --dm-white: #fff;
  --dm-danger: #f43f4f;
  --dm-success: #19b64b;
  --dm-radius: 18px;
  --dm-shadow: 0 8px 30px rgba(34, 39, 86, .07);
  --dm-type-caption: .875rem;
  --dm-type-label: .95rem;
  --dm-type-body: 1rem;
  --dm-type-heading: 1.125rem;
}

html,
body,
button,
input,
select,
textarea,
.tooltip,
.popover {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  color: var(--dm-ink);
  background: var(--dm-canvas) !important;
  letter-spacing: -.012em;
  font-size: 16px;
  line-height: 1.5;
}

/* Shared loading and motion language used across authenticated Dashmatic. */
.dashmatic-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(238, 237, 255, .95), transparent 28%),
    rgba(248, 249, 254, .97);
  opacity: 1;
  visibility: visible;
  transition: opacity .42s ease, visibility .42s ease;
}

.dashmatic-page-loader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dashmatic-loader-card {
  min-width: 250px;
  display: grid;
  justify-items: center;
  padding: 30px 34px 28px;
  border: 1px solid rgba(91, 87, 217, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 22px 60px rgba(38, 40, 92, .13);
  backdrop-filter: blur(14px);
}

.dashmatic-loader-mark {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 46px;
  display: block;
  overflow: hidden;
  border-radius: 11px 15px 15px 11px;
  background: linear-gradient(145deg, #8986ff 0 35%, #5b57d9 36% 70%, #3f3baf 71%);
  box-shadow: 0 9px 24px rgba(80, 76, 201, .28);
}

.dashmatic-loader-mark::after {
  content: "";
  position: absolute;
  inset: 11px 11px 11px 10px;
  border-radius: 4px 9px 9px 4px;
  background: #fff;
}

.dashmatic-loader-mark span {
  position: absolute;
  right: -10px;
  bottom: -8px;
  z-index: 1;
  width: 34px;
  height: 22px;
  transform: rotate(-34deg);
  background: rgba(132, 128, 255, .72);
}

.dashmatic-loader-ring {
  width: 76px;
  height: 76px;
  margin-top: -61px;
  border: 3px solid rgba(91, 87, 217, .11);
  border-top-color: var(--dm-primary);
  border-right-color: #8b87f2;
  border-radius: 50%;
  animation: dashmatic-spin .8s linear infinite;
}

.dashmatic-loader-card strong {
  margin-top: 22px;
  color: var(--dm-ink);
  font-size: 1rem;
  font-weight: 750;
}

.dashmatic-loader-card small {
  margin-top: 5px;
  color: var(--dm-muted);
  font-size: .8rem;
  font-weight: 550;
}

.dm-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .75, .3, 1);
  transition-delay: var(--dm-reveal-delay, 0ms);
}

.dm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.dm-loading-inline {
  min-height: 76px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--dm-muted) !important;
  font-size: var(--dm-type-label) !important;
  font-weight: 600 !important;
}

.dm-inline-spinner,
.spinner-border,
.fa-spinner,
.fa-circle-notch {
  color: var(--dm-primary) !important;
}

.dm-inline-spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-block;
  border: 2px solid rgba(91, 87, 217, .16);
  border-top-color: var(--dm-primary);
  border-radius: 50%;
  animation: dashmatic-spin .72s linear infinite;
}

/* Card-level loading state. Content fades in only after its section is ready. */
.dm-card-loading-host {
  position: relative;
  min-height: 92px;
}

.dm-card-loading-host > *:not(.dm-card-loader) {
  transition: opacity .32s ease, transform .32s ease;
}

.dm-card-loading-host.dm-card-pending > *:not(.dm-card-loader) {
  opacity: 0 !important;
  transform: translateY(5px);
  pointer-events: none;
}

.dm-card-loader {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(255, 255, 255, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.dm-card-pending > .dm-card-loader {
  opacity: 1;
  visibility: visible;
}

.dm-card-loader-ring {
  width: 30px;
  height: 30px;
  display: block;
  border: 3px solid rgba(91, 87, 217, .14);
  border-top-color: var(--dm-primary);
  border-right-color: #8b87f2;
  border-radius: 50%;
  animation: dashmatic-spin .72s linear infinite;
  box-shadow: 0 0 0 6px rgba(91, 87, 217, .035);
}

@keyframes dashmatic-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dashmatic-page-loader,
  .dm-reveal {
    transition: none !important;
  }

  .dashmatic-loader-ring,
  .dm-card-loader-ring,
  .dm-inline-spinner,
  .spinner-border,
  .fa-spinner,
  .fa-circle-notch {
    animation-duration: 1.6s !important;
  }

  .dm-reveal {
    opacity: 1;
    transform: none;
  }
}

#wrapper,
#content-wrapper,
#content,
#content.bg-white {
  background: var(--dm-canvas) !important;
}

/* Shared product mark. */
.dashmatic-d-mark {
  position: relative;
  width: 34px;
  height: 38px;
  flex: 0 0 34px;
  display: inline-block;
  overflow: hidden;
  border-radius: 9px 13px 13px 9px;
  background: linear-gradient(145deg, #8986ff 0 35%, #5b57d9 36% 70%, #3f3baf 71%);
  box-shadow: 0 7px 16px rgba(80, 76, 201, .25);
}

.dashmatic-d-mark::after {
  content: "";
  position: absolute;
  inset: 9px 9px 9px 8px;
  border-radius: 3px 8px 8px 3px;
  background: #fff;
}

.dashmatic-d-mark span {
  position: absolute;
  right: -9px;
  bottom: -8px;
  z-index: 1;
  width: 29px;
  height: 20px;
  transform: rotate(-34deg);
  background: rgba(132, 128, 255, .72);
}

/* Shared navigation from the supplied sidebar reference. */
#accordionSidebar.sidebar {
  width: 248px !important;
  min-height: calc(100vh - 28px);
  margin: 14px 0 14px 14px;
  padding: 20px 14px;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: var(--dm-white) !important;
  box-shadow: var(--dm-shadow);
}

#accordionSidebar .sidebar-brand {
  width: 100%;
  height: 70px;
  margin: 0 0 18px;
  padding: 0 14px 18px;
  justify-content: flex-start !important;
  border-bottom: 1px solid var(--dm-line);
  background: transparent !important;
}

#accordionSidebar .sidebar-brand-text {
  display: block !important;
  margin-left: 14px !important;
  color: var(--dm-ink) !important;
  font-size: 1.27rem;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: none;
}

#accordionSidebar .sidebar-heading,
#accordionSidebar .sidebar-divider,
#accordionSidebar #sidebarToggle {
  display: none !important;
}

#accordionSidebar .nav-item {
  width: 100% !important;
  margin: 0 0 6px;
}

#accordionSidebar .nav-item .nav-link {
  position: relative;
  width: 100% !important;
  min-height: 58px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 9px 12px !important;
  border-radius: 16px;
  background: transparent !important;
  color: var(--dm-copy) !important;
  font-size: var(--dm-type-label);
  font-weight: 650;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

#accordionSidebar .nav-item .nav-link:hover,
#accordionSidebar .nav-item.active .nav-link {
  transform: translateX(2px);
  background: linear-gradient(90deg, #f0efff, #f7f6ff) !important;
  color: var(--dm-primary-dark) !important;
}

#accordionSidebar .nav-item .nav-link > i,
#accordionSidebar .nav-item .nav-link > .material-icons,
#accordionSidebar .nav-item .nav-link > span[style*="position:relative"] {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--dm-primary-wash);
  color: var(--dm-primary) !important;
  font-size: 1.05rem !important;
}

#accordionSidebar .nav-item .nav-link > span[style*="position:relative"] i {
  width: auto !important;
  margin: 0 !important;
  color: var(--dm-primary) !important;
}

#accordionSidebar .nav-item .nav-link > span:not(.badge):not([style*="position:relative"]) {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  color: inherit !important;
  font-size: var(--dm-type-label);
  font-weight: 550;
  line-height: 1.2;
}

#accordionSidebar .nav-item .nav-link .badge,
#accordionSidebar .nav-item .nav-link span[style*="background:#e74a3b"] {
  top: -6px !important;
  right: -7px !important;
  border: 2px solid #fff !important;
  background: var(--dm-danger) !important;
}

#accordionSidebar .collapse,
#accordionSidebar .collapsing {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  min-width: 0;
}

#accordionSidebar .collapse-inner {
  margin: 3px 5px 9px 54px !important;
  border: 1px solid var(--dm-line);
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(34, 39, 86, .08);
}

#accordionSidebar .collapse-header,
#accordionSidebar .collapse-item {
  color: var(--dm-copy) !important;
}

#accordionSidebar .collapse-item:hover {
  color: var(--dm-primary-dark) !important;
  background: var(--dm-primary-wash) !important;
}

/* Shared top bar and page canvas. */
#content > .topbar,
#topbar.topbar {
  min-height: 94px;
  height: auto;
  margin-bottom: 28px !important;
  padding: 18px 30px;
  border: 0 !important;
  background: rgba(255, 255, 255, .93) !important;
  box-shadow: none !important;
}

.topbar .nav-link,
.topbar .nav-link i,
.topbar .nav-link span,
.topbar .text-white {
  color: var(--dm-ink) !important;
}

.topbar .nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.topbar .nav-link:hover {
  background: var(--dm-primary-wash);
  color: var(--dm-primary-dark) !important;
}

.topbar .topbar-divider {
  width: 1px;
  height: 32px;
  margin: 0 15px !important;
  background: var(--dm-line) !important;
}

.topbar .navbar-nav {
  align-items: center;
}

.topbar .navbar-nav > .nav-item {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

.topbar .navbar-nav > .nav-item > .nav-link > i {
  font-size: 1.16rem !important;
  color: var(--dm-ink) !important;
}

.topbar .navbar-nav > .nav-item > .nav-link .fa-bug {
  margin-right: 7px !important;
  color: var(--dm-primary-dark) !important;
}

.topbar .navbar-nav > .nav-item > .nav-link .small {
  color: var(--dm-primary-dark) !important;
  font-size: var(--dm-type-caption);
  font-weight: 700 !important;
}

.topbar .badge-counter,
.badge-danger {
  background: var(--dm-danger) !important;
}

.topbar .badge-counter {
  top: 13px !important;
  right: -2px !important;
  min-width: 18px;
  height: 18px;
  padding: 0 4px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: .61rem !important;
  line-height: 1;
  transform: none !important;
  color: #fff !important;
}

.topbar #userDropdown {
  gap: 8px;
  padding-left: 12px;
  padding-right: 8px;
}

.topbar #userDropdown > span {
  margin-right: 0 !important;
  color: var(--dm-primary-dark) !important;
  font-size: var(--dm-type-label) !important;
  font-weight: 650 !important;
}

.badge-primary,
.badge-blurple,
.badge-durple,
.badge-lurple {
  background: var(--dm-primary-soft) !important;
  color: var(--dm-primary-dark) !important;
}

.topbar .badge-counter.badge-primary {
  background: var(--dm-primary) !important;
  color: #fff !important;
}

#content > .container-fluid,
#content > .container-fluid.bg-white {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 30px !important;
  padding-right: 30px !important;
  background: transparent !important;
}

/* Shared panels, forms, tables and buttons. */
.card {
  border: 1px solid var(--dm-line) !important;
  border-radius: var(--dm-radius) !important;
  background: var(--dm-white) !important;
  box-shadow: var(--dm-shadow) !important;
}

.card-header,
.card-header.bg-white,
.card-body,
.card-body.bg-white,
.card-body.bg-durple {
  border-color: var(--dm-line) !important;
  background: var(--dm-white) !important;
  color: var(--dm-ink) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-title {
  color: var(--dm-ink) !important;
  font-weight: 750 !important;
}

.form-control,
.custom-select {
  min-height: 44px;
  border: 1px solid var(--dm-line);
  border-radius: 11px;
  color: var(--dm-ink);
  background: #fbfbfe;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--dm-primary);
  box-shadow: 0 0 0 4px rgba(91, 87, 217, .13);
}

.btn-primary,
.btn-blurple,
.btn-durple,
.bg-durple,
.bg-blurple,
.bg-lurple {
  border-color: var(--dm-primary) !important;
  background-color: var(--dm-primary) !important;
}

/* Legacy panels now use the same clean white card treatment as the dashboard. */
.card > .card-header.bg-durple,
.card > .card-header.bg-blurple,
.card > .card-header.bg-lurple,
.card > .card-body.bg-durple,
.card > .card-body.bg-blurple,
.card > .card-body.bg-lurple,
.modal-content.bg-durple,
.modal-content.bg-blurple,
.modal-content.bg-lurple {
  border-color: var(--dm-line) !important;
  background: var(--dm-white) !important;
  color: var(--dm-ink) !important;
}

.card > .card-header.bg-durple .text-white,
.card > .card-header.bg-blurple .text-white,
.card > .card-header.bg-lurple .text-white,
.card > .card-body.bg-durple .text-white,
.card > .card-body.bg-blurple .text-white,
.card > .card-body.bg-lurple .text-white,
.modal-content.bg-durple .modal-title,
.modal-content.bg-blurple .modal-title,
.modal-content.bg-lurple .modal-title {
  color: var(--dm-ink) !important;
}

.card > .card-header.bg-durple,
.card > .card-header.bg-blurple,
.card > .card-header.bg-lurple {
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 16px 20px !important;
}

.btn-primary,
.btn-blurple,
.btn-durple {
  border-radius: 11px !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(91, 87, 217, .2);
}

/* All application actions use a quiet outline treatment. */
.btn:not(.btn-link):not(.close),
a.btn:not(.btn-link) {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--dm-primary) !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--dm-primary-dark) !important;
  font-weight: 650;
  box-shadow: none !important;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.btn:not(.btn-link):not(.close):hover,
.btn:not(.btn-link):not(.close):focus,
a.btn:not(.btn-link):hover,
a.btn:not(.btn-link):focus {
  transform: translateY(-1px);
  border-color: var(--dm-primary-dark) !important;
  background: var(--dm-primary-soft) !important;
  color: var(--dm-primary-dark) !important;
}

.btn-danger,
.btn-outline-danger {
  border-color: var(--dm-danger) !important;
  color: var(--dm-danger) !important;
}

.btn-danger:hover,
.btn-outline-danger:hover {
  background: #fff0f2 !important;
  color: #d9293d !important;
}

.btn-success,
.btn-outline-success {
  border-color: var(--dm-success) !important;
  color: #138f3c !important;
}

.btn-success:hover,
.btn-outline-success:hover {
  background: #effbf3 !important;
  color: #0e7b32 !important;
}

.btn-warning,
.btn-outline-warning {
  border-color: #d79500 !important;
  color: #a36f00 !important;
}

.btn-secondary,
.btn-outline-secondary {
  border-color: var(--dm-muted) !important;
  color: var(--dm-copy) !important;
}

/* Tabs behave like outlined segmented controls instead of filled blocks. */
.nav-tabs,
.nav-pills {
  gap: 8px;
  padding: 0;
  border: 0 !important;
}

.nav-tabs .nav-item,
.nav-pills .nav-item {
  margin: 0 !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.nav-tabs .nav-link.bg-durple,
.nav-pills .nav-link.bg-durple {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid var(--dm-line) !important;
  border-radius: 11px !important;
  background: var(--dm-white) !important;
  color: var(--dm-copy) !important;
  font-size: var(--dm-type-label);
  font-weight: 650;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  border-color: var(--dm-primary) !important;
  color: var(--dm-primary-dark) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active.bg-durple,
.nav-pills .nav-link.active.bg-durple {
  border-color: var(--dm-primary) !important;
  background: var(--dm-primary-wash) !important;
  color: var(--dm-primary-dark) !important;
  box-shadow: 0 0 0 3px rgba(91, 87, 217, .08);
}

.text-durple,
.text-blurple,
.text-lurple {
  color: var(--dm-primary-dark) !important;
}

.table {
  color: var(--dm-copy);
}

.table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--dm-line) !important;
  background: #fafafe;
  color: var(--dm-muted);
  font-size: var(--dm-type-caption);
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.table td {
  border-color: var(--dm-line) !important;
  vertical-align: middle;
  font-size: var(--dm-type-label);
}

.table th,
.table td {
  padding: .82rem 1rem !important;
}

.table tbody tr:hover {
  background: var(--dm-primary-wash);
}

/* Smooth bordered data surfaces shared by standard and DataTables tables. */
.table-responsive,
.dataTables_wrapper .table-responsive {
  border: 1px solid var(--dm-line);
  border-radius: 15px;
  background: var(--dm-white);
  box-shadow: 0 3px 12px rgba(34, 39, 86, .04);
}

.table-responsive > .table,
.table-responsive > table {
  margin-bottom: 0 !important;
  border-radius: 15px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

/* Keep DataTables controls and copy away from the table frame. */
.table-responsive .dataTables_wrapper {
  padding: 16px 18px 14px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 14px;
  color: var(--dm-copy);
  font-size: var(--dm-type-label);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  min-height: 38px;
  margin: 0 7px;
  padding: 6px 10px;
  border: 1px solid var(--dm-line);
  border-radius: 9px;
  background: #fbfbfe;
  color: var(--dm-ink);
  outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--dm-primary);
  box-shadow: 0 0 0 3px rgba(91, 87, 217, .09);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding-top: 14px !important;
  color: var(--dm-copy) !important;
  font-size: var(--dm-type-label);
}

.table-responsive .table thead th:first-child { border-top-left-radius: 14px; }
.table-responsive .table thead th:last-child { border-top-right-radius: 14px; }
.table-responsive .table tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
.table-responsive .table tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; }

/* Dashboard-style task metrics. */
.task-summary-grid {
  margin-top: 4px;
}

.task-summary-card {
  min-height: 136px;
}

.task-summary-card .card-body {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px !important;
}

.task-summary-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--dm-primary-wash);
  color: var(--dm-primary);
  font-size: 1.25rem;
}

.task-summary-copy {
  min-width: 0;
  display: grid;
}

.task-summary-copy > span,
.task-summary-copy small {
  color: var(--dm-muted);
  font-size: var(--dm-type-caption);
  font-weight: 600;
}

.task-summary-copy strong {
  margin: 2px 0;
  color: var(--dm-ink);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.task-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 10px 0 24px;
  padding: 15px 17px;
  border: 1px solid var(--dm-line);
  border-radius: 16px;
  background: var(--dm-white);
  box-shadow: 0 4px 18px rgba(34, 39, 86, .05);
}

.task-command-heading {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.task-command-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--dm-primary-wash);
  color: var(--dm-primary);
  font-size: 1rem;
}

.task-command-heading strong,
.task-command-heading span {
  display: block;
}

.task-command-heading strong {
  color: var(--dm-ink);
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.25;
}

.task-command-heading div > span {
  margin-top: 2px;
  color: var(--dm-muted);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
}

.task-action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.task-action-bar .btn {
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 10px !important;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.task-action-bar .btn i {
  width: 14px;
  margin-right: 5px;
  text-align: center;
}

.dropdown-menu,
.dropdown-list {
  overflow: hidden;
  border: 1px solid var(--dm-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 38px rgba(34, 39, 86, .14) !important;
}

.dropdown-header {
  border-color: var(--dm-primary) !important;
  background: var(--dm-primary) !important;
}

/* Shared modal surface: legacy Bootstrap color utilities must not repaint headers. */
.modal-content {
  overflow: hidden;
  border: 1px solid var(--dm-line) !important;
  border-radius: 18px !important;
  background: var(--dm-white) !important;
  box-shadow: 0 22px 60px rgba(28, 33, 77, .18) !important;
}

.modal-header,
.modal-header.bg-primary,
.modal-header.bg-secondary,
.modal-header.bg-info,
.modal-header.bg-warning,
.modal-header.bg-danger,
.modal-header.bg-success,
.modal-header.bg-durple,
.modal-header.bg-blurple,
.modal-header.bg-lurple,
.modal-header[style*="background"] {
  border-bottom: 1px solid var(--dm-line) !important;
  background: var(--dm-white) !important;
  color: var(--dm-ink) !important;
}

.modal-header .modal-title {
  color: var(--dm-ink) !important;
  font-size: 1.05rem;
  font-weight: 750;
}

.modal-header .modal-title > i:not(.text-danger):not(.text-warning):not(.text-success) {
  color: var(--dm-primary) !important;
}

.modal-header .close {
  color: var(--dm-muted) !important;
  text-shadow: none !important;
  opacity: .8;
}

.modal-header .close:hover {
  color: var(--dm-primary-dark) !important;
  opacity: 1;
}

.modal-body {
  padding: 22px !important;
}

.modal-footer {
  padding: 14px 20px !important;
  border-top: 1px solid var(--dm-line) !important;
  background: #fbfbfe !important;
}

/* Shared notifications: keep status meaning without the legacy solid blocks. */
#toast-container {
  top: 20px;
  right: 20px;
}

#toast-container > div {
  position: relative;
  width: min(360px, calc(100vw - 32px));
  min-height: 68px;
  margin: 0 0 10px;
  padding: 15px 42px 15px 52px !important;
  overflow: hidden;
  border: 1px solid var(--dm-line) !important;
  border-left-width: 4px !important;
  border-radius: 14px !important;
  background-color: rgba(255, 255, 255, .98) !important;
  background-image: none !important;
  color: var(--dm-copy) !important;
  box-shadow: 0 16px 38px rgba(34, 39, 86, .14) !important;
  opacity: 1 !important;
  backdrop-filter: blur(12px);
}

#toast-container > div::before {
  position: absolute;
  top: 16px;
  left: 15px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1;
}

#toast-container > .toast-success {
  border-left-color: #25a56a !important;
}

#toast-container > .toast-success::before {
  content: "\2713";
  background: #e9f8f0;
  color: #158552;
}

#toast-container > .toast-info {
  border-left-color: var(--dm-primary) !important;
}

#toast-container > .toast-info::before {
  content: "i";
  background: var(--dm-primary-soft);
  color: var(--dm-primary-dark);
  font-family: Georgia, serif;
}

#toast-container > .toast-warning {
  border-left-color: #d69e2e !important;
}

#toast-container > .toast-warning::before {
  content: "!";
  background: #fff7dc;
  color: #9a6c0d;
}

#toast-container > .toast-error {
  border-left-color: #e54855 !important;
}

#toast-container > .toast-error::before {
  content: "\00d7";
  background: #fff0f2;
  color: #c92d3b;
  font-size: 1rem;
}

#toast-container .toast-title {
  margin-bottom: 3px;
  color: var(--dm-ink) !important;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.35;
}

#toast-container .toast-message {
  color: var(--dm-copy) !important;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
}

#toast-container .toast-message a {
  color: var(--dm-primary-dark) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#toast-container .toast-close-button {
  top: 10px;
  right: 11px;
  color: var(--dm-muted) !important;
  font-size: 1.1rem;
  text-shadow: none !important;
  opacity: .72;
}

#toast-container .toast-close-button:hover {
  color: var(--dm-primary-dark) !important;
  opacity: 1;
}

#toast-container .toast-progress {
  height: 3px;
  background: var(--dm-primary) !important;
  opacity: .42;
}

@media (max-width: 575.98px) {
  #toast-container {
    top: 12px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  #toast-container > div {
    width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .task-command-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-action-bar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-action-bar .btn {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  #accordionSidebar.sidebar {
    width: 92px !important;
    padding: 16px 10px;
  }

  #accordionSidebar .sidebar-brand {
    justify-content: center !important;
    padding-left: 0;
    padding-right: 0;
  }

  #accordionSidebar .sidebar-brand-text,
  #accordionSidebar .nav-item .nav-link > span:not(.badge):not([style*="position:relative"]) {
    display: none !important;
  }

  #accordionSidebar .nav-item .nav-link {
    justify-content: center;
    padding: 8px !important;
  }
}

@media (max-width: 767.98px) {
  /* Task action bar: 2 columns on mobile */
  .task-action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ─── Sidebar: fixed off-screen drawer ─── */
  #accordionSidebar.sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 258px !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 22px 14px !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                box-shadow .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: none !important;
  }

  /* Drawer open */
  body.sidebar-toggled #accordionSidebar.sidebar {
    transform: translateX(0) !important;
    box-shadow: 4px 0 32px rgba(17, 24, 63, .18) !important;
  }

  /* Show text labels inside the open drawer */
  body.sidebar-toggled #accordionSidebar .sidebar-brand-text,
  body.sidebar-toggled #accordionSidebar .nav-item .nav-link > span:not(.badge):not([style*="position:relative"]) {
    display: inline-flex !important;
  }

  body.sidebar-toggled #accordionSidebar .sidebar-brand {
    justify-content: flex-start !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.sidebar-toggled #accordionSidebar .nav-item .nav-link {
    justify-content: flex-start !important;
    padding: 9px 12px !important;
  }

  /* Backdrop */
  body.sidebar-toggled::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: rgba(17, 24, 63, .42);
  }

  /* Content: full width since sidebar is out of flow */
  #content-wrapper {
    width: 100% !important;
    min-width: 0;
  }

  /* Topbar */
  #content > .topbar,
  #topbar.topbar {
    min-height: 76px;
    padding: 12px 16px;
  }

  /* Container padding */
  #content > .container-fluid,
  #content > .container-fluid.bg-white {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Tables: horizontal scroll */
  .dataTables_wrapper,
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.dataTable {
    min-width: 560px;
  }

  /* Cards: tighter padding */
  .card-body {
    padding: 16px !important;
  }

  /* Modals: near full screen */
  .modal-dialog {
    margin: 8px auto;
    max-width: calc(100vw - 16px);
  }

  .modal-lg,
  .modal-xl {
    max-width: calc(100vw - 16px);
  }

  /* Page heading: stack title + button on mobile */
  .d-sm-flex.align-items-center.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Topbar icon spacing: tighter on mobile */
  .topbar .navbar-nav .nav-item {
    margin: 0 2px !important;
  }
}

@media (max-width: 575.98px) {
  /* Sidebar slightly narrower on very small phones */
  #accordionSidebar.sidebar {
    width: 240px !important;
  }

  /* Task action bar: single column on very small phones */
  .task-action-bar {
    grid-template-columns: 1fr;
  }

  /* Modals: truly full screen */
  .modal-dialog {
    margin: 4px auto;
    max-width: calc(100vw - 8px);
  }
}