/* ===================== Υπολογιστικά Φύλλα (js/sheets.js) — χρησιμοποιεί τις μπάρες/κουμπιά του Κειμενογράφου (.wr-*) ===================== */
.sh-wrap { gap: 5px; }
.sh-bar { padding: 4px 8px; gap: 4px 8px; }
.sh-bar .wr-group { padding-right: 8px; }
.sh-btn { min-width: 32px; height: 32px; font-size: 14px; padding: 0 6px; }
.sh-btn small { font-size: 9px; }
.sh-btn.fmt { font-weight: 800; }
.sh-title { width: 190px; margin-left: 0; height: 32px; }
/* γραμμή τύπων */
.sh-fbar { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.88); border-radius: 12px; padding: 4px 8px; box-shadow: inset 0 0 0 2px #fff; }
.sh-namebox { font-family: inherit; font-weight: 800; font-size: 15px; width: 90px; height: 32px; border: 2px solid #cfd8dc; border-radius: 8px; text-align: center; color: #2e7d32; user-select: text; -webkit-user-select: text; }
.sh-fx { font-style: italic; font-weight: 700; color: #607d8b; padding: 0 4px; }
.sh-finput { flex: 1; font-family: Consolas, 'Courier New', monospace; font-size: 15px; height: 32px; border: 2px solid #cfd8dc; border-radius: 8px; padding: 0 10px; user-select: text; -webkit-user-select: text; }
.sh-namebox:focus, .sh-finput:focus { outline: none; border-color: #66bb6a; }
/* το πλέγμα */
.sh-gridbox { flex: 1; min-height: 0; overflow: auto; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 2px #fff, 0 3px 10px rgba(72,96,150,.12); outline: none; position: relative; }
.sh-gridbox:focus-visible { box-shadow: inset 0 0 0 2px #66bb6a; }
.sh-sheet { position: relative; display: inline-block; min-width: 100%; }
.sh-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; user-select: none; -webkit-user-select: none; }
.sh-table th, .sh-table td { border-right: 1px solid #dfe3e8; border-bottom: 1px solid #dfe3e8; padding: 0 5px; font-size: 15px; font-weight: 500; color: #263238; overflow: hidden; white-space: nowrap; text-overflow: clip; vertical-align: middle; height: 26px; box-sizing: border-box; }
.sh-table thead th { position: sticky; top: 0; z-index: 3; background: #eef2f6; color: #546e7a; font-weight: 700; text-align: center; height: 26px; border-bottom: 2px solid #cfd8dc; cursor: pointer; }
.sh-table tbody th { position: sticky; left: 0; z-index: 2; background: #eef2f6; color: #546e7a; font-weight: 700; text-align: center; border-right: 2px solid #cfd8dc; cursor: pointer; }
.sh-table th.sh-corner { left: 0; z-index: 4; cursor: pointer; }
.sh-table th.on { background: #c8e6c9; color: #1b5e20; }
.sh-table td { cursor: cell; background: #fff; }
.sh-table td.cur { outline: 2px solid #2e7d32; outline-offset: -2px; }
.sh-cell.b { font-weight: 800; } .sh-cell.i { font-style: italic; } .sh-cell.u { text-decoration: underline; }
.sh-cell.alL { text-align: left; } .sh-cell.alC { text-align: center; } .sh-cell.alR { text-align: right; }
.sh-cell.wrap { white-space: normal; word-break: break-word; line-height: 1.2; }
.sh-cell.err { color: #c62828; font-weight: 700; }
/* περιγράμματα κελιών: bd-all ή πλευρές bd-t / bd-b / bd-l / bd-r */
.sh-cell.bd-all { box-shadow: inset 0 0 0 1.5px #37474f; }
.sh-cell.bd-t { border-top: 2px solid #37474f; } .sh-cell.bd-b { border-bottom: 2px solid #37474f; } .sh-cell.bd-l { border-left: 2px solid #37474f; } .sh-cell.bd-r { border-right: 2px solid #37474f; }
/* λαβές αλλαγής πλάτους/ύψους */
.sh-colres { position: absolute; right: -4px; top: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.sh-rowres { position: absolute; left: 0; bottom: -4px; width: 100%; height: 8px; cursor: row-resize; z-index: 5; }
.sh-colres:hover, .sh-rowres:hover { background: rgba(46,125,50,.35); }
/* επιλογή, λαβή συμπλήρωσης, προεπισκόπηση */
.sh-selbox { position: absolute; border: 2px solid #2e7d32; background: rgba(76,175,80,.10); pointer-events: none; z-index: 1; box-sizing: border-box; }
.sh-fill { position: absolute; right: -6px; bottom: -6px; width: 10px; height: 10px; background: #2e7d32; border: 2px solid #fff; border-radius: 2px; cursor: crosshair; pointer-events: auto; }
.sh-fillbox { position: absolute; pointer-events: none; z-index: 1; box-sizing: border-box; }
.sh-fillbox.fill { border: 2px dashed #2e7d32; }
.sh-fillbox.move { background: rgba(46,125,50,.22); border: 2px solid #2e7d32; }
.sh-fillbox.cut { border: 2px dashed #ff9800; }
/* ο επεξεργαστής κελιού */
.sh-edit { position: absolute; z-index: 6; font-family: inherit; font-size: 15px; font-weight: 500; color: #263238; border: 2px solid #2e7d32; border-radius: 0; padding: 0 4px; box-sizing: border-box; background: #fff; outline: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); user-select: text; -webkit-user-select: text; }
/* γραφήματα */
.sh-charts { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sh-chart { position: absolute; z-index: 7; background: #fff; border: 2px solid #cfd8dc; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; display: flex; flex-direction: column; }
.sh-chart.sel { border-color: #2e7d32; }
.sh-chart-head { display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: #eef2f6; cursor: move; height: 34px; box-sizing: border-box; }
.sh-chart-title { flex: 1; min-width: 40px; font-family: inherit; font-weight: 700; font-size: 14px; border: 2px solid transparent; border-radius: 6px; background: transparent; height: 26px; padding: 0 6px; cursor: text; user-select: text; -webkit-user-select: text; }
.sh-chart-title:focus { outline: none; border-color: #66bb6a; background: #fff; }
.sh-chart-range { font-size: 11px; color: #78909c; font-weight: 700; }
.sh-chart-head button { font-family: inherit; font-size: 14px; width: 26px; height: 26px; border-radius: 6px; border: 2px solid transparent; background: transparent; cursor: pointer; padding: 0; }
.sh-chart-head button:hover { background: #fff; border-color: #cfd8dc; }
.sh-chart-head button.on { background: #fff; border-color: #66bb6a; }
.sh-chart-body { flex: 1; min-height: 0; }
.sh-chart-body svg { width: 100%; height: 100%; display: block; }
.sh-chart-res { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #90a4ae 50%, #90a4ae 60%, transparent 60%, transparent 75%, #90a4ae 75%, #90a4ae 85%, transparent 85%); }
/* εικόνες (αντικείμενα όπως τα γραφήματα) */
.sh-img .sh-chart-body { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafafa; }
.sh-img .sh-chart-body img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sh-emoji { line-height: 1; user-select: none; }
.sh-chart-sp { flex: 1; }
.sh-imgmenu { position: absolute; top: 38px; right: 0; z-index: 30; background: #fff; border: 2px solid #ffd54f; border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.2); width: 330px; }
.sh-imgfile { font-family: inherit; font-weight: 700; font-size: 14px; width: 100%; text-align: left; background: #fff8e1; border: 2px solid #ffe082; border-radius: 8px; padding: 6px 10px; cursor: pointer; margin-bottom: 6px; color: #4e342e; }
.sh-imgfile:hover { background: #ffecb3; }
.sh-imggrid { display: grid; grid-template-columns: repeat(8, 38px); gap: 3px; }
.sh-imggrid button { font-size: 24px; width: 38px; height: 38px; border-radius: 8px; border: 2px solid transparent; background: #fafafa; cursor: pointer; padding: 0; }
.sh-imggrid button:hover { border-color: #66bb6a; background: #f1f8e9; transform: scale(1.1); }
/* καρτέλες φύλλων του βιβλίου */
.sh-tabs { display: flex; align-items: flex-end; gap: 3px; padding: 0 8px; min-height: 30px; }
.sh-tab { font-family: inherit; font-weight: 700; font-size: 14px; color: #546e7a; background: #e3e8ee; border: 2px solid #cfd8dc; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 4px 14px; cursor: pointer; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-tab:hover { background: #eef2f6; color: #263238; }
.sh-tab.on { background: #fff; color: #2e7d32; border-color: #a5d6a7; box-shadow: 0 -2px 0 #66bb6a inset; }
.sh-tab-add { font-size: 18px; padding: 2px 12px; color: #2e7d32; background: #e8f5e9; border-color: #a5d6a7; }
.sh-tab-edit { font-family: inherit; font-weight: 700; font-size: 14px; width: 150px; height: 28px; border: 2px solid #66bb6a; border-radius: 10px 10px 0 0; padding: 0 8px; outline: none; user-select: text; -webkit-user-select: text; }
.sh-chart-range { font-family: inherit; font-size: 11px; font-weight: 700; color: #78909c; width: 64px; border: 2px solid transparent; border-radius: 6px; background: transparent; padding: 0 3px; height: 22px; cursor: text; user-select: text; -webkit-user-select: text; }
.sh-chart-range:focus { outline: none; border-color: #66bb6a; background: #fff; color: #2e7d32; }
/* μενού δεξιού κλικ & λίστα συναρτήσεων */
.sh-menu { position: absolute; z-index: 60; background: #fff; border: 2px solid #ffd54f; border-radius: 12px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.22); display: flex; flex-direction: column; min-width: 250px; }
.sh-menu button { font-family: inherit; font-size: 14px; font-weight: 600; color: #37474f; text-align: left; background: none; border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.sh-menu button:hover { background: #fff3e0; }
.sh-menu hr { border: 0; border-top: 1px solid #eceff1; margin: 3px 6px; }
.sh-fxmenu { position: absolute; top: 38px; right: 0; z-index: 30; background: #fff; border: 2px solid #ffd54f; border-radius: 12px; padding: 6px; display: grid; grid-template-columns: repeat(3, 230px); gap: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-height: 60vh; overflow: auto; }
.sh-fxmenu button { font-family: inherit; text-align: left; background: #fafafa; border: 2px solid #eceff1; border-radius: 8px; padding: 4px 8px; cursor: pointer; display: grid; grid-template-columns: 90px 1fr; gap: 0 6px; color: #37474f; }
.sh-fxmenu button:hover { border-color: #66bb6a; background: #f1f8e9; }
.sh-fxmenu b { font-size: 13px; color: #2e7d32; }
.sh-fxmenu span { font-size: 12px; font-weight: 600; }
.sh-fxmenu code { grid-column: 1 / -1; font-size: 11px; color: #78909c; }
.sh-status { display: flex; gap: 16px; align-items: center; }
.sh-status #sh-stats { font-weight: 700; color: #2e7d32; }
.sh-status #sh-note { flex: 1; color: #e65100; font-weight: 600; }
@media (max-width: 1450px) { .sh-btn small { display: none; } }
@media (max-width: 1250px) { .sh-title { width: 140px; } .sh-fxmenu { grid-template-columns: repeat(2, 230px); } }
@media (max-height: 760px) { .sh-bar { padding: 3px 8px; } .sh-btn { height: 28px; } }
@media print { .sh-bar, .sh-fbar, .sh-status { display: none; } }

/* ---- Μαθαίνω τα φύλλα (js/sheetslearn.js): ένα ενιαίο πλαίσιο μαθήματος πάνω από τις μπάρες ---- */
.sl-task { background: linear-gradient(90deg, #fff3e0, #fff8e1); border-radius: 14px; padding: 6px 12px 7px; box-shadow: inset 0 0 0 2px #fff, 0 3px 10px rgba(72,96,150,.12); display: flex; flex-direction: column; gap: 4px; }
.sl-head { display: flex; align-items: center; gap: 10px; }
.sl-lvl { font-weight: 800; color: #ef6c00; background: #fff; border-radius: 10px; padding: 3px 10px; font-size: 14px; white-space: nowrap; }
.sl-now { font-size: 20px; font-weight: 800; color: #3e2723; line-height: 1.25; }
.sl-nownum { display: inline-block; background: #ef6c00; color: #fff; font-size: 13px; border-radius: 10px; padding: 1px 9px; margin-right: 8px; vertical-align: middle; }
.sl-msg { font-size: 14px; font-weight: 600; color: #5d4037; line-height: 1.3; }
.sl-msg:empty { display: none; }
.sl-hint, .sl-auto { font-family: inherit; font-weight: 800; border-radius: 12px; cursor: pointer; transition: transform .12s; display: inline-flex; align-items: center; gap: 6px; }
.sl-hint { font-size: 17px; height: 42px; padding: 0 16px; color: #fff; background: linear-gradient(180deg, #ffa726, #ef6c00); border: 0; box-shadow: 0 4px 0 #bf360c, 0 6px 14px rgba(239,108,0,.35); }
.sl-hint:hover, .sl-auto:hover { transform: translateY(-2px); }
.sl-hint #sl-helps { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 12px; background: #fff; color: #ef6c00; font-size: 14px; padding: 0 6px; }
.sl-auto { font-size: 15px; height: 40px; padding: 0 14px; color: #1b5e20; background: #e8f5e9; border: 2px solid #a5d6a7; }
.sl-hint:disabled, .sl-auto:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.sl-steps { margin: 0 auto 0 0; padding: 0; list-style: none; display: flex; gap: 5px; }
.sl-steps li { display: flex; }
.sl-steps li i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #e0e0e0; color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sl-steps li.now i { background: #ef6c00; animation: pulse-fill .8s infinite alternate; }
.sl-steps li.done i { background: #43a047; }
/* φωτισμός περιοχών: πλαίσια πάνω από τη σκηνή (#stage), δεν πιάνουν το ποντίκι */
.sl-spots { position: absolute; inset: 0; pointer-events: none; z-index: 45; }
.sl-spot { position: absolute; border: 3px solid #ff9800; border-radius: 10px; box-shadow: 0 0 0 4px rgba(255,152,0,.35), 0 0 18px rgba(255,152,0,.7); animation: sl-spot .9s ease-in-out infinite alternate; }
@keyframes sl-spot { from { transform: scale(1); opacity: 1; } to { transform: scale(1.04); opacity: .75; } }
@media (max-height: 760px) { .sl-now { font-size: 17px; } .sl-msg { font-size: 13px; } }