/* Informix Analyser portal -- thin overlay on top of the legacy
   framework CSS stack. Designed to add the portal-specific UI
   pieces (drop zone, submission cards, Q&A panel) WITHOUT
   overriding the framework's body / header / typography / button /
   topnav rules. The framework rules come from
   /css/oninit.css + /css/w3-oninit.css + /css/orange-theme.css and
   match what /home/oninit/www.oninit.com/ripper/index.php renders.

   Convention: every selector is scoped under .analyser-content or
   the portal-specific component class so it never bleeds onto the
   legacy header/topnav/footer.

   Palette references kept here for clarity:
     cream       #fbf8ee
     cream-deep  #fdf6df
     tan         #c0a880
     brown       #7e4400
     th-bg       #f2eddc
     critical    #7b1f1f
     high        #b52e2e
     medium      #c8761a
     low         #3d7b3d
     info        #3b5f8f
*/

/* ---------- drop zone (portal-specific) ---------- */

.analyser-content .drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 36px 16px;
    border: 1px dashed #c0a880;
    background: #fbf8ee;
    cursor: pointer;
    transition: border-color 100ms, background 100ms;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    margin: 8px 0;
}

.analyser-content .drop-zone:hover,
.analyser-content .drop-zone.hover {
    border: 1px dashed #7e4400;
    background: #fdf6df;
}

.analyser-content .drop-zone .drop-prompt {
    color: #7e4400;
    font-weight: bold;
}

.analyser-content .drop-zone .drop-filename {
    font-family: monospace;
    color: #000;
}

.analyser-content .drop-zone input[type=file] {
    display: none;
}

#upload-form button {
    margin-top: 8px;
}

/* ---------- submission cards ---------- */

.analyser-content #submissions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}

.analyser-content .empty {
    font-family: tahoma, sans-serif;
    font-size: 12px;
    color: #4a3c1a;
    font-style: italic;
}

.analyser-content .card {
    border: 1px solid #c0a880;
    border-left-width: 4px;
    background: #fbf8ee;
    padding: 10px 14px;
    font-family: tahoma, sans-serif;
    font-size: 12px;
}

