/* ============================================================
   Outreach System — CSS Custom (stile WordPress admin-like)
   ============================================================ */

/* --- Variables --- */
:root {
    --sidebar-width: 220px;
    --sidebar-bg: #1d2327;
    --sidebar-hover: #2c3338;
    --sidebar-active: #2271b1;
    --sidebar-text: #c3c4c7;
    --sidebar-text-active: #fff;
    --topbar-height: 56px;
    --topbar-bg: #fff;
    --content-bg: #f0f0f1;
}

/* --- Header aree --- */
.app-header {
    background-color: #1d2327;
    height: 36px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
}

.header-inner {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 16px;
}

.header-brand {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-right: 24px;
    white-space: nowrap;
}

.header-brand:hover {
    color: #72aee6;
}

.header-areas {
    display: flex;
    gap: 4px;
}

.header-area-link {
    color: #c3c4c7;
    font-size: 12px;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 3px;
    transition: background-color .15s, color .15s;
}

.header-area-link:hover {
    color: #fff;
    background-color: rgba(255,255,255,.1);
}

.header-area-link.active {
    color: #fff;
    background-color: #2271b1;
}

.header-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-username {
    color: #c3c4c7;
    font-size: 12px;
}

.header-logout {
    color: #d63638;
    font-size: 12px;
    text-decoration: none;
}

.header-logout:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Layout --- */
html, body {
    overflow-x: hidden;
}

body {
    background-color: var(--content-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

.app-wrapper {
    display: flex;
    min-height: calc(100vh - 36px);
    margin-top: 36px;
    max-width: 100%;
}

.app-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: calc(100% - var(--sidebar-width));
}

.app-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* Navbar header: impedisci che il bottone Esci sbordi a destra */
.header-inner {
    overflow: hidden;
}
.header-areas {
    min-width: 0;
    flex-wrap: wrap;
}
.header-user {
    flex-shrink: 0;
}

/* Topbar: impedisci che la badge del notifica/username/Esci sbordi */
.app-topbar > div {
    min-width: 0;
}
.app-topbar .dropdown-menu {
    max-width: calc(100vw - 40px);
}

/* --- Sidebar --- */
.app-sidebar {
    position: fixed;
    top: 36px;
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - 36px);
    background-color: var(--sidebar-bg);
    overflow-y: auto;
    z-index: 1000;
}

.sidebar-header {
    padding: 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.sidebar-brand {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: -0.3px;
}

.sidebar-brand:hover {
    color: var(--sidebar-active);
}

.sidebar-nav {
    padding: 8px 0;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list .nav-item {
    margin: 0;
}

.nav-list .nav-link {
    display: block;
    padding: 8px 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: background-color .1s, color .1s;
}

.nav-list .nav-link:hover {
    background-color: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.nav-list .nav-link.active {
    background-color: var(--sidebar-active);
    color: var(--sidebar-text-active);
}

/* Submenu */
.nav-list .has-submenu > .nav-link::after {
    content: '\25BC';
    float: right;
    font-size: 9px;
    line-height: 1.8;
    transition: transform .2s;
}

.nav-list .has-submenu > .nav-link[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgba(0,0,0,.15);
}

.submenu .nav-link {
    padding-left: 24px;
    font-size: 12.5px;
}

/* --- Topbar --- */
.app-topbar {
    background-color: var(--topbar-bg);
    height: var(--topbar-height);
    padding: 0 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdcde;
    position: sticky;
    top: 0;
    z-index: 900;
}

.app-topbar h5 {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
}

/* --- Cards --- */
.card {
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #c3c4c7;
    font-weight: 600;
}

/* --- Tables --- */
.table {
    font-size: 13px;
}

.table thead th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #50575e;
    border-bottom-width: 1px;
}

.table-hover tbody tr:hover {
    background-color: #f6f7f7;
}

/* --- Buttons --- */
.btn-primary {
    background-color: #2271b1;
    border-color: #2271b1;
}

.btn-primary:hover {
    background-color: #135e96;
    border-color: #135e96;
}

/* --- Forms --- */
.form-control, .form-select, .tom-select .ts-control {
    border: 2px solid #495057 !important;
    background-color: #fff !important;
    color: #212529 !important;
}
.form-control:focus, .form-select:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35) !important;
}
.form-control::placeholder {
    color: #6c757d !important;
    opacity: 0.8 !important;
}
.form-control:disabled, .form-select:disabled {
    border-style: dashed !important;
    background-color: #e9ecef !important;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 5px, rgba(0,0,0,.03) 5px, rgba(0,0,0,.03) 10px
    ) !important;
    opacity: 1 !important;
}

/* --- Status badges --- */
.badge-status {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
}

