/* filiciti-editor.css · v0.10 · 2026-05-09
 * v0.10: box style picker popover (.fle-ov-style) — border/bg/accent/radius/padding controls
 *        anchored above the box-handles row; opens via 🎨 toggle in handles.
 * Companion stylesheet for filiciti-editor.js.
 * v0.09: table editor — floating cell toolbar (#fle-table-toolbar),
 *        N×M insert picker (#fle-table-picker), col/row resize cursor hints,
 *        active-cell ring while in edit mode.
 * v0.06: 4 corner resize handles (NW/NE/SW/SE) instead of single SE.
 * v0.05: float bg color pinned (was changing between edit / view / print) ·
 *        crosshair cursor when placing a floating box.
 * v0.04: .fle-fallback-toggle (auto-injected button when no print-bar present).
 * v0.03: box overlay (handles ↑ ↓ ⎘ ✕ + ↘ resize) · floating box drag chip.
 */

/* ==================== Fallback toggle (no print-bar) ==================== */
.fle-fallback-toggle {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 10001;
  background: #0074E4;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.fle-fallback-toggle:hover { background: #005bb5; }
@media print { .fle-fallback-toggle { display: none !important; } }

/* ==================== Editable element states ==================== */
body.content-edit-active [data-edit-id] {
  outline: 1px dashed #0074E4;
  outline-offset: 2px;
  cursor: text;
  transition: outline 0.15s, background 0.15s;
}
body.content-edit-active [data-edit-id]:hover {
  background: rgba(0, 116, 228, 0.05);
}
body.content-edit-active [data-edit-id]:focus {
  outline: 2px solid #0074E4;
  background: rgba(0, 116, 228, 0.07);
}

/* ==================== Floating toolbar ==================== */
#filiciti-toolbar {
  position: fixed;
  /* v0.05: top auto-clears any host-page topbar via --topbar-h var.
     Falls back to 50px for docs without that var (narrative, positioning, etc). */
  top: calc(var(--topbar-h, 46px) + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
  padding: 6px 8px;
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  row-gap: 4px;
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  align-items: center;
  max-width: calc(100vw - 24px);
}

#filiciti-toolbar .fle-group {
  display: flex;
  gap: 2px;
  padding: 0 6px;
  border-right: 1px solid #ececec;
  align-items: center;
}
#filiciti-toolbar .fle-group:last-child { border-right: none; }
#filiciti-toolbar .fle-group.fle-spacer { margin-left: auto; }

#filiciti-toolbar button,
#filiciti-toolbar select,
#filiciti-toolbar input[type="number"] {
  background: white;
  border: 1px solid transparent;
  color: #333;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  min-height: 26px;
  font-family: inherit;
}
#filiciti-toolbar button:hover,
#filiciti-toolbar select:hover,
#filiciti-toolbar input[type="number"]:hover {
  background: #f0f4ff;
  border-color: #c8d4ee;
}
#filiciti-toolbar button:active {
  background: #e3eaf9;
}
#filiciti-toolbar select {
  padding: 4px 6px;
  border: 1px solid #d0d7e2;
}
#filiciti-toolbar select#fle-fontfamily {
  min-width: 130px;
  max-width: 160px;
}

/* Font size number input (Google Docs style) */
#filiciti-toolbar #fle-fontsize-input {
  width: 42px;
  text-align: center;
  border: 1px solid #d0d7e2;
  cursor: text;
  padding: 4px 4px;
  -moz-appearance: textfield;
}
#filiciti-toolbar #fle-fontsize-input::-webkit-outer-spin-button,
#filiciti-toolbar #fle-fontsize-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#filiciti-toolbar [data-action="size-down"],
#filiciti-toolbar [data-action="size-up"] {
  width: 26px;
  padding: 4px 0;
  font-weight: 700;
  font-size: 14px;
}

/* Color picker wrappers */
#filiciti-toolbar .fle-color-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
}
#filiciti-toolbar .fle-color-wrap:hover { background: #f0f4ff; }
#filiciti-toolbar .fle-color-glyph {
  font-weight: 700;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
}
#filiciti-toolbar .fle-color-glyph[data-glyph="text"] {
  border-bottom: 3px solid #222;
}
#filiciti-toolbar .fle-color-glyph[data-glyph="hilite"] {
  color: #ffeb3b;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
#filiciti-toolbar input[type="color"] {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* Save status pill */
#filiciti-toolbar .fle-status {
  font-size: 11px;
  color: #28a745;
  margin-right: 6px;
  opacity: 0;
  transition: opacity 0.3s;
  min-width: 50px;
  display: inline-block;
  text-align: right;
}

/* Mark-button glyphs */
#filiciti-toolbar .fle-group[data-group="marks"] button {
  min-width: 26px;
  text-align: center;
}

/* Boxes group buttons */
#filiciti-toolbar .fle-group[data-group="boxes"] button {
  font-weight: 600;
  background: #fff8e6;
}
#filiciti-toolbar .fle-group[data-group="boxes"] button:hover {
  background: #ffe89a;
  border-color: #d4c200;
}

/* ==================== Box overlay (selection + handles) ==================== */
#fle-box-overlay {
  position: absolute;
  pointer-events: none;
  display: none;
  border: 1.5px solid transparent;
  z-index: 9998;
  box-sizing: border-box;
}
body.content-edit-active #fle-box-overlay {
  display: block;
}
#fle-box-overlay.fle-active {
  border-color: #0074E4;
  box-shadow: 0 0 0 1px rgba(0, 116, 228, 0.18);
}
#fle-box-overlay .fle-ov-handles {
  position: absolute;
  top: -32px;
  right: -2px;
  display: flex;
  gap: 2px;
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid #d0d7e2;
  border-radius: 4px;
  padding: 2px 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#fle-box-overlay:not(.fle-active) .fle-ov-handles { display: none; }
#fle-box-overlay .fle-ov-btn {
  background: white;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  color: #333;
  padding: 0;
}
#fle-box-overlay .fle-ov-btn:hover {
  background: #f0f4ff;
}
#fle-box-overlay .fle-ov-btn-del {
  color: #c0392b;
}
#fle-box-overlay .fle-ov-btn-del:hover {
  background: #fde2e0;
}
/* v0.06: 4 corner resize handles. Base style shared; position + cursor per-corner. */
#fle-box-overlay .fle-ov-resize {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 1.5px solid #0074E4;
  border-radius: 3px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #0074E4;
  user-select: none;
}
#fle-box-overlay .fle-ov-resize-nw { top: -8px;    left: -8px;    cursor: nwse-resize; }
#fle-box-overlay .fle-ov-resize-ne { top: -8px;    right: -8px;   cursor: nesw-resize; }
#fle-box-overlay .fle-ov-resize-sw { bottom: -8px; left: -8px;    cursor: nesw-resize; }
#fle-box-overlay .fle-ov-resize-se { bottom: -8px; right: -8px;   cursor: nwse-resize; width: 18px; height: 18px; }
#fle-box-overlay:not(.fle-active) .fle-ov-resize { display: none; }

/* v0.10: box style picker popover (border / bg / accent / radius / padding) */
#fle-box-overlay .fle-ov-style {
  position: absolute;
  top: -32px;
  right: -2px;
  transform: translateY(-100%);
  display: none;
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  color: #1a1a2e;
  z-index: 10000;
  width: 280px;
}
#fle-box-overlay .fle-ov-style[data-state="open"] { display: block; }
#fle-box-overlay .fle-ov-style-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
#fle-box-overlay .fle-ov-style-row:last-child { margin-bottom: 0; }
#fle-box-overlay .fle-ov-style-row label {
  width: 48px;
  font-weight: 600;
  color: #5a5a7a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
}
#fle-box-overlay .fle-ov-style-row select,
#fle-box-overlay .fle-ov-style-row input[type="number"] {
  font-size: 11px;
  border: 1px solid #d0d7e2;
  border-radius: 3px;
  padding: 3px 5px;
  background: white;
  color: #1a1a2e;
  font-family: inherit;
  height: 22px;
}
#fle-box-overlay .fle-ov-style-row input[type="number"] {
  width: 48px;
  text-align: center;
}
#fle-box-overlay .fle-ov-style-row select {
  min-width: 70px;
}
#fle-box-overlay .fle-ov-style-row input[type="color"] {
  width: 28px;
  height: 22px;
  border: 1px solid #d0d7e2;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  background: white;
}
#fle-box-overlay .fle-ov-style-row button {
  font-size: 11px;
  border: 1px solid #d0d7e2;
  background: white;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  height: 22px;
  font-family: inherit;
  color: #1a1a2e;
}
#fle-box-overlay .fle-ov-style-row button:hover { background: #f0f4ff; }

/* ==================== Floating boxes ==================== */
.fle-float-box {
  background: #fffbe6 !important;   /* v0.05: pin — was being overridden by hover/print rules */
  border: 1px solid #d4c200;
  border-radius: 4px;
  padding: 8px 10px 8px 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  font-size: 11pt;
  line-height: 1.4;
  overflow: hidden;
  z-index: 100;
  min-width: 80px;
  min-height: 40px;
}
/* v0.05: defeat the body.content-edit-active [data-edit-id]:hover/focus tint
   so the yellow stays visible during edit too. */
body.content-edit-active .fle-float-box,
body.content-edit-active .fle-float-box:hover,
body.content-edit-active .fle-float-box:focus {
  background: #fffbe6 !important;
}
/* v0.05: crosshair cursor while in float-placement mode */
body.fle-placing-float,
body.fle-placing-float * {
  cursor: crosshair !important;
}
.fle-float-drag {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 100%;
  cursor: move;
  background: linear-gradient(180deg, #f3da4a 0%, #e8c93a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-size: 10px;
  color: #6b5c00;
  letter-spacing: -1px;
}
body:not(.content-edit-active) .fle-float-drag {
  display: none;
}

/* ==================== v0.09 Table editor ==================== */
#fle-table-toolbar {
  position: absolute;
  display: none;
  background: #ffffff;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  padding: 4px 6px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  max-width: min(96vw, 920px);
}
#fle-table-toolbar.fle-tbl-active { display: flex; }
body:not(.content-edit-active) #fle-table-toolbar { display: none !important; }

#fle-table-toolbar .fle-tbl-group {
  display: flex;
  gap: 2px;
  padding: 0 6px;
  border-right: 1px solid #ececec;
  align-items: center;
}
#fle-table-toolbar .fle-tbl-group:last-child { border-right: none; }
#fle-table-toolbar .fle-tbl-glab {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
#fle-table-toolbar button {
  background: white;
  border: 1px solid #e0e6ef;
  color: #333;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  min-height: 22px;
  font-family: inherit;
}
#fle-table-toolbar button:hover { background: #f0f4ff; border-color: #c8d4ee; }
#fle-table-toolbar button:active { background: #e3eaf9; }
#fle-table-toolbar .fle-tbl-sep {
  width: 1px;
  height: 16px;
  background: #ddd;
  margin: 0 4px;
  display: inline-block;
}
#fle-table-toolbar .fle-tbl-color {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
}
#fle-table-toolbar .fle-tbl-color:hover { background: #f0f4ff; }
#fle-table-toolbar .fle-tbl-color input[type="color"] {
  width: 22px;
  height: 18px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
#fle-table-toolbar .fle-tbl-pad,
#fle-table-toolbar .fle-tbl-w {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
}
#fle-table-toolbar .fle-tbl-pad input,
#fle-table-toolbar .fle-tbl-w input {
  border: 1px solid #d0d7e2;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 12px;
  font-family: inherit;
}
#fle-table-toolbar .fle-tbl-pad input { width: 38px; }

/* Active cell ring (subtle) when content-edit-active. Covers th and td. */
body.content-edit-active table[data-fle-table-id] th:focus,
body.content-edit-active table[data-fle-table-id] td:focus,
body.content-edit-active table[data-fle-table-id] th:focus-within,
body.content-edit-active table[data-fle-table-id] td:focus-within {
  outline: 2px solid #0074E4;
  outline-offset: -2px;
}

/* N×M Insert table picker */
#fle-table-picker {
  position: absolute;
  z-index: 10001;
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
}
#fle-table-picker .fle-tp-info {
  text-align: center;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}
#fle-table-picker .fle-tp-grid {
  display: grid;
  grid-template-columns: repeat(8, 18px);
  grid-template-rows: repeat(8, 18px);
  gap: 2px;
  cursor: pointer;
}
#fle-table-picker .fle-tp-cell {
  background: #f0f4ff;
  border: 1px solid #d0d7e2;
  border-radius: 2px;
}
#fle-table-picker .fle-tp-cell.fle-tp-on {
  background: #0074E4;
  border-color: #005bb5;
}

/* ==================== Print: hide everything edit-related ==================== */
@media print {
  #filiciti-toolbar,
  #fle-box-overlay,
  #fle-table-toolbar,
  #fle-table-picker,
  .fle-float-drag {
    display: none !important;
  }
  body.content-edit-active [data-edit-id] {
    outline: none !important;
    background: transparent !important;
  }
  /* v0.05: floating boxes keep their yellow bg in print too (was: transparent).
     Drag chip already hidden above. */
  .fle-float-box {
    background: #fffbe6 !important;
    border: 1px solid #d4c200;
    box-shadow: none;
    padding: 8px 10px 8px 18px;
  }
}

/* ==================== Narrow viewport fallback ==================== */
@media (max-width: 1100px) {
  #filiciti-toolbar {
    left: 8px;
    right: 8px;
    transform: none;
    max-width: none;
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  #filiciti-toolbar {
    top: auto;
    bottom: 8px;
  }
}