/**
 * HBS UI Design System v2.0
 * Premium SaaS-quality UI for HBS Cleaning Booking System
 * 
 * Scoped under #hbs-ui-root to prevent theme conflicts
 * 
 * COMPONENTS COVERED:
 * - Booking Form (guided flow + chat) [hbs_ai_booking], [hbs_booking_form]
 * - Customer Portal [hbs_customer_dashboard]
 * - Vendor Dashboard [hbs_vendor_dashboard]
 * 
 * QA CHECKLIST:
 * 1. Resize 320px → 1440px: layout clean, tables readable, chips wrap
 * 2. Keyboard navigation: all actions reachable, focus visible
 * 3. Screen reader: chat updates announced, table headers labeled
 * 4. Long content: no overflow on long names/addresses
 * 5. High contrast: tokens produce adequate contrast
 * 
 * FILE SIZE TARGET: <25KB minified
 */

/* ============================================
   DESIGN TOKENS
   ============================================ */
#hbs-ui-root,
.hbs-wrap,
.hbs-cust-dash,
.hbs-vendor {
  /* Colors - Core */
  --hbs-bg: #f0eaea;
  --hbs-card: #ffffff;
  --hbs-text: #1e1e1e;
  --hbs-muted: #6b7280;
  --hbs-border: #d9d9d9;

  /* Brand Accent */
  --hbs-brand: #2563eb;
  --hbs-brand-dark: #1d4ed8;
  --hbs-brand-light: #dbeafe;

  /* Status Colors - Accessible */
  --hbs-success: #059669;
  --hbs-success-bg: #d1fae5;
  --hbs-warning: #d97706;
  --hbs-warning-bg: #fef3c7;
  --hbs-danger: #dc2626;
  --hbs-danger-bg: #fee2e2;
  --hbs-info: #0284c7;
  --hbs-info-bg: #e0f2fe;

  /* Chat Bubbles */
  --hbs-bot-bubble: #f8fafc;
  --hbs-user-bubble: #dbeafe;

  /* Radii */
  --hbs-radius: 16px;
  --hbs-radius-sm: 10px;
  --hbs-radius-xs: 6px;

  /* Shadows - Layered for premium feel */
  --hbs-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
  --hbs-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.08);
  --hbs-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Spacing Scale */
  --hbs-space-xs: 4px;
  --hbs-space-sm: 8px;
  --hbs-space-md: 12px;
  --hbs-space-lg: 16px;
  --hbs-space-xl: 24px;
  --hbs-space-2xl: 32px;

  /* Typography */
  --hbs-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hbs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --hbs-line-height: 1.6;

  /* Motion */
  --hbs-transition: 150ms ease;

  /* Layout */
  --hbs-max-width: 960px;
}

/* Dark mode hook (future) */
[data-theme="dark"] #hbs-ui-root {
  --hbs-bg: #1f1f23;
  --hbs-card: #2d2d33;
  --hbs-text: #f4f4f5;
  --hbs-muted: #a1a1aa;
  --hbs-border: #3f3f46;
  --hbs-bot-bubble: #27272a;
  --hbs-user-bubble: #1e3a5f;
}

/* ============================================
   BASE & RESET
   ============================================ */
#hbs-ui-root,
.hbs-wrap,
.hbs-cust-dash,
.hbs-vendor {
  font-family: var(--hbs-font);
  color: var(--hbs-text);
  line-height: var(--hbs-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#hbs-ui-root *,
.hbs-wrap *,
.hbs-cust-dash *,
.hbs-vendor * {
  box-sizing: border-box;
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */

/* Root wrapper with required #f0eaea background */
#hbs-ui-root {
  background: var(--hbs-bg);
  padding: clamp(16px, 4vw, 32px);
  border-radius: var(--hbs-radius);
  max-width: var(--hbs-max-width);
  margin: clamp(12px, 3vw, 24px) auto;
}

/* Cards - white surface on the #f0eaea background */
.hbs-card {
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  padding: clamp(16px, 4vw, 28px);
  box-shadow: var(--hbs-shadow);
}

/* Responsive grid */
.hbs-grid {
  display: grid;
  gap: var(--hbs-space-md);
}

.hbs-grid-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .hbs-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.hbs-grid-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .hbs-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Flex utilities */
.hbs-flex {
  display: flex;
  gap: var(--hbs-space-md);
}

.hbs-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hbs-space-md);
}

.hbs-flex-wrap {
  flex-wrap: wrap;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.hbs-title {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 var(--hbs-space-lg);
  color: var(--hbs-text);
}

.hbs-subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 600;
  margin: var(--hbs-space-lg) 0 var(--hbs-space-md);
  color: var(--hbs-text);
}

.hbs-muted {
  color: var(--hbs-muted);
  font-size: 0.875rem;
}

.hbs-small {
  font-size: 0.8125rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.hbs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hbs-space-sm);
  padding: 12px 20px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--hbs-radius-sm);
  cursor: pointer;
  transition: all var(--hbs-transition);
  text-decoration: none;
  white-space: nowrap;
}

/* Primary button */
.hbs-btn,
.hbs-btn-primary {
  background: var(--hbs-brand);
  color: #fff;
}

.hbs-btn:hover,
.hbs-btn-primary:hover {
  background: var(--hbs-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.hbs-btn:active,
.hbs-btn-primary:active {
  transform: translateY(0);
}

/* Secondary button */
.hbs-btn-secondary {
  background: var(--hbs-card);
  color: var(--hbs-text);
  border: 1px solid var(--hbs-border);
}

.hbs-btn-secondary:hover {
  background: #f9fafb;
  border-color: var(--hbs-brand);
  color: var(--hbs-brand);
}

/* Ghost button */
.hbs-btn-ghost {
  background: transparent;
  color: var(--hbs-brand);
  padding: 10px 16px;
}

.hbs-btn-ghost:hover {
  background: var(--hbs-brand-light);
}

/* Destructive button */
.hbs-btn-danger {
  background: var(--hbs-danger);
  color: #fff;
}

.hbs-btn-danger:hover {
  background: #b91c1c;
}

/* Small button */
.hbs-btn-sm {
  padding: 8px 14px;
  font-size: 0.8125rem;
}

/* Disabled state */
.hbs-btn:disabled,
.hbs-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Focus state - Accessibility */
.hbs-btn:focus-visible {
  outline: 2px solid var(--hbs-brand);
  outline-offset: 2px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.hbs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--hbs-space-lg);
}

.hbs-field label,
.hbs-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--hbs-text);
}

.hbs-hint {
  font-size: 0.8125rem;
  color: var(--hbs-muted);
  margin-top: 4px;
}

.hbs-input,
.hbs-wrap input[type="text"],
.hbs-wrap input[type="tel"],
.hbs-wrap input[type="email"],
.hbs-wrap input[type="date"],
.hbs-wrap input[type="number"],
.hbs-wrap textarea,
.hbs-wrap select,
.hbs-cust-dash input,
.hbs-vendor input,
.hbs-vendor select {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--hbs-text);
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius-sm);
  transition: border-color var(--hbs-transition), box-shadow var(--hbs-transition);
}

