/**
 * VICH Digital Client Portal Stylesheet
 * Single source of truth for Blesta Client Template
 * Matches VICH Digital design system (TARDIS Blue #003B6F, Sky CTA #0284C7, Sky Hover #0EA5E9)
 * WCAG 2.2 AA Conformance Target
 */

/* Google Fonts — Poppins (headings) and Open Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* Semantic Color Tokens */
:root {
  --vich-tardis: #003B6F;
  --vich-tardis-dark: #00284D;
  --vich-sky: #0EA5E9;
  --vich-cta: #0284C7;
  --vich-cta-hover: #0369A1;
  --vich-canvas: #E9F1F9;
  --vich-surface: rgba(255, 255, 255, 0.90);
  --vich-surface-soft: rgba(242, 246, 251, 0.95);
  --vich-ink: #0F172A;
  --vich-ink-muted: #5C6B84;
  --vich-line: rgba(15, 23, 42, 0.10);
  --vich-line-strong: rgba(15, 23, 42, 0.18);
  --vich-glass-bg: rgba(255, 255, 255, 0.85);
  --vich-glass-border: rgba(15, 23, 42, 0.08);
  --vich-shadow: 0 10px 30px -5px rgba(0, 59, 111, 0.07), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --vich-shadow-lg: 0 20px 40px -10px rgba(0, 59, 111, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06);

  /* Modern Table Tokens (Light Mode) */
  --vich-table-bg: rgba(255, 255, 255, 0.95);
  --vich-table-header-bg: linear-gradient(180deg, #F0F5FA 0%, #E6EEF8 100%);
  --vich-table-header-text: #003B6F;
  --vich-table-header-border: rgba(0, 59, 111, 0.18);
  --vich-table-row-bg: #FFFFFF;
  --vich-table-row-stripe: rgba(233, 241, 249, 0.60);
  --vich-table-row-hover: rgba(2, 132, 199, 0.08);
  --vich-table-expand-bg: #F8FAFC;
  --vich-category-badge-bg: rgba(0, 59, 111, 0.10);
  --vich-category-badge-text: #003B6F;

  /* Status Badge Tokens (Light Mode) */
  --vich-badge-success-bg: #ECFDF5;
  --vich-badge-success-text: #065F46;
  --vich-badge-success-border: #A7F3D0;

  --vich-badge-info-bg: #E0F2FE;
  --vich-badge-info-text: #0369A1;
  --vich-badge-info-border: #BAE6FD;

  --vich-badge-warning-bg: #FEF3C7;
  --vich-badge-warning-text: #92400E;
  --vich-badge-warning-border: #FDE68A;

  --vich-badge-danger-bg: #FEE2E2;
  --vich-badge-danger-text: #991B1B;
  --vich-badge-danger-border: #FECACA;
}

/* Dark Theme Overrides */
html.dark,
body.dark,
[data-theme="dark"],
[data-bs-theme="dark"] {
  --vich-tardis: #003B6F;
  --vich-tardis-dark: #001E3D;
  --vich-sky: #38BDF8;
  --vich-cta: #0284C7;
  --vich-cta-hover: #38BDF8;
  --vich-canvas: #0B1120;
  --vich-surface: rgba(15, 23, 42, 0.90);
  --vich-surface-soft: rgba(30, 41, 59, 0.85);
  --vich-ink: #F1F5F9;
  --vich-ink-muted: #9AA9BC;
  --vich-line: rgba(255, 255, 255, 0.10);
  --vich-line-strong: rgba(255, 255, 255, 0.20);
  --vich-glass-bg: rgba(15, 23, 42, 0.80);
  --vich-glass-border: rgba(255, 255, 255, 0.08);
  --vich-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  --vich-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.7);

  /* Modern Table Tokens (Dark Mode) */
  --vich-table-bg: rgba(15, 23, 42, 0.88);
  --vich-table-header-bg: linear-gradient(180deg, #162238 0%, #0F172A 100%);
  --vich-table-header-text: #38BDF8;
  --vich-table-header-border: rgba(56, 189, 248, 0.28);
  --vich-table-row-bg: rgba(15, 23, 42, 0.90);
  --vich-table-row-stripe: rgba(30, 41, 59, 0.65);
  --vich-table-row-hover: rgba(56, 189, 248, 0.14);
  --vich-table-expand-bg: rgba(22, 34, 56, 0.95);
  --vich-category-badge-bg: rgba(255, 255, 255, 0.15);
  --vich-category-badge-text: #F1F5F9;

  /* Status Badge Tokens (Dark Mode) */
  --vich-badge-success-bg: rgba(16, 185, 129, 0.18);
  --vich-badge-success-text: #34D399;
  --vich-badge-success-border: rgba(52, 211, 153, 0.35);

  --vich-badge-info-bg: rgba(56, 189, 248, 0.18);
  --vich-badge-info-text: #38BDF8;
  --vich-badge-info-border: rgba(56, 189, 248, 0.35);

  --vich-badge-warning-bg: rgba(245, 158, 11, 0.18);
  --vich-badge-warning-text: #FBBF24;
  --vich-badge-warning-border: rgba(251, 191, 36, 0.35);

  --vich-badge-danger-bg: rgba(239, 68, 68, 0.18);
  --vich-badge-danger-text: #F87171;
  --vich-badge-danger-border: rgba(248, 113, 113, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --vich-tardis: #003B6F;
    --vich-tardis-dark: #001E3D;
    --vich-sky: #38BDF8;
    --vich-cta: #0284C7;
    --vich-cta-hover: #38BDF8;
    --vich-canvas: #0B1120;
    --vich-surface: rgba(15, 23, 42, 0.90);
    --vich-surface-soft: rgba(30, 41, 59, 0.85);
    --vich-ink: #F1F5F9;
    --vich-ink-muted: #9AA9BC;
    --vich-line: rgba(255, 255, 255, 0.10);
    --vich-line-strong: rgba(255, 255, 255, 0.20);
    --vich-glass-bg: rgba(15, 23, 42, 0.80);
    --vich-glass-border: rgba(255, 255, 255, 0.08);
    --vich-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
    --vich-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.7);

    /* Modern Table Tokens (Dark Mode) */
    --vich-table-bg: rgba(15, 23, 42, 0.88);
    --vich-table-header-bg: linear-gradient(180deg, #162238 0%, #0F172A 100%);
    --vich-table-header-text: #38BDF8;
    --vich-table-header-border: rgba(56, 189, 248, 0.28);
    --vich-table-row-bg: rgba(15, 23, 42, 0.90);
    --vich-table-row-stripe: rgba(30, 41, 59, 0.65);
    --vich-table-row-hover: rgba(56, 189, 248, 0.14);
    --vich-table-expand-bg: rgba(22, 34, 56, 0.95);
    --vich-category-badge-bg: rgba(255, 255, 255, 0.15);
    --vich-category-badge-text: #F1F5F9;

    /* Status Badge Tokens (Dark Mode) */
    --vich-badge-success-bg: rgba(16, 185, 129, 0.18);
    --vich-badge-success-text: #34D399;
    --vich-badge-success-border: rgba(52, 211, 153, 0.35);

    --vich-badge-info-bg: rgba(56, 189, 248, 0.18);
    --vich-badge-info-text: #38BDF8;
    --vich-badge-info-border: rgba(56, 189, 248, 0.35);

    --vich-badge-warning-bg: rgba(245, 158, 11, 0.18);
    --vich-badge-warning-text: #FBBF24;
    --vich-badge-warning-border: rgba(251, 191, 36, 0.35);

    --vich-badge-danger-bg: rgba(239, 68, 68, 0.18);
    --vich-badge-danger-text: #F87171;
    --vich-badge-danger-border: rgba(248, 113, 113, 0.35);
  }
}

/* Base Body Styling */
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-color: var(--vich-canvas) !important;
  color: var(--vich-ink) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Poppins */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title h3,
.card-header,
.modal-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--vich-ink);
}

