/* =============================================================================
   FYSH — support tickets (public surface)
   CR: fysh-support-tickets-2026-10-05
   Loaded alongside about.css on the Support page and the ticket thread.
   Tokens only. Content cards use a 4px radius per the FYSH card standard.
============================================================================= */

/* ── Cards ────────────────────────────────────────────────────────────────── */
.sup-card {
    max-width: 760px;
    margin: 0 auto 1.5rem;
    padding: 1.8rem;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: var(--shadow-xs);
}
.sup-card--muted { background: var(--surface-1); }
.sup-card__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--navy);
    margin-bottom: 0.35rem;
}
.sup-card__lede { color: var(--muted); margin-bottom: 1.2rem; }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.sup-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.sup-field { margin-bottom: 1rem; display: flex; flex-direction: column; }
.sup-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--navy);
    margin-bottom: 0.35rem;
}
.sup-req {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gold-dark);
    margin-left: 0.3rem;
}
.sup-optional {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-left: 0.3rem;
}
.sup-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-0);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--slate);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.sup-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint);
}
.sup-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.sup-actions { margin-top: 0.4rem; }

/* ── Alerts (public, since wb-alert is admin only) ────────────────────────── */
.sup-alert {
    max-width: 760px;
    margin: 0 auto 1.2rem;
    padding: 0.9rem 1.1rem;
    border-radius: 4px;
    font-size: 0.95rem;
}
.sup-alert--error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.sup-alert--ok    { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }

/* ── Confirmation ─────────────────────────────────────────────────────────── */
.sup-card--confirm { text-align: center; }
.sup-confirm__icon {
    width: 54px; height: 54px;
    margin: 0 auto 0.8rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
}
.sup-confirm__icon--muted { background: var(--surface-2); color: var(--muted); }
.sup-confirm__icon .ti { font-size: 30px; }
.sup-card--confirm h2 { font-family: var(--font-display); color: var(--navy); margin-bottom: 0.5rem; }
.sup-card--confirm p { color: var(--slate); margin-bottom: 0.7rem; }

.sup-operator {
    max-width: 760px;
    margin: 1.4rem auto 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
}
.sup-operator a { color: var(--blue); }

/* ── Thread ───────────────────────────────────────────────────────────────── */
.sup-thread-wrap { max-width: 760px; }
.sup-thread__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.sup-thread__ref {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--gold-dark);
    margin-bottom: 0.2rem;
}
.sup-thread__subject { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); line-height: 1.2; }
.sup-thread__meta { color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; }

.sup-status {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.sup-status--open     { background: var(--info-bg);    color: var(--info); }
.sup-status--answered { background: var(--success-bg); color: var(--success); }
.sup-status--closed   { background: var(--surface-2);  color: var(--muted); }

.sup-thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.8rem; }
.sup-msg {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-0);
}
/* Support replies sit indented from the left so conversation turns read clearly. */
.sup-msg--admin { background: var(--blue-tint); border-color: #CFE0F2; margin-left: 1.75rem; }
@media (max-width: 640px) { .sup-msg--admin { margin-left: 0.85rem; } }
.sup-msg__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.sup-msg__who  { font-weight: 700; color: var(--navy); font-size: 0.92rem; }
.sup-msg__when { color: var(--faint); font-size: 0.8rem; }
.sup-msg__body { color: var(--slate); line-height: 1.6; word-wrap: break-word; }

.sup-reply { max-width: 760px; }
.sup-reply .sup-label { display: block; margin-bottom: 0.5rem; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sup-form__row { grid-template-columns: 1fr; gap: 0; }
    .sup-thread__head { flex-direction: column; }
}

/* ── Admin and workbench extras ───────────────────────────────────────────── */
.sup-admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sup-chip {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-0);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    text-decoration: none;
    transition: background var(--ease), color var(--ease);
}
.sup-chip:hover { background: var(--surface-2); color: var(--navy); }
.sup-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.sup-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--muted);
}
.sup-admin-empty { padding: 28px 8px; text-align: center; color: var(--muted); }

/* ── Admin search + sort toolbar ──────────────────────────────────────────── */
.sup-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 1rem;
}
.sup-search__input { flex: 1 1 260px; min-width: 0; }
.sup-search__sort { flex: 0 0 auto; width: auto; }
@media (max-width: 640px) {
    .sup-search__input, .sup-search__sort { flex: 1 1 100%; }
}
.wb-card__back { margin-bottom: 1rem; font-size: 0.9rem; }
.wb-card__back a { color: var(--blue); }
.sup-status-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ── Admin-only account context (collapsed by default) ────────────────────── */
.sup-context {
    margin: 0 0 1.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-1);
}
.sup-context > summary {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--navy);
    list-style: none;
}
.sup-context > summary::-webkit-details-marker { display: none; }
.sup-context > summary::before { content: "\203A"; margin-right: 0.5rem; color: var(--muted); display: inline-block; transition: transform var(--ease); }
.sup-context[open] > summary::before { transform: rotate(90deg); }
.sup-context__list { list-style: none; margin: 0; padding: 0 0.9rem 0.8rem; }
.sup-context__list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}
.sup-context__list li span { color: var(--muted); }
.sup-context__list li strong { color: var(--navy); }

/* ── Ticket table (self-contained, loads on every ticket surface) ─────────── */
.sup-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    -webkit-overflow-scrolling: touch;
}
.sup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.sup-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-1);
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.sup-table tbody td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--border);
    color: var(--slate);
    vertical-align: middle;
}
.sup-table tbody tr:last-child td { border-bottom: 0; }
.sup-table tbody tr { transition: background var(--ease); }
.sup-table tbody tr:hover { background: var(--surface-1); }
.sup-table .col-mono {
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}
.sup-table .col-muted { color: var(--muted); white-space: nowrap; }
.sup-table .col-right { text-align: right; white-space: nowrap; }

/* Collapse to stacked cards on small screens */
@media (max-width: 640px) {
    .sup-table thead { display: none; }
    .sup-table, .sup-table tbody, .sup-table tr, .sup-table td { display: block; width: 100%; }
    .sup-table tbody tr {
        border: 1px solid var(--border);
        border-radius: 4px;
        margin-bottom: 0.75rem;
        padding: 0.4rem 0.2rem;
    }
    .sup-table tbody td {
        border: 0;
        padding: 0.35rem 0.9rem;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }
    .sup-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        text-align: left;
    }
    .sup-table .col-right { text-align: right; }
}