:root {
  --sc-navy: #073c6d;
  --sc-navy-dark: #052b50;
  --sc-blue: #1268b3;
  --sc-cyan: #16a6d9;
  --sc-purple: #7667f2;
  --sc-amber: #f5a524;
  --sc-rose: #ef5b72;
  --sc-sky: #e8f4ff;
  --sc-ink: #26384d;
  --sc-muted: #6c7f95;
  --sc-line: #d8e2ec;
  --sc-page: #f5f7fb;
  --sc-card: #ffffff;
  --sc-green: #27b36a;
}

html,
body {
  background: var(--sc-page);
  color: var(--sc-ink);
  letter-spacing: 0;
}

body {
  font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper {
  background:
    linear-gradient(135deg, rgba(22, 166, 217, 0.10) 0%, rgba(118, 103, 242, 0.08) 38%, rgba(245, 165, 36, 0.08) 100%),
    var(--sc-page);
}

.layout-menu.menu-vertical {
  width: 17.25rem;
  background:
    linear-gradient(180deg, #fafdff 0%, #f3f8ff 48%, #edf5fc 100%) !important;
  border-right: 1px solid rgba(216, 226, 236, 0.86);
  box-shadow: 16px 0 36px rgba(31, 55, 78, 0.08);
}

.layout-menu .app-brand.demo {
  height: 76px;
  margin: 0;
  padding: 0 16px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.22), transparent 0 44px),
    linear-gradient(135deg, #07406f, #0e72b3);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 12px 26px rgba(7, 60, 109, 0.16);
}

.app-brand-logo.demo img {
  max-width: 228px;
  max-height: 43px;
  object-fit: contain;
}

.menu-inner {
  padding: 24px 14px !important;
}

.menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a91aa !important;
  margin: 24px 0 14px;
  padding: 0 !important;
  font-weight: 700;
}

.menu .menu-header::before {
  display: none;
}

.menu .menu-header::after {
  display: none;
}

.menu .menu-header-text {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(232, 244, 255, 0.95);
  color: var(--sc-blue);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 1px rgba(18, 104, 179, 0.06);
}

.menu .menu-link {
  position: relative;
  min-height: 48px;
  margin: 7px 0;
  padding: 0 12px !important;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #587089 !important;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.menu .menu-link.disabled {
  filter: blur(1px);
  opacity: 0.65;
  pointer-events: none;
  cursor: not-allowed;
}

.temporarily-disabled {
  filter: blur(1px);
  opacity: 0.65 !important;
  cursor: not-allowed;
}

.blurred-option {
  color: #dbe5ef;
  text-shadow: 0 0 5px currentColor;
}

.menu .menu-link:hover {
  border-color: rgba(18, 104, 179, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: var(--sc-navy) !important;
  box-shadow: 0 10px 22px rgba(31, 55, 78, 0.07);
}

.menu-inner > .menu-item.active > .menu-link,
.menu-inner > .menu-item.open > .menu-link {
  border-color: rgba(18, 104, 179, 0.18);
  background:
    linear-gradient(135deg, rgba(18, 104, 179, 0.12) 0%, rgba(22, 166, 217, 0.10) 52%, rgba(118, 103, 242, 0.12) 100%) !important;
  color: var(--sc-blue) !important;
  box-shadow: 0 12px 26px rgba(31, 55, 78, 0.10);
}

.menu-inner > .menu-item.active > .menu-link::before,
.menu-inner > .menu-item.open > .menu-link::before {
  position: absolute;
  inset: 10px auto 10px -2px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sc-cyan), var(--sc-purple));
  content: "";
}

.menu .menu-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-right: 10px !important;
  border-radius: 8px;
  background: rgba(18, 104, 179, 0.08);
  color: currentColor;
  font-size: 1.12rem;
}

.menu-inner > .menu-item.active > .menu-link .menu-icon,
.menu-inner > .menu-item.open > .menu-link .menu-icon {
  background: linear-gradient(135deg, var(--sc-blue), var(--sc-cyan));
  color: #fff;
  box-shadow: 0 8px 18px rgba(18, 104, 179, 0.18);
}

.menu-sub .menu-link {
  min-height: 34px;
  margin: 3px 8px 3px 44px;
  padding: 0 10px !important;
  border-radius: 7px;
  color: #6d8095 !important;
  font-size: 0.9rem;
  line-height: 1.25;
}

