:root {
  --brand: #3b5bdb;
  --brand-dark: #2f49ae;
  --brand-soft: #eef2ff;
  --text-main: #1f2937;
  --text-soft: #6b7280;
  --border-soft: #e5e7eb;
  --surface-glass: rgba(255, 255, 255, 0.9);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 18px 38px rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] {
  --brand: #6f8bff;
  --brand-dark: #5a74df;
  --brand-soft: #1d2847;
  --text-main: #e5e7eb;
  --text-soft: #9ca3af;
  --border-soft: #334155;
  --surface-glass: rgba(17, 24, 39, 0.8);
  --shadow-soft: 0 10px 30px rgba(2, 6, 23, 0.35);
  --shadow-hover: 0 18px 38px rgba(2, 6, 23, 0.5);
}

body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text-main);
  line-height: 1.55;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
}

body.page-transition-init .app-navbar,
body.page-transition-init main,
body.page-transition-init .modal.show .modal-dialog {
  opacity: 0;
  transform: translateY(18px);
}

body.page-transition-init.page-transition-ready .app-navbar,
body.page-transition-init.page-transition-ready main,
body.page-transition-init.page-transition-ready .modal.show .modal-dialog {
  opacity: 1;
  transform: translateY(0);
}

body.page-transition-init .app-navbar,
body.page-transition-init main {
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-transition-init main > *,
body.page-transition-init main .card,
body.page-transition-init main section,
body.page-transition-init main .row {
  opacity: 0;
  transform: translateY(16px);
}

body.page-transition-init.page-transition-ready main > *,
body.page-transition-init.page-transition-ready main .card,
body.page-transition-init.page-transition-ready main section,
body.page-transition-init.page-transition-ready main .row {
  opacity: 1;
  transform: translateY(0);
}

body.page-transition-init.page-transition-ready main > *,
body.page-transition-init.page-transition-ready main section,
body.page-transition-init.page-transition-ready main .row,
body.page-transition-init.page-transition-ready main .card {
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-transition-init.page-transition-ready main > *:nth-child(1),
body.page-transition-init.page-transition-ready main .row:nth-child(1),
body.page-transition-init.page-transition-ready main section:nth-child(1) {
  transition-delay: 0.04s;
}

body.page-transition-init.page-transition-ready main > *:nth-child(2),
body.page-transition-init.page-transition-ready main .row:nth-child(2),
body.page-transition-init.page-transition-ready main section:nth-child(2) {
  transition-delay: 0.1s;
}

body.page-transition-init.page-transition-ready main > *:nth-child(3),
body.page-transition-init.page-transition-ready main .row:nth-child(3),
body.page-transition-init.page-transition-ready main section:nth-child(3) {
  transition-delay: 0.16s;
}

body.page-transition-init.page-transition-ready main > *:nth-child(4),
body.page-transition-init.page-transition-ready main .row:nth-child(4),
body.page-transition-init.page-transition-ready main section:nth-child(4) {
  transition-delay: 0.22s;
}

body.page-transition-init.page-transition-ready main > *:nth-child(5),
body.page-transition-init.page-transition-ready main .row:nth-child(5),
body.page-transition-init.page-transition-ready main section:nth-child(5) {
  transition-delay: 0.28s;
}

body.page-transition-init.page-transition-ready main > *:nth-child(6),
body.page-transition-init.page-transition-ready main .row:nth-child(6),
body.page-transition-init.page-transition-ready main section:nth-child(6) {
  transition-delay: 0.34s;
}

body[data-page="login"].page-transition-init .login-panel,
body[data-page="login"].page-transition-init .login-slides-panel {
  opacity: 0;
  transform: translateY(20px) scale(0.985);
}

body[data-page="login"].page-transition-init.page-transition-ready .login-panel,
body[data-page="login"].page-transition-init.page-transition-ready .login-slides-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.5s ease,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-page="login"].page-transition-init.page-transition-ready .login-slides-panel {
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  body.page-transition-init .app-navbar,
  body.page-transition-init main,
  body.page-transition-init main > *,
  body.page-transition-init main .card,
  body.page-transition-init main section,
  body.page-transition-init main .row,
  body[data-page="login"].page-transition-init .login-panel,
  body[data-page="login"].page-transition-init .login-slides-panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.language-switcher {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1055;
  width: 170px;
}

body[data-page="login"] .language-switcher {
  width: 86px;
}

body[data-page="login"] .language-switcher .form-select {
  min-height: 34px;
  height: 34px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 999px;
  padding-right: 1.65rem;
}

.premium-floating-control {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.premium-language-switcher .form-select {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

[dir="rtl"] .language-switcher {
  left: auto;
  right: 12px;
}

body[data-page="admin"] .language-switcher,
body[data-page="client"] .language-switcher {
  top: 78px;
}

@media (max-width: 575.98px) {
  body[data-page="admin"] .language-switcher,
  body[data-page="client"] .language-switcher {
    top: 72px;
    width: 150px;
  }
}

.bg-pattern {
  background:
    radial-gradient(1200px 500px at -10% -5%, #dbe8ff 0%, rgba(219, 232, 255, 0) 60%),
    radial-gradient(1000px 420px at 110% 0%, #dff7f0 0%, rgba(223, 247, 240, 0) 56%),
    linear-gradient(180deg, #f8faff 0%, #f3f6fd 100%);
  min-height: 100vh;
}

[data-theme="dark"].bg-pattern {
  background:
    radial-gradient(1200px 500px at -10% -5%, rgba(31, 41, 55, 0.9) 0%, rgba(31, 41, 55, 0) 60%),
    radial-gradient(1000px 420px at 110% 0%, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0) 56%),
    linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.theme-toggle {
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 1050;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), #8ab4ff);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(59, 91, 219, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-theme-toggle {
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.premium-filter-toolbar {
  padding: 0.95rem 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82));
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.premium-admin-tabs {
  padding: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.9));
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.09);
}

.premium-admin-tabs .nav-item {
  flex: 1 1 auto;
}

.premium-admin-tabs .nav-link {
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #475569;
  background: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.premium-admin-tabs .nav-link:hover,
.premium-admin-tabs .nav-link:focus-visible {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.premium-admin-tabs .nav-link.active {
  color: #fff;
  border-color: rgba(99, 102, 241, 0.22);
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 16px 30px rgba(79, 70, 229, 0.28);
}

.premium-admin-toolbar-card,
.premium-admin-search-card,
.premium-admin-data-card {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.93));
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.08) !important;
}

.premium-admin-data-card-danger {
  border-color: rgba(248, 113, 113, 0.18) !important;
}

.premium-admin-toolbar-card::before,
.premium-admin-search-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #8b5cf6, #06b6d4);
}

.premium-admin-search-card::before {
  background: linear-gradient(90deg, #0ea5e9, #14b8a6, #22c55e);
}

.premium-admin-toolbar-card-danger::before {
  background: linear-gradient(90deg, #ef4444, #f97316, #facc15);
}

.premium-admin-toolbar-card .card-body,
.premium-admin-search-card .card-body {
  position: relative;
}

.premium-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-section-caption {
  max-width: 42rem;
}

.premium-search-card-heading h3 {
  color: #0f172a;
  font-weight: 800;
}

.premium-admin-search-card .form-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.premium-role-filter-toolbar {
  padding: 0.4rem;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(248, 250, 252, 0.85);
}

.premium-admin-search-group {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.92);
}

.premium-search-icon {
  border: 0;
  color: #2563eb;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(14, 165, 233, 0.14));
  font-size: 1rem;
}

.premium-admin-search-group .form-control,
.premium-admin-search-card .form-control,
.premium-admin-search-card .form-select,
.premium-admin-toolbar-card .form-control,
.premium-admin-toolbar-card .form-select {
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: none;
}

.premium-admin-search-group .form-control {
  border: 0;
  background: transparent;
}

.premium-admin-search-group .form-control:focus {
  box-shadow: none;
}

.premium-admin-search-card .form-control:focus,
.premium-admin-search-card .form-select:focus,
.premium-admin-toolbar-card .form-control:focus,
.premium-admin-toolbar-card .form-select:focus {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.12);
}

.premium-admin-cta-btn,
.premium-admin-danger-btn {
  min-height: 46px;
  padding-inline: 1rem;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.premium-admin-danger-btn {
  box-shadow: 0 12px 24px rgba(239, 68, 68, 0.12);
}

body.dark-mode .premium-filter-toolbar,
[data-theme="dark"] .premium-filter-toolbar {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.9));
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 22px 40px rgba(2, 6, 23, 0.38);
}

body.dark-mode .premium-admin-tabs,
[data-theme="dark"] .premium-admin-tabs {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.92));
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 46px rgba(2, 6, 23, 0.4);
}

body.dark-mode .premium-admin-tabs .nav-link,
[data-theme="dark"] .premium-admin-tabs .nav-link {
  color: #cbd5e1;
}

body.dark-mode .premium-admin-tabs .nav-link:hover,
body.dark-mode .premium-admin-tabs .nav-link:focus-visible,
[data-theme="dark"] .premium-admin-tabs .nav-link:hover,
[data-theme="dark"] .premium-admin-tabs .nav-link:focus-visible {
  color: #fff;
  background: rgba(51, 65, 85, 0.92);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28);
}

body.dark-mode .premium-admin-tabs .nav-link.active,
[data-theme="dark"] .premium-admin-tabs .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  box-shadow: 0 18px 34px rgba(59, 130, 246, 0.26);
}

body.dark-mode .premium-admin-toolbar-card,
body.dark-mode .premium-admin-search-card,
body.dark-mode .premium-admin-data-card,
[data-theme="dark"] .premium-admin-toolbar-card,
[data-theme="dark"] .premium-admin-search-card,
[data-theme="dark"] .premium-admin-data-card {
  border-color: rgba(148, 163, 184, 0.16) !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.97), rgba(15, 23, 42, 0.94));
  box-shadow: 0 24px 44px rgba(2, 6, 23, 0.38) !important;
}

body.dark-mode .premium-admin-data-card-danger,
[data-theme="dark"] .premium-admin-data-card-danger {
  border-color: rgba(248, 113, 113, 0.16) !important;
}

body.dark-mode .premium-section-kicker,
[data-theme="dark"] .premium-section-kicker {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.18);
}

body.dark-mode .premium-search-card-heading h3,
[data-theme="dark"] .premium-search-card-heading h3 {
  color: #f8fafc;
}

body.dark-mode .premium-admin-search-card .form-label,
[data-theme="dark"] .premium-admin-search-card .form-label {
  color: #94a3b8;
}

body.dark-mode .premium-role-filter-toolbar,
[data-theme="dark"] .premium-role-filter-toolbar {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.55);
}

body.dark-mode .premium-admin-search-group,
[data-theme="dark"] .premium-admin-search-group {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.74);
}

body.dark-mode .premium-search-icon,
[data-theme="dark"] .premium-search-icon {
  color: #93c5fd;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.22));
}

body.dark-mode .premium-admin-search-group .form-control,
body.dark-mode .premium-admin-search-card .form-control,
body.dark-mode .premium-admin-search-card .form-select,
body.dark-mode .premium-admin-toolbar-card .form-control,
body.dark-mode .premium-admin-toolbar-card .form-select,
[data-theme="dark"] .premium-admin-search-group .form-control,
[data-theme="dark"] .premium-admin-search-card .form-control,
[data-theme="dark"] .premium-admin-search-card .form-select,
[data-theme="dark"] .premium-admin-toolbar-card .form-control,
[data-theme="dark"] .premium-admin-toolbar-card .form-select {
  color: #e2e8f0;
  background: transparent;
  border-color: rgba(148, 163, 184, 0.2);
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(59, 91, 219, 0.42);
}

.header-theme-toggle {
  position: static;
  right: auto;
  bottom: auto;
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 0.8rem;
  border-radius: 0.7rem;
  box-shadow: 0 6px 14px rgba(59, 91, 219, 0.26);
}

.header-theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 16px rgba(59, 91, 219, 0.34);
}

.glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.brand-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand), #6ea8fe);
  box-shadow: 0 10px 24px rgba(59, 91, 219, 0.3);
}

.company-logo {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.login-company-logo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-border-radius: 0.85rem;
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-weight: 600;
}

.btn,
.form-control,
.form-select {
  border-radius: 0.85rem;
}

.btn {
  transition: transform 0.16s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  font-weight: 600;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.form-control,
.form-select {
  border: 1px solid var(--border-soft);
  background-color: rgba(255, 255, 255, 0.86);
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.form-control:focus,
.form-select:focus {
  border-color: #9db3ff;
  box-shadow: 0 0 0 0.25rem rgba(59, 91, 219, 0.14);
}

.app-navbar {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  transition: transform 0.28s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.app-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 58%);
}

[data-theme="dark"] .app-navbar {
  background: rgba(17, 24, 39, 0.75);
  border-bottom-color: rgba(51, 65, 85, 0.8);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
}

.app-navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

[data-theme="dark"] .app-navbar.is-scrolled {
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.62);
}

.app-navbar.scroll-down {
  transform: translateY(-105%);
}

.app-navbar.scroll-up {
  transform: translateY(0);
}

[data-theme="dark"] .navbar-brand {
  color: #b8860b !important;
}

.navbar-brand {
  position: relative;
  z-index: 1;
  letter-spacing: 0.3px;
  font-size: 1.04rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.header-actions {
  position: relative;
  z-index: 1;
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

[dir="rtl"] .header-actions {
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}

.navbar-toggler {
  border: 1px solid #dbe3ff;
  border-radius: 0.65rem;
  padding: 0.42rem 0.52rem;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 18px rgba(59, 91, 219, 0.16);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.22rem rgba(59, 91, 219, 0.2);
}

.navbar-toggler-icon {
  width: 1.3rem;
  height: 1.3rem;
  background-size: 1.2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2859, 91, 219, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="dark"] .navbar-toggler {
  border-color: rgba(184, 134, 11, 0.45);
  background: rgba(30, 41, 59, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(2, 6, 23, 0.5);
}

[data-theme="dark"] .navbar-toggler:focus {
  box-shadow: 0 0 0 0.22rem rgba(184, 134, 11, 0.28);
}

[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 215, 120, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.page-content {
  max-width: 1400px;
}

.header-language-select {
  width: 82px;
  min-width: 82px;
  padding-right: 1.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
}

.header-actions .btn,
.header-actions .form-select {
  border-radius: 999px !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.header-actions .btn:hover,
.header-actions .form-select:hover {
  transform: translateY(-1px);
}

.sales-range-select {
  width: 170px;
  font-weight: 700;
}

.card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-soft) !important;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

[data-theme="dark"] .card {
  background: rgba(17, 24, 39, 0.72);
  border-color: rgba(51, 65, 85, 0.95) !important;
  box-shadow: var(--shadow-soft) !important;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover) !important;
}

.card-body {
  padding: 1.1rem;
}

.card-stat {
  border-left: 0 !important;
  position: relative;
  overflow: hidden;
}

.stat-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  margin-bottom: 0.7rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(6, 182, 212, 0.18));
  font-size: 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.section-title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.section-title-with-icon-sm {
  gap: 0.55rem;
}

.section-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(6, 182, 212, 0.16));
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.section-icon-badge-sm {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.65rem;
  font-size: 0.92rem;
}

.client-stat-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.client-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.client-stat-card::after {
  content: "";
  position: absolute;
  right: -1.2rem;
  bottom: -1.5rem;
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.client-stat-card .card-body {
  position: relative;
  z-index: 1;
}

.client-stat-card .stat-card-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 18px rgba(15, 23, 42, 0.1);
}

.client-stat-card .text-secondary,
.client-stat-card h3 {
  color: #ffffff !important;
}

.client-stat-card-points {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 52%, #3b82f6 100%) !important;
  box-shadow: 0 18px 36px rgba(99, 102, 241, 0.24) !important;
}

.client-stat-card-sales {
  background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 52%, #0ea5e9 100%) !important;
  box-shadow: 0 18px 36px rgba(6, 182, 212, 0.22) !important;
}

.client-stat-card-invoices {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 52%, #ef4444 100%) !important;
  box-shadow: 0 18px 36px rgba(249, 115, 22, 0.22) !important;
}

.client-stat-card-status {
  background: linear-gradient(135deg, #22c55e 0%, #14b8a6 52%, #0ea5e9 100%) !important;
  box-shadow: 0 18px 36px rgba(34, 197, 94, 0.22) !important;
}

.client-stat-card-points .stat-card-icon,
.client-stat-card-sales .stat-card-icon,
.client-stat-card-invoices .stat-card-icon,
.client-stat-card-status .stat-card-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.client-activity-card {
  position: relative;
  overflow: hidden;
}

.client-activity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 32%),
    radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.1), transparent 30%);
  pointer-events: none;
}

.client-activity-card .card-body {
  position: relative;
  z-index: 1;
}

.client-activity-chart-shell {
  height: 100%;
  min-height: 280px;
}

.client-activity-canvas-wrap {
  position: relative;
  min-height: 280px;
  padding: 0.85rem 0.4rem 0.2rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.client-activity-canvas-wrap canvas {
  width: 100% !important;
  height: 250px !important;
}

.client-activity-metrics {
  display: grid;
  gap: 0.85rem;
  height: 100%;
}

.client-activity-metric-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 84px;
  padding: 1rem 1.05rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.84));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.client-activity-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(249, 115, 22, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
}

.client-activity-metric-label {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.client-activity-metric-value {
  color: var(--text-main);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
}

.client-activity-metric-value-sm {
  font-size: 1rem;
}

[data-theme="dark"] .client-stat-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 55%);
}

[data-theme="dark"] .client-stat-card .stat-card-icon {
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 18px rgba(2, 6, 23, 0.22);
}

[data-theme="dark"] .client-activity-canvas-wrap {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(17, 24, 39, 0.92));
  border-color: rgba(71, 85, 105, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .client-activity-metric-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.82));
  border-color: rgba(71, 85, 105, 0.4);
  box-shadow: 0 18px 32px rgba(2, 6, 23, 0.28);
}

[data-theme="dark"] .client-activity-metric-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(249, 115, 22, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .client-activity-metric-value {
  color: #f8fafc;
}

.stat-card-button {
  padding: 0;
  background: #fff;
  color: inherit;
}

.stat-card-button:hover,
.stat-card-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.14) !important;
  outline: none;
}

.card-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #87a4ff, #3b5bdb);
}

.card-stat h3 {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.progress {
  height: 18px;
  border-radius: 100px;
  background: #e9eefc;
}

.progress-bar {
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(90deg, #20c997, #198754);
}

.reward-progress-shell {
  height: 22px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.95)),
    #e9eefc;
  box-shadow:
    inset 0 2px 8px rgba(15, 23, 42, 0.08),
    0 10px 18px rgba(37, 99, 235, 0.08);
}

.reward-progress-fill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
  background:
    linear-gradient(135deg, #2dd4bf 0%, #14b8a6 38%, #0ea5a4 72%, #0891b2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -8px 14px rgba(8, 145, 178, 0.24);
  transition: width 1.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  isolation: isolate;
}

.reward-progress-fill::before,
.reward-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reward-progress-fill::before {
  inset: auto -20% -38% -20%;
  height: 180%;
  background:
    radial-gradient(circle at 12% 42%, rgba(255, 255, 255, 0.34) 0 10%, transparent 11%),
    radial-gradient(circle at 28% 58%, rgba(255, 255, 255, 0.2) 0 8%, transparent 9%),
    radial-gradient(circle at 46% 36%, rgba(255, 255, 255, 0.28) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 60%, rgba(255, 255, 255, 0.18) 0 8%, transparent 9%),
    radial-gradient(circle at 82% 38%, rgba(255, 255, 255, 0.26) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
  animation: reward-progress-wave 4.2s linear infinite;
}

.reward-progress-fill::after {
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 24%,
    rgba(255, 255, 255, 0.34) 46%,
    rgba(255, 255, 255, 0.08) 68%,
    transparent 100%
  );
  transform: translateX(-130%);
  animation: reward-progress-shimmer 2.8s ease-in-out infinite;
}

.reward-progress-fill:not(.zero) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -10px 16px rgba(8, 145, 178, 0.28),
    0 8px 18px rgba(20, 184, 166, 0.22);
}

.progress-bar.zero {
  width: 0%;
}

[data-theme="dark"] .reward-progress-shell {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.98)),
    rgba(15, 23, 42, 0.96);
  box-shadow:
    inset 0 2px 8px rgba(2, 6, 23, 0.48),
    0 10px 20px rgba(2, 6, 23, 0.26);
}

[data-theme="dark"] .reward-progress-fill {
  color: #ecfeff;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.5);
  background:
    linear-gradient(135deg, #22d3ee 0%, #06b6d4 32%, #0891b2 68%, #0f766e 100%);
}

@keyframes reward-progress-wave {
  0% {
    transform: translate3d(-14%, 10%, 0) scaleX(1.05);
  }
  50% {
    transform: translate3d(12%, -6%, 0) scaleX(0.98);
  }
  100% {
    transform: translate3d(-14%, 10%, 0) scaleX(1.05);
  }
}

@keyframes reward-progress-shimmer {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reward-progress-fill {
    transition-duration: 0.01ms;
  }

  .reward-progress-fill::before,
  .reward-progress-fill::after {
    animation: none;
  }
}

.nav-pills .nav-link {
  border-radius: 999px;
  color: #3b4257;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e6eaf7;
}

[data-theme="dark"] .nav-pills .nav-link {
  color: #d1d5db;
  background: rgba(30, 41, 59, 0.65);
  border-color: #334155;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--brand), #6787ff);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(59, 91, 219, 0.3);
}

.table {
  --bs-table-bg: transparent;
}

[data-theme="dark"] .table {
  --bs-table-color: #e5e7eb;
  --bs-table-striped-color: #e5e7eb;
  --bs-table-hover-color: #e5e7eb;
  --bs-table-striped-bg: rgba(30, 41, 59, 0.55);
  --bs-table-hover-bg: rgba(59, 130, 246, 0.18);
  --bs-table-bg: transparent;
}

[data-theme="dark"] .table-light {
  --bs-table-bg: #1e293b;
  --bs-table-color: #e5e7eb;
}

[data-theme="dark"] .premium-table-card .border-bottom {
  border-bottom-color: rgba(71, 85, 105, 0.28) !important;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(17, 24, 39, 0.94));
}

[data-theme="dark"] .premium-data-table-wrap {
  border-color: rgba(71, 85, 105, 0.32);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(17, 24, 39, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 34px rgba(2, 6, 23, 0.24);
}

[data-theme="dark"] .premium-data-table {
  --bs-table-striped-bg: rgba(30, 41, 59, 0.52);
  --bs-table-hover-bg: rgba(14, 165, 233, 0.11);
}

[data-theme="dark"] .premium-data-table > :not(caption) > * > * {
  border-bottom-color: rgba(71, 85, 105, 0.28);
}

[data-theme="dark"] .premium-data-table thead th {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
  color: #fb923c !important;
  box-shadow: inset 0 -1px 0 rgba(71, 85, 105, 0.22);
}

[data-theme="dark"] .premium-data-table tbody tr:hover {
  box-shadow: inset 0 0 0 999px rgba(14, 165, 233, 0.06);
}

.table thead th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-soft);
  font-weight: 700;
}

