/* ================================================================
   SNBD Host / Delta DNS — WHMCS Custom Theme
   Bootstrap 5 Deep Integration | Corporate Red Accent
   ================================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ----------------------------------------------------------------
   1. CSS Custom Properties (Brand Tokens)
   ---------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-primary: #BA1114;
  --brand-primary-rgb: 186, 17, 20;
  --brand-hover: #B21C1C;
  --brand-light: #E9DDDC;
  --brand-light-border: rgba(186, 17, 20, 0.2);

  /* White Mode (Default) — Red + White, No Blue */
  --bg-body: #F7F7F4;
  --bg-surface: #ffffff;
  --bg-elevated: #fafafa;
  --bg-input: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-muted: #999999;
  --border-color: #e0e0e0;
  --border-subtle: #eeeeee;

  /* Status Palette */
  --success: #2e7d32;
  --success-bg: rgba(46, 125, 50, 0.08);
  --warning: #e65100;
  --warning-bg: rgba(230, 81, 0, 0.08);
  --danger: #c62828;
  --danger-bg: rgba(198, 40, 40, 0.08);
  --info: #BA1114;
  --info-bg: rgba(186, 17, 20, 0.06);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
}

/* ----------------------------------------------------------------
   2. Bootstrap Overrides
   ---------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 600; }

/* Override Bootstrap card */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.card-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
  padding: 0.75rem 1rem;
}
.card-body { padding: 1rem; }

/* Override Bootstrap table */
.table { color: var(--text-primary); --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--border-subtle); padding: 0.75rem 1rem; }
.table-hover > tbody > tr:hover > * { background-color: var(--brand-light); color: var(--text-primary); }
.table thead.table-dark th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--brand-primary);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Override Bootstrap form-control */
.form-control, .form-select {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-input);
  border-color: var(--brand-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}
.form-floating > label { color: var(--text-muted); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--brand-primary);
}
.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Override Bootstrap badges */
.badge { font-weight: 500; letter-spacing: 0.3px; }
.badge.bg-success { background-color: var(--success-bg) !important; color: var(--success) !important; border: 1px solid rgba(63,185,80,0.2); }
.badge.bg-warning { background-color: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid rgba(210,153,34,0.2); }
.badge.bg-danger { background-color: var(--danger-bg) !important; color: var(--danger) !important; border: 1px solid rgba(248,81,73,0.2); }
.badge.bg-info { background-color: var(--info-bg) !important; color: var(--info) !important; border: 1px solid rgba(88,166,255,0.2); }
.badge.bg-secondary { background-color: rgba(139,148,158,0.1) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color); }

/* Override Bootstrap alerts */
.alert { border-radius: 8px; font-size: 0.875rem; }

/* ----------------------------------------------------------------
   3. Button System
   ---------------------------------------------------------------- */

/* Primary CTA */
.btn-brand {
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: 50rem;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.3);
  transition: all 0.2s;
}
.btn-brand:hover {
  background: var(--brand-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4);
  transform: translateY(-1px);
}

/* Outline secondary */
.btn-outline-custom {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 50rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-outline-custom:hover {
  background: var(--brand-light);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Danger outline */
.btn-outline-danger-custom {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(248,81,73,0.3);
  border-radius: 50rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-outline-danger-custom:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* Legacy compat */
.btn-primary-custom { 
  background: var(--brand-primary); color: #fff; border: none; 
  border-radius: 50rem; padding: 0.5rem 1.5rem; font-weight: 500;
  box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.3); transition: all 0.2s;
}
.btn-primary-custom:hover {
  background: var(--brand-hover); color: #fff;
  box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4); transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   4. Layout Structure
   ---------------------------------------------------------------- */
#snbd-wrapper { display: flex; min-height: 100vh; }

/* ----------------------------------------------------------------
   5. Sidebar Navigation
   ---------------------------------------------------------------- */
#snbd-sidebar {
  width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease;
  overflow-x: hidden;
}
#snbd-sidebar { background: var(--bg-surface) !important; }
#snbd-sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* Brand */
.snbd-brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
  gap: 0.625rem;
}
.snbd-brand i { color: var(--brand-primary); font-size: 1.25rem; flex-shrink: 0; }