.menu-sub .menu-link:hover {
  background: rgba(232, 244, 255, 0.58);
  box-shadow: none;
}

.menu-sub .menu-item.active > .menu-link {
  border-color: rgba(22, 166, 217, 0.28);
  background: rgba(22, 166, 217, 0.10) !important;
  color: var(--sc-blue) !important;
  box-shadow: inset 3px 0 0 var(--sc-cyan);
}

.menu-sub .menu-item.active > .menu-link::before {
  display: none !important;
  content: none !important;
}

.bg-menu-theme .menu-sub > .menu-item > .menu-link::before,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before,
.layout-horizontal .bg-menu-theme .menu-sub > .menu-item > .menu-link::before,
.layout-horizontal .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  display: none !important;
  content: none !important;
}

.layout-navbar {
  min-height: 58px;
  margin: 18px 28px 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

.navbar-nav-right {
  min-height: 58px;
}

.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px;
  border: 1px solid rgba(216, 226, 236, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 34px rgba(31, 55, 78, 0.12);
  backdrop-filter: blur(10px);
}

.navbar-user-trigger {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid rgba(18, 104, 179, 0.14);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 55, 78, 0.10);
}

.navbar-user-trigger .avatar {
  width: 29px;
  height: 29px;
}

.navbar-user-trigger img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.navbar-eyebrow,
.section-kicker {
  display: block;
  color: var(--sc-blue);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layout-navbar h4 {
  color: var(--sc-ink);
  font-size: 1.22rem;
  line-height: 1.15;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}

.theme-toggle-track {
  position: relative;
  display: inline-flex;
  width: 58px;
  height: 30px;
  align-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #dff2ff, #f1ecff);
  box-shadow: inset 0 0 0 1px rgba(18, 104, 179, 0.14);
  transition: background 0.25s ease;
}

.theme-toggle-thumb {
  position: absolute;
  left: 4px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--sc-amber);
  box-shadow: 0 6px 14px rgba(31, 55, 78, 0.18);
  transition: transform 0.25s ease, color 0.25s ease;
}

.theme-icon {
  position: absolute;
  font-size: 1rem;
  transition: opacity 0.2s ease;
}

.theme-icon-dark {
  opacity: 0;
}

.dark-mode .theme-toggle-track {
  background: linear-gradient(135deg, #1e2b46, #27345f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.dark-mode .theme-toggle-thumb {
  color: #c9d7ff;
  transform: translateX(28px);
}

.dark-mode .theme-icon-light {
  opacity: 0;
}

.dark-mode .theme-icon-dark {
  opacity: 1;
}

.avatar-online::after {
  border-color: #fff;
  background-color: var(--sc-green);
}

.content-wrapper .container-xxl {
  max-width: 1420px;
  padding: 30px 32px 46px !important;
}

.container-p-y:not([class^="pt-"]):not([class*=" pt-"]) {
  padding-top: 2rem !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sc-ink);
}

.container-xxl > h4.fw-bold {
  margin-bottom: 22px !important;
  padding: 0 !important;
  color: var(--sc-ink);
  font-size: 1.35rem;
  line-height: 1.3;
}

.page-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.page-title-row h4 {
  margin: 4px 0 0;
  color: var(--sc-ink);
  font-size: 1.45rem;
  line-height: 1.25;
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  background: var(--sc-card);
  box-shadow: 0 10px 24px rgba(31, 55, 78, 0.06);
}

.quick-card::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -85%;
  z-index: 1;
  width: 34%;
  height: 190%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0.06) 62%, transparent 100%);
  pointer-events: none;
  transform: rotate(18deg);
  transition: left 0.8s ease;
}

.quick-card:hover::after {
  left: 125%;
}

.quick-card > *,
.quick-card > * {
  position: relative;
  z-index: 2;
}

.report-filter-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}

.report-filter-card::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(120deg, var(--sc-blue), var(--sc-cyan), var(--sc-purple), var(--sc-amber), var(--sc-rose));
  background-size: 300% 300%;
  animation: gradientFlow 8s ease-in-out infinite;
}

.card-header,
.card-footer {
  background: transparent;
  border-color: var(--sc-line);
}

.card-header {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 20px;
}

.card-header a {
  display: flex;
  justify-content: flex-end;
  text-decoration: none;
}

