/* ==========================================================================
   Foglio Cassa – tema grafico
   Sovrascrive le variabili del tema EasyAdmin e aggiunge gli stili dei
   template personalizzati (prefisso .fc-).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token
   -------------------------------------------------------------------------- */
:root {
    /* colori del marchio Pirrotta */
    --fc-brand-red: #c8102e;
    --fc-brand-red-dark: #9e0b23;
    --fc-brand-yellow: #ffd400;

    --fc-positive: #15803d;
    --fc-positive-bg: #dcfce7;
    --fc-negative: #b91c1c;
    --fc-negative-bg: #fee2e2;
    --fc-pending: #a16207;
    --fc-pending-bg: #fef3c7;

    --fc-surface: #ffffff;
    --fc-surface-muted: #f7f6f3;
    --fc-border: #e7e5e0;
    --fc-text: #1f1d1a;
    --fc-text-muted: #6b675f;
    --fc-shadow: 0 1px 2px rgb(31 29 26 / 6%), 0 1px 3px rgb(31 29 26 / 8%);

    --ea-primary: var(--fc-brand-red);
    --ea-radius: 0.375rem;
    --page-login-bg: var(--fc-surface-muted);
}

:root,
.ea-light-scheme {
    --body-bg: var(--fc-surface-muted);
    --content-bg: var(--fc-surface-muted);
    --sidebar-bg: var(--fc-surface);
    --sidebar-border-color: var(--fc-border);
    --sidebar-menu-active-item-bg: color-mix(in srgb, var(--fc-brand-red) 9%, transparent);
    --sidebar-menu-active-item-color: var(--fc-brand-red-dark);
    --table-thead-color: var(--fc-text-muted);
    --table-cell-border-color: var(--fc-border);
    --table-hover-cell-bg: #fbfaf7;
}

.ea-dark-scheme {
    --ea-primary: #e23a52;
    --fc-surface: var(--gray-800);
    --fc-surface-muted: var(--gray-900);
    --fc-border: var(--gray-700);
    --fc-text: var(--gray-100);
    --fc-text-muted: var(--gray-400);
    --fc-positive: #4ade80;
    --fc-positive-bg: rgb(74 222 128 / 14%);
    --fc-negative: #f87171;
    --fc-negative-bg: rgb(248 113 113 / 14%);
    --fc-pending: #fbbf24;
    --fc-pending-bg: rgb(251 191 36 / 14%);
    --fc-shadow: none;
    --sidebar-menu-active-item-bg: rgb(226 58 82 / 18%);
    --sidebar-menu-active-item-color: #ff9aa8;
}

/* --------------------------------------------------------------------------
   Layout: sidebar e intestazione
   -------------------------------------------------------------------------- */
.sidebar-wrapper {
    border-block-start: 4px solid var(--fc-brand-yellow);
}

.fc-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--fc-text);
    text-decoration: none;
}

.fc-brand img {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.fc-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.fc-brand-name {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-text-muted);
}

.fc-brand-app {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--fc-text);
}

.fc-sidebar-footer {
    font-size: 0.75rem;
    color: var(--fc-text-muted);
}

.content-header-title .title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fc-text);
}

/* --------------------------------------------------------------------------
   Pannelli di contenuto (elenco, dettaglio, form)
   -------------------------------------------------------------------------- */
.content-body > table.datagrid,
.content-body .form-tabs-content {
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--fc-shadow);
}

/* Niente overflow: hidden sulla tabella, altrimenti il menu azioni (…) viene tagliato:
   gli angoli arrotondati si ottengono sulle celle d'angolo */
.content-body > table.datagrid {
    border-collapse: separate;
    border-spacing: 0;
}

.content-body > table.datagrid thead tr:first-child th:first-child {
    border-start-start-radius: var(--border-radius-lg);
}

.content-body > table.datagrid thead tr:first-child th:last-child {
    border-start-end-radius: var(--border-radius-lg);
}

.content-body > table.datagrid tbody tr:last-child td {
    border-block-end: 0;
}

table.datagrid thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: normal;
    vertical-align: bottom;
    background: var(--fc-surface-muted);
}

.main-content {
    min-inline-size: 0;
}

table.datagrid td,
table.datagrid th {
    padding-block: 0.625rem;
}

table.datagrid td.field-money,
table.datagrid td.field-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .content-body > table.datagrid {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    table.datagrid:not(.datagrid-empty) tr {
        background: var(--fc-surface);
    }
}

/* Pagina di dettaglio: tabelle a tutta larghezza e totale consegnato in evidenza */
.ea-detail .field-group.fc-field-table {
    display: block;
}

.ea-detail .field-group.fc-field-table + .field-group.fc-field-table {
    margin-block-start: 1.5rem;
}

.ea-detail .field-group.fc-field-table .field-label {
    inline-size: auto;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: start;
    color: var(--fc-text-muted);
}

.ea-detail .field-group.fc-field-highlight {
    margin-block-start: 0.5rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--fc-border);
}

.ea-detail .field-group.fc-field-highlight .field-label,
.ea-detail .field-group.fc-field-highlight .field-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fc-text);
}