.table tbody tr {
  transition: all 0.2s ease;
}

.table-hover tbody tr:hover,
.table-striped tbody tr:hover {
  background: #f3f6ff;
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-striped tbody tr:hover {
  background: rgba(59, 130, 246, 0.18);
}

[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
}

.text-secondary,
.form-text {
  color: var(--text-soft) !important;
}

.table-responsive {
  border-radius: 0.95rem;
}

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

.premium-table-card .border-bottom {
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.92));
}

.premium-data-table-wrap {
  position: relative;
  border-radius: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 32px rgba(15, 23, 42, 0.05);
}

.premium-data-table-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6, #0ea5e9, #f97316);
  opacity: 0.95;
  z-index: 3;
}

.premium-data-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(59, 130, 246, 0.035);
  --bs-table-hover-bg: rgba(14, 165, 233, 0.07);
  margin-bottom: 0;
}

.premium-data-table > :not(caption) > * > * {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

.premium-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(239, 246, 255, 0.96)) !important;
  color: #c2410c !important;
  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.12);
}

.premium-data-table tbody tr {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.premium-data-table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.24);
}

.premium-data-table tbody td:first-child,
.premium-data-table thead th:first-child {
  padding-left: 1.1rem;
}

.premium-data-table tbody td:last-child,
.premium-data-table thead th:last-child {
  padding-right: 1.1rem;
}

.premium-data-table .table-skeleton-row:hover {
  transform: none;
  box-shadow: none;
}

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.table-person-cell {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.table-person-cell-compact {
  gap: 0.65rem;
}

.table-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(6, 182, 212, 0.18));
  color: #312e81;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.table-avatar-small {
  width: 2.15rem;
  height: 2.15rem;
  flex-basis: 2.15rem;
  font-size: 0.74rem;
}

.table-person-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.table-person-copy strong,
.table-person-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 132px;
  padding: 1rem;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.8));
  text-align: center;
}

.table-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.premium-status-chip {
  --chip-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(100, 116, 139, 0.16));
  --chip-color: #334155;
  --chip-border: rgba(148, 163, 184, 0.28);
  --chip-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-color);
  box-shadow: var(--chip-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.premium-status-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  font-size: 0.85rem;
}

.premium-status-chip-label {
  white-space: nowrap;
}

.premium-status-chip-inline {
  vertical-align: middle;
}

.premium-status-chip-large {
  padding: 0.62rem 0.95rem;
  font-size: 0.92rem;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.premium-status-chip-primary {
  --chip-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.16));
  --chip-color: #1d4ed8;
  --chip-border: rgba(59, 130, 246, 0.26);
}

.premium-status-chip-success {
  --chip-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.16));
  --chip-color: #15803d;
  --chip-border: rgba(34, 197, 94, 0.26);
}

.premium-status-chip-danger {
  --chip-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(220, 38, 38, 0.16));
  --chip-color: #b91c1c;
  --chip-border: rgba(239, 68, 68, 0.26);
}

.premium-status-chip-warning {
  --chip-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.16));
  --chip-color: #b45309;
  --chip-border: rgba(245, 158, 11, 0.28);
}

.premium-status-chip-info {
  --chip-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(2, 132, 199, 0.16));
  --chip-color: #0369a1;
  --chip-border: rgba(14, 165, 233, 0.26);
}

.premium-status-chip-secondary {
  --chip-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(100, 116, 139, 0.16));
  --chip-color: #475569;
  --chip-border: rgba(148, 163, 184, 0.28);
}

.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.1rem;
  padding-inline: 0.72rem;
  border-radius: 999px !important;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.table-action-btn:disabled {
  opacity: 0.58;
  box-shadow: none;
}

.table-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  font-size: 0.9rem;
}

.table-action-label {
  white-space: nowrap;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

.table-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(6, 182, 212, 0.16));
  font-size: 1.35rem;
}

.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 160px;
  padding: 1.15rem;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.84));
}

.empty-state-card-compact {
  min-height: 124px;
  padding: 0.95rem;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(6, 182, 212, 0.18));
  font-size: 1.45rem;
}

.empty-state-title {
  font-weight: 800;
  color: var(--text-main);
}

.empty-state-hint {
  max-width: 32rem;
  color: var(--text-soft);
  font-size: 0.9rem;
}

[data-theme="dark"] .table-avatar {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(6, 182, 212, 0.28));
  color: #e0e7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .table-empty-state {
  border-color: rgba(71, 85, 105, 0.72);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.78));
}

[data-theme="dark"] .premium-status-chip {
  --chip-color: #e2e8f0;
  --chip-border: rgba(71, 85, 105, 0.68);
  --chip-shadow: 0 14px 24px rgba(2, 6, 23, 0.32);
}

[data-theme="dark"] .premium-status-chip-primary {
  --chip-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(29, 78, 216, 0.22));
}

[data-theme="dark"] .premium-status-chip-success {
  --chip-bg: linear-gradient(135deg, rgba(22, 163, 74, 0.28), rgba(21, 128, 61, 0.22));
}

[data-theme="dark"] .premium-status-chip-danger {
  --chip-bg: linear-gradient(135deg, rgba(220, 38, 38, 0.28), rgba(185, 28, 28, 0.22));
}

[data-theme="dark"] .premium-status-chip-warning {
  --chip-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.28), rgba(180, 83, 9, 0.22));
}

[data-theme="dark"] .premium-status-chip-info {
  --chip-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.28), rgba(3, 105, 161, 0.22));
}

[data-theme="dark"] .premium-status-chip-secondary {
  --chip-bg: linear-gradient(135deg, rgba(71, 85, 105, 0.34), rgba(51, 65, 85, 0.24));
}

[data-theme="dark"] .table-action-btn {
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.32);
}

[data-theme="dark"] .table-empty-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.24));
}

[data-theme="dark"] .empty-state-card {
  border-color: rgba(71, 85, 105, 0.72);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.8));
}

[data-theme="dark"] .empty-state-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.24));
}

[data-theme="dark"] .empty-state-title {
  color: #f8fafc;
}

.modal-content {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1rem;
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

[data-theme="dark"] .modal-content {
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.55);
}

.modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  padding: 1rem 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.9));
  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.12);
}

.modal-header .h5,
.modal-header h2.h5 {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.modal-header .btn-close {
  border-radius: 999px;
  padding: 0.7rem;
  background-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
  opacity: 0.88;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.14);
  opacity: 1;
}

.confirm-action-dialog {
  width: min(440px, calc(100vw - 1.5rem));
  max-width: min(440px, calc(100vw - 1.5rem));
  margin-left: auto;
  margin-right: auto;
}

#confirmActionModal .modal-dialog-centered {
  min-height: calc(100% - 1rem);
}

.confirm-action-content {
  overflow: hidden;
  border: 1px solid rgba(248, 113, 113, 0.2);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
}

.confirm-action-card {
  padding: 1.5rem 1.5rem 0.75rem;
  text-align: center;
}

.confirm-action-icon-wrap {
  width: 68px;
  height: 68px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at top, #fee2e2, #fecaca);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.confirm-action-icon-wrap.is-safe {
  background: radial-gradient(circle at top, #dbeafe, #bfdbfe);
}

.confirm-action-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}

.confirm-action-icon-wrap.is-safe .confirm-action-icon {
  background: #2563eb;
}

.confirm-action-title {
  margin-bottom: 0.45rem;
  font-size: 1.2rem;
  font-weight: 800;
}

.confirm-action-text {
  color: var(--text-soft);
  font-size: 0.96rem;
}

.confirm-action-footer {
  border-top: 0;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.5rem 1.25rem 1.35rem;
}

.confirm-action-footer .btn {
  min-width: 120px;
}

[data-setting-toggle-group] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

[data-setting-toggle-group] .btn-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  direction: ltr;
}

[data-setting-toggle-group] .btn-group > .btn {
  width: 100%;
  white-space: nowrap;
  text-align: center;
}

#roleManagerList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.role-manager-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.88));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.role-manager-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.role-manager-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.role-manager-code-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.role-manager-row-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.role-manager-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.role-manager-field {
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
}

.role-manager-launcher {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 246, 255, 0.86));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.role-manager-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.role-manager-actions .btn-primary,
.role-manager-actions .btn-primary:hover,
.role-manager-actions .btn-primary:focus,
.role-manager-actions .btn-primary:active,
.role-manager-actions .btn-check:checked + .btn-primary,
.role-manager-actions .btn-primary.active,
.role-manager-actions .show > .btn-primary.dropdown-toggle {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
}

.role-manager-actions .btn-outline-danger,
.role-manager-actions .btn-outline-danger:hover,
.role-manager-actions .btn-outline-danger:focus,
.role-manager-actions .btn-outline-danger:active,
.role-manager-actions .btn-check:checked + .btn-outline-danger,
.role-manager-actions .btn-outline-danger.active,
.role-manager-actions .show > .btn-outline-danger.dropdown-toggle {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-color: #ffffff;
  color: #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: #dc2626 !important;
}

.role-manager-actions .btn-outline-danger:hover,
.role-manager-actions .btn-outline-danger:focus,
.role-manager-actions .btn-outline-danger:active,
.role-manager-actions .btn-check:checked + .btn-outline-danger,
.role-manager-actions .btn-outline-danger.active,
.role-manager-actions .show > .btn-outline-danger.dropdown-toggle {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22);
}

[data-theme="dark"] .role-manager-actions .btn-primary,
[data-theme="dark"] .role-manager-actions .btn-primary:hover,
[data-theme="dark"] .role-manager-actions .btn-primary:focus,
[data-theme="dark"] .role-manager-actions .btn-primary:active,
[data-theme="dark"] .role-manager-actions .btn-outline-danger,
[data-theme="dark"] .role-manager-actions .btn-outline-danger:hover,
[data-theme="dark"] .role-manager-actions .btn-outline-danger:focus,
[data-theme="dark"] .role-manager-actions .btn-outline-danger:active {
  color: #ffffff !important;
}

.role-manager-hero {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.4rem;
  border: 1px solid rgba(191, 219, 254, 0.95);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.95));
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.12);
}

.role-manager-hero::after {
  content: "";
  position: absolute;
  top: -42px;
  right: -24px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 68%);
}

.role-manager-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.role-manager-add-card {
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.92));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

[dir="rtl"] [data-setting-toggle-group] .btn-group > .btn {
  border-radius: 0.7rem;
}

[data-theme="dark"] .role-manager-row {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.84));
  border-color: rgba(71, 85, 105, 0.8);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.45);
}

[data-theme="dark"] .role-manager-row-title {
  color: #f8fafc;
}

[data-theme="dark"] .role-manager-code-pill {
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe;
}

[data-theme="dark"] .role-manager-field {
  background: rgba(15, 23, 42, 0.48);
  border-color: rgba(71, 85, 105, 0.72);
}

[data-theme="dark"] .role-manager-launcher {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
  border-color: rgba(71, 85, 105, 0.8);
}

[data-theme="dark"] .role-manager-hero {
  border-color: rgba(59, 130, 246, 0.24);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
  box-shadow: 0 20px 42px rgba(2, 6, 23, 0.5);
}

[data-theme="dark"] .role-manager-add-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.86));
  box-shadow: 0 20px 42px rgba(2, 6, 23, 0.45);
}

#adminPanelModal .modal-dialog {
  max-width: min(1140px, 96vw);
}

