/* ==========================================================================
   ISO Impact Analyzer – Product UI (8px system, card-based, enterprise)
   ========================================================================== */

:root {
  --zirc-red: #D2232A;
  --zirc-yellow: #F0B310;
  --zirc-blue: #00A9E0;
  --zirc-gray: #4B4F54;
  --zirc-sage: #83A0A5;
  --zirc-product-blue: #0E4C8C;
  --zirc-product-green: #00A960;
  --zirc-product-orange: #F47421;
  --bg: #f5f7fa;
  --card-bg: #fff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --sidebar-bg: #1e293b;
  --sidebar-gradient-top: #5c5a7e;
  --sidebar-gradient-bottom: #252240;
  --sidebar-logout-bg: #252240;
  --sidebar-text: rgba(255,255,255,0.92);
  --sidebar-hover: rgba(255,255,255,0.1);
  --sidebar-active: rgba(255,255,255,0.18);
  --primary: #4c1d95;
  --primary-hover: #5b21b6;
  --header-bg: #fff;
  --header-border: var(--border);
  --criticality-low-bg: #dcfce7;
  --criticality-low-text: #166534;
  --criticality-medium-bg: #fef3c7;
  --criticality-medium-text: #92400e;
  --criticality-high-bg: #fee2e2;
  --criticality-high-text: #991b1b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
  --space: 8px;
  --sidebar-width: 260px;
  --header-height: 56px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
  --focus-ring: 0 0 0 2px var(--zirc-blue);
  --muted: #64748b;
}

* { box-sizing: border-box; }

body, .app-body {
  font-family: var(--font-sans);
  margin: 0;
  background: #f0eef5;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  font-size: var(--text-base);
}

/* ==========================================================================
   App shell
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--sidebar-gradient-top) 0%, var(--sidebar-gradient-bottom) 100%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}

/* Logo at top – light purple via ::before (rounded) behind content; clip content to same shape */
.sidebar-logo-wrap {
  position: relative;
  padding: calc(var(--space) * 3) calc(var(--space) * 1.5);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  border-radius: 0 16px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  flex-shrink: 0;
}
.sidebar-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f0eef5;
  border-radius: 0 16px 0 0;
  z-index: 0;
}
.sidebar-logo-wrap .brand-link--logo-only {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  background: transparent;
}

.sidebar-logo-wrap .brand-link--logo-only:hover { opacity: 0.9; }

.sidebar-logo-wrap picture {
  display: block;
  width: 100%;
  max-width: 100%;
}

.sidebar-logo-wrap .brand-logo,
.sidebar-logo-wrap picture .brand-logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.sidebar-nav {
  flex: 1;
  padding: calc(var(--space) * 2) 0;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 1.5);
  padding: calc(var(--space) * 1.5) calc(var(--space) * 2.5);
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar-link:focus-visible { outline: 2px solid var(--zirc-blue); outline-offset: -2px; }
.sidebar-link--active { background: var(--sidebar-active); color: #fff; }

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 2;
}

.sidebar-footer {
  padding: calc(var(--space) * 2) calc(var(--space) * 2);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-user-wrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.sidebar-user-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space);
  color: var(--sidebar-text);
  width: 100%;
}

.sidebar-user-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.sidebar-user { margin: 0; }

.sidebar-logout-btn {
  display: block;
  width: 100%;
  min-width: 100px;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--sidebar-logout-bg);
  border: none;
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}

.sidebar-logout-btn:hover { background: #302d4a; color: #fff; text-decoration: none; }
.sidebar-logout-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }

/* Main content = rounded white panel, floating with space on all four sides */
.app-content-wrap {
  flex: 1;
  min-width: 0;
  margin-left: calc(var(--sidebar-width) + 12px);
  margin-top: 12px;
  margin-right: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 24px);
  background: linear-gradient(to bottom, #fcfbfd 0%, #fff 20%, #fff 100%);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  overflow: hidden;
}

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

/* ==========================================================================
   Top header – global search + user
   ========================================================================== */
