/* Marketing / public tidy layout styles (moved from layouts/tidy.html.erb). */

:root {
  --logo-url: url("/assets/text-light-37595433.svg");
}

.dark {
  --logo-url: url("/assets/text-dark-dfc845aa.svg");
}

.logo {
  background-image: var(--logo-url);
}


.font-playfair {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
}


/* 1.1 Light Theme */
:root {
  --background: 240 5% 98%;
  --foreground: 240 10% 10%;
  --card: 0 0% 100%;
  --card-foreground: 220 10% 15%;
  --primary: 150 70% 35%;
  --primary-foreground: 0 0% 98%;
  --secondary: 210 20% 96.5%;
  --secondary-foreground: 220 10% 15%;
  --muted: 210 10% 97%;
  --muted-foreground: 215 15% 45%;
  --accent: 210 20% 92%;
  --accent-foreground: 220 10% 15%;
  --border: 210 10% 88%;
  --input: 210 10% 85%;
  --ring: 150 70% 35%;
  --radius: 0.5rem;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --toast-success: 142 71% 45%;
  --toast-error: 0 84% 60%;
  --toast-info: 217 91% 60%;
  /* Status Colors */
  --status-active: 142 71% 45%;
  --status-prospect: 217 91% 60%;
  --status-lead: 199 98% 48%;
  --status-suspended: 48 96% 56%;
  --status-lost: 25 84% 60%;
  --status-churned: 220 9% 55%;
  --status-vip: 275 76% 58%;
  --status-blacklist: 0 84% 60%;
  /* Job Status Colors */
  --status-job-new: 35 92% 55%;
  --status-job-upcoming: 217 91% 60%;
  --status-job-completed: 142 71% 45%;
  --status-job-cancelled: 215 20% 65%;
  /* Invoice Status Colors */
  --status-invoice-draft: 40 70% 85%;
  --status-invoice-sent: 210 60% 85%;
  --status-invoice-paid: 140 50% 80%;
  --status-invoice-overdue: 0 70% 85%;
  --status-invoice-cancelled: 210 15% 90%;
  /* Invoice Type Colors */
  --type-sale: 140 50% 80%;
  --type-reservation: 270 40% 85%;
  --type-refund: 25 60% 85%;
  --type-payroll: 200 40% 85%;
  --type-internal: 210 15% 90%;
  /* Payment Settings Status Colors */
  --status-enabled: 142 71% 45%;
  --status-disabled: 220 9% 55%;
  /* Mailing Status Colors (Less Saturated) */
  --mailing-status-active: 150 70% 35% / 0.08;
  --mailing-status-draft: 40 80% 50% / 0.08;
  --mailing-status-archived: 210 10% 88% / 0.3;
  --mailing-status-paused: 0 80% 50% / 0.08;
}

