/*
 * App layout fixes — top header .container-xl alignment, scrollbar + Bootstrap
 * container gutter interaction next to the vertical sidebar, dropzone styling,
 * tribute autocomplete, page banner.
 */

/*
 * Typography — restore Bootstrap's 1rem defaults wherever Tabler shrinks
 * text below body size. Tabler's smaller-density choices are fine for an
 * info-dense dashboard but read as cramped for older users; we bring text
 * back to Bootstrap's baseline. Auxiliary UI that's intentionally smaller
 * (.btn-sm, .form-control-sm, tooltips, .page-pretitle, .datagrid-title,
 * .form-help, etc.) is left as Tabler ships it.
 *
 * Headings: only h3 is bumped (so .card-title — which uses h3 across the
 * app — keeps a step above body). h1 (24px) and h2 (20px) stay on Tabler's
 * scale; they're already visually distinct enough.
 */
:root {
  --tblr-body-font-size: 1rem;
  --tblr-h3-font-size: 1.125rem;
}

/*
 * Component-level font-size variables — Tabler defines these LOCALLY on
 * each component selector (e.g. `.btn { --tblr-btn-font-size: 0.875rem }`),
 * not on `:root`. Setting them on :root is a no-op because the local
 * declaration shadows it. We have to override at the same selector level,
 * relying on cascade order (this file loads after tabler.min.css).
 */
.btn          { --tblr-btn-font-size: 1rem; }
.dropdown-menu { --tblr-dropdown-font-size: 1rem; }
.toast        { --tblr-toast-font-size: 1rem; }
.badge        { --tblr-badge-font-size: 1em; }

/*
 * Hardcoded font-sizes (no CSS variable to point at) — override directly.
 */
.form-control,
.form-select,
.form-label,
.input-group-text {
  font-size: 1rem;
}

.lead,
.blockquote {
  font-size: 1.25rem;
}

/*
 * Buttons ship as display:inline-block, so the leading <i class="ti ..."></i>
 * baseline-aligns to the text — visibly low at body 16px because Tabler's
 * 1.25rem fixed line-height + larger font-size diverges from the icon glyph.
 * inline-flex + align-items:center keeps icon and text on a centerline at
 * any font-size. Existing me-1 / ms-1 margins on icons continue to work.
 */
.btn {
  display: inline-flex;
  align-items: center;
}
/*
 * Tabler icons (.ti) ship with line-height: 1, so when paired with
 * text inside any container (line-height: 1.5 typically), the icon's
 * box is shorter than the text's box — flex/inline centering then
 * shows the glyph visually high vs. the text. Inheriting the parent's
 * line-height makes the icon box match the text box, so they actually
 * center on the same optical line. Explicit sizers (.ti-size-md/lg/xl
 * defined below) still win via source order.
 */
.ti {
  line-height: inherit;
}

/*
 * .nav-link-icon spans wrap a Tabler icon next to the title text and
 * baseline-align by default — the icon glyph then sits below the cap
 * height of the title. Centering the icon inside its container + aligning
 * the container against text-middle produces the expected inline pairing
 * for both horizontal navbars (top nav, Reserve Fund subnav) and dropdown
 * menus. Doesn't affect the sidebar (already handled separately under
 * .navbar-vertical) or any nav-link's block-level layout.
 */
.nav-link-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
}

/*
 * Avatar circles ship as inline-block with vertical-align:baseline, which
 * puts the badge's bottom edge on the text baseline — visually low next
 * to body 16px text. Centering against the text x-height matches what the
 * eye expects.
 */
.avatar {
  vertical-align: middle;
}

/*
 * Inset divider with a center label — used as a soft tier transition
 * inside cards (e.g. "Today" between Decisions and Tasks on the home
 * "What's on your plate" card). Quieter than a full uppercase header,
 * stronger than nothing. Pattern: horizontal rules on either side of
 * a small sentence-case label, separated by gap.
 */
.home-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 1rem 8px;
}
.home-section-divider::before,
.home-section-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--tblr-border-color);
}
.home-section-divider-label {
  color: var(--tblr-secondary-color);
  font-weight: 500;
  font-size: var(--tblr-font-size-sm);
}

/* Sidebar nav rows are display:flex (Tabler default) — the global
   .nav-link-icon rule above handles icon alignment for both this and
   the horizontal navbars. Keep align-items:center on the .nav-link
   itself so the title vertically centers in the row. */
.navbar-vertical .nav-link {
  align-items: center;
}

/* Fix page outer gaps — matches shell used with sidebar + top bar layout */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reserve the vertical scrollbar gutter at all times so opening a modal
   (which sets `body { overflow: hidden }`) doesn't shift page content
   ~15px to the right. This sidesteps Bootstrap's runtime padding-right
   compensation, which is broken here because `body { padding: 0 !important }`
   above wins over Bootstrap's inline style. */
