/* office-info admin — layered over directory.css.
   Modal / form styles are the prototype's (reference/office-directory.html),
   rendered as static cards on server-rendered pages instead of JS overlays. */

/* ---------- modal / form (from the prototype) ---------- */
.modal{
  position:relative;width:min(880px,calc(100% - 32px));margin:0 auto;
  background:var(--card);border-radius:11px;display:none;
  flex-direction:column;box-shadow:0 20px 60px rgba(16,32,28,.28)
}
.modal.on{display:flex}
.md-h{padding:17px 22px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px}
.md-h h2{margin:0;font-size:17px;font-weight:640;letter-spacing:-.01em}
.md-b{flex:1;overflow-y:auto;padding:18px 22px}
.md-f{padding:14px 22px;border-top:1px solid var(--rule);display:flex;gap:9px;background:#FAFCFB;align-items:center}
.fset{margin-bottom:20px}
.fset h5{
  margin:0 0 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--rule-2)
}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:11px}
.f label{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:3px;font-weight:520}
.f label .req{color:var(--rose)}
.f input,.f select{
  width:100%;height:32px;padding:0 9px;border:1px solid var(--rule);border-radius:5px;background:#fff
}
.f input:focus,.f select:focus{border-color:var(--mint-2);outline:none;box-shadow:0 0 0 3px var(--mint-soft)}
.f input.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.f .err{color:var(--rose);font-size:11px;margin-top:3px;display:none}
.f.bad input{border-color:var(--rose);background:#FEF8F9}
.f.bad .err{display:block}
.f.wide{grid-column:1/-1}
.f input[readonly]{background:var(--rule-2);color:var(--ink-2)}

/* ---------- admin chrome ---------- */
.adm-nav{display:flex;gap:14px;margin-left:6px}
.adm-nav a{color:#BFD6CE;text-decoration:none;font-size:13px}
.adm-nav a:hover{color:#fff}
.adm-session{margin-left:auto;display:flex;align-items:center;gap:11px}
.adm-user{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#BFD6CE}
.adm-shell{max-width:1160px;margin:26px auto;padding:0 20px}
.adm-msg{
  background:var(--mint-soft);border:1px solid var(--mint-line);color:var(--mint);
  border-radius:7px;padding:9px 14px;margin-bottom:16px;font-size:13px
}
.adm-error{
  background:var(--rose-soft);border:1px solid var(--rose);color:var(--rose);
  border-radius:7px;padding:9px 12px;margin:0 0 13px;font-size:13px
}
.adm-tools{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.adm-card{background:var(--card);border:1px solid var(--rule);border-radius:9px;box-shadow:var(--sh);overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{
  text-align:left;padding:9px 13px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)
}
.adm-table td{padding:8px 13px;border-bottom:1px solid var(--rule-2);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:0}
.adm-table .mono{font-family:var(--mono);font-size:11.5px}
.adm-table .badge.closed{background:var(--rose-soft);color:var(--rose)}
.adm-table td.warn{color:var(--rose);font-weight:600}
.adm-table form{display:inline}
.adm-actions{display:flex;gap:6px;justify-content:flex-end}
.btn.danger{color:var(--rose);border-color:var(--rose)}
.btn.danger:hover{background:var(--rose-soft)}
.adm-login-wrap{min-height:100vh;display:flex;align-items:center;padding:20px}
.adm-login{width:min(420px,100%)}

/* --- field permission grid ------------------------------------------- */
.perm-grid .perm-role { text-transform: none; text-align: center; }
.perm-grid .perm-sub { font-size: 10px; font-weight: 400; color: var(--ink-3); }
.perm-grid .perm-cell { text-align: center; white-space: nowrap; }
.perm-grid .perm-cell input { margin: 0 4px; }
.perm-col { font-size: 10.5px; color: var(--ink-3); margin-left: 6px; }

/* --- login: one button per SSO provider -------------------------------
   .btn is a fixed 30px inline-flex row; a provider button carries a label
   and its domain list on two lines, so it opts out of that height rather
   than fighting it inline. ------------------------------------------- */
.adm-sso{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  height:auto;padding:9px 13px;margin-bottom:8px;text-align:left
}
.adm-sso small{font-size:10.5px;font-weight:400;opacity:.82}

/* --- login: SSO/local divider ---------------------------------------- */
.adm-divider{
  margin:14px 0 12px;text-align:center;font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;gap:10px
}
.adm-divider::before,.adm-divider::after{content:"";flex:1;border-top:1px solid var(--line,#e3e3e3)}

/* ---------- radio pill rows (Type, Status) — prototype language ------- */
.radio-row{display:flex;gap:6px;flex-wrap:wrap}
.radio-pill{position:relative;cursor:pointer}
.radio-pill input{position:absolute;opacity:0;pointer-events:none}
.radio-pill span{
  display:inline-block;height:32px;line-height:30px;padding:0 13px;
  border:1px solid var(--rule);border-radius:5px;background:#fff;
  font-size:12.5px;color:var(--ink-2);user-select:none;
  transition:border-color .12s,background .12s,color .12s
}
.radio-pill:hover span{border-color:var(--mint-2)}
.radio-pill input:checked+span{
  border-color:var(--mint-2);background:var(--mint-soft);
  color:var(--ink-1,#1B2C26);font-weight:600
}
.radio-pill input:focus-visible+span{box-shadow:0 0 0 3px var(--mint-soft)}
.f.bad .radio-pill span{border-color:var(--rose)}