/**
 * helpdesk-diomira.css — restyling brand Diomira per supporto.diomira.eu
 *
 * Drop-in: caricare DOPO assets/helpdeskz/css/helpdesk.css per override.
 * Layout HelpDeskZ v2.0.2 (Bootstrap 4 base). Brand extract: nota MCP
 * moodash/brand-supporto-diomira.
 *
 * Strategia:
 *  - Definisce CSS custom properties (token brand) a livello :root
 *  - Sostituisce hardcoded gradients usando le variabili
 *  - Aggiunge classi utility per linguaggio MooDash (--mira, --bridge, --new)
 *
 * Non rimuove regole esistenti: ogni override è additivo.
 */

:root {
    /* Brand core — gradiente signature */
    --brand-dark:        #19323f;
    --brand-near-black:  #101111;
    --brand-dark-alt:    #212427;
    --brand-hover-blue:  #75b0cd;
    --brand-gradient:    linear-gradient(133deg, var(--brand-dark), var(--brand-near-black));
    --brand-gradient-soft: linear-gradient(133deg, #19323fcf, #212427);

    /* Link e accent */
    --link:              #0077ff;
    --link-soft:         #6bafff;
    --accent-warm:       #fff5e5;
    --bubble-email:      #e7f0fe;
    --icon-bg:           #edf2f6;

    /* Testo */
    --text-body:         #4d4d4d;
    --text-heading:      #2d3232;
    --text-muted:        #88837f;

    /* Superfici */
    --surface-input:     #f0f0f0;
    --surface-footer:    #efefef;
    --border-light:      #d9d6d6;
    --border-medium:     #c3c2c2;

    /* Codice colori CLAUDE.md (linguaggio visivo MooDash) */
    --color-existing:    #88837f;   /* grigio */
    --color-new:         #7c3aed;   /* viola */
    --color-ai:          #f5a623;   /* ambra */
    --color-bridge:      #ff6b5b;   /* corallo */

    /* Radii */
    --r-pill:    100px;
    --r-card:    15px;
    --r-btn:     30px;
    --r-input:   5px;
}

/* ── Brand pill su navbar e bottoni primari ─────────────────────────────── */

.navbar-light .navbar-nav .nav-link {
    background-image: var(--brand-gradient);
}

.btn-primary {
    background-image: var(--brand-gradient-soft);
    border: 0;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-hover-blue);
    border-color:    var(--brand-hover-blue);
}

.filters button,
.learning-center-list button,
.email .btn,
.exitMessage .btn {
    background-image: var(--brand-gradient);
}

/* ── Badge MIRA — distintivo conversazioni con copilota ────────────────── */

.badge-mira {
    background-color: var(--color-ai);
    color: var(--brand-near-black);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-mira::before {
    content: "✦";
    font-size: 0.8em;
}

.badge-bridge {
    background-color: var(--color-bridge);
    color: white;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--r-pill);
}

/* ── Pulsante "Promuovi a MooDash" ─────────────────────────────────────── */

.btn-promote-moodash {
    background-color: var(--color-bridge);
    color: white;
    border: 0;
    border-radius: var(--r-btn);
    padding: 6px 16px;
    font-weight: 500;
    transition-duration: 150ms;
}
.btn-promote-moodash:hover {
    background-color: #e85542;
    color: white;
    transform: scale(98%);
}
.btn-promote-moodash::before {
    content: "↗ ";
    font-weight: 700;
}

/* ── Bozze MIRA — box suggerimento risposta operatore ──────────────────── */

.mira-suggestion {
    background-color: var(--accent-warm);
    border: 1px solid var(--color-ai);
    border-radius: var(--r-card);
    padding: 16px;
    margin: 16px 0;
    position: relative;
}
.mira-suggestion::before {
    content: "✦ Bozza MIRA";
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--color-ai);
    color: var(--brand-near-black);
    font-size: 0.8em;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--r-pill);
}
.mira-suggestion .actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}
.mira-suggestion .actions button {
    background: var(--brand-gradient);
    color: white;
    border: 0;
    padding: 6px 14px;
    border-radius: var(--r-btn);
    font-weight: 500;
}
.mira-suggestion .actions .secondary {
    background: white;
    color: var(--text-body);
    border: 1px solid var(--border-medium);
}

/* ── KPI cards (Dashboard staff) ───────────────────────────────────────── */

.kpi-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 18px;
    transition-duration: 150ms;
}
.kpi-card:hover {
    transform: scale(99%);
}
.kpi-card .label {
    color: var(--text-muted);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-card .value {
    color: var(--text-heading);
    font-size: 2.3em;
    font-weight: 500;
    line-height: 1;
    margin-top: 6px;
}
.kpi-card .delta {
    font-size: 0.85em;
    margin-top: 4px;
}
.kpi-card .delta.up   { color: #2ea043; }
.kpi-card .delta.down { color: #cf222e; }

/* ── Categoria ticket — chip platform ──────────────────────────────────── */

.chip-platform {
    background: var(--icon-bg);
    color: var(--text-heading);
    font-weight: 500;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: 0.85em;
}

/* ── Sidebar staff densa ───────────────────────────────────────────────── */

@media (min-width: 992px) {
    .staff-panel .list-group-item {
        padding: 8px 12px !important;
    }
    .staff-panel .ticket-row {
        font-size: 0.9em;
    }
}

/* ── Monitoraggio: card stato istanze MooDash embedded ─────────────────── */

.monitor-instance {
    border-radius: var(--r-card);
    padding: 12px;
    background: white;
    border-left: 4px solid var(--color-existing);
}
.monitor-instance.status-ok    { border-left-color: #2ea043; }
.monitor-instance.status-warn  { border-left-color: var(--color-ai); }
.monitor-instance.status-down  { border-left-color: var(--color-bridge); }
.monitor-instance .name { font-weight: 500; color: var(--text-heading); }
.monitor-instance .url  { color: var(--text-muted); font-size: 0.85em; }

/* ── Form ticket pre-strutturato (portale cliente) ─────────────────────── */

.ticket-structured .form-section {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    padding: 18px;
    margin-bottom: 12px;
}
.ticket-structured .form-section h4 {
    color: var(--text-heading);
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 12px;
}

/* ════ Wizard ticket (r4) — minimal additions sopra layout HDZ ════════════ */

/* Mostra solo lo step attivo */
.wizard-step { display: none; }
.wizard-step.active {
   display: block;
   animation: wizardFade 280ms ease;
}

@keyframes wizardFade {
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }
}

/* Progress dots */
.wizard-progress {
   display: flex;
   justify-content: center;
   gap: 8px;
   padding: 14px 0 6px;
}
.wizard-dot {
   width: 8px;
   height: 8px;
   border-radius: 100px;
   background-color: rgb(217, 214, 214);
   transition: background-color 200ms, transform 200ms;
}
.wizard-dot.skipped { opacity: 0.25; }
.wizard-dot.done    { background-color: #75b0cd; }
.wizard-dot.current {
   background-image: linear-gradient(133deg, #19323f, #101111);
   transform: scale(1.4);
}

/* Riga azioni dentro la card-message */
.wizard-actions {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
}
.wizard-step[data-step="1"] .wizard-actions {
   justify-content: flex-end;
}

.wizard-back {
   color: #88837f !important;
   text-decoration: none !important;
   padding-left: 6px !important;
   padding-right: 6px !important;
}
.wizard-back:hover { color: #2d3232 !important; }

/* Shake card su validazione fallita */
.wizard-step.shake { animation: wizardShake 360ms; }
@keyframes wizardShake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-5px); }
   50% { transform: translateX(5px); }
   75% { transform: translateX(-2px); }
}

.is-invalid { border-color: #ff6b5b !important; }

/* ── Wizard r4 fix sizing card + bottoni visibili ────────────────────── */

/* Card più compatta: meno padding, font leggermente ridotto */
.messages-container .wizard-step.card {
   padding: 18px 20px !important;
   margin-bottom: 14px !important;
}
.messages-container .wizard-step.card p {
   font-size: 1em;
   line-height: 1.45;
   margin-bottom: 0;
}
.messages-container .wizard-step.card .form-group {
   margin-bottom: 0;
}

/* Bottoni Inizia/Avanti: pill compatto col gradient brand */
.wizard-step .btn[data-next],
.wizard-step .btn-primary[data-next],
.wizard-step .wizard-actions .btn-primary,
.wizard-step button[type="submit"] {
   background-image: linear-gradient(133deg, #19323ff9, rgb(16, 17, 17)) !important;
   color: white !important;
   border: 0 !important;
   border-radius: 50px !important;
   padding: 8px 22px !important;
   font-weight: 500 !important;
   font-family: "Rubik", sans-serif !important;
   font-size: 0.95em !important;
   transition: transform 120ms, opacity 150ms;
}
.wizard-step .btn[data-next]:hover,
.wizard-step .btn-primary[data-next]:hover,
.wizard-step button[type="submit"]:hover {
   opacity: 0.92;
   color: white !important;
}
.wizard-step .btn[data-next]:active {
   transform: scale(0.97);
}

/* Indietro: ghost discreto */
.wizard-step .wizard-back {
   color: #88837f !important;
   font-weight: 400 !important;
   text-decoration: none !important;
   padding: 8px 10px !important;
   font-size: 0.9em !important;
}
.wizard-step .wizard-back:hover { color: #2d3232 !important; }

/* Container: limita width + scroll Y se card supera viewport */
.chat-window-standalone {
   max-width: 720px;
   margin: 0 auto;
}
.messages-container {
   max-height: calc(100vh - 140px);
   overflow-y: auto;
}

/* Riga azioni: spazio sopra ridotto */
.wizard-actions {
   margin-top: 14px !important;
}

/* ── Wizard: select2 styling brand + nasconde icone duplicate ────────── */

/* Le icone <i class="fa position-absolute"> dentro wizard sono decorative
   e si sovrappongono al widget select2. Le nascondo. */
.wizard-step .form-group .position-relative > i.fa.position-absolute {
   display: none !important;
}

/* Stilizza widget select2 dentro wizard */
.wizard-step .select2-container--default .select2-selection--single {
   background-color: white !important;
   border: 1px solid #c3c2c2 !important;
   border-radius: 8px !important;
   height: 48px !important;
   padding: 0 14px !important;
   font-family: "Rubik", sans-serif !important;
   display: flex !important;
   align-items: center;
}
.wizard-step .select2-container--default .select2-selection--single .select2-selection__rendered {
   color: #2d3232 !important;
   line-height: 46px !important;
   padding: 0 !important;
   font-size: 1em !important;
}
.wizard-step .select2-container--default .select2-selection--single .select2-selection__arrow {
   height: 46px !important;
   right: 10px !important;
}
.wizard-step .select2-container--default.select2-container--open .select2-selection--single,
.wizard-step .select2-container--default .select2-selection--single:focus {
   border-color: #19323f !important;
   box-shadow: 0 0 0 3px rgba(25, 50, 63, 0.12) !important;
}

/* Email input: bordino+padding coerente, altezza 48px */
.wizard-step input[type="email"].form-control,
.wizard-step input[type="text"].form-control,
.wizard-step textarea.form-control {
   background-color: white !important;
   border: 1px solid #c3c2c2 !important;
   border-radius: 8px !important;
   padding: 12px 14px !important;
   font-family: "Rubik", sans-serif !important;
   font-size: 1em !important;
   height: 48px !important;
}
.wizard-step textarea.form-control {
   height: auto !important;
   min-height: 120px;
   line-height: 1.45;
}
.wizard-step input[type="email"].form-control:focus,
.wizard-step input[type="text"].form-control:focus,
.wizard-step textarea.form-control:focus {
   border-color: #19323f !important;
   outline: 0 !important;
   box-shadow: 0 0 0 3px rgba(25, 50, 63, 0.12) !important;
}

/* Bottone Indietro davvero ghost (no bg, no border, no rounded box) */
.wizard-step .wizard-back,
.wizard-step .btn-link.wizard-back {
   background: transparent !important;
   background-image: none !important;
   border: 0 !important;
   box-shadow: none !important;
   color: #88837f !important;
   font-weight: 400 !important;
   text-decoration: none !important;
   padding: 8px 12px !important;
   font-size: 0.92em !important;
   border-radius: 0 !important;
}
.wizard-step .wizard-back:hover {
   color: #2d3232 !important;
   background: transparent !important;
}
.wizard-step .wizard-back:focus { box-shadow: none !important; outline: 0 !important; }

/* ── Popup chat: amplia altezza per ospitare wizard ──────────────────── */
#popup:has(#wizard-form),
.popup:has(#wizard-form) {
   min-height: 540px !important;
   height: auto !important;
   max-height: 90vh !important;
   width: min(420px, 95vw) !important;
}
#popup:has(#wizard-form) .ticket-form,
.popup:has(#wizard-form) .ticket-form {
   height: 100%;
}
#popup:has(#wizard-form) .messages-container,
.popup:has(#wizard-form) .messages-container {
   max-height: calc(90vh - 80px);
   overflow-y: auto;
}