:root {
    --sidebar-w: 236px;
    --sidebar-bg: #1f2a37;
    --brand: #0d6efd;
}

body { background: #f4f6f9; font-size: .925rem; }
body.blank { background: #eef1f5; }

/* ---------- Backoffice ---------- */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
    background: var(--sidebar-bg); color: #c9d1d9; z-index: 1030; overflow-y: auto;
    transition: transform .2s;
}
.sidebar .brand {
    display: block; padding: 1rem 1.25rem; font-size: 1.15rem; font-weight: 600;
    color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar .nav { padding: .5rem; list-style: none; margin: 0; }
.sidebar .nav-link {
    display: flex; align-items: center; gap: .6rem; color: #c9d1d9;
    border-radius: .4rem; padding: .5rem .75rem;
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active { background: var(--brand); color: #fff; }
.sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #7d8590; padding: 1rem .75rem .25rem; }
.sidebar a { color: #c9d1d9; }

.main { margin-left: var(--sidebar-w); min-height: 100vh; }
.topbar {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem;
    background: #fff; border-bottom: 1px solid #e5e7eb; padding: .6rem 1.25rem;
}
.topbar .search { max-width: 560px; }
.content { padding: 1.25rem; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
    .main { margin-left: 0; }
}

.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%; background: #0d6efd; color: #fff; font-weight: 600; font-size: .85rem;
}
.topbar .avatar { width: 26px; height: 26px; font-size: .75rem; }
.avatar-customer { background: #6c757d; }

.card { border-color: #e5e7eb; }
.card-header { background: #fff; }
.stat-card { transition: transform .1s, box-shadow .1s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #212529; line-height: 1; }
.stat-label { font-size: .8rem; color: #6c757d; margin-top: .3rem; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; }
.status-badge { font-weight: 500; }
.logo-xs { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; background: #fff; }
.logo-preview { max-height: 56px; max-width: 160px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px; background: #fff; }

.ticket-table td { padding-top: .65rem; padding-bottom: .65rem; }
.ticket-table tr.overdue td:first-child { box-shadow: inset 3px 0 0 #dc3545; }
.ticket-cell { min-width: 260px; }
.filters .form-label { margin-bottom: .15rem; color: #6c757d; }

/* Conversazione */
.timeline { display: flex; flex-direction: column; gap: .75rem; }
.msg { background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: 1rem; }
.msg-head { display: flex; gap: .75rem; align-items: center; margin-bottom: .6rem; }
.msg-body { white-space: normal; word-wrap: break-word; line-height: 1.55; }
.msg-agent { border-left: 3px solid var(--brand); }
.msg-customer { border-left: 3px solid #adb5bd; }
.msg-note { background: #fff8e1; border-color: #ffe08a; border-left: 3px solid #ffc107; }
.attachments { display: flex; flex-wrap: wrap; gap: .4rem; }
.attachment {
    display: inline-flex; gap: .3rem; align-items: center; padding: .25rem .6rem; font-size: .8rem;
    border: 1px solid #dee2e6; border-radius: 1rem; text-decoration: none; background: #f8f9fa;
}
.reply-box.note-mode { border-color: #ffc107; }
.reply-box.note-mode textarea { background: #fffdf3; }
.activity .list-group-item { padding: .5rem .75rem; }

/* Aziende */
.company-card { border-top: 3px solid var(--brand); }
.company-logo {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
.company-logo span { font-weight: 700; color: var(--brand); }
.min-w-0 { min-width: 0; }

.portal-preview { border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; background: #f4f6f9; padding-bottom: .4rem; }
.pp-head { background: #fff; border-bottom: 3px solid var(--brand); padding: .6rem .8rem; min-height: 48px; display: flex; align-items: center; }
.pp-head img { max-height: 32px; max-width: 140px; object-fit: contain; }
.pp-head span { font-weight: 700; color: var(--brand); }
.pp-body { margin: .6rem; background: #fff; border-radius: .4rem; padding: .6rem; }
.pp-line { height: 8px; background: #e9ecef; border-radius: 4px; margin-bottom: .4rem; }
.pp-btn { display: inline-block; background: var(--brand); color: #fff; font-size: .7rem; padding: .25rem .6rem; border-radius: .3rem; }

pre.code { background: #1f2a37; color: #e6edf3; padding: .75rem; border-radius: .4rem; font-size: .75rem; white-space: pre-wrap; }

/* ---------- Portale clienti ---------- */
body.portal { background: #f4f6f9; }
.portal-header { background: #fff; border-bottom: 1px solid #e5e7eb; padding: .9rem 0; }
.portal-logo { max-height: 52px; max-width: 220px; object-fit: contain; }
.portal-name { font-size: 1.35rem; font-weight: 700; color: var(--brand); }
.portal-tag { color: #6c757d; font-size: .9rem; }
.portal-hero { height: 110px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #000)); }
.portal-main { margin-top: -70px; max-width: 1080px; }
.portal-card { border: 0; box-shadow: 0 .25rem 1rem rgba(0,0,0,.06); border-radius: .75rem; }
.portal .msg-agent { border-left-color: var(--brand); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: color-mix(in srgb, var(--brand) 85%, #000); border-color: color-mix(in srgb, var(--brand) 85%, #000); color: #fff; }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
.bg-brand { background: var(--brand) !important; }
.portal .form-control:focus, .portal .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 25%, transparent); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }