/* nallium-sheets-frontend — design system
 *
 * Base copiée à l'identique de nallium-drive-frontend/css/style.css (tokens
 * :root + chrome commun : topbar, boutons, panels, alertes, empty-state)
 * pour rester visuellement cohérent avec le reste de la suite bureautique
 * Nallium — c'est un pré-requis produit explicite ("chrome" homogène sur
 * Drive/Docs/Sheets/Slides). Les styles propres à l'éditeur de classeur
 * (grille, barre de formule, onglets de feuille) sont ajoutés à la fin.
 */

:root {
  --text: #172033;
  --muted: #64748b;
  --blue: #3b82f6;
  --green: #22c55e;
  --amber: #f59e0b;
  --pink: #ec4899;
  --violet: #8b5cf6;
  --red: #ef4444;
  --cyan: #06b6d4;
  --bg: #f7f9ff;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-solid: #ffffff;
  --border: rgba(30, 41, 59, 0.12);
  --shadow: 0 24px 80px rgba(30, 41, 59, 0.12);
  --shadow-soft: 0 14px 38px rgba(30, 41, 59, 0.09);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 4%, rgba(59, 130, 246, 0.16), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(236, 72, 153, 0.12), transparent 24%),
    radial-gradient(circle at 72% 88%, rgba(34, 197, 94, 0.13), transparent 26%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: var(--blue);
  text-decoration: none;
}

button {
  font: inherit;
}

/* ---------------------------------------------------------------------
 * Barre de navigation (reprise drive-frontend)
 * ------------------------------------------------------------------- */
.store-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.store-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: #0f172a;
  cursor: pointer;
}

.store-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  padding: 2px;
  background: conic-gradient(from 180deg, var(--blue), var(--green), var(--amber), var(--pink), var(--violet), var(--blue));
}

.store-brand-logo span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #ffffff;
  font-weight: 950;
  font-size: 15px;
  color: #111827;
}

.store-nav {
  display: flex;
  gap: 4px;
}

.store-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.store-nav a.active,
.store-nav a:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue);
}

.store-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.store-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28);
}

