/* ── Dark theme (default) ───────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --sayob-bg: #0d0d0d;
  --sayob-bg-secondary: #141414;
  --sayob-bg-card: #1a1a1a;
  --sayob-border: #2a2a2a;
  --sayob-border-light: #222222;
  --sayob-accent: #e8e8e8;
  --sayob-accent-hover: #ffffff;
  --sayob-text: #e8e8e8;
  --sayob-text-muted: #888888;
  --sayob-white: #ffffff;
  --sayob-dark: #0d0d0d;
  --sayob-blue: #e8e8e8;
  --sayob-blue-hover: #ffffff;
  --sayob-blue-dark: #cccccc;
  --sayob-blue-muted: #888888;
  --sayob-blue-soft: #1a1a1a;
  --sayob-blue-softer: #141414;
  --sayob-blue-border: #2a2a2a;
  --sayob-blue-border-light: #222222;
  --sayob-radius: 8px;
  --sayob-radius-lg: 12px;
}

/* ── Light theme ────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --sayob-bg: #ffffff;
  --sayob-bg-secondary: #f5f5f5;
  --sayob-bg-card: #ffffff;
  --sayob-border: #e0e0e0;
  --sayob-border-light: #ebebeb;
  --sayob-accent: #111111;
  --sayob-accent-hover: #000000;
  --sayob-text: #1a1a1a;
  --sayob-text-muted: #666666;
  --sayob-white: #111111;       /* inverted: "white" buttons become dark */
  --sayob-dark: #ffffff;         /* inverted: "dark" bg becomes white */
  --sayob-blue: #1a1a1a;
  --sayob-blue-hover: #000000;
  --sayob-blue-dark: #333333;
  --sayob-blue-muted: #666666;
  --sayob-blue-soft: #f0f0f0;
  --sayob-blue-softer: #f8f8f8;
  --sayob-blue-border: #e0e0e0;
  --sayob-blue-border-light: #ebebeb;
  --sayob-radius: 8px;
  --sayob-radius-lg: 12px;
}

