/* Global Theme Variables and Overrides */

/* Brand palette */
:root {
  --brand-primary: #0b3d91; /* Navbar / header tone */
  --brand-primary-dark: #092e6d;
  --brand-primary-contrast: #ffffff;
  --brand-primary-rgb: 11 61 145;
  --brand-primary-hover: rgba(11, 61, 145, 0.12);

  --brand-success: #28a745;
  --brand-warning: #ffc107;
  --brand-danger: #dc3545;
  --brand-info: #17a2b8;

  --neutral-100: #f8f9fa;
  --neutral-200: #e9ecef;

  /* Default color used for icons in header nav links */
  --header-icon-color: rgba(255, 255, 255, 0.92);

  --app-text: #0b1120;
  --app-heading: #020617;
  --app-muted: #334155;
  --app-muted-strong: #475569;

  --app-bg-0: #ffffff;
  --app-bg-1: #ffffff;
  --app-bg-2: #ffffff;
  --app-bg-gradient-end: #ffffff;
  --app-bg-accent-1: rgba(15, 23, 42, 0.06);
  --app-bg-accent-2: rgba(30, 64, 175, 0.06);

  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --border-color: rgba(226, 232, 240, 0.9);
  --border-color-strong: #e2e8f0;
  --hover-bg: #f1f5f9;
  --active-bg: #e2e8f0;
  --app-nav-outer-bg: #f8fafc;

  --app-page-header-bg: rgba(248, 250, 252, 0.88);
  --app-page-header-border: rgba(226, 232, 240, 0.9);
  --app-user-btn-bg: rgba(255, 255, 255, 0.7);
  --app-user-btn-border: rgba(226, 232, 240, 0.9);
  --app-header-footer-bg:
    radial-gradient(560px 180px at 0% 0%, rgb(var(--app-accent-1-rgb) / 0.10) 0%, rgb(var(--app-accent-1-rgb) / 0) 62%),
    radial-gradient(420px 160px at 100% 0%, rgb(var(--app-accent-2-rgb) / 0.08) 0%, rgb(var(--app-accent-2-rgb) / 0) 60%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.94) 0%, rgba(238, 245, 255, 0.92) 100%);
  --app-header-footer-overlay:
    linear-gradient(180deg, rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0.12) 24%, rgb(255 255 255 / 0) 52%),
    repeating-linear-gradient(135deg, rgb(var(--app-accent-1-rgb) / 0.025) 0, rgb(var(--app-accent-1-rgb) / 0.025) 1px, transparent 1px, transparent 90px);
  --app-header-footer-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(148, 163, 184, 0.18);

  --nav-surface-1: #062a66;
  --nav-surface-2: #041a3d;
  --nav-surface-3: #08347d;
  --nav-accent-1: #7dd3fc;
  --nav-accent-2: #60a5fa;
  --nav-accent-3: #a78bfa;
  --nav-accent-4: #34d399;
  --nav-accent-5: #fbbf24;
  --nav-accent-6: #fb7185;

  --app-accent-1-rgb: 59 130 246;
  --app-accent-2-rgb: 14 165 233;
  --app-accent-3-rgb: 99 102 241;

  --app-page-header-accent-gradient: linear-gradient(
    90deg,
    rgb(var(--app-accent-1-rgb) / 0) 0%,
    rgb(var(--app-accent-1-rgb) / 0.9) 24%,
    rgb(var(--app-accent-2-rgb) / 0.9) 52%,
    rgb(var(--app-accent-1-rgb) / 0.9) 76%,
    rgb(var(--app-accent-1-rgb) / 0) 100%
  );
  --app-page-header-accent-shadow: 0 8px 18px rgb(var(--app-accent-1-rgb) / 0.18);

  --app-sidebar-bg-image:
    radial-gradient(680px 260px at 8% 0%, rgb(var(--app-accent-1-rgb) / 0.13) 0%, rgb(var(--app-accent-1-rgb) / 0.05) 26%, rgb(var(--app-accent-1-rgb) / 0) 62%),
    radial-gradient(560px 240px at 100% 14%, rgb(var(--app-accent-2-rgb) / 0.12) 0%, rgb(var(--app-accent-2-rgb) / 0.04) 24%, rgb(var(--app-accent-2-rgb) / 0) 64%),
    radial-gradient(340px 180px at 32% 100%, rgb(var(--app-accent-3-rgb) / 0.09) 0%, rgb(var(--app-accent-3-rgb) / 0) 72%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 36%, #f7fbff 100%),
    repeating-linear-gradient(135deg, rgb(var(--app-accent-1-rgb) / 0.045) 0, rgb(var(--app-accent-1-rgb) / 0.045) 1px, rgb(255 255 255 / 0) 1px, rgb(255 255 255 / 0) 16px);

  --app-sidebar-rail-gradient: linear-gradient(
    180deg,
    rgb(var(--app-accent-1-rgb) / 0) 0%,
    rgb(var(--app-accent-1-rgb) / 0.95) 20%,
    rgb(var(--app-accent-2-rgb) / 0.95) 52%,
    rgb(var(--app-accent-3-rgb) / 0.95) 82%,
    rgb(var(--app-accent-3-rgb) / 0) 100%
  );
  --app-sidebar-rail-shadow: 0 0 0 1px rgb(var(--app-accent-1-rgb) / 0.10), 0 10px 26px rgb(var(--app-accent-1-rgb) / 0.18);

  --app-sidebar-overlay-bg-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.42) 0%, rgb(255 255 255 / 0.08) 18%, rgb(255 255 255 / 0) 42%),
    repeating-linear-gradient(135deg, rgb(15 23 42 / 0.035) 0, rgb(15 23 42 / 0.035) 1px, transparent 1px, transparent 88px),
    repeating-linear-gradient(45deg, rgb(var(--app-accent-1-rgb) / 0.03) 0, rgb(var(--app-accent-1-rgb) / 0.03) 1px, transparent 1px, transparent 112px);
  --app-sidebar-panel-shadow: 0 14px 34px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(148, 163, 184, 0.22);
  --app-sidebar-panel-inner-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --app-sidebar-mobile-bg:
    radial-gradient(560px 220px at 10% 0%, rgb(var(--app-accent-1-rgb) / 0.22) 0%, rgb(var(--app-accent-1-rgb) / 0) 62%),
    radial-gradient(420px 180px at 100% 0%, rgb(var(--app-accent-2-rgb) / 0.18) 0%, rgb(var(--app-accent-2-rgb) / 0) 60%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(238, 245, 255, 0.97) 100%);

  --app-page-title-icon-gradient: linear-gradient(135deg, #22c55e 0%, rgb(var(--app-accent-1-rgb) / 1) 100%);

  --app-menu-highlight-bg: linear-gradient(90deg, rgb(var(--brand-primary-rgb) / 0.14) 0 3px, rgb(2 6 23 / 0.02) 3px 100%);
  --app-menu-highlight-bg-hover: linear-gradient(90deg, rgb(var(--brand-primary-rgb) / 0.55) 0 3px, rgb(var(--brand-primary-rgb) / 0.08) 3px 100%);
}

