/* ============================================================================
   SIPF stylesheet.

   Templates should not carry static inline styles — use the classes below. The only
   inline styles that remain are genuinely JS-driven (the progress bar's `width`, set per
   tick). Sections: base · links · tables · buttons · text utils · spacing utils ·
   badges/pills · layout · detail blocks · progress bar · modal.
   ============================================================================ */

/* --- Base & layout -------------------------------------------------------- */
html {
    height: 100% !important;
    min-width: 680px !important;
    font-size: 62.5% !important;
}

body {
    min-width: 680px !important;
    font-size: 1.3rem;
    margin-bottom: 5rem; /* leave room for footer */
    padding: 5rem 0;     /* fixed navbar */
    background: #040303;
    color: #ffffff;
    cursor: default;
}

.sipf { padding: 3rem 1.5rem; }
.clickable-row { cursor: pointer; }
.hidden { display: none; }
.default-animation { transition: all 0.2s 0s ease-in-out; }

/* --- Links ---------------------------------------------------------------- */
a:link { color: #E2BEB5; text-decoration: none; }
a:visited { color: #E28871; text-decoration: none; }
a:link:hover,
a:visited:hover { color: #F9A070; text-decoration: none; }

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/* --- Tables --------------------------------------------------------------- */
.table-taxa,
.table-taxa > thead > tr > th,
.table-taxa > tbody > tr > td { text-align: left; }

.table-taxa > tbody > tr:nth-child(odd) > td,
.table-taxa > tbody > tr:nth-child(odd) > th { background-color: #1f5151; }

.table-taxa > tbody > tr:hover { cursor: pointer; }
.table-taxa > tbody > tr:hover > td { color: #E28871; background: #492C25; }

/* --- Buttons & icon controls ---------------------------------------------- */
.sipf-button {
    border: 1px solid white;
    padding: 1px 8px 3px;
    margin: 3px;
    border-radius: 15px;
    float: right;
}
.sipf-button:hover { background-color: white; cursor: pointer; color: black; }
.sipf-button .inline { margin-left: 15px; }
.sipf-button--success { background-color: darkgreen; color: white; border: 0; }
.sipf-button--disabled { background-color: gray; color: white; cursor: not-allowed; }

.sipf-link { text-decoration: underline; font-weight: bold; color: black; }

/* A transparent, borderless button used as an icon affordance (e.g. the dataset delete ×). */
.icon-button { background: none; border: 0; padding: 0; cursor: pointer; }

/* The delete glyph: it lives in a <button>, which doesn't inherit the theme's a:link color,
   so set the pinkish color explicitly (brighten on hover). */
.dataset-delete { display: inline; color: #E2BEB5; }
button:hover > .dataset-delete { color: #F9A070; }

/* --- Text utilities ------------------------------------------------------- */
/* NB: these are `.sipf-*` prefixed on purpose — Bootstrap 4 ships `.text-danger`,
   `.text-success`, etc. as `!important` utilities that would otherwise override ours. */
.sipf-muted { color: gray; }
.sipf-success { color: darkgreen; }
.sipf-danger { color: darkred; }
.sipf-warning { color: #b8860b; }
.sipf-info { color: #1f6feb; }
.text-correction { color: #cb2814; }      /* an uploaded value that was corrected */
.text-lg { font-size: 1.2em; }
.text-sm { font-size: 0.85em; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-bold { font-weight: bold; }
.fst-italic { font-style: italic; }
.d-inline { display: inline; }
.w-60 { width: 60%; }
.p-20 { padding: 20px; }

/* --- Spacing utilities (named by px to preserve existing layout) ---------- */
.sipf-mt-2 { margin-top: 2px; }
.sipf-mt-4 { margin-top: 4px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.ml-6 { margin-left: 6px; }
.ml-8 { margin-left: 8px; }
.mx-10 { margin: 0 10px; }
.pt-20 { padding-top: 20px; }

/* --- Badges (dataset update/insert type) ---------------------------------- */
.tag { padding: 2px 8px; border-radius: 3px; font-size: 0.8em; color: white; }
.tag--update { background-color: #b8860b; }
.tag--insert { background-color: #555; }

/* --- Match-status table cells (matched / unmatched / skipped) ------------- */
/* `.sipf-*` prefixed to avoid Bootstrap 4's `.bg-*` utilities. Scoped through the same
   `.table-taxa > tbody > tr > td` chain as the row-striping rule above so they carry equal
   specificity and win by source order (they're declared later) — no `!important` needed. */
.table-taxa > tbody > tr > td.sipf-bg-success { background-color: darkgreen; }
.table-taxa > tbody > tr > td.sipf-bg-danger { background-color: darkred; }
.table-taxa > tbody > tr > td.sipf-bg-muted { background-color: gray; }

/* --- Layout helpers ------------------------------------------------------- */
.review-pane { overflow-y: auto; height: 600px; }
.panel { margin-top: 12px; padding: 10px; border: 1px solid #444; border-radius: 4px; }
.panel-light { margin-top: 20px; padding: 10px; border: 1px solid #ddd; }
.text-input { margin: 3px; background-color: #CCCCCC; }
.sipf-candidates-even { background-color: #222222; }
.sipf-candidates-odd { background-color: #333333; }

/* "Used by" record cards (partials/_used_records.html). */
.field-card {
    height: 100%;
    padding: 6px 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-left: 3px solid #2e7d32;
    border-radius: 3px;
}
.field-card-label { color: #8fb7c9; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.03em; }

/* Horizontally-scrollable table wrapper + nowrap table (dataset preview). */
.table-scroll-wrap { overflow-x: auto; max-height: 75vh; border: 1px solid #444; }
.table-nowrap { white-space: nowrap; margin-bottom: 0; }

/* --- Detail blocks (taxon / jurisdiction / agent detail panes) ------------ */
.detail-header { font-size: larger; font-weight: bold; }
.detail-label { font-style: italic; }
.detail-data { font-style: normal; font-weight: bold; }
.detail-data-corrected { font-style: normal; font-weight: bold; color: #cb2814; }
.correction-scope { margin-top: 6px; }
.correction-scope label { font-weight: bold; margin-right: 8px; }
.login-note { margin-top: 16px; font-style: italic; }
.login-messages { color: #cb2814; font-weight: bold; }

/* Sheet review (vision_review.html / vision_sheet_card.html) */
.review-progress { font-style: italic; margin-bottom: 8px; }
.sheet-card { display: flex; gap: 16px; align-items: flex-start; }
.sheet-viewer-pane { flex: 1 1 55%; position: sticky; top: 70px; }
.sheet-viewer { overflow: hidden; height: 80vh; border: 1px solid #dee2e6; cursor: grab; }
.sheet-viewer img { transform-origin: 0 0; max-width: 100%; user-select: none; }
.viewer-controls { margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.viewer-hint { font-style: italic; color: #6c757d; }
.sheet-fields { flex: 1 1 45%; }
.barcode-block { border: 2px solid #343a40; padding: 10px; margin-bottom: 12px; }
.barcode-input { font-size: 1.5em; font-weight: bold; width: 100%; }
.barcode-confirm { display: block; margin-top: 6px; font-weight: bold; }
.sheet-fields .section-title { font-weight: bold; margin-top: 14px; border-bottom: 1px solid #dee2e6; }
.field-table { width: 100%; }
.field-table th { font-style: italic; font-weight: normal; width: 30%; vertical-align: top; }
.field-table td.ai-read { width: 30%; color: #6c757d; }
.field-table input { width: 100%; }
.row-corrected input { color: #cb2814; font-weight: bold; }
.concern-badge { color: #cb2814; font-size: 0.85em; border: 1px solid #cb2814; border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.concern-badge.concern-review { background: #cb2814; color: #fff; }
.determination-block { margin-bottom: 10px; border-left: 3px solid #dee2e6; }
.determination-block.det-current { border-left-color: #343a40; }
.sheet-extras { margin-top: 10px; }
.sheet-extras summary { cursor: pointer; font-style: italic; }
.ocr-text { white-space: pre-wrap; font-size: 12px; max-height: 300px; overflow: auto; }
.review-actions { margin-top: 16px; display: flex; gap: 8px; align-items: center; }
.review-actions #skip_note { flex: 1; }
/* Bare grouping element for the read-only lock on non-pending cards; min-inline-size
   stops the fieldset's min-content default from breaking the flex layout. */
.sheet-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: auto; }
.sheet-fieldset:disabled input { opacity: 0.6; }
.skipped-list { margin: 4px 0 0 0; padding-left: 20px; }
.detail-data-ignored { font-style: normal; font-weight: bold; color: #cb2814; text-decoration: line-through; }
.corrected { color: #cb2814; }
.detail-note { font-style: italic; font-weight: bold; color: #cb2814; }
.target_db { text-align: right; font-style: normal; font-weight: bolder; color: #cbb407; }

/* --- Progress bar (shared by import / upload / delete) -------------------- */
/* Self-contained — does NOT use Bootstrap's .progress classes, which render inconsistently
   across the app's Bootstrap version. The bar's inline `width` is set per tick by JS. */
.sipf-progress {
    height: 28px;
    margin-top: 24px;
    width: 100%;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
.sipf-progress-bar {
    width: 0%;
    height: 100%;
    background-color: darkgreen;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 13px;
    white-space: nowrap;
    transition: width .3s ease;
    background-image: linear-gradient(45deg,
        rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-size: 28px 28px;
    animation: sipf-stripes 1s linear infinite;
}
.sipf-progress-bar.done { background-image: none; animation: none; }
@keyframes sipf-stripes { from { background-position: 0 0; } to { background-position: 28px 0; } }
.progress-message { color: #888; font-family: monospace; }

/* --- Modal dialog --------------------------------------------------------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.is-open { display: flex; }
.modal-box {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
}
.modal-message { margin-bottom: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-confirm:hover { background-color: darkred; color: white; }