/* =========================================================
   📊 Πίνακες (js/tabletool.js): πλέγμα εισαγωγής, εργαλειοθήκη πίνακα,
   εμφάνιση πινάκων μέσα στους επεξεργαστές (Κειμενογράφος, Μορφοποίηση).
   ========================================================= */

/* ---- πλέγμα εισαγωγής (όπως το Word) ---- */
.tt-picker { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; background: #fff; border: 2px solid #ffd54f; border-radius: 12px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.tt-pick-title { font-size: 13px; font-weight: 700; color: #607d8b; margin-bottom: 6px; white-space: nowrap; }
.tt-grid { display: grid; grid-template-columns: repeat(8, 22px); gap: 3px; }
.tt-grid i { display: block; width: 22px; height: 22px; border: 2px solid #b0bec5; border-radius: 4px; background: #fff; cursor: pointer; box-sizing: border-box; }
.tt-grid i.on { background: #ffe082; border-color: #ff9800; }
.tt-pick-label { text-align: center; font-weight: 800; font-size: 15px; color: #37474f; margin-top: 6px; }

/* ---- εργαλειοθήκη πίνακα (φαίνεται μόνο μέσα σε πίνακα) ---- */
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: #e3f2fd; border: 2px solid #90caf9; border-radius: 12px; padding: 4px 10px; animation: popin .25s; }
.tt-bar-title { font-weight: 800; font-size: 15px; color: #1565c0; margin-right: 4px; }
.tt-bar-group { display: flex; align-items: center; gap: 3px; padding-right: 8px; border-right: 2px solid #bbdefb; position: relative; }
.tt-bar-group:last-child { border-right: 0; padding-right: 0; }
.tt-bar-lbl { font-size: 12px; font-weight: 700; color: #1976d2; margin-right: 2px; }
.tt-op small { font-size: 9px; color: #78909c; margin-left: 2px; }
.tt-op.on { background: #ffe082; border-color: #ff9800; }
.tt-sel { font-family: inherit; font-size: 13px; font-weight: 600; height: 32px; border: 2px solid #cfd8dc; border-radius: 9px; background: #fff; color: #37474f; padding: 0 4px; }
.tt-color { position: relative; display: inline-flex; }
.tt-color-ico { cursor: pointer; }
.tt-color-ico small { font-size: 9px; color: #78909c; margin-left: 2px; }
.tt-swatches { display: none; position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; background: #fff; border: 2px solid #ffd54f; border-radius: 12px; padding: 6px; grid-template-columns: repeat(4, 30px); gap: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.tt-color.open .tt-swatches { display: grid; }
.tt-color.open .tt-color-ico { background: #ffe082; border-color: #ff9800; }
.tt-swatches i { width: 30px; height: 30px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px #bbb; cursor: pointer; display: block; }
.tt-swatches i:hover { transform: scale(1.15); }
.tt-swatches i.flash { animation: tf-flash .5s 5; }

/* ---- ο πίνακας μέσα στον επεξεργαστή ---- */
.tt-table { table-layout: fixed; }
.tt-table td, .tt-table th { min-width: 40px; height: 1.6em; line-height: 1.5; word-wrap: break-word; }
.tt-table[data-border="none"] td, .tt-table[data-border="none"] th { outline: 1px dashed #b0bec5; outline-offset: -1px; }   /* οδηγός μόνο στην οθόνη */
.tt-table td.tt-sel, .tt-table th.tt-sel { box-shadow: inset 0 0 0 100px rgba(255, 213, 79, .55); }
.tt-table.tt-dragging { user-select: none; -webkit-user-select: none; }
.tf-editor .tt-table { line-height: 1.5; }
@media print { .tt-table[data-border="none"] td, .tt-table[data-border="none"] th { outline: none; } .tt-bar, .tt-picker { display: none !important; } }