.filter-container {
  display: block;
  width: 100%;
  margin: 0;
  padding: 26px 30px 28px !important;
}

.filter-container form {
  width: 100%;
}

.filter-container .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  gap: 18px 20px;
  margin: 0 !important;
}

.filter-container .usage-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.filter-container .col,
.filter-container [class^="col-"],
.filter-container [class*=" col-"] {
  width: auto;
  max-width: none;
  padding: 0 !important;
}

.form-label,
label {
  color: #526a82;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-control,
.form-select,
.input-group-text {
  height: 44px;
  min-height: 44px;
  border-color: #cfdbe7;
  border-radius: 7px;
  color: #1f2f43;
  caret-color: #1268b3;
  box-shadow: none;
}

.form-control::placeholder,
.form-select::placeholder {
  color: #98a8ba;
  opacity: 1;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus {
  -webkit-text-fill-color: #1f2f43;
  caret-color: #1268b3;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out 0s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sc-blue);
  box-shadow: 0 0 0 4px rgba(18, 104, 179, 0.12);
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-weight: 700;
  box-shadow: none;
  line-height: 1.1;
}

.btn-primary,
button[type="submit"],
input[type="submit"] {
  border-color: transparent !important;
  background: linear-gradient(135deg, #0c84c6 0%, #0b4f8a 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(18, 104, 179, 0.22);
}

.filter-container .btn {
  width: 100%;
  min-width: 118px;
  margin-top: 0 !important;
  padding: 0 22px;
}

.filter-action-col {
  align-self: end;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.badge,
.bg-label-primary,
.btn[class*="bg-label"] {
  border-radius: 999px;
}

.bg-label-primary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 14px;
  background: #e8f4ff !important;
  color: var(--sc-blue) !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.chart-card {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  padding: 22px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(22, 166, 217, 0.65), rgba(118, 103, 242, 0.58), rgba(239, 91, 114, 0.52)) border-box;
  border: 1px solid transparent;
}

.chart-card canvas {
  max-height: 250px;
}

.report-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 22px;
}

.inline-report-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -4px;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(-8px);
  transition: grid-template-rows 0.32s ease, opacity 0.24s ease, transform 0.24s ease;
}

.inline-report-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.inline-report-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.inline-report-panel .table-responsive {
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(31, 55, 78, 0.10);
}

.inline-report-loading {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--sc-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--sc-muted);
  font-weight: 700;
}

.report-history-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(-8px);
  transition: grid-template-rows 0.32s ease, opacity 0.24s ease, transform 0.24s ease;
}

.report-history-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.report-history-panel > .table-responsive {
  min-height: 0;
  overflow: hidden;
}

.report-action {
  display: inline-flex !important;
  min-width: 134px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 18px;
  border: 0;
  color: #fff !important;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(31, 55, 78, 0.14);
}

.report-action .bx {
  flex: 0 0 auto;
  margin-right: 0 !important;
  font-size: 1rem;
  line-height: 1;
}

.report-action:hover {
  color: #fff !important;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.report-action-blue {
  background: linear-gradient(135deg, #2395d6, #1268b3);
}

.report-action-green {
  background: linear-gradient(135deg, #2ac58f, #168b63);
}

.report-action-amber {
  background: linear-gradient(135deg, #f6b84a, #d9821f);
}

.table {
  color: var(--sc-muted);
  margin-bottom: 0;
  vertical-align: middle;
}

.report-table-card {
  overflow: hidden;
}

.report-table-card-header {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sc-line);
  background: rgba(248, 250, 252, 0.72);
}

.table-export-button {
  display: inline-flex;
  min-width: 112px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2ac58f, #168b63);
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(22, 139, 99, 0.18);
}

.table-export-button:hover,
.table-export-button:focus {
  color: #fff !important;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.table thead th {
  height: 42px;
  padding: 12px 20px;
  background: #f8fafc;
  color: #516b84 !important;
  border-bottom: 1px solid var(--sc-line) !important;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody td {
  height: 44px;
  padding: 12px 20px;
  border-color: var(--sc-line);
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody td.text-center,
.table tbody td[colspan] {
  text-align: center !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(248, 251, 255, 0.92);
  color: var(--sc-muted);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: #fff;
  color: var(--sc-muted);
}

.table tbody tr {
  transition: background-color 0.18s ease;
}

.table tbody tr:hover {
  background: #f8fbff;
}

.table-responsive {
  border-radius: 8px;
}

.table-responsive nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--sc-line);
}

.table-responsive nav p,
.table-responsive nav .text-muted {
  margin: 0;
  color: var(--sc-muted) !important;
  font-size: 0.86rem;
  font-weight: 600;
}

.table-responsive .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

.table-responsive .page-item {
  margin: 0;
}

.table-responsive .page-link {
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--sc-line);
  border-radius: 6px;
  color: #526a82;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.table-responsive .page-item.active .page-link {
  border-color: transparent;
  background: linear-gradient(135deg, var(--sc-blue), var(--sc-purple));
  color: #fff;
}

.table-responsive .page-item.disabled .page-link {
  color: #9aaabd;
  background: #f7f9fc;
}

.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 190px;
  padding: 30px 34px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7, 60, 109, 0.96), rgba(18, 104, 179, 0.92), rgba(118, 103, 242, 0.86)),
    var(--sc-navy);
  color: #fff;
  box-shadow: 0 18px 38px rgba(7, 60, 109, 0.18);
}

