/* ============================================================================
06 · ROLES, permission-driven visibility.
----------------------------------------------------------------------------
The active role lives on . Business apps use
employee|manager|admin; mobile apps declare their own cast, e.g. user|trainer.
Any element can declare who may see it:
Elements with NO data-roles attribute are visible to everyone.
This is presentation only, a real deployment must also enforce the same
rules server-side. Hiding a button is not access control.
========================================================================== */
html[data-role="employee"] [data-roles]:not([data-roles~="employee"]),
html[data-role="manager"] [data-roles]:not([data-roles~="manager"]),
html[data-role="admin"] [data-roles]:not([data-roles~="admin"]),
html[data-role="user"] [data-roles]:not([data-roles~="user"]),
html[data-role="trainer"] [data-roles]:not([data-roles~="trainer"]) {
display: none !important;
}
/* Before JS resolves the role, hide anything role-restricted so a lower
privilege level never flashes higher-privilege UI on first paint. */
html:not([data-role]) [data-roles] { display: none !important; }
/* ---------- role badge in the sidebar / topbar ---------- */
.role-chip {
display: inline-flex; align-items: center; gap: 5px;
height: 20px; padding: 0 var(--sp-2);
border-radius: var(--radius-pill);
background: var(--neutral-bg); border: var(--border-width) solid var(--neutral-bd);
font-family: var(--font-mono); font-size: var(--text-2xs);
letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle);
}
html[data-role="manager"] .role-chip {
background: var(--info-bg); border-color: var(--info-bd); color: var(--info);
}
html[data-role="admin"] .role-chip {
background: var(--brand-soft); border-color: var(--brand-ring); color: var(--brand);
}
/* ---------- login screen ---------- */
.auth {
min-height: 100vh; min-height: 100dvh;
display: grid; place-items: center; padding: var(--sp-6) var(--sp-4);
background: var(--bg-app);
}
.auth__panel { width: min(100%, 440px); }
.auth__brand {
display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
margin-bottom: var(--sp-6);
}
.auth__card {
background: var(--bg-surface); border: var(--border-width) solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
padding: var(--sp-6);
}
.auth__divider {
display: flex; align-items: center; gap: var(--sp-3);
margin: var(--sp-6) 0 var(--sp-4);
color: var(--text-subtle); font-size: var(--text-xs);
}
.auth__divider::before, .auth__divider::after {
content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth__roles { display: grid; gap: var(--sp-2); }
.role-option {
display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
padding: var(--sp-3); background: var(--bg-sunken);
border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
transition: border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.role-option:hover {
border-color: var(--brand-ring); background: var(--bg-raised); transform: translateY(-1px);
}
.role-option__meta { min-width: 0; }
.role-option__arrow { margin-left: auto; color: var(--text-subtle); flex: none; }
.role-option:hover .role-option__arrow { color: var(--brand); }
.auth__foot {
margin-top: var(--sp-5); text-align: center;
font-size: var(--text-xs); color: var(--text-subtle);
}
.auth__foot a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
/* Set by app.js for any role the selectors above do not name. */
[data-role-hidden] { display: none !important; }