.btn-outline {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-danger {
  background: #fff;
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Layout général
 * ------------------------------------------------------------------- */
.store-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.panel {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.form-control {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 14px;
  background: #fff;
}

.hint {
  font-size: 12px;
  color: var(--muted);
}

.alert-banner {
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}

.alert-banner.error {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.alert-banner.success {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.login-gate {
  text-align: center;
  padding: 50px 20px;
}

.login-gate p {
  color: var(--muted);
  margin-bottom: 18px;
}

.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 10px;
}

.plan-row:last-child {
  margin-bottom: 0;
}

/* =======================================================================
 * Nallium Sheets — styles propres à l'éditeur de classeur
 * ===================================================================== */

/* Le classeur occupe tout l'espace sous la topbar : on désactive le
 * padding/centrage de .store-page pour cette vue précise et on passe en
 * colonne flex plein écran (topbar / barre de formule / grille / onglets). */
.sheets-page {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 65px);
}

.sheets-topbar {
  flex-wrap: wrap;
  row-gap: 10px;
}

.sheets-title-input {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  background: transparent;
  min-width: 120px;
  max-width: 320px;
}

.sheets-title-input:hover,
.sheets-title-input:focus {
  border-color: var(--border);
  background: #fff;
  outline: none;
}

.sheets-title-input:disabled {
  color: var(--text);
}

/* Backlog #262 : extension affichée à côté du titre, jamais dans le champ
 * éditable lui-même (voir renderTopbar/renderShell côté JS). */
.sheets-title-ext {
  font-weight: 800;
  font-size: 15px;
  color: var(--muted);
  margin-left: -6px;
  margin-right: 6px;
  white-space: nowrap;
}

.sheets-save-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sheets-save-status.is-saving { color: var(--blue); }
.sheets-save-status.is-saved { color: var(--green); }
.sheets-save-status.is-error { color: var(--red); }

.sheets-readonly-badge {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.sheets-conflict-banner {
  background: rgba(239, 68, 68, 0.12);
  color: #991b1b;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* -----------------------------------------------------------------
 * Barre d'outils
 * ------------------------------------------------------------- */
.sheets-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid var(--border);
}

.sheets-toolbar-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 2px 6px;
}

.sheets-tool-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.sheets-tool-btn:hover {
  background: rgba(30, 41, 59, 0.08);
}

.sheets-tool-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
  color: var(--blue);
}

.sheets-tool-btn-wide {
  width: auto;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.sheets-color-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}

/* Police/taille (backlog #9, suite) — même hauteur que les boutons outils
 * pour rester alignés dans la barre. */
.sheets-font-select {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  padding: 0 6px;
  cursor: pointer;
  max-width: 140px;
}

.sheets-font-size-select {
  max-width: 72px;
}

/* -----------------------------------------------------------------
 * Barre de formule
 * ------------------------------------------------------------- */
.sheets-formula-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.sheets-formula-ref {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  min-width: 46px;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.sheets-formula-fx {
  font-style: italic;
  font-weight: 800;
  color: var(--muted);
  font-size: 13px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}

.sheets-formula-fx:hover {
  background: rgba(30, 41, 59, 0.08);
}

/* Menu déroulant "fx" de la barre de formule (backlog #7). */
.sheets-fx-dropdown {
  position: relative;
}

.sheets-fx-menu {
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 25;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.sheets-fx-menu-item {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.sheets-fx-menu-item span {
  color: var(--muted);
  font-size: 12px;
}

.sheets-fx-menu-item:hover {
  background: rgba(59, 130, 246, 0.08);
}

.sheets-fx-menu-hint {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.sheets-formula-input-wrap {
  position: relative;
  flex: 1;
}

/* #370 : liste d'autocomplétion de fonctions -- même wrapper "position:
 * relative" que .sheets-formula-input-wrap ci-dessus pour la barre de
 * formule, et la <td class="sheets-cell"> (déjà position:relative) pour
 * l'édition directe en cellule -- voir FormulaAutocomplete/startCellEdit. */
.formula-ac-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 240px;
  max-width: 360px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.formula-ac-item {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.formula-ac-item strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: nowrap;
}

.formula-ac-item span {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formula-ac-item:hover,
.formula-ac-item.active {
  background: rgba(59, 130, 246, 0.08);
}

.sheets-formula-input {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff;
  box-sizing: border-box;
  z-index: 1;
  /* même principe que .sheets-cell-input ci-dessus : texte transparent,
     le calque .sheets-formula-input-overlay (au-dessus, voir son
     z-index) affiche le texte coloré. */
  color: transparent;
  caret-color: #0f172a;
}

.sheets-formula-input:focus {
  outline: 2px solid rgba(59, 130, 246, 0.3);
  border-color: var(--blue);
}

.sheets-formula-input-overlay {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-sizing: border-box;
  line-height: 18px;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  color: #0f172a;
  z-index: 2;
}

.sheets-formula-input-overlay .ov-inner {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}

/* -----------------------------------------------------------------
 * Grille
 * ------------------------------------------------------------- */
.sheets-grid-wrap {
  flex: 1;
  overflow: auto;
  background: #fff;
  position: relative;
}

.sheets-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.sheets-grid th,
.sheets-grid td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
  height: 26px;
  min-width: 90px;
  width: 90px;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Bugs de sélection (retour utilisateur) : "j'ai plus l'impression de
     selection du texte que des cellules" -- seuls les en-têtes de ligne/
     colonne avaient user-select:none, pas les cellules de données. Un
     glisser sur la grille déclenchait donc la sélection de TEXTE native
     du navigateur EN PLUS de notre propre rectangle de sélection, ce qui
     explique aussi l'impression de "déselection" visuelle au relâchement
     du clic (la sélection native disparaît au mouseup, la nôtre reste --
     les deux se superposaient et semaient la confusion). */
  user-select: none;
}

.sheets-grid .sheets-col-head,
.sheets-grid .sheets-row-head {
  background: #f1f5f9;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  user-select: none;
  position: sticky;
  z-index: 3;
  cursor: pointer;
}

/* Ligne/colonne entière sélectionnée via un clic sur son en-tête
   (backlog #6). */
.sheets-grid .sheets-col-head.selected,
.sheets-grid .sheets-row-head.selected {
  background: var(--blue);
  color: #fff;
}

/* Cellule survolée pendant un Alt+glisser de sélection (backlog #5) — voir
   js/app.js::movingSelection. */
.sheets-cell.drag-move-target {
  outline: 2px dashed var(--blue);
  outline-offset: -2px;
}

/* Poignée de recopie incrémentée (backlog #5, suite) — petit carré en bas
 * à droite de la sélection, voir js/app.js::cellTdHtml/performFillHandle.
 * Débordement volontaire (right/bottom négatifs) pour rester visible
 * même par-dessus une bordure de cellule voisine. */
.sheets-fill-handle {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 7px;
  height: 7px;
  background: var(--blue);
  border: 1px solid #fff;
  border-radius: 1px;
  cursor: crosshair;
  z-index: 3;
}

/* Aperçu des cellules qui seront remplies pendant le glisser de la
 * poignée — voir js/app.js::renderFillPreview. */
.sheets-cell.fill-target {
  outline: 1.5px dashed var(--blue);
  outline-offset: -1.5px;
  background: rgba(59, 130, 246, 0.1);
}

.sheets-grid .sheets-col-head {
  top: 0;
  z-index: 4;
}

.sheets-grid .sheets-row-head {
  left: 0;
  min-width: 42px;
  width: 42px;
  z-index: 2;
}

.sheets-grid .sheets-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  background: #f1f5f9;
  min-width: 42px;
  width: 42px;
}

.sheets-grid thead th.sheets-col-head {
  position: sticky;
}

/* #319 : indicateur visuel de ligne/colonne masquée -- double trait sur
   la frontière adjacente à un "trou" dans la numérotation A/B/C.../1/2/3,
   plus une petite icône cliquable (voir js/app.js::renderGridHtml /
   wireShellEvents .sheets-hidden-indicator) pour réafficher directement
   ce qui a été masqué manuellement. */
.sheets-grid .sheets-col-head.sheets-has-hidden-before {
  border-left: 3px double var(--blue);
}
.sheets-grid .sheets-col-head.sheets-has-hidden-after {
  border-right: 3px double var(--blue);
}
.sheets-grid .sheets-row-head.sheets-has-hidden-before {
  border-top: 3px double var(--blue);
}
.sheets-grid .sheets-row-head.sheets-has-hidden-after {
  border-bottom: 3px double var(--blue);
}
.sheets-hidden-indicator {
  display: inline-block;
  font-weight: 900;
  color: var(--blue);
  cursor: pointer;
  margin-right: 2px;
}
.sheets-hidden-indicator:hover {
  color: #1d4ed8;
}

.sheets-cell {
  padding: 0 5px;
  line-height: 25px;
  cursor: cell;
  vertical-align: middle;
  position: relative;
  color: var(--text);
}

.sheets-cell.sheets-cell-num {
  text-align: right;
}

/* #323 : code d'erreur HyperFormula réel (#N/A, #VALUE!, #NAME?...)
   affiché en rouge discret, avec l'infobulle "title" portant le
   message complet -- voir displayValueForCell/cellTdHtml. */
.sheets-cell.sheets-cell-error {
  color: #dc2626;
  cursor: help;
}

.sheets-cell.selected {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.06);
  z-index: 1;
}

.sheets-cell.in-range {
  background: rgba(59, 130, 246, 0.08);
}

.sheets-cell-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--blue);
  padding: 0 4px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  z-index: 6;
  box-sizing: border-box;
  /* Retour utilisateur : les termes d'une formule doivent être colorés
     DANS le texte tapé, pas seulement sur les cellules référencées --
     voir buildFormulaHighlightHtml/syncInputOverlay. Le vrai texte de
     CET input devient transparent (le curseur reste visible via
     caret-color) ; .sheets-cell-input-overlay juste en dessous affiche
     le même texte avec les références colorées. */
  color: transparent;
  caret-color: #0f172a;
}

.sheets-cell-input:focus {
  outline: none;
}

.sheets-cell-input-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  padding: 0 4px;
  font-size: 12.5px;
  font-family: inherit;
  box-sizing: border-box;
  line-height: 22px;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  color: #0f172a;
  z-index: 7;
}

.sheets-cell-input-overlay .ov-inner {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}

/* -----------------------------------------------------------------
 * Onglets de feuille
 * ------------------------------------------------------------- */
.sheets-tabsbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.85);
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.sheets-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px 8px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}