.hbs-input:hover,
.hbs-wrap input:hover,
.hbs-wrap textarea:hover,
.hbs-wrap select:hover {
  border-color: #b0b0b0;
}

.hbs-input:focus,
.hbs-wrap input:focus,
.hbs-wrap textarea:focus,
.hbs-wrap select:focus {
  outline: none;
  border-color: var(--hbs-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.hbs-input:disabled,
.hbs-wrap input:disabled,
.hbs-wrap input[readonly] {
  background: #f4f4f5;
  color: var(--hbs-muted);
  cursor: not-allowed;
}

/* Error state */
.hbs-input-error {
  border-color: var(--hbs-danger) !important;
}

.hbs-error-msg {
  color: var(--hbs-danger);
  font-size: 0.8125rem;
  margin-top: 4px;
}

/* Textarea */
.hbs-wrap textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select arrow */
.hbs-wrap select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ============================================
   BADGES & CHIPS
   ============================================ */
.hbs-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: capitalize;
}

/* Status badges */
.hbs-badge-awaiting,
.hbs-badge-awaiting-assignment {
  background: var(--hbs-warning-bg);
  color: #92400e;
}

.hbs-badge-assigned {
  background: var(--hbs-info-bg);
  color: #0369a1;
}

.hbs-badge-scheduled {
  background: #ede9fe;
  color: #5b21b6;
}

.hbs-badge-in-progress {
  background: var(--hbs-brand-light);
  color: var(--hbs-brand-dark);
}

.hbs-badge-completed {
  background: var(--hbs-success-bg);
  color: #065f46;
}

.hbs-badge-cancelled {
  background: var(--hbs-danger-bg);
  color: #991b1b;
}

.hbs-badge-draft,
.hbs-badge-pending,
.hbs-badge-publish {
  background: #f4f4f5;
  color: #52525b;
}

/* Chip for time slots */
.hbs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #334155;
  border-radius: 6px;
  margin: 2px;
}

.hbs-chip-price {
  font-weight: 700;
  color: var(--hbs-brand);
}

/* ============================================
   TABLES - Responsive & Premium
   ============================================ */
.hbs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--hbs-space-lg) 0;
}

.hbs-table,
.hbs-wrap table,
.hbs-cust-dash table,
.hbs-vendor table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  overflow: hidden;
}

.hbs-table th,
.hbs-table td,
.hbs-wrap table th,
.hbs-wrap table td,
.hbs-cust-dash table th,
.hbs-cust-dash table td,
.hbs-vendor table th,
.hbs-vendor table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hbs-border);
  vertical-align: middle;
}

.hbs-table thead th,
.hbs-wrap table thead th,
.hbs-cust-dash table thead th,
.hbs-vendor table thead th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--hbs-muted);
}

.hbs-table tbody tr:hover,
.hbs-wrap table tbody tr:hover,
.hbs-cust-dash table tbody tr:hover,
.hbs-vendor table tbody tr:hover {
  background: #fafbfc;
}

.hbs-table tbody tr:last-child td,
.hbs-wrap table tbody tr:last-child td,
.hbs-cust-dash table tbody tr:last-child td,
.hbs-vendor table tbody tr:last-child td {
  border-bottom: none;
}

/* Mobile stacked table */
@media (max-width: 639px) {
  .hbs-table-stack thead {
    display: none;
  }

  .hbs-table-stack tbody tr {
    display: block;
    padding: var(--hbs-space-lg);
    border-bottom: 1px solid var(--hbs-border);
  }

  .hbs-table-stack tbody tr:last-child {
    border-bottom: none;
  }

  .hbs-table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border: none;
  }

  .hbs-table-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--hbs-muted);
    font-size: 0.8125rem;
  }
}

/* ============================================
   CHAT COMPONENTS
   ============================================ */
.hbs-chat {
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  overflow: hidden;
  box-shadow: var(--hbs-shadow);
}

.hbs-chat-header {
  display: flex;
  align-items: center;
  gap: var(--hbs-space-md);
  padding: var(--hbs-space-lg);
  background: #f8fafc;
  border-bottom: 1px solid var(--hbs-border);
}

.hbs-chat-header .hbs-title {
  margin: 0;
  font-size: 1rem;
}

.hbs-chat-log {
  padding: var(--hbs-space-lg);
  min-height: 200px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fafbfc;
}

/* Chat rows and bubbles */
.hbs-chat-row,
.hbs-ai-row,
.hbs-row {
  display: flex;
  margin: var(--hbs-space-md) 0;
}

.hbs-chat-bot,
.hbs-ai-bot,
.hbs-bot {
  background: var(--hbs-bot-bubble);
  border-radius: var(--hbs-radius) var(--hbs-radius) var(--hbs-radius) 4px;
  padding: 14px 18px;
  max-width: 85%;
  margin-right: auto;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hbs-chat-user,
.hbs-ai-user,
.hbs-user {
  background: var(--hbs-user-bubble);
  color: var(--hbs-brand-dark);
  border-radius: var(--hbs-radius) var(--hbs-radius) 4px var(--hbs-radius);
  padding: 14px 18px;
  max-width: 85%;
  margin-left: auto;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Chat input bar */
.hbs-chat-input,
.hbs-inputbar {
  display: flex;
  gap: var(--hbs-space-md);
  padding: var(--hbs-space-lg);
  background: var(--hbs-card);
  border-top: 1px solid var(--hbs-border);
}

.hbs-chat-input textarea,
.hbs-inputbar textarea {
  flex: 1;
  min-height: 48px;
  max-height: 180px;
  padding: 12px 16px;
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius-sm);
  font-family: inherit;
  font-size: 1rem;
  resize: none;
  transition: border-color var(--hbs-transition);
}

.hbs-chat-input textarea:focus,
.hbs-inputbar textarea:focus {
  outline: none;
  border-color: var(--hbs-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ============================================
   BOOKING FORM SPECIFIC
   ============================================ */

/* Stage container for guided flow */
.hbs-stage,
#hbs-ai-stage {
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  padding: clamp(16px, 4vw, 24px);
  margin: var(--hbs-space-lg) 0;
  box-shadow: var(--hbs-shadow);
}

.hbs-stage strong,
#hbs-ai-stage strong {
  display: block;
  font-size: 1rem;
  margin-bottom: var(--hbs-space-md);
}

/* Actions row */
.hbs-actions,
.hbs-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hbs-space-sm);
  margin-top: var(--hbs-space-lg);
}

/* Summary/Confirmation block */
.hbs-summary,
.hbs-ai-summary {
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  padding: var(--hbs-space-lg);
  margin: var(--hbs-space-lg) 0;
}

.hbs-summary div,
.hbs-ai-summary div {
  padding: 6px 0;
  display: flex;
  gap: var(--hbs-space-sm);
}

.hbs-summary b,
.hbs-ai-summary b {
  min-width: 120px;
  color: var(--hbs-muted);
  font-weight: 500;
}

.hbs-summary hr,
.hbs-ai-summary hr {
  border: none;
  border-top: 1px solid var(--hbs-border);
  margin: var(--hbs-space-md) 0;
}

/* Success receipt */
.hbs-receipt {
  background: var(--hbs-success-bg);
  border: 1px solid #a7f3d0;
  border-radius: var(--hbs-radius);
  padding: var(--hbs-space-xl);
  text-align: center;
}