/* ── Theme transition ───────────────────────────────────────── */
html {
  transition: background-color 0.25s ease, color 0.25s ease;
}
body,
.sayob-header,
.sayob-navbar,
.sayob-footer,
.card,
.card-header,
.card-footer,
.list-group-item {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Light theme — overrides that can't be done via vars alone */
[data-theme="light"] body {
  color: #1a1a1a !important;
  background-color: #ffffff !important;
}
[data-theme="light"] .sayob-header,
[data-theme="light"] .sayob-navbar,
[data-theme="light"] .sayob-header .topbar {
  background-color: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #1a1a1a !important;
}
[data-theme="light"] .sayob-logo-text { color: #111111 !important; }
[data-theme="light"] .sayob-nav .nav-item .nav-link { color: #666666 !important; }
[data-theme="light"] .sayob-nav .nav-item .nav-link:hover { color: #111111 !important; }
[data-theme="light"] .sayob-nav-secondary .nav-item:last-child .nav-link,
[data-theme="light"] .sayob-nav-secondary .btn {
  background-color: #111111 !important;
  color: #ffffff !important;
}
[data-theme="light"] .sayob-nav-secondary .nav-item:last-child .nav-link:hover,
[data-theme="light"] .sayob-nav-secondary .btn:hover {
  background-color: #333333 !important;
}
[data-theme="light"] .sayob-cart { color: #666666 !important; }
[data-theme="light"] .sayob-cart:hover { color: #111111 !important; }
[data-theme="light"] .sayob-cart .badge { background-color: #111111 !important; color: #ffffff !important; }
[data-theme="light"] .sayob-nav-toggle {
  border-color: #e0e0e0 !important;
  background: #ffffff !important;
  color: #333333 !important;
}
[data-theme="light"] .sayob-footer {
  background-color: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #666666 !important;
}
[data-theme="light"] .sayob-footer .nav-link { color: #666666 !important; }
[data-theme="light"] .sayob-footer .nav-link:hover { color: #111111 !important; }
[data-theme="light"] .sayob-footer-lang {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #333333 !important;
}
[data-theme="light"] .master-breadcrumb,
[data-theme="light"] .breadcrumb { background-color: #f5f5f5 !important; }
[data-theme="light"] .card {
  background-color: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #1a1a1a !important;
}
[data-theme="light"] .card-header,
[data-theme="light"] .card-footer {
  background-color: #f5f5f5 !important;
  border-color: #ebebeb !important;
}
[data-theme="light"] .list-group-item {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: #ebebeb !important;
}
[data-theme="light"] .list-group-item-action { color: #666666 !important; }
[data-theme="light"] .list-group-item-action:hover { color: #111111 !important; background-color: #f0f0f0 !important; }
[data-theme="light"] .list-group-item.active { background-color: #f0f0f0 !important; color: #111111 !important; border-color: #e0e0e0 !important; }
[data-theme="light"] .dropdown-menu { background-color: #ffffff !important; border-color: #e0e0e0 !important; }
[data-theme="light"] .dropdown-item { color: #333333 !important; }
[data-theme="light"] .dropdown-item:hover { background-color: #f5f5f5 !important; color: #111111 !important; }
[data-theme="light"] .modal-content { background-color: #ffffff !important; border-color: #e0e0e0 !important; color: #1a1a1a !important; }
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer { border-color: #e0e0e0 !important; }
[data-theme="light"] .form-control,
[data-theme="light"] select.form-control {
  background-color: #ffffff !important;
  border-color: #d0d0d0 !important;
  color: #1a1a1a !important;
}
[data-theme="light"] .form-control:focus {
  border-color: #999 !important;
  box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .input-group-text {
  background-color: #f5f5f5 !important;
  border-color: #d0d0d0 !important;
  color: #666666 !important;
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-outline-primary:hover {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
[data-theme="light"] .btn-primary:hover { background-color: #333333 !important; border-color: #333333 !important; }
[data-theme="light"] .btn-default,
[data-theme="light"] .btn-secondary {
  background-color: #f0f0f0 !important;
  border-color: #d0d0d0 !important;
  color: #333333 !important;
}
[data-theme="light"] .tiles .tile { background: #f5f5f5 !important; border-color: #ebebeb !important; }
[data-theme="light"] .tiles .tile .stat { color: #111111 !important; }
[data-theme="light"] .tiles .tile:hover { background: #ececec !important; }
[data-theme="light"] a { color: #1a1a1a !important; }
[data-theme="light"] a:hover { color: #000000 !important; }
[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary,
[data-theme="light"] small.text-muted { color: #666666 !important; }
[data-theme="light"] #order-standard_cart .view-cart-items-header,
[data-theme="light"] #order-standard_cart #products .product header,
[data-theme="light"] #order-standard_cart div.order-summary { background-color: #f0f0f0 !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;
  color: var(--sayob-text);
  background-color: var(--sayob-bg);
}

.primary-bg-color {
  background-color: var(--sayob-bg);
}

/* Replace inherited grey utilities */
.text-muted,
.text-secondary,
small.text-muted {
  color: var(--sayob-text-muted) !important;
}

/* Header */
.sayob-header,
.sayob-header .topbar {
  background-color: var(--sayob-bg);
  color: var(--sayob-text);
  box-shadow: none;
}

.sayob-header .topbar {
  border-bottom: 1px solid var(--sayob-border-light);
}

.sayob-navbar {
  padding: 1rem 0;
  background: var(--sayob-bg);
  border-bottom: 1px solid var(--sayob-border);
}

.sayob-navbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.sayob-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.sayob-logo img {
  height: 20px;
  width: auto;
}

.sayob-logo-text {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sayob-white);
  white-space: nowrap;
}

.sayob-logo:hover .sayob-logo-text {
  color: var(--sayob-text-muted);
}

.sayob-nav-collapse {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (min-width: 1200px) {
  .sayob-nav-collapse {
    display: flex !important;
  }
}

.sayob-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sayob-nav .nav-item .nav-link {
  color: var(--sayob-text-muted);
  font-size: 15px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--sayob-radius);
}

.sayob-nav .nav-item .nav-link:hover,
.sayob-nav .nav-item .nav-link:focus,
.sayob-nav .nav-item.active .nav-link {
  color: var(--sayob-white);
  background: transparent;
}

.sayob-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.sayob-cart {
  color: var(--sayob-text-muted);
  font-size: 1.25rem;
  padding: 0.5rem;
  position: relative;
}

.sayob-cart:hover {
  color: var(--sayob-white);
}

.sayob-cart .badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
  background-color: #555 !important;
}

.sayob-nav-secondary .nav-item:last-child .nav-link,
.sayob-nav-secondary .btn {
  background-color: var(--sayob-white);
  color: var(--sayob-dark) !important;
  border-radius: var(--sayob-radius);
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  border: none;
}

.sayob-nav-secondary .nav-item:last-child .nav-link:hover,
.sayob-nav-secondary .btn:hover {
  background-color: #dddddd;
  color: var(--sayob-dark) !important;
}

.sayob-nav-toggle {
  border: 1px solid var(--sayob-border);
  background: var(--sayob-bg-card);
  color: var(--sayob-text);
  border-radius: var(--sayob-radius);
  padding: 0.5rem 0.75rem;
  margin-left: 0;
}

@media (max-width: 1199.98px) {
  .sayob-nav-collapse {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 1rem;
  }

  .sayob-nav-main,
  .sayob-nav-secondary {
    flex-direction: column;
    width: 100%;
  }

  .sayob-nav-actions {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
  }
}

.sayob-header .navbar.navbar-light:not(.sayob-navbar),
.sayob-header .main-navbar-wrapper {
  display: none;
}

header.header .navbar-nav a.dropdown-item {
  color: var(--sayob-text);
  background-color: var(--sayob-bg-card);
}

header.header .navbar-nav a.dropdown-item:hover {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
}

/* Homepage layout */
.sayob-home .sayob-main-home > .container {
  max-width: 100%;
  padding: 0;
}

.sayob-home .sayob-main-home > .container > .row {
  margin: 0;
}

.sayob-home .sayob-main-home .primary-content {
  padding: 0;
}

.sayob-home #main-body {
  padding-top: 0;
}

/* Hero */
.sayob-hero {
  padding: 4rem 0 5rem;
  background: var(--sayob-bg);
}

.sayob-hero-kicker {
  color: var(--sayob-text-muted);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.sayob-hero-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--sayob-white);
  margin-bottom: 1.25rem;
}

.sayob-hero-text {
  color: var(--sayob-text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 520px;
}

.sayob-hero-cta {
  padding: 0.875rem 2rem;
  font-weight: 600;
  border-radius: var(--sayob-radius);
}

.sayob-hero-img {
  width: 100%;
  height: auto;
  max-width: 560px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  .sayob-hero {
    padding: 2.5rem 0 3rem;
    text-align: center;
  }

  .sayob-hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .sayob-hero-visual {
    margin-top: 2.5rem;
  }
}

/* Plans section */
.sayob-plans {
  padding: 4rem 0 5rem;
  background: var(--sayob-bg-secondary);
}

.sayob-section-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--sayob-white);
  margin-bottom: 0.75rem;
}

.sayob-section-subtitle {
  text-align: center;
  color: var(--sayob-text-muted);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.sayob-plan-card {
  border: 1px solid var(--sayob-border);
  border-radius: var(--sayob-radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--sayob-bg-card);
}

.sayob-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.08);
  border-color: #555;
}

.sayob-plan-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sayob-white);
  margin-bottom: 0.75rem;
}

.sayob-plan-tagline {
  color: var(--sayob-text-muted);
  margin-bottom: 1.5rem;
  min-height: 3rem;
}

.sayob-plan-btn {
  border-radius: var(--sayob-radius);
  font-weight: 600;
}

/* Help section */
.sayob-help {
  padding: 4rem 0 5rem;
  background: var(--sayob-bg);
}

/* Buttons & links */
.btn-primary,
.btn-outline-primary:hover {
  background-color: var(--sayob-white);
  border-color: var(--sayob-white);
  color: var(--sayob-dark);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #dddddd;
  border-color: #dddddd;
  color: var(--sayob-dark);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15);
}

.btn-outline-primary {
  color: var(--sayob-text);
  border-color: var(--sayob-border);
}

.btn-outline-primary:hover {
  color: var(--sayob-dark);
}

.btn-default,
.btn-secondary {
  color: var(--sayob-text);
  background-color: var(--sayob-bg-card);
  border-color: var(--sayob-border);
}

.btn-default:hover,
.btn-secondary:hover {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
  border-color: #555;
}

a {
  color: var(--sayob-text);
}

a:hover {
  color: var(--sayob-white);
}

.text-primary {
  color: var(--sayob-white) !important;
}

/* Forms */
.form-control {
  color: var(--sayob-text);
  background-color: var(--sayob-bg-card);
  border-color: var(--sayob-border);
}

.form-control::placeholder {
  color: var(--sayob-text-muted);
  opacity: 0.8;
}

.form-control:focus {
  background-color: var(--sayob-bg-card);
  color: var(--sayob-white);
  border-color: #555;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.08);
}

.input-group-text {
  color: var(--sayob-text-muted);
  background-color: var(--sayob-bg-secondary);
  border-color: var(--sayob-border);
}

/* Breadcrumb */
.master-breadcrumb,
.breadcrumb {
  background-color: var(--sayob-bg-secondary);
}

.breadcrumb-item a {
  color: var(--sayob-text);
}

.breadcrumb-item.active {
  color: var(--sayob-text-muted);
}

.breadcrumb > * {
  color: var(--sayob-text-muted);
}

/* Action icons (homepage help) */
.action-icon-btns a {
  border: 1px solid var(--sayob-border);
  border-radius: var(--sayob-radius-lg);
  color: var(--sayob-text);
  background: var(--sayob-bg-card);
}

.action-icon-btns a:hover {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
  border-color: #555;
}

.action-icon-btns a .ico-container i {
  color: var(--sayob-text-muted);
}

/* Footer */
.sayob-footer {
  background-color: var(--sayob-bg-secondary);
  color: var(--sayob-text-muted);
  border-top: 1px solid var(--sayob-border);
  padding: 2.5rem 0;
}

.sayob-footer .nav-link {
  color: var(--sayob-text-muted);
}

.sayob-footer .nav-link:hover {
  color: var(--sayob-white);
}

.sayob-footer .copyright {
  color: var(--sayob-text-muted);
  font-size: 0.9rem;
}

.sayob-footer-lang {
  border: 1px solid var(--sayob-border);
  border-radius: var(--sayob-radius);
  background: var(--sayob-bg-card);
  color: var(--sayob-text);
}

/* Client area & inner pages */
section#main-body {
  padding: 2rem 0 3rem;
}

.card {
  border-radius: var(--sayob-radius-lg);
  border-color: var(--sayob-border);
  background-color: var(--sayob-bg-card);
  color: var(--sayob-text);
}

.card-header,
.card-footer {
  background-color: var(--sayob-bg-secondary);
  border-color: var(--sayob-border-light);
  color: var(--sayob-text);
}

.list-group-item {
  color: var(--sayob-text);
  background-color: var(--sayob-bg-card);
  border-color: var(--sayob-border-light);
}

.list-group-item-action {
  color: var(--sayob-text-muted);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
}

.list-group-item.active {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
  border-color: var(--sayob-border);
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
  border-color: var(--sayob-border-light);
}

.page-link {
  color: var(--sayob-text-muted);
  background-color: var(--sayob-bg-card);
  border-color: var(--sayob-border-light);
}

.page-link:hover {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
  border-color: var(--sayob-border);
}

.page-item.active .page-link {
  background-color: var(--sayob-border);
  border-color: #555;
  color: var(--sayob-white);
  font-weight: 600;
}

.page-item.disabled .page-link {
  color: #444;
  background-color: var(--sayob-bg-secondary);
  border-color: var(--sayob-border-light);
}

/* Tables */
.dataTables_wrapper table.table-list {
  border-color: var(--sayob-border);
  color: var(--sayob-text);
}

.dataTables_wrapper table.table-list thead th {
  border-bottom-color: var(--sayob-border);
  color: var(--sayob-text-muted);
  background-color: var(--sayob-bg-secondary);
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: var(--sayob-bg-secondary);
}

/* Tiles (logged-in home) */
.tiles .tile {
  background: var(--sayob-bg-card);
  border: 1px solid var(--sayob-border-light);
}

.tiles .tile .title {
  color: var(--sayob-text-muted);
}

.tiles .tile .stat {
  color: var(--sayob-white);
}

.tiles .tile .icon i {
  color: var(--sayob-text-muted);
}

.tiles .tile .highlight.bg-color-blue {
  background-color: #333 !important;
}

.tiles .tile a:hover .title {
  color: var(--sayob-white);
}

.tiles .tile:hover {
  background: var(--sayob-border);
}

/* Shopping cart */
#order-standard_cart .view-cart-items-header,
#order-standard_cart #products .product header,
#order-standard_cart div.order-summary {
  background-color: var(--sayob-bg-secondary);
}

#order-standard_cart .form-group label {
  color: var(--sayob-text);
}

#order-standard_cart .form-group .form-control {
  border-color: var(--sayob-border);
  color: var(--sayob-text);
  background-color: var(--sayob-bg-card);
}

#order-standard_cart .domain-promo-box {
  border-color: var(--sayob-border);
  color: var(--sayob-text);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--sayob-bg-card);
  border: 1px solid var(--sayob-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.dropdown-item {
  color: var(--sayob-text-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--sayob-white);
  background-color: var(--sayob-border);
}

/* Alerts */
.alert-info {
  background-color: var(--sayob-bg-card);
  border-color: var(--sayob-border);
  color: var(--sayob-text);
}

.alert-secondary {
  background-color: var(--sayob-bg-secondary);
  border-color: var(--sayob-border-light);
  color: var(--sayob-text-muted);
}

/* Modals & panels */
.modal-content {
  background-color: var(--sayob-bg-card);
  color: var(--sayob-text);
  border-color: var(--sayob-border);
}

.modal-header {
  border-color: var(--sayob-border);
}

.modal-footer {
  border-color: var(--sayob-border);
}

.modal-header.bg-primary {
  background-color: var(--sayob-bg-secondary) !important;
}

.panel-default {
  border-color: var(--sayob-border);
}

.panel-heading {
  background-color: var(--sayob-bg-secondary);
  color: var(--sayob-text);
}

.panel-footer {
  background-color: var(--sayob-bg-secondary);
  border-color: var(--sayob-border-light);
}

/* Home KB search */
.home-kb-search input.form-control {
  border-color: var(--sayob-border);
}

.home-kb-search i {
  color: var(--sayob-text-muted);
}

/* Tables general */
table {
  color: var(--sayob-text);
}

.table {
  color: var(--sayob-text);
}

.table td, .table th {
  border-color: var(--sayob-border-light);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.02);
}

.table-hover tbody tr:hover {
  background-color: var(--sayob-border);
  color: var(--sayob-white);
}

/* Topbar */
.topbar .btn {
  color: var(--sayob-text-muted);
}

.topbar .btn:hover {
  color: var(--sayob-white);
}

.topbar .btn-active-client {
  color: var(--sayob-text);
}

/* Input group in topbar */
.active-client .input-group-text,
.active-client .btn {
  background-color: var(--sayob-bg-card);
  border-color: var(--sayob-border);
  color: var(--sayob-text-muted);
}

/* Select, textarea */
select.form-control {
  background-color: var(--sayob-bg-card);
  color: var(--sayob-text);
}

/* Close button in modals */
.close {
  color: var(--sayob-text-muted);
}

/* ── Navbar right group (theme toggle + hamburger) ──────────── */
/* On desktop the collapse fills space, right group stays at end */
.sayob-navbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  order: 3;
}

/* On desktop: collapse goes between logo and right group */
.sayob-nav-collapse {
  order: 2;
}

.sayob-logo {
  order: 1;
}

/* ── Theme toggle button ────────────────────────────────────── */
.sayob-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sayob-border);
  border-radius: var(--sayob-radius);
  background: transparent;
  color: var(--sayob-text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  flex-shrink: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}
.sayob-theme-toggle:hover,
.sayob-theme-toggle:focus {
  color: var(--sayob-text);
  border-color: #555;
  background-color: var(--sayob-bg-card);
  outline: none;
  box-shadow: none;
}

/* Show sun in dark mode (click → switch to light), moon in light mode */
[data-theme="dark"] .sayob-icon-light  { display: inline-block; }
[data-theme="dark"] .sayob-icon-dark   { display: none; }
[data-theme="light"] .sayob-icon-light { display: none; }
[data-theme="light"] .sayob-icon-dark  { display: inline-block; }
[data-theme="light"] .sayob-theme-toggle {
  border-color: #d0d0d0;
  color: #666;
}
[data-theme="light"] .sayob-theme-toggle:hover {
  border-color: #999;
  color: #111;
  background-color: #f0f0f0;
}
/* fallback before JS sets data-theme */
:root:not([data-theme]) .sayob-icon-light { display: inline-block; }
:root:not([data-theme]) .sayob-icon-dark  { display: none; }

/* ============================================================
   Client home cards (clientarea.php) — twenty-one hardcodes
   .client-home-cards .card-header { background:#fff } etc.,
   which beats the generic .card-header rule. Override with the
   same specificity using theme variables so day/night both work.
   ============================================================ */
.client-home-cards .card {
  background-color: var(--sayob-bg-card) !important;
  border-color: var(--sayob-border) !important;
  color: var(--sayob-text);
}

.client-home-cards .card-header {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-bottom: 1px solid var(--sayob-border) !important;
}

.client-home-cards .card-title,
.client-home-cards .card-header .card-title {
  color: var(--sayob-text) !important;
}

.client-home-cards .card-header .btn {
  color: var(--sayob-text) !important;
}

.client-home-cards .card-header .btn:hover {
  color: var(--sayob-white) !important;
}

.client-home-cards .card-body,
.client-home-cards .card-footer {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text);
}

.client-home-cards .list-group {
  border-top-color: var(--sayob-border) !important;
  border-bottom-color: var(--sayob-border) !important;
}

.client-home-cards .list-group .list-group-item {
  background-color: transparent !important;
  border-bottom-color: var(--sayob-border-light) !important;
  color: var(--sayob-text) !important;
}

.client-home-cards small {
  color: var(--sayob-text-muted) !important;
}

/* MarketConnect promo blocks inside home cards */
.client-home-cards .mc-promo-login,
.client-home-cards .mc-promo-manage,
.client-home-cards .mc-promo-login .content,
.client-home-cards .mc-promo-manage .content,
.client-home-cards .promo-container,
.client-home-cards .promo-container .header {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
}

/* Email verification / user validation banner (twenty-one hardcodes #f9f9f9) */
.verification-banner {
  background-color: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text) !important;
  border-bottom: 1px solid var(--sayob-border) !important;
}

.verification-banner .text {
  color: var(--sayob-text) !important;
}

.verification-banner .btn {
  background-color: var(--sayob-bg-card) !important;
  border: 1px solid var(--sayob-border) !important;
  color: var(--sayob-text) !important;
}

.verification-banner .btn:hover {
  background-color: var(--sayob-border) !important;
  color: var(--sayob-white) !important;
}

.verification-banner .close,
.verification-banner i {
  color: var(--sayob-text-muted) !important;
}

/* ============================================================
   submitticket.php — disabled inputs, markdown editor, file input
   ============================================================ */

/* Disabled / readonly inputs (Name, Email on logged-in submit form) */
.form-control:disabled,
.form-control[readonly],
input[disabled],
textarea[disabled] {
  background-color: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text-muted) !important;
  border-color: var(--sayob-border) !important;
  opacity: 1;
}

/* Markdown editor (SimpleMDE / CodeMirror) */
.CodeMirror {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

.CodeMirror-cursor {
  border-left-color: var(--sayob-text) !important;
}

.CodeMirror-placeholder,
.CodeMirror pre.CodeMirror-placeholder {
  color: var(--sayob-text-muted) !important;
}

.CodeMirror-selected {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.CodeMirror-focused .CodeMirror-selected {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.editor-toolbar {
  background-color: var(--sayob-bg-card) !important;
  border-color: var(--sayob-border) !important;
  opacity: 1;
}

.editor-toolbar a,
.editor-toolbar button {
  color: var(--sayob-text) !important;
}

.editor-toolbar a:hover,
.editor-toolbar a.active,
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background-color: var(--sayob-border) !important;
  border-color: var(--sayob-border) !important;
  color: var(--sayob-white) !important;
}

.editor-toolbar i.separator {
  border-color: var(--sayob-border) !important;
}

.editor-statusbar {
  background-color: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text-muted) !important;
  border-color: var(--sayob-border) !important;
}

.editor-preview,
.editor-preview-side {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

/* Attachment file input (bootstrap custom-file) */
.custom-file-label {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text-muted) !important;
  border-color: var(--sayob-border) !important;
}

.custom-file-label::after {
  background-color: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

[data-theme="light"] .CodeMirror-selected {
  background-color: rgba(0, 0, 0, 0.10) !important;
}

[data-theme="light"] .CodeMirror-focused .CodeMirror-selected {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================
   Markdown editor (bootstrap-markdown .md-editor) — the actual
   editor WHMCS uses on submitticket/viewticket. Hardcodes
   #eee/#fff textarea and #f5f5f5 header/footer.
   ============================================================ */
.md-editor {
  background-color: var(--sayob-bg-card) !important;
  border-color: var(--sayob-border) !important;
}

.md-editor > .md-header,
.md-editor .md-footer {
  background: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text-muted) !important;
}

.md-editor > textarea {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

.md-editor > textarea:focus {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-white) !important;
}

.md-editor > .md-preview {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

.md-editor .md-controls .md-control {
  color: var(--sayob-text-muted) !important;
}

.md-editor .md-controls .md-control:hover {
  color: var(--sayob-white) !important;
}

.md-editor.md-fullscreen-mode {
  background: var(--sayob-bg) !important;
}

.md-editor.md-fullscreen-mode .md-input {
  background: var(--sayob-bg) !important;
  color: var(--sayob-text) !important;
}

/* Generic textarea fallback */
textarea.form-control,
textarea {
  background-color: var(--sayob-bg-card);
  color: var(--sayob-text);
  border-color: var(--sayob-border);
}

/* ============================================================
   Ticket / data list tables (supporttickets.php etc.) —
   theme.min.css hardcodes .table-list>tbody>tr>td{background:#fff}
   ============================================================ */
.table-list {
  border-color: var(--sayob-border) !important;
}

.table-list thead th {
  background-color: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text-muted) !important;
  border-bottom-color: var(--sayob-border) !important;
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc,
.table-list thead th.sorting_asc,
.table-list thead th.sorting_desc {
  background-color: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text) !important;
}

.table-list > tbody > tr > td {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border-light) !important;
}

.table-list > tbody > tr:hover > td {
  background-color: var(--sayob-border) !important;
  color: var(--sayob-white) !important;
}

.table-list > tbody > tr > td a {
  color: var(--sayob-text);
}

.table-list > tbody > tr > td a.border-left {
  border-left-color: var(--sayob-border) !important;
}

/* DataTables odd/even striping fallback */
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
}

/* md-editor textarea is NOT a direct child in the WHMCS build —
   the `>` combinator rules above don't match. Use descendant + .md-input. */
.md-editor textarea,
.md-editor .md-input,
textarea.md-input {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

.md-editor textarea:focus,
.md-editor .md-input:focus,
textarea.md-input:focus {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-white) !important;
}

.md-editor textarea::placeholder,
.md-editor .md-input::placeholder {
  color: var(--sayob-text-muted) !important;
}

/* Belt-and-braces: the ticket message textarea by id + all class combos */
#inputMessage,
textarea#inputMessage,
textarea.form-control.markdown-editor,
.md-editor textarea.form-control {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
}

#inputMessage:focus,
textarea.form-control.markdown-editor:focus {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-white) !important;
}

/* DataTables search box (supporttickets.php top-right) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_filter input[type="search"],
input[type="search"].form-control,
.dataTables_wrapper input {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border: 1px solid var(--sayob-border) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  background-color: var(--sayob-bg-card) !important;
  color: var(--sayob-white) !important;
  border-color: #555 !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
  color: var(--sayob-text) !important;
}

/* search icon container, if the theme wraps it in an input-group */
.dataTables_filter .input-group-text,
.dataTables_filter .input-group-addon {
  background-color: var(--sayob-bg-secondary) !important;
  border-color: var(--sayob-border) !important;
  color: var(--sayob-text-muted) !important;
}

/* The DataTables search input embeds assets/img/search.png (white-background
   PNG) as a background-image — on a dark input it shows as a white square.
   Drop the image and restore normal padding. */
.dataTables_wrapper .dataTables_filter label .form-control {
  background-image: none !important;
  padding: 7px 12px !important;
}

/* ============================================================
   ModulesGarden "Layers UI" addons (DNSManager3 etc., #layers
   namespace) — dark-theme overrides so the module matches sayob.
   Scoped to dark mode only; the module's own light look stays
   in the light theme.
   ============================================================ */
[data-theme="dark"] #layers {
  color: var(--sayob-text);
}

/* Cards / panels: tab bar, boxed table container, dropdown subnavs */
[data-theme="dark"] #layers .lu-navbar,
[data-theme="dark"] #layers .lu-t-c__body--boxed,
[data-theme="dark"] #layers .lu-t-c__body,
[data-theme="dark"] #layers .lu-t-c__top,
[data-theme="dark"] #layers .lu-t-c__footer,
[data-theme="dark"] #layers .lu-nav--h .lu-nav--sub,
[data-theme="dark"] #layers .lu-navbar--v-thin .lu-navbar__nav .lu-nav:not(.lu-nav--sub) > .lu-nav__item .lu-nav--sub {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
}

/* Nav links (tabs) */
[data-theme="dark"] #layers .lu-nav__link {
  color: var(--sayob-text) !important;
}

[data-theme="dark"] #layers .lu-nav__link:hover {
  color: var(--sayob-white) !important;
}

/* Tables */
[data-theme="dark"] #layers .lu-table th,
[data-theme="dark"] #layers .lu-table td {
  border-color: var(--sayob-border-light) !important;
  color: var(--sayob-text) !important;
}

[data-theme="dark"] #layers .lu-table thead th {
  color: var(--sayob-text-muted) !important;
  background: var(--sayob-bg-card) !important;
}

/* Inputs / search / selects */
[data-theme="dark"] #layers .lu-form-control,
[data-theme="dark"] #layers input[type="text"],
[data-theme="dark"] #layers input[type="search"],
[data-theme="dark"] #layers .lu-input-group,
[data-theme="dark"] #layers .selectize-control,
[data-theme="dark"] #layers .selectize-input {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

[data-theme="dark"] #layers .lu-form-control::placeholder,
[data-theme="dark"] #layers input::placeholder {
  color: var(--sayob-text-muted) !important;
}

/* Modals / dropdown menus inside the module */
[data-theme="dark"] #layers .lu-modal__content,
[data-theme="dark"] #layers .lu-dropdown__menu {
  background: var(--sayob-bg-card) !important;
  color: var(--sayob-text) !important;
  border-color: var(--sayob-border) !important;
}

