/* premium.css - Clean Flush Dashboard Design */
:root {
  --bg-main: #121216;
  --bg-sidebar: #18181e;
  --bg-header: #1a1a21;
  --bg-card: #202028;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-focus: #ff1a4d;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --teras-red: #d50032;
  --teras-red-glow: rgba(213, 0, 50, 0.25);
  --teras-border: rgba(255, 255, 255, 0.12);
}

body {
  background: radial-gradient(circle at 50% 0%, #1a1a25 0%, var(--bg-main) 100%);
  color: var(--text-secondary);
}

/* Base Layout Containers */
.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.glass-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
}

/* Sidebar Styling - Flush */
aside.glass-panel {
  background: var(--bg-sidebar);
  border-top: none;
  border-bottom: none;
  border-left: none;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Header Styling - Flush */
header.glass-header {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Form Elements */
input,
select,
textarea {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-subtle) !important;
  color: white !important;
  border-radius: 6px !important;
  transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teras-red) !important;
  box-shadow: 0 0 0 2px var(--teras-red-glow);
  background: var(--bg-card) !important;
}

/* Buttons */
.btn-primary {
  background: var(--teras-red);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(213, 0, 50, 0.2);
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(213, 0, 50, 0.3);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 6px;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

/* Navigation - flush left alignment */
.nav-item {
  border-left: 3px solid transparent;
  padding-left: 2rem !important;
  transition: all 0.2s;
  color: var(--text-secondary);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.02);
  color: white;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(213, 0, 50, 0.08), transparent);
  border-left-color: var(--teras-red);
  color: white;
}

/* Utilities */
.text-glow {
  text-shadow: 0 0 15px rgba(213, 0, 50, 0.1);
}

.ambient-bg {
  display: none;
  /* User wants it simple, background blobs can be distracting */
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Layout Padding Fixes */
main {
  padding: 0 !important;
}

#mainContentArea {
  background: var(--bg-main);
}

@media (max-width: 768px) {
  #mainContentArea {
    padding: 1.25rem !important;
  }
}