/* =============================================================================
   WHMCS PREMIUM DARK THEME — custom.css
   Style: Noir/Violet — SaaS Hosting Premium
   Compatible: WHMCS 9.x, Twenty-One, Bootstrap 4, jQuery 1.12
   Classes préfixées: .tsuka- pour éviter les conflits Bootstrap
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. VARIABLES CSS
   ----------------------------------------------------------------------------- */
:root {
  --bg-deep:        #05050A;
  --bg-base:        #080812;
  --bg-elevated:    #0B0B18;
  --bg-card:        rgba(255, 255, 255, 0.03);
  --bg-card-hover:  rgba(255, 255, 255, 0.06);
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-medium:  rgba(255, 255, 255, 0.12);

  --primary:        #8B5CF6;
  --primary-hover:  #A78BFA;
  --primary-glow:   rgba(139, 92, 246, 0.25);
  --secondary:      #6366F1;
  --secondary-hover:#818CF8;

  --success:        #22C55E;
  --success-bg:     rgba(34, 197, 94, 0.12);
  --warning:        #F59E0B;
  --warning-bg:     rgba(245, 158, 11, 0.12);
  --danger:         #EF4444;
  --danger-bg:      rgba(239, 68, 68, 0.12);
  --info:           #38BDF8;
  --info-bg:        rgba(56, 189, 248, 0.12);

  --text:           #F1F5F9;
  --text-muted:     #94A3B8;
  --text-faint:     #64748B;

  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      16px;
  --shadow:         0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow:    0 0 20px rgba(139, 92, 246, 0.15);
  --transition:     all 0.2s ease;
}

/* -----------------------------------------------------------------------------
   2. RESET ET BASE
   ----------------------------------------------------------------------------- */
body.primary-bg-color,
body {
  background-color: var(--bg-base) !important;
  color: var(--text) !important;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary-hover);
  transition: var(--transition);
}
a:hover {
  color: var(--primary);
  text-decoration: none;
}

hr {
  border-color: var(--border-subtle);
}

/* Scrollbar custom */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* -----------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   ----------------------------------------------------------------------------- */
#header.header {
  background: rgba(8, 8, 18, 0.97) !important;
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Topbar */
.topbar {
  background: rgba(5, 5, 10, 0.8) !important;
  border-bottom: 1px solid var(--border-subtle);
  padding: 6px 0;
  font-size: 0.8rem;
}
.topbar .btn {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  padding: 4px 10px;
  background: transparent;
  border: none;
  transition: var(--transition);
}
.topbar .btn:hover {
  color: var(--text) !important;
  background: var(--bg-card-hover);
}
.topbar .input-group-text {
  background: transparent !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-faint) !important;
  font-size: 0.8rem;
}
.topbar .btn-active-client {
  color: var(--primary-hover) !important;
  font-weight: 600;
}

/* Navbar principale */
.navbar.navbar-light,
.navbar.navbar-expand-xl {
  background: transparent !important;
  border: none !important;
  padding: 10px 0;
}
.navbar-brand {
  color: var(--text) !important;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.navbar-brand:hover { color: var(--primary-hover) !important; }
.navbar-brand img.logo-img {
  max-height: 40px;
  filter: brightness(1.1);
}

/* Nav links */
#nav .nav-link,
.navbar-nav .nav-link {
  color: var(--text-muted) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
#nav .nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--text) !important;
  background: var(--bg-card-hover);
}
#nav .nav-link.active,
#nav .nav-item.active > .nav-link {
  color: var(--primary-hover) !important;
  background: rgba(139, 92, 246, 0.1);
}

/* Dropdown */
.navbar-nav .dropdown-menu {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 6px !important;
  margin-top: 6px !important;
}
.navbar-nav .dropdown-item {
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  padding: 8px 12px !important;
  transition: var(--transition);
}
.navbar-nav .dropdown-item:hover {
  background: var(--bg-card-hover) !important;
  color: var(--text) !important;
}
.navbar-nav .dropdown-divider {
  border-color: var(--border-subtle) !important;
  margin: 4px 0 !important;
}

/* Panier */
.cart-btn {
  position: relative;
}
.cart-btn .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--primary) !important;
  color: white;
  font-size: 0.65rem;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
}

/* Barre de recherche */
.search .form-control {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  font-size: 0.85rem;
}
.search .form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary-glow) !important;
  outline: none;
}
.search .form-control::placeholder { color: var(--text-faint); }
.search .btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-right: none !important;
  color: var(--text-muted) !important;
}

/* Hamburger mobile */
.navbar-toggler,
.btn.nav-link[data-toggle="collapse"] {
  color: var(--text-muted) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------------------
   4. BREADCRUMB
   ----------------------------------------------------------------------------- */
.master-breadcrumb {
  background: var(--bg-deep) !important;
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px 0;
}
.breadcrumb {
  background: transparent !important;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item a:hover { color: var(--primary-hover); }
.breadcrumb-item.active { color: var(--text-faint); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-faint); }

/* -----------------------------------------------------------------------------
   5. LAYOUT PRINCIPAL
   ----------------------------------------------------------------------------- */
#main-body {
  background: var(--bg-base);
  min-height: calc(100vh - 200px);
  padding-top: 28px;
  padding-bottom: 40px;
}

/* -----------------------------------------------------------------------------
   6. SIDEBAR
   ----------------------------------------------------------------------------- */
.sidebar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  padding: 8px !important;
  margin-bottom: 20px;
}
.sidebar .panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.sidebar .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-faint) !important;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 12px 8px !important;
}
.sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 0.875rem;
  transition: var(--transition);
  margin-bottom: 2px;
}
.sidebar .list-group-item:hover {
  background: var(--bg-card-hover) !important;
  color: var(--text) !important;
}
.sidebar .list-group-item.active {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--primary-hover) !important;
  border-left: 2px solid var(--primary) !important;
}
.sidebar .list-group-item i {
  width: 16px;
  color: var(--text-faint);
  margin-right: 6px;
}
.sidebar .list-group-item.active i { color: var(--primary-hover); }

/* -----------------------------------------------------------------------------
   7. CARDS
   ----------------------------------------------------------------------------- */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  transition: var(--transition);
}
.card:hover {
  border-color: var(--border-medium) !important;
}
.card-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text) !important;
  padding: 14px 18px !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-title {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 0.95rem;
}
.card-body {
  padding: 18px !important;
}
.card-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 12px 18px !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  min-height: 0 !important;
}
.card-footer:empty { display: none; }

/* Accents couleur sur les cards */
.card-accent-blue  { border-top: 2px solid #38BDF8 !important; }
.card-accent-green { border-top: 2px solid var(--success) !important; }
.card-accent-red   { border-top: 2px solid var(--danger) !important; }
.card-accent-gold,
.card-accent-yellow{ border-top: 2px solid var(--warning) !important; }
.card-accent-purple{ border-top: 2px solid var(--primary) !important; }

/* -----------------------------------------------------------------------------
   8. TILES DASHBOARD (stats du header)
   ----------------------------------------------------------------------------- */
.tiles {
  margin-bottom: 24px !important;
}
.tiles .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius) !important;
  padding: 24px 16px;
  text-align: center;
  color: var(--text) !important;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  margin: 4px;
}
.tiles .tile:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  text-decoration: none !important;
  color: var(--text) !important;
}
.tiles .tile i {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: var(--primary-hover);
}
.tiles .tile .stat {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  margin-bottom: 4px;
}
.tiles .tile .title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.tiles .tile .highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.bg-color-blue  { background: #38BDF8 !important; }
.bg-color-green { background: var(--success) !important; }
.bg-color-red   { background: var(--danger) !important; }
.bg-color-gold  { background: var(--warning) !important; }

/* -----------------------------------------------------------------------------
   9. BOUTONS
   ----------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: var(--transition) !important;
  border: 1px solid transparent !important;
}
.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px var(--primary-glow) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 4px 20px var(--primary-glow) !important;
  transform: translateY(-1px);
}
.btn-default,
.btn-secondary {
  background: var(--bg-card) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-muted) !important;
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-medium) !important;
  color: var(--text) !important;
}
.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}
.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-warning {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #111 !important;
}
.btn-info {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: #111 !important;
}
.btn-link {
  color: var(--primary-hover) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.btn-link:hover { color: var(--primary) !important; }

/* Tailles */
.btn-xs  { padding: 2px 8px !important; font-size: 0.75rem !important; }
.btn-sm  { padding: 6px 12px !important; }
.btn-lg  { padding: 12px 24px !important; font-size: 1rem !important; }

/* -----------------------------------------------------------------------------
   10. FORMULAIRES
   ----------------------------------------------------------------------------- */
.form-control,
.form-select,
select.form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: 0.875rem !important;
  padding: 10px 14px !important;
  transition: var(--transition) !important;
}
.form-control:focus,
select.form-control:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  color: var(--text) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--text-faint) !important; }
.form-control-label,
label {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px !important;
}

/* Input group */
.input-group-text {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-faint) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
.input-group-merge .form-control {
  border-left: none !important;
}
.input-group > .form-control:not(:first-child) {
  border-left: none !important;
}

/* Select */
select option {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
}

/* Checkbox & radio */
.form-check-input {
  accent-color: var(--primary);
}

/* -----------------------------------------------------------------------------
   11. TABLES
   ----------------------------------------------------------------------------- */
