/*
    Skin "stile Google Sheets" per jspreadsheet CE (vedi public/assets/vendor/jspreadsheet/).
    Tutto scoped sotto .gs-sheet-app per non toccare jSuites altrove (context
    menu, color picker, ecc. usano le stesse classi in tutta l'app).
    Blu selezione #1a73e8 = lo stesso blu Material che Google usa per la
    selezione celle in Sheets/Docs; verde #0f9d58 = il verde di brand di
    Sheets, riservato ai tab foglio attivi e al pulsante Nuovo foglio.
*/

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/vendor/jspreadsheet/fonts/MaterialIcons-Regular.ttf') format('truetype');
    font-display: block;
}

.gs-sheet-app {
    --gs-sheet-blue: #1a73e8;
    --gs-sheet-blue-tint: rgba(26, 115, 232, 0.08);
    --gs-sheet-green: #0f9d58;
    --gs-sheet-border: #e0e0e0;
    --gs-sheet-header-bg: #f8f9fa;
    --gs-sheet-text: #202124;
    --gs-sheet-text-muted: #5f6368;
    font-family: "Google Sans", Roboto, ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--gs-sheet-text);
    background: #fff;
    border: 1px solid var(--gs-sheet-border);
    border-radius: 8px;
    overflow: hidden;
}

html[data-theme="dark"] .gs-sheet-app {
    --gs-sheet-border: #3c4043;
    --gs-sheet-header-bg: #292a2d;
    --gs-sheet-text: #e8eaed;
    --gs-sheet-text-muted: #9aa0a6;
    background: #202124;
}

/* ---------- Barra del nome file + azioni (non fornita da jspreadsheet) ---------- */
.gs-sheet-titlebar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--gs-sheet-border);
}
.gs-sheet-titlebar-icon {
    width: 28px;
    height: 28px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gs-sheet-titlebar-icon svg { width: 24px; height: 24px; }
.gs-sheet-title-input {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--gs-sheet-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    min-width: 8rem;
    flex: 1;
}
.gs-sheet-title-input:hover { border-color: var(--gs-sheet-border); }
.gs-sheet-title-input:focus {
    outline: none;
    border-color: var(--gs-sheet-blue);
    background: var(--gs-sheet-blue-tint);
}
.gs-sheet-titlebar-status {
    font-size: 0.78rem;
    color: var(--gs-sheet-text-muted);
    margin-left: auto;
    white-space: nowrap;
}
.gs-sheet-titlebar-status.gs-saving { color: var(--gs-sheet-blue); }

/* ---------- Barra della formula (name box + fx + input, non fornita da jspreadsheet) ---------- */
.gs-formula-bar {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--gs-sheet-border);
    background: var(--gs-sheet-header-bg);
}
.gs-namebox {
    width: 5.5rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: var(--gs-sheet-text);
    border-right: 1px solid var(--gs-sheet-border);
    font-variant-numeric: tabular-nums;
    background: #fff;
}
:root[data-theme="dark"] .gs-namebox { background: #202124; }
.gs-formula-fx {
    width: 2.25rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    color: var(--gs-sheet-text-muted);
    border-right: 1px solid var(--gs-sheet-border);
}
.gs-formula-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: #fff;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--gs-sheet-text);
    font-family: Arial, sans-serif;
}
:root[data-theme="dark"] .gs-formula-input { background: #202124; }
.gs-formula-input:focus { outline: none; }

/* ---------- Barra strumenti custom (bold/italic/colori/allineamento) ---------- */
.gs-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--gs-sheet-header-bg);
    border-bottom: 1px solid var(--gs-sheet-border);
    flex-wrap: wrap;
}
.gs-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--gs-sheet-text-muted);
    cursor: pointer;
    font-size: 19px;
    padding: 0;
}
.gs-toolbar-btn svg { width: 18px; height: 18px; flex: none; }
.gs-toolbar-btn:hover { background: rgba(60, 64, 67, 0.08); color: var(--gs-sheet-text); }
.gs-toolbar-btn:focus-visible { outline: 2px solid var(--gs-sheet-blue); outline-offset: 1px; }
.gs-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--gs-sheet-border);
    margin: 0 4px;
    flex: none;
}
.gs-toolbar-color {
    /* Input color nativo, tenuto invisibile: viene aperto via .click() dal
       popover swatch per la voce "Colore personalizzato…". */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Pulsanti con dropdown: 123 (formato numero), colori, Σ (funzioni) ---------- */
.gs-toolbar-dropdown-wrap { position: relative; display: inline-flex; }
.gs-toolbar-btn-wide {
    width: auto;
    padding: 0 4px 0 8px;
    gap: 1px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: Arial, sans-serif;
}
.gs-toolbar-btn-wide.material-icons { font-size: 19px; padding: 0 4px 0 6px; }
.gs-toolbar-btn-wide svg { width: 18px; height: 18px; flex: none; }
.gs-toolbar-caret { display: inline-flex; opacity: 0.7; }
.gs-toolbar-caret svg { width: 14px; height: 14px; }

.gs-color-btn { position: relative; flex-direction: column; padding-top: 2px; }
.gs-color-swatch {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 4px;
    height: 3px;
    border-radius: 1px;
}

.gs-toolbar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--gs-sheet-border);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    padding: 4px;
    min-width: 15rem;
}
.gs-toolbar-dropdown.gs-open { display: block; }
:root[data-theme="dark"] .gs-toolbar-dropdown { background: #292a2d; }

.gs-toolbar-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    border-radius: 4px;
    color: var(--gs-sheet-text);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    font-family: Arial, sans-serif;
}
.gs-toolbar-dropdown-item:hover { background: rgba(60, 64, 67, 0.08); }
.gs-format-example {
    color: var(--gs-sheet-text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.gs-toolbar-dropdown-sep {
    display: block;
    height: 1px;
    background: var(--gs-sheet-border);
    margin: 4px 2px;
}

/* Popover colore: griglia di swatch curata (meno voci della tavolozza intera di Sheets) */
.gs-color-popover { min-width: auto; width: 13.5rem; padding: 0.6rem; }
.gs-color-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}
.gs-color-swatch-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 0;
}
.gs-color-swatch-btn:hover { outline: 2px solid var(--gs-sheet-blue); outline-offset: 1px; }
.gs-color-custom-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.3rem;
    border: none;
    border-top: 1px solid var(--gs-sheet-border);
    background: none;
    color: var(--gs-sheet-text);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: Arial, sans-serif;
}
.gs-color-custom-btn:hover { background: rgba(60, 64, 67, 0.08); }
.gs-color-custom-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--gs-sheet-border);
    background:
        linear-gradient(45deg, transparent 48%, #ccc 48%, #ccc 52%, transparent 52%),
        conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}

