/* Rovinak visual identity, shared by the public entry and authenticated workspace. */
:root {
  --rv-navy: #0b1d36;
  --rv-navy-soft: #152a4a;
  --rv-cyan: #00e5c7;
  --rv-cyan-dark: #00c4aa;
  --rv-bg: #f7f9fc;
  --rv-border: #e2e8f0;
  --rv-shadow: 0 10px 40px rgb(11 29 54 / 8%);
}

.entry-page {
  --entry-accent: var(--rv-cyan);
  background: var(--rv-navy);
  color: #f8fafc;
}
.entry-page p { color: #a9b7c8; }
.entry-page .entry-nav.is-scrolled { background: rgb(11 29 54 / 88%); }
.entry-page .entry-primary { background: var(--rv-cyan); border-color: var(--rv-cyan); color: var(--rv-navy); }
.entry-page .entry-primary:hover { background: #62f5df; color: var(--rv-navy); }
.entry-page .entry-diagram { background: var(--rv-navy-soft); box-shadow: var(--rv-shadow); }
.entry-page .entry-login-card { background: var(--rv-navy-soft); border-color: rgb(255 255 255 / 14%); }
.entry-brand { display: inline-flex; align-items: center; gap: 10px; }
.entry-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 14px; }
.entry-footer .entry-brand img { width: 58px; height: 58px; }

#app { background: var(--rv-bg); }
#app .topbar, #app .sidebar { background: var(--rv-navy); color: #f8fafc; }
#app .topbar { border-bottom-color: rgb(255 255 255 / 10%); }
#app .sidebar { border-left-color: rgb(255 255 255 / 10%); }
#app .topbar-logo, #app .sidebar-logo { object-fit: contain; background: #fff; border-radius: 12px; padding: 3px; }
#app .topbar-logo { width: 38px; height: 38px; }
#app .sidebar-logo { width: 48px; height: 48px; }
#app .brand strong { color: #f8fafc; }
#app .brand small { color: #9fb0c5; }
#app .nav-link.active, #app .nav-link:hover { background: rgb(0 229 199 / 14%); color: var(--rv-cyan); }
#app main > header { background: transparent; }
#app .card, #app .dashboard-card, #app .company-card { border-color: var(--rv-border); box-shadow: var(--rv-shadow); border-radius: 20px; }
#app button:not(.ghost):not(.outline), #app .primary { background: var(--rv-navy); }
#app button:not(.ghost):not(.outline):hover, #app .primary:hover { background: var(--rv-navy-soft); }
#app button.outline, #app .outline { border-color: var(--rv-border); color: var(--rv-navy); }
#app .assistant-toggle { background: var(--rv-cyan); color: var(--rv-navy); }

@media (max-width: 900px) {
  .entry-brand img { width: 40px; height: 40px; }
}