.table {
  color: var(--text) !important;
  margin-bottom: 0;
}
.table thead th {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--border-medium) !important;
  border-top: none !important;
  color: var(--text-faint) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 12px 16px !important;
}
.table tbody tr {
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: var(--transition);
}
.table tbody tr:hover {
  background: var(--bg-card-hover) !important;
}
.table tbody td {
  border: none !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
  color: var(--text-muted) !important;
  font-size: 0.875rem;
}
.table tbody td:first-child { color: var(--text) !important; }
.table-bordered { border: 1px solid var(--border-subtle) !important; }
.table-bordered td,
.table-bordered th { border-color: var(--border-subtle) !important; }
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* -----------------------------------------------------------------------------
   12. BADGES ET STATUS
   ----------------------------------------------------------------------------- */
.badge {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-success, .badge-active   { background: var(--success-bg) !important; color: var(--success) !important; border: 1px solid rgba(34,197,94,0.3); }
.badge-danger,  .badge-overdue  { background: var(--danger-bg)  !important; color: var(--danger)  !important; border: 1px solid rgba(239,68,68,0.3); }
.badge-warning, .badge-pending  { background: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid rgba(245,158,11,0.3); }
.badge-info                     { background: var(--info-bg)    !important; color: var(--info)    !important; border: 1px solid rgba(56,189,248,0.3); }
.badge-primary                  { background: var(--primary-glow) !important; color: var(--primary-hover) !important; border: 1px solid rgba(139,92,246,0.3); }
.badge-secondary, .badge-default{ background: rgba(255,255,255,0.08) !important; color: var(--text-muted) !important; }

/* Status inline dans les tables */
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warning { color: var(--warning) !important; }
.text-info    { color: var(--info)    !important; }
.text-muted   { color: var(--text-faint) !important; }
.text-primary { color: var(--primary-hover) !important; }

/* -----------------------------------------------------------------------------
   13. ALERTS
   ----------------------------------------------------------------------------- */
.alert {
  border: 1px solid transparent !important;
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
  padding: 14px 18px !important;
}
.alert-success {
  background: var(--success-bg) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
}
.alert-danger {
  background: var(--danger-bg) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
}
.alert-warning {
  background: var(--warning-bg) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: #fcd34d !important;
}
.alert-info {
  background: var(--info-bg) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #7dd3fc !important;
}
.alert .close { color: inherit !important; opacity: 0.6; }
.alert .close:hover { opacity: 1; }

/* -----------------------------------------------------------------------------
   14. LIST GROUP
   ----------------------------------------------------------------------------- */
.list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  padding: 12px 16px !important;
  font-size: 0.875rem;
  transition: var(--transition);
}
.list-group-item:last-child { border-bottom: none !important; }
.list-group-item-action:hover {
  background: var(--bg-card-hover) !important;
  color: var(--text) !important;
}
.list-group-item.active {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: transparent !important;
  color: var(--primary-hover) !important;
}

/* -----------------------------------------------------------------------------
   15. MODALS
   ----------------------------------------------------------------------------- */
.modal-content {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
  color: var(--text) !important;
}
.modal-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 18px 22px !important;
}
.modal-title { color: var(--text) !important; font-weight: 600; }
.modal-body  { padding: 22px !important; color: var(--text-muted) !important; }
.modal-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 14px 22px !important;
}
.modal-backdrop { background: rgba(0, 0, 0, 0.7) !important; }
.close { color: var(--text-muted) !important; opacity: 1 !important; }
.close:hover { color: var(--text) !important; }

/* -----------------------------------------------------------------------------
   16. PAGINATION
   ----------------------------------------------------------------------------- */
.pagination .page-link {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  font-size: 0.875rem;
  transition: var(--transition);
}
.pagination .page-link:hover {
  background: var(--bg-card-hover) !important;
  color: var(--text) !important;
  border-color: var(--border-medium) !important;
}
.pagination .page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 0 12px var(--primary-glow);
}
.pagination .page-item.disabled .page-link {
  background: transparent !important;
  color: var(--text-faint) !important;
}

/* -----------------------------------------------------------------------------
   17. TICKETS
   ----------------------------------------------------------------------------- */
.ticket-subject a { color: var(--text) !important; font-weight: 600; }
.ticket-subject a:hover { color: var(--primary-hover) !important; }

/* Viewticket messages */
.ticket-reply {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  background: var(--bg-card) !important;
  margin-bottom: 16px !important;
  padding: 16px !important;
}
.ticket-reply .reply-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem;
}
.ticket-reply.staff-reply {
  background: rgba(139, 92, 246, 0.05) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
}

/* -----------------------------------------------------------------------------
   18. FACTURES
   ----------------------------------------------------------------------------- */
.invoice-status { font-weight: 600; }
.invoice-paid    { color: var(--success) !important; }
.invoice-unpaid  { color: var(--danger)  !important; }
.invoice-draft   { color: var(--text-faint) !important; }

/* -----------------------------------------------------------------------------
   19. PAGE LOGIN
   ----------------------------------------------------------------------------- */
.login-form .card {
  max-width: 420px !important;
  margin: 40px auto !important;
  border: 1px solid var(--border-medium) !important;
  background: rgba(11, 11, 24, 0.9) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), var(--shadow-glow) !important;
}
.login-form .card-body .h3 {
  color: var(--text) !important;
  font-weight: 700;
  font-size: 1.4rem;
}
.login-form .card-footer {
  text-align: center;
}
.login-form .card-footer small { color: var(--text-faint) !important; }
.login-form .card-footer a { color: var(--primary-hover) !important; font-weight: 600; }
.login-form .card-footer a:hover { color: var(--primary) !important; }

/* -----------------------------------------------------------------------------
   20. FOOTER
   ----------------------------------------------------------------------------- */
#footer.footer {
  background: var(--bg-deep) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 28px 0 !important;
  margin-top: 40px !important;
}
#footer .nav-link {
  color: var(--text-faint) !important;
  font-size: 0.85rem;
  transition: var(--transition);
}
#footer .nav-link:hover { color: var(--primary-hover) !important; }
#footer .copyright {
  color: var(--text-faint) !important;
  font-size: 0.8rem;
}

/* -----------------------------------------------------------------------------
   21. PANELS (cartes dynamiques du dashboard)
   ----------------------------------------------------------------------------- */
.panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 20px !important;
  color: var(--text) !important;
}
.panel-heading {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 14px 18px !important;
  color: var(--text) !important;
  font-weight: 600;
  font-size: 0.9rem;
}
.panel-body { padding: 16px 18px !important; }
.panel-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 12px 18px !important;
}

/* -----------------------------------------------------------------------------
   22. NOTIFICATIONS ET POPOVERS CLIENT
   ----------------------------------------------------------------------------- */
#accountNotifications + .popover,
.popover {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.popover-body { color: var(--text-muted) !important; }
.client-alerts .list-group-item { padding: 10px 14px !important; }
.client-alerts a { color: var(--text-muted) !important; }
.client-alerts a:hover { color: var(--text) !important; }

/* -----------------------------------------------------------------------------
   23. OVERLAY FULLPAGE (loader)
   ----------------------------------------------------------------------------- */
#fullpage-overlay {
  background: rgba(5, 5, 10, 0.9) !important;
  backdrop-filter: blur(6px);
}
#fullpage-overlay .msg { color: var(--text-muted) !important; }

/* -----------------------------------------------------------------------------
   24. RETURN TO ADMIN
   ----------------------------------------------------------------------------- */
.btn-return-to-admin {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: var(--warning) !important;
  border-radius: var(--radius-sm) !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
}
.btn-return-to-admin:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  color: var(--warning) !important;
}

/* -----------------------------------------------------------------------------
   25. RESPONSIVE MOBILE
   ----------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #header.header { position: sticky; top: 0; }
  .tiles .tile   { padding: 16px 10px; }
  .tiles .tile .stat { font-size: 1.5rem; }
  .sidebar       { margin-bottom: 16px; }
  #main-body     { padding-top: 16px; }
}

@media (max-width: 767.98px) {
  .card-body       { padding: 14px !important; }
  .card-header     { padding: 12px 14px !important; }
  .table thead th  { font-size: 0.65rem !important; }
  .table tbody td  { font-size: 0.8rem; padding: 10px 12px !important; }
  .btn             { font-size: 0.8rem !important; }
  .login-form .card { margin: 20px auto !important; }
  .modal-content   { border-radius: var(--radius) !important; }
  #footer.footer   { padding: 20px 0 !important; text-align: center !important; }
}

@media (max-width: 575.98px) {
  .tiles .row.no-gutters { gap: 8px; padding: 0 4px; }
  .tiles .tile { border-radius: var(--radius-sm) !important; }
}

/* Navbar mobile collapse */
@media (max-width: 1199.98px) {
  #mainNavbar {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius) !important;
    padding: 12px !important;
    margin-top: 8px !important;
  }
  #mainNavbar .nav-link { padding: 10px 12px !important; }
}

/* -----------------------------------------------------------------------------
   26. UTILITAIRES
   ----------------------------------------------------------------------------- */
.w-hidden { display: none !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.bg-color-blue   { background-color: #38BDF8 !important; }
.bg-color-green  { background-color: var(--success) !important; }
.bg-color-red    { background-color: var(--danger) !important; }
.bg-color-gold   { background-color: var(--warning) !important; }
.bg-color-purple { background-color: var(--primary) !important; }

/* Divider décoratif violet */
.tsuka-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  border: none;
  margin: 24px 0;
  opacity: 0.4;
}

/* Glow sur focus bouton primaire */
.btn-primary:focus { outline: none !important; box-shadow: 0 0 0 3px var(--primary-glow) !important; }

/* =============================================================================
   27. COMPOSANTS LOGIN PREMIUM (tsuka-login-*)
   ============================================================================= */
.tsuka-login-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 0 40px;
}
.tsuka-login-brand {
  text-align: center;
  margin-bottom: 28px;
  position: relative;
}
.tsuka-login-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tsuka-login-logo { position: relative; z-index: 1; }
.tsuka-login-logo img.tsuka-logo-img { max-height: 48px; }
.tsuka-logo-text {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
}
.tsuka-login-tagline {
  color: var(--text-faint);
  font-size: 0.8rem;
  margin-top: 6px;
  margin-bottom: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tsuka-login-card {
  border: 1px solid var(--border-medium) !important;
  background: rgba(11, 11, 24, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.08) !important;
}
.tsuka-login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text) !important;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.tsuka-login-subtitle {
  color: var(--text-faint) !important;
  font-size: 0.875rem;
  margin: 0;
}
.tsuka-forgot-link {
  font-size: 0.78rem;
  color: var(--text-faint) !important;
  transition: var(--transition);
}
.tsuka-forgot-link:hover { color: var(--primary-hover) !important; }
.tsuka-login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.tsuka-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  margin: 0 !important;
}
.tsuka-login-btn {
  padding: 10px 24px !important;
  font-size: 0.9rem !important;
  white-space: nowrap;
}
.tsuka-login-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tsuka-register-link {
  font-size: 0.85rem;
  color: var(--primary-hover) !important;
  font-weight: 600;
  transition: var(--transition);
}
.tsuka-register-link:hover { color: var(--primary) !important; }

/* =============================================================================
   28. DASHBOARD STATS (tsuka-stats-grid / tsuka-stat-card)
   ============================================================================= */
.tsuka-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 991.98px) {
  .tsuka-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
  .tsuka-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.tsuka-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.tsuka-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tsuka-stat-blue::before  { background: #38BDF8; }
.tsuka-stat-green::before { background: var(--success); }
.tsuka-stat-red::before   { background: var(--danger); }
.tsuka-stat-gold::before  { background: var(--warning); }

.tsuka-stat-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: var(--text) !important;
  text-decoration: none !important;
}
.tsuka-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tsuka-stat-blue  .tsuka-stat-icon { background: rgba(56, 189, 248, 0.12); color: #38BDF8; }
.tsuka-stat-green .tsuka-stat-icon { background: var(--success-bg); color: var(--success); }
.tsuka-stat-red   .tsuka-stat-icon { background: var(--danger-bg);  color: var(--danger); }
.tsuka-stat-gold  .tsuka-stat-icon { background: var(--warning-bg); color: var(--warning); }

.tsuka-stat-content { flex: 1; min-width: 0; }
.tsuka-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.tsuka-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsuka-stat-arrow {
  color: var(--text-faint);
  font-size: 0.75rem;
  opacity: 0;
  transition: var(--transition);
}
.tsuka-stat-card:hover .tsuka-stat-arrow { opacity: 1; color: var(--primary-hover); }

/* =============================================================================
   29. PANELS DASHBOARD (tsuka-home-card)
   ============================================================================= */
.tsuka-home-card {
  margin-bottom: 20px;
}
.tsuka-panel-icon {
  color: var(--primary-hover);
  font-size: 0.9rem;
}
.tsuka-item-icon {
  color: var(--text-faint);
  font-size: 0.85rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.list-group-item:hover .tsuka-item-icon { color: var(--primary-hover); }
.tsuka-item-arrow {
  color: var(--text-faint);
  font-size: 0.65rem;
  opacity: 0;
  transition: var(--transition);
}
.list-group-item-action:hover .tsuka-item-arrow { opacity: 1; color: var(--primary-hover); }

/* =============================================================================
   30. STATUS LABELS WHMCS
   ============================================================================= */
.label.status,
span.label.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.status-active       { background: var(--success-bg) !important; color: var(--success) !important; border-color: rgba(34,197,94,0.3) !important; }
.status-inactive,
.status-terminated,
.status-cancelled    { background: rgba(100,116,139,0.12) !important; color: var(--text-faint) !important; border-color: rgba(100,116,139,0.2) !important; }
.status-suspended    { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: rgba(239,68,68,0.3) !important; }
.status-pending      { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: rgba(245,158,11,0.3) !important; }
.status-fraud        { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: rgba(239,68,68,0.3) !important; }
.status-paid         { background: var(--success-bg) !important; color: var(--success) !important; border-color: rgba(34,197,94,0.3) !important; }
.status-unpaid       { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: rgba(239,68,68,0.3) !important; }
.status-refunded     { background: var(--info-bg) !important; color: var(--info) !important; border-color: rgba(56,189,248,0.3) !important; }
.status-collections  { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: rgba(245,158,11,0.3) !important; }
.status-open         { background: var(--info-bg) !important; color: var(--info) !important; border-color: rgba(56,189,248,0.3) !important; }
.status-answered     { background: var(--success-bg) !important; color: var(--success) !important; border-color: rgba(34,197,94,0.3) !important; }
.status-closed       { background: rgba(100,116,139,0.12) !important; color: var(--text-faint) !important; border-color: rgba(100,116,139,0.2) !important; }
.status-custom       { border-color: transparent !important; color: #fff !important; }

/* Unread ticket indicator */
.ticket-subject.unread { font-weight: 700; color: var(--text) !important; }
.ticket-number { color: var(--text-faint); font-size: 0.8rem; margin-right: 8px; }

/* =============================================================================
   31. DATATABLES PREMIUM
   ============================================================================= */
.tsuka-table-card {
  padding: 0 !important;
  overflow: hidden;
}
.tsuka-table-card .table-container {
  margin: 0;
}

/* DataTables override */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-image: none !important;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.6rem;
  margin-left: 6px;
  opacity: 0.5;
}
table.dataTable thead .sorting::after        { content: '\f0dc'; }
table.dataTable thead .sorting_asc::after    { content: '\f0de'; opacity: 1; color: var(--primary-hover); }
table.dataTable thead .sorting_desc::after   { content: '\f0dd'; opacity: 1; color: var(--primary-hover); }

.dataTables_wrapper .dataTables_filter input {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
  margin-left: 6px;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary-glow) !important;
  outline: none;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.dataTables_wrapper .dataTables_length select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 4px 8px !important;
  font-size: 0.8rem !important;
  margin: 0 6px;
}
.dataTables_wrapper .dataTables_info {
  color: var(--text-faint) !important;
  font-size: 0.8rem !important;
  padding-top: 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  transition: var(--transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-medium) !important;
  color: var(--text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 0 10px var(--primary-glow);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  color: var(--text-faint) !important;
  border-color: transparent !important;
}

/* Ligne cliquable hover */
.table-list tbody tr { cursor: pointer; }

/* Indicateur de chargement */
.tsuka-table-loading {
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.tsuka-spin-icon {
  color: var(--primary);
  font-size: 1.2rem;
}

/* Ticket link style */
.table-list a.border-left {
  border-left: none !important;
  color: var(--text) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-list a.border-left:hover { color: var(--primary-hover) !important; }

/* =============================================================================
   32. ANIMATIONS JS (classes injectées par custom.js)
   ============================================================================= */

/* Scroll effect header */
#header.header.tsuka-scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(139, 92, 246, 0.08) !important;
  border-bottom-color: rgba(139, 92, 246, 0.2) !important;
}

/* Fade-in cards */
.tsuka-fade-init {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.tsuka-fade-init.tsuka-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Highlight ligne table */
.table-list tbody tr.tsuka-row-hover td {
  background: var(--bg-card-hover) !important;
  color: var(--text) !important;
}

/* Notification dropdown */
.tsuka-notif-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 260px;
  max-width: 340px;
  padding: 6px;
}
.tsuka-notif-dropdown .client-alerts { margin: 0; padding: 0; list-style: none; }
.tsuka-notif-dropdown .client-alerts li {
  border-bottom: 1px solid var(--border-subtle);
  padding: 0;
}
.tsuka-notif-dropdown .client-alerts li:last-child { border-bottom: none; }
.tsuka-notif-dropdown .client-alerts li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  font-size: 0.85rem;
}
.tsuka-notif-dropdown .client-alerts li a:hover {
  background: var(--bg-card-hover);
  color: var(--text) !important;
}
.tsuka-notif-dropdown .client-alerts li.none {
  padding: 14px 12px;
  color: var(--text-faint);
  font-size: 0.85rem;
  text-align: center;
}

/* =============================================================================
   33. NAV-TABS — Onglets premium
   ============================================================================= */
.nav-tabs {
  border-bottom: 1px solid var(--border-subtle) !important;
  gap: 4px;
}
.nav-tabs .nav-link {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  padding: 10px 16px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: var(--transition) !important;
}
.nav-tabs .nav-link:hover {
  color: var(--text) !important;
  background: var(--bg-card-hover) !important;
  border-color: var(--border-subtle) var(--border-subtle) transparent !important;
}
.nav-tabs .nav-link.active {
  color: var(--primary-hover) !important;
  background: var(--bg-elevated) !important;
  border-color: var(--border-medium) var(--border-medium) var(--bg-elevated) !important;
  border-bottom-color: var(--bg-base) !important;
}
.nav-tabs .nav-link i { margin-right: 6px; }

/* Tab content panel */
.tab-content {
  background: transparent !important;
}
.tab-pane {
  padding-top: 16px !important;
}

/* Product details tab container — override bg-white */
.product-details-tab-container,
.tab-content.bg-white,
.bg-white {
  background: transparent !important;
}
.product-details-tab-container .tab-pane {
  padding: 20px !important;
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-card) !important;
}

/* Responsive tabs */
.responsive-tabs-sm-connector { display: none !important; }
@media (max-width: 767.98px) {
  .responsive-tabs-sm .nav-link { font-size: 0.8rem !important; padding: 8px 10px !important; }
}

/* =============================================================================
   34. PRODUCT DETAILS — Page service premium
   ============================================================================= */
.product-status {
  text-align: center;
  margin-bottom: 16px;
}
.product-icon .fa-stack {
  margin-bottom: 8px;
}
.product-icon .fa-circle {
  color: var(--primary) !important;
  opacity: 0.15;
}
.product-icon .fa-inverse {
  color: var(--primary-hover) !important;
}
.product-icon h3, .product-icon h4 {
  color: var(--text) !important;
  margin: 4px 0;
}
.product-icon h3 { font-size: 1.1rem; font-weight: 700; }
.product-icon h4 { font-size: 0.85rem; color: var(--text-faint) !important; font-weight: 400; }

.product-status-text {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: 6px;
}
.product-status-active   .product-status-text { color: var(--success) !important; }
.product-status-suspended .product-status-text { color: var(--danger) !important; }
.product-status-pending  .product-status-text { color: var(--warning) !important; }
.product-status-terminated .product-status-text { color: var(--text-faint) !important; }

.product-actions-wrapper {
  gap: 8px;
  margin-top: 12px;
}
.product-actions-wrapper .col-12 { padding: 4px 8px; }

/* Données de service (hostname, IP, etc.) */
.product-details-tab-container .row {
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px 0;
  margin: 0;
}
.product-details-tab-container .row:last-child { border-bottom: none; }
.product-details-tab-container strong { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.product-details-tab-container .col-sm-7 { color: var(--text); }

/* Knob usage (disk/bandwidth) */
.dial-usage + canvas { filter: brightness(0.85) !important; }

/* =============================================================================
   35. VIEWTICKET — Conversation ticket premium
   ============================================================================= */
.view-ticket > .card-body { padding: 18px 20px !important; }
.view-ticket .card-title {
  font-size: 1rem !important;
  color: var(--text) !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.ticket-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Replies */
.ticket-reply {
  padding: 0 !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin: 0 !important;
  border: none !important;
}
.ticket-reply.staff {
  background: rgba(139, 92, 246, 0.04) !important;
}
.posted-by {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 10px 18px !important;
  font-size: 0.8rem !important;
  color: var(--text-faint) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.posted-by .posted-by-name { color: var(--text-muted) !important; font-weight: 600; }
.posted-by .posted-on { color: var(--text-faint) !important; }
.ticket-reply.staff .posted-by { background: rgba(139, 92, 246, 0.08) !important; }

/* Badge type requester */
.label.requestor-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.requestor-type-client { background: var(--info-bg) !important; color: var(--info) !important; }
.requestor-type-admin,
.requestor-type-staff  { background: var(--primary-glow) !important; color: var(--primary-hover) !important; }
.requestor-type-contact { background: var(--success-bg) !important; color: var(--success) !important; }

.ticket-reply .message {
  color: var(--text-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.7;
  padding: 16px 18px !important;
}
.ticket-reply .message p { margin-bottom: 12px; }
.ticket-reply .message p:last-child { margin-bottom: 0; }
.ticket-reply .message code {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  color: var(--primary-hover) !important;
  font-size: 0.85em !important;
}
.ticket-reply .message pre {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px !important;
  color: var(--text) !important;
}

/* Star rating */
.rating, .rating-done { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rating .star, .rating-done .star {
  color: var(--border-medium);
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
}
.rating-done .star.active { color: var(--warning) !important; }
.rating .star:hover,
.rating .star:hover ~ .star { color: var(--warning) !important; }

/* Attachments */
.ticket-reply .attachments {
  background: rgba(0,0,0,0.15) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 12px 18px !important;
}
.ticket-reply .attachments strong { color: var(--text-faint) !important; font-size: 0.8rem; }
.attachment-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.attachment-list a, .attachment-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card-hover) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  transition: var(--transition);
}
.attachment-list a:hover { border-color: var(--primary) !important; color: var(--primary-hover) !important; }
.attachment-list figure { margin: 0; font-size: 1rem; }
.attachment-list .caption { font-size: 0.78rem; }

/* Custom file input */
.custom-file-label {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
.custom-file-label::after {
  background: var(--bg-card-hover) !important;
  border-left: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.custom-file-input:focus ~ .custom-file-label { border-color: var(--primary) !important; box-shadow: 0 0 0 2px var(--primary-glow) !important; }

/* Markdown editor area */
.markdown-editor {
  font-family: 'Fira Code', 'Courier New', monospace !important;
  font-size: 0.875rem !important;
  min-height: 160px !important;
  resize: vertical !important;
}

/* =============================================================================
   36. VIEWINVOICE — Page facture premium (page standalone)
   ============================================================================= */
.invoice-container {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 30px 20px !important;
  color: var(--text) !important;
}
.invoice-header { margin-bottom: 20px !important; }
.invoice-header h2 { color: var(--text) !important; font-weight: 700; }
.invoice-header h3 { color: var(--text-muted) !important; font-size: 0.9rem; margin: 4px 0; }
.invoice-col { padding: 12px !important; }
.invoice-col address { color: var(--text-muted) !important; font-size: 0.875rem; }

.invoice-status .draft     { color: var(--text-faint); }
.invoice-status .unpaid    { color: var(--danger); font-weight: 700; font-size: 1.1rem; }
.invoice-status .paid      { color: var(--success); font-weight: 700; font-size: 1.1rem; }
.invoice-status .refunded  { color: var(--info); }
.invoice-status .cancelled { color: var(--text-faint); }
.invoice-status .collections { color: var(--warning); }

.invoice-container .small-text { color: var(--text-muted) !important; font-size: 0.85rem; }
.invoice-container strong { color: var(--text) !important; }
.invoice-container address { color: var(--text-muted) !important; }

.invoice-container .card.bg-default {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
}
.invoice-container .card-header { background: rgba(255,255,255,0.02) !important; }

/* Lignes invoice table */
.invoice-container .total-row {
  border-top: 1px solid var(--border-subtle) !important;
  background: rgba(255,255,255,0.02) !important;
}
.invoice-container .total-row:last-child {
  background: rgba(139, 92, 246, 0.08) !important;
  font-weight: 700;
}
.invoice-container .total-row td { color: var(--text) !important; }

/* Ledger card */
.invoice-container .card-title.bg-info {
  background: var(--info-bg) !important;
  color: var(--info) !important;
  border-bottom: 1px solid rgba(56,189,248,0.2) !important;
  font-size: 0.85rem !important;
  padding: 10px 14px !important;
}
.transactions-container { max-height: 260px; overflow-y: auto; }

/* Payment due */
.payment-btn-container { margin-top: 10px; }

/* QR code */
.invoice-qr-wrapper { text-align: center; }

/* =============================================================================
   37. HOMEPAGE — Page accueil premium
   ============================================================================= */
h2.text-center {
  color: var(--text) !important;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 8px !important;
}
h2.text-center::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* Action icon buttons */
.action-icon-btns a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 14px !important;
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  transition: var(--transition) !important;
  gap: 10px;
  min-height: 110px;
  text-align: center;
}
.action-icon-btns a:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.action-icon-btns figure.ico-container {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--primary-hover);
  margin: 0;
  transition: var(--transition);
}
.action-icon-btns a:hover figure.ico-container { background: rgba(139, 92, 246, 0.2); }

/* Homepage product cards */
.card-columns.home .card {
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-card) !important;
}
.card-columns.home .card-body { padding: 28px 20px !important; }
.card-columns.home .pricing-card-title { color: var(--text) !important; margin-bottom: 8px !important; }
.card-columns.home p { color: var(--text-faint) !important; font-size: 0.875rem; }
.btn-outline-primary {
  border: 1px solid var(--primary) !important;
  color: var(--primary-hover) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 0 12px var(--primary-glow);
}

/* =============================================================================
   38. PAGES ERREUR premium
   ============================================================================= */
.text-primary { color: var(--primary-hover) !important; }
.display-1 { color: var(--primary) !important; opacity: 0.3; }
.display-1.font-weight-bold { opacity: 1 !important; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* =============================================================================
   39. FORMULAIRES AVEC PREPEND ICON (register, etc.)
   ============================================================================= */
.prepend-icon {
  position: relative;
}
.prepend-icon .field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 0.85rem;
  z-index: 5;
  pointer-events: none;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
.prepend-icon .field,
.prepend-icon .form-control {
  padding-left: 38px !important;
}

/* Progress bar — force de mot de passe */
.progress {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  height: 6px !important;
  overflow: hidden;
}
.progress-bar {
  border-radius: 20px !important;
  transition: width 0.3s ease !important;
}
.progress-bar.bg-success { background: var(--success) !important; }
.progress-bar.bg-warning { background: var(--warning) !important; }
.progress-bar.bg-danger  { background: var(--danger) !important; }
#passwordStrengthTextLabel { color: var(--text-faint) !important; font-size: 0.75rem; }

/* Toggle switch */
input.toggle-switch-success + .toggle-switch { background: var(--bg-card-hover) !important; }

/* =============================================================================
   40. DOMAINES — Liste premium
   ============================================================================= */
#domainForm .btn-group { flex-wrap: wrap; gap: 4px; }
#domainForm .setBulkAction { font-size: 0.8rem !important; }
input.domids { accent-color: var(--primary); }

/* =============================================================================
   41. ANNOUNCE / KNOWLEDGEBASE / CONTACT
   ============================================================================= */
.knowledgebase-category-header { color: var(--text) !important; font-weight: 700; }
.knowledgebase-search .form-control { background: var(--bg-card) !important; }

article, .announcement-body {
  color: var(--text-muted) !important;
  line-height: 1.8;
  font-size: 0.9rem;
}
article h1, article h2, article h3, article h4 { color: var(--text) !important; }
article a { color: var(--primary-hover) !important; }
article code {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  color: var(--primary-hover) !important;
  font-size: 0.88em !important;
}
article pre {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px !important;
  color: var(--text) !important;
  overflow-x: auto;
}
article blockquote {
  border-left: 3px solid var(--primary) !important;
  background: rgba(139, 92, 246, 0.06) !important;
  padding: 12px 16px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  color: var(--text-muted) !important;
  margin: 16px 0 !important;
}

/* =============================================================================
   42. SIDEBAR CARD — header tweaks
   ============================================================================= */
.card.card-sidebar .card-header { padding: 12px 16px !important; }
.card.card-sidebar .card-title { font-size: 0.8rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint) !important; }
.card.card-sidebar .card-minimise { color: var(--text-faint) !important; font-size: 0.75rem !important; }
.card.card-sidebar .sidebar-menu-item-label { font-size: 0.875rem; }
.card.card-sidebar .sidebar-menu-item-badge .badge { background: var(--bg-card-hover) !important; color: var(--text-muted) !important; }
.card.card-sidebar .list-group-item.active .sidebar-menu-item-badge .badge { background: rgba(139,92,246,0.2) !important; color: var(--primary-hover) !important; }

/* =============================================================================
   43. VIEWINVOICE — Inclusion custom.css (override inline)
   ============================================================================= */
body:not(.primary-bg-color) {
  background: var(--bg-base) !important;
  color: var(--text) !important;
}

/* =============================================================================
   44. MASSPAY / ADDFUNDS / REGISTER
   ============================================================================= */
.payment-btn-container .btn { margin: 4px; }
.card-header.bg-success { background: var(--success-bg) !important; border-color: rgba(34,197,94,0.25) !important; }
.card-header.bg-success h3 { color: #86efac !important; }

/* Select custom */
select.custom-select,
.custom-select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 36px 10px 14px !important;
  font-size: 0.875rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  appearance: none !important;
}
.custom-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  outline: none !important;
}

/* =============================================================================
   45. UTILS SUPPLEMENTAIRES
   ============================================================================= */
.font-weight-bold { font-weight: 700 !important; }
.font-size-24 { font-size: 1.1rem !important; }
.line-height-reduced { line-height: 1; }

/* Headings dans les cards */
h3, h4, h5, h6 { color: var(--text) !important; }
h3 { font-size: 1rem !important; }
h4 { font-size: 0.9rem !important; }
h5 { font-size: 0.85rem !important; }

/* Strong / b */
strong, b { color: var(--text) !important; }
.card-body strong, .card-body b { color: var(--text-muted) !important; }

/* Small / muted */
small { color: var(--text-faint) !important; }

/* Address */
address { color: var(--text-muted) !important; }

/* HR dans invoice */
.invoice-container hr { border-color: var(--border-subtle) !important; margin: 16px 0 !important; }

/* Separateurs tabs */
.margin-bottom { margin-bottom: 24px !important; }

/* =============================================================================
   46. HOMEPAGE PREMIUM (tsuka-section / tsuka-icon-grid / tsuka-products-grid)
   ============================================================================= */
.tsuka-section-header {
  text-align: center;
  margin: 32px 0 20px;
}
.tsuka-section-header h2 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tsuka-section-header h2::before,
.tsuka-section-header h2::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--primary);
  opacity: 0.5;
}
.tsuka-section-header h2::after { display: none; }

/* Grille icônes */
.tsuka-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 991.98px) { .tsuka-icon-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .tsuka-icon-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.tsuka-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  text-decoration: none !important;
  color: var(--text-muted) !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  gap: 12px;
  transition: var(--transition);
}
.tsuka-icon-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  color: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.tsuka-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: var(--transition);
}
.tsuka-icon-btn:hover .tsuka-icon-wrap { transform: scale(1.1); }

.tsuka-icon-purple { background: rgba(139, 92, 246, 0.12); color: var(--primary-hover); }
.tsuka-icon-teal   { background: rgba(20, 184, 166, 0.12); color: #2DD4BF; }
.tsuka-icon-red    { background: var(--danger-bg); color: var(--danger); }
.tsuka-icon-yellow { background: var(--warning-bg); color: var(--warning); }
.tsuka-icon-gray   { background: rgba(100,116,139,0.12); color: var(--text-muted); }
.tsuka-icon-green  { background: var(--success-bg); color: var(--success); }
.tsuka-icon-blue   { background: var(--info-bg); color: var(--info); }

/* Grille products */
.tsuka-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 767.98px) { .tsuka-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .tsuka-products-grid { grid-template-columns: 1fr; } }

.tsuka-product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}
.tsuka-product-card:hover {
  border-color: var(--primary);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.tsuka-product-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(139,92,246,0.12);
  color: var(--primary-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.tsuka-product-icon-green { background: var(--success-bg) !important; color: var(--success) !important; }
.tsuka-product-icon-blue  { background: var(--info-bg) !important; color: var(--info) !important; }

.tsuka-product-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
}
.tsuka-product-tagline {
  font-size: 0.82rem !important;
  color: var(--text-faint) !important;
  margin: 0 !important;
  line-height: 1.5;
}
.tsuka-product-btn { width: 100%; margin-top: auto; }

/* =============================================================================
   47. TICKET CARD (tsuka-ticket-*)
   ============================================================================= */
.tsuka-ticket-card .card-header { padding: 16px 20px !important; }
.tsuka-ticket-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.tsuka-ticket-id { color: var(--primary-hover); font-weight: 700; font-size: 0.9rem; }
.tsuka-ticket-sep { color: var(--border-medium); }
.tsuka-ticket-subject { color: var(--text-muted); }
.tsuka-ticket-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }

/* Wrapper reply avec séparateur */
.tsuka-reply-wrapper {
  border-top: 1px solid var(--border-subtle);
}
.tsuka-reply-wrapper:first-child { border-top: none; }
.tsuka-reply-staff .posted-by {
  background: rgba(139, 92, 246, 0.06) !important;
  border-left: 3px solid var(--primary) !important;
}
.tsuka-reply-form-card { margin-top: 20px; }

/* =============================================================================
   48. ERROR PAGE (tsuka-error-*)
   ============================================================================= */
.tsuka-error-page {
  text-align: center;
  padding: 60px 20px;
  position: relative;
}
.tsuka-error-glow {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.tsuka-error-code {
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  position: relative;
}
.tsuka-error-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}
.tsuka-error-subtitle {
  font-size: 1rem !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  margin-bottom: 10px !important;
}
.tsuka-error-desc {
  color: var(--text-faint) !important;
  font-size: 0.875rem !important;
  margin-bottom: 28px !important;
}
.tsuka-error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =============================================================================
   49. ANNOUNCEMENTS (tsuka-announce-*)
   ============================================================================= */
.tsuka-announce-list { padding: 0; }
.tsuka-announce-item {
  padding: 20px 22px;
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}
.tsuka-announce-item:last-child { border-bottom: none; }
.tsuka-announce-item:hover { background: var(--bg-card-hover); }

.tsuka-announce-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tsuka-announce-title {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  transition: var(--transition);
}
.tsuka-announce-title:hover { color: var(--primary-hover) !important; }

.tsuka-announce-meta {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.tsuka-announce-excerpt {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.tsuka-announce-read {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-hover) !important;
  text-decoration: none !important;
  transition: var(--transition);
}
.tsuka-announce-read:hover { color: var(--primary) !important; }

/* =============================================================================
   50. SUPPORT TICKET SUBMIT (tsuka-dept-*)
   ============================================================================= */
.tsuka-dept-list { padding: 8px; }
.tsuka-dept-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-radius: var(--radius);
  text-decoration: none !important;
  color: var(--text) !important;
  transition: var(--transition);
  margin-bottom: 4px;
  border: 1px solid transparent;
}
.tsuka-dept-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: var(--text) !important;
}
.tsuka-dept-icon {
  width: 40px; height: 40px;
  background: rgba(139,92,246,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-hover);
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: var(--transition);
}
.tsuka-dept-item:hover .tsuka-dept-icon { background: rgba(139,92,246,0.2); }
.tsuka-dept-content { flex: 1; min-width: 0; }
.tsuka-dept-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.tsuka-dept-desc { font-size: 0.8rem; color: var(--text-faint); margin-top: 2px; }
.tsuka-dept-arrow { color: var(--text-faint); font-size: 0.7rem; opacity: 0; transition: var(--transition); }
.tsuka-dept-item:hover .tsuka-dept-arrow { opacity: 1; color: var(--primary-hover); }

/* =============================================================================
   51. KNOWLEDGEBASE — Cards catégories
   ============================================================================= */
.kb-category .card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none !important;
}
.kb-category:hover { border-color: var(--primary) !important; background: var(--bg-card-hover) !important; }
.kb-category .h5 { color: var(--text) !important; font-size: 0.9rem !important; font-weight: 600 !important; }
.kb-category .text-muted small { color: var(--text-faint) !important; font-size: 0.78rem !important; }
.kb-category .badge-info { background: var(--info-bg) !important; color: var(--info) !important; border: 1px solid rgba(56,189,248,0.3); font-size: 0.65rem; }

.kb-article-item { gap: 10px; }
.kb-article-item i { color: var(--text-faint) !important; }
.kb-article-item small { display: block; color: var(--text-faint) !important; font-size: 0.78rem !important; margin-top: 2px; }

/* Recherche KB dans header */
.kb-search .form-control { border-right: none !important; }
.kb-search .btn { border-left: none !important; }

/* =============================================================================
   52. SERVER STATUS
   ============================================================================= */
.fa-check.text-success  { color: var(--success) !important; }
.fa-times.text-danger   { color: var(--danger) !important; }
.fa-spinner             { color: var(--text-faint) !important; }

/* =============================================================================
   53. CONTACT / FORM ROW LAYOUT
   ============================================================================= */
.extra-padding { padding: 28px !important; }
.form-group.row .col-form-label { color: var(--text-muted) !important; font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 12px; }
.text-right.col-form-label, .col-sm-3.col-form-label { text-align: left !important; }

/* =============================================================================
   54. USER PROFILE / ACCOUNT PAGES
   ============================================================================= */
.card + .card { margin-top: 20px; }
.card .card-body + .card { margin: 0 !important; }

/* Checkboxes email prefs */
.controls.form-check label {
  color: var(--text-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* =============================================================================
   55. DOMAINE DETAIL — Tabs & info
   ============================================================================= */
.clientareadomaindetails .card h5,
.card-body h5 {
  color: var(--text-faint) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 4px !important;
  margin-top: 0 !important;
}
.card-body h5 + span, .card-body h5 + a {
  color: var(--text) !important;
  font-size: 0.9rem;
}

/* Info addon domain */
.moduleoutput .btn { margin: 4px; }

/* =============================================================================
   56. LISTES INLINE
   ============================================================================= */
.list-inline-item.text-muted { color: var(--text-faint) !important; font-size: 0.8rem; }
.list-inline-item i { color: var(--primary); margin-right: 4px; }

/* =============================================================================
   57. PRODUCT DETAILS TAB FIX bg-white
   ============================================================================= */
.tab-content.bg-white,
.tab-content .bg-white,
.product-details-tab-container,
.product-details-tab-container .tab-pane,
.tab-content[class*="bg-"],
div.bg-default {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* =============================================================================
   58. GLOBAL HEADING H6
   ============================================================================= */
h6, .h6 { color: var(--text) !important; font-size: 0.85rem !important; }
.h3 { color: var(--text) !important; font-size: 1.2rem !important; font-weight: 700 !important; }

/* =============================================================================
   59. AFFILIATES (tsuka-aff-*)
   ============================================================================= */
.tsuka-aff-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 575.98px) { .tsuka-aff-stats { grid-template-columns: 1fr; } }

.tsuka-aff-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tsuka-aff-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.tsuka-aff-yellow::before { background: var(--warning); }
.tsuka-aff-blue::before   { background: var(--info); }
.tsuka-aff-green::before  { background: var(--success); }

.tsuka-aff-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.tsuka-aff-yellow .tsuka-aff-icon { background: var(--warning-bg); color: var(--warning); }
.tsuka-aff-blue   .tsuka-aff-icon { background: var(--info-bg);    color: var(--info); }
.tsuka-aff-green  .tsuka-aff-icon { background: var(--success-bg); color: var(--success); }

.tsuka-aff-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.tsuka-aff-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* =============================================================================
   60. DOMAIN PRICING — Featured TLDs & filtres
   ============================================================================= */
.featured-tlds-container { margin-bottom: 24px; }
.featured-tld {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  margin-bottom: 14px;
  transition: var(--transition);
}
.featured-tld:hover {
  border-color: var(--primary);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.featured-tld .img-container {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.featured-tld .img-container img { max-height: 36px; filter: brightness(0.9); }
.featured-tld .price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-hover);
}

/* TLD filters */
.tld-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.tld-filters .badge {
  cursor: pointer;
  transition: var(--transition);
  padding: 6px 12px !important;
  font-size: 0.75rem !important;
}
.tld-filters .badge:hover { border-color: var(--primary) !important; color: var(--primary-hover) !important; }
.tld-filters .badge-success {
  background: rgba(139,92,246,0.15) !important;
  color: var(--primary-hover) !important;
  border: 1px solid rgba(139,92,246,0.3) !important;
}

/* TLD sale group */
.tld-sale-group {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,0.3);
  margin-left: 4px;
}

/* Currency selector */
.currency-selector {
  max-width: 200px;
  margin-bottom: 12px;
}

/* =============================================================================
   61. ARTICLE VIEW (tsuka-article-*)
   ============================================================================= */
.tsuka-article-card .card-header { padding: 20px 24px !important; }
.tsuka-article-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 8px !important;
  line-height: 1.3;
}
.tsuka-article-meta {
  font-size: 0.78rem;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tsuka-article-body {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.8;
  padding: 4px 0;
}
.tsuka-article-body p { margin-bottom: 14px; }
.tsuka-article-body h2, .tsuka-article-body h3 { color: var(--text) !important; margin: 24px 0 12px; }
.tsuka-article-body ul, .tsuka-article-body ol { padding-left: 20px; margin-bottom: 14px; }
.tsuka-article-body li { color: var(--text-muted); margin-bottom: 6px; }
.tsuka-article-body img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.tsuka-article-body a { color: var(--primary-hover) !important; }
.tsuka-article-body a:hover { color: var(--primary) !important; }

/* =============================================================================
   62. PASSWORD RESET — Conteneur centré
   ============================================================================= */
.mw-540 { max-width: 540px !important; }
.row.justify-content-center { display: flex; justify-content: center; }
.password-reset-container .card { max-width: 480px; margin: 0 auto; }

/* =============================================================================
   63. 2FA CHALLENGE
   ============================================================================= */
.card.mw-540 {
  max-width: 540px !important;
  margin: 30px auto !important;
}
.card.mw-540 .card-title { font-size: 1.1rem !important; }
#frmTwoFactorChallenge .margin-bottom,
#frmTwoFactorBackup .margin-bottom { margin-bottom: 16px !important; }
.form-control-lg {
  padding: 12px 16px !important;
  font-size: 1rem !important;
}
.btn-lg.btn-block {
  display: block;
  width: 100%;
  padding: 12px !important;
  font-size: 0.95rem !important;
}
#frmTwoFactorChallengeFooter small { color: var(--text-faint) !important; font-size: 0.8rem !important; }
#frmTwoFactorChallengeFooter a { color: var(--primary-hover) !important; }

/* =============================================================================
   64. CANCEL REQUEST
   ============================================================================= */
.form-stacked .form-group textarea { min-height: 120px; }

/* =============================================================================
   65. TICKET FEEDBACK
   ============================================================================= */
.ticketfeedbackstaffcont {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.ticketfeedbackstaffcont p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 10px; }
.ticketfeedbackstaffcont strong { color: var(--text) !important; }

/* Rating radio table */
.table.text-center thead td {
  color: var(--text-faint) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.table.text-center input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }

/* =============================================================================
   66. UPGRADE / DOWNGRADE
   ============================================================================= */
.upgrade-package-name { color: var(--text) !important; font-weight: 600; }
.upgrade-package-desc { color: var(--text-faint) !important; font-size: 0.85rem; }

/* =============================================================================
   67. ACCESS DENIED — perms card
   ============================================================================= */
.tsuka-perms-card {
  max-width: 480px;
  margin: 20px auto 0;
  text-align: left;
}

/* =============================================================================
   68. KB SUGGESTIONS
   ============================================================================= */
#autoAnswerSuggestions {
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
}
#autoAnswerSuggestions h3 { color: var(--info) !important; font-size: 0.85rem !important; margin-bottom: 10px !important; }
#autoAnswerSuggestions .kbarticles .list-group-item a { color: var(--text-muted) !important; }
#autoAnswerSuggestions .kbarticles .list-group-item a:hover { color: var(--info) !important; }
#autoAnswerSuggestions .kbarticles .list-group-item small { color: var(--text-faint) !important; display: block; margin-top: 2px; font-size: 0.78rem; }

/* =============================================================================
   69. EMAILS LIST
   ============================================================================= */
.table .btn-info {
  background: var(--info-bg) !important;
  border-color: rgba(56,189,248,0.3) !important;
  color: var(--info) !important;
  font-size: 0.78rem !important;
  padding: 4px 10px !important;
}
.table .btn-info:hover {
  background: var(--info) !important;
  color: #111 !important;
}

/* =============================================================================
   70. PRINT — garder lisible si impression
   ============================================================================= */
@media print {
  body { background: #fff !important; color: #111 !important; }
  .d-print-none { display: none !important; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; background: #fff !important; }
  .card-header { background: #f5f5f5 !important; }
  .table { color: #111 !important; }
  .table thead th { background: #f0f0f0 !important; color: #333 !important; }
  .table tbody td { color: #333 !important; }
}

/* =============================================================================
   71. MISC — divers oubliés
   ============================================================================= */

/* Btn-block */
.btn-block { display: block !important; width: 100% !important; }

/* Input disabled */
.form-control.disabled,
.form-control[disabled],
.form-control[readonly] {
  background: rgba(255,255,255,0.02) !important;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Table-rounded */
.table-rounded { border-radius: var(--radius) !important; overflow: hidden; }

/* Overflow table */
.overflow-auto { overflow-x: auto !important; }
.table-responsive { overflow-x: auto !important; }
.table-responsive::-webkit-scrollbar { height: 4px; }
.table-responsive::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); }

/* Float utilities */
.float-right { float: right !important; }
.float-left  { float: left !important; }
.clearfix::after { content:''; display:table; clear:both; }

/* Margin/gap utility */
.gap-2 { gap: 8px !important; }
.mb-7 { margin-bottom: 2.5rem !important; }

/* Alert-link */
.alert-link { color: inherit !important; font-weight: 700 !important; text-decoration: underline; }

/* Panel include (includes/panel.tpl) */
.panel.panel-danger  { border-left: 3px solid var(--danger) !important; }
.panel.panel-success { border-left: 3px solid var(--success) !important; }
.panel.panel-info    { border-left: 3px solid var(--info) !important; }
.panel.panel-warning { border-left: 3px solid var(--warning) !important; }

/* Network issues notification bar */
.network-issues-notification {
  background: var(--warning-bg) !important;
  border-bottom: 1px solid rgba(245,158,11,0.3) !important;
  color: var(--warning) !important;
  font-size: 0.85rem;
  padding: 8px 0;
  text-align: center;
}

/* Domain search bar (homepage) */
.domain-search-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 28px;
}

/* Tooltip dark */
.tooltip-inner {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text) !important;
  font-size: 0.78rem !important;
  border-radius: var(--radius-sm) !important;
}
.tooltip .arrow::before { border-top-color: var(--border-medium) !important; }

/* Form group margin */
.form-group { margin-bottom: 16px !important; }

/* Input-group-append/prepend border match */
.input-group-append .btn,
.input-group-append .input-group-text {
  border-left: none !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.input-group-prepend .btn,
.input-group-prepend .input-group-text {
  border-right: none !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

/* Card-columns */
.card-columns { column-count: 3; column-gap: 16px; }
@media (max-width: 767.98px) { .card-columns { column-count: 1; } }
@media (max-width: 991.98px) { .card-columns { column-count: 2; } }
.card-columns .card { display: inline-block; width: 100%; margin-bottom: 16px; }

/* =============================================================================
   72. KNOWLEDGEBASE ARTICLE — H1 inline
   ============================================================================= */
.card-body h1 {
  color: var(--text) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  line-height: 1.3;
}
.card-body .badge-pill {
  border-radius: 20px !important;
}
.card-body .fa-thumbs-up { color: var(--success); }
.card-body .text-sm { font-size: 0.8rem !important; }

/* =============================================================================
   73. MASSPAY — Lignes total
   ============================================================================= */
.masspay-invoice-detail td { color: var(--text-muted) !important; font-size: 0.875rem; }
.masspay-total td {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid var(--border-subtle) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.masspay-total:last-child td {
  background: rgba(139,92,246,0.08) !important;
  color: var(--primary-hover) !important;
  font-size: 1rem;
}
.bg-default { background: rgba(255,255,255,0.02) !important; }

/* =============================================================================
   74. PAYMENT FORM
   ============================================================================= */
.cc-payment-form .control-label { color: var(--text-muted) !important; font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.05em; }
.auth3d-area { border: 1px solid var(--border-subtle) !important; border-radius: var(--radius) !important; background: var(--bg-card) !important; }
.gateway-errors { font-size: 0.875rem; }
.submit-container { margin-top: 20px; }

/* =============================================================================
   75. MODULES CLIENT AREA
   ============================================================================= */
.module-client-area { padding: 12px; }
.module-client-area h3, .module-client-area h4 { color: var(--text) !important; }
.module-client-area table { width: 100%; }
.module-client-area .btn { margin: 4px; }

/* =============================================================================
   76. LABEL SUCCESS / DANGER dans user-profile
   ============================================================================= */
.label.label-success { background: var(--success-bg) !important; color: var(--success) !important; border: 1px solid rgba(34,197,94,0.3) !important; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.label.label-default { background: rgba(255,255,255,0.06) !important; color: var(--text-muted) !important; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.label.label-danger  { background: var(--danger-bg) !important; color: var(--danger) !important; border: 1px solid rgba(239,68,68,0.3) !important; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.label.label-warning { background: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid rgba(245,158,11,0.3) !important; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.label.label-info    { background: var(--info-bg) !important; color: var(--info) !important; border: 1px solid rgba(56,189,248,0.3) !important; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }

/* =============================================================================
   77. 2FA STATUS (user-security.tpl)
   ============================================================================= */
.twofa-config-link { font-size: 0.9rem; }
.twofa-config-link strong { color: var(--text) !important; }

/* =============================================================================
   78. INCLUDES/PANEL.TPL
   ============================================================================= */
.tsuka-panel-card { margin-bottom: 16px; }

/* =============================================================================
   79. IFRAME 3D SECURE
   ============================================================================= */
iframe.auth3d-area { width: 100% !important; min-height: 400px; }
#frmRemoteCardProcess iframe { margin-top: 16px; }

/* =============================================================================
   80. FINAL — Assurer contraste suffisant partout
   ============================================================================= */
p { color: var(--text-muted); font-size: 0.9rem; }
li { color: var(--text-muted); }
td { color: var(--text-muted); font-size: 0.875rem; }
th { color: var(--text-faint) !important; font-size: 0.75rem !important; }

/* Override Bootstrap text-black-50 */
.text-black-50 { color: var(--text-faint) !important; opacity: 1 !important; }

/* Override Bootstrap bg-light */
.bg-light { background: var(--bg-card) !important; }

/* Override Bootstrap border-left */
.border-left { border-left: 3px solid var(--primary) !important; padding-left: 12px !important; }

/* Scroll to top smooth */
html { scroll-behavior: smooth; }

/* =============================================================================
   81. OAUTH — Layout & pages d'autorisation
   ============================================================================= */
#header {
  background: rgba(8, 8, 18, 0.97) !important;
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 0;
  backdrop-filter: blur(12px);
}
#header .container { display: flex; align-items: center; justify-content: space-between; }
#header img { max-height: 40px; filter: brightness(1.1); }
#header .btn { color: var(--text-muted) !important; font-size: 0.8rem; }
#header p { color: var(--text-faint) !important; font-size: 0.8rem; margin: 0; }
#header a { color: var(--primary-hover) !important; }

#content {
  min-height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

#footer {
  background: var(--bg-deep) !important;
  border-top: 1px solid var(--border-subtle);
  padding: 16px 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-faint) !important;
}

/* Content-container OAuth */
.content-container {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--shadow-glow);
  max-width: 460px;
  width: 100%;
  overflow: hidden;
}
.content-padded { padding: 20px 24px; }
.content-container h2 {
  color: var(--text) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 20px 24px 0;
  margin-bottom: 0 !important;
}

/* App logo OAuth */
.app-logo {
  text-align: center;
  padding: 24px 24px 0;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
  margin-bottom: 8px;
}
.app-logo img { max-height: 60px; max-width: 160px; }

/* Permission grants */
.permission-grants { margin: 8px 0; }
.permission-grants p { color: var(--text-muted) !important; font-size: 0.875rem; }
.permission-grants ul { padding-left: 20px; margin-bottom: 0; }
.permission-grants li { color: var(--text-muted) !important; font-size: 0.875rem; margin-bottom: 6px; }
.permission-grants li::marker { color: var(--primary-hover); }

/* Action buttons */
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.action-buttons .float-left {
  margin-right: auto;
  color: var(--text-faint) !important;
  font-size: 0.8rem;
}
.action-buttons label { color: var(--text-muted) !important; font-size: 0.8rem; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
.action-buttons a { color: var(--primary-hover) !important; font-size: 0.8rem; }

/* =============================================================================
   82. STORE — MarketConnect & pages boutique
   ============================================================================= */

/* Override bg-white sur les store pages */
.landing-page.bg-white,
.store-domain-tab-content.bg-white,
.tab-content.bg-white.store-domain-tab-content,
.store-order-container .tab-content {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* Hero section */
.hero {
  background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(99,102,241,0.08) 100%) !important;
  border-bottom: 1px solid var(--border-subtle);
  padding: 48px 0 !important;
  text-align: center;
}
.hero h2 { color: var(--text) !important; font-size: 1.8rem !important; font-weight: 800 !important; margin-bottom: 10px !important; }
.hero h3 { color: var(--text-muted) !important; font-size: 1rem !important; font-weight: 400 !important; }

/* Store content blocks */
.content-block {
  padding: 40px 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.content-block.standout { background: rgba(255,255,255,0.01) !important; }
.content-block h2 { color: var(--text) !important; font-size: 1.3rem !important; font-weight: 700 !important; margin-bottom: 16px !important; }
.content-block h3 { color: var(--text) !important; font-size: 1.1rem !important; font-weight: 600 !important; }
.content-block h4 { color: var(--text-muted) !important; font-size: 0.95rem !important; }
.content-block p { color: var(--text-faint) !important; font-size: 0.875rem !important; line-height: 1.7; }
.content-block ul li { color: var(--text-muted) !important; font-size: 0.875rem !important; margin-bottom: 6px; }
.content-block .fas { color: var(--primary-hover) !important; margin-right: 6px; }
.content-block .fa-check-circle { color: var(--success) !important; }

/* Validation levels */
.validation-levels { padding: 32px 0; background: rgba(139,92,246,0.04) !important; border-bottom: 1px solid var(--border-subtle); }
.validation-levels h3 { color: var(--text) !important; font-size: 1rem !important; text-align: center; margin-bottom: 24px; }

/* SSL certs list */
.ssl-certs-all { list-style: none; padding: 0; margin: 0; }
.ssl-certs-all li { padding: 16px; border-bottom: 1px solid var(--border-subtle); }
.ssl-certs-all li:last-child { border-bottom: none; }
.ssl-certs-all li.featured { background: rgba(139,92,246,0.05) !important; border-left: 3px solid var(--primary) !important; }
.ssl-certs-all h4 { color: var(--text) !important; font-size: 0.9rem !important; margin-bottom: 4px !important; }
.ssl-certs-all p { color: var(--text-faint) !important; font-size: 0.8rem !important; margin: 0 !important; }
.ssl-certs-all .price { text-align: center; }
.ssl-certs-all .price strong { color: var(--primary-hover) !important; font-size: 1.1rem !important; }
.ssl-certs-all .padded-cell { padding: 8px; text-align: center; }
.ssl-certs-all a { color: var(--primary-hover) !important; font-size: 0.8rem; }

/* Store order container */
.store-order-container { padding: 16px 0; }
.store-order-container h2 { color: var(--text) !important; font-size: 1.3rem !important; font-weight: 700; margin-bottom: 8px; }
.store-order-container h4 { color: var(--text-muted) !important; font-size: 0.875rem !important; font-weight: 600; margin-bottom: 10px; }
.store-order-container p { color: var(--text-faint) !important; font-size: 0.875rem !important; }
.payment-term h4 { font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: 0.05em; }

/* Domain tabs in store */
.store-domain-tabs { margin-bottom: 0; }
.store-domain-tab-content { border: 1px solid var(--border-subtle) !important; border-top: none !important; border-radius: 0 0 var(--radius) var(--radius) !important; padding: 16px !important; }

/* Domain validation feedback */
.domain-validation { font-size: 0.8rem; font-weight: 600; }
.domain-validation.ok { color: var(--success) !important; }
.domain-validation i { margin-right: 4px; }

/* Upsell/promo store */
.store-promoted-product { background: rgba(139,92,246,0.05) !important; border-left: 3px solid var(--primary) !important; }
.store-promoted-product h3 { color: var(--text) !important; font-size: 1rem !important; }
.store-promoted-product h4 { color: var(--text-muted) !important; font-size: 0.875rem !important; font-weight: 400 !important; }
.store-promoted-product p { color: var(--text-faint) !important; font-size: 0.875rem !important; }
.store-promoted-product .features { list-style: none; padding: 0; }
.store-promoted-product .features li { color: var(--text-muted) !important; font-size: 0.875rem; margin-bottom: 6px; }
.store-promoted-product .features .fa-check-circle { color: var(--success) !important; }

/* Accordion store */
.accordion .card-header { cursor: pointer; }
.accordion .card-header h4 { color: var(--text) !important; font-size: 0.9rem !important; font-weight: 600 !important; display: flex; align-items: center; gap: 10px; margin: 0 !important; }
.accordion .card-header .arrow i { color: var(--primary-hover); }
.accordion .card-body { border-top: 1px solid var(--border-subtle); }

/* Standout specific */
.standout-1 { background: rgba(0,0,0,0.2) !important; padding: 24px 0; }
.browser h3 { color: var(--text) !important; text-align: center; margin-bottom: 16px; }
.browser-image img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border-subtle); filter: brightness(0.8); }
.browser-notice { background: rgba(239,68,68,0.1) !important; border-top: 1px solid var(--border-subtle); padding: 12px; }
.browser-notice .wrapper { color: var(--text-faint) !important; font-size: 0.8rem; display: flex; align-items: center; gap: 8px; justify-content: center; }

/* Store quote section */
.quote-section q { font-style: italic; color: var(--text-faint) !important; font-size: 0.875rem; }
.quote-section p { color: var(--text-faint) !important; font-size: 0.78rem !important; }

/* What is SSL content */
.what-is-ssl img { max-width: 220px; border-radius: var(--radius); filter: brightness(0.85); }

/* Ideal / ssl-types-expl */
p.ideal { color: var(--primary-hover) !important; font-size: 0.8rem !important; font-weight: 600; }
p.ssl-types-expl { color: var(--text-faint) !important; font-size: 0.78rem !important; }

/* Help me choose section */
.help-me-choose { border-top: 1px solid var(--border-subtle); padding-top: 16px; }
p.help-me-choose { text-align: center; margin-top: 16px; }
p.help-me-choose a { color: var(--primary-hover) !important; font-size: 0.85rem; }

/* SSL nav */
.store-ssl-nav, .ssl-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.store-ssl-nav a, .ssl-nav a { color: var(--text-muted) !important; font-size: 0.8rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); transition: var(--transition); }
.store-ssl-nav a:hover, .ssl-nav a:hover { border-color: var(--primary); color: var(--primary-hover) !important; background: rgba(139,92,246,0.08); }
.store-ssl-nav a.active, .ssl-nav a.active { background: rgba(139,92,246,0.12) !important; color: var(--primary-hover) !important; border-color: rgba(139,92,246,0.3); }

/* SSL logos */
.ssl-logos { padding: 24px 0; text-align: center; }
.ssl-logos img { max-height: 40px; margin: 8px; filter: brightness(0.6) grayscale(0.4); transition: var(--transition); }
.ssl-logos img:hover { filter: brightness(0.9) grayscale(0); }

/* Secure wildcard */
.secure-wildcard h2 { color: var(--text) !important; }
.secure-wildcard h4 { color: var(--text-muted) !important; }
.secure-wildcard p { color: var(--text-faint) !important; }
.secure-wildcard li { color: var(--text-faint) !important; }

/* =============================================================================
   83. STORE — Pages spécifiques (codeguard, nordvpn, etc.)
   ============================================================================= */
.store-product-page { padding: 16px 0; }
.store-product-page h2 { color: var(--text) !important; }
.store-product-page h3 { color: var(--text-muted) !important; }
.store-product-page p { color: var(--text-faint) !important; }
.store-product-page .features li { color: var(--text-muted) !important; }
.store-product-page .features .fas { color: var(--success) !important; }
.store-product-page .price { color: var(--primary-hover) !important; font-weight: 700; font-size: 1.2rem; }

/* Dynamic store partials */
.grid-of-cards .card { border: 1px solid var(--border-subtle) !important; }
.grid-of-cards .card-title { color: var(--text) !important; }
.grid-of-cards .card-text { color: var(--text-faint) !important; }
.price-comparison table { width: 100%; }
.price-comparison th { background: rgba(139,92,246,0.1) !important; color: var(--primary-hover) !important; }
.free-form h2, .free-form h3 { color: var(--text) !important; }
.free-form p { color: var(--text-faint) !important; }

/* =============================================================================
   84. INCLUDES — Composants restants
   ============================================================================= */

/* domain-search.tpl */
.domain-search-form .form-control { padding-right: 0 !important; }
.domain-search-form .btn-primary { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* validateuser.tpl / verifyemail.tpl */
.alert-verify-email { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.25) !important; color: var(--warning) !important; }

/* network-issues-notifications.tpl */
.network-issue-bar { background: var(--danger-bg) !important; border-bottom: 1px solid rgba(239,68,68,0.25) !important; padding: 10px 0; text-align: center; }
.network-issue-bar a { color: var(--danger) !important; font-weight: 600; }

/* confirmation.tpl */
.confirmation-dialog { background: var(--bg-card) !important; border: 1px solid var(--border-medium) !important; border-radius: var(--radius) !important; padding: 20px; }

/* generate-password.tpl */
.generated-password-container .form-control { font-family: 'Courier New', monospace !important; letter-spacing: 2px; }

/* pwstrength.tpl */
.pwstrength-viewport { margin-top: 8px !important; }

/* social-accounts.tpl */
.social-accounts li a { color: var(--text-faint) !important; font-size: 1.1rem; transition: var(--transition); }
.social-accounts li a:hover { color: var(--primary-hover) !important; }

/* linkedaccounts.tpl */
.linked-provider-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-sm) !important; color: var(--text-muted) !important; background: var(--bg-card) !important; font-size: 0.875rem !important; transition: var(--transition); text-decoration: none !important; }
.linked-provider-btn:hover { border-color: var(--primary) !important; color: var(--text) !important; background: var(--bg-card-hover) !important; }

/* tablelist.tpl */
.tablelist-filter input { background: var(--bg-card) !important; border-color: var(--border-subtle) !important; color: var(--text) !important; }

/* =============================================================================
   85. REMAINING DOMAIN MANAGEMENT PAGES
   ============================================================================= */

/* DNS management table */
.clientareadomaindns table th { white-space: nowrap; }
.clientareadomaindns .btn-group-sm { flex-wrap: wrap; gap: 4px; }

/* EPP code */
.epp-code { font-family: 'Courier New', monospace !important; font-size: 1rem !important; letter-spacing: 2px; color: var(--primary-hover) !important; background: rgba(139,92,246,0.08) !important; border: 1px solid rgba(139,92,246,0.2) !important; border-radius: var(--radius-sm) !important; padding: 12px 16px !important; text-align: center; }

/* =============================================================================
   86. REMAINING USER PAGES
   ============================================================================= */

/* user-switch-account.tpl */
.account-switch-list .list-group-item { cursor: pointer; }
.account-switch-list .list-group-item:hover { background: var(--bg-card-hover) !important; }

/* user-verify-email.tpl */
.verify-email-container { text-align: center; padding: 40px 20px; }
.verify-email-container i { font-size: 3rem; color: var(--warning); margin-bottom: 16px; }

/* =============================================================================
   87. SUBSCRIPTION MANAGE
   ============================================================================= */
.subscription-manage .card-title { font-size: 1rem !important; }
.subscription-amount { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--primary-hover) !important; }

/* =============================================================================
   88. USAGEBILLINGPRICING / CLIENTAREAPRODUCTUSAGEBILLING
   ============================================================================= */
.usage-billing-table th { font-size: 0.72rem !important; }
.usage-progress { background: rgba(255,255,255,0.06) !important; border-radius: 20px !important; height: 8px !important; overflow: hidden; margin-top: 4px; }
.usage-progress-bar { height: 8px !important; border-radius: 20px !important; }
.usage-progress-bar.low    { background: var(--success) !important; }
.usage-progress-bar.medium { background: var(--warning) !important; }
.usage-progress-bar.high   { background: var(--danger)  !important; }

/* =============================================================================
   89. MARKDOWN GUIDE
   ============================================================================= */
.markdown-guide-container { max-width: 700px; margin: 0 auto; }
.markdown-guide-container code { background: rgba(255,255,255,0.06) !important; border-radius: 4px !important; padding: 2px 6px !important; color: var(--primary-hover) !important; }
.markdown-guide-container pre { background: rgba(0,0,0,0.3) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-sm) !important; padding: 14px !important; color: var(--text) !important; }

/* =============================================================================
   90. CONFIGURESSL — Steps
   ============================================================================= */
.ssl-config-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.ssl-step { flex: 1; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--text-faint); }
.ssl-step.active { border-color: var(--primary); color: var(--primary-hover); background: rgba(139,92,246,0.08); }
.ssl-step.done { border-color: rgba(34,197,94,0.3); color: var(--success); background: var(--success-bg); }