/* Forms List page.
   Uses the variables chat-styles.css already defines, so dark mode works with no
   extra work. WNC palette only: #386193, #0e335b, #005BAC, #505a5f, #d32f2f, #2e7d32. */

/* ---- undo the fixed-viewport layout -------------------------------------------------
   chat-styles.css is written for the builder, which is a fixed-height application:
   `html, body { height:100%; overflow:hidden }` and `#wrapper { height:100vh;
   overflow:hidden }`. That is right for a chat pane that scrolls internally and wrong
   for this page, which is an ordinary document. Inheriting it meant the Forms List could
   not scroll at all and anything below the fold was unreachable. */
html, body {
    height: auto;
    min-height: 100%;
    overflow: auto;
}
#wrapper {
    height: auto;
    max-height: none;
    overflow: visible;
    display: block;
}

#forms-main {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* The table has nine columns and cannot shrink below a readable width, so it scrolls
   sideways inside its own container at every size rather than only on a narrow screen.
   Confining the scroll to the wrapper keeps the rest of the page still. */
#forms-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.forms-table { min-width: 1100px; }

#forms-header h1 { margin: 24px 0 6px; }
#forms-header p { color: var(--text-muted, #505a5f); margin: 0 0 20px; }

/* ---- summary cards ---- */
.summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.summary-card {
    flex: 1 1 140px;
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, #ccc);
    border-left: 4px solid #386193;
    border-radius: 5px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.summary-value { font-size: 1.9em; font-weight: 700; line-height: 1.1; color: #386193; }
.summary-label { font-size: .85em; color: var(--text-muted, #505a5f); }

/* ---- controls ---- */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-btn {
    background: transparent;
    border: 1px solid var(--border, #b1b4b6);
    color: var(--text, #333);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: .88em;
    cursor: pointer;
    transition: .2s;
}
.filter-btn:hover { border-color: #386193; color: #386193; }
.filter-btn.filter-active { background: #386193; border-color: #386193; color: #fff; }
/* A visible focus ring is required for keyboard users, so never remove it. */
.filter-btn:focus-visible,
.refresh-btn:focus-visible,
#formSearch:focus-visible { outline: 3px solid #e2ca76; outline-offset: 2px; }

.search-label {
    font-size: .88em;
    color: var(--text-muted, #505a5f);
    margin-left: auto;
}
#formSearch {
    padding: 7px 10px;
    border: 1px solid var(--border, #ccc);
    border-radius: 5px;
    font-size: .9em;
    min-width: 220px;
    background: var(--panel-bg, #fff);
    color: var(--text, #333);
}
.refresh-btn {
    background: #386193;
    border: 1px solid #386193;
    color: #fff;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: .88em;
    cursor: pointer;
    transition: .2s;
}
.refresh-btn:hover { background: #0e335b; border-color: #0e335b; }

/* ---- status line ---- */
.forms-status {
    padding: 14px 16px;
    background: var(--panel-bg, #f0f4f8);
    border-left: 4px solid #386193;
    border-radius: 5px;
    color: var(--text-muted, #505a5f);
    margin-bottom: 18px;
}
.forms-status.forms-error { border-left-color: #d32f2f; color: #d32f2f; }

/* ---- table ---- */
.forms-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, #ccc);
    border-radius: 5px;
    overflow: hidden;
    font-size: .92em;
}
.forms-table th {
    text-align: left;
    background: #386193;
    color: #fff;
    padding: 11px 12px;
    font-weight: 700;
    white-space: nowrap;
}
.forms-table td {
    padding: 11px 12px;
    border-top: 1px solid var(--border, #e4e4e4);
    vertical-align: top;
}
.forms-table tbody tr:hover { background: var(--hover-bg, #f6f8fa); }

.form-title { display: block; font-weight: 600; }
.form-id {
    display: block;
    font-family: monospace;
    font-size: .82em;
    color: var(--text-muted, #505a5f);
    margin-top: 2px;
}

.link-cell a { display: block; color: #005BAC; white-space: nowrap; }
.link-cell a + a { margin-top: 4px; }

/* ---- status badges ---- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .82em;
    font-weight: 700;
    white-space: nowrap;
}
.badge-approved { background: #e8f5e9; color: #1b5e20; border: 1px solid #2e7d32; }
.badge-submitted { background: #e3f2fd; color: #0e335b; border: 1px solid #386193; }
.badge-changes-pending { background: #fff8e1; color: #6b4a00; border: 1px solid #c79100; }
.badge-changes-requested { background: #fff4e5; color: #8a4b00; border: 1px solid #c77700; }
.badge-draft { background: #f3f2f1; color: #505a5f; border: 1px solid #b1b4b6; }
.badge-scrapped { background: #ffebee; color: #b3261e; border: 1px solid #d32f2f; }

.feedback-row td {
    background: #fff4e5;
    color: #8a4b00;
    font-size: .9em;
    border-top: none;
}

.result-count {
    margin: 12px 0 0;
    font-size: .85em;
    color: var(--text-muted, #505a5f);
}

/* Available to screen readers, not shown on screen. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* On a narrow screen the controls stack rather than the search box being pushed off. */
@media (max-width: 900px) {
    .search-label { margin-left: 0; }
    #formSearch { flex: 1 1 100%; min-width: 0; }
    .summary-card { flex-basis: 110px; }
}

/* Live vs UAT comparison. Compared by ETag, so this reflects what is actually published
   rather than what the status field claims. */
.sync { display:inline-block; padding:3px 9px; border-radius:12px; font-size:.8em; font-weight:700; white-space:nowrap; }
.sync-ok   { background:#e8f5e9; color:#1b5e20; border:1px solid #2e7d32; }
.sync-warn { background:#fff8e1; color:#6b4a00; border:1px solid #c79100; }
.sync-info { background:#f3f2f1; color:#505a5f; border:1px solid #b1b4b6; }
/* A live copy with no UAT copy, or neither present, is a fault rather than a state. */
.sync-bad  { background:#ffebee; color:#b3261e; border:1px solid #d32f2f; }
/* Publish and withdraw, shown only to nformsAdmin. The API re-checks the group, so
   hiding the button is presentation, not the control. */
.publish-btn, .withdraw-btn {
    display: block; margin-top: 6px; width: 100%;
    border-radius: 6px; padding: 5px 10px;
    font-size: .82em; font-weight: 700; cursor: pointer; transition: .2s;
}
.publish-btn  { background: #2e7d32; border: 1px solid #2e7d32; color: #fff; }
.publish-btn:hover  { background: #1b5e20; border-color: #1b5e20; }
.withdraw-btn { background: transparent; border: 1px solid #d32f2f; color: #d32f2f; }
.withdraw-btn:hover { background: #ffebee; }
.publish-btn:disabled, .withdraw-btn:disabled { opacity: .6; cursor: default; }
.publish-btn:focus-visible, .withdraw-btn:focus-visible { outline: 3px solid #e2ca76; outline-offset: 2px; }

.preview-banner {
    padding: 12px 16px; margin-bottom: 18px;
    background: #fff8e1; border-left: 4px solid #e2ca76; border-radius: 5px;
    color: #6b4a00; font-size: .9em;
}
/* Withdrawn: a form that was live and has been deliberately taken off the public site.
   Deliberately louder than "draft", because it usually means something was wrong. */
.badge-withdrawn { background: #ffebee; color: #b3261e; border: 1px solid #d32f2f; }
.withdrawn-row td {
    background: #ffebee; color: #b3261e;
    font-size: .9em; border-top: none;
}
/* Drop-off column. Banded so the column can be scanned rather than read row by row.
   Colour is not the only signal: the percentage is always shown, and the detail is in the
   title attribute, so this does not rely on colour vision. */
.dropoff-good, .dropoff-ok, .dropoff-bad {
    display: inline-block; padding: 2px 9px; border-radius: 12px;
    font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: help;
}
.dropoff-good { background: rgba(0,112,60,.15);  color: #00703c; }
.dropoff-ok   { background: rgba(199,145,0,.18); color: #7a5800; }
.dropoff-bad  { background: rgba(212,53,28,.15); color: #d4351c; }
.dropoff-none { color: var(--text-muted); font-size: .8rem; cursor: help; }
.dropoff-step { color: var(--text-muted); font-size: .72rem; }
[data-theme="dark"] .dropoff-good { color: #6fcf97; }
[data-theme="dark"] .dropoff-ok   { color: #e2ca76; }
[data-theme="dark"] .dropoff-bad  { color: #ff8f80; }