.hbs-receipt-icon {
  font-size: 3rem;
  margin-bottom: var(--hbs-space-md);
}

/* ============================================
   CUSTOMER PORTAL
   ============================================ */
.hbs-cust-dash {
  background: var(--hbs-bg);
  padding: clamp(16px, 4vw, 32px);
  border-radius: var(--hbs-radius);
  max-width: var(--hbs-max-width);
  margin: clamp(12px, 3vw, 24px) auto;
}

.hbs-cust-dash h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 var(--hbs-space-xl);
}

/* Next booking card */
.hbs-next-booking {
  background: var(--hbs-brand-light);
  border: 1px solid var(--hbs-brand);
  border-radius: var(--hbs-radius);
  padding: var(--hbs-space-lg);
  margin-bottom: var(--hbs-space-xl);
}

/* Empty state */
.hbs-empty {
  text-align: center;
  padding: var(--hbs-space-2xl);
  color: var(--hbs-muted);
}

.hbs-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--hbs-space-md);
  opacity: 0.5;
}

/* ============================================
   VENDOR DASHBOARD
   ============================================ */
.hbs-vendor {
  background: var(--hbs-bg);
  padding: clamp(16px, 4vw, 32px);
  border-radius: var(--hbs-radius);
  max-width: 1200px;
  margin: clamp(12px, 3vw, 24px) auto;
}

.hbs-vendor h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 var(--hbs-space-lg);
}

.hbs-vendor h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--hbs-space-xl) 0 var(--hbs-space-lg);
}

/* Top bar */
.hbs-vendor-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hbs-space-md);
  padding: var(--hbs-space-lg);
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  margin-bottom: var(--hbs-space-lg);
}

/* Availability toggle */
.hbs-avail-toggle {
  display: flex;
  align-items: center;
  gap: var(--hbs-space-sm);
}

.hbs-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: #d1d5db;
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--hbs-transition);
}

.hbs-toggle.is-on {
  background: var(--hbs-success);
}

.hbs-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--hbs-transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hbs-toggle.is-on::after {
  transform: translateX(24px);
}

/* Identity chip */
.hbs-identity {
  display: inline-flex;
  align-items: center;
  gap: var(--hbs-space-sm);
  padding: 8px 14px;
  background: #f4f4f5;
  border-radius: var(--hbs-radius);
  font-size: 0.875rem;
}

.hbs-identity-code {
  font-family: var(--hbs-font-mono);
  color: var(--hbs-brand);
  font-weight: 600;
}

/* ============================================
   TOASTS
   ============================================ */
.hbs-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  max-width: 360px;
  padding: 14px 18px;
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius-sm);
  box-shadow: var(--hbs-shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--hbs-space-md);
  z-index: 10000;
  animation: hbs-toast-in 200ms ease-out;
}

.hbs-toast-success {
  border-left: 4px solid var(--hbs-success);
}

.hbs-toast-error {
  border-left: 4px solid var(--hbs-danger);
}

.hbs-toast-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--hbs-muted);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}

@keyframes hbs-toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   SKELETON LOADERS
   ============================================ */
.hbs-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: hbs-shimmer 1.5s infinite;
  border-radius: var(--hbs-radius-xs);
}

.hbs-skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.hbs-skeleton-box {
  height: 120px;
}

@keyframes hbs-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   LEGACY CLASS COMPATIBILITY
   Keep existing JS hooks working
   ============================================ */

/* Form wrapper - ensure #f0eaea background */
.hbs-wrap {
  background: var(--hbs-bg);
  max-width: var(--hbs-max-width);
  margin: clamp(12px, 3vw, 24px) auto;
  padding: clamp(16px, 4vw, 32px);
  border-radius: var(--hbs-radius);
}

/* Booking form card */
.hbs-wrap form,
.hbs-wrap>div:not(.hbs-wrap):not(.hbs-login-intro) {
  background: var(--hbs-card);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  box-shadow: var(--hbs-shadow);
}

.hbs-wrap h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 var(--hbs-space-xl);
}

.hbs-wrap h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--hbs-space-xl) 0 var(--hbs-space-lg);
  padding-top: var(--hbs-space-lg);
  border-top: 1px solid var(--hbs-border);
}

.hbs-wrap label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Grid already defined in base */

/* Button style upgrade */
.hbs-wrap .hbs-btn,
.hbs-wrap button[type="submit"] {
  background: var(--hbs-brand);
  color: #fff;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--hbs-radius-sm);
  cursor: pointer;
  transition: all var(--hbs-transition);
}

.hbs-wrap .hbs-btn:hover,
.hbs-wrap button[type="submit"]:hover {
  background: var(--hbs-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Messages */
.hbs-msg {
  font-size: 0.875rem;
}

.hbs-msg.ok {
  color: var(--hbs-success);
}

.hbs-msg.err {
  color: var(--hbs-danger);
}

/* widefat striped table override */
.hbs-cust-dash .widefat,
.hbs-vendor .widefat {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  overflow: hidden;
  font-size: 0.875rem;
}

.hbs-cust-dash .widefat th,
.hbs-cust-dash .widefat td,
.hbs-vendor .widefat th,
.hbs-vendor .widefat td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hbs-border);
}

.hbs-cust-dash .widefat thead th,
.hbs-vendor .widefat thead th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hbs-muted);
}

.hbs-cust-dash .widefat tbody tr:hover,
.hbs-vendor .widefat tbody tr:hover {
  background: #fafbfc;
}

.hbs-cust-dash .widefat tbody tr:last-child td,
.hbs-vendor .widefat tbody tr:last-child td {
  border-bottom: none;
}

/* Button styling inside vendor table */
.hbs-vendor .button {
  padding: 6px 12px;
  font-size: 0.8125rem;
  border-radius: var(--hbs-radius-xs);
  cursor: pointer;
  transition: all var(--hbs-transition);
}

.hbs-vendor .button-primary {
  background: var(--hbs-brand);
  color: #fff;
  border: none;
}

.hbs-vendor .button-primary:hover {
  background: var(--hbs-brand-dark);
}

/* ============================================
   AI ASSISTANT LEGACY CLASSES
   ============================================ */
#hbs-ai-root,
#hbs-ai-assistant {
  background: var(--hbs-bg);
  border-radius: var(--hbs-radius);
  padding: clamp(16px, 4vw, 32px);
  max-width: var(--hbs-max-width);
  margin: clamp(12px, 3vw, 24px) auto;
  font-family: var(--hbs-font);
  color: var(--hbs-text);
}

#hbs-ai-assistant .hbs-ai-row {
  display: flex;
  margin: var(--hbs-space-md) 0;
}

#hbs-ai-assistant .hbs-ai-bot {
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius) var(--hbs-radius) var(--hbs-radius) 4px;
  padding: 16px 20px;
  max-width: 85%;
  margin-right: auto;
  line-height: 1.6;
  word-wrap: break-word;
  box-shadow: var(--hbs-shadow);
}

#hbs-ai-assistant .hbs-ai-user {
  background: var(--hbs-user-bubble);
  color: var(--hbs-brand-dark);
  border-radius: var(--hbs-radius) var(--hbs-radius) 4px var(--hbs-radius);
  padding: 14px 18px;
  max-width: 85%;
  margin-left: auto;
  line-height: 1.55;
}

