/* The CRM approvals view (crm.js). Built on console.css's tokens and its
   list/detail layout; only what the approval card adds is here. */

.crm-tabs { display: flex; }
.crm-tabs .btn { flex: 1; border-radius: 0; gap: 6px; }
.crm-tabs .btn:first-child { border-radius: 8px 0 0 8px; }
.crm-tabs .btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.crm-tabs .btn[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--navy); font-weight: 600; z-index: 1; }

.tag.check { border-color: var(--warn-line); color: var(--warn); background: var(--warn-soft); }
.tag.decision-approved { border-color: var(--good); color: var(--good); }
.tag.decision-rejected { border-color: var(--crit-line); color: var(--crit); }

.crm-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: var(--fg-2); }
.crm-when b { color: var(--navy); }

.crm-section { padding: 16px 22px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 10px; }
.crm-section:last-child { border-bottom: 0; }
.crm-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* One row per field: label, value, clip. A field to check carries a mark
   in the gutter and a tinted row, so the eye goes there first. */
.crm-fields { display: flex; flex-direction: column; gap: 6px; }
.crm-field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px;
  padding: 8px 10px; border-left: 3px solid transparent; border-radius: var(--radius-sm);
}
.crm-field label { grid-column: 1 / -1; }
.crm-field label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.crm-field input { height: 36px; font-size: 14px; width: 100%; }
.crm-field .clip { justify-self: start; }
.crm-field .clip-none { font-size: 12px; }
.crm-field.check { background: var(--warn-soft); border-left-color: var(--warn); }
.crm-field.check label::after { content: " · check"; color: var(--warn); font-weight: 600; }

.crm-review { display: flex; flex-direction: column; gap: 10px; }
.crm-review textarea { width: 100%; resize: vertical; font: inherit; font-size: 14px; }
.crm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The calendar: a booking Nia pencilled in, waiting for an operator. */
.apt.provisional { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--warn-soft) 6px 12px); border-style: dashed; }

@media (max-width: 760px) {
  .crm-section { padding: 14px 16px; }
}