/* =============================================================================
   ISA RC42 Website Administration Guide - Dedicated Admin Styles
   Loaded exclusively for /admin/ pages via admin/_metadata.yml
   ============================================================================= */

/* Ensure sticky positioning works without parent scroll-container interference */
html:has(body.docked),
body.docked {
  overflow-x: clip !important;
}

/* Ensure headings have proper scroll margin so TOC anchor jumps clear the top navbar */
#quarto-document-content h2,
#quarto-document-content h3,
main.content h2,
main.content h3 {
  scroll-margin-top: 5.5rem !important;
}

/* --- Typography Scale (Positron-style Documentation Hierarchy) --- */
#quarto-document-content h1.title,
main.content h1.title {
  font-size: 2.35rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  margin-bottom: 0.35rem !important;
}

#quarto-document-content .subtitle,
main.content p.subtitle {
  font-size: 1.18rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #475569 !important;
  margin-bottom: 1.75rem !important;
}

#quarto-document-content h2,
main.content h2 {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  margin-top: 2.25rem !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.4rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

#quarto-document-content h3,
main.content h3 {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #1e293b !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

#quarto-document-content p,
#quarto-document-content li,
main.content p,
main.content li {
  font-size: 1.02rem !important;
  line-height: 1.62 !important;
  color: #334155;
}

/* Administrative content links (tables, paragraphs, lists) */
#quarto-document-content p a,
#quarto-document-content table a,
#quarto-document-content li a {
  color: #1e3a8a;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  text-decoration-color: rgba(30, 58, 138, 0.35);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

#quarto-document-content p a:hover,
#quarto-document-content table a:hover,
#quarto-document-content li a:hover {
  color: #0d9488;
  text-decoration-color: #0d9488;
}

#quarto-document-content p a:focus-visible,
#quarto-document-content table a:focus-visible,
#quarto-document-content li a:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Left Sidebar Interactive Styles --- */
.sidebar-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.sidebar-item-container .sidebar-link {
  color: #334155;
  border-radius: 5px;
  transition: all 0.15s ease-in-out;
  display: flex;
  align-items: center;
}

.sidebar-item-container .sidebar-link:hover {
  color: #0d9488 !important;
  background-color: rgba(241, 245, 249, 0.85);
  text-decoration: none;
}

.sidebar-item-container .sidebar-link.active,
.sidebar-item.active > .sidebar-item-container .sidebar-link {
  color: #0f766e !important;
  background-color: rgba(13, 148, 136, 0.1) !important;
  font-weight: 600 !important;
  border-left: 3px solid #0d9488;
}

/* Breadcrumbs in Admin */
.quarto-page-breadcrumbs {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.quarto-page-breadcrumbs .breadcrumb-item a {
  color: #64748b;
  text-decoration: none;
}

.quarto-page-breadcrumbs .breadcrumb-item a:hover {
  color: #0d9488;
}

/* Next / Previous Page Navigation */
.page-navigation {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.page-navigation .nav-page {
  font-size: 0.92rem;
  font-weight: 600;
}

.page-navigation .nav-page a {
  color: #1e3a8a;
  text-decoration: none;
}

.page-navigation .nav-page a:hover {
  color: #0d9488;
  text-decoration: underline;
}

/* Quick Access Cards on Landing */
.admin-card-link {
  text-decoration: none !important;
  color: inherit !important;
}

.admin-card-link .card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.admin-card-link:hover .card {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
  border-color: #0d9488 !important;
}

/* =============================================================================
   Desktop 3-Column Layout (≥ 992px)
   ============================================================================= */
@media (min-width: 992px) {
  /* 1. Global Container: Widescreen utilization (1550–1720px) */
  .quarto-container {
    max-width: 1720px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2. Three-column CSS Grid definition for docked documentation */
  body.docked #quarto-content.page-columns,
  body.docked .page-columns {
    display: grid !important;
    gap: 0 !important;
    grid-template-columns:
      [screen-start] 305px
      [screen-start-inset page-start page-start-inset body-start-outset body-start] 2.25rem
      [body-content-start] minmax(650px, 1fr)
      [body-content-end] 3rem
      [body-end body-end-outset] 230px
      [page-end-inset page-end screen-end-inset screen-end] !important;
  }

  /* 3. Left Sidebar Column */
  #quarto-sidebar,
  .sidebar-navigation.docked {
    grid-column: screen-start / body-start !important;
    width: 305px !important;
    min-width: 305px !important;
    max-width: 305px !important;
    padding-top: 0.6rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    border-right: 1px solid #e2e8f0;
  }

  #quarto-sidebar > *,
  .sidebar.sidebar-navigation > * {
    padding-top: 0 !important;
  }

  .sidebar-menu-container {
    padding-top: 0 !important;
    padding-bottom: 1.5rem !important;
  }

  #quarto-sidebar .sidebar-menu-container > ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .sidebar-item-section {
    margin-top: 0.68rem !important;
    margin-bottom: 0.12rem !important;
  }

  .sidebar-item-section:first-child {
    margin-top: 0 !important;
  }

  .sidebar-item-section > .sidebar-item-container .sidebar-item-text {
    font-size: 0.77rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #475569 !important;
    padding-top: 0.38rem !important;
    padding-bottom: 0.2rem !important;
    padding-left: 0.45rem !important;
    line-height: 1.22 !important;
  }

  .sidebar-item-section:first-child > .sidebar-item-container .sidebar-item-text {
    padding-top: 0.18rem !important;
  }

  .sidebar-section {
    padding-left: 0.38rem !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .sidebar-item {
    margin-top: 0.12rem !important;
    margin-bottom: 0.12rem !important;
  }

  .sidebar-item-container .sidebar-link {
    font-size: 0.92rem !important;
    padding: 0.28rem 0.55rem !important;
    line-height: 1.32 !important;
  }

  /* 4. Main Content Column: Wide, comfortable reading area */
  #quarto-document-content,
  main.content {
    grid-column: body-content-start / body-content-end !important;
    max-width: 1000px !important;
    width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .page-navigation {
    grid-column: body-content-start / body-content-end !important;
    max-width: 1000px !important;
  }

  /* 5. Right TOC Column: Positron-style Sticky "On this page" sidebar */
  #quarto-margin-sidebar,
  .sidebar.margin-sidebar {
    grid-column: body-end / page-end !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    position: sticky !important;
    top: 5.5rem !important;
    align-self: start !important;
    max-height: calc(100vh - 6.5rem) !important;
    overflow-y: auto !important;
    z-index: 10 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.6rem !important;
  }

  #quarto-margin-sidebar #TOC,
  #quarto-margin-sidebar nav[role="doc-toc"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding-left: 0 !important;
  }

  #quarto-margin-sidebar h2#toc-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  /* Force TOC ul and sub-lists to display (overriding Bootstrap .collapse:not(.show) { display: none }) */
  #quarto-margin-sidebar #TOC ul,
  #quarto-margin-sidebar #TOC ul.collapse,
  #quarto-margin-sidebar nav[role="doc-toc"] ul,
  #quarto-margin-sidebar nav[role="doc-toc"] ul.collapse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul li {
    margin-bottom: 0.3rem !important;
    padding: 0 !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul ul {
    padding-left: 0.65rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] a {
    color: #64748b !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0.22rem 0 0.22rem 0.65rem !important;
    border-left: 2px solid #e2e8f0 !important;
    transition: all 0.15s ease-in-out !important;
    font-weight: 400;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] a:hover {
    color: #0d9488 !important;
    border-left-color: #99f6e4 !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] a.active {
    color: #0f766e !important;
    font-weight: 600 !important;
    border-left: 2px solid #0d9488 !important;
  }
}