/* Estilos de página para app/views/tenant/users — porte fiel de
   screens/plat-usuarios.html do protótipo, sobre o design system VERDE do
   app (ver app/assets/tailwind/tokens.css: --color-accent: #00af55).

   IMPORTANTE: ao contrário de admin_roles.css (que fica AZUL e não deve ser
   usado nestas telas), os tokens abaixo mapeiam para o verde do app. Não
   redefine .btn*/.pill* — esses já vêm verdes de components.css. */

:root {
  --fg: #20252a;
  --fg-2: #424a53;
  --muted: #8a96a8;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --border: #d6dde6;
  --border-soft: #e3e8ef;
  --accent: #00af55;
  --accent-soft: #e6f6ed;
  --success: #1f8a4a;
  --danger: #c83d3d;
  --warn: #c47a1a;
  --focus-ring: 0 0 0 3px rgba(0, 175, 85, 0.16);
  --elev-soft: 0 4px 14px rgba(32, 37, 42, 0.06), 0 1px 3px rgba(32, 37, 42, 0.04);
  --elev-raised: 0 12px 32px rgba(32, 37, 42, 0.10), 0 2px 6px rgba(32, 37, 42, 0.04);
  --font-display: "Lato", system-ui, -apple-system, sans-serif;
  --font-mono: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --fg: #eff0f1;
  --fg-2: #aaafb9;
  --muted: #70777f;
  --surface: #1a1f28;
  --surface-soft: #242a34;
  --border: #4a505a;
  --border-soft: #3a404a;
  --accent: #2fd67c;
  --accent-soft: #0f2a1c;
  --focus-ring: 0 0 0 3px rgba(47, 214, 124, 0.18);
  --elev-soft: 0 1px 2px rgba(0, 0, 0, 0.2);
  --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ---------- card (= .card do protótipo) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--elev-soft);
  padding: 22px 24px;
}
.card + .card { margin-top: 16px; }
.card > h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--fg); }
.card > .h-note { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }

/* ---------- chips de papel/unidade (= .chip) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-2);
  background: var(--surface-soft); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 3px 9px; line-height: 1.3;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip.more { color: var(--muted); }

/* ---------- seleção de papéis (checkbox chips = .opt-grid/.opt) ---------- */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.opt {
  position: relative; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px 12px 40px; cursor: pointer;
  transition: border-color .14s, background .14s; background: var(--surface);
}
.opt:hover { border-color: var(--accent); }
.opt.on { border-color: var(--accent); background: var(--accent-soft); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .box {
  position: absolute; left: 12px; top: 13px; width: 20px; height: 20px;
  border: 2px solid var(--border); border-radius: 6px; transition: .14s;
}
.opt.on .box { background: var(--accent); border-color: var(--accent); }
.opt.on .box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.opt .t { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 7px; color: var(--fg); }
.opt .d { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.opt .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sel-note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.sel-note.bad { color: var(--danger); font-weight: 600; }

/* ---------- lista de unidades (checkbox rows + busca) ---------- */
.unit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.unit-head > div { flex: 1; min-width: 0; }
.unit-head h3 { margin-bottom: 4px; }
.unit-head .h-note { margin-bottom: 0; }
.unit-search-btn {
  flex: none; width: 40px; height: 40px; border: 1px solid var(--border-soft);
  border-radius: 10px; background: var(--surface); color: var(--fg-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .14s, color .14s;
}
.unit-search-btn:hover { border-color: var(--accent); color: var(--accent); }
.unit-search-wrap { margin-top: 14px; }
.unit-search-wrap[hidden] { display: none; }
.unit-list { margin-top: 16px; border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; background: var(--surface); }
.unit-row {
  position: relative; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px;
  padding: 14px 16px 14px 44px; cursor: pointer; transition: background .14s;
}
.unit-row + .unit-row { border-top: 1px solid var(--border-soft); }
.unit-row:hover { background: var(--surface-soft); }
.unit-row input { position: absolute; opacity: 0; pointer-events: none; }
/* checkbox idêntico ao dos papéis (.opt .box): 20×20, borda 2px, radius 6px,
   mesmo "check" — para ficarem padronizados na tela. */
.unit-row .box {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 6px; transition: .14s;
}
.unit-row.on .box { background: var(--accent); border-color: var(--accent); }
.unit-row.on .box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.unit-row .unit-name { font-weight: 700; font-size: 13.5px; color: var(--fg); }
.unit-row .unit-meta { font-size: 12px; color: var(--muted); }
.unit-empty { padding: 20px 16px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- link "ver permissões deste(s) papel(is)" ---------- */
.perm-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: none; border: 0; padding: 0; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer;
}
.perm-link svg { width: 15px; height: 15px; flex: none; }
.perm-link:hover { text-decoration: underline; }
.perm-link[hidden] { display: none; }

/* ---------- hero de detalhe (= .dt-hero) ---------- */
.dt-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.dt-hero-main { flex: 1; min-width: 220px; }
.dt-hero-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-hero-main h2, .dt-hero-main h1 { font-size: 22px; letter-spacing: -.02em; margin: 0; color: var(--fg); }
.dt-hero-main .sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.dt-hero-edit { gap: 7px; }
.dt-hero-edit svg { width: 15px; height: 15px; }

/* ---------- grade chave/valor do detalhe (= .dt-grid/.dt-kv) ---------- */
.dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .dt-grid { grid-template-columns: 1fr; } }
.dt-kv .k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 5px; }
.dt-kv .v { font-size: 14px; color: var(--fg); font-weight: 600; }

/* ---------- barra "Permissões efetivas" (= .mtx-bar) ---------- */
.mtx-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mtx-bar .t { font-size: 15px; font-weight: 800; color: var(--fg); }
.mtx-bar .c {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 700;
  background: var(--accent-soft); border-radius: 999px; padding: 3px 11px;
}

/* ---------- master-detail somente leitura (= .pv5-md) ----------
   Mesma estrutura visual de admin_roles.css, porém verde e escopada a
   users.css (não carregamos admin_roles.css nestas telas). */
.pv5-md {
  display: grid; grid-template-columns: 296px 1fr;
  border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden;
  margin-top: 16px;
}
@media (max-width: 760px) { .pv5-md { grid-template-columns: 1fr; } }
.pv5-cats { border-right: 1px solid var(--border-soft); background: var(--surface-soft); padding: 8px; max-height: 560px; overflow: auto; }
@media (max-width: 760px) { .pv5-cats { border-right: 0; border-bottom: 1px solid var(--border-soft); max-height: none; } }
.pv5-sec {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding: 13px 12px 6px;
}
.pv5-sec:first-child { padding-top: 6px; }
.pv5-cat {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 0; border-radius: 10px; background: none; font: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--fg-2); cursor: pointer; text-align: left;
  transition: background .12s;
}
.pv5-cat:hover { background: var(--surface); }
.pv5-cat.on { background: var(--surface); color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); }
.pv5-cat .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv5-cat .cnt { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); flex: none; }
.pv5-cat.full .cnt { color: var(--success); }
.pv5-cat.empty .cnt { color: var(--muted); opacity: .6; }
.pv5-panel { padding: 22px 24px; min-height: 280px; overflow: auto; }
.pv5-panel h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px 0; color: var(--fg); }
.pv5-panel .pd { font-size: 12.5px; color: var(--fg-2); margin-top: 4px; margin-bottom: 8px; line-height: 1.5; }
.pv5-act { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--border-soft); }
.pv5-act:last-child { border-bottom: 0; }
.pv5-act .al { font-size: 14px; font-weight: 700; color: var(--fg); }

