/*
 * EPC Portal - Essential Styles from Mockups
 */

/* CSS Variables - Design Tokens */
:root {
  /* Colors */
  --color-primary: #ea7a57;
  --color-primary-hover: #d66b47;
  --color-secondary: #27AE60;
  --color-secondary-hover: #229954;
  --color-danger: #E74C3C;
  --color-warning: #F39C12;
  --color-success: #27AE60;
  --color-coral: #ea7a57;
  --color-navy: #34587a;
  
  /* Text hierarchy defined in _variables.scss - semantic system with browser defaults */
  --color-background: #f8f9fa;
  --color-white: #ffffff;
  --color-border: #e9ecef;
  
  /* Typography Scale */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Spacing Scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 30px;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* Base typography and layout */
body {
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  /* Using browser default text color for better accessibility and dark mode support */
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--spacing-md);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .container {
    max-width: 900px;
    padding: var(--spacing-xl);
  }
}

/* Header styles */
.top-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Admin Header - Brand Dark Blue */
body.admin .top-header {
  background: #2c3e50;
  border-bottom: 1px solid #34495e;
}

body.admin .top-header .logo-section {
  color: white;
}

body.admin .top-header .logo-section:hover {
  color: #e5e7eb;
}

/* Force all admin header text to be white */
body.admin .top-header,
body.admin .top-header *,
body.admin .top-header .logo-section,
body.admin .top-header .logo-section span {
  color: white;
}

body.admin .top-header .logo-section span {
  color: white;
  font-weight: 600;
}

body.admin .top-header .logout-btn,
body.admin .top-header .portal-switch-btn {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Force icons in admin header buttons to be white */
body.admin .top-header .logout-btn i,
body.admin .top-header .portal-switch-btn i,
body.admin .top-header .logout-btn i::before,
body.admin .top-header .portal-switch-btn i::before,
body.admin .top-header .logout-btn .fas,
body.admin .top-header .portal-switch-btn .fas {
  color: white !important;
}

body.admin .top-header .logout-btn:hover,
body.admin .top-header .portal-switch-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: white !important;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  text-decoration: none;
}

.logo-section:hover {
  opacity: 0.8;
}

.logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Header action buttons container */
.header-actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.logout-btn,
.portal-switch-btn {
  background: none;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.logout-btn:hover,
.portal-switch-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Icon spacing in buttons */
.logout-btn i,
.portal-switch-btn i {
  font-size: 12px;
}

/* Hamburger Menu for Mobile */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger-menu span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-navy);
  margin: 5px 0;
  transition: all 0.3s ease;
}

body.admin .hamburger-menu span {
  background: white;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 200px;
  z-index: 1000;
  margin-top: 8px;
}

.mobile-menu.active {
  display: block;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--color-navy);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-menu-item:hover {
  background: #f3f4f6;
  color: var(--color-navy);
}

/* Hide/show elements on mobile */
@media (max-width: 767px) {
  .logout-btn {
    display: none;
  }
  
  .hamburger-menu {
    display: block;
  }
  
  .top-header {
    position: relative;
  }
}

/* Dashboard header */
.header {
  margin-bottom: var(--spacing-3xl);
}

.welcome-text {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: calc(var(--spacing-3xl) * 1.5);
}

.header-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* Status sections with cards */
.status-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.status-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0;
  transition: border-bottom 0.2s ease, margin-bottom 0.2s ease;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.status-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.status-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy);
}

.status-count {
  background: #e9ecef;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.status-count.red {
  background: #E74C3C;
  color: white;
}

.status-count.yellow {
  background: #F39C12;
  color: white;
}

.status-count.green {
  background: #27AE60;
  color: white;
}

.status-count.blue {
  background: #3b82f6;
  color: white;
}

.status-count.gray {
  background: #6b7280;
  color: white;
}

.collapse-icon {
  font-size: 14px;
  color: var(--color-navy);
  transition: transform 0.2s ease;
}

.status-content {
  padding: 0;
  overflow: visible;
  position: relative;
}

/* Client row styles */
.client-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
}