#roleManagerModal .modal-dialog {
  max-width: min(1280px, 97vw);
}

#roleManagerModal .modal-content {
  border: 1px solid rgba(191, 219, 254, 0.55);
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

#roleManagerModal .modal-header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
}

#roleManagerModal .modal-body {
  padding: 1.4rem 1.5rem 1.5rem;
}

[data-theme="dark"] #roleManagerModal .modal-content {
  border-color: rgba(59, 130, 246, 0.18);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96));
  box-shadow: 0 30px 72px rgba(2, 6, 23, 0.72);
}

[data-theme="dark"] #roleManagerModal .modal-header {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92));
}

#adminPanelModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

#adminPanelModal #settingsForm {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

#adminPanelModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: rgba(100, 116, 139, 0.35);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92));
  box-shadow: inset 0 -1px 0 rgba(71, 85, 105, 0.22);
}

[data-theme="dark"] .modal-header .btn-close {
  background-color: rgba(30, 41, 59, 0.86);
  filter: invert(1);
  box-shadow: 0 12px 20px rgba(2, 6, 23, 0.3);
}

[data-theme="dark"] .confirm-action-content {
  border-color: rgba(248, 113, 113, 0.18);
  box-shadow: 0 28px 60px rgba(2, 6, 23, 0.58);
}

[data-theme="dark"] .confirm-action-icon-wrap {
  background: radial-gradient(circle at top, rgba(127, 29, 29, 0.88), rgba(69, 10, 10, 0.96));
}

[data-theme="dark"] .confirm-action-icon-wrap.is-safe {
  background: radial-gradient(circle at top, rgba(30, 64, 175, 0.88), rgba(30, 41, 59, 0.96));
}

.dropdown-menu {
  border-radius: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.dropdown-item {
  font-weight: 600;
}


body[data-page="admin"] .admin-quick-add-nav .nav-link {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.34);
  font-weight: 700;
}

body[data-page="admin"] .admin-quick-add-nav .nav-link:hover {
  color: #fff;
}

.admin-quick-actions-panel {
  overflow: hidden;
}

.admin-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
}

.admin-quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.7rem;
  min-height: 118px;
  padding: 1rem;
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.92));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.admin-quick-action-card:hover,
.admin-quick-action-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 18px 36px rgba(59, 91, 219, 0.15);
  outline: none;
}

.admin-quick-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(6, 182, 212, 0.18));
  font-size: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.admin-quick-action-copy {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.stat-value-animated {
  animation: stat-value-pop 0.6s ease;
}

.app-toast-container {
  z-index: 1085;
  max-width: min(92vw, 420px);
}

.app-toast {
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.app-toast .toast-body {
  padding: 0.9rem 0.25rem 0.9rem 0;
  font-weight: 600;
}

.app-toast .btn-close {
  filter: invert(1);
  opacity: 0.85;
}

.app-toast-indicator {
  width: 0.32rem;
  align-self: stretch;
  border-radius: 999px;
  margin: 0.55rem 0 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.55);
}

.app-toast-success .app-toast-indicator {
  background: linear-gradient(180deg, #34d399, #10b981);
}

.app-toast-danger .app-toast-indicator {
  background: linear-gradient(180deg, #f87171, #ef4444);
}

.app-toast-warning .app-toast-indicator {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.app-toast-info .app-toast-indicator,
.app-toast-primary .app-toast-indicator,
.app-toast-secondary .app-toast-indicator {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
}

[data-theme="dark"] .dropdown-menu {
  background: #1f2937;
  border-color: rgba(71, 85, 105, 0.8);
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.55);
}

[data-theme="dark"] .dropdown-item {
  color: #e5e7eb;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  color: #fff;
  background: rgba(99, 102, 241, 0.28);
}

[data-theme="dark"] .admin-quick-action-card {
  border-color: rgba(99, 102, 241, 0.18);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 40%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.4);
  color: #e2e8f0;
}

[data-theme="dark"] .stat-card-icon,
[data-theme="dark"] .section-icon-badge {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(6, 182, 212, 0.24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .admin-quick-action-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(6, 182, 212, 0.26));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .app-toast {
  background: rgba(2, 6, 23, 0.96);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.5);
}

.smart-header-menu {
  max-width: min(90vw, 260px);
  overflow-x: hidden;
}

@keyframes stat-value-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(-2px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1199px) {
  .admin-quick-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .admin-quick-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-quick-action-card {
    min-height: 104px;
    padding: 0.9rem;
  }

  .table-action-label {
    display: none;
  }

  .table-action-btn {
    min-width: 2.1rem;
    padding-inline: 0.6rem;
  }

  .client-activity-canvas-wrap {
    min-height: 240px;
    padding-inline: 0.2rem;
  }

  .client-activity-canvas-wrap canvas {
    height: 220px !important;
  }

  .client-activity-metric-card {
    min-height: 76px;
    padding: 0.9rem;
  }
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: rgba(15, 23, 42, 0.75);
  color: #e5e7eb;
}

[data-theme="dark"] .form-control::placeholder {
  color: #94a3b8;
}

[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-info {
  color: #cbd5e1;
  border-color: #64748b;
}

[data-theme="dark"] #tabSettings .h5,
[data-theme="dark"] #tabSettings .form-label {
  color: #ffffff;
}

[data-theme="dark"] #tabUsers .h5,
[data-theme="dark"] #tabUsers .form-label {
  color: #ffffff;
}

[data-theme="dark"] #tabInvoices .h5,
[data-theme="dark"] #tabInvoices .form-label {
  color: #ffffff;
}

[data-theme="dark"] .card-stat h3 {
  color: #ffffff;
}

.alert {
  border-radius: 0.9rem;
  border: none;
}

.notif-btn {
  position: relative;
  min-width: 42px;
}

.notif-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.role-filter-count {
  margin-inline-start: 0.4rem;
  min-width: 1.2rem;
  padding: 0.12rem 0.36rem;
  border-radius: 999px;
  font-size: 0.67rem;
  line-height: 1.1;
  background: rgba(15, 23, 42, 0.12);
  color: inherit;
}

.btn-primary .role-filter-count {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}

[data-theme="dark"] .role-filter-count {
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

.notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  line-height: 18px;
  font-weight: 700;
}

.invoice-history-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.invoice-history-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.table td,
.table th {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .role-manager-row {
    padding: 1rem;
  }

  .role-manager-row-top {
    flex-direction: column;
    align-items: stretch;
  }

  .role-manager-fields {
    grid-template-columns: 1fr;
  }

  .role-manager-launcher {
    padding: 0.9rem;
  }

  .role-manager-hero {
    padding: 1.05rem 1rem;
    border-radius: 1.1rem;
  }

  .role-manager-actions {
    justify-content: flex-end;
    width: 100%;
  }

  .role-manager-actions .btn {
    flex: 1 1 0;
  }

  #roleManagerModal .modal-header,
  #roleManagerModal .modal-body {
    padding-inline: 1rem;
  }

  #confirmActionModal .modal-dialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    margin: 0.5rem auto;
  }

  #confirmActionModal .modal-dialog-centered {
    min-height: calc(100dvh - 1rem);
  }

  body.modal-open[data-page="admin"] #adminTabs {
    display: grid !important;
  }

  #adminPanelModal .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
    height: calc(100dvh - 1rem);
  }

  #roleManagerModal .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
    height: calc(100dvh - 1rem);
  }

  #adminPanelModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  #roleManagerModal .modal-content {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  #adminPanelModal #settingsForm {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }

  #adminPanelModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  #roleManagerModal .modal-body {
    min-height: 0;
    overflow-y: auto;
  }

  .navbar-toggler {
    padding: 0.5rem 0.62rem;
    border-radius: 0.72rem;
  }

  .navbar-toggler-icon {
    width: 1.45rem;
    height: 1.45rem;
    background-size: 1.3rem;
  }

  .table td,
  .table th {
    font-size: 0.86rem;
  }

  .header-language-select {
    width: 72px;
    min-width: 72px;
    font-size: 0.74rem;
  }

  .sales-range-select {
    width: 100%;
    font-size: 0.72rem;
  }

  .header-actions {
    max-width: 100%;
    gap: 0.35rem !important;
    flex-wrap: nowrap;
  }

  .header-actions .btn,
  .header-actions .form-select {
    height: 34px;
    min-height: 34px;
    padding-top: 0.26rem;
    padding-bottom: 0.26rem;
    font-size: 0.74rem;
  }

  .header-theme-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.74rem;
  }

  .company-logo {
    width: 40px;
    height: 40px;
  }

  .navbar-brand {
    font-size: 0.9rem;
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-content {
    padding-top: 0.95rem !important;
  }

  .card {
    border-radius: 1.15rem;
  }

  .card-body {
    padding: 0.95rem;
  }

  .table td,
  .table th {
    font-size: 0.84rem;
  }

  /* Mobile app-style bottom navigation for admin tabs */
  body[data-page="admin"] #adminTabs {
    position: fixed !important;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 1085;
    margin-bottom: 0 !important;
    padding: 0.55rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 255, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 1.25rem;
    box-shadow:
      0 16px 36px rgba(15, 23, 42, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    display: grid !important;
    pointer-events: auto;
    visibility: visible !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    transition: transform 0.3s ease, opacity 0.26s ease, background 0.24s ease, box-shadow 0.24s ease;
  }

  body[data-page="admin"] #adminTabs.is-scrolled {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.96));
    box-shadow:
      0 20px 40px rgba(15, 23, 42, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  body[data-page="admin"] #adminTabs.footer-scroll-down {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body[data-page="admin"] #adminTabs.footer-scroll-up {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body[data-page="admin"] #adminTabs .nav-item {
    min-width: 0;
  }

  body[data-page="admin"] #adminTabs .nav-link {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    text-align: center;
    padding: 0.55rem 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.15;
    border-radius: 0.95rem;
    border: 1px solid transparent;
    transition: all 0.22s ease;
  }

  body[data-page="admin"] #adminTabs .nav-link:not(.active) {
    background: rgba(255, 255, 255, 0.64);
    color: #475569;
  }

  body[data-page="admin"] #adminTabs .nav-link.active {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(59, 91, 219, 0.28);
  }

  body[data-page="admin"] #adminTabs .footer-tab-icon {
    display: block;
    font-size: 1rem;
    line-height: 1;
  }

  body[data-page="admin"] #adminTabs .footer-tab-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="admin"] .page-content {
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page="admin"] .tab-content {
    padding-bottom: 0.4rem;
  }

  body[data-page="admin"] .tab-pane {
    transform: translateY(8px) scale(0.995);
    opacity: 0;
  }

  body[data-page="admin"] .tab-pane.active.show {
    animation: tabPaneRise 0.28s ease forwards;
  }

  body[data-page="client"] .invoice-history-scroll {
    max-height: 52vh;
  }

  [data-theme="dark"] body[data-page="admin"] #adminTabs {
    background: rgba(17, 24, 39, 0.92);
    border-color: rgba(71, 85, 105, 0.78);
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.62);
  }

  [data-theme="dark"] body[data-page="admin"] #adminTabs.is-scrolled {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96));
    box-shadow: 0 22px 42px rgba(2, 6, 23, 0.75);
  }

  [data-theme="dark"] body[data-page="admin"] #adminTabs .nav-link:not(.active) {
    background: rgba(30, 41, 59, 0.68);
    color: #cbd5e1;
  }

  [data-theme="dark"] body[data-page="admin"] #adminTabs .nav-link.active {
    box-shadow: 0 12px 22px rgba(2, 6, 23, 0.58);
  }

  body[data-page="admin"] .admin-quick-add-nav .nav-link {
    font-size: 0.74rem;
    padding-inline: 0.35rem;
  }
}