:root[data-theme="dark"] {
  --app-text: #e5e7eb;
  --app-heading: #f8fafc;
  --app-muted: #9aa7bb;
  --app-muted-strong: #cbd5e1;

  --app-bg-0: #0b1220;
  --app-bg-1: #0f172a;
  --app-bg-2: #111c33;
  --app-bg-gradient-end: #0b1220;

  --surface-0: #0f172a;
  --surface-1: #111c33;
  --surface-2: #0b1220;
  --surface-elevated: rgba(15, 23, 42, 0.86);
  --border-color: rgba(148, 163, 184, 0.32);
  --border-color-strong: rgba(148, 163, 184, 0.42);
  --hover-bg: rgba(148, 163, 184, 0.12);
  --active-bg: rgba(148, 163, 184, 0.16);
  --app-nav-outer-bg: rgba(15, 23, 42, 0.72);

  --app-page-header-bg: rgba(15, 23, 42, 0.72);
  --app-page-header-border: rgba(148, 163, 184, 0.32);
  --app-user-btn-bg: rgba(2, 6, 23, 0.35);
  --app-user-btn-border: rgba(148, 163, 184, 0.32);
  --app-header-footer-bg:
    radial-gradient(620px 180px at 0% 0%, rgb(var(--app-accent-1-rgb) / 0.22) 0%, rgb(var(--app-accent-1-rgb) / 0) 62%),
    radial-gradient(460px 160px at 100% 0%, rgb(var(--app-accent-2-rgb) / 0.14) 0%, rgb(var(--app-accent-2-rgb) / 0) 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(11, 18, 32, 0.9) 100%);
  --app-header-footer-overlay:
    linear-gradient(180deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0.04) 24%, rgb(255 255 255 / 0) 52%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.02) 0, rgb(255 255 255 / 0.02) 1px, transparent 1px, transparent 90px);
  --app-header-footer-shadow: 0 12px 28px rgba(2, 6, 23, 0.26), 0 2px 8px rgba(15, 23, 42, 0.16);

  --app-sidebar-bg-image:
    radial-gradient(760px 260px at 10% 0%, rgb(var(--app-accent-1-rgb) / 0.24) 0%, rgb(var(--app-accent-1-rgb) / 0.08) 26%, rgb(var(--app-accent-1-rgb) / 0) 62%),
    radial-gradient(640px 240px at 100% 16%, rgb(var(--app-accent-2-rgb) / 0.17) 0%, rgb(var(--app-accent-2-rgb) / 0.07) 26%, rgb(var(--app-accent-2-rgb) / 0) 68%),
    radial-gradient(400px 180px at 30% 100%, rgb(var(--app-accent-3-rgb) / 0.11) 0%, rgb(var(--app-accent-3-rgb) / 0) 74%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 42%, rgba(11, 18, 32, 0.98) 100%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.03) 0, rgb(255 255 255 / 0.03) 1px, transparent 1px, transparent 16px);

  --app-sidebar-overlay-bg-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0.04) 18%, rgb(255 255 255 / 0) 40%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.025) 0, rgb(255 255 255 / 0.025) 1px, transparent 1px, transparent 88px),
    repeating-linear-gradient(45deg, rgb(var(--app-accent-1-rgb) / 0.025) 0, rgb(var(--app-accent-1-rgb) / 0.025) 1px, transparent 1px, transparent 112px);
  --app-sidebar-panel-shadow: 0 18px 42px rgba(2, 6, 23, 0.36), 0 2px 10px rgba(15, 23, 42, 0.2);
  --app-sidebar-panel-inner-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --app-sidebar-mobile-bg:
    radial-gradient(520px 220px at 12% 0%, rgb(var(--app-accent-1-rgb) / 0.28) 0%, rgb(var(--app-accent-1-rgb) / 0) 62%),
    radial-gradient(420px 180px at 100% 0%, rgb(var(--app-accent-2-rgb) / 0.18) 0%, rgb(var(--app-accent-2-rgb) / 0) 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 18, 32, 0.97) 100%);

  --app-menu-highlight-bg: linear-gradient(90deg, rgb(var(--brand-primary-rgb) / 0.18) 0 3px, rgb(255 255 255 / 0.02) 3px 100%);
  --app-menu-highlight-bg-hover: linear-gradient(90deg, rgb(var(--brand-primary-rgb) / 0.38) 0 3px, rgb(var(--brand-primary-rgb) / 0.12) 3px 100%);
}

/* Header & footer unify */
.navbar.bg-primary {
  background-color: var(--surface-0) !important;
  background-image: var(--app-header-footer-bg) !important;
}
footer.footer-fixed.bg-primary {
  background-color: var(--surface-0) !important;
  background-image: var(--app-header-footer-bg) !important;
}

body {
  color: var(--app-text);
  background-color: var(--app-bg-0);
}

.app-page-header .app-theme-select {
  min-width: 156px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--app-user-btn-bg);
  color: var(--app-heading);
  font-weight: 600;
  padding: 8px 12px;
}
.app-page-header .app-theme-select-wrap {
  position: relative;
  display: inline-block;
}
.app-page-header .app-theme-select.has-icon {
  padding-left: 36px;
}
.app-page-header .app-theme-select-wrap > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--app-muted-strong);
}
.app-page-header .app-theme-select-wrap > i[data-theme-icon="light"] {
  color: #f59e0b;
}
.app-page-header .app-theme-select-wrap > i[data-theme-icon="dark"] {
  color: #93c5fd;
}
.app-page-header .app-theme-select:focus {
  border-color: var(--border-color-strong);
  box-shadow: 0 0 0 0.2rem rgb(var(--brand-primary-rgb) / 0.12);
}

html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

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

.text-muted,
.text-body-secondary {
  color: var(--app-muted-strong) !important;
  opacity: 1 !important;
}

.text-secondary {
  color: var(--app-muted) !important;
  opacity: 1 !important;
}

.metric .metric-label {
  color: var(--app-muted-strong);
}

.stats-card .stats-label {
  opacity: 1;
}

/* Ensure content is not hidden behind fixed header */
body.has-fixed-header {
  background-color: var(--app-bg-1);
  background-image: linear-gradient(
    180deg,
    var(--app-bg-1) 0%,
    var(--app-bg-2) 45%,
    var(--app-bg-gradient-end) 100%
  );
  background-attachment: fixed;
}

