/* CREW — minimal custom styling on top of Bootstrap defaults */

/* Sticky footer: without this, the footer sits right after the page content
   instead of anchored to the bottom of the viewport on any page shorter than
   the screen (most of them) — it looked like it was floating "in the middle". */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .container-fluid.px-4 { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }

/* "Back to top" button: fixed bottom-right, hidden until scrolled down (crew.js toggles .show). */
#backToTop {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
    width: 3rem; height: 3rem; border-radius: 50%; border: none;
    background: #0d6efd; color: #fff; font-size: 1.3rem; line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: #0b5ed7; }

/* Nudge the footer's Support/Documentation/Request links left so #backToTop (fixed
   bottom-right, 3rem wide) doesn't sit on top of "Request" when both are visible. */
.footer-links { margin-right: 4rem; }

/* Bold field labels on every form (Master Prompt request, 2026-09-07) — one shared
   Bootstrap class, so this applies app-wide without touching each form's markup. */
.form-label { font-weight: 600; }

/* Admin list tables: the trailing Edit-button column shouldn't stretch to fill the row's
   leftover width (Bootstrap tables grow the last column) — shrink it to its content so
   the button sits close to the row's other data instead of floating in a wide gutter. */
.table .col-actions { width: 1%; white-space: nowrap; }

.honeypot-field { position: absolute; left: -9999px; top: -9999px; }
.readiness-pill { display: inline-block; padding: .25em .6em; border-radius: 1em; font-size: .85em; }
.readiness-pill.ready { background: #d1e7dd; color: #0f5132; }
.readiness-pill.pending { background: #f8d7da; color: #842029; }
.status-badge { text-transform: uppercase; letter-spacing: .03em; }

/* Organization chart (2026-09-07, hybrid layout since 2026-09-07): only the site manager's
   direct reports (N-1) spread out horizontally as columns, side by side, wrapping onto new
   rows as needed — this is the one level that benefits from using the page's width. Inside
   each column, that manager's own downline (N-2, N-3...) stays a vertical indented tree
   (file-explorer style), since a manager with 20-30 reports would make a purely horizontal
   layout absurdly wide, and repeating the horizontal split at every level would get equally
   unreadable on a 5-level-deep org. */
.org-hybrid-wrapper { padding-bottom: 1rem; text-align: center; }
.org-root-box {
    display: inline-block; position: relative; margin-bottom: 1.5rem; padding: .5rem 1.25rem;
    border: 2px solid #0d6efd; border-radius: 6px; background: #eaf2ff; font-weight: 600;
}
.org-root-box a { text-decoration: none; color: inherit; }
.org-root-box::after {
    content: ''; position: absolute; left: 50%; bottom: -1.5rem; width: 1px; height: 1.5rem; background: #adb5bd;
}
.org-columns {
    display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;
    text-align: left; border-top: 1px solid #adb5bd; padding-top: 1.5rem;
}
.org-column {
    flex: 1 1 240px; max-width: 320px; min-width: 200px; position: relative;
    background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: .75rem;
    overflow-x: auto; /* safety net if a branch nests deep enough to outgrow the column width */
}
.org-column::before {
    content: ''; position: absolute; top: -1.5rem; left: 50%; width: 1px; height: 1.5rem; background: #adb5bd;
}
.org-column-header { font-weight: 600; margin-bottom: .5rem; padding-bottom: .35rem; border-bottom: 1px solid #dee2e6; }
.org-column-header a { text-decoration: none; color: #0d6efd; }

/* The vertical indented tree used inside each column (and, unchanged, for the orphans list). */
.org-tree-list { list-style: none; margin: 0; padding-left: 1.25rem; }
.org-tree-list.org-tree-root { padding-left: 0; }
.org-tree-list li { position: relative; padding: .2rem 0 .2rem .5rem; }
.org-tree-list .org-tree-list { border-left: 1px solid #ced4da; }
.org-tree-list li::before {
    content: ''; position: absolute; top: 1.1rem; left: -.85rem; width: .65rem; height: 1px; background: #ced4da;
}
.org-tree-root > li::before { display: none; }
.org-name { font-size: .9rem; white-space: nowrap; }
.org-name a { text-decoration: none; color: inherit; }
.org-name-manager { font-weight: 600; }
.org-name-manager a { color: #0d6efd; }
.org-count { font-size: .8rem; font-weight: normal; margin-left: .25rem; }
.org-orphan-list { list-style: none; margin: 0; padding: 0; }
.org-orphan-list li { padding: .15rem 0; }

@media print {
    nav.navbar, body > footer, .no-print { display: none !important; }
    .org-hybrid-wrapper { overflow: visible; }
    .org-column { break-inside: avoid; overflow-x: visible; }
    .org-tree-list li { break-inside: avoid; }
}