@keyframes tabPaneRise {
  from {
    transform: translateY(8px) scale(0.995);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ===== Design Refresh V2 (Professional UI Override) ===== */

:root {
  --radius-xl: 1.15rem;
  --radius-lg: 0.95rem;
  --radius-md: 0.8rem;
}

.bg-pattern {
  background:
    radial-gradient(980px 420px at -8% -4%, #d9e7ff 0%, rgba(217, 231, 255, 0) 58%),
    radial-gradient(920px 380px at 108% 2%, #d5f5ea 0%, rgba(213, 245, 234, 0) 52%),
    linear-gradient(180deg, #f7faff 0%, #f1f5fb 100%);
}

[data-theme="dark"].bg-pattern {
  background:
    radial-gradient(980px 420px at -8% -4%, rgba(37, 52, 79, 0.82) 0%, rgba(37, 52, 79, 0) 58%),
    radial-gradient(920px 380px at 108% 2%, rgba(16, 185, 129, 0.11) 0%, rgba(16, 185, 129, 0) 52%),
    linear-gradient(180deg, #0d1528 0%, #101827 100%);
}

.app-navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.86);
}

.navbar-brand {
  font-weight: 800;
}

.header-actions .btn,
.header-actions .form-select {
  border-radius: 999px;
}

.card {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
}

.card .h5,
.card h2.h5 {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.card-stat {
  border-radius: 1rem;
}

.card-stat .text-secondary {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.25px;
}

.card-stat h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
}

.form-control,
.form-select {
  border-radius: var(--radius-md);
  min-height: 42px;
}

textarea.form-control {
  min-height: 112px;
}

.btn {
  border-radius: var(--radius-md);
  min-height: 40px;
}

.btn-sm {
  min-height: 34px;
}

.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: rgba(99, 102, 241, 0.06);
}

[data-theme="dark"] .table thead th {
  background: rgba(99, 102, 241, 0.16);
}

.table tbody td {
  vertical-align: middle;
}

.modal-content {
  border-radius: 1.1rem;
}

.notif-btn {
  border-radius: 999px;
}

body[data-page="login"] .glass {
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
}

body[data-page="login"] main {
  position: relative;
}

body[data-page="login"] main::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 92vw);
  height: min(560px, 70vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0) 62%);
  pointer-events: none;
  z-index: 0;
}

body[data-page="login"] .row {
  position: relative;
  z-index: 1;
}

body[data-page="login"] .login-panel {
  position: relative;
  border-radius: 1.4rem !important;
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
}

body[data-page="login"] .login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 54%);
}

.login-panel-hero {
  position: relative;
  padding: 1rem 1rem 1.1rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.login-form-stack .form-label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.login-form-stack .form-control {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.login-form-stack .btn {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.demo-accounts-card {
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.login-slides-hero {
  padding: 0.95rem 1rem;
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.14);
}

body[data-page="login"] .login-panel .form-control {
  min-height: 48px;
  border-radius: 0.85rem;
}

body[data-page="login"] .login-panel .btn {
  min-height: 46px;
  border-radius: 0.85rem;
}

body[data-page="login"] .login-panel .btn-primary,
body[data-page="login"] .login-panel .btn-primary:hover,
body[data-page="login"] .login-panel .btn-primary:focus,
body[data-page="login"] .login-panel .btn-primary:active,
body[data-page="login"] .login-panel .btn-check:checked + .btn-primary,
body[data-page="login"] .login-panel .btn-primary.active,
body[data-page="login"] .login-panel .show > .btn-primary.dropdown-toggle {
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5, #2563eb 58%, #06b6d4) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.24);
}

body[data-page="login"] .login-panel .text-secondary {
  color: #64748b !important;
}

#accountRedeemPointsBtn,
#accountRedeemPointsBtn:hover,
#accountRedeemPointsBtn:focus,
#accountRedeemPointsBtn:active,
#accountRedeemPointsBtn.active,
.show > #accountRedeemPointsBtn.dropdown-toggle {
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5, #2563eb 58%, #06b6d4) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.24);
}

#accountRedeemPointsBtn:focus,
#accountRedeemPointsBtn:active,
#accountRedeemPointsBtn.active {
  box-shadow:
    0 0 0 0.2rem rgba(79, 70, 229, 0.18),
    0 12px 24px rgba(79, 70, 229, 0.24) !important;
}

[data-theme="dark"] body[data-page="login"] .login-panel {
  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.62) !important;
  border-color: rgba(71, 85, 105, 0.88) !important;
}

[data-theme="dark"] .premium-language-switcher .form-select,
[data-theme="dark"] .header-actions .btn,
[data-theme="dark"] .header-actions .form-select,
[data-theme="dark"] .navbar-brand {
  background: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(71, 85, 105, 0.42) !important;
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.24);
}

[data-theme="dark"] body[data-page="login"] .login-panel::before {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 54%);
}

[data-theme="dark"] .login-panel-hero,
[data-theme="dark"] .demo-accounts-card,
[data-theme="dark"] .login-slides-hero,
[data-theme="dark"] .login-form-stack .form-control {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.82)) !important;
  border-color: rgba(71, 85, 105, 0.32) !important;
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
}

[data-theme="dark"] .premium-theme-toggle {
  border-color: rgba(125, 211, 252, 0.18);
}

[data-theme="dark"] body[data-page="login"] main::before {
  background: radial-gradient(circle, rgba(148, 163, 184, 0.16) 0%, rgba(148, 163, 184, 0) 62%);
}

body[data-page="login"] .card-body {
  padding: clamp(1.3rem, 2.2vw, 2rem);
}

body[data-page="login"] .brand-badge {
  width: 62px;
  height: 62px;
  border-radius: 18px;
}

.login-panel-credit {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-panel-credit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(99, 102, 241, 0.18);
  color: #334155;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(59, 91, 219, 0.1);
}

[data-theme="dark"] .login-panel-credit-badge {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(6, 182, 212, 0.2));
  border-color: rgba(125, 211, 252, 0.18);
  color: #e2e8f0;
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.3);
}

.login-slides-panel {
  border-radius: 1.4rem !important;
  min-height: 100%;
}

.login-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.82rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: #4338ca;
  font-size: 0.82rem;
  font-weight: 700;
}

.login-slides-stage {
  position: relative;
  min-height: 360px;
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
}

.client-slides-stage {
  min-height: clamp(220px, 34vw, 420px);
}

.login-slides-track {
  position: relative;
  width: 100%;
  min-height: 360px;
  height: 100%;
}

.client-slides-stage .login-slides-track {
  min-height: clamp(220px, 34vw, 420px);
}

.login-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.login-slide.active {
  opacity: 1;
}

.login-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.login-slides-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.login-slide-dot {
  width: 0.8rem;
  height: 0.8rem;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
  padding: 0;
}

.login-slide-dot.active {
  width: 2rem;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
}

.login-slides-manager-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.login-slide-manager-card {
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.72);
}

.login-slide-manager-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.85rem;
  display: block;
  margin-bottom: 0.75rem;
}

.login-slide-manager-footer {
  min-height: 2rem;
}

[data-theme="dark"] .login-role-pill {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
}

[data-theme="dark"] .login-slides-stage {
  background: rgba(2, 6, 23, 0.36);
}

[data-theme="dark"] .login-slide-manager-card {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(71, 85, 105, 0.6);
}

@media (max-width: 767px) {
  .login-slides-stage {
    min-height: 240px;
  }

  .client-slides-stage {
    min-height: 220px;
  }

  .login-slides-track {
    min-height: 240px;
  }

  .client-slides-stage .login-slides-track {
    min-height: 220px;
  }

  .app-navbar {
    border-bottom-width: 1px;
  }

  .card {
    border-radius: 1rem;
  }

  .card-body {
    padding: 0.9rem;
  }

  .table thead th {
    font-size: 0.76rem;
  }

  .btn,
  .form-control,
  .form-select {
    min-height: 38px;
  }
}

/* ===== Minimal Enterprise Theme ===== */

:root {
  --brand: #334155;
  --brand-dark: #1f2937;
  --brand-soft: #eef2f7;
  --text-main: #0f172a;
  --text-soft: #64748b;
  --border-soft: #dbe2ea;
}

[data-theme="dark"] {
  --brand: #94a3b8;
  --brand-dark: #cbd5e1;
  --brand-soft: #1f2937;
  --text-main: #e2e8f0;
  --text-soft: #94a3b8;
  --border-soft: #334155;
}

.bg-pattern {
  background:
    radial-gradient(860px 340px at -10% -8%, #edf2f7 0%, rgba(237, 242, 247, 0) 58%),
    radial-gradient(860px 340px at 110% 0%, #f1f5f9 0%, rgba(241, 245, 249, 0) 56%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

[data-theme="dark"].bg-pattern {
  background:
    radial-gradient(860px 340px at -10% -8%, rgba(51, 65, 85, 0.45) 0%, rgba(51, 65, 85, 0) 58%),
    radial-gradient(860px 340px at 110% 0%, rgba(30, 41, 59, 0.42) 0%, rgba(30, 41, 59, 0) 56%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}

.app-navbar,
.card,
.modal-content {
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.nav-pills .nav-link {
  color: #334155;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.nav-pills .nav-link.active {
  background: #1f2937;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22);
}

[data-theme="dark"] .nav-pills .nav-link {
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.7);
  border-color: #334155;
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background: #475569;
  color: #fff;
}

.btn-primary {
  --bs-btn-bg: #1f2937;
  --bs-btn-border-color: #1f2937;
  --bs-btn-hover-bg: #0f172a;
  --bs-btn-hover-border-color: #0f172a;
}

.table thead th {
  background: #f8fafc;
  color: #475569;
}

[data-theme="dark"] .table thead th {
  background: #1e293b;
  color: #cbd5e1;
}

#clientCompanyInfo .h6 {
  font-weight: 800;
}

#clientCompanyInfo .small {
  color: var(--text-soft);
}

.phone-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.client-promo-logo {
  width: min(260px, 78vw);
  max-height: 180px;
  object-fit: contain;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .client-promo-logo {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(71, 85, 105, 0.8);
}

.logo-popup {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.logo-popup.show {
  opacity: 1;
}

.logo-popup-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 1.2rem;
  padding: 0.7rem;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
  transform: translateY(8px) scale(0.96);
  transition: transform 0.3s ease;
}

.logo-popup.show .logo-popup-card {
  transform: translateY(0) scale(1);
}

.logo-popup-img {
  width: min(140px, 42vw);
  max-height: 92px;
  object-fit: contain;
  border-radius: 0.8rem;
}

.logo-popup-badge {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}

[data-theme="dark"] .logo-popup {
  background: transparent;
}

[data-theme="dark"] .logo-popup-card {
  background: rgba(17, 24, 39, 0.88);
  border-color: rgba(71, 85, 105, 0.8);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.55);
}

@media (max-width: 767px) {
  .logo-popup {
    top: 72px;
  }

  .logo-popup-img {
    width: min(120px, 54vw);
    max-height: 78px;
  }
}

.user-counter-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155 !important;
  border: 1px solid #dbe2ea;
  padding: 0.4rem 0.58rem;
}

.user-counter-pill strong {
  font-weight: 800;
}

[data-theme="dark"] .user-counter-pill {
  color: #e2e8f0 !important;
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: #334155;
}

/* ===== Enterprise Pattern Standardization ===== */

main h2.h5 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.15px;
  color: var(--text-main);
}

main h2.h5:not(.modal-title) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

main h2.h5:not(.modal-title)::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand);
  opacity: 0.9;
}

