/* ===== Theme variables & modern header/sidebar ===== */
:root{
  --brand-blue: #204090;
  --brand-orange: #E07010;
  --brand-blue-600: #17325e; /* darker variant for hover/active */
  --muted-600: #374151;
}

/* Header: white background and subtle bottom border */
header, .site-header {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  color: var(--muted-600);
}

/* If your header contains a user area with a known class, hide it.
   This is a safe CSS-only fallback so you don't *have* to change base.html. */
.header-user, .top-user, .header .user-controls { display: none !important; }

/* Sidebar: full-height, sticky and independently scrollable */
.sidebar {
  width: 20rem;               /* keeps same 'w-80' visual */
  height: 100vh;             /* full viewport height */
  position: sticky;          /* stays in view during page scroll */
  top: 0;
  overflow-y: auto;          /* internal scrollbar */
  -webkit-overflow-scrolling: touch;
  background: #ffffff;       /* white background for modern look */
}

/* Make the main layout preserve spacing when sidebar is sticky */
.main-with-sidebar { display: flex; width: 100%; }

/* Footer user area inside sidebar (kept at bottom) */
.sidebar .sidebar-footer {
  margin-top: 1rem;
  padding: 1rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Avatar box */
.sidebar .sidebar-footer .avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-600));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-600));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Username text */
.sidebar .sidebar-footer .user-meta {
  flex: 1;
}
.sidebar .sidebar-footer .user-meta .username {
  display: block;
  font-size: 0.95rem;
  color: var(--muted-600);
  font-weight: 600;
}
.sidebar .sidebar-footer .user-meta .role {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Sign out button (accent orange) */
.sidebar .sidebar-footer .signout-btn {
  background: var(--brand-orange);
  color: #fff;
  border: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sidebar .sidebar-footer .signout-btn:hover {
  filter: brightness(0.95);
}

/* Tab active / left border uses brand blue */
.tab-btn.active,
.tab-btn[aria-selected="true"],
.tab-active {
  background-color: rgba(32,64,144,0.06); /* subtle blue tint */
  border-left-color: var(--brand-blue);
  color: var(--brand-blue);
  font-weight: 600;
}

/* Primary buttons (upload/save) use brand-blue */
.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  border: 0;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-blue-600); }

/* Accent links and small highlights */
a.session-link { color: var(--brand-blue); }
a.session-link:hover { color: var(--brand-blue-600); text-decoration: underline; }

/* Source badges - use orange for file/important badges */
.source-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: rgba(224,112,16,0.08);
  color: var(--brand-orange);
  font-size: 0.8rem;
}

/* Constrain modal width (fix: too wide) */
.custom-modal {
  max-width: 900px;
  width: calc(100% - 2rem);
  margin: 1.5rem auto;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
}

/* Modal header spacing */
.custom-modal .modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}
.custom-modal .modal-body { padding: 1rem; max-height: 70vh; overflow:auto; }
.custom-modal .modal-close-btn {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--muted-600);
}

/* small responsive tweak so password toggle aligns */
#passwordInput { padding-right: 3rem; }
#togglePasswordBtn { right: 0.5rem; top: 50%; transform: translateY(-50%); }

/* keep login flash processed by JS but not persistent raw */
/* .flash-message { display: none; } consumed by main.js -> converted to status cards */

/* ---------------------------------------------------------
   Responsive sidebar & off-canvas behavior (no Tailwind)
   - Works with existing markup:
     #mobile-sidebar-toggle (button)
     #sidebar (container) OR .sidebar
     #sidebar-backdrop (backdrop element)
     .main-with-sidebar (main wrapper)
     .content-scroll (main content area)
--------------------------------------------------------- */

/* Base off-canvas state (mobile-first): sidebar hidden off-screen */
.sidebar {
  /* Ensure off-canvas neutral defaults on small screens */
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  transform: translateX(-100%);
  transition: transform 200ms ease-in-out;
  z-index: 1200;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
  background: #fff;
  overflow-y: auto;
}

/* Backdrop (hidden by default) */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.32);
}

/* Toggle state: when body has .sidebar-open */
body.sidebar-open .sidebar {
  transform: translateX(0);
}
body.sidebar-open #sidebar-backdrop {
  display: block;
}

/* Ensure mobile toggle button stays above overlay */
#mobile-sidebar-toggle {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1250;
  background: #fff;
  border: 1px solid #e6eefc;
  padding: 0.4rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(2,6,23,0.06);
}

/* On desktop and up: make sidebar part of layout (not off-canvas) */
@media (min-width: 768px) {
  .sidebar {
    position: sticky; /* restore sticky so it remains visible in normal flow */
    transform: translateX(0) !important;
    box-shadow: none;
    z-index: 1;
    height: 100vh;
  }

  /* push main content to the right so it doesn't overlap the sidebar */
  .main-with-sidebar .content-scroll {
    margin-left: 20rem; /* matches .sidebar width (20rem) */
  }

  /* Hide the mobile toggle and backdrop on desktop */
  #mobile-sidebar-toggle { display: none; }
  #sidebar-backdrop { display: none !important; }
}

/* Defensive: ensure main content doesn't overflow in flex layout */
.content-scroll {
  min-width: 0; /* important so child flex item can shrink */
  overflow: auto;
}

/* Helper for tables to avoid forcing page width */
.responsive-table-wrapper {
  overflow-x: auto;
}

/* Ensure long pre/code and modal body wrap instead of widening page */
pre, code, .mcp-modal-body {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Additional small tweaks for alignment & spacing */
.tab-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-left: 4px solid transparent;
  background: transparent;
  color: var(--muted-600);
  border-radius: 0.375rem;
  margin: 0.125rem 0;
}
.tab-btn:hover {
  background: rgba(0,0,0,0.03);
}

/* Make sure upload input keeps internal layout on narrow screens */
input[type="file"] {
  max-width: 100%;
}

/* Small utility: visually hide but keep accessible */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- icon & avatar tweaks (paste into style.css) --- */

/* Force avatar SVG to occupy avatar box exactly and remove accidental padding */
.sidebar .avatar svg {
  display: block;
  width: 50px;
  height: 50px;
}

/* Ensure the avatar container has no extra padding that could shrink the SVG */
.sidebar > div .avatar {
  padding: 0;
  margin: 0;
}

/* Icon wrapper for tab buttons (keeps consistent spacing & alignment) */
.tab-icon-wrapper { display: inline-flex; align-items: center; gap: 0.75rem; }

/* Make sure tab SVGs inherit color and are the right size */
.tab-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none; /* so they stay outline icons unless explicitly filled */
}

/* If you use an active state that sets color, icons will inherit it */
.tab-btn { display: block; }
.tab-btn span { display: inline-flex; align-items: center; }

/* Prevent the left border 'pill' from shifting content: ensure padding accounts for border */
.tab-btn { border-left: 4px solid transparent; padding-left: calc(0.75rem - 4px); }

/* Slight vertical alignment nudge if necessary */
.tab-btn { line-height: 1.1; }

.max-w-6xl {
  min-width: 80%  !important;
  max-width: 100% !important;
}