/* Design system MD3-like, inspirado em HubSpot/Intercom/Zendesk (redesign
   2026-08-04) - paleta própria do AJV.AI, não mais espelhando o ERP. */
:root {
    --sidebar-width: 76px;
    --topbar-height: 64px;
    --sidebar-bg: #0F172A;
    --primary-color: #2563EB;
    --primary-hover: #3B82F6;
    --primary-soft: #EFF6FF;
    --app-surface: #F8FAFC;
    --app-card: #FFFFFF;
    --app-border: #E2E8F0;
    --app-text: #0F172A;
    --app-text-muted: #64748B;
    --app-radius-lg: 16px;
    --app-radius-sm: 12px;
    --app-shadow-sm: 0 2px 6px rgba(15, 23, 42, .06);
    --app-transition: 180ms ease;
}

* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 400;
    background-color: var(--app-surface);
    color: var(--app-text);
}

/* Shell (rail de ícones + topbar) mora em shell.css - carregado só no
   _Layout.cshtml, junto com os partials _IconSidebar/_Topbar. */

.app-shell {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    padding: 24px;
    min-width: 0;
}

/* ==========================================
   CARDS / COMPONENTES
========================================== */

.card {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

.btn {
    border-radius: var(--app-radius-sm);
    transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}

.form-control, .form-select {
    border-radius: var(--app-radius-sm);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-primary:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
    }

.badge-status-online {
    background-color: #16a34a;
}

/* ==========================================
   LOGIN
========================================== */

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface);
}

.login-card {
    max-width: 380px;
    width: 100%;
}

/* Estilos da tela de Conversas (grid 4 colunas, bolhas, etc.) moram em
   conversas.css - carregado só por Pages/Conversas.cshtml. */