#hbs-ai-assistant .hbs-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hbs-space-sm);
  margin-top: var(--hbs-space-md);
}

#hbs-ai-assistant .hbs-ai-actions button,
#hbs-ai-assistant .hbs-ai-actions .button {
  background: var(--hbs-card);
  color: var(--hbs-text);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius-sm);
  padding: 12px 18px;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all var(--hbs-transition);
}

#hbs-ai-assistant .hbs-ai-actions button:hover,
#hbs-ai-assistant .hbs-ai-actions .button:hover {
  background: var(--hbs-brand);
  color: #fff;
  border-color: var(--hbs-brand);
  transform: translateY(-1px);
}

#hbs-ai-assistant .hbs-ai-actions .button-primary {
  background: var(--hbs-brand);
  color: #fff;
  border-color: var(--hbs-brand);
}

#hbs-ai-assistant .hbs-ai-actions .button-primary:hover {
  background: var(--hbs-brand-dark);
}

#hbs-ai-assistant .hbs-ai-input {
  display: flex;
  gap: var(--hbs-space-sm);
  margin: var(--hbs-space-md) 0;
}

#hbs-ai-assistant .hbs-ai-input input,
#hbs-ai-assistant .hbs-ai-input select,
#hbs-ai-assistant .hbs-ai-input textarea {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius-sm);
  font-size: 1rem;
  background: var(--hbs-card);
}

#hbs-ai-assistant .hbs-ai-input input:focus,
#hbs-ai-assistant .hbs-ai-input select:focus,
#hbs-ai-assistant .hbs-ai-input textarea:focus {
  outline: none;
  border-color: var(--hbs-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#hbs-ai-assistant .hbs-ai-muted {
  color: var(--hbs-muted);
  font-size: 0.875rem;
  margin-top: var(--hbs-space-md);
}

#hbs-ai-assistant .hbs-ai-summary {
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  padding: var(--hbs-space-lg);
  margin: var(--hbs-space-lg) 0;
  box-shadow: var(--hbs-shadow);
}

#hbs-ai-assistant .hbs-ai-summary div {
  padding: 8px 0;
  display: flex;
  gap: 8px;
}

#hbs-ai-assistant .hbs-ai-summary b {
  min-width: 130px;
  color: var(--hbs-muted);
  font-weight: 500;
}

#hbs-ai-assistant .hbs-ai-summary hr {
  border: none;
  border-top: 1px solid var(--hbs-border);
  margin: var(--hbs-space-md) 0;
}

/* AI Chat specific */
#hbs-ai-chat {
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  box-shadow: var(--hbs-shadow-lg);
  overflow: hidden;
}

#hbs-ai-chat .hbs-header {
  padding: var(--hbs-space-lg);
  background: #f8fafc;
  border-bottom: 1px solid var(--hbs-border);
}

#hbs-ai-chat .hbs-chat-log {
  padding: var(--hbs-space-lg);
  min-height: 250px;
  max-height: 500px;
  overflow-y: auto;
  background: #fafbfc;
}

#hbs-ai-chat .hbs-chat-controls {
  padding: var(--hbs-space-md);
  border-top: 1px solid var(--hbs-border);
  display: flex;
  gap: var(--hbs-space-md);
}

#hbs-ai-chat .hbs-chat-controls textarea {
  flex: 1;
  min-height: 48px;
  max-height: 180px;
  padding: 12px 16px;
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius-sm);
  font-family: inherit;
  font-size: 1rem;
  resize: none;
}

#hbs-ai-chat .hbs-chat-controls textarea:focus {
  outline: none;
  border-color: var(--hbs-brand);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 639px) {

  .hbs-chat-bot,
  .hbs-chat-user,
  .hbs-ai-bot,
  .hbs-ai-user,
  .hbs-bot,
  .hbs-user,
  #hbs-ai-assistant .hbs-ai-bot,
  #hbs-ai-assistant .hbs-ai-user {
    max-width: 95%;
  }

  .hbs-actions,
  .hbs-ai-actions,
  #hbs-ai-assistant .hbs-ai-actions {
    flex-direction: column;
  }

  .hbs-actions button,
  .hbs-ai-actions button,
  .hbs-ai-actions .button,
  #hbs-ai-assistant .hbs-ai-actions button,
  #hbs-ai-assistant .hbs-ai-actions .button {
    width: 100%;
    text-align: center;
  }

  .hbs-vendor-top {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

  #hbs-ui-root,
  .hbs-wrap,
  .hbs-cust-dash,
  .hbs-vendor {
    background: #fff !important;
    box-shadow: none !important;
  }

  .hbs-btn,
  .hbs-toast {
    display: none !important;
  }
}

/* ============================================
   REGISTRATION & LOGIN FORMS
   ============================================ */
.hbs-form-registration {
  max-width: 480px;
  /* narrowed for better focus like FB/Google */
  margin: 0 auto;
}

/* Wider container for big forms like registration */
.hbs-form-registration.hbs-wide-form {
  max-width: 820px;
}

