@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════
   DREAM TICKET — CSS isolato da Astra
   Tutti i selettori usano #dt-root per specificità
   ═══════════════════════════════════════════════ */

/* Variabili globali */
#dt-root {
    --c-blue:    #1e3a5f;
    --c-blue2:   #2a5298;
    --c-pale:    #eff6ff;
    --c-red:     #dc2626;
    --c-rpale:   #fef2f2;
    --c-green:   #16a34a;
    --c-gpale:   #f0fdf4;
    --c-orange:  #d97706;
    --c-opale:   #fffbeb;
    --c-indigo:  #4f46e5;
    --c-ipale:   #eef2ff;
    --c-g50:     #f8fafc;
    --c-g100:    #f1f5f9;
    --c-g200:    #e2e8f0;
    --c-g300:    #cbd5e1;
    --c-g400:    #94a3b8;
    --c-g500:    #64748b;
    --c-g700:    #334155;
    --c-g900:    #0f172a;
    --r:         10px;
    --r-sm:      6px;
    --sh:        0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04);
    --sh-md:     0 4px 20px rgba(0,0,0,.10);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--c-g900) !important;
    -webkit-font-smoothing: antialiased;
    display: block !important;
    width: 100% !important;
    background: transparent !important;
}

/* Astra sovrascrive font e colori link ovunque — forziamo tutto */
#dt-root * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }

#dt-root a           { color: var(--c-blue) !important; text-decoration: none !important; }
#dt-root a:hover     { text-decoration: none !important; }
#dt-root p           { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.6 !important; }
#dt-root ul, #dt-root ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#dt-root li          { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#dt-root h1,#dt-root h2,#dt-root h3,
#dt-root h4,#dt-root h5,#dt-root h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--c-g900) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Astra mette bordi e padding sulle tabelle */
#dt-root table        { border-collapse: collapse !important; width: 100% !important; border: none !important; margin: 0 !important; }
#dt-root table th     { border: none !important; }
#dt-root table td     { border: none !important; }
#dt-root table tr     { border: none !important; background: none !important; }

/* ── LAYOUT ───────────────────────────────── */
#dt-root .dt-wrap {
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 24px 60px !important;
    display: block !important;
}

/* ── TOP BAR ──────────────────────────────── */
#dt-root .dt-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 0 20px !important;
    border-bottom: 1px solid var(--c-g200) !important;
    margin-bottom: 32px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
#dt-root .dt-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
#dt-root .dt-logo-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    background: var(--c-blue) !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#dt-root .dt-logo-icon svg { width: 18px !important; height: 18px !important; display: block !important; }
#dt-root .dt-logo-text {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--c-blue) !important;
    letter-spacing: -.3px !important;
    line-height: 1 !important;
    display: block !important;
}
#dt-root .dt-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
#dt-root .dt-user-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-g700) !important;
    line-height: 1.3 !important;
    display: block !important;
}
#dt-root .dt-user-name small {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--c-g500) !important;
    margin-top: 1px !important;
}
#dt-root .dt-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--c-g200) !important;
    border-radius: var(--r-sm) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--c-g500) !important;
    background: #fff !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
#dt-root .dt-logout-btn:hover { border-color: var(--c-g300) !important; color: var(--c-g700) !important; background: var(--c-g50) !important; }
#dt-root .dt-logout-btn svg { width: 13px !important; height: 13px !important; display: block !important; }

/* ── PAGE HEADER ──────────────────────────── */
#dt-root .dt-page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
    gap: 12px !important;
}
#dt-root .dt-page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--c-g900) !important;
    letter-spacing: -.5px !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* ── BACK LINK ────────────────────────────── */
#dt-root .dt-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--c-g500) !important;
    margin-bottom: 20px !important;
}
#dt-root .dt-back:hover { color: var(--c-blue) !important; }
#dt-root .dt-back svg { width: 14px !important; height: 14px !important; display: block !important; }

/* ── STATS ────────────────────────────────── */
#dt-root .dt-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}
#dt-root .dt-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 16px !important;
    background: #fff !important;
    border: 1px solid var(--c-g200) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh) !important;
    text-align: center !important;
    cursor: default !important;
    transition: box-shadow .15s, transform .15s !important;
}
#dt-root .dt-stat:hover { box-shadow: var(--sh-md) !important; transform: translateY(-1px) !important; }
#dt-root .dt-stat-num {
    display: block !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--c-blue) !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}
#dt-root .dt-stat-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .7px !important;
    color: var(--c-g500) !important;
}
#dt-root .dt-stat.s-open    .dt-stat-num { color: var(--c-orange) !important; }
#dt-root .dt-stat.s-working .dt-stat-num { color: var(--c-indigo) !important; }
#dt-root .dt-stat.s-closed  .dt-stat-num { color: var(--c-green) !important; }

/* ── TABS ─────────────────────────────────── */
#dt-root .dt-tabs {
    display: flex !important;
    gap: 2px !important;
    border-bottom: 2px solid var(--c-g200) !important;
    margin-bottom: 20px !important;
    overflow-x: auto !important;
    padding: 0 !important;
}
#dt-root .dt-tab {
    display: inline-block !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-g500) !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    white-space: nowrap !important;
    border-radius: 6px 6px 0 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    transition: all .15s !important;
}
#dt-root .dt-tab:hover { color: var(--c-blue) !important; background: var(--c-g50) !important; }
#dt-root .dt-tab.active { color: var(--c-blue) !important; border-bottom-color: var(--c-blue) !important; background: var(--c-pale) !important; }

/* ── BUTTONS ──────────────────────────────── */
#dt-root .dt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    border-radius: var(--r-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all .15s !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
#dt-root .dt-btn svg { width: 14px !important; height: 14px !important; display: block !important; flex-shrink: 0 !important; }
#dt-root .dt-btn-primary { background: var(--c-blue) !important; color: #fff !important; box-shadow: 0 1px 3px rgba(30,58,95,.25) !important; }
#dt-root .dt-btn-primary:hover { background: var(--c-blue2) !important; color: #fff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(30,58,95,.3) !important; }
#dt-root .dt-btn-outline { background: #fff !important; border: 1.5px solid var(--c-g200) !important; color: var(--c-g700) !important; }
#dt-root .dt-btn-outline:hover { border-color: var(--c-blue) !important; color: var(--c-blue) !important; background: var(--c-pale) !important; }
#dt-root .dt-btn-sm { padding: 6px 12px !important; font-size: 12px !important; }

/* ── CARD ─────────────────────────────────── */
#dt-root .dt-card {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--c-g200) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
#dt-root .dt-card + .dt-card { margin-top: 16px !important; }
#dt-root .dt-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 22px !important;
    border-bottom: 1px solid var(--c-g200) !important;
    background: var(--c-g50) !important;
}
#dt-root .dt-card-head-title {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--c-g500) !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
}
#dt-root .dt-card-body {
    display: block !important;
    padding: 24px !important;
}

/* ── TABLE ────────────────────────────────── */
#dt-root .dt-table-wrap {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--c-g200) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh) !important;
    overflow: hidden !important;
}
#dt-root .dt-tbl {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}
#dt-root .dt-tbl thead tr { background: var(--c-g50) !important; }
#dt-root .dt-tbl th {
    padding: 11px 18px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--c-g500) !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    border-bottom: 1px solid var(--c-g200) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: left !important;
    white-space: nowrap !important;
    background: var(--c-g50) !important;
}
#dt-root .dt-tbl td {
    padding: 14px 18px !important;
    font-size: 13px !important;
    color: var(--c-g700) !important;
    border-bottom: 1px solid var(--c-g100) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    background: transparent !important;
}
#dt-root .dt-tbl tbody tr:last-child td { border-bottom: none !important; }
#dt-root .dt-tbl tbody tr:hover td { background: #fafbff !important; }
#dt-root .dt-tbl a { color: var(--c-blue) !important; font-weight: 600 !important; text-decoration: none !important; }
#dt-root .dt-tbl a:hover { text-decoration: underline !important; }

