/*
 * Customer support portal stylesheet.
 *
 * Reuses the variables defined by the main /branding.css (which the
 * branding-loader.js writes via :root custom properties), so the portal
 * automatically picks up the operator's logo, colors, and product name.
 */

:root {
    --portal-bg:        #f5f7fa;
    --portal-surface:   #ffffff;
    --portal-border:    #e5e9f0;
    --portal-text:      #2c3e50;
    --portal-muted:     #7a8694;
    --portal-danger:    #c0392b;
    --portal-warn:      #d97706;
    --portal-success:   #1e8449;
    --portal-radius:    6px;
    --portal-shadow:    0 1px 3px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--portal-bg);
    color:      var(--portal-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size:   14px;
    line-height: 1.45;
}

a { color: var(--rapax-accent, #16a085); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Header / footer ---- */
.portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: var(--rapax-header-mid, #34495e);
    color: white;
    box-shadow: var(--portal-shadow);
}
.portal-brand { display: flex; align-items: center; gap: 12px; }
.portal-brand h1 { font-size: 16px; margin: 0; font-weight: 600; }
.portal-logo { height: 28px; width: auto; }
.portal-nav { display: flex; gap: 14px; align-items: center; color: white; }
.portal-nav #user-info { font-size: 13px; opacity: 0.85; }

.portal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--portal-surface);
    border-top: 1px solid var(--portal-border);
    color: var(--portal-muted);
    font-size: 12px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--portal-radius);
    border: 1px solid transparent;
    font-size: 14px;
    cursor: pointer;
    background: #ecf0f1;
    color: var(--portal-text);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary {
    background: var(--rapax-accent, #16a085);
    color: white;
    border-color: var(--rapax-accent, #16a085);
}
.btn-primary:hover { background: var(--rapax-accent-hover, #138d75); }
.btn-secondary { background: white; border-color: var(--portal-border); }
.btn-link { background: transparent; color: white; border: none; padding: 4px 8px; }

/* ---- Centered card layout (login / request) ---- */
.centered-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--rapax-primary-dark, #0f2027), var(--rapax-primary-mid, #203a43));
    padding: 24px;
}
.login-card {
    background: white;
    padding: 32px;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.login-brand h1 { font-size: 20px; margin: 0; }
.login-logo { height: 32px; }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form label { font-weight: 600; margin-top: 6px; font-size: 13px; }
.login-form input,
.login-form textarea,
.login-form select {
    padding: 8px 10px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    font-size: 14px;
    font-family: inherit;
}
.login-footer { margin-top: 16px; font-size: 13px; color: var(--portal-muted); text-align: center; }

.form-error { color: var(--portal-danger); font-size: 13px; min-height: 18px; }
.form-status { font-size: 13px; min-height: 18px; }
.form-success { color: var(--portal-success); }

/* ---- Main content ---- */
.portal-main {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 24px;
}
.portal-loading { color: var(--portal-muted); }
.action-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.ticket-section {
    background: white;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    margin-bottom: 22px;
    box-shadow: var(--portal-shadow);
}
.ticket-section h2 {
    margin: 0;
    padding: 14px 18px;
    font-size: 15px;
    border-bottom: 1px solid var(--portal-border);
    background: #fafbfc;
    border-radius: var(--portal-radius) var(--portal-radius) 0 0;
}
.ticket-section .count { color: var(--portal-muted); font-weight: normal; font-size: 13px; }
.ticket-section .empty { color: var(--portal-muted); padding: 18px; margin: 0; }

.ticket-list {
    display: block;
    font-size: 13px;
}
.ticket-row {
    display: grid;
    grid-template-columns: 170px 1fr 90px 90px 100px 160px;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--portal-border);
    color: var(--portal-text);
    text-decoration: none;
}
.ticket-row.ticket-head {
    font-weight: 600;
    color: var(--portal-muted);
    background: #fafbfc;
    text-decoration: none;
    cursor: default;
}
.ticket-row:hover:not(.ticket-head) { background: #f7fafc; }
.ticket-row .ticket-subject {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Badges ---- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    color: white;
    text-align: center;
}
.badge-outage  { background: #c0392b; }
.badge-urgent  { background: #d35400; }
.badge-high    { background: #d97706; }
.badge-normal  { background: #2980b9; }
.badge-low     { background: #7f8c8d; }
.badge-status-new       { background: #3498db; }
.badge-status-pending   { background: #9b59b6; }
.badge-status-escalated { background: #c0392b; }
.badge-status-on_hold   { background: #7f8c8d; }
.badge-status-closed    { background: #16a085; }

/* ---- Ticket detail ---- */
.ticket-detail {
    background: white;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}
.ticket-detail.closed { opacity: 0.92; }
.td-header { padding: 18px 22px; border-bottom: 1px solid var(--portal-border); background: #fafbfc; }
.td-header h1 { margin: 0 0 8px; font-size: 18px; }
.td-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--portal-muted); align-items: center; }

.td-description, .td-notes, .td-reply { padding: 18px 22px; border-bottom: 1px solid var(--portal-border); }
.td-description h2, .td-notes h2, .td-reply h2 {
    font-size: 14px; margin: 0 0 12px; color: var(--portal-muted); text-transform: uppercase;
    letter-spacing: 0.4px;
}
.td-description pre, .note pre {
    background: #f7fafc;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--portal-border);
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 13px;
}
.note { margin-bottom: 14px; }
.note-meta { display: flex; gap: 10px; font-size: 12px; color: var(--portal-muted); margin-bottom: 4px; }
.note-meta .role { background: #ecf0f1; padding: 1px 6px; border-radius: 3px; font-size: 11px; }

.td-reply textarea {
    width: 100%;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
}
.td-actions { display: flex; gap: 10px; margin-top: 10px; }

/* ---- Outage warning ---- */
.outage-warn {
    border: 1px solid var(--portal-warn);
    background: #fff7e6;
    color: #92400e;
    padding: 12px 14px;
    border-radius: var(--portal-radius);
    font-size: 13px;
    margin: 8px 0;
}
.outage-warn p { margin: 0 0 8px; }
.ack-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }

/* ---- Forms (new ticket) ---- */
.form-page { max-width: 720px; margin: 24px auto; padding: 24px; background: white;
             border: 1px solid var(--portal-border); border-radius: var(--portal-radius); }
.ticket-form { display: flex; flex-direction: column; gap: 8px; }
.ticket-form label { font-weight: 600; font-size: 13px; margin-top: 8px; }
.ticket-form input, .ticket-form textarea, .ticket-form select {
    padding: 8px 10px; border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius); font-size: 14px; font-family: inherit;
}
.ticket-form textarea { resize: vertical; }

.muted { color: var(--portal-muted); font-size: 13px; }

@media (max-width: 720px) {
    .ticket-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .ticket-row.ticket-head { display: none; }
    .ticket-row .ticket-number { font-weight: 600; }
}