/* 📽️ Δημιουργία παρουσιάσεων (js/slides.js) — βασίζεται στις κλάσεις της μπάρας του Κειμενογράφου (.wr-*) */
.sl-wrap { gap: 5px; }
.sl-bar { padding: 4px 8px; gap: 4px 8px; position: relative; z-index: 3; }   /* η 1η μπάρα (με τα μενού) πάνω από τη 2η */
.sl-bar.sl-format { z-index: 2; }
.sl-bar .wr-group { position: relative; }
.sl-btn { min-width: 32px; height: 32px; font-size: 14px; padding: 0 7px; }
.sl-btn:disabled { opacity: .45; cursor: default; transform: none; }
.sl-btn.sl-present { background: #43a047; color: #fff; border-color: #2e7d32; font-weight: 700; }
.sl-btn.sl-present:hover { background: #4caf50; }
.sl-titlebox { margin-left: auto; border-right: 0; }
.sl-title { width: 220px; font-family: inherit; font-size: 15px; font-weight: 700; color: #37474f; height: 32px; border: 2px solid #cfd8dc; border-radius: 9px; padding: 0 10px; user-select: text; -webkit-user-select: text; }
.sl-header { background: rgba(255,255,255,.9); border-radius: 12px; padding: 6px 12px; font-weight: 700; color: #37474f; }

/* Αναδυόμενα μενού της μπάρας (διατάξεις, σχήματα, emoji, θέματα, φόντο, μετάβαση) */
.sl-menu { position: absolute; z-index: 40; background: #fff; border: 2px solid #ffd54f; border-radius: 14px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.sl-menu button { font-family: inherit; font-size: 15px; font-weight: 600; color: #37474f; background: #fff; border: 2px solid transparent; border-radius: 10px; padding: 6px 10px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.sl-menu button:hover { background: #fff8e1; border-color: #ffb74d; }
.sl-menu.grid { display: grid; grid-template-columns: repeat(8, 40px); gap: 4px; min-width: 0; }
.sl-menu.grid button { font-size: 24px; padding: 2px; justify-content: center; }
.sl-lo-ico { font-size: 22px; width: 28px; text-align: center; }
.sl-th-prev { width: 54px; height: 32px; border-radius: 8px; border: 1px solid #cfd8dc; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.sl-menu-title { font-size: 12px; font-weight: 700; color: #90a4ae; text-transform: uppercase; padding: 4px 4px 0; }
.sl-swatch-grid { display: grid; grid-template-columns: repeat(8, 28px); gap: 5px; padding: 2px 4px 6px; }
.sl-swatch-grid i { width: 28px; height: 28px; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 0 0 1px #bbb; cursor: pointer; display: block; }
.sl-swatch-grid i:hover { transform: scale(1.15); }
/* Μενού με προεπισκοπήσεις (διατάξεις, θέματα): πλέγμα από μικρές διαφάνειες */
.sl-menu-previews { min-width: 0; overflow-y: auto; }
.sl-prev-grid { display: grid; grid-template-columns: repeat(4, 150px); gap: 6px; }
.sl-prev-grid button { flex-direction: column; gap: 4px; padding: 6px; align-items: stretch; font-size: 13px; text-align: center; }
.sl-prev-grid button span { text-align: center; }
.sl-prev-grid button.cur { border-color: #ff9800; background: #fff3e0; }
.sl-prev { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25); background: #fff; pointer-events: none; }
.sl-prev-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 960px; height: 540px; }
.sl-prev .sl-slide { transform: none !important; }

/* Κύρια περιοχή: μικρογραφίες αριστερά, καμβάς + σημειώσεις στο κέντρο */
.sl-main { flex: 1; min-height: 0; display: flex; gap: 10px; }
.sl-thumbs { width: 190px; flex: none; overflow-y: auto; background: rgba(255,255,255,.75); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.sl-thumb { position: relative; display: flex; gap: 6px; align-items: flex-start; cursor: pointer; border-radius: 10px; padding: 3px; border: 3px solid transparent; }
.sl-thumb:hover { background: #fff8e1; }
.sl-thumb.sel { border-color: #ff9800; background: #fff3e0; }
.sl-thumb.over { border-color: #29b6f6; border-style: dashed; }
.sl-thumb-n { font-size: 12px; font-weight: 800; color: #78909c; width: 16px; flex: none; padding-top: 2px; }
.sl-thumb-box { flex: 1; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25); background: #fff; pointer-events: none; }
.sl-thumb-box .sl-slide { transform-origin: 0 0; }
/* Κουμπιά μετακίνησης/διαγραφής πάνω στη μικρογραφία (φαίνονται στο hover και στην επιλεγμένη) */
.sl-thumb-tools { position: absolute; right: 4px; bottom: 4px; display: none; gap: 2px; z-index: 2; }
.sl-thumb:hover .sl-thumb-tools, .sl-thumb.sel .sl-thumb-tools { display: flex; }
.sl-thumb-tools button { font-family: inherit; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 1; border: 1px solid #cfd8dc; border-radius: 6px; background: rgba(255,255,255,.95); color: #37474f; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sl-thumb-tools button:hover:not(:disabled) { background: #fff3e0; border-color: #ff9800; }
.sl-thumb-tools button:disabled { opacity: .35; cursor: default; }
.sl-thumb-add { font-family: inherit; font-size: 20px; border: 2px dashed #b0bec5; background: #fff; border-radius: 10px; padding: 8px; cursor: pointer; color: #78909c; }
.sl-thumb-add:hover { border-color: #ff9800; color: #ff9800; }
.sl-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-canvas-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.45); border-radius: 14px; overflow: hidden; touch-action: none; }
.sl-holder { position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.25); background: #fff; }
.sl-notes { font-family: inherit; font-size: 14px; font-weight: 600; color: #37474f; border: 2px solid #cfd8dc; border-radius: 12px; padding: 6px 10px; resize: none; background: rgba(255,255,255,.9); user-select: text; -webkit-user-select: text; }
.sl-status { display: flex; justify-content: space-between; gap: 12px; }
.sl-status #sl-note { color: #e65100; }

/* Η διαφάνεια: λογικό μέγεθος 960×540, κλιμακώνεται με transform */
.sl-slide { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; overflow: hidden; font-family: 'Fredoka', sans-serif; }
.sl-deco { position: absolute; left: 0; top: 0; width: 960px; height: 540px; pointer-events: none; }
/* Κόκκινοι οδηγοί στοίχισης στο κέντρο της διαφάνειας (κατά τη μετακίνηση αντικειμένου) */
.sl-guide { position: absolute; background: #e53935; pointer-events: none; z-index: 6; box-shadow: 0 0 4px rgba(229,57,53,.6); }
.sl-guide.v { left: 479px; top: 0; width: 2px; height: 540px; }
.sl-guide.h { top: 269px; left: 0; height: 2px; width: 960px; }
.sl-marquee { position: absolute; border: 2px dashed #29b6f6; background: rgba(41,182,246,.12); pointer-events: none; z-index: 5; }
.sl-item { position: absolute; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
.sl-canvas-wrap .sl-item { cursor: move; }
.sl-canvas-wrap .sl-item:hover { outline: 2px dashed rgba(41,182,246,.6); }
.sl-canvas-wrap .sl-item.sel { outline: 2px solid #29b6f6; }
.sl-item.text { padding: 8px 12px; border-radius: 6px; }
.sl-text { width: 100%; height: 100%; overflow: hidden; outline: none; line-height: 1.25; word-wrap: break-word; white-space: pre-wrap; }
.sl-text[contenteditable="true"] { cursor: text; user-select: text; -webkit-user-select: text; }
.sl-item.text.empty .sl-text::before, .sl-text[contenteditable="true"]:empty::before { content: attr(data-ph); color: rgba(120,144,156,.7); font-style: italic; pointer-events: none; }
/* Λίστα: κουκκίδα στην πρώτη γραμμή (::before του .sl-text) και σε κάθε επόμενη (τα <div> του contenteditable) */
.sl-item.list .sl-text { padding-left: .4em; }
.sl-item.list .sl-text::before, .sl-item.list .sl-text > div::before { content: '• '; color: inherit; font-style: normal; }
.sl-item.list.empty .sl-text::before, .sl-item.list .sl-text[contenteditable="true"]:empty::before { content: attr(data-ph); color: rgba(120,144,156,.7); font-style: italic; }
.sl-item.shape svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-item.shape .sl-text.center { position: absolute; inset: 0; width: auto; height: auto; display: flex; align-items: center; justify-content: center; padding: 10px 16px; text-align: center; }
.sl-item.image img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.sl-item.emoji { display: flex; align-items: center; justify-content: center; line-height: 1; }
.sl-canvas-wrap .sl-item.emoji.ph { border: 3px dashed #b0bec5; border-radius: 12px; background: rgba(255,255,255,.35); }
.sl-canvas-wrap .sl-item.emoji.ph::after { content: 'διπλό κλικ για εικόνα'; position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 16px; color: #78909c; font-weight: 700; }
/* Λαβές μεγέθους & περιστροφής (μεγαλώνουν αντίστροφα με την κλίμακα μέσω του μεγέθους 14px στο λογικό σύστημα) */
.sl-h { position: absolute; width: 16px; height: 16px; background: #fff; border: 3px solid #29b6f6; border-radius: 50%; z-index: 3; }
.sl-h.nw { left: -9px; top: -9px; cursor: nwse-resize; } .sl-h.n { left: calc(50% - 8px); top: -9px; cursor: ns-resize; } .sl-h.ne { right: -9px; top: -9px; cursor: nesw-resize; }
.sl-h.e { right: -9px; top: calc(50% - 8px); cursor: ew-resize; } .sl-h.se { right: -9px; bottom: -9px; cursor: nwse-resize; } .sl-h.s { left: calc(50% - 8px); bottom: -9px; cursor: ns-resize; }
.sl-h.sw { left: -9px; bottom: -9px; cursor: nesw-resize; } .sl-h.w { left: -9px; top: calc(50% - 8px); cursor: ew-resize; }
.sl-rot { position: absolute; left: calc(50% - 14px); top: -46px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid #ff9800; color: #ff9800; font-size: 18px; line-height: 22px; text-align: center; cursor: grab; z-index: 3; }
.sl-rot::after { content: ''; position: absolute; left: 11px; top: 25px; width: 3px; height: 14px; background: #ff9800; }

/* Προβολή παρουσίασης (πλήρης οθόνη) */
.sl-show { position: fixed; inset: 0; z-index: 1000; background: #000; overflow: hidden; cursor: pointer; }
.sl-show-slide { position: absolute; inset: 0; }
.sl-show-slide .sl-slide { left: 50%; top: 50%; transform-origin: 50% 50%; box-shadow: 0 0 60px rgba(0,0,0,.6); }
.sl-show-slide.tr-fade { opacity: 0; transition: opacity .55s; } .sl-show-slide.tr-fade.in { opacity: 1; } .sl-show-slide.tr-fade.out { opacity: 0; }
.sl-show-slide.tr-slide { transform: translateX(100%); transition: transform .55s cubic-bezier(.2,.8,.3,1); } .sl-show-slide.tr-slide.bwd { transform: translateX(-100%); }
.sl-show-slide.tr-slide.in { transform: translateX(0); } .sl-show-slide.tr-slide.out.fwd, .sl-show-slide.tr-slide.out { transform: translateX(-100%); opacity: 0; }
.sl-show-slide.tr-zoom { opacity: 0; transform: scale(.6); transition: transform .5s cubic-bezier(.2,1.2,.4,1), opacity .4s; } .sl-show-slide.tr-zoom.in { opacity: 1; transform: scale(1); } .sl-show-slide.tr-zoom.out { opacity: 0; transform: scale(1.3); }
.sl-show-slide.tr-up { transform: translateY(100%); transition: transform .55s cubic-bezier(.2,.8,.3,1); } .sl-show-slide.tr-up.bwd { transform: translateY(-100%); }
.sl-show-slide.tr-up.in { transform: translateY(0); } .sl-show-slide.tr-up.out { transform: translateY(-40%); opacity: 0; transition: transform .55s, opacity .45s; }
.sl-show-slide.tr-bounce { opacity: 0; transform: scale(.2); transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .3s; } .sl-show-slide.tr-bounce.in { opacity: 1; transform: scale(1); } .sl-show-slide.tr-bounce.out { opacity: 0; transform: scale(.6); transition: transform .4s, opacity .35s; }
.sl-show { perspective: 1600px; }
.sl-show-slide.tr-flip { transform: rotateY(90deg); opacity: 0; transform-origin: 50% 50%; transition: transform .6s ease-out, opacity .3s; } .sl-show-slide.tr-flip.bwd { transform: rotateY(-90deg); }
.sl-show-slide.tr-flip.in { transform: rotateY(0); opacity: 1; } .sl-show-slide.tr-flip.out { transform: rotateY(-90deg); opacity: 0; transition: transform .5s ease-in, opacity .5s; }
.sl-show-slide.tr-spin { transform: rotate(-180deg) scale(.3); opacity: 0; transition: transform .7s cubic-bezier(.2,.9,.3,1), opacity .4s; }
.sl-show-slide.tr-spin.in { transform: rotate(0) scale(1); opacity: 1; } .sl-show-slide.tr-spin.out { transform: rotate(180deg) scale(.3); opacity: 0; }
.sl-show-slide.tr-wipe { clip-path: inset(0 100% 0 0); transition: clip-path .65s ease-in-out; } .sl-show-slide.tr-wipe.bwd { clip-path: inset(0 0 0 100%); }
.sl-show-slide.tr-wipe.in { clip-path: inset(0 0 0 0); } .sl-show-slide.tr-wipe.out { clip-path: inset(0 0 0 0); opacity: 1; z-index: -1; }
.sl-show-slide.tr-blur { filter: blur(24px); opacity: 0; transform: scale(1.08); transition: filter .6s, opacity .5s, transform .6s; }
.sl-show-slide.tr-blur.in { filter: blur(0); opacity: 1; transform: scale(1); } .sl-show-slide.tr-blur.out { filter: blur(24px); opacity: 0; }
.sl-show-slide.out { pointer-events: none; }
.sl-show-n { position: absolute; right: 16px; bottom: 10px; color: rgba(255,255,255,.55); font-family: 'Fredoka', sans-serif; font-size: 14px; font-weight: 700; }
.sl-show-nav { position: absolute; left: 12px; bottom: 10px; z-index: 5; display: flex; gap: 6px; opacity: 0; transition: opacity .3s; }
.sl-show:hover .sl-show-nav { opacity: 1; }
.sl-show-nav button { font-family: inherit; font-size: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); color: #fff; cursor: pointer; }
.sl-show-nav button:hover { background: rgba(255,255,255,.5); }
.sl-show-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-family: 'Fredoka', sans-serif; font-size: 44px; font-weight: 700; line-height: 1.4; }
.sl-show-end small { font-size: 18px; font-weight: 600; color: #b0bec5; }

/* Εκτύπωση: μία διαφάνεια ανά σελίδα Α4 οριζόντια (χρησιμοποιεί το #print-root και τις κλάσεις .pr-page από το cards.css) */
.sl-pr-page { width: 297mm; height: 210mm; display: flex; align-items: center; justify-content: center; background: #fff; }
.sl-pr-box { position: relative; width: 277mm; height: calc(277mm * 540 / 960); overflow: hidden; border: 1px solid #cfd8dc; }
.sl-pr-box .sl-slide { transform: scale(calc(277 / 254)); transform-origin: 0 0; }
@media (max-width: 1100px) { .sl-thumbs { width: 150px; } .sl-title { width: 150px; } .sl-btn small { display: none; } }

/* ---- Φτιάχνω μια παρουσίαση (js/slideslearn.js): πλαίσιο μαθήματος (.sl-task από το sheets.css) + κουτί «📦 Υλικό» δεξιά από τον καμβά ---- */
.sl-header:has(.sl-task) { padding: 0; background: none; }
.sll-tray { width: 210px; flex: none; overflow-y: auto; background: rgba(255,255,255,.85); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.sll-tray-h { font-weight: 800; color: #1565c0; font-size: 16px; text-align: center; }
.sll-mat { font-family: inherit; text-align: left; background: #fff; border: 2px solid #90caf9; border-radius: 12px; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: #37474f; transition: transform .12s, box-shadow .12s; }
.sll-mat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(21,101,192,.25); border-color: #1e88e5; }
.sll-mat b { font-size: 14px; color: #1565c0; }
.sll-mat span { font-size: 12px; line-height: 1.25; color: #546e7a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sll-mat img { width: 100%; max-height: 96px; object-fit: contain; border-radius: 8px; background: #fff; }
.sll-mat.used { border-color: #a5d6a7; background: #f1f8e9; }
/* Το υλικό που ζητά το τρέχον βήμα: παλλόμενο πορτοκαλί πλαίσιο */
.sll-mat.pulse { border-color: #ff9800; animation: sll-pulse 1s ease-in-out infinite; }
@keyframes sll-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,152,0,.55); } 50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255,152,0,0); } }
.sll-mat.used b { color: #2e7d32; }
.sll-tray-tip { font-size: 12px; color: #78909c; text-align: center; line-height: 1.3; margin-top: auto; }
/* Πολλά υλικά (π.χ. 4 φωτογραφίες ανά διαφάνεια): πλέγμα 2 στηλών, οι φωτογραφίες μικρές, τα κείμενα σε όλο το πλάτος */
.sll-tray.many { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px; }
.sll-tray.many .sll-tray-h, .sll-tray.many .sll-mat:not(.img), .sll-tray.many .sll-tray-tip { grid-column: 1 / -1; }
.sll-tray.many .sll-mat { padding: 4px 6px; gap: 2px; }
.sll-tray.many .sll-mat b { font-size: 12px; }
.sll-tray.many .sll-mat img { max-height: 64px; }
.sll-tray.many .sll-mat span { -webkit-line-clamp: 1; }
@media (max-width: 1100px) { .sll-tray { width: 165px; } }

/* ---- Πλαίσια κειμένου: κλικ μέσα = γράψιμο, μετακίνηση από το περίγραμμα ή το ✥ (23/9/2026) ---- */
.sl-edge { position: absolute; z-index: 2; cursor: move; }
.sl-edge.t { left: 0; right: 0; top: 0; height: 10px; }
.sl-edge.b { left: 0; right: 0; bottom: 0; height: 10px; }
.sl-edge.l { top: 0; bottom: 0; left: 0; width: 10px; }
.sl-edge.r { top: 0; bottom: 0; right: 0; width: 10px; }
.sl-edge:hover { background: rgba(126,87,194,.16); }
.sl-move {
  position: absolute; left: calc(50% - 52px); top: -46px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 3px solid #7e57c2; color: #7e57c2; font-size: 17px; line-height: 22px; text-align: center; cursor: move; z-index: 3;
}
.sl-move:hover { background: #ede7f6; }
.sl-item.text.sel, .sl-item.shape.sel { cursor: text; }