.client-row:last-child {
  border-bottom: none;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.client-info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.client-info-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.date-status {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-status.red {
  color: #E74C3C;
}

.date-status.grey {
  color: #6c757d;
}

.date-status.green {
  color: #27AE60;
}

.client-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.service-type {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

.contract-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  text-align: center;
}

.contract-value.overdue {
  color: var(--color-danger);
}

.contract-value.upcoming {
  color: var(--color-warning);
}

.contract-value.pending {
  color: var(--color-warning);
}

/* Action buttons */
.action-buttons-row {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: flex-start;
  padding-top: 2px;
  padding-left: 0;
}


.button-group {
  display: flex;
  gap: var(--spacing-xs);
}

/* Small Button Style - Used for dashboard action buttons */
.btn-small,
a.btn-small,
button.btn-small {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}


/* Button color styles work with btn-small for sizing */
.btn-small.edit-btn,
.edit-btn.btn-small {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: var(--color-text-primary);
  border: 2px solid #d1d5db;
}

.btn-small.edit-btn:hover,
.edit-btn.btn-small:hover {
  background: #e5e7eb;
  border-color: var(--color-text-secondary);
}

.btn-small.view-btn,
.view-btn.btn-small {
  background: white;
  border-color: #d1d5db;
  color: var(--color-text-primary);
  border: 2px solid #d1d5db;
}

.btn-small.view-btn:hover,
.view-btn.btn-small:hover {
  background: #f8fafc;
  border-color: var(--color-text-secondary);
}

.btn-small.copy-btn,
.copy-btn.btn-small {
  background: white;
  border-color: #d1d5db;
  color: var(--color-text-primary);
  border: 2px solid #d1d5db;
}

.btn-small.copy-btn:hover,
.copy-btn.btn-small:hover {
  background: #f8fafc;
  border-color: var(--color-text-secondary);
}

.btn-small.remind-btn,
.remind-btn.btn-small {
  background: var(--color-coral);
  color: white;
  border-color: var(--color-coral);
  border: 2px solid var(--color-coral);
}

.btn-small.remind-btn:hover,
.remind-btn.btn-small:hover {
  background: #c0392b;
  border-color: #c0392b;
}

.btn-small.delete-btn,
.delete-btn.btn-small {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
  border: 2px solid #dc2626;
}

.btn-small.delete-btn:hover,
.delete-btn.btn-small:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Primary Button - Coral/Red for Create Service */
.btn-primary,
.btn-create-service {
  background: #E74C3C;
  color: white;
  border: 2px solid #E74C3C;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  text-decoration: none;
}

/* Ensure all child elements of primary button are white */
.btn-primary *,
.btn-create-service * {
  color: white;
}

.btn-primary:hover,
.btn-create-service:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: white;
}

.pill-btn {
  border-radius: 25px;
}

/* Footer */
.footer {
  text-align: center;
  color: var(--color-navy);
  font-size: 14px;
  margin-top: var(--spacing-3xl);
  padding: var(--spacing-lg);
}

.footer a {
  color: var(--color-navy);
  text-decoration: none;
  font-size: 14px;
}

.footer a:hover {
  text-decoration: underline;
}

/* Collapsed State */
.collapsed .status-content {
  display: none;
}

.collapsed .status-header {
  border-bottom: none;
  margin-bottom: 0;
}

.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

/* Paid Section - Gray background */
.status-section.paid-section {
  background: #f8fafc;
}

.status-section.paid-section .status-header {
  background: #f8fafc;
}

.status-section.paid-section .client-row {
  background: transparent;
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: none;
}

.status-section.paid-section .client-row:last-child {
  border-bottom: none;
}

/* Desktop-specific layout matching original home.html */
@media (min-width: 768px) {
  .client-row {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
  }
  
  .card-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xl);
  }
  
  .date-status {
    min-width: 120px;
    font-size: var(--font-size-xs);
  }
  
  .client-info-line {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
  }
  
  .client-info-section {
    min-width: 200px;
    flex: 1;
  }
  
  .client-name {
    font-size: var(--font-size-md);
  }
  
  .service-type {
    font-size: var(--font-size-sm);
  }
  
  .contract-value {
    min-width: 100px;
    text-align: right;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
  }
  
  .action-buttons-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    padding: 0;
    margin-left: var(--spacing-lg);
  }
  
  .button-group {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
  }
  
  /* Buttons use btn-small for consistent sizing */
}

/* ==========================================
   Form Styles (Service Creation, etc.)
   ========================================== */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-2xl);
}

/* Back Button (replaces breadcrumb) */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: white;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.back-button:hover {
  background: #d66b47;
  border-color: #d66b47;
  color: white;
}

.back-button i {
  font-size: 12px;
}

/* Page Titles */
.page-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0;
}

.page-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Ensure all form pages have consistent alignment */
.container > .breadcrumb,
.container > .page-header,
.container > h1,
.container > .form-card,
.container > .form-submit-section {
  width: 100%;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: var(--color-background);
  border-color: var(--color-text-secondary);
}

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.form-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xl) 0;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: white;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.form-input:read-only {
  background: #f8fafc;
  color: var(--color-text-secondary);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  height: 80px;
  max-width: 100%;
  overflow-x: hidden;
}

/* Input with prefix/suffix styles */
.input-with-prefix,
.input-with-suffix {
  position: relative;
  display: block;
  width: 100%;
}

.input-prefix,
.input-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: 500;
  z-index: 2;
  pointer-events: none;
}

.input-prefix {
  left: 16px;
}

.input-suffix {
  right: 16px;
}

.input-with-prefix .form-input {
  padding-left: 36px;
}

.input-with-suffix .form-input {
  padding-right: 36px;
}

/* Client Search Specific */
.client-search-container {
  position: relative;
}

.client-search-input-row {
  display: flex;
  gap: var(--spacing-sm);
}

.client-search-input {
  flex: 1;
}

.add-client-btn-compact {
  padding: 0 var(--spacing-lg);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 45px;
}

.add-client-btn-compact::after {
  content: "+";
  font-size: 20px;
}

.add-client-btn-compact:hover {
  background: var(--color-primary-hover);
}

.client-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.client-search-results.show {
  display: block;
}

.client-result-item {
  padding: var(--spacing-md);
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--color-border);
}

.client-result-item:last-child {
  border-bottom: none;
}

.client-result-item:hover {
  background: var(--color-background);
}

.client-result-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.client-result-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Selected Client Display */
.client-info-display {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  display: none;
}

.client-info-display.show {
  display: block;
}

.selected-client-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

.client-detail {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.client-detail i {
  width: 16px;
  color: var(--color-text-muted);
}

.change-client-btn {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.change-client-btn:hover {
  background: var(--color-background);
  color: var(--color-text-primary);
}

/* Form Row for Side-by-Side Fields */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

/* Form Submit Button */
.form-submit-section {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-md);
}

/* Mobile form adjustments */
@media (max-width: 768px) {
  .form-card {
    padding: var(--spacing-lg);
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .form-submit-section {
    flex-direction: column;
  }
  
  .form-submit-section .btn {
    width: 100%;
  }
}

/* ==========================================
   Service Details Modal Styles
   ========================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  width: 100%;
  height: 100%;
}

.modal-content {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  width: 95%;
  background: var(--color-white);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.service-edit-content {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 0;
  min-height: 0;
}

.modal-close-btn {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--color-text-secondary);
  cursor: pointer;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.modal-close-mobile {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: white;
}

/* Modal Left Side */
.modal-left {
  flex: 1 1 50%;
  padding: var(--spacing-2xl);
  background: #f3f4f6;
  border-right: 1px solid var(--color-border);
  min-width: 0;
}

.modal-left .service-date {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-md);
}

.modal-left .client-name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--spacing-sm);
}

.modal-left .service-type {
  font-size: var(--font-size-lg);
  color: var(--color-navy);
  margin-bottom: var(--spacing-xl);
}