.sheets-tab:hover {
  background: rgba(30, 41, 59, 0.06);
}

.sheets-tab.active {
  color: var(--blue);
  background: #fff;
  border-color: var(--border);
  border-bottom-color: #fff;
  margin-bottom: -1px;
}

/* #343 : cadenas sur l'onglet d'une feuille protegee. */
.sheets-tab-lock {
  font-size: 11px;
  line-height: 1;
}

.sheets-tab-name-input {
  border: 1px solid var(--blue);
  border-radius: 6px;
  padding: 1px 4px;
  font-size: 12.5px;
  font-weight: 700;
  width: 100px;
}

.sheets-tab-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 999px;
}

.sheets-tab-close:hover {
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
}

.sheets-tab-add {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 16px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
}

.sheets-tab-add:hover {
  background: rgba(30, 41, 59, 0.08);
  color: var(--text);
}

/* -----------------------------------------------------------------
 * Modale d'historique des versions
 * ------------------------------------------------------------- */
.sheets-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
}

.sheets-version-row:last-child {
  margin-bottom: 0;
}

/* #344 : aperçu/comparaison de version — panneau de détail sous la
   liste, table de valeurs figées (pas la grille interactive normale). */
.sheets-version-detail-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 360px;
  overflow: auto;
}
.sheets-version-preview-table {
  border-collapse: collapse;
  font-size: 12.5px;
  width: 100%;
}
.sheets-version-preview-table td,
.sheets-version-preview-table th {
  border: 1px solid var(--border);
  padding: 3px 6px;
  text-align: left;
  white-space: nowrap;
}
.docs-diff-added {
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
  border-radius: 3px;
  padding: 0 2px;
}
.docs-diff-removed {
  background: rgba(239, 68, 68, 0.18);
  color: #991b1b;
  border-radius: 3px;
  padding: 0 2px;
  text-decoration: line-through;
}

/* #347 : aperçu (estimé) des sauts de page dans la grille interactive —
   voir la NOTE HONNÊTE dans renderPageBreakPreview. */
.sheets-pagebreak-h {
  border-bottom: 2px dashed #2563eb !important;
}
.sheets-pagebreak-v {
  border-right: 2px dashed #2563eb !important;
}

.sheets-version-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.sheets-version-meta strong {
  color: var(--text);
}

/* ---------------------------------------------------------------------
 * Bandeau d'alerte "fichier dans la corbeille" — placé sous la topbar,
 * bien plus visible que le petit badge "🔒 Lecture seule" du titre ;
 * s'affiche quand le document ouvert est dans la corbeille (lecture
 * seule imposée aussi côté serveur, voir nallium-drive-backend
 * app/routers/items.py::_effective_permission / update_item / save_content).
 * ------------------------------------------------------------------- */
.trash-warning-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fee2e2;
  color: #991b1b;
  border-bottom: 2px solid var(--red);
  font-weight: 800;
  font-size: 14px;
  text-align: center;
}

/* Menu contextuel clic droit sur une cellule (backlog #10) — voir
   js/app.js::openSheetsContextMenu. */
.sheets-context-menu {
  position: fixed;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 220px;
  padding: 6px;
}

.sheets-context-menu-item {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.sheets-context-menu-item:hover {
  background: rgba(59, 130, 246, 0.08);
  color: var(--blue);
}

.sheets-context-menu-item.disabled {
  color: var(--muted);
  cursor: default;
}

.sheets-context-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

/* Menu déroulant "+ Graphique" de la barre d'outils (backlog #5) — mêmes
   codes visuels que le menu contextuel ci-dessus. */
.sheets-chart-dropdown {
  position: relative;
}

.sheets-chart-menu {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 25;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 150px;
  padding: 6px;
}

.sheets-chart-menu-item {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.sheets-chart-menu-item:hover {
  background: rgba(59, 130, 246, 0.08);
  color: var(--blue);
}

/* Graphiques du classeur (backlog #5) -- retour utilisateur : "il doit
   créer un graphique (déplaçable que dans la zone tableur)". Calque
   ABSOLU à l'intérieur de #sheets-grid-wrap (lui-même position:relative
   et défilable) plutôt qu'un panneau fixe sous la grille : chaque carte
   est positionnée en pixels (voir js/app.js::renderChartsPanel) et
   défile avec la feuille comme un objet flottant Excel/Sheets. Le
   calque lui-même laisse passer les clics (pointer-events:none) vers
   la grille en dessous -- seules les cartes elles-mêmes interceptent. */
.sheets-charts-panel {
  position: absolute;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
  pointer-events: none;
}

.sheets-chart-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 10px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  z-index: 5;
}

.sheets-chart-card.dragging {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  z-index: 10;
}

.sheets-chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  cursor: move;
  user-select: none;
}

