/* /connect/admin/views/admin-services.css — Admin "Service Planning" v2
 * "Sanctuary Modern" restyle for Services admin (admin/views/services.js).
 * Loaded AFTER connect-tokens.css, admin-shell.css and admin-views.css so it
 * wins the cascade over the legacy .svcadm-* / .svc-* rules.
 * Scope: .svcadm-* and .svc-* (a tiny .svcadm-page .adm-* helper area).
 * Uses ONLY --bcc-* design tokens (no hardcoded palette colours).
 * Breakpoints: desktop >1024 | tablet ≤1024 | mobile ≤767 | small ≤480.
 * ================================================================ */

/* [hidden] must beat the display rules below (editor panel starts hidden). */
.svcadm-page [hidden] { display: none !important; }

/* ================================================================
   LAYOUT — two panels as elevated cards (list | editor)
=============================================================== */
.svcadm-layout {
  display:               grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap:                   var(--bcc-s5);
  align-items:           start;
  height:                auto;
  overflow:              visible;
}

/* ── Plans list panel ─────────────────────────────────────────── */
.svcadm-list-panel {
  width:          auto;
  flex-shrink:    1;
  border-right:   none;
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  background:     var(--bcc-surface-1);
  box-shadow:     var(--bcc-shadow-1);
  padding:        var(--bcc-s3);
  position:       sticky;
  top:            var(--bcc-s4);
  max-height:     calc(100dvh - 120px);
  overflow-y:     auto;
  overflow-x:     hidden;
  display:        block;
  flex-direction: unset;
}

.svcadm-panel-head {
  padding:       var(--bcc-s2) var(--bcc-s3) var(--bcc-s3);
  border-bottom: 1px solid var(--bcc-border);
  margin-bottom: var(--bcc-s3);
}
.svcadm-panel-title {
  margin:         0;
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-lg);
  font-weight:    600;
  letter-spacing: -.005em;
  color:          var(--bcc-ink);
}

.svcadm-plans-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}

.svcadm-list-empty {
  padding:    var(--bcc-s5) var(--bcc-s3);
  text-align: center;
}
.svcadm-list-empty p { margin: 0 0 var(--bcc-s1); }

/* ── Plan rows ────────────────────────────────────────────────── */
.svcadm-plan-item {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  width:         100%;
  text-align:    left;
  cursor:        pointer;
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-2);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-left:   3px solid transparent;
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s2) var(--bcc-s3);
  transition:    background    var(--bcc-dur-2) var(--bcc-ease),
                 border-color  var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow    var(--bcc-dur-2) var(--bcc-ease),
                 transform     var(--bcc-dur-2) var(--bcc-ease);
}
.svcadm-plan-item:hover {
  background:  var(--bcc-surface-3);
  color:       var(--bcc-ink);
  box-shadow:  var(--bcc-shadow-1);
}
.svcadm-plan-item:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus);
}
.svcadm-plan-item.active {
  background:   var(--bcc-primary-soft);
  border-color: var(--bcc-primary);
  color:        var(--bcc-ink);
}

.svcadm-plan-date-chip {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  flex-shrink:     0;
  border-radius:   var(--bcc-r-sm);
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
  line-height:     1;
}
.svcadm-plan-date-mon {
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: .05em;
}
.svcadm-plan-date-day {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
}
.svcadm-plan-item.active .svcadm-plan-date-chip {
  background: var(--bcc-primary);
  color:      #fff;
}

.svcadm-plan-body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.svcadm-plan-title {
  font-weight:   600;
  color:         var(--bcc-ink);
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}
.svcadm-plan-sub {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
}
.svcadm-plan-meta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--bcc-s1);
  flex-shrink:    0;
}

/* ================================================================
   EDITOR
=============================================================== */
.svcadm-editor-panel {
  flex:       none;
  padding:    0;
  overflow:   visible;
  min-width:  0;
}

.svcadm-editor {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s5);
}

.svcadm-editor-head {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  background:      var(--bcc-surface-1);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-lg);
  box-shadow:      var(--bcc-shadow-1);
  padding:         var(--bcc-s5);
  margin:          0;
}
.svcadm-editor-heading { min-width: 0; }
.svcadm-plan-name {
  margin:      0 0 var(--bcc-s1);
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color:       var(--bcc-ink);
  overflow-wrap: anywhere;
}
.svcadm-plan-meta { line-height: 1.4; }
.svcadm-editor-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--bcc-s2);
}

/* ── Generic section card ─────────────────────────────────────── */
.svcadm-section {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow:    var(--bcc-shadow-1);
  padding:       var(--bcc-s5);
}
.svcadm-items-head {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--bcc-s2) var(--bcc-s3);
  margin-bottom: var(--bcc-s4);
}
.svcadm-section-title {
  margin:      0;
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  letter-spacing: -.005em;
  color:       var(--bcc-ink);
}
.svcadm-total-time {
  margin-left: auto;
  padding:     0;
  border-top:  none;
  text-align:  right;
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-3);
}
.svcadm-items-head #svc-add-item-btn { flex-shrink: 0; }

.svcadm-volunteers-section {
  margin-top:  0;
  padding-top: var(--bcc-s5);
  border-top:  none;
}

/* ── Order of service items ───────────────────────────────────── */
.svc-items-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.svc-item {
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s3) var(--bcc-s4);
  cursor:        default;
  transition:    border-color var(--bcc-dur-1) var(--bcc-ease),
                 background   var(--bcc-dur-1) var(--bcc-ease);
}
.svc-item:hover    { border-color: var(--bcc-border-strong); }
.svc-item--drag-over {
  border-color: var(--bcc-primary);
  background:   var(--bcc-primary-tint);
}
.svc-item.dragging { opacity: .5; border: 1px dashed var(--bcc-primary); }
.svc-item-drag {
  cursor:      grab;
  color:       var(--bcc-ink-3);
  font-size:   1rem;
  flex-shrink: 0;
}
.svc-item-drag:active { cursor: grabbing; }
.svc-item-type-badge { text-transform: capitalize; }
.svc-item-info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.svc-item-title { font-weight: 600; color: var(--bcc-ink); }
.svc-item-notes { overflow-wrap: anywhere; }
.svc-item-duration {
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  color:       var(--bcc-ink-3);
  flex-shrink: 0;
}
.svc-empty-note { padding: var(--bcc-s3); margin: 0; }

/* ================================================================
   AVAILABILITY (new prominent section)
=============================================================== */
.svc-avail-panel {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
}
.svc-avail-summary {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--bcc-s2) var(--bcc-s5);
}
.svc-avail-stat {
  display:     inline-flex;
  align-items: baseline;
  gap:         var(--bcc-s2);
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
}
.svc-avail-stat strong {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
}
.svc-avail-stat--yes  strong { color: var(--bcc-success); }
.svc-avail-stat--no   strong { color: var(--bcc-danger);  }
.svc-avail-stat--none strong { color: var(--bcc-ink-3);   }

.svc-avail-filter-bar { margin: 0; padding: 0; }

.svc-avail-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  max-height:     360px;
  overflow-y:     auto;
  scrollbar-width: thin;
}
.svc-avail-row {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s2) var(--bcc-s3);
  border-radius: var(--bcc-r-sm);
  transition:    background var(--bcc-dur-1) var(--bcc-ease);
}
.svc-avail-row:hover { background: var(--bcc-surface-2); }
.svc-avail-name {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink);
}
.svc-avail-chip {
  flex-shrink:   0;
  padding:       2px 10px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  white-space:   nowrap;
}
.svc-avail-chip--yes  { background: var(--bcc-success-soft); color: var(--bcc-success); }
.svc-avail-chip--no   { background: var(--bcc-danger-soft);  color: var(--bcc-danger);  }
.svc-avail-chip--none { background: var(--bcc-surface-3);    color: var(--bcc-ink-3);   }

.svc-avail-missing {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s4);
  background:    var(--bcc-surface-2);
  border:        1px dashed var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
}
.svc-avail-missing p { margin: 0; }
.svc-avail-missing-icon { font-size: var(--bcc-t-xl); color: var(--bcc-ink-3); }
.svc-avail-empty { padding: var(--bcc-s5); text-align: center; }

/* ================================================================
   ROLE BOARD
=============================================================== */
.svc-role-board {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap:                   var(--bcc-s4);
  align-items:           start;
}
.svc-role-slots {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.svc-role-slot {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--bcc-s2);
  background:    var(--bcc-surface-2);
  border:        1.5px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s3);
  cursor:        pointer;
  transition:    border-color var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow   var(--bcc-dur-2) var(--bcc-ease);
}
.svc-role-slot:hover { border-color: var(--bcc-accent); }
.svc-role-slot--active {
  border-color: var(--bcc-primary);
  box-shadow:   0 0 0 2px var(--bcc-primary-soft);
}
.svc-role-slot--declined { opacity: .75; }
.svc-role-slot--open {
  border-style: dashed;
  background:   var(--bcc-surface-1);
}
.svc-slot-role-name {
  flex:        1 1 100%;
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
}
.svc-slot-count {
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  color:         var(--bcc-ink-3);
  background:    var(--bcc-surface-3);
  border-radius: var(--bcc-r-pill);
  padding:       1px 8px;
}
.svc-slot-person { flex: 1; font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); }
.svc-slot-person-name { color: var(--bcc-ink); }
.svc-slot-empty { color: var(--bcc-ink-3); font-style: italic; }
.svc-slot-actions {
  display:     flex;
  gap:         var(--bcc-s2);
  margin-left: auto;
}