.app-header {
  min-height: var(--header-height);
  flex-shrink: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 2) calc(var(--space) * 2.5);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}

.header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.header-menu-btn:hover { background: var(--bg); }
.header-menu-btn:focus-visible { outline: 2px solid var(--zirc-blue); outline-offset: 2px; }

/* Center the search on non-home pages; wrap in a distinct box */
.header-search-center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 var(--space);
  min-width: 0;
}

.header-search-box {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  padding: var(--space) calc(var(--space) * 2);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: 560px;
  min-width: 320px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.header-search-row {
  display: flex;
  align-items: center;
  gap: var(--space);
  width: 100%;
  min-width: 0;
}
.header-search-row .global-search-wrap { flex: 1; min-width: 0; }
.header-search-row .global-search-btn { flex-shrink: 0; }
.header-search-form.header-search-box {
  flex-direction: column;
  align-items: stretch;
}
.header-search-form.header-search-box .global-search-wrap { min-width: 0; }

/* Search mode toggle: Document Code | Topic (mockup: gray track, active = dark gray) */
.search-mode-toggle {
  display: flex;
  gap: 0;
  border-radius: var(--radius-sm);
  background: #f3f4f6;
  padding: 3px;
  width: fit-content;
}

.search-mode-btn {
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  font-family: var(--font-sans);
}

.search-mode-btn:hover { color: var(--text); }
.search-mode-btn.active { background: #4b5563; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.home-search-box {
  padding: calc(var(--space) * 2);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: 480px;
  margin: 0 auto;
}

.home-search-box .search-mode-toggle { margin-bottom: var(--space); }

.home-search-row {
  display: flex;
  align-items: center;
  gap: var(--space);
  width: 100%;
  min-width: 0;
}
.home-search-row .global-search-wrap { flex: 1; min-width: 0; max-width: 100%; }
.home-search-row .global-search-btn { flex-shrink: 0; }

.app-header--home .header-search-center { display: none; }

.header-search-form {
  display: flex;
  align-items: center;
  gap: var(--space);
  flex: 1;
  min-width: 0;
  max-width: 520px;
}

.global-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  transition: max-width 0.2s ease;
  display: flex;
  align-items: stretch;
}

.global-search-wrap:focus-within { max-width: 100%; }

