* {
    box-sizing: border-box;
}

:root {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --text: #18202a;
    --muted: #697586;
    --border: #e2e7ed;
    --primary: #263b52;
    --primary-hover: #1c2e41;
    --accent: #4d7d78;
    --soft: #eef3f4;
    --danger-bg: #fff0f0;
    --danger: #a63535;
}

body {
    margin: 0;
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    background: var(--bg);
    color: var(--text);
}

button,
input,
textarea {
    font: inherit;
}


/* LOGIN */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.login-layout {
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 90px;
    align-items: center;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand-mark {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-weight: 700;
    letter-spacing: .04em;
}

.brand-mark.small {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 14px;
}

.brand-name {
    font-size: 30px;
    font-weight: 700;
}

.brand-description {
    margin-top: 5px;
    color: var(--muted);
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 38px;
}

.login-card-header {
    margin-bottom: 30px;
}

.eyebrow {
    font-size: 12px;
    letter-spacing: .15em;
    font-weight: 700;
    color: var(--accent);
}

.login-card h1,
.welcome h1 {
    margin: 8px 0;
}

.login-card p,
.welcome p {
    color: var(--muted);
}

.field-group {
    margin-bottom: 20px;
}

.field-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.form-input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
}

.form-input:focus {
    border-color: var(--accent);
}

.primary-button {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 13px;
    background: var(--primary);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.primary-button:hover {
    background: var(--primary-hover);
}

.alert-error {
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 14px;
}

.field-error {
    margin-top: 6px;
    color: var(--danger);
    font-size: 13px;
}


/* TOPBAR */

.topbar {
    height: 76px;
    padding: 0 38px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-title {
    font-size: 16px;
    font-weight: 700;
}

.app-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

.user-area {
    display: flex;
    align-items: center;
    gap: 13px;
}

.user-details {
    text-align: right;
}

.user-details strong {
    display: block;
    font-size: 13px;
}

.user-details span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
    font-weight: 700;
}

.logout-button {
    border: 1px solid var(--border);
    background: white;
    border-radius: 9px;
    padding: 8px 12px;
    cursor: pointer;
}


/* HOME */

.main-content {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    padding: 72px 0;
}

.welcome {
    text-align: center;
    margin-bottom: 38px;
}

.welcome h1 {
    font-size: clamp(32px, 5vw, 48px);
    letter-spacing: -.035em;
}

.welcome p {
    max-width: 620px;
    margin: 12px auto 0;
    font-size: 17px;
    line-height: 1.6;
}

.assistant-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
}

.assistant-box textarea {
    width: 100%;
    min-height: 128px;
    resize: vertical;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 16px;
    line-height: 1.55;
}

.assistant-box textarea::placeholder {
    color: #99a2ad;
}

.assistant-footer {
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.assistant-hint {
    color: var(--muted);
    font-size: 13px;
}

.send-button {
    border: 0;
    border-radius: 10px;
    padding: 10px 22px;
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.send-button:disabled {
    opacity: .45;
}

.quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.quick-card {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    gap: 16px;
}

.quick-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.quick-card h2 {
    margin: 0 0 7px;
    font-size: 15px;
}

.quick-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 13px;
}


@media (max-width: 760px) {

    .login-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .login-brand {
        justify-content: center;
    }

    .topbar {
        height: auto;
        padding: 15px 20px;
        gap: 15px;
    }

    .app-subtitle,
    .user-details {
        display: none;
    }

    .main-content {
        padding-top: 45px;
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   LAYOUT APPLICAZIONE
   ========================================================== */

.app-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: calc(100vh - 76px);
}

.sidebar {
    background: #ffffff;
    border-right: 1px solid var(--border);
    padding: 24px 14px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-label {
    margin: 25px 12px 8px;
    color: #98a1ac;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
}

.nav-item {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #566171;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.nav-item:hover {
    background: #f5f7f9;
    color: var(--text);
}

.nav-item.active {
    background: var(--soft);
    color: var(--primary);
    font-weight: 650;
}

.nav-symbol {
    width: 23px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.page-content {
    min-width: 0;
    padding: 58px 54px;
}

.page-content .welcome,
.page-content .assistant-box,
.page-content .quick-grid {
    width: min(860px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.section-header {
    max-width: 1000px;
    margin: 0 auto 32px;
}

.section-header h1 {
    margin: 8px 0 8px;
    font-size: 32px;
    letter-spacing: -.025em;
}

.section-header p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.empty-panel {
    max-width: 1000px;
    margin: 0 auto;
    min-height: 330px;
    border: 1px dashed #d5dce4;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background: rgba(255,255,255,.35);
}

.empty-symbol {
    width: 52px;
    height: 52px;
    margin-bottom: 17px;
    border-radius: 15px;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 700;
}

.empty-panel h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.empty-panel p {
    margin: 0;
    max-width: 520px;
    color: var(--muted);
    line-height: 1.55;
    font-size: 14px;
}


/* Il vecchio contenitore centrale non serve pi? nel layout autenticato */

.page-content .main-content {
    width: auto;
    margin: 0;
    padding: 0;
}


@media (max-width: 850px) {

    .app-layout {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .sidebar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav-item {
        justify-content: center;
    }

    .nav-item span:not(.nav-symbol),
    .nav-label {
        display: none;
    }

    .page-content {
        padding: 42px 25px;
    }
}


@media (max-width: 560px) {

    .app-layout {
        display: block;
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 8px 12px;
        overflow-x: auto;
    }

    .sidebar-nav {
        flex-direction: row;
    }

    .nav-item {
        flex: 0 0 auto;
    }

    .page-content {
        padding: 35px 18px;
    }
}


/* ==========================================================
   GESTIONE UTENTI
   ========================================================== */

.users-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
}

.primary-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.users-toolbar,
.table-card,
.app-message {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.users-toolbar {
    margin-bottom: 16px;
}

.search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-form input {
    width: min(420px, 100%);
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: white;
}

.search-form input:focus {
    border-color: var(--accent);
}

.search-form button {
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    cursor: pointer;
}

.search-form a {
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}

.table-card {
    overflow-x: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.users-table th {
    padding: 13px 17px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    text-align: left;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.users-table td {
    padding: 15px 17px;
    border-bottom: 1px solid #edf0f3;
    font-size: 13px;
}

.users-table tbody tr:last-child td {
    border-bottom: 0;
}

.table-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.table-avatar {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
    font-weight: 700;
}

.small-note {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.status-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
}

.status-badge.active {
    background: #edf6f1;
    color: #32634d;
}

.status-badge.inactive {
    background: #f1f2f4;
    color: #707987;
}

.table-actions {
    white-space: nowrap;
    text-align: right;
}

.table-actions a {
    margin-left: 13px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.empty-row {
    padding: 40px !important;
    color: var(--muted);
    text-align: center;
}

.app-message {
    margin-bottom: 18px;
    padding: 12px 15px;
    border-radius: 10px;
    background: #edf6f1;
    color: #32634d;
    font-size: 13px;
}


/* FORM UTENTE */

.form-page {
    max-width: 1000px;
    margin: 0 auto;
}

.form-page .section-header {
    margin-left: 0;
    margin-right: 0;
}

.app-form {
    max-width: 760px;
    padding: 27px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.app-form.narrow {
    max-width: 560px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.app-field.full {
    grid-column: 1 / -1;
}

.app-field label:not(.checkbox-line) {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 650;
}

.app-field input:not([type="checkbox"]),
.app-field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: none;
    background: white;
}

.app-field input:focus,
.app-field select:focus {
    border-color: var(--accent);
}

.checkbox-line {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
}

.help-text {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.help-text ul {
    margin: 5px 0 0;
    padding-left: 18px;
}

.form-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.secondary-link {
    padding: 10px 15px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
}

.primary-button.form-submit {
    width: auto;
    min-width: 130px;
    padding-left: 18px;
    padding-right: 18px;
}


@media (max-width: 700px) {

    .users-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-link {
        align-self: flex-start;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .app-field.full {
        grid-column: auto;
    }

    .app-form {
        padding: 20px;
    }
}


/* ==========================================================
   PROFILO
   ========================================================== */

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 760px) 280px;
    gap: 20px;
    align-items: start;
}

.profile-role {
    margin-bottom: 24px;
    padding: 13px 15px;
    border-radius: 10px;
    background: var(--soft);
}

.profile-role span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.profile-role strong {
    font-size: 14px;
}

.profile-password-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: white;
}

.profile-password-card h2 {
    margin: 8px 0;
    font-size: 19px;
}

.profile-password-card p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.profile-password-card .primary-link {
    width: 100%;
}


@media (max-width: 950px) {

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-password-card {
        max-width: 760px;
    }
}


/* ==========================================================
   ICONE MENU
   ========================================================== */

.nav-symbol {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-symbol svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item.active .nav-symbol {
    color: var(--primary);
}

.nav-item:hover .nav-symbol {
    color: var(--primary);
}


/* ==========================================================
   CHATBOT / CONVERSAZIONE
   ========================================================== */

.assistant-box textarea:not(:disabled) {
    cursor: text;
}

.active-send {
    opacity: 1 !important;
    cursor: pointer;
}

.conversation-page {
    width: min(900px, 100%);
    margin: 0 auto;
}

.conversation-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.conversation-header h1 {
    margin: 7px 0 6px;
    font-size: 32px;
}

.conversation-header p {
    margin: 0;
    color: var(--muted);
}

.conversation-type {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 650;
}

.conversation-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: white;
}

.messages {
    min-height: 320px;
    max-height: 520px;
    overflow-y: auto;
    padding: 28px;
}

.message-row {
    margin-bottom: 23px;
}

.message-author {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.message-bubble {
    display: inline-block;
    max-width: 78%;
    padding: 12px 15px;
    border-radius: 14px;
    background: #f0f3f6;
    line-height: 1.55;
    font-size: 14px;
}

.message-row.user {
    text-align: right;
}

.message-row.user .message-bubble {
    background: var(--primary);
    color: white;
    text-align: left;
}

.message-row.user .message-author {
    text-align: right;
}

.reply-form {
    padding: 18px;
    border-top: 1px solid var(--border);
}

.reply-form textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
}

.reply-form textarea:focus {
    border-color: var(--accent);
}

.reply-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.submit-request-card {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.submit-request-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}


/* ==========================================================
   LE MIE RICHIESTE
   ========================================================== */

.requests-list {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.request-card {
    padding: 17px 19px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.request-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.request-number {
    min-width: 46px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.request-card h2 {
    margin: 0 0 5px;
    font-size: 14px;
}

.request-meta {
    color: var(--muted);
    font-size: 11px;
}

.request-status {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--soft);
    font-size: 11px;
    font-weight: 650;
}


@media (max-width: 700px) {

    .conversation-header,
    .submit-request-card {
        align-items: stretch;
        flex-direction: column;
    }

    .conversation-type {
        align-self: flex-start;
    }

    .message-bubble {
        max-width: 92%;
    }
}


.it-ticket-preview {
    margin-top: 8px;
    max-width: 650px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}


/* ==========================================================
   SCHEDA TICKET IT
   ========================================================== */

.request-card-link {
    color: inherit;
    text-decoration: none;
}

.request-card-link:hover {
    border-color: #bdc8d4;
    background: #fafbfc;
}

.ticket-detail {
    max-width: 1200px;
    margin: 0 auto;
}

.ticket-detail-header {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
}

.ticket-detail-header h1 {
    margin: 7px 0 6px;
    font-size: 30px;
}

.ticket-detail-header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.ticket-main-column,
.ticket-side-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ticket-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: white;
}

.ticket-panel-title {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
}

.ticket-messages {
    min-height: 250px;
    max-height: none;
}

.assigned-badge {
    padding: 10px 13px;
    border-radius: 10px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
}

.assigned-badge strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
}

.it-reply-form {
    padding: 18px;
}

.it-reply-form textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
}

.it-reply-form textarea:focus {
    border-color: var(--accent);
}

.ticket-data {
    padding: 8px 18px 16px;
}

.ticket-data > div {
    padding: 11px 0;
    border-bottom: 1px solid #edf0f3;
}

.ticket-data > div:last-child {
    border-bottom: 0;
}

.ticket-data span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.ticket-data strong {
    font-size: 13px;
}

.ticket-side-column select {
    width: calc(100% - 36px);
    margin: 18px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: white;
}

.ticket-status-button {
    width: calc(100% - 36px);
    margin: 0 18px 18px;
}

.ai-panel p {
    margin: 0;
    padding: 18px 18px 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.ai-coming {
    margin: 8px 18px 18px;
    padding: 10px;
    border-radius: 9px;
    background: var(--soft);
    color: var(--muted);
    text-align: center;
    font-size: 11px;
}


@media (max-width: 980px) {

    .ticket-layout {
        grid-template-columns: 1fr;
    }

    .ticket-detail-header {
        align-items: stretch;
        flex-direction: column;
    }
}


/* ==========================================================
   BOZZE / CC / CONVERSAZIONI
   ========================================================== */

.active-draft-card {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #d8b66a;
    border-radius: 18px;
    background: #fffaf0;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
}

.draft-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    color: #8b671b;
}

.active-draft-card h2 {
    margin: 7px 0;
    font-size: 18px;
}

.active-draft-card p {
    margin: 0;
    max-width: 580px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.draft-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.submit-summary,
.draft-title-box {
    margin-bottom: 25px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--soft);
}

.submit-summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.cc-field ul,
.reply-cc-grid ul,
.draft-close-field ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.cc-field li,
.reply-cc-grid li,
.draft-close-field li {
    margin: 7px 0;
}

.cc-field li label,
.reply-cc-grid li label,
.draft-close-field li label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

.reply-cc-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cc-option {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.cc-option strong {
    display: block;
    font-size: 12px;
}

.cc-option small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.4;
}

.participant-list {
    padding: 15px 18px;
}

.participant-list > div {
    padding: 7px 0;
    border-bottom: 1px solid #edf0f3;
    font-size: 12px;
}

.participant-list > div:last-child {
    border-bottom: 0;
}


/* Colori stato - prima impostazione */

.status-open {
    background: #eaf2ff;
    color: #285a98;
}

.status-in_progress {
    background: #fff3d9;
    color: #8a6012;
}

.status-waiting_user {
    background: #f4eafa;
    color: #70408c;
}

.status-resolved,
.status-closed {
    background: #e8f5ed;
    color: #32634d;
}


@media (max-width: 800px) {

    .active-draft-card {
        align-items: stretch;
        flex-direction: column;
    }

    .reply-cc-grid {
        grid-template-columns: 1fr;
    }
}


/* Ticket workflow */
.ticket-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.ticket-tab{padding:9px 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);background:#fff;font-size:12px}.ticket-tab.active{font-weight:700;background:var(--soft)}.ticket-tab b{margin-left:5px}.unread-dot,.nav-notification-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#d33;margin-left:7px;vertical-align:middle}.nav-notification-dot{width:8px;height:8px}.ticket-unread{border-left:3px solid #d33}.ticket-mini-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:11px;color:var(--muted)}.priority-chip{font-weight:800;border-radius:999px;padding:2px 7px;background:var(--soft)}.locked-ticket{padding:10px 13px;border-radius:10px;background:#f3f3f3;font-weight:700;font-size:12px}.internal-panel{border-style:dashed}.ticket-panel-title span{font-size:10px;font-weight:400;color:var(--muted);margin-left:6px}.internal-note{margin:12px 0;padding:12px;border-radius:10px;background:#fff8e8}.internal-note p{margin:7px 0 0}.timeline{padding:14px 18px}.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}.timeline-item p{margin:4px 0 0}.timeline-time{color:var(--muted)}.internal-event{border-left:3px solid #d9b45b;padding-left:10px}.form-note,.muted{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:8px}.multi-search input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px}.multi-search-list{max-height:160px;overflow:auto;margin-top:6px}.multi-option{display:block;width:100%;text-align:left;border:0;background:#fff;padding:7px 8px;border-radius:6px;cursor:pointer}.multi-option:hover,.multi-option.selected{background:var(--soft);font-weight:600}


/* ==========================================================
   TICKET OVERVIEW V2
   ========================================================== */
.ticket-page-header{margin-bottom:20px}.ticket-overview-group{margin:22px 0 26px}.ticket-group-title{font-size:17px;margin:0 0 12px;padding-left:12px;border-left:3px solid #2f80ed}.ticket-group-others .ticket-group-title{border-left-color:#f2994a}.ticket-group-mine .ticket-group-title{border-left-color:#27ae60}.ticket-overview-list{display:flex;flex-direction:column;gap:10px}.overview-ticket-card{display:grid;grid-template-columns:112px 54px minmax(0,1fr) 150px;min-height:94px;border:1px solid var(--border);border-radius:14px;background:#fff;text-decoration:none;color:var(--text);overflow:hidden;transition:.15s ease}.overview-ticket-card:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(22,42,68,.06)}.ticket-kind{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--border);font-size:10px;font-weight:800;letter-spacing:.03em}.ticket-kind.problem{background:#fff5f3;color:#d94b3d}.ticket-kind.development{background:#fff7ef;color:#e87516}.ticket-kind-icon{position:relative;font-size:31px;line-height:1}.kind-priority{position:absolute;right:-15px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:#eef2f6;color:#43505d;border:2px solid #fff}.priority-dot-1{background:#edf1f5}.priority-dot-2{background:#dff2df;color:#26723a}.priority-dot-3{background:#dce9ff;color:#245ca8}.priority-dot-4{background:#ffe1c5;color:#a9540a}.priority-dot-5{background:#ffd4d0;color:#b52e25}.ticket-kind strong{margin-top:9px}.overview-ticket-number{padding:20px 8px;font-size:12px;color:var(--muted)}.overview-ticket-body{padding:16px 10px}.overview-ticket-body h3{font-size:14px;margin:0 0 7px}.overview-ticket-meta{font-size:11px;color:var(--muted)}.overview-ticket-side{padding:16px 16px 14px 8px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}.elapsed-time{font-size:12px;font-weight:700;color:#3478d4;white-space:nowrap}.ticket-group-others .elapsed-time{color:#e87516}.ticket-group-mine .elapsed-time{color:#299b4b}.ticket-group-empty{border:1px solid var(--border);border-radius:14px;background:#fff;padding:28px;text-align:center;color:var(--muted);font-size:12px}.ticket-legend{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:30px 0 10px;padding-top:12px;font-size:11px;color:#4f5d6c}.ticket-legend>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.legend-type{margin-left:5px}.legend-type.problem{color:#d94b3d}.legend-type.development{color:#e87516}.priority-legend span{display:inline-flex;width:20px;height:20px;border-radius:7px;align-items:center;justify-content:center;font-weight:800;margin-left:5px}.priority-legend .p1{background:#edf1f5}.priority-legend .p2{background:#dff2df;color:#26723a}.priority-legend .p3{background:#dce9ff;color:#245ca8}.priority-legend .p4{background:#ffe1c5;color:#a9540a}.priority-legend .p5{background:#ffd4d0;color:#b52e25}@media(max-width:900px){.overview-ticket-card{grid-template-columns:88px 44px minmax(0,1fr)}.overview-ticket-side{grid-column:2/4;flex-direction:row;align-items:center;padding:0 14px 12px 8px}.ticket-kind-icon{font-size:25px}.ticket-legend{align-items:flex-start;flex-direction:column}}

/* ==========================================================
   TICKET OVERVIEW V3 - layout approvato
   ========================================================== */
.ticket-workspace {
    width: min(1320px, 100%);
    margin: 0 auto;
}

.ticket-workspace .ticket-page-header {
    position: relative;
    max-width: none;
    margin: -12px 0 26px;
    padding: 8px 0 4px 24px;
    border-left: 4px solid #2f9c7b;
}

.ticket-workspace .ticket-page-header .eyebrow {
    color: #2d826d;
    font-weight: 800;
    letter-spacing: .13em;
}

.ticket-workspace .ticket-page-header h1 {
    margin: 7px 0 7px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.ticket-workspace .ticket-page-header p {
    font-size: 14px;
}

.ticket-workspace .ticket-tabs {
    margin-bottom: 18px;
}

.ticket-workspace .ticket-tab {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 15px;
    border-radius: 11px;
}

.ticket-workspace .ticket-tab.active {
    border-color: #78bca8;
    background: #f4fbf8;
    box-shadow: inset 0 0 0 1px rgba(47,156,123,.08);
}

.ticket-workspace .ticket-overview-group {
    margin: 18px 0 22px;
}

.ticket-workspace .ticket-group-title {
    margin: 0 0 10px;
    padding-left: 14px;
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
}

.ticket-workspace .ticket-group-new .ticket-group-title {
    border-left-color: #2f80ed;
}

.ticket-workspace .ticket-group-others .ticket-group-title {
    border-left-color: #ff7a1a;
}

.ticket-workspace .ticket-group-mine .ticket-group-title {
    border-left-color: #20a85a;
}

.ticket-workspace .ticket-overview-list {
    gap: 8px;
}

.ticket-workspace .overview-ticket-card {
    grid-template-columns: 118px 58px minmax(0,1fr) 158px;
    min-height: 104px;
    border-radius: 13px;
    box-shadow: none;
}

.ticket-workspace .overview-ticket-card:hover {
    border-color: #c6d0db;
    background: #fff;
    box-shadow: 0 5px 18px rgba(22,42,68,.05);
}

.ticket-workspace .ticket-kind {
    background: var(--priority-bg, #f5f7f9);
    color: var(--priority-color, #52606d);
    border-right: 1px solid var(--border);
}

.ticket-workspace .priority-kind-1 {
    --priority-color: #637180;
    --priority-bg: #f2f5f7;
    --priority-badge: #e7ecf0;
}

.ticket-workspace .priority-kind-2 {
    --priority-color: #268043;
    --priority-bg: #f2faf3;
    --priority-badge: #dff2df;
}

.ticket-workspace .priority-kind-3 {
    --priority-color: #2467be;
    --priority-bg: #f2f7ff;
    --priority-badge: #dce9ff;
}

.ticket-workspace .priority-kind-4 {
    --priority-color: #e36f0b;
    --priority-bg: #fff7ef;
    --priority-badge: #ffe1c5;
}

.ticket-workspace .priority-kind-5 {
    --priority-color: #e0443a;
    --priority-bg: #fff4f2;
    --priority-badge: #ffd4d0;
}

.ticket-workspace .ticket-kind-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.ticket-workspace .ticket-type-svg {
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ticket-workspace .kind-priority {
    right: -10px;
    bottom: 1px;
    width: 22px;
    height: 22px;
    background: var(--priority-badge, #e7ecf0);
    color: var(--priority-color, #52606d);
    border: 2px solid #fff;
    font-size: 10px;
}

.ticket-workspace .ticket-kind strong {
    margin-top: 6px;
    color: inherit;
    font-size: 10px;
}

.ticket-workspace .overview-ticket-number {
    padding: 19px 8px 0 16px;
    font-size: 12px;
}

.ticket-workspace .overview-ticket-body {
    padding: 17px 12px;
}

.ticket-workspace .overview-ticket-body h3 {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.35;
}

.ticket-workspace .overview-ticket-meta {
    font-size: 11px;
}

.ticket-workspace .ticket-mini-meta {
    align-items: center;
    margin-top: 8px;
}

.ticket-workspace .overview-ticket-side {
    padding: 16px 18px 14px 8px;
}

.ticket-workspace .elapsed-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.ticket-workspace .time-svg,
.ticket-workspace .legend-time-svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ticket-workspace .ticket-group-empty {
    padding: 30px;
    border-radius: 13px;
}

.ticket-workspace .ticket-legend {
    margin: 28px 0 0;
    padding: 13px 0 0;
    border-top: 0;
    font-size: 11px;
}

.ticket-workspace .legend-types,
.ticket-workspace .priority-legend,
.ticket-workspace .time-legend {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-workspace .legend-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ticket-workspace .legend-svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ticket-workspace .legend-type.problem {
    color: #e0443a;
}

.ticket-workspace .legend-type.development {
    color: #e36f0b;
}

.ticket-workspace .time-legend {
    color: #607082;
}

@media (max-width: 1100px) {
    .ticket-workspace .overview-ticket-card {
        grid-template-columns: 104px 52px minmax(0,1fr) 138px;
    }
}

@media (max-width: 900px) {
    .ticket-workspace .ticket-page-header {
        margin-top: 0;
    }

    .ticket-workspace .overview-ticket-card {
        grid-template-columns: 92px 46px minmax(0,1fr);
    }

    .ticket-workspace .overview-ticket-side {
        grid-column: 2 / 4;
        flex-direction: row;
        align-items: center;
        padding: 0 14px 12px 8px;
    }

    .ticket-workspace .ticket-legend {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   ASSISTENTE / INVIO TICKET - layout coerente con Ticket V3
   ========================================================== */
.assistant-workspace,
.submit-workspace {
    width: min(1320px, 100%);
    margin: 0 auto;
}

.assistant-workspace .ticket-page-header,
.submit-workspace .ticket-page-header {
    position: relative;
    max-width: none;
    margin: -12px 0 22px;
    padding: 8px 0 4px 24px;
    border-left: 4px solid #2f9c7b;
}

.assistant-workspace .ticket-page-header .eyebrow,
.submit-workspace .ticket-page-header .eyebrow {
    color: #2d826d;
    font-weight: 800;
    letter-spacing: .13em;
}

.assistant-workspace .ticket-page-header h1,
.submit-workspace .ticket-page-header h1 {
    margin: 7px 0 7px;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.assistant-workspace .ticket-page-header p,
.submit-workspace .ticket-page-header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.assistant-type-row {
    display: flex;
    justify-content: flex-end;
    margin: -50px 0 20px;
}

.assistant-workspace .conversation-card {
    width: 100%;
}

.assistant-workspace .messages {
    min-height: 320px;
}

.submit-workspace .submit-ticket-form {
    max-width: none;
    width: 100%;
    padding: 26px 28px;
}

.submit-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, .7fr);
    gap: 14px;
    margin-bottom: 22px;
}

.submit-summary-item {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f8fafb;
}

.submit-summary-item span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
}

.submit-summary-item strong {
    font-size: 13px;
}

.priority-submit-field {
    max-width: 620px;
    margin-bottom: 24px;
}

.priority-scale-help {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 9px;
    color: var(--muted);
    font-size: 11px;
}

.priority-scale-help span {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 800;
}
.priority-scale-help .p1 { background:#edf1f5; color:#637180; }
.priority-scale-help .p2 { background:#dff2df; color:#26723a; }
.priority-scale-help .p3 { background:#dce9ff; color:#245ca8; }
.priority-scale-help .p4 { background:#ffe1c5; color:#a9540a; }
.priority-scale-help .p5 { background:#ffd4d0; color:#b52e25; }

.searchable-cc {
    margin-top: 6px;
}

.cc-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cc-search-box {
    position: relative;
    max-width: 760px;
}

.searchable-cc .cc-search-box input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    outline: none;
}

.searchable-cc .cc-search-box input:focus {
    border-color: #78bca8;
    box-shadow: 0 0 0 3px rgba(47,156,123,.08);
}

.cc-search-results {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 230px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(22,42,68,.10);
}

.cc-search-results.open { display: block; }

.cc-result,
.cc-result-empty {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-size: 12px;
}

.cc-result { cursor: pointer; }
.cc-result:hover { background: var(--soft); }
.cc-result-empty { color: var(--muted); }

.cc-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.cc-chip {
    padding: 6px 9px;
    border: 1px solid #b9d9cf;
    border-radius: 999px;
    background: #f4fbf8;
    color: #2d6f5d;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

.submit-form-actions {
    margin-top: 28px;
}

.form-errors {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #fff1ef;
    color: #a83d34;
    font-size: 12px;
    font-weight: 650;
}

@media (max-width: 800px) {
    .assistant-type-row { margin: 0 0 14px; justify-content: flex-start; }
    .submit-summary-grid { grid-template-columns: 1fr; }
}

/* Global Django feedback: consume messages on the page that receives the redirect,
   instead of letting old actions pile up until Monitor IA is opened. */
.global-flash-stack{display:grid;gap:8px;margin:0 0 16px}.global-flash{padding:10px 14px;border:1px solid #d7e2e8;border-radius:9px;background:#f7fafb;color:#173c58;font-size:13px;line-height:1.35}.global-flash-success{border-color:#b9dfca;background:#f0faf4;color:#17633b}.global-flash-error{border-color:#efc6c3;background:#fff4f3;color:#9b2c25}.global-flash-warning{border-color:#efd59d;background:#fff9ec;color:#76520c}.global-flash-info{border-color:#cbdde9;background:#f3f8fb;color:#24516d}