/*
 * TEMA MODERNO dell'area clienti.
 *
 * Caricato da Views/client/template.php, home_template.php e maintenance.php DOPO
 * assets/admin/styles/tema_moderno.css (il tema dello staff), solo quando in Setup -> Generale
 * -> Aspetto grafico e' scelto "Moderno" (o con ?stile=nuovo). Dal tema dello staff arrivano
 * colori, pulsanti, etichette, campi, tabelle, avvisi e finestre; qui solo cio' che e' proprio
 * dell'area clienti (helpdesk.css, personal.css): barra in alto, intestazioni, box filtri,
 * scelta del reparto, conversazione del ticket, login.
 *
 * Stessa regola del tema staff: cambia SOLO l'aspetto. Nessun elemento nascosto o spostato.
 * Tutte le regole partono da body.tema-moderno: con il tema classico il file non viene caricato.
 */

/* ================================================================ base */
body.tema-moderno { background: var(--tm-bg); }
body.tema-moderno .form-control { font-weight: 400; }
body.tema-moderno .static_link, body.tema-moderno .static_link:hover { color: var(--tm-accent); }
body.tema-moderno .inactive_link, body.tema-moderno .inactive_link:hover { color: var(--tm-muted); }
/* l'area clienti usa Font Awesome 4: la lente della ricerca DataTables va presa da li' */
body.tema-moderno .dataTables_wrapper .dataTables_filter label::before { font-family: 'FontAwesome'; font-weight: normal; }

/* ================================================================ barra in alto */
body.tema-moderno .navbar {
    background: rgba(255, 255, 255, .94);
    background-image: none;
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--tm-line);
    box-shadow: none;
    padding-top: 12px;
    padding-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 1030;
}
body.tema-moderno .navbar-brand img { width: 130px !important; }
body.tema-moderno .navbar-light .navbar-nav .nav-link {
    color: var(--tm-text-2);
    font-weight: 500;
    text-transform: none;
    font-size: .925rem;
    border-radius: var(--tm-radius-sm);
    padding: .5rem .85rem;
    transition: background .15s, color .15s;
}
body.tema-moderno .navbar-light .navbar-nav .nav-link:hover,
body.tema-moderno .navbar-light .navbar-nav .nav-link:focus {
    color: var(--tm-accent-hover);
    background: var(--tm-accent-soft);
    text-decoration: none;
}
body.tema-moderno .navbar-light .navbar-nav .active > .nav-link { color: var(--tm-accent-hover); }
body.tema-moderno .ml-custom { margin-left: 2rem; }
/* "Apri richiesta": era un riquadro verde alto quanto la barra; ora pulsante principale */
body.tema-moderno button.btn-open-request {
    padding: .6rem 1.2rem !important;
    font-size: .95rem !important;
    border-radius: 999px;
}
body.tema-moderno button.btn-open-request i { margin-right: 4px; }
body.tema-moderno .navbar .dropdown-menu {
    border: 1px solid var(--tm-line);
    border-radius: 12px;
    box-shadow: var(--tm-shadow-lg);
    padding: 6px;
}
body.tema-moderno .navbar .dropdown-item { border-radius: 8px; font-size: .875rem; padding: .5rem .8rem; color: var(--tm-text-2); }
body.tema-moderno .navbar .dropdown-item:hover { background: var(--tm-hover); color: var(--tm-text); }
body.tema-moderno a.languageswitcher img { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--tm-line); }

/* ================================================================ intestazioni di pagina */
body.tema-moderno .row_background_ticket .container,
body.tema-moderno .row_background_ticket_detail .container { background: transparent; }
body.tema-moderno h1.heading,
body.tema-moderno .row_background_ticket h1.heading,
body.tema-moderno .row_background_ticket_detail h1.heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tm-text);
    letter-spacing: -.02em;
    line-height: 1.25;
    padding-top: 1.5rem;
    margin-bottom: .5rem;
}
body.tema-moderno .row_background_ticket_detail .container > .mb-3.text-center,
body.tema-moderno .row_background_ticket .container > .mb-3.text-center { color: var(--tm-muted); font-size: .925rem; }
body.tema-moderno .heading-personal { color: var(--tm-text); font-weight: 700; letter-spacing: -.02em; }
body.tema-moderno .personal_label { color: var(--tm-text); font-weight: 600; font-size: 1.05rem; }
body.tema-moderno h6.card-title { color: var(--tm-text); font-weight: 600; font-size: 1.05rem; }
body.tema-moderno h6.card-title span { color: var(--tm-muted); }

/* ================================================================ filtri dell'elenco */
body.tema-moderno div.filtritickets.collapse-filters-visible {
    height: auto;
    background: #fff;
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    padding: 1.5rem 1.5rem .5rem;
}
body.tema-moderno #aprifiltri {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tm-text-2) !important;
    background: #fff;
    border: 1px solid var(--tm-line);
    box-shadow: none;
}
body.tema-moderno #aprifiltri:hover { color: var(--tm-accent-hover) !important; border-color: var(--tm-accent-line); background: var(--tm-accent-soft); transform: none; }

/* ================================================================ elenchi */
body.tema-moderno #table_tickets { padding: 0; }
body.tema-moderno .table-responsive a {
    color: var(--tm-accent);
    font-weight: 600;
    letter-spacing: 0;
    font-size: inherit;
}
body.tema-moderno .table-responsive a:hover { color: var(--tm-accent-hover); }
body.tema-moderno .table-responsive input { border-color: var(--tm-line); border-radius: var(--tm-radius-sm); }
body.tema-moderno #table_tickets_filter { width: 100%; float: none; padding: 0; }
body.tema-moderno .dataTables_paginate a.current { background: var(--tm-accent); }
body.tema-moderno a.previous, body.tema-moderno a.next { color: var(--tm-muted); }

