/* =================================
   Component Library CSS
   Organized styles for consistent UI
   ================================= */

/* =================================
   DOCUMENT ACTION SHEET
   ================================= */

/* Native dialog: a bottom sheet on phones, centered on larger screens. */
.document-action-sheet {
  width: min(100%, 36rem);
  max-width: 100%;
  max-height: 90dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  background: white;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2);
  overflow-y: auto;
}

.document-action-sheet::backdrop {
  background: rgb(17 24 39 / 0.5);
}

@media (min-width: 640px) {
  .document-action-sheet {
    margin: auto;
    border-radius: 0.75rem;
  }
}

/* =================================
   TYPOGRAPHY
   ================================= */

/* Headings */
.heading-primary {
  font-size: 2.25rem; /* 36px (was 30px) */
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.heading-secondary {
  font-size: 1.875rem; /* 30px (was 24px) */
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.heading-tertiary {
  font-size: 1.5rem; /* 24px (was 20px) */
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

.heading-section {
  font-size: 1.25rem; /* 20px (was 18px) */
  font-weight: 600;
  color: #374151;
  line-height: 1.5;
}

.heading-subsection {
  font-size: 1rem; /* 16px (was 14px) */
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body Text */
.text-body {
  font-size: 1rem; /* 16px (was 14px) */
  color: #374151;
  line-height: 1.5;
}

.text-body-large {
  font-size: 1.125rem; /* 18px (was 16px) */
  color: #374151;
  line-height: 1.5;
}

.text-body-small {
  font-size: 0.875rem; /* 14px (was 12px) */
  color: #6b7280;
  line-height: 1.5;
}

.text-muted {
  color: #6b7280;
}

.text-emphasis {
  font-weight: 600;
  color: #111827;
}

/* Display Text */
.text-display-large {
  font-size: 3.75rem; /* 60px (was 48px) */
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.text-display-medium {
  font-size: 3rem; /* 48px (was 36px) */
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.text-display-small {
  font-size: 2.25rem; /* 36px (was 30px) */
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

/* Numeric Values */
.text-metric-large {
  font-size: 3.75rem; /* 60px (was 50px) */
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.text-metric-medium {
  font-size: 2.5rem; /* 40px (was 32px) */
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.text-metric-small {
  font-size: 1.875rem; /* 30px (was 24px) */
  font-weight: 600;
  color: #111827;
  line-height: 1;
}

.text-metric-label {
  font-size: 1.25rem; /* 20px (was 18px) */
  color: #6b7280;
  font-weight: 400;
}

/* Links */
.link-primary {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.15s;
}

.link-primary:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.link-secondary {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s;
}

.link-secondary:hover {
  color: #374151;
}

.link-danger {
  color: #dc2626;
  text-decoration: none;
  transition: color 0.15s;
}

.link-danger:hover {
  color: #991b1b;
  text-decoration: underline;
}

.link-nav {
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.link-nav:hover {
  color: #111827;
}

.link-table {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}

.link-table:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Text Colors */
.text-primary {
  color: #111827;
}

.text-secondary {
  color: #374151;
}

.text-tertiary {
  color: #6b7280;
}

.text-success {
  color: #059669;
}

.text-warning {
  color: #d97706;
}

.text-danger {
  color: #dc2626;
}

.text-info {
  color: #2563eb;
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Text Transform */
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* Font Weight */
.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Line Height */
.leading-tight {
  line-height: 1.25;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.75;
}

/* Letter Spacing */
.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-normal {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

/* Whitespace */
.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

/* =================================
   CARDS & CONTAINERS
   ================================= */

/* Basic card container */
.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.card-bordered {
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  overflow: hidden;
  width: 100%;
}

.card-header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.card-body {
  padding: 1rem;
}

.card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Statistics card */
.stat-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  padding: 1rem;
}

.stat-label {
  font-size: 0.875rem; /* 14px (was 12px) */
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.stat-sublabel {
  font-size: 0.875rem; /* 14px (was 12px) */
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.875rem; /* 30px (was 24px) */
  font-weight: bold;
}

.stat-value-large {
  font-size: 1.25rem; /* 20px (was 18px) */
  font-weight: bold;
}

.stat-secondary {
  font-size: 1rem; /* 16px (was 14px) */
  font-weight: normal;
  color: #6b7280;
}

/* Grid container for stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}

.stats-grid-divided {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #e5e7eb;
}

.stats-grid-divided > * {
  border-right: 1px solid #e5e7eb;
}

/* =================================
   TABLES
   ================================= */

/* Table container */
.table-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  /* A wide table scrolls inside its own container, never the page. */
  overflow-x: auto;
  max-width: 100%;
}

.table-wrapper {
  overflow-x: auto;
}

/* Base table */
.table {
  width: 100%;
}

/* Table header */
.table-header {
  text-align: left;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
}

.table-header-row {
  text-align: left;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

.table-header-cell {
  padding: 0.75rem 1rem;
}

/* Table body */
.table-body {
  border-top: 1px solid #e5e7eb;
}

.table-body > tr {
  border-bottom: 1px solid #e5e7eb;
}

.table-row {
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.table-row td {
  border-bottom: none;
}

.table-row:hover {
  background-color: #f9fafb;
}

.table-row:last-child {
  border-bottom: 1px solid #e5e7eb;
}

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

.table-cell {
  padding: 0.75rem 1rem;
  font-size: 1rem; /* 16px (was 14px) */
}

.table-cell-link {
  padding: 0.75rem 1rem;
  font-size: 1rem; /* 16px (was 14px) */
  font-weight: 500;
  color: #2563eb;
}

.table-cell-center {
  padding: 0.75rem 1rem;
  font-size: 1rem; /* 16px (was 14px) */
  text-align: center;
}

/* Table pagination */
.table-pagination {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination-info {
  font-size: 1rem; /* 16px (was 14px) */
  color: #4b5563;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =================================
   FORM ELEMENTS
   ================================= */

/* Form inputs - standard form controls */
.form-input {
  background-color: #f9fafb;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
  display: block;
  width: 100%;
  padding: 0.625rem;
}

.form-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  outline: none;
}

.form-select {
  background-color: #f9fafb;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
  display: block;
  width: 100%;
  padding: 0.625rem;
}

.form-select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  outline: none;
}

.form-textarea {
  background-color: #f9fafb;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
  display: block;
  width: 100%;
  padding: 0.625rem;
}

.form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  outline: none;
}

/* Compact size variants — mirror btn-sm. Useful inside dense rows like
   vendor-quote line-item editors. */
.form-input-sm,
.form-select-sm,
.form-textarea-sm {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
}

/* Text inputs */
.input-text {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
}

.input-number {
  width: 3.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  text-align: center;
}

.input-search {
  padding: 0.5rem 0.75rem;
  outline: none;
  font-size: 1rem; /* 16px (was 14px) */
  width: 16rem;
}

/* Select dropdowns */
.select-dropdown {
  margin-left: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
}

.input-select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-select:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 0 0 1px #3b82f6;
}

.input-select:hover:not(:focus) {
  border-color: #9ca3af;
}

.input-select:disabled {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

/* Dropdown - Standard dropdown styling */
.dropdown {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  appearance: none;
  transition: all 0.15s ease-in-out;
}

.dropdown:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #3b82f6;
}

.dropdown:hover:not(:focus) {
  border-color: #9ca3af;
}

/* Textarea */
.input-textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  min-height: 5rem;
  resize: vertical;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 0 0 1px #3b82f6;
}

/* Checkbox */
.input-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background-color: white;
  transition: all 0.15s ease-in-out;
}

.input-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.input-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Form labels and hints */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.form-hint {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* Form Actions / Submit Button Area */
.submit-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  border-top: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}

/* Checkboxes */
.checkbox {
  border-radius: 0.25rem;
  border-color: #d1d5db;
  width: 1.125rem;
  height: 1.125rem;
}

/* Search container */
.search-container {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

.search-icon {
  height: 1.125rem;
  width: 1.125rem;
  margin-left: 0.5rem;
  color: #9ca3af;
}

/* =================================
   BUTTONS
   ================================= */

/* Primary buttons */
.btn-primary {
  padding: 0.625rem 1.25rem;
  background-color: #14b8a6;
  color: white;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: background-color 0.15s;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0f766e;
}

.btn-blue {
  padding: 0.625rem 1.25rem;
  background-color: #2563eb;
  color: white;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: background-color 0.15s;
  cursor: pointer;
}

.btn-blue:hover {
  background-color: #1d4ed8;
}

/* Secondary buttons */
.btn-secondary {
  padding: 0.5rem 1rem;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: background-color 0.15s;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #f9fafb;
}

/* Outline buttons */
.btn-outline {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #d1d5db;
  color: #374151;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: all 0.15s;
  cursor: pointer;
}

.btn-outline:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

/* Danger buttons */
.btn-danger {
  padding: 0.625rem 1.25rem;
  background-color: #dc2626;
  color: white;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: background-color 0.15s;
  cursor: pointer;
}

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

/* Success buttons */
.btn-success {
  padding: 0.625rem 1.25rem;
  background-color: #10b981;
  color: white;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: background-color 0.15s;
  cursor: pointer;
}

.btn-success:hover {
  background-color: #059669;
}

/* Warning buttons */
.btn-warning {
  padding: 0.625rem 1.25rem;
  background-color: #f59e0b;
  color: white;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: background-color 0.15s;
  cursor: pointer;
}

.btn-warning:hover {
  background-color: #d97706;
}

/* Info buttons */
.btn-info {
  padding: 0.625rem 1.25rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  transition: background-color 0.15s;
  cursor: pointer;
}

.btn-info:hover {
  background-color: #2563eb;
}

/* Icon buttons */
.btn-icon {
  padding: 0.375rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s;
}

.btn-icon:hover {
  background-color: #f3f4f6;
}

.btn-icon-small {
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.15s;
}

.btn-icon-small:hover {
  background-color: #f3f4f6;
}

.btn-icon-gray {
  padding: 0.5rem;
  color: #6b7280;
  transition: color 0.15s;
}

.btn-icon-gray:hover {
  color: #374151;
}

.btn-icon-settings {
  color: #9ca3af;
  transition: color 0.15s;
}

.btn-icon-settings:hover {
  color: #4b5563;
}

/* Link buttons */
.btn-link {
  color: #2563eb;
  font-size: 1rem; /* 16px (was 14px) */
  font-weight: 500;
  transition: color 0.15s;
  cursor: pointer;
}

.btn-link:hover {
  color: #1d4ed8;
}

/* Button with icon */
.btn-with-icon {
  padding: 0.5rem 1rem;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem; /* 16px (was 14px) */
  display: flex;
  align-items: center;
  transition: background-color 0.15s;
  cursor: pointer;
}

.btn-with-icon:hover {
  background-color: #f9fafb;
}

/* Button sizes */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem; /* 14px (was 12px) */
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem; /* 18px (was 16px) */
}

/* Button disabled state */
.btn-disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button icon alignment */
.btn-icon-left svg {
  margin-right: 0.5rem;
}

.btn-icon-right svg {
  margin-left: 0.5rem;
}

/* =================================
   BADGES & LABELS
   ================================= */

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
}

.badge-blue {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  background-color: #dbeafe;
  color: #1e40af;
}

.badge-green {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  background-color: #dcfce7;
  color: #166534;
}

.badge-red {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  background-color: #fee2e2;
  color: #991b1b;
}

.badge-yellow {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  background-color: #fef3c7;
  color: #92400e;
}

.badge-orange {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  background-color: #fed7aa;
  color: #9a3412;
}

.badge-purple {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  background-color: #f3e8ff;
  color: #6b21a8;
}

.badge-gray {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 500;
  background-color: #f3f4f6;
  color: #374151;
}

/* Time period badge */
.badge-time-period {
  font-size: 1rem; /* 16px (was 14px) */
  color: #6b7280;
  background-color: #f3f4f6;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
}

/* =================================
   LOCATION INDICATORS
   ================================= */

.location-indicator {
  display: inline-flex;
  align-items: center;
}

.location-dot {
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.location-dot-blue {
  height: 0.625rem;
  width: 0.625rem;
  background-color: #3b82f6;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.location-dot-yellow {
  height: 0.625rem;
  width: 0.625rem;
  background-color: #eab308;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.location-dot-gray {
  height: 0.625rem;
  width: 0.625rem;
  background-color: #9ca3af;
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* =================================
   CHARTS & VISUALIZATIONS
   ================================= */

/* Chart containers */
.chart-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  padding: 1.5rem;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-title {
  font-weight: 600;
  color: #374151;
}

/* Progress bars */
.progress-bar-container {
  display: flex;
  align-items: center;
}

.progress-bar-label {
  width: 6rem;
  font-size: 1rem; /* 16px (was 14px) */
  color: #4b5563;
}

.progress-bar-wrapper {
  flex: 1;
  margin: 0 0.75rem;
}

.progress-bar-bg {
  background-color: #e5e7eb;
  border-radius: 9999px;
  height: 1.75rem;
}

.progress-bar-fill-orange {
  background-color: #fb923c;
  height: 1.75rem;
  border-radius: 9999px;
}

.progress-bar-fill-teal {
  background-color: #14b8a6;
  height: 1.75rem;
  border-radius: 9999px;
}

/* Chart axis labels */
.chart-axis-labels {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem; /* 14px (was 12px) */
  color: #6b7280;
}

.chart-axis-title {
  text-align: center;
  font-size: 0.875rem; /* 14px (was 12px) */
  color: #6b7280;
  margin-top: 0.5rem;
}

/* =================================
   LAYOUT COMPONENTS
   ================================= */

/* Page wrapper */
.page-wrapper {
  min-height: 100vh;
  background-color: white;
}

/* Content area */
.content-area {
  padding: 1.5rem;
}

.content-area-gray {
  padding: 1.5rem;
  background-color: #f9fafb;
}

.content-area-white {
  padding: 1.5rem;
  background-color: white;
}

.content-area-full {
  padding: 1rem;
  width: 100%;
}

.full-width-content {
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* Flex layouts */
.flex-container {
  display: flex;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
}

/* =================================
   NAVIGATION & SIDEBARS
   ================================= */

.sidebar {
  width: 16rem;
  background-color: white;
  border-right: 1px solid #e5e7eb;
  min-height: 100vh;
}

.sidebar-content {
  padding: 1rem;
}

.sidebar-title {
  font-weight: 600;
  font-size: 1.25rem; /* 20px (was 18px) */
  margin-bottom: 1rem;
}

.sidebar-section {
  margin-bottom: 1.5rem;
}

.sidebar-section-title {
  font-size: 0.875rem; /* 14px (was 12px) */
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  font-size: 1rem; /* 16px (was 14px) */
  color: #374151;
  border-radius: 0.375rem;
  transition: background-color 0.15s;
}

.sidebar-link:hover {
  background-color: #f9fafb;
}

.sidebar-link-active {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  font-size: 1rem; /* 16px (was 14px) */
  background-color: #dbeafe;
  color: #1d4ed8;
  border-radius: 0.375rem;
}

.sidebar-link-nested {
  padding-left: 2.25rem;
  font-size: 0.9rem;
}

.sidebar-link-nested .sidebar-icon {
  width: 1rem;
  height: 1rem;
}

/* Sub header */
.sub-header {
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
}

.sub-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sub-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* =================================
   ICONS
   ================================= */

.icon-sm {
  height: 1.125rem;
  width: 1.125rem;
}

.icon-md {
  height: 1.5rem;
  width: 1.5rem;
}

.icon-lg {
  height: 1.875rem;
  width: 1.875rem;
}

.icon-with-spacing {
  height: 1.125rem;
  width: 1.125rem;
  margin-right: 0.5rem;
}

.icon-chevron {
  height: 1rem;
  width: 1rem;
  margin-right: 0.25rem;
}

.icon-dropdown {
  display: inline;
  height: 1rem;
  width: 1rem;
  margin-left: 0.25rem;
}

/* =================================
   UTILITY CLASSES
   ================================= */

.text-link {
  color: #2563eb;
}

.divider-x {
  border-left: 1px solid #e5e7eb;
}

.divider-x > * {
  border-right: 1px solid #e5e7eb;
}

.divider-y {
  border-top: 1px solid #e5e7eb;
}

.divider-y > * {
  border-bottom: 1px solid #e5e7eb;
}

.space-sm {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.space-md {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.space-x-sm {
  display: flex;
  gap: 0.625rem;
}

.space-x-md {
  display: flex;
  gap: 1rem;
}

.space-x-lg {
  display: flex;
  gap: 1.25rem;
}

/* =================================
   ALERTS
   ================================= */

.alert-info {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 1rem;
}

.alert-success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  padding: 1rem;
}

.alert-warning {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.5rem;
  padding: 1rem;
}

.alert-danger {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 1rem;
}

/* =================================
   MAP STYLES
   ================================= */

.map-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  overflow: hidden;
}

.map-view {
  height: 500px;
}

/* =================================
   EMPTY STATES
   ================================= */

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  border: 1px dashed #d1d5db;
}

.empty-state-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  color: #9ca3af;
  margin-bottom: 1rem;
}

.empty-state-title {
  font-size: 1.25rem; /* 20px (was 18px) */
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.empty-state-text,
.empty-state-description {
  font-size: 1rem; /* 16px (was 14px) */
  color: #6b7280;
  margin-bottom: 1.5rem;
}

.empty-state .btn-primary,
.empty-state .btn-secondary {
  margin-top: 1rem;
}/* E-Signature Modal Styles */
.esignature-modal {
  z-index: 9999 !important;
}

.esignature-modal .signature-pad {
  display: block;
  width: 100%;
  background-color: white;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Ensure modal content is scrollable on mobile */
@media (max-width: 640px) {
  .esignature-modal > div {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    top: 0 !important;
  }
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   Booking calendar chips
   --------------------------------------------------------------------------
   Defined as real CSS rather than interpolated Tailwind classes
   (bg-#{color}-100 etc). Tailwind only emits classes it finds as literal text
   at build time, so the interpolated form was never generated and the chips
   rendered unstyled. components.css is served directly by Propshaft and is
   never purged, so these always ship.

   Colours mirror AssetBooking#status_color.
   ========================================================================== */
.booking-chip {
  display: block;
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.booking-chip-orange { background-color: #fed7aa; color: #9a3412; }
.booking-chip-orange:hover { background-color: #fdba74; }

.booking-chip-blue { background-color: #dbeafe; color: #1e40af; }
.booking-chip-blue:hover { background-color: #bfdbfe; }

.booking-chip-yellow { background-color: #fef3c7; color: #92400e; }
.booking-chip-yellow:hover { background-color: #fde68a; }

.booking-chip-green { background-color: #dcfce7; color: #166534; }
.booking-chip-green:hover { background-color: #bbf7d0; }

.booking-chip-gray { background-color: #f3f4f6; color: #374151; }
.booking-chip-gray:hover { background-color: #e5e7eb; }