/* Search icon in its own slot to the left of the input – never hidden by text */
.global-search-wrap .search-icon-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--text-muted);
}
.global-search-wrap .search-icon-outer svg {
  width: 20px;
  height: 20px;
  display: block;
}
.global-search-wrap .global-search-input {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.global-search-wrap:focus-within .search-icon-outer {
  border-color: #D10F7B;
  color: #D10F7B;
}

.global-search-input {
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.global-search-input:focus {
  outline: none;
  border-color: #D10F7B;
  box-shadow: 0 0 0 3px rgba(209, 15, 123, 0.2);
}

.global-search-input::placeholder { color: var(--text-muted); }

.global-search-btn { flex-shrink: 0; }

.brand-link--dark { display: flex; align-items: center; gap: 0.75rem; color: var(--text); text-decoration: none; font-weight: 700; }
.brand-link--dark:hover { color: var(--primary); }
.brand-link--dark .brand-logo { height: 28px; }

.body-login .header-spacer { width: 1px; height: 1px; }

/* ==========================================================================
   Main content
   ========================================================================== */
.app-main {
  flex: 1;
  padding: calc(var(--space) * 3) calc(var(--space) * 3) calc(var(--space) * 4);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.app-main--centered { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.app-main--narrow { max-width: 720px; }

/* ==========================================================================
   Global search autocomplete – card style
   ========================================================================== */
.ac-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 560px;
  z-index: 9999;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow: auto;
}

.ac-list.hidden { display: none; }

.ac-item {
  padding: calc(var(--space) * 1.5) calc(var(--space) * 2);
  display: flex;
  gap: var(--space);
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: var(--bg); }
.ac-item:focus { outline: none; background: var(--bg); }
.ac-code { font-weight: 600; flex-shrink: 0; color: var(--text); }
.ac-file { color: var(--text-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Legacy ac-wrap for JS */
.ac-wrap { position: relative; overflow: visible; }
.header-search-wrap { position: relative; }

/* ==========================================================================
   Buttons
   ========================================================================== */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

button:disabled, .btn:disabled { opacity: 0.6; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--zirc-blue); outline-offset: 2px; }

.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow-md); }

.btn-secondary { background: var(--text-muted); color: #fff; }
.btn-secondary:hover:not(:disabled) { background: #475569; color: #fff; }

.btn-ghost { background: transparent; color: var(--sidebar-text); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: var(--sidebar-hover); color: #fff; }
.app-main .btn-ghost { color: var(--text); }
.app-main .btn-ghost:hover:not(:disabled) { background: var(--border); color: var(--text); }

.btn-danger { background: var(--zirc-red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b01e24; color: #fff; }

.btn-sm { padding: 8px 12px; font-size: var(--text-sm); }

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-icon:hover { background: var(--border); color: var(--primary); }
.btn-icon i { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, .brand-text { font-family: var(--font-sans); font-weight: 700; }
h1 { font-size: 1.75rem; margin: 0 0 calc(var(--space) * 2); color: var(--text); letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; margin: 0 0 calc(var(--space) * 1.5); letter-spacing: -0.01em; font-weight: 600; }
h3 { font-size: 1.05rem; margin: 0 0 var(--space); font-weight: 600; color: var(--text); }
.muted, .text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space); }
.mr-2 { margin-right: calc(var(--space) * 2); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 2.5) calc(var(--space) * 3);
  margin-bottom: calc(var(--space) * 2);
  box-shadow: var(--shadow);
}

.card h2 { margin-top: 0; }
.card h3 { margin-top: 0; }
.card + .card { margin-top: calc(var(--space) * 1.5); }
.card--search { margin-bottom: calc(var(--space) * 2); }

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--zirc-sage);
  color: #fff;
}

.badge-procedure, .badge-other { background: var(--zirc-sage); color: #fff; }
.badge-regulatory { background: var(--zirc-product-blue); }
.badge-form { background: var(--zirc-product-orange); }
.badge-code { background: var(--zirc-product-blue); }
.badge-title { background: var(--zirc-product-orange); }

/* Document header badges – upper right, stacked: criticality then procedure */
.doc-header-top {
  position: relative;
  padding-right: 140px;
}
.doc-badges {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.doc-type-badge,
.doc-criticality-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 120px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  min-height: 28px;
  box-sizing: border-box;
}
.doc-type-badge {
  background: rgba(78, 29, 149, 0.1);
  color: var(--primary);
  border: 1px solid rgba(78, 29, 149, 0.2);
}
.doc-type-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}
.doc-type-badge-icon svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Same doc-type-badge look in search autocomplete (compact) */
.doc-type-badge--ac {
  width: auto;
  min-width: 0;
  padding: 4px 8px;
  min-height: 0;
  font-size: 0.75rem;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: visible;
  box-sizing: border-box;
}
.doc-type-badge--ac .doc-type-badge-icon svg { width: 12px; height: 12px; }
.ac-item .doc-type-badge--ac { flex-shrink: 0; min-width: 5.5em; }

/* doc-type-badge in ref list (References Out / Referenced By accordions) */
.doc-type-badge--ref {
  width: auto;
  min-width: 0;
  padding: 4px 8px;
  min-height: 0;
  font-size: 0.75rem;
}
.doc-type-badge--ref .doc-type-badge-icon svg { width: 12px; height: 12px; }

.doc-criticality-badge {
  background: #b91c1c;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.doc-criticality-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}
.doc-criticality-icon svg { width: 14px; height: 14px; flex-shrink: 0; stroke: #fff; }

.doc-criticality-badge.criticality-low {
  background: #166534;
  color: #fff;
}
.doc-criticality-badge.criticality-low .doc-criticality-icon svg { stroke: #fff; }
.doc-criticality-badge.criticality-medium {
  background: #eab308;
  color: #000;
}
.doc-criticality-badge.criticality-medium .doc-criticality-icon svg { stroke: #000; }
.doc-criticality-badge.criticality-high {
  background: #b91c1c;
  color: #fff;
}
.doc-criticality-badge.criticality-high .doc-criticality-icon svg { stroke: #fff; }

/* ==========================================================================
   Criticality – prominent (other uses, e.g. in lists)
   ========================================================================== */
.criticality {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-sm);
}
.criticality-low { background: var(--criticality-low-bg); color: var(--criticality-low-text); }
.criticality-medium { background: var(--criticality-medium-bg); color: var(--criticality-medium-text); }
.criticality-high { background: var(--criticality-high-bg); color: var(--criticality-high-text); }

/* ==========================================================================
   Document landing – header card
   ========================================================================== */
.doc-layout {
  display: grid;
  gap: calc(var(--space) * 3);
}

@media (min-width: 900px) {
  .doc-layout { grid-template-columns: 1fr 300px; }
}

.doc-main { min-width: 0; }
.doc-aside { min-width: 0; }

.doc-header-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 3);
  box-shadow: var(--shadow-md);
  margin-bottom: calc(var(--space) * 2);
}

.doc-header-card .doc-code-display {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 var(--space);
  color: var(--text);
  letter-spacing: -0.02em;
}

.doc-header-card .doc-title-display {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 0 0 calc(var(--space) * 2);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.doc-title-display .doc-meta-part {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.doc-title-display .doc-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.85;
}
.doc-title-display .doc-meta-icon svg { width: 16px; height: 16px; }
.doc-title-display .doc-meta-sep { opacity: 0.6; user-select: none; }

.doc-header-meta {
  display: grid;
  gap: var(--space);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.doc-header-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.doc-header-meta .meta-item i { flex-shrink: 0; color: var(--text-muted); }
.doc-header-meta .meta-item strong { color: var(--text); }

.doc-meta-card .doc-code-title { font-size: 1.5rem; margin: 0 0 0.5rem; }
.doc-meta-card .meta-row { margin: 0.35rem 0; }

/* Actions – icon buttons */
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  margin-top: 0;
}

.doc-actions .btn { flex-shrink: 0; }
.doc-actions .btn-icon { flex-shrink: 0; }

/* Right column: Actions (prominent) + Document details + Impact link */
.doc-aside-card-title {
  margin: 0 0 calc(var(--space) * 2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.doc-aside-actions-card { order: -1; padding: calc(var(--space) * 2.5); }
.doc-actions--prominent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--space) * 2);
  margin-top: 0;
  justify-items: stretch;
  align-items: stretch;
}
.doc-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: calc(var(--space) * 2);
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  min-height: 80px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  overflow: visible;
  text-decoration: none;
}
.doc-action-btn.btn-icon {
  width: 100%;
  height: auto;
  min-height: 80px;
}
/* Override .btn-icon so primary action button shows purple with white icon/text */
.doc-action-btn.btn-primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}
.doc-action-btn.btn-primary:hover {
  background: var(--primary-hover);
  color: #fff;
}
.doc-action-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.doc-action-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  stroke: currentColor;
}
.doc-action-btn.btn-primary .doc-action-icon,
.doc-action-btn.btn-primary .doc-action-label {
  color: #fff;
}
.doc-action-btn.btn-primary .doc-action-icon svg {
  stroke: #fff;
}
.doc-action-btn.btn-secondary .doc-action-icon { color: var(--text); }
.doc-action-btn.btn-secondary .doc-action-icon svg { stroke: var(--text); }
.doc-action-btn.btn-secondary:hover {
  background: var(--primary);
  color: #fff;
}
.doc-action-btn.btn-secondary:hover .doc-action-icon,
.doc-action-btn.btn-secondary:hover .doc-action-label {
  color: #fff;
}
.doc-action-btn.btn-secondary:hover .doc-action-icon svg {
  stroke: #fff;
}
.doc-action-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
}
.doc-action-btn.btn-secondary .doc-action-label { color: var(--text); }

.doc-aside-meta-card { }
.doc-aside-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.doc-aside-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: calc(var(--space) * 1.5) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.doc-aside-meta-item:last-child { border-bottom: none; }
.doc-aside-meta-item i { flex-shrink: 0; color: var(--text-muted); margin-top: 2px; }
.doc-aside-meta-item div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-aside-meta-item strong { color: var(--text); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; }
.doc-aside-meta-item span { word-break: break-word; }

.doc-aside-impact-card { padding: calc(var(--space) * 2); }
.doc-aside-impact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--space) * 2);
  background: rgba(78, 29, 149, 0.06);
  border-radius: var(--radius-sm);
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background 0.15s;
}
.doc-aside-impact-link:hover { background: rgba(78, 29, 149, 0.12); text-decoration: none; color: var(--primary); }
.doc-aside-impact-link i:first-child { flex-shrink: 0; }
.doc-aside-impact-link i:last-child { flex-shrink: 0; margin-left: auto; }

