/* login screen */
#login { position: fixed; inset: 0; z-index: 300; background: var(--head); display: flex; align-items: center; justify-content: center; }
#login[hidden] { display: none; }
.login-card { background: #fff; border-radius: 8px; padding: 24px 28px; width: 350px; max-width: 94vw; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.login-card h2 { margin: 0; font-size: 18px; color: var(--head); }
.login-card p { margin: 0; }
.login-card p:empty { display: none; }
.login-card label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.login-card input { padding: 7px 8px; font-size: 14px; }
.login-card button { padding: 8px; font-size: 14px; }
.login-err { color: var(--danger); font-size: 12px; }
.login-err[hidden] { display: none; }

/* user box in the top bar */
.userbox { display: flex; gap: 8px; align-items: center; margin-left: 12px; font-size: 12px; color: #cfe0f5; }
.userbox[hidden] { display: none; }
.toast[hidden] + .userbox { margin-left: auto; }
.userbox button { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 2px 8px; }
.userbox button:hover { background: rgba(255,255,255,.15); }

/* read-only tabs: everything that edits is marked data-w and hidden */
.ro [data-w] { display: none !important; }
.ro .two-col { grid-template-columns: 1fr; }
.ro tr.trow, .ro td.dt, .ro td.ed, .ro td.c { cursor: default; }
.ro td.dt:hover, .ro td.ed:hover { background: transparent; outline: none; }

/* Users tab */
.perm td, .perm th { text-align: center; }
.perm td:first-child, .perm th:first-child { text-align: left; }
.perm.off { opacity: .4; pointer-events: none; }
label.chk { flex-direction: row !important; align-items: center; gap: 6px !important; }
.lvl { display: inline-block; border-radius: 3px; padding: 0 5px; margin: 1px 2px 1px 0; font-size: 11px; background: #e8eef7; white-space: nowrap; }
.lvl.write { background: #d4ecd0; }
.gen { font-size: 11px; padding: 1px 6px; margin-top: 2px; align-self: flex-start; }

/* Read-only tabs: hide everything that changes data (the server refuses these calls as well) */
.ro #pl-add, .ro [data-paint], .ro #h-imp, .ro #p-add, .ro [data-act], .ro button[data-edit], .ro button[data-del], .ro button[data-id],
.ro button[data-i], .ro .card:has(#vf), .ro .card:has(#h-form), .ro .card:has(#s-form) { display: none !important; }
.ro .two-col { grid-template-columns: 1fr; }