/* 1.2 Dark Theme */
html.dark {
  --background: 240 10% 4%;
  --foreground: 0 0% 98%;
  --card: 240 10% 7%;
  --card-foreground: 0 0% 98%;
  --primary: 150 70% 60%;
  --primary-foreground: 210 10% 18%;
  --secondary: 210 15% 20%;
  --secondary-foreground: 210 20% 90%;
  --muted: 240 5% 10%;
  --muted-foreground: 240 4% 60%;
  --accent: 210 15% 25%;
  --accent-foreground: 210 20% 90%;
  --border: 210 10% 25%;
  --input: 210 10% 30%;
  --ring: 150 70% 60%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --toast-success: 142 61% 65%;
  --toast-error: 0 72% 51%;
  --toast-info: 217 91% 70%;
  /* Status Colors (Dark) */
  --status-active: 142 61% 65%;
  --status-prospect: 217 91% 70%;
  --status-lead: 199 88% 68%;
  --status-suspended: 48 86% 66%;
  --status-lost: 25 74% 70%;
  --status-churned: 220 9% 75%;
  --status-vip: 275 66% 68%;
  --status-blacklist: 0 72% 51%;
  /* Job Status Colors (Dark) */
  --status-job-new: 35 92% 65%;
  --status-job-upcoming: 217 91% 70%;
  --status-job-completed: 142 61% 65%;
  --status-job-cancelled: 215 15% 55%;
  /* Invoice Status Colors (Dark) */
  --status-invoice-draft: 40 40% 30%;
  --status-invoice-sent: 210 30% 30%;
  --status-invoice-paid: 140 25% 35%;
  --status-invoice-overdue: 0 40% 30%;
  --status-invoice-cancelled: 210 10% 20%;
  /* Invoice Type Colors (Dark) */
  --type-sale: 140 25% 35%;
  --type-reservation: 270 20% 35%;
  --type-refund: 25 30% 30%;
  --type-payroll: 200 20% 30%;
  --type-internal: 210 10% 20%;
  /* Payment Settings Status Colors (Dark) */
  --status-enabled: 142 61% 65%;
  --status-disabled: 220 9% 75%;
  /* Mailing Status Colors (Dark, Less Saturated) */
  --mailing-status-active: 150 70% 60% / 0.25;
  --mailing-status-draft: 40 80% 60% / 0.25;
  --mailing-status-archived: 210 15% 25% / 0.5;
  --mailing-status-paused: 0 80% 60% / 0.25;
}

/* ==========================================================================
   2. Base & Utility Styles
   ========================================================================== */
/*
/* 2.1 Body and Typography */
body {
  font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: hsl(var(--foreground));
  transition: color 0.3s;
}

html.dark .js-theme-toggle .lucide-sun {
  display: none;
}

html.light .js-theme-toggle .lucide-moon {
  display: none;
}



/* Hide default calendar icon in date/time inputs */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}


/* 2.5 Layout */
.section {
  padding: 4rem 1rem;
}

.section-light {
  background-color: hsl(var(--background));
}

.section-dark {
  background-color: hsl(var(--secondary));
}

html.dark .section-dark {
  background-color: hsl(var(--muted));
}

/* Utility for truncating text to 2 lines */
.truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Utility for truncating single-line inline text */
.truncate-inline {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* 2.6 Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

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

.animate-slide-in-up {
  animation: slideInUp 0.8s ease-out forwards;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-600 {
  animation-delay: 0.6s;
}

/* ==========================================================================
   3. Landing Page Components
   ========================================================================== */

/* 3.1 Mobile Menu */
#mobile-menu {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translateX(100%);
  /* Start off-screen */
  opacity: 0;
  background-color: hsl(var(--background));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#mobile-menu.is-open {
  transform: translateX(0);
  opacity: 1;
}

.mobile-nav-link {
  transition: background-color 0.2s ease, color 0.2s ease;
  color: hsl(var(--foreground));
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

.mobile-nav-link:hover {
  background-color: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
}

a[href="#login"],
a[href="#signup"] {
  font-weight: 500;
}

/* 3.2 Feature Cards */
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  border-radius: calc(var(--radius) + 4px);
  background-color: hsl(var(--card));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  position: relative;
  /* For image positioning */
  min-height: 450px;
  /* Ensure consistent height for cards */
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.feature-card .icon-wrapper {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  padding: 0.75rem;
  border-radius: 50%;
  display: inline-flex;
  margin-bottom: 1rem;
}

/* 3.3 Testimonial Section */
.testimonial-card {
  background-color: hsl(var(--card));
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Active state for tab buttons */
.tab-button.active-tab {
  background-color: hsl(var(--secondary));
  /* Use secondary for active tab background */
  border-color: hsl(var(--primary));
  /* Highlight border with primary color */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Subtle shadow for active tab */
  transform: translateY(-2px);
  /* Slight lift for active tab */
}

/* Visibility and transitions for tab content */
.testimonial-tab-content {
  visibility: hidden;
  /* Hide content from screen readers and layout when not active */
  opacity: 0;
  transform: translateY(20px);
  /* Initial state for animation */
  pointer-events: none;
  /* Disable interaction when hidden */
}

.testimonial-tab-content.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 3.4 Pricing Cards */
.price-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  padding: 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.price-card.featured {
  border-color: hsl(var(--primary));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-8px);
}

.price-card.featured .btn-primary {
  background-color: hsl(var(--primary));
}

/* 3.5 FAQ Section */
.faq-item {
  border-bottom: 1px solid hsl(var(--border));
  padding: 1.25rem 0;
  cursor: pointer;
}

.faq-item:first-child {
  border-top: 1px solid hsl(var(--border));
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.faq-answer {
  color: hsl(var(--muted-foreground));
  margin-top: 0.75rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

.faq-item.open .faq-answer {
  max-height: 200px;
  /* Arbitrary max-height, adjust as needed */
  opacity: 1;
}

.faq-item .chevron-icon {
  transition: transform 0.3s ease;
}

.faq-item.open .chevron-icon {
  transform: rotate(180deg);
}

/* 3.6 Painpoints / KPI Section */
.painpoint-btn h3 {
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.painpoint-btn[data-tab="schedule"]:hover h3 {
  color: hsl(var(--destructive));
  /* Using destructive color for red */
  transform: scale(1.05);
}

.painpoint-btn[data-tab="clients"]:hover h3 {
  color: hsl(var(--status-prospect));
  /* Using status-prospect for blue */
  transform: scale(1.05);
}

.painpoint-btn[data-tab="invoices"]:hover h3 {
  color: hsl(var(--status-suspended));
  /* Using status-suspended for yellow/orange */
  transform: scale(1.05);
}

.painpoint-btn[data-tab="website"]:hover h3 {
  color: hsl(var(--status-vip));
  /* Using status-vip for purple */
  transform: scale(1.05);
}

.kpi-card {
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--card));
  border-width: 1px;
  border-style: solid;
  border-color: hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

.kpi-card .sparkline-bar {
  width: 1rem;
  border-radius: 0.125rem;
}

.kpi-card .sparkline-bar.positive {
  background-color: hsl(var(--primary));
}

.kpi-card .sparkline-bar.negative {
  background-color: hsl(var(--primary));
}

.kpi-card .kpi-icon {
  color: hsl(var(--status-active));
}

.kpi-card .trend-up-icon {
  color: hsl(var(--status-active));
  /* Green for positive trend */
}

.kpi-card .trend-down-icon {
  color: hsl(var(--status-active));
  /* Green for positive trend (e.g., lower average reply time is good) */
}


/* =
   4. Admin / Embedded Components
/* 4.1 General Embedded Panel Wrapper */
.embedded-panel {
  width: 100%;
  flex-grow: 1;
  /* Allow content to grow */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Prevent content from overflowing feature card */
  border-top: 1px solid hsl(var(--border));
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.embedded-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
  /* Small padding for elements inside */
}

.embedded-panel-content {
  flex-grow: 1;
  overflow-y: auto;
  /* Allow scrolling within the embedded panel */
  padding: 0 0.5rem;
}

.embedded-panel-footer {
  padding: 0.5rem;
  border-top: 1px solid hsl(var(--border));
  margin-top: auto;
  display: flex;
  justify-content: center;
}



/* 4.3 CRM Component */
.crm-client-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s;
}

.crm-client-list-item:hover {
  background-color: hsl(var(--accent));
}

.crm-client-list-item.is-selected {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  font-weight: 500;
}

.crm-client-list-item img {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  object-fit: cover;
}

.crm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  margin-left: auto;
}

/* 4.4 Schedule/Calendar Component */
.feature-calendar-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  min-height: 200px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.feature-calendar-header {
  display: grid;
  grid-template-columns: 60px 1fr;
  background-color: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
}

.feature-calendar-time-col {
  padding: 0.5rem;
  text-align: right;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  border-right: 1px solid hsl(var(--border));
  position: sticky;
  left: 0;
  background-color: hsl(var(--card));
  z-index: 5;
}

.feature-calendar-day-header {
  padding: 0.5rem;
  text-align: center;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.feature-calendar-cell {
  border-right: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  min-height: 40px;
  position: relative;
}

.feature-calendar-event {
  position: absolute;
  width: calc(100% - 4px);
  left: 2px;
  background-color: hsl(var(--primary) / 0.15);
  border-left: 3px solid hsl(var(--primary));
  color: hsl(var(--foreground));
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  z-index: 2;
  cursor: default;
}

.feature-calendar-event--new {
  border-color: hsl(var(--status-job-new));
  background-color: hsl(var(--status-job-new) / 0.1);
}

.feature-calendar-event--upcoming {
  border-color: hsl(var(--status-job-upcoming));
  background-color: hsl(var(--status-job-upcoming) / 0.1);
}

.feature-calendar-event--completed {
  border-color: hsl(var(--status-job-completed));
  background-color: hsl(var(--status-job-completed) / 0.1);
  opacity: 0.8;
}

.feature-calendar-event--cancelled {
  border-color: hsl(var(--status-job-cancelled));
  background-color: hsl(var(--status-job-cancelled) / 0.1);
  opacity: 0.6;
  text-decoration: line-through;
}

.feature-calendar-time-axis {
  display: grid;
  grid-template-rows: repeat(10, 40px);
}

.feature-calendar-time-label {
  font-size: 0.7rem;
  text-align: right;
  padding-right: 0.5rem;
  color: hsl(var(--muted-foreground));
  position: relative;
  top: -0.5em;
}

.feature-calendar-body {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-auto-rows: minmax(40px, auto);
  position: relative;
  overflow: auto;
}

/* 4.5 Staff Management Component */
/* --- Staff Table (in Feature Card) --- */
.feature-staff-table-wrapper {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.feature-staff-table {
  width: 100%;
  border-collapse: collapse;
}

.feature-staff-table th,
.feature-staff-table td {
  padding: 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}

.feature-staff-table th {
  text-align: left;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted));
  position: sticky;
  top: 0;
  z-index: 10;
}

.feature-staff-table tbody tr:last-child td {
  border-bottom: none;
}

.feature-staff-table tbody tr:hover {
  background-color: hsl(var(--accent));
}

.feature-staff-photo {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  object-fit: cover;
}

.feature-permission-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
}

.feature-permission-badge--admin {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.feature-permission-badge--manager {
  background-color: hsl(var(--status-lead) / 0.1);
  color: hsl(var(--status-lead));
}

.feature-permission-badge--cleaner {
  background-color: hsl(var(--status-active) / 0.1);
  color: hsl(var(--status-active));
}

.feature-table-row.is-selected {
  background-color: hsl(var(--primary) / 0.05);
}

.feature-staff-back-btn {
  height: 2rem !important;
  min-height: 2rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
}

.feature-staff-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.feature-staff-tab-btn {
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  padding: 0 0.65rem !important;
  border-radius: 0.55rem !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.feature-staff-tab-btn:not(.is-active) {
  width: 2.25rem;
  min-width: 2.25rem;
  padding: 0 !important;
}

.feature-staff-tab-btn:not(.is-active) i {
  margin-right: 0 !important;
}

.feature-staff-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.85rem;
  text-align: center;
}

.feature-staff-contact-row span {
  min-width: 0;
}

/* --- Staff Modals (Positioned inside parent card) --- */
.staff-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  border-radius: inherit;
  overflow: hidden;
}

.staff-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.staff-modal-card {
  background-color: hsl(var(--card));
  padding: 24px;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  max-width: 90%;
  width: 420px;
  max-height: 90%;
  overflow-y: auto;
}

.staff-modal-overlay.open .staff-modal-card {
  transform: translateY(0);
  opacity: 1;
}

.staff-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border));
}

.staff-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--card-foreground));
}

.staff-modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
}

.staff-modal-close-btn:hover {
  color: hsl(var(--foreground));
}

.staff-modal-body {
  margin-bottom: 16px;
}

.staff-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Staff Forms --- */
.staff-form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
}

.staff-form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* --- Staff Schedule View (in modal) --- */
.staff-schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.staff-schedule-table th,
.staff-schedule-table td {
  border: 1px solid hsl(var(--border));
  padding: 8px;
  text-align: center;
  font-size: 0.875rem;
}

.staff-schedule-table th {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-weight: 600;
}

.staff-schedule-table td {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.staff-schedule-table td.today {
  background-color: hsl(var(--primary) / 0.1);
}

.staff-schedule-table .event {
  font-size: 0.75rem;
  padding: 2px 4px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.staff-schedule-table .event.job-new {
  background-color: hsl(var(--status-job-new) / 0.2);
  color: hsl(var(--status-job-new));
}

.staff-schedule-table .event.job-upcoming {
  background-color: hsl(var(--status-job-upcoming) / 0.2);
  color: hsl(var(--status-job-upcoming));
}

.staff-schedule-table .event.job-completed {
  background-color: hsl(var(--status-job-completed) / 0.2);
  color: hsl(var(--status-job-completed));
}

.staff-schedule-table .event.day-off {
  background-color: hsl(var(--status-suspended) / 0.2);
  color: hsl(var(--status-suspended));
}

.staff-schedule-table .event.sick-leave {
  background-color: hsl(var(--destructive) / 0.2);
  color: hsl(var(--destructive));
}

/* --- Staff Payroll Chart --- */
.staff-payroll-chart-container {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid hsl(var(--border));
  padding-bottom: 5px;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}

.staff-payroll-chart-container:hover {
  background-color: hsl(var(--muted));
}

.staff-payroll-chart-container .bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.staff-payroll-chart-container .bar {
  width: 70%;
  background-color: hsl(var(--primary));
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

.staff-payroll-chart-container .bar-value {
  font-size: 0.65rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-align: center;
  position: absolute;
  white-space: nowrap;
  bottom: 100%;
  margin-bottom: 2px;
}

.staff-payroll-chart-container .bar-label {
  font-size: 0.65rem;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-payroll-chart-container .bar-label.vertical-text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: normal;
  max-width: 20px;
  margin-left: -5px;
  margin-top: 10px;
  height: 70px;
  overflow: visible;
  text-overflow: clip;
}

/* 4.6 Payment Settings Component */
.feature-payment-accordion-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.feature-payment-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background-color: hsl(var(--card));
  font-weight: 600;
}

.feature-payment-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  padding: 0 1rem;
}

.feature-payment-accordion-item.is-open .feature-payment-accordion-content {
  max-height: 200px;
  padding-bottom: 1rem;
}

.feature-payment-status-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  margin-left: 0.5rem;
}

