/* Settings, Capacity and Search styles. Prefixes: .st- (settings, search), .cap- (capacity). */

/* ---------- settings index ---------- */
.st-org { display: flex; align-items: center; gap: 24px; padding: 14px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.st-org-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--sider); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.st-org-kv { display: flex; flex-direction: column; gap: 2px; }
.st-org-kv:first-of-type { margin-left: auto; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.st-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.st-card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-sm); color: var(--text); }
.st-card:hover .st-card-go { color: var(--primary); transform: translateX(2px); }
.st-card-ic { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.st-card-main { flex: 1; min-width: 0; }
.st-card-t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.st-card-d { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.st-card-s { color: var(--text-3); font-size: 12px; margin-top: 8px; }
.st-card-go { color: var(--text-4); align-self: center; transition: transform .2s, color .2s; }

/* ---------- section frame ---------- */
.st-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.st-back:hover { color: var(--primary); }
.st-back-ic { display: inline-flex; transform: rotate(180deg); }
.st-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-rail { position: sticky; top: 72px; }
.st-rail button { font-size: 13px; }
.st-rail button svg { flex: none; }
.st-content { min-width: 0; }
.st-ro { margin-bottom: 16px; align-items: flex-start; }
.st-ro svg { margin-top: 3px; flex: none; color: var(--primary); }
.st-card-pad { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.st-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-toolbar .select { width: auto; min-width: 150px; }
.st-search { max-width: 260px; }
.st-actions { display: inline-flex; gap: 4px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.st-faded { opacity: .5; }
.st-table-wrap { overflow-x: auto; }
.st-table-wrap .table td { padding: 10px 12px; }
.st-name { white-space: nowrap; }
.st-title { display: inline-block; min-width: 120px; }
.st-name { display: flex; align-items: center; gap: 6px; }
.st-hl td { background: #fffbe6 !important; }
.st-hl.card { border-color: #ffe58f; background: #fffdf3; box-shadow: 0 0 0 3px #fff7d6; }
.st-seats { margin: -6px 0 10px; }
.st-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.st-me { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.st-avatar-xl { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 500; flex: none; }
.st-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.st-pref { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.st-pref:last-child { border-bottom: 0; }
.st-copy { display: flex; align-items: flex-start; gap: 8px; }
.st-copy-text { flex: 1; min-width: 0; font: 12px var(--mono); background: var(--fill); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 10px; overflow-wrap: anywhere; }
.st-code { flex: 1; min-width: 0; margin: 0; font: 12px/1.55 var(--mono); background: #0f1b30; color: #dbe6ff; border-radius: var(--radius); padding: 10px 12px; white-space: pre-wrap; word-break: break-all; }
.st-copy .btn { flex: none; }
.st-mono { font-family: var(--mono); font-size: 12px; }
.st-invite { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.st-invite-who { display: flex; align-items: center; gap: 8px; }
.st-drop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px dashed var(--border-2); border-radius: var(--radius-lg); background: var(--fill-2); color: var(--text-2); }
.st-drop > div { flex: 1; }
.st-drop.big { padding: 28px 16px; flex-direction: column; text-align: center; cursor: pointer; }
.st-drop.big:hover { border-color: var(--primary); color: var(--primary); }
.st-team-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.st-pick { border: 1px solid var(--border-2); border-radius: var(--radius); padding: 8px; }
.st-pick .row .input { flex: 1; }
.st-pick-list { max-height: 300px; overflow-y: auto; margin-top: 8px; }
.st-pick-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; }
.st-pick-row:hover { background: var(--fill); }
.st-pick-row input { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; flex: none; }
.st-pick-row .ellipsis:first-of-type { max-width: 45%; }

/* teams */
.st-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.st-team { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.st-team-top { display: flex; align-items: center; gap: 10px; }
.st-team-ic { width: 36px; height: 36px; border-radius: 8px; color: #fff; font-weight: 600; display: grid; place-items: center; flex: none; font-size: 13px; }
.st-team-kv { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.st-team-foot { border-top: 1px solid #f0f0f0; padding-top: 10px; margin-top: 2px; }
.st-stack { display: inline-flex; align-items: center; }
.st-stack .avatar { border: 2px solid #fff; margin-left: -6px; width: 26px; height: 26px; }
.st-stack .avatar:first-child { margin-left: 0; }
.st-more { margin-left: 4px; font-size: 12px; color: var(--text-3); }

/* roles */
.st-explain { display: flex; gap: 12px; padding: 14px 18px; margin-bottom: 16px; background: #fbfcff; }
.st-explain-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--warning-soft); color: var(--warning-text); display: grid; place-items: center; }
.st-matrix-wrap { overflow-x: auto; }
.st-matrix th, .st-matrix td { border-right: 1px solid #f0f0f0; }
.st-matrix th:last-child, .st-matrix td:last-child { border-right: 0; }
.st-matrix .st-mod-col { min-width: 280px; max-width: 360px; white-space: normal; vertical-align: top; }
.st-matrix thead .st-mod-col { vertical-align: bottom; }
.st-matrix .st-role-col { text-align: center; min-width: 140px; }
.st-role-h { display: flex; align-items: center; justify-content: center; gap: 4px; }
.st-role-sub { font-weight: 400; font-size: 11px; color: var(--text-3); }
.st-lock { color: var(--text-3); display: inline-flex; }
.st-matrix .st-va { text-align: center; width: 70px; font-weight: 400; color: var(--text-2); font-size: 12px; }
.st-matrix td.st-va input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; margin: 0; }
.st-matrix td.st-va input:disabled { cursor: not-allowed; }
.st-matrix tr.st-group td { background: var(--fill-2); font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; }
.st-caution { color: var(--warning-text); margin-left: 6px; display: inline-flex; vertical-align: -1px; cursor: help; }

/* tags */
.st-swatches { display: flex; gap: 8px; }
.st-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border-2); cursor: pointer; }
.st-swatch.on { box-shadow: 0 0 0 2px var(--primary); }
.st-swatch.blue { background: #1677ff; } .st-swatch.green { background: #52c41a; } .st-swatch.orange { background: #fa8c16; }
.st-swatch.red { background: #f5222d; } .st-swatch.purple { background: #722ed1; } .st-swatch.gray { background: #8c8c8c; }

/* requests */
.st-thread-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.st-thread-head h3 { font-size: 16px; margin-top: 2px; }
.st-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.st-msg { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; }
.st-msg.support { background: var(--primary-soft); border-color: var(--primary-border); }
.st-msg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.st-msg-b { white-space: pre-wrap; color: var(--text-2); }
.st-tlogo { width: 22px; height: 22px; flex: none; display: block; object-fit: contain; }

/* billing */
.st-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; }
.st-kv > div:last-child { margin-top: 2px; }
.st-seatbar { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.st-seatbar .bar { flex: 1; max-width: 420px; }
.st-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-planc { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.st-planc.cur { border-color: var(--primary); background: #f7faff; box-shadow: 0 0 0 1px var(--primary); }
.st-price { font-size: 22px; font-weight: 600; line-height: 1.2; }
.st-price small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.st-planc .small { flex: 1; }

/* docs */
.st-src { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.st-src:first-child { padding-top: 0; }
.st-src:last-child { border-bottom: 0; padding-bottom: 0; }
.st-src-ic { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.st-src-ic.file { background: var(--danger-soft); color: var(--danger-text); }
.st-src-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-src-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.st-src-act { display: flex; gap: 4px; }
.st-spin { display: inline-flex; animation: spin 1s linear infinite; vertical-align: -2px; }
.st-reading { display: flex; align-items: center; gap: 10px; padding: 24px 0; justify-content: center; color: var(--text-2); }
.st-hit { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.st-hit:last-child { border-bottom: 0; }

/* ---------- search palette ---------- */
.st-pal-wrap { padding-top: 12vh; }
.st-pal { overflow: hidden; }
.st-pal .modal-head, .st-pal .modal-foot { display: none; }
.st-pal .modal-body { padding: 0; }
.st-pal-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 54px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.st-pal-input input { flex: 1; border: 0; outline: none; font-size: 16px; color: var(--text); background: transparent; min-width: 0; }
.st-pal-clear { border: 0; background: var(--fill); color: var(--text-3); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; }
.st-pal-list { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
.st-pal-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.st-pal-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; min-width: 0; }
.st-pal-item.on { background: var(--primary-soft); }
.st-pal-item.on .st-pal-enter { visibility: visible; }
.st-pal-ic { width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--fill); color: var(--text-2); display: grid; place-items: center; }
.st-pal-item.on .st-pal-ic { background: #fff; color: var(--primary); }
.st-pal-t { flex: none; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pal-sub { flex: 1; min-width: 0; color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pal-enter { visibility: hidden; color: var(--primary); font-size: 13px; }
.st-pal-item mark { background: #fff1b8; color: inherit; border-radius: 2px; padding: 0 1px; }
.st-pal-none { padding: 18px 12px; color: var(--text-3); text-align: center; }
.st-pal-foot { display: flex; gap: 16px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--fill-2); font-size: 12px; color: var(--text-3); }
.st-pal-foot .kbd { margin-right: 2px; }
.st-pal-scope { margin-left: auto; }

/* ---------- capacity ---------- */
.cap-note { margin-bottom: 16px; align-items: center; }
.cap-stats { margin-bottom: 16px; }
.cap-stats .stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cap-stat-over { border-color: #ffa39e !important; background: var(--danger-soft) !important; }
.cap-stat-over .v { color: var(--danger-text); }
.cap-card { margin-bottom: 16px; }
.cap-scroll { overflow-x: auto; }
.cap-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.cap-grid th { background: var(--fill-2); font-weight: 600; font-size: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.cap-grid td { padding: 0 3px; height: 34px; border-bottom: 1px solid #f3f3f3; text-align: center; }
.cap-grid .cap-label { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; padding: 6px 12px; min-width: 280px; max-width: 320px; border-right: 1px solid var(--border); }
.cap-grid th.cap-label { background: var(--fill-2); z-index: 2; }
.cap-wd { font-weight: 400; color: var(--text-3); font-size: 11px; }
.cap-w { min-width: 52px; }
.cap-w.past { color: var(--text-3); }
.cap-w.cur, .cap-grid td.cur { background: #f3f8ff; }
.cap-w.cur { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.cap-avg { min-width: 54px; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-2); border-left: 1px solid var(--border); }
.cap-person td { background: #fcfcfd; border-top: 1px solid var(--border); height: 44px; }
.cap-person td.cur { background: #eef5ff; }
.cap-person .cap-label { background: #fcfcfd; }
.cap-lab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cap-name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.cap-flag { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--danger-text); background: var(--danger-soft); border: 1px solid #ffccc7; border-radius: 10px; padding: 0 6px; }
.cap-tot { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
.cap-tot.full { color: var(--success-text); }
.cap-tot.ok { color: var(--text); }
.cap-tot.low { color: var(--warning-text); }
.cap-tot.none { color: var(--text-4); font-weight: 400; }
.cap-tot.over { color: #fff; background: #ff4d4f !important; box-shadow: inset 0 0 0 1px #fff; }
.cap-sub { padding-left: 34px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cap-kind { width: 18px; height: 18px; flex: none; border-radius: 4px; display: grid; place-items: center; }
.cap-kind.obj { background: var(--primary-soft); color: var(--primary); }
.cap-kind.ini { background: var(--purple-soft); color: var(--purple); }
.cap-kind.else { background: var(--fill); color: var(--text-3); }
.cap-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
a.cap-title { color: var(--text-2); }
a.cap-title:hover { color: var(--primary); }
.cap-row-act { display: none; flex: none; }
.cap-alloc:hover .cap-row-act { display: inline-flex; }
.cap-alloc:hover td { background: var(--fill-2); }
.cap-alloc:hover td.cap-label { background: var(--fill-2); }
.cap-in { width: 46px; height: 26px; border: 1px solid transparent; border-radius: 4px; text-align: center; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; background: transparent; color: var(--text); -moz-appearance: textfield; }
.cap-in::-webkit-outer-spin-button, .cap-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cap-in:hover { border-color: var(--border-2); background: #fff; }
.cap-in:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.12); }
.cap-v { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cap-addrow td { height: 30px; }
.cap-addrow .btn svg { width: 12px; height: 12px; }
.cap-foot td { border-top: 2px solid var(--border); background: var(--fill-2); height: 42px; }
.cap-foot .cap-label, .cap-foot2 .cap-label { background: var(--fill-2); }
.cap-foot2 td { background: var(--fill-2); }
.cap-hint { padding: 10px 16px; border-top: 1px solid var(--border); }
.cap-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.cap-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.cap-legend i.ok { background: var(--text); } .cap-legend i.low { background: var(--warning); } .cap-legend i.over { background: var(--danger); }
.cap-two { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.cap-two .table .num { white-space: nowrap; }
.cap-explain { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.cap-cmp { display: flex; align-items: center; gap: 8px; }
.cap-cmp .bar { flex: 1; }
.cap-cmp .pct { width: 36px; text-align: right; }
.cap-other { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.cap-other:last-child { border-bottom: 0; }
.cap-other .bar { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .st-layout { grid-template-columns: 1fr; }
  .st-rail { position: static; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 8px; }
  .st-two, .cap-two { grid-template-columns: 1fr; }
  .st-plans { grid-template-columns: 1fr 1fr; }
  .st-plan-grid { grid-template-columns: 1fr 1fr; }
}

/* the header search box is the palette's trigger: keep its icon at text size */
.header .search > svg { width: 14px; height: 14px; flex: none; }