:root[data-theme="dark"] body {
  color-scheme: dark;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content {
  background-color: var(--surface-1) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .kpi-card {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%) !important;
  border: 1px solid var(--border-color-strong) !important;
  border-left-width: 6px !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .kpi-card.kpi-visitors { border-left-color: #0d6efd !important; }
:root[data-theme="dark"] .kpi-card.kpi-rno { border-left-color: #6f42c1 !important; }
:root[data-theme="dark"] .kpi-card.kpi-revenue { border-left-color: #198754 !important; }
:root[data-theme="dark"] .kpi-card.kpi-arr { border-left-color: #fd7e14 !important; }
:root[data-theme="dark"] .kpi-card.kpi-primary { border-left-color: #0d6efd !important; }
:root[data-theme="dark"] .kpi-card.kpi-success { border-left-color: #198754 !important; }
:root[data-theme="dark"] .kpi-card.kpi-warning { border-left-color: #ffc107 !important; }
:root[data-theme="dark"] .kpi-card.kpi-info { border-left-color: #0dcaf0 !important; }
:root[data-theme="dark"] .kpi-card.kpi-danger { border-left-color: #dc3545 !important; }

:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table thead,
:root[data-theme="dark"] .table tbody {
  color: var(--app-text);
}

:root[data-theme="dark"] .table {
  --bs-table-color: var(--app-text);
  --bs-table-bg: var(--surface-1);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-color: var(--app-text);
  --bs-table-striped-bg: var(--surface-0);
  --bs-table-hover-color: var(--app-heading);
  --bs-table-hover-bg: var(--hover-bg);
  background-color: var(--surface-1) !important;
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--surface-1) !important;
  color: var(--app-text) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-0) !important;
}

:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: var(--hover-bg) !important;
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th {
  border-top-color: var(--border-color) !important;
}

:root[data-theme="dark"] .table-light {
  --bs-table-color: var(--app-heading);
  --bs-table-bg: var(--surface-2);
  --bs-table-border-color: var(--border-color-strong);
  --bs-table-striped-bg: rgb(255 255 255 / 0.03);
  --bs-table-hover-bg: rgb(255 255 255 / 0.05);
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .table-light th {
  background-color: var(--surface-2) !important;
  border-bottom-color: var(--border-color-strong) !important;
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white {
  background-color: var(--surface-1) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .pastel-card,
:root[data-theme="dark"] #guestSurveyTotalCard,
:root[data-theme="dark"] #guestSurveyAvgAgeCard,
:root[data-theme="dark"] #guestSurveyUniqueCountriesCard,
:root[data-theme="dark"] #guestSurveyTodayCard {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%) !important;
  border: 1px solid var(--border-color-strong) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .pastel-card .card-title,
:root[data-theme="dark"] .pastel-card h1,
:root[data-theme="dark"] .pastel-card h2,
:root[data-theme="dark"] .pastel-card h3,
:root[data-theme="dark"] .pastel-card h4,
:root[data-theme="dark"] .pastel-card h5,
:root[data-theme="dark"] .pastel-card h6,
:root[data-theme="dark"] .pastel-card .fw-bold {
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .pastel-card i {
  color: var(--app-muted-strong) !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .text-black-50 {
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
  border-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
  background-color: rgb(2 6 23 / 0.12) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .gs-table-box {
  border-color: var(--border-color-strong) !important;
  background-color: var(--surface-1) !important;
}

:root[data-theme="dark"] .gs-table-head th,
:root[data-theme="dark"] .gs-table thead.gs-table-head th {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%) !important;
  color: var(--app-heading) !important;
  border-top-color: var(--border-color-strong) !important;
  border-bottom-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .gs-card,
:root[data-theme="dark"] .gs-modern-card {
  background-color: var(--surface-1) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .sm-annual-card {
  --card-bg: var(--surface-1) !important;
  --card-border: var(--border-color-strong) !important;
  --card-text: var(--app-text) !important;
}

:root[data-theme="dark"] .seg-card .card,
:root[data-theme="dark"] .seg-card .card-data {
  background: var(--surface-1) !important;
  border-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .seg-card .card-title {
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .seg-card .seg-badge {
  color: var(--app-text) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .rec-daily-visitors-page .card-header {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%) !important;
  border-bottom-color: var(--border-color) !important;
}

:root[data-theme="dark"] .rec-daily-visitors-page .card-title,
:root[data-theme="dark"] .rec-daily-visitors-page .card-body {
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .rec-daily-visitors-page .rec-stats-card {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%) !important;
  border-color: var(--border-color-strong) !important;
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.45) !important;
}

:root[data-theme="dark"] .rec-daily-visitors-page .rec-stats-card h6 {
  color: rgb(203 213 225 / 0.78) !important;
}

:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface-1) !important;
  border-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .dropdown-item {
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--hover-bg) !important;
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text {
  background-color: var(--surface-0) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .form-control::placeholder {
  color: rgb(203 213 225 / 0.7) !important;
}

:root[data-theme="dark"] .filter-modern .form-control,
:root[data-theme="dark"] .filter-modern .form-select,
:root[data-theme="dark"] .filter-form .form-control,
:root[data-theme="dark"] .filter-form .form-select,
:root[data-theme="dark"] .filter-toolbar .form-control,
:root[data-theme="dark"] .filter-toolbar .form-select,
:root[data-theme="dark"] .gs-filters-bar .form-control,
:root[data-theme="dark"] .gs-filters-bar .form-select {
  background: var(--surface-0) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--app-text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .filter-modern .form-control:focus,
:root[data-theme="dark"] .filter-modern .form-select:focus,
:root[data-theme="dark"] .filter-form .form-control:focus,
:root[data-theme="dark"] .filter-form .form-select:focus,
:root[data-theme="dark"] .filter-toolbar .form-control:focus,
:root[data-theme="dark"] .filter-toolbar .form-select:focus,
:root[data-theme="dark"] .gs-filters-bar .form-control:focus,
:root[data-theme="dark"] .gs-filters-bar .form-select:focus {
  border-color: rgb(var(--brand-primary-rgb) / 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgb(var(--brand-primary-rgb) / 0.18) !important;
}

:root[data-theme="dark"] .filter-modern .form-label,
:root[data-theme="dark"] .filter-form .form-label,
:root[data-theme="dark"] .filter-toolbar .form-label,
:root[data-theme="dark"] .gs-filters-item .form-label,
:root[data-theme="dark"] .card-filter-inline .form-label {
  color: var(--app-muted-strong) !important;
}

:root[data-theme="dark"] .modal .form-label,
:root[data-theme="dark"] .modal label {
  color: var(--app-muted-strong) !important;
}

:root[data-theme="dark"] .modal .form-text {
  color: var(--app-muted) !important;
}

:root[data-theme="dark"] .modal .modal-body .form-control,
:root[data-theme="dark"] .modal .modal-body .form-select,
:root[data-theme="dark"] .modal .modal-body textarea {
  background: var(--surface-0) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--app-text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .modal .modal-body .form-control:focus,
:root[data-theme="dark"] .modal .modal-body .form-select:focus,
:root[data-theme="dark"] .modal .modal-body textarea:focus {
  background: var(--surface-0) !important;
  border-color: rgb(var(--brand-primary-rgb) / 0.9) !important;
  box-shadow: 0 0 0 0.2rem rgb(var(--brand-primary-rgb) / 0.18) !important;
}

:root[data-theme="dark"] .modal .modal-body .form-control::placeholder,
:root[data-theme="dark"] .modal .modal-body textarea::placeholder {
  color: rgb(203 213 225 / 0.7) !important;
}

:root[data-theme="dark"] .modal .modal-body .form-control:disabled,
:root[data-theme="dark"] .modal .modal-body .form-select:disabled,
:root[data-theme="dark"] .modal .modal-body .form-control[readonly],
:root[data-theme="dark"] .modal .modal-body .form-select[readonly] {
  background: rgb(15 23 42 / 0.65) !important;
  color: rgb(226 232 240 / 0.85) !important;
}

:root[data-theme="dark"] select.form-select option,
:root[data-theme="dark"] select.form-select optgroup {
  background-color: var(--surface-1);
  color: var(--app-text);
}

:root[data-theme="dark"] .auth-bg {
  background: linear-gradient(180deg, var(--app-bg-0) 0%, var(--app-bg-1) 100%) !important;
}

:root[data-theme="dark"] .auth-control {
  background: linear-gradient(180deg, rgb(15 23 42 / 0.9) 0%, rgb(2 6 23 / 0.55) 100%) !important;
  border-color: var(--border-color-strong) !important;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-dark) 100%
  );
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(
    135deg,
    var(--brand-primary-dark) 0%,
    #081f57 100%
  );
  transform: translateY(-1px);
}

/* Modern button styling for Statistik Hotel */
.btn-modern {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.btn-modern i {
  margin-right: 0.5rem;
  font-size: 0.95rem;
}
.btn-modern:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.12);
}

/* Small variant for table actions */
.btn-modern-sm {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0.25rem 0.6rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(13, 110, 253, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.btn-modern-sm i {
  margin-right: 0.4rem;
  font-size: 0.9rem;
}
.btn-modern-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(13, 110, 253, 0.12);
}

/* Outline variants with soft background for better readability */
.btn-modern.btn-outline-primary {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  border-color: #cfe0ff;
  color: #0d6efd;
}
.btn-modern.btn-outline-primary:hover,
.btn-modern.btn-outline-primary:focus {
  background: rgba(13, 110, 253, 0.08);
  border-color: #94b8ff;
}

.btn-modern.btn-outline-success {
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
  border-color: #a7f3d0;
  color: #198754;
}
.btn-modern.btn-outline-success:hover,
.btn-modern.btn-outline-success:focus {
  background: rgba(25, 135, 84, 0.08);
  border-color: #9fd9c0;
}

.btn-modern.btn-outline-info {
  background: linear-gradient(180deg, #e6f6fb 0%, #f0fbff 100%);
  border-color: #a8e6f6;
  color: #0dcaf0;
}
.btn-modern.btn-outline-info:hover,
.btn-modern.btn-outline-info:focus {
  background: rgba(13, 202, 240, 0.08);
  border-color: #94d9f3;
}

.btn-modern.btn-outline-warning {
  background: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%);
  border-color: #fde68a;
  color: #ffc107;
}
.btn-modern.btn-outline-warning:hover,
.btn-modern.btn-outline-warning:focus {
  background: rgba(255, 193, 7, 0.15);
  border-color: #ffe59a;
}

.btn-modern.btn-outline-secondary {
  background: linear-gradient(180deg, #f3f4f6 0%, #f8fafc 100%);
  border-color: #cfd4da;
  color: #6c757d;
}
.btn-modern.btn-outline-secondary:hover,
.btn-modern.btn-outline-secondary:focus {
  background: rgba(108, 117, 125, 0.08);
  border-color: #cfd4da;
}

/* Keep solid variants benefiting from existing .btn-* colors and gradients */

/* Modern filter fields styling */
.filter-modern {
  gap: 0.5rem;
}
.filter-modern .form-control,
.filter-modern .form-select {
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #cfe0ff;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.06);
}
.filter-modern .form-control:focus,
.filter-modern .form-select:focus {
  border-color: #94b8ff;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.filter-modern .form-label {
  font-weight: 600;
  color: #0d4c85;
}
@media (max-width: 992px) {
  .filter-modern {
    flex-wrap: wrap;
  }
  .filter-modern .app-card-item {
    flex: 0 0 100%;
  }
  .filter-modern .app-card-item .btn {
    width: 100%;
  }
}
@media (min-width: 993px) {
  .filter-modern .app-card-item {
    flex: 0 0 auto;
  }
}

.ms-period-input {
  width: 180px;
}
@media (max-width: 576px) {
  .ms-period-input {
    width: 100%;
  }
}
.filter-form .form-control,
.filter-form .form-select,
.filter-toolbar .form-control,
.filter-toolbar .form-select {
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #cfe0ff;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.06);
}
.filter-form .form-control:focus,
.filter-form .form-select:focus,
.filter-toolbar .form-control:focus,
.filter-toolbar .form-select:focus {
  border-color: #94b8ff;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.filter-form .form-label,
.filter-toolbar .form-label {
  font-weight: 600;
  color: #0d4c85;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.filter-actions .btn {
  height: 42px;
}

.stats-card {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  border: 1px solid #cfe0ff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
}
.stats-card .card-header {
  background: transparent;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.stats-card .card-body {
  padding: 16px;
}

.card-filter-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-filter-inline .form-control,
.card-filter-inline .form-select {
  height: 42px;
  border-radius: 12px;
}

/* Filter actions alignment and consistency */
.filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.filter-actions .btn {
  height: 42px;
}

/* Links */
.nav-link:hover,
.nav-link.active {
  color: var(--brand-primary) !important;
}

/* Progress */
.progress-bar {
  background: linear-gradient(
    90deg,
    var(--brand-primary) 0%,
    var(--brand-primary-dark) 100%
  );
}
.progress-bar.bg-success {
  background: linear-gradient(
    90deg,
    var(--brand-success) 0%,
    #1e7e34 100%
  ) !important;
}
.progress-bar.bg-warning {
  background: linear-gradient(
    90deg,
    var(--brand-warning) 0%,
    #e0a800 100%
  ) !important;
}
.progress-bar.bg-info {
  background: linear-gradient(
    90deg,
    var(--brand-info) 0%,
    #138496 100%
  ) !important;
}

/* Badges */
.badge.bg-success {
  background-color: var(--brand-success) !important;
}
.badge.bg-warning {
  background-color: var(--brand-warning) !important;
  color: #212529 !important;
}
.badge.bg-danger {
  background-color: var(--brand-danger) !important;
}
.badge.bg-info {
  background-color: var(--brand-info) !important;
}

/* Icon Colors: functional palette and mappings */
/* Define icon color palette */
:root {
  --icon-dashboard: #0d6efd;
  --icon-users: #28a745;
  --icon-statistics: #17a2b8;
  --icon-forms: #6f42c1;
  --icon-car: #fd7e14;
  --icon-id-card: #20c997;
  --icon-settings: #6c757d;
  --icon-permissions: #6610f2;
  --icon-hashtag: #0dcaf0;
  --icon-city: #0d6efd;
  --icon-age: #20c997;
  --icon-gender: #ff69b4;
  --icon-plus: #198754;
  --icon-edit: #fd7e14;
  --icon-trash: #dc3545;
  --icon-save: #0d6efd;
  --icon-eye: #0dcaf0;
  --icon-info: #17a2b8;
  --icon-check: #28a745;
  --icon-exclamation: #dc3545;
  --icon-warning: #ffc107;
  --icon-sign-out: #dc3545;
  --icon-sign-in: #198754;
  --icon-user: #6c757d;
  --icon-sliders: #6f42c1;
  --icon-share: #0dcaf0;

  --brand-instagram: #c13584;
  --brand-tiktok: #69c9d0;
  --brand-facebook: #1877f2;
  --brand-youtube: #ff0000;
  --brand-google: #4285f4;
}

/* Global icon mapping by function (applies across navbar, dropdowns, content) */
i.fa-home,
i.fa-house {
  color: var(--icon-dashboard) !important;
}
i.fa-users {
  color: var(--icon-users) !important;
}
i.fa-clipboard-list {
  color: var(--icon-forms) !important;
}
i.fa-chart-pie,
i.fa-chart-bar {
  color: var(--icon-statistics) !important;
}
i.fa-car {
  color: var(--icon-car) !important;
}
i.fa-id-card,
i.fa-id-badge {
  color: var(--icon-id-card) !important;
}
i.fa-cog {
  color: var(--icon-settings) !important;
}
i.fa-sliders-h {
  color: var(--icon-sliders) !important;
}
i.fa-key {
  color: var(--icon-permissions) !important;
}
i.fa-hashtag {
  color: var(--icon-hashtag) !important;
}
i.fa-city {
  color: var(--icon-city) !important;
}
i.fa-user-clock {
  color: var(--icon-age) !important;
}
i.fa-venus-mars {
  color: var(--icon-gender) !important;
}
i.fa-plus {
  color: var(--icon-plus) !important;
}
i.fa-edit {
  color: var(--icon-edit) !important;
}
i.fa-trash,
i.fa-trash-alt {
  color: var(--icon-trash) !important;
}
i.fa-save {
  color: var(--icon-save) !important;
}
i.fa-eye {
  color: var(--icon-eye) !important;
}
i.fa-arrow-left {
  color: var(--icon-settings) !important;
}
i.fa-info-circle {
  color: var(--icon-info) !important;
}
i.fa-check-circle {
  color: var(--icon-check) !important;
}
i.fa-exclamation-circle {
  color: var(--icon-exclamation) !important;
}
i.fa-exclamation-triangle {
  color: var(--icon-warning) !important;
}
i.fa-sign-out-alt {
  color: var(--icon-sign-out) !important;
}
i.fa-sign-in-alt {
  color: var(--icon-sign-in) !important;
}
i.fa-user-circle {
  color: var(--icon-user) !important;
}
i.fa-share-alt {
  color: var(--icon-share) !important;
}

/* Brand icons */
i.fab.fa-instagram {
  color: var(--brand-instagram) !important;
}
i.fab.fa-tiktok {
  color: var(--brand-tiktok) !important;
}
i.fab.fa-facebook {
  color: var(--brand-facebook) !important;
}
i.fab.fa-youtube {
  color: var(--brand-youtube) !important;
}
/* Replace FontAwesome Google glyph with colored SVG */
i.fab.fa-google {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: center/contain no-repeat url("../img/google_g_color.svg");
  color: inherit !important;
}
i.fab.fa-google::before {
  content: "" !important;
}

/* Optional Instagram gradient for supported browsers */
@supports (-webkit-background-clip: text) {
  i.fab.fa-instagram {
    background: radial-gradient(
      circle at 30% 107%,
      #fdf497 0%,
      #fd5949 45%,
      #d6249f 60%,
      #285aeb 90%
    );
    background-clip: text; /* standar property untuk lint compatibility */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Subtle highlight on hover for icons inside nav links */
.navbar .nav-link:hover i {
  filter: brightness(1.1);
}

/* Platform label colors for table cells and badges */
.platform-label {
  font-weight: 500;
}
.platform-instagram {
  color: var(--brand-instagram) !important;
}
.platform-tiktok {
  color: var(--brand-tiktok) !important;
}
.platform-facebook {
  color: var(--brand-facebook) !important;
}
.platform-youtube {
  color: var(--brand-youtube) !important;
}
.platform-google {
  color: var(--brand-google) !important;
}
.platform-x {
  color: #000000 !important;
}

/* Navbar icon overrides: beat inherited white color in dark navbar */
.navbar-dark .navbar-nav .nav-link i.fa-chart-bar {
  color: var(--icon-statistics) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-users {
  color: var(--icon-users) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-share-alt {
  color: var(--icon-share) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-cog {
  color: var(--icon-settings) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-sliders-h {
  color: var(--icon-sliders) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-key {
  color: var(--icon-permissions) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-sign-out-alt {
  color: var(--icon-sign-out) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-sign-in-alt {
  color: var(--icon-sign-in) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-user-circle {
  color: var(--icon-user) !important;
}
/* Newly added: common primary navbar items */
.navbar-dark .navbar-nav .nav-link i.fa-home,
.navbar-dark .navbar-nav .nav-link i.fa-house {
  color: var(--icon-dashboard) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-clipboard-list {
  color: var(--icon-forms) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-car {
  color: var(--icon-car) !important;
}
.navbar-dark .navbar-nav .nav-link i.fa-chart-pie {
  color: var(--icon-statistics) !important;
}
.navbar-dark .navbar-nav .nav-link i.fab.fa-instagram {
  color: var(--brand-instagram) !important;
}
.navbar-dark .navbar-nav .nav-link i.fab.fa-tiktok {
  color: var(--brand-tiktok) !important;
}
.navbar-dark .navbar-nav .nav-link i.fab.fa-facebook {
  color: var(--brand-facebook) !important;
}
.navbar-dark .navbar-nav .nav-link i.fab.fa-youtube {
  color: var(--brand-youtube) !important;
}
.navbar-dark .navbar-nav .nav-link i.fab.fa-google {
  filter: none;
}

/* Action Buttons Consistency */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  line-height: 1;
}
.btn-group.btn-group-sm .btn-action,
.btn.btn-sm.btn-action {
  width: 32px;
  height: 32px;
  padding: 0;
}
.btn-action i {
  margin: 0;
  font-size: 0.95rem;
}
/* End Action Buttons Consistency */

/* Global App Card Styles (unified across modules) */
.app-card {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  border: 1px solid #cfe0ff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
}
.app-card-item {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  border: 1px solid #cfe0ff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
}
.app-card-diagram {
  /* optional alias for charts */
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  border: 1px solid #cfe0ff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
}
.app-card-metric.metric-card-fixed .card-body {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Enforce pastel blue background on all chart cards across modules */
.tc-chart-card,
.gs-linecards .card,
.stats-card:not(.kpi-card),
.compact-card {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%) !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08) !important;
}

:root[data-theme="dark"] .app-card,
:root[data-theme="dark"] .app-card-item,
:root[data-theme="dark"] .app-card-diagram {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%) !important;
  border: 1px solid var(--border-color-strong) !important;
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.35) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .tc-chart-card,
:root[data-theme="dark"] .gs-linecards .card,
:root[data-theme="dark"] .stats-card:not(.kpi-card),
:root[data-theme="dark"] .compact-card {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%) !important;
  border: 1px solid var(--border-color-strong) !important;
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.35) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .stats-card .card-title,
:root[data-theme="dark"] .stats-card .card-body,
:root[data-theme="dark"] .stats-card h1,
:root[data-theme="dark"] .stats-card h2,
:root[data-theme="dark"] .stats-card h3,
:root[data-theme="dark"] .stats-card h4,
:root[data-theme="dark"] .stats-card h5,
:root[data-theme="dark"] .stats-card h6,
:root[data-theme="dark"] .stats-card .fw-bold {
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .stats-card .text-muted,
:root[data-theme="dark"] .stats-card .text-body-secondary {
  color: var(--app-muted-strong) !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] .stats-card h6 i,
:root[data-theme="dark"] .stats-card .card-title i {
  color: var(--app-muted-strong) !important;
}

:root[data-theme="dark"] .chart-legend .legend-item {
  background: var(--surface-2) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .chart-box,
:root[data-theme="dark"] .chart-canvas,
:root[data-theme="dark"] .chart-canvas-line,
:root[data-theme="dark"] .chart-canvas-pie {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%) !important;
  border-radius: 8px;
  border: 1px solid var(--border-color-strong) !important;
}

.dashboard-page {
  --dash-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.98) 100%);
  --dash-border: rgba(148, 163, 184, 0.22);
  --dash-shadow: 0 16px 44px rgba(2, 6, 23, 0.12);
  --dash-shadow-hover: 0 22px 60px rgba(2, 6, 23, 0.16);
  --dash-accent: rgba(59, 130, 246, 0.95);
  --dash-text: rgba(15, 23, 42, 0.92);
  --dash-muted: rgba(15, 23, 42, 0.66);
}

:root[data-theme="dark"] .dashboard-page {
  --dash-surface: linear-gradient(180deg, rgb(17 28 51 / 0.92) 0%, rgb(15 23 42 / 0.96) 100%);
  --dash-border: rgba(148, 163, 184, 0.20);
  --dash-shadow: 0 18px 54px rgb(0 0 0 / 0.48);
  --dash-shadow-hover: 0 26px 72px rgb(0 0 0 / 0.56);
  --dash-text: var(--app-text);
  --dash-muted: rgb(203 213 225 / 0.76);
}

:root[data-theme="dark"] .dashboard-page .card .card-header {
  border-bottom-color: var(--border-color) !important;
}

:root[data-theme="dark"] .dashboard-page .card .icon-circle {
  background: rgb(2 6 23 / 0.26) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.40) !important;
}

:root[data-theme="dark"] .dashboard-page .card .badge {
  border-color: var(--border-color) !important;
  background: rgb(255 255 255 / 0.06) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .dashboard-page .dashboard-hero {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;
  box-shadow: var(--dash-shadow) !important;
}

:root[data-theme="dark"] .dashboard-page .dashboard-hero h1,
:root[data-theme="dark"] .dashboard-page .dashboard-hero .h4 {
  color: var(--app-heading) !important;
}

:root[data-theme="dark"] .dashboard-page .dashboard-hero i {
  color: var(--dash-accent) !important;
}

:root[data-theme="dark"] .dashboard-page .dashboard-hero .text-muted {
  color: var(--dash-muted) !important;
}

.dashboard-page .card {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  border: 1px solid var(--dash-border) !important;
  box-shadow: var(--dash-shadow) !important;
  background: var(--dash-surface) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--dash-text);
}
.dashboard-page .card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dash-accent) 0%, rgba(255, 255, 255, 0) 72%);
  opacity: 0.95;
}
.dashboard-page .card.hover-lift:hover {
  box-shadow: var(--dash-shadow-hover) !important;
}
.dashboard-page .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
.dashboard-page .card .text-muted {
  color: var(--dash-muted) !important;
}
.dashboard-page .card .metric .metric-label {
  color: var(--dash-muted) !important;
  font-weight: 700;
}
.dashboard-page .card .icon-circle {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.08);
}
.dashboard-page .card .badge {
  border-radius: 999px;
  padding: 0.45em 0.85em;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(2, 6, 23, 0.05) !important;
  color: rgba(15, 23, 42, 0.86) !important;
}
.dashboard-page .dash-card {
  --dash-tint: rgba(59, 130, 246, 0.16);
  background:
    radial-gradient(900px 260px at 0% 0%, var(--dash-tint), rgba(255, 255, 255, 0) 60%),
    radial-gradient(700px 220px at 100% 20%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 64%),
    var(--dash-surface) !important;
}
.dashboard-page .dash-card--fnb { --dash-accent: rgba(239, 68, 68, 0.98); --dash-tint: rgba(239, 68, 68, 0.16); }
.dashboard-page .dash-card--rec { --dash-accent: rgba(34, 197, 94, 0.98); --dash-tint: rgba(34, 197, 94, 0.16); }
.dashboard-page .dash-card--traffic { --dash-accent: rgba(14, 165, 233, 0.98); --dash-tint: rgba(14, 165, 233, 0.16); }
.dashboard-page .dash-card--hotel { --dash-accent: rgba(100, 116, 139, 0.98); --dash-tint: rgba(100, 116, 139, 0.14); }
.dashboard-page .dash-card--mp { --dash-accent: rgba(15, 23, 42, 0.92); --dash-tint: rgba(15, 23, 42, 0.10); }
.dashboard-page .dash-card--gb { --dash-accent: rgba(22, 163, 74, 0.98); --dash-tint: rgba(22, 163, 74, 0.16); }
.dashboard-page .dash-card--member { --dash-accent: rgba(6, 182, 212, 0.98); --dash-tint: rgba(6, 182, 212, 0.16); }
.dashboard-page .dash-card--sm { --dash-accent: rgba(139, 92, 246, 0.98); --dash-tint: rgba(139, 92, 246, 0.16); }

.dashboard-page .dash-kpi {
  --kpi-accent-1: rgba(59, 130, 246, 1);
  --kpi-accent-2: rgba(14, 165, 233, 1);
  --kpi-tint-1: rgba(59, 130, 246, 0.18);
  --kpi-tint-2: rgba(14, 165, 233, 0.12);
  border-color: rgba(148, 163, 184, 0.18) !important;
  background:
    radial-gradient(900px 280px at 0% 0%, var(--kpi-tint-1), rgba(255, 255, 255, 0) 60%),
    radial-gradient(760px 260px at 100% 0%, var(--kpi-tint-2), rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
  color: rgba(15, 23, 42, 0.92) !important;
}

:root[data-theme="dark"] .dashboard-page .dash-kpi {
  border-color: var(--dash-border) !important;
  background:
    radial-gradient(900px 280px at 0% 0%, var(--kpi-tint-1), rgb(255 255 255 / 0) 62%),
    radial-gradient(760px 260px at 100% 0%, var(--kpi-tint-2), rgb(255 255 255 / 0) 66%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .dashboard-page .dash-kpi::after {
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0) 70%);
}

:root[data-theme="dark"] .dashboard-page .dash-kpi .metric-label,
:root[data-theme="dark"] .dashboard-page .dash-kpi .text-muted {
  color: var(--dash-muted) !important;
}
.dashboard-page .dash-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.dashboard-page .dash-kpi::after {
  content: "";
  position: absolute;
  left: -20%;
  top: -30%;
  width: 140%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  transform: rotate(-8deg);
  pointer-events: none;
}
.dashboard-page .dash-kpi .card-body {
  position: relative;
  z-index: 1;
}
.dashboard-page .dash-kpi .metric-label,
.dashboard-page .dash-kpi .text-muted {
  color: rgba(15, 23, 42, 0.68) !important;
}
.dashboard-page .dash-kpi i {
  color: var(--kpi-accent-1);
  filter: drop-shadow(0 10px 16px rgba(2, 6, 23, 0.16));
}
.dashboard-page .dash-kpi--demografik { --kpi-accent-1: rgba(59, 130, 246, 1); --kpi-accent-2: rgba(14, 165, 233, 1); --kpi-tint-1: rgba(59, 130, 246, 0.20); --kpi-tint-2: rgba(14, 165, 233, 0.12); }
.dashboard-page .dash-kpi--survey { --kpi-accent-1: rgba(139, 92, 246, 1); --kpi-accent-2: rgba(99, 102, 241, 1); --kpi-tint-1: rgba(139, 92, 246, 0.18); --kpi-tint-2: rgba(99, 102, 241, 0.12); }
.dashboard-page .dash-kpi--pax { --kpi-accent-1: rgba(34, 197, 94, 1); --kpi-accent-2: rgba(16, 185, 129, 1); --kpi-tint-1: rgba(34, 197, 94, 0.18); --kpi-tint-2: rgba(16, 185, 129, 0.12); }
.dashboard-page .dash-kpi--revenue { --kpi-accent-1: rgba(245, 158, 11, 1); --kpi-accent-2: rgba(249, 115, 22, 1); --kpi-tint-1: rgba(245, 158, 11, 0.18); --kpi-tint-2: rgba(249, 115, 22, 0.12); }
.dashboard-page .dash-card .btn {
  border-radius: 999px;
  font-weight: 700;
}
.dashboard-page .dash-card .card-body {
  padding: 1.05rem 1.05rem;
}
.dashboard-page .action-tile {
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.12);
}

/* Common chart wrappers – subtle background to match cards when used standalone */
.chart-box,
.chart-canvas,
.chart-canvas-line,
.chart-canvas-pie {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%);
  border-radius: 8px;
}

/* Marketing Support: pastel blue card background */
.card.ms-card-blue {
  background: linear-gradient(180deg, #e8f3ff 0%, #eef7ff 100%) !important;
  border: 1px solid #e9ecef !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08) !important;
}

.ms-summary-list li {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ms-summary-label {
  color: #4b5563;
}
.badge.ms-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.badge.ms-badge-blue {
  background-color: #3b82f6;
  color: #ffffff;
}
.badge.ms-badge-green {
  background-color: #10b981;
  color: #ffffff;
}
.badge.ms-badge-violet {
  background-color: #8b5cf6;
  color: #ffffff;
}
.badge.ms-badge-amber {
  background-color: #f59e0b;
  color: #ffffff;
}

.progress.progress-20 {
  height: 20px;
}

.table-col-label {
  width: 220px;
}

.table-col-actions {
  width: 140px;
}

/* ========================================= */
/* MOBILE APP-LIKE ENHANCEMENTS */
/* ========================================= */

/* Mobile Bottom Navigation (Android-style) */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* Standard app bar height */
  background: #020617;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.85);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1040; /* Above bootstrap fixed-bottom */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease;
  position: relative;
}

.mobile-bottom-nav .nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mobile-bottom-nav .nav-item .menu-hamburger {
  width: 22px;
  height: 20px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mobile-bottom-nav .nav-item .menu-hamburger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}
.mobile-bottom-nav .nav-item .menu-hamburger span:nth-child(1) {
  width: 20px;
}
.mobile-bottom-nav .nav-item .menu-hamburger span:nth-child(2) {
  width: 14px;
}
.mobile-bottom-nav .nav-item .menu-hamburger span:nth-child(3) {
  width: 18px;
}

.mobile-bottom-nav .nav-item.active {
  color: #38bdf8;
}
.mobile-bottom-nav .nav-item.active i {
  transform: translateY(-2px);
}
.mobile-bottom-nav .nav-item.active .menu-hamburger {
  transform: translateY(-2px);
}

.mobile-bottom-nav .nav-item:active {
  background-color: rgba(15, 23, 42, 0.6);
}

/* Adjust body padding for mobile nav */
@media (max-width: 991px) {
  body.has-fixed-footer {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hide standard navbar toggler in favor of bottom menu */
  .navbar-toggler {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .app-content {
    margin-top: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: auto !important;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .alert {
    border-radius: 16px;
  }

  .card,
  .stats-card,
  .app-card,
  .compact-card {
    border-radius: 16px !important;
  }

  .card-header {
    padding: 12px 14px;
  }

  .card-body {
    padding: 14px;
  }

  .btn {
    border-radius: 14px;
    min-height: 44px;
  }

  .btn-sm,
  .btn-group-sm > .btn {
    min-height: 38px;
    border-radius: 12px;
  }

  .form-control,
  .form-select,
  .input-group .form-control,
  .input-group .form-select {
    min-height: 44px;
    border-radius: 14px;
  }

  .form-label {
    font-weight: 600;
  }

  .table-responsive {
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #020617;
    border: 1px solid rgba(148, 163, 184, 0.35);
    -webkit-overflow-scrolling: touch;
  }

  .table {
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
  }

  .modal-content {
    border-radius: 20px;
  }
}

/* Mobile Drawer (Side Menu) Styling */
@media (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
    top: calc(var(--app-bar-height, 72px) + 8px);
    left: 12px;
    right: 12px;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px);
    background: var(--app-sidebar-mobile-bg);
    overflow-y: auto;
    padding: 12px;
    z-index: 1035;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 18px;
    box-shadow: var(--app-sidebar-panel-shadow);
    /* Improve scroll behavior */
    -webkit-overflow-scrolling: touch;
  }

  .app-page-header {
    position: static;
    top: auto;
    z-index: 1;
    box-shadow: none;
  }

  .navbar-collapse::-webkit-scrollbar {
    width: 10px;
  }
  .navbar-collapse::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
  }

  /* Dropdown styling in mobile drawer */
  .navbar-nav .dropdown-menu {
    border: none;
    background: transparent;
    padding-left: 1rem;
    padding-top: 0;
    box-shadow: none;
    margin-left: 1rem;
    border-left: 2px solid #e2e8f0;
  }

  .navbar-nav .dropdown-item {
    color: #64748b;
    padding: 10px 16px;
    border-radius: 6px;
  }

  .navbar-nav .dropdown-item:hover,
  .navbar-nav .dropdown-item:active {
    background-color: #f1f5f9;
    color: var(--brand-primary);
  }
}

/* Android-like stacking for filters */
@media (max-width: 768px) {
  .filter-modern,
  .filter-form,
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .filter-modern .app-card-item,
  .filter-form .app-card-item,
  .filter-toolbar .app-card-item {
    width: 100%;
  }
  .filter-modern .btn,
  .filter-form .btn,
  .filter-toolbar .btn,
  .filter-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-modern,
  .btn-modern-sm,
  .hs-btn-same-height {
    width: 100%;
  }

  /* Spacing between stacked cards */
  .stats-card,
  .app-card,
  .card.ms-card-blue,
  .compact-card {
    margin-bottom: 0.75rem;
  }

  .table-responsive {
    font-size: 0.875rem;
  }
}

/* Page title & header tweaks for mobile */
@media (max-width: 576px) {
  .page-title-modern {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .page-title-modern .pt-text {
    flex-wrap: wrap;
  }

  .hs-filter-form {
    flex-wrap: wrap !important;
    row-gap: 0.5rem;
  }
  .hs-filter-form .form-control,
  .hs-filter-form .form-select {
    min-width: 100% !important;
  }
  .hs-filter-form .btn,
  .hs-btn-same-height {
    width: 100% !important;
    justify-content: center;
  }

  .btn-group.btn-group-sm .btn,
  .btn-group .btn {
    min-width: 40px;
    height: 36px;
  }
}

.brand-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20vw;
  display: block;
}
.navbar-brand {
  max-width: 26vw;
}

@media (min-width: 992px) {
  .navbar .navbar-brand {
    border-right: none;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
  }
  .navbar .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.9rem;
  }
}

/* Responsive Logo and Brand Text */
@media (max-width: 576px) {
  .app-logo {
    height: 48px !important;
    width: auto;
  }
  .brand-text {
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
    display: block;
  }
  .navbar-brand {
    margin-right: 0;
    max-width: 80%;
  }
}

html {
  scroll-behavior: auto !important;
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

.gs-report .gs-table-box {
  border-color: #e2e8f0 !important;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.gs-report .table thead.gs-table-head::before {
  border-top-color: #e2e8f0 !important;
}

.gs-report .gs-table {
  border-left-color: #e2e8f0 !important;
  border-right-color: #e2e8f0 !important;
}

.gs-report .gs-table > :not(caption) > * > * {
  border-right-color: #e2e8f0 !important;
}

.gs-report .gs-table > :not(caption) > * > *:first-child {
  border-left-color: #e2e8f0 !important;
}

.gs-report .gs-table thead th:first-child,
.gs-report .gs-table tbody td:first-child {
  border-left-color: #e2e8f0 !important;
}

.gs-report .gs-table thead th:last-child,
.gs-report .gs-table tbody td:last-child {
  border-right-color: #e2e8f0 !important;
}

.gs-report .gs-table-head th,
.gs-report .gs-table thead.gs-table-head th {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  color: #0f172a !important;
  border-top-color: #e2e8f0 !important;
  border-bottom-color: #e2e8f0 !important;
  text-transform: none;
  letter-spacing: 0.02em;
}

:root[data-theme="dark"] .gs-report .gs-table-box {
  border-color: var(--border-color-strong) !important;
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.45);
}

:root[data-theme="dark"] .gs-report .table thead.gs-table-head::before {
  border-top-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .gs-report .gs-table {
  border-left-color: var(--border-color-strong) !important;
  border-right-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .gs-report .gs-table > :not(caption) > * > * {
  border-right-color: var(--border-color) !important;
}

:root[data-theme="dark"] .gs-report .gs-table > :not(caption) > * > *:first-child {
  border-left-color: var(--border-color) !important;
}

:root[data-theme="dark"] .gs-report .gs-table thead th:first-child,
:root[data-theme="dark"] .gs-report .gs-table tbody td:first-child {
  border-left-color: var(--border-color) !important;
}

:root[data-theme="dark"] .gs-report .gs-table thead th:last-child,
:root[data-theme="dark"] .gs-report .gs-table tbody td:last-child {
  border-right-color: var(--border-color) !important;
}

:root[data-theme="dark"] .gs-report .gs-table-head th,
:root[data-theme="dark"] .gs-report .gs-table thead.gs-table-head th {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%) !important;
  color: var(--app-heading) !important;
  border-top-color: var(--border-color-strong) !important;
  border-bottom-color: var(--border-color-strong) !important;
}

.gs-report .gs-table th,
.gs-report .gs-table td {
  font-size: 0.9rem;
}

.gs-report .gs-table td.gs-cell-wrap {
  white-space: normal !important;
  min-width: 260px;
}

.gs-report .gs-table td.gs-cell-wrap-lg {
  white-space: normal !important;
  min-width: 340px;
}

/* Financial Performance */
.fp-report .financial-card {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.75) 0%, #ffffff 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

:root[data-theme="dark"] .fp-report .financial-card {
  border-color: var(--border-color-strong) !important;
  background: linear-gradient(180deg, rgb(17 28 51 / 0.92) 0%, rgb(15 23 42 / 0.96) 100%) !important;
  box-shadow: 0 18px 54px rgb(0 0 0 / 0.48);
  color: var(--app-text) !important;
}

.fp-report .financial-card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

:root[data-theme="dark"] .fp-report .financial-card .card-header {
  border-bottom-color: var(--border-color) !important;
}

.fp-report .fp-chart-container {
  height: 360px;
  position: relative;
  padding: 0.75rem;
  border-radius: 12px;
  background: radial-gradient(circle at top left, rgba(239, 246, 255, 0.9) 0%, #ffffff 70%);
  border: 1px solid #e2e8f0;
}

:root[data-theme="dark"] .fp-report .fp-chart-container {
  background: radial-gradient(circle at top left, rgb(var(--app-accent-1-rgb) / 0.12) 0%, var(--surface-0) 70%) !important;
  border-color: var(--border-color-strong) !important;
}

.fp-report .financial-table-wrapper {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

:root[data-theme="dark"] .fp-report .financial-table-wrapper {
  border-color: var(--border-color-strong) !important;
}

.fp-report .financial-data-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.fp-report .financial-data-table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0f172a;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
  border-top: none;
  white-space: nowrap;
}

:root[data-theme="dark"] .fp-report .financial-data-table thead th {
  color: var(--app-heading) !important;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%) !important;
  border-bottom-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .fp-report .financial-data-table tbody tr + tr {
  border-top-color: var(--border-color) !important;
}

:root[data-theme="dark"] .fp-report .financial-data-table tbody td {
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .fp-report .financial-data-table .metric-label {
  background-color: rgb(255 255 255 / 0.06) !important;
  color: var(--app-text) !important;
}

:root[data-theme="dark"] .fp-report .financial-data-table tbody tr:hover {
  background: rgb(255 255 255 / 0.04) !important;
}

:root[data-theme="dark"] .fp-report .financial-data-table tbody tr.total-row {
  background: rgb(255 255 255 / 0.06) !important;
}

:root[data-theme="dark"] .fp-report .financial-data-table tbody tr.total-row:hover {
  background: rgb(255 255 255 / 0.08) !important;
}

:root[data-theme="dark"] .platform-x {
  color: var(--app-text) !important;
}

.fp-report .financial-data-table thead th:first-child {
  padding-left: 1.25rem;
}

.fp-report .financial-data-table tbody tr + tr {
  border-top: 1px solid #f1f5f9;
}

.fp-report .financial-data-table tbody td {
  border-top: none;
  white-space: nowrap;
}

.fp-report .financial-data-table tbody td:first-child {
  width: 260px;
  white-space: normal;
}

.fp-report .financial-data-table .metric-label {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background-color: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.85rem;
}

.fp-report .financial-data-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.75) 0%, rgba(253, 242, 255, 0.45) 100%);
}

.fp-report .financial-data-table tbody tr.total-row {
  background: linear-gradient(90deg, rgba(224, 242, 254, 0.9) 0%, rgba(219, 234, 254, 0.75) 100%);
}

.fp-report .financial-data-table tbody tr.total-row:hover {
  background: linear-gradient(90deg, rgba(219, 234, 254, 0.95) 0%, rgba(191, 219, 254, 0.85) 100%);
}

.fp-report .financial-data-table tbody td.text-end {
  font-variant-numeric: tabular-nums;
}