.modal-left .client-contact {
  margin-bottom: var(--spacing-xl);
}

/* Fix alignment for client name and service type containers (desktop and mobile) */
.modal-left .client-info-side,
.modal-left .client-header-line,
.modal-left .service-header,
.modal-left .header-content {
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Desktop alignment fix for client name and service type */
.modal-left .client-name-input {
  margin-left: -20px;
  padding-left: 20px;
}

.modal-left .service-type-display {
  margin-left: -20px;
  padding-left: 20px;
}


.modal-left .contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
  font-size: var(--font-size-base);
}

.modal-left .contact-item i {
  width: 16px;
  color: var(--color-navy);
}

/* Address field specific alignment - align icon with top of textarea */
.modal-left .contact-item:has(.address-input) {
  align-items: flex-start;
}

.modal-left .contact-item:has(.address-input) i {
  margin-top: var(--spacing-md); /* Align with textarea padding/border */
}

.notes-divider {
  height: 1px;
  background: #d1d5db;
  margin: var(--spacing-xl) 0;
}

.modal-left .section-header,
.modal-right .section-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-md);
}

.modal-left .notes-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 100px;
  background: white;
  border: 1px solid var(--color-navy);
  border-radius: 8px;
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-navy);
  resize: vertical;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.modal-left .notes-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* Modal Right Side */
.modal-right {
  flex: 1 1 50%;
  padding: var(--spacing-2xl);
  background: var(--color-white);
  min-width: 0;
}

/* Modal textarea/input constraints */
.modal-content .form-textarea,
.modal-content .form-input {
  max-width: 100%;
  width: 100%;
}

.calculation-section {
  background: transparent;
  padding: 0;
  margin-bottom: var(--spacing-xl);
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: none;
}

.cost-label {
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-normal);
}

.chef-name-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
  margin-top: 4px;
}

.cost-item-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.currency-symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  z-index: 1;
}

.currency-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 200px;
}

.currency-input {
  width: 100%;
  padding: 8px 12px 8px 28px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: var(--font-size-base);
  text-align: right;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.cost-input {
  width: 120px;
  padding: 8px 12px 8px 28px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: var(--font-size-base);
  text-align: right;
  transition: all 0.2s ease;
}

.cost-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.cost-value {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Payout Row */
.payout-row {
  display: flex;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg);
  border-radius: 8px;
  margin: var(--spacing-xl) 0;
  border: 1px solid #e5e7eb;
}

.payout-column {
  flex: 1;
  text-align: center;
}

.payout-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-sm);
}

.payout-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
}

.payout-divider {
  width: 1px;
  background: #e5e7eb;
}

/* Special Cost Items */
.tax-item .cost-value,
.deposit-item .cost-value {
  color: var(--color-text-secondary);
}

.total-due-item {
  border-top: 2px solid #e5e7eb;
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.total-due-item .cost-label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.total-due-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}

/* Action Buttons in Modal */
.modal-content .action-buttons-row.desktop-only {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: flex-start;
  margin-top: var(--spacing-sm);  /* 8px top margin */
  margin-bottom: 0;               /* No bottom margin */
  /* Align with cost items */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.modal-content .button-group {
  display: flex;
  gap: var(--spacing-xs);
}

/* Reduce spacing in modal right column on desktop to contain action buttons */
@media (min-width: 768px) {
  .modal-content .modal-right {
    padding-bottom: var(--spacing-sm); /* 8px instead of 24px */
  }
  
  .modal-content .cost-item {
    padding: var(--spacing-sm) 0; /* 8px instead of 12px top/bottom */
  }
  
  .modal-content .total-due-item {
    margin-top: var(--spacing-sm); /* 8px instead of 16px */
    padding-top: var(--spacing-lg); /* 16px instead of 20px */
  }
}

.modal-content .btn-small {
  /* Ensure modal buttons use the same styling as dashboard buttons */
}

/* General button styles for forms */
.btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-secondary {
  background: white;
  color: var(--color-text-primary);
  border: 2px solid #e5e7eb;
}

.btn-secondary:hover {
  background: #f8f9fa;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
  border: 1px solid var(--color-danger);
}

.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* Subtle delete icon button */
.delete-icon-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: 8px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.delete-icon-btn:hover {
  opacity: 1;
  color: var(--color-danger);
  transform: scale(1.1);
}

/* Button styles moved to components/_buttons.scss for consistency */

/* Amount Due Button - standalone coral button for unpaid invoices */
.amount-due-btn {
  background: #E74C3C;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background 0.2s ease;
}

.amount-due-btn:hover {
  background: #c0392b;
  color: white;
  text-decoration: none;
}

/* Button icons */
.btn i {
  margin-right: 8px;
  font-size: 12px;
}

/* Admin Dashboard Header */
.admin-header {
  margin-bottom: var(--spacing-3xl);
  width: 100%;
}

.admin-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 calc(var(--spacing-3xl) * 1.5) 0;
  text-align: left;
}

.admin-actions {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Action button styles use base btn-primary from components/_buttons.scss */

/* Mobile Sticky Footer */
.mobile-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  padding: var(--spacing-lg) var(--spacing-xl);
  padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  border-top: 1px solid #e5e7eb;
  z-index: 100;
  display: none !important; /* Hidden by default, shown only on mobile */
}

.total-due-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.total-due-mobile .total-due-label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.total-due-mobile .total-due-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}

/* Hide desktop elements on mobile */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
}