/* Premium Card Style - Facebook/Modern SaaS inspired */
.hbs-card {
  background: #ffffff;
  border-radius: var(--hbs-radius, 12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 40px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hbs-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.hbs-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.hbs-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
  margin: 24px 0 16px;
  border-bottom: 2px solid #f3f4f6;
  padding-bottom: 8px;
}

.hbs-muted {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Inputs Premium Feel */
.hbs-form-registration input[type="text"],
.hbs-form-registration input[type="email"],
.hbs-form-registration input[type="password"],
.hbs-form-registration input[type="tel"],
.hbs-form-registration input[type="number"],
.hbs-form-registration select,
.hbs-form-registration textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbs-form-registration input:focus,
.hbs-form-registration select:focus,
.hbs-form-registration textarea:focus {
  background-color: #fff;
  border-color: var(--hbs-brand, #3b82f6);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  outline: none;
}

.hbs-form-registration .hbs-field {
  margin-bottom: 24px;
  position: relative;
}

/* Labels */
.hbs-form-registration label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: #374151;
  font-size: 0.925rem;
}

/* Required indicator */
.hbs-required {
  color: var(--hbs-danger, #ef4444);
  font-weight: bold;
  margin-left: 2px;
}

/* Field error message */
.hbs-field-error {
  display: block;
  color: var(--hbs-danger, #ef4444);
  font-size: 0.8125rem;
  margin-top: 6px;
  min-height: 1.25em;
  font-weight: 500;
}

/* Checkbox field & Layout Fix */
.hbs-checkbox-field {
  margin: 20px 0;
}

/* Fix: Align checkbox at the top for multiline text */
.hbs-checkbox-label {
  display: flex;
  align-items: flex-start;
  /* Align top for multiline */
  gap: 12px;
  cursor: pointer;
  font-weight: 400;
  color: #4b5563;
  line-height: 1.4;
  user-select: none;
}

.hbs-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  /* visual alignment with first line of text */
  width: 18px;
  height: 18px;
  accent-color: var(--hbs-brand, #3b82f6);
  cursor: pointer;
  flex-shrink: 0;
  /* prevent shrinking */
  border-radius: 4px;
}

/* Login Page specific buttons layout fix */
.hbs-register-links .hbs-grid-2 {
  display: flex !important;
  /* Force flex to control wrapping better than grid sometimes */
  gap: 16px;
  justify-content: center;
}

.hbs-register-links .hbs-btn {
  flex: 1;
  white-space: nowrap;
  padding: 12px 16px;
  font-size: 0.95rem;
}

/* Premium Buttons */
.hbs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 8px;
  /* softer radius */
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.hbs-btn-primary {
  background: var(--hbs-brand, #1877f2);
  /* Facebook blue-ish */
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hbs-btn-primary:hover {
  background: #166fe5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.hbs-btn-secondary {
  background: #42b72a;
  /* Facebook 'Create Account' green style or use brand secondary */
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hbs-btn-secondary:hover {
  background: #36a420;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Subtle link style */
.hbs-link {
  color: var(--hbs-brand, #1877f2);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}

.hbs-link:hover {
  text-decoration: underline;
}

/* Checkbox group (multi-select chips) */
.hbs-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.hbs-chip-checkbox {
  cursor: pointer;
}

.hbs-chip-checkbox input {
  display: none;
}

.hbs-chip-checkbox .hbs-chip {
  display: inline-block;
  cursor: pointer;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 20px;
  transition: all 0.2s ease;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #4b5563;
}

.hbs-chip-checkbox .hbs-chip:hover {
  border-color: var(--hbs-brand, #3b82f6);
  background: #f0f7ff;
  color: var(--hbs-brand, #3b82f6);
}

.hbs-chip-checkbox input:checked+.hbs-chip {
  background: var(--hbs-brand, #3b82f6);
  color: #fff;
  border-color: var(--hbs-brand, #3b82f6);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
}

/* Reduced spacing for compacted layouts */
.hbs-card.hbs-card-tight {
  padding: 24px;
}

/* Wide card (like login/customer register) */
.hbs-card.hbs-card-wide {
  max-width: 1000px;
  margin: 0 auto;
}

.hbs-form-registration.hbs-form-flush-left {
  margin-left: 0;
  margin-right: auto;
  max-width: 100%;
  /* Allows it to take available width or restricted by column */
}

/* Form alerts */
.hbs-form-alert {
  padding: 16px;
  border-radius: 8px;
  margin: 24px 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hbs-form-alert:empty {
  display: none;
}

.hbs-alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.hbs-alert-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* Large button */
.hbs-btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  min-height: 48px;
}

/* Block button */
.hbs-btn-block {
  width: 100%;
}

/* Spinner in button */
.hbs-btn-spinner {
  animation: hbs-spin 1s linear infinite;
}

@keyframes hbs-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Form footer */
.hbs-form-footer {
  text-align: center;
  margin-top: var(--hbs-space-xl);
}

/* Success receipt */
.hbs-success-receipt {
  text-align: center;
  padding: var(--hbs-space-xl);
}

.hbs-success-receipt h3 {
  font-size: 1.5rem;
  margin: var(--hbs-space-md) 0;
}

.hbs-receipt-table {
  text-align: left;
  margin: var(--hbs-space-xl) auto;
  max-width: 400px;
}

.hbs-receipt-table td:first-child {
  font-weight: 600;
  color: var(--hbs-muted);
  width: 40%;
}

/* Login card specific */
.hbs-login-card {
  max-width: 1000px;
  /* Much wider on desktop as requested */
  margin: 0 auto;
}

/* Ensure form inside doesn't stretch too ugly, or maybe it should?
   User said "box should be desktop screen size".
   Let's keep the inner form centered but wider if needed, or let it fill.
   If we let it fill, it might look odd with super long inputs.
   But user asked for the "box" (card) to be big.
*/
.hbs-login-card .hbs-form-registration {
  max-width: 600px;
  /* Wider form inside the wide card */
  margin: 0 auto;
}

/* Divider */
.hbs-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--hbs-space-xl) 0;
  color: var(--hbs-muted);
  font-size: 0.875rem;
}

.hbs-divider::before,
.hbs-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--hbs-border);
}

.hbs-divider span {
  padding: 0 var(--hbs-space-lg);
}

/* Register links */
.hbs-register-links {
  text-align: center;
}

.hbs-register-links .hbs-grid-2 {
  gap: var(--hbs-space-md);
  margin-top: var(--hbs-space-md);
}

/* Link style */
.hbs-link {
  color: var(--hbs-brand);
  text-decoration: none;
  font-weight: 500;
}

.hbs-link:hover {
  text-decoration: underline;
}

/* Info card (payer info) */
.hbs-info-card {
  background: #f8fafc;
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  padding: var(--hbs-space-lg);
  margin-bottom: var(--hbs-space-xl);
}

.hbs-info-card p {
  margin: 4px 0;
  font-size: 0.9375rem;
}

.hbs-payer-info {
  line-height: 1.5;
}

/* Preview Modal */
.hbs-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--hbs-space-lg);
}

.hbs-preview-content {
  background: var(--hbs-card);
  border-radius: var(--hbs-radius);
  padding: var(--hbs-space-xl);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--hbs-shadow-lg);
}

.hbs-preview-content h3 {
  margin: 0 0 var(--hbs-space-lg);
  font-size: 1.25rem;
}

.hbs-preview-body {
  margin-bottom: var(--hbs-space-lg);
}

/* Shake animation for login error */
@keyframes hbs-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.hbs-shake {
  animation: hbs-shake 0.5s ease-in-out;
}

/* Grid span utilities for forms */
@media (min-width: 640px) {
  .hbs-form-registration [style*="grid-column: span 2"] {
    grid-column: span 2;
  }
}

/* Password inputs */
#hbs-ui-root input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--hbs-text);
  background: var(--hbs-card);
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius-sm);
  transition: border-color var(--hbs-transition), box-shadow var(--hbs-transition);
}

#hbs-ui-root input[type="password"]:focus {
  outline: none;
  border-color: var(--hbs-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}


/* Mobile responsive for registration */
@media (max-width: 639px) {
  .hbs-form-registration [style*="grid-column: span 2"] {
    grid-column: span 1;
  }

  .hbs-register-links .hbs-grid-2 {
    flex-direction: column !important;
  }

  .hbs-login-card {
    max-width: 100%;
  }
}

/* ============================================
     FINANCE DASHBOARD
     ============================================ */

.hbs-fin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--hbs-space-xl);
  flex-wrap: wrap;
  gap: var(--hbs-space-md);
}

.hbs-fin-filter-bar {
  display: flex;
  gap: var(--hbs-space-md);
  background: #fff;
  padding: 8px;
  border-radius: var(--hbs-radius);
  box-shadow: var(--hbs-shadow);
}

.hbs-fin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--hbs-space-lg);
  margin-bottom: var(--hbs-space-2xl);
}

.hbs-fin-stat-card {
  background: #fff;
  padding: var(--hbs-space-lg);
  border-radius: var(--hbs-radius);
  box-shadow: var(--hbs-shadow);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;
}

.hbs-stat-label {
  display: block;
  font-size: 0.875rem;
  color: var(--hbs-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.hbs-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hbs-text);
}

.hbs-stat-value.hbs-stat-money {
  color: var(--hbs-brand-dark);
  font-feature-settings: "tnum";
}

/* Finance Tables */
.hbs-fin-table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: var(--hbs-radius);
  box-shadow: var(--hbs-shadow);
  border: 1px solid var(--hbs-border);
}

