/* ==========================================================================
   Document review modal — status banners
   --------------------------------------------------------------------------
   Solid, high-contrast bars instead of Bootstrap's pastel .alert-* tints. A pastel
   alert puts dark text on a 10%-opacity wash of its own colour, which is close enough
   to white to read as background rather than as a message — on the one screen where
   the banner IS the instruction ("this document needs the school's signature"), that
   is the wrong end of the contrast scale.
   Colours are the app's own: the navy of the brand button (--bit-brand-primary-*) and
   the dark green of the checkout button family (components/checkout-button.css).
   These live in a stylesheet rather than in a <style> block inside the modal template
   because that modal is delivered as a turbo-stream, where inline <style> is not
   reliably applied — the same reason its datepicker rules live in _datepicker.css.
   ========================================================================== */

.rev-banner {
    border: 0;
    border-radius: 10px;
    color: #fff;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}

/* Something is being asked of the reviewer */
.rev-banner-action {
    background: linear-gradient(135deg, var(--bit-brand-primary-from, #2674a6), var(--bit-brand-primary-to, #112a54));
}

/* Done, but not finished — the school has signed and approval is still owed */
.rev-banner-done {
    background: linear-gradient(135deg, #16a34a, #1e4d2d);
}

/* A file that cannot be previewed, and a missing file: quieter than the two above,
   still solid rather than a wash. */
.rev-banner-note {
    background: #334155;
}
.rev-banner-warn {
    background: linear-gradient(135deg, #b45309, #7c3d06);
}

.rev-banner strong { font-weight: 700; }
.rev-banner a,
.rev-banner .alert-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* A button sitting on a solid banner reads better as its inverse than as another
   saturated block of colour. */
.rev-banner .btn-success {
    background: #fff !important;
    border-color: #fff !important;
    color: #14532d !important;
}
.rev-banner .btn-success:hover,
.rev-banner .btn-success:focus {
    background: #eafaf0 !important;
    border-color: #eafaf0 !important;
    color: #14532d !important;
}

/* ==========================================================================
   Documents awaiting review — the dashboard tile's list
   The queue is as long as the day's paperwork, so the list scrolls instead of running
   off the panel. The header stays put, because by row fifteen "Student / Date /
   Document / Status" is the only thing telling you what you are looking at.
   ========================================================================== */
.doc-review-scroll {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}
.doc-review-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
}
/* striped rows would otherwise show through the pinned header as it scrolls under it */
.doc-review-scroll .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: #fbfcfd;
}

/* ==========================================================================
   Review modal layout — document left, actions right, nothing scrolls but the page
   image. Stacked vertically (the old layout) the approve button and the rejection box
   lived below a full-height page render, so acting on a document meant scrolling down,
   scrolling back up to check what you were approving, and down again.
   ========================================================================== */

/* one-line header: title takes the room, badge and close button hold the right edge */
.modal-header.rev-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.modal-header.rev-header .modal-title {
    flex: 1 1 auto;
    min-width: 0;          /* lets text-truncate actually truncate inside a flex item */
    font-size: 1rem;
}
.modal-header.rev-header .rev-header-badge {
    flex: 0 0 auto;
    /* clear of the close button, which the shell places immediately after it */
    margin-right: .25rem;
}
.modal-header.rev-header .btn-close { flex: 0 0 auto; margin: 0; }

.rev-layout {
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.rev-doc {
    flex: 1 1 auto;
    min-width: 0;
    max-height: calc(100vh - 210px);
    overflow: auto;
}
/* The page image inside sizes itself to the viewport; that rule lives in the template
   and is left alone — this container just gives it somewhere to scroll. */
.rev-side {
    flex: 0 0 340px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* a very long banner + date list can still exceed the modal; scroll the PANEL
       rather than the whole modal, so the document stays put beside it */
    max-height: calc(100vh - 210px);
    overflow: auto;
}
.rev-side .rev-banner { margin-bottom: 0 !important; }
.rev-side .rev-banner .btn { width: 100%; }

/* Buttons stack; Approve is last so it is furthest from Disapprove — the same
   "never neighbours" rule the horizontal bar used me-auto for. */
.rev-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;      /* pin to the bottom of the panel when there is room */
    padding-top: 4px;
}
.rev-actions-reject,
.rev-actions-approve {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rev-actions .btn { width: 100%; }
.rev-actions .completion-date-field { width: 100%; }

/* Disapprove lives inside the rejection box, under the reason it requires. Full width
   like every other button in this panel, so moving it out of the action bar doesn't
   make it read as a different class of control. */
.rev-side .rev-reject-box .btn { width: 100%; }

/* Narrow screens: the panel goes back under the document rather than squeezing both. */
@media (max-width: 991.98px) {
    .rev-layout { flex-direction: column; }
    .rev-doc,
    .rev-side { max-height: none; flex: 1 1 auto; max-width: none; }
    .rev-actions { margin-top: 0; }
}