/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f1f5f9; color: #1e293b; line-height: 1.5; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Badges ───────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }
.badge-yellow { background:#fef9c3; color:#854d0e; }
.badge-orange { background:#ffedd5; color:#c2410c; }
.badge-purple { background:#f3e8ff; color:#6b21a8; }
.badge-green  { background:#dcfce7; color:#15803d; }
.badge-gray   { background:#f1f5f9; color:#475569; }
.badge-red    { background:#fee2e2; color:#b91c1c; }

/* ── Cards & Panels ───────────────────────────────── */
.card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.card-body { padding:1.5rem; }
.card-header { padding:1rem 1.5rem; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; }
.card-header h2 { font-size:1rem; font-weight:600; color:#334155; }

/* ── Forms ────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.875rem; font-weight:500; color:#374151; margin-bottom:.375rem; }
.form-control { width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:.625rem .875rem; font-size:.875rem; color:#1e293b; background:#fff; transition:border .15s,box-shadow .15s; }
.form-control:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.form-control.error { border-color:#ef4444; background:#fff5f5; }
.form-text { font-size:.75rem; color:#94a3b8; margin-top:.25rem; }
.error-msg { font-size:.75rem; color:#dc2626; margin-top:.25rem; }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:100px; }

/* ── Buttons ──────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.25rem; border-radius:8px; font-size:.875rem; font-weight:600; cursor:pointer; border:none; transition:all .15s; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { background:#1d4ed8; }
.btn-secondary { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.btn-secondary:hover { background:#e2e8f0; }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-success { background:#16a34a; color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-sm { padding:.35rem .75rem; font-size:.8rem; }
.btn-full { width:100%; justify-content:center; }

/* ── Alerts ───────────────────────────────────────── */
.alert { padding:.875rem 1.25rem; border-radius:8px; font-size:.875rem; margin-bottom:1rem; display:flex; gap:.5rem; align-items:flex-start; }
.alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.alert-error   { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
.alert-info    { background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; }
.alert-warning { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }

/* ── Tables ───────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead tr { background:#f8fafc; border-bottom:1px solid #e2e8f0; }
thead th { padding:.75rem 1rem; text-align:left; font-size:.75rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
tbody tr { border-bottom:1px solid #f1f5f9; transition:background .1s; }
tbody tr:hover { background:#f8fafc; }
tbody tr:last-child { border-bottom:none; }
tbody td { padding:.75rem 1rem; color:#374151; }
tbody tr.clickable { cursor:pointer; }

/* ── Pagination ───────────────────────────────────── */
.pagination { display:flex; gap:.375rem; align-items:center; flex-wrap:wrap; padding:1rem 1.5rem; border-top:1px solid #f1f5f9; }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:2rem; height:2rem; padding:0 .5rem; border-radius:6px; font-size:.8rem; font-weight:500; border:1px solid #e2e8f0; color:#475569; transition:all .1s; }
.pagination a:hover { background:#f1f5f9; text-decoration:none; }
.pagination .active { background:#2563eb; color:#fff; border-color:#2563eb; }
.pagination .disabled { color:#cbd5e1; pointer-events:none; }

/* ── Layout Portal ────────────────────────────────── */
.portal-nav { background:#fff; border-bottom:1px solid #e2e8f0; }
.portal-nav .inner { max-width:900px; margin:0 auto; padding:.875rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.portal-nav .brand { display:flex; align-items:center; gap:.625rem; font-weight:700; color:#1e293b; font-size:1.05rem; }
.portal-nav .brand .logo { height:36px; min-width:80px; padding:0 10px; background:#2563eb; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; }
.portal-nav .nav-links { display:flex; gap:1.5rem; }
.portal-nav .nav-links a { font-size:.875rem; color:#64748b; font-weight:500; }
.portal-nav .nav-links a:hover, .portal-nav .nav-links a.active { color:#2563eb; text-decoration:none; }
.portal-main { max-width:900px; margin:0 auto; padding:2rem 1.5rem; }
.portal-footer { text-align:center; padding:2rem; font-size:.8rem; color:#94a3b8; border-top:1px solid #e2e8f0; margin-top:2rem; }

/* ── Layout Backoffice ────────────────────────────── */
.bo-wrap { display:flex; min-height:100vh; }
.bo-sidebar { width:220px; background:#0f172a; color:#94a3b8; display:flex; flex-direction:column; flex-shrink:0; position:fixed; top:0; bottom:0; left:0; overflow-y:auto; }
.bo-sidebar .brand { padding:1.25rem 1rem; border-bottom:1px solid #1e293b; display:flex; align-items:center; gap:.625rem; }
.bo-sidebar .brand .logo { height:32px; min-width:70px; padding:0 8px; background:#2563eb; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.8rem; flex-shrink:0; }
.bo-sidebar .brand span { font-size:.875rem; font-weight:600; color:#f1f5f9; }
.bo-sidebar nav { flex:1; padding:.75rem .5rem; }
.bo-sidebar nav a { display:flex; align-items:center; gap:.625rem; padding:.6rem .875rem; border-radius:8px; font-size:.875rem; color:#94a3b8; transition:all .15s; margin-bottom:2px; }
.bo-sidebar nav a:hover { background:#1e293b; color:#f1f5f9; text-decoration:none; }
.bo-sidebar nav a.active { background:#2563eb; color:#fff; }
.bo-sidebar nav .nav-section { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#475569; padding:.875rem .875rem .375rem; }
.bo-sidebar .user-area { padding:1rem; border-top:1px solid #1e293b; }
.bo-sidebar .user-area .name { font-size:.8rem; color:#f1f5f9; font-weight:600; }
.bo-sidebar .user-area .role { font-size:.75rem; color:#64748b; }
.bo-sidebar .user-area a { font-size:.75rem; color:#ef4444; display:inline-block; margin-top:.5rem; }
.bo-content { margin-left:220px; flex:1; display:flex; flex-direction:column; min-height:100vh; }
.bo-topbar { background:#fff; border-bottom:1px solid #e2e8f0; padding:.875rem 1.5rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.bo-topbar h1 { font-size:1.05rem; font-weight:600; color:#1e293b; }
.bo-main { flex:1; padding:1.5rem; }

/* ── Chat ─────────────────────────────────────────── */
.msg-wrap { display:flex; gap:.75rem; margin-bottom:1rem; }
.msg-wrap.from-tech { flex-direction:row-reverse; }
.msg-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.875rem; flex-shrink:0; }
.msg-avatar.client { background:#22c55e; }
.msg-avatar.tech { background:#2563eb; }
.msg-bubble { max-width:520px; }
.msg-bubble .meta { font-size:.75rem; color:#94a3b8; margin-bottom:.25rem; }
.msg-bubble .text { padding:.75rem 1rem; border-radius:12px; font-size:.875rem; line-height:1.6; white-space:pre-wrap; }
.msg-wrap:not(.from-tech) .text { background:#f8fafc; border:1px solid #e2e8f0; }
.msg-wrap.from-tech .text { background:#eff6ff; border:1px solid #bfdbfe; }
.internal-note { background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:.875rem 1rem; margin-bottom:1rem; }
.internal-note .label { font-size:.7rem; font-weight:700; color:#92400e; background:#fef3c7; padding:2px 8px; border-radius:99px; display:inline-block; margin-bottom:.5rem; }

/* ── Misc ─────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem; }
.stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:1.25rem 1.5rem; }
.stat-card .label { font-size:.8rem; color:#64748b; font-weight:500; margin-bottom:.375rem; }
.stat-card .value { font-size:2rem; font-weight:700; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.flex-center  { display:flex; align-items:center; gap:.5rem; }
.text-muted   { color:#94a3b8; }
.text-sm      { font-size:.875rem; }
.text-xs      { font-size:.75rem; }
.mb-1  { margin-bottom:.25rem; }
.mb-2  { margin-bottom:.5rem; }
.mb-4  { margin-bottom:1rem; }
.mb-6  { margin-bottom:1.5rem; }
.mt-4  { margin-top:1rem; }
.mt-6  { margin-top:1.5rem; }
.w-full { width:100%; }
.priority-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
/* ── Stats grid ───────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-bottom:1.5rem; }

/* ── Ticket card (mobile list) ────────────────────── */
.ticket-card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:.875rem 1rem; margin-bottom:.625rem; cursor:pointer; transition:background .1s; }
.ticket-card:hover { background:#f8fafc; }
.ticket-card:last-child { margin-bottom:0; }

/* ── Show/hide helpers ────────────────────────────── */
.desktop-only { display:block; }
.mobile-only  { display:none; }

/* ── Sidebar overlay (mobile) ─────────────────────── */
.bo-sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:30; }

/* ── Mobile ───────────────────────────────────────── */
@media(max-width:768px){
    /* Sidebar: escondida por defeito, desliza da esquerda */
    .bo-sidebar {
        position:fixed; top:0; left:0; bottom:0;
        width:240px; z-index:40;
        transform:translateX(-100%);
        transition:transform .25s ease;
    }
    .bo-sidebar.open { transform:translateX(0); }
    .bo-sidebar-overlay.open { display:block; }

    /* Conteúdo ocupa tudo */
    .bo-content { margin-left:0; }

    /* Topbar hamburguer */
    .bo-topbar { padding:.75rem 1rem; }
    .bo-topbar h1 { font-size:.95rem; }

    /* Grids */
    .grid-2,.grid-3 { grid-template-columns:1fr; }

    /* Stats: 2 colunas em mobile */
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .stats-grid .stat-card:first-child { grid-column:1/-1; }

    /* Tabela/Cards toggle */
    .desktop-only { display:none; }
    .mobile-only  { display:block; }

    /* Tabela de tickets em outras páginas: scroll horizontal */
    .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table { min-width:600px; }

    /* Cards backoffice */
    .card-body { padding:1rem; }
    .card-header { padding:.875rem 1rem; }

    /* Formulários */
    .flex-between { flex-wrap:wrap; gap:.75rem; }

    /* Botões */
    .btn { padding:.55rem 1rem; font-size:.8rem; }

    /* Portal */
    .portal-main { padding:1rem; }
    .portal-nav .inner { padding:.75rem 1rem; }
    .portal-nav .nav-links { gap:1rem; }
    .portal-nav .brand span { font-size:.9rem; }
}

@media(max-width:480px){
    .stats-grid { grid-template-columns:1fr 1fr; }
    .bo-main { padding:1rem; }
    .portal-main { padding:1rem; }
    .portal-nav .inner { padding:.75rem 1rem; }
    .portal-nav .nav-links { gap:.875rem; }
    .portal-nav .nav-links a { font-size:.8rem; }
}