/* Nav Section Labels */
.nav-section-label {
  padding: 1.25rem 1.25rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  white-space: nowrap;
}
#snbd-sidebar.collapsed .nav-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }

/* Nav Menu */
.snbd-nav-menu {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Nav Items */
.snbd-nav-item {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  color: var(--text-secondary);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-size: 0.875rem;
  gap: 0.75rem;
  text-decoration: none;
}
.snbd-nav-item:hover {
  background: var(--brand-light);
  color: var(--text-primary);
}
.snbd-nav-item.active {
  background: var(--brand-light);
  color: var(--text-primary);
  border-left-color: var(--brand-primary);
  font-weight: 500;
}
.snbd-nav-item i {
  width: 1.25rem;
  font-size: 1rem;
  text-align: center;
  flex-shrink: 0;
}
.snbd-nav-text { transition: opacity 0.2s; }
#snbd-sidebar.collapsed .snbd-nav-text { opacity: 0; width: 0; display: inline-block; pointer-events: none; }

/* User Profile Block */
.snbd-user-profile {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  overflow: hidden;
}
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.875rem;
  flex-shrink: 0;
  border: 2px solid var(--brand-light-border);
}
.user-info { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 0.6875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
#snbd-sidebar.collapsed .snbd-user-profile .user-info { display: none; }

/* ----------------------------------------------------------------
   6. Main Content Area
   ---------------------------------------------------------------- */
#snbd-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease;
  min-height: 100vh;
  background-color: var(--bg-body) !important;
}
#snbd-sidebar.collapsed ~ #snbd-main { margin-left: var(--sidebar-w-collapsed); }

/* ----------------------------------------------------------------
   7. Top Navbar
   ---------------------------------------------------------------- */
#snbd-topbar {
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.topbar-left { display: flex; align-items: center; gap: 1rem; }
.toggle-sidebar-btn {
  background: none; border: none;
  color: var(--text-secondary); font-size: 1.125rem;
  cursor: pointer; padding: 0.375rem;
  border-radius: 6px; transition: all 0.15s;
}
.toggle-sidebar-btn:hover { background: var(--brand-light); color: var(--text-primary); }

.topbar-search { position: relative; width: 280px; display: flex; align-items: center; }
.topbar-search input {
  width: 100%;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.4rem 1rem 0.4rem 2.25rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  outline: none;
  transition: all 0.15s;
}
.topbar-search input[type="hidden"] { display: none; }
.topbar-search input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1); }
.topbar-search i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.8125rem; z-index: 1; }

.topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.topbar-icon-btn {
  background: none; border: none;
  color: var(--text-secondary); font-size: 1rem;
  cursor: pointer; position: relative;
  padding: 0.375rem 0.5rem; border-radius: 6px;
  transition: all 0.15s;
}
.topbar-icon-btn:hover { background: var(--brand-light); color: var(--brand-primary); }
.notification-badge {
  position: absolute; top: 0; right: 0;
  background: var(--brand-primary); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  padding: 1px 5px; border-radius: 50rem;
  line-height: 1.2;
}

/* ----------------------------------------------------------------
   8. Content Container
   ---------------------------------------------------------------- */
.snbd-content { padding: 1.5rem 2rem; flex: 1; }

/* ----------------------------------------------------------------
   9. Dashboard Stat Cards
   ---------------------------------------------------------------- */
