/* Material-Design-inspired theme layered over Bootstrap 5, driven by tokens. */

body.sc-app {
  background: var(--sc-bg);
  color: var(--sc-text);
  transition: background-color .2s ease, color .2s ease;
}

.sc-brand-accent { color: var(--sc-accent); }
.sc-logo { font-size: 1.75rem; font-weight: 700; color: var(--sc-text); }

/* Topbar */
.sc-topbar {
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-border);
  box-shadow: var(--sc-shadow);
  position: sticky; top: 0; z-index: 1030;
}
.sc-icon-btn {
  background: var(--sc-surface-2);
  color: var(--sc-text);
  border: 1px solid var(--sc-border);
  border-radius: 10px;
}
.sc-lang { width: auto; background: var(--sc-surface-2); color: var(--sc-text); border-color: var(--sc-border); }

/* Shell layout */
.sc-shell { display: flex; min-height: calc(100vh - 56px); }
.sc-sidebar {
  width: 250px; background: var(--sc-surface);
  border-right: 1px solid var(--sc-border);
}
.sc-main { flex: 1; padding: 1.5rem; min-width: 0; }

/* Nav */
.sc-nav-link {
  display: flex; align-items: center; gap: .75rem;
  color: var(--sc-text-muted); border-radius: 10px; padding: .6rem .9rem;
  font-weight: 500;
}
.sc-nav-link:hover { background: var(--sc-surface-2); color: var(--sc-text); }
.sc-nav-link.active { background: color-mix(in srgb, var(--sc-primary) 14%, transparent); color: var(--sc-primary); }
.sc-nav-icon { width: 1.25rem; text-align: center; }

/* Cards */
.sc-card, .sc-stat-card {
  background: var(--sc-surface);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}
.sc-stat-value { color: var(--sc-text); font-weight: 700; }
.sc-badge { background: var(--sc-surface-2); color: var(--sc-text-muted); }

/* Buttons */
.sc-btn, .btn-primary {
  background: var(--sc-primary); border-color: var(--sc-primary);
  border-radius: 12px; font-weight: 600;
}
.sc-btn:hover, .btn-primary:hover {
  background: var(--sc-primary-hover); border-color: var(--sc-primary-hover);
}

/* Auth screen */
.sc-auth {
  min-height: 100vh; display: grid; place-items: center;
  padding: 1rem; background: var(--sc-bg);
}
.sc-auth-card { width: 100%; max-width: 420px; border-radius: var(--sc-radius); background: var(--sc-surface); }
.sc-auth-card .form-control { background: var(--sc-surface-2); color: var(--sc-text); border-color: var(--sc-border); }

@media (max-width: 991.98px) {
  .sc-sidebar { width: 250px; }
}