/* AI ProSuite — UI kit riutilizzabile.
 *
 * Estratto dal linguaggio del visualizzatore documenti (modal header, body,
 * radius --radius-box, azioni compatte). Classi generiche opt-in (`.ui-*`),
 * senza alcun override di elementi/classi esistenti: pensate per essere
 * riusate dalle view e documentate in `ui-guidelines.md`.
 *
 * Identità cromatica delle Core View: token condiviso con l'header del box AI
 * della Dashboard (`doc_reader.css`). Unica fonte: NON duplicare il valore.
 */

:root {
    /* Header del box AI della Dashboard (doc_reader.css) — unica fonte. */
    --ai-core-header: linear-gradient(135deg, #203070 0%, #40c0e0 100%);
}

/* --- Page shell: card con header Core AI e body ampio --- */
.ui-shell {
    width: 100%;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: var(--radius-box, 1rem);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}
.ui-shell__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--ai-core-header);
    color: #fff;
    padding: 0.5rem 1.1rem;
    min-height: 2.5rem;
}
.ui-shell__head i { font-size: 1rem; flex: none; }
.ui-shell__title { font-size: 14px; font-weight: 700; line-height: 1.2; margin: 0; }
.ui-shell__body { padding: 1rem 1.25rem; font-size: 13px; background: white;}

/* --- Tipografia di contenuto (minimo assoluto 13px) --- */
.ui-section-title { font-size: 13px; font-weight: 700; }
.ui-muted { font-size: 13px; opacity: 0.55; }

/* --- Pulsanti di Core View: usa `btn btn-xs/sm ui-btn`. ---
   I bottoni DaisyUI di questa versione hanno testo a 11px: `ui-btn`
   riporta il testo al minimo assoluto di 13px. Opt-in, nessun override
   globale di `.btn`. */
.ui-btn { font-size: 13px; }

/* --- Segmented choice (selezione binaria) --- */
.ui-segment {
    display: inline-flex;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: var(--radius-field, 0.5rem);
    overflow: hidden;
}
.ui-segment label { position: relative; margin: 0; }
.ui-segment input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-segment span {
    display: block;
    padding: 0.35rem 1.2rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.ui-segment input:checked + span { background: #0ea5e9; color: #fff; }
.ui-segment label + label span { border-left: 1px solid rgba(128, 128, 128, 0.35); }

/* --- Form: griglia 2 colonne desktop, 1 colonna mobile --- */
.ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.ui-form-grid .ui-full { grid-column: 1 / -1; }
.ui-field { margin-bottom: 0.5rem; }
.ui-field > label { display: inline-block; font-size: 13px; font-weight: 400; padding: 0.3rem 0.1rem; }
.ui-error { color: #dc2626; font-size: 13px; margin-top: 0.2rem; }

/* --- Label form: bold SOLO per campi obbligatori -------------------------
   Fonti canoniche del required (mai l'asterisco visivo):
   - Django admin: `label.required` (emessa da `label_tag` sul campo reale);
   - componenti applicative: `label.required` esplicita oppure controllo
     obbligatorio reale dentro la label (`.ui-field-label` / `.ui-field`).
   Il marker `*` è prodotto dal componente condiviso, non a mano. */
.ui-field > label.required,
label.required { font-weight: 700; }
label.required::after { content: " *"; }
label.ui-field-label { font-weight: 400; }
label.ui-field-label > span { font-weight: 400; }
label.ui-field-label:has(input[required], select[required], textarea[required]),
label.ui-field-label:has(input[required], select[required], textarea[required]) > span {
    font-weight: 700;
}

/* --- Lista / work queue --- */
.ui-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ui-item { border: 1px solid rgba(128, 128, 128, 0.22); border-radius: 0.5rem; padding: 0.6rem 0.85rem; }
.ui-item--pending { border-left: 3px solid #f59e0b; }
/* Bordo item coerente col badge di stato (stessi colori di .ui-badge--approved/
   --cancelled): Confermata → verde, Annullata → grigio. */
.ui-item--confirmed { border-left: 3px solid #166534; }
.ui-item--cancelled { border-left: 3px solid #374151; background-color: #f3f3f3}
.ui-item__head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.ui-item__title { font-size: 13px; font-weight: 700; }
.ui-item__meta { margin-top: 0.2rem; font-size: 13px; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.ui-item__note { margin-top: 0.25rem; white-space: pre-wrap; }
.ui-item__foot { margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* --- Badge di stato e contatore --- */
.ui-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 0.6rem;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.ui-badge--pending { background: #fef3c7; color: #92400e; }
.ui-badge--approved { background: #dcfce7; color: #166534; }
.ui-badge--rejected { background: #fee2e2; color: #991b1b; }
.ui-badge--cancelled { background: #e5e7eb; color: #374151; }
.ui-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
}
.ui-count.is-zero { background: rgba(128, 128, 128, 0.15); color: inherit; opacity: 0.65; }

/* --- Empty state e toolbar filtri --- */
.ui-empty {
    text-align: center;
    padding: 1.75rem 1rem;
    border: 1px dashed rgba(128, 128, 128, 0.35);
    border-radius: 0.5rem;
}
.ui-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.ui-toolbar .label-text { font-size: 13px; }

/* --- Admin: card Core per ChangeList e Change/View form (solo presentazione).
 * Riusa `.ui-shell`; non altera comportamento. Scope esplicito `.ui-changelist`
 * / `.ui-change-form`: nessun override globale di elementi o classi admin. */
.ui-shell__count,
.ui-shell__subtitle {
    margin-left: auto;
    font-size: 16px;
    font-weight: 600;
    opacity: 0.92;
}
.ui-shell__subtitle {
    font-weight: 400;
    opacity: 0.85;
}

/* La ChangeList contiene il drawer dei filtri: la card non deve ritagliarlo. */
.ui-changelist {
    overflow: visible;
}
.ui-changelist .ui-shell__head {
    border-radius: var(--radius-box, 1rem) var(--radius-box, 1rem) 0 0;
}
.ui-changelist .ui-shell__body,
.ui-change-form .ui-shell__body {
    background-color: white;
    padding: 0;
    border-radius: 0 0 var(--radius-box, 1rem) var(--radius-box, 1rem);
}

/* Controlli interni coerenti con le Core View (font minimo 13px). */
.ui-changelist .btn,
.ui-change-form .btn,
.ui-changelist .object-tools .btn {
    font-size: 13px;
}
.ui-changelist #searchbar {
    font-size: 13px;
    height: 2rem;
}
.card-body .max-h-\[65vh\] {
    max-height: 100%

}
/* --- Page wrapper: variante a tutta larghezza --- */
.ui-page-wide { max-width: none; margin: 0; }

@media (max-width: 640px) {
    .ui-form-grid { grid-template-columns: 1fr; }
    .ui-form-grid .ui-full { grid-column: auto; }
    .ui-shell__body { padding: 0.85rem; }
    .ui-shell__title { font-size: 13px; }
    .ui-changelist .ui-shell__body,
    .ui-change-form .ui-shell__body { padding: 0.5rem; }
}