/**
 * Unmatched Debtors v1.1.0 (Phase 28 follow-up)
 *
 * v1.1.0 — toolbar links are chips rather than plain text, the same vocabulary the
 *   action and completed-actions pages now use. Style only; both pages keep every
 *   link, label and figure they had.
 *
 * v1.0.0 (Phase 24, plan decision P6)
 *
 * ONE design, shared by magpc-unmatched.html and magcs-unmatched.html (D4).
 * The palette deliberately matches the two action pages these are reached from —
 * #eef1f4 ground, #2c7a8b accent, a 680px reading column — so moving between the
 * action list and its unmatched list does not feel like changing product.
 *
 * LIGHT ONLY, on purpose. The action pages are light-only, and these pages are
 * their companions; a dark mode here would be the odd one out. Not an oversight.
 *
 * LOCKED DECISION #14 — every rule below that sets display/flex/grid on an
 * element which can also carry [hidden] is scoped :not([hidden]). ID-selector
 * specificity beats the UA [hidden] rule, so without it the spinner, the error
 * state and the conditional blocks leak into view.
 */

/* ========================================================================
   Page shell
   ======================================================================== */

body.unmatched {
    margin: 0;
    background: #eef1f4;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #243140;
}

[hidden] { display: none !important; }

.unmatched .toolbar {
    max-width: 680px;
    margin: 14px auto 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}
/* Toolbar chips (Phase 28). Sentence case, not the landing page's uppercase:
   uppercase plus letter-spacing costs about 40 per cent more width, which is what
   overflowed the column when a fifth link was added. The back link is always the
   first chip and stays plain - it is a way out, not a destination. */
