/* public/css/admin.css — v4.0.0, owner A5. Accounts, Programs and Configuration (accounts.js,
   programs.js, config.js). Tokens only — they are defined in index.html; this file never declares
   :root. Every control keeps the base 16px / 44px-on-coarse-pointer rules from index.html. */

/* ---- forms and sections ---- */
.acctcard{padding:var(--space-5);max-width:44rem}
.acctsection{padding:var(--space-5);margin-bottom:var(--space-4);max-width:52rem}
.acctsection>h2{margin:0 0 var(--space-3);font-size:var(--fs-lg)}
.acctcard .field,.acctsection .field{margin-bottom:var(--space-3)}
.acctcard .field-wide input,.acctcard .field-wide select,
.acctsection .field-wide input,.acctsection .field-wide select{max-width:28rem}
.acctpair{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.acctpair .field{min-width:min(12rem,100%)}
.acctpair .field input,.acctpair .field select{max-width:16rem}
.acctactions{margin-top:var(--space-2)}
.acctmeta{margin:0 0 var(--space-2);overflow-wrap:anywhere}
.acctstatusrow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);
  padding-top:var(--space-3);border-top:1px solid var(--border)}
.acctstatusrow button{margin-left:var(--space-2)}
.acctdetailhead h1{overflow-wrap:anywhere;min-width:0}
.dangerzone{border-left:4px solid var(--danger)}
.acctemail{display:block;overflow-wrap:anywhere}
.t-accounts .rname a,.t-programs .rname a{color:var(--text);text-decoration:none}
.t-accounts .rname a:hover,.t-programs .rname a:hover{color:var(--primary);text-decoration:underline}
.backbar a.btnlink{text-decoration:none}

/* the list's search row: label above control, wraps on a phone */
.acctfilters{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:flex-end;margin:0 0 var(--space-3)}
.acctfilters .field{min-width:min(12rem,100%)}
.acctfilters .field input,.acctfilters .field select{max-width:18rem}

/* access grants: one row per other program — the checkbox, then its scope */
.acctgrants{border:0;margin:0;padding:0;min-width:0}
.grantrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-4);
  padding:var(--space-1) 0;border-bottom:1px solid var(--border)}
.grantrow:last-child{border-bottom:0}
.grantrow label.check{flex:1 1 14rem;min-width:0;margin:0}
.grantrow .field{margin:0}
.grantrow .field select{max-width:18rem}

/* the one-time temporary password: legible, selectable in one go, never printed */
.notice.secret code{display:inline-block;padding:1px var(--space-2);border-radius:var(--radius-sm);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-strong);user-select:all}

/* programs */
.progcounts{margin:0 0 var(--space-2);padding-left:var(--space-5);line-height:1.8}
.progwarn{margin-top:var(--space-1)}
table.roster td.num{font-variant-numeric:tabular-nums}

/* configuration: the Xi table (the name input is the second column) and the email queue */
#cfgXiTable td .field-wide input{min-width:16rem;max-width:28rem}
#cfgXiTable td.num{width:3rem;color:var(--text-muted)}
#cfgXiTable tr.inactive td{color:var(--text-muted)}
.cfgorder{white-space:nowrap}
.cfgorder button{min-width:2.75rem}
.cfgvaluelist{margin:var(--space-1) 0 0;padding-left:var(--space-5)}
.emailstate{margin:0 0 var(--space-2)}
#emailStatus p{margin:0 0 var(--space-2);overflow-wrap:anywhere}
.t-email td{vertical-align:top}
.t-email .mailto{overflow-wrap:anywhere;max-width:16rem}
.t-email td.actions{white-space:nowrap}
.t-email td.actions button{margin-right:var(--space-1)}

