/* B-TRAVEL: the travel view (T11), the requester tier (T10) and the phone floor (R-82..84).
   Loaded after style.css and only adds to it, so it never fights the admin screens' rules. */

.alert-good { background: var(--good-bg); color: var(--good-fg); border-color: var(--good-bd); }
.field-error { margin: 8px 0 0; font-size: 13px; color: var(--bad-fg); }
.field-error.hidden { display: none; }

/* ---- Navigation ---------------------------------------------------------------------------- */

/* Avatar + name is the way to Profile on a desktop (R-83) */
.nav-profile { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 999px; }
.nav-profile:hover .nav-user-name { color: #fff; }
.nav-profile.active .avatar { box-shadow: 0 0 0 2px var(--accent); }

/* A hidden slot keeps its place so the New button never moves (R-83) */
.mobile-nav-item.slot-off { visibility: hidden; pointer-events: none; }

#main-content { min-height: 100vh; min-height: 100dvh; }   /* dvh: the address bar no longer pushes the page (R-84) */

/* ---- Urgency as radio cards that promise a reply time (R-74) -------------------------------- */

.urgency-group { grid-column: 1 / -1; border: 0; margin: 0; min-width: 0; }
.urgency-group legend { padding: 0; }
.urgency-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.urgency-card {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
    cursor: pointer; min-height: 72px; -webkit-tap-highlight-color: transparent;
}
.urgency-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.urgency-card .uc-title { font-size: 14px; font-weight: 600; color: var(--text); }
.urgency-card .uc-time { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
.urgency-card:has(input:checked) { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); background: var(--info-bg); }
.urgency-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Photos: a thumbnail with its own remove button, and failures said out loud (R-72) ------ */

.file-preview-item { position: relative; }
.file-remove {
    position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
    border: 0; background: var(--navy); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.file-remove::after { content: ''; position: absolute; inset: -10px; }   /* a 44px target around a 24px dot */
.file-problem { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--bad-fg); }

/* ---- My tickets: what needs the requester ---------------------------------------------------- */

.ticket-card.needs-you { box-shadow: inset 3px 0 0 var(--warn-fg); }
.needs-chip, .replied-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.needs-chip { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-bd); }
.replied-chip { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-bd); }

/* ---- The ticket page: travel card between the head and the description ---------------------- */

.detail-grid {
    grid-template-areas:
        "head side"
        "travel side"
        "desc side"
        "comments side";
    grid-template-rows: auto auto auto 1fr;
}
.detail-travel { grid-area: travel; display: grid; gap: 12px; min-width: 0; }
.detail-grid.is-requester { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "travel" "desc" "comments"; grid-template-rows: auto; }
@media (max-width: 1023px) {
    .detail-grid, .detail-grid.is-requester { grid-template-areas: "head" "travel" "side" "desc" "comments"; }
}

.tv-card { padding: 0; overflow: hidden; }
.tv-raised {
    display: flex; gap: 10px; align-items: flex-start; padding: 14px 20px;
    background: var(--good-bg); color: var(--good-fg); border-bottom: 1px solid var(--good-bd); font-size: 14px; line-height: 1.45;
}
.tv-now { padding: 18px 20px; background: var(--info-bg); border-bottom: 1px solid var(--info-bd); }
.tv-now-label, .tv-next-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--info-fg); }
.tv-next-label { margin-top: 12px; color: var(--text-3); }
.tv-now-text { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); font-weight: 500; }
.tv-next-text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tv-quote { display: block; margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); background: var(--surface);
    font-weight: 400; font-size: 14px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; quotes: none; }
.tv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tv-reopen { margin-top: 12px; display: grid; gap: 8px; }
.tv-reopen label { font-size: 13px; font-weight: 600; color: var(--text); }
.tv-reopen textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 16px; resize: none; background: var(--surface); }
.tv-reopen.hidden { display: none; }

.tv-steps { list-style: none; margin: 0; padding: 18px 20px 12px; }
.tv-step { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.tv-step:not(:last-child)::before {   /* the line the parcel travels along */
    content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--border-strong); opacity: 0.45;
}
.tv-step.is-next::before { background: repeating-linear-gradient(var(--border-strong) 0 4px, transparent 4px 8px); opacity: 0.5; }
.tv-dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 0 3px var(--surface); }
.tv-step.is-next .tv-dot { background: var(--surface); border: 2px solid var(--border-strong); }
.tv-step.is-current .tv-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--focus); }
.tv-step-body { min-width: 0; flex: 1; }
.tv-step-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.tv-step.is-next .tv-step-title { color: var(--text-3); font-weight: 500; }
.tv-step.is-current .tv-step-title { font-size: 15.5px; }
.tv-time { font-size: 12.5px; font-weight: 400; color: var(--text-3); white-space: nowrap; }
.tv-step-text { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* ---- The phone floor: 44px targets, 16px inputs, 12px labels (R-82, R-84) ------------------- */

textarea, textarea.input, .comment-form textarea { resize: none; }
.profile-meta { margin: 14px 0 0; padding: 0; }

@media (max-width: 768px) {
    .btn, .btn-sm, .chip, .toggle-btn, .admin-tab, .login-tab, .file-upload-btn, .select, .select-inline,
    .login-alt-toggle, .ios-install-banner-close, .back-btn { min-height: 44px; }
    .chip { height: 44px; }
    .mobile-nav-item { min-height: 48px; }
    input, select, textarea, .input, .select, .login-form input { font-size: 16px; }
    .section-label, .kpi-label, .badge, .tc-top, .meta-row dt, .field-label, .file-preview-name, .msg-meta,
    .composer-audience, .tv-time, .count-pill { font-size: 12px; }
    .urgency-cards { grid-template-columns: minmax(0, 1fr); }
    .urgency-card { min-height: 64px; }
    .tv-now, .tv-steps, .tv-raised { padding-left: 16px; padding-right: 16px; }
    /* the raised New button's lip no longer covers the last row (R-84) */
    #main-content { padding-bottom: calc(var(--mnav-h) + 36px + env(safe-area-inset-bottom, 0px)); }
}