.dashboard-hero h1 {
  max-width: 680px;
  margin: 8px 0 10px;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
}

.dashboard-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.dashboard-hero .section-kicker {
  color: #bfe0ff;
}

.dashboard-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-hero-actions .btn {
  min-width: 170px;
  padding: 0 18px;
}

.quick-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 138px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid rgba(216, 226, 236, 0.96);
  border-radius: 8px;
  background: #fff;
  color: var(--sc-ink);
  box-shadow: 0 10px 24px rgba(31, 55, 78, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.quick-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(120deg, var(--sc-blue), var(--sc-cyan), var(--sc-purple), var(--sc-blue));
  background-size: 300% 300%;
  animation: gradientFlow 7s ease-in-out infinite;
}

.col-md-6:nth-child(2n) .quick-card::before {
  background: linear-gradient(120deg, var(--sc-purple), var(--sc-rose), var(--sc-amber), var(--sc-purple));
  background-size: 300% 300%;
}

.col-md-6:nth-child(3n) .quick-card::before {
  background: linear-gradient(120deg, var(--sc-green), var(--sc-cyan), var(--sc-blue), var(--sc-green));
  background-size: 300% 300%;
}

.col-md-6:nth-child(4n) .quick-card::before {
  background: linear-gradient(120deg, var(--sc-amber), var(--sc-rose), var(--sc-purple), var(--sc-amber));
  background-size: 300% 300%;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.quick-card:hover {
  color: var(--sc-ink);
  border-color: rgba(18, 104, 179, 0.28);
  box-shadow: 0 16px 34px rgba(31, 55, 78, 0.10);
  transform: translateY(-2px);
}

.quick-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--sc-sky);
  color: var(--sc-blue);
  font-size: 1.35rem;
}

.quick-card strong {
  font-size: 1rem;
}

.quick-card small {
  color: var(--sc-muted);
}

.login-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #f7fbff 0%, #eef5fb 55%, #f7f2ff 100%);
}

.login-shell::before,
.login-shell::after {
  position: absolute;
  z-index: 0;
  content: "";
  width: clamp(220px, 28vw, 380px);
  height: clamp(220px, 28vw, 380px);
  border-radius: 47% 53% 46% 54% / 54% 43% 57% 46%;
  pointer-events: none;
  filter: blur(12px);
  mix-blend-mode: screen;
  will-change: transform, border-radius, opacity;
}

.login-shell::before {
  top: 7%;
  left: 8%;
  background:
    radial-gradient(ellipse at 30% 24%, rgba(255, 255, 255, 0.9) 0%, rgba(183, 240, 255, 0.65) 5%, transparent 23%),
    radial-gradient(ellipse at 37% 31%, rgba(65, 212, 255, 0.95) 0%, rgba(18, 157, 234, 0.9) 32%, rgba(14, 94, 190, 0.78) 62%, rgba(12, 55, 125, 0.38) 78%, transparent 79%);
  box-shadow: inset -22px -28px 48px rgba(5, 23, 74, 0.34), inset 12px 10px 28px rgba(255, 255, 255, 0.18), 0 0 80px rgba(27, 169, 255, 0.48);
  animation: loginGlowJellyBlue 18s ease-in-out infinite alternate;
}

.login-shell::after {
  right: 9%;
  bottom: 8%;
  background:
    radial-gradient(ellipse at 29% 23%, rgba(255, 255, 255, 0.82) 0%, rgba(234, 219, 255, 0.6) 5%, transparent 22%),
    radial-gradient(ellipse at 38% 34%, rgba(183, 130, 255, 0.94) 0%, rgba(115, 91, 237, 0.88) 34%, rgba(79, 55, 171, 0.76) 63%, rgba(52, 37, 110, 0.32) 78%, transparent 79%);
  box-shadow: inset -22px -28px 48px rgba(27, 16, 82, 0.38), inset 12px 10px 28px rgba(255, 255, 255, 0.17), 0 0 80px rgba(143, 104, 255, 0.46);
  animation: loginGlowJellyPurple 22s ease-in-out infinite alternate;
}

.login-theme-toggle {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 3;
}

.login-card {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(940px, 100%);
  min-height: 540px;
  grid-template-columns: 1.12fr 0.88fr;
  overflow: hidden;
  border: 1px solid rgba(216, 226, 236, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 34px 90px rgba(7, 60, 109, 0.22);
}

.login-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 42px;
  background:
    linear-gradient(135deg, rgba(7, 60, 109, 0.96), rgba(18, 104, 179, 0.92), rgba(118, 103, 242, 0.86)),
    var(--sc-navy);
  color: #fff;
}

.login-brand-mark {
  display: flex;
  flex: 1;
  width: min(100%, 360px);
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  opacity: 0.65;
}

.login-brand-mark img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  object-fit: contain;
}

.login-showcase-copy {
  align-self: stretch;
}

.login-showcase .section-kicker {
  color: #c7e7ff;
}

.login-showcase h1 {
  max-width: 430px;
  margin: 10px 0 12px;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.12;
}

.login-showcase p {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
}

.login-feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-feature-grid span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 700;
}

@keyframes loginGlowJellyBlue {
  0% {
    border-radius: 47% 53% 46% 54% / 54% 43% 57% 46%;
    transform: translate3d(-18px, -12px, 0) scale(0.98);
    opacity: 0.52;
  }

  20% {
    border-radius: 53% 47% 50% 50% / 47% 56% 44% 53%;
    transform: translate3d(5vw, 4vh, 0) scale(1.07, 0.94) rotate(1deg);
    opacity: 0.6;
  }

  35% {
    border-radius: 55% 45% 53% 47% / 45% 58% 42% 55%;
    transform: translate3d(12vw, 10vh, 0) scale(0.96, 1.06) rotate(-1deg);
    opacity: 0.64;
  }

  55% {
    border-radius: 46% 54% 56% 44% / 55% 44% 56% 45%;
    transform: translate3d(17vw, 17vh, 0) scale(1.06, 0.95) rotate(1deg);
    opacity: 0.62;
  }

  70% {
    border-radius: 50% 50% 44% 56% / 57% 46% 54% 43%;
    transform: translate3d(20vw, 20vh, 0) scale(0.95, 1.05) rotate(-1deg);
    opacity: 0.6;
  }

  85% {
    border-radius: 54% 46% 47% 53% / 45% 55% 45% 55%;
    transform: translate3d(14vw, 17vh, 0) scale(1.05, 0.96) rotate(1deg);
    opacity: 0.58;
  }

  100% {
    border-radius: 43% 57% 48% 52% / 58% 42% 55% 45%;
    transform: translate3d(8vw, 14vh, 0) scale(0.98, 1.03) rotate(-1deg);
    opacity: 0.56;
  }
}

