/* ─── MERTZCREW INTEGRATION — detail panel buttons ─────── */
.detail-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.detail-action-links .lightning-link {
  margin-top: 0;
}
.mc-link {
  color: #e5352b !important;
  border-color: rgba(229,53,43,0.3) !important;
}
.mc-link:hover {
  background: rgba(229,53,43,0.1) !important;
  border-color: #e5352b !important;
}
.crew-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.crew-btn:hover { background: var(--surface3); border-color: var(--text-muted); }
.crew-btn svg.lucide { width: 12px; height: 12px; }

/* ─── CREW MODAL OVERLAY ────────────────────────────────── */
.crew-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: crew-modal-in 0.2s ease;
}
.crew-modal.hidden { display: none !important; }

@keyframes crew-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.crew-modal-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 680px;
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: crew-sheet-up 0.22s cubic-bezier(0.4,0,0.2,1);
}
@keyframes crew-sheet-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.crew-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.crew-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.crew-timesheet-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.crew-timesheet-btn:hover:not(:disabled) {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
}
.crew-timesheet-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.crew-timesheet-btn svg { width: 13px; height: 13px; }
.crew-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.crew-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}
.crew-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px 24px;
}

/* Crew summary stats row */
.crew-modal-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.crew-modal-stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 80px;
}
.crew-modal-stat-value { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 2px; }
.crew-modal-stat-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* Dept section */
.crew-dept-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  padding: 6px 0;
  margin: 14px 0 8px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crew-dept-count {
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Crew cards list — vertical single column */
.crew-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crew-modal-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crew-modal-card.open-slot { opacity: 0.4; }
.crew-modal-card-name { font-size: 13px; font-weight: 600; color: var(--text); }
.crew-modal-card-name.open { font-style: italic; color: var(--text-muted); }
.crew-modal-card-role { font-size: 11px; color: var(--text-muted); }
.crew-modal-card-contact { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.crew-modal-card-contact a {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
}
.crew-modal-card-contact a:hover { text-decoration: underline; }
.crew-modal-card-contact svg { width: 10px; height: 10px; }
.crew-modal-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.crew-modal-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
}
.crew-modal-status.accepted     { background: rgba(34,197,94,0.15);  color: #22c55e; }
.crew-modal-status.not-accepted { background: rgba(245,158,11,0.15); color: #f59e0b; }
.crew-modal-status.declined     { background: rgba(248,81,73,0.15);  color: #f85149; }
.crew-modal-status.other        { background: var(--surface3);       color: var(--text-dim); }
.crew-modal-days { font-size: 10px; color: var(--text-dim); }

/* Loading / error states inside modal */
.crew-modal-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 30px 0; color: var(--text-muted); font-size: 13px;
}
.crew-modal-error {
  background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3);
  color: #f85149; border-radius: 8px; padding: 12px 14px; font-size: 13px;
}
.crew-modal-none {
  color: var(--text-dim); font-size: 13px; padding: 20px 0;
}