.stat-card {
  border-left: 4px solid var(--brand-primary) !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.stat-card .stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.stat-card .stat-icon.icon-services { background: var(--info-bg); color: var(--info); }
.stat-card .stat-icon.icon-invoices { background: var(--warning-bg); color: var(--warning); }
.stat-card .stat-icon.icon-balance { background: var(--danger-bg); color: var(--danger); }
.stat-card .stat-icon.icon-tickets { background: var(--success-bg); color: var(--success); }

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ----------------------------------------------------------------
   10. Service Cards
   ---------------------------------------------------------------- */
.service-card {
  transition: transform 0.15s, box-shadow 0.15s;
  border-top: 3px solid transparent;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.service-card.service-active { border-top-color: var(--success); }
.service-card.service-pending { border-top-color: var(--warning); }
.service-card.service-suspended { border-top-color: var(--danger); }

/* ----------------------------------------------------------------
   11. Floating Action Button (FAB)
   ---------------------------------------------------------------- */
.fab-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 990; display: flex; flex-direction: column-reverse; align-items: center; gap: 0.75rem; }
.fab-main {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand-primary); color: #fff; border: none;
  font-size: 1.25rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.4);
  transition: transform 0.25s cubic-bezier(0.175,0.885,0.32,1.275);
  display: flex; align-items: center; justify-content: center;
}
.fab-main:hover { transform: scale(1.05); }
.fab-main.active { transform: rotate(45deg); }
.fab-menu { display: flex; flex-direction: column; gap: 0.625rem; pointer-events: none; }
.fab-item {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0;
  transform: translateY(16px) scale(0.8);
  transition: all 0.25s cubic-bezier(0.175,0.885,0.32,1.275);
  position: relative; text-decoration: none;
}
.fab-item:hover { background: var(--brand-light); color: var(--brand-primary); border-color: var(--brand-primary); }
.fab-item[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; right: 52px;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  padding: 0.25rem 0.625rem; border-radius: 6px; font-size: 0.75rem; white-space: nowrap;
  opacity: 0; transform: translateX(8px); transition: all 0.15s; pointer-events: none;
  color: var(--text-primary);
}
.fab-item:hover::before { opacity: 1; transform: translateX(0); }
.fab-container.active .fab-menu { pointer-events: auto; }
.fab-container.active .fab-item { opacity: 1; transform: translateY(0) scale(1); }

/* ----------------------------------------------------------------
   12. Loading Overlay
   ---------------------------------------------------------------- */
#snbd-loader {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: var(--bg-body); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.4s;
}
#snbd-loader .loader-logo {
  font-size: 2rem; font-weight: 700; color: var(--brand-primary);
  animation: pulseLogo 1.5s infinite; margin-bottom: 1.5rem;
}
@keyframes pulseLogo { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.loader-progress-wrap { width: 200px; height: 3px; background: var(--border-color); border-radius: 3px; overflow: hidden; }
.loader-progress-bar { width: 0; height: 100%; background: var(--brand-primary); transition: width 0.8s ease-in-out; }

/* ----------------------------------------------------------------
   13. Auth Pages — Premium Design
   ---------------------------------------------------------------- */
.auth-page {
  background: var(--bg-body);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
#particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }

/* Auth Card */
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2rem 2.25rem 1.75rem;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(229,57,53,0.05);
  position: relative;
  overflow: hidden;
}
.auth-card-wide { max-width: 520px; }

/* Glowing Accent Line */
.auth-accent-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-primary), #ff6f61, var(--brand-primary), transparent);
  background-size: 200% 100%;
  animation: accentShimmer 3s ease-in-out infinite;
}
@keyframes accentShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Logo Block */
.auth-logo-block {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-logo-icon {
  width: 56px; height: 56px;
  margin: 0 auto 0.75rem;
  background: linear-gradient(135deg, var(--brand-primary), #ff6f61);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
  box-shadow: 0 8px 24px rgba(var(--brand-primary-rgb), 0.3);
}
.auth-logo-text {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.auth-logo-tagline {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 0.25rem;
}

/* Tab Switcher */
.auth-tabs {
  display: flex;
  background: var(--bg-elevated);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.2s;
  text-decoration: none;
}
.auth-tab:hover { color: var(--text-secondary); }
.auth-tab.active {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3);
}

/* Icon-prefixed Input Groups */
.auth-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bg-surface);
}
.auth-input-group:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}
.auth-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  color: var(--text-muted);
  font-size: 0.875rem;
  flex-shrink: 0;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.auth-input-group:focus-within .auth-input-icon { color: var(--brand-primary); }
.auth-input-group .form-floating { flex: 1; }
.auth-input-group .form-control {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-primary);
  font-size: 0.875rem;
  height: 52px;
}
.auth-input-group .form-floating > label {
  color: var(--text-muted);
  padding-left: 0.75rem;
}
.auth-input-group .form-floating > .form-control:focus ~ label,
.auth-input-group .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--brand-primary);
}