@keyframes loginGlowJellyPurple {
  0% {
    border-radius: 52% 48% 44% 56% / 48% 56% 44% 52%;
    transform: translate3d(18px, 18px, 0) scale(1);
    opacity: 0.44;
  }

  20% {
    border-radius: 47% 53% 53% 47% / 55% 45% 55% 45%;
    transform: translate3d(-5vw, -4vh, 0) scale(1.06, 0.95) rotate(-1deg);
    opacity: 0.54;
  }

  35% {
    border-radius: 44% 56% 57% 43% / 56% 42% 58% 44%;
    transform: translate3d(-12vw, -10vh, 0) scale(0.96, 1.05) rotate(1deg);
    opacity: 0.58;
  }

  55% {
    border-radius: 55% 45% 45% 55% / 46% 54% 46% 54%;
    transform: translate3d(-17vw, -16vh, 0) scale(1.06, 0.95) rotate(-1deg);
    opacity: 0.56;
  }

  70% {
    border-radius: 51% 49% 57% 43% / 44% 56% 43% 57%;
    transform: translate3d(-20vw, -18vh, 0) scale(0.95, 1.06) rotate(1deg);
    opacity: 0.54;
  }

  85% {
    border-radius: 49% 51% 54% 46% / 54% 45% 55% 46%;
    transform: translate3d(-14vw, -16vh, 0) scale(1.05, 0.96) rotate(-1deg);
    opacity: 0.52;
  }

  100% {
    border-radius: 58% 42% 49% 51% / 42% 57% 43% 58%;
    transform: translate3d(-8vw, -12vh, 0) scale(0.98, 1.03) rotate(1deg);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-shell::before,
  .login-shell::after {
    animation: none;
  }
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 42px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96));
}

.login-panel-header {
  margin-bottom: 26px;
}

.login-panel-header h2 {
  margin: 4px 0 8px;
  font-size: 1.85rem;
  font-weight: 800;
}

.login-panel-header p {
  margin: 0;
  color: var(--sc-muted);
}

.login-form .mb-3 {
  margin-bottom: 18px !important;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field {
  position: relative;
}

.password-field .form-control {
  padding-right: 48px !important;
}

.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--sc-muted, #697a8d);
  cursor: pointer;
  transform: translateY(-50%);
}

.password-visibility-toggle:hover {
  color: var(--sc-blue, #087dbb);
}

.password-visibility-toggle:focus-visible {
  outline: 2px solid var(--sc-blue, #087dbb);
  outline-offset: -2px;
}

.password-visibility-toggle .bx {
  font-size: 1.1rem;
}

.password-field input::-ms-reveal,
.password-field input::-ms-clear {
  display: none;
}

.login-input-wrap > .bx:not(.bx-hide) {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 4;
  color: var(--sc-blue);
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-50%);
}

.login-input-wrap .form-control {
  height: 48px;
  padding-left: 46px;
  background: #fff;
}

.login-input-wrap.input-group {
  flex-wrap: nowrap;
}

.login-input-wrap.input-group .form-control {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
  padding-left: 46px;
}

.login-input-wrap .input-group-text {
  height: 48px;
  min-width: 44px;
  justify-content: center;
  padding: 0 12px;
  background: #fff;
}

.login-submit {
  height: 48px;
  gap: 8px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--sc-blue), var(--sc-purple)) !important;
}

.login-submit .bx {
  font-size: 1.25rem;
}

@media (max-width: 1199.98px) {
  .layout-navbar {
    margin: 12px 16px 0 !important;
    padding: 0 18px !important;
  }

  .content-wrapper .container-xxl {
    padding: 24px 18px 40px !important;
  }

  .filter-container .row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .filter-container .usage-filter-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 767.98px) {
  .layout-navbar {
    min-height: 60px;
    padding: 0 14px !important;
  }

  .navbar-nav-right {
    min-height: 58px;
  }

  .layout-navbar h4 {
    font-size: 1rem;
  }

  .navbar-eyebrow {
    display: none;
  }

  .navbar-actions {
    gap: 10px;
    margin-left: 12px;
  }

  .theme-toggle {
    width: 52px;
  }

  .theme-toggle-track {
    width: 52px;
    height: 30px;
  }

  .theme-toggle-thumb {
    width: 22px;
    height: 22px;
  }

  .dark-mode .theme-toggle-thumb {
    transform: translateX(22px);
  }

  .navbar-user-trigger {
    width: 40px;
    height: 40px;
  }

  .navbar-user-trigger .avatar,
  .navbar-user-trigger img {
    width: 31px;
    height: 31px;
  }

  .filter-container {
    padding: 22px !important;
  }

  .filter-container .row {
    grid-template-columns: 1fr;
  }

  .filter-container .usage-filter-grid {
    grid-template-columns: 1fr;
  }

  .filter-container .btn {
    width: 100%;
  }

  .report-action-bar {
    flex-direction: column;
  }

  .report-action {
    width: 100%;
  }

  .table thead th,
  .table tbody td {
    padding-right: 14px;
    padding-left: 14px;
  }

  .table-responsive nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px 14px;
  }

  .table-responsive .pagination {
    justify-content: flex-start;
  }

  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 26px;
  }

  .dashboard-hero h1 {
    font-size: 1.65rem;
  }

  .login-shell {
    padding: 18px;
  }

  .login-card {
    grid-template-columns: 1fr;
  }

  .login-showcase {
    padding: 26px;
  }

  .login-showcase h1 {
    font-size: 1.6rem;
  }

  .login-panel {
    padding: 30px 24px;
  }
}

