/* Resets and Base Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Dashboard Layout */
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  /* Prevent body scroll */
}

.dashboard-header {
  /* Legacy didn't really have a top header, but we need one for settings/logout. 
     Keeping it minimal/flat or matching sidebar bg if we want to blend in. 
     For now, let's make it dark gray to stand out less or match legacy dark mode if applicable.
     Actually, let's keep it distinct but apply the font styles. */
  background: #222;
  color: white;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.dashboard-header .logo {
  margin: 0;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.nav-link,
.logout-btn {
  font-weight: bold;
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 1rem;
  background: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
  margin-left: 1rem;
}

.nav-link:hover,
.logout-btn:hover {
  color: white;
  text-decoration: underline;
}

.dashboard-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.dashboard-sidebar {
  width: 15rem;
  background: var(--sidebar-bg);
  border-right: 1px solid #999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem;
  transition: margin-left 0.4s ease;
}

.dashboard-sidebar.hidden {
  margin-left: -15rem;
}

.dashboard-main {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  background: var(--bg-color);
  margin-left: 0;
}

.dashboard-main>* {
  max-width: 35em;
  margin: 0 auto;
}

.logout-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}