/*
 * Local additions to the Jidox theme (assets/jidox, loaded first). Style
 * pages with the theme's Bootstrap 5 classes; put only what it lacks here.
 */

/* Text brand in place of the theme's logo images. */
.brand { font-weight: 600; font-size: 1.05rem; white-space: nowrap; text-decoration: none; }
.leftside-menu .brand { color: var(--ct-menu-item-active-color); }
.logo-topbar .brand { color: var(--ct-body-color); }
/* The county logo (public/logo.png) has a transparent background and dark lettering:
   on a white tile it reads on the dark menu and the blue sign-in header alike. */
.brand-logo { height: 36px; width: auto; padding: 2px 3px; background: #fff; border-radius: 6px; vertical-align: middle; margin-right: .35rem; }
.leftside-menu .logo-lg .brand-logo { height: 44px; }
.logo .logo-sm .brand-logo { margin-right: 0; }
.brand-logo-lg { height: 72px; padding: 4px 6px; border-radius: 10px; margin-right: 0; }

/* Top bar: buttons styled like the theme's icon links, and the user's initial as avatar. */
.topbar-menu button.nav-link { background: none; border: 0; }
.button-toggle-menu { background: none; border: 0; }
.user-initial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ct-primary-bg-subtle); color: var(--ct-primary);
    font-weight: 600;
}

/* The page title is the page's h1; keep the theme's h4-sized look. */
.page-title-box h1.page-title { font-size: 18px; }

/* Sign-in card header */
.auth-brand { line-height: 1.4; }