body.dark-mode {
  --sc-ink: #e8eef8;
  --sc-muted: #a9b8cb;
  --sc-line: #2b3a55;
  --sc-page: #101827;
  --sc-card: #162237;
  background: #101827;
  color: var(--sc-ink);
}

body.dark-mode .layout-wrapper,
body.dark-mode .layout-container,
body.dark-mode .layout-page,
body.dark-mode .content-wrapper {
  background:
    linear-gradient(135deg, rgba(22, 166, 217, 0.10) 0%, rgba(118, 103, 242, 0.12) 42%, rgba(245, 165, 36, 0.08) 100%),
    #101827;
}

body.dark-mode .layout-menu.menu-vertical {
  background: linear-gradient(180deg, #121d30 0%, #0f1a2d 46%, #0d1627 100%) !important;
  border-right-color: #24334e;
  box-shadow: 12px 0 34px rgba(0, 0, 0, 0.22);
}

body.dark-mode .layout-menu .app-brand.demo {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.18), transparent 0 44px),
    linear-gradient(135deg, #073c6d, #0b6ba7);
}

body.dark-mode .menu .menu-header {
  color: #7e91ab !important;
}

body.dark-mode .menu .menu-header-text {
  background: rgba(22, 166, 217, 0.14);
  color: #8addff;
  box-shadow: inset 0 0 0 1px rgba(22, 166, 217, 0.10);
}

body.dark-mode .menu .menu-link {
  border-color: transparent;
  color: #a8b8cc !important;
}

body.dark-mode .menu .menu-link:hover {
  border-color: rgba(104, 211, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

body.dark-mode .menu-inner > .menu-item.active > .menu-link,
body.dark-mode .menu-inner > .menu-item.open > .menu-link {
  border-color: rgba(104, 211, 255, 0.12);
  background: linear-gradient(135deg, rgba(18, 104, 179, 0.34), rgba(118, 103, 242, 0.24)) !important;
  color: #d8ebff !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

body.dark-mode .menu .menu-icon {
  background: rgba(104, 211, 255, 0.10);
}

body.dark-mode .menu-inner > .menu-item.active > .menu-link .menu-icon,
body.dark-mode .menu-inner > .menu-item.open > .menu-link .menu-icon {
  background: linear-gradient(135deg, #1268b3, #16a6d9);
  color: #fff;
}

body.dark-mode .menu-sub .menu-link {
  color: #91a2b9 !important;
}

body.dark-mode .menu-sub .menu-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .menu-sub .menu-item.active > .menu-link {
  border-color: rgba(104, 211, 255, 0.22);
  background: rgba(22, 166, 217, 0.14) !important;
  color: #e1f4ff !important;
  box-shadow: inset 3px 0 0 var(--sc-cyan);
}

body.dark-mode .layout-navbar,
body.dark-mode .card,
body.dark-mode .quick-card,
body.dark-mode .login-card {
  border-color: #2b3a55;
  background: linear-gradient(180deg, #17243a 0%, #142035 100%) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

body.dark-mode .layout-navbar {
  border-color: transparent;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

body.dark-mode .navbar-actions {
  border-color: rgba(104, 211, 255, 0.16);
  background: rgba(23, 36, 58, 0.88);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

body.dark-mode .navbar-user-trigger {
  border-color: #31415e;
  background: #17243a;
}

body.dark-mode .layout-navbar h4,
body.dark-mode .page-title-row h4,
body.dark-mode .container-xxl > h4.fw-bold,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--sc-ink);
}

body.dark-mode .section-kicker,
body.dark-mode .navbar-eyebrow {
  color: #68d3ff;
}

body.dark-mode .form-label,
body.dark-mode label {
  color: #a7bad0;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
  border-color: #344762;
  background-color: #111c2f;
  color: #e8eef8;
  caret-color: #68d3ff;
}

body.dark-mode .form-control::placeholder {
  color: #7d8da3;
}

body.dark-mode .form-select::placeholder {
  color: #7d8da3;
}

body.dark-mode .form-control:-webkit-autofill,
body.dark-mode .form-control:-webkit-autofill:hover,
body.dark-mode .form-control:-webkit-autofill:focus,
body.dark-mode .form-select:-webkit-autofill,
body.dark-mode .form-select:-webkit-autofill:hover,
body.dark-mode .form-select:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #68d3ff;
  box-shadow: 0 0 0 1000px #111c2f inset;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: var(--sc-cyan);
  box-shadow: 0 0 0 4px rgba(22, 166, 217, 0.16);
}

body.dark-mode .table {
  color: #b7c5d8;
}

body.dark-mode .report-table-card-header {
  border-color: #2b3a55;
  background: rgba(17, 28, 47, 0.68);
}

body.dark-mode .table thead th {
  background: #111c2f;
  color: #c8d7ea !important;
  border-color: #2b3a55 !important;
}

body.dark-mode .table > :not(caption) > * > * {
  background-color: transparent;
  color: #b7c5d8;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.045);
  color: #b7c5d8;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: rgba(0, 0, 0, 0.06);
  color: #b7c5d8;
}

body.dark-mode .table tbody td {
  border-color: #2b3a55;
}

body.dark-mode .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

body.dark-mode .table-responsive nav {
  border-color: #2b3a55;
}

body.dark-mode .table-responsive nav p,
body.dark-mode .table-responsive nav .text-muted {
  color: #a9b8cb !important;
}

body.dark-mode .table-responsive .page-link {
  border-color: #2b3a55;
  background: #101a2c;
  color: #b7c5d8;
}

body.dark-mode .table-responsive .page-item.active .page-link {
  border-color: transparent;
  background: linear-gradient(135deg, #1268b3, #7667f2);
  color: #fff;
}

body.dark-mode .table-responsive .page-item.disabled .page-link {
  color: #71839a;
  background: #111c2f;
}

body.dark-mode .inline-report-panel .table-responsive {
  border-color: #2b3a55;
  background: #17243a;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

body.dark-mode .inline-report-loading {
  border-color: #2b3a55;
  background: rgba(23, 36, 58, 0.76);
}

body.dark-mode .bg-label-primary {
  background: rgba(22, 166, 217, 0.16) !important;
  color: #8addff !important;
}

body.dark-mode .chart-card {
  background:
    linear-gradient(#162237, #162237) padding-box,
    linear-gradient(135deg, rgba(22, 166, 217, 0.65), rgba(118, 103, 242, 0.58), rgba(239, 91, 114, 0.52)) border-box !important;
}

body.dark-mode .login-shell {
  background: linear-gradient(135deg, #0f1726 0%, #111c2f 55%, #17142b 100%);
}

body.dark-mode .login-shell::before {
  background:
    radial-gradient(ellipse at 30% 24%, rgba(255, 255, 255, 0.88) 0%, rgba(183, 240, 255, 0.6) 5%, transparent 23%),
    radial-gradient(ellipse at 37% 31%, rgba(65, 212, 255, 0.92) 0%, rgba(18, 157, 234, 0.86) 32%, rgba(14, 94, 190, 0.74) 62%, rgba(12, 55, 125, 0.38) 78%, transparent 79%);
}

body.dark-mode .login-shell::after {
  background:
    radial-gradient(ellipse at 29% 23%, rgba(255, 255, 255, 0.8) 0%, rgba(234, 219, 255, 0.56) 5%, transparent 22%),
    radial-gradient(ellipse at 38% 34%, rgba(183, 130, 255, 0.92) 0%, rgba(115, 91, 237, 0.84) 34%, rgba(79, 55, 171, 0.72) 63%, rgba(52, 37, 110, 0.32) 78%, transparent 79%);
}

body.dark-mode .login-panel {
  background: linear-gradient(180deg, rgba(22, 34, 55, 0.98), rgba(17, 28, 47, 0.98));
}

body.dark-mode .login-panel-header p,
body.dark-mode .quick-card small {
  color: var(--sc-muted);
}

body.dark-mode .login-input-wrap .form-control,
body.dark-mode .login-input-wrap .input-group-text {
  background: #101a2c;
}