.sheets-chart-delete {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.sheets-chart-delete:hover {
  color: var(--red);
}

.sheets-chart-card canvas {
  flex: 1 1 auto;
  min-height: 0;
}

/* Retour utilisateur : "je dois pouvoir les déplacer librement (drag &
   drop et resize)" -- poignée coin bas-droit, même convention visuelle
   que .sheets-fill-handle ailleurs dans la grille. */
.sheets-chart-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  cursor: nwse-resize;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  border-radius: 0 0 3px 0;
  opacity: 0.55;
}

.sheets-chart-resize-handle:hover {
  opacity: 1;
}

/* -----------------------------------------------------------------
 * Modale des plages nommées (backlog #8)
 * ------------------------------------------------------------- */
.sheets-namedrange-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
}

.sheets-namedrange-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sheets-namedrange-form .form-control {
  max-width: 220px;
}

.sheets-namedrange-form .hint {
  flex-basis: 100%;
  margin: 0;
}

/* -----------------------------------------------------------------
 * Barre de menus (esprit Docs — backlog #312-#320, retour utilisateur
 * du 08/10/2026) — voir js/app.js::menuBarHtml/wireMenuBar. Même langage
 * visuel que .sheets-context-menu-item/-sep déjà existant (réutilisé tel
 * quel pour le contenu des menus déroulants), + même principe de popover
 * que .sheets-chart-dropdown/.sheets-fx-dropdown (wrapper relative,
 * bouton, liste absolue togglée en JS).
 * ------------------------------------------------------------- */
.sheets-menubar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.sheets-menubar-item {
  position: relative;
}

.sheets-menubar-btn {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.sheets-menubar-btn:hover {
  background: rgba(30, 41, 59, 0.08);
}

.sheets-menubar-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 260px;
  padding: 6px;
}

/* -----------------------------------------------------------------
 * #317 Commentaires de cellule — petit triangle rouge au coin (même
 * convention visuelle qu'Excel/Google Sheets) + fil de commentaires dans
 * la modale dédiée (voir js/app.js::openCommentsModal).
 * ------------------------------------------------------------- */
.sheets-comment-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent #dc2626 transparent transparent;
  cursor: pointer;
  z-index: 2;
}