/* ==========================================================================
   Impact summary panel – card with sections
   ========================================================================== */
.impact-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 2);
  box-shadow: var(--shadow);
}

.impact-summary-card h3 {
  margin: 0 0 calc(var(--space) * 2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.impact-section {
  margin-bottom: calc(var(--space) * 2);
}

.impact-section:last-child { margin-bottom: 0; }

.impact-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.impact-section-header i { flex-shrink: 0; }
.impact-section-header .count {
  background: var(--bg);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
}

.impact-section-list { list-style: none; padding: 0; margin: 0; }

.impact-section-list li {
  margin-bottom: 4px;
}

.impact-section-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: background 0.1s;
}

.impact-section-list a:hover {
  background: var(--bg);
  text-decoration: none;
}

.impact-section-list a i { flex-shrink: 0; opacity: 0.7; }

.impact-summary-legacy {
  background: rgba(0, 169, 224, 0.06);
  border-left: 4px solid var(--zirc-blue);
  padding: calc(var(--space) * 2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ==========================================================================
   References – expandable with chevron
   ========================================================================== */
.ref-group { margin: calc(var(--space) * 1.5) 0; }
.ref-group-title {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: background 0.1s;
}

.ref-group-title:hover { background: var(--border); }
.ref-group-title .chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ref-group.collapsed .ref-group-title .chevron { transform: rotate(-90deg); }

.ref-group-content { margin-top: 4px; margin-left: 8px; }
.ref-group.collapsed .ref-group-content { display: none; }

.ref-group ul { list-style: none; padding: 0; margin: 0; }
.ref-group li {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.ref-group li:last-child { border-bottom: none; }
.ref-group li:hover { background: var(--bg); }

.ref-group li a.doc-link { display: inline; }
.snippet { color: var(--text-muted); font-size: var(--text-sm); margin-top: 4px; }

.ref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ref-chips a, .ref-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: rgba(0, 169, 224, 0.1);
  color: var(--primary);
  text-decoration: none;
  border: 1px solid rgba(0, 169, 224, 0.2);
}
.ref-chips a:hover { background: rgba(0, 169, 224, 0.18); text-decoration: none; }

/* ==========================================================================
   Browse – filters on top, full-width table, collapsible filter bar
   ========================================================================== */
.browse-layout {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 2);
}

.browse-filters-top-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
}

.browse-filters-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.browse-filters-toggle:hover {
  background: var(--bg);
}

.browse-filters-toggle-icon {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.browse-filters--top {
  border-top: 1px solid var(--border);
  padding: calc(var(--space) * 2);
  overflow: hidden;
  transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.15s ease;
}

.browse-filters--top.browse-filters--collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  opacity: 0;
  pointer-events: none;
}

.browse-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--space) * 2) calc(var(--space) * 3);
}

