/*
 * select.css — Ops UI Library: SelectField
 * Uses CSS variables from index.html for automatic dark/light theme support
 */

/* ── Trigger (replaces <select>) ─────────────────────────── */

.sf-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    user-select: none;
    box-sizing: border-box;
}

.sf-trigger:hover {
    border-color: var(--text-2);
}

.sf-trigger:focus {
    border-color: var(--accent);
}

.sf-label {
    font-size: 14px;
    color: var(--text-1);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-arrow {
    font-size: 11px;
    color: var(--text-2);
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.15s ease;
    display: inline-block;
}

.sf-arrow--open {
    transform: rotate(180deg);
}

/* ── Dropdown ─────────────────────────────────────────────── */

.sf-dropdown {
    position: absolute;
    z-index: 9500;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    padding: 4px 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.sf-dropdown::-webkit-scrollbar {
    width: 4px;
}
.sf-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.sf-dropdown::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.sf-dropdown--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Items ────────────────────────────────────────────────── */

.sf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 38px;
    cursor: pointer;
    transition: background 0.1s;
}

.sf-item:hover {
    background: var(--sidebar-active);
}

.sf-item--active {
    color: var(--tab-active-text);
}

.sf-item--active:hover {
    background: var(--tab-active-bg);
}

.sf-item-check {
    font-size: 12px;
    width: 14px;
    flex-shrink: 0;
    color: var(--accent);
    text-align: center;
}

.sf-item-text {
    font-size: 14px;
    color: inherit;
}

.sf-item--active .sf-item-text {
    font-weight: 600;
}

/*
 * price.css — Ops UI Library: PriceField
 * Uses CSS variables from index.html for automatic dark/light theme support
 */

.pf-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.pf-amount {
    flex: 2;
    min-width: 0;
}

.pf-currency-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.pf-currency-wrap .sf-trigger {
    width: 100%;
    box-sizing: border-box;
}

/*
 * datepicker.css — Ops UI Library: DatePicker
 * Uses CSS variables from index.html for automatic dark/light theme support
 */

/* ── Wrapper ──────────────────────────────────────────────── */

.dp-wrap {
    position: absolute;
    z-index: 9000;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    user-select: none;
}

.dp-wrap.dp-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Header ───────────────────────────────────────────────── */

.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
}

.dp-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-2);
    font-size: 16px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.dp-nav-btn:hover {
    background: var(--sidebar-active);
    color: var(--text-1);
}

.dp-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
}

.dp-title-month,
.dp-title-year {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s;
}
.dp-title-month:hover,
.dp-title-year:hover {
    background: var(--sidebar-active);
}

/* ── Body — fixed size, always days ──────────────────────── */

.dp-body {
    min-height: 264px;
    display: flex;
    flex-direction: column;
}

/* ── Day grid ─────────────────────────────────────────────── */

.dp-grid {
    padding: 8px;
    flex: 1;
}

.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.dp-weekday {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-2);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    min-width: 32px;
    min-height: 32px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-1);
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    background: transparent;
}
.dp-day:hover {
    background: var(--sidebar-active);
    color: var(--text-1);
}
.dp-day--other-month {
    color: var(--text-2);
    opacity: 0.4;
}
.dp-day--today {
    border-color: var(--accent);
    color: var(--tab-active-text);
}
.dp-day--selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
.dp-day--selected:hover {
    background: var(--accent);
    opacity: 0.9;
}

/* ── Popup overlay ────────────────────────────────────────── */

.dp-popup-overlay {
    position: absolute;
    z-index: 9010;
    pointer-events: auto;
}

.dp-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    cursor: default;
}

.dp-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dp-popup-overlay--visible .dp-popup {
    opacity: 1;
    transform: translateY(0);
}

/* ── Popup nav ────────────────────────────────────────────── */

.dp-popup-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
}

.dp-popup-nav-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    flex: 1;
    text-align: center;
}

/* ── Popup body ───────────────────────────────────────────── */

.dp-popup-body {
    padding: 8px;
}

/* ── Month grid (inside popup) ────────────────────────────── */

.dp-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.dp-month {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-1);
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.1s;
}
.dp-month:hover {
    background: var(--sidebar-active);
}
.dp-month--today {
    border-color: var(--accent);
    color: var(--tab-active-text);
    font-weight: 700;
}
.dp-month--selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
.dp-month--selected:hover {
    opacity: 0.9;
}

/* ── Year grid (inside popup) ─────────────────────────────── */

.dp-years {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.dp-year {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-1);
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.1s;
}
.dp-year:hover {
    background: var(--sidebar-active);
}
.dp-year--today {
    border-color: var(--accent);
    color: var(--tab-active-text);
    font-weight: 700;
}
.dp-year--selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.dp-year--selected:hover {
    opacity: 0.9;
}
.dp-year--other {
    opacity: 0.35;
}

/*
 * file-upload.css — Ops UI Library: FileUpload
 */

.fu-container {
    display: flex;
    flex-direction: column;
}

/* ── Empty state ──────────────────────────────────────────── */

.fu-empty {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fu-btn-upload {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-1);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    white-space: nowrap;
}

.fu-btn-upload:hover {
    border-color: var(--accent);
    background: var(--sidebar-active);
}

.fu-hint {
    font-size: 12px;
    color: var(--text-2);
}

/* ── Selected state ───────────────────────────────────────── */

.fu-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.fu-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.fu-filename {
    flex: 1;
    font-size: 13px;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.fu-btn-download {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--accent);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.fu-btn-download:hover {
    background: var(--sidebar-active);
}

.fu-btn-replace,
.fu-btn-delete {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-2);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.fu-btn-replace:hover {
    color: var(--text-1);
    border-color: var(--accent);
}

.fu-btn-delete:hover {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

/* ── Inline error (size limit, etc.) ─────────────────────── */

.fu-error {
    margin-top: 6px;
    font-size: 12px;
    color: #ef4444;
}

/* ── SearchBox — live text search input for filter bars ───────────────── */

.search-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 0 10px 0 32px;
  height: 36px;
  min-width: 220px;
  transition: border-color .12s ease, background .12s ease;
}

.search-box:focus-within {
  border-color: #3AA7E2;
  background: rgba(255, 255, 255, .06);
}

.search-box--right {
  margin-left: auto;
}

.search-box__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8794a8;
  pointer-events: none;
}

