/* =============================================================================
   STYLE PASS 1 — Brand identity: Shared Services Canada
   Target: LeafWiki 0.14.2  (loaded as /custom.css, after the app bundle)
   Palette: GC Blue #00538D · GC Navy #002D57 · GC Red #D3001C · GC Teal #00BBC1
   ============================================================================= */

:root {
  /* --- brand ramp ------------------------------------------------------- */
  --brand: 205 100% 28%;
  --brand-dark: 209 100% 17%;
  --brand-light: 205 78% 78%;

  --primary: 205 100% 28%;
  --primary-foreground: 0 0% 100%;

  /* --- surfaces: cooler, institutional grey instead of green-tinted ----- */
  --background: 204 29% 97%;
  --surface: 0 0% 100%;
  --surface-alt: 204 24% 94%;
  --surface-border: 210 21% 89%;
  --border: 210 21% 89%;

  --foreground: 204 22% 25%;
  --muted: 204 14% 93%;
  --muted-foreground: 206 10% 40%;

  --accent: 205 62% 92%;
  --accent-foreground: 209 100% 17%;

  --card: 0 0% 100%;
  --card-foreground: 204 22% 25%;

  /* --- status colours: GC red for destructive, teal for informational --- */
  --destructive: 352 100% 41%;
  --destructive-foreground: 0 0% 100%;
  --error: 352 100% 41%;
  --success: 142 45% 32%;
  --warning: 36 92% 44%;

  --radius: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-md: 0.3rem;
  --radius-sm: 0.2rem;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans",
               "Helvetica Neue", Arial, sans-serif;
}

/* Dark mode keeps the same identity, lifted for contrast */
.dark {
  --brand: 205 82% 58%;
  --brand-dark: 205 90% 42%;
  --brand-light: 205 60% 26%;
  --primary: 205 82% 58%;
  --background: 210 30% 8%;
  --surface: 210 24% 12%;
  --surface-alt: 210 22% 16%;
  --surface-border: 210 18% 22%;
  --border: 210 18% 22%;
  --foreground: 204 20% 88%;
  --muted: 210 20% 16%;
  --muted-foreground: 206 12% 62%;
  --accent: 205 45% 22%;
  --accent-foreground: 205 82% 82%;
}

/* =============================================================================
   Header — GC navy bar with an institutional wordmark
   ============================================================================= */
.app-layout__header {
  background: hsl(var(--brand-dark));
  color: #fff;
  border-bottom: 3px solid hsl(var(--brand));
}

.app-layout__header-inner {
  color: #fff;
}

/* Eyebrow label above the site name — the "brand for my team" signal */
.app-layout__header-inner::before {
  content: "Shared Services Canada";
  display: block;
  position: absolute;
  left: 1rem;
  top: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--brand-light));
  pointer-events: none;
}

.app-layout__site-name,
.app-layout__logo-n-title {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-top: 0.55rem;
}

.app-layout__logo-emoji {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.app-layout__header button,
.app-layout__header a {
  color: hsl(204 20% 92%);
}
.app-layout__header button:hover,
.app-layout__header a:hover {
  color: #fff;
  background: hsl(var(--brand));
}

/* =============================================================================
   Sidebar — quiet institutional panel, brand marker on the active page
   ============================================================================= */
.sidebar,
.app-layout__sidebar-container,
.sidebar__inner {
  background: hsl(var(--surface));
  border-right: 1px solid hsl(var(--surface-border));
}

.sidebar-accordion-section__title,
.sidebar-accordion-section__header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.tree-node__title {
  font-size: 0.86rem;
  color: hsl(var(--foreground));
}

.tree-node__link:hover,
.tree-node--active .tree-node__title {
  color: hsl(var(--brand-dark));
  font-weight: 600;
}

.tree-node--active {
  background: hsl(var(--accent));
  border-left: 3px solid hsl(var(--brand));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.tree-node__marker--active {
  background: hsl(var(--brand));
}

.sidebar__tab-button--active {
  color: hsl(var(--brand-dark));
  border-bottom-color: hsl(var(--brand));
}

.sidebar__footer,
.sidebar__footer-link {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

/* =============================================================================
   Buttons & inputs — flatter, squarer, GC-blue primary
   ============================================================================= */
button:not(:disabled):hover {
  border-color: hsl(var(--brand));
}

:where(input, textarea, select):focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 1px;
  box-shadow: none;
}

a {
  color: hsl(var(--brand));
}
a:hover {
  color: hsl(var(--brand-dark));
}
/* =============================================================================
   STYLE PASS 2 — Content readability + table integrity
   The corpus is table-heavy (528 recovered GFM tables: server inventories,
   contacts, URLs, monitoring). Tables must stay legible and must never break
   the page layout when a table is wider than the viewport.
   ============================================================================= */

/* --------------------------------------------------------------------------
   Reading column
   -------------------------------------------------------------------------- */
.app-layout__main-content-area-viewer {
  max-width: 100%;
}

.prose,
.prose-base {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: hsl(var(--foreground));
}

/* --------------------------------------------------------------------------
   Heading rhythm — one H1, then a predictable h2/h3/h4 scale
   -------------------------------------------------------------------------- */
.prose h1,
.prose-base h1,
.prose-base h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--brand-dark));
  margin-top: 0;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid hsl(var(--brand));
}