.browse-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.browse-filter-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.browse-filters--top .browse-filter-item input[type="text"] {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  min-width: 180px;
  max-width: 280px;
}

.browse-filters--top .browse-filter-item select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  min-width: 120px;
  max-width: 160px;
}

.browse-filters-footer {
  margin-top: calc(var(--space) * 2);
  padding-top: calc(var(--space) * 2);
  border-top: 1px solid var(--border);
}

.browse-obsolete-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
  user-select: none;
}

.browse-obsolete-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.browse-obsolete-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  background: var(--border);
  border-radius: 12px;
  transition: background 0.2s ease;
}

.browse-obsolete-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.browse-obsolete-input:checked + .browse-obsolete-slider {
  background: var(--primary);
}

.browse-obsolete-input:checked + .browse-obsolete-slider::after {
  transform: translateX(20px);
}

.browse-obsolete-toggle:hover .browse-obsolete-slider {
  background: var(--text-muted);
}

.browse-obsolete-input:checked + .browse-obsolete-slider:hover {
  filter: brightness(1.08);
}

.browse-filter-actions {
  margin-left: auto;
  padding-bottom: 2px;
}

.browse-filter-actions .btn { flex-shrink: 0; }

.browse-main { min-width: 0; }

.browse-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.browse-table {
  width: 100%;
  border-collapse: collapse;
}