.btn {
  font-weight: 700;
  letter-spacing: 0.15px;
}

.btn-primary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-success {
  border-radius: 0.75rem;
}

.btn-primary {
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.22);
}

[data-theme="dark"] .btn-primary {
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.48);
}

.table .btn.btn-sm {
  min-height: 32px;
  padding-inline: 0.58rem;
  border-radius: 0.65rem;
  font-size: 0.72rem;
}

.card .d-flex .btn,
.card .modal-footer .btn {
  min-width: 106px;
}

@media (max-width: 767px) {
  main h2.h5 {
    font-size: 0.92rem;
  }

  main h2.h5:not(.modal-title)::before {
    height: 15px;
  }

  .card .d-flex .btn,
  .card .modal-footer .btn {
    min-width: 92px;
  }
}

/* ===== Final Modern Color Override ===== */

:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-soft: #eef2ff;
  --text-main: #0f172a;
  --text-soft: #64748b;
  --border-soft: #dbe4f0;
}

[data-theme="dark"] {
  --brand: #818cf8;
  --brand-dark: #6366f1;
  --brand-soft: #1e1b4b;
  --text-main: #e2e8f0;
  --text-soft: #94a3b8;
  --border-soft: #334155;
}

.bg-pattern {
  background:
    radial-gradient(980px 420px at -8% -4%, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0) 58%),
    radial-gradient(920px 380px at 108% 2%, rgba(6, 182, 212, 0.16) 0%, rgba(6, 182, 212, 0) 52%),
    linear-gradient(180deg, #f8faff 0%, #eef4ff 100%);
}

[data-theme="dark"].bg-pattern {
  background:
    radial-gradient(980px 420px at -8% -4%, rgba(79, 70, 229, 0.2) 0%, rgba(79, 70, 229, 0) 58%),
    radial-gradient(920px 380px at 108% 2%, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0) 52%),
    linear-gradient(180deg, #0b1120 0%, #111827 100%);
}

.brand-badge,
.theme-toggle,
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #4f46e5, #2563eb 58%, #06b6d4) !important;
}

.theme-toggle {
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.28);
}

.btn-primary {
  --bs-btn-bg: #4f46e5;
  --bs-btn-border-color: #4f46e5;
  --bs-btn-hover-bg: #4338ca;
  --bs-btn-hover-border-color: #4338ca;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.24);
}

.card {
  box-shadow: 0 18px 44px rgba(79, 70, 229, 0.08) !important;
}

.card:hover {
  box-shadow: 0 24px 56px rgba(37, 99, 235, 0.14) !important;
}

.card-stat::before,
main h2.h5:not(.modal-title)::before {
  background: linear-gradient(180deg, #4f46e5, #06b6d4) !important;
}

.card-stat::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2), rgba(99, 102, 241, 0)) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(79, 70, 229, 0.42);
  box-shadow:
    0 0 0 0.25rem rgba(79, 70, 229, 0.12),
    0 10px 22px rgba(6, 182, 212, 0.08);
}

.table thead th {
  background: linear-gradient(180deg, rgba(238, 242, 255, 0.96), rgba(248, 250, 252, 0.96));
}

[data-theme="dark"] .table thead th {
  background: linear-gradient(180deg, rgba(49, 46, 129, 0.28), rgba(15, 23, 42, 0.96));
}

#clientCompanyInfo::before,
#invoiceHistorySection::before,
#tabUsers .card::before,
#tabInvoices .card::before,
#tabTrash .card::before {
  background: linear-gradient(90deg, #4f46e5, #2563eb, #06b6d4) !important;
}

.app-navbar {
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.08);
}

#userRoleFilters .btn-outline-primary {
  color: #334155;
  border-color: rgba(79, 70, 229, 0.24);
  background: rgba(255, 255, 255, 0.92);
}

#userRoleFilters .btn-outline-primary:hover,
#userRoleFilters .btn-outline-primary:focus,
#userRoleFilters .btn-outline-primary:active,
#userRoleFilters .btn-outline-primary.active,
#userRoleFilters .btn-outline-primary.dropdown-toggle.show {
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5, #2563eb 58%, #06b6d4) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22);
}

#userRoleFilters .btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5, #2563eb 58%, #06b6d4) !important;
  border-color: transparent !important;
}

#userRoleFilters .btn-outline-primary .role-filter-count {
  background: rgba(79, 70, 229, 0.1);
  color: #3730a3;
}

#userRoleFilters .btn-outline-primary:hover .role-filter-count,
#userRoleFilters .btn-outline-primary:focus .role-filter-count,
#userRoleFilters .btn-outline-primary:active .role-filter-count,
#userRoleFilters .btn-outline-primary.active .role-filter-count,
#userRoleFilters .btn-outline-primary.dropdown-toggle.show .role-filter-count,
#userRoleFilters .btn-primary .role-filter-count {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

[data-theme="dark"] #userRoleFilters .btn-outline-primary {
  color: #e2e8f0;
  border-color: rgba(129, 140, 248, 0.34);
  background: rgba(15, 23, 42, 0.85);
}

[data-theme="dark"] #userRoleFilters .btn-outline-primary .role-filter-count {
  background: rgba(129, 140, 248, 0.2);
  color: #e0e7ff;
}

/* ===== Premium Professional UI Refresh ===== */

:root {
  --pro-surface: rgba(255, 255, 255, 0.82);
  --pro-surface-strong: rgba(255, 255, 255, 0.92);
  --pro-border: rgba(148, 163, 184, 0.22);
  --pro-shadow: 0 18px 40px rgba(15, 23, 42, 0.09);
  --pro-shadow-hover: 0 24px 52px rgba(15, 23, 42, 0.14);
}

[data-theme="dark"] {
  --pro-surface: rgba(15, 23, 42, 0.74);
  --pro-surface-strong: rgba(15, 23, 42, 0.86);
  --pro-border: rgba(71, 85, 105, 0.58);
  --pro-shadow: 0 20px 44px rgba(2, 6, 23, 0.42);
  --pro-shadow-hover: 0 26px 56px rgba(2, 6, 23, 0.54);
}

body {
  letter-spacing: 0.15px;
}

.app-navbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.8));
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .app-navbar {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.78));
}

.navbar-brand {
  font-size: 1.06rem;
  font-weight: 800 !important;
}

.header-actions .btn,
.header-actions .form-select {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.card {
  background: linear-gradient(180deg, var(--pro-surface-strong), var(--pro-surface));
  border: 1px solid var(--pro-border) !important;
  box-shadow: var(--pro-shadow) !important;
}

.card:hover {
  box-shadow: var(--pro-shadow-hover) !important;
}

.card-body {
  padding: 1.15rem;
}

.card-stat {
  position: relative;
  overflow: hidden;
}

.card-stat::after {
  content: "";
  position: absolute;
  inset: auto -30px -30px auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0));
  pointer-events: none;
}

.card-stat h3,
.card h3,
.card h6 {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.nav-pills {
  padding: 0.2rem;
}

.nav-pills .nav-link {
  min-height: 42px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
}

.btn {
  font-weight: 700;
  border-radius: 0.85rem;
}

.btn-primary {
  --bs-btn-bg: linear-gradient(135deg, #1d4ed8, #2563eb);
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
}

.btn-success,
.btn-outline-success,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-secondary {
  border-width: 1px;
}

.form-control,
.form-select,
textarea.form-control {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
  background: rgba(15, 23, 42, 0.78);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow:
    0 0 0 0.25rem rgba(37, 99, 235, 0.12),
    0 10px 22px rgba(37, 99, 235, 0.08);
}

.table-responsive {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.45);
}

.table thead th {
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.96), rgba(248, 250, 252, 0.96));
  color: #475569;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

[data-theme="dark"] .table thead th {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
}

.table tbody tr {
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.table .btn.btn-sm {
  border-radius: 0.72rem;
  font-weight: 700;
}

.analytics-chart-wrap {
  position: relative;
  height: 320px;
  width: 100%;
  min-width: 0;
}

.premium-analytics-card {
  position: relative;
  overflow: hidden;
}

.premium-analytics-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 58%);
}

.premium-analytics-card-system {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94)) !important;
}

.premium-analytics-card-redemption {
  background:
    radial-gradient(circle at top right, rgba(249, 115, 22, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.94)) !important;
}

.premium-analytics-card-inner {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.premium-analytics-stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.premium-analytics-stat-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -35% auto;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 70%);
}

.premium-analytics-stat-card-count {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.12)) !important;
}

.premium-analytics-stat-card-points {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(20, 184, 166, 0.12)) !important;
}

.premium-analytics-stat-card-discount {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(239, 68, 68, 0.1)) !important;
}

.premium-analytics-chart-wrap {
  padding: 0.9rem 0.7rem 0.3rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.4), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 32px rgba(15, 23, 42, 0.05);
}

.premium-analytics-chart-wrap-sm {
  min-height: 300px;
}

.premium-analytics-fullscreen-body {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.96));
}

.premium-analytics-chart-wrap-fullscreen {
  padding: 1rem;
  min-height: 72vh;
}

.analytics-chart-wrap-fullscreen {
  min-height: 70vh;
}

.analytics-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

[data-theme="dark"] .premium-analytics-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 58%);
}

[data-theme="dark"] .premium-analytics-card-system {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92)) !important;
}

[data-theme="dark"] .premium-analytics-card-redemption {
  background:
    radial-gradient(circle at top right, rgba(249, 115, 22, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92)) !important;
}

[data-theme="dark"] .premium-analytics-card-inner {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9)) !important;
  border-color: rgba(71, 85, 105, 0.28) !important;
}

[data-theme="dark"] .premium-analytics-stat-card {
  border-color: rgba(71, 85, 105, 0.28) !important;
}

[data-theme="dark"] .premium-analytics-stat-card-count {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.16)) !important;
}

[data-theme="dark"] .premium-analytics-stat-card-points {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(20, 184, 166, 0.16)) !important;
}

[data-theme="dark"] .premium-analytics-stat-card-discount {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(239, 68, 68, 0.14)) !important;
}

[data-theme="dark"] .premium-analytics-chart-wrap {
  border-color: rgba(71, 85, 105, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 34px rgba(2, 6, 23, 0.24);
}

[data-theme="dark"] .premium-analytics-fullscreen-body {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.98));
}

@media (max-width: 767px) {
  .premium-analytics-chart-wrap {
    padding: 0.75rem 0.35rem 0.2rem;
  }

  .premium-analytics-chart-wrap-fullscreen {
    padding: 0.7rem;
    min-height: 64vh;
  }
}

.top-redeemer-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.premium-leaderboard-card,
.premium-redemption-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.premium-leaderboard-card::before,
.premium-redemption-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #8b5cf6, #0ea5e9, #f97316);
}

.premium-leaderboard-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(14, 165, 233, 0.18));
  color: #1e1b4b;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.premium-redemption-avatar {
  width: 2.8rem;
  height: 2.8rem;
  flex-basis: 2.8rem;
}

.premium-leaderboard-metrics {
  display: grid;
  gap: 0.7rem;
}

.premium-leaderboard-metric-chip {
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.premium-redemption-values {
  padding: 0.55rem 0.8rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.premium-redemption-note-pill {
  min-height: 2.75rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
}

.premium-redemption-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.12);
}

.summary-open-account-card {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.summary-open-account-card:hover,
.summary-open-account-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12);
  outline: none;
}

.top-redeemer-rank {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.top-redeemer-metric {
  font-size: 0.9rem;
}

.role-ranking-entry {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.8);
}

.role-ranking-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}

.role-ranking-meta {
  font-size: 0.82rem;
}

.role-ranking-meta strong {
  color: #0f172a;
}

.role-ranking-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 800;
}

.role-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.recent-redemption-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.recent-redemption-note {
  min-height: 2.75rem;
  color: #475569;
}

.recent-redemption-meta {
  font-size: 0.85rem;
}

[data-theme="dark"] .premium-leaderboard-card,
[data-theme="dark"] .premium-redemption-card {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.88)) !important;
  box-shadow: 0 20px 36px rgba(2, 6, 23, 0.26);
}

[data-theme="dark"] .premium-leaderboard-avatar {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(14, 165, 233, 0.22));
  color: #e0e7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .premium-leaderboard-metric-chip,
[data-theme="dark"] .premium-redemption-note-pill,
[data-theme="dark"] .premium-redemption-values {
  border-color: rgba(71, 85, 105, 0.28);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18);
}

[data-theme="dark"] .premium-redemption-meta-chip {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.16);
}

@media (max-width: 767px) {
  .premium-leaderboard-avatar {
    width: 2.7rem;
    height: 2.7rem;
    flex-basis: 2.7rem;
  }

  .premium-leaderboard-metric-chip,
  .premium-redemption-note-pill {
    padding: 0.75rem 0.8rem;
  }
}

.summary-open-account-row {
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.summary-open-account-row:hover,
.summary-open-account-row:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  outline: none;
}

.summary-open-account-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 0.8rem;
  font-weight: 700;
}

.summary-open-account-hint::after {
  content: "→";
  font-size: 0.9rem;
}

.diagnostics-header-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  background-clip: padding-box;
}

.diagnostics-header-badge:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.diagnostics-header-badge-info {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.16);
}

.diagnostics-header-badge-pass {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.18);
}

.diagnostics-header-badge-fail {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.18);
}

.diagnostics-header-time {
  white-space: nowrap;
}

.diagnostics-panel {
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.72);
}

.diagnostics-summary {
  margin-bottom: 0.85rem;
}

.diagnostics-compare-summary {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.85rem;
  background: rgba(37, 99, 235, 0.08);
  color: #1e40af;
}

#diagnosticsSection:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.28);
  outline-offset: 0.3rem;
}

.diagnostics-list {
  display: grid;
  gap: 0.75rem;
}

.diagnostics-history-list {
  display: grid;
  gap: 0.65rem;
}

.diagnostics-history-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.78);
}

.diagnostics-history-item.interactive {
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.diagnostics-history-item.interactive:hover,
.diagnostics-history-item.interactive:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.24);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.1);
  outline: none;
}

.diagnostics-history-item.active {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.diagnostics-history-meta {
  white-space: nowrap;
  font-size: 0.8rem;
  color: #64748b;
}

.diagnostics-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.88);
}

.diagnostics-badge {
  min-width: 4.5rem;
  text-align: center;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.diagnostics-item-pass .diagnostics-badge {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.diagnostics-item-fail .diagnostics-badge {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.diagnostics-item-info .diagnostics-badge {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

[data-theme="dark"] .diagnostics-panel {
  background: rgba(15, 23, 42, 0.5);
}

[data-theme="dark"] .diagnostics-compare-summary {
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe;
}

[data-theme="dark"] .diagnostics-item {
  background: rgba(15, 23, 42, 0.72);
}

[data-theme="dark"] .diagnostics-history-item {
  background: rgba(15, 23, 42, 0.66);
}

.modal-content {
  background: linear-gradient(180deg, var(--pro-surface-strong), var(--pro-surface));
  border: 1px solid var(--pro-border);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16);
}

.modal-header,
.modal-footer {
  background: rgba(255, 255, 255, 0.36);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background: rgba(15, 23, 42, 0.34);
}

body[data-page="login"] .login-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84)) !important;
  box-shadow: 0 34px 70px rgba(15, 23, 42, 0.16) !important;
}

[data-theme="dark"] body[data-page="login"] .login-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.84)) !important;
}

body[data-page="login"] .brand-badge,
.logo-popup-badge {
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24);
}

body[data-page="client"].client-dashboard-loading #clientWelcome,
body[data-page="client"].client-dashboard-loading #profilePoints,
body[data-page="client"].client-dashboard-loading #profileSales,
body[data-page="client"].client-dashboard-loading #profileInvoices,
body[data-page="client"].client-dashboard-loading #profileRewardStatus,
body[data-page="client"].client-dashboard-loading #profileName,
body[data-page="client"].client-dashboard-loading #profileEmail,
body[data-page="client"].client-dashboard-loading #profileRole,
body[data-page="client"].client-dashboard-loading #profilePhone,
body[data-page="client"].client-dashboard-loading #progressText,
body[data-page="client"].client-dashboard-loading #rewardRuleText,
body[data-page="client"].client-dashboard-loading #companyAddressText,
body[data-page="client"].client-dashboard-loading #companyContactText {
  color: transparent !important;
}

body[data-page="client"].client-dashboard-loading #profilePoints,
body[data-page="client"].client-dashboard-loading #profileSales,
body[data-page="client"].client-dashboard-loading #profileInvoices,
body[data-page="client"].client-dashboard-loading #profileRewardStatus,
body[data-page="client"].client-dashboard-loading #profileName,
body[data-page="client"].client-dashboard-loading #profileEmail,
body[data-page="client"].client-dashboard-loading #profileRole,
body[data-page="client"].client-dashboard-loading #profilePhone,
body[data-page="client"].client-dashboard-loading #progressText,
body[data-page="client"].client-dashboard-loading #rewardRuleText,
body[data-page="client"].client-dashboard-loading #companyAddressText,
body[data-page="client"].client-dashboard-loading #companyContactText,
body[data-page="client"].client-dashboard-loading #clientWelcome {
  position: relative;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.9), rgba(241, 245, 249, 1), rgba(226, 232, 240, 0.9));
  background-size: 200% 100%;
  animation: clientDashboardShimmer 1.15s linear infinite;
}

body[data-page="client"].client-dashboard-loading #profilePoints,
body[data-page="client"].client-dashboard-loading #profileSales,
body[data-page="client"].client-dashboard-loading #profileInvoices,
body[data-page="client"].client-dashboard-loading #profileRewardStatus {
  min-height: 2rem;
}

body[data-page="admin"].admin-dashboard-loading #statUsers,
body[data-page="admin"].admin-dashboard-loading #statInvoices,
body[data-page="admin"].admin-dashboard-loading #statSales,
body[data-page="admin"].admin-dashboard-loading #statPoints {
  color: transparent !important;
  position: relative;
  min-height: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.9), rgba(241, 245, 249, 1), rgba(226, 232, 240, 0.9));
  background-size: 200% 100%;
  animation: clientDashboardShimmer 1.15s linear infinite;
}

[data-theme="dark"] body[data-page="admin"].admin-dashboard-loading #statUsers,
[data-theme="dark"] body[data-page="admin"].admin-dashboard-loading #statInvoices,
[data-theme="dark"] body[data-page="admin"].admin-dashboard-loading #statSales,
[data-theme="dark"] body[data-page="admin"].admin-dashboard-loading #statPoints {
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.9), rgba(71, 85, 105, 1), rgba(51, 65, 85, 0.9));
  background-size: 200% 100%;
}

body[data-page="admin"].admin-dashboard-loading .table-skeleton-row td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.table-skeleton-block {
  display: block;
  height: 0.95rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.9), rgba(241, 245, 249, 1), rgba(226, 232, 240, 0.9));
  background-size: 200% 100%;
  animation: clientDashboardShimmer 1.15s linear infinite;
}

.table-skeleton-actions-lg {
  width: 220px;
}

.table-skeleton-actions-md {
  width: 200px;
}

.table-skeleton-actions-sm {
  width: 140px;
}

.notification-skeleton-card {
  min-height: 72px;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(90deg, rgba(226, 232, 240, 0.9), rgba(241, 245, 249, 1), rgba(226, 232, 240, 0.9));
  background-size: 200% 100%;
  animation: clientDashboardShimmer 1.15s linear infinite;
}

[data-theme="dark"] .table-skeleton-block {
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.9), rgba(71, 85, 105, 1), rgba(51, 65, 85, 0.9));
  background-size: 200% 100%;
}

[data-theme="dark"] .notification-skeleton-card {
  border-color: rgba(71, 85, 105, 0.4);
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.9), rgba(71, 85, 105, 1), rgba(51, 65, 85, 0.9));
  background-size: 200% 100%;
}

body[data-page="client"].client-dashboard-loading #progressBar {
  width: 100% !important;
  color: transparent !important;
  background: linear-gradient(90deg, rgba(191, 219, 254, 0.75), rgba(96, 165, 250, 0.9), rgba(191, 219, 254, 0.75)) !important;
  background-size: 200% 100% !important;
  animation: clientDashboardShimmer 1.15s linear infinite;
}

[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profilePoints,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profileSales,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profileInvoices,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profileRewardStatus,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profileName,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profileEmail,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profileRole,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #profilePhone,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #progressText,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #rewardRuleText,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #companyAddressText,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #companyContactText,
[data-theme="dark"] body[data-page="client"].client-dashboard-loading #clientWelcome {
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.9), rgba(71, 85, 105, 1), rgba(51, 65, 85, 0.9));
  background-size: 200% 100%;
}

@keyframes clientDashboardShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

#clientCompanyInfo,
#invoiceHistorySection,
#tabUsers .card,
#tabInvoices .card,
#tabTrash .card {
  position: relative;
}

#clientCompanyInfo::before,
#invoiceHistorySection::before,
#tabUsers .card::before,
#tabInvoices .card::before,
#tabTrash .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #22c55e);
  opacity: 0.9;
}

#adminAlert .alert,
#clientAlert .alert {
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.badge {
  font-weight: 700;
  letter-spacing: 0.15px;
}

.dropdown-menu {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .dropdown-menu {
  background: rgba(15, 23, 42, 0.96);
}

.dropdown-item {
  border-radius: 0.7rem;
}

@media (max-width: 767px) {
  .card-body {
    padding: 0.95rem;
  }

  .nav-pills .nav-link {
    min-height: 38px;
  }

  .table-responsive {
    border-radius: 0.9rem;
  }
}

/* ===== FOX THEME & ULTRA-PROFESSIONAL OVERRIDE ===== */

:root {
  --brand: #f97316; /* Fox Orange */
  --brand-dark: #ea580c;
  --brand-soft: #fff7ed;
  --text-main: #0f172a;
  --text-soft: #64748b;
  --border-soft: #fed7aa;
  --surface-glass: rgba(255, 255, 255, 0.9);
  --shadow-soft: 0 10px 30px rgba(249, 115, 22, 0.08);
  --shadow-hover: 0 18px 38px rgba(249, 115, 22, 0.14);
}

[data-theme="dark"] {
  --brand: #fb923c;
  --brand-dark: #f97316;
  --brand-soft: #431407;
  --text-main: #f8fafc;
  --text-soft: #cbd5e1;
  --border-soft: #7c2d12;
  --surface-glass: rgba(15, 23, 42, 0.75);
  --shadow-soft: 0 10px 30px rgba(249, 115, 22, 0.08);
  --shadow-hover: 0 18px 38px rgba(249, 115, 22, 0.16);
}

/* Base App Colors */
.bg-pattern {
  background:
    radial-gradient(1200px 500px at -10% -5%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 60%),
    radial-gradient(1000px 420px at 110% 0%, rgba(251, 146, 60, 0.1) 0%, rgba(251, 146, 60, 0) 56%),
    linear-gradient(180deg, #f8faff 0%, #fff7ed 100%) !important;
}

[data-theme="dark"].bg-pattern {
  background:
    radial-gradient(1200px 500px at -10% -5%, rgba(234, 88, 12, 0.15) 0%, rgba(234, 88, 12, 0) 60%),
    radial-gradient(1000px 420px at 110% 0%, rgba(251, 146, 60, 0.12) 0%, rgba(251, 146, 60, 0) 56%),
    linear-gradient(180deg, #020617 0%, #0f172a 100%) !important;
}

/* Gradient buttons */
.btn-primary,
.brand-badge,
.logo-popup-badge,
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #f97316, #ea580c, #c2410c) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(234, 88, 12, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
.nav-pills .nav-link.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(234, 88, 12, 0.45) !important;
  background: linear-gradient(135deg, #fb923c, #f97316, #ea580c) !important;
}

/* Secondary & Ghost buttons */
.btn-outline-primary {
  color: #ea580c !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(234, 88, 12, 0.25) !important;
}

.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-secondary {
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn-outline-success::after,
.btn-outline-danger::after,
.btn-outline-warning::after,
.btn-outline-info::after,
.btn-outline-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 48%, transparent 100%);
  transform: translateX(-140%);
  transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.btn-outline-success:hover::after,
.btn-outline-danger:hover::after,
.btn-outline-warning:hover::after,
.btn-outline-info:hover::after,
.btn-outline-secondary:hover::after {
  transform: translateX(140%);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 14px 26px rgba(34, 197, 94, 0.24) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 14px 26px rgba(239, 68, 68, 0.24) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 14px 26px rgba(245, 158, 11, 0.24) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  box-shadow: 0 14px 26px rgba(14, 165, 233, 0.24) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #64748b, #475569) !important;
  box-shadow: 0 14px 26px rgba(100, 116, 139, 0.22) !important;
}

.modal-footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.96));
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  gap: 0.65rem;
}

