/*
  Typography: match main IPA portal (see main.css --font-size-* and portal form patterns:
  label-text / inputs use text-sm scale; body stays default base from theme).
*/
.inkoopstrateeg-app .input:not(.input-xs),
.inkoopstrateeg-app .textarea:not(.textarea-xs),
.inkoopstrateeg-app .select {
  font-size: var(--font-size-sm);
}

.inkoopstrateeg-app .label .label-text:not(.label-text-alt) {
  font-size: var(--font-size-sm);
}

/* ===== Sidebar width ===== */
/* Checkbox sibling selector: alignment works regardless of Tailwind variant. */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar {
  width: 6rem;
}

#sidebar-drawer-toggle:checked ~ .drawer-side #sidebar {
  width: 14rem;
}

/* ===== Sidebar header ===== */
/* Stacked + centered when collapsed */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .sidebar-header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

#sidebar-drawer-toggle:checked ~ .drawer-side #sidebar .sidebar-header {
  justify-content: space-between;
}

/* Logo toggling: collapsed logo shown when closed, expanded logo shown when open */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .sidebar-header > a:first-child {
  display: flex !important;
}
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .sidebar-header > a:nth-child(2) {
  display: none !important;
}
#sidebar-drawer-toggle:checked ~ .drawer-side #sidebar .sidebar-header > a:first-child {
  display: none !important;
}
#sidebar-drawer-toggle:checked ~ .drawer-side #sidebar .sidebar-header > a:nth-child(2) {
  display: flex !important;
}

/* ===== Nav list: direct link layout ===== */
/* Expanded: add gap between icon and label */
#sidebar-drawer-toggle:checked ~ .drawer-side #sidebar .nav-list > li > a {
  gap: 0.75rem;
}

/* Collapsed: center icon, reduce padding, hide label */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .nav-list > li > a {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  gap: 0;
}

#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .nav-list > li > a .nav-label {
  display: none;
}

/* ===== Submenu two-block pattern ===== */
/* inkoop-collapsed-only: shown only when sidebar is collapsed */
#sidebar-drawer-toggle:checked ~ .drawer-side #sidebar .inkoop-collapsed-only {
  display: none !important;
}
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .inkoop-collapsed-only {
  display: list-item !important;
}

/* inkoop-expanded-only: shown only when sidebar is expanded */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .inkoop-expanded-only {
  display: none !important;
}
#sidebar-drawer-toggle:checked ~ .drawer-side #sidebar .inkoop-expanded-only {
  display: list-item !important;
}

/* ===== details/summary: remove default browser disclosure marker ===== */
#sidebar details > summary {
  list-style: none;
}
#sidebar details > summary::-webkit-details-marker {
  display: none;
}

/* ===== User menu: center avatar trigger when collapsed ===== */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .border-t [role="button"],
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .border-t .p-3 > a {
  justify-content: center;
}

/* Hide user info text when collapsed */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .border-t [role="button"] .min-w-0 {
  display: none;
}

/* Hide logout link text when collapsed */
#sidebar-drawer-toggle:not(:checked) ~ .drawer-side #sidebar .border-t .p-3 > a > span {
  display: none;
}

/* Allow submenu flyout to overflow drawer-side clipping */
.drawer-side {
  overflow: visible !important;
}

/* ===== Chat footnote citations ===== */
.footnote-ref {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  color: oklch(var(--p));
  font-weight: 600;
}

.footnote-sources {
  margin-top: 1rem;
}

.footnote-sources hr {
  margin-bottom: 0.5rem;
  border-color: oklch(var(--bc) / 0.15);
}

.footnote-sources .footnote-list {
  font-size: 0.8em;
  color: oklch(var(--bc) / 0.6);
  padding-left: 1.5em;
  margin: 0;
}

.footnote-sources .footnote-list li {
  margin-bottom: 0.15em;
}

/* A footnote source that matched a knowledge base document links to that entry. */
.footnote-sources .footnote-source-link {
  color: var(--color-primary, oklch(49.12% 0.3096 275.75));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footnote-sources .footnote-source-link:hover {
  text-decoration: none;
}

/* Project team tab: 80% of main column width, horizontally centered. */
.inkoop-project-team-inner {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  min-height: 0;
}

/* ===== Citation chip in the section editor (contenteditable) ===== */
/* Atomic, non-editable marker that stands in for a [cite:...] citation while editing. */
.cite-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.15rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.375rem;
  font-size: 0.7em;
  line-height: 1;
  background-color: rgba(245, 158, 11, 0.18);
  color: #b45309;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.cite-editor:focus,
.cite-editor:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.5);
  outline-offset: -1px;
}

/* ===== Main content width ===== */
/*
  Default centered content wrapper (pages can still opt into full width via the
  main_inner_width block). Combined with mx-auto this centers the content; the side
  margins are half of the previous caps (90/80/75% -> 95/90/87.5%), since the margin
  scales with (1 - max-width%). This halves the gap between the sidebar and the content.
*/
.inkoop-main-inner {
  max-width: 100%;
}
@media (min-width: 768px) {
  .inkoop-main-inner {
    max-width: 95%;
  }
}
@media (min-width: 1280px) {
  .inkoop-main-inner {
    max-width: 90%;
  }
}
@media (min-width: 1536px) {
  .inkoop-main-inner {
    max-width: 87.5%;
  }
}

/* ===== Knowledge-base categories column ===== */
/*
  The shared categories_sidebar macro truncates each category name on a single fixed-height
  row. Some library categories are long legal names (e.g. "Wet op het Hoger Onderwijs en
  Wetenschappelijk Onderzoek (WHW)") that never fit, so inside the InkoopStrateeg library we
  let names wrap and the row grow, keeping them fully readable. Scoped to .inkoop-kb-categories
  so the main app's sidebar is unchanged. The id+class selector outranks the Tailwind utilities.
*/
.inkoop-kb-categories #category_link {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  height: auto;
  min-height: 2rem;
  display: flex;
  align-items: center;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  line-height: 1.25;
  word-break: break-word;
}

/* ===== Chat drag-and-drop overlay ===== */
/*
  Shown over the chat column while a file is dragged across it. The translucent backing is set
  here rather than with a Tailwind opacity utility: this template already notes that some
  utilities are missing from the built CSS, and bg-base-100/85 was one of them, which left the
  overlay fully transparent and its label unreadable against the transcript behind it.
*/
#inkoop-chat-drop-overlay {
  background-color: color-mix(in oklab, var(--color-base-100, white) 88%, transparent);
}