:root {
    --bg: #eef2f7;
    --panel: #ffffff;
    --border: #d8e0ea;
    --text: #1f2937;
    --muted: #667085;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --success: #047857;
    --warning: #b45309;
    --danger: #b42318;

    /* Result list */
    --results-bg: #f7f9fc;
    --row-bg: #ffffff;
    --row-border: #e8edf3;
    --row-hover: #f2f7ff;
    --row-selected: #e4efff;
    --title-fg: #111827;
    --meta-fg: #94a3b8;

    --toast-bg: #ffffff;
    --toast-fg: #0f172a;
    --preview-bg: #dfe6ee;
    --highlight-bg: #fff4a8;
    --highlight-fg: inherit;

    --accent: #0d6efd;
    --accent-fg: #ffffff;
    --accent-soft: rgba(13, 110, 253, 0.28);
    --control-bg: #ffffff;
    --control-fg: #1f2937;

    /* Width of the result pane. Set by the splitter and persisted in localStorage;
       the value here is only the default for a browser that has never seen it. */
    --split: 42%;
}

/*
 * Dark mode follows the operating system. There is no in-app toggle, deliberately --
 * this is a tool people keep open beside other windows all day, and the useful
 * behaviour is to match whatever those windows are doing.
 *
 * Only the tokens are redefined. Every rule below reads them, so nothing else in this
 * file needs a dark variant.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f172a;
        --panel: #1b2537;
        --border: #2e3c53;
        --text: #e2e8f0;
        --muted: #94a3b8;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        --success: #34d399;
        --warning: #fbbf24;
        --danger: #f87171;

        --results-bg: #141d2c;
        --row-bg: #1b2537;
        --row-border: #2a3549;
        --row-hover: #24314a;
        --row-selected: #1e3a5f;
        --title-fg: #f1f5f9;
        --meta-fg: #7c8aa0;

        --toast-bg: #1b2537;
        --toast-fg: #e2e8f0;
        --preview-bg: #0b1220;
        --highlight-bg: #7a5d00;
        --highlight-fg: #fff3b0;

        --accent: #4d94ff;
        --accent-fg: #08111f;
        --accent-soft: rgba(77, 148, 255, 0.35);
        --control-bg: #16202f;
        --control-fg: #e2e8f0;
    }
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    padding: 0;
}

#app {
    display: grid;
    grid-template-columns: var(--split) 6px auto;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--bg);
    border-right: 1px solid var(--border);
}

#header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

/*
 * Sized for the pane, not for the page. The result list is the narrow half of a split
 * layout and the header shares its width with four controls, so a 2rem title wrapped
 * onto two lines and pushed "Log out" onto a row of its own at any ordinary laptop
 * width. This is a tool people keep open, not a landing page.
 */
.header-copy h1 {
    margin: 0 0 2px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.header-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#searchPanel {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 16px 22px 14px;
    flex: 0 0 auto;
}

.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(150px, 0.9fr) minmax(170px, 0.9fr);
    gap: 12px;
}

.search-field {
    min-width: 0;
}

.search-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.92rem;
    font-weight: 600;
}

.search-wrap {
    position: relative;
}

.search-wrap #search {
    padding-right: 68px;
}

#search {
    height: 46px;
    font-size: 1rem;
}

.search-spinner {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    border: 2px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.search-spinner.is-on {
    display: inline-block;
}

@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

#resultSummary {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.94rem;
}

#results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--results-bg);
    padding: 0;
}

.result-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--row-border);
    background: var(--row-bg);
    color: var(--text);
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
}

/* A PDF row wraps a button and an open-in-new-tab link, so the padding moves inside. */
.result-row-pdf {
    padding: 0;
    align-items: stretch;
    gap: 0;
}

.result-row:last-child {
    border-bottom: 0;
}