.modal-footer .btn {
  min-width: 128px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.premium-modal-form .modal-body {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.96));
}

.premium-modal-form-lg .modal-body {
  padding-top: 1.35rem;
}

.premium-form-intro {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.05rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(191, 219, 254, 0.7);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92));
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.08);
}

.premium-form-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(14, 165, 233, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-size: 1.2rem;
}

.premium-form-intro-title {
  color: var(--text-main);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.premium-form-intro-copy {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.premium-form-card {
  padding: 1.05rem 1.1rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.premium-form-card-soft {
  background:
    radial-gradient(circle at top right, rgba(249, 115, 22, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.94));
}

.premium-form-inline-note {
  padding: 0.72rem 0.9rem;
  border-radius: 0.95rem;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  background: rgba(248, 250, 252, 0.9);
}

.premium-input-group {
  border-radius: 0.95rem;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}

.premium-input-group .btn {
  min-width: auto;
  font-weight: 700;
}

.premium-form-preview-card {
  min-height: 100%;
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.account-summary-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.account-summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.account-summary-card .card-body {
  position: relative;
  z-index: 1;
}

.account-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 0.75rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-size: 1rem;
}

.account-summary-card .text-secondary,
.account-summary-card h6,
.account-summary-card p,
.account-summary-card span {
  color: #ffffff !important;
}

.account-summary-card-name {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #3b82f6 100%) !important;
}

.account-summary-card-role {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 55%, #14b8a6 100%) !important;
}

.account-summary-card-invoices {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 55%, #ef4444 100%) !important;
}

.account-summary-card-points {
  background: linear-gradient(135deg, #22c55e 0%, #14b8a6 55%, #0ea5e9 100%) !important;
}

.account-summary-card-contact {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%) !important;
}

.account-summary-card-sales {
  background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 55%, #3b82f6 100%) !important;
}

.account-summary-card-used-points {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 55%, #dc2626 100%) !important;
}

.account-summary-card-discount {
  background: linear-gradient(135deg, #84cc16 0%, #22c55e 55%, #14b8a6 100%) !important;
}

.account-records-table-card {
  overflow: hidden;
}

.account-records-table-head {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.94));
}

.premium-notifications-modal-body,
.premium-rankings-modal-body {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.96));
}

.premium-notifications-list {
  display: grid;
  gap: 0.85rem;
}

.premium-notifications-list .alert {
  margin-bottom: 0 !important;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.premium-notifications-list .alert-info {
  border-color: rgba(14, 165, 233, 0.2);
}

.premium-notifications-list .alert-secondary {
  border-color: rgba(148, 163, 184, 0.2);
}

.premium-role-rankings-filters {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.premium-role-rankings-filters .role-ranking-filter-btn {
  min-width: 110px;
  border-radius: 999px !important;
  font-weight: 800;
}

.premium-role-rankings-grid .top-redeemer-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.premium-role-rankings-grid .top-redeemer-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #8b5cf6, #0ea5e9, #f97316);
}

.premium-role-rankings-grid .role-ranking-entry {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.premium-role-rankings-grid .role-ranking-points {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(59, 130, 246, 0.14));
  border-color: rgba(14, 165, 233, 0.18);
}

[data-theme="dark"] .modal-footer {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.96));
  border-top-color: rgba(71, 85, 105, 0.22);
}

[data-theme="dark"] .premium-modal-form .modal-body {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(17, 24, 39, 0.96));
}

[data-theme="dark"] .premium-form-intro {
  border-color: rgba(59, 130, 246, 0.22);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9));
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.32);
}

[data-theme="dark"] .premium-form-intro-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(14, 165, 233, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .premium-form-intro-title {
  color: #f8fafc;
}

[data-theme="dark"] .premium-form-card {
  border-color: rgba(71, 85, 105, 0.32);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.86));
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.3);
}

[data-theme="dark"] .premium-form-card-soft {
  background:
    radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.88));
}

[data-theme="dark"] .premium-form-inline-note {
  border-color: rgba(71, 85, 105, 0.42);
  background: rgba(15, 23, 42, 0.72);
}

[data-theme="dark"] .premium-input-group {
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.22);
}

[data-theme="dark"] .premium-form-preview-card {
  border-color: rgba(71, 85, 105, 0.36) !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.84));
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.28);
}

[data-theme="dark"] .account-summary-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 58%);
}

[data-theme="dark"] .account-summary-icon {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .account-records-table-head {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(17, 24, 39, 0.94));
}

[data-theme="dark"] .premium-notifications-modal-body,
[data-theme="dark"] .premium-rankings-modal-body {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(17, 24, 39, 0.96));
}

[data-theme="dark"] .premium-notifications-list .alert {
  border-color: rgba(71, 85, 105, 0.34);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.09), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.84));
  box-shadow: 0 18px 32px rgba(2, 6, 23, 0.24);
}

[data-theme="dark"] .premium-role-rankings-filters {
  border-color: rgba(71, 85, 105, 0.32);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.84));
  box-shadow: 0 18px 32px rgba(2, 6, 23, 0.22);
}

[data-theme="dark"] .premium-role-rankings-grid .top-redeemer-card {
  border-color: rgba(71, 85, 105, 0.32);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.88)) !important;
  box-shadow: 0 20px 36px rgba(2, 6, 23, 0.26);
}

[data-theme="dark"] .premium-role-rankings-grid .role-ranking-entry {
  background: rgba(15, 23, 42, 0.74);
  border-color: rgba(71, 85, 105, 0.3);
}

[data-theme="dark"] .premium-role-rankings-grid .role-ranking-points {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.16));
  border-color: rgba(14, 165, 233, 0.22);
  color: #bfdbfe;
}

@media (max-width: 767px) {
  .premium-role-rankings-filters {
    padding: 0.75rem;
  }

  .premium-role-rankings-filters .role-ranking-filter-btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }

  .premium-notifications-list .alert {
    padding: 0.9rem;
  }
}

/* Theme Toggle */
.theme-toggle {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.35) !important;
}

/* Forms & Inputs */
.form-control, .form-select {
  border-radius: 12px !important;
  border: 1px solid rgba(249, 115, 22, 0.25) !important;
  transition: all 0.25s ease !important;
}

.form-control:focus, .form-select:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15) !important;
}

/* Cards & Hover Effects */
.card {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 50px rgba(234, 88, 12, 0.12) !important;
}

[data-theme="dark"] .card {
  border-color: rgba(249, 115, 22, 0.15) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .card:hover {
  box-shadow: 0 24px 50px rgba(234, 88, 12, 0.2) !important;
}

/* Decorative Line on Cards (e.g. Card Stat) */
.card-stat::before, main h2.h5:not(.modal-title)::before {
  background: linear-gradient(180deg, #fb923c, #ea580c) !important;
}

#clientCompanyInfo::before,
#invoiceHistorySection::before,
#tabUsers .card::before,
#tabInvoices .card::before,
#tabTrash .card::before {
  background: linear-gradient(90deg, #f97316, #ea580c, #fb923c) !important;
}

/* Login Panel Focus Animation */
body[data-page="login"] .login-panel {
  animation: loadFox 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes loadFox {
  0% { opacity: 0; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Table Headers */
.table thead th {
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(255, 237, 213, 0.96)) !important;
  color: #c2410c !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="dark"] .table thead th {
  background: linear-gradient(180deg, rgba(67, 20, 7, 0.8), rgba(15, 23, 42, 0.9)) !important;
  color: #fdba74 !important;
}

/* Progress Bars */
.progress-bar {
  background: linear-gradient(90deg, #fb923c, #ea580c) !important;
}

/* Micro-animations */
td, th {
  transition: background 0.2s ease;
}

/* Notifications Badge */
.notif-badge {
  background: #ea580c !important;
  box-shadow: 0 0 10px rgba(234, 88, 12, 0.5);
}

/* Nav Menu Pulse */
#adminTabs .nav-link.active {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(234, 88, 12, 0.3) !important;
}

/* =========================================
   PREMIUM CINEMATIC ANIMATIONS
   ========================================= */

/* Sequential Card Load Animation */
main .card, .role-manager-row {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger logic for child grid items */
main .row > div:nth-child(1) .card { animation-delay: 0.05s; }
main .row > div:nth-child(2) .card { animation-delay: 0.15s; }
main .row > div:nth-child(3) .card { animation-delay: 0.25s; }
main .row > div:nth-child(4) .card { animation-delay: 0.3s; }
main .row > div:nth-child(5) .card { animation-delay: 0.38s; }
main .row > div:nth-child(6) .card { animation-delay: 0.45s; }
#roleManagerList .role-manager-row:nth-child(1) { animation-delay: 0.1s; }
#roleManagerList .role-manager-row:nth-child(2) { animation-delay: 0.2s; }
#roleManagerList .role-manager-row:nth-child(3) { animation-delay: 0.3s; }

@keyframes slideInUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glass-Sweep Hover Effect */
.btn-primary, .brand-badge {
  position: relative;
  overflow: hidden;
}

.btn-primary::after, .brand-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-primary:hover::after, .brand-badge:hover::after {
  left: 200%;
}

/* Pulsing Notification Badge */
.notif-badge {
  animation: pulseFox 2s infinite cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes pulseFox {
  0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

/* Floating effect for modal dialogs */
.modal.show .modal-dialog {
  animation: modalFloatIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFloatIn {
  0% { opacity: 0; transform: translateY(20px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 575.98px) {
  .premium-admin-cta-btn,
  .premium-admin-danger-btn {
    width: 100%;
  }

  .premium-admin-tabs {
    padding: 0.4rem;
    border-radius: 20px;
  }

  .premium-admin-tabs .nav-link {
    min-height: 48px;
    border-radius: 16px;
    font-size: 0.92rem;
  }

  .premium-filter-toolbar,
  .premium-role-filter-toolbar {
    padding: 0.35rem 0.85rem;
    border-radius: 16px;
  }
}