/* F40 — ResourcePickerPanel: premium-UI canonical (Cal.com / Linear).
 * Только токены /srv/apps/booking/public/tokens.css + neutral slate-палитра.
 */

.rp-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--cv2-text, #0f172a);
}

.rp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
}

.rp-panel-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cv2-text-muted, #64748b);
}

.rp-selected-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cv2-accent-soft, #e0f2fe);
  color: var(--cv2-accent, #0369a1);
  white-space: nowrap;
}

/* Search */
.rp-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rp-search-icon {
  position: absolute;
  left: 8px;
  display: flex;
  align-items: center;
  color: var(--cv2-text-muted, #94a3b8);
  pointer-events: none;
}
.rp-search-input {
  width: 100%;
  padding: 6px 28px 6px 28px;
  font-size: 13px;
  border: 1px solid var(--cv2-border, #e2e8f0);
  border-radius: 6px;
  background: var(--cv2-bg, #ffffff);
  color: var(--cv2-text, #0f172a);
  outline: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.rp-search-input:focus {
  border-color: var(--cv2-accent, #0369a1);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12);
}
.rp-search-clear {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--cv2-text-muted, #94a3b8);
  cursor: pointer;
  border-radius: 4px;
}
.rp-search-clear:hover {
  background: var(--cv2-bg-soft, #f1f5f9);
  color: var(--cv2-text, #0f172a);
}

/* Status (loading / error / empty) */
.rp-status {
  padding: 8px 4px;
  font-size: 12px;
  color: var(--cv2-text-muted, #94a3b8);
  text-align: center;
}
.rp-status.is-error {
  color: var(--cv2-danger, #e11d48);
}

/* Rows */
.rp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  color: var(--cv2-text, #0f172a);
  font-size: 13px;
  transition: background 150ms ease-out;
}
.rp-row:hover {
  background: var(--cv2-bg-soft, #f1f5f9);
}
.rp-row.is-selected {
  color: var(--cv2-accent, #0369a1);
}
.rp-row-all {
  font-weight: 600;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--cv2-border, #e2e8f0);
  border-radius: 6px 6px 0 0;
  padding-bottom: 8px;
}
.rp-checkbox {
  display: flex;
  align-items: center;
  color: var(--cv2-text-muted, #94a3b8);
  flex: 0 0 14px;
}
.rp-row.is-selected .rp-checkbox {
  color: var(--cv2-accent, #0369a1);
}
.rp-row-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Groups */
.rp-group {
  display: flex;
  flex-direction: column;
}
.rp-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--cv2-text-muted, #475569);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  transition: background 150ms ease-out;
}
.rp-group-head:hover {
  background: var(--cv2-bg-soft, #f1f5f9);
}
.rp-group-chevron {
  display: flex;
  align-items: center;
  color: var(--cv2-text-muted, #94a3b8);
  flex: 0 0 12px;
}
.rp-group-color {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 8px;
}
.rp-group-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.rp-group-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--cv2-text-muted, #94a3b8);
  padding: 1px 6px;
  background: var(--cv2-bg-soft, #f1f5f9);
  border-radius: 999px;
}
.rp-group-body {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
}
.rp-row-resource {
  padding: 4px 8px;
}

/* Dark theme support (если родитель добавляет .is-dark на .cv2-layout) */
.is-dark .rp-panel,
[data-theme="dark"] .rp-panel {
  color: #e2e8f0;
}
.is-dark .rp-panel-title,
.is-dark .rp-group-name,
[data-theme="dark"] .rp-panel-title,
[data-theme="dark"] .rp-group-name {
  color: #94a3b8;
}
.is-dark .rp-search-input,
[data-theme="dark"] .rp-search-input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.is-dark .rp-row:hover,
.is-dark .rp-group-head:hover,
[data-theme="dark"] .rp-row:hover,
[data-theme="dark"] .rp-group-head:hover {
  background: #1e293b;
}
.is-dark .rp-group-count,
[data-theme="dark"] .rp-group-count {
  background: #1e293b;
}