/* /css/style.css */

/* Make Bootstrap's "primary" maroon (Bootstrap 5.3+) */
:root {
  --bs-primary: #8B0000;              /* maroon */
  --bs-primary-rgb: 139, 0, 0;
  --bs-link-color: #8B0000;           /* links match primary */
  --bs-link-hover-color: #6e0000;
  /* Page background + text */
  --bs-body-bg: #fffaf3;          /* pinkish */
  --bs-body-color: #2a2725;

  /* What bg-body-tertiary resolves to (your sidebar color) */
  --bs-tertiary-bg: #e0dddc;      /* gentle panel color */
}

a { color: var(--bs-link-color) !important; }
a:hover { color: var(--bs-link-hover-color) !important; }
a:visited { color: #5e0040; } /* optional visited color */

/* Navbars that use bg-primary will pick up the new color automatically.
   If you want the brand/link color too: */
.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: rgba(255,255,255,.9);
}
.navbar .nav-link,
.navbar .navbar-brand { color: #fff !important; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: #fff !important; }


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

.sidebar {
  position: fixed;
  top: 56px; /* match .topbar height */
  left: 0;
  width: 220px;
  height: calc(100vh - 56px);
  background-color: var(--sidebar-bg);
  padding: 1rem;
  overflow-y: auto;
}

.sidebar a {
  display: block;
  color: var(--sidebar-text);
  padding: 0.5rem 0;
  text-decoration: none;
}

.sidebar a:hover {
  color: var(--accent-color);
}

.content {
  margin: 80px 1rem 1rem 240px; /* top/right/bottom/left */
  padding: 1rem;
}

.panel {
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;            /* gentle rounding */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);  /* subtle drop shadow */
  padding: 1rem;
}