/* ── BADGES ───────────────────────────────── */
#dt-root .dt-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
}
#dt-root .badge-urgent  { background: var(--c-rpale) !important; color: var(--c-red) !important; }
#dt-root .badge-normal  { background: var(--c-gpale) !important; color: var(--c-green) !important; }
#dt-root .badge-open    { background: var(--c-opale) !important; color: var(--c-orange) !important; }
#dt-root .badge-working { background: var(--c-ipale) !important; color: var(--c-indigo) !important; }
#dt-root .badge-closed  { background: var(--c-g100) !important;  color: var(--c-g500) !important; }

/* ── EMPTY STATE ──────────────────────────── */
#dt-root .dt-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 20px !important;
    text-align: center !important;
}
#dt-root .dt-empty-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: var(--c-g100) !important;
    border-radius: 50% !important;
    margin-bottom: 16px !important;
}
#dt-root .dt-empty-icon svg { display: block !important; width: 24px !important; height: 24px !important; }
#dt-root .dt-empty p { font-size: 14px !important; color: var(--c-g500) !important; margin-bottom: 16px !important; }

/* ── TICKET DETAIL HEAD ───────────────────── */
#dt-root .dt-ticket-head {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--c-g200) !important;
    border-left: 4px solid var(--c-blue) !important;
    border-radius: var(--r) !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--sh) !important;
}
#dt-root .dt-ticket-subject {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--c-g900) !important;
    letter-spacing: -.3px !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}
#dt-root .dt-ticket-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}
#dt-root .dt-meta-item { display: flex !important; flex-direction: column !important; gap: 3px !important; }
#dt-root .dt-meta-key {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--c-g400) !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
}
#dt-root .dt-meta-val {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-g700) !important;
}

/* ── THREAD ───────────────────────────────── */
#dt-root .dt-thread { display: flex !important; flex-direction: column !important; }
#dt-root .dt-msg {
    display: block !important;
    padding: 22px 24px !important;
    border-bottom: 1px solid var(--c-g100) !important;
    background: #fff !important;
}
#dt-root .dt-msg:last-child { border-bottom: none !important; }
#dt-root .dt-msg.dt-msg-client { background: var(--c-g50) !important; }
#dt-root .dt-msg-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}
#dt-root .dt-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: var(--c-blue) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
#dt-root .dt-avatar.is-client { background: var(--c-g200) !important; color: var(--c-blue) !important; }
#dt-root .dt-msg-author-info { flex: 1 !important; display: block !important; }
#dt-root .dt-msg-author-name {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--c-g900) !important;
}
#dt-root .dt-msg-author-role {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--c-g500) !important;
    margin-top: 1px !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
}
#dt-root .dt-msg-time {
    display: block !important;
    font-size: 11px !important;
    color: var(--c-g400) !important;
    white-space: nowrap !important;
}
#dt-root .dt-msg-body {
    display: block !important;
    padding-left: 50px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--c-g700) !important;
}
#dt-root .dt-msg-file {
    display: block !important;
    padding-left: 50px !important;
    margin-top: 10px !important;
}
#dt-root .dt-msg-file a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: var(--c-blue) !important;
    background: #fff !important;
    padding: 5px 12px !important;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--c-g200) !important;
}
#dt-root .dt-msg-file a:hover { background: var(--c-pale) !important; border-color: var(--c-blue) !important; }
#dt-root .dt-msg-file svg { width: 13px !important; height: 13px !important; display: block !important; }

/* ── FORM ─────────────────────────────────── */
#dt-root .dt-form { display: flex !important; flex-direction: column !important; gap: 18px !important; }
#dt-root .dt-field { display: flex !important; flex-direction: column !important; gap: 6px !important; }
#dt-root .dt-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-g700) !important;
    margin: 0 !important;
}
#dt-root .dt-label .req { color: var(--c-red) !important; margin-left: 2px !important; }
#dt-root .dt-hint { display: block !important; font-size: 11px !important; color: var(--c-g400) !important; }
#dt-root .dt-field-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

#dt-root .dt-input,
#dt-root .dt-select,
#dt-root .dt-textarea {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    border: 1.5px solid var(--c-g200) !important;
    border-radius: var(--r-sm) !important;
    padding: 10px 13px !important;
    font-size: 14px !important;
    color: var(--c-g900) !important;
    line-height: 1.4 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border .15s !important;
    margin: 0 !important;
}
#dt-root .dt-input:focus,
#dt-root .dt-select:focus,
#dt-root .dt-textarea:focus {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 3px rgba(30,58,95,.08) !important;
    outline: none !important;
}
#dt-root .dt-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 38px !important;
    cursor: pointer !important;
}
#dt-root .dt-textarea { min-height: 140px !important; resize: vertical !important; }

/* File upload */
#dt-root .dt-file-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border: 1.5px dashed var(--c-g300) !important;
    border-radius: var(--r-sm) !important;
    background: var(--c-g50) !important;
    cursor: pointer !important;
    transition: all .15s !important;
}
#dt-root .dt-file-area:hover { border-color: var(--c-blue) !important; background: var(--c-pale) !important; }
#dt-root .dt-file-area svg { width: 20px !important; height: 20px !important; display: block !important; color: var(--c-g400) !important; }
#dt-root .dt-file-area-cta { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--c-blue) !important; }
#dt-root .dt-file-area-sub { display: block !important; font-size: 11px !important; color: var(--c-g500) !important; margin-top: 2px !important; }
#dt-root .dt-file-name { display: block !important; font-size: 12px !important; font-weight: 500 !important; color: var(--c-g700) !important; margin-top: 8px !important; }

#dt-root .dt-form-actions { display: flex !important; align-items: center !important; gap: 10px !important; padding-top: 4px !important; }

/* ── NOTICE ───────────────────────────────── */
#dt-root .dt-notice {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: var(--r-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
}
#dt-root .dt-notice svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; display: block !important; }
#dt-root .dt-notice-success { background: var(--c-gpale) !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
#dt-root .dt-notice-error   { background: var(--c-rpale) !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }

/* ── CLOSED BOX ───────────────────────────── */
#dt-root .dt-closed-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 36px !important;
    gap: 14px !important;
}
#dt-root .dt-closed-box svg { display: block !important; }
#dt-root .dt-closed-box p { font-size: 14px !important; color: var(--c-g500) !important; }

/* ── AUTH PAGES ───────────────────────────── */
#dt-root.dt-auth {
    max-width: 460px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    display: block !important;
}
#dt-root .dt-auth-logo {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 32px !important;
}
#dt-root .dt-auth-card {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--c-g200) !important;
    border-radius: 14px !important;
    padding: 36px !important;
    box-shadow: var(--sh-md) !important;
}
#dt-root .dt-auth-title {
    display: block !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--c-g900) !important;
    letter-spacing: -.4px !important;
    margin-bottom: 6px !important;
}
#dt-root .dt-auth-sub {
    display: block !important;
    font-size: 13px !important;
    color: var(--c-g500) !important;
    margin-bottom: 28px !important;
    line-height: 1.5 !important;
}
#dt-root .dt-auth-footer {
    display: block !important;
    text-align: center !important;
    margin-top: 20px !important;
    font-size: 13px !important;
    color: var(--c-g500) !important;
}
#dt-root .dt-auth-footer a { color: var(--c-blue) !important; font-weight: 600 !important; }
#dt-root .dt-checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
#dt-root .dt-checkbox-row input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    cursor: pointer !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    margin: 0 !important;
}
#dt-root .dt-checkbox-label { font-size: 13px !important; color: var(--c-g700) !important; cursor: pointer !important; }
#dt-root .dt-full-btn { width: 100% !important; justify-content: center !important; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width: 640px) {
    #dt-root .dt-stats { grid-template-columns: 1fr 1fr !important; }
    #dt-root .dt-field-row { grid-template-columns: 1fr !important; }
    #dt-root .dt-tbl thead { display: none !important; }
    #dt-root .dt-tbl tr { display: block !important; padding: 12px 18px !important; border-bottom: 1px solid var(--c-g100) !important; }
    #dt-root .dt-tbl td { display: block !important; padding: 3px 0 !important; border: none !important; }
    #dt-root .dt-auth-card { padding: 24px !important; }
    #dt-root .dt-msg-body, #dt-root .dt-msg-file { padding-left: 0 !important; }
}

/* ── QUILL EDITOR ─────────────────────────── */
#dt-root .dt-editor-wrap { display: block !important; }
#dt-root .dt-editor-wrap textarea { display: none !important; }
#dt-root .ql-toolbar {
    border: 1.5px solid var(--c-g200) !important;
    border-bottom: none !important;
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    background: var(--c-g50) !important;
    font-family: 'Inter', sans-serif !important;
    padding: 6px 8px !important;
}
#dt-root .ql-container {
    border: 1.5px solid var(--c-g200) !important;
    border-top: none !important;
    border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    min-height: 140px !important;
}
#dt-root .ql-editor {
    min-height: 140px !important;
    color: var(--c-g900) !important;
    line-height: 1.6 !important;
    padding: 10px 13px !important;
}
#dt-root .ql-editor.ql-blank::before {
    color: var(--c-g400) !important;
    font-style: normal !important;
    left: 13px !important;
}
#dt-root .ql-toolbar .ql-stroke { stroke: var(--c-g500) !important; }
#dt-root .ql-toolbar .ql-fill   { fill:   var(--c-g500) !important; }
#dt-root .ql-toolbar button:hover .ql-stroke { stroke: var(--c-blue) !important; }
#dt-root .ql-toolbar button:hover .ql-fill   { fill:   var(--c-blue) !important; }
#dt-root .ql-toolbar button.ql-active .ql-stroke { stroke: var(--c-blue) !important; }
#dt-root .ql-toolbar button.ql-active .ql-fill   { fill:   var(--c-blue) !important; }

/* Nuovo cliente panel */
#dt-root .dt-new-client-panel { display: none; margin-top: 8px; }
#dt-root .dt-new-client-panel.dt-panel-open { display: block !important; }

/* ══════════════════════════════════════════════
   RESPONSIVE MOBILE / TABLET
   ══════════════════════════════════════════════ */

/* ── TABLET (max 768px) ───────────────────────── */
@media (max-width: 768px) {

    #dt-root .dt-wrap {
        padding: 0 16px 40px !important;
    }

    /* Topbar */
    #dt-root .dt-topbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 16px 0 14px !important;
        margin-bottom: 20px !important;
    }
    #dt-root .dt-logo-text { font-size: 14px !important; }
    #dt-root .dt-user-name { font-size: 12px !important; }
    #dt-root .dt-logout-btn { font-size: 11px !important; padding: 5px 10px !important; }

    /* Page header */
    #dt-root .dt-page-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    #dt-root .dt-page-title { font-size: 18px !important; }

    /* Tabs */
    #dt-root .dt-tabs { gap: 0 !important; }
    #dt-root .dt-tab { padding: 8px 12px !important; font-size: 12px !important; }

    /* Stats */
    #dt-root .dt-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    #dt-root .dt-stat { padding: 14px 10px !important; }
    #dt-root .dt-stat-num { font-size: 26px !important; }
    #dt-root .dt-stat-label { font-size: 9px !important; }

    /* Ticket table → card su mobile */
    #dt-root .dt-table-wrap { border-radius: 8px !important; }
    #dt-root table.dt-tbl thead { display: none !important; }
    #dt-root table.dt-tbl tbody tr {
        display: block !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--c-g100) !important;
    }
    #dt-root table.dt-tbl tbody tr:last-child { border-bottom: none !important; }
    #dt-root table.dt-tbl td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 0 !important;
        border: none !important;
        font-size: 13px !important;
    }
    #dt-root table.dt-tbl td:first-child {
        font-weight: 700 !important;
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    #dt-root table.dt-tbl td[data-label]::before {
        content: attr(data-label);
        font-size: 10px !important;
        font-weight: 700 !important;
        color: var(--c-g400) !important;
        text-transform: uppercase !important;
        letter-spacing: .5px !important;
        min-width: 80px !important;
    }

    /* Ticket detail header */
    #dt-root .dt-ticket-head { padding: 16px !important; }
    #dt-root .dt-ticket-subject { font-size: 16px !important; margin-bottom: 12px !important; }
    #dt-root .dt-ticket-meta-row {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    #dt-root .dt-meta-item { min-width: calc(50% - 6px) !important; }

    /* Messaggi */
    #dt-root .dt-msg { padding: 16px !important; }
    #dt-root .dt-msg-body { padding-left: 0 !important; margin-top: 10px !important; }
    #dt-root .dt-msg-file { padding-left: 0 !important; }
    #dt-root .dt-msg-top { flex-wrap: wrap !important; }
    #dt-root .dt-msg-time { width: 100% !important; margin-top: 2px !important; padding-left: 50px !important; }

    /* Form */
    #dt-root .dt-field-row { grid-template-columns: 1fr !important; }
    #dt-root .dt-form-actions { flex-wrap: wrap !important; }
    #dt-root .dt-form-actions .dt-btn { width: 100% !important; justify-content: center !important; }

    /* Auth */
    #dt-root.dt-auth { padding: 0 12px !important; margin-top: 20px !important; }
    #dt-root .dt-auth-card { padding: 24px 20px !important; }
    #dt-root .dt-auth-title { font-size: 18px !important; }

    /* Back link */
    #dt-root .dt-back { margin-bottom: 14px !important; font-size: 12px !important; }

    /* Card body */
    #dt-root .dt-card-body { padding: 16px !important; }
}

/* ── SMARTPHONE (max 480px) ──────────────────── */
@media (max-width: 480px) {

    #dt-root .dt-wrap { padding: 0 12px 32px !important; }

    /* Topbar compatta */
    #dt-root .dt-topbar { padding: 12px 0 !important; margin-bottom: 16px !important; }
    #dt-root .dt-logo-icon { width: 30px !important; height: 30px !important; }
    #dt-root .dt-logo-text { font-size: 13px !important; }
    #dt-root .dt-user-info { gap: 6px !important; }
    #dt-root .dt-user-name small { display: none !important; }

    /* Stats: 2 colonne */
    #dt-root .dt-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    #dt-root .dt-stat { padding: 12px 8px !important; }
    #dt-root .dt-stat-num { font-size: 22px !important; margin-bottom: 4px !important; }

    /* Tabs scrollabili */
    #dt-root .dt-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 1px !important;
    }
    #dt-root .dt-tabs::-webkit-scrollbar { display: none !important; }
    #dt-root .dt-tab { padding: 8px 10px !important; font-size: 11px !important; white-space: nowrap !important; }

    /* Page title + btn nuovo ticket */
    #dt-root .dt-page-title { font-size: 16px !important; }
    #dt-root .dt-page-header .dt-btn { font-size: 12px !important; padding: 8px 12px !important; }

    /* Ticket meta: 1 colonna */
    #dt-root .dt-ticket-meta-row { gap: 10px !important; }
    #dt-root .dt-meta-item { min-width: 100% !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; }
    #dt-root .dt-meta-key { min-width: 90px !important; }

    /* Pulsante chiudi/riapri nell'header */
    #dt-root .dt-meta-item:last-child { min-width: 100% !important; margin-top: 4px !important; }
    #dt-root .dt-meta-item:last-child .dt-btn { width: 100% !important; justify-content: center !important; }

    /* Avatar messaggi più piccolo */
    #dt-root .dt-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 12px !important;
    }

    /* Editor Quill più alto su mobile per facilità */
    #dt-root .ql-editor { min-height: 100px !important; font-size: 16px !important; } /* 16px evita zoom iOS */
    #dt-root .dt-input,
    #dt-root .dt-select,
    #dt-root .dt-textarea { font-size: 16px !important; } /* evita zoom iOS su focus */

    /* Pulsanti grandi per il tocco */
    #dt-root .dt-btn { min-height: 44px !important; } /* dimensione minima tocco Apple HIG */
    #dt-root .dt-btn-sm { min-height: 36px !important; }

    /* File upload area */
    #dt-root .dt-file-area { padding: 12px !important; }

    /* Form azioni */
    #dt-root .dt-form-actions { gap: 8px !important; }

    /* Rispondi e chiudi: testo più corto su mobile */
    #dt-root .dt-btn[name="close_after_reply"] { font-size: 12px !important; }
}

/* ── FIX QUILL SU MOBILE ─────────────────────── */
@media (max-width: 768px) {
    #dt-root .ql-toolbar { padding: 6px !important; }
    #dt-root .ql-toolbar .ql-formats { margin-right: 8px !important; }
    #dt-root .ql-toolbar button { width: 26px !important; height: 26px !important; padding: 2px !important; }
    #dt-root .ql-container { font-size: 15px !important; }
}