/* ── Drawer overrides ───────────────────────────────── */
.offcanvas-end-drawer { width: 500px !important; }
@media (max-width: 575.98px) { .offcanvas-end-drawer { width: 100vw !important; } }

.offcanvas .offcanvas-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--hr-line);
  gap: 12px;
}
.offcanvas .drawer-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--hr-primary-soft);
  display: grid; place-items: center; flex: 0 0 auto;
  color: var(--hr-primary); font-size: 1.1rem;
}
.offcanvas .offcanvas-title { font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
.offcanvas .offcanvas-subtitle { font-size: .8125rem; color: var(--hr-muted); margin-top: 1px; }

.offcanvas-body { padding: 0 24px 24px; overflow-y: auto; }

.drawer-section { padding-top: 20px; }
.drawer-section-label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #94a3b8;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--hr-line); }

/* Avatar preview strip */
.drawer-avatar-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--hr-surface);
  border: 1px solid var(--hr-line); border-radius: 10px;
  margin-bottom: 14px;
}
.drawer-avatar-preview .avatar { width: 36px; height: 36px; font-size: .75rem; }
.drawer-avatar-preview span { font-size: .8125rem; color: var(--hr-muted); }
.drawer-avatar-preview strong { color: var(--hr-ink); font-weight: 500; }

/* Tighter form labels */
.offcanvas-body .form-label {
  font-size: .8125rem; font-weight: 500;
  color: #374151; margin-bottom: 5px;
}
.offcanvas-body .form-control,
.offcanvas-body .form-select { font-size: .875rem; border-radius: 8px; }

/* Security toggle rows */
.drawer-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border: 1px solid var(--hr-line); border-radius: 10px;
  background: var(--hr-surface);
}
.drawer-toggle-row + .drawer-toggle-row { margin-top: 8px; }
.drawer-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.drawer-toggle-info span { font-size: .875rem; font-weight: 500; color: var(--hr-ink); }
.drawer-toggle-info small { font-size: .75rem; color: var(--hr-muted); }

/* Footer */
.offcanvas-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--hr-line);
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto; gap: .5rem;
}
.offcanvas-footer .footer-hint { font-size: .75rem; color: var(--hr-muted); }