.sheets-comment-item {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.sheets-comment-item.resolved {
  opacity: 0.55;
}

.sheets-comment-text {
  font-size: 13px;
}

.sheets-comment-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.sheets-comment-item .sheets-comment-resolve {
  margin-top: 6px;
}

.sheets-comment-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sheets-comment-form textarea {
  resize: vertical;
}

/* #318 Lien hypertexte dans une cellule. */
.sheets-cell-link {
  color: var(--blue);
  text-decoration: underline;
}

/* #314 Groupement de lignes/colonnes — bouton +/- affiché dans le
 * libellé de l'en-tête qui suit le groupe (voir la NOTE HONNÊTE dans
 * js/app.js au-dessus de rowGroupToggleInfo : pas de gouttière dédiée). */
.sheets-group-toggle {
  display: inline-block;
  width: 13px;
  height: 13px;
  line-height: 12px;
  margin-left: 3px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

/* #317 : le petit point de commentaire doit rester cliquable même sur
 * une cellule en lecture seule (on peut toujours CONSULTER un fil) — pas
 * de règle readOnly spécifique ici, la modale elle-même masque juste le
 * formulaire d'ajout (voir openCommentsModal). */

/* Retour utilisateur du 08/10/2026, suite (backlog #321-#330). */

/* #326 Filtre automatique : icône entonnoir + popover de filtre (liste
 * de valeurs / condition). Rendue dans le coin de la cellule qui est la
 * PREMIÈRE LIGNE de la plage filtrée (sheet.autoFilterRange.r1, voir
 * js/app.js::cellTdHtml) -- pas dans l'en-tête A/B/C... sticky, pour
 * rester visible juste à côté des vraies données, même après défilement.
 * Remplace l'ancienne flèche "▾" jugée trop discrète par l'utilisateur. */
.sheets-cell.sheets-cell-has-filter {
  padding-right: 18px;
}
.sheets-filter-icon {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: rgba(100, 116, 139, 0.15);
  color: var(--muted);
  cursor: pointer;
  z-index: 2;
}
.sheets-filter-icon:hover {
  background: rgba(59, 130, 246, 0.2);
  color: var(--blue);
}
.sheets-filter-icon.active {
  background: var(--blue);
  color: #fff;
}
.sheets-filter-dropdown {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 10px;
  width: 240px;
  max-height: 360px;
  overflow-y: auto;
}
.sheets-filter-section {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sheets-filter-section:last-of-type {
  border-bottom: none;
}
.sheets-filter-values-list {
  max-height: 140px;
  overflow-y: auto;
  margin-top: 4px;
}
.sheets-filter-value {
  display: block;
  font-size: 13px;
  padding: 2px 0;
}
.sheets-filter-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* #327 Validation de données : cellule éditée via un <select> natif
 * plutôt qu'un champ libre quand une règle "liste" s'applique. */
.sheets-cell-input-select {
  width: 100%;
  height: 100%;
  border: none;
  font: inherit;
}

/* #324 Audit de formules : surlignage (pas de vraies flèches, voir la
 * NOTE HONNÊTE dans js/app.js au-dessus de toggleShowFormulas). */
td.sheets-cell.trace-highlight {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background: rgba(37, 99, 235, 0.08);
}

/* #325 Tri multi-niveaux : une ligne de niveau dans la modale. */
.sheets-sort-level {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* #331 Case à cocher native. */
.sheets-cell-checkbox {
  cursor: pointer;
  vertical-align: middle;
}

/* #340 Micrographiques (sparklines). */
.sheets-sparkline-canvas {
  width: 100%;
  height: 20px;
  display: block;
}

/* #335 Segments (slicers) et chronologies — barre de puces au-dessus de
   la grille, visible uniquement sur une feuille porteuse d'un TCD. */
.sheets-slicer-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: #eef2ff;
  border-bottom: 1px solid #c7d2fe;
}
.sheets-slicer-label {
  font-size: 12px;
  font-weight: 600;
  color: #4338ca;
  margin-right: 4px;
}
.sheets-slicer-chip {
  border: 1px solid #c7d2fe;
  background: #fff;
  color: #4338ca;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
.sheets-slicer-chip.active {
  background: #4338ca;
  color: #fff;
}

/* #346 : bouton flottant "assistant" en bas à droite -- accès direct à
   openAssistantModal sans passer par le menu Outils. */
.sheets-assistant-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sheets-assistant-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.32);
}

/* #334 : panneau lateral de configuration du TCD, en overlay fixe a
   droite (ne touche pas a la disposition flex existante -- plus sur,
   vu l'etendue du reste de la grille). Voir js/app.js::renderPivotSidebar. */
.sheets-pivot-sidebar {
  position: fixed;
  top: 100px;
  right: 16px;
  width: 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 10px 12px 14px;
  z-index: 40;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.sheets-pivot-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 8px;
  color: var(--text);
}
.sheets-pivot-sidebar-close {
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.sheets-pivot-sidebar .form-select,
.sheets-pivot-sidebar .form-control {
  margin-bottom: 8px;
}

/* #353 : éditeur de script (CodeMirror) -- taille/bordure de l'éditeur,
   infobulle de signature au survol, surbrillance "aller à la définition". */
#scriptEditorModal .CodeMirror {
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.sheets-script-hover-tip {
  position: fixed;
  z-index: 3000;
  max-width: 360px;
  background: #1f2937;
  color: #f8fafc;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.sheets-script-hover-tip .sig {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-weight: 700;
  word-break: break-word;
}
.sheets-script-hover-tip .doc {
  margin-top: 4px;
  opacity: 0.85;
}
.sheets-script-hint-sig {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-weight: 700;
}
.sheets-script-hint-doc {
  font-size: 11px;
  opacity: 0.75;
  white-space: normal;
}
.CodeMirror-hints {
  max-width: 420px;
}
.CodeMirror .sheets-script-def-flash {
  background: rgba(255, 221, 87, 0.45);
  transition: background 0.3s ease;
}
/* #355 : menu contextuel/paramètres du graphique (titre, plage, axes,
   légende, couleurs) -- bouton ⚙ à côté du ✕ existant, liste de cases
   couleur par série dans la modale de paramètres. */
.sheets-chart-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sheets-chart-settings {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.sheets-chart-settings:hover {
  color: var(--blue);
}
.sheets-chart-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sheets-chart-color-row input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 2px;
  flex: 0 0 auto;
}
.sheets-chart-color-row span {
  font-size: 12.5px;
  color: var(--text);
}
/* #357 : éditeur de script -- bouton agrandir/restaurer + bouton réduire
   (barre persistante en bas qui rouvre la modale). */
.sheets-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
#script-maximize,
#script-minimize {
  padding: 2px 8px;
  line-height: 1.2;
}
#scriptEditorModal.sheets-script-modal-maximized .modal-dialog {
  max-width: 95vw;
  width: 95vw;
  margin: 2.5vh auto;
}
/* Retour utilisateur : "toujours avoir la barre de titre" -- avant ce
   correctif, le scroll (overflow-y) était posé sur .modal-content tout
   entier (en-tête + corps + pied confondus), donc descendre dans le
   contenu (arborescence/doc/clés API, désormais nombreux) faisait
   défiler la barre de titre HORS CHAMP avec le reste. .modal-content
   devient une colonne flex de hauteur bornée, où SEUL .modal-body
   défile -- en-tête et pied restent donc toujours visibles, en mode
   normal comme agrandi. */
#scriptEditorModal .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#scriptEditorModal .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
#scriptEditorModal.sheets-script-modal-maximized .modal-content {
  max-height: 95vh;
}
/* #360 : icône carrée seule (pas de texte) -- retour utilisateur. */
.sheets-script-minimized-bar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.sheets-script-minimized-bar:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