/* toggle somente-leitura (= .sw, sempre disabled nestas telas) */
.sw { position: relative; width: 44px; height: 26px; flex: none; display: inline-block; }
.sw input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: not-allowed; z-index: 2; }
.sw .tr { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .16s; }
.sw .kn { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(8, 12, 20, .28); transition: transform .16s; }
.sw input:checked ~ .tr { background: var(--accent); }
.sw input:checked ~ .kn { transform: translateX(18px); }
.sw input:disabled ~ .tr { opacity: .6; }

/* ---------- modal grande de permissões (= .dialog.dialog-lg) ----------
   É um <dialog> NATIVO aberto via showModal(). O .dialog base (application.css)
   aplica um transform de entrada que só é zerado por .scrim.is-open — como aqui
   não há .scrim, é preciso zerar o transform e centralizar explicitamente na
   viewport (top-layer), senão o modal aparece deslocado/no canto. */
.dialog.dialog-lg { width: min(880px, 94vw); max-height: 90vh; }
.dialog.dialog-lg[open] {
  position: fixed; inset: 0; margin: auto; transform: none;
}
.dialog.dialog-lg .d-body { padding: 26px 26px 4px; }
.dialog-lg .pv5-md { height: 480px; }
.dialog-lg .pv5-panel { overflow: auto; }
@media (max-width: 760px) { .dialog-lg .pv5-md { height: auto; } }

/* ---------- nota de responsável (= .dt-owner-note) ---------- */
.dt-owner-note {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--fg-2);
  background: color-mix(in oklab, var(--accent) 8%, transparent); border-radius: 10px; padding: 9px 12px;
}
.dt-owner-note[hidden] { display: none; }
.dt-owner-note svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* ---------- botão de exclusão (= .dt-del) ---------- */
.dt-del {
  margin-left: 6px; background: none; border: 0; font-family: inherit;
  font-weight: 700; font-size: 12.5px; color: var(--danger); cursor: pointer;
  padding: 8px 10px; border-radius: 8px; transition: background .14s;
}
.dt-del:hover { background: color-mix(in oklab, var(--danger) 10%, transparent); }
.dt-del:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- bolinha de status (= .st-dot) ---------- */
.st-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }