/* ============================================================
   portal.css — Portal layout and component styles (enterprise)
   ============================================================ */

/* ── Portal layout ───────────────────────────────────────── */
.portal-wrapper { min-height:100vh; display:flex; flex-direction:column; background:var(--content-bg); }
.portal-header { background:var(--text, #1a1a2e); color:white; padding:var(--sp-3) var(--sp-6); display:flex; align-items:center; justify-content:space-between; }
.portal-brand { font-size:var(--fs-xl); font-weight:600; }
.portal-nav { display:flex; gap:var(--sp-3); align-items:center; }
.portal-link { color:rgba(255,255,255,0.65); text-decoration:none; font-size:var(--fs-base); padding:var(--sp-1) var(--sp-2); border-radius:var(--radius-sm); transition:color 0.15s; }
.portal-link:hover { color:white; background:rgba(255,255,255,0.08); }
.portal-user-info { color:rgba(255,255,255,0.7); font-size:var(--fs-base); padding:var(--sp-1) var(--sp-2); border-right:1px solid rgba(255,255,255,0.15); margin-right:var(--sp-1); }
.portal-main { flex:1; max-width:960px; width:100%; margin:0 auto; padding:var(--sp-6) var(--sp-4); }
.portal-footer { text-align:center; padding:var(--sp-3); color:var(--text-muted); font-size:var(--fs-sm, 12px); border-top:1px solid var(--surface-border); }

/* ── Cards ───────────────────────────────────────────────── */
.portal-card { background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--surface-border); padding:var(--sp-5); margin-bottom:var(--sp-4); }

/* ── Welcome section ─────────────────────────────────────── */
.portal-welcome { text-align:center; padding:var(--sp-6) var(--sp-5); }
.portal-welcome-logo { max-height:48px; margin-bottom:var(--sp-3); opacity:0.9; }
.portal-welcome-title { margin:0 0 var(--sp-1); font-size:var(--fs-xl); font-weight:600; color:var(--text-primary); }
.portal-welcome-client { margin:0 0 var(--sp-2); font-size:var(--fs-base); font-weight:500; color:var(--text-secondary); }
.portal-welcome-desc { margin:0; font-size:var(--fs-base); color:var(--text-muted); }

/* ── Section titles ──────────────────────────────────────── */
.portal-section-title { margin:0 0 var(--sp-3); font-size:var(--fs-base); font-weight:600; color:var(--text-primary); text-transform:uppercase; letter-spacing:0.3px; }

/* ── KPI row ─────────────────────────────────────────────── */
.portal-kpi-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); margin-bottom:var(--sp-4); }
.portal-kpi { text-align:center; padding:var(--sp-4) var(--sp-3); }
.portal-kpi-value { font-size:var(--fs-3xl, 28px); font-weight:700; color:var(--text-primary); line-height:1.2; }
.portal-kpi-label { font-size:var(--fs-sm, 13px); color:var(--text-secondary); margin-top:var(--sp-1); }
.portal-kpi-sub { font-size:var(--fs-sm, 12px); color:var(--text-muted); }
.portal-kpi-link { display:inline-block; margin-top:var(--sp-2); font-size:var(--fs-sm, 13px); color:var(--brand-primary, #0f3460); text-decoration:none; font-weight:500; }
.portal-kpi-link:hover { text-decoration:underline; }

/* ── SLA indicators ──────────────────────────────────────── */
.portal-sla-indicators { display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.portal-sla-item { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-base); color:var(--text-primary); }
.portal-sla-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.portal-sla-ok { background:var(--success, #28a745); }
.portal-sla-warn { background:var(--warning, #ffc107); }
.portal-sla-danger { background:var(--danger, #dc3545); }

/* ── Table ───────────────────────────────────────────────── */
.portal-table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.portal-table th { text-align:left; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--surface-border); font-size:var(--fs-sm, 12px); color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.portal-table td { padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--neutral-bg, #f0f0f0); color:var(--text-primary); }
.portal-table tr:hover td { background:var(--hover-row, rgba(0,0,0,0.02)); }
.portal-table-link { color:var(--brand-primary, #0f3460); text-decoration:none; font-weight:500; }
.portal-table-link:hover { text-decoration:underline; }

/* ── Text helpers ────────────────────────────────────────── */
.portal-text-danger { color:var(--danger, #dc3545); font-weight:600; }
.portal-text-warn { color:var(--warning-dark, #d39e00); font-weight:600; }

/* ── Badges ──────────────────────────────────────────────── */
.portal-badge { display:inline-block; padding:2px 8px; border-radius:var(--radius-sm); font-size:var(--fs-sm, 12px); font-weight:600; }
.portal-badge-info { background:var(--info-bg, #e8f4fd); color:var(--info, #0c7cd5); }
.portal-badge-success { background:var(--success-bg, #e6f4ea); color:var(--success, #28a745); }
.portal-badge-warning { background:var(--warning-bg, #fff8e1); color:var(--warning-dark, #d39e00); }
.portal-badge-danger { background:var(--danger-bg, #fde8e8); color:var(--danger, #dc3545); }

/* ── Buttons ─────────────────────────────────────────────── */
.portal-btn { display:inline-block; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-default); border:1px solid transparent; cursor:pointer; font-size:var(--fs-base); font-weight:500; text-decoration:none; transition:background 0.15s; }
.portal-btn-primary { background:var(--brand-primary, #0f3460); color:white; border-color:var(--brand-primary, #0f3460); }
.portal-btn-primary:hover { background:var(--brand-primary-dark, #0c2a4e); }
.portal-btn-secondary { background:var(--surface); color:var(--text-primary); border-color:var(--surface-border); }
.portal-btn-secondary:hover { background:var(--neutral-bg, #f5f5f5); }

/* ── Forms ────────────────────────────────────────────────── */
.portal-form-group { margin-bottom:var(--sp-4); }
.portal-form-group label { display:block; font-size:var(--fs-sm, 12px); color:var(--text-secondary); margin-bottom:var(--sp-1); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.portal-form-group input, .portal-form-group textarea, .portal-form-group select {
    width:100%; padding:var(--sp-2) var(--sp-3); border:1px solid var(--surface-border); border-radius:var(--radius-default); font-size:var(--fs-base); color:var(--text-primary); }
.portal-form-group textarea { resize:vertical; }
.portal-empty { text-align:center; padding:var(--sp-8); color:var(--text-muted); font-size:var(--fs-base); }

/* ── Responsive — Mobile ─────────────────────────────────── */
@media (max-width: 768px) {
    .portal-header { flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); }
    .portal-nav { flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }
    .portal-main { padding:var(--sp-3) var(--sp-2); }
    .portal-card { padding:var(--sp-3); }
    .portal-kpi-row { grid-template-columns:1fr; }
    .portal-sla-indicators { flex-direction:column; gap:var(--sp-2); }
}