/* ==========================================================================
   Customer portal: public request form (portal.php) and tracking page
   (request.php).

   The site stylesheet has no panels, alerts, conversation thread or file
   list, so these pages rendered those parts as bare browser defaults. Written
   in the site's own tokens so it reads as part of the website.
   ========================================================================== */

.portal-page {
    --pt-ink:     var(--navy-900, #07162d);
    --pt-muted:   var(--gray-600, #5d6d7f);
    --pt-line:    #dde6ef;
    --pt-soft:    var(--gray-50, #f7fbff);
    --pt-blue:    var(--blue-600, #1769ff);
    --pt-radius:  12px;
}

/* Label text and its "(optional)" hint on one line. .form-panel labels are
   grids, so a bare <small> otherwise drops onto its own row. */
.portal-page .form-panel label > span small {
    margin-left: 4px;
    color: var(--pt-muted);
    font-weight: 500;
}

/* ------------------------------------------------------------------ panels */

.portal-page .panel {
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(7, 22, 45, 0.04), 0 8px 24px -12px rgba(7, 22, 45, 0.12);
}

.portal-page .panel h2 {
    margin: 0 0 14px;
    color: var(--pt-ink);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.portal-page .muted {
    color: var(--pt-muted);
    font-size: 0.9rem;
}

/* ------------------------------------------------------ submission aside */

.contact-aside {
    display: grid;
    align-content: start;
    gap: 14px;
}

.contact-aside h2 {
    margin: 0;
    color: var(--pt-ink);
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}

.contact-aside h2:not(:first-child) {
    margin-top: 14px;
}

.contact-aside > p {
    margin: 0;
    color: var(--pt-muted);
}

.contact-aside .form-panel {
    padding: 18px;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    background: var(--pt-soft);
}

.steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps li {
    position: relative;
    padding-left: 40px;
    color: var(--pt-ink);
    line-height: 1.5;
    counter-increment: step;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    top: -1px;
    left: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8f0ff;
    color: var(--pt-blue);
    font-size: 0.82rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------ alerts */

.portal-page .alert {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 10px;
    font-weight: 500;
}

.portal-page .alert.success {
    border-color: #a8dfc3;
    background: #ecf9f2;
    color: #0e5a36;
}

.portal-page .alert.danger {
    border-color: #f1b3b3;
    background: #fdeeee;
    color: #8a1c1c;
}

/* ------------------------------------------------------- request summary */

.portal-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.portal-summary .label {
    display: block;
    margin-bottom: 6px;
    color: var(--pt-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.portal-summary strong {
    color: var(--pt-ink);
    font-size: 1rem;
}

@media (max-width: 720px) {
    .portal-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.status-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    background: #eef2f7;
    color: #3e4c60;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-new,
.status-in_progress        { background: #e8f0ff; color: #1450c8; }
.status-acknowledged       { background: #eef2f7; color: #3e4c60; }
.status-waiting_customer   { background: #fff4df; color: #8a5300; }
.status-resolved           { background: #e6f7ee; color: #0e6b3f; }
.status-closed             { background: #f1f3f6; color: #5d6d7f; }

/* ---------------------------------------------------------- conversation */

.portal-page .thread {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-page .thread-item {
    padding: 14px 16px;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    background: #ffffff;
}

/* The customer's own messages sit on the right, like a chat. */
.portal-page .thread-customer {
    margin-left: 12%;
    border-color: #cfe0ff;
    background: #f3f7ff;
}

.portal-page .thread-staff {
    margin-right: 12%;
}

.portal-page .thread-system {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--pt-muted);
    font-size: 0.86rem;
    text-align: center;
}

.portal-page .thread-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.portal-page .thread-system .thread-head {
    justify-content: center;
    margin-bottom: 0;
}

.portal-page .thread-head strong {
    color: var(--pt-ink);
}

.portal-page .thread-head .meta {
    margin-left: auto;
    color: var(--pt-muted);
    font-size: 0.8rem;
}

.portal-page .thread-system .thread-head .meta {
    margin-left: 0;
}

.portal-page .thread-item p {
    margin: 0;
    color: #2c3a4d;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .portal-page .thread-customer { margin-left: 0; }
    .portal-page .thread-staff    { margin-right: 0; }
}

/* ---------------------------------------------------------------- files */

.portal-page .file-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.portal-page .file-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--pt-line);
    border-radius: 9px;
    background: #ffffff;
}

.portal-page .file-list li::before {
    content: "";
    flex: none;
    width: 14px;
    height: 17px;
    border: 1.5px solid var(--pt-muted);
    border-radius: 2px 5px 2px 2px;
}

.portal-page .file-list a {
    min-width: 0;
    overflow: hidden;
    color: var(--pt-blue);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-page .file-list small {
    margin-left: auto;
    color: var(--pt-muted);
    white-space: nowrap;
}