/* ── LZ Portal Sidebar — shared chrome + theme system ───────────────────── */

:root {
  /* Light is the default — most pages still have dark inline styles in their
     bodies, but body.has-sidebar overrides the body bg with !important. */
  --lz-bg: #f7f7f5;
  --lz-bg-elevated: #ffffff;
  --lz-border: #d4d4d0;
  --lz-border-strong: #b4b4b0;
  --lz-text: #111;
  --lz-text-muted: #4a4a4a;
  --lz-text-faint: #6a6a6a;
  --lz-accent: #16a34a;
  --lz-error: #dc2626;
  --lz-warning: #d97706;
  --lz-active-bg: #111;
  --lz-active-text: #fff;
  --lz-hover-bg: #ececec;
  --lz-sidebar-width: 240px;
}

body.theme-dark {
  --lz-bg: #0f0f0f;
  --lz-bg-elevated: #1a1a1a;
  --lz-border: #2a2a2a;
  --lz-border-strong: #333;
  --lz-text: #fff;
  --lz-text-muted: #888;
  --lz-text-faint: #555;
  --lz-accent: #4caf50;
  --lz-error: #ff6666;
  --lz-warning: #f59e0b;
  --lz-active-bg: #fff;
  --lz-active-text: #000;
  --lz-hover-bg: #242424;
}

/* theme-light is the default :root state — kept as no-op marker for the toggle */

