/* Tabler remains the component system. These tokens and shared refinements
   give the admin and authentication surfaces one consistent visual language. */
:root,
[data-bs-theme="light"] {
  --tblr-font-sans-serif: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tblr-body-bg: #f4f6fa;
  --tblr-body-color: #202b3d;
  --tblr-secondary-color: #59677b;
  --tblr-secondary: #59677b;
  --tblr-border-color: #dce2eb;
  --tblr-border-color-translucent: #dce2eb;
  --tblr-bg-surface: #fff;
  --tblr-bg-surface-secondary: #f0f3f8;
  --tblr-bg-surface-tertiary: #e8edf5;
  --tblr-border-radius: 0.5rem;
  --tblr-border-radius-lg: 0.75rem;
  --app-sidebar-bg: #fafbfd;
  --app-accent: #285bb8;
  --app-accent-soft: #e9effb;
  --app-hover: #f0f3f8;
  --app-focus: #4077db;
  --app-success: #246b45;
  --app-success-soft: #e9f5ee;
  --app-warning: #805a13;
  --app-warning-soft: #fcf2d9;
  --app-danger: #ad3343;
  --app-danger-soft: #fcebed;
  --app-orange: #934918;
  --app-orange-soft: #fff0e3;
  --app-teal: #186761;
  --app-teal-soft: #e3f3f1;
  --app-purple: #70509e;
  --app-purple-soft: #f2eafa;
}

[data-bs-theme="dark"] {
  --tblr-body-bg: #141b27;
  --tblr-body-color: #e3e9f3;
  --tblr-secondary-color: #a3afc2;
  --tblr-secondary: #a3afc2;
  --tblr-border-color: #303c50;
  --tblr-border-color-translucent: #303c50;
  --tblr-bg-surface: #1c2534;
  --tblr-bg-surface-secondary: #222e40;
  --tblr-bg-surface-tertiary: #2b384e;
  --app-sidebar-bg: #182130;
  --app-accent: #9ebfff;
  --app-accent-soft: #283c5e;
  --app-hover: #253247;
  --app-focus: #9ebfff;
  --app-success: #a1d5b7;
  --app-success-soft: #223b33;
  --app-warning: #ebce88;
  --app-warning-soft: #3e3525;
  --app-danger: #f1a8b2;
  --app-danger-soft: #422c36;
  --app-orange: #f1be96;
  --app-orange-soft: #403229;
  --app-teal: #97d7d0;
  --app-teal-soft: #223c40;
  --app-purple: #ccb6ee;
  --app-purple-soft: #362e49;
}

.app-ui {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

.app-ui ::selection {
  color: var(--tblr-body-color);
  background: var(--app-accent-soft);
}

.app-ui a { text-underline-offset: 0.2em; }
.app-ui input, .app-ui textarea { caret-color: var(--app-accent); }
.app-ui :focus-visible { outline: 2px solid var(--app-focus); outline-offset: 3px; }
.app-ui main:focus { outline: none; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1080;
  padding: 0.75rem 1rem;
  color: var(--tblr-body-color);
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  color: var(--app-accent);
  background: var(--app-accent-soft);
}
.brand-mark .icon { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; }

.app-sidebar {
  background: var(--app-sidebar-bg);
  box-shadow: none;
  border-right: 1px solid var(--tblr-border-color);
}
.app-sidebar .navbar-brand { padding: 1.5rem 1.25rem 0.75rem; }
.app-sidebar .navbar-nav { padding: 0 0.75rem 1rem; gap: 0.125rem; }
.app-sidebar .nav-section-title {
  padding: 1.25rem 0.75rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary-color);
}
.app-sidebar .nav-link {
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-secondary-color);
  transition: background-color 160ms ease, color 160ms ease;
}
.app-sidebar .nav-link:hover { color: var(--tblr-body-color); background: var(--app-hover); }
.app-sidebar .nav-item.active .nav-link {
  color: var(--app-accent);
  background: var(--app-accent-soft);
  font-weight: 600;
}
.app-sidebar .nav-item.active::after { display: none; }
.app-sidebar .nav-link-icon { color: inherit; opacity: 1; margin-right: 0.75rem; }
.sidebar-footer {
  margin-top: auto;
  padding: 1.25rem 1.5rem;
  color: var(--tblr-secondary-color);
  border-top: 1px solid var(--tblr-border-color);
  font-size: 0.75rem;
  line-height: 1.6;
}

