:root {
  --invall-blue: #0050ff;
  --invall-blue-dark: #003cc2;
  --invall-text: #252a32;
  --invall-muted: #586271;
  --invall-border: #dce1e7;
  --invall-background: #f3f4f6;
}
body { background: var(--invall-background) !important; color: var(--invall-text); }
app-landing { display: block; height: auto !important; min-height: 100vh; }
app-landing .login-container {
  height: auto !important; min-height: 100vh; min-height: 100dvh;
  flex-direction: column !important; overflow: visible !important;
  background: var(--invall-background) !important;
}
app-landing .login-brand {
  flex: 0 0 auto !important; min-height: 0 !important; padding: 24px 16px 12px !important;
  background: #fff !important; border-bottom: 1px solid var(--invall-border);
}
app-landing .login-brand::before, app-landing .login-brand::after { display: none !important; }
app-landing .brand-content { animation: none !important; }
app-landing .brand-logo {
  width: 128px !important; height: 128px !important; object-fit: contain;
  margin: 0 auto !important; filter: none !important; animation: none !important;
}
app-landing .brand-title {
  color: var(--invall-blue) !important; font-size: 28px !important;
  margin: 4px 0 8px !important; letter-spacing: 0 !important;
}
app-landing .brand-subtitle { color: var(--invall-muted) !important; font-weight: 400 !important; }
app-landing .login-form-wrapper {
  flex: 1 0 auto !important; padding: 32px 20px !important;
  background: var(--invall-background) !important;
}
app-landing .login-form-container { width: 100%; max-width: 420px !important; }
app-landing .form-header h2 { color: var(--invall-text) !important; font-size: 24px !important; }
app-landing .form-header p, app-landing .form-footer { color: var(--invall-muted) !important; }
app-landing .form-label i { color: var(--invall-blue) !important; }
app-landing .login-input { border-color: var(--invall-border) !important; border-radius: 6px !important; }
app-landing .login-input::placeholder { color: #727b89 !important; }
app-landing .login-input:focus {
  border-color: var(--invall-blue) !important; box-shadow: 0 0 0 3px #0050ff26 !important;
}
app-landing .btn-login, app-header .btn-logout {
  background: var(--invall-blue) !important; color: #fff !important;
  border-radius: 6px !important; transform: none !important; box-shadow: none !important;
}
app-landing .btn-login:hover:not(:disabled), app-header .btn-logout:hover { background: var(--invall-blue-dark) !important; }
app-landing .btn-login:focus-visible, app-header .btn-logout:focus-visible,
app-menu .nav-link:focus-visible, app-header .navbar-toggler:focus-visible {
  outline: 3px solid var(--invall-blue) !important; outline-offset: 3px;
}
app-header .navbar { background: #fff !important; }
app-header .navbar-brand { gap: 8px; }
app-header .navbar-brand .invall-logo { width: 48px !important; height: 48px !important; object-fit: contain; }
app-header .navbar-brand span {
  background: none !important; -webkit-text-fill-color: var(--invall-blue) !important;
  color: var(--invall-blue) !important; letter-spacing: 0 !important;
}
app-header .navbar-toggler, app-header .navbar-toggler:hover { color: var(--invall-blue) !important; }
app-menu {
  --sidebar-bg: #fff !important; --sidebar-border: #dce1e7 !important;
  --text-primary: #252a32 !important; --text-secondary: #586271 !important;
  --accent-primary: #0050ff !important; --accent-secondary: #003cc2 !important;
}
app-menu .sidebar .nav-item .nav-link { background: transparent !important; color: var(--invall-text) !important; }
app-menu .sidebar .nav-item .nav-link:hover { background: #f0f3f9 !important; }
app-menu .sidebar .nav-item .nav-link.active { background: #eaf0ff !important; color: var(--invall-blue-dark) !important; }
app-menu .sidebar .nav-item .nav-link.active .feather { color: var(--invall-blue) !important; }
@media (max-width: 768px) {
  app-landing .login-brand { padding-top: 12px !important; }
  app-landing .brand-logo { width: 96px !important; height: 96px !important; }
  app-landing .login-form-wrapper { padding: 24px 16px !important; }
  app-header .navbar-brand .invall-logo { width: 40px !important; height: 40px !important; }
}