/* ===== Main Layout ===== */

/* --- App shell: sidebar + main --- */
body {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* --- Sidebar --- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--clr-bg-alt);
  border-right: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  transition: transform var(--tr-base);
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-lg) var(--sp-lg);
  border-bottom: 1px solid var(--clr-border);
  min-height: var(--topbar-height);
}

.sidebar-close { display: none; }

.logo {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-text);
  letter-spacing: -0.5px;
}
.logo-accent { color: var(--clr-accent); }

.nav-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-sm) 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  color: var(--clr-text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-left: 3px solid transparent;
  transition: all var(--tr-fast);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--clr-surface);
  color: var(--clr-text);
}

.nav-item.active {
  background: var(--clr-surface);
  color: var(--clr-accent);
  border-left-color: var(--clr-accent);
}

.nav-icon { font-size: 1.2em; width: 1.5em; text-align: center; }

.sidebar-footer {
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text-dim);
  font-size: var(--fs-xs);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-overlay);
}

/* --- Main Content --- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  transition: margin-left var(--tr-base);
}

/* --- Top Bar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  height: var(--topbar-height);
  padding: 0 var(--sp-lg);
  background: var(--clr-bg-alt);
  border-bottom: 1px solid var(--clr-border);
  z-index: var(--z-topbar);
  flex-shrink: 0;
}

#sidebar-toggle { display: none; font-size: var(--fs-lg); }

.topbar-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  flex: 1;
}

.topbar-actions {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
}

/* --- Mode Toggle --- */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-accent-dim);
  background: rgba(91,138,245,0.1);
  color: var(--clr-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--tr-fast);
  white-space: nowrap;
  user-select: none;
}
.mode-toggle:hover {
  background: rgba(91,138,245,0.18);
  border-color: var(--clr-accent);
}

/* The small on/off dot indicator */
.mode-toggle-switch {
  width: 28px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--clr-accent);
  position: relative;
  transition: background var(--tr-fast);
  flex-shrink: 0;
}
.mode-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--tr-fast);
}

/* Player mode: toggle shifts to right, colors change */
body.player-mode .mode-toggle {
  border-color: rgba(91,245,160,0.4);
  background: rgba(91,245,160,0.08);
  color: var(--clr-success);
}
body.player-mode .mode-toggle:hover {
  background: rgba(91,245,160,0.14);
  border-color: var(--clr-success);
}
body.player-mode .mode-toggle-switch {
  background: var(--clr-success);
}
body.player-mode .mode-toggle-switch::after {
  transform: translateX(12px);
}

/* Hide ALL GM-only elements in player mode (nav items, dashboard cards, buttons, etc.) */
body.player-mode [data-gm-only] {
  display: none !important;
}

/* Player mode sidebar badge */
.sidebar-mode-badge {
  display: none;
  margin: 0 var(--sp-md) var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-align: center;
  background: rgba(91,245,160,0.1);
  border: 1px solid rgba(91,245,160,0.3);
  color: var(--clr-success);
  letter-spacing: 0.3px;
}
body.player-mode .sidebar-mode-badge {
  display: block;
}

/* --- Page Container --- */
.page-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-xl);
}

/* --- Modal --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.modal-content {
  position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-lg);
  border-bottom: 1px solid var(--clr-border);
}
.modal-header h3 { font-size: var(--fs-md); }

.modal-body {
  padding: var(--sp-lg);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--clr-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-sm);
}

/* --- Toast / Notification --- */
.toast-container {
  position: fixed;
  bottom: var(--sp-xl);
  right: var(--sp-xl);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-sm);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-md) var(--sp-lg);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  animation: slideInRight var(--tr-base) forwards;
  max-width: 320px;
}

.toast.toast-success { border-left: 3px solid var(--clr-success); }
.toast.toast-danger  { border-left: 3px solid var(--clr-danger); }
.toast.toast-info    { border-left: 3px solid var(--clr-info); }
.toast.toast-warning { border-left: 3px solid var(--clr-warning); }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}