/* Service Status & Incident Manager - client area styles
   Colors for badges/borders are always supplied inline per-record from the
   database (status/severity "color" fields) rather than hard-coded here. */

.ss-client { max-width: 900px; }
.ss-panel { background: #fff; border: 1px solid #e9ecef; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.ss-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; }
.ss-status { font-weight: 600; margin-left: 8px; }
.ss-resolved { color: #198754; font-weight: 600; margin-left: 8px; }

.ss-incident-header { border-left: 4px solid #dc3545; padding: 10px 16px; margin-bottom: 16px; }
.ss-dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; margin: 0; }
.ss-dl dt { font-weight: 600; color: #6c757d; }
.ss-dl dd { margin: 0; }

.ss-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e9ecef; }
.ss-timeline li { position: relative; padding: 6px 0 14px 22px; }
.ss-timeline li:before { content: ''; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #007bff; }
.ss-t-status { font-weight: 700; font-size: 13px; }
.ss-t-when { color: #6c757d; font-size: 12px; }
.ss-t-msg { font-size: 13px; margin-top: 3px; }

.ss-list { display: flex; flex-direction: column; gap: 8px; }
.ss-list-item, a.ss-list-item { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #e9ecef; border-left: 4px solid #6c757d; border-radius: 6px; padding: 12px 16px; text-decoration: none; color: inherit; }

.ss-check { display: block; margin-bottom: 10px; }

.ss-public h1 { margin-bottom: 20px; }
.ss-public-table { width: 100%; }
.ss-public-table td { padding: 8px 0; border-bottom: 1px solid #f1f3f5; }
.ss-loc { color: #6c757d; font-size: 12px; }
.ss-active-incidents { border: 1px solid #f5c2c7; background: #fff5f5; }

/* Alert banner injected on client-area header */
.ss-alert { display: flex; align-items: center; gap: 12px; background: #fff8f8; border: 1px solid #f1c0c0; border-left: 5px solid #dc3545; border-radius: 6px; padding: 12px 16px; margin: 14px 0; }
.ss-alert-icon { font-size: 22px; color: #dc3545; }
.ss-alert-body { flex: 1; }
.ss-alert-title { font-weight: 700; }
.ss-alert-sub { font-size: 12px; color: #6c757d; margin-top: 2px; }
.ss-alert-btn { background: #dc3545; color: #fff !important; padding: 7px 14px; border-radius: 4px; font-size: 13px; text-decoration: none; white-space: nowrap; }

.ss-ticket-warning { background: #fff8e1; border: 1px solid #ffe082; border-left: 5px solid #ffc107; border-radius: 6px; padding: 14px 16px; margin: 14px 0; }
.ss-ticket-warning h4 { margin-top: 0; }
.ss-ticket-warning .ss-tw-actions { margin-top: 10px; }
.ss-ticket-warning .ss-tw-actions a, .ss-ticket-warning .ss-tw-actions button { margin-right: 8px; }