/* Schede (INCASSI, SPESE, SCONTRINI, CHIUSURA) */
.form-tabs-tablist .nav-tabs .nav-link {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.content-body .form-tabs-content {
    padding: 1.25rem;
}

/* Righe delle collection (incassi, spese, scontrini) nei form */
.form-group.field-collection .accordion-item {
    border-color: var(--fc-border);
    border-radius: var(--border-radius-lg);
    background: var(--fc-surface-muted);
}

.form-group.field-collection .field-collection-add-button {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Importi e stati
   -------------------------------------------------------------------------- */
.fc-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fc-amount--zero {
    color: var(--fc-text-muted);
}

.fc-amount--negative {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-pill);
    background: var(--fc-negative-bg);
    color: var(--fc-negative);
    font-weight: 600;
}

.fc-amount--negative i {
    font-size: 0.75em;
}

.fc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.fc-status--confirmed {
    background: var(--fc-positive-bg);
    color: var(--fc-positive);
}

.fc-status--pending {
    background: var(--fc-pending-bg);
    color: var(--fc-pending);
}

/* --------------------------------------------------------------------------
   Tabelle di dettaglio (template dashboard/field/*)
   -------------------------------------------------------------------------- */
.fc-table-wrapper {
    inline-size: 100%;
    overflow-x: auto;
    border: 1px solid var(--fc-border);
    border-radius: var(--border-radius-lg);
    background: var(--fc-surface);
}

.fc-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--fc-text);
}

.fc-table th,
.fc-table td {
    padding: 0.625rem 0.875rem;
    border-block-end: 1px solid var(--fc-border);
    text-align: start;
    vertical-align: top;
}

.fc-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fc-text-muted);
    background: var(--fc-surface-muted);
    white-space: nowrap;
}

.fc-table tbody tr:hover td {
    background: var(--table-hover-cell-bg, var(--fc-surface-muted));
}

/* Righe selezionabili per il totale parziale (public/js/foglio-cassa-detail.js) */
.fc-table[data-fc-selectable] tbody tr {
    cursor: pointer;
    user-select: none;
}

.fc-table[data-fc-selectable] tbody tr:focus-visible {
    outline: 2px solid var(--fc-brand-red);
    outline-offset: -2px;
}

.fc-table tbody tr.fc-row--selected td {
    background: color-mix(in srgb, var(--fc-brand-red) 10%, var(--fc-surface));
}

.fc-table tbody tr.fc-row--selected td:first-child {
    box-shadow: inset 3px 0 0 var(--fc-brand-red);
}

.fc-table tfoot td {
    border-block-end: 0;
    font-weight: 700;
    background: var(--fc-surface-muted);
}

.fc-table .fc-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fc-table .fc-center {
    text-align: center;
}

.fc-table .fc-muted {
    color: var(--fc-text-muted);
}

.fc-table-empty {
    padding: 1.25rem;
    text-align: center;
    color: var(--fc-text-muted);
}

.fc-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius);
    background: var(--fc-surface-muted);
    border: 1px solid var(--fc-border);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Pagine di accesso (login e registrazione)
   -------------------------------------------------------------------------- */
body.page-login.fc-auth {
    background:
        linear-gradient(180deg, var(--fc-brand-red) 0, var(--fc-brand-red-dark) 42vh, transparent 42vh),
        var(--fc-surface-muted);
}

.fc-auth .login-wrapper {
    inline-size: min(100% - 2rem, 26rem);
    margin: 2rem auto;
}

.fc-auth-card {
    background: var(--fc-surface);
    border-radius: var(--border-radius-xl);
    border-block-start: 4px solid var(--fc-brand-yellow);
    box-shadow: 0 10px 30px rgb(31 29 26 / 12%);
    padding: 2rem 2rem 1.75rem;
}

.fc-auth-header {
    text-align: center;
    margin-block-end: 1.5rem;
}

.fc-auth-header img {
    inline-size: 84px;
    block-size: 84px;
    border-radius: var(--border-radius-lg);
    margin-block-end: 0.875rem;
}

.fc-auth-header .fc-brand-name {
    display: block;
    margin-block-end: 0.25rem;
}

.fc-auth-header h1 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fc-text);
}

.fc-auth .form-group {
    margin-block-end: 1rem;
}

.fc-auth .form-control {
    min-block-size: 2.625rem;
}

.fc-password {
    position: relative;
}

.fc-password .form-control {
    padding-inline-end: 2.75rem;
}

.fc-password-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--fc-text-muted);
    cursor: pointer;
}

.fc-password-toggle:hover,
.fc-password-toggle:focus-visible {
    color: var(--fc-brand-red);
}

.fc-auth .btn-primary {
    display: block;
    inline-size: 100%;
    text-align: center;
    min-block-size: 2.75rem;
    margin-block-start: 0.5rem;
    font-weight: 600;
}

.fc-auth-footer {
    margin-block-start: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--fc-text-muted);
}

.fc-auth-footer a {
    color: var(--fc-brand-red);
    font-weight: 600;
}

.fc-auth .form-error-message,
.fc-auth .invalid-feedback {
    color: var(--fc-negative);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Contatori live nel form (public/js/foglio-cassa-form.js)
   -------------------------------------------------------------------------- */
.fc-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
}

.fc-counter {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 9.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--fc-border);
    border-radius: var(--border-radius-lg);
    background: var(--fc-surface-muted);
}

.fc-counter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fc-text-muted);
}

.fc-counter-value {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fc-text);
    white-space: nowrap;
}

.fc-counter--empty .fc-counter-value {
    color: var(--fc-text-muted);
    font-weight: 400;
}

.fc-counter--total {
    margin-inline-start: auto;
    border-color: color-mix(in srgb, var(--fc-brand-red) 35%, var(--fc-border));
    background: color-mix(in srgb, var(--fc-brand-red) 6%, var(--fc-surface));
}

/* --------------------------------------------------------------------------
   Calendario dei campi data (flatpickr)
   -------------------------------------------------------------------------- */
.flatpickr-calendar {
    font-family: inherit;
    box-shadow: var(--shadow-lg);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.today.selected {
    background: var(--fc-brand-red);
    border-color: var(--fc-brand-red);
}

.flatpickr-day.today {
    border-color: var(--fc-brand-red);
}

input[data-fc-datepicker] {
    max-inline-size: 11rem;
    background-image: none;
    cursor: pointer;
}