.app-topbar {
  min-height: 4.5rem;
  background: var(--tblr-bg-surface);
  box-shadow: none;
  border-bottom: 1px solid var(--tblr-border-color);
}
.account-trigger { min-height: 2.75rem; min-width: 2.75rem; border: 0; padding: 0.25rem; box-shadow: none; border-radius: 0.5rem; }
.account-trigger:hover { background: var(--app-hover); }
.account-trigger .account-avatar { margin: 0; width: 2.25rem; height: 2.25rem; font-size: 0.875rem; color: var(--app-accent); background: var(--app-accent-soft); box-shadow: none; font-weight: 600; }
.theme-switcher {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.25rem;
  background: var(--tblr-bg-surface-secondary);
  border-radius: 0.625rem;
}
.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.625rem;
  color: var(--tblr-secondary-color);
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  box-shadow: none;
}
.theme-option .icon { margin: 0; font-size: 1.125rem; width: 1.125rem; height: 1.125rem; }
.theme-option:hover { color: var(--tblr-body-color); background: var(--app-hover); }
.theme-option[aria-pressed="true"] { background: var(--tblr-bg-surface); color: var(--app-accent); font-weight: 600; }

.admin-layout .page-header { margin-top: 2rem; }
.admin-layout .page-title { font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.025em; font-weight: 700; }
.admin-layout .page-body { margin-top: 1.5rem; }
.admin-layout .footer { padding: 1.25rem 0; margin-top: 1.5rem; }
.app-ui .card { background-color: var(--tblr-bg-surface); border-radius: 0.75rem; border-color: var(--tblr-border-color); box-shadow: none; }
.app-ui .card-header { min-height: 3.5rem; padding: 1rem 1.25rem; }
.app-ui .card-title { font-size: 0.9375rem; font-weight: 600; }
.app-ui .card-body { padding: 1.25rem; }
.app-ui .card-footer { background: var(--tblr-bg-surface); gap: 1rem; flex-wrap: wrap; }
.app-ui .dropdown-menu { border-radius: 0.625rem; border-color: var(--tblr-border-color); }
.app-ui .dropdown-header { max-width: 20rem; overflow-wrap: anywhere; white-space: normal; }
.app-ui .btn { font-weight: 500; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.app-ui .form-label { font-size: 0.8125rem; font-weight: 500; }
.app-ui .form-control, .app-ui .form-select { min-height: 2.5rem; background-color: var(--tblr-bg-surface); border-color: var(--tblr-border-color); }
.app-ui .form-control::placeholder { color: var(--tblr-secondary-color); opacity: 1; }
.app-ui .form-control:focus, .app-ui .form-select:focus { border-color: var(--app-focus); }
.app-ui .table { --tblr-table-border-color: var(--tblr-border-color); font-variant-numeric: tabular-nums; }
.app-ui .table thead th {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--tblr-secondary-color);
  background: var(--tblr-bg-surface-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.app-ui .table:not(.table-diff) tbody tr:hover > td { background-color: var(--app-hover); }
.app-ui .table td { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.app-ui .table-sm td { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.app-ui .btn-link { --tblr-btn-color: var(--app-accent); --tblr-btn-hover-color: var(--app-accent); }
.app-ui .btn-outline-primary {
  --tblr-btn-color: var(--app-accent);
  --tblr-btn-border-color: var(--app-accent);
}
.app-ui a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.text-reset) { color: var(--app-accent); }
.app-ui .text-green { color: var(--app-success) !important; }
.app-ui .badge.bg-green-lt { color: var(--app-success) !important; background: var(--app-success-soft) !important; }
.app-ui .badge.bg-yellow-lt { color: var(--app-warning) !important; background: var(--app-warning-soft) !important; }
.app-ui .badge.bg-red-lt { color: var(--app-danger) !important; background: var(--app-danger-soft) !important; }
.app-ui .badge.bg-orange-lt { color: var(--app-orange) !important; background: var(--app-orange-soft) !important; }
.app-ui .badge.bg-teal-lt { color: var(--app-teal) !important; background: var(--app-teal-soft) !important; }
.app-ui .badge.bg-purple-lt { color: var(--app-purple) !important; background: var(--app-purple-soft) !important; }
.app-ui .badge.bg-secondary-lt { color: var(--tblr-secondary-color) !important; background: var(--tblr-bg-surface-secondary) !important; }
.app-ui .badge.bg-blue-lt, .app-ui .badge.bg-azure-lt { color: var(--app-accent) !important; background: var(--app-accent-soft) !important; }
.app-ui .badge { font-weight: 500; letter-spacing: 0; padding: 0.375rem 0.5rem; }
.app-ui .empty { padding: 2.5rem 1rem; }
.app-ui .empty-icon { color: var(--tblr-secondary-color); margin-bottom: 0.75rem; }
.app-ui .empty-title { font-size: 0.875rem; font-weight: 500; }
.app-ui .empty-subtitle { max-width: 40ch; margin-inline: auto; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dashboard-metric { padding: 1.25rem 1.5rem; min-width: 0; }
.dashboard-metric + .dashboard-metric { border-left: 1px solid var(--tblr-border-color); }
.metric-label { display: flex; align-items: center; gap: 0.5rem; color: var(--tblr-secondary-color); font-size: 0.8125rem; font-weight: 500; }
.metric-label .icon { flex-shrink: 0; }
.metric-value { margin: 0.75rem 0 0; font-size: 2rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.metric-value a { text-decoration: none; }
.metric-value a:hover { text-decoration: underline; }
.amount-label { color: var(--tblr-secondary-color); font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.75rem; }
.amount-value { font-size: 1.625rem; line-height: 1.3; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.02em; }

.auth-layout { min-height: 100dvh; }
.auth-toolbar { display: flex; justify-content: flex-end; padding: 1.25rem 1.5rem 0; }
.auth-layout .page-center { padding: 1rem 0 3rem; }
.auth-container { max-width: 28rem; }
.auth-brand { padding: 0 0.5rem; }
.auth-brand .text-secondary { margin-left: 3.25rem; font-size: 0.8125rem; }
.auth-layout .card-body { padding: 2rem; }
.auth-title { font-size: 1.375rem; line-height: 1.35; letter-spacing: -0.025em; font-weight: 600; }
.auth-layout .form-footer { margin-top: 1.5rem; }
.auth-layout .form-footer .btn { min-height: 2.75rem; }
.auth-layout .form-label-description { font-size: 0.75rem; }

.json-block { max-height: 28rem; overflow: auto; padding: 0.75rem; font-size: 0.75rem; color: var(--tblr-body-color); background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); white-space: pre-wrap; word-break: break-word; }
.bill-viewer { position: relative; overflow: auto; max-height: calc(100dvh - 14rem); min-height: 24rem; background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius); text-align: center; }
.bill-viewer img { max-width: 100%; transform-origin: top center; transition: transform 150ms ease-out; }
.bill-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--tblr-border-radius); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-diff td { vertical-align: top; word-break: break-word; }
.table-diff tr.changed td { background: var(--tblr-yellow-lt); }

@media (min-width: 992px) {
  .app-sidebar .navbar-collapse { flex: 1; align-items: stretch; }
  .app-sidebar .container-fluid { min-height: 100dvh; }
  .review-sticky { position: sticky; top: 1rem; }
}
@media (max-width: 1199.98px) {
  .dashboard-metric { padding: 1.25rem 1rem; }
  .metric-label { flex-wrap: wrap; }
}
@media (max-width: 991.98px) {
  .app-sidebar { border-right: 0; border-bottom: 1px solid var(--tblr-border-color); }
  .app-sidebar .navbar-brand { padding: 0.75rem; }
  .app-sidebar .navbar-toggler { min-height: 2.75rem; min-width: 2.75rem; }
  .app-sidebar .nav-link-icon { display: inline-flex !important; }
  .admin-layout .page-header { margin-top: 1.5rem; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-metric { border-bottom: 1px solid var(--tblr-border-color); }
  .dashboard-metric:nth-child(4) { border-left: 0; }
  .dashboard-metric:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 575.98px) {
  .app-topbar { min-height: 4rem; }
  .theme-option { min-height: 2.5rem; min-width: 2.5rem; justify-content: center; }
  .theme-option-label { display: none; }
  .admin-layout .page-title { font-size: 1.5rem; }
  .admin-layout .page-header .col-auto { width: 100%; margin-top: 0.75rem; }
  .admin-layout .page-body { margin-top: 1rem; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric:nth-child(3), .dashboard-metric:nth-child(5) { border-left: 0; }
  .dashboard-metric:nth-child(4) { border-left: 1px solid var(--tblr-border-color); border-bottom: 1px solid var(--tblr-border-color); }
  .dashboard-metric:last-child { grid-column: 1 / -1; }
  .metric-value { font-size: 1.75rem; }
  .amount-value { font-size: 1.375rem; white-space: normal; overflow-wrap: anywhere; }
  .auth-toolbar { padding: 1rem; }
  .auth-layout .card-body { padding: 1.5rem; }
  .auth-layout .page-center { padding-top: 0; }
  .app-ui .pagination { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .app-ui *, .app-ui *::before, .app-ui *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}