.feature-payment-status-badge--enabled,
.feature-payment-status-badge--connected {
  background-color: hsl(var(--status-enabled) / 0.1);
  color: hsl(var(--status-enabled));
}

.feature-payment-status-badge--disabled,
.feature-payment-status-badge--disconnected {
  background-color: hsl(var(--status-disabled) / 0.1);
  color: hsl(var(--status-disabled));
}

.feature-payment-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.feature-payment-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.feature-payment-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsl(var(--input));
  transition: .4s;
  border-radius: 34px;
}

.feature-payment-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.feature-payment-switch input:checked+.feature-payment-slider {
  background-color: hsl(var(--primary));
}

.feature-payment-switch input:checked+.feature-payment-slider:before {
  transform: translateX(18px);
}

/* 4.7 Mailing Component */
.feature-mailing-template-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.feature-mailing-template-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  cursor: pointer;
  transition: background-color 0.2s;
}

.feature-mailing-template-item:last-child {
  border-bottom: none;
}

.feature-mailing-template-item:hover {
  background-color: hsl(var(--accent));
}

.feature-mailing-template-item .status-tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.feature-mailing-template-item .status-tag--active {
  background-color: hsl(var(--mailing-status-active));
  color: hsl(var(--primary));
}

.feature-mailing-template-item .status-tag--draft {
  background-color: hsl(var(--mailing-status-draft));
  color: hsl(40 80% 40%);
}