.analyser-content .card.status-queued       { border-left-color: #3b5f8f; }
.analyser-content .card.status-running      { border-left-color: #c8761a; }
.analyser-content .card.status-done         { border-left-color: #3d7b3d; }
.analyser-content .card.status-failed       { border-left-color: #b52e2e; }
.analyser-content .card.status-needs_select { border-left-color: #c8761a; }

.analyser-content .card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 6px;
}

.analyser-content .job-id {
    font-family: monospace;
    font-size: 11px;
    color: #4a3c1a;
    word-break: break-all;
}

.analyser-content .status-pill {
    text-transform: uppercase;
    font-family: tahoma, sans-serif;
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border: 1px solid #c0a880;
    background: #f2eddc;
    color: #7e4400;
    font-weight: bold;
}

.analyser-content .card.status-queued       .status-pill { color: #3b5f8f; }
.analyser-content .card.status-running      .status-pill { color: #c8761a; }
.analyser-content .card.status-done         .status-pill { color: #3d7b3d; }
.analyser-content .card.status-failed       .status-pill { color: #b52e2e; }
.analyser-content .card.status-needs_select .status-pill { color: #c8761a; }

.analyser-content .kind-pill {
    background: #f2eddc;
    border: 1px solid #c0a880;
    color: #7e4400;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 11px;
    font-family: monospace;
}

.analyser-content .card-body {
    margin: 6px 0;
    color: #000;
    font-family: tahoma, sans-serif;
    font-size: 12px;
}

.analyser-content .card-body.error {
    color: #b52e2e;
}

.analyser-content .download {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    background: #7e4400;
    color: #fbf8ee;
    text-decoration: none;
    border: 1px solid #7e4400;
    font-family: tahoma, sans-serif;
    font-size: 12px;
}

.analyser-content .download:hover {
    background: #b07e25;
    border-color: #b07e25;
    color: #fff;
}

.analyser-content .error-tail {
    background: #fdf0e8;
    border: 1px solid #d8a890;
    color: #7b1f1f;
    font-family: monospace;
    font-size: 11px;
    padding: 6px 8px;
    overflow-x: auto;
    max-height: 10rem;
    margin: 6px 0;
}

.analyser-content .af-picker {
    list-style: none;
    padding: 0;
    margin: 6px 0;
}

.analyser-content .af-picker li label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    cursor: pointer;
    font-family: tahoma, sans-serif;
    font-size: 12px;
}

.analyser-content .af-picker li label:hover {
    background: #fdf6df;
}

/* ---------- auth ---------- */

.analyser-content .signed-in {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #4a3c1a;
    font-size: 12px;
    margin: 4px 0;
}

.analyser-content .logout-form {
    margin: 0;
    display: inline;
}

.analyser-content .logout-form button {
    background: transparent;
    color: #7e4400;
    border: 1px solid #c0a880;
    padding: 2px 8px;
    font-size: 11px;
    font-family: tahoma, sans-serif;
    cursor: pointer;
}

.analyser-content .logout-form button:hover {
    background: #7e4400;
    color: #fbf8ee;
}

/* Login uses a fieldset titled-box (matches the dialect-example
   pattern from ripper/schema_translation.html). */
.analyser-content .login-card {
    max-width: 460px;
    margin: 16px auto;
    border: 1px solid #c0a880;
    background: #fbf8ee;
    padding: 12px 16px 16px 16px;
    font-family: tahoma, sans-serif;
    font-size: 12px;
}

.analyser-content .login-card legend {
    font-family: tahoma, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #7e4400;
    padding: 0 6px;
}

.analyser-content .login-card label {
    display: block;
    font-weight: bold;
    color: #7e4400;
    font-size: 12px;
    margin: 8px 0 4px 0;
}

.analyser-content .login-card input[type=email] {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #c0a880;
    background: #fff;
    font-family: tahoma, sans-serif;
    font-size: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.analyser-content .login-card form button {
    width: 100%;
    margin-top: 0;
    background: #7e4400;
    color: #fbf8ee;
    border: 1px solid #7e4400;
    padding: 6px 12px;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.analyser-content .login-card form button:hover {
    background: #b07e25;
    border-color: #b07e25;
}

.analyser-content .login-error {
    color: #b52e2e;
    font-size: 12px;
    margin: 0 0 6px 0;
}

.analyser-content .login-sent {
    text-align: center;
}

.analyser-content .login-sent code {
    background: #f2eddc;
}

/* ---------- Admin: re-render (T164) ---------- */

/* Admin re-render / Add / Delete panel. Restyled 2026-06-18 to match
   the site's Oninit amber-brown brand (the same #7e4400 the Ask button
   uses) instead of the off-brand blue + bare browser controls. */
.analyser-content .admin-rerender {
    margin-top: 14px;
    padding: 12px 16px 14px;
    background: #fdf8ee;
    border: 1px solid #d8c39a;
    border-left: 4px solid #7e4400;
    border-radius: 4px;
    font-family: tahoma, sans-serif;
    font-size: 12px;
}
.analyser-content .admin-rerender legend {
    color: #7e4400;
    font-weight: bold;
    padding: 0 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.analyser-content .admin-rerender-form {
    display: inline-flex;
    gap: 6px 12px;
    align-items: center;
    flex-wrap: wrap;
    vertical-align: middle;
}
/* "Brand" / "PDF logo" captions sit inline, to the left of each control */
.analyser-content .admin-rerender-form > label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9a7642;
}
.analyser-content .admin-rerender-form select {
    padding: 5px 8px;
    border: 1px solid #c0a880;
    border-radius: 3px;
    background: #fff;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    color: #3a2a14;
    min-width: 130px;
}
.analyser-content .admin-rerender-form select:focus {
    outline: none;
    border-color: #7e4400;
    box-shadow: 0 0 0 2px rgba(126, 68, 0, 0.15);
}
/* Shared button shape across the admin row (Regenerate + Delete). */
.analyser-content .admin-rerender-form button,
.analyser-content .admin-delete-btn {
    padding: 6px 16px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.analyser-content .admin-rerender-form button {
    background: #7e4400;
    color: #fbf8ee;
    border-color: #7e4400;
}
.analyser-content .admin-rerender-form button:hover {
    background: #b07e25;
    border-color: #b07e25;
}
.analyser-content .admin-rerender-form button[disabled] {
    opacity: 0.5;
    cursor: wait;
}
/* Second row: Add toggle + Delete, separated from the form row. */
/* Single-line admin row, operator order: onstat, brand, logo,
   regenerate, [gap], delete. */
.analyser-content .admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.analyser-content .admin-row .add-onstat-toggle { order: -1; }
.analyser-content .admin-row .admin-delete-form {
    order: 1;
    margin-left: auto;   /* the gap — pushes Delete to the right */
}
/* Add-onstat (T240): a pill toggle that lights up amber when active. */
.analyser-content .add-onstat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid #c0a880;
    border-radius: 16px;
    background: #fff;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #7e4400;
    cursor: pointer;
    user-select: none;
}
.analyser-content .add-onstat-toggle:hover {
    border-color: #7e4400;
}
.analyser-content .add-onstat-toggle:has(input:checked) {
    background: #7e4400;
    color: #fbf8ee;
    border-color: #7e4400;
}
.analyser-content .add-onstat-toggle input {
    accent-color: #7e4400;
    width: 14px;
    height: 14px;
    margin: 0;
}
/* T169: delete button — red danger palette, distinct from the amber
   actions. Confirm prompt is in the JS handler. */
.analyser-content .admin-delete-form {
    display: inline-flex;
}
.analyser-content .admin-delete-btn {
    background: #b52e2e !important;
    border-color: #b52e2e !important;
    color: #fff;
}
.analyser-content .admin-delete-btn:hover {
    background: #8a1f1f !important;
    border-color: #8a1f1f !important;
}
.analyser-content .rerender-spinner {
    color: #9a7642;
    font-style: italic;
    font-size: 11px;
}
/* HTMX flips `htmx-request` on the form while the POST is in flight. */
.analyser-content .htmx-indicator {
    display: none;
}
.analyser-content .htmx-request .htmx-indicator,
.analyser-content .htmx-indicator.htmx-request {
    display: inline;
}

/* ---------- Q&A surface (T058) ---------- */

.analyser-content .qa-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #c0a880;
    padding-top: 10px;
}

.analyser-content .qa-label {
    font-family: tahoma, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #7e4400;
}

.analyser-content .qa-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c0a880;
    background: #fff;
    padding: 6px 8px;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    resize: vertical;
    min-height: 3rem;
}

.analyser-content .qa-form button {
    align-self: flex-start;
    background: #7e4400;
    color: #fbf8ee;
    border: 1px solid #7e4400;
    padding: 4px 12px;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.analyser-content .qa-form button:hover {
    background: #b07e25;
    border-color: #b07e25;
}

.analyser-content .qa-answer-slot:empty {
    display: none;
}

/* T243: per-card Q&A token usage line. */
.analyser-content .card-tokens {
    margin-top: 6px;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    color: #7e6a4a;
}

.analyser-content .qa-answer {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fdf6df;
    border: 1px solid #c0a880;
    border-left: 3px solid #7e4400;
    font-family: tahoma, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

.analyser-content .qa-question {
    margin: 0 0 4px 0;
    font-size: 11px;
    color: #7e4400;
    font-weight: bold;
}

.analyser-content .qa-body {
    margin: 4px 0;
    color: #000;
}

.analyser-content .qa-meta {
    margin: 6px 0 0 0;
    color: #4a3c1a;
    font-size: 11px;
}