/* THE TENANT PANEL'S SCREENS (js/tuhi/tenant-panel.js) and the operator's Tenants screen (js/tuhi/tenants.js). Built on the shell's
   tokens (css/tuhi-shell.css: --surface --bd --fg --mut --acc --ok/--warn/--err …), so light and dark follow the console's theme.
   Phone-width safe: every row wraps, wide tables scroll inside their panel (.tm-scroll), inputs are at least 44px tall on touch. */
.tp .db-panel{ margin-bottom:14px; }
.tp h4{ margin:16px 0 8px; font-size:13px; color:var(--fg-2); }
.tp code{ font-size:12px; background:var(--code-bg); color:var(--code-fg); padding:1px 5px; border-radius:5px; overflow-wrap:anywhere; }
.tp .db-link{ font-size:12px; font-weight:600; color:var(--acc-fg); text-decoration:none; white-space:nowrap; }
.tp .db-link:hover{ text-decoration:underline; }

.tp-in, .tp select{ font:inherit; font-size:13px; color:var(--fg); background:var(--surface-2); border:1px solid var(--bd); border-radius:8px; padding:7px 10px; min-height:34px; max-width:100%; }
.tp-in:focus-visible, .tp select:focus-visible{ outline:2px solid var(--acc); outline-offset:1px; }
.tp-in[type=number]{ width:110px; }
.tp-in:disabled, .tp select:disabled{ opacity:.55; cursor:not-allowed; }
@media (pointer:coarse){ .tp-in, .tp select, .tp button{ min-height:44px; } }

.tp-form{ display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; margin:6px 0 10px; }
.tp-form label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--mut); font-weight:600; min-width:0; }
.tp-form fieldset{ border:0; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.tp-form legend{ font-size:12px; color:var(--mut); font-weight:600; margin-bottom:4px; }
.tp-filters{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:0 0 12px; }
.tp-filters .tp-in[type=search]{ flex:1 1 220px; }

.tp-check{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; color:var(--fg); font-size:13px; font-weight:500 !important; flex-direction:row !important; cursor:pointer; }
.tp-check .switch{ margin-top:1px; }
.tp-check.sm{ padding:4px 0; align-items:center; }
.tp-chips{ display:flex; flex-wrap:wrap; gap:4px 18px; }

.tp-danger{ color:var(--err-fg) !important; }
.tp-danger:hover{ border-color:var(--err-bd) !important; }

.tp-alert{ display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:10px; margin:0 0 12px; font-size:13px; border:1px solid; }
.tp-alert.warn{ background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-bd); }
.tp-alert.stop{ background:var(--err-bg); color:var(--err-fg); border-color:var(--err-bd); }
.tp-alert svg{ flex:none; margin-top:2px; }

.tp-meter{ margin:6px 0 10px; } .tp-meter .db-bar{ height:8px; margin-top:4px; }

.tp-once{ background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--fg); border-radius:12px; padding:12px 14px; margin:0 0 14px; }
.tp-copyrow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.tp-secret{ flex:1 1 260px; font-size:13px !important; padding:6px 8px !important; user-select:all; }

.tp-pre{ margin:0; background:var(--code-bg); color:var(--code-fg); border-radius:8px; padding:12px; font-size:12px; line-height:1.5; overflow-x:auto; white-space:pre; }

.tp-dial{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 6px; }
.tp-dial input[type=range]{ flex:1 1 200px; accent-color:var(--acc); }
.tp-dial output{ font-weight:700; min-width:2.5em; text-align:right; font-variant-numeric:tabular-nums; }

.tp-det summary{ cursor:pointer; font-size:11.5px; color:var(--acc-fg); margin-top:4px; }
.tp-flow{ margin:6px 0 0; padding-left:18px; font-size:12px; color:var(--fg-2); }
.tp-flow li{ margin:2px 0; overflow-wrap:anywhere; }
.tp-log td{ vertical-align:top; }
.tp-keys td{ vertical-align:top; }

@media (max-width:640px){
  .tp .db-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .tp-in[type=number]{ width:96px; }
}