/* Links */
a {
  color: var(--vich-cta);
  transition: color 0.15s ease, text-decoration 0.15s ease;
}
a:hover, a:focus {
  color: var(--vich-sky);
  text-decoration: underline;
}

/* Header — TARDIS Blue Deep Brand Banner */
.header {
  background: linear-gradient(135deg, var(--vich-tardis) 0%, var(--vich-tardis-dark) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.25rem 0;
  box-shadow: 0 4px 20px rgba(0, 30, 60, 0.25);
  position: relative;
  z-index: 20;
}

.header .logo img {
  max-height: 40px;
  width: auto;
  transition: transform 0.2s ease;
}
.header .logo a:hover img {
  transform: scale(1.02);
}

.header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

.header-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex-wrap: wrap !important;
}

/* Theme Toggle Component (Auto / Light / Dark) */
.vich-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(0, 30, 60, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9999px !important;
  padding: 3px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.vich-theme-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1 !important;
  user-select: none !important;
}

.vich-theme-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.vich-theme-btn:focus-visible {
  outline: 2px solid #38BDF8 !important;
  outline-offset: 1px !important;
}

.vich-theme-btn.active {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}

.vich-theme-btn.active .vich-theme-icon {
  color: #38BDF8 !important;
}

.vich-theme-icon {
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: transform 0.2s ease !important;
}