.search-box:focus-within .search-box__icon {
  color: #3AA7E2;
}

.search-box__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #DCE4F0;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  height: 100%;
  min-width: 0;
}

.search-box__input::placeholder {
  color: #8794a8;
  opacity: 1;
}

/**
 * digit-field.css — Ops UI Library: DigitField visual feedback
 *
 * Single rule that paints an input red while its current length is non-empty
 * but does not match any allowed lengths. Toggled by lib/digit-field.js.
 *
 * `!important` is required to override the default `.sl-input` background from
 * slider.js — slider form fields use rendering-specific selectors with higher
 * specificity than a plain class.
 */

.is-invalid-length {
    background: rgba(244, 67, 54, 0.15) !important;
    border-color: #e57373 !important;
    transition: background 0.2s, border-color 0.2s;
}

/**
 * inn-field.css — Ops UI Library: InnField visual layer
 *
 * Absolute-positioned autosuggest dropdown anchored to the wrapper.
 * The wrapper itself stays inline-block so the input keeps its slider field
 * layout; the dropdown floats below without disturbing siblings.
 *
 * Empty state — `display: none`. Open state — `.is-open` toggle from JS.
 *
 * Block 6.3.3 of task radar-os--479-contractors-mode.
 */

.if-wrapper {
    position: relative;
    display: block;
}

.if-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9500;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    color: var(--text);
}

.if-dropdown.is-open {
    display: block;
}

.if-dropdown-row {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.35;
    color: var(--text);
}

.if-dropdown-row:hover {
    background: var(--sidebar-active, rgba(255, 255, 255, 0.06));
}

.if-dropdown-icon {
    margin-right: 6px;
}

.if-dropdown-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-2);
}

/**
 * address-field.css — Ops UI Library: AddressField visual layer
 *
 * Mirrors inn-field.css with `af-` prefix. Same absolute-positioned dropdown
 * pattern — slightly higher max-height since address suggestions list is
 * typically longer (up to 10 rows).
 *
 * Block 6.3.3 of task radar-os--479-contractors-mode.
 */

.af-wrapper {
    position: relative;
    display: block;
}

.af-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9500;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    max-height: 320px;
    overflow-y: auto;
    display: none;
    color: var(--text);
}

.af-dropdown.is-open {
    display: block;
}

.af-dropdown-row {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.35;
    font-size: 13px;
    color: var(--text);
}

.af-dropdown-row:hover {
    background: var(--sidebar-active, rgba(255, 255, 255, 0.06));
}

/**
 * counterparty-picker.css — styles for counterparty-select field
 *
 * Used by window.CounterpartySelect (see counterparty-picker.js).
 * Uses team CSS vars: --bg-2 / --border / --text / --primary / --danger.
 *
 * Task: radar-os--479 block 74.
 */

.cp-container {
  position: relative;
  width: 100%;
}

.cp-field {
  position: relative;
  display: flex;
  align-items: center;
}

.cp-input {
  width: 100%;
  padding-right: 28px;
}

.cp-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text, #b8bcc4);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
}