/* ---- narrow: the Programs, email and Xi tables stack into cards like Accounts ---- */
@media screen and (max-width:899.98px){
  .roster.t-programs,.roster.t-email{display:block;padding:var(--space-2)}
  .roster.t-programs thead,.roster.t-email thead{display:none}
  .roster.t-programs tbody,.roster.t-email tbody{display:block}
  .roster.t-programs tr,.roster.t-email tr{display:block;background:var(--surface-2);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3)}
  .roster.t-programs tr:last-child,.roster.t-email tr:last-child{margin-bottom:0}
  .roster.t-programs td,.roster.t-email td{display:block;width:auto;border-bottom:0;padding:var(--space-2) 0;
    text-align:left;min-width:0;max-width:none;overflow-wrap:anywhere}
  .roster.t-programs td+td,.roster.t-email td+td{border-top:1px solid var(--border)}
  .roster.t-programs td[data-label]::before,.roster.t-email td[data-label]::before{content:attr(data-label);display:block;
    font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:2px}
  .roster.t-email td.actions{white-space:normal;display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .roster.t-email td.actions[data-label]::before{flex:1 0 100%;margin-bottom:0}
}
/* ---- Accounts: the actions cell is a run of buttons, so the list stacks all the way up to 899px ---- */
@media screen and (max-width:899.98px){
  .roster.t-accounts{display:block;padding:var(--space-2)}
  .roster.t-accounts thead{display:none}
  .roster.t-accounts tbody{display:block}
  .roster.t-accounts tr{display:block;background:var(--surface-2);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3)}
  .roster.t-accounts tr:last-child{margin-bottom:0}
  .roster.t-accounts td{display:block;width:auto;border-bottom:0;padding:var(--space-2) 0;
    text-align:left;vertical-align:baseline;min-width:0;overflow-wrap:anywhere}
  .roster.t-accounts td+td{border-top:1px solid var(--border)}
  .roster.t-accounts td:empty{display:none}
  .roster.t-accounts td[data-label]::before{content:attr(data-label);display:block;
    font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    color:var(--text-muted);margin-bottom:2px}
  .roster.t-accounts td.actions{white-space:normal;display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .roster.t-accounts td.actions[data-label]::before{flex:1 0 100%;margin-bottom:0}
  .roster.t-accounts td.actions .btnlink{margin-right:0;flex:1 1 auto;font-size:var(--fs-base)}
  .roster.t-accounts tr.emptyrow{background:transparent;border:0;padding:0}
}
/* ---- the legacy pending list stacks on a phone ---- */
@media screen and (max-width:599.98px){
  .roster.t-pending{display:block;padding:var(--space-2)}
  .roster.t-pending thead{display:none}
  .roster.t-pending tbody{display:block}
  .roster.t-pending tr{display:block;background:var(--surface-2);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3)}
  .roster.t-pending tr:last-child{margin-bottom:0}
  .roster.t-pending td{display:block;width:auto;border-bottom:0;padding:var(--space-2) 0;text-align:left;
    vertical-align:baseline;min-width:0;overflow-wrap:anywhere}
  .roster.t-pending td+td{border-top:1px solid var(--border)}
  .roster.t-pending td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-2xs);font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:2px}
  .roster.t-pending td.actions{display:flex;flex-wrap:wrap;gap:var(--space-2);white-space:normal}
  .roster.t-pending td.actions[data-label]::before{flex:1 0 100%;margin-bottom:0}
}
@media screen and (max-width:599.98px){
  #cfgXiTable{display:block}
  #cfgXiTable thead{display:none}
  #cfgXiTable tbody{display:block}
  #cfgXiTable tr{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);
    padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--border)}
  #cfgXiTable td{display:block;border:0;padding:0;min-width:0}
  #cfgXiTable td.num{grid-row:1 / span 2;width:auto}
  #cfgXiTable td .field-wide input{min-width:0;max-width:none;width:100%}
  #cfgXiTable td:nth-child(n+3){grid-column:2}
  #cfgXiTable td[data-label]:not(.num):not(:nth-child(2))::before{content:attr(data-label);display:block;
    font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
  .acctstatusrow button{margin-left:0}
}

/* ---- print: what the page says, never its controls or a password ---- */
/* the Xi list's values as text — shown on paper only, where the editing controls are hidden */
.cfgprint{display:none}
@media print{
  .notice.secret,.acctfilters,.acctactions,.dangerzone,#cfgXiAdd,.cfgorder,#emailTest,#emailRetryFailed,#emailRefresh{display:none!important}
  /* Configuration on paper: the Xi list as a read-only table (name, active) — no inputs, checkboxes,
     move or remove buttons — and no Save form (a change note and buttons mean nothing on paper) */
  #cfgXiTable input,#cfgXiTable button,#cfgXiTable .cellcheck,#cfgXiTable .field,
  #cfgXiTable th:nth-child(n+4),#cfgXiTable td:nth-child(n+4),#cfgSaveSection{display:none!important}
  .cfgprint{display:inline!important}
  .acctsection,.acctcard{box-shadow:none;max-width:none;break-inside:avoid}
}