/*
 * Stili di segnaore oltre a quelli di Filament. CSS semplice (niente build):
 * usa le variabili di colore di Filament, così funziona anche in tema scuro.
 */

.sg-quarter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .sg-quarter { grid-template-columns: minmax(0, 1fr); }
}

.sg-month {
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    overflow: clip; /* non hidden: bloccherebbe lo sticky dell'intestazione */
    background: white;
}

.dark .sg-month { border-color: rgb(255 255 255 / 0.1); background: var(--gray-900); }

.sg-month-head {
    position: sticky;
    top: 4rem; /* sotto la barra in alto di Filament */
    z-index: 5;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--gray-200);
}

.dark .sg-month-head { border-color: rgb(255 255 255 / 0.1); background-color: var(--gray-900); }

.sg-month-head small { font-weight: 400; color: var(--gray-500); }

.sg-day {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    min-height: 2.25rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
}

.dark .sg-day { border-color: rgb(255 255 255 / 0.05); }

.sg-day:last-child { border-bottom: 0; }

.sg-day.is-weekend { background: var(--gray-100); }
.dark .sg-day.is-weekend { background: rgb(255 255 255 / 0.04); }

.sg-day.is-today { box-shadow: inset 3px 0 0 var(--primary-500); }

.sg-day.is-outside { opacity: 0.45; }

.sg-day-date {
    position: relative;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    color: var(--gray-700);
}

.dark .sg-day-date { color: var(--gray-300); }

.sg-day-date .sg-dow { font-size: 0.75rem; color: var(--gray-500); text-transform: lowercase; }
.sg-day-date .sg-total { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.15rem; }

.sg-day-entries { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.sg-entry {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem;
    text-align: left;
    cursor: pointer;
}

.sg-entry:hover { background: var(--gray-50); }
.dark .sg-entry:hover { background: rgb(255 255 255 / 0.05); }
.sg-day.is-weekend .sg-entry:hover { background: white; }
.dark .sg-day.is-weekend .sg-entry:hover { background: rgb(255 255 255 / 0.08); }

.sg-entry-minutes { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }

.sg-entry-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-600);
    min-width: 0;
}

.dark .sg-entry-text { color: var(--gray-400); }

.sg-entry-text.is-missing { font-style: italic; }

.sg-entry.is-gift { opacity: 0.6; }

.sg-entry-state { flex: none; margin-left: auto; display: flex; }

.sg-entry-bucket { flex: none; max-width: 45%; overflow: hidden; cursor: pointer; }
.sg-entry-bucket:hover .fi-badge { text-decoration: underline; }

.sg-add {
    align-self: flex-start;
    opacity: 0;
    color: var(--gray-400);
    position: absolute;
    top: 0;
    right: 0.25rem;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 600;
    padding: 0 0.25rem;
    cursor: pointer;
}

.sg-day:hover .sg-add { opacity: 1; }
.sg-add:hover { color: var(--primary-600); }

.sg-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--gray-500); align-items: center; }
.sg-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.sg-swatch { width: 0.9rem; height: 0.9rem; border-radius: 0.2rem; border: 1px solid var(--gray-200); display: inline-block; }

/* Trimestri */
.sg-quarters { display: flex; flex-direction: column; gap: 1rem; }
.sg-q-risk { box-shadow: inset 4px 0 0 var(--danger-500); border-radius: 0.75rem; }
.sg-q-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .sg-q-grid { grid-template-columns: minmax(0, 1fr); } }
.sg-q-box { display: flex; flex-direction: column; gap: 0.15rem; }
.sg-q-label { font-size: 0.8rem; color: var(--gray-500); }
.sg-q-src { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); margin-left: .3rem; }
.sg-q-big { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sg-q-small { font-size: 0.8rem; color: var(--gray-600); }
.dark .sg-q-small { color: var(--gray-400); }
.sg-q-row { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.9rem; font-size: 0.85rem; align-items: baseline; }
.sg-link { color: var(--primary-600); }
.sg-link:hover { text-decoration: underline; }
.dark .sg-link { color: var(--primary-400); }
.sg-warn { color: var(--warning-600); }

/* Selezione multipla nel Diario */
.sg-entry-row { display: flex; align-items: center; gap: 0.2rem; min-width: 0; }
.sg-check { width: 0.9rem; height: 0.9rem; flex: none; cursor: pointer; accent-color: var(--primary-600); margin: 0 0.15rem 0 0; vertical-align: -2px; }
.sg-check-placeholder { width: 0.9rem; flex: none; margin-right: 0.15rem; }
.sg-selbar {
    position: sticky; bottom: 0.75rem; z-index: 20;
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; border-radius: 0.75rem;
    background: white; border: 1px solid var(--primary-300); box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
}
.dark .sg-selbar { background: var(--gray-900); border-color: var(--primary-700); }
.sg-selbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Riga trovata con la ricerca globale */
.sg-entry.is-highlight { outline: 2px solid var(--primary-500); outline-offset: 1px; background: var(--primary-50); }
.dark .sg-entry.is-highlight { background: rgb(255 255 255 / 0.08); }

/* Statistiche */
.sg-st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sg-st-period { min-width: 14rem; }
.sg-st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .sg-st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1024px) { .sg-st-two { grid-template-columns: minmax(0, 1fr); } }
.sg-st-table-wrap { overflow-x: auto; }
.sg-st-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.sg-st-table th { text-align: left; font-weight: 500; color: var(--gray-500); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.sg-st-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.sg-st-table tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--gray-200); }
.dark .sg-st-table th, .dark .sg-st-table tfoot td { border-color: var(--gray-700); }
.dark .sg-st-table td { border-color: var(--gray-800); }
.sg-st-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-inline-badge { display: inline-flex; margin-left: 0.35rem; vertical-align: middle; }
.sg-st-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.4rem; background: var(--sg-c); }
.sg-slot-0 { --sg-c: #2a78d6; } .sg-slot-1 { --sg-c: #eb6834; } .sg-slot-2 { --sg-c: #1baf7a; } .sg-slot-3 { --sg-c: #eda100; }
.sg-slot-4 { --sg-c: #e87ba4; } .sg-slot-5 { --sg-c: #008300; } .sg-slot-6 { --sg-c: #6250d6; } .sg-slot-x { --sg-c: #898781; }
.dark .sg-slot-0 { --sg-c: #3987e5; } .dark .sg-slot-1 { --sg-c: #d95926; } .dark .sg-slot-2 { --sg-c: #199e70; } .dark .sg-slot-3 { --sg-c: #c98500; }
.dark .sg-slot-4 { --sg-c: #d55181; } .dark .sg-slot-6 { --sg-c: #9085e9; }

/* Differenze */
.sg-dif-table td { line-height: 1.35; }
.sg-dif-table td:nth-child(2), .sg-dif-table td:nth-child(3) { width: 40%; }
.sg-dif-mark { background: color-mix(in srgb, var(--warning-400) 30%, transparent); border-radius: 3px; padding: 0 .2rem; }
.sg-dif-actions { white-space: nowrap; text-align: right; }
.sg-dif-actions > * + * { margin-left: .3rem; }