.prose h2,
.prose-base h2,
.prose-base h2 {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--brand-dark));
  margin-top: 2rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid hsl(var(--surface-border));
  scroll-margin-top: 5rem;
}

.prose h3,
.prose-base h3,
.prose-base h3 {
  font-size: 1.02rem;
  font-weight: 650;
  color: hsl(var(--foreground));
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  scroll-margin-top: 5rem;
}

.prose h4,
.prose-base h4,
.prose-base h4 {
  font-size: 0.9rem;
  font-weight: 650;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  scroll-margin-top: 5rem;
}

/* Orphaned heading at the very end of a section looks broken — pull it back */
.prose h2 + h3,
.prose h3 + h4 {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   TABLES — the load-bearing part of this corpus
   -------------------------------------------------------------------------- */

/* Wide tables scroll inside their wrapper instead of blowing out the layout. */
.table-wrapper,
.prose div[style*="overflow"],
.prose-base div[style*="overflow"] {
  overflow-x: auto;
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--surface-border));
  margin: 1rem 0;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table,
.prose table,
.prose-base table,
.prose-base table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  table-layout: auto;
  margin: 0;
  background: hsl(var(--surface));
}

/* No wrapper fallback: if a table renders bare, give it the same frame */
.prose table:not(.table-wrapper table),
.prose-base table {
  border: 1px solid hsl(var(--surface-border));
  border-radius: var(--radius-md);
  overflow: hidden;
}

.prose thead,
.prose-base thead {
  background: hsl(var(--brand-dark));
}

.prose thead th,
.prose-base thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(var(--brand-dark));
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: none;
  border-bottom: 2px solid hsl(var(--brand));
  white-space: nowrap;
}

.prose tbody td,
.prose-base tbody td,
.prose td,
.prose-base td {
  padding: 0.5rem 0.7rem;
  border: none;
  border-bottom: 1px solid hsl(var(--surface-border));
  border-right: 1px solid hsl(var(--surface-border));
  vertical-align: top;
  /* Long URLs / hostnames must not force the table wider than the page */
  overflow-wrap: anywhere;
  word-break: normal;
}

.prose td:last-child,
.prose-base td:last-child,
.prose th:last-child,
.prose-base th:last-child {
  border-right: none;
}

.prose tbody tr:last-child td,
.prose-base tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra striping — makes 5-column server tables scannable row-by-row */
.prose tbody tr:nth-child(even),
.prose-base tbody tr:nth-child(even) {
  background: hsl(var(--surface-alt));
}

.prose tbody tr:hover,
.prose-base tbody tr:hover {
  background: hsl(var(--accent));
}

/* Server names, IPs and FQDNs read as data, not prose */
.prose td,
.prose-base td {
  font-variant-numeric: tabular-nums;
}

.prose code,
.prose-base code {
  font-family: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
  font-size: 0.82em;
  background: hsl(var(--muted));
  padding: 0.1em 0.35em;
  border-radius: 3px;
  color: hsl(var(--brand-dark));
}

/* --------------------------------------------------------------------------
   Code blocks
   -------------------------------------------------------------------------- */
.prose pre,
.prose-base pre {
  background: hsl(210 24% 12%);
  color: hsl(204 20% 88%);
  border: 1px solid hsl(var(--surface-border));
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  overflow-x: auto;
}

.prose pre code,
.prose-base pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   Lists, quotes, images
   -------------------------------------------------------------------------- */
.prose ul,
.prose ol,
.prose-base ul,
.prose-base ol {
  padding-left: 1.35rem;
}
.prose li,
.prose-base li {
  margin: 0.28rem 0;
}

.prose blockquote,
.prose-base blockquote {
  border-left: 4px solid hsl(var(--brand));
  background: hsl(var(--accent));
  color: hsl(var(--brand-dark));
  padding: 0.7rem 1rem;
  margin: 1rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: normal;
}

/* Migrated-image placeholders read as an explicit gap, not a broken layout */
.prose img,
.prose-base img {
  max-width: 100%;
  height: auto;
  border: 1px solid hsl(var(--surface-border));
  border-radius: var(--radius-sm);
  margin: 0.75rem 0;
}

/* Struck-through contacts (departed staff) should be visibly retired, not just thin */
.prose del,
.prose-base del {
  color: hsl(var(--muted-foreground));
  text-decoration-color: hsl(var(--destructive));
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Print — this is a runbook; people print pages
   -------------------------------------------------------------------------- */
@media print {
  .app-layout__sidebar-container,
  .app-layout__toc-pane,
  .sidebar,
  .editor-title-bar,
  .app-layout__header {
    display: none !important;
  }
  .prose table,
  .prose-base table {
    font-size: 9pt;
  }
  .prose thead th,
  .prose-base thead th {
    background: #eee !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .prose h2,
  .prose h3 {
    break-after: avoid;
  }
  .table-wrapper {
    overflow: visible;
    border: none;
  }
}