/* ---------- Griglia: intestazioni riga/colonna ---------- */
.gs-sheet-app .jss_worksheet {
    background: #fff;
    border-right-color: var(--gs-sheet-border);
    border-bottom-color: var(--gs-sheet-border);
}
:root[data-theme="dark"] .gs-sheet-app .jss_worksheet { background: #202124; }
.gs-sheet-app .jss_worksheet td {
    border-color: var(--gs-sheet-border) !important;
    color: var(--gs-sheet-text);
    font-family: Arial, sans-serif;
    font-size: 0.82rem;
}
.gs-sheet-app .jss_worksheet > thead > tr > td {
    background-color: var(--gs-sheet-header-bg) !important;
    color: var(--gs-sheet-text-muted);
    font-weight: 500;
    border-color: var(--gs-sheet-border) !important;
    text-align: center;
}
.gs-sheet-app .jss_worksheet > thead > tr > td.selected {
    background-color: rgba(26, 115, 232, 0.16) !important;
    color: var(--gs-sheet-blue);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--gs-sheet-blue);
}
.gs-sheet-app .jss_worksheet > tbody > tr > td:first-child {
    background-color: var(--gs-sheet-header-bg) !important;
    color: var(--gs-sheet-text-muted);
    font-weight: 500;
    text-align: center;
}
.gs-sheet-app .jss_worksheet > tbody > tr > td:first-child.selected {
    background-color: rgba(26, 115, 232, 0.16) !important;
    color: var(--gs-sheet-blue);
    font-weight: 700;
    box-shadow: inset -2px 0 0 var(--gs-sheet-blue);
}
.gs-sheet-app .jss_worksheet > tbody > tr > td:first-child.gs-sheet-addrow {
    cursor: pointer;
    color: var(--gs-sheet-blue);
    font-weight: 700;
    font-size: 1rem;
}
.gs-sheet-app .jss_worksheet > tbody > tr > td:first-child.gs-sheet-addrow:hover {
    background-color: var(--gs-sheet-blue-tint) !important;
}

/* ---------- Selezione celle: bordo/fill blu come in Sheets ---------- */
.gs-sheet-app .jss_worksheet .highlight,
.gs-sheet-app .jss_worksheet .selection {
    background-color: var(--gs-sheet-blue-tint) !important;
}
.gs-sheet-app .jss_worksheet .highlight-selected {
    background-color: transparent !important;
}
.gs-sheet-app .jss_worksheet .highlight-top {
    border-top: 2px solid var(--gs-sheet-blue) !important;
    box-shadow: none !important;
}
.gs-sheet-app .jss_worksheet .highlight-left {
    border-left: 2px solid var(--gs-sheet-blue) !important;
    box-shadow: none !important;
}
.gs-sheet-app .jss_worksheet .highlight-right {
    border-right: 2px solid var(--gs-sheet-blue) !important;
}
.gs-sheet-app .jss_worksheet .highlight-bottom {
    border-bottom: 2px solid var(--gs-sheet-blue) !important;
}

/* ---------- Tab dei fogli in fondo (jtabs), come le linguette di Sheets ---------- */
.gs-sheet-app .jtabs-headers-container {
    background: var(--gs-sheet-header-bg);
    border-top: 1px solid var(--gs-sheet-border);
}
.gs-sheet-app .jtabs-headers > div {
    color: var(--gs-sheet-text-muted);
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
}
.gs-sheet-app .jtabs-selected {
    color: var(--gs-sheet-green) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--gs-sheet-green);
}

/* ---------- Icone materiali (bold/italic/colori) ---------- */
.gs-sheet-app .material-icons,
.gs-sheet-app .material-icons-outlined {
    font-family: 'Material Icons', 'Material Symbols Outlined' !important;
}