/* ScrimMate v0.19 — roles, permissions, co-managers and debug logs.
   Loaded globally because the device log viewer (Settings) reuses the log rows. */

/* Permission chips */
.sm-adm-perms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sm-adm-perm { font-size: 10.5px; font-weight: 750; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--on-surface); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); white-space: nowrap; }
.sm-adm-tag.is-admin { background: color-mix(in srgb, #2fbf9f 20%, transparent); color: #2fbf9f; }
html[data-theme="light"] .sm-adm-tag.is-admin { color: #11806a; }
b.is-bad, .is-bad > b { color: var(--error); }

/* Super admin + admin team */
.sm-adm-crown { position: relative; overflow: hidden; border-color: color-mix(in srgb, #f6c445 45%, var(--outline-variant)) !important; background: linear-gradient(135deg, color-mix(in srgb, #f6c445 14%, var(--surface-container-low)), var(--surface-container-low) 60%) !important; }
.sm-adm-crown .sm-adm-head h3 svg { color: #f6c445; }
.sm-adm-person { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; }
.sm-adm-person > div { display: grid; gap: 2px; min-width: 0; }
.sm-adm-person b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-adm-person small { color: var(--on-surface-variant); font-size: 12.5px; }
.sm-adm-team { display: grid; gap: 8px; }
.sm-adm-team__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--outline-variant); background: var(--surface-container-low); animation: v19-rise .22s ease both; }
.sm-adm-team__main { display: grid; gap: 2px; min-width: 0; }
.sm-adm-team__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-adm-team__main small { color: var(--on-surface-variant); font-size: 12px; }
.sm-adm-team__ops { display: flex; gap: 4px; }
.icon-btn.is-danger { color: var(--error); }
.sm-adm-permdoc { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sm-adm-permdoc > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); }
.sm-adm-permdoc small { color: var(--on-surface-variant); font-size: 12px; line-height: 1.4; }

/* Permission picker with switches */
.sm-adm-permpick { display: grid; gap: 6px; max-height: 46vh; overflow: auto; padding-right: 2px; overscroll-behavior: contain; }
.sm-adm-permpick__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--outline-variant); background: var(--surface-container-low); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sm-adm-permpick__row input { position: absolute; opacity: 0; pointer-events: none; }
.sm-adm-permpick__row > span { display: grid; gap: 2px; min-width: 0; }
.sm-adm-permpick__row small { color: var(--on-surface-variant); font-size: 12px; line-height: 1.35; }
.sm-adm-permpick__row:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low)); }
.sm-adm-permpick__row:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.sm-adm-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--surface-container-highest, var(--outline-variant)); transition: background .18s ease; flex: none; }
.sm-adm-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--on-surface-variant); transition: transform .2s cubic-bezier(.2,.8,.2,1), background .18s ease; }
.sm-adm-permpick__row:has(input:checked) .sm-adm-switch { background: var(--primary); }
.sm-adm-permpick__row:has(input:checked) .sm-adm-switch::after { transform: translateX(16px); background: var(--on-primary, #fff); }

/* Pickers (users, orgs, squads) */
.sm-adm-pick { display: grid; gap: 6px; max-height: 44vh; overflow: auto; overscroll-behavior: contain; margin-top: 8px; }
.sm-adm-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sm-adm-chips::-webkit-scrollbar { display: none; }
.sm-adm-chips--wrap { flex-wrap: wrap; overflow: visible; }
.sm-adm-chip.on { background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: var(--primary); color: var(--on-surface); }

/* Debug logs */
.sm-adm-loglist { display: grid; gap: 6px; }
.sm-adm-log { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--outline-variant); border-left-width: 3px; background: var(--surface-container-low); color: var(--on-surface); font: inherit; text-align: left; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 60px; transition: background .15s ease, transform .12s ease; }
button.sm-adm-log:active { transform: scale(.99); }
.sm-adm-log__lvl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--surface-container-high); color: var(--on-surface-variant); margin-top: 1px; }
.sm-adm-log__body { display: grid; gap: 3px; min-width: 0; }
.sm-adm-log__msg { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.sm-adm-log__body small { color: var(--on-surface-variant); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-adm-log.is-error { border-left-color: var(--error); }
.sm-adm-log.is-error .sm-adm-log__lvl { background: color-mix(in srgb, var(--error) 20%, transparent); color: var(--error); }
.sm-adm-log.is-warn { border-left-color: #f0a830; }
.sm-adm-log.is-warn .sm-adm-log__lvl { background: color-mix(in srgb, #f0a830 20%, transparent); color: #d98e12; }
.sm-adm-log.is-info { border-left-color: #5aa9ff; }
.sm-adm-log.is-info .sm-adm-log__lvl { background: color-mix(in srgb, #5aa9ff 20%, transparent); color: #3d8fe6; }
.sm-adm-log.is-debug { border-left-color: var(--outline); }
.sm-adm-loglist.is-compact .sm-adm-log { padding: 8px 10px; cursor: default; }
.sm-adm-loglist.is-compact .sm-adm-log__msg { -webkit-line-clamp: 1; font-size: 12.5px; }
.sm-adm-logmsg { margin: 0; font-weight: 700; font-size: 14.5px; line-height: 1.45; word-break: break-word; }
.sm-adm-json { margin: 0; max-height: 40vh; overflow: auto; padding: 12px; border-radius: 12px; background: var(--surface-container-lowest, rgba(0,0,0,.25)); border: 1px solid var(--outline-variant); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--on-surface); white-space: pre-wrap; word-break: break-word; overscroll-behavior: contain; }

/* Data browser */
.sm-adm-rows { display: grid; gap: 6px; }
.sm-adm-row { border-radius: 14px; border: 1px solid var(--outline-variant); background: var(--surface-container-low); overflow: hidden; }
.sm-adm-row > summary { list-style: none; cursor: pointer; padding: 10px 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-adm-row > summary::-webkit-details-marker { display: none; }
.sm-adm-row > summary::after { content: "›"; margin-left: auto; color: var(--on-surface-variant); transition: transform .18s ease; }
.sm-adm-row[open] > summary::after { transform: rotate(90deg); }
.sm-adm-row .sm-adm-json { border-radius: 0; border: 0; border-top: 1px solid var(--outline-variant); }
.sm-adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

/* Team roles */
.sm-role-pill.role-co-owner { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.4); }
html[data-theme="light"] .sm-role-pill.role-co-owner { color: #6d28d9; }

/* Scrim co-managers */
.v18-row-wrap { display: grid; gap: 8px; }
.v19-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--on-surface); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, transparent), color-mix(in srgb, #5aa9ff 30%, transparent)); }
.v19-person { animation: v19-rise .22s ease both; }
button.v19-pick { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
button.v19-pick:hover { border-color: var(--primary); }
button.v19-pick:active { transform: scale(.99); }
.v19-comanagers > p { margin: 0; }

@keyframes v19-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sm-adm-team__row, .v19-person { animation: none; } }

/* Selectable filter chips (logs, data browser, device log) */
button.sm-chip { cursor: pointer; background: transparent; font: inherit; font-size: .78rem; font-weight: 700; gap: 6px; transition: background .15s ease, border-color .15s ease, color .15s ease; }
button.sm-chip small { opacity: .7; font-weight: 600; }
.sm-chip.on { background: color-mix(in srgb, var(--primary) 20%, transparent); border-color: var(--primary); color: var(--on-surface); }
.sm-adm-row > summary > span { display: inline-grid; gap: 1px; min-width: 0; max-width: 46%; }
.sm-adm-row > summary > span small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface-variant); }
.sm-adm-row > summary > span b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-adm-row > summary { gap: 14px; }
.sm-role-pill { justify-self: start; align-self: start; width: fit-content; max-width: 100%; }