.result-row-action {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px 14px 18px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.result-row-action:hover {
    background: var(--row-hover);
}

.result-row-action:focus {
    outline: 2px solid rgba(13, 110, 253, 0.28);
    outline-offset: -2px;
}

/*
 * The keyboard selection. Distinct from :hover and from :focus, because arrowing
 * through the list moves the selection without moving focus off the search box -- so
 * the row the preview is showing has to be identifiable on its own.
 */
.result-row-action.is-selected {
    background: var(--row-selected);
    box-shadow: inset 3px 0 0 #3b82f6;
}

.result-open {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--meta-fg);
    text-decoration: none;
    font-size: 1rem;
    border-left: 1px solid transparent;
}

.result-edit {
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid transparent;
    background: transparent;
    color: var(--meta-fg);
    padding: 0 14px;
    font-size: 1rem;
    cursor: pointer;
}

.result-edit:hover,
.result-edit:focus {
    color: #3b82f6;
    background: var(--row-hover);
    border-left-color: var(--row-border);
}

.result-open:hover,
.result-open:focus {
    color: #3b82f6;
    background: var(--row-hover);
    border-left-color: var(--row-border);
    text-decoration: none;
}

.result-main {
    min-width: 0;
    flex: 1;
}

.result-title {
    font-weight: 700;
    color: var(--title-fg);
    margin-bottom: 6px;
    word-break: break-word;
    line-height: 1.35;
}

.result-snippet {
    color: var(--muted);
    font-size: 0.92rem;
    word-break: break-word;
    line-height: 1.45;
}

.result-meta {
    white-space: nowrap;
    color: var(--meta-fg);
    font-size: 0.82rem;
}

.empty-state {
    padding: 24px 18px;
    color: var(--muted);
}

.empty-state p {
    margin: 0 0 10px;
}

/* The explanation of why a content search can come back empty on older years. */
.empty-state-note {
    max-width: 52ch;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Search-term highlighting inside a file name. */
#results mark {
    background: var(--highlight-bg);
    color: var(--highlight-fg);
    border-radius: 4px;
    padding: 0 2px;
}

.is-hidden {
    display: none !important;
}

/*
 * Clear button in the search box. It sits left of the spinner so the two never
 * collide -- a search in flight shows both.
 */
.search-clear {
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.search-clear:hover {
    color: var(--text);
}

#right {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: var(--preview-bg);
}

/*
 * While the splitter is being dragged the pointer regularly ends up over the iframe,
 * which swallows mousemove -- the drag would stick after the first few pixels. Taking
 * the iframe out of hit-testing for the duration is the standard fix.
 */
body.is-splitting {
    user-select: none;
    cursor: col-resize;
}

body.is-splitting #right {
    pointer-events: none;
}

#splitter {
    background: var(--border);
    cursor: col-resize;
    border: 0;
    padding: 0;
}

#splitter:hover,
#splitter:focus {
    background: #3b82f6;
    outline: none;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--panel);
}

.status-pill.is-ok {
    color: var(--success);
    border-color: rgba(4, 120, 87, 0.18);
    background: rgba(4, 120, 87, 0.08);
}

.status-pill.is-warning {
    color: var(--warning);
    border-color: rgba(180, 83, 9, 0.18);
    background: rgba(180, 83, 9, 0.08);
}

.pcnhlmtch {
    background: var(--highlight-bg);
    color: var(--highlight-fg);
    border-radius: 4px;
    padding: 0 2px;
}

.pcn-badge {
    display: inline-block;
    min-width: 36px;
    text-align: center;
    padding: 2px 6px;
    margin-right: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    vertical-align: middle;
}

.pcn-badge-ns { background: #ff2d55; }
.pcn-badge-pre { background: #00a86b; }

.link-nosales {
    background: rgba(255, 45, 85, 0.08);
}

.link-paymentrequired {
    background: rgba(0, 168, 107, 0.08);
}

.toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(100vw - 36px));
}

.app-toast {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
    border: 1px solid transparent;
    background: var(--toast-bg);
}

.app-toast-info { border-color: rgba(13, 110, 253, 0.18); }
.app-toast-success { border-color: rgba(4, 120, 87, 0.18); }
.app-toast-warning { border-color: rgba(180, 83, 9, 0.2); }
.app-toast-error { border-color: rgba(180, 35, 24, 0.2); }

.app-toast-body {
    font-size: 0.92rem;
    color: var(--toast-fg);
}

.app-toast-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   The edit-document window
   --------------------------------------------------------------------------- */

#fileModal {
    position: fixed;
    inset: 0;
    z-index: 4000;
}

#fileModal.is-hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
}

.modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 22px;
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 8px;
    border: 0;
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}

.modal-dialog h2 {
    margin: 0 0 4px;
    font-size: 1.3rem;
}

.modal-subtitle {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.9rem;
    word-break: break-word;
}

/* Each action is separated, because they are independent and only one may be used. */
.modal-section {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 14px;
}

.modal-section h3 {
    margin: 0 0 10px;
    font-size: 0.98rem;
    font-weight: 600;
}

.modal-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.modal-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-note {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.modal-section-danger h3 {
    color: var(--danger);
}

/* ---------------------------------------------------------------------------
   Admin screens
   --------------------------------------------------------------------------- */

.role-legend {
    margin: 0;
}

.role-legend dt {
    font-weight: 600;
    margin-top: 8px;
}

.role-legend dd {
    margin: 0 0 4px;
    color: var(--muted);
}

.inline-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-right: 6px;
}

/*
 * The sign-in page.
 *
 * It replaces a modal that used to sit over the search interface, so the card keeps the
 * dialog's proportions -- same width, radius and shadow -- and the page it is centred on
 * inherits the app background. Nothing here scrolls: the form is four controls tall and
 * `html, body` are already `overflow: hidden` for the search layout's sake.
 */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: min(420px, 100%);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 28px;
}

.login-card h1 {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.login-subtitle {
    margin: 0 0 16px;
    color: var(--muted);
}

.inline-message {
    margin-top: 12px;
    min-height: 1.25rem;
    font-size: 0.92rem;
}

.inline-message.is-info { color: var(--muted); }
.inline-message.is-success { color: var(--success); }
.inline-message.is-error { color: var(--danger); }

@media (max-width: 1100px) {
    .search-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    #app {
        grid-template-columns: 1fr;
        grid-template-rows: 52% 48%;
    }

    /*
     * The panes stack here, but the splitter resizes on the horizontal axis
     * (clientX / innerWidth). Rather than ship a control that does the wrong thing at
     * this width, it goes away and the split returns to its fixed proportions.
     */
    #splitter {
        display: none;
    }

    #left {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .header-copy h1 {
        font-size: 1.65rem;
    }
}

/* ---------------------------------------------------------------------------
   Missing OCR report
   ---------------------------------------------------------------------------
   A standalone scrolling page, unlike the search view. The base rule sets
   overflow: hidden on html/body to keep the two-pane app layout fixed, so the
   report has to opt back into scrolling.
   --------------------------------------------------------------------------- */

body.report-page,
html:has(body.report-page) {
    height: auto;
    overflow: auto;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.report-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.report-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.report-header h1 {
    margin: 0;
    font-size: 22px;
}

.report-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.report-actions {
    display: flex;
    gap: 8px;
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.summary-tile {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-value {
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.summary-label {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
}

.report-wrap h2 {
    font-size: 16px;
    margin: 0 0 10px;
}

.filter-note {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

/* Wide tables scroll in their own container rather than pushing the page sideways. */
.table-scroll {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-bottom: 28px;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.report-table th,
.report-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.report-table th {
    background: #f7f9fc;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.report-table tr:last-child td {
    border-bottom: none;
}

.report-table .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The filename is the one column allowed to be long, so it truncates instead of
   forcing every other column off-screen. The full relative path is in title. */
.report-table .path-cell {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-missing {
    background: #fee2e2;
    color: #991b1b;
}

.status-blank {
    background: #fef3c7;
    color: var(--warning);
}

/* ---------------------------------------------------------------------------
   Admin screens (restricted-customer lists, administrators)
   --------------------------------------------------------------------------- */

.admin-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-bottom: 24px;
}

.admin-panel > h2 {
    margin-top: 0;
}

.admin-panel .table-scroll {
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.admin-notice {
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    border: 1px solid transparent;
}

.admin-notice-ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: var(--success);
}

.admin-notice-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.admin-notice ul {
    margin: 0;
    padding-left: 18px;
}

.admin-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
    align-items: start;
}

.admin-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Name and reason need the full width; the list selector does not. */
.admin-form-row-wide {
    grid-column: 1 / -1;
}

.admin-form-row label {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.admin-form-row small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.admin-form-row .optional {
    font-weight: 400;
    color: var(--muted);
}

.admin-form-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.admin-static {
    margin: 0;
    font-size: 13px;
    padding: 6px 0;
}

.admin-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.admin-filter input[type="search"] {
    max-width: 420px;
}

/* Clickable summary tiles double as the list filter. */
.summary-tile-link {
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, transform 120ms ease;
}

.summary-tile-link:hover {
    text-decoration: none;
    color: inherit;
    border-color: #94a3b8;
}

.summary-tile-link.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15), var(--shadow);
}

/* Buttons sit side by side without the surrounding forms stacking them. */
.row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

.row-actions form {
    margin: 0;
}

.status-ok {
    background: #ecfdf5;
    color: var(--success);
}

.muted {
    color: var(--muted);
}

.report-table .path-cell.muted {
    font-size: 12px;
}


/* ---------------------------------------------------------------------------
   Controls
   ---------------------------------------------------------------------------
   Buttons, form controls and pagination, replacing Bootstrap 4.

   Bootstrap was 162 KB of stylesheet serving these three things and nothing else --
   the app never used its grid, its utilities, its components or its JavaScript. It
   was also light-only, so every control needed a second definition inside the
   dark-mode block to stop it painting white inputs onto a dark page. Written against
   this file's own tokens instead, dark mode falls out for free and there is one
   styling system rather than two.

   The class names are kept (.btn, .form-control, .page-link) because Laravel's
   Bootstrap-4 paginator view emits them, and because keeping them meant no markup
   in any view or in script.js had to change.
   --------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: inherit;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 1px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: default;
}

.btn-sm {
    padding: 4px 9px;
    font-size: 0.86rem;
    border-radius: 5px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.btn-primary:hover {
    filter: brightness(0.94);
    color: var(--accent-fg);
}

.btn-outline-secondary {
    border-color: var(--border);
    color: var(--text);
    background: var(--panel);
}

.btn-outline-secondary:hover {
    background: var(--row-hover);
    color: var(--text);
}

/* The admin nav marks the screen you are on. */
.btn-outline-secondary.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.btn-outline-danger {
    border-color: #d9534f;
    color: #d9534f;
    background: var(--panel);
}

.btn-outline-danger:hover {
    background: #d9534f;
    color: #fff;
}

.btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--accent);
    padding: 0;
}

.btn-link:hover {
    text-decoration: underline;
}

.form-control {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    padding: 6px 12px;
    color: var(--control-fg);
    background-color: var(--control-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-control::placeholder {
    color: var(--muted);
}

/* A select keeps its native arrow -- drawing one would mean a second thing to theme. */
select.form-control {
    height: 38px;
}

.form-group {
    margin-bottom: 14px;
}

.form-check {
    position: relative;
    display: block;
    padding-left: 22px;
}

.form-check-input {
    position: absolute;
    margin-top: 4px;
    margin-left: -22px;
    accent-color: var(--accent);
}

.form-check-label {
    margin-bottom: 0;
}

/*
 * Pagination, as emitted by Laravel's Bootstrap-4 paginator view.
 *
 * Its previous/next controls are text glyphs, which is why the paginator is pinned to
 * that view: the default (Tailwind) one uses inline SVGs sized by utility classes that
 * do not exist here, and they rendered several times taller than the row of page links.
 */
.pagination {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.page-link {
    position: relative;
    display: block;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--accent);
    background: var(--panel);
    border: 1px solid var(--border);
    text-decoration: none;
}

.page-link:hover {
    background: var(--row-hover);
    text-decoration: none;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.page-item:last-child .page-link {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.page-item.active .page-link {
    z-index: 1;
    color: var(--accent-fg);
    background: var(--accent);
    border-color: var(--accent);
}

.page-item.disabled .page-link {
    color: var(--muted);
    pointer-events: none;
    background: var(--panel);
}