/* Off-white shell + transparent glass cards */
:root {
  --light-bg: #F7F7F5;
  --sidebar-bg: #F7F7F5;
  --card-bg: rgba(255, 255, 255, 0.42);
  --card-border: rgba(255, 255, 255, 0.65);
  --glass-blur: 12px;
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(26, 162, 165, 0.08), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(21, 143, 146, 0.06), transparent 50%),
    var(--light-bg) !important;
  background-attachment: fixed !important;
}

#sidebar {
  background-color: var(--sidebar-bg) !important;
  color: var(--dark-text) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.04);
}

.sidebar-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.sidebar-nav li a {
  color: var(--dark-text) !important;
}

.sidebar-nav li a:hover {
  background-color: rgba(26, 162, 165, 0.08) !important;
  color: var(--primary-color) !important;
}

.sidebar-nav li a.active {
  background-color: rgba(26, 162, 165, 0.14) !important;
  color: var(--primary-color) !important;
  font-weight: 700;
}

.sidebar-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.sidebar-footer a {
  color: var(--medium-text) !important;
}

.sidebar-footer a:hover {
  color: var(--primary-color) !important;
}

.view-container,
.card,
.login-box,
.login-card,
.popup-content,
#erp-header {
  background-color: var(--card-bg) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

#erp-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-left: none;
  border-right: none;
  border-top: none;
}

.view-container {
  border-radius: var(--border-radius);
}

thead th {
  background-color: rgba(255, 255, 255, 0.55) !important;
}

tbody tr:hover {
  background-color: rgba(26, 162, 165, 0.06) !important;
}

#login-container {
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}