/* =========================================================
   📊 Πίνακες (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; }
select.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; }

/* ---- κουμπί «γραμμή» (2.12): η πένα του περιγράμματος — 3 είδη × 3 πάχη ---- */
.tt-pen { position: relative; display: inline-flex; }
.tt-pen-ico { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tt-pen-ico small { font-size: 9px; color: #78909c; }
.tt-pen-line { display: inline-block; width: 26px; height: 0; }
.tt-pens { 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(3, 58px); gap: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.tt-pen.open .tt-pens { display: grid; }
.tt-pen.open .tt-pen-ico { background: #ffe082; border-color: #ff9800; }
.tt-pen-opt { height: 30px; display: flex; align-items: center; justify-content: center; border: 2px solid #eceff1; border-radius: 8px; background: #fff; cursor: pointer; padding: 0 6px; }
.tt-pen-opt i { display: block; width: 100%; height: 0; }
.tt-pen-opt:hover { border-color: #90caf9; background: #f5fbff; }
.tt-pen-opt.on { border-color: #ff9800; background: #fff8e1; }
.tt-pen-opt.flash { animation: tf-flash .5s 5; }

/* ---- ▦ στυλ πίνακα (2.03): συλλογή με μικρογραφίες ---- */
.tt-style { position: relative; display: inline-flex; }
.tt-style.hidden { display: none; }
.tt-style-ico { cursor: pointer; }
.tt-style-ico small { font-size: 9px; color: #78909c; margin-left: 2px; }
.tt-styles { display: none; position: absolute; top: 100%; right: 0; z-index: 30; margin-top: 4px; background: #fff; border: 2px solid #ffd54f; border-radius: 12px; padding: 6px; grid-template-columns: repeat(3, 92px); gap: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.tt-style.open .tt-styles { display: grid; }
.tt-style.open .tt-style-ico { background: #ffe082; border-color: #ff9800; }
.tt-style-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 4px; border: 2px solid #eceff1; border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit; }
.tt-style-opt:hover { border-color: #90caf9; background: #f5fbff; }
.tt-style-opt small { font-size: 11px; font-weight: 700; color: #455a64; line-height: 1.1; }
.tt-style-opt.flash { animation: tf-flash .5s 5; }
.tt-mini { display: grid; grid-template-columns: repeat(3, 22px); grid-auto-rows: 9px; }
.tt-mini i { display: block; margin: 0 -1px -1px 0; }

/* ---- ολόκληρη γραμμή / στήλη: βελάκι στην αριστερή / πάνω άκρη (όπως στο Word) ---- */
.tt-pick-row .tt-table td, .tt-pick-row .tt-table th { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 8h10V3l9 9-9 9v-5H3z' fill='%23263238' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 22 12, e-resize !important; }
.tt-pick-col .tt-table td, .tt-pick-col .tt-table th { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M8 3v10H3l9 9 9-9h-5V3z' fill='%23263238' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 12 22, s-resize !important; }

/* ---- ο πίνακας μέσα στον επεξεργαστή ---- */
.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"]:not([data-gd]) td, .tt-table[data-border="none"]:not([data-gd]) th { outline: 1px dashed #b0bec5; outline-offset: -1px; }   /* οδηγός μόνο στην οθόνη (παλιοί πίνακες) */
/* Οδηγός (2.12): γκρι διακεκομμένη γραμμή σε κάθε πλευρά ΧΩΡΙΣ περίγραμμα (data-g του TableTool.guides: t/l, και b/r στην άκρη) —
   με gradients στο background-image (το χρώμα της σκίασης μένει από κάτω)· όχι στα επιλεγμένα κελιά, όχι στην εκτύπωση */
.tt-table td[data-g]:not(.tt-sel), .tt-table th[data-g]:not(.tt-sel) {
  background-image: repeating-linear-gradient(90deg, #b0bec5 0 3px, transparent 3px 6px), repeating-linear-gradient(90deg, #b0bec5 0 3px, transparent 3px 6px),
    repeating-linear-gradient(180deg, #b0bec5 0 3px, transparent 3px 6px), repeating-linear-gradient(180deg, #b0bec5 0 3px, transparent 3px 6px);
  background-repeat: no-repeat; background-position: left top, left bottom, left top, right top;
  background-size: 100% var(--gt, 0px), 100% var(--gb, 0px), var(--gl, 0px) 100%, var(--gr, 0px) 100%; }
.tt-table [data-g*="t"] { --gt: 1px; } .tt-table [data-g*="b"] { --gb: 1px; } .tt-table [data-g*="l"] { --gl: 1px; } .tt-table [data-g*="r"] { --gr: 1px; }
/* επιλεγμένα κελιά: μπλε πλαίσιο + διάφανη απόχρωση ΠΑΝΩ από τη σκίαση (background-image), ώστε να φαίνεται το χρώμα τους (σχόλιο χρήστη, PR #1) */
.tt-table td.tt-sel, .tt-table th.tt-sel { box-shadow: inset 0 0 0 2px #1e88e5; background-image: linear-gradient(rgba(30, 136, 229, .2), rgba(30, 136, 229, .2)); }
.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-table td[data-g], .tt-table th[data-g] { background-image: none !important; } .tt-bar, .tt-picker, .tt-styles, .tt-pens { display: none !important; } }
.tt-grid i.flash { animation: tf-flash .5s 5; }
/* Μπάρα «Πίνακας» των ασκήσεων: όταν φαίνεται και το «▦ στυλ» (📊 επίπεδο 5, 6η άσκηση — 2.26) το 🗑️ έπεφτε σε 2η σειρά στα 1366·
   ίδια λύση με τον Κειμενογράφο (css/writer.css, 2.19). Έλεγχος σε όλα τα θέματα: .claude/browser-texttable-bar.js */
#tf-tablebar select.tt-sel { width: 110px; }
#tf-tablebar { column-gap: 6px; }
#tf-tablebar .tt-bar-group { padding-right: 5px; }