.browse-table thead {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.browse-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.browse-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}

.browse-table th:nth-child(1),
.browse-table td:nth-child(1) {
  min-width: 160px;
}

.browse-table th:nth-child(2),
.browse-table td:nth-child(2) {
  min-width: 200px;
}

.browse-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.browse-view-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.browse-table tbody tr:hover { background: var(--bg); }
.browse-table .doc-link { font-weight: 600; }

.browse-pagination { margin-top: calc(var(--space) * 2); }
.browse-pagination .pagination-links { display: flex; align-items: center; gap: calc(var(--space) * 2); flex-wrap: wrap; }
.browse-pagination .pagination-current { color: var(--text-muted); font-size: 0.9rem; }

.page-intro { margin-bottom: calc(var(--space) * 3); }
.page-subtitle { margin: 0.25rem 0 0 0; }

/* ==========================================================================
   Home – hero + quick actions
   ========================================================================== */
.home-hero {
  text-align: center;
  padding: calc(var(--space) * 6) 0 calc(var(--space) * 4);
}

.home-hero h1 {
  font-size: 2rem;
  margin: 0 0 var(--space);
  color: var(--text);
}

.home-hero .hero-sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin: 0 0 calc(var(--space) * 3);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.home-search-wrap {
  max-width: 480px;
  margin: 0 auto calc(var(--space) * 4);
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: calc(var(--space) * 2);
  max-width: 900px;
  margin: 0 auto;
}

.home-actions--single {
  display: flex;
  justify-content: center;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 3);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s, transform 0.1s;
}

.action-card:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--text);
}

.action-card .action-icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

.action-card .action-label { font-weight: 600; font-size: 1rem; text-align: center; }

/* ==========================================================================
   PDF view – jump panel
   ========================================================================== */
.preview-pdf-header {
  margin-bottom: calc(var(--space) * 2);
  padding: calc(var(--space) * 2) 0;
  border-bottom: 1px solid var(--border);
}

.preview-grid { display: flex; gap: calc(var(--space) * 3); flex-wrap: wrap; }
.pdf-pane { flex: 3; min-width: 0; min-height: 80vh; }
.refs-pane {
  flex: 1;
  min-width: 260px;
  max-width: 340px;
  max-height: 80vh;
  overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 2);
  box-shadow: var(--shadow);
}