/* ================================================================ riquadri */
body.tema-moderno .box_department {
    background: #fff;
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    padding: 1.5rem 2rem;
}
body.tema-moderno .jumbotron {
    background: #fff;
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
}
body.tema-moderno div.jumbotron div.text-center label.badge { font-size: .85rem; }
body.tema-moderno .row_background_ticket .tab-content,
body.tema-moderno .row_background_ticket_detail .tab-content {
    background: #fff;
    border: 1px solid var(--tm-line);
    border-top: 0;
    border-radius: 0 0 var(--tm-radius) var(--tm-radius);
    padding: 1.25rem;
}
body.tema-moderno .card-custom {
    border: 1px solid var(--tm-line) !important;
    border-radius: 18px;
    box-shadow: var(--tm-shadow-lg);
}
body.tema-moderno .card-custom h4.card-title { color: var(--tm-text); font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; }
body.tema-moderno .card-custom h5.card-title { color: var(--tm-accent); font-weight: 600; font-size: 1.05rem; }
body.tema-moderno .card-custom p.card-text { color: var(--tm-muted); }
body.tema-moderno .card-custom-avatar img { box-shadow: 0 0 0 4px #fff, var(--tm-shadow-lg); background: #fff; }
body.tema-moderno .alert.alert-light { border-color: var(--tm-line); }
body.tema-moderno .offer-muted { color: var(--tm-muted); }
body.tema-moderno .offer-divider { border-top-color: var(--tm-line); }

/* Scelta del reparto (radio): prima tutti i pallini erano gialli, anche quelli non scelti */
body.tema-moderno .custom-control-label::before {
    background-color: #fff !important;
    border: 1px solid #cbd5e1;
}
body.tema-moderno .custom-control-label { color: var(--tm-text-2); cursor: pointer; }

/* ================================================================ conversazione del ticket */
body.tema-moderno .data_box i { background: var(--tm-accent); }
body.tema-moderno .data_box span,
body.tema-moderno .data_box span.small { color: var(--tm-muted); font-weight: 600; }
body.tema-moderno .risposta_ticket {
    background: #fff;
    border: 1px solid var(--tm-line);
    border-left: 4px solid var(--tm-accent-line);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    padding: 1.25rem 1rem;
}
body.tema-moderno .risposta_ticket.bg-staff {
    background: #f8fafc;
    border-left-color: var(--tm-ok-line);
}
/* scheda di chi scrive (cliente / staff) */
body.tema-moderno .profile-card-4,
body.tema-moderno .bg-staff div.profile-card-4,
body.tema-moderno .profile-card-4 .profile-content,
body.tema-moderno .bg-staff .profile-card-4 .profile-content { background: transparent !important; }
body.tema-moderno .profile-card-4 .profile-content::before,
body.tema-moderno .bg-staff .profile-card-4 .profile-content::before { background: transparent !important; }
body.tema-moderno .profile-card-4 img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--tm-line);
}
body.tema-moderno .profile-card-4:hover img { transform: none; filter: none; }
body.tema-moderno .profile-card-4 .profile-name { color: var(--tm-text); font-weight: 600; }
body.tema-moderno .profile-card-4 .profile-description { color: var(--tm-muted); border-top-color: var(--tm-line); }
body.tema-moderno .risposta_ticket [id^="msg_"] { color: var(--tm-text-2); line-height: 1.6; }

/* modulo di risposta */
body.tema-moderno #replyForm {
    background: #fff;
    border: 1px solid var(--tm-accent-line);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow);
    padding: 1.5rem;
}
body.tema-moderno .custom-file-label { border-color: var(--tm-line); border-radius: var(--tm-radius-sm); }
body.tema-moderno .custom-file-label::after { border-radius: 0 var(--tm-radius-sm) var(--tm-radius-sm) 0; background: #f8fafc; }

/* ================================================================ pie' di pagina */
body.tema-moderno #footer {
    background: transparent;
    border-top: 1px solid var(--tm-line);
    color: var(--tm-muted);
}
body.tema-moderno #footer a { color: var(--tm-muted); }
body.tema-moderno #footer a:hover { color: var(--tm-accent-hover); }

/* ================================================================ login e pagina iniziale */
/* Login cliente: stesso riquadro del login staff (tema-login), ma i campi sono input-group */
body.tema-moderno.tema-login .form-horizontal .form-group .input-group { flex-wrap: nowrap; align-items: center; }
body.tema-moderno.tema-login .form-horizontal .input-group-text {
    background: transparent;
    border: 0;
    color: var(--tm-muted);
    min-height: 44px;
}
body.tema-moderno.tema-login .form-horizontal .forgot-pass a { color: var(--tm-accent); font-weight: 600; }
body.tema-moderno.tema-login .form-horizontal .forgot-pass a:hover { color: var(--tm-accent-hover); }
body.tema-moderno.tema-login .languages-home { padding-top: 1rem; }

/* ================================================================ schermi piccoli */
@media (max-width: 991px) {
    body.tema-moderno .ml-custom { margin-left: 0; }
    body.tema-moderno button.btn-open-request { margin: .75rem 0; }
}
@media (max-width: 767px) {
    body.tema-moderno h1.heading { font-size: 1.4rem; }
    body.tema-moderno .box_department { padding: 1rem; }
}