/* ── NexaCore Client Portal CSS ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
    --sidebar-w:     260px;
    --sidebar-bg:    #0f172a;
    --sidebar-hover: #1e293b;
    --sidebar-active:#4f46e5;
    --sidebar-text:  #94a3b8;
    --topbar-h:      64px;
    --primary:       #4f46e5;
    --primary-h:     #4338ca;
    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --border:        #e2e8f0;
    --text:          #0f172a;
    --text-muted:    #64748b;
    --radius:        10px;
    --shadow:        0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family:'Inter',-apple-system,sans-serif; background:var(--surface-2); color:var(--text); margin:0; font-size:14px; line-height:1.6; }

/* ── Sidebar ── */
.cl-sidebar { position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; background:var(--sidebar-bg); display:flex; flex-direction:column; z-index:1000; overflow-y:auto; transition:transform .3s ease; }
.cl-brand { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid rgba(255,255,255,.06); }
.cl-nav { padding:12px; flex-grow:1; }
.cl-nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--sidebar-text); text-decoration:none; font-size:14px; font-weight:500; margin-bottom:2px; transition:all .15s; }
.cl-nav-item i { font-size:16px; flex-shrink:0; }
.cl-nav-item:hover { background:var(--sidebar-hover); color:#e2e8f0; }
.cl-nav-item.active { background:var(--sidebar-active); color:#fff; font-weight:600; }
.cl-sidebar-footer { padding:16px; border-top:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:10px; }
.cl-avatar { width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.cl-user-name { font-size:13px; font-weight:600; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-user-email { font-size:11px; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Layout ── */
.cl-layout { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.cl-topbar { height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px; padding:0 28px; position:sticky; top:0; z-index:100; }
.cl-topbar-title { font-size:17px; font-weight:700; margin:0; }
.cl-content { padding:28px; flex-grow:1; }
.cl-menu-toggle { background:none; border:none; cursor:pointer; padding:4px; color:var(--text); }

/* ── Cards ── */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-header { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); background:transparent; border-radius:var(--radius) var(--radius) 0 0; }
.card-header h5 { margin:0; font-size:15px; font-weight:700; }
.card-body { padding:20px; }

/* ── Stat cards ── */
.stat-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; align-items:center; gap:16px; }
.stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon.primary { background:#eef2ff; color:#4f46e5; }
.stat-icon.success { background:#dcfce7; color:#16a34a; }
.stat-icon.warning { background:#fef9c3; color:#ca8a04; }
.stat-icon i { font-size:20px; }
.stat-value { font-size:1.6rem; font-weight:800; line-height:1; color:var(--text); }
.stat-label { font-size:12px; color:var(--text-muted); font-weight:500; margin-top:3px; }

/* ── Service cards ── */
.service-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:12px; transition:box-shadow .2s; }
.service-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); }
.service-icon { width:44px; height:44px; background:#eef2ff; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.service-icon i { font-size:20px; color:#4f46e5; }
.service-info-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:6px 0; border-bottom:1px solid var(--surface-2); }
.service-info-row:last-child { border-bottom:none; }
.service-info-label { color:var(--text-muted); }
.service-info-value { font-weight:600; font-family:monospace; font-size:12.5px; }

/* ── Buttons ── */
.btn { font-family:'Inter',sans-serif; font-weight:600; border-radius:8px; transition:all .18s; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-h); border-color:var(--primary-h); }
.btn-sm { font-size:12px; padding:5px 12px; }

/* ── Forms ── */
.form-control, .form-select { border-radius:8px; border-color:var(--border); font-size:13.5px; padding:9px 13px; }
.form-control:focus, .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.form-label { font-size:13px; font-weight:600; }

/* ── Auth pages ── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%); }
.auth-card { background:#fff; border-radius:16px; padding:40px; width:100%; max-width:440px; box-shadow:0 24px 64px rgba(0,0,0,.3); }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-title { font-size:1.5rem; font-weight:800; text-align:center; margin-bottom:6px; }
.auth-sub { text-align:center; color:#64748b; font-size:14px; margin-bottom:28px; }

/* ── Table ── */
.table { font-size:13.5px; }
.table th { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); border-bottom:2px solid var(--border); }
.table td { vertical-align:middle; border-bottom-color:var(--surface-2); }

/* ── Alerts ── */
.alert { border-radius:8px; font-size:13.5px; }

/* ── Ticket view ── */
.ticket-header { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; margin-bottom:18px; }
.ticket-meta { display:flex; flex-wrap:wrap; gap:18px; font-size:12.5px; color:var(--text-muted); margin-top:10px; }
.ticket-meta span { display:flex; align-items:center; gap:5px; }
.ticket-messages { display:flex; flex-direction:column; gap:14px; }
.ticket-message { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.message-header { background:var(--surface-2); padding:11px 20px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--border); font-size:13px; }
.message-body { padding:16px 20px; white-space:pre-wrap; font-size:13.5px; line-height:1.75; color:var(--text); }
.message-body .msg-html { white-space:normal; }
.ticket-message.own { border-left:3px solid var(--primary); }
.ticket-message.own .message-header { background:#eef2ff; }
.avatar-sm { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10.5px; font-weight:700; flex-shrink:0; }

/* ── Status / Priority badges ── */
.status-badge { font-size:11.5px; }
.badge-open     { background:#dbeafe; color:#1d4ed8; }
.badge-progress { background:#ede9fe; color:#5b21b6; }
.badge-waiting  { background:#fef3c7; color:#92400e; }
.badge-resolved { background:#dcfce7; color:#14532d; }
.badge-closed   { background:#f1f5f9; color:#475569; }
.priority-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.priority-dot.priority-low    { background:#94a3b8; }
.priority-dot.priority-medium { background:#f59e0b; }
.priority-dot.priority-high   { background:#ef4444; }
.priority-dot.priority-urgent { background:#7c3aed; animation:pulse 1.5s infinite; }
.priority-label { font-size:12px; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Responsive ── */
@media (max-width: 991px) {
    .cl-layout { margin-left:0; }
    .cl-sidebar { transform:translateX(-100%); }
    .cl-sidebar.open { transform:none; box-shadow:4px 0 20px rgba(0,0,0,.3); }
}