.vich-theme-btn:hover .vich-theme-icon {
  transform: scale(1.12) !important;
}

@media (max-width: 575.98px) {
  .vich-theme-label {
    display: none !important;
  }
  .vich-theme-btn {
    padding: 6px !important;
  }
  .vich-theme-icon {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Brand Wordmark inside header */
.vich-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none !important;
}
.vich-brand-logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0EA5E9, #0284C7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}
.vich-brand-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}
.vich-brand-title span {
  color: #38BDF8;
}

/* Navigation Content Bar */
.nav-content {
  background: var(--vich-surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vich-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.nav-content nav.navbar {
  background: transparent !important;
  padding: 0.5rem 0;
}

.nav-content nav.navbar .navbar-nav > li > a {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vich-ink) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-content nav.navbar .navbar-nav > li > a:hover,
.nav-content nav.navbar .navbar-nav > li.open > a,
.nav-content nav.navbar .navbar-nav > li.active > a {
  background: rgba(14, 165, 233, 0.12) !important;
  color: var(--vich-cta) !important;
}

.nav-content nav.navbar .navbar-nav > li.active > a {
  font-weight: 600;
  background: rgba(14, 165, 233, 0.18) !important;
}

/* Dropdown Menus */
.dropdown-menu {
  border-radius: 14px !important;
  background: var(--vich-surface) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--vich-line);
  box-shadow: var(--vich-shadow-lg);
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--vich-ink) !important;
  transition: background-color 0.15s, color 0.15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(14, 165, 233, 0.12) !important;
  color: var(--vich-cta) !important;
}

.dropdown-divider {
  border-top-color: var(--vich-line);
  margin: 0.35rem 0;
}

/* Page Title Bar */
.title {
  background: var(--vich-surface-soft) !important;
  border-bottom: 1px solid var(--vich-line);
  padding: 1.25rem 0;
  margin-bottom: 2rem;
}

.title h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vich-ink) !important;
}

/* Card & Panels — Frosted Glassmorphism */
.card,
.card-blesta {
  border-radius: 16px !important;
  background: var(--vich-surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--vich-line) !important;
  box-shadow: var(--vich-shadow);
  overflow: hidden;
  margin-bottom: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.card-blesta:hover {
  box-shadow: var(--vich-shadow-lg);
}

.card > .card-header,
.card-blesta > .card-header {
  background: var(--vich-surface-soft) !important;
  border-bottom: 1px solid var(--vich-line) !important;
  padding: 1rem 1.35rem;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  color: var(--vich-ink) !important;
  font-size: 1.05rem;
}

.card > .card-body,
.card-blesta > .card-body {
  padding: 1.5rem;
  color: var(--vich-ink);
}

.card > .card-footer,
.card-blesta > .card-footer {
  background: var(--vich-surface-soft) !important;
  border-top: 1px solid var(--vich-line) !important;
  padding: 0.85rem 1.35rem;
}

/* Buttons — VICH CTA & Sky Accent */
.btn {
  border-radius: 12px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1.25rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: var(--vich-cta) !important;
  border-color: var(--vich-cta) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--vich-sky) !important;
  border-color: var(--vich-sky) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.38);
}

.btn-secondary,
.btn-default,
.btn-outline-secondary {
  background: var(--vich-surface-soft) !important;
  border: 1px solid var(--vich-line-strong) !important;
  color: var(--vich-ink) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-outline-secondary:hover {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: var(--vich-sky) !important;
  color: var(--vich-cta) !important;
}

.btn-success {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
}
.btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

.btn-danger {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}
.btn-danger:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}

/* Form Inputs & Controls */
.form-control,
.form-select,
select.form-control,
textarea.form-control,
input.form-control {
  border-radius: 12px !important;
  background: var(--vich-surface) !important;
  border: 1px solid var(--vich-line-strong) !important;
  color: var(--vich-ink) !important;
  padding: 0.65rem 1rem;
  font-size: 0.9375rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus,
input.form-control:focus {
  border-color: var(--vich-sky) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22) !important;
  outline: none !important;
}

