/* Raptool Device Manager 2.0 - styles of the feature modules (mod-*.js): navigation, filter bar, group tree, selection bar, tags, jobs,
   audit, access. Design tokens only (tokens.css / theme.css), so dark mode and the themes work unchanged. */

/* ---------------------------------------------------------------- navigation (top bar with "More", side menu groups) */
.app-body.full-width .tab-bar { overflow: visible; flex-wrap: nowrap; position: relative; }
.tab-btn > span.tab-badge { flex: none; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px; border-radius: 9px; background: var(--error); color: var(--surface); font-size: 11px; font-weight: 700; text-align: center; overflow: visible; }
.tab-more { position: relative; display: inline-flex; }
.tab-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.tab-more-menu[hidden] { display: none; }
.tab-more-menu .tab-btn { justify-content: flex-start; width: 100%; flex: none; }
.sm-grp { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 10px 12px 2px; }
.sm-grp:first-child { padding-top: 2px; }
.sys-pills { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.link-btn { background: none; border: none; padding: 4px 2px; font: inherit; font-size: 13px; color: var(--accent-primary); cursor: pointer; text-decoration: underline; }
.muted { color: var(--text-muted); }

/* login second step */
.login-step-title { display: flex; align-items: center; gap: 8px; color: var(--accent-primary); font-size: 16px; }
.login-step-hint { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.login-trust { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-surface-variant); cursor: pointer; }
.login-links { display: flex; justify-content: space-between; gap: 8px; }
#totpForm, #enrollBox { display: flex; flex-direction: column; gap: 12px; }
#totpForm[hidden], #enrollBox[hidden] { display: none; }

/* ---------------------------------------------------------------- header filter bar */
.dm-filterbar { margin: 0 0 var(--space-md); }
.dm-filterbar[hidden] { display: none; }
.fb-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 8px 12px; background: var(--surface-container-low); border-radius: var(--radius-control); }
.fb-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fb-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.fb-select { min-width: 150px; height: 36px; }
.fb-group .rt-sel-trigger, .fb-plat .rt-sel-trigger { min-width: 150px; }
.fb-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-surface-variant); padding-bottom: 8px; cursor: pointer; }
.fb-tags { flex: 1 1 220px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-mode { align-self: flex-start; border: none; background: transparent; color: var(--accent-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; text-decoration: underline; }
#fbClear { margin-bottom: 2px; }

/* ---------------------------------------------------------------- tags (colours map to tokens) */
.dm-tag { --tg: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; margin: 0 4px 2px 0; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 18px; border: 1px solid transparent;
  background: color-mix(in srgb, var(--tg) 16%, var(--surface)); color: var(--tg); white-space: nowrap; font-family: inherit; }
.dm-tag-slate { --tg: var(--text-muted); }
.dm-tag-red { --tg: var(--error); }
.dm-tag-orange { --tg: color-mix(in srgb, var(--warning) 70%, var(--error)); }
.dm-tag-amber { --tg: var(--warning); }
.dm-tag-green { --tg: var(--accent-emerald); }
.dm-tag-teal { --tg: var(--accent-cyan); }
.dm-tag-blue { --tg: var(--accent-primary); }
.dm-tag-violet { --tg: var(--secondary); }
.dm-tag-pink { --tg: var(--accent-rose); }
.dm-tag-btn { cursor: pointer; opacity: .75; }
.dm-tag-btn:hover { opacity: 1; }
.dm-tag-btn.on { opacity: 1; border-color: var(--tg); box-shadow: var(--shadow-pressed); }
.dm-grp-line { display: flex; align-items: center; gap: 4px; color: var(--text-muted); }
.dm-grp-line .material-symbols-outlined { font-size: 16px; }
.tm-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tm-color { --tg: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background: var(--surface); box-shadow: var(--shadow-shallow); cursor: pointer; display: grid; place-items: center; padding: 0; }
.tm-color span { width: 18px; height: 18px; border-radius: 50%; background: var(--tg); }
.tm-color.on { border-color: var(--on-surface); }
.bt-modes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bt-tags, .dw-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.bt-tag { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* ---------------------------------------------------------------- devices tab: group tree + selection bar */
.dev-split { display: flex; gap: var(--space-md); align-items: flex-start; min-height: 0; }
.dev-main { flex: 1; min-width: 0; }
.grp-tree { flex: 0 0 230px; max-width: 260px; padding: 8px 6px; position: sticky; top: 0; max-height: calc(100vh - 220px); overflow-y: auto; }
.grp-phone-btn { display: none; }
.grp-tree-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 8px 6px; font-size: 13px; }
.grp-manage { font-size: 12px; color: var(--accent-primary); }
.gt-list { display: flex; flex-direction: column; gap: 1px; }
.gt-node { display: flex; align-items: center; gap: 2px; min-height: 32px; padding-right: 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--on-surface); }
.gt-node:hover { background: var(--surface-container-low); }
.gt-node.active { background: color-mix(in srgb, var(--accent-primary) 14%, var(--surface)); color: var(--accent-primary); font-weight: 700; }
.gt-node.drop { outline: 2px dashed var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface)); }
.gt-caret { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border: none; background: transparent; color: var(--text-muted); padding: 0; cursor: pointer; }
.gt-caret .material-symbols-outlined { font-size: 18px; }
.gt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; margin-bottom: var(--space-md); }
.sel-bar[hidden] { display: none; }
.sel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-count a { font-size: 12px; color: var(--accent-primary); margin-left: 8px; }
.dm-sel { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-primary); }
td.dt-sel, th.dt-sel { width: 44px; text-align: center; }
.dev-sel { position: absolute; top: 6px; left: 6px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; background: var(--surface); border-radius: 6px; box-shadow: var(--shadow-shallow); cursor: pointer; }
.dev-card[draggable="true"], tr[draggable="true"] { -webkit-user-drag: element; }
.skip-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.skip-list li { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-container-low); font-size: 13px; }
.skip-list li span { color: var(--text-muted); }
#app.no-devices-edit [data-rename], #app.no-devices-edit .rename-btn { display: none !important; }
#app.no-keys-manage #keyNew, #app.no-keys-manage [data-edit] { display: none !important; }