.cp-clear:hover {
  background: var(--bg-2, #1a1e28);
  color: var(--text, #e6e6e6);
}

/* Block 747 round 2 task 479 — «selected input» state + meta caption below */
.cp-container.cp-selected .cp-input {
  border-color: var(--accent, #6366f1);
  background: rgba(99, 102, 241, 0.06);
}

.cp-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted, #8a8f99);
  padding-left: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-meta[hidden] {
  display: none;
}

/* Dropdown container */
.cp-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg-2, #1a1e28);
  border: 1px solid var(--border, #2a2e38);
  border-radius: 8px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.cp-dropdown[hidden] {
  display: none;
}

/* Search result row */
.cp-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #2a2e38);
  transition: background 0.1s;
}

.cp-item:last-child {
  border-bottom: none;
}

.cp-item:hover {
  background: var(--bg-3, #232833);
}

.cp-item-name {
  font-size: 14px;
  color: var(--text, #e6e6e6);
  font-weight: 500;
}

.cp-item-meta {
  font-size: 12px;
  color: var(--text-muted, #8a8f99);
  margin-top: 2px;
}

/* «➕ Создать» row */
.cp-item-create {
  padding: 12px 14px;
  cursor: pointer;
  background: var(--bg-3, #232833);
  border-top: 1px dashed var(--border, #2a2e38);
  color: var(--primary, #4ea4d6);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.1s;
}

.cp-item-create:hover {
  background: var(--primary, #4ea4d6);
  color: #fff;
}

.cp-item-create b {
  font-weight: 600;
}

/* Mini-form (rendered inside dropdown) */
.cp-miniform {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-mf-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #e6e6e6);
  margin-bottom: 4px;
}

.cp-mf-label {
  font-size: 12px;
  color: var(--text-muted, #8a8f99);
  margin-top: 2px;
}

.cp-mf-name,
.cp-mf-inn .if-input,
.cp-mf-type {
  width: 100%;
}

.cp-mf-inn {
  position: relative;
}

.cp-mf-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.cp-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, opacity 0.15s;
}

.cp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cp-btn-primary {
  background: var(--primary, #4ea4d6);
  color: #fff;
  flex: 1;
}

.cp-btn-primary:hover:not(:disabled) {
  background: var(--primary-hover, #6EC1FF);
}

.cp-btn-secondary {
  background: transparent;
  border-color: var(--border, #2a2e38);
  color: var(--text, #e6e6e6);
}

.cp-btn-secondary:hover {
  background: var(--bg-3, #232833);
}

.cp-mf-error {
  color: var(--danger, #dc4a4a);
  font-size: 13px;
  padding: 8px 10px;
  background: rgba(220, 74, 74, 0.1);
  border-radius: 6px;
  margin-top: 4px;
}

.cp-mf-error[hidden] {
  display: none;
}

/**
 * load-more.css — companion styles for lib/load-more.js
 *
 * Loaded globally via <link> в index.html — доступен всем модам Team Portal.
 * Ранее правила жили в history-tab.css → страдали моды где load-more используется
 * без параллельной загрузки истории (payments_control, documents_control).
 * Extracted in block 2106.2 task radar-os--604.
 */

/* ── LoadMore button ────── */

.load-more-btn {
  padding: 8px 24px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 6px;
  background: transparent;
  color: var(--fg, #e8edf5);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}

.load-more-btn:hover:not(:disabled) {
  border-color: var(--accent, #3aa7e2);
  background: rgba(58, 167, 226, 0.06);
}

.load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.load-more-btn--loading {
  opacity: 0.7;
}

/* ── payments_control footer container (Block 2106.1) ────── */

#p-load-more {
  margin: 12px 0;
  text-align: center;
}

/* ── payments_control table wrapper — scroll room под sticky totals bar (Block 2106.3) ────── */
/* 60px = высота .payments-totals-bar (padding 11+11 + font-size 15 + border 2) + запас. */
/* Без padding-bottom последняя строка таблицы прячется под sticky «Итого» при скролле в конец. */

#p-table-wrap {
  padding-bottom: 60px;
}

/**
 * link-picker.css — styling для LinkPicker two-step primitive.
 *
 * Task: radar-os--593-leads-mode-launch, Block 3006.
 * Consumer: Slider «Связи» tab (Block 3008).
 * Class prefix: .lp-* (unique — no collision with .cp-* / .es-* / .fb-* / .t-*).
 */

.lp-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}

/* ── Step 1: mode selection ─────────────────────────────────── */

.lp-mode-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-mode-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--t-border, #2a2f3a);
  border-radius: 6px;
  background: var(--t-surface-2, #12151d);
  color: var(--t-text, #e6e8ec);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.lp-mode-item:hover {
  background: var(--t-surface-3, #1a1e28);
  border-color: var(--t-accent, #5b8def);
}

.lp-mode-item:focus {
  outline: 2px solid var(--t-accent, #5b8def);
  outline-offset: 1px;
}

/* ── Step 2: item search ────────────────────────────────────── */

.lp-item-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.lp-back-btn {
  align-self: flex-start;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--t-accent, #5b8def);
  font-size: 13px;
  cursor: pointer;
}

.lp-back-btn:hover {
  text-decoration: underline;
}

.lp-input-wrap {
  position: relative;
}

.lp-input {
  width: 100%;
  padding: 8px 32px 8px 10px;
  border: 1px solid var(--t-border, #2a2f3a);
  border-radius: 6px;
  background: var(--t-surface-2, #12151d);
  color: var(--t-text, #e6e8ec);
  font-size: 14px;
  box-sizing: border-box;
}

.lp-clear-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--t-text-dim, #8a8f9a);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
}

.lp-clear-btn[hidden] {
  display: none;
}

.lp-dropdown {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--t-border, #2a2f3a);
  border-radius: 6px;
  background: var(--t-surface-2, #12151d);
}

.lp-dropdown[hidden] {
  display: none;
}

.lp-item-row {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--t-text, #e6e8ec);
  font-size: 14px;
  border-bottom: 1px solid var(--t-border-soft, #1e2129);
}

.lp-item-row:last-child {
  border-bottom: none;
}

.lp-item-row:hover {
  background: var(--t-surface-3, #1a1e28);
}

.lp-empty {
  padding: 12px;
  color: var(--t-text-dim, #8a8f9a);
  font-size: 13px;
  text-align: center;
}

/*
 * status-badge.css — Team Portal UI primitive: variant-based dot + label badge.
 *
 * Companion to lib/status-badge.js (Block 1101 of task radar-os--455-docs-control-mode).
 *
 * Colors via CSS variables `--badge-{variant}-color` defined by caller
 * (mod styles.css or scoped scope). Unknown/undefined variant falls back to
 * `--badge-color` default (gray #6b7280) — graceful degradation.
 *
 * Loaded via <link> in team/index.html (after legacy lib CSS files).
 */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--badge-color, #6b7280);
}
.status-badge--success  { --badge-color: var(--badge-success-color, #22c55e); }
.status-badge--danger   { --badge-color: var(--badge-danger-color,  #ef4444); }
.status-badge--warning  { --badge-color: var(--badge-warning-color, #f4a300); }
.status-badge--info     { --badge-color: var(--badge-info-color,    #38bdf8); }
.status-badge--muted    { --badge-color: var(--badge-muted-color,   #9ca3af); }
.status-badge--accent   { --badge-color: var(--badge-accent-color,  #3b82f6); }
.status-badge--draft    { --badge-color: var(--badge-draft-color,   #f4a300); }
.status-badge--archived { --badge-color: var(--badge-archived-color, #6b7280); opacity: 0.65; }

/**
 * heatmap.css — companion styles for radar/team/lib/heatmap.js primitive.
 *
 * Theme-adaptive palette using CSS custom properties + фирменные цвета
 * radar-os (primary #3AA7E2 blue scale, hover #6EC1FF).
 * Row labels use `currentColor` — inherits от parent text color (works
 * автоматом на dark и light themes без override).
 * Cell b0 (empty) — subtle rgba independent of theme + prefers-color-scheme
 * light adaptation.
 *
 * Consumer может override любую variable через `.heatmap-grid { --var: X; }`.
 *
 * Block 3006 initial + Block 3013 R5 theme refactor (task radar-os--631).
 */

.heatmap-grid {
  /* Theme-adaptive CSS variables (default dark theme, radar-os brand). */
  --heatmap-bg:              transparent;
  --heatmap-corner:          transparent;
  --heatmap-row-label:       currentColor;
  --heatmap-row-sublabel:    currentColor;
  --heatmap-col-header:      currentColor;
  --heatmap-hover-outline:   #6EC1FF;
  --heatmap-row-hover-bg:    rgba(58, 167, 226, 0.08);
  --heatmap-cell-b0:         rgba(255, 255, 255, 0.04);
  --heatmap-cell-b1:         rgba(58, 167, 226, 0.20);
  --heatmap-cell-b2:         rgba(58, 167, 226, 0.35);
  --heatmap-cell-b3:         rgba(58, 167, 226, 0.50);
  --heatmap-cell-b4:         rgba(58, 167, 226, 0.65);
  --heatmap-cell-b5:         rgba(58, 167, 226, 0.80);
  --heatmap-cell-b6:         rgba(58, 167, 226, 0.92);
  --heatmap-cell-b7:         #3AA7E2;

  display: grid;
  gap: 3px;
  padding: 12px;
  align-items: center;
  overflow-x: auto;
  background: var(--heatmap-bg);
  border-radius: 8px;
}

/* Light theme adaptation — dark cell b0 на светлом фоне. */
@media (prefers-color-scheme: light) {
  .heatmap-grid {
    --heatmap-cell-b0: rgba(0, 0, 0, 0.05);
  }
}

.heatmap-corner {
  background: var(--heatmap-corner);
}

.heatmap-col-header {
  font-size: 10px;
  color: var(--heatmap-col-header);
  opacity: 0.55;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 4px;
  min-width: 14px;
}

.heatmap-row-label {
  font-size: 13px;
  color: var(--heatmap-row-label);
  cursor: pointer;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s ease;
}

/* Block 3020 R6: full-row hover через display:contents wrapper.
   `:hover` на wrapper подсвечивает label + все cells той же row. */
.heatmap-row:hover .heatmap-row-label,
.heatmap-row:hover .heatmap-cell {
  background: var(--heatmap-row-hover-bg);
}

.heatmap-row-name {
  display: block;
  font-weight: 500;
}

.heatmap-row-sublabel {
  display: block;
  font-size: 11px;
  color: var(--heatmap-row-sublabel);
  opacity: 0.6;
  margin-top: 2px;
}

.heatmap-cell {
  width: 100%;
  height: 22px;
  border-radius: 2px;
  cursor: pointer;
  transition: outline 0.1s ease;
}

.heatmap-cell:hover {
  outline: 1px solid var(--heatmap-hover-outline);
  outline-offset: 1px;
}

/* Brightness scale — radar-os primary blue (var-driven, override-friendly). */
.heatmap-cell--b0 { background: var(--heatmap-cell-b0); cursor: default; }
.heatmap-cell--b0:hover { outline: none; }

.heatmap-cell--b1 { background: var(--heatmap-cell-b1); }
.heatmap-cell--b2 { background: var(--heatmap-cell-b2); }
.heatmap-cell--b3 { background: var(--heatmap-cell-b3); }
.heatmap-cell--b4 { background: var(--heatmap-cell-b4); }
.heatmap-cell--b5 { background: var(--heatmap-cell-b5); }
.heatmap-cell--b6 { background: var(--heatmap-cell-b6); }
.heatmap-cell--b7 { background: var(--heatmap-cell-b7); }

/* Empty state. */
.heatmap-empty {
  padding: 32px;
  text-align: center;
  color: currentColor;
  opacity: 0.6;
  font-style: italic;
}

/* Responsive — allow horizontal scroll on narrow viewports. */
@media (max-width: 900px) {
  .heatmap-grid {
    padding: 8px;
    gap: 2px;
  }
  .heatmap-col-header {
    font-size: 9px;
  }
  .heatmap-row-label {
    font-size: 12px;
    padding-right: 4px;
  }
}

/*
 * composition-pane.css — Team Portal UI primitive: list of items with per-item
 * fields, optional drag&drop reorder, add/remove, readOnly preview mode.
 *
 * Companion to lib/composition-pane.js (Block 1102 of task radar-os--455-docs-control-mode).
 *
 * Generic class names. Mode-specific overrides via .composition-pane scope или
 * wrapping container.
 *
 * Loaded via <link> in team/index.html (after legacy lib CSS files).
 */

.composition-pane__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.composition-pane__block {
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  gap: 8px;
  align-items: start;
  padding: 12px;
  background: var(--surface-panel, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--sidebar-pill-border, rgba(255, 255, 255, 0.10));
  border-radius: 8px;
}
.composition-pane__handle {
  cursor: grab;
  user-select: none;
  font-size: 18px;
  line-height: 1;
  color: var(--text-soft, #93a4c0);
  padding-top: 2px;
  text-align: center;
}
.composition-pane__handle:active { cursor: grabbing; }
.composition-pane__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.composition-pane__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.composition-pane__row--full { grid-template-columns: 1fr; }
.composition-pane__block .field-textarea { min-height: 60px; resize: vertical; }
.composition-pane__block select.field-text { padding-right: 32px; }
.composition-pane__remove {
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-soft, #93a4c0);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.composition-pane__remove:hover { color: #ef4444; }
.composition-pane__block--dragging { opacity: 0.4; }
.composition-pane__block--drag-over { box-shadow: 0 0 0 2px #3aa7e2 inset; }
.composition-pane__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.composition-pane__doc-name {
  font-weight: 600;
  color: #e5e7eb;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composition-pane__add-btn {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: var(--text-soft, #93a4c0);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}
.composition-pane__add-btn:hover { border-color: #3aa7e2; color: #ffffff; }
.composition-pane__empty { color: var(--text-soft, #93a4c0); font-size: 13px; padding: 12px 0; }
/* readOnly modifier — hide handle/remove, full-width block */
.composition-pane--readonly .composition-pane__block { grid-template-columns: 1fr; }
.composition-pane--readonly .composition-pane__handle,
.composition-pane--readonly .composition-pane__remove { display: none; }

/* Block 1501.2.1 — opt-in per-item extension slots (blockSlots config).
   afterFields: caller-rendered content inside body after fields rows.
   actions: caller-rendered footer (e.g. approve/reject buttons). */
.composition-pane__after-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composition-pane__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sidebar-pill-border, rgba(255, 255, 255, 0.10));
}

/* Block 1503 — opt-in footer slot rendered AFTER actions (last element in block).
   Used by documents_control to surface rejection reason + history below the
   member workspace (fields + files + buttons). */
.composition-pane__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

/* view-toggle.css — Team Portal client UI primitive: compact button-group toggle.
 *
 * BEM-style classes:
 *   .view-toggle              — inline-flex pill container
 *   .view-toggle__btn         — individual mode button (default state)
 *   .view-toggle__btn--active — currently selected mode (accent background)
 *
 * Dark theme compatible via existing CSS vars (--accent, --bg-2, --text-2, --line-2, --text).
 *
 * Block 1203 of task radar-os--455-docs-control-mode.
 */

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.10));
  border-radius: 8px;
  overflow: hidden;
}

.view-toggle__btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--text-2, #93a4c0);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.view-toggle__btn:hover {
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
  color: var(--text, #e5e7eb);
}

.view-toggle__btn--active,
.view-toggle__btn--active:hover {
  background: var(--accent, #6366f1);
  color: #ffffff;
}

/**
 * settings-toggle.css — Team Portal lib primitive: iPhone-style boolean toggle switch.
 *
 * Migrated from radar/team/team.css:2475-2494 (block 3001 of task radar-os--476).
 * Block 5006 (task radar-os--547): saffron variant class for accent semantics
 * (pin/star/favorite indicators) vs default green (settings on/off).
 *
 * Used in: owner_questions_filter (settings tab), notes (Slider is_pinned +
 * card grid instant pin toggle — saffron variant).
 *
 * CSS variables: --line-2 (track background, dark theme line color).
 * Default active color hardcoded #4caf50 (green) — Apple-style settings UX.
 *
 * Public markup contract:
 *   <label class="settings-toggle">                            (default green)
 *   <label class="settings-toggle settings-toggle--saffron">   (saffron accent)
 *     <input type="checkbox" />
 *     <span class="settings-toggle__track"></span>
 *   </label>
 *
 * Variants:
 *   .settings-toggle--saffron — brand saffron #F4A300 (Radar OS pin accent).
 *   Add more here when semantic accents needed (blue/red/etc).
 */

.settings-toggle { display:inline-flex; align-items:center; cursor:pointer; }
.settings-toggle input { position:absolute; opacity:0; width:0; height:0; }
.settings-toggle__track {
  position:relative; display:inline-block;
  width:40px; height:22px;
  background:var(--line-2, #3a3a3a);
  border-radius:999px;
  transition:background .2s;
  flex-shrink:0;
}
.settings-toggle__track::after {
  content:''; position:absolute;
  top:3px; left:3px;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s;
}
.settings-toggle input:checked + .settings-toggle__track { background:#4caf50; }
.settings-toggle input:checked + .settings-toggle__track::after { transform:translateX(18px); }

/* Saffron variant — brand accent для pin/star/favorite semantics (block 5006). */
.settings-toggle--saffron input:checked + .settings-toggle__track { background:#F4A300; }

/* notice-box.css — Team Portal lib primitive: informational callout / notice banner.
   3 tones: info (blue) / warning (amber) / danger (red).
   Loaded via <link> в radar/team/index.html.
   Block 3090 (task radar-os--510-crew-mode). */

.notice-box {
  padding: 10px 12px;
  border-left: 3px solid transparent;
  border-radius: 4px;
  color: #cbd6e8;
  font-size: 13px;
  line-height: 1.45;
}

.notice-box--info {
  background: rgba(58, 167, 226, 0.08);
  border-left-color: #3AA7E2;
}

.notice-box--warning {
  background: rgba(244, 163, 0, 0.10);
  border-left-color: #F4A300;
}

.notice-box--danger {
  background: rgba(220, 74, 74, 0.10);
  border-left-color: #DC4A4A;
}

.notice-box b {
  color: #e8edf5;
}

.notice-box a {
  color: inherit;
  text-decoration: underline;
}

/* settings-row.css — Team Portal lib primitive: settings list row.
   Flex row layout: title + subtitle слева, control slot справа.
   Loaded via <link> в radar/team/index.html.
   Block 3090 (task radar-os--510-crew-mode). */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.settings-row__meta {
  flex: 1;
  min-width: 0;
}

.settings-row__title {
  color: #e8edf5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.settings-row__subtitle {
  color: #6c7789;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  margin-top: 2px;
}

.settings-row__control {
  flex-shrink: 0;
}

/**
 * notes-card.css — lib primitive: card grid layout для коротких заметок.
 *
 * Extracted from monolith team.css per memory `feedback_no_monolith_css` —
 * каждый visual primitive = свой lib/*.css файл.
 *
 * Task: radar-os--547-notes-mode-unified, block 3050 (⭐ lib-first anchor per
 * CADENCE_HEURISTICS v1.0.2 §5 Q6). Producer of `.notes-grid` + `.note-card`
 * classes consumed by block 3055 render.
 *
 * Reference pattern: training `.prog-grid` + `.prog-card` (radar/team/team.css)
 * — но здесь extracted в lib/ вместо monolith, готово к future reuse
 * (courses / kb-cards / short-text modes).
 *
 * Loaded via radar/team/index.html <link rel="stylesheet"> (block 5004 fix,
 * task radar-os--547 audit-doc hole #3). NOT loaded via manifest.deps.esm —
 * mode_loader._validateDeps (radar/team/src/mode_loader.js:111) requires each
 * esm entry to return content-type=application/javascript, CSS files return
 * text/css and fail validation → mode init skipped → error renderer.
 * All lib CSS primitives follow this pattern (sibling <link> lines in index.html).
 *
 * Structure:
 *   .notes-grid                       — CSS Grid container, responsive 4→3→1 cols
 *   .note-card                        — single note card, badge/text/entity-sub/footer layout
 *   .note-card__badge                 — entity_type label top-left (Контакт/Встреча/Задача)
 *   .note-card__badge--contact        — color variant by entity_type (contact = blue)
 *   .note-card__badge--meeting        — meeting = purple
 *   .note-card__badge--task           — task = green
 *   .note-card__badge--offer          — offer = orange
 *   .note-card__text                  — main body, 3-line clamp
 *   .note-card__entity-sub            — «Клиент Иван» / «Встреча 2026-07-11» attach preview
 *   .note-card__footer                — bottom row: pin icon + relative time
 *   .note-card__pin                   — 📌 icon (visible when is_pinned=1)
 *   .note-card__time                  — «5 мин назад» / «12 июля» relative datetime
 *   .note-card--pinned                — modifier: subtle top border accent когда pinned
 */

/* ============================================================
 * Grid container — responsive breakpoints
 * ============================================================ */

.notes-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  padding: 16px 0;
}

/* Tablet: 3 cols cap */
@media (max-width: 1200px) {
  .notes-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* Mobile: 1 col */
@media (max-width: 640px) {
  .notes-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 0;
  }
}

/* ============================================================
 * Card container
 * ============================================================ */

.note-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--panel-bg, #0d1828);
  border: 1px solid var(--panel-border, #1a2942);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
  min-height: 120px;
}

.note-card:hover {
  border-color: var(--accent, #3aa7e2);
  transform: translateY(-1px);
}

.note-card--pinned {
  border-top: 2px solid var(--saffron, #F4A300);
}

/* ============================================================
 * Badge — entity_type tag top-left
 * ============================================================ */

.note-card__badge {
  align-self: flex-start;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 999px;
  color: var(--text-secondary, #8a9ab5);
  background: rgba(138, 154, 181, 0.12);
}

.note-card__badge--contact {
  color: #7cc2ff;
  background: rgba(124, 194, 255, 0.14);
}

.note-card__badge--meeting {
  color: #b19cff;
  background: rgba(177, 156, 255, 0.14);
}

.note-card__badge--task {
  color: #7ae0a3;
  background: rgba(122, 224, 163, 0.14);
}

.note-card__badge--offer {
  color: #ffb27a;
  background: rgba(255, 178, 122, 0.14);
}

/* ============================================================
 * Text body — 3 line clamp
 * ============================================================ */

.note-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary, #e8edf5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* ============================================================
 * Entity subtitle — «прикреплено к»
 * ============================================================ */

.note-card__entity-sub {
  font-size: 12px;
  color: var(--text-secondary, #8a9ab5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 * Footer — pin icon + relative time
 * ============================================================ */

.note-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(138, 154, 181, 0.1);
}

.note-card__pin {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}

.note-card__pin--hidden {
  visibility: hidden;
}

.note-card__time {
  font-size: 11px;
  color: var(--text-secondary, #8a9ab5);
}

/* ============================================================
 * Empty state (grid contains только empty placeholder)
 * ============================================================ */

.notes-grid--empty {
  display: block;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary, #8a9ab5);
  font-size: 14px;
}

/* vendor-card — shared card layout для vendor listings.
 *
 * Extracted 2026-08-12 (task 671 block 560) из modes/integrations/styles.css
 * для reuse в mode integrations panel (Settings tab режимов) + integrations mode
 * (каталог vendor'ов в Team Portal).
 *
 * Contract: .integrations-grid + .service-card (+ __body / __name / __desc /
 * __footer / __type / __status modifiers). Filter tabs через
 * `.integrations-grid[data-filter="X"]` — CSS hides non-matching cards.
 *
 * Consumers:
 *   - radar/team/src/modes/integrations/page.js (каталог)
 *   - radar/team/src/lib/mode-integrations-panel.js (mode Settings panel)
 */

.integrations-loading {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.integrations-grid[data-filter="ai"] .service-card:not([data-type="ai"]) { display: none; }
.integrations-grid[data-filter="crm"] .service-card:not([data-type="crm"]) { display: none; }
.integrations-grid[data-filter="communications"] .service-card:not([data-type="communications"]) { display: none; }
.integrations-grid[data-filter="other"] .service-card:not([data-type="other"]) { display: none; }

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--overlay-subtle);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.service-card:hover {
  border-color: var(--overlay-strong);
  background: var(--overlay-subtle);
  transform: translateY(-2px);
}

.service-card__body {
  flex: 1;
  min-height: 3rem;
}

.service-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.service-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.service-card__type {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--overlay-subtle);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}

.service-card__status {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
}

.service-card__status--connected {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.15);
}

.service-card__status--idle {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.15);
}

.service-card__status--needs-key {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
}

.service-card__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Block 590: disabled state — vendor не установлен в bus_tenant_connections для тенанта.
 * Toggle grayed + not-clickable (input[disabled] handles pointer events).
 * Card остаётся visible, только status badge amber + toggle disabled.
 */
.service-card--not-installed .settings-toggle {
  opacity: 0.4;
  cursor: not-allowed;
}
.service-card--not-installed .settings-toggle input[type="checkbox"] {
  cursor: not-allowed;
}

/**
 * time-picker.css — Team Portal lib primitive: two-dropdown time selector.
 *
 * Layout: flexbox 50/50 hours left / minutes right (block 9003 task 546).
 * Consistent styling с existing select fields (reuse .field-text-like appearance).
 *
 * Public markup contract (per time-picker.js:24-30):
 *   <div class="time-picker">
 *     <select class="time-picker__hh">...</select>
 *     <select class="time-picker__mm">...</select>
 *   </div>
 */

.time-picker {
  display: flex;
  gap: 8px;
  width: 100%;
}

.time-picker__hh,
.time-picker__mm {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line-2, #3a3a3a);
  border-radius: 6px;
  background: var(--input-bg, #0f1b2c);
  color: var(--text-primary, #e8edf5);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.time-picker__hh:focus,
.time-picker__mm:focus {
  outline: none;
  border-color: var(--accent, #3aa7e2);
}

/*
 * format-icons.css — Team Portal lib primitive styles.
 *
 * Block 2010 task radar-os--546. See format-icons.js for design decisions.
 *
 * Base .fmt-icon: 24×24 monochrome stroke SVG wrapper.
 * Size modifiers: --sm (18×18), --lg (32×32). Inline size override via style attr.
 * Color: currentColor from parent — automatic contrast (active pill = white on accent).
 */

.fmt-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  vertical-align: middle;
  flex-shrink: 0;
}

.fmt-icon svg {
  width: 100%;
  height: 100%;
}

.fmt-icon--sm { width: 18px; height: 18px; }
.fmt-icon--lg { width: 32px; height: 32px; }

/*
 * slider-pills.css — Team Portal lib primitive styles.
 *
 * Block 2010 task radar-os--546. Consumer: Slider primitive type='pills'.
 * Also defines global .sl-field--hidden helper for Slider showIf mechanism.
 */

.sl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.sl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sl-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.sl-pill--active {
  background: var(--accent, #4a9eff);
  border-color: var(--accent, #4a9eff);
  color: #fff;
}

.sl-pill--active:hover {
  background: var(--accent, #4a9eff);
}

.sl-pill .fmt-icon {
  width: 18px;
  height: 18px;
}

.sl-pill__label {
  white-space: nowrap;
}

/* Global helper for Slider showIf mechanism — hides field wrapper. */
.sl-field--hidden {
  display: none !important;
}

/*
 * slider-field-actions.css — Team Portal lib primitive styles.
 *
 * Block 2020 task radar-os--546. Consumer: Slider primitive f.actions array.
 * Renders row of icon buttons after input for open/copy/share/custom actions.
 */

.sl-field__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.sl-field-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sl-field-action:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.sl-field-action:focus-visible {
  outline: 2px solid var(--accent, #4a9eff);
  outline-offset: 2px;
}

.sl-field-action svg {
  width: 18px;
  height: 18px;
}

/* StatusFilterPills primitive — Block 2104.
 *
 * Visual styling inherited из FilterBar primitive (filter-bar.css / team.css
 * .filters / .filter-group / .pill / .pill--active).
 *
 * Placeholder file для future per-primitive overrides (если понадобятся
 * mode-specific визуальные адаптации без затрагивания FilterBar).
 *
 * Memory feedback_no_monolith_css — каждый primitive имеет свой CSS file
 * даже если empty для consistency и future-proofing.
 */

/*
 * shared-helpers.css — Team Portal shared helpers companion CSS.
 *
 * Companion to lib/shared-helpers.js (Block 1103 of task radar-os--455-docs-control-mode).
 *
 * Loaded via <link> in team/index.html after legacy lib CSS files.
 */

/* Overdue date marker used by formatDateRu() when iso < overdueAfter && !isFinal */
.t-date-overdue {
  color: var(--date-overdue-color, #ef4444);
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}
.btn-primary { background: #3AA7E2; color: #fff; }
.btn-primary:hover { background: #6EC1FF; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.btn-ghost:disabled { opacity: .4; cursor: default; }
.btn-danger { background: #d93838; color: #fff; }
.btn-danger:hover { background: #b82a2a; }
.btn-danger:disabled { opacity: .6; cursor: default; }

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-overlay[hidden] { display: none; }
.confirm-modal {
  background: #141F33;
  color: #DCE4F0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px 22px;
  min-width: 320px;
  max-width: 440px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.confirm-title { font-weight: 600; font-size: 15px; margin-bottom: 8px; color: #DCE4F0; }
.confirm-message { color: #B7C3D8; font-size: 13px; margin-bottom: 18px; line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Block 1502 — opt-in textarea input field (inputField config in Confirm.show). */
.confirm-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.confirm-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  color: #DCE4F0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  min-height: 80px;
  resize: vertical;
}
.confirm-textarea:focus {
  outline: none;
  border-color: #3AA7E2;
}
.confirm-counter {
  font-size: 12px;
  color: #93a4c0;
  text-align: right;
}
.confirm-counter--invalid {
  color: #ef4444;
}

/*
 * timeline.css — Team Portal UI primitive: generic vertical timeline.
 *
 * Companion to lib/timeline.js (block 9 of task radar-os--464-history-tab-all-modes).
 *
 * Dot colors via `--badge-{variant}-color` from status-badge.css palette.
 * Graceful degradation when CSS-vars missing (fallback colors hardcoded).
 *
 * No emojis (memory rule).
 */

.tl-container {
  display: flex;
  flex-direction: column;
}

.tl-event {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  position: relative;
  padding-bottom: 12px;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
  margin-left: 2px;
  background: var(--badge-color, #9ca3af);
  flex-shrink: 0;
}

.tl-dot--success { background: var(--badge-success-color, #22c55e); }
.tl-dot--danger  { background: var(--badge-danger-color,  #ef4444); }
.tl-dot--warning { background: var(--badge-warning-color, #f4a300); }
.tl-dot--info    { background: var(--badge-info-color,    #38bdf8); }
.tl-dot--muted   { background: var(--badge-muted-color,   #9ca3af); }

.tl-connector {
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--border, rgba(255, 255, 255, 0.08));
}

.tl-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.12s;
}

.tl-card--clickable {
  cursor: pointer;
}

.tl-card--clickable:hover {
  background: rgba(58, 167, 226, 0.06);
}

.tl-time {
  font-size: 11px;
  color: var(--hint, #9ca3af);
}

.tl-actor {
  font-size: 12px;
  color: var(--hint, #9ca3af);
}

.tl-label {
  font-size: 13px;
  color: var(--fg, #e8edf5);
}

.tl-status {
  font-size: 11px;
  color: var(--hint, #9ca3af);
  font-style: italic;
}

.tl-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.tl-channel,
.tl-badge {
  font-size: 10px;
  color: var(--hint, #9ca3af);
  padding: 1px 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
}

.tl-empty {
  font-size: 13px;
  color: var(--hint, #9ca3af);
  font-style: italic;
  text-align: center;
  padding: 24px 12px;
}

/**
 * item-pipeline-panel.css — Whitelist timeline styling.
 *
 * Timeline visual — из lib/timeline.css (dot+connector+card).
 * Здесь только host padding + loading/error state.
 *
 * Block 4 of task radar-os--538-mode-timeline-config-questions.
 * Replaces phases/chain-group/expected-chain styling (task 521 legacy).
 */

.pp-host {
  padding: 12px 16px;
}

.pp-loading {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted, #8892a6);
  font-size: 13px;
}

.pp-error {
  padding: 16px 12px;
  color: var(--pp-danger, #e05b5b);
  font-size: 13px;
}

/*
 * spinner.css — Team Portal UI primitive: rotating loader indicator.
 *
 * Companion to lib/spinner.js (Block 463/26.1.1 of task
 * radar-os--463-chains-and-atoms-architecture).
 *
 * CSS-only border circle with single transparent edge для visible rotating arc.
 * Customizable через CSS variables. `prefers-reduced-motion` disables animation
 * (border circle stays as static visual indicator).
 *
 * Loaded via <link> in team/index.html (after status-badge.css per visual primitives
 * group, before main mode pages).
 */

.spinner {
  display: inline-block;
  width: var(--spinner-size, 16px);
  height: var(--spinner-size, 16px);
  border: var(--spinner-thickness, 2px) solid var(--spinner-color, currentColor);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
  vertical-align: middle;
  box-sizing: border-box;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

/**
 * money-calendar/styles.css — layout styles for MoneyCalendar lib.
 *
 * Namespace: `.mc-*` prefix (money-calendar). Avoids collision with
 * payments `.p-cal-*` classes.
 *
 * Colors: layout via Team Portal CSS vars (--fg, --line-2, --muted, --bg).
 * Status colors (paid green / late purple / etc.) are applied inline from
 * STATUS_COLORS map in index.js — data-driven, extensible via config.
 */

.mc-root {
  color: var(--fg);
}

.mc-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0;
}

/* ── Undated section ─────────────────────────────────────── */

.mc-undated {
  border-radius: 12px;
  background: var(--panel, rgba(255,255,255,0.02));
  border: 1px solid var(--line-2, rgba(148,163,184,0.15));
  padding: 14px;
}

.mc-undated-toggle {
  background: transparent;
  border: 0;
  color: var(--fg);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.mc-undated-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.mc-undated-arrow {
  font-size: 11px;
  color: var(--muted);
}

.mc-undated-title {
  color: var(--fg);
}

.mc-undated-total {
  font-size: 13px;
  color: var(--muted);
}

.mc-undated-content {
  margin-top: 12px;
  flex-direction: column;
  gap: 6px;
}

.mc-undated-card {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

/* ── Main panel ─────────────────────────────────────────── */

.mc-panel {
  border-radius: 12px;
  background: var(--panel, rgba(255,255,255,0.02));
  border: 1px solid var(--line-2, rgba(148,163,184,0.15));
  padding: 16px;
}

.mc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.mc-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-nav-btn {
  padding: 6px 14px;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line-2, rgba(148,163,184,0.3));
  color: var(--fg);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

.mc-nav-btn:hover {
  background: rgba(255,255,255,0.05);
}

.mc-week-range {
  font-size: 18px;
  margin: 0;
  min-width: 240px;
  text-align: center;
  color: var(--fg);
  font-weight: 500;
}

/* Round 2 (block 7.2): 2-line week total — plan/fact stacked with color labels. */
.mc-week-total {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  line-height: 1.35;
}

.mc-week-total-line {
  font-size: 13px;
}

.mc-week-total-line.mc-week-plan {
  color: rgba(252, 165, 165, 0.9);
}

.mc-week-total-line.mc-week-fact {
  color: rgba(134, 239, 172, 0.9);
}

/* ── Grid ──────────────────────────────────────────────── */

.mc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.mc-day-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mc-day-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line-2, rgba(148,163,184,0.15));
  min-width: 0;
}

.mc-day-name {
  font-size: 12px;
  color: var(--fg);
  font-weight: 500;
}

/* Round 2 (block 7.2): 2-line day sub — plan on top, fact below.
   Vertically stacked with distinct colors for at-a-glance recognition. */
.mc-day-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
}

.mc-day-sub-plan,
.mc-day-sub-fact {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-day-sub-plan {
  color: rgba(252, 165, 165, 0.9);
}

.mc-day-sub-fact {
  color: rgba(134, 239, 172, 0.9);
}

.mc-day-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* ── Cards ─────────────────────────────────────────────── */

.mc-card {
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  transition: filter 0.15s ease;
}

.mc-card:hover {
  filter: brightness(1.1);
}

.mc-card-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-card-amount {
  font-weight: 600;
}

/* Fact cards may want subtle visual distinction (dashed border for
   "fact only" state) — apply if design wants later.
.mc-card-fact {
  border-style: dashed;
}
*/

/* ── Empty state ─────────────────────────────────────── */

.mc-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}