label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--vich-ink);
  margin-bottom: 0.35rem;
}

/* ==========================================================================
   VICH Digital Modern Data Tables & Layout (UI/UX Pro Max Redesign)
   ========================================================================== */

/* Table Scroll Wrapper */
.table-responsive {
  border-radius: 14px !important;
  border: 1px solid var(--vich-line) !important;
  background: var(--vich-table-bg) !important;
  box-shadow: var(--vich-shadow);
  margin-bottom: 1.5rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Custom Scrollbar for Responsive Tables */
.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--vich-line-strong);
  border-radius: 9999px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--vich-sky);
}

/* Base Table Element */
table.table,
.table-curved,
.table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
  background-color: transparent !important;
  color: var(--vich-ink) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* Reset Outdated 2012 .table-curved borders */
.table-curved td,
.table-curved th,
.table-curved tbody > tr > td,
.table-curved tbody > tr > td:first-child,
.table-curved th:first-child,
.table-curved th:last-child {
  border-left: none !important;
  border-radius: 0 !important;
}

/* Table Headers */
table.table thead th,
table.table thead tr th,
.table-curved thead th,
.table-curved th,
.table > thead > tr > th {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 1rem 1.15rem !important;
  background: var(--vich-table-header-bg) !important;
  color: var(--vich-table-header-text) !important;
  border: none !important;
  border-bottom: 2px solid var(--vich-table-header-border) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* First & Last TH Corner Radius */
table.table thead tr:first-child th:first-child,
.table-curved thead tr:first-child th:first-child {
  border-top-left-radius: 13px !important;
}
table.table thead tr:first-child th:last-child,
.table-curved thead tr:first-child th:last-child {
  border-top-right-radius: 13px !important;
}

/* Sort Links in Headers */
table.table thead th a,
table.table thead tr th a,
.table-curved thead th a,
.table > thead > tr > th > a {
  color: var(--vich-table-header-text) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

table.table thead th a:hover,
table.table thead tr th a:hover,
.table-curved thead th a:hover,
.table > thead > tr > th > a:hover {
  color: var(--vich-sky) !important;
  text-decoration: none !important;
}

/* Sort Icons */
th > a.asc::after,
th > a.desc::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 0.75rem !important;
  color: var(--vich-sky) !important;
  margin-left: 0.35rem !important;
}

/* Table Body Cells - High Specificity Override of Bootstrap */
table.table tbody td,
table.table tbody th,
.table-curved tbody td,
.table-curved tbody th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table-striped > tbody > tr > td,
.table-striped-alt > tbody > tr > td,
.table-striped > tbody > tr > th,
.table-striped-alt > tbody > tr > th {
  padding: 0.95rem 1.15rem !important;
  border: none !important;
  border-bottom: 1px solid var(--vich-line) !important;
  color: var(--vich-ink) !important;
  background-color: var(--vich-table-row-bg) !important;
  vertical-align: middle !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Zebra Striping — Override Bootstrap's >tr:nth-child(2n+1)>td hardcoded backgrounds */
table.table.table-striped > tbody > tr:nth-of-type(odd) > td,
table.table.table-striped > tbody > tr:nth-of-type(odd) > th,
table.table.table-striped-alt > tbody > tr:nth-of-type(odd) > td,
table.table.table-striped-alt > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped-alt > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th,
.table-striped-alt > tbody > tr:nth-child(2n+1) > th,
.table-striped-alt > tbody > tr:nth-child(4n+3) > td,
.table-striped-alt > tbody > tr:nth-child(4n+3) > th {
  background-color: var(--vich-table-row-stripe) !important;
}

table.table.table-striped > tbody > tr:nth-of-type(even) > td,
table.table.table-striped > tbody > tr:nth-of-type(even) > th,
table.table.table-striped-alt > tbody > tr:nth-of-type(even) > td,
table.table.table-striped-alt > tbody > tr:nth-of-type(even) > th,
.table-striped > tbody > tr:nth-child(2n) > td,
.table-striped-alt > tbody > tr:nth-child(2n) > td,
.table-striped > tbody > tr:nth-child(2n) > th,
.table-striped-alt > tbody > tr:nth-child(2n) > th {
  background-color: var(--vich-table-row-bg) !important;
}

/* Row Hover State — HIGHEST SPECIFICITY to kill Bootstrap's color: #212529 */
table.table.table-hover > tbody > tr:hover,
table.table.table-hover > tbody > tr:hover > td,
table.table.table-hover > tbody > tr:hover > th,
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.table-hover > tbody > tr:hover > * {
  background-color: var(--vich-table-row-hover) !important;
  color: var(--vich-ink) !important;
}

/* Bottom Row Corners */
table.table tbody tr:last-child td:first-child,
.table-curved tbody tr:last-child td:first-child {
  border-bottom-left-radius: 13px !important;
}
table.table tbody tr:last-child td:last-child,
.table-curved tbody tr:last-child td:last-child {
  border-bottom-right-radius: 13px !important;
}

/* Remove bottom border on last row */
table.table tbody tr:last-child td,
.table-curved tbody tr:last-child td {
  border-bottom: none !important;
}

/* Numeric and Currency Alignment */
.table td .currency_value,
.table td.numeric,
.table td.text-right {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  font-weight: 600;
}

/* Secondary Meta Text in Cells (Dates, IDs) */
.table td small,
.table td .text-muted {
  color: var(--vich-ink-muted) !important;
  font-size: 0.8125rem !important;
}

/* Expandable Rows */
tr.expand {
  cursor: pointer !important;
}
tr.expand td:last-of-type {
  padding-right: 2.5rem !important;
  position: relative !important;
}
tr.expand td:last-of-type::after {
  content: "\f078" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 0.75rem !important;
  color: var(--vich-sky) !important;
  position: absolute !important;
  right: 1.15rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}
tr.expand.expanded td:last-of-type::after {
  content: "\f077" !important;
  color: var(--vich-cta) !important;
}

/* Expand Details Panel */
table.table > tbody > tr.expand_details > td,
table.table > tbody > tr.expand_details > td:hover,
.table > tbody > tr.expand_details > td,
.table > tbody > tr.expand_details > td:hover {
  background-color: var(--vich-table-expand-bg) !important;
  border-top: 1px dashed var(--vich-line-strong) !important;
  border-bottom: 2px solid var(--vich-line-strong) !important;
  color: var(--vich-ink) !important;
  padding: 1.25rem 1.5rem !important;
}

/* Nested Email Header in Email Logs */
.table.multi_heading .email_header,
.table.multi_heading .email_header td {
  background-color: var(--vich-surface-soft) !important;
  color: var(--vich-ink) !important;
  border-bottom: 1px solid var(--vich-line) !important;
  font-weight: 600;
}

/* Action Buttons inside Tables */
.table .btn-group .btn,
.table .btn-xs,
.table .btn-light,
.btn-xs.btn-light {
  background: var(--vich-surface-soft) !important;
  border: 1px solid var(--vich-line-strong) !important;
  color: var(--vich-ink) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.785rem !important;
  font-weight: 500 !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

.table .btn-group .btn:hover,
.table .btn-xs:hover,
.table .btn-light:hover,
.btn-xs.btn-light:hover {
  background: var(--vich-cta) !important;
  border-color: var(--vich-cta) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3) !important;
}

/* Category Filter Tabs (.card-links) Redesign */
.card-nav {
  margin-bottom: 1.25rem !important;
}

.card-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 4px !important;
  background: var(--vich-surface-soft) !important;
  border: 1px solid var(--vich-line) !important;
  border-radius: 9999px !important;
  list-style: none !important;
  margin: 0 !important;
  flex-wrap: wrap;
}

.card-links > li {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
}

.card-links > li + li::before {
  display: none !important;
  content: "" !important;
}

.card-links > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.45rem 0.95rem !important;
  border-radius: 9999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--vich-ink-muted) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-links > li > a:hover {
  color: var(--vich-cta) !important;
  background: rgba(14, 165, 233, 0.08) !important;
  text-decoration: none !important;
}

.card-links > li.active > a,
.card-links > li > a.active {
  background: var(--vich-cta) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

/* Badge inside Category Tabs */
.card-links .badge,
.card-links > li > a .badge {
  background: var(--vich-category-badge-bg) !important;
  color: var(--vich-category-badge-text) !important;
  border-radius: 9999px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.5rem !important;
  min-width: 18px !important;
  border: none !important;
}

.card-links > li.active > a .badge,
.card-links > li > a.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* Table Filter Bar */
form.widget_filter_form {
  background: var(--vich-surface-soft) !important;
  border: 1px solid var(--vich-line) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.15rem !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Pagination */
div.pagination {
  margin: 1.5rem 0 0 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

div.pagination ul.pagination {
  display: inline-flex !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

div.pagination ul.pagination li a,
div.pagination ul.pagination li span {
  background: var(--vich-surface) !important;
  border: 1px solid var(--vich-line) !important;
  color: var(--vich-ink) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

div.pagination ul.pagination li a:hover {
  border-color: var(--vich-sky) !important;
  color: var(--vich-sky) !important;
  background: var(--vich-surface-soft) !important;
}

div.pagination ul.pagination li.active a,
div.pagination ul.pagination li.active span {
  background: var(--vich-cta) !important;
  border-color: var(--vich-cta) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600 !important;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.725rem !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.badge-success,
.status-active,
.badge-paid {
  background-color: var(--vich-badge-success-bg) !important;
  color: var(--vich-badge-success-text) !important;
  border: 1px solid var(--vich-badge-success-border) !important;
}

.badge-info,
.status-pending,
.badge-in-progress {
  background-color: var(--vich-badge-info-bg) !important;
  color: var(--vich-badge-info-text) !important;
  border: 1px solid var(--vich-badge-info-border) !important;
}

.badge-warning,
.status-unpaid,
.badge-due {
  background-color: var(--vich-badge-warning-bg) !important;
  color: var(--vich-badge-warning-text) !important;
  border: 1px solid var(--vich-badge-warning-border) !important;
}

.badge-danger,
.status-suspended,
.badge-canceled {
  background-color: var(--vich-badge-danger-bg) !important;
  color: var(--vich-badge-danger-text) !important;
  border: 1px solid var(--vich-badge-danger-border) !important;
}

/* Secondary List Groups (Side Nav in Account Areas) */
.list-group {
  border-radius: 14px;
}

.list-group-item {
  border-radius: 12px !important;
  margin-bottom: 0.4rem;
  border: 1px solid transparent;
  background: var(--vich-surface);
  color: var(--vich-ink);
  font-weight: 500;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-group-item:hover {
  background: rgba(14, 165, 233, 0.08);
  color: var(--vich-cta);
  border-color: rgba(14, 165, 233, 0.2);
  transform: translateX(4px);
}

.list-group-item.active {
  background: var(--vich-cta) !important;
  border-color: var(--vich-cta) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

/* Modals */
.modal-content {
  border-radius: 20px !important;
  background: var(--vich-surface) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--vich-line);
  box-shadow: var(--vich-shadow-lg);
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--vich-line);
  padding: 1.25rem 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--vich-line);
  padding: 1rem 1.5rem;
}

/* Alert Boxes — Theme-aware frosted alerts */
.alert {
  border-radius: 12px;
  border-width: 1px;
  padding: 1rem 1.25rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.alert-success {
  background-color: var(--vich-badge-success-bg) !important;
  border-color: var(--vich-badge-success-border) !important;
  color: var(--vich-badge-success-text) !important;
}

.alert-info {
  background-color: var(--vich-badge-info-bg) !important;
  border-color: var(--vich-badge-info-border) !important;
  color: var(--vich-badge-info-text) !important;
}

.alert-warning {
  background-color: var(--vich-badge-warning-bg) !important;
  border-color: var(--vich-badge-warning-border) !important;
  color: var(--vich-badge-warning-text) !important;
}

.alert-danger {
  background-color: var(--vich-badge-danger-bg) !important;
  border-color: var(--vich-badge-danger-border) !important;
  color: var(--vich-badge-danger-text) !important;
}

/* Footer — Theme-aware Frosted Bar */
.footer {
  background: var(--vich-surface) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--vich-line);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  box-shadow: var(--vich-shadow);
  color: var(--vich-ink-muted);
}

.footer hr {
  display: none;
}

.footer p {
  margin: 0;
  font-size: 0.875rem;
}

.footer a {
  color: var(--vich-cta);
  font-weight: 500;
  text-decoration: none;
}

.footer a:hover {
  color: var(--vich-sky);
  text-decoration: underline;
}

/* Login Page Specific Styling */
.row.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 220px);
}

.row.login .card,
.row.login .card-blesta {
  max-width: 480px;
  width: 100%;
  margin: 2rem auto;
  box-shadow: var(--vich-shadow-lg);
}

/* WCAG 2.2 AA Accessibility & Focus Visibility */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vich-sky) !important;
  outline-offset: 2px !important;
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }
}