/* #358 : arborescence feuille -> scripts, dans l'éditeur de script. */
.sheets-script-tree {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  margin-top: 4px;
  background: var(--surface, #fff);
}
.sheets-script-tree-group + .sheets-script-tree-group {
  margin-top: 2px;
}
.sheets-script-tree-sheet {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.sheets-script-tree-sheet:hover {
  background: var(--hover, rgba(0, 0, 0, 0.05));
}
.sheets-script-tree-sheet.active {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
}
.sheets-script-tree-caret {
  display: inline-block;
  width: 14px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.sheets-script-tree-group.collapsed .sheets-script-tree-scripts {
  display: none;
}
.sheets-script-tree-group.collapsed .sheets-script-tree-caret {
  transform: rotate(-90deg);
}
.sheets-script-tree-sheet-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheets-script-tree-add {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-muted, #666);
}
.sheets-script-tree-add:hover {
  background: var(--hover, rgba(0, 0, 0, 0.08));
}
.sheets-script-tree-scripts {
  padding-left: 22px;
}
.sheets-script-tree-item {
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheets-script-tree-item:hover {
  background: var(--hover, rgba(0, 0, 0, 0.05));
}
.sheets-script-tree-item.active {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
  font-weight: 600;
}
.sheets-script-tree-empty {
  padding: 3px 6px;
  font-size: 12px;
  opacity: 0.6;
  font-style: italic;
}

/* #361 : panneaux "Documentation des fonctions" et "Clés API", et popup
   de remplissage des paramètres -- éditeur de script. */
.sheets-script-doc-panel,
.sheets-script-keys-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-top: 4px;
  background: var(--surface, #fff);
}
.sheets-script-doc-list {
  max-height: 220px;
  overflow-y: auto;
  margin-top: 6px;
}
.sheets-script-doc-group-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.65;
  margin: 10px 0 4px;
}
.sheets-script-doc-group-title:first-child {
  margin-top: 0;
}
.sheets-script-doc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}
.sheets-script-doc-row:last-child {
  border-bottom: none;
}
.sheets-script-doc-info .sig {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
}
.sheets-script-doc-info .doc {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.sheets-script-doc-insert {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.sheets-script-doc-insert:hover {
  background: var(--hover, rgba(0, 0, 0, 0.06));
}
.sheets-script-hover-sep {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.sheets-script-params-popup {
  position: fixed;
  z-index: 4000;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  padding: 10px;
  width: 280px;
}
.sheets-script-params-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sheets-script-params-tab {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
}
.sheets-script-params-tab.active {
  background: var(--accent-soft, rgba(37, 99, 235, 0.12));
  font-weight: 600;
}
.sheets-script-params-sig {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
}
.sheets-script-params-doc {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.sheets-script-params-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.sheets-script-params-input {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
}
.sheets-script-params-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}