/* ---------------------------------------------------------------- Groups tab */
.grp-admin { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-md); margin-bottom: var(--space-md); align-items: start; }
.grp-admin > section, .grp-admin + section { margin: 0; }
.gm-list { display: flex; flex-direction: column; gap: 2px; }
.gm-row { display: flex; align-items: center; gap: 6px; min-height: 40px; padding-right: 6px; border-radius: var(--radius-sm); cursor: pointer; }
.gm-row:hover, .gm-row.active { background: var(--surface-container-low); }
.gm-row.active { box-shadow: var(--shadow-pressed); }
.gm-row > .material-symbols-outlined { font-size: 20px; color: var(--text-muted); }
.gm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gm-actions { display: flex; gap: 0; }
.icon-btn.danger { color: var(--error); }

/* ---------------------------------------------------------------- Jobs */
.job-prog { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 120px; }
.job-bar { height: 6px; border-radius: 3px; background: var(--surface-container-highest); display: flex; overflow: hidden; }
.job-bar i { display: block; height: 100%; }
.job-bar i.ok { background: var(--accent-emerald); }
.job-bar i.bad { background: var(--error); }
.job-bar i.skip { background: var(--text-placeholder); }
.job-runs { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.job-run { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; text-align: left; padding: 8px 10px; border: none; border-radius: var(--radius-sm); background: var(--surface-container-low); cursor: pointer; font: inherit; color: var(--on-surface); }
.job-run .job-prog { grid-column: 1 / -1; }
.job-run span { color: var(--text-muted); font-size: 12px; }
.job-run.on { box-shadow: var(--shadow-pressed); outline: 2px solid var(--accent-primary); }
.dw-jobs, .dw-act, .tf-browsers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dw-jobs li, .dw-act li, .tf-browsers li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-container-low); font-size: 13px; }
.dw-jobs li, .dw-act li { cursor: pointer; }
.dw-jobs li:hover, .dw-act li:hover { background: var(--surface-container); }
.grow { flex: 1; min-width: 0; }
/* wizard */
.modal-box.modal-wide .wz-body, .wz .wz-body { min-height: 260px; }
.wz-steps { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-md); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.wz-steps i { flex: 1; height: 2px; background: var(--outline-variant); }
.wz-step { display: inline-flex; align-items: center; gap: 6px; }
.wz-step span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-container-high); font-size: 12px; }
.wz-step span .material-symbols-outlined { font-size: 16px; }
.wz-step.on { color: var(--accent-primary); }
.wz-step.on span, .wz-step.done span { background: var(--accent-primary); color: var(--surface); }
.wz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: var(--space-md); }
.wz-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px; border: 2px solid transparent; border-radius: var(--radius-default); background: var(--surface); box-shadow: var(--shadow-shallow); cursor: pointer; font: inherit; color: var(--on-surface); min-height: 44px; }
.wz-card .material-symbols-outlined { color: var(--accent-primary); font-size: 26px; }
.wz-card span:not(.material-symbols-outlined) { font-size: 12px; color: var(--text-muted); }
.wz-card.on { border-color: var(--accent-primary); box-shadow: var(--shadow-pressed); }
.wz-who { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-sm); }
.wz-radio { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-container-low); cursor: pointer; min-height: 40px; }
.wz-sub { margin: 0 0 var(--space-sm) 4px; padding-left: 12px; border-left: 3px solid var(--outline-variant); display: flex; flex-direction: column; gap: 8px; }
.wz-modes { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.wz-every { display: flex; gap: 8px; }
.wz-days { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-preview { margin-top: var(--space-md); padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 20px; }
.wz-preview:empty { display: none; }
.wz-preview details { flex-basis: 100%; }

/* ---------------------------------------------------------------- Audit log */
.au-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 12px; margin-bottom: var(--space-md); }
.au-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.au-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.au-f .tds-input-well { min-width: 150px; }
.au-act { flex: 1 1 200px; }
.au-more { text-align: center; margin: var(--space-md) 0; }
.au-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.au-sec { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.diff-grid { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: 1px; background: var(--outline-variant); border-radius: var(--radius-sm); overflow: hidden; font-size: 13px; }
.diff-grid > div { background: var(--surface); padding: 6px 8px; overflow-wrap: anywhere; }
.diff-grid .dg-h { background: var(--surface-container-high); font-weight: 700; font-size: 12px; }
.diff-grid .dg-k { font-family: var(--font-mono); color: var(--on-surface-variant); }
.diff-grid .dg-b { background: color-mix(in srgb, var(--error) 10%, var(--surface)); }
.diff-grid .dg-a { background: color-mix(in srgb, var(--accent-emerald) 12%, var(--surface)); }
.au-raw { margin-top: 12px; }

/* ---------------------------------------------------------------- Access: users, matrix, 2FA */
.acc-policy { max-width: 420px; }
.acc-role { min-width: 170px; }
.pm-grid { display: grid; grid-template-columns: minmax(180px, 2.4fr) repeat(var(--pm-cols), minmax(88px, 1fr)); overflow-x: auto; border-radius: var(--radius-sm); }
.pm-grid > div, .pm-grid > label { padding: 6px 8px; border-bottom: 1px solid var(--outline-variant); display: flex; align-items: center; min-height: 36px; }
.pm-h { font-size: 12px; font-weight: 700; justify-content: center; text-align: center; background: var(--surface-container-high); position: sticky; top: 0; }
.pm-h.pm-perm { justify-content: flex-start; }
.pm-grp { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-primary); background: var(--surface-container-low); }
.pm-perm { font-size: 13px; gap: 6px; flex-wrap: wrap; }
.pm-so { font-size: 10px; padding: 0 6px; border-radius: 8px; background: var(--surface-container-highest); color: var(--text-muted); }
.pm-cell { justify-content: center; cursor: pointer; }
.pm-cell input { width: 18px; height: 18px; accent-color: var(--accent-primary); }
.pm-cell.changed { background: color-mix(in srgb, var(--warning) 22%, var(--surface)); }
.tf-qr { display: flex; justify-content: center; margin: 8px 0; }
.tf-qr svg { width: 200px; height: 200px; background: #fff; padding: 6px; border-radius: 8px; }
.tf-key code, .tf-codes code { font-family: var(--font-mono); background: var(--surface-container-high); padding: 2px 6px; border-radius: 4px; }
.tf-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.tf-codes code { text-align: center; padding: 8px; font-size: 15px; letter-spacing: .08em; }
.tf-ok { display: flex; align-items: center; gap: 8px; color: var(--accent-emerald); margin-bottom: 8px; }
.tf-state { margin: 6px 0 10px; }

/* ---------------------------------------------------------------- phone (<= 600px) */
@media (max-width: 600px) {
  .dev-split { flex-direction: column; gap: var(--space-sm); }
  .grp-tree { flex: none; width: 100%; max-width: none; position: static; max-height: none; padding: 0; background: transparent; box-shadow: none; }
  .grp-phone-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: none; border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-shallow); font: inherit; font-weight: 600; color: var(--on-surface); cursor: pointer; }
  .grp-phone-btn span:nth-child(2) { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .grp-tree-body { display: none; margin-top: 6px; padding: 8px 4px; background: var(--surface); border-radius: var(--radius-default); box-shadow: var(--shadow-card); max-height: 50vh; overflow-y: auto; }
  .grp-tree.open .grp-tree-body { display: block; }
  .gt-node { min-height: 44px; }
  .fb-row { gap: 8px 10px; padding: 8px; }
  .fb-select, .fb-group .rt-sel-trigger, .fb-plat .rt-sel-trigger { min-width: 0; width: 100%; }
  .fb-group, .fb-plat { flex: 1 1 40%; }
  .fb-tags { flex: 1 1 100%; order: 3; }
  .fb-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .sel-bar { padding: 8px; }
  .sel-actions .btn span { display: none; }
  .sel-actions .btn { min-width: 40px; min-height: 40px; justify-content: center; }
  .grp-admin { grid-template-columns: 1fr; }
  .gm-actions .icon-btn { min-width: 40px; min-height: 40px; }
  .au-filters { padding: 8px; }
  .au-f { flex: 1 1 130px; }
  .au-f .tds-input-well { min-width: 0; }
  .diff-grid { grid-template-columns: 1fr; }
  .diff-grid .dg-h:not(:first-child) { display: none; }
  .wz-cards { grid-template-columns: 1fr 1fr; }
  .pm-grid { grid-template-columns: minmax(150px, 2fr) repeat(var(--pm-cols), 76px); }
  .modal-box.wz { width: 100%; }
  .tab-badge { display: none; }
}

/* stacked cards in System sub-pages and the Users & roles tab */
#sysBody, #tab-access.active { display: flex; flex-direction: column; gap: var(--space-md); }
#sysBody > *, #tab-access > * { flex: none; }
#sysBody .sys-card, #tab-access .sys-card { margin: 0; }
.grp-admin + section { margin-top: 0; }
#tab-groups > section { flex: none; }