/* Auth Buttons */
.btn-auth-primary {
  background: linear-gradient(135deg, var(--brand-primary), #d32f2f);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), 0.3);
}
.btn-auth-primary:hover {
  background: linear-gradient(135deg, #d32f2f, var(--brand-primary));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(var(--brand-primary-rgb), 0.4);
}
.btn-auth-primary:active { transform: translateY(0); }

.btn-auth-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.625rem 1.5rem;
  font-weight: 500;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-auth-outline:hover {
  background: var(--brand-light);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Auth Link */
.auth-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.auth-link:hover { color: var(--brand-primary); }

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* Icon Circle (Password Reset) */
.auth-icon-circle {
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.15), rgba(var(--brand-primary-rgb), 0.05));
  border: 2px solid rgba(var(--brand-primary-rgb), 0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--brand-primary);
}

/* Trust Badges */
.auth-trust-badges {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.trust-item i {
  font-size: 0.75rem;
  color: var(--success);
}

/* Legacy compat */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; color: var(--text-secondary); font-size: 0.8125rem; margin-bottom: 0.375rem; font-weight: 500; }
.form-control-custom {
  width: 100%; padding: 0.625rem 0.875rem;
  background: var(--bg-input); border: 1px solid var(--border-color);
  border-radius: 6px; color: var(--text-primary); outline: none;
  font-size: 0.875rem; transition: all 0.15s;
}
.form-control-custom:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15); }

/* Auth card form checks */
.auth-card .form-check-label { color: var(--text-muted); }
.auth-card .form-check-input {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

/* ----------------------------------------------------------------
   14. Empty States
   ---------------------------------------------------------------- */
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
}
.empty-state i { font-size: 2.5rem; color: var(--text-muted); opacity: 0.3; margin-bottom: 1rem; }
.empty-state p { color: var(--text-muted); font-size: 0.875rem; margin: 0; }

/* ----------------------------------------------------------------
   15. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  #snbd-sidebar { transform: translateX(-100%); width: var(--sidebar-w); z-index: 1050; }
  #snbd-sidebar.mobile-open { transform: translateX(0); }
  #snbd-main, #snbd-sidebar.collapsed ~ #snbd-main { margin-left: 0; }
  .snbd-content { padding: 1rem; }
  .topbar-search { width: 160px; }
}

/* Mobile sidebar backdrop */
.sidebar-backdrop {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 1045;
  display: none;
}
.sidebar-backdrop.show { display: block; }

/* ----------------------------------------------------------------
   16. Global Bootstrap Button Overrides (Force Brand Red)
   ---------------------------------------------------------------- */

/* Override Bootstrap btn-success → red brand */
.btn-success:not(.badge):not(.status-badge) {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: 50rem !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.3) !important;
  transition: all 0.2s !important;
}
.btn-success:hover:not(.badge):not(.status-badge) {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Override Bootstrap btn-primary → red brand */
.btn-primary:not(.badge):not(.status-badge) {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: 50rem !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.3) !important;
}
.btn-primary:hover:not(.badge):not(.status-badge) {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Override Bootstrap btn-info → red brand outline style */
.btn-info:not(.badge):not(.status-badge) {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: 50rem !important;
  font-weight: 500 !important;
}
.btn-info:hover:not(.badge):not(.status-badge) {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.4) !important;
}

/* Manage Service, Back buttons — keep themed outline */
.btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
  border-radius: 50rem !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}
