/* ==========================================
   GC TECH RCM SHELL — sidebar única (js/gc-rcm-shell.js)
   No Agent Dashboard a sidebar usa agent-style.css; aqui ficam o rodapé
   compartilhado e a cópia do visual para as telas avulsas do RCM
   (Fleet Planner, Customers, Damage Control, Add Booking).
   ========================================== */

/* Rodapé (dashboard e telas avulsas) */
.shell-agent-name { font-weight: 600; font-size: 13px; color: #f8fafc; }
.shell-agent-role { font-size: 11px; color: #94a3b8; }
.shell-logout {
  display: block; margin: 10px 0 0 auto; background: none; border: none; padding: 0;
  font-size: 12px; color: #ef4444; cursor: pointer; text-decoration: underline;
}
.shell-logout:hover { color: #f87171; }
.sidebar .menu-item[hidden] { display: none; }
.sidebar { color-scheme: dark; } /* barra de rolagem escura no menu */

/* ---------- Layout das telas avulsas ---------- */
body.has-rcm-shell { flex-direction: row; height: calc(100vh / var(--fit-zoom, 1)); overflow: hidden; }
.rcm-shell { display: flex; width: 100%; height: calc(100vh / var(--fit-zoom, 1)); overflow: hidden; }
.rcm-shell-main { flex: 1; min-width: 0; height: calc(100vh / var(--fit-zoom, 1)); display: flex; flex-direction: column; overflow: hidden; }
.rcm-shell-main > .rcm-content-container,
.rcm-shell-main > .fleet-planner-container { flex: 1; min-height: 0; }

/* ---------- Sidebar (mesmo visual de agent-style.css) ---------- */
.rcm-shell-sidebar, .rcm-shell-sidebar * {
  box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rcm-shell-sidebar { width: 260px; flex-shrink: 0; height: calc(100vh / var(--fit-zoom, 1)); background: #0b1120; border-right: 1px solid #1e293b; display: flex; flex-direction: column; color: #f8fafc; }
.rcm-shell-sidebar .sidebar-logo { padding: 20px; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; border-bottom: 1px solid #1e293b; }
.rcm-shell-sidebar .sidebar-logo img { height: 32px; border-radius: 4px; }
.rcm-shell-sidebar .sidebar-menu { flex: 1; padding: 20px 15px; overflow-y: auto; }
.rcm-shell-sidebar .menu-label { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: 700; margin: 15px 0 8px 10px; letter-spacing: .5px; }
.rcm-shell-sidebar .menu-item { display: block; padding: 10px 12px; color: #cbd5e1; text-decoration: none; font-size: 14px; border-radius: 6px; margin-bottom: 4px; transition: background .2s, color .2s; }
.rcm-shell-sidebar .menu-item:hover { background: #1e293b; color: #fff; }
.rcm-shell-sidebar .menu-item.active { background: #16a34a; color: #fff; font-weight: 600; }
.rcm-shell-sidebar .sidebar-footer { padding: 20px; border-top: 1px solid #1e293b; background: #0f172a; }
.rcm-shell-sidebar .agent-profile { display: flex; align-items: center; gap: 10px; }
/* .avatar também existe na Customer Database (65px azul): aqui vale o da sidebar */
.rcm-shell-sidebar .agent-profile .avatar {
  width: 36px; height: 36px; background: #334155; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: normal; color: inherit;
}
.rcm-shell-sidebar .bn-menu-count:empty { display: none; }

@media (max-width: 900px) {
  body.has-rcm-shell, .rcm-shell { height: auto; min-height: calc(100vh / var(--fit-zoom, 1)); overflow: visible; }
  .rcm-shell { flex-direction: column; }
  .rcm-shell-sidebar { width: 100%; height: auto; flex-direction: row; overflow-x: auto; }
  .rcm-shell-sidebar .sidebar-menu { display: flex; padding: 10px; }
  .rcm-shell-sidebar .menu-label, .rcm-shell-sidebar .sidebar-footer { display: none; }
  .rcm-shell-main { height: auto; min-height: calc(100vh / var(--fit-zoom, 1)); }
}