/* ── People panel ─────────────────────────────────────────────── */
.svc-people-panel {
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  overflow:      hidden;
  position:      sticky;
  top:           var(--bcc-s4);
}
.svc-people-panel-head {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s3);
  border-bottom: 1px solid var(--bcc-border);
  background:  var(--bcc-surface-3);
}
.svc-people-panel-head .bcc-input { flex: 1 1 140px; }
.svc-people-panel-list { max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.svc-people-panel-item {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  min-height:  40px;
  padding:     var(--bcc-s2) var(--bcc-s3);
  cursor:      pointer;
  font-size:   var(--bcc-t-sm);
  transition:  background var(--bcc-dur-1) var(--bcc-ease);
}
.svc-people-panel-item:hover { background: var(--bcc-surface-3); }
.svc-people-panel-name {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}
.svc-people-panel-empty {
  padding:    var(--bcc-s4);
  color:      var(--bcc-ink-3);
  font-size:  var(--bcc-t-sm);
  text-align: center;
}

/* ── Availability dots (people panel) — token colours ─────────── */
.svc-avail-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}
.svc-avail-green { background: var(--bcc-success); }
.svc-avail-red   { background: var(--bcc-danger);  }
.svc-avail-grey  { background: var(--bcc-border-strong); }

/* ================================================================
   PENDING SIGN-UPS
=============================================================== */
.svcadm-pending-toggle { cursor: pointer; user-select: none; }
.svcadm-pending-section #svc-pending-count-badge { vertical-align: middle; }
.svc-pending-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.svc-pending-row {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
}
.svc-pending-info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            1px;
}
.svc-pending-name { font-weight: 600; color: var(--bcc-ink); }
.svc-pending-role,
.svc-pending-date { overflow-wrap: anywhere; }
.svc-pending-actions {
  display:     flex;
  gap:         var(--bcc-s2);
  flex-shrink: 0;
}

/* ================================================================
   WORKFLOW TABS
=============================================================== */
.svcadm-tabs { flex-wrap: wrap; }

/* ================================================================
   EDITOR — sticky header + numbered collapsible sections
=============================================================== */
.svcadm-editor-sticky {
  position:      sticky;
  top:           0;
  z-index:       5;
}
.svcadm-editor-actions .bcc-badge { align-self: center; }

.svcadm-sec {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow:    var(--bcc-shadow-1);
}
.svcadm-sec-head {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  width:         100%;
  text-align:    left;
  cursor:        pointer;
  background:    var(--bcc-surface-1);
  border:        none;
  border-bottom: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg) var(--bcc-r-lg) 0 0;
  padding:       var(--bcc-s4) var(--bcc-s5);
  color:         var(--bcc-ink);
}
.svcadm-sec-head:hover { background: var(--bcc-surface-2); }
.svcadm-sec-head:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.svcadm-sec-head .svcadm-section-title { flex: 1; }
.svcadm-sec-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  flex-shrink:     0;
  border-radius:   50%;
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
  font-family:     var(--bcc-font-display);
  font-size:       var(--bcc-t-sm);
  font-weight:     600;
}
.svcadm-sec-status {
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  white-space: nowrap;
  padding:     2px 10px;
  border-radius: var(--bcc-r-pill);
}
.svcadm-sec-status.is-done { background: var(--bcc-success-soft); color: var(--bcc-success); }
.svcadm-sec-status.is-todo { background: var(--bcc-surface-3); color: var(--bcc-ink-3); }
.svcadm-sec-caret { color: var(--bcc-ink-3); font-size: var(--bcc-t-xs); }
.svcadm-sec-body { padding: var(--bcc-s5); }
.svcadm-sec-hint {
  margin:      var(--bcc-s3) 0 0;
  padding:     var(--bcc-s2) var(--bcc-s3);
  background:  var(--bcc-primary-soft);
  border-radius: var(--bcc-r-md);
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
}

/* Section 1 — details grid */
.svcadm-detail-grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--bcc-s3) var(--bcc-s5);
  margin-bottom:         var(--bcc-s4);
}
.svcadm-detail-wide { grid-column: 1 / -1; }
.svcadm-role-warn {
  margin:      0 0 var(--bcc-s3);
  padding:     var(--bcc-s2) var(--bcc-s3);
  background:  var(--bcc-warning-soft, var(--bcc-surface-3));
  color:       var(--bcc-warning, var(--bcc-ink-2));
  border-radius: var(--bcc-r-md);
  font-size:   var(--bcc-t-sm);
}

/* Section 5 — review */
.svcadm-review {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
}
.svcadm-review-status {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--bcc-s3);
}
.svcadm-review-note { margin: 0; font-size: var(--bcc-t-sm); }
.svcadm-review-note.is-draft { color: var(--bcc-warning, var(--bcc-ink-3)); }
.svcadm-review-note.is-live  { color: var(--bcc-success); }
.svcadm-review-actions { display: flex; flex-wrap: wrap; gap: var(--bcc-s2); }

/* ================================================================
   FLOWS / ROLES list rows
=============================================================== */
.svcadm-flow-row,
.svcadm-role-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  margin-bottom: var(--bcc-s2);
}
.svcadm-flow-info,
.svcadm-role-info { flex: 1; min-width: 160px; }
.svcadm-flow-name,
.svcadm-role-name { font-weight: 600; color: var(--bcc-ink); }
.svcadm-role-usage { color: var(--bcc-warning, var(--bcc-ink-3)); }

/* Flow editor role rows */
.svcadm-flow-roles {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.svcadm-flow-role-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
}
.svcadm-flow-role-row .svcadm-flow-role-select { flex: 1; min-width: 0; }
.svcadm-flow-role-row .svcadm-flow-role-count  { width: 72px; flex-shrink: 0; }
.svcadm-flow-empty { padding: var(--bcc-s2) 0; }

/* ── Flow editor order-of-service item rows ───────────────────── */
.svcadm-flow-items {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.svcadm-flow-item-row {
  display:               grid;
  grid-template-columns: 132px minmax(0, 1fr) 72px auto auto auto;
  align-items:           center;
  gap:                   var(--bcc-s2);
}
.svcadm-flow-item-row .svcadm-flow-item-type,
.svcadm-flow-item-row .svcadm-flow-item-title { min-width: 0; }
.svcadm-flow-item-row .svcadm-flow-item-duration { width: 72px; }
.svcadm-flow-item-row .svcadm-flow-item-up,
.svcadm-flow-item-row .svcadm-flow-item-down,
.svcadm-flow-item-row .svcadm-flow-item-remove { flex-shrink: 0; }

/* ── Template picker (New Plan modal) ─────────────────────────── */
.svcadm-template-picker {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.svcadm-template-picker select,
.svcadm-template-picker .bcc-select { width: 100%; }
.svcadm-template-picker > p,
.svcadm-template-picker .bcc-text-xs {
  margin:     0;
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
}

/* ── Apply-template scope options ─────────────────────────────── */
.svcadm-scope-options {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}
.svcadm-scope-option {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
}

/* ── Team badge on a role slot ────────────────────────────────── */
.svc-slot-team {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  flex-shrink:   0;
  white-space:   nowrap;
  padding:       1px 8px;
  border-radius: var(--bcc-r-pill);
  background:    var(--bcc-surface-3);
  color:         var(--bcc-ink-3);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  letter-spacing:.02em;
  line-height:   1.35;
}
.svc-slot-role-name .svc-slot-team { flex-shrink: 0; }

/* ── "Suggest from team" candidate rows ───────────────────────── */
.svc-suggest-list {
  display:         flex;
  flex-direction:  column;
  gap:             var(--bcc-s1);
  max-height:      360px;
  overflow-y:      auto;
  scrollbar-width: thin;
}
.svc-suggest-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--bcc-s2) var(--bcc-s3);
  padding:       var(--bcc-s2) var(--bcc-s3);
  border-top:    1px solid var(--bcc-border);
  transition:    background var(--bcc-dur-1) var(--bcc-ease);
}
.svc-suggest-row:first-child { border-top: none; }
.svc-suggest-row:hover { background: var(--bcc-surface-2); }
.svc-suggest-name {
  flex:          1;
  min-width:     140px;
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
  color:         var(--bcc-ink);
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}
.svc-suggest-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--bcc-s2);
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
}
.svc-suggest-actions {
  display:     flex;
  gap:         var(--bcc-s2);
  margin-left: auto;
  flex-shrink: 0;
}
.svc-suggest-empty {
  padding:    var(--bcc-s3);
  margin:     0;
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
}

