/* =============================================================================
   main.additions.css  —  append to / @import after main.css

   Sections:
     A. Main shell layout  (mirrors admin-shell but for user-facing pages)
     B. lp-navbar          (light-purple variant of adm-navbar)
     C. lp-sidebar         (same sidebar-nav rules, different host element)
     D. Mobile sidebar drawer  (shared with admin, generalised)
     E. Guide upload page  (from previous work)
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════
   A. MAIN SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.main-shell {
  display: flex;
  height: calc(100vh - 62px);
  overflow: hidden;
  position: relative;   /* anchor for the mobile overlay */
}

/* Main content area — mirrors .admin-content */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-xl);
}

.main-page-header {
  margin-bottom: var(--sp-xl);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
}
.main-page-header h2 { margin: 0 0 4px; }


/* ═══════════════════════════════════════════════════════════════════════════
   B. LP-NAVBAR  (light variant — purple bg instead of dark-blue)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * The component renders a <nav class="lp-navbar"> inside the custom element.
 * lp-navbar (the element tag) itself is display:block so it sits in flow
 * exactly like a normal nav would.
 */
lp-navbar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
}

.lp-navbar {
  background: var(--c-purple);
  box-shadow: 0 2px 8px rgba(108, 59, 170, 0.35);
  height: 62px;
}

/* Reuse .navbar-inner sizing — no changes needed */

/* Brand badge on purple bg */
.lp-navbar .brand-badge {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: none;
}

/* Brand name on purple */
.lp-navbar .brand-name {
  color: #fff;
}
.lp-navbar .brand-name span {
  color: var(--c-gold);
}

/* Nav links on purple bg */
.lp-navbar .nav-link {
  color: rgba(255,255,255,0.75);
}
.lp-navbar .nav-link:hover,
.lp-navbar .nav-link.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Profile button — styled as a nav-link but keeps ctx-wrap behaviour */
.nav-profile-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  transition: background var(--tx), color var(--tx);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-profile-btn:hover,
.nav-profile-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Profile context menu — position below the button */
.lp-profile-menu {
  right: 0;
  left: auto;
  top: calc(100% + 6px);
  /* position: fixed is set by .ctx-menu — we override to absolute here
     so it stays anchored to the navbar rather than the viewport */
  position: absolute !important;
}

/* Divider on purple bg */
.lp-navbar .nav-divider {
  background: rgba(255,255,255,0.25);
}

/* Right-side flex wrapper */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Username — hide on very small screens to save space */
@media (max-width: 420px) {
  .nav-username { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   C. LP-SIDEBAR  (custom element host + inner aside)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * The <lp-sidebar> element itself is the flex child inside .main-shell.
 * It renders <aside class="main-sidebar"> inside itself.
 */
lp-sidebar {
  display: block;
  flex-shrink: 0;
  width: 220px;
}

.main-sidebar {
  width: 220px;
  height: 100%;
  background: var(--c-white);
  border-right: 1px solid rgba(108, 59, 170, 0.12);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  padding: var(--sp-lg) 0;
  overflow-y: auto;
}

/* Sidebar nav rules are identical to .admin-sidebar — both share
   .sidebar-section-title and .sidebar-nav from main.css */


/* ═══════════════════════════════════════════════════════════════════════════
   D. MOBILE SIDEBAR DRAWER  (works for both admin and main layouts)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Main shell ── */
  .main-shell { position: relative; }

  lp-sidebar {
    position: fixed;
    top: 62px;
    left: 0;
    height: calc(100vh - 62px);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 180ms ease, box-shadow 180ms ease;
    width: 220px;
  }
  lp-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .main-content {
    width: 100%;
    padding: var(--sp-lg) var(--sp-md);
  }

  /* ── Admin shell (same treatment) ── */
  .admin-shell { position: relative; }

  .admin-sidebar {
    position: fixed;
    top: 62px;
    left: 0;
    height: calc(100vh - 62px);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .admin-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .admin-content {
    width: 100%;
    padding: var(--sp-lg) var(--sp-md);
  }

  /* ── Backdrop (shared) ── */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 62px 0 0 0;
    background: rgba(10, 5, 20, 0.35);
    z-index: 199;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    animation: backdropIn 0.18s ease;
  }
  .sidebar-backdrop.open { display: block; }

  /* ── Hamburger button ── */
  .sidebar-toggle { display: inline-flex !important; }
}

/* Hidden on desktop */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.75);
  transition: background var(--tx), color var(--tx);
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* admin sidebar toggle colours (dark navbar) */
.adm-navbar .sidebar-toggle {
  color: var(--t-on-dark-muted);
}
.adm-navbar .sidebar-toggle:hover {
  background: var(--c-dark-blue-mid);
  color: var(--t-on-dark);
}


/* ═══════════════════════════════════════════════════════════════════════════
   E. GUIDE UPLOAD PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.guide-upload-shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  height: calc(100vh - 62px - var(--sp-xl) * 2 - 56px);
  min-height: 480px;
}
.guide-meta-card { flex-shrink: 0; }
.guide-top-row {
  display: grid;
  grid-template-columns: 1fr 200px auto;
  gap: var(--sp-md);
  align-items: end;
}
.guide-top-row .form-group { margin-bottom: 0; }

.guide-file-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-width: 0;
}
.guide-file-btn  { flex-shrink: 0; white-space: nowrap; }
.guide-file-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.guide-file-clear-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--t-muted);
  transition: background var(--tx), color var(--tx);
  padding: 0;
}
.guide-file-clear-btn:hover { background: #fef2f2; color: #dc2626; }
.guide-file-clear-btn .material-symbols-outlined { font-size: 16px; }
.guide-required { color: var(--c-orange); margin-left: 2px; }

.guide-body-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.guide-textarea-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.guide-textarea {
  flex: 1;
  resize: none;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 28px;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.guide-line-counter {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t-muted);
  background: var(--c-white);
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid rgba(108,59,170,0.12);
  pointer-events: none;
  user-select: none;
}
.guide-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-md);
  padding-top: var(--sp-sm);
}
.guide-status-msg  { font-size: 13.5px; font-weight: 500; color: var(--t-muted); flex: 1; min-width: 0; }
.guide-status-success { color: #1a7a42; }
.guide-status-error   { color: #dc2626; }
.guide-category-select { min-width: 0; }

@media (max-width: 700px) {
  .guide-top-row { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .guide-upload-shell { height: auto; min-height: unset; }
  .guide-textarea { min-height: 42vh; flex: none; }
  .guide-body-card { flex: none; }
  .guide-footer { flex-direction: column-reverse; align-items: stretch; gap: var(--sp-sm); }
  .guide-footer .btn { width: 100%; justify-content: center; }
  .guide-status-msg { text-align: center; }
}