.feature-mailing-template-item .status-tag--paused {
  background-color: hsl(var(--mailing-status-paused));
  color: hsl(0 80% 40%);
}

.feature-mailing-template-item .status-tag--archived {
  background-color: hsl(var(--mailing-status-archived));
  color: hsl(215 15% 45%);
}

/* 4.8 Invoices Component */
/* --- Invoices Root and Modal --- */
.invoice-block-root {
  position: relative;
}

/* Invoices modal is positioned absolutely within its root container */
.invoice-modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.invoice-modal-overlay.hidden {
  display: none !important;
}

.invoice-modal-card {
  width: 90%;
  max-width: 540px;
  min-width: 220px;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.17), 0 1.5px 6px rgb(0 0 0 / 0.10);
  background: hsl(var(--card));
  border: 1.5px solid hsl(var(--border));
  margin: 0 auto;
}

/* --- Invoices List, Badges & Metadata --- */
.invoice-status-badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.invoice-status-Paid {
  background: hsl(var(--status-job-completed) / 0.13);
  color: hsl(var(--status-job-completed));
}

.invoice-status-Sent {
  background: hsl(var(--status-suspended) / 0.15);
  color: hsl(var(--status-suspended));
}

.invoice-status-Overdue {
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

.invoice-status-Draft {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.invoice-status-Cancelled {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.invoice-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin: 2px 0 0 0;
  width: 100%;
}

.invoice-meta-date {
  white-space: nowrap;
}

.invoice-meta-id {
  white-space: nowrap;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-filter-row {
  display: flex;
  width: 100%;
}

.invoice-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  width: 100%;
}

.invoice-filter-group--type {
  justify-content: flex-start;
}

.invoice-filter-group--status {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: flex-start;
  align-items: center;
}

.invoice-filter-chip {
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0 0.625rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  min-width: 0;
}

.invoice-filter-chip i {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}

/* --- Invoices Pagination --- */
.invoice-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 2px;
  gap: 1rem;
}

.invoice-pagination-btn {
  background: hsl(var(--card));
  color: hsl(var(--primary));
  border: 1.5px solid hsl(var(--border));
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: 1rem;
  transition: .12s;
  cursor: pointer;
  padding: 0;
}

.invoice-pagination-btn[disabled],
.invoice-pagination-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.invoice-pagination-info {
  font-size: .93rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

/* --- Responsive styles for Invoice Modal --- */
@media (max-width: 600px) {
  .invoice-modal-card {
    width: 98vw !important;
    max-width: 98vw !important;
    min-width: 0 !important;
    border-radius: 16px !important;
  }

  .feature-staff-tabs {
    justify-content: flex-start;
    gap: 0.375rem;
  }

  .feature-staff-tab-btn {
    height: 2.05rem !important;
    min-height: 2.05rem !important;
    font-size: 0.75rem !important;
    padding: 0 0.55rem !important;
  }

  .feature-staff-tab-btn:not(.is-active) {
    width: 2.05rem;
    min-width: 2.05rem;
  }

  .feature-staff-contact-row {
    justify-content: flex-start;
    text-align: left;
  }

  .invoice-filter-group--status {
    grid-template-columns: repeat(2, max-content);
  }

  .invoice-filter-chip {
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.72rem !important;
  }
}

@media (min-width: 1100px) {
  .invoice-filter-group--status {
    grid-template-columns: repeat(5, max-content);
  }
}

@media (min-width: 601px) {
  .invoice-modal-card {
    width: 90%;
    max-width: 540px;
    border-radius: 20px;
  }
}