/* =========================================================
  CARDS.CSS
  Shared card structure and tokenized card normalization.

  Goals:
  - Quiet resting state
  - Clear hover hierarchy
  - Strong active selection
  - Theme-aware focus color for presets/custom themes
========================================================= */

/* =========================================================
  1. SHARED CARD SHELL
========================================================= */
.workorder-list-item,
.unscheduled-wo-card,
.dispatch-wo-card,
.wo-badge,
.mobile-dispatch-card {
  background: var(--app-surface) !important;
  border: 1px solid color-mix(in srgb, var(--app-border), transparent 20%) !important;
  border-left: 5px solid var(--status-color, var(--app-secondary)) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--app-text) !important;
  min-height: auto !important;
  overflow: visible !important;
  padding: 0.75rem 0.85rem !important;
  position: relative;
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.workorder-list-item:hover,
.unscheduled-wo-card:hover,
.dispatch-wo-card:hover,
.wo-badge:hover,
.mobile-dispatch-card:hover {
  background: color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 92%) !important;
  border-color: color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 66%) !important;
  box-shadow: var(--shadow-md) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.workorder-list-item.active,
.unscheduled-wo-card.active,
.dispatch-wo-card.active,
.wo-badge.active,
.mobile-dispatch-card.active {
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 84%),
      color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 84%)
    ),
    var(--app-surface) !important;
  border-color: color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 28%) !important;
  border-left-color: var(--status-color, var(--app-primary)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 36%),
    0 8px 20px color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 76%),
    var(--shadow-sm) !important;
  color: var(--app-text) !important;
  outline: none !important;
}