/* Mobile Modal Adjustments */
@media (max-width: 767px) {
  /* Full screen modal on mobile */
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
  
  .modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
  }
  
  .modal-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-width: 100%;
    border-radius: 0;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
    box-sizing: border-box;
    /* Add bottom padding for sticky footer */
    padding-bottom: 140px;
  }
  
  /* Remove the two-column layout on mobile */
  .service-edit-content {
    flex-direction: column !important;
    display: flex !important;
  }
  
  .modal-left,
  .modal-right {
    position: relative;
    width: 100%;
    border-right: none;
    overflow: visible;
    display: block;
    flex: none;
  }
  
  .modal-left {
    background: #f8f9fa;
    padding: var(--spacing-lg);
    padding-top: 60px;
  }
  
  .modal-right {
    padding: 0;
    padding-bottom: 180px;
    background: white;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  
  .mobile-sticky-footer {
    display: block !important;
    max-width: 100vw;
    box-sizing: border-box;
    padding: var(--spacing-lg) var(--spacing-md);
    overflow-x: hidden;
  }
  
  /* Hide desktop amount due row on mobile */
  .modal-right .total-row:not(.mobile-amount-due),
  .modal-content .total-due-item,
  .modal-content .desktop-only {
    display: none !important;
  }
  
  /* Smaller mobile buttons - only affect modal buttons */
  .modal-content .btn-small,
  .mobile-sticky-footer .btn-small {
    padding: 8px 12px;
    font-size: 11px;
  }
  
  .modal-content .action-buttons-row .btn-small {
    padding: 8px 12px;
    font-size: 11px;
  }
  
  /* Fix field overflow on mobile */
  .modal-content .form-input,
  .modal-content .form-textarea,
  .modal-content input[type="text"],
  .modal-content input[type="number"],
  .modal-content textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 8px 12px;
  }
  
  .modal-content .modal-right .cost-input {
    width: clamp(80px, 22vw, 150px);
    max-width: 150px;
    box-sizing: border-box;
    text-align: right;
    padding: 8px 6px;
    flex: 0 0 auto;
    font-size: 16px;
  }
  
  .modal-content .external-currency {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    margin-right: 2px;
    flex: 0 0 auto;
  }
  
  .modal-content .input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 110px;
    flex-shrink: 0;
  }
  
  /* Ensure cost items in modal-right don't overflow */
  .modal-content .modal-right .cost-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    justify-content: space-between;
  }
  
  /* Right-align input wrappers to match dollar amounts below */
  .modal-content .modal-right .input-wrapper {
    margin-right: 0;
  }
  
  .modal-content .cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
  }
  
  .modal-content .cost-item .cost-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  
  .modal-content .cost-label {
    flex: 1;
    min-width: 0;
  }
  
  .modal-content .cost-value {
    width: clamp(55px, 18vw, 80px);
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    box-sizing: border-box;
  }
  
  /* Consistent flexible sizing for tax and deposit items */
  .modal-content .tax-item .cost-value,
  .modal-content .deposit-item .cost-value {
    width: clamp(55px, 18vw, 80px);
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    box-sizing: border-box;
  }
  
  .input-with-prefix,
  .input-with-suffix {
    width: 100%;
  }

  /* ===== MOBILE TYPOGRAPHY & SPACING IMPROVEMENTS ===== */
  
  /* Mobile-optimized input fields with proper specificity */
  .modal-content .modal-left .client-name-input,
  .modal-content .modal-left .service-type-display,
  .modal-content .modal-right .cost-input,
  .modal-content .modal-left .notes-textarea {
    font-size: 18px;
    padding: 8px 12px;
    min-height: 44px;
    line-height: 1.3;
  }
  
  /* Contact fields with 15% larger font size */
  .modal-content .modal-left .contact-input {
    font-size: 21px;
    padding: 8px 12px;
    min-height: 44px;
    line-height: 1.3;
  }
  
  /* Chef name should match service type input font size on mobile */
  .modal-content .chef-name-display {
    font-size: 18px;
    line-height: 1.3;
  }
  
  /* Fix alignment for client name and service type containers - comprehensive reset */
  .modal-content .modal-left .service-header,
  .modal-content .modal-left .header-content,
  .modal-content .modal-left .client-info-side,
  .modal-content .modal-left .client-header-line {
    padding: 0;
    margin: 0;
    width: 100%;
  }
  
  /* Force client name input to align with contact items text (accounting for icon space) */
  .modal-content .modal-left .client-name-input {
    margin-left: -20px;
    padding-left: 20px;
  }
  
  /* Reset service type alignment - no negative margin */
  .modal-content .modal-left .service-type-display {
    margin-left: 0;
    padding-left: 0;
  }
  
  /* Fix email truncation - ensure contact inputs don't overflow */
  .modal-content .modal-left .contact-input {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Larger font for client name as primary identifier */
  .modal-content .modal-left .client-name-input {
    font-size: 29px;
    font-weight: 600;
    line-height: 1.2;
  }
  
  /* Service type input optimization */
  .modal-content .modal-left .service-type-display {
    padding: 6px 8px;
    min-height: 40px;
    color: #374151;
  }
  
  /* Section headers with proper mobile sizing */
  .modal-content .section-header {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 16px;
  }
  
  /* Optimized container padding - match sticky footer padding */
  .modal-backdrop .modal-wrapper .modal-content .modal-left {
    padding: var(--spacing-lg) var(--spacing-xl);
    padding-top: 50px;
    box-sizing: border-box;
  }
  
  .modal-backdrop .modal-wrapper .modal-content .modal-right {
    padding: var(--spacing-lg) var(--spacing-xl);
    padding-bottom: 180px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Service date header optimization */
  .modal-content .modal-left .service-date {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
  }
  
  /* Contact items layout and spacing - 40% reduced vertical padding */
  .modal-content .modal-left .contact-item {
    margin-bottom: 4px;
    align-items: center;
    display: flex;
  }
  
  .modal-content .modal-left .contact-item i {
    width: 20px;
    font-size: 16px;
    margin-top: 0;
    flex-shrink: 0;
    text-align: center;
  }
  
  /* Payment status section optimization */
  .modal-content .modal-left .payment-status-section-left {
    margin-top: 12px;
    padding-top: 12px;
  }
  
  .modal-content .modal-left .payment-status-badge {
    font-size: 14px;
    padding: 6px 10px;
    font-weight: 600;
  }
  
  /* Invoice section improvements */
  .modal-content .modal-right .cost-label {
    font-size: 21px;
    font-weight: 500;
  }
  
  .modal-content .modal-right .cost-value {
    font-size: 18px;
    font-weight: 500;
  }
  
  .modal-content .modal-right .cost-item {
    padding: 6px 0;
    min-height: 44px;
  }
  
  /* Payout section styling */
  .modal-content .modal-right .payout-label {
    font-size: 15px;
    font-weight: 600;
  }
  
  .modal-content .modal-right .payout-value {
    font-size: 20px;
    font-weight: 700;
  }
  
  /* Tightened spacing throughout - 40% reduced vertical padding */
  .modal-content .modal-left .header-content {
    margin-bottom: 5px;
  }
  
  .modal-content .modal-left .client-contact {
    margin-bottom: 5px;
  }
  
  .modal-content .modal-right .calculation-section {
    padding-top: 0;
  }
  
  .modal-content .modal-right .payout-row {
    margin: 8px 0;
    padding: 8px 0;
  }
}

/* ===== COLOR IMPROVEMENTS ===== */

/* Default borders for form inputs */
.form-input,
.form-textarea, 
.cost-input,
.notes-textarea {
  border-color: #d1d5db;
  border-width: 1px;
}

.form-input:focus,
.form-textarea:focus,
.cost-input:focus,
.notes-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* Contact icon colors - higher specificity, no !important needed */
.modal-content .contact-item .fa-map-marker-alt {
  color: var(--color-coral);
}

.modal-content .contact-item .fa-phone {
  color: var(--color-navy);
}

.modal-content .contact-item .fa-envelope {
  color: #FFD700; /* light yellow */
}

/* Form and section labels should be navy - higher specificity */
.modal-content .section-header,
.modal-content .cost-label,
.form-group .form-label,
.form-card .form-label,
form label {
  color: var(--color-navy);
}

/* Currency symbol stays default color with white background */

/* Base text colors using natural cascade */
/* Default text color is set on body and inherited naturally */

/* Status count badges keep white text */
.status-count.red,
.status-count.red * {
  color: white;
}

/* Admin header keeps white text */
body.admin .top-header,
body.admin .top-header * {
  color: white;
}

/* Contact icons - colorful and accessible */
.contact-item .fa-map-marker-alt,
.client-detail .fa-map-marker-alt {
  color: var(--color-coral);
}

.contact-item .fa-phone,
.client-detail .fa-phone {
  color: var(--color-navy);
}

.contact-item .fa-envelope,
.client-detail .fa-envelope {
  color: #FFD700;
}

/* Semantic color utility classes */
.text-navy { color: var(--color-navy); }
.text-white { color: white; }
.text-coral { color: var(--color-coral); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

/* Clean button text colors - no !important needed */
.btn-small.remind-btn,
.remind-btn.btn-small,
.btn-small.remind-btn *,
.remind-btn.btn-small * {
  color: white;
}

.btn.btn-primary,
.btn-primary,
.btn.btn-primary *,
.btn-primary * {
  color: white;
}

/* Secondary buttons use default text color (browser default) */
.btn.btn-secondary,
.btn-secondary {
  color: inherit;
}/* Authentication Forms - Semantic CSS */
/* Unified styles for all Devise authentication pages */

/* Container for authentication forms */
.authentication-page {
  background: var(--color-background, #f8f9fa);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.authentication-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  padding: 30px;
  width: 100%;
  max-width: 400px;
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo and branding section */
.authentication-branding {
  text-align: center;
  margin-bottom: 30px;
}

.authentication-branding__logo {
  width: 120px;
  height: auto;
  margin-bottom: 16px;
}

.authentication-branding__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 4px 0;
}

.authentication-branding__subtitle {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

/* Form styling */
.authentication-form {
  margin-bottom: 20px;
  width: 100%;
}

.authentication-form__group {
  margin-bottom: 20px;
  width: 100%;
}

.authentication-form__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #212529;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.authentication-form__input {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: white;
  box-sizing: border-box;
}

.authentication-form__input:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.authentication-form__input--error {
  border-color: #E74C3C;
}

/* Checkbox styling */
.authentication-form__checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.authentication-form__checkbox {
  margin-right: 8px;
}

.authentication-form__checkbox-label {
  font-size: 14px;
  color: #212529;
  cursor: pointer;
}

/* Buttons */
.authentication-form__submit {
  width: 100%;
  padding: 12px 20px;
  background: var(--color-navy);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.authentication-form__submit:hover {
  background: #1a252f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.authentication-form__submit:active {
  transform: translateY(0);
}

/* Secondary button (outline style) */
.authentication-secondary-button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.authentication-secondary-button:hover {
  background: var(--color-navy);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Links section */
.authentication-links {
  text-align: center;
  margin-top: 12px;
}

.authentication-links__item {
  color: var(--color-navy);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s ease;
  display: inline-block;
  margin: 4px 0;
}

.authentication-links__item:hover {
  color: #1a252f;
  text-decoration: underline;
}

/* Help section */
.authentication-help {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
  margin-top: 20px;
}

.authentication-help__faq {
  margin-bottom: 8px;
}

.authentication-help__faq-link {
  color: var(--color-navy);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s ease;
}

.authentication-help__faq-link:hover {
  color: #1a252f;
  text-decoration: underline;
}

.authentication-help__contact {
  font-size: 12px;
  color: #6c757d;
  margin: 0;
}

/* Footer */
.authentication-footer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #6c757d;
  font-size: 12px;
  text-align: center;
}

/* Error messages */
.authentication-errors {
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
}

.authentication-errors__title {
  color: #E74C3C;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.authentication-errors__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.authentication-errors__item {
  color: #721c24;
  font-size: 13px;
  margin-bottom: 4px;
}

.authentication-errors__item:last-child {
  margin-bottom: 0;
}

/* Alert messages */
.authentication-alert {
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
}

.authentication-alert--notice {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.authentication-alert--alert {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .authentication-page {
    padding: 16px;
  }
  
  .authentication-container {
    padding: 20px;
  }
  
  .authentication-branding__logo {
    width: 100px;
  }
  
  .authentication-branding__title {
    font-size: 20px;
  }
  
  .authentication-form__submit,
  .authentication-secondary-button {
    font-size: 14px;
  }
}

/* Dark-mode-safe chef header styles */
.chef-header-safe {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.chef-title-row-safe {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.chef-title-safe {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy);
}

.chef-count-safe {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.chef-count-safe.green {
  background: #27AE60;
}

.chef-count-safe.red {
  background: #E74C3C;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .chef-header-safe {
    background: #1f2937;
    border-bottom-color: #374151;
  }
  
  .chef-title-safe {
    color: #e5e7eb;
  }
  
  /* Pills keep their solid colors - good contrast in both modes */
  .chef-count-safe.green {
    background: #10b981; /* Slightly brighter green for dark mode */
  }
  
  .chef-count-safe.red {
    background: #ef4444; /* Slightly brighter red for dark mode */
  }
}

/* Mobile responsive improvements for chef buttons */
@media (max-width: 767px) {
  .chef-actions .action-buttons-row {
    align-self: stretch; /* Full width on mobile */
  }
  
  .chef-actions .button-group {
    flex-wrap: wrap; /* Allow buttons to wrap to next line */
    justify-content: flex-end; /* Keep right alignment */
  }
  
  .chef-actions .btn-small {
    flex-shrink: 0; /* Prevent button text truncation */
    min-width: fit-content; /* Ensure buttons are wide enough for text */
  }
}

/* Dropdown Menu Styles */
.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-toggle-dots {
  background: transparent;
  border: none;
  color: #6c757d;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dropdown-toggle-dots:hover {
  background: #f8f9fa;
  border-radius: 4px;
}

.three-dots {
  font-weight: bold;
  letter-spacing: 2px;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  z-index: 1000;
  overflow: hidden;
}

/* Dropdown that opens upward when near bottom */
.dropdown-menu.dropdown-up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

/* Desktop-specific dropdown fix - override mobile styles */
@media (min-width: 768px) {
  .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .dropdown-menu.dropdown-up {
    top: auto !important;
    bottom: 100% !important;
  }
}

.dropdown-item {
  display: block;
  padding: 8px 12px;
  color: #212529;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background: #f8f9fa;
}

.dropdown-item i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.dropdown-item-danger {
  color: #dc3545;
}

.dropdown-item-danger:hover {
  background: #fff5f5;
  color: #a91e2c;
}

/* ==========================================
   Enhanced Client Dropdown Styles
   ========================================== */
.enhanced-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-trigger {
  position: relative;
  cursor: pointer;
}

.dropdown-search {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: white;
  transition: all 0.2s ease;
  box-sizing: border-box;
  cursor: text;
}

.dropdown-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.dropdown-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-size: 12px;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.enhanced-dropdown.open .dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.enhanced-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}

.enhanced-dropdown .dropdown-option {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #f3f4f6;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.enhanced-dropdown .dropdown-option:last-child {
  border-bottom: none;
}

.enhanced-dropdown .dropdown-option:hover,
.enhanced-dropdown .dropdown-option.highlighted {
  background: var(--color-background);
}

.enhanced-dropdown .dropdown-option.create-new {
  background: #f8fafc;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  border-bottom: 2px solid #e5e7eb;
}

.enhanced-dropdown .dropdown-option.create-new:hover {
  background: #e5e7eb;
  color: var(--color-primary-hover);
}

.dropdown-options-list {
  max-height: 200px;
  overflow-y: auto;
}

.enhanced-dropdown .dropdown-option.hidden {
  display: none;
}

/* Client Dropdown - Standard dropdown */
.client-dropdown {
  /* Use standard form styling */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.client-dropdown::-webkit-scrollbar {
  width: 8px;
}

.client-dropdown::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 4px;
}

.client-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.client-dropdown::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* Custom Client Dropdown Styling */
.custom-client-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-trigger {
  position: relative;
  cursor: pointer;
}

.dropdown-search {
  width: 100%;
  padding-right: 40px;
  cursor: text;
}

.dropdown-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.custom-client-dropdown.open .dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-option {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #374151;
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option:hover {
  background: #f9fafb;
}

.dropdown-option.create-new {
  background: #f8fafc;
  color: #2563eb;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
}

.dropdown-option.create-new:hover {
  background: #e5e7eb;
}

.dropdown-options-list {
  max-height: 200px; /* Limit to ~5 options */
  overflow-y: auto;
}

.dropdown-option.hidden {
  display: none;
}

/* Force dropdown to open downward */
select.client-dropdown {
  /* Force standard browser dropdown behavior */
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

select.client-dropdown option {
  /* These don't directly control positioning but ensure proper rendering */
  color: var(--color-text-primary);
  background: white;
}

/* Container positioning to encourage downward dropdown */
.form-group:has(.client-dropdown) {
  /* Provide reasonable space for dropdown to open downward */
  margin-bottom: 40px;
  /* Ensure container allows dropdown to render below */
  position: relative;
}

/* Form helper text styling - increased specificity */
.form-group .form-helper-text,
.form-helper-text {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-bottom: 8px !important;
  line-height: 1.4;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Additional styling to ensure proper dropdown behavior */
.form-group {
  position: relative;
  z-index: auto;
}

/* Ensure form container doesn't interfere with dropdown positioning */
.form-card {
  overflow: visible;
}

/* Period Selector - Consistent across all dashboards */
.payroll-period-selector {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.period-info h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

#period-selector,
#admin-period-selector,
#chef-period-selector {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

/* Admin Checkbox Styling */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  margin: 0;
}

.form-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.checkbox-label {
  margin: 0 !important;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  cursor: pointer;
}

/* Form Error Styling */
.form-errors {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
  color: #721c24;
}

.form-errors h3 {
  margin: 0 0 8px 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
}

.form-errors li {
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
}

/* ==========================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   For Admin & Chef Portals - Added after line 2618
   ========================================== */

/* ==========================================
   HEADER & NAVIGATION FIXES
   ========================================== */

/* Admin Header Mobile */
@media (max-width: 767px) {
  .admin-header {
    margin-bottom: var(--spacing-lg);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .admin-title {
    font-size: 24px;
    margin-bottom: var(--spacing-lg);
    text-align: center;
    word-wrap: break-word;
  }
  
  .admin-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }
  
  .admin-actions .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 16px; /* Better touch target */
    min-height: 48px; /* Apple HIG touch target */
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Override inline styles that might cause overflow */
  .admin-actions .btn span {
    margin-left: 0;
    letter-spacing: 0.3px;
  }
  
  /* Ensure admin actions container doesn't exceed screen width */
  .admin-actions {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Chef Header Mobile */
@media (max-width: 767px) {
  .header {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin-bottom: var(--spacing-lg);
  }
  
  .welcome-text {
    font-size: 24px;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .header-controls {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }
  
  .header-controls .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 16px;
    min-height: 48px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================
   STATUS SECTIONS & CARDS MOBILE FIXES
   ========================================== */

@media (max-width: 767px) {
  /* Status sections spacing - CRITICAL FIX FOR OVERFLOW */
  .status-section {
    margin-bottom: var(--spacing-md);
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* Status headers */
  .status-header {
    padding: var(--spacing-md) var(--spacing-lg);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .status-title {
    font-size: 16px;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .status-count {
    font-size: 14px;
    padding: 4px 8px;
  }
  
  /* Client rows/service cards - Optimized mobile layout */
  .client-row {
    padding: 12px 16px;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    position: relative;
  }
  
  .card-content {
    width: 100%;
    max-width: 100%;
    margin-bottom: 8px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* Date and status */
  .date-status {
    font-size: 12px;
    padding: 4px 8px;
    margin-bottom: var(--spacing-xs);
  }
  
  /* Client info layout */
  .client-info-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    width: 100%;
    max-width: 100%;
  }
  
  /* Special layout for horizontal amount display - ensure flex display */
  .client-info-line.has-amount-due {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  /* Ensure horizontal layout works in chef portal context with proper specificity */
  .chef-section .status-content .client-info-line.has-amount-due,
  .chef-card .status-content .client-info-line.has-amount-due {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .client-info-line.has-amount-due .client-info-section {
    flex: 1;
    max-width: calc(100% - 120px);
    min-width: 0;
  }
  
  .client-info-section {
    width: 100%;
    max-width: 100%;
  }
  
  /* Service type text wrapping control */
  .client-info-line.has-amount-due .service-type {
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }
  
  .client-name {
    font-size: 16px;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  
  .service-type {
    font-size: 14px;
    color: var(--color-text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  
  .contract-value {
    font-size: 18px;
    font-weight: 700;
    margin-top: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ==========================================
   BUTTON & ACTION MOBILE FIXES
   ========================================== */

@media (max-width: 767px) {
  /* Action button rows - Horizontal layout for service cards on mobile */
  .action-buttons-row {
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    box-sizing: border-box;
    overflow: visible;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    position: relative;
  }
  
  .button-group {
    flex-direction: row;
    gap: 8px;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  
  /* Override for mobile sticky footer - horizontal layout */
  .mobile-sticky-footer .action-buttons-row {
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }
  
  .mobile-sticky-footer .button-group {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    width: 100%;
  }
  
  /* Mobile sticky footer button sizing */
  .mobile-sticky-footer .btn-small {
    width: auto;
    min-height: 44px;
    box-sizing: border-box;
  }
  
  /* Icon-only buttons (SAVE and COPY) */
  .mobile-sticky-footer .action-buttons-row .btn-icon {
    width: 52px;
    height: 52px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
  }
  
  /* Text button (SEND INVOICE/REMIND) */
  .mobile-sticky-footer .action-buttons-row .btn-text {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 600;
    height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure coral styling for SEND INVOICE/REMIND button */
  .mobile-sticky-footer .action-buttons-row .btn-text.remind-btn {
    background: var(--color-coral);
    color: white;
    border-color: var(--color-coral);
  }

  .mobile-sticky-footer .action-buttons-row .btn-text.remind-btn:hover {
    background: #c0392b;
    border-color: #c0392b;
  }
  
  /* Increase amount due text sizes by 50% */
  .mobile-sticky-footer .total-due-mobile .total-due-label {
    font-size: 27px;
  }
  
  .mobile-sticky-footer .total-due-mobile .total-due-value {
    font-size: 36px;
  }
  
  /* Small buttons optimized for horizontal layout on mobile */
  .btn-small {
    width: auto;
    max-width: none;
    padding: 10px 16px;
    font-size: 13px;
    min-height: 40px;
    justify-content: center;
    border-radius: 6px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
  }
  
  /* Specific button types */
  .edit-btn {
    background: var(--color-primary);
    color: white;
    order: 1;
  }
  
  .view-btn {
    background: var(--color-secondary);
    color: white;
    order: 2;
  }
  
  .remind-btn, .pay-btn {
    background: var(--color-success);
    color: white;
    order: 3;
  }
  
  /* Amount due button specific styling */
  .amount-due-btn {
    background: var(--color-danger);
    color: white;
    font-weight: var(--font-weight-bold);
    padding: 10px 16px;
    min-height: 40px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    order: 3;
  }
  
  /* Mobile-specific Amount Due positioning */
  .mobile-amount-due-container {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    margin-left: 12px;
  }
  
  /* Ensure mobile-amount-due-container works in all contexts with proper specificity */
  .status-content .mobile-amount-due-container,
  .chef-section .status-content .mobile-amount-due-container,
  .chef-card .status-content .mobile-amount-due-container {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    margin-left: 12px;
  }
  
  .amount-due-btn.mobile-inline {
    background: #E74C3C;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    min-height: auto;
    cursor: pointer;
  }
  
  .amount-due-btn.mobile-inline:hover {
    background: #c0392b;
    color: white;
    text-decoration: none;
  }
  
  /* Contract value for mobile horizontal layout */
  .contract-value-mobile {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-success); /* Default green color */
  }
  
  /* Color variations for mobile contract values */
  .contract-value-mobile.overdue {
    color: var(--color-danger);
  }
  
  .contract-value-mobile.upcoming {
    color: var(--color-warning);
  }
  
  .contract-value-mobile.pending {
    color: var(--color-warning);
  }
  
  .contract-value-mobile.paid {
    color: var(--color-success);
  }
  
  .contract-value-mobile.outstanding {
    color: var(--color-danger);
  }
  
  /* Hide desktop-only elements on mobile */
  .contract-value.desktop-only {
    display: none;
  }
  
  /* Dropdown containers */
  .dropdown-container {
    width: auto;
    max-width: none;
    order: 4;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
  }
  
  .dropdown-toggle-dots {
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color-light-gray);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 16px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  
  .dropdown-menu {
    position: fixed;
    width: auto;
    min-width: 150px;
    max-width: min(200px, calc(100vw - 32px));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-sizing: border-box;
    background: white;
    z-index: 9999;
    overflow: visible;
    max-height: min(300px, 50vh);
    overflow-y: auto;
  }
  
  /* Dropdowns use fixed positioning with JavaScript control */
  /* No need for CSS positioning classes since JS handles it */
  
  .dropdown-item {
    padding: 12px var(--spacing-md);
    font-size: 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ==========================================
   TAB NAVIGATION MOBILE FIXES  
   ========================================== */

@media (max-width: 767px) {
  .tab-button {
    font-size: 14px !important;
    padding: var(--spacing-md) var(--spacing-sm) !important;
    min-height: 48px;
  }
  
  /* Tab content */
  .tab-content {
    border-radius: 0 0 8px 8px !important;
  }
}

/* ==========================================
   CHEF SECTION MOBILE FIXES
   ========================================== */

@media (max-width: 767px) {
  .chef-section {
    margin-bottom: var(--spacing-lg);
  }
  
  .chef-card {
    border-radius: 8px;
  }
  
  .chef-header {
    padding: var(--spacing-lg);
  }
  
  .chef-header h2 {
    font-size: 20px;
    margin-bottom: var(--spacing-md);
  }
  
  .chef-summary {
    font-size: 14px;
    line-height: 1.4;
  }
  
  /* Chef rows */
  .chef-row {
    padding: var(--spacing-lg) !important;
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .chef-info {
    width: 100%;
    text-align: center;
  }
  
  .chef-actions {
    width: 100%;
    align-items: center;
  }
}

/* ==========================================
   FORM & MODAL MOBILE IMPROVEMENTS
   ========================================== */

@media (max-width: 767px) {
  /* Improve modal close button */
  .modal-close {
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  
  /* Form improvements */
  .form-card {
    margin: var(--spacing-md);
    padding: var(--spacing-lg);
  }
  
  /* Input fields */
  input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px var(--spacing-md);
    min-height: 44px;
  }
  
  /* Labels */
  label {
    font-size: 14px;
    margin-bottom: var(--spacing-xs);
  }
}

/* ==========================================
   CONTAINER & LAYOUT MOBILE FIXES
   ========================================== */

@media (max-width: 767px) {
  /* Critical: Prevent horizontal overflow */
  .container {
    padding: var(--spacing-md);
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* Ensure body doesn't overflow */
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Remove excessive margins on mobile */
  .header {
    margin-bottom: var(--spacing-lg);
  }
  
  /* Ensure proper spacing */
  .simple-period-selector {
    margin-bottom: var(--spacing-md);
  }
}

/* ==========================================
   TEXT & TYPOGRAPHY MOBILE FIXES
   ========================================== */

@media (max-width: 767px) {
  /* UNIVERSAL OVERFLOW PREVENTION */
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    max-width: 100%;
  }
  
  /* Critical: Prevent any element from extending beyond viewport */
  div, span, p, h1, h2, h3, h4, h5, h6, button, a {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Improve readability */
  body {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Headings */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  
  /* Small text should still be readable */
  small {
    font-size: 14px;
  }
}

/* ==========================================
   UTILITY CLASSES FOR MOBILE
   ========================================== */

@media (max-width: 767px) {
  .mobile-hidden {
    display: none !important;
  }
  
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-stack {
    flex-direction: column !important;
  }
  
  .mobile-center {
    text-align: center !important;
  }
}

/* Show on mobile only - let elements use their natural display type */
@media (max-width: 767px) {
  /* Remove the display: block forcing - elements should use their own display type */
  /* .mobile-only elements are visible by default on mobile */
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

/* ==========================================
   MOBILE COLLAPSIBLE SECTION STYLES
   ========================================== */

@media (max-width: 767px) {
  /* Mobile Client Details Wrapper */
  .mobile-client-details-wrapper {
    margin: 3px 0;
    padding: 3px 0;
  }
  
  .mobile-client-details-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
  }
  
  .mobile-client-details-toggle .section-header {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
  }
  
  .mobile-client-details-toggle .toggle-icon {
    transition: transform 0.2s ease;
    color: var(--color-text-secondary);
  }
  
  .mobile-client-details-toggle .toggle-icon.rotated {
    transform: rotate(180deg);
  }
  
  /* Mobile Notes Wrapper */
  .mobile-notes-wrapper {
    margin: 3px 0;
    padding: 3px 0;
  }
  
  .mobile-notes-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
  }
  
  .mobile-notes-toggle .section-header {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
  }
  
  .mobile-notes-toggle .toggle-icon {
    transition: transform 0.2s ease;
    color: var(--color-text-secondary);
  }
  
  .mobile-notes-toggle .toggle-icon.rotated {
    transform: rotate(180deg);
  }
  
  /* Content sections */
  .mobile-client-details-content,
  .mobile-notes-content {
    padding-top: 8px;
  }
  
  /* Hide dividers on mobile to save space */
  .notes-divider {
    display: none;
  }
  
  /* Remove any borders from payment status section on mobile */
  .modal-content .modal-left .payment-status-section-left {
    border-top: none;
    border-bottom: none;
  }
}