.hbs-fin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.hbs-fin-table th,
.hbs-fin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hbs-border);
  font-size: 0.925rem;
}

.hbs-fin-table th {
  background: #f8fafc;
  color: var(--hbs-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.hbs-fin-table tr:last-child td {
  border-bottom: none;
}

.hbs-fin-table tr:hover {
  background: #f9fafb;
}

.hbs-badge-warn {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #ffedd5;
}

.hbs-badge-neutral {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

.hbs-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
}

.hbs-badge-success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.hbs-badge-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ============================================
     ADMIN BOOKING & SERVICE MANAGERS
     ============================================ */

.hbs-flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--hbs-space-xl);
}

.hbs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hbs-space-md);
  margin-bottom: var(--hbs-space-lg);
  padding: var(--hbs-space-md);
  background: #fff;
  border-radius: var(--hbs-radius);
  box-shadow: var(--hbs-shadow);
}

.hbs-filter-group {
  display: flex;
  gap: var(--hbs-space-sm);
  flex-wrap: wrap;
}

.hbs-select {
  padding: 8px 12px;
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  background: #fff;
  font-size: 0.875rem;
  min-width: 140px;
}

.hbs-input {
  padding: 8px 12px;
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  font-size: 0.875rem;
}

.hbs-textarea {
  padding: 10px 12px;
  border: 1px solid var(--hbs-border);
  border-radius: var(--hbs-radius);
  font-size: 0.875rem;
  resize: vertical;
  width: 100%;
}

.hbs-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--hbs-space-md);
  padding: var(--hbs-space-md);
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: var(--hbs-radius);
  margin-bottom: var(--hbs-space-lg);
}

.hbs-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--hbs-space-md);
  padding: var(--hbs-space-lg) 0;
}

/* ============================================
     MODERN DRAWER / SIDEBAR PANEL
     Inspired by Shadcn/Radix UI patterns
     ============================================ */

.hbs-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hbs-drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hbs-drawer-content {
  position: relative;
  margin-left: auto;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
    -8px 0 30px rgba(0, 0, 0, 0.12),
    -2px 0 8px rgba(0, 0, 0, 0.08);
  animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.hbs-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--hbs-primary) 0%, #6366f1 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hbs-drawer-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.hbs-drawer-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.hbs-drawer-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  position: relative;
  z-index: 1;
}

.hbs-drawer-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.hbs-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #fff;
}

/* Custom scrollbar for drawer */
.hbs-drawer-body::-webkit-scrollbar {
  width: 6px;
}

.hbs-drawer-body::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.hbs-drawer-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.hbs-drawer-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Form Fields in Drawer */
.hbs-drawer-body .hbs-field {
  margin-bottom: 20px;
}

.hbs-drawer-body .hbs-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  color: #374151;
  letter-spacing: 0.01em;
}

.hbs-drawer-body .hbs-field label .hbs-required {
  color: #ef4444;
  margin-left: 2px;
}

.hbs-drawer-body .hbs-input,
.hbs-drawer-body .hbs-select,
.hbs-drawer-body .hbs-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #1e293b;
  background: #fff;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hbs-drawer-body .hbs-input:hover,
.hbs-drawer-body .hbs-select:hover,
.hbs-drawer-body .hbs-textarea:hover {
  border-color: #cbd5e1;
}

.hbs-drawer-body .hbs-input:focus,
.hbs-drawer-body .hbs-select:focus,
.hbs-drawer-body .hbs-textarea:focus {
  outline: none;
  border-color: var(--hbs-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hbs-drawer-body .hbs-input::placeholder,
.hbs-drawer-body .hbs-textarea::placeholder {
  color: #94a3b8;
}

.hbs-drawer-body .hbs-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Section Dividers */
.hbs-drawer-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  margin: 24px 0;
}

/* Section Headers in Drawer */
.hbs-drawer-body h4,
.hbs-drawer-body .hbs-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #f1f5f9;
}

/* Field Row (side by side) */
.hbs-field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Media Picker */
.hbs-media-picker {
  padding: 20px;
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  text-align: center;
  transition: all 0.15s ease;
}

.hbs-media-picker:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.hbs-media-picker img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Drawer Footer Actions */
.hbs-drawer-body .hbs-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  margin-top: 24px;
  border-top: 1px solid #f1f5f9;
}

.hbs-drawer-body .hbs-actions .hbs-btn-primary {
  flex: 1;
  padding: 14px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border: none;
  color: #ffffff !important;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

.hbs-drawer-body .hbs-actions .hbs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.hbs-drawer-body .hbs-actions .hbs-btn-primary:active {
  transform: translateY(0);
}

.hbs-drawer-body .hbs-actions .hbs-btn-secondary {
  padding: 14px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hbs-drawer-body .hbs-actions .hbs-btn-secondary:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

/* Delete button style */
.hbs-drawer-body .hbs-btn-danger {
  padding: 14px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hbs-drawer-body .hbs-btn-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* Slot Tier Rows */
.hbs-slot-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid #e2e8f0;
}

.hbs-slot-row .hbs-input {
  background: #fff;
}

.hbs-slot-row .hbs-remove-slot {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.15s ease;
}

.hbs-slot-row .hbs-remove-slot:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* Responsive Drawer */
@media (max-width: 640px) {
  .hbs-drawer-content {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    animation: slideInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 92vh;
    margin-top: auto;
  }

  @keyframes slideInUp {
    from {
      transform: translateY(100%);
      opacity: 0.8;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .hbs-drawer-header {
    border-radius: 16px 16px 0 0;
    padding: 16px 20px;
  }

  .hbs-drawer-body {
    padding: 20px;
  }

  .hbs-field-row {
    grid-template-columns: 1fr;
  }
}

/* Service Grid */
.hbs-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--hbs-space-lg);
}

.hbs-service-card {
  background: #fff;
  border-radius: var(--hbs-radius);
  box-shadow: var(--hbs-shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.hbs-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.hbs-service-thumb {
  height: 140px;
  background: #f3f4f6;
  overflow: hidden;
}

.hbs-service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hbs-service-thumb .hbs-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--hbs-muted);
  font-size: 0.875rem;
}

.hbs-service-info {
  padding: var(--hbs-space-md);
}

.hbs-service-info h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
}

.hbs-service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.875rem;
  color: var(--hbs-muted);
}

/* Toast Notifications */
.hbs-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  background: #10b981;
  color: #fff;
  border-radius: var(--hbs-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  animation: fadeInUp 0.3s ease;
}

.hbs-toast-error {
  background: #ef4444;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Switch toggle */
.hbs-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.hbs-switch input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 48px;
  height: 26px;
  background: #d1d5db;
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  border: none;
  outline: none;
  flex-shrink: 0;
}

.hbs-switch input[type="checkbox"]:checked {
  background: #10b981;
}