.btn-outline-secondary:hover {
  background: var(--brand-light) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* btn-danger stays red (already brand match) */
.btn-danger:not(.badge):not(.status-badge) {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: 50rem !important;
  font-weight: 500 !important;
}
.btn-danger:hover:not(.badge):not(.status-badge) {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

/* ================================================================
   17. Ticket Thread Styles
   ================================================================ */

.ticket-dept-badge {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border-color);
  border-radius: 50rem;
  font-size: 0.75rem; font-weight: 500;
  color: var(--text-secondary);
}
.ticket-status-badge {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 50rem;
  font-size: 0.75rem; font-weight: 600;
}
.status-open     { background: rgba(198,40,40,0.1);   color: #c62828; border: 1px solid rgba(198,40,40,0.25); }
.status-answered { background: rgba(46,125,50,0.1);   color: #2e7d32; border: 1px solid rgba(46,125,50,0.25); }
.status-waiting  { background: rgba(230,81,0,0.1);    color: #e65100; border: 1px solid rgba(230,81,0,0.25); }
.status-closed   { background: rgba(100,100,100,0.08);color: #666;    border: 1px solid rgba(100,100,100,0.18); }

.ticket-thread-card,
.ticket-reply-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.ticket-thread-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  padding: 0.875rem 1.25rem;
  font-weight: 600; font-size: 0.875rem;
  color: var(--text-primary);
  display: flex; align-items: center;
}
.ticket-replies-wrap {
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.ticket-msg-row { display: flex; flex-direction: column; gap: 0.5rem; }
.ticket-msg-client { align-items: flex-end; }
.ticket-msg-staff  { align-items: flex-start; }

.ticket-msg-meta { display: flex; align-items: center; gap: 0.625rem; }
.ticket-msg-client .ticket-msg-meta { flex-direction: row-reverse; }

.ticket-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
  text-transform: uppercase;
}
.ticket-avatar-client {
  background: rgba(var(--brand-primary-rgb), 0.1);
  color: var(--brand-primary);
  border: 2px solid rgba(var(--brand-primary-rgb), 0.2);
}
.ticket-avatar-staff {
  background: rgba(46,125,50,0.1);
  color: #2e7d32;
  border: 2px solid rgba(46,125,50,0.2);
}
.ticket-sender-name {
  display: block; font-weight: 600; font-size: 0.8125rem;
  color: var(--text-primary); line-height: 1.2;
}
.ticket-staff-label {
  font-size: 0.6875rem; color: #2e7d32; font-weight: 500; margin-left: 4px;
}
.ticket-msg-time {
  display: block; font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px;
}

/* ---- Message Bubbles ---- */
.ticket-bubble {
  max-width: 78%;
  padding: 0.875rem 1.125rem;
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.65;
  word-wrap: break-word;
  color: var(--text-primary);   /* ALWAYS dark text for readability */
}
/* USER bubble: soft red tint, red border */
.ticket-bubble-client {
  background: rgba(var(--brand-primary-rgb), 0.07);
  border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
  border-top-right-radius: 4px;
}
/* STAFF bubble: neutral elevated background */
.ticket-bubble-staff {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-top-left-radius: 4px;
}

/* Attachments */
.ticket-attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ticket-attachment-pill {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.625rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 50rem; font-size: 0.75rem;
  color: var(--text-secondary); text-decoration: none; transition: all 0.15s;
}
.ticket-attachment-pill:hover {
  background: var(--brand-light); border-color: var(--brand-primary); color: var(--brand-primary);
}

/* Reply form */
.ticket-reply-body { padding: 1.25rem; }
.ticket-textarea {
  width: 100%; padding: 0.875rem 1rem;
  background: var(--bg-body);
  border: 1.5px solid var(--border-color);
  border-radius: 10px; color: var(--text-primary);
  font-size: 0.875rem; outline: none; resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font-sans); min-height: 120px;
}
.ticket-textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}
.ticket-upload-label {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-color); border-radius: 50rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.15s; background: var(--bg-surface);
}
.ticket-upload-label:hover {
  background: var(--brand-light); border-color: var(--brand-primary); color: var(--brand-primary);
}
.ticket-closed-notice {
  padding: 1.25rem 1.5rem;
  background: rgba(100,100,100,0.06);
  border: 1px solid var(--border-color); border-radius: 10px;
  color: var(--text-secondary); font-size: 0.875rem;
}
.ticket-link { color: var(--brand-primary); font-weight: 500; }
.ticket-link:hover { color: var(--brand-hover); }

/* ================================================================
   18. Enhanced Sidebar Navigation
   ================================================================ */

/* Active indicator line replaces border-left */
.snbd-nav-item { position: relative; border-left: none !important; }
.snbd-nav-item::after {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--brand-primary);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.snbd-nav-item.active::after  { transform: scaleY(1); }
.snbd-nav-item.active i       { color: var(--brand-primary); }
.snbd-nav-item:hover i        { color: var(--brand-primary); transition: color 0.15s; }

/* Tooltip labels for collapsed sidebar */
#snbd-sidebar.collapsed .snbd-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
#snbd-sidebar.collapsed .snbd-nav-text {
  position: fixed;
  left: calc(var(--sidebar-w-collapsed) + 12px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem; font-weight: 500;
  white-space: nowrap;
  width: auto !important;
  opacity: 0; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: opacity 0.15s, transform 0.15s;
  transform: translateX(-4px);
  z-index: 2000;
}
#snbd-sidebar.collapsed .snbd-nav-item:hover .snbd-nav-text {
  opacity: 1; transform: translateX(0);
}