.refs-pane h3 { margin: 0 0 calc(var(--space) * 2); font-size: 1rem; font-weight: 600; }
.refs-group { margin-bottom: calc(var(--space) * 2); }
.refs-group-title { margin: 0 0 var(--space); font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.refs-list { list-style: none; padding: 0; margin: 0; }

.ref-item-card {
  padding: calc(var(--space) * 2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space);
  transition: background 0.1s;
}

.ref-item-card:hover { background: var(--bg); }
.ref-item-card .ref-code { font-weight: 600; display: block; margin-bottom: 6px; }
.ref-item-card .ref-actions { display: flex; gap: var(--space); align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ref-item-card .ref-actions .btn { flex-shrink: 0; }
.ref-item-card .ref-file { margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); }

.ref-item { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.ref-item .ref-code { font-weight: 600; display: block; }
.ref-item .ref-actions { margin-top: 0.35rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ref-item .ref-file { margin-top: 0.25rem; }

.pdf-iframe {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ==========================================================================
   Forms & inputs
   ========================================================================== */
input[type="text"], input[type="password"], input[type="file"] {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  width: 100%;
  max-width: 320px;
}

input:focus-visible { outline: 2px solid var(--zirc-blue); outline-offset: 0; }

/* ==========================================================================
   Links & tables
   ========================================================================== */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.doc-link { font-weight: 600; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
th { font-weight: 600; background: var(--bg); font-size: var(--text-sm); }
.search-results-table th { font-size: var(--text-sm); }
.table-sm th, .table-sm td { padding: 8px 12px; font-size: var(--text-sm); }
.table-bordered th, .table-bordered td { border: 1px solid var(--border); }

/* ==========================================================================
   Preview (formatted)
   ========================================================================== */
.preview-page { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
}
.preview-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space);
  margin-left: auto;
}
.preview-overview-btn { display: inline-flex; align-items: center; gap: 8px; }
.preview-view-btn { display: inline-flex; align-items: center; gap: 6px; }
.preview-view-btn.btn-secondary,
.preview-pdf-btn.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.preview-view-btn.btn-secondary .preview-view-icon svg,
.preview-pdf-btn.btn-secondary .preview-pdf-icon svg { stroke: var(--text); }
.preview-view-btn.btn-secondary:hover,
.preview-pdf-btn.btn-secondary:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.preview-view-btn.btn-secondary:hover .preview-view-icon svg,
.preview-pdf-btn.btn-secondary:hover .preview-pdf-icon svg { stroke: #fff; }
.preview-view-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
.preview-view-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.preview-overview-btn .preview-overview-icon { display: flex; align-items: center; justify-content: center; }
.preview-overview-btn .preview-overview-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.preview-pdf-btn { display: inline-flex; align-items: center; gap: 6px; }
.preview-pdf-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
.preview-pdf-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.preview-warning { margin: 0; }
.preview-content--full { width: 100%; min-width: 0; }
.preview-body {
  overflow: auto;
  max-height: 70vh;
  padding: calc(var(--space) * 2.5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  line-height: 1.6;
}
.ref-highlight {
  background: var(--zirc-yellow);
  color: #1a1a1a;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ref-highlight:hover { background: #e0a30c; }
.preview-body.no-highlights .ref-highlight { background: transparent; border: none; text-decoration: none; color: inherit; }

/* ==========================================================================
   Login
   ========================================================================== */
.body-login .app-shell { display: block; background: #f0eef5; }
.body-login .app-sidebar { display: none; }
.body-login .app-content-wrap { margin-left: 0; background: #f0eef5; }
.body-login .app-header {
  justify-content: center;
  background: #f0eef5;
  border-bottom: none;
  padding: calc(var(--space) * 3) var(--space);
}
.body-login .header-search-form { display: none; }
.body-login .app-main {
  padding: calc(var(--space) * 2) var(--space) calc(var(--space) * 4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  background: #f0eef5;
}

.login-page {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: calc(var(--space) * 2);
}

.login-logo {
  height: auto;
  max-height: 76px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: calc(var(--space) * 2.5);
  width: 100%;
}

.login-card-header {
  text-align: center;
  margin-bottom: calc(var(--space) * 2);
}

.login-card-app-name {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.login-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sidebar-gradient-top) 0%, var(--sidebar-gradient-bottom) 100%);
  color: #fff;
  margin-bottom: calc(var(--space) * 2);
}

.login-card-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

.login-card-title {
  margin: 0 0 var(--space);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.login-card-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 2);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text);
}

.login-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background: var(--card-bg);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-input::placeholder { color: var(--text-muted); }

.login-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.2);
}

.login-error {
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: var(--zirc-red);
  font-size: var(--text-sm);
  font-weight: 500;
}

.login-submit {
  margin-top: var(--space);
  padding: 10px 20px;
  font-weight: 600;
  width: 100%;
}
.login-forgot { margin-top: 1rem; text-align: center; }
.login-forgot a { font-size: var(--text-sm); }
.login-success {
  padding: 12px;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  color: #166534;
  margin-bottom: 1rem;
}
.password-rules-box { margin: 0.5rem 0; padding: 8px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.password-rules-box ul { margin: 0.25rem 0 0 1rem; padding: 0; }
.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-weight: 500; margin-bottom: 4px; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row select {
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}
.header-auth-title { font-weight: 700; color: var(--text); text-decoration: none; }
.header-auth-title:hover { color: var(--primary); }
.full-width { width: 100%; max-width: 100%; }

/* ==========================================================================
   Admin & flash
   ========================================================================== */
.admin-flash.success { background: #dcfce7; border-left: 4px solid #16a34a; }
.admin-flash.error { background: #fee2e2; border-left: 4px solid #dc2626; }
.password-requirements-list { margin: 0.25rem 0; padding-left: 1.25rem; }

/* Admin dashboard cards – consistent titles and actions */
.admin-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
}
.admin-card-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke-width: 2;
  color: var(--primary);
}
.btn-icon-inline {
  width: 18px;
  height: 18px;
  margin-right: 0.35rem;
  vertical-align: -0.2em;
  flex-shrink: 0;
  stroke-width: 2;
}
.admin-card-form p { margin-bottom: 1rem; }
.admin-card-form p:last-of-type { margin-bottom: 0; }
.admin-file-input { max-width: 100%; }
.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-card-nested {
  margin-top: 1rem;
  background: var(--bg);
}

/* Admin users table – symmetrical Actions column */
.admin-users-search-form {
  display: block;
  margin-top: 0.75rem;
}
.admin-users-search-form input[type="text"] {
  margin-right: 0.5rem;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}
.admin-users-table th.admin-users-actions-header,
.admin-users-table td.admin-users-actions-cell {
  vertical-align: middle;
}
.admin-users-table td.admin-users-actions-cell {
  min-width: 180px;
}
.admin-user-actions {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.5rem 1rem;
  align-items: center;
}
.admin-action { min-width: 0; }
.admin-action-edit { min-width: 2rem; }
.admin-action-edit .btn-icon { padding: 6px 10px; }
.admin-action-edit .admin-edit-icon { display: inline-flex; line-height: 0; }
.admin-action-edit .admin-edit-icon svg { width: 18px; height: 18px; }
.admin-action-toggle { min-width: 5.5rem; }
.admin-action-form { display: inline; margin: 0; }
.admin-edit-set-password-form label { display: block; margin-bottom: 4px; }
.admin-edit-set-password-form input[type="password"] { max-width: 320px; margin-right: 0.5rem; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: none; }
  .app-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-overlay.is-visible { display: block; }
  .app-content-wrap { margin-left: 0; }
  .header-menu-btn { display: flex; }
  .header-search-form { max-width: none; }
  .global-search-wrap { max-width: none; }
  .browse-filters-row { flex-direction: column; align-items: stretch; }
  .browse-filters--top .browse-filter-item input[type="text"] { max-width: none; }
  .browse-filter-actions { margin-left: 0; }
}

p.mb-0 a { color: var(--primary); }
.log-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.log-filters label { display: block; font-weight: 500; }
.log-filters input, .log-filters select { margin-top: 0.25rem; }