.hbs-switch input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hbs-switch input[type="checkbox"]:checked::before {
  transform: translateX(22px);
}

.hbs-switch span {
  color: #374151;
  font-size: 0.9375rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hbs-filter-bar {
    flex-direction: column;
  }

  .hbs-filter-group {
    width: 100%;
  }

  .hbs-select,
  .hbs-input {
    flex: 1;
    min-width: 100px;
  }

  .hbs-drawer-content {
    max-width: 100%;
  }

  .hbs-services-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FINANCE DASHBOARD VISUALIZATIONS
   ============================================ */

/* Dashboard Container */
.hbs-fin-dashboard {
  --chart-primary: #4f46e5;
  --chart-secondary: #10b981;
  --chart-accent: #f59e0b;
  --chart-danger: #ef4444;
  --chart-muted: #94a3b8;
  --chart-gradient-start: rgba(79, 70, 229, 0.3);
  --chart-gradient-end: rgba(79, 70, 229, 0.0);
}

/* Enhanced Header */
.hbs-fin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hbs-fin-header-left {
  flex: 1;
  min-width: 200px;
}

.hbs-fin-header-left .hbs-title {
  margin: 0 0 4px;
}

.hbs-subtitle-muted {
  color: var(--hbs-muted);
  font-size: 0.9375rem;
  margin: 0;
}

.hbs-fin-header-right {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Period Selector */
.hbs-fin-period-selector {
  display: flex;
  background: var(--hbs-card);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.hbs-period-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--hbs-muted);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hbs-period-btn:hover {
  color: var(--hbs-text);
}

.hbs-period-btn.active {
  background: var(--chart-primary);
  color: #fff;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

/* Enhanced KPI Grid */
.hbs-fin-kpi-enhanced .hbs-fin-stat-card {
  position: relative;
  overflow: hidden;
}

.hbs-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 6px;
}

.hbs-stat-delta.positive {
  color: var(--hbs-success);
  background: var(--hbs-success-bg);
}

.hbs-stat-delta.negative {
  color: var(--hbs-danger);
  background: var(--hbs-danger-bg);
}

.hbs-stat-delta.neutral {
  color: var(--hbs-muted);
  background: #f1f5f9;
}

/* Chart Row Grid */
.hbs-fin-chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.hbs-fin-chart-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Chart Card */
.hbs-fin-chart-card {
  background: var(--hbs-card);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.hbs-fin-chart-wide {
  grid-column: span 1;
}

.hbs-fin-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hbs-border);
}

.hbs-fin-chart-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hbs-text);
}

.hbs-fin-chart-body {
  padding: 20px;
  min-height: 200px;
  position: relative;
}

/* Breakdown Tabs */
.hbs-fin-breakdown-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
}

.hbs-breakdown-tab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--hbs-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hbs-breakdown-tab.active {
  background: #fff;
  color: var(--hbs-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Donut Center */
.hbs-fin-chart-donut {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hbs-fin-donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}

.hbs-fin-donut-center .total-label {
  display: block;
  font-size: 0.75rem;
  color: var(--hbs-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hbs-fin-donut-center .total-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hbs-text);
}

/* Payout Status */
.hbs-fin-payout-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hbs-fin-payout-ring {
  position: relative;
  width: 140px;
  height: 140px;
}

.hbs-payout-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hbs-payout-bg {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 10;
}

.hbs-payout-progress {
  fill: none;
  stroke: var(--chart-secondary);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1s ease-out;
}

.hbs-payout-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hbs-payout-percent {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--chart-secondary);
}

.hbs-payout-label {
  display: block;
  font-size: 0.75rem;
  color: var(--hbs-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hbs-fin-payout-stats {
  display: flex;
  gap: 32px;
}

.hbs-payout-stat {
  text-align: center;
}

.hbs-payout-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--hbs-muted);
  margin-bottom: 4px;
}

.hbs-payout-stat-value {
  font-size: 1.125rem;
  font-weight: 600;
}

.hbs-text-success {
  color: var(--hbs-success) !important;
}

.hbs-text-warning {
  color: var(--hbs-warning) !important;
}

/* Heatmap */
.hbs-fin-heatmap-container {
  overflow-x: auto;
}

.hbs-fin-heatmap {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
  min-width: 600px;
}

.hbs-heatmap-week {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
}

.hbs-heatmap-day {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ebedf0;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.hbs-heatmap-day:hover {
  transform: scale(1.3);
}

.hbs-heatmap-day.level-1 {
  background: #c6e48b;
}

.hbs-heatmap-day.level-2 {
  background: #7bc96f;
}

.hbs-heatmap-day.level-3 {
  background: #239a3b;
}

.hbs-heatmap-day.level-4 {
  background: #196127;
}

.hbs-heatmap-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  font-size: 0.6875rem;
  color: var(--hbs-muted);
}

/* Timeline */
.hbs-fin-timeline-list {
  max-height: 280px;
  overflow-y: auto;
}

.hbs-fin-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hbs-border);
}

.hbs-fin-timeline-item:last-child {
  border-bottom: none;
}

.hbs-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chart-secondary);
  margin-top: 4px;
  flex-shrink: 0;
}

.hbs-timeline-content {
  flex: 1;
  min-width: 0;
}

.hbs-timeline-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hbs-text);
  margin: 0 0 4px;
}

.hbs-timeline-meta {
  font-size: 0.75rem;
  color: var(--hbs-muted);
  margin: 0;
}

.hbs-timeline-amount {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--chart-secondary);
  flex-shrink: 0;
}

/* Muted text helper */
.hbs-muted {
  color: var(--hbs-muted);
}

/* Responsive */
@media (max-width: 1200px) {
  .hbs-fin-chart-row {
    grid-template-columns: 1fr;
  }

  .hbs-fin-chart-row-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .hbs-fin-header {
    flex-direction: column;
    align-items: stretch;
  }

  .hbs-fin-header-right {
    flex-direction: column;
    align-items: stretch;
  }

  .hbs-fin-period-selector {
    justify-content: center;
  }

  .hbs-fin-chart-row-3 {
    grid-template-columns: 1fr;
  }

  .hbs-fin-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hbs-fin-payout-ring {
    width: 120px;
    height: 120px;
  }

  .hbs-payout-percent {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hbs-fin-kpi-grid {
    grid-template-columns: 1fr;
  }

  .hbs-period-btn {
    padding: 6px 12px;
    font-size: 0.8125rem;
  }
}

/* ============================================
   LOGIN INTRO SCREEN
   ============================================ */

/* Make wrapper transparent for login intro */
.hbs-wrap-login-intro {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 20px !important;
}

/* Intro box - 90% transparent */
.hbs-login-intro {
  text-align: center;
  padding: 60px 40px !important;
  max-width: 500px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}

/* Float-in animation with 2 second delay */
.hbs-animate-float-in {
  opacity: 0;
  transform: translateY(40px);
  animation: floatInUp 0.8s ease-out forwards;
  animation-delay: 2s;
}

@keyframes floatInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hbs-login-intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hbs-login-intro-icon {
  color: #ffffff;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.hbs-login-intro-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  text-shadow:
    0 1px 0 #cccccc,
    0 2px 0 #b8b8b8,
    0 3px 0 #a0a0a0,
    0 4px 0 #909090,
    0 5px 10px rgba(0, 0, 0, 0.4);
}

.hbs-login-intro-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Extra Large Button */
.hbs-btn-xl {
  padding: 20px 48px !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  margin-top: 16px;
}

/* Glowing Button Effect */
.hbs-btn-glow {
  position: relative;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4), 0 0 30px rgba(79, 70, 229, 0.2);
  animation: glow-pulse 2s ease-in-out infinite;
  transition: all 0.3s ease !important;
}