.badge-found      { background-color: #00a32a; color: #fff; }
.badge-pending     { background-color: #dba617; color: #fff; }
.badge-not_found   { background-color: #d63638; color: #fff; }
.badge-form_only   { background-color: #e26f56; color: #fff; }
.badge-to_contact  { background-color: #2271b1; color: #fff; }
.badge-sent        { background-color: #00a32a; color: #fff; }
.badge-delivered   { background-color: #008a20; color: #fff; }
.badge-opened      { background-color: #006505; color: #fff; }
.badge-bounced     { background-color: #d63638; color: #fff; }
.badge-no_response { background-color: #787c82; color: #fff; }
.badge-responded   { background-color: #2271b1; color: #fff; }
.badge-queued      { background-color: #72aee6; color: #fff; }
.badge-error       { background-color: #d63638; color: #fff; }
.badge-blacklisted { background-color: #1d2327; color: #fff; }

/* --- Alert flash --- */
.alert {
    font-size: 13px;
    border-radius: 4px;
}

/* --- Pagination --- */
.pagination .page-link {
    font-size: 13px;
    color: #2271b1;
}

.pagination .page-item.active .page-link {
    background-color: #2271b1;
    border-color: #2271b1;
}

/* --- Badge teal (contattare via form) --- */
.bg-teal { background-color: #20c997 !important; color: #fff; }

/* --- Settings: campo secret mascherato --- */
.field-masked {
    -webkit-text-security: disc;
    text-security: disc;
    font-family: text-security-disc, monospace;
}

/* --- Nav tabs (settings) --- */
.nav-tabs .nav-link {
    font-size: 13px;
    color: #50575e;
}

.nav-tabs .nav-link.active {
    font-weight: 600;
}

/* --- Progress bar --- */
.progress-bar {
    background-color: #2271b1;
}

/* --- Workflow step bar (added b504d93) --- */
.workflow-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 24px;
    background: #fff;
    border-bottom: 1px solid #dcdcde;
}

.workflow-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: #50575e;
    text-decoration: none;
    border-radius: 20px;
    background: #f0f0f1;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

.workflow-step:hover {
    background: #dcdcde;
    color: #1d2327;
}

.workflow-step.active {
    background: var(--sidebar-active);
    color: #fff;
}

.workflow-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0,0,0,.1);
    color: inherit;
}

.workflow-step.active .workflow-step-num {
    background: rgba(255,255,255,.25);
}

.workflow-arrow {
    color: #c3c4c7;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    user-select: none;
}

/* --- Sidebar section labels --- */
.nav-section {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background-color: rgba(255,255,255,.08);
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 8px;
}

.nav-section:first-child {
    border-top: none;
    margin-top: 0;
}

/* --- Misc --- */
.font-monospace {
    font-size: 12px !important;
}

.text-truncate-150 {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* ============================================================
   Ticket System — Risposte & Conversazione
   ============================================================ */

/* --- Responses list: riga con nuovi messaggi da leggere --- */
.conv-row-unread {
    background-color: #e8f4fd !important;
    border-left: 4px solid #0d6efd !important;
    font-weight: 600;
}
.conv-row-unread:hover {
    background-color: #d0e8fa !important;
}
.conv-row-unread td:first-child {
    padding-left: 8px;
}

/* --- Conversation: tabella thread --- */
.ticket-table {
    font-size: 13px;
    margin-bottom: 0;
}
.ticket-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #50575e;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}
.ticket-table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}
.ticket-table .msg-row {
    cursor: pointer;
    transition: background-color .15s;
}
.ticket-table .msg-row:hover {
    background-color: #e9ecef !important;
}
.ticket-table .msg-incoming {
    border-left: 3px solid #198754;
}
.ticket-table .msg-outgoing {
    border-left: 3px solid #0d6efd;
}
.ticket-table .msg-unclassified {
    background-color: #fffbe6;
}

/* --- Pannello body espandibile --- */
.msg-body-panel {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 16px 20px;
    font-size: 13px;
    line-height: 1.6;
    max-height: 500px;
    overflow-y: auto;
}
.msg-body-panel .quoted-block {
    margin-top: 10px;
    padding: 8px 12px;
    border-left: 3px solid #dee2e6;
    color: #6c757d;
    font-size: 12px;
    white-space: pre-wrap;
}

/* --- Direction icons --- */
.dir-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
.dir-icon-out {
    background: #cfe2ff;
    color: #0d6efd;
}
.dir-icon-in {
    background: #d1e7dd;
    color: #198754;
}

/* --- Reply card collapsible --- */
.reply-card-header {
    cursor: pointer;
    user-select: none;
}
.reply-card-header .chevron {
    transition: transform .2s;
}
.reply-card-header.collapsed .chevron {
    transform: rotate(-90deg);
}

/* --- Ticket header improvements --- */
.ticket-header {
    border-left: 4px solid #2271b1;
}

/* --- Expand/collapse toggle --- */
.msg-expand-btn {
    cursor: pointer;
    font-size: 11px;
    color: #6c757d;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all .15s;
    border: 1px solid transparent;
}
.msg-expand-btn:hover {
    background: #e9ecef;
    color: #333;
    border-color: #dee2e6;
}

/* --- Classification form inline --- */
.classify-inline {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 8px;
}

/* ============================================================
   Networks — Badge e stili
   ============================================================ */
.bg-purple {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

/* ============================================================
   Accessibilità — Alto contrasto (STANDARDS.md §4)
   ============================================================ */

/* Badge accessibili: icone oltre al colore */
.badge-success::before  { content: "✓ "; }
.badge-error::before,
.badge-danger::before   { content: "✗ "; }
.badge-warning::before  { content: "⚠ "; }

/* Tom Select focus */
.tom-select.focus .ts-control {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35) !important;
}

/* Contrasto minimo su link dentro contenuto */
.app-content a:not(.btn):not(.nav-link):not(.badge) {
    text-decoration: underline;
}

/* Badge filtro inattivi — visibili su sfondo bianco (STANDARDS.md §4) */
.badge-filter-inactive {
    background-color: #e9ecef !important;
    color: #495057 !important;
    border: 1px solid #adb5bd !important;
    cursor: pointer;
}
.badge-filter-inactive:hover {
    background-color: #dee2e6 !important;
}