/* Body shifts right to accommodate fixed sidebar */
body.has-sidebar {
  padding-left: var(--lz-sidebar-width);
  background: var(--lz-bg) !important;
  color: var(--lz-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 768px) {
  body.has-sidebar {
    padding-left: 0;
  }
}

/* Theme-aware overrides for major chrome (Phase 1).
   These apply whenever the sidebar mounts; the var values switch with the
   active theme. Inline-styled elements and page-local <style> blocks aren't
   covered here — Phase 2 adds per-component patches as friction emerges. */
body.has-sidebar .stat-card,
body.has-sidebar .module-card {
  background: var(--lz-bg-elevated) !important;
  border-color: var(--lz-border) !important;
  color: var(--lz-text);
}
body.has-sidebar .stat-label,
body.has-sidebar .module-desc { color: var(--lz-text-muted) !important; }
body.has-sidebar .stat-value,
body.has-sidebar .module-name { color: var(--lz-text) !important; }
body.has-sidebar .module-icon { color: var(--lz-text-muted); }
body.has-sidebar .module-card:hover {
  background: var(--lz-hover-bg) !important;
  border-color: var(--lz-border-strong) !important;
}
body.has-sidebar .module-card:hover .module-icon { color: var(--lz-text); }
body.has-sidebar .welcome h1 { color: var(--lz-text); }
body.has-sidebar .welcome p { color: var(--lz-text-muted); }
body.has-sidebar .section-title { color: var(--lz-text-faint); }

/* ── Generic page-element overrides ──────────────────────────────────────
   Most pages have inline <style> blocks hard-coded for the original dark
   theme. These rules force common patterns to follow the active theme. */

/* Form inputs — universal */
body.has-sidebar input[type="text"],
body.has-sidebar input[type="email"],
body.has-sidebar input[type="tel"],
body.has-sidebar input[type="password"],
body.has-sidebar input[type="number"],
body.has-sidebar input[type="date"],
body.has-sidebar input[type="search"],
body.has-sidebar input[type="url"],
body.has-sidebar select,
body.has-sidebar textarea {
  background: var(--lz-bg) !important;
  border-color: var(--lz-border) !important;
  color: var(--lz-text) !important;
}
body.has-sidebar input::placeholder,
body.has-sidebar textarea::placeholder { color: var(--lz-text-faint); opacity: 1; }
body.has-sidebar input:focus,
body.has-sidebar select:focus,
body.has-sidebar textarea:focus { border-color: var(--lz-text-muted) !important; }

body.has-sidebar .field label,
body.has-sidebar label {
  color: var(--lz-text-muted) !important;
}

/* Tables */
body.has-sidebar table { color: var(--lz-text); }
body.has-sidebar thead tr,
body.has-sidebar thead th {
  color: var(--lz-text-muted) !important;
  border-color: var(--lz-border) !important;
  background: transparent !important;
}
body.has-sidebar tbody tr {
  border-color: var(--lz-border) !important;
  background: transparent !important;
}
body.has-sidebar tbody tr:hover { background: var(--lz-hover-bg) !important; }
body.has-sidebar tbody td { color: var(--lz-text) !important; }

/* Common card / panel / section containers */
body.has-sidebar .card,
body.has-sidebar .ai-box,
body.has-sidebar .load-prev-box,
body.has-sidebar .section-card,
body.has-sidebar .panel,
body.has-sidebar .box,
body.has-sidebar .filters,
body.has-sidebar .logs,
body.has-sidebar .header-row,
body.has-sidebar .row-detail,
body.has-sidebar .perm-row,
body.has-sidebar .service-block {
  background: var(--lz-bg-elevated) !important;
  border-color: var(--lz-border) !important;
  color: var(--lz-text);
}

/* Headings + descriptive text */
body.has-sidebar h1,
body.has-sidebar h2,
body.has-sidebar h3,
body.has-sidebar .card-title,
body.has-sidebar .module-name { color: var(--lz-text) !important; }

body.has-sidebar .subtitle,
body.has-sidebar .card-desc,
body.has-sidebar .empty { color: var(--lz-text-muted) !important; }

body.has-sidebar .module-label,
body.has-sidebar .stat-label,
body.has-sidebar .module-link { color: var(--lz-text-muted) !important; }

body.has-sidebar .stat-sub { color: var(--lz-text-faint); }
body.has-sidebar .module-label::after { background: var(--lz-border) !important; }

/* Buttons (excluding accent-colored badges) */
body.has-sidebar .btn-primary,
body.has-sidebar .btn-add,
body.has-sidebar .new-btn:not(.export-btn) {
  background: var(--lz-active-bg) !important;
  color: var(--lz-active-text) !important;
}
body.has-sidebar .view-btn,
body.has-sidebar .btn-ghost,
body.has-sidebar .btn-secondary {
  background: transparent !important;
  border-color: var(--lz-border) !important;
  color: var(--lz-text-muted) !important;
}
body.has-sidebar .view-btn:hover,
body.has-sidebar .btn-ghost:hover {
  border-color: var(--lz-text-muted) !important;
  color: var(--lz-text) !important;
}

/* Light-theme specific: turn the dark "draft/inactive" badges readable */
body:not(.theme-dark).has-sidebar .badge-draft,
body:not(.theme-dark).has-sidebar .paid-no {
  background: var(--lz-bg) !important;
  color: var(--lz-text-muted) !important;
  border-color: var(--lz-border) !important;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.lz-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--lz-sidebar-width);
  height: 100vh;
  background: var(--lz-bg-elevated) !important;
  color: var(--lz-text);
  border-right: 1px solid var(--lz-border);
  display: flex;
  flex-direction: column;
  z-index: 90;
  font-family: Arial, sans-serif;
  transition: transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.lz-sidebar-brand {
  padding: 18px 14px 16px 22px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lz-text);
  font-weight: 700;
  border-bottom: 1px solid var(--lz-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lz-sidebar-brand-text { flex: 1; min-width: 0; }

.lz-sidebar-collapse-btn {
  background: none;
  border: none;
  color: var(--lz-text-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.lz-sidebar-collapse-btn:hover {
  color: var(--lz-text);
  background: var(--lz-hover-bg);
}
.lz-sidebar-collapse-btn svg { width: 16px; height: 16px; }

.lz-sidebar-brand-tag {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--lz-text-faint);
  display: block;
  margin-top: 3px;
  font-weight: 500;
}

.lz-sidebar-nav {
  flex: 1 1 auto !important;
  overflow-y: auto;
  padding: 14px 12px 10px !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.lz-sidebar-section {
  margin-bottom: 16px;
  display: block !important;
}

/* Page-level <a> tag styles (e.g. nav a { color: #888 }) shouldn't bleed
   into our sidebar links. Specificity bump to win. */
.lz-sidebar .lz-sidebar-item,
.lz-sidebar .lz-sidebar-action-link,
.lz-sidebar .lz-sidebar-bottom-link {
  font-family: Arial, sans-serif !important;
}

.lz-sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--lz-text-faint);
  padding: 6px 10px 4px;
}

.lz-sidebar-item {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lz-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lz-sidebar-item:hover {
  background: var(--lz-hover-bg);
  color: var(--lz-text);
}

.lz-sidebar-item.active {
  background: var(--lz-active-bg);
  color: var(--lz-active-text);
  font-weight: 700;
}

.lz-sidebar-item.active:hover {
  background: var(--lz-active-bg);
  color: var(--lz-active-text);
}

.lz-sidebar-error-dot {
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lz-error);
}

/* Footer */
.lz-sidebar-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--lz-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Quick actions block — small text-style buttons grouped together */
.lz-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lz-border);
}

.lz-sidebar-action-link {
  display: block;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lz-text);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}

.lz-sidebar-action-link:hover {
  background: var(--lz-hover-bg);
}

.lz-sidebar-action-link.muted {
  color: var(--lz-text-muted);
  font-weight: 500;
}

.lz-sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
}

.lz-sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.lz-sidebar-user-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--lz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lz-sidebar-user-role {
  font-size: 9px;
  color: var(--lz-text-faint);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

.lz-sidebar-icon-btn {
  background: none;
  border: 1px solid var(--lz-border);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--lz-text-muted);
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.lz-sidebar-icon-btn:hover {
  color: var(--lz-text);
  border-color: var(--lz-text-muted);
}

.lz-sidebar-icon-btn svg { width: 14px; height: 14px; }

.lz-sidebar-icon-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.lz-sidebar-bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
}

.lz-sidebar-bottom-link {
  font-size: 11px;
  color: var(--lz-text-faint);
  text-decoration: none;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.lz-sidebar-bottom-link:hover { color: var(--lz-text-muted); }

.lz-sidebar-bottom-sep {
  color: var(--lz-text-faint);
  font-size: 11px;
  user-select: none;
}

/* ── Mobile drawer ─────────────────────────────────────────────────────── */

.lz-sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1100;
  width: 38px;
  height: 38px;
  background: var(--lz-bg-elevated);
  border: 1px solid var(--lz-border);
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--lz-text);
  padding: 0;
}

.lz-sidebar-toggle svg { width: 18px; height: 18px; }

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

/* Desktop collapsed state — slide sidebar off, show toggle */
@media (min-width: 769px) {
  body.sidebar-collapsed .lz-sidebar {
    transform: translateX(-100%);
  }
  body.sidebar-collapsed { padding-left: 0 !important; }
  body.sidebar-collapsed .lz-sidebar-toggle { display: flex; }
}

@media (max-width: 768px) {
  .lz-sidebar-toggle { display: flex; }
  .lz-sidebar {
    transform: translateX(-100%);
    z-index: 1100;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5);
  }
  body.sidebar-open .lz-sidebar { transform: translateX(0); }
  body.sidebar-open .lz-sidebar-backdrop { display: block; }
  /* Hide the in-sidebar collapse button on mobile — hamburger handles closing */
  .lz-sidebar-collapse-btn { display: none; }
}

/* Hide sidebar entirely in print previews (invoices etc.) */
@media print {
  .lz-sidebar,
  .lz-sidebar-toggle,
  .lz-sidebar-backdrop { display: none !important; }
  body.has-sidebar { padding-left: 0 !important; }
}

/* ── Bug report modal ──────────────────────────────────────────────────── */

.lz-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.lz-modal {
  background: var(--lz-bg-elevated);
  border: 1px solid var(--lz-border);
  border-radius: 8px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  color: var(--lz-text);
}

.lz-modal h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.lz-modal-help {
  font-size: 12px;
  color: var(--lz-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.lz-modal textarea {
  width: 100%;
  background: var(--lz-bg);
  border: 1px solid var(--lz-border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--lz-text);
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  outline: none;
  margin-bottom: 14px;
}

.lz-modal textarea:focus {
  border-color: var(--lz-text-muted);
}

.lz-modal-error {
  font-size: 12px;
  color: var(--lz-error);
  min-height: 18px;
  margin-bottom: 8px;
  margin-top: -4px;
}

.lz-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.lz-modal-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: opacity 0.15s, background 0.15s;
}

.lz-modal-btn-primary {
  background: var(--lz-active-bg);
  color: var(--lz-active-text);
}

.lz-modal-btn-primary:hover { opacity: 0.85; }
.lz-modal-btn-primary:disabled { opacity: 0.5; cursor: default; }

.lz-modal-btn-ghost {
  background: transparent;
  color: var(--lz-text-muted);
  border-color: var(--lz-border);
}

.lz-modal-btn-ghost:hover {
  color: var(--lz-text);
  border-color: var(--lz-text-muted);
}