.hbs-btn-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 25px rgba(79, 70, 229, 0.5), 0 0 40px rgba(79, 70, 229, 0.3);
}

@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4), 0 0 30px rgba(79, 70, 229, 0.2);
  }

  50% {
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.6), 0 0 40px rgba(79, 70, 229, 0.3);
  }
}

/* Back Button */
.hbs-login-back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: #f1f5f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hbs-muted, #6b7280);
  transition: all 0.2s ease;
}

.hbs-login-back:hover {
  background: #e2e8f0;
  color: var(--hbs-text, #1e1e1e);
}

.hbs-login-card {
  position: relative;
}

/* Responsive */
@media (max-width: 480px) {
  .hbs-login-intro {
    padding: 40px 24px !important;
  }

  .hbs-login-intro-title {
    font-size: 1.5rem;
  }

  .hbs-login-intro-subtitle {
    font-size: 1rem;
  }

  .hbs-btn-xl {
    padding: 16px 32px !important;
    font-size: 1.125rem !important;
  }

  .hbs-login-intro-icon svg {
    width: 60px;
    height: 60px;
  }
}

/* ============================================
   TERMS & CONDITIONS PAGE
   ============================================ */

.hbs-terms-container {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.8;
}

.hbs-terms-main-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--hbs-text);
  text-align: center;
  margin: 0 0 40px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--hbs-brand);
}

.hbs-terms-section {
  margin-bottom: 40px;
}

.hbs-terms-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--hbs-brand);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.hbs-terms-section p {
  margin: 0 0 16px;
  color: var(--hbs-text);
  text-align: justify;
}

.hbs-terms-list {
  margin: 16px 0;
  padding-left: 32px;
  color: var(--hbs-text);
}

.hbs-terms-list li {
  margin-bottom: 12px;
  padding-left: 8px;
}

.hbs-terms-list li strong {
  color: var(--hbs-brand);
  font-weight: 600;
}

.hbs-terms-footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 2px solid #e5e7eb;
  text-align: center;
}

.hbs-terms-footer .hbs-muted {
  font-size: 0.875rem;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .hbs-terms-main-title {
    font-size: 1.75rem;
  }

  .hbs-terms-title {
    font-size: 1.25rem;
  }

  .hbs-terms-section p {
    text-align: left;
  }
}/* ============================================================
   NOTIFICATION BELL SYSTEM
   ============================================================ */

/* Bell button */
#hbs-notification-bell {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 99999;
}

body.admin-bar #hbs-notification-bell {
  top: 42px;
}

.hbs-bell-btn {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.hbs-bell-btn:hover {
  background: #f9fafb;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hbs-bell-btn svg {
  color: #374151;
}

.hbs-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Dropdown */
.hbs-notification-dropdown {
  position: absolute;
  top: 54px;
  right: 0;
  width: 420px;
  max-width: calc(100vw - 40px);
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.hbs-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.hbs-notif-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.hbs-mark-all-read {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.hbs-mark-all-read:hover {
  background: #dbeafe;
}

/* Tabs */
.hbs-notif-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.hbs-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.hbs-tab:hover {
  color: #111827;
  background: #f3f4f6;
}

.hbs-tab.active {
  color: #2563eb;
  font-weight: 600;
  border-bottom-color: #2563eb;
  background: white;
}

/* Notification list */
.hbs-notif-list {
  max-height: 500px;
  overflow-y: auto;
}

.hbs-notif-list::-webkit-scrollbar {
  width: 6px;
}

.hbs-notif-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.hbs-notif-item {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.2s;
}

.hbs-notif-item:hover {
  background: #f9fafb;
}

.hbs-notif-item.unread {
  background: #eff6ff;
  font-weight: 500;
}

.hbs-notif-item.unread .hbs-notif-title {
  font-weight: 600;
}

.hbs-notif-item.critical {
  background: #fff3cd;
  border-left: 4px solid #dc2626;
  animation: fadeIn 0.3s;
}

.hbs-notif-item.critical:hover {
  background: #fff8e1;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hbs-notif-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hbs-notif-content {
  flex: 1;
  min-width: 0;
}

.hbs-notif-title {
  font-size: 14px;
  color: #111827;
  margin-bottom: 4px;
}

.hbs-notif-message {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hbs-notif-time {
  font-size: 12px;
  color: #9ca3af;
}

.hbs-notif-item.read {
  opacity: 0.7;
}

.hbs-notif-item.read:hover {
  opacity: 1;
}

.hbs-notif-empty,
.hbs-notif-loading,
.hbs-notif-error {
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

.hbs-notif-error {
  color: #dc2626;
}

/* Footer */
.hbs-not if-footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
  background: #f9fafb;
}

.hbs-view-all {
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.hbs-view-all:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #hbs-notification-bell {
    right: 10px;
  }
  
  .hbs-notification-dropdown {
    width: calc(100vw - 20px);
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .hbs-notif-tabs {
    font-size: 12px;
  }
  
  .hbs-tab {
    padding: 10px 8px;
  }
}

/* Make all drawer titles black */
.hbs-drawer-header h3 {
  color: #000 !important;
}

/* ============================================
   OTP VERIFICATION SECTION
   ============================================ */
.hbs-otp-section {
  margin: var(--hbs-space-xl) 0;
  padding: var(--hbs-space-lg);
  background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
  border: 2px dashed var(--hbs-brand);
  border-radius: var(--hbs-radius);
  animation: hbs-otp-slide-in 0.3s ease;
}

@keyframes hbs-otp-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hbs-otp-card {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.hbs-otp-icon {
  font-size: 3rem;
  margin-bottom: var(--hbs-space-md);
}

.hbs-otp-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hbs-text);
  margin: 0 0 var(--hbs-space-sm);
}

.hbs-otp-card .hbs-muted {
  margin-bottom: var(--hbs-space-lg);
}

.hbs-otp-input {
  text-align: center !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5em !important;
  font-family: var(--hbs-font-mono) !important;
  padding: 16px !important;
  max-width: 220px;
  margin: 0 auto var(--hbs-space-lg);
  border: 2px solid var(--hbs-border) !important;
  transition: border-color var(--hbs-transition), box-shadow var(--hbs-transition);
}

.hbs-otp-input:focus {
  border-color: var(--hbs-brand) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2) !important;
}

.hbs-otp-actions {
  display: flex;
  justify-content: center;
  margin-bottom: var(--hbs-space-lg);
}

.hbs-otp-resend {
  font-size: 0.875rem;
  color: var(--hbs-muted);
  margin: 0;
}

.hbs-link-btn {
  background: none;
  border: none;
  color: var(--hbs-brand);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.hbs-link-btn:hover {
  color: var(--hbs-brand-dark);
}