/* Layers UI: the widget container itself is white (#layers .lu-widget) —
   covers the "Other" panel header strip and the outer border */
[data-theme="dark"] #layers .lu-widget,
[data-theme="dark"] #layers .lu-widget__header,
[data-theme="dark"] #layers .lu-widget__body,
[data-theme="dark"] #layers .lu-widget__top,
[data-theme="dark"] #layers .lu-widget__actions,
[data-theme="dark"] #layers .lu-tile,
[data-theme="dark"] #layers .lu-app-main__actions,
[data-theme="dark"] #layers .lu-off-canvas,
[data-theme="dark"] #layers .selectize-control .selectize-dropdown {
  background: var(--sayob-bg-card) !important;
  border-color: var(--sayob-border) !important;
  color: var(--sayob-text) !important;
}

[data-theme="dark"] #layers .lu-widget__header,
[data-theme="dark"] #layers .lu-widget__header * {
  color: var(--sayob-text) !important;
}

[data-theme="dark"] #layers code {
  background: var(--sayob-bg-secondary) !important;
  color: var(--sayob-text) !important;
}

/* ============================================================
   Sticky footer — keep .sayob-footer pinned to the bottom of the
   viewport on short pages (flex column layout on body).
   ============================================================ */
html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > footer.sayob-footer,
#footer.sayob-footer {
  margin-top: auto;
}

/* Sticky footer fix: prevent flex children of body from shrinking
   (shrunk #main-body made content overflow onto the footer) and
   let the main section take the spare height instead of margin-auto. */
body > * {
  flex-shrink: 0;
}

body > section#main-body {
  flex: 1 0 auto;
}

/* Logo swap by theme: white wordmark on dark, dark wordmark on light */
.sayob-logo-img { display: none; }
[data-theme="dark"]  .sayob-logo-for-dark  { display: inline-block; }
[data-theme="light"] .sayob-logo-for-light { display: inline-block; }
/* fallback before JS sets data-theme (default = dark) */
:root:not([data-theme]) .sayob-logo-for-dark { display: inline-block; }

/* Hide the SSL status column on the services list (clientarea.php?action=services) */
#tableServicesList thead th:first-child,
#tableServicesList tbody td:first-child {
  display: none;
}