/* Signed-out pages: the theme's dark-blue backdrop (its demo pages draw it with an inline SVG). */
body.authentication-bg { min-height: 100vh; background: linear-gradient(135deg, #0e2a47 0%, #00459e 100%) fixed; }

/* Text typed by applicants (remarks, explanations): keep their line breaks. */
.prewrap { white-space: pre-wrap; }

/* Printing a page (e.g. an applicant profile): content only. */
@media print {
    .leftside-menu, .navbar-custom, .footer, .no-print, .btn { display: none !important; }
    .content-page { margin-left: 0 !important; padding: 0 !important; }
    .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
    .print-only { display: block !important; }
    /* Report tables run over pages, repeating their column headings. */
    .report-table { break-inside: auto; }
    .report-table .table-responsive { overflow: visible; }
    .report-table thead { display: table-header-group; }
    .report-table tr { break-inside: avoid; }
}
.print-only { display: none; }

/* Horizontal bar charts (HR Reports): one series in the theme's primary colour,
   bars at most 16px thick with a 4px rounded end, value labelled at the end.
   "Not recorded" is de-emphasised in grey. */
.hbars { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr 3.5rem; align-items: center; gap: 10px; font-size: 0.8125rem; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ct-body-color); }
.hbar-track { height: 16px; }
.hbar-fill { display: block; height: 100%; min-width: 2px; background: var(--ct-primary); border-radius: 0 4px 4px 0; }
.hbar.is-muted .hbar-fill { background: var(--ct-secondary-bg, #adb5bd); background: color-mix(in srgb, var(--ct-body-color) 30%, transparent); }
.hbar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ct-body-color); }
.hbar:hover .hbar-fill { filter: brightness(1.15); }
.stat-tile .stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.stat-tile .stat-label { color: var(--ct-secondary-color); font-size: 0.8125rem; }

/* The theme's .table-light (table headings) stays light in dark mode; follow the dark surface instead. */
html[data-bs-theme=dark] .table-light {
    --ct-table-color: var(--ct-body-color);
    --ct-table-bg: var(--ct-tertiary-bg);
    --ct-table-border-color: var(--ct-border-color);
}

/* Applicant document preview (doc_preview_controller). */
.doc-preview-body { background: var(--ct-tertiary-bg); min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.doc-preview-frame { width: 100%; height: 75vh; border: 0; display: block; }
.doc-preview-image { max-width: 100%; max-height: 75vh; object-fit: contain; display: block; }
.doc-preview-progress { width: min(360px, 80%); }
/* No size known yet: a moving stripe. */
.doc-preview-progress .progress.indeterminate .progress-bar { width: 30%; animation: doc-preview-indeterminate 1.2s ease-in-out infinite; }
@keyframes doc-preview-indeterminate { from { margin-left: -30%; } to { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .doc-preview-progress .progress.indeterminate .progress-bar { width: 100%; animation: none; opacity: .4; } }

/* Applicant documents as thumbnails: first PDF page or the image, in a small portrait frame. */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 12px; }
.doc-tile { min-width: 0; }
.doc-thumb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 100%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 1px solid var(--ct-border-color); border-radius: 6px;
    background: var(--ct-tertiary-bg); color: var(--ct-secondary-color); }
button.doc-thumb { cursor: zoom-in; }
button.doc-thumb:hover, button.doc-thumb:focus-visible { border-color: var(--ct-primary); box-shadow: 0 0 0 2px var(--ct-primary-bg-subtle); outline: none; }
.doc-thumb-image, .doc-thumb-canvas { width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.doc-thumb-canvas:not(.is-ready) { visibility: hidden; }
.doc-thumb.is-failed::after { content: "Preview not available"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.75rem; padding: 6px; }
.doc-thumb-badge { position: absolute; left: 6px; bottom: 6px; font-size: 0.625rem; font-weight: 600; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); color: #fff; }
.doc-thumb-empty i { font-size: 1.75rem; }
.doc-tile-meta { margin-top: 6px; line-height: 1.3; }
/* A PDF thumbnail being fetched and drawn. */
.doc-thumb-progress { position: absolute; inset: auto 8px 50% 8px; transform: translateY(50%); display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: center; }
.doc-thumb-progress[hidden] { display: none; }
.doc-thumb-progress-label { font-size: 0.6875rem; color: var(--ct-secondary-color); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-thumb-track { height: 4px; border-radius: 2px; background: var(--ct-border-color); overflow: hidden; }
.doc-thumb-bar { display: block; height: 100%; width: 0; background: var(--ct-primary); border-radius: 2px; transition: width .2s linear; }
/* Size not known yet: a moving stripe. */
.doc-thumb-track.is-indeterminate .doc-thumb-bar { width: 35%; animation: doc-thumb-indeterminate 1.2s ease-in-out infinite; }
@keyframes doc-thumb-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .doc-thumb-track.is-indeterminate .doc-thumb-bar { width: 100%; animation: none; opacity: .4; } .doc-thumb-bar { transition: none; } }
.application-text .w-40 { width: 40%; }

/* Applicant edit form: fields filled in from the application text (older applications). */
.from-text-field .form-control, .from-text-field .form-select { background-color: var(--ct-info-bg-subtle); }
.applicant-tabs .step-num {
    display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin-right: .25rem;
    border-radius: 50%; background: var(--ct-tertiary-bg); font-size: .75rem; font-weight: 600;
}
.applicant-tabs .nav-link.active .step-num { background: var(--ct-primary); color: #fff; }
.tab-error-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ct-danger); vertical-align: middle; }
/* An entry of a repeatable section (qualification, job, referee), as on the careers form. */
.applicant-form fieldset.entry { border: 1px solid var(--ct-border-color); border-radius: .375rem; padding: .75rem 1rem .5rem; margin-bottom: .75rem; }
.applicant-form fieldset.entry legend { float: none; width: auto; padding: 0 .35rem; margin-bottom: 0; font-size: .9rem; }

/* Dashboard: stage tiles open Records; weekly columns (single series, the theme's primary colour). */
a.stat-link:hover, a.stat-link:focus-visible { border-color: var(--ct-primary); box-shadow: 0 0 0 2px var(--ct-primary-bg-subtle); }
.vbars { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--vbars-count), 1fr); gap: 6px; align-items: end; }
.vbar { display: grid; grid-template-rows: auto 160px auto; gap: 4px; text-align: center; font-size: 0.75rem; min-width: 0; }
.vbar-value { color: var(--ct-body-color); font-variant-numeric: tabular-nums; min-height: 1em; }
.vbar-track { display: flex; align-items: flex-end; justify-content: center; }
.vbar-fill { display: block; width: 100%; max-width: 36px; min-height: 2px; background: var(--ct-primary); border-radius: 4px 4px 0 0; }
.vbar-fill.is-zero { background: var(--ct-border-color); }
.vbar-label { color: var(--ct-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar:hover .vbar-fill { filter: brightness(1.15); }
@media (max-width: 575.98px) { .vbar { grid-template-rows: auto 120px auto; } .vbar-label { font-size: 0.625rem; } }
.hbars.has-notes .hbar { grid-template-columns: minmax(8rem, 34%) 1fr 6.5rem; }
.text-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.min-w-0 { min-width: 0; }
/* Email intake, Records: each row's number in a red circle (a pill from four digits). */
.row-number { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: 1rem; background: var(--ct-danger); color: #fff; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
/* Scrolling grids (DataTables Scroller): every row the same height, so each cell keeps to its lines and long text ends in "…". */
.datatable-scroll td { white-space: nowrap; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; }
.datatable-scroll td > div { overflow: hidden; text-overflow: ellipsis; }

/* The Interview Evaluation Score Sheet as the paper form (scoresheet/sheet): values on ruled lines. */
.paper-sheet { max-width: 60rem; }
.paper-line { display: inline-block; min-width: 12rem; border-bottom: 1px solid currentColor; padding: 0 .25rem; min-height: 1.4em; }
.paper-line.d-block { min-width: 0; }
.paper-table th { font-weight: 600; }
@media print {
    .paper-sheet { max-width: none; border: 0 !important; font-size: 11pt; }
    .paper-sheet .card-body { padding: 0; }
}