html {
  scrollbar-gutter: stable;
}

.page {
  margin: 0 !important;
  padding: 0 !important;
}

/* Sidebar and top bar alignment */
.navbar-vertical {
  top: 0 !important;
}

.page > .navbar:not(.navbar-vertical) {
  margin-top: 0 !important;
  top: 0 !important;
}

/* Sticky offsets for the Reserve Fund chrome stack (subnav + draft
   alert + recommendations banner + sidebar). Two axes of variation:

     Scroll container:
       Default          → body scrolls; offsets skip past the sticky
                          top nav (one navbar-height).
       Co-pilot open    → page-wrapper scrolls; page-wrapper already
                          starts BELOW the top nav, so offsets inside
                          it are reduced by one navbar-height.

     Draft alert presence:
       No alert         → 4 layers (top nav, subnav, banner, sidebar).
       Draft alert      → 5 layers — banner + sidebar shift down by
                          the alert height.

   We derive every offset from Tabler's --tblr-navbar-min-height
   (3.5rem = 56px by default) so a future theme tweak that changes
   navbar height automatically restacks everything correctly. */
:root {
  --rf-nav-h:     var(--tblr-navbar-min-height, 3.5rem);
  --rf-alert-h:   39px;
  --rf-banner-h:  50px;

  --rf-subnav-top:  var(--rf-nav-h);
  --rf-alert-top:   calc(2 * var(--rf-nav-h));
  --rf-banner-top:  calc(2 * var(--rf-nav-h));
  --rf-sidebar-top: calc(2 * var(--rf-nav-h) + var(--rf-banner-h));
  --rf-sidebar-h-deduction: calc(2 * var(--rf-nav-h) + var(--rf-banner-h));
}
body.draft-mode {
  --rf-banner-top:  calc(2 * var(--rf-nav-h) + var(--rf-alert-h));
  --rf-sidebar-top: calc(2 * var(--rf-nav-h) + var(--rf-alert-h) + var(--rf-banner-h));
  --rf-sidebar-h-deduction: calc(2 * var(--rf-nav-h) + var(--rf-alert-h) + var(--rf-banner-h));
}
body.copilot-sidebar-open {
  --rf-subnav-top:  0px;
  --rf-alert-top:   var(--rf-nav-h);
  --rf-banner-top:  var(--rf-nav-h);
  --rf-sidebar-top: calc(var(--rf-nav-h) + var(--rf-banner-h));
}
body.copilot-sidebar-open.draft-mode {
  --rf-banner-top:  calc(var(--rf-nav-h) + var(--rf-alert-h));
  --rf-sidebar-top: calc(var(--rf-nav-h) + var(--rf-alert-h) + var(--rf-banner-h));
}

/* Vertical sidebar: avoid reserved scrollbar gutter + hide scrollbar while keeping scroll */
.navbar-vertical {
  padding-right: 0 !important;
  scrollbar-gutter: stable;
}

.navbar-vertical::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.navbar-vertical {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.navbar-vertical .container-fluid,
.navbar-vertical .navbar-nav,
.navbar-vertical .navbar-nav .nav-link,
.navbar-vertical .navbar-collapse {
  padding-right: 0 !important;
}

/* Dropdown-toggle nav-links need right padding so the caret has room and
   doesn't sit on the edge — overrides the rule above. */
.navbar-vertical .navbar-nav .nav-link.dropdown-toggle {
  padding-right: 1.25rem !important;
}

/* Top horizontal header: full width, stable inner padding without stray
   left gutter. position: sticky pins it to the viewport top globally so
   the search / Create / avatar strip stays accessible while scrolling.
   z-index: 1010 sits above page content but below the Co-pilot sidebar
   (1020) and Bootstrap modals (1055). The existing `top: 0 !important`
   in the earlier rule (line ~148) gives sticky its anchor offset. */
.page > .navbar:not(.navbar-vertical) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: sticky;
  z-index: 1010;
}

.page > .navbar:not(.navbar-vertical)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tblr-bg-surface);
  z-index: -1;
}

.page > .navbar:not(.navbar-vertical) .container-xl {
  max-width: none !important;
  width: 100% !important;
  --bs-gutter-x: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page > .navbar:not(.navbar-vertical) .navbar-collapse {
  flex-grow: 1 !important;
}

/*
 * Page banner — hero image with title overlay.
 *
 * Bootstrap's .ratio absolutely-positions direct children to fill the box,
 * so the overlay needs to be a flex container that anchors its child to the
 * bottom-left. Without this the <h2> flows from the top-left of the banner.
 */
.page-banner {
  overflow: hidden;
  margin-bottom: 1rem;
  min-height: 140px;
}

.page-banner-overlay {
  display: flex;
  align-items: flex-end;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(
    to bottom,
    rgba(24, 36, 51, 0) 0%,
    rgba(24, 36, 51, 0) 40%,
    rgba(24, 36, 51, 0.65) 100%
  );
}

.page-banner-title {
  color: #fff;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
}

/* Document upload dropzone (Log Update modal). */
.doc-dropzone {
  border: 2px dashed #94a3b8;
  border-radius: 10px;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.1s ease, background-color 0.1s ease;
  background: #f1f5f9;
}
.doc-dropzone:hover {
  border-color: #16a34a;
  background: #f0fdf4;
}
.doc-dropzone.is-active {
  border-color: #15803d;
  background: #dcfce7;
  border-style: solid;
}
.doc-dropzone-icon {
  font-size: 2.75rem;
  color: #64748b;
  display: block;
  margin-bottom: 0.5rem;
  line-height: 1;
}
.doc-dropzone-text {
  font-size: 1rem;
  font-weight: 500;
  color: #182433;
}
.doc-dropzone .form-hint {
  margin-top: 0.25rem;
}

/* Compact state — kicks in once at least one file has been added. */
.doc-dropzone-compact {
  padding: 0.5rem 1rem;
}
.doc-dropzone-compact .doc-dropzone-icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.25rem;
  margin-bottom: 0;
  margin-right: 0.5rem;
}
.doc-dropzone-compact .doc-dropzone-text {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--tblr-font-size-sm);
}
.doc-dropzone-compact .form-hint {
  display: none;
}

/* Per-file card thumbnail slot: 40px square. */
.doc-card-thumb {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #f1f5f9;
  overflow: hidden;
}
.doc-card-icon {
  font-size: 1.5rem;
  color: #64748b;
}
.doc-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tribute.js (@mention autocomplete). White panel; two-line items
   (name + email). Hover/highlight uses the same subtle tint as
   Tom Select. */
.tribute-container {
  color: var(--bs-body-color);
  background-color: #fff;
  margin-top: 0.125rem;
  border: 1px solid var(--bs-border-color, #e6e7e9);
  border-radius: var(--bs-border-radius, 6px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  min-width: 240px;
  max-width: 340px;
  font-size: var(--tblr-font-size-sm);
  z-index: 1080;
}
.tribute-container ul {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  max-height: 280px;
  overflow-y: auto;
  background-color: #fff;
}
.tribute-container li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  color: var(--bs-body-color);
}
.tribute-container li.highlight,
.tribute-container li:hover {
  background-color: var(--bs-primary-bg-subtle, #f0f6ff);
}
.tribute-container .tribute-name {
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-body-color);
}
.tribute-container .tribute-email {
  font-size: var(--tblr-font-size-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--bs-secondary-color, #66758c);
}
.tribute-container .tribute-role {
  font-weight: 400;
  color: var(--bs-secondary-color, #66758c);
  margin-left: 0.25rem;
}
.tribute-container li.no-matches {
  display: none;
}

/* ─── Inline-style cleanup utilities (PR 16) ─────────────────────── */

/* Sidebar section labels (Operations, Finances, Administration) in
   the vertical navbar. Tightens letter-spacing for the small
   uppercase text and disables interaction since they're pure
   captions, not links. Replaces three verbatim copies of
   `style="letter-spacing: 0.05em; pointer-events: none;"`. */
.sidebar-section-label {
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* Chart-legend swatch shapes. Color is set per-instance via inline
   ``background:#XXX`` (legitimate — varies per chart series), but the
   geometry lives here so every legend in the app looks the same. */
.legend-swatch {
  display: inline-block;
  width: 10px;
}
.legend-swatch--dot    { height: 10px; border-radius: 50%; }
.legend-swatch--square { height: 10px; border-radius: 2px; }
.legend-swatch--bar    { height: 3px;  border-radius: 2px; }

/* Fixed-width table columns. Bootstrap doesn't ship pixel widths;
   these classes replace the repeated `<th style="width: Npx">`
   pattern so every "Actions" column / narrow status column is the
   same width and we only tune in one place. */
.tbl-col-actions { width: 80px; }
.tbl-col-narrow  { width: 110px; }

/* Tabler font-icons size via font-size; these utilities give
   consistent project icon sizes without inline styles. Apply alongside
   `.ti` (the Tabler icon base class). Naming is in t-shirt sizes
   matching Bootstrap's spacing-utility convention. */
.ti-size-md  { font-size: 1.5rem;  line-height: 1; }   /* 24px */
.ti-size-lg  { font-size: 1.75rem; line-height: 1; }   /* 28px */
.ti-size-xl  { font-size: 2rem;    line-height: 1; }   /* 32px */
.ti-size-2xl { font-size: 2.5rem;  line-height: 1; }   /* 40px */
.ti-size-3xl { font-size: 3rem;    line-height: 1; }   /* 48px */


/* Extra breathing room between modal title and the close button. */
.modal-header .modal-title {
    padding-right: 3px;
}