:root {
  --red: #d90812;
  --red-dark: #8e0710;
  --graphite: #111417;
  --graphite-2: #1c2025;
  --text: #111417;
  --muted: #687079;
  --line: rgba(17, 20, 23, .12);
  --surface: #ffffff;
  --steel: #eef0ef;
  --soft: #f7f8f7;
  --shadow: 0 14px 34px rgba(17, 20, 23, .08);
}

* { box-sizing: border-box; }
html { min-width: 0; }
body { margin: 0; overflow-x: hidden; background: var(--steel); color: var(--text); font-family: "Segoe UI", Arial, sans-serif; }
a { color: inherit; }
h1, h2, h3, .side-nav a, .button, button, th, .eyebrow { font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.crm-shell { min-height: 100vh; display: grid; grid-template-columns: 18rem minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; gap: 1.2rem; background: linear-gradient(180deg, #171a1e, #090a0c); color: #fff; padding: 1rem; }
.sidebar-head { display: grid; gap: 1rem; }
.brand { display: block; padding: .45rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand img { width: min(14.5rem, 100%); height: auto; display: block; }
.nav-toggle { display: none; }
.side-nav { flex: 1; display: grid; align-content: start; gap: .45rem; }
.side-nav a { display: flex; align-items: center; gap: .7rem; min-height: 2.85rem; padding: .72rem .78rem; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #f8f8f6; text-decoration: none; font-weight: 950; }
.side-nav a span { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 6px; background: rgba(255,255,255,.08); color: #f8f8f6; font-size: .68rem; }
.side-nav a:hover, .side-nav a.is-active { border-color: rgba(217,8,18,.72); background: rgba(217,8,18,.14); transform: translateX(2px); }
.side-nav a.is-active span { background: var(--red); }
.logout-link { margin-top: auto; }
.workspace { min-width: 0; padding: clamp(1rem, 3vw, 2rem); }
.topbar { display: flex; justify-content: space-between; gap: 1.2rem; align-items: center; margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.74); box-shadow: var(--shadow); }
.topbar h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: .95; }
.topbar p:not(.eyebrow) { margin: .35rem 0 0; color: var(--muted); }
.topbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .65rem; }
.user-chip { display: grid; gap: .12rem; min-height: 2.75rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 850; }
.mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: .45rem .75rem;
  border: 1px solid #ffd08a;
  border-radius: 8px;
  background: #fff7e8;
  color: #7a4300;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.user-chip small { color: var(--muted); font-weight: 650; }
.eyebrow { margin: 0 0 .35rem; color: var(--red); font-size: .74rem; font-weight: 950; }
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1rem, 2vw, 1.2rem); box-shadow: var(--shadow); margin-bottom: 1rem; }
.card h2 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-full { grid-column: 1 / -1; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.stat { min-height: 9rem; display: grid; align-content: space-between; border-top: 4px solid var(--red); }
.stat span { color: var(--muted); font-weight: 900; text-transform: uppercase; }
.stat strong { display: block; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.stat small { color: var(--muted); }
label, fieldset { display: grid; gap: .35rem; font-weight: 800; }
input, select, textarea { width: 100%; min-height: 2.7rem; padding: .68rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid rgba(217,8,18,.26); outline-offset: 2px; }
.checks { display: flex; flex-wrap: wrap; gap: .55rem; }
.checks label { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; background: #fff; }
.button, button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.7rem; padding: .68rem .92rem; border: 1px solid var(--red); border-radius: 8px; background: var(--red); color: #fff; font-weight: 950; text-decoration: none; cursor: pointer; }
.button:hover, button:hover { background: var(--red-dark); }
.button.secondary, button.secondary { background: #fff; color: var(--text); border-color: var(--line); }
.button.secondary:hover, button.secondary:hover { border-color: rgba(217,8,18,.45); background: #fff5f5; }
button.danger { border-color: #7d1117; background: #7d1117; color: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .82rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: #3d4248; font-size: .78rem; }
.table-wrap { overflow-x: auto; }
.status { display: inline-block; padding: .3rem .52rem; border-radius: 5px; background: #eef0ef; font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.status-pending { background: #fff1d5; color: #6f3c00; }
.status-confirmed { background: #fde5e7; color: #8e0710; }
.status-completed { background: #e7f5ec; color: #145c2b; }
.status-cancelled { background: #f1eeee; color: #666; }
.status-no_show { background: #f6e8ff; color: #66259a; }
.status-scheduling-required { background: #fff1d5; color: #6f3c00; }
.status-available { background: #e7f5ec; color: #145c2b; }
.status-blocked { background: #e6e7e8; color: #24282c; }
.status-inactive { background: #f0eeee; color: #686c70; }
.flash { padding: .85rem 1rem; border-left: 4px solid var(--red); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.empty-state { display: grid; gap: .2rem; padding: 1rem; border: 1px dashed rgba(17,20,23,.2); border-radius: 9px; background: var(--soft); color: var(--muted); }
.empty-state strong { color: var(--text); text-transform: uppercase; }
.migration-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0;
}

.migration-list p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem .75rem;
  align-items: center;
  margin: 0;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.migration-list small {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.migration-no-pending { margin: .8rem 0; font-weight: 800; }
.migration-confirm-list { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); }
.migration-current { margin-top: 1rem; border-color: #a6d9b5; background: #edf9f0; color: #145c2b; }
.migration-current strong { color: #145c2b; }
.migration-pending { margin-top: 1rem; border-color: #ffd08a; background: #fff8e8; color: #7a4300; }
.migration-pending strong { color: #7a4300; }
.maintenance-card { border-left-color: #6b7280; background: linear-gradient(135deg, #fff, #f7f7f7); }
.booking-record-menu { display: inline-block; margin: .25rem 0 .75rem; }
.booking-record-menu summary { display: inline-flex; width: auto; min-width: 6rem; height: auto; gap: .35rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); color: var(--text); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.booking-record-menu summary:hover, .booking-record-menu[open] summary { background: #fff1f1; color: var(--red); }
.booking-record-menu .record-menu-panel { top: 2.6rem; }
.cleanup-warning { border-top: 4px solid #6b7280; }
.cleanup-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.cleanup-stat { display: grid; gap: .25rem; min-height: 6.5rem; padding: .9rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.cleanup-stat strong { font-size: .75rem; text-transform: uppercase; }
.cleanup-stat b { font-size: 1.8rem; }
.cleanup-stat span { color: var(--muted); font-size: .78rem; }
.cleanup-review { display: grid; gap: 1rem; }
.cleanup-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cleanup-review-grid > div { min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.cleanup-review-grid h3 { margin-top: 0; }
.cleanup-item { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--line); cursor: pointer; }
.cleanup-item span { display: grid; gap: .15rem; min-width: 0; }
.cleanup-item small { color: var(--muted); overflow-wrap: anywhere; }
.cleanup-manual-review { display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cleanup-item-manual { background: #fff; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; margin-top: .55rem; }
.cleanup-item-manual.is-protected { background: #fff8f8; border-color: #efc8ca; cursor: not-allowed; }
.cleanup-item-manual.is-archived-review { background: #fffaf0; border-color: #f1d49b; }
.cleanup-item-manual input:disabled { cursor: not-allowed; }
.cleanup-dependency { color: #6d43bf !important; }
.cleanup-protected { color: #8e0710 !important; font-weight: 700; }
.cleanup-archived { color: #875400 !important; font-weight: 800; }
.cleanup-manual-note { margin-top: .2rem; }
.cleanup-selection-summary { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--muted); font-size: .85rem; font-weight: 700; }
.cleanup-error { border-color: #e7a4a8; background: #fff1f1; color: #8e0710; }
.list-card { display: grid; gap: .45rem; padding: .95rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.mobile-list { display: none; }
.inline-form, .action-row { display: inline-flex; margin: .15rem; }
.availability-list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.availability-list-actions .inline-form { margin: 0; }
.availability-list-actions .button, .availability-list-actions button { min-height: 2rem; padding: .35rem .55rem; font-size: .72rem; }
.availability-slot-delete { border-color: #e7b3b6 !important; background: #fffafa !important; color: #8e0710 !important; }
.availability-slot-delete:hover, .availability-slot-delete:focus-visible { border-color: #d96f76 !important; background: #fff1f1 !important; }
.availability-slot-protected { flex: 1 1 12rem; color: #8e0710; font-size: .72rem; line-height: 1.35; }
.section-split { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.section-split h2 { margin: 0; }
.filter-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.action-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.action-card { display: grid; gap: .35rem; min-height: 6.5rem; padding: 1rem; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 10px; background: #fff; box-shadow: var(--shadow); text-decoration: none; }
.action-card strong { font-family: "Arial Narrow", Arial, sans-serif; text-transform: uppercase; }
.action-card span { color: var(--muted); font-size: .9rem; }
.mini-row { display: grid; grid-template-columns: minmax(6rem, .55fr) minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.breakdown-list, .summary-list, .future-grid { display: grid; gap: .65rem; }
.breakdown-list div, .summary-list p, .future-grid div { display: flex; justify-content: space-between; gap: .8rem; align-items: start; margin: 0; padding: .72rem; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.summary-list p, .future-grid div { display: grid; }
.summary-list span, .future-grid span { color: var(--muted); }
.profile-hero { border-top: 4px solid var(--red); }
.customer-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.customer-tabs a { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 850; }
.customer-tabs a.is-active, .customer-tabs a:hover { border-color: rgba(217,8,18,.35); background: #fff1f1; color: var(--red); }
.customer-directory-toolbar { background: linear-gradient(135deg, #fff, #fff8f8); }
.customer-search-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem) auto; gap: .8rem; align-items: end; }
.customer-search-actions { display: flex; gap: .45rem; align-items: center; }
.customer-search-actions button { gap: .4rem; }
.customer-search-actions svg, .profile-actions svg, .customer-contact-summary svg, .customer-mobile-contact svg { width: 1rem; height: 1rem; }
.customer-table { border-collapse: separate; border-spacing: 0 .5rem; }
.customer-table th { border: 0; padding-top: 0; }
.customer-record { cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.customer-record td { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.customer-record td:first-child { border-left: 1px solid var(--line); border-radius: 9px 0 0 9px; }
.customer-record td:last-child { border-right: 1px solid var(--line); border-radius: 0 9px 9px 0; }
.customer-record:hover td, .customer-record:focus-visible td { background: #fff8f8; border-color: rgba(217,8,18,.25); }
.customer-record:hover, .customer-record:focus-visible { transform: translateY(-1px); }
.customer-primary, .customer-mobile-head { display: flex; align-items: center; gap: .7rem; min-width: 12rem; }
.customer-primary > span:nth-child(2) { display: grid; gap: .2rem; }
.customer-primary small, .customer-statuses small { color: var(--muted); font-size: .75rem; }
.customer-avatar { display: inline-grid; place-items: center; flex: 0 0 2.55rem; width: 2.55rem; height: 2.55rem; border-radius: 50%; background: #fff1f1; color: var(--red); font-size: .8rem; font-weight: 950; box-shadow: 0 0 0 .35rem rgba(217,8,18,.06); }
.customer-avatar-large { flex-basis: 4.2rem; width: 4.2rem; height: 4.2rem; font-size: 1.2rem; }
.row-chevron { margin-left: auto; color: var(--red); font-size: 1.3rem; font-weight: 900; transition: transform 160ms ease; }
.customer-record:hover .row-chevron, .customer-record:focus-visible .row-chevron, .customer-mobile-card:hover .row-chevron { transform: translateX(3px); }
.customer-contact, .customer-statuses, .customer-contact-summary, .customer-mobile-contact { display: grid; gap: .25rem; }
.customer-statuses small { margin-top: .2rem; }
.customer-actions { width: 3.2rem; }
.record-menu { position: relative; }
.record-menu summary { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: var(--muted); cursor: pointer; list-style: none; }
.record-menu summary::-webkit-details-marker { display: none; }
.record-menu summary:hover, .record-menu[open] summary { background: #fff1f1; color: var(--red); }
.record-menu summary svg { width: 1.15rem; height: 1.15rem; }
.record-menu-panel { position: absolute; z-index: 5; right: 0; top: 2.35rem; display: grid; min-width: 11rem; padding: .35rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.record-menu-panel a { padding: .55rem .65rem; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.record-menu-panel a:hover { background: #fff5f5; color: var(--red); }
.booking-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 22rem; }
.booking-quick-action, .booking-quick-action-form { position: relative; display: inline-flex; }
.booking-quick-action { display: inline-block; vertical-align: top; }
.booking-quick-action > summary { list-style: none; }
.booking-quick-action > summary::-webkit-details-marker { display: none; }
.booking-action-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.35rem; padding: .48rem .72rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #1d5fbf; font-size: .76rem; font-weight: 900; line-height: 1.1; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease; }
.booking-action-button svg { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.booking-action-button:hover, .booking-action-button:focus-visible, .booking-quick-action[open] > .booking-action-button { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(15, 23, 42, .08); }
.booking-action-open { border-color: #cfd8e5; color: #1d5fbf; }
.booking-action-open:hover, .booking-action-open:focus-visible { border-color: #9dbce8; background: #f7fbff; }
.button.secondary.booking-action-open { border-color: #cfd8e5; color: #1d5fbf; }
.button.secondary.booking-action-open:hover, .button.secondary.booking-action-open:focus-visible { border-color: #9dbce8; background: #f7fbff; color: #154b9a; }
.booking-action-move { border-color: #a8d8b7; background: #fbfffc; color: #13723b; }
.booking-action-move:hover, .booking-action-move:focus-visible, .booking-quick-action[open] > .booking-action-move { border-color: #4eaf73; background: #f2fbf5; color: #0d6631; }
.booking-action-schedule { border-color: #a8c7f7; background: #fbfdff; color: #1c5fc4; }
.booking-action-schedule:hover, .booking-action-schedule:focus-visible, .booking-quick-action[open] > .booking-action-schedule { border-color: #6ea3ee; background: #f2f7ff; color: #154b9a; }
.booking-action-create { border-color: #d4b9f6; background: #fdfaff; color: #7a45b8; }
.booking-action-create:hover, .booking-action-create:focus-visible, .booking-quick-action[open] > .booking-action-create { border-color: #ad7de5; background: #f8f1ff; color: #63349d; }
.booking-action-cancel { border-color: #eca4a8; background: #fffafa; color: #b01824; }
.booking-action-cancel:hover, .booking-action-cancel:focus-visible { border-color: #df5f68; background: #fff2f3; color: #8e0710; }
.booking-action-delete { border-color: #d5d8dc; background: #fafafa; color: #646b73; }
.booking-action-delete:hover, .booking-action-delete:focus-visible { border-color: #c58c91; background: #fff8f8; color: #8e0710; }
.booking-quick-action-panel { position: static; display: grid; gap: .65rem; width: min(22rem, calc(100vw - 2rem)); margin-top: .45rem; padding: .8rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 16px 34px rgba(15, 23, 42, .16); }
.booking-quick-action-panel small { color: var(--muted); line-height: 1.45; }
.booking-quick-action-panel form { display: grid; gap: .45rem; margin: 0; }
.booking-quick-action-panel label { display: grid; gap: .2rem; font-size: .75rem; font-weight: 800; }
.booking-quick-action-panel button { width: 100%; }
.booking-quick-action-panel p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.desktop-table td:last-child { min-width: 22rem; }
.booking-filter-feedback { min-height: 1.1rem; margin: .65rem 0 0; color: var(--muted); font-size: .78rem; }
.booking-filter-feedback:empty { display: none; }
[data-booking-results] { transition: opacity 160ms ease; }
[data-booking-results].is-loading { opacity: .58; pointer-events: none; }
.calendar-slot { display: grid; gap: .35rem; }
.calendar-slot-action { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; min-height: 2.15rem; padding: .42rem .6rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: .72rem; font-weight: 850; text-decoration: none; cursor: pointer; }
.calendar-slot-action svg, .calendar-linked-booking__actions svg { width: .95rem; height: .95rem; }
.calendar-slot-action:hover, .calendar-slot-action:focus-visible { border-color: #aeb8c6; background: #f8fafc; }
.calendar-slot-action--delete, .calendar-inline-delete { border-color: #e7b3b6; color: #8e0710; background: #fffafa; }
.calendar-slot-action--delete:hover, .calendar-slot-action--delete:focus-visible, .calendar-inline-delete:hover, .calendar-inline-delete:focus-visible { border-color: #d96f76; background: #fff1f1; }
.calendar-slot-actions > summary { list-style: none; }
.calendar-slot-actions > summary::-webkit-details-marker { display: none; }
.calendar-slot-actions > summary.calendar-event { cursor: pointer; }
.calendar-slot-actions[open] > summary { border-color: #9dbce8; background: #f4f8ff; color: #154b9a; }
.calendar-slot-actions__panel { display: grid; gap: .7rem; margin-top: .4rem; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.calendar-slot-actions__summary { display: grid; gap: .15rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .74rem; }
.calendar-slot-actions__summary strong { color: var(--text); }
.calendar-linked-booking { display: grid; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.calendar-linked-booking > div:first-child { display: grid; gap: .12rem; }
.calendar-linked-booking > div:first-child span, .calendar-linked-booking > div:first-child small { color: var(--muted); font-size: .72rem; }
.calendar-linked-booking__actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.calendar-linked-booking__actions .button, .calendar-linked-booking__actions form { margin: 0; }
.calendar-linked-booking__actions .button { min-height: 2rem; padding: .35rem .5rem; font-size: .7rem; }
.calendar-inline-cancel { border-color: #a8d8b7; color: #0d6631; background: #fbfffc; }
.calendar-inline-delete { display: inline-flex; min-height: 2rem; padding: .35rem .5rem; font-size: .7rem; }
.calendar-combined-delete { padding-top: .35rem; }
.calendar-protected-note { margin: 0; color: #8e0710; font-size: .72rem; line-height: 1.4; }
.customer-document-upload { display: grid; gap: .65rem; margin: .25rem 0; padding: .9rem; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.customer-document-upload legend { padding: 0 .35rem; color: var(--text); font-weight: 950; text-transform: uppercase; }
.customer-document-upload p { margin: 0; }
@media (max-width: 900px) { .booking-quick-actions { min-width: 0; } }
@media (max-width: 560px) { .booking-quick-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-width: 0; }.booking-quick-action, .booking-quick-action-form, .booking-quick-actions .booking-action-button { width: 100%; }.booking-quick-actions .booking-action-button { white-space: normal; }.booking-quick-action-panel { position: fixed; top: 50%; right: 1rem; left: 1rem; width: auto; max-height: calc(100vh - 2rem); overflow: auto; transform: translateY(-50%); } }
.customer-360-hero { display: grid; gap: 1rem; border-top: 4px solid var(--red); }
.customer-360-heading { display: flex; align-items: center; gap: 1rem; }
.customer-360-heading h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: none; letter-spacing: 0; }
.customer-contact-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); color: var(--muted); }
.customer-contact-summary span, .customer-mobile-contact span { display: flex; gap: .45rem; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.profile-actions .button { gap: .4rem; }
.customer-status-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.status-chip { display: grid; gap: .15rem; padding: .55rem .75rem; border: 1px solid var(--line); border-left: 3px solid #9ca3af; border-radius: 8px; background: #fff; color: var(--muted); font-size: .78rem; }
.status-chip b { color: var(--text); font-size: .68rem; text-transform: uppercase; }
.status-chip--green { border-left-color: #18a058; background: #f2fbf5; }
.status-chip--orange { border-left-color: #f58a07; background: #fff8ec; }
.status-chip--purple { border-left-color: #7c3aed; background: #f7f2ff; }
.customer-panel { scroll-margin-top: 1rem; }
.attention-card { border-left: 3px solid #f58a07; }
.attention-list { display: grid; gap: .55rem; }
.attention-list p { display: flex; gap: .55rem; align-items: center; margin: 0; padding: .7rem; border-radius: 8px; background: #fff8ec; color: #7a4300; }
.attention-list svg { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; }
.competency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.competency-card { display: grid; gap: .45rem; padding: .85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.competency-card > span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff1f1; color: var(--red); }
.competency-card svg { width: 1.15rem; height: 1.15rem; }
.competency-card small { justify-self: start; }
.customer-mobile-card { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.customer-mobile-card:hover, .customer-mobile-card:focus-visible { transform: translateY(-1px); border-color: rgba(217,8,18,.3); box-shadow: var(--crm-shadow-hover, var(--shadow)); }
.customer-mobile-contact { padding: .65rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.customer-mobile-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.customer-mobile-meta span { display: grid; gap: .2rem; min-width: 0; font-size: .82rem; overflow-wrap: anywhere; }
.customer-mobile-meta small { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.customer-mobile-foot { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 900px) { .customer-search-form, .customer-contact-summary, .competency-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .customer-360-heading { align-items: flex-start; } .customer-avatar-large { flex-basis: 3.4rem; width: 3.4rem; height: 3.4rem; } .profile-actions .button { flex: 1 1 auto; } .customer-search-actions { align-items: stretch; } .customer-search-actions > * { flex: 1 1 auto; } }
.customer-page-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.1rem; }
.customer-page-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: 0; }
.customer-page-heading p:last-child { margin-bottom: 0; }
.customer-page-actions .button, .customer-search-form button { gap: .45rem; }
.customer-page-actions svg, .customer-search-form svg { width: 1.05rem; height: 1.05rem; }
.customer-search-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem) auto auto; gap: .7rem; align-items: center; }
.customer-search-field, .customer-filter-field { position: relative; display: flex; align-items: center; gap: .55rem; min-width: 0; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.customer-search-field input, .customer-filter-field select { min-height: 3.1rem; padding-left: 0; border: 0; outline: 0; }
.customer-search-field svg, .customer-filter-field svg { flex: 0 0 1rem; color: var(--muted); }
.customer-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.customer-metric { display: flex; align-items: center; gap: .85rem; min-height: 7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.customer-metric > div { display: grid; gap: .16rem; min-width: 0; }
.customer-metric > div > span { color: #374151; font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.customer-metric strong { font-size: 2rem; line-height: 1; }
.customer-metric small { color: var(--muted); font-size: .78rem; }
.customer-metric-icon { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; height: 3rem; border-radius: 50%; background: #fff1f1; color: var(--red); box-shadow: 0 0 0 .45rem rgba(217,8,18,.06); }
.customer-metric-icon svg { width: 1.4rem; height: 1.4rem; }
.customer-metric--green .customer-metric-icon { background: #eefaf3; color: #188a4c; box-shadow: 0 0 0 .45rem rgba(24,160,88,.06); }
.customer-metric--orange .customer-metric-icon { background: #fff8ec; color: #e07800; box-shadow: 0 0 0 .45rem rgba(245,138,7,.06); }
.customer-metric--purple .customer-metric-icon { background: #f5efff; color: #7c3aed; box-shadow: 0 0 0 .45rem rgba(124,58,237,.06); }
.customer-directory-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.customer-directory-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .9rem; min-width: 0; min-height: 19rem; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); cursor: pointer; transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease; }
.customer-directory-card:hover, .customer-directory-card:focus-visible { transform: translateY(-3px); border-color: rgba(217,8,18,.3); box-shadow: var(--crm-shadow-hover, 0 18px 38px rgba(15,23,42,.12)); }
.customer-card-top, .customer-card-identity, .customer-card-controls, .customer-card-footer { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.customer-card-identity h3 { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.customer-card-identity small { color: var(--muted); }
.customer-card-controls { margin-left: auto; align-items: flex-start; }
.customer-card-badge { padding: .35rem .5rem; border-radius: 6px; font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.customer-card-badge--green { background: #e8f7ed; color: #176b35; }.customer-card-badge--orange { background: #fff0d6; color: #9a5100; }.customer-card-badge--purple { background: #f0e8ff; color: #6030a3; }.customer-card-badge--grey { background: #eef0f1; color: #5b6269; }
.customer-card-contact { display: grid; gap: .5rem; padding: .75rem 0; border-bottom: 1px solid var(--line); color: #374151; font-size: .86rem; }
.customer-card-contact span { display: flex; gap: .5rem; align-items: center; min-width: 0; overflow-wrap: anywhere; }.customer-card-contact svg { flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--muted); }
.customer-card-operations { display: grid; align-content: start; gap: .8rem; }.customer-card-operations div { display: grid; gap: .2rem; }.customer-card-operations small { font-size: .68rem; font-weight: 950; text-transform: uppercase; color: var(--muted); }.customer-card-operations strong { font-size: .84rem; overflow-wrap: anywhere; }
.customer-card-footer { justify-content: flex-end; padding-top: .75rem; border-top: 1px solid var(--line); color: var(--red); font-size: .72rem; font-weight: 950; text-transform: uppercase; }.customer-card-footer .row-chevron { margin-left: 0; }
.customer-empty-state { grid-column: 1 / -1; min-height: 13rem; place-content: center; justify-items: center; text-align: center; }.customer-empty-state .button { margin-top: .5rem; gap: .4rem; }
.customer-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 1.2rem; color: var(--muted); font-size: .85rem; }.customer-pagination nav { display: flex; gap: .35rem; }.customer-pagination .button { min-width: 2.35rem; min-height: 2.35rem; padding: .35rem .55rem; }.customer-pagination .is-current { background: var(--red); border-color: var(--red); color: #fff; }.customer-pagination .is-disabled { pointer-events: none; opacity: .45; }.customer-pagination label { display: flex; align-items: center; gap: .45rem; }.customer-pagination select { min-height: 2.35rem; padding: .35rem .5rem; width: auto; }
@media (max-width: 1200px) { .customer-directory-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .customer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .customer-page-heading { align-items: flex-start; }.customer-search-form { grid-template-columns: 1fr; }.customer-directory-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .customer-page-heading { display: grid; }.customer-page-actions, .customer-page-actions .button { width: 100%; }.customer-metrics { grid-template-columns: 1fr; }.customer-directory-card-grid { grid-template-columns: 1fr; }.customer-directory-card { min-height: 18rem; }.customer-pagination { justify-content: center; }.customer-pagination > span { width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .customer-directory-card, .customer-record, .row-chevron { transition: none; } }
.customer-controlled-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.1rem; }.customer-controlled-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: 0; }.customer-controlled-heading p:last-child { margin-bottom: 0; }.customer-controlled-heading .button, .customer-controlled-search-form button { display: inline-flex; gap: .4rem; }
.customer-controlled-search { margin-bottom: 1.1rem; background: linear-gradient(135deg, #fff, #fff8f8); }.customer-controlled-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; }.customer-controlled-search-field { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.customer-controlled-search-field input { min-height: 3.1rem; padding-left: 0; border: 0; outline: 0; }.customer-controlled-search-field svg { flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--muted); }
.customer-controlled-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }.customer-controlled-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .95rem; min-width: 0; min-height: 18rem; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); cursor: pointer; transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease; }.customer-controlled-card:hover, .customer-controlled-card:focus-visible { transform: translateY(-3px); border-color: rgba(217,8,18,.3); box-shadow: var(--crm-shadow-hover, 0 18px 38px rgba(15,23,42,.12)); }.customer-controlled-card-top, .customer-controlled-identity, .customer-controlled-actions { display: flex; align-items: center; gap: .65rem; min-width: 0; }.customer-controlled-identity h3 { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }.customer-controlled-identity small { color: var(--muted); }.customer-controlled-actions { margin-left: auto; align-items: flex-start; }.customer-avatar-user svg { width: 1.1rem; height: 1.1rem; }.customer-controlled-contact { display: grid; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: #374151; font-size: .86rem; }.customer-controlled-contact span { display: flex; gap: .45rem; align-items: center; min-width: 0; overflow-wrap: anywhere; }.customer-controlled-contact svg { flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--muted); }.customer-controlled-operations { display: grid; align-content: start; gap: .75rem; }.customer-controlled-operations div { display: grid; gap: .2rem; }.customer-controlled-operations small { color: var(--muted); font-size: .68rem; font-weight: 950; text-transform: uppercase; }.customer-controlled-operations strong { font-size: .84rem; overflow-wrap: anywhere; }.customer-controlled-footer { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--red); font-size: .72rem; font-weight: 950; text-transform: uppercase; }.customer-controlled-footer .row-chevron { margin-left: 0; }.customer-controlled-empty { grid-column: 1 / -1; min-height: 13rem; place-content: center; justify-items: center; text-align: center; }.customer-controlled-empty .button { display: inline-flex; gap: .4rem; margin-top: .5rem; }
.dashboard-booking-panel { min-width: 0; }.dashboard-booking-panel--today { border-top: 3px solid var(--crm-red); background: linear-gradient(180deg, #fffafa, #fff); }.dashboard-booking-panel--upcoming { border-top: 3px solid #7c3aed; background: linear-gradient(180deg, #fcfaff, #fff); }.dashboard-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }.dashboard-panel-title { display: flex; align-items: center; gap: .7rem; min-width: 0; }.dashboard-panel-title h2 { margin: 0; }.dashboard-panel-icon { display: grid; place-items: center; flex: 0 0 2.65rem; width: 2.65rem; height: 2.65rem; border-radius: 50%; background: #fff0f0; color: var(--crm-red); box-shadow: 0 0 0 .4rem rgba(217,8,18,.06); }.dashboard-panel-icon svg { width: 1.25rem; height: 1.25rem; }.dashboard-booking-panel--upcoming .dashboard-panel-icon { background: #f2ebff; color: #7c3aed; box-shadow: 0 0 0 .4rem rgba(124,58,237,.06); }.dashboard-panel-link { color: var(--crm-red); font-size: .72rem; font-weight: 950; text-decoration: none; text-transform: uppercase; white-space: nowrap; }.dashboard-booking-panel--upcoming .dashboard-panel-link { color: #6d32c7; }.dashboard-panel-link:hover { text-decoration: underline; }.dashboard-booking-row { display: grid; grid-template-columns: 1.7rem 4.4rem minmax(0, 1fr) auto 1rem; gap: .65rem; align-items: center; padding: .7rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background 180ms ease, padding 180ms ease; }.dashboard-booking-row:hover, .dashboard-booking-row:focus-visible { padding-left: .45rem; padding-right: .45rem; background: #fff7f7; }.dashboard-booking-row__icon { display: grid; place-items: center; color: #18a058; }.dashboard-booking-row__icon svg { width: 1rem; height: 1rem; }.dashboard-booking-row--pending .dashboard-booking-row__icon { color: #e07800; }.dashboard-booking-row--cancelled .dashboard-booking-row__icon { color: #777; }.dashboard-booking-row__time { font-weight: 950; white-space: nowrap; }.dashboard-booking-row__details { display: grid; gap: .18rem; min-width: 0; }.dashboard-booking-row__details strong, .dashboard-booking-row__details small { min-width: 0; overflow-wrap: anywhere; }.dashboard-booking-row__details small { color: var(--muted); white-space: normal; }.dashboard-booking-row__chevron { color: var(--crm-red); font-weight: 900; transition: transform 180ms ease; }.dashboard-booking-row:hover .dashboard-booking-row__chevron, .dashboard-booking-row:focus-visible .dashboard-booking-row__chevron { transform: translateX(3px); }.dashboard-booking-row--completed .dashboard-booking-row__icon { color: #157347; }.dashboard-booking-row--cancelled { opacity: .72; }
@media (max-width: 1200px) { .customer-controlled-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .customer-controlled-heading { align-items: flex-start; }.customer-controlled-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.customer-controlled-search-form { grid-template-columns: minmax(0, 1fr) auto; }.customer-controlled-search-form .button { grid-column: 2; grid-row: 1; }.dashboard-booking-row { grid-template-columns: 1.4rem 4.2rem minmax(0, 1fr) auto 1rem; } }
@media (max-width: 560px) { .customer-controlled-heading { display: grid; }.customer-controlled-heading > .button { width: 100%; }.customer-controlled-grid { grid-template-columns: 1fr; }.customer-controlled-search-form { grid-template-columns: 1fr auto; }.customer-controlled-search-form button { grid-column: 1; }.customer-controlled-search-form .button { grid-column: 2; }.dashboard-panel-heading { align-items: flex-start; }.dashboard-booking-row { grid-template-columns: 1.3rem minmax(0, 1fr) auto; gap: .35rem .55rem; }.dashboard-booking-row__icon { grid-row: 1 / span 2; }.dashboard-booking-row__time { grid-column: 2; grid-row: 1; }.dashboard-booking-row__details { grid-column: 2; grid-row: 2; }.dashboard-booking-row .status { grid-column: 3; grid-row: 1; }.dashboard-booking-row__chevron { grid-column: 3; grid-row: 2; justify-self: end; } }
@media (prefers-reduced-motion: reduce) { .customer-controlled-card, .dashboard-booking-row, .dashboard-booking-row__chevron { transition: none; } }
.customer-migration-notice { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .7rem .85rem; border: 1px solid #ffd08a; border-radius: 8px; background: #fff8e8; color: #7a4300; font-size: .82rem; }.customer-migration-notice svg { flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; }
.customer-lifecycle-filter { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }.customer-lifecycle-filter a { padding: .5rem .7rem; border-radius: 6px; color: var(--muted); font-size: .72rem; font-weight: 950; text-decoration: none; text-transform: uppercase; }.customer-lifecycle-filter a:hover, .customer-lifecycle-filter a.is-active { background: #fff1f1; color: var(--red); }.customer-lifecycle-unavailable { color: var(--muted); font-size: .76rem; font-weight: 800; }
.customer-controlled-card.is-archived { background: linear-gradient(145deg, #fff, #f7f7f7); }.customer-controlled-card.is-archived .customer-avatar { background: #eef0f1; color: #5b6269; box-shadow: 0 0 0 .35rem rgba(91,98,105,.06); }.menu-action { width: 100%; justify-content: flex-start; min-height: 0; padding: .55rem .65rem; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-weight: 750; text-align: left; text-transform: none; letter-spacing: 0; }.menu-action:hover { background: #fff5f5; color: var(--red); }.menu-action-danger { color: #8e0710; }
.customer-preview-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; justify-items: end; background: rgba(17,20,23,.36); }.customer-preview-backdrop[hidden] { display: none; }.customer-preview { position: relative; width: min(100%, 28rem); min-height: 100%; padding: clamp(1.25rem, 4vw, 2rem); background: #fff; box-shadow: -20px 0 50px rgba(17,20,23,.16); animation: customer-preview-in 180ms ease-out; }.customer-preview-close { position: absolute; top: 1rem; right: 1rem; width: 2.2rem; min-height: 2.2rem; padding: 0; border-radius: 50%; background: #f5f6f6; color: var(--text); border-color: var(--line); font-size: 1.4rem; }.customer-preview-heading { display: flex; align-items: center; gap: .9rem; padding: 2rem 0 1.2rem; border-bottom: 1px solid var(--line); }.customer-preview-heading h2 { margin: 0; font-size: 1.6rem; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }.customer-preview-contact { display: grid; gap: .7rem; padding: 1.2rem 0; color: #374151; }.customer-preview-contact span { display: flex; gap: .55rem; align-items: center; min-width: 0; overflow-wrap: anywhere; }.customer-preview-contact svg { flex: 0 0 1rem; width: 1rem; height: 1rem; color: var(--muted); }.customer-preview-snapshot { display: grid; gap: .7rem; margin-top: .5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }.customer-preview-snapshot .eyebrow { grid-column: 1 / -1; }.customer-preview-snapshot div { display: grid; gap: .15rem; }.customer-preview-snapshot span { color: var(--muted); font-size: .72rem; font-weight: 950; text-transform: uppercase; }.customer-preview-snapshot strong { overflow-wrap: anywhere; }.customer-preview-actions { display: grid; gap: .55rem; margin-top: 1.2rem; }.customer-preview-actions .button { width: 100%; }.preview-open { overflow: hidden; }@keyframes customer-preview-in { from { transform: translateX(1rem); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 560px) { .customer-controlled-search-form { grid-template-columns: minmax(0, 1fr) auto; }.customer-lifecycle-filter { grid-column: 1 / -1; order: 3; }.customer-controlled-search-form button { grid-column: 2; grid-row: 1; }.customer-preview { width: calc(100% - 1rem); margin: .5rem; min-height: calc(100% - 1rem); border-radius: 12px; } }
@media (max-width: 560px) {
  .customer-controlled-search-form .button {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (prefers-reduced-motion: reduce) { .customer-preview { animation: none; } }
.customer-controlled-card svg, .customer-preview svg, .customer-metric svg { display: block; width: 1.1rem; height: 1.1rem; max-width: 1.1rem; max-height: 1.1rem; flex: 0 0 auto; }.customer-metric-icon svg { width: 1.45rem; height: 1.45rem; max-width: 1.45rem; max-height: 1.45rem; }.customer-avatar svg { width: 1.15rem; height: 1.15rem; max-width: 1.15rem; max-height: 1.15rem; }
.customer-kpi-grid { margin-bottom: 1.35rem; }
.crm-stat-link.crm-stat-link--action strong { align-self: end; font-size: 1rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; }
.crm-stat-link.crm-stat-link--action .crm-stat-link__top { justify-content: flex-end; }
.availability-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.customer-avatar--red { background: #fff1f1; color: #d90812; box-shadow: 0 0 0 .35rem rgba(217, 8, 18, .06); }
.customer-avatar--orange { background: #fff8ec; color: #d97706; box-shadow: 0 0 0 .35rem rgba(245, 138, 7, .07); }
.customer-avatar--green { background: #eefaf3; color: #188a4c; box-shadow: 0 0 0 .35rem rgba(24, 160, 88, .07); }
.customer-avatar--purple { background: #f5efff; color: #7c3aed; box-shadow: 0 0 0 .35rem rgba(124, 58, 237, .07); }
.customer-avatar--blue { background: #eef6ff; color: #2563eb; box-shadow: 0 0 0 .35rem rgba(37, 99, 235, .07); }
.customer-avatar--graphite { background: #eef0f1; color: #5b6269; box-shadow: 0 0 0 .35rem rgba(91, 98, 105, .07); }
.customer-controlled-card.is-archived .customer-avatar { background: #eef0f1; color: #5b6269; box-shadow: 0 0 0 .35rem rgba(91, 98, 105, .06); }
@media (max-width: 1100px) { .availability-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .availability-action-grid { grid-template-columns: 1fr; } }
.timeline-item { display: grid; gap: .25rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.timeline-item small { color: var(--muted); }
.form-panel { border-top: 4px solid var(--red); }
.time-control-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(11rem, 13.75rem));
  gap: .8rem;
  align-items: end;
}

.time-control-row label {
  min-width: 0;
}

.check-card {
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 3rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.bulk-time-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(11rem, 13.75rem)) auto;
  gap: .8rem;
  align-items: end;
}
.calendar-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.calendar-toolbar h2 { margin: 0; }
.calendar-controls { display: grid; gap: .65rem; justify-items: end; }
.calendar-control-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.calendar-control-row .is-active { border-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.calendar-jump { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; align-items: end; }
.calendar-jump label { min-width: 11rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .8rem; }
.calendar-grid-day { grid-template-columns: minmax(0, 1fr); }
.calendar-grid-month { gap: .5rem; }
.calendar-day { min-height: 16rem; padding: .8rem; }
.calendar-grid-month .calendar-day { min-height: 8.5rem; }
.calendar-day h2 { margin-top: 0; font-size: 1.05rem; }
.calendar-day h2 a { text-decoration: none; }
.calendar-day.is-today { border-color: rgba(217,8,18,.55); box-shadow: inset 0 0 0 1px rgba(217,8,18,.18), var(--shadow); }
.calendar-day.is-muted-month { opacity: .58; }
.calendar-event { display: grid; gap: .18rem; margin-top: .55rem; padding: .65rem; border: 1px solid var(--line); border-left: 5px solid #1f7a3b; border-radius: 8px; background: #f8fbf9; text-decoration: none; }
.calendar-event strong { font-size: .9rem; }
.calendar-event span { min-width: 0; overflow-wrap: anywhere; }
.calendar-event small { color: var(--muted); font-weight: 900; text-transform: uppercase; }
.calendar-event-pending { border-left-color: #d28a00; background: #fff8e8; }
.calendar-event-confirmed { border-left-color: var(--red); background: #fff1f1; }
.calendar-event-blocked { border-left-color: #202428; background: #eceeef; }
.month-summary { display: grid; gap: .3rem; margin-top: .7rem; }
.month-summary span { padding: .32rem .45rem; border-radius: 6px; background: var(--soft); color: var(--muted); font-size: .78rem; font-weight: 800; }

@media (max-width: 1100px) {
  .stats, .action-grid, .action-grid-three, .action-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-grid-month { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .crm-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 10; min-height: auto; }
  .sidebar-head { display: flex; justify-content: space-between; align-items: center; }
  .brand { border-bottom: 0; }
  .brand img { width: min(11rem, 56vw); }
  .nav-toggle { display: inline-flex; background: transparent; border-color: rgba(255,255,255,.18); }
  .side-nav { display: none; margin-top: .75rem; }
  .side-nav.is-open { display: grid; }
  .topbar { display: grid; }
  .topbar-actions { justify-content: stretch; }
  .topbar-actions > * { flex: 1 1 auto; }
  .stats, .grid, .action-grid, .action-grid-three, .action-grid-five, .filter-bar, .calendar-grid, .calendar-grid-month { grid-template-columns: 1fr; }
  .calendar-toolbar { display: grid; grid-template-columns: 1fr; }
  .calendar-controls, .calendar-control-row, .calendar-jump { justify-items: stretch; justify-content: stretch; }
  .calendar-control-row > *, .calendar-jump > * { flex: 1 1 auto; }
  .mini-row { grid-template-columns: 1fr; }
  .time-control-row,
  .bulk-time-row {
    grid-template-columns: 1fr;
  }
  .table-wrap table { min-width: 48rem; }
  .desktop-table { display: none; }
  .mobile-list { display: grid; gap: .75rem; }
}

/* Shared premium dashboard and calendar component layer. */
.crm-shell {
  --crm-radius: 9px;
  --crm-control-height: 2.7rem;
  --crm-shadow-hover: 0 18px 38px rgba(15, 23, 42, .12);
}

.crm-stat-link {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: space-between;
  gap: .4rem;
  min-height: 9.3rem;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.crm-stat-link::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--crm-red);
  content: "";
}

.crm-stat-link.stat-orange::before { background: #f58a07; }
.crm-stat-link.stat-green::before { background: #18a058; }
.crm-stat-link.stat-purple::before { background: #9347ff; }

.crm-stat-link__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .65rem;
  color: #374151;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.crm-stat-link__icon {
  display: grid;
  flex: 0 0 2.75rem;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  background: #fff5f5;
  color: var(--crm-red);
}

.stat-orange .crm-stat-link__icon { background: #fff8ec; color: #e07800; }
.stat-green .crm-stat-link__icon { background: #eefaf3; color: #188a4c; }
.stat-purple .crm-stat-link__icon { background: #f5efff; color: #7c3aed; }
.crm-stat-link__icon svg { width: 1.45rem; height: 1.45rem; }

.crm-stat-link strong { align-self: end; }
.crm-stat-link small { color: var(--crm-muted); }
.crm-stat-link__arrow {
  position: absolute;
  right: 1rem;
  bottom: .85rem;
  color: #1f2937;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.crm-stat-link:hover,
.crm-stat-link:focus-visible {
  border-color: rgba(217, 8, 18, .3);
  box-shadow: var(--crm-shadow-hover);
  transform: translateY(-2px);
}

.crm-stat-link:hover .crm-stat-link__arrow,
.crm-stat-link:focus-visible .crm-stat-link__arrow { transform: translateX(3px); }
.crm-stat-link:active { transform: translateY(0); }

.crm-empty-state__icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0 auto .4rem;
  color: #9aa1aa;
}

.crm-empty-state__icon svg { width: 2.4rem; height: 2.4rem; }
.empty-state-large { gap: .35rem; }

.breakdown-list .breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(5rem, 1fr) auto;
  align-items: center;
  gap: .8rem;
}

.breakdown-row__label { min-width: 0; overflow-wrap: anywhere; }
.breakdown-row__meter {
  display: block;
  height: .42rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf2;
}

.breakdown-row__meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--crm-red), #f04b53);
}

.crm-calendar-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
}

.crm-summary-tile {
  display: grid;
  gap: .3rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--crm-line);
  border-left: 3px solid var(--crm-red);
  border-radius: var(--crm-radius);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--crm-shadow);
}

.crm-summary-tile span {
  color: #374151;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.crm-summary-tile strong { font-size: 1.8rem; line-height: 1; }
.crm-summary-tile small { color: var(--crm-muted); }
.crm-summary-tile--green { border-left-color: #18a058; }
.crm-summary-tile--ink { border-left-color: #374151; }
.crm-summary-tile--orange { border-left-color: #f58a07; }

.calendar-grid-scroll { min-width: 0; }
.calendar-grid-month .calendar-day { min-width: 0; }
.calendar-grid-month .month-summary span { border-left: 3px solid #18a058; }
.calendar-grid-month .month-summary span:nth-child(2) { border-left-color: var(--crm-red); }
.calendar-grid-month .month-summary span:nth-child(3) { border-left-color: #374151; }
.calendar-toolbar .muted { max-width: 46rem; }

@media (prefers-reduced-motion: reduce) {
  .crm-stat-link,
  .crm-stat-link__arrow,
  .quick-action { transition: none; }
}

@media (max-width: 1100px) {
  .crm-calendar-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .crm-calendar-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-grid-month {
    grid-template-columns: repeat(7, minmax(8rem, 1fr));
    min-width: 58rem;
  }
  .calendar-grid-scroll { overflow-x: auto; padding-bottom: .5rem; }
}

@media (max-width: 520px) {
  .crm-calendar-summary { grid-template-columns: 1fr; }
  .breakdown-list .breakdown-row { grid-template-columns: minmax(0, 1fr) auto; }
  .breakdown-row__meter { grid-column: 1 / -1; grid-row: 2; }
}

.crm-status-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crm-status-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: .25rem .75rem;
  min-height: 7.2rem;
  padding: .9rem;
  border-left: 3px solid var(--crm-red);
  border-radius: 11px;
  background: linear-gradient(135deg, #fff7f7, #fff);
  box-shadow: var(--crm-shadow-sm);
  transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
}
.crm-status-card__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff1f1; color: var(--crm-red); box-shadow: 0 0 0 .4rem rgba(217, 8, 18, .06); }
.crm-status-card__icon svg { width: 1.35rem; height: 1.35rem; }
.crm-status-card strong { grid-column: 2; color: var(--crm-text); }
.crm-status-card > span:not(.crm-status-card__icon) { grid-column: 2; color: var(--crm-muted); font-size: .84rem; line-height: 1.35; }
.crm-status-card i { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: #374151; font-size: 1.3rem; font-style: normal; }
.crm-status-card:hover, .crm-status-card:focus-visible { border-color: currentColor; box-shadow: var(--crm-shadow-hover); transform: translateY(-3px); }
.crm-status-card--green { border-left-color: #18a058; background: linear-gradient(135deg, #f1fbf5, #fff); }
.crm-status-card--green .crm-status-card__icon { background: #eaf9f0; color: #188a4c; box-shadow: 0 0 0 .4rem rgba(24, 160, 88, .06); }
.crm-status-card--purple { border-left-color: #7c3aed; background: linear-gradient(135deg, #f8f5ff, #fff); }
.crm-status-card--purple .crm-status-card__icon { background: #f2ebff; color: #7c3aed; box-shadow: 0 0 0 .4rem rgba(124, 58, 237, .06); }
.crm-status-card--orange { border-left-color: #e07800; background: linear-gradient(135deg, #fff9ef, #fff); }
.crm-status-card--orange .crm-status-card__icon { background: #fff2da; color: #d97706; box-shadow: 0 0 0 .4rem rgba(245, 138, 7, .06); }
.crm-status-card--teal { border-left-color: #087f73; background: linear-gradient(135deg, #effaf8, #fff); }
.crm-status-card--teal .crm-status-card__icon { background: #e5f7f4; color: #087f73; box-shadow: 0 0 0 .4rem rgba(8, 127, 115, .06); }
.crm-status-card--muted { border-left-color: #64748b; background: linear-gradient(135deg, #f5f7fa, #fff); }
.crm-status-card--muted .crm-status-card__icon { background: #eef1f4; color: #64748b; box-shadow: 0 0 0 .4rem rgba(100, 116, 139, .06); }

.crm-schedule-drawer { margin-top: 1rem; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-soft); overflow: hidden; }
.crm-schedule-drawer summary { padding: .8rem 1rem; color: var(--crm-red); cursor: pointer; font-family: "Arial Narrow", Arial, sans-serif; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.crm-schedule-drawer summary:focus-visible { outline: 3px solid rgba(217, 8, 18, .26); outline-offset: -3px; }
.crm-schedule-drawer__body { padding: 0 1rem 1rem; }
.crm-schedule-drawer__body > p { margin-top: 0; }
.crm-schedule-form { gap: .7rem; }

@media (max-width: 1180px) { .crm-status-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .crm-status-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .crm-status-card-grid { grid-template-columns: 1fr; } }

/* High-fidelity CRM treatment: shared depth, color, and state language. */
.crm-shell {
  --ds-red: #d90812;
  --ds-red-dark: #9d0710;
  --ds-red-soft: #fff1f1;
  --crm-bg: #f5f7fa;
  --crm-surface: #fff;
  --crm-surface-soft: #f7f8fa;
  --crm-border: #dfe3e8;
  --crm-text: #111827;
  --crm-muted: #6b7280;
  --crm-success: #188a4c;
  --crm-success-soft: #eefaf3;
  --crm-warning: #d97706;
  --crm-warning-soft: #fff8ec;
  --crm-purple: #7c3aed;
  --crm-purple-soft: #f5efff;
  --crm-danger: #8e0710;
  --crm-danger-soft: #fff1f1;
  --crm-radius-sm: 8px;
  --crm-radius-md: 11px;
  --crm-radius-lg: 16px;
  --crm-shadow-sm: 0 5px 16px rgba(15, 23, 42, .06);
  --crm-shadow-md: 0 12px 28px rgba(15, 23, 42, .09);
  --crm-shadow-hover: 0 20px 42px rgba(15, 23, 42, .14);
  --crm-transition: 190ms ease;
}

.crm-page-header, .crm-toolbar, .crm-panel { min-width: 0; }
.crm-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.crm-icon-badge { display: grid; place-items: center; border-radius: 50%; }
.crm-status-pill { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .3rem .55rem; border-radius: 7px; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.crm-segmented-control { display: inline-flex; flex-wrap: wrap; gap: .35rem; }

.crm-stat-link {
  min-height: 9.8rem;
  border-radius: 12px;
  box-shadow: var(--crm-shadow-md);
  background-color: #fff;
  background-image: radial-gradient(circle at 91% 17%, rgba(217, 8, 18, .075) 0 1.25rem, transparent 1.3rem), radial-gradient(circle at 96% 12%, transparent 0 1.7rem, rgba(217, 8, 18, .07) 1.75rem 1.8rem, transparent 1.85rem), linear-gradient(135deg, rgba(255, 245, 245, .95), #fff 62%);
}

.crm-stat-link.stat-orange { background-image: radial-gradient(circle at 91% 17%, rgba(245, 138, 7, .08) 0 1.25rem, transparent 1.3rem), radial-gradient(circle at 96% 12%, transparent 0 1.7rem, rgba(245, 138, 7, .07) 1.75rem 1.8rem, transparent 1.85rem), linear-gradient(135deg, rgba(255, 249, 239, .96), #fff 62%); }
.crm-stat-link.stat-green { background-image: radial-gradient(circle at 91% 17%, rgba(24, 160, 88, .08) 0 1.25rem, transparent 1.3rem), radial-gradient(circle at 96% 12%, transparent 0 1.7rem, rgba(24, 160, 88, .07) 1.75rem 1.8rem, transparent 1.85rem), linear-gradient(135deg, rgba(241, 251, 246, .96), #fff 62%); }
.crm-stat-link.stat-purple { background-image: radial-gradient(circle at 91% 17%, rgba(124, 58, 237, .08) 0 1.25rem, transparent 1.3rem), radial-gradient(circle at 96% 12%, transparent 0 1.7rem, rgba(124, 58, 237, .07) 1.75rem 1.8rem, transparent 1.85rem), linear-gradient(135deg, rgba(248, 245, 255, .96), #fff 62%); }
.crm-stat-link.stat-teal { border-left-color: #087f73; background-image: radial-gradient(circle at 91% 17%, rgba(8, 127, 115, .08) 0 1.25rem, transparent 1.3rem), radial-gradient(circle at 96% 12%, transparent 0 1.7rem, rgba(8, 127, 115, .07) 1.75rem 1.8rem, transparent 1.85rem), linear-gradient(135deg, rgba(239, 250, 248, .96), #fff 62%); }
.crm-stat-link.stat-muted { border-left-color: #64748b; background-image: radial-gradient(circle at 91% 17%, rgba(100, 116, 139, .08) 0 1.25rem, transparent 1.3rem), radial-gradient(circle at 96% 12%, transparent 0 1.7rem, rgba(100, 116, 139, .07) 1.75rem 1.8rem, transparent 1.85rem), linear-gradient(135deg, rgba(245, 247, 250, .96), #fff 62%); }

.crm-stat-link__icon {
  width: 3.55rem;
  height: 3.55rem;
  flex-basis: 3.55rem;
  border-radius: 50%;
  box-shadow: 0 0 0 .55rem rgba(217, 8, 18, .07), 0 10px 18px rgba(217, 8, 18, .16);
  transition: transform 160ms ease;
}
.stat-orange .crm-stat-link__icon { box-shadow: 0 0 0 .55rem rgba(245, 138, 7, .08), 0 10px 18px rgba(245, 138, 7, .16); }
.stat-green .crm-stat-link__icon { box-shadow: 0 0 0 .55rem rgba(24, 160, 88, .08), 0 10px 18px rgba(24, 160, 88, .16); }
.stat-purple .crm-stat-link__icon { box-shadow: 0 0 0 .55rem rgba(124, 58, 237, .08), 0 10px 18px rgba(124, 58, 237, .16); }
.stat-teal .crm-stat-link__icon { background: #e5f7f4; color: #087f73; box-shadow: 0 0 0 .55rem rgba(8, 127, 115, .08), 0 10px 18px rgba(8, 127, 115, .16); }
.stat-muted .crm-stat-link__icon { background: #eef1f4; color: #64748b; box-shadow: 0 0 0 .55rem rgba(100, 116, 139, .08), 0 10px 18px rgba(100, 116, 139, .16); }
.crm-stat-link:hover .crm-stat-link__icon, .crm-stat-link:focus-visible .crm-stat-link__icon { transform: scale(1.05); }
.crm-stat-link strong { font-size: clamp(2.15rem, 3vw, 2.85rem); }

.quick-action {
  min-height: 6.65rem;
  border-radius: 10px;
  box-shadow: var(--crm-shadow-sm);
}
.quick-action:hover .quick-action__icon, .quick-action:focus-visible .quick-action__icon { transform: translateY(-2px); }
.quick-action__icon { width: 3rem; height: 3rem; border-radius: 9px; box-shadow: 0 7px 14px rgba(217, 8, 18, .08); transition: transform 160ms ease; }
.quick-action__icon svg { width: 1.55rem; height: 1.55rem; }
.quick-action i { font-size: 1.35rem; }

.breakdown-list .breakdown-row {
  grid-template-columns: 1.55rem minmax(0, 1.25fr) minmax(5rem, 1fr) auto 1rem;
  min-height: 2.8rem;
  padding: .55rem .65rem;
  background: #fbfcfd;
  box-shadow: var(--crm-shadow-sm);
}
.breakdown-row__icon { display: grid; place-items: center; color: var(--crm-red); }
.breakdown-row__icon svg { width: 1.1rem; height: 1.1rem; }
.breakdown-row__count { min-width: 2rem; padding: .2rem .45rem; border-radius: 7px; background: #f1f3f5; text-align: center; }
.breakdown-row__chevron { color: #6b7280; font-size: 1.25rem; line-height: 1; }

.crm-summary-tile {
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  min-height: 6.4rem;
  border-radius: 11px;
  box-shadow: var(--crm-shadow-sm);
}
.crm-summary-tile__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #eefaf3; color: #188a4c; box-shadow: 0 0 0 .45rem rgba(24, 160, 88, .07); }
.crm-summary-tile__icon svg { width: 1.45rem; height: 1.45rem; }
.crm-summary-tile > div { display: grid; gap: .18rem; }
.crm-summary-tile > div > span { font-size: .75rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.crm-summary-tile strong { font-size: 1.8rem; }
.crm-summary-tile--red .crm-summary-tile__icon { background: #fff1f1; color: var(--crm-red); box-shadow: 0 0 0 .45rem rgba(217, 8, 18, .07); }
.crm-summary-tile--orange .crm-summary-tile__icon { background: #fff8ec; color: #e07800; box-shadow: 0 0 0 .45rem rgba(245, 138, 7, .07); }
.crm-summary-tile--purple { border-left-color: #7c3aed; }
.crm-summary-tile--purple .crm-summary-tile__icon { background: #f5efff; color: #7c3aed; box-shadow: 0 0 0 .45rem rgba(124, 58, 237, .07); }

.calendar-grid-month .calendar-day { min-height: 9.6rem; border-radius: 10px; box-shadow: var(--crm-shadow-sm); }
.calendar-grid-month .calendar-day:hover { border-color: rgba(217, 8, 18, .25); box-shadow: var(--crm-shadow-md); }
.calendar-day.is-today { background: linear-gradient(145deg, #fff7f7, #fff); box-shadow: inset 0 0 0 1px rgba(217, 8, 18, .18), var(--crm-shadow-md); }
.calendar-day.is-today h2 a { display: inline-grid; place-items: center; min-width: 2.05rem; min-height: 2.05rem; padding: 0 .35rem; border-radius: 50%; background: var(--crm-red); color: #fff; }
.calendar-day.is-weekend h2 a { color: var(--crm-red); }
.calendar-day.is-today h2 a { color: #fff; }
.calendar-event { grid-template-columns: 1.15rem minmax(0, 1fr); border-radius: 9px; box-shadow: var(--crm-shadow-sm); }
.calendar-event__state { grid-row: 1 / span 3; display: grid; place-items: start center; padding-top: .1rem; color: #188a4c; }
.calendar-event__state svg { width: 1rem; height: 1rem; }
.calendar-event strong, .calendar-event span:not(.calendar-event__state), .calendar-event small { grid-column: 2; }
.calendar-event-pending .calendar-event__state { color: #e07800; }
.calendar-event-confirmed .calendar-event__state { color: var(--crm-red); }
.calendar-event-blocked .calendar-event__state { color: #d97706; }
.month-summary span { display: flex; align-items: center; gap: .35rem; }
.month-summary span b { font-size: .72rem; color: #18a058; }
.month-summary .month-summary__booked b { color: var(--crm-red); }
.month-summary .month-summary__blocked b { color: #d97706; }

@media (max-width: 520px) {
  .crm-stat-link { min-height: 8.8rem; }
  .breakdown-list .breakdown-row { grid-template-columns: 1.35rem minmax(0, 1fr) auto 1rem; }
  .breakdown-row__meter { grid-column: 2 / -1; grid-row: 2; }
}

@media (max-width: 520px) {
  .workspace { padding: .85rem; }
  .topbar, .card, .action-card { border-radius: 8px; }
  .section-split { display: grid; }
}

/* Master CRM redesign layer based on CRM-UI-Redesign.png. */
:root {
  --crm-red: #d90812;
  --crm-red-dark: #9d0710;
  --crm-ink: #090c10;
  --crm-graphite: #14181f;
  --crm-muted: #6b7280;
  --crm-line: #dfe3e8;
  --crm-soft: #f7f8fa;
  --crm-surface: #ffffff;
  --crm-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
}

body {
  background:
    radial-gradient(circle at 88% -10%, rgba(217, 8, 18, 0.045), transparent 26rem),
    linear-gradient(180deg, #fbfbfc 0%, #f4f6f8 100%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.crm-shell {
  grid-template-columns: 18.5rem minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: 1.25rem 1rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(217, 8, 18, 0.16), transparent 13rem),
    linear-gradient(180deg, #15191f 0%, #090c10 100%);
  box-shadow: 10px 0 30px rgba(15, 23, 42, 0.16);
}

.brand {
  display: grid;
  place-items: center;
  min-height: 5.4rem;
  padding: 0.85rem 0.6rem 1.1rem;
}

.brand img {
  width: min(13.5rem, 100%);
}

.side-nav a,
.quick-add a {
  min-height: 3rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f8fafc;
  letter-spacing: 0;
  text-transform: none;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 760;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

.side-nav a span,
.quick-add a span {
  background: transparent;
  color: currentColor;
  font-size: 1.05rem;
}

.side-nav a:hover,
.side-nav a.is-active,
.quick-add a:hover {
  background: linear-gradient(90deg, rgba(217, 8, 18, 0.78), rgba(139, 8, 16, 0.86));
  color: #ffffff;
  transform: translateX(2px);
}

.quick-add {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.25rem;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.quick-add strong {
  padding: 0 0.45rem 0.35rem;
  color: #ffffff;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.workspace {
  padding: clamp(1.25rem, 2.4vw, 2.5rem);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(22rem, auto);
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.topbar h1 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.topbar-title p {
  font-size: 1rem;
}

.topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8rem;
  align-items: center;
}

.global-search {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto;
  width: min(100%, 27rem);
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #ffffff;
}

.global-search input,
.global-search button {
  min-height: 3.1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.global-search button {
  color: #111827;
}

.user-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  align-items: center;
  min-width: 9rem;
  border: 0;
  background: transparent;
}

.user-chip strong {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  background: var(--crm-red);
  color: #ffffff;
}

.card,
.list-card,
.action-card {
  border-color: var(--crm-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--crm-shadow);
}

.stats {
  gap: 1.35rem;
  margin-bottom: 1.35rem;
}

.stat {
  min-height: 8.8rem;
  border-top: 0;
  border-left: 2px solid var(--crm-red);
}

.stat span {
  color: #374151;
  font-size: 0.78rem;
}

.stat strong {
  font-size: clamp(2rem, 3vw, 2.65rem);
}

.stat a {
  justify-self: end;
  color: #111827;
  text-decoration: none;
  font-weight: 900;
}

.stat-orange { border-left-color: #f58a07; }
.stat-green { border-left-color: #18a058; }
.stat-purple { border-left-color: #9347ff; }

.empty-state-large {
  min-height: 12.2rem;
  place-content: center;
  text-align: center;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.quick-action {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.8rem;
  align-items: center;
  min-height: 6.25rem;
  padding: 1rem;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #ffffff;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.quick-action strong {
  grid-column: 2;
  color: #111827;
}

.quick-action span,
.mini-row small,
.selected-course-list span {
  color: var(--crm-muted);
}

.quick-action > span:not(.quick-action__icon) {
  grid-column: 2;
  line-height: 1.35;
}

.quick-action__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(217, 8, 18, 0.18);
  border-radius: 8px;
  background: #fff5f5;
  color: var(--crm-red);
}

.quick-action__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.quick-action i {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #111827;
  font-style: normal;
  font-weight: 900;
}

.quick-action:hover,
.quick-action:focus-visible {
  border-color: rgba(217, 8, 18, 0.34);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.crm-banner {
  min-height: 9rem;
  display: grid;
  place-content: center;
  text-align: center;
  color: #ffffff;
  background:
    linear-gradient(100deg, rgba(217, 8, 18, 0.2), transparent 24%),
    radial-gradient(circle at 12% 50%, rgba(217, 8, 18, 0.32), transparent 7rem),
    linear-gradient(135deg, #101318, #07090d);
}

.crm-banner strong {
  color: var(--crm-red);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.selected-course-list {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #f8fafc;
}

.selected-course-list h3 {
  margin: 0 0 0.25rem;
}

.selected-course-list p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}

.selected-course-list__total {
  padding-top: 0.55rem;
  border-top: 1px solid var(--crm-line);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

@media (max-width: 1180px) {
  .topbar,
  .stats,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  .crm-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    padding: 0.75rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .side-nav {
    display: none;
  }

  .side-nav.is-open {
    display: grid;
  }

  .topbar,
  .topbar-actions,
  .global-search,
  .stats,
  .grid,
  .module-grid,
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    display: grid;
  }

  .topbar-actions .button,
  .global-search {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .workspace {
    padding: 0.85rem;
  }

  .card,
  .list-card,
  .action-card,
  .quick-action {
    border-radius: 7px;
  }
}

/* Gallery module and unified CRM sidebar icon polish. */
.side-nav {
  gap: 0.38rem;
}

.side-nav a,
.quick-add a,
.logout-link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  min-height: 3.08rem;
  padding: 0.68rem 0.78rem;
  border-radius: 8px;
  color: #e8edf4;
  transition: background 170ms ease, color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.side-nav a span,
.quick-add a span,
.logout-link span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  color: currentColor;
}

.side-nav svg,
.quick-add svg,
.logout-link svg {
  width: 1.12rem;
  height: 1.12rem;
  stroke: currentColor;
}

.side-nav a:hover,
.quick-add a:hover,
.logout-link:hover {
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
  box-shadow: inset 3px 0 0 rgba(217, 8, 18, 0.7);
  transform: translateX(1px);
}

.side-nav a.is-active {
  background: linear-gradient(90deg, #b10811 0%, #7c0710 100%);
  color: #ffffff;
  box-shadow: 0 14px 24px rgba(217, 8, 18, 0.16), inset 3px 0 0 #ff3942;
  transform: none;
}

.side-nav a.is-active span {
  background: rgba(255, 255, 255, 0.16);
}

.quick-add {
  gap: 0.35rem;
}

.quick-add strong {
  padding-left: 0.78rem;
}

.gallery-upload-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 0.85fr);
  gap: 1rem;
  align-items: end;
  margin-top: 1.1rem;
}

.gallery-upload-cta {
  display: grid;
  gap: .75rem;
  max-width: 42rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--crm-line);
  border-radius: 9px;
  background: var(--crm-soft);
}

.gallery-upload-cta p {
  margin: 0;
  color: var(--crm-muted);
}

.gallery-storage-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0 0;
}

.gallery-storage-status p {
  display: grid;
  gap: .25rem;
  min-width: 0;
  margin: 0;
  padding: .75rem;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: var(--crm-soft);
}

.gallery-storage-status strong {
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gallery-storage-status span {
  min-width: 0;
  color: var(--crm-muted);
  overflow-wrap: anywhere;
}

.gallery-upload-form .toggle-line {
  align-self: center;
}

.gallery-upload-status {
  min-height: 1.4rem;
  margin: 0;
  color: var(--crm-muted);
}

.gallery-upload-status.is-error {
  color: #8e0710;
  font-weight: 850;
}

.gallery-upload-preview {
  display: grid;
  gap: .5rem;
  margin: 0;
}

.gallery-upload-preview[hidden] {
  display: none;
}

.gallery-upload-preview img {
  width: min(100%, 18rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
}

.gallery-upload-preview figcaption {
  color: var(--crm-muted);
  font-size: .85rem;
}

.crm-modal[hidden] {
  display: none;
}

.crm-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 1.5rem);
}

.crm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 13, .58);
  opacity: 0;
  transition: opacity 160ms ease;
}

.crm-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 42rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.crm-modal.is-open .crm-modal__backdrop,
.crm-modal.is-open .crm-modal__panel {
  opacity: 1;
}

.crm-modal.is-open .crm-modal__panel {
  transform: translateY(0);
}

.crm-modal__close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 7px;
}

.crm-modal-open {
  overflow: hidden;
}

.gallery-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin: 0;
}

.booking-delete-modal__panel {
  width: min(100%, 34rem);
}

.booking-delete-modal__panel h2 {
  margin: 0 2.5rem .65rem 0;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
}

.booking-delete-modal__panel p {
  margin: 0;
  color: var(--crm-muted, #626b75);
  line-height: 1.55;
}

.booking-delete-modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.25rem;
}

.booking-delete-modal__actions button {
  min-width: 8.5rem;
}

@media (max-width: 520px) {
  .booking-delete-modal__actions button {
    flex: 1 1 8.5rem;
  }
}

.booking-slot-choice {
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.booking-slot-choice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.booking-slot-choice__actions label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.7rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.booking-slot-choice__actions label:has(input:checked) {
  border-color: var(--red);
  background: #fff5f5;
}

.booking-slot-choice__actions input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--red);
}

.booking-slot-choice > p { margin: 0; font-size: .85rem; }
.booking-slot-panel { display: none; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); }
.booking-slot-panel > p { margin: 0; font-size: .85rem; font-weight: 500; }
.booking-slot-panel__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.booking-slot-panel__fields label { min-width: 0; }
.booking-new-form:has([data-booking-slot-new]:checked) .booking-slot-panel { display: grid; gap: 1rem; }
.booking-new-form:has([data-booking-slot-new]:checked) .booking-slot-panel.is-staged { display: none; }
.booking-slot-panel > button { justify-self: start; }

@media (max-width: 520px) {
  .booking-slot-choice__actions, .booking-slot-choice__actions label, .booking-slot-panel > button { width: 100%; }
  .booking-slot-panel__fields { grid-template-columns: minmax(0, 1fr); }
}

.toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.7rem;
  font-weight: 850;
}

.toggle-line input {
  width: 1.05rem;
  min-height: 1.05rem;
  accent-color: var(--crm-red);
}

.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gallery-admin-card {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--crm-line);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: var(--crm-shadow);
}

.gallery-admin-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 7px;
  background: var(--crm-soft);
}

.gallery-missing-image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  border: 1px dashed rgba(142, 7, 16, .42);
  border-radius: 7px;
  background: #fff1f1;
  color: #8e0710;
  font-weight: 950;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.gallery-status {
  justify-self: start;
  padding: .34rem .55rem;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gallery-status.is-published {
  background: #e7f5ec;
  color: #145c2b;
}

.gallery-status.is-draft {
  background: #f0eeee;
  color: #686c70;
}

.gallery-admin-card form {
  display: grid;
  gap: 0.7rem;
}

.gallery-admin-card textarea {
  min-height: 5.2rem;
}

.gallery-admin-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: end;
}

.gallery-admin-actions,
.gallery-delete-form {
  display: flex;
  justify-content: flex-start;
}

.gallery-admin-actions button,
.gallery-delete-form button {
  min-width: 7rem;
}

.gallery-admin-card small {
  color: var(--crm-muted);
  font-weight: 750;
}

@media (max-width: 1180px) {
  .gallery-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .gallery-upload-form,
  .gallery-admin-grid,
  .gallery-admin-row,
  .gallery-storage-status {
    grid-template-columns: 1fr;
  }
}

/* Customer lifecycle and dashboard schedule repair. */
.customer-archive-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: .25rem .45rem;
  border-radius: 6px;
  background: #eef1f4;
  color: #5b6269;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.dashboard-booking-row {
  grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr) auto 1rem;
  gap: 1rem;
}

.dashboard-booking-row__datetime {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.dashboard-booking-row__datetime .dashboard-booking-row__icon {
  flex: 0 0 1.2rem;
}

.dashboard-booking-row__time {
  min-width: 0;
  white-space: nowrap;
}

.dashboard-booking-row__details {
  min-width: 0;
}

.dashboard-booking-row__details strong,
.dashboard-booking-row__details small {
  display: block;
  min-width: 0;
}

.dashboard-booking-row__details small {
  margin-top: .18rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-booking-row > .status {
  min-width: 5.4rem;
  text-align: center;
  white-space: nowrap;
}

.dashboard-booking-row__chevron {
  justify-self: end;
}

@media (max-width: 900px) {
  .cleanup-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cleanup-review-grid { grid-template-columns: 1fr; }
  .dashboard-booking-row {
    grid-template-columns: minmax(6rem, 7rem) minmax(0, 1fr) auto 1rem;
    gap: .75rem;
  }
}

@media (max-width: 560px) {
  .cleanup-stat-grid { grid-template-columns: 1fr; }
  .dashboard-booking-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem .7rem;
  }

  .dashboard-booking-row__datetime {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-booking-row__details {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dashboard-booking-row > .status {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .dashboard-booking-row__chevron {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Training journey follow-up workflow. */
.training-journey-card,
.training-appointment-heading {
  border-top: 3px solid var(--red);
}

.training-journey-summary,
.training-appointment-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.training-journey-summary p {
  display: grid;
  gap: .25rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.training-journey-record + .training-journey-record {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.training-journey-card + .training-journey-card {
  margin-top: 16px;
}

.training-journey-steps {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.training-journey-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--crm-border, #dfe3e8);
  border-radius: 8px;
  background: var(--crm-surface-soft, #f7f8fa);
}

.training-journey-step.is-current {
  background: var(--crm-warning-soft, #fff8ec);
  border-color: var(--crm-warning, #d97706);
}

.training-journey-step.is-done {
  background: var(--crm-success-soft, #eefaf3);
}

.training-journey-step__marker {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  color: var(--crm-muted, #6b7280);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.training-journey-step.is-current .training-journey-step__marker { color: var(--crm-warning, #d97706); }
.training-journey-step.is-done .training-journey-step__marker { color: var(--crm-success, #188a4c); }
.training-journey-step strong { display: block; }
.training-journey-step small { display: block; margin-top: 4px; color: var(--crm-muted, #6b7280); line-height: 1.4; }

.training-journey-next {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--crm-border, #dfe3e8);
  border-radius: 8px;
  background: #fff;
}

.training-journey-next .eyebrow { margin: 0; }
.training-journey-next .button { margin-top: 4px; }

.training-journey-related {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.calendar-event-appointment {
  box-shadow: inset 3px 0 0 #7b3fc6;
}

@media (max-width: 600px) {
  .training-journey-summary,
  .training-appointment-overview {
    grid-template-columns: 1fr;
  }
}