/* ================================================================
   REQUESTS
=============================================================== */
.svcadm-req-group { margin-bottom: var(--bcc-s4); }
.svcadm-req-group-head {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           var(--bcc-s2);
  padding-bottom: var(--bcc-s2);
  margin-bottom: var(--bcc-s2);
  border-bottom: 1px solid var(--bcc-border);
}
.svcadm-req-plan-link {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  color:       var(--bcc-ink);
  font-size:   var(--bcc-t-md);
}
.svcadm-req-plan-link:hover { color: var(--bcc-primary); }
.svcadm-req-row {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s2) var(--bcc-s3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  margin-bottom: var(--bcc-s2);
}
.svcadm-req-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.svcadm-req-name { font-weight: 600; color: var(--bcc-ink); }

/* ================================================================
   AVAILABILITY TAB
=============================================================== */
.svcadm-avail-group {
  padding:        var(--bcc-s3) 0;
  border-bottom:  1px solid var(--bcc-border);
}
.svcadm-avail-group:last-child { border-bottom: none; }
.svcadm-avail-group-head {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   baseline;
  gap:           var(--bcc-s3);
  margin-bottom: var(--bcc-s2);
}
.svcadm-avail-lists {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--bcc-s3) var(--bcc-s5);
  margin-top:            var(--bcc-s2);
}
.svcadm-avail-names { font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); overflow-wrap: anywhere; }

/* ================================================================
   RESPONSIVE — tablet ≤1024: stack panels (list above editor)
=============================================================== */
@media (max-width: 1024px) {
  .svcadm-layout { grid-template-columns: 1fr; }
  .svcadm-list-panel {
    position:   static;
    top:        auto;
    max-height: 320px;
  }
  .svc-role-board { grid-template-columns: minmax(0, 1fr) 260px; }
  .svc-people-panel { position: static; }
}

/* ================================================================
   RESPONSIVE — mobile ≤767
=============================================================== */
@media (max-width: 767px) {
  .svcadm-list-panel { max-height: none; }

  .svcadm-editor-head { flex-direction: column; align-items: stretch; }
  .svcadm-editor-actions { width: 100%; }
  .svcadm-editor-actions .bcc-btn { flex: 1 1 auto; }

  .svcadm-total-time { margin-left: 0; }

  .svc-role-board { grid-template-columns: 1fr; }
  .svc-role-slots,
  .svc-people-panel { width: 100%; }

  .svc-avail-list { max-height: none; }

  .svc-pending-row { flex-wrap: wrap; align-items: flex-start; }
  .svc-pending-actions { width: 100%; }
  .svc-pending-actions .bcc-btn { flex: 1 1 auto; }

  .svcadm-detail-grid { grid-template-columns: 1fr; }
  .svcadm-avail-lists { grid-template-columns: 1fr; }
  .svcadm-flow-role-row,
  .svcadm-req-row { flex-wrap: wrap; }
  .svcadm-flow-item-row { grid-template-columns: 1fr; }
  .svcadm-req-row .svc-slot-actions { width: 100%; }
}

/* ================================================================
   RESPONSIVE — small phone ≤480 (≥44px touch targets)
=============================================================== */
@media (max-width: 480px) {
  .svcadm-section,
  .svcadm-editor-head { padding: var(--bcc-s4); }

  .svcadm-plan-item { padding: var(--bcc-s2); }
  .svcadm-plan-date-chip { width: 40px; height: 40px; }
  .svcadm-plan-date-day  { font-size: var(--bcc-t-md); }

  .svcadm-page .bcc-btn,
  .svc-role-slot .bcc-btn,
  .svc-people-panel-item,
  .svc-pending-actions .bcc-btn,
  .svc-avail-filter-pill { min-height: 44px; }
  .svc-role-slot .bcc-btn { padding-left: var(--bcc-s3); padding-right: var(--bcc-s3); }

  .svc-avail-summary { gap: var(--bcc-s2) var(--bcc-s3); }
  .svc-item { padding: var(--bcc-s3); }
}

/* ================================================================
   REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
  .svcadm-page *,
  .svcadm-page *::before,
  .svcadm-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .svcadm-plan-item:hover { transform: none; }
}

/* ================================================================
   PRINT — services.js toggles .svcadm-print-mode on the editor
   wrapper, so only the active plan is sent to the printer.
================================================================ */
@media print {
  body * { visibility: hidden !important; }

  #svcadm-editor-content.svcadm-print-mode,
  #svcadm-editor-content.svcadm-print-mode * { visibility: visible !important; }

  #svcadm-editor-content.svcadm-print-mode {
    position: absolute;
    left:     0;
    top:      0;
    width:    100%;
    margin:   0;
    padding:  0;
  }
  #svcadm-editor-content.svcadm-print-mode .bcc-btn { display: none !important; }
}