/* CSS Variables for better control */
:root {
  --app-transition-speed: 0.3s;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  margin: 0;
  transition: background-color var(--app-transition-speed),
    color var(--app-transition-speed);
}

/* Sidebar theming */
.rz-sidebar {
  background: var(--app-sidebar-bg, var(--rz-sidebar-background-color));
  color: var(--app-sidebar-text, var(--rz-sidebar-color));
  transition: background-color var(--app-transition-speed),
    color var(--app-transition-speed);
}

.rz-sidebar .rz-panel-menu {
  background: transparent;
}

.rz-sidebar .rz-panel-menu .rz-link,
.rz-sidebar .rz-panel-menu .rz-link .rz-icon {
  color: var(--app-sidebar-text);
}

.rz-sidebar .rz-panel-menu .rz-menuitem:hover > .rz-link {
  background-color: var(--app-sidebar-hover-bg, transparent);
}

.rz-sidebar .rz-panel-menu .rz-menuitem.rz-state-active > .rz-link,
.rz-sidebar .rz-panel-menu .rz-menuitem.rz-active > .rz-link,
.rz-sidebar .rz-panel-menu .rz-menuitem.rz-navigation-item-active > .rz-link {
  background-color: var(--app-sidebar-active-bg, transparent);
}

/* Dark Mode Overrides for non-Radzen elements */
body.rz-variant-dark {
  background-color: #121212;
  color: #e0e0e0;
}

/* Print Styles */
@media print {
  .rz-sidebar,
  .rz-header,
  .rz-button:not(.print-visible) {
    display: none !important;
  }
  .rz-layout,
  .rz-body {
    margin: 0 !important;
    padding: 0 !important;
    grid-template-areas: "rz-body" !important;
  }
}

/* Custom Login Page Styling */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--rz-primary) 0%,
    var(--rz-primary-lighter) 100%
  );
  transition: background 0.5s ease;
}

body.rz-variant-dark .login-container {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

.login-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  transition: transform 0.3s ease, background 0.3s ease;
}

body.rz-variant-dark .login-card {
  background: rgba(30, 30, 30, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-card:hover {
  transform: translateY(-5px);
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Scrollbar for Dark Mode */
body.rz-variant-dark ::-webkit-scrollbar {
  width: 8px;
}
body.rz-variant-dark ::-webkit-scrollbar-track {
  background: #1e1e1e;
}
body.rz-variant-dark ::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}
body.rz-variant-dark ::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Blazor Error UI */
#blazor-error-ui {
  background: #f8d7da;
  color: #721c24;
  padding: 0.75rem 1.25rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  display: none;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

body.rz-variant-dark #blazor-error-ui {
  background: #442727;
  color: #e0b4b4;
  border-top: 1px solid #721c24;
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--rz-primary);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
  font-weight: 600;
  font-family: "Outfit", sans-serif;
}