/* =========================================================
  2. INNER CARD LAYOUT
========================================================= */
.card-display-grid {
  align-items: start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.workorder-list-item .card-display-grid .card-display-grid,
.unscheduled-wo-card .card-display-grid,
.dispatch-wo-card .card-display-grid,
.wo-badge .card-display-grid,
.mobile-dispatch-card .card-display-grid {
  width: 100%;
}

.card-display-left,
.card-display-right {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.card-display-right {
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

/* =========================================================
  3. CARD TEXT
========================================================= */
.workorder-list-item strong,
.unscheduled-wo-card strong,
.dispatch-wo-card strong,
.wo-badge strong,
.mobile-dispatch-card strong,
.dispatch-wo-title,
.mobile-dispatch-card-customer,
.wo-badge-title {
  color: var(--app-text) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.workorder-list-item small,
.unscheduled-wo-card .small,
.dispatch-wo-card .small,
.wo-badge .small,
.mobile-dispatch-card-meta,
.dispatch-wo-time,
.dispatch-wo-service-type,
.wo-badge-time,
.card-display-left small,
.card-display-right small,
.card-display-right .text-primary,
.card-display-right .fw-semibold {
  color: var(--app-text-muted) !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}

.dispatch-wo-title,
.dispatch-wo-customer,
.dispatch-wo-time,
.dispatch-wo-service-type,
.wo-badge-time,
.wo-badge-title,
.mobile-dispatch-card-top,
.mobile-dispatch-card-customer,
.mobile-dispatch-card-meta {
  margin: 0 !important;
  padding: 0 !important;
}

.wo-badge-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.18rem !important;
}

.mobile-dispatch-card-top {
  align-items: start;
  display: grid !important;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* =========================================================
  4. BADGES / PILLS
========================================================= */
.status-pill,
.quote-status-badge,
.quote-total-badge,
.dispatch-wo-service-type.badge,
.card-display-right .badge {
  align-items: center;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  display: inline-flex !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  justify-content: center;
  line-height: 1.1 !important;
  min-height: 1.4rem;
  padding: 0.24rem 0.58rem !important;
  white-space: nowrap;
  width: fit-content;
}

.status-pill {
  background: var(--status-color, var(--app-secondary)) !important;
  border-color: var(--status-color, var(--app-secondary)) !important;
  color: var(--status-color-contrast, var(--app-text-inverse)) !important;
}

.badge.bg-success,
.quote-status-converted {
  background: var(--app-success) !important;
  color: var(--app-text-inverse) !important;
}

.badge.bg-warning,
.badge.wo-status-on-going,
.status-pill.wo-status-on-going {
  background: var(--app-warning) !important;
  color: var(--app-text) !important;
}

.badge.bg-danger {
  background: var(--app-danger) !important;
  color: var(--app-text-inverse) !important;
}

.badge.bg-secondary,
.status-pill.status-draft {
  background: var(--app-secondary) !important;
  color: var(--app-text-inverse) !important;
}

.quote-total-badge {
  background: rgba(var(--app-primary-rgb), 0.18) !important;
  color: var(--app-text) !important;
}

/* 🔥 MIGRATED FROM FINAL-POLISH: 4. CARD STACK DENSITY */
/* =========================================================
  4. CARD STACK DENSITY
========================================================= */
#workOrderList,
#quoteList,
.unscheduled-workorders-list {
  gap: 0.55rem !important;
  padding-bottom: 0.25rem !important;
}

.workorder-list-item,
.unscheduled-wo-card {
  margin-bottom: 0.4rem !important;
}

.workorder-list-item:last-child,
.unscheduled-wo-card:last-child {
  margin-bottom: 0 !important;
}
/* 🔥 END MIGRATED FROM FINAL-POLISH: 4. CARD STACK DENSITY */

/* 🔥 MIGRATED FROM FINAL-POLISH: 5. CARD TYPOGRAPHY DENSITY */
/* =========================================================
  5. CARD TYPOGRAPHY DENSITY
========================================================= */
.card-display-left strong {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.card-display-left span {
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
}

.card-display-left small,
.card-display-right small {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
}
/* 🔥 END MIGRATED FROM FINAL-POLISH: 5. CARD TYPOGRAPHY DENSITY */

/* 🔥 MIGRATED FROM FINAL-POLISH: 7. UNIFIED HOVER / ACTIVE BORDER FEEL */
/* =========================================================
  7. UNIFIED HOVER / ACTIVE BORDER FEEL
  Smooths out different hover borders across cards/buttons/dropdowns.
========================================================= */
.workorder-list-item:hover,
.unscheduled-wo-card:hover,
.dispatch-wo-card:hover,
.wo-badge:hover,
.mobile-dispatch-card:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.technician-picker-option:hover:not(:disabled):not(.is-selected),
.dispatch-modal-tech-item:hover,
.app-list-card:hover {
  background: color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 92%) !important;
  border-color: color-mix(in srgb, var(--status-color, var(--app-primary)), transparent 66%) !important;
  color: var(--app-text) !important;
}

.dispatch-tech-row-selected .dispatch-tech-name,
.dispatch-tech-filter-selected,
.schedule-density-menu .btn.active {
  background: rgba(var(--app-primary-rgb), 0.15) !important;
  border-color: rgba(var(--app-primary-rgb), 0.58) !important;
  color: var(--app-text) !important;
}
/* 🔥 END MIGRATED FROM FINAL-POLISH: 7. UNIFIED HOVER / ACTIVE BORDER FEEL */

/* 🔥 MIGRATED FROM FINAL-POLISH: 9. BADGE SIZE NORMALIZATION */
/* =========================================================
  9. BADGE SIZE NORMALIZATION
========================================================= */
.status-pill,
.badge,
.quote-total-badge,
.wo-status-badge,
.quote-status-badge {
  align-items: center;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  display: inline-flex !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  justify-content: center;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  min-height: 1.4rem !important;
  padding: 0.24rem 0.58rem !important;
  width: fit-content;
}

.dispatch-wo-card .status-pill,
.calendar-workorder-card .status-pill,
.mobile-dispatch-card .status-pill {
  min-width: 74px;
}
/* 🔥 END MIGRATED FROM FINAL-POLISH: 9. BADGE SIZE NORMALIZATION */


/* =========================================================
  STATUS COLOR AUTHORITY
  Work Order + Schedule status colors come from Settings.
  Prevent older status classes/pseudo indicators from overriding
  --status-color and --status-color-contrast.
========================================================= */

.workorder-list-item::before {
  display: none !important;
}

.workorder-list-item,
.unscheduled-wo-card,
.dispatch-wo-card,
.wo-badge,
.mobile-dispatch-card {
  border-left-color: var(--status-color, var(--app-secondary)) !important;
}

.status-pill,
.status-pill.status-open,
.status-pill.status-on-going,
.status-pill.status-invoiced,
.status-pill.status-cancelled,
.status-pill.status-default {
  background: var(--status-color, var(--app-secondary)) !important;
  border-color: var(--status-color, var(--app-secondary)) !important;
  color: var(--status-color-contrast, var(--app-text-inverse)) !important;
}


/* =========================================================
🔥 APP ERROR MODAL
Theme-safe official error popup.
========================================================= */

#appErrorModal .modal-content {
    background: var(--theme-surface);
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
}

#appErrorModal .modal-header {
    background: #dc3545 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

#appErrorModal .modal-body {
    background: var(--theme-surface);
    color: var(--theme-text);
}

#appErrorModal .modal-footer {
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
}

/* =========================================================
🔥 TOAST CONTRAST FIX
========================================================= */

.workorder-toast-success,
.workorder-toast-danger {
    color: #fff !important;
}

.workorder-toast-success {
    background: #198754 !important;
}

.workorder-toast-danger {
    background: #dc3545 !important;
}

.workorder-toast .toast-body {
    color: #fff !important;
}

.workorder-toast .btn-close {
    filter: invert(1) brightness(200%);
}