.unmatched .toolbar .links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
}
.unmatched .toolbar .links a {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #215f6d;
    text-decoration: none;
    border: 1px solid rgba(44, 122, 139, .38);
    background: rgba(44, 122, 139, .09);
    padding: 6px 11px;
    border-radius: 8px;
    white-space: nowrap;
}
.unmatched .toolbar .links a:hover {
    background: rgba(44, 122, 139, .19);
    border-color: rgba(44, 122, 139, .65);
    text-decoration: none;
}
.unmatched .toolbar .links a:first-child {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    color: #5a6675;
}
.unmatched .toolbar .links a:first-child:hover { background: transparent; color: #215f6d; }
.unmatched .toolbar button {
    background: #2c7a8b;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.unmatched .toolbar button:disabled { background: #a9bcc3; cursor: not-allowed; }
.unmatched .toolbar button:not(:disabled):hover { background: #24606d; }

.unmatched .wrap {
    max-width: 680px;
    margin: 14px auto 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(20, 40, 60, .12);
    overflow: hidden;
}
.unmatched .bar { height: 5px; background: linear-gradient(90deg, #2c7a8b, #4aa3b5); }

.unmatched .head { padding: 20px 28px 6px; }
.unmatched .head h1 { margin: 0; font-size: 21px; color: #1f3a5a; }
.unmatched .head .sub { margin: 4px 0 0; font-size: 12.5px; color: #7a8794; }

.unmatched .intro {
    padding: 10px 28px 4px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #3a4653;
}

.unmatched .section { padding: 4px 28px; }
.unmatched h2 {
    margin: 20px 0 6px;
    font-size: 14px;
    color: #1f3a5a;
    border-bottom: 1px solid #e6ebf0;
    padding-bottom: 6px;
}
.unmatched h2 .cnt { font-weight: 400; color: #7a8794; font-size: 12px; }
.unmatched .lead { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: #5a6675; }

/* State blocks — #14 applies to all three. */
.unmatched .state:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 680px;
    margin: 24px auto;
    padding: 18px 22px;
    background: #fff;
    border-radius: 10px;
    font-size: 13.5px;
    color: #5a6675;
    box-shadow: 0 1px 3px rgba(20, 40, 60, .12);
}
.unmatched .state.error:not([hidden]) { background: #fbf3f2; color: #8e1f1f; }
.unmatched .spinner {
    width: 16px; height: 16px;
    border: 2px solid #cfd9e0;
    border-top-color: #2c7a8b;
    border-radius: 50%;
    animation: unmatched-spin .8s linear infinite;
}
@keyframes unmatched-spin { to { transform: rotate(360deg); } }

/* ========================================================================
   Reconciliation strip (criterion 18)
   ======================================================================== */

.unmatched .recon-strip:not([hidden]) { display: block; }
.unmatched .recon-strip { margin: 14px 0 4px; }
.unmatched .recon-strip table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.unmatched .recon-strip td {
    padding: 10px 8px;
    border: 1px solid #e6ebf0;
    text-align: center;
    vertical-align: top;
}
.unmatched .recon-strip .lab {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #7a8794;
}
.unmatched .recon-strip .val { font-size: 15px; font-weight: 700; color: #1f3a5a; margin-top: 4px; }
.unmatched .recon-strip .sub { font-size: 10px; color: #97a2af; margin-top: 2px; }
.unmatched .recon-strip .total td { background: #f7f9fb; }

.unmatched .recon-marker { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; }
.unmatched .recon-marker.ok { color: #1f8a4c; }
.unmatched .recon-marker.bad { color: #c0392b; }
.unmatched .recon-foot { margin: 6px 0 0; font-size: 11.5px; color: #8a95a3; font-style: italic; }

/* ========================================================================
   Blocks A / B / C
   ======================================================================== */

.unmatched .block { margin: 0 0 4px; }

.unmatched .row {
    border-left: 3px solid #d7dee5;
    background: #fafbfc;
    padding: 10px 14px;
    margin: 0 0 8px;
    border-radius: 0 6px 6px 0;
}

/* Block A — a name mismatch. Amber, because it is a correction to make, not a
   record to create. */
.unmatched .block-mismatch .row { border-left-color: #e0a34a; background: #fdfaf4; }
/* Block B — no CRM record at all. Neutral grey. */
.unmatched .block-norecord .row { border-left-color: #b9c3cd; background: #fafbfc; }

/* THE POINT OF THE PAGE (A1): the two names side by side, so a human can judge
   which of them is wrong. Sage first, because Sage is the source of truth. */
.unmatched .name-pair:not([hidden]) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.unmatched .name-pair .sage { font-weight: 700; color: #1f3a5a; font-size: 13.5px; }
.unmatched .name-pair .vs { color: #97a2af; font-size: 12px; }
.unmatched .name-pair .crm { font-weight: 600; color: #8a5a12; font-size: 13.5px; }
.unmatched .block-norecord .name-pair .sage { color: #1f3a5a; }

.unmatched .row .figures { margin-top: 4px; font-size: 12.5px; color: #4a5563; }
.unmatched .row .figures b { color: #1f3a5a; }

/* D12 evidence — what the CRM knows about the suggested match. */
.unmatched .evidence {
    margin-top: 5px;
    font-size: 11.5px;
    color: #6b7787;
    line-height: 1.6;
}
.unmatched .evidence .k { color: #97a2af; }

.unmatched .conf-high,
.unmatched .conf-confirm {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    vertical-align: middle;
}
.unmatched .conf-high { background: #e3f4e9; color: #1f7a3d; }
.unmatched .conf-confirm { background: #fdf1dd; color: #8a5a12; }

/* Brand pills — same three MAGPC colours as the action page; MAGCS labels ride
   the same classes with their own colours set inline by the page. */
.unmatched .pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .3px;
    vertical-align: middle;
}

/* Block C — the ONLY collapsible block. A and B are always open because they
   are the worklist; C is a standing exclusion list nobody needs to act on. */
.unmatched .block-absent summary {
    cursor: pointer;
    font-size: 13px;
    color: #3a4653;
    padding: 8px 0;
    list-style: revert;
}
.unmatched .block-absent summary::-webkit-details-marker { color: #97a2af; }
.unmatched .block-absent[open] summary { margin-bottom: 4px; }
.unmatched .block-absent ul { margin: 0 0 8px; padding-left: 20px; font-size: 12.5px; line-height: 1.8; color: #4a5563; }

.unmatched .empty-state {
    padding: 12px 14px;
    background: #f7f9fb;
    border: 1px dashed #d7dee5;
    border-radius: 6px;
    font-size: 12.5px;
    color: #6b7787;
}

/* Intercompany — same neutral grey as the action page's block, for the same
   reason: it is neither a problem nor a win. */
.unmatched .ic-block {
    background: #f4f6f8;
    border: 1px solid #d7dee5;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
}
.unmatched .ic-block ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.8; color: #3c4653; }

.unmatched .foot {
    padding: 14px 28px 22px;
    font-size: 11.5px;
    color: #8a97a5;
    line-height: 1.5;
    border-top: 1px solid #eef1f4;
    margin-top: 16px;
}

@media (max-width: 720px) {
    .unmatched .wrap, .unmatched .toolbar { max-width: 100%; margin-left: 10px; margin-right: 10px; }
    .unmatched .recon-strip { overflow-x: auto; }
}