/* IHOH DPB — Page-level & Auth Styles */

/* ── Login Screen ── */
#login-screen{
  position:fixed;inset:0;z-index:9999;
  background:var(--page-bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .35s var(--ease);
}
#login-screen.hidden{opacity:0;pointer-events:none;}
.login-card{
  width:360px;
  background:var(--panel);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  padding:var(--space-8) var(--space-8) var(--space-6);
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
}
.login-logo{
  width:44px;height:44px;
  background:var(--teal-dim);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-2);
}
.login-title{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.login-sub{font-size:13px;color:var(--muted);margin-bottom:var(--space-2);}
.login-role-tabs{
  display:flex;gap:6px;width:100%;
  background:var(--field);
  border-radius:var(--radius);
  padding:4px;
}
.login-role-tab{
  flex:1;padding:7px 0;border-radius:7px;
  font-size:12px;font-weight:600;text-align:center;
  color:var(--muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
  border:none;background:none;
}
.login-role-tab.active{
  background:var(--panel-raised);
  color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.login-pin-label{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);align-self:flex-start;
}
.login-pin-dots{
  display:flex;gap:10px;justify-content:center;margin:var(--space-2) 0;
}
.login-pin-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--field);border:1.5px solid var(--field-border);
  transition:background .15s,border-color .15s;
}
.login-pin-dot.filled{background:var(--teal);border-color:var(--teal);}
.login-pin-input{
  position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;
}
.login-numpad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;
}
.login-key{
  height:48px;border-radius:var(--radius);
  background:var(--field);border:1px solid var(--field-border);
  font-size:16px;font-weight:500;color:var(--ink);
  cursor:pointer;transition:background var(--t-fast);
  display:flex;align-items:center;justify-content:center;
}
.login-key:active{background:var(--panel-raised);}
.login-key.login-key-del{font-size:13px;color:var(--muted);}
.login-key.login-key-enter{
  grid-column:span 2;
  background:var(--teal);color:var(--on-teal);
  font-size:13px;font-weight:700;letter-spacing:.04em;
}
.login-key.login-key-enter:active{background:var(--teal-hover);}
.login-error{
  font-size:12px;color:var(--error);min-height:16px;text-align:center;
}

/* ── Sidebar User Bubble ── */
.sidebar-user{
  padding:var(--space-3) var(--space-3) var(--space-4);
  border-top:1px solid var(--border-subtle);
  margin-top:auto;
}
.sidebar-user-bubble{
  display:flex;align-items:center;gap:10px;
  padding:10px var(--space-3);
  border-radius:var(--radius);
  background:var(--field);
  border:1px solid var(--field-border);
  cursor:pointer;
  transition:background var(--t-fast);
}
.sidebar-user-bubble:hover{background:var(--panel-raised);}
.sidebar-user-avatar{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
  letter-spacing:.03em;
}
.avatar-dev{background:rgba(0,184,169,.18);color:var(--teal);}
.avatar-obs{background:rgba(245,166,35,.15);color:var(--warning);}
.sidebar-user-info{flex:1;min-width:0;}
.sidebar-user-name{font-size:13px;font-weight:600;color:var(--ink);}
.sidebar-user-role{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.sidebar-user-logout{
  padding:4px;color:var(--faint);border-radius:6px;
  transition:color var(--t-fast),background var(--t-fast);
}
.sidebar-user-logout:hover{color:var(--error);background:var(--error-soft);}

/* ── Observer lockdown ── */
body.observer .macro-actions,
body.observer .micro-actions,
body.observer .reorder-btn,
body.observer .add-btn,
body.observer .prod-action-btn,
body.observer .res-add-btn,
body.observer .res-edit-btn,
body.observer .ref-item-actions,
body.observer .ref-add-note-btn,
body.observer .changelog-entry-actions,
body.observer .changelog-add-btn,
body.observer #kv-btn-push,
body.observer .add-product-btn{
  display:none!important;
}
body.observer .micro-row{cursor:default;pointer-events:none;}