/* Live pulse dot in brand header */
.snbd-brand::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
  margin-left: auto; flex-shrink: 0;
  animation: navDot 2.5s ease-in-out infinite;
}
#snbd-sidebar.collapsed .snbd-brand::after { display: none; }
@keyframes navDot {
  0%,100% { opacity: 0.4; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.3); }
}

/* Section labels with subtle line */
.nav-section-label { display: flex; align-items: center; gap: 0.5rem; }
.nav-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border-subtle);
}

/* User profile hover */
.snbd-user-profile { cursor: default; transition: background 0.15s; }
.snbd-user-profile:hover { background: var(--brand-light); }

/* Topbar search focus polish */
.topbar-search input::placeholder { color: var(--text-muted); }
.topbar-search:focus-within i     { color: var(--brand-primary); transition: color 0.15s; }

/* ================================================================
   19. Dashboard Widget Cards (Loyalty Matrix, etc.)
   ================================================================ */

/* Override default WHMCS widget HTML inside our card wrapper */
.dash-widget-body {
  font-size: 0.875rem;
  color: var(--text-primary);
}
/* Make widget links match brand color */
.dash-widget-body a       { color: var(--brand-primary); }
.dash-widget-body a:hover { color: var(--brand-hover); }

/* Any green buttons inside widgets → red brand */
.dash-widget-body .btn-success,
.dash-widget-body button.btn-success {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important; border-radius: 50rem !important;
}
/* Reset widget table styles to match our theme */
.dash-widget-body table { width: 100%; font-size: 0.8125rem; }
.dash-widget-body table td, .dash-widget-body table th {
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.dash-widget-body table thead th { font-weight: 600; color: var(--text-secondary); }

/* Progress bars inside loyalty widget */
.dash-widget-body .progress { background: var(--bg-elevated); border-radius: 50rem; height: 8px; }
.dash-widget-body .progress-bar { background: var(--brand-primary); border-radius: 50rem; }

/* ================================================================
   20. Announcements Panel
   ================================================================ */

.announce-item {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.announce-item:last-child { border-bottom: none; }
.announce-title {
  display: block;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
}
.announce-title:hover { color: var(--brand-primary); }
.announce-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ================================================================
   21. Loyalty Matrix Card
   ================================================================ */

.loyalty-card .card-header { border-bottom: 2px solid rgba(var(--brand-primary-rgb),0.12); }

.loyalty-tier-badge {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(var(--brand-primary-rgb), 0.08);
  border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
  border-radius: 50rem;
  color: var(--brand-primary);
  font-weight: 600; font-size: 0.875rem;
}
.loyalty-tier-badge i { color: #f9a825; }

.loyalty-meta-row { display: flex; align-items: center; margin-top: 0.5rem; }

.loyalty-progress-bar {
  height: 6px; border-radius: 50rem;
  background: var(--bg-elevated);
  overflow: hidden; margin-top: 4px;
}
.loyalty-progress-fill {
  height: 100%; width: 40%;
  background: linear-gradient(90deg, var(--brand-primary), #ff7043);
  border-radius: 50rem;
  animation: loyaltyFill 1.2s ease-out forwards;
}
@keyframes loyaltyFill {
  from { width: 0; }
}