/* Resetare CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   JQUERY-CONFIRM - Personalized styles
   ========================================== */
.jconfirm .jconfirm-box {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

.jconfirm .jconfirm-title-c {
    font-size: 18px !important;
    padding: 15px 20px !important;
}

.jconfirm .jconfirm-content {
    padding: 10px 20px 20px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.jconfirm .jconfirm-buttons {
    padding: 10px 20px 20px !important;
}

.jconfirm .jconfirm-buttons button {
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.jconfirm .jconfirm-buttons .btn-red {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.jconfirm .jconfirm-buttons .btn-red:hover {
    background: #c82333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

.jconfirm .jconfirm-buttons .btn-orange {
    background: #e67e22 !important;
    border-color: #e67e22 !important;
    color: white !important;
}

.jconfirm .jconfirm-buttons .btn-orange:hover {
    background: #d35400 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4) !important;
}

.jconfirm .jconfirm-buttons .btn-default {
    background: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

.jconfirm .jconfirm-buttons .btn-default:hover {
    background: #5a6268 !important;
    transform: translateY(-1px) !important;
}

.jconfirm.jconfirm-red .jconfirm-box {
    border-top: 4px solid #dc3545 !important;
}

.jconfirm.jconfirm-orange .jconfirm-box {
    border-top: 4px solid #e67e22 !important;
}

/* Help from games (theme 'game-help', games- engine *.js): on small screens the window occupies
   The whole screen. Overwrite what jquery-confirm inline: width (boxWidth 45%), space
   by 40px up / down (offsetTop / offsetBottom) and max- heightul content calculated from them. */
@media (max-width: 768px), (max-height: 500px) {
    .jconfirm.jconfirm-game-help .jconfirm-holder {
        padding: 0 !important;
    }
    .jconfirm.jconfirm-game-help .jconfirm-box {
        width: 100% !important;
        height: 100vh;
        height: 100dvh; /* without the browser address bar on your mobile */
        display: flex;
        flex-direction: column;
        padding: 12px 12px 4px;
        border-radius: 0 !important;
    }
    .jconfirm.jconfirm-game-help .jconfirm-box div.jconfirm-content-pane {
        flex: 1 1 auto;
        min-height: 0; /* otherwise the flex element does not fall under its text and does not rewind */
        max-height: none !important;
        overflow-y: auto; /* .noscroll beat, put by jquery-confirm after 40px 's offsets */
        margin-bottom: 4px;
    }
    .jconfirm.jconfirm-game-help .jconfirm-content {
        padding: 4px 8px 8px !important;
    }
}

/* ==========================================
   TOOLTIPSTER - Custom styles
   ========================================== */
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content {
    color: #374151 !important;
    font-size: var(--user-font-size-configurable, 15px) !important; /* Size of settings */
    font-weight: 500 !important;
    padding: 6px 10px !important;
    line-height: 1.3 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    white-space: nowrap !important;
}

/* Very long titles (ui-manager initializeTooltips): they wrap, with minWidth (200px) a
   narrow side cannot squeeze them into a column. Short ones stay on one line. */
.tooltipster-sidetip.tooltipster-shadow.tooltipster-wrap .tooltipster-content {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow-background {
    border-color: transparent !important;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-arrow-border {
    border-color: transparent !important;
}

/* Tooltip arrow - white */
.tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow-uncropped {
    border-right-color: #ffffff !important;
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-left .tooltipster-arrow-uncropped {
    border-left-color: #ffffff !important;
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-top .tooltipster-arrow-uncropped {
    border-top-color: #ffffff !important;
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-bottom .tooltipster-arrow-uncropped {
    border-bottom-color: #ffffff !important;
}

/* More beautiful animation */
.tooltipster-fade {
    transition: opacity 0.15s ease-in-out !important;
}

/* CSS variables for configurable font sizes */
:root {
    --user-font-size-configurable: 15px; /* Default: Normal (15px), Mic: 13px, Mare: 14pt */
}

/* Styles for user settings interface */
.setting-group {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.setting-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.font-size-controls {
    display: flex;
    flex-wrap: wrap;
    margin: -5px; /* Safari 12 fallback for gap */
}
.font-size-controls > * {
    margin: 5px; /* Safari 12 fallback for gap: 10px */
}

.font-size-btn {
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    min-width: 80px;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    -webkit-user-select: none; /* Safari ignores unprefixed version until v17 */
    user-select: none;
    flex: 1;
}

.font-size-btn:hover {
    border-color: var(--ui-accent, #007bff);
    background-color: #f8f9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.font-size-btn.active {
    border-color: var(--ui-accent, #007bff) !important;
    background-color: var(--ui-accent, #007bff) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3) !important;
    transform: translateY(-2px) !important;
}

.font-size-icon {
    font-size: 16px;
    font-weight: bold;
}

.font-size-btn.active .font-size-icon,
.font-size-btn.active .font-size-text,
.font-size-btn.active .font-size-value {
    color: white !important;
}

.font-size-text {
    font-size: 12px;
    font-weight: 600;
}

.font-size-value {
    font-size: 10px;
    opacity: 0.7;
}

.font-size-btn.active .font-size-value {
    opacity: 0.9;
}

/* Style for user preferences sections - MOVED IN user-activity-styles.css */

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* Font size 14pt ONLY for buttons in the side bar and the UI interface */
.new-left-sidebar,
.new-left-sidebar *,
.menu-button,
#page-number-input,
.menu-button-like-input,
#drawing-tools-panel,
#drawing-tools-panel *,
.notepad-modal,
.notepad-modal *,
.auth-modal,
.reports-modal,
#tasks-modal,
#toc-modal,
#help-modal {
    font-size: var(--user-font-size-configurable) !important;
}

body {
    display: flex; /* Added for general layout */
    flex-direction: column; /* Content-ul body-ului (app-container) se va stivui */
}


/* Bare de meniu vechi - comentate deoarece nu mai sunt folosite direct */
/*
.menu-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #333;
    color: white;
    z-index: 10;
}

.left-menu {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60px;
}

.right-menu {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60px;
}
*/

.menu-button {
    width: 40px;
    height: 40px;
    margin: 5px 0;
    border: none;
    border-radius: 50%;
    background-color: var(--sidebar-bg, #555);
    color: var(--sidebar-color, white);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}

.menu-button:hover {
    background-color: var(--sidebar-bg, #777);
    filter: brightness(1.2);
}

/* Removed.page-info if no longer used in the new HTML structure */
/* 
.page-info {
    margin: 10px 0;
    font-size: 14px;
    text-align: center;
}
*/

/* Container principal */
.app-container {
    display: flex; 
    flex-grow: 1; 
    position: relative; 
    margin-left: 65px; 
    overflow: hidden; /* MODIFICATE: Hide default scroll */
    min-height: 100vh; /* Prevent height collapse after overlay closure */
 }

/* Display scrolls when the zoom is active in dual mode */
.app-container.zoom-scrollable {
    overflow: auto !important;
}

/* New Lateral Bar Left */
.new-left-sidebar {
    position: fixed; 
    top: 50%;
    left: 8px; /* Small constant space at the edge for uniform alignment */
    transform: translateY(-50%); 
    display: flex;
    flex-direction: column; /* Column buttons */
    align-items: center; 
    padding: 8px; /* padding uniform */
    /* The bar background comes from Colors.js (color + transparency set in Man2025).
       The fallback retains the old look for books without Colors.js. */
    background-color: var(--sidebar-panel-bg, rgba(240, 240, 240, 0.9));
    z-index: 1001; 
    margin-right: 0; 
    border-radius: 8px;
}
/* Safari 12 fallback for flexbox gap */
.new-left-sidebar > * {
    margin-bottom: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.new-left-sidebar .menu-button {
    margin: 6px 0; /* uniform vertical distance */
    padding: 8px;
    font-size: 15px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    text-align: center;
}

.new-left-sidebar .menu-button:last-child {
    margin-bottom: 0;
}

/* Input for page number in sidebar */
#page-number-input {
    width: 40px;
    padding: 4px;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    margin: 6px 0; /* the same distance as the buttons */
    font-size: 15px; /* Specified font size */
}

#page-number-input::-webkit-outer-spin-button,
#page-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox: Hide the arrows / spinner from input number */
#page-number-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
#page-number-input[type="number"]::-moz-number-spin-box,
#page-number-input[type="number"]::-moz-number-spin-up,
#page-number-input[type="number"]::-moz-number-spin-down {
    -moz-appearance: none;
    appearance: none;
}

/* "Page" / "Seite" must fit the 30px inside the field; typed numbers keep the full size */
#page-number-input::placeholder {
    font-size: 0.8em;
}

#page-number-input.input-error {
    border: 2px solid red;
    /* Optional: a small red shadow effect
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); 
    */
}

/* Style for the drop-down View menu */
.menu-button-dropdown {
    position: relative; 
    width: 100%; 
    display: flex; 
    justify-content: center;
 }

.menu-button-dropdown:last-of-type {
    margin-bottom: 0; /* Remove the bottom edge for the last drop button */
}

/* Pines must be under dropdowns */
.note-pin {
    z-index: 500 !important;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1001 !important;
    min-width: 200px; /* Minimum width adjusted to include text */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1002; /* Peste sidebar, dar sub modal-uri */
    border-radius: 4px;
    left: 100%; /* Start at the right edge of the parent container (.menu-button-drop) */
    top: 0; /* Line up with the top of the parent button */
    margin-left: 5px; /* Small space between the sidebar and the dropdown */
}

.dropdown-content a {
    color: black;
    padding: 8px 15px;
    text-decoration: none;
    display: flex; /* For alignment icon + text */
    align-items: center;
    font-size: 14px;
    white-space: nowrap; /* Prevents multiple rows of text */
}

.dropdown-content a i {
    margin-right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent !important;
    color: var(--btn-popup_menu_items-bg, #000) !important;
    font-size: 14px;
    flex-shrink: 0;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.menu-button-dropdown .menu-button.active + .dropdown-content {
    display: block;
}

/* Special styles only for zoom dropdowns and view mode */
#zoom-options-dropdown, #view-options-dropdown {
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* Safari 12+ */
    backdrop-filter: blur(10px) !important;
    padding: 2px 6px 3px 6px !important; /* compact; Xul stands in the row of the first option (see a: first-of- type) */
}

#zoom-options-dropdown a, #view-options-dropdown a {
    color: #495057 !important;
    border-radius: 10px !important;
    padding: 3px 12px; /* compact - beat.drop-content a (8px 15px) and variants in @ media */
    margin: 1px 0 !important;
    transition: all 0.3s ease !important;
}

/* The first option leaves room for the corner X (24px, at the edge 4px), on the same row as him */
#zoom-options-dropdown a:first-of-type, #view-options-dropdown a:first-of-type {
    margin-right: 24px !important;
}

/* The icon box has 28px (and from the theme of buttons: index.html / resource-icons-manager.js);
   We shrink it so the line stays compact */
#zoom-options-dropdown a i, #view-options-dropdown a i {
    width: 24px;
    height: 24px;
}

#zoom-options-dropdown a:hover, #view-options-dropdown a:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    transform: scale(1.02) !important;
}

/* Closure buttons in dropdowns */
.dropdown-close:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    background: #f0f0f0 !important;
}

/* Book container */
.book-container {
    position: absolute; 
    /* top, left, width, straight will be set by JavaScript, but we're trying to influence width */
    overflow: visible; 
    max-width: 100%; 
    max-height: 100%;
    /* Green frame + visible shadow always - FOR DOUBLE PAGE*/
    /* --The color of the Man2025 → interface → Rama of the book */
    box-shadow: var(--book-frame-color, rgb(19, 152, 157)) -10px 1px 0px 12px, var(--book-frame-color, rgb(19, 152, 157)) 10px 1px 0px 12px, rgba(0, 0, 0, 0.59) 4px 8px 46px 27px !important;
    /* Attempt to leave space on the right */
    /* This may require that JS does not set a fixed width,
       or calculate the width taking into account this space.
    */
    left: 0; /* We'll make a left line if it's not set by JS. */
    right: 5%; /* Leave 5% space on the right. Adjust as needed. */
    /* width: auto; */ /* We allow right to dictate width if JS does not override */
}

/* Shadow for single cover - just right */
.book-container.single-page-shadow {
    box-shadow: var(--book-frame-color, rgb(19, 152, 157)) 10px 1px 0px 12px, rgba(0, 0, 0, 0.59) 4px 8px 46px 27px !important;
}

.book { 
    max-width: 100%;
    max-height: 100%;
    /* display: flex; */ /* Removed, PageFlip manages internal display */
    /* justify-content: center; */
    /* align-items: center; */
}

.page {
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.page-content {
    padding: 0px;
    height: 100%;   
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    background: white;
}

.page-content img {
    background: white;
    color: transparent;
}

/* The thickness of the pages on the outer edges, as in the old book.
   The image has peaks in the middle up / down: it's centered on page margin and you can see
   only the outer half (12px), so the tip doesn't come out.
   Height puts it pages-depth-sync.js. */
img[data-type="pages-depth"] {
    width: 24px !important;
    /* The NGP is transparent in the corners; without that it inherits the white background from the page-content img. */
    background: transparent !important;
    height: calc(100% - 8px) !important; /* reserve until the JS synchronizes */
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: -1 !important;
    pointer-events: none;
    opacity: 1;
    object-fit: fill;
    transition: transform 0.3s ease;
}

/* The left page - the stack on the left edge, you can see the left half */
img[data-type="pages-depth"][data-page-side="left"] {
    left: -12px !important;
    right: auto !important;
    clip-path: inset(0 50% 0 0);
    transform-origin: right top !important; /* anchored at the edge glued to the page (zoom) */
}

/* Right page - the stack on the edge of the RIGHT, you can see the right half */
img[data-type="pages-depth"][data-page-side="right"] {
    right: -12px !important;
    left: auto !important;
    clip-path: inset(0 0 0 50%);
    transform-origin: left top !important; /* anchored at the edge glued to the page (zoom) */
}

.cover {
 /*   background-color: #3498db;
    color: white;
    text-align: center;*/
}

.cover .page-content {
   /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
}

.cover h1 {
    font-size: 2.5em;
    margin-bottom: 0px;
}

/* Modals - MORE OPEN MODAL (see book) */
.modal {
    position: fixed !important;
    z-index: 10001 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important; /* WITHOUT FUNDAL - see image on clear background */
    -webkit-backdrop-filter: none !important; /* No blur */
    backdrop-filter: none !important; /* No blur */
    display: none;
    animation: modalFadeIn 0.3s ease-out;
}

/* Modal animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background-color: white !important;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important; /* STRONG HUMAN */
    max-width: 450px;
    margin: 8% auto !important;
    position: relative;
    z-index: 10002 !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important; /* BORDER SUBTIL */
    animation: modalContentSlideIn 0.4s ease-out;
}

/* Modal content animation */
@keyframes modalContentSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#note-modal {
    z-index: 10001 !important;
}

#note-modal .modal-content {
    z-index: 10002 !important;
}

/* Modern styles for content - Reparated with OVERLAY SMART */
#toc-modal .modal-content {
    margin: 0 !important;
    position: fixed !important;
    left: 50px !important; /* After the menu bar */
    top: 0 !important; /* From the top completely */
    width: 450px !important; /* LONGER WORKS - enlarged width from 400px to 450px */
    max-width: 450px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 15px 15px 0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; /* POWERFUL HUMMER ON THE FUND */
    padding: 0 !important;
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important; /* _ */
    overflow-y: auto !important;
    animation: modalSlideInLeft 0.4s ease-out;
}

/* Adjustments for small resolutions below 480px - CONTENTS */
@media (max-width: 480px) {
    #toc-modal .modal-content {
        left: 0 !important; /* No space left */
        width: 100vw !important; /* All width */
        max-width: 100vw !important;
        border-radius: 0 !important; /* Not rounded to mobile corners */
    }
    
    /* Small boxes for furniture */
    .toc-item {
        padding: 6px 12px !important;
        margin: 2px 0 !important;
        min-height: 32px !important;
        font-size: 14px !important;
    }
    
    .toc-item i {
        font-size: 14px !important;
        margin-right: 8px !important;
        min-width: 16px !important;
    }
}

/* Animation for the modal frame */
@keyframes modalSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Closure button for TOC - STICKY */
#toc-modal .close {
    position: sticky !important;
    top: 15px !important;
    right: 15px !important;
    float: right !important;
    margin: 15px 15px 0 auto !important; /* auto + align- self: in flex float containers is ignored and Xul falls left */
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    color: #999 !important;
    font-size: 28px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    background: white !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

#toc-modal .close:hover {
    color: #000 !important;
    background: #f0f0f0 !important;
}

/* Styles for the modal of HELP - HIGHER WITH OVERLAY */
#help-modal .modal-content {
    margin: 2% auto !important;
    position: relative !important;
    width: 95% !important;
    max-width: 1200px !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 15px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; /* POWERFUL HUMMER ON THE FUND */
    padding: 0 24px 24px 24px !important; /* side padding + down, no damage to the sticky header */
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important; /* _ */
    overflow-y: auto !important;
    animation: modalZoomIn 0.4s ease-out;
}

/* Animation for the aid mode */
@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#help-modal .close {
    position: sticky !important;
    top: 15px !important;
    right: 15px !important;
    float: right !important;
    margin: 15px 15px 0 auto !important; /* auto + align- self: in flex float containers is ignored and Xul falls left */
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    color: #999 !important;
    font-size: 28px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    background: white !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

#help-modal .close:hover {
    color: #000 !important;
    background: #f0f0f0 !important;
}

/* Only the modal's own title is the sticky header: the generated help has its own h2.ah-title,
   which used to turn sticky too and slide over „Ajutor” when scrolling. */
#help-modal .modal-content > h2 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin: 0 0 4px 0 !important;
    padding: 18px 60px 8px 6px !important; /* The title stands on the row X (centred on it), not below it */
    line-height: 28px !important;
    border-bottom: 2px solid var(--ui-accent, #3498db) !important;
    background: white !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

#help-content {
    padding: 2px 24px 16px 24px !important; /* push the content to the right, general for dynamic content */
}

/* We push the textuals and lists slightly to the right in a generic manner */
#help-content p,
#help-content li {
    margin-left: 6px !important;
}

#help-content ul,
#help-content ol {
    margin-left: 16px !important;
    padding-left: 16px !important;
}

/* Help images to respect the left edge and not exit the container */
#help-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: 6px;
}

/* The aid generated by Man2025 (helpgenerator,.ah- help) comes with its own <style> and large spaces.
   We compact it from here: #help-content.x beats.ah- help.x without! Important. */
#help-content .ah-help { line-height: 1.35; }
#help-content .ah-section { margin-bottom: 8px; }
#help-content .ah-heading { margin: 10px 0 4px; padding-bottom: 3px; }
#help-content .ah-section:first-of-type .ah-heading { margin-top: 4px; }
#help-content .ah-text { margin-top: 2px; margin-bottom: 2px; }
#help-content .ah-grid { margin: 6px 0; gap: 6px; }
#help-content .ah-card { padding: 6px 8px; }
#help-content .ah-card-label { margin-bottom: 1px; }
#help-content .ah-activity-list { margin: 4px 0; }
#help-content .ah-activity-line { padding: 1px 0; }
#help-content .ah-shot { margin-top: 8px; margin-bottom: 8px; }
/* The modal already pads the text: the help's own padding and white sheet only added empty margins. */
#help-content .ah-help { padding: 8px 0 0; background: transparent; max-width: none; }
#help-content .ah-title { font-size: 1.45em; line-height: 1.25; margin: 0 0 12px; }
#help-content .ah-section { scroll-margin-top: 64px; } /* anchors land below the sticky header */
#help-content .ah-toc { padding: 10px 12px; }
#help-content .ah-toc ol { margin-left: 0 !important; padding-left: 1.6em !important; }
#help-content .ah-toc li { margin-left: 0 !important; }
#help-content .ah-quick { gap: 8px; margin-bottom: 12px; }
#help-content .ah-quick a { padding: 6px 12px; }

@media (max-width: 640px) {
    #help-modal .modal-content {
        width: calc(100% - 16px) !important;
        margin: 8px auto !important;
        height: calc(100vh - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 12px !important;
        padding: 0 12px 12px 12px !important;
    }
    @supports (height: 100dvh) {
        #help-modal .modal-content {
            height: calc(100dvh - 16px) !important;
            max-height: calc(100dvh - 16px) !important;
        }
    }
    #help-modal .modal-content > h2 { padding: 14px 52px 8px 2px !important; }
    #help-modal .close { top: 10px !important; margin: 10px 4px 0 auto !important; }
    #help-content { padding: 2px 4px 12px 4px !important; }
    #help-content p, #help-content li { margin-left: 0 !important; }
    #help-content ul, #help-content ol { margin-left: 0 !important; padding-left: 1.4em !important; }
}

/* Games - Stylisation header / footer and mobile responsive */
.game-header {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 260px;
    height: 80px;
    z-index: 100;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* Safari 12 fallback for flexbox gap */
.game-header > * {
    margin-left: 5px;
}
.ammi-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    margin: 4px;
    background: #1aa3b8;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
}
.ammi-circle:hover { background: #158a9a; }

.game-footer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Safari 12 fallback for flexbox gap */
.game-footer > * {
    margin: 0 14px;
}
.game-action-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    background: #2bb673;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
}
.game-action-btn.help { background: #28a3d7; }
.game-action-btn.repeat { background: #f06b6b; opacity: 0.7; }
.game-action-btn.check { background: #1fbf83; }
.game-action-btn:disabled { opacity: 0.5; cursor: default; }

/* Skin game - red frame in the old style */
.game-frame-red {
    border: 8px solid #9f2a2a;
    border-radius: 10px;
    box-shadow: inset 0 0 0 4px #7a1e1e, 0 3px 12px rgba(0,0,0,0.25);
    background: #fff;
    padding: 6px;
}

/* Eliminate UI Chromium Dialog for Game Window */
.game-dialog-container {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.game-dialog-container .ui-dialog-content { padding: 0 !important; }

/* ===== DIALOGUE FIELDS DIGITAL GAME - PAGE SCROLL ===== */
/* The main rules for.game- digital-dialog are below in the file (line ~ 3225) */

/* We secure the scroll on the page when the digital game is open */
html.game-digital-active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
}

body.game-digital-active {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
}

/* Styles for the modal by TASKS - REPAYED WITH OVERLAY MEETING */
#tasks-modal .modal-content {
    margin: 0 !important;
    position: fixed !important;
    left: 50px !important; /* After the menu bar */
    top: 0 !important; /* From the top completely */
    width: 400px !important;
    max-width: 400px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 15px 15px 0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; /* POWERFUL HUMMER ON THE FUND */
    padding: 0 !important;
    background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important; /* _ */
    overflow-y: auto !important;
    animation: modalSlideInLeft 0.4s ease-out;
}

/* Adjustments for small resolutions under 480px - LIST OF ACTIVITIES */
@media (max-width: 480px) {
    #tasks-modal .modal-content {
        left: 0 !important; /* No space left */
        width: 100vw !important; /* All width */
        max-width: 100vw !important;
        border-radius: 0 !important; /* Not rounded to mobile corners */
    }
    
    /* Small boxes for mobile task */
    .task-item,
    #toc-interactive-list .task-item {
        padding: 2px 10px !important; /* compact, ca pe desktop */
        margin: 2px 0 !important;
        min-height: 0 !important;
        font-size: 14px !important;
    }
    
    .task-item i,
    #toc-interactive-list .task-item i {
        font-size: 14px !important; /* Less than 18px */
        margin-right: 8px !important; /* Less than 12px */
        min-width: 16px !important; /* Less than 20px */
    }
}

/* Hide drawing elements and notes on mobile and digital mode */
/* When the application is in mobile-html or digital mode, hide all drawing elements and pins */
body[data-mobile-mode="true"] #edit-tools,
body[data-mobile-mode="true"] #drawing-tools-panel,
body[data-mobile-mode="true"] canvas#drawing-canvas,
body[data-mobile-mode="true"] .note-pin,
body[data-mobile-mode="true"] .drawing-canvas,
body[data-display-mode="mobile-html"] #edit-tools,
body[data-display-mode="mobile-html"] #drawing-tools-panel,
body[data-display-mode="mobile-html"] canvas#drawing-canvas,
body[data-display-mode="mobile-html"] .note-pin,
body[data-display-mode="mobile-html"] .drawing-canvas {
    display: none !important;
    visibility: hidden !important;
}

/* Hide and all drawing SVGs on mobile / digital modes */
body[data-mobile-mode="true"] svg[id*="drawing"],
body[data-mobile-mode="true"] svg.drawing-overlay,
body[data-display-mode="mobile-html"] svg[id*="drawing"],
body[data-display-mode="mobile-html"] svg.drawing-overlay {
    display: none !important;
    visibility: hidden !important;
}

/* Styles for mobile navigation buttons - guaranteed visibility */
#prev-page,
#next-page {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#prev-page.nav-buttons-visible,
#next-page.nav-buttons-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prev / next button in mobile mode - html and single */
body[data-display-mode="mobile-html"] #prev-page,
body[data-display-mode="mobile-html"] #next-page,
body[data-display-mode="single"] #prev-page,
body[data-display-mode="single"] #next-page {
    position: fixed !important;
    z-index: 1002 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    bottom: 15px !important;
}

body[data-display-mode="mobile-html"] #prev-page,
body[data-display-mode="single"] #prev-page {
    left: 10px !important;
    right: auto !important;
}

body[data-display-mode="mobile-html"] #next-page,
body[data-display-mode="single"] #next-page {
    right: 10px !important;
    left: auto !important;
}

/* Side bar descends over the corner of the arrow "back" on low screens: arrow passes
   Next to the bar (window.placePrevBesideSidebar, ui-modules / display.js). */
html body.prev-beside-sidebar #prev-page {
    left: var(--prev-page-left, 10px) !important;
}

/* Drawing mode / notes block page change (window.pageNavigationLocked, ui-manager.js).
   .hide () did not reach: the above rule requires display: flex! important. */
html body.page-nav-locked #prev-page,
html body.page-nav-locked #next-page {
    display: none !important;
}

/* When the silo is hidden, we hide and navigation buttons */
#prev-page.nav-hidden,
#next-page.nav-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Rule above (0-1-1-0) loses to body [date-display-mode] #prev-page
   (0-1-1) above, so on the mobile / single the arrows remained on the screen at the scroll,
   although they were getting class.nav- hidden. We're rehearsing the context to gain specificity. */
body[data-display-mode="mobile-html"] #prev-page.nav-hidden,
body[data-display-mode="mobile-html"] #next-page.nav-hidden,
body[data-display-mode="single"] #prev-page.nav-hidden,
body[data-display-mode="single"] #next-page.nav-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Sidebar hidden on his cell when he splits */
.new-left-sidebar.sidebar-hidden {
    display: none !important;
    opacity: 0 !important;
}

.app-container.sidebar-hidden {
    margin-left: 0 !important;
}

/* Transition for navigation buttons and sidebar */
body[data-display-mode="mobile-html"] #prev-page,
body[data-display-mode="mobile-html"] #next-page,
body[data-display-mode="single"] #prev-page,
body[data-display-mode="single"] #next-page,
.new-left-sidebar {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Single page view - white background for mobile content */
#single-page-viewer {
    background: white !important;
}

/* Style for digital HTML content */
.mobile-html-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: white;
}

.mobile-html-wrapper .page {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: clamp(16px, 4vw, 40px) !important;
    background: white !important;
}

.mobile-html-wrapper img {
    max-width: min(100%, 600px) !important;
    height: auto !important;
    display: inline-block !important;
    box-shadow: none !important;
    border: none !important;
}

/* Pictures that can be extended to the touch (MobileImageZoom in display.js) */
.mobile-html-wrapper img.md-zoomable {
    cursor: zoom-in !important;
}

.mobile-html-wrapper *,
.mobile-html-wrapper *::before,
.mobile-html-wrapper *::after {
    box-shadow: none !important;
}

.mobile-html-wrapper p,
.mobile-html-wrapper span,
.mobile-html-wrapper div {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Single page viewer - imagini scalate corect */
#single-page-viewer img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

/* Icons on page margin - basic styles for single / mobile mode */
/* Dynamic positioning in JS (resizeUI) */
body[data-display-mode="single"] .page-margin-icons,
body[data-display-mode="mobile-html"] .page-margin-icons {
    z-index: 100;
}

/* Transition to deactivate icons when drawing / notes mode is active */
.page-margin-icons {
    transition: opacity 0.3s ease, pointer-events 0s;
}

.page-margin-icons.icons-disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

/* Single page viewer */
body[data-display-mode="single"] #single-page-viewer {
    overflow: visible !important;
}

body[data-display-mode="single"] #single-page-viewer .page-wrapper,
body[data-display-mode="mobile-html"] #single-page-viewer .page-wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* On mobile (mobile-html mode) we hide pins, drawing button and the icons */
/* VERY IMPORTANT: These styles must have top priority */
body[data-display-mode="mobile-html"] #edit-tools,
body[data-display-mode="mobile-html"] .new-left-sidebar #edit-tools,
body[data-mobile-mode="true"] #edit-tools {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body[data-display-mode="mobile-html"] .note-pin,
body[data-display-mode="mobile-html"] [class*="note-pin"],
body[data-display-mode="mobile-html"] [data-note-id] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* On the small screen (mobile) - the icons appear under the page */
/* Position is made dynamic in JS */

/* On double and single modes (NOT mobile-html), we display the edit-tools button */
body[data-display-mode="double"]:not([data-mobile-mode="true"]) #edit-tools,
body[data-display-mode="single"]:not([data-mobile-mode="true"]) #edit-tools {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Inactive state of the drawing button - GRI */
#edit-tools:not(.active) {
    background: #6c757d !important;
    background-color: #6c757d !important;
    color: #ffffff !important;
}

#edit-tools:not(.active) i {
    color: #ffffff !important;
}

/* Visual selection for the drawing button when the drawing mode is active - VERDE / TEAL */
body.drawing-active #edit-tools,
body.drawing-active #edit-tools:hover,
body.drawing-active #edit-tools:active,
body.drawing-active #edit-tools:focus {
    background: var(--ui-primary, #13989d) !important;
    background-color: var(--ui-primary, #13989d) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(19, 152, 157, 0.3) !important;
}

body.drawing-active #edit-tools i,
body.drawing-active #edit-tools:hover i {
    color: #ffffff !important;
}

/* Visual selection for the drawing-mode label when active */
body.drawing-active #drawing-mode-label,
#drawing-mode-label.tool-selected {
    background: var(--ui-primary, #13989d) !important;
    color: #ffffff !important;
    border: 2px solid var(--ui-primary, #13989d) !important;
}

body.drawing-active #drawing-mode-label i,
#drawing-mode-label.tool-selected i {
    color: #ffffff !important;
}

body.drawing-active #drawing-mode-label div,
#drawing-mode-label.tool-selected div {
    color: #ffffff !important;
}

/* CSS for verified input - complete visual selection */
#drawing-mode-label input:checked ~ div {
    background: transparent !important;
    color: #ffffff !important;
}

/* Visual selection for notebook-model-label when active */
body.note-adding-mode #notes-mode-label,
#notes-mode-label.tool-selected {
    background: var(--ui-secondary, #28a745) !important;
    color: #ffffff !important;
    border: 2px solid var(--ui-secondary, #28a745) !important;
}

body.note-adding-mode #notes-mode-label i,
#notes-mode-label.tool-selected i {
    color: #ffffff !important;
}

body.note-adding-mode #notes-mode-label div,
#notes-mode-label.tool-selected div {
    color: #ffffff !important;
}

#notes-mode-label input:checked ~ div {
    background: transparent !important;
    color: #ffffff !important;
}

/* Visual selection for active pins - main styles are below */

#tasks-modal .close {
    position: sticky !important;
    top: 15px !important;
    right: 15px !important;
    float: right !important;
    margin: 15px 15px 0 auto !important; /* auto + align- self: in flex float containers is ignored and Xul falls left */
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    color: #999 !important;
    font-size: 28px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    background: white !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

#tasks-modal .close:hover {
    color: #000 !important;
    background: #f0f0f0 !important;
}

#tasks-modal h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin: 0 0 6px 0 !important;
    padding: 20px 60px 8px 20px !important; /* The title stands on the row X (centred on it), not below it */
    line-height: 24px !important;
    border-bottom: 2px solid var(--ui-secondary, #27ae60) !important;
    background: white !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

#toc-modal h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin: 0 0 0 0 !important;
    padding: 20px 60px 8px 20px !important; /* the title stands in the row X; total height 52px (see.tot-tables top) */
    line-height: 24px !important;
    border-bottom: none !important;
    background: white !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

/* Style for content tables - REPARED */
.toc-tabs {
    display: flex !important;
    gap: 6px !important;
    background: white !important;
    border-bottom: 3px solid var(--btn-contents_lists-bg, var(--ui-accent, #3498db)) !important;
    position: sticky !important;
    top: 50px !important; /* glued below #toc-modal h2 (52px height) */
    z-index: 9999 !important; /* Z-index crescut */
    margin: 0 20px !important;
}

.toc-tab-btn {
    flex: 1 !important;
    padding: 6px 12px !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f1f3f5 !important;
    color: #495057 !important; /* 7:1 on the tab background (was #6c757d, 4.2:1) */
    font-size: var(--user-font-size-configurable) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important; /* Make sure they're clickable */
    -webkit-user-select: none !important; /* Safari ignores unprefixed version until v17 */
    user-select: none !important;
}

.toc-tab-btn:not(.active):hover {
    background: #e2e6ea !important;
    color: #333 !important;
}

/* Selected table: filled with section color, thickened text */
.toc-tab-btn.active {
    background: var(--btn-contents_lists-bg, var(--ui-accent, #3498db)) !important;
    color: var(--btn-contents_lists-color, #fff) !important;
    font-weight: 700 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15) !important;
}

.toc-tab-content {
    flex: 1 !important;
    overflow-y: visible !important; /* DUBLU SCROLL ELIMIN - only mode-content has scroll */
    height: 100% !important;
}

.toc-tab {
    display: none !important;
    padding: 4px 12px !important; /* compact up / down - reduced from 12px to 4px */
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    overflow: visible !important; /* _ */
}

.toc-tab.active {
    display: block !important;
}

/* SIMPLIFIED CSS for tables */
#toc-pages-tab {
    display: block;
}

#toc-interactive-tab {
    display: none;
}

/* When JavaScript text book is set */
#toc-interactive-tab[style*="block"] {
    display: block !important;
}

#toc-pages-tab[style*="none"] {
    display: none !important;
}

#toc-list, #toc-interactive-list {
    padding: 0;
    list-style: none;
    margin: 0;
}

/* The list of AMMIs looks exactly like the list of activities with SCROLL MIC */
#toc-interactive-list {
    padding: 2px 20px 8px 20px; /* Compact up - reduced from 20px to 2px */
}

/* _ */
#toc-list, #toc-interactive-list {
    max-height: none; /* WITHOUT LIMITATION - Natural scroll */
    overflow-y: visible; /* _ */
    height: auto; /* AUTOMATIC HIGH */
}

/* Style for scrollbar applied on modal- content - ONE SINGLE SCROLL */
#toc-modal .modal-content::-webkit-scrollbar {
    width: 8px !important; /* SCROLL PRINCIPAL */
}

#toc-modal .modal-content::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

#toc-modal .modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 4px !important;
}

#toc-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* CONTENTS */
#toc-list {
    padding: 2px 20px 8px 20px; /* Compact up - reduced from 20px to 2px */
}

/* PRINCIPAL - BOLD AND WITHOUT CLICKING */
#toc-list li.toc-chapter {
    display: flex;
    align-items: center;
    padding: 4px 20px 2px 20px; /* compact - redus de la 16px */
    margin: 10px 0 2px 0; /* little space above, to separate chapters */
    background: none; /* No background */
    border: none; /* No border */
    border-radius: 0;
    cursor: default; /* Nu e clickabil */
    transition: none;
    box-shadow: none; /* No Shadow */
    position: relative;
    font-size: var(--user-font-size-configurable) !important;
    color: #2c3e50;
    font-weight: bold; /* _ */
    min-height: 0;
}

/* Primul capitol lipit de tab-uri */
#toc-list li.toc-chapter:first-child {
    margin-top: 2px;
}

#toc-list li.toc-chapter .chapter-title {
    font-weight: bold;
    color: #2c3e50;
    font-size: var(--user-font-size-configurable) !important;
}

/* Sub-items - INDENT AND CLICKABLE */
#toc-list li.toc-page-item {
    display: flex;
    align-items: center;
    padding: 3px 16px 3px 24px; /* compact - redus de la 8px la 3px */
    margin: 2px 0; /* compact - redus de la 3px la 2px */
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 1px solid #e9ecef;
    border-radius: 8px; /* Border radius redus de la 10px la 8px */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    font-size: var(--user-font-size-configurable) !important;
    color: #34495e;
    min-height: 0; /* row follows text (was 36px) */
}

#toc-list li.toc-page-item .page-title {
    color: #34495e;
    font-weight: normal;
    font-size: var(--user-font-size-configurable) !important;
}

/* Effects only for the clickable sub-elements */
#toc-list li.toc-page-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ui-activity-selected, #9db2e1);
    transform: translateX(-4px);
    transition: transform 0.3s ease;
}

#toc-list li.toc-page-item:hover {
    background: var(--ui-activity-selected, #9db2e1) !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#toc-list li.toc-page-item:hover::before {
    transform: translateX(0);
}

#toc-list li.toc-page-item:hover .page-title {
    color: inherit;
}

/* „Credite” (SPECIFICATII_RESURSE_EXTERNE_MEDIA.md §2.4): the last row of the pages, and the list it opens */
#toc-list li.toc-credits-item {
    padding: 0;
}

#toc-list li.toc-credits-item .toc-credits-open {
    flex: 1;
    text-align: left;
    background: none;
    border: 0;
    padding: 3px 16px 3px 24px;
    font: inherit;
    font-style: italic;
    color: inherit;
    cursor: pointer;
}

.toc-credits {
    padding: 4px 8px 12px;
    color: #34495e;
    font-size: var(--user-font-size-configurable) !important;
}

.toc-credits h3 {
    margin: 8px 0;
    font-size: 1.1em;
}

.toc-credits-back {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 3px 10px;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.toc-credits-list {
    margin: 0;
    padding-left: 1.4em;
}

.toc-credits-list li {
    margin: 6px 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.toc-credits-page {
    color: #4b5563;
}

#toc-list li i {
    font-size: 18px;
    margin-right: 12px;
    min-width: 20px;
    text-align: center;
}

/* Uniform colors for the icons in the list of pages - BLACK AS IN Textbook */
#toc-list li i.fa-square { color: #000000; } /* Black as in textbook */
#toc-list li i.fa-play { color: #000000; } /* Black as in textbook */
#toc-list li i.fa-volume-up { color: #000000; } /* Black as in textbook */
#toc-list li i.fa-image { color: #000000; } /* Black as in textbook */

/* Style for page number to right */
.toc-page-number {
    background: var(--btn-contents_lists-bg, #e3f2fd);
    color: var(--btn-contents_lists-color, #1976d2);
    padding: 1px 8px;
    border-radius: 12px;
    font-size: var(--user-font-size-configurable) !important;
    font-weight: 500;
    margin-left: auto;
}

.toc-title {
    flex: 1;
    margin-right: 8px;
    font-size: var(--user-font-size-configurable) !important;
}

/* PAPER GROUP IN THE LIST OF ACTIVITIES */
.page-group-header {
    margin: 8px 0 1px 0 !important; /* compact - down reduced from 4px to 1px */
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

.page-group-title {
    display: flex;
    align-items: center;
    padding: 2px 12px; /* compact - redus de la 6px la 2px */
    background: none; /* WITHOUT BACKGROUND */
    color: #2c3e50; /* SMART TEXT */
    border-radius: 0;
    font-weight: bold; /* BOLD */
    font-size: var(--user-font-size-configurable) !important;
    box-shadow: none; /* WITHOUT SHADOW */
    min-height: 0; /* row follows text (was 32px) */
}

.page-group-title i {
    margin-right: 8px;
    color: var(--toc-page-group-icon-color, var(--ui-accent, #3498db));
}

/* Activity count removed - no longer used */

/* Group activities to be slightly indented */
.page-activity {
    margin-left: 12px !important; /* Less - reduced from 16px to 12px */
    margin-top: 2px !important; /* LESS SPACE - reduced from 4px to 2px */
    margin-bottom: 2px !important;
}

/* FORCE THE CLEANING OF THE OVERLAYS ON THE BOOK */
#book::before,
#book::after,
.flipbook::before,
.flipbook::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* CLEAN AND MINIMUM FILTER for the list of activities */
.activity-filters {
    padding: 6px 20px;
    border-bottom: 1px solid #e9ecef;
    background: #fafbfc;
    margin-bottom: 4px;
}

.activity-filters label {
    display: block;
    font-size: var(--user-font-size-configurable) !important;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 3px;
}

/* Custom Multiselect Dropdown - DESIGN CLEAN */
.custom-multiselect {
    position: relative;
    min-width: 220px;
}

.multiselect-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    font-size: 13px;
}

.multiselect-selected:hover {
    border-color: var(--ui-accent, #3498db);
}

.multiselect-selected span {
    font-size: var(--user-font-size-configurable) !important;
    color: #495057;
    font-weight: 400;
}

.multiselect-selected i {
    color: #adb5bd;
    transition: transform 0.2s ease;
    font-size: calc(var(--user-font-size-configurable) * 0.8) !important; /* Chevron slightly smaller than text */
}

/* Dropdown Options - FLAT DESIGN */
.multiselect-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

/* Option Items - MINIMALIST */
.option-item {
    display: flex !important;
    align-items: center;
    padding: 8px 12px !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.1s ease;
    border-bottom: 1px solid #f8f9fa;
    font-weight: normal !important;
}

.option-item:last-child {
    border-bottom: none;
}

.option-item:hover {
    background: #f8f9fa;
}

.option-item input[type="checkbox"] {
    margin-right: 8px;
    width: 14px;
    height: 14px;
    accent-color: var(--ui-accent, #3498db);
    cursor: pointer;
}

.option-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    font-size: var(--user-font-size-configurable) !important;
}

/* The icons in the filter = the icons resource- * in the text book (inline style in Buttons.js) */
.option-item i.activity-type-icon {
    margin-right: 10px;
    font-size: 13px !important;
}

.option-item span {
    font-size: var(--user-font-size-configurable) !important;
    color: #495057;
    flex: 1;
}

/* Smooth animation for dropping */
.multiselect-options {
    max-height: 0;
    opacity: 0;
    transition: all 0.2s ease;
}

.multiselect-options[style*="block"] {
    max-height: 250px;
    opacity: 1;
}

/* Make sure there's no persistent overlay. */
.ui-widget-overlay,
.ui-front,
.modal-backdrop,
.overlay {
    transition: opacity 0.2s ease !important;
}

/* Force removal of any overlay pseudo-elements */
body:not(.game-modal-open):not(.ui-dialog-open) #book::before,
body:not(.game-modal-open):not(.ui-dialog-open) #book::after,
body:not(.game-modal-open):not(.ui-dialog-open) .flipbook::before,
body:not(.game-modal-open):not(.ui-dialog-open) .flipbook::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
    -webkit-backdrop-filter: none !important; /* Safari 12+ */
    backdrop-filter: none !important;
}

/* Inheriting styles for AMMIs in the list of activities */
#toc-interactive-list .task-item {
    display: flex;
    align-items: center;
    padding: 2px 12px; /* compact - redus de la 8px la 2px */
    margin: 2px 0; /* compact - redus de la 3px la 2px */
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 1px solid #e9ecef;
    border-radius: 8px; /* Border radius redus de la 10px la 8px */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    font-size: var(--user-font-size-configurable) !important;
    color: #34495e;
    min-height: 0; /* row follows text (was 40px) */
}

#toc-interactive-list .task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--btn-interactive_activity_controls-bg, var(--ui-secondary, #27ae60));
    transform: translateX(-4px);
    transition: transform 0.3s ease;
}

#toc-interactive-list .task-item:hover {
    background: var(--btn-interactive_activity_controls-bg, var(--ui-secondary, #27ae60)) !important;
    color: var(--btn-interactive_activity_controls-color, #fff) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#toc-interactive-list .task-item:hover::before {
    transform: translateX(0);
}

#toc-interactive-list .task-item i {
    font-size: 18px;
    margin-right: 10px;
    min-width: 20px;
    text-align: center;
}

/* activity-list-manager.js gives the icon 28px inline; in the list we shrink it, so the row remains compact */
#toc-interactive-list .task-item i.activity-type-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
}

/* Uniform colors for the icons in the list of activities - BLACK AS IN textbook */
#toc-interactive-list .task-item i.fa-square { color: #000000; } /* Black as in textbook */
#toc-interactive-list .task-item i.fa-play { color: #000000; } /* Black as in textbook */
#toc-interactive-list .task-item i.fa-volume-up { color: #000000; } /* Black as in textbook */
#toc-interactive-list .task-item i.fa-image { color: #000000; } /* Black as in textbook */

#toc-interactive-list .task-title {
    font-size: var(--user-font-size-configurable) !important;
    font-weight: 500;
    flex: 1;
}

/* Style for headers in content - SIMPLIFIED */
#toc-list li.toc-header {
    cursor: default;
    background: #f0f0f0 !important;
    color: #333 !important;
    font-weight: 600;
    font-size: var(--user-font-size-configurable) !important;
    border: 1px solid #ddd;
    margin: 15px 0 10px 0;
}

/* Eliminated:: before for headers */

#toc-list li.toc-header:hover {
    background: #f0f0f0 !important;
}

/* Simple styles for text without effect */
.no-items {
    font-style: italic;
    color: #999;
    text-align: center;
    padding: 20px;
}

/* Modern styles for the list of activities */
.tasks-list-modern {
    list-style: none;
    padding: 0;
    margin: 0;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 3px 12px; /* compact - redus de la 16px 20px */
    margin: 3px 0; /* compact - redus de la 10px */
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 1px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    min-height: 0; /* row follows text (was 55px) */
}

.task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--btn-interactive_activity_controls-bg, var(--ui-secondary, #27ae60));
    transform: translateX(-4px);
    transition: transform 0.3s ease;
}

.task-item:hover {
    background: var(--btn-interactive_activity_controls-bg, var(--ui-secondary, #27ae60)) !important;
    color: var(--btn-interactive_activity_controls-color, #fff) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.task-item:hover::before {
    transform: translateX(0);
}


.task-item i {
    font-size: 18px;
    margin-right: 12px;
    min-width: 20px;
    text-align: center;
}

/* Icon box has 28px on the button theme (index.html / resource-icons-manager.js);
   In the Activities window we shrink it, so the row remains compact */
#tasks-list .task-item i {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.task-title {
    font-size: var(--user-font-size-configurable) !important;
    font-weight: 500;
    flex: 1;
}

.no-activities {
    text-align: center;
    color: #566573; /* 6:1 on #f8f9fa (was #7f8c8d, 3.3:1) */
    font-style: italic;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 6px 0;
}

/* Style for headers in the contents */
#toc-list li.toc-header {
    cursor: default;
    background-color: #f0f0f0 !important;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}

#toc-list li.toc-header:hover {
    background-color: #f0f0f0 !important;
}

/* STICKS FOR SELECTION OF DESIGN AND NOTES */

/* Tool button styles - normal state */
button[data-tool], .tool-button, .drawing-tool, .note-tool {
    background: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

/* Hover status for tool buttons */
button[data-tool]:hover, .tool-button:hover, .drawing-tool:hover, .note-tool:hover {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

/* Selected status for tool buttons */
button[data-tool].selected, .tool-button.selected, .drawing-tool.selected, .note-tool.selected,
button[data-tool][aria-pressed="true"], .tool-button[aria-pressed="true"],
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.4) !important;
}

/* Clear highlighting when selecting pencil / gum (area-pressed or.selected) */
#pen-tool-btn.selected, #pen-tool-btn[aria-pressed="true"] {
    background: var(--ui-accent, #0d6efd) !important;
    color: #fff !important;
    border-color: var(--ui-accent, #0d6efd) !important;
}
#eraser-tool-btn.selected, #eraser-tool-btn[aria-pressed="true"] {
    background: var(--ui-accent, #0d6efd) !important;
    color: #fff !important;
    border-color: var(--ui-accent, #0d6efd) !important;
}

/* Pin selected - main styles are below */

/* Clear evidence for main modes: Drawing (blue) and notes (green) */
#drawing-mode-label input:checked + div {
    background: var(--ui-accent, #007bff) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
}
#notes-mode-label input:checked + div {
    background: var(--ui-secondary, #28a745) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
}

/* Style for selected color buttons */
button[data-color].selected, .color-button.selected {
    border-width: 3px !important;
    transform: scale(1.1) !important;
}

/* Styles for radio buttons and checkboxes ONLY in the tool interface - NOT dropdown */
.drawing-tools input[type="radio"], 
.note-tools input[type="radio"],
.tool-group input[type="radio"],
.drawing-tools input[type="checkbox"], 
.note-tools input[type="checkbox"],
.tool-group input[type="checkbox"] {
    display: none !important; /* Just hide in the context of the tools */
}

.drawing-tools input[type="radio"] + label, 
.note-tools input[type="radio"] + label,
.tool-group input[type="radio"] + label,
.drawing-tools input[type="checkbox"] + label, 
.note-tools input[type="checkbox"] + label,
.tool-group input[type="checkbox"] + label {
    display: inline-block !important;
    padding: 10px 15px !important;
    background: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    margin: 3px !important;
    transition: all 0.2s ease !important;
    -webkit-user-select: none !important; /* Safari ignores unprefixed version until v17 */
    user-select: none !important;
}

/* ALEGANT VERTICAL PANEL FOR DRAWING TOOLS */
#drawing-tools-panel {
    position: fixed !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    width: 78px !important; /* half a width */
    max-height: 80vh !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 50%, #e9ecef 100%) !important;
    padding: 30px 8px 16px 8px !important;
    border-radius: 24px !important;
    z-index: 1005 !important;
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.08),
        0 8px 24px rgba(0,0,0,0.04),
        inset 0 2px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(0,0,0,0.02) !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
    -webkit-backdrop-filter: blur(30px) saturate(120%) !important; /* Safari 12+ */
    backdrop-filter: blur(30px) saturate(120%) !important;
    overflow: hidden !important; /* Prevent any element from coming out of the panel */
}

/* When the panel is hidden, hide completely all the baby elements */
#drawing-tools-panel[style*="display: none"] *,
#drawing-tools-panel:not([style*="display: block"]):not(:visible) * {
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Hidden sections must not be accessible */
#drawing-controls[style*="display: none"],
#notes-section[style*="display: none"] {
    pointer-events: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* On small resolutions, make the lower buttons but keep the bar to the left */
@media (max-width: 900px) {
    #drawing-tools-panel {
        left: 0 !important; /* On the left edge */
        width: 36px !important; /* Narrow */
        padding: 20px 4px 12px 4px !important;
    }
    
    #drawing-tools-panel label[id*="mode-label"] {
        width: 22px !important;
        height: 26px !important;
        font-size: 13px !important;
    }
    
    #drawing-color-picker {
        width: 26px !important;
        height: 26px !important;
    }
    
    #pen-tool-btn, #eraser-tool-btn {
        width: 28px !important;
        height: 26px !important;
        font-size: 13px !important;
    }
}

#drawing-tools-panel > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px !important;
}
/* Safari 12 fallback for flexbox gap */
#drawing-tools-panel > div > * {
    margin-bottom: 12px;
}
#drawing-tools-panel > div > *:last-child {
    margin-bottom: 0;
}

/* Top mode buttons - COMPLETE ELIMINATION INLINE styles + forced alignment */
#drawing-tools-panel div[style*="gap: 3px"],
#drawing-tools-panel div[style*="max-width: 120px"],
#drawing-tools-panel div[style*="margin-left: auto"],
#drawing-tools-panel div[style*="background: #f8f9fa"],
#drawing-tools-panel div[style*="border-radius: 8px"],
#drawing-tools-panel .drawing-mode-controls {
    /* COMPLETE RESEARCH at default values */
    all: unset !important;
    
    /* IDENTIC STYLES with the rest of the elements in the panel */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* DIMENSIUNI ca restul elementelor */
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    
    /* SPACE like the rest of the elements - Safari 12 compatible */
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    
    /* ELIMINARE FUNDAL/BORDER */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    
    /* Positioning like the rest */
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    
    /* TOTAL OVERRIDE for any inline styles */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#drawing-tools-panel label[id*="mode-label"] {
    width: 28px !important;
    height: 32px !important;
    padding: 4px !important;
    margin: 0px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    border: 2px solid rgba(99, 102, 241, 0.15) !important;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    flex: 1 !important;
}

#drawing-tools-panel label[id*="mode-label"]:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 
        0 8px 20px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Controale culoare - elegante */
#drawing-tools-panel .drawing-color-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}
/* Safari 12 fallback */
#drawing-tools-panel .drawing-color-controls > * {
    margin-bottom: 8px;
}
#drawing-tools-panel .drawing-color-controls > *:last-child {
    margin-bottom: 0;
}

#drawing-tools-panel .drawing-color-controls span {
    display: none !important; /* Hide text "Culoare" */
}

#drawing-color-picker {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255,255,255,0.9) !important;
    padding: 0 !important;
    box-shadow: 
        0 4px 16px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#drawing-color-picker:hover {
    transform: scale(1.08) translateY(-1px) !important;
    box-shadow: 
        0 8px 24px rgba(0,0,0,0.12),
        0 4px 12px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.8) !important;
    border-color: rgba(255,255,255,1) !important;
}

/* Controale grosime - elegante */
#drawing-tools-panel .drawing-thickness-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}
/* Safari 12 fallback */
#drawing-tools-panel .drawing-thickness-controls > * {
    margin-bottom: 6px;
}
#drawing-tools-panel .drawing-thickness-controls > *:last-child {
    margin-bottom: 0;
}

#drawing-tools-panel .drawing-thickness-controls span {
    display: none !important; /* Hide text "Grosime" */
}

#drawing-line-width {
    width: 42px !important;
    height: 6px !important;
    transform: none !important;
    border-radius: 8px !important;
    background: linear-gradient(to right, #e9ecef, #adb5bd, #6c757d) !important;
    cursor: pointer !important;
    outline: none !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    box-shadow: 
        inset 0 1px 3px rgba(0,0,0,0.1),
        0 1px 0 rgba(255,255,255,0.8) !important;
}

#drawing-line-width::-webkit-slider-thumb {
    -webkit-appearance: none !important; /* necesar pe Safari < 15.4 */
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #6366f1, #4f46e5, #3730a3) !important;
    cursor: pointer !important;
    box-shadow: 
        0 4px 12px rgba(99, 102, 241, 0.3),
        0 2px 6px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    transition: all 0.3s ease !important;
}

#drawing-line-width::-webkit-slider-thumb:hover {
    transform: scale(1.1) !important;
    box-shadow: 
        0 6px 16px rgba(99, 102, 241, 0.4),
        0 3px 8px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* [DISABLED] Rules that forced layout horizontally into the panel tools
   These inline style selections disrupted the desired arrangement (grid / column).
   We deactivate them to allow the layout set in the local HTML / CSS panel. */
/* #drawing-tools-panel div[style*="gap: 4px"] {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    justify-content: center !important;
} */

#pen-tool-btn, #eraser-tool-btn {
    width: 36px !important;
    height: 32px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    margin: 0px !important;
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    border: 2px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

#pen-tool-btn:hover, #eraser-tool-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 
        0 8px 20px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
}

/* [DISABLED] Forcing containers on horizontal row */
/* #drawing-tools-panel div[style*="flex-direction: column"]:has(button) {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
} */

/* #drawing-tools-panel div[style*="flex-direction: column"] button {
    width: 26px !important;
    height: 32px !important;
    padding: 4px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    margin: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    border: 2px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 
        0 3px 10px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
} */

/* #drawing-tools-panel div[style*="flex-direction: column"] button:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 
        0 6px 16px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
} */

/* Pines notes - beautiful design */
#notes-section {
    position: relative !important;
}

#notes-section div[style*="background: #f8f9fa"] {
    display: none !important; /* Hide Explanatory Text */
}

#notes-section div[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

.pin-option {
    width: 42px !important;
    height: 42px !important;
    margin: 3px !important;
    border-radius: 0 !important;
    font-size: 22px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pin-option i {
    font-size: 22px !important;
    color: var(--btn-bookmarks_pins-bg, #fbbf24) !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

.pin-option:hover {
    transform: scale(1.15) !important;
}

.pin-option.active {
    background: rgba(0,0,0,0.06) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: scale(1.1) !important;
}

.pin-option.active i {
    transform: scale(1.1) !important;
}

/* Stylish separators for groups */
#drawing-tools-panel div[style*="height: 1px"],
#drawing-tools-panel::after,
.drawing-separator {
    width: 40px !important;
    height: 2px !important;
    margin: 10px auto !important;
    background: linear-gradient(to right, 
        transparent, 
        rgba(148, 163, 184, 0.3), 
        rgba(148, 163, 184, 0.6),
        rgba(148, 163, 184, 0.3), 
        transparent) !important;
    border-radius: 2px !important;
    display: block !important;
}

/* Separators added by CSS for groups */
#drawing-tools-panel .drawing-color-controls::after,
#drawing-tools-panel .drawing-thickness-controls::after,
#drawing-tools-panel div[style*="gap: 4px"]::after {
    content: '' !important;
    width: 36px !important;
    height: 2px !important;
    margin: 8px auto !important;
    background: linear-gradient(to right, 
        transparent, 
        rgba(99, 102, 241, 0.2), 
        rgba(99, 102, 241, 0.4),
        rgba(99, 102, 241, 0.2), 
        transparent) !important;
    border-radius: 2px !important;
    display: block !important;
}

/* Elegant and visible close button */
#drawing-tools-panel .close,
#drawing-tools-panel button[title="Închide"],
#drawing-tools-panel button[onclick*="hide()"] {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    bottom: auto !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #ddd !important;
    font-size: 14px !important;
    font-weight: bold !important;
    z-index: 1010 !important;
    box-shadow: 
        0 3px 10px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#drawing-tools-panel .close::before,
#drawing-tools-panel button[title="Închide"]::before,
#drawing-tools-panel button[onclick*="hide()"]::before {
    content: "×" !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #000 !important;
}

#drawing-tools-panel .close:hover,
#drawing-tools-panel button[title="Închide"]:hover,
#drawing-tools-panel button[onclick*="hide()"]:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Nice scrollbar for panel */
#drawing-tools-panel::-webkit-scrollbar {
    width: 4px !important;
}

#drawing-tools-panel::-webkit-scrollbar-track {
    background: transparent !important;
}

#drawing-tools-panel::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1) !important;
    border-radius: 2px !important;
}

#drawing-tools-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2) !important;
}

/* Tools selection styles - ONLY in the context of tools */
.drawing-tools button.selected, 
.note-tools button.selected,
.tool-group button.selected,
button[data-tool].selected, 
.tool-button.selected, 
.drawing-tool.selected, 
.note-tool.selected {
    background: #e3f2fd !important;
    border: 2px solid #2196f3 !important;
    box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.3) !important;
}

/* For radio / checkbox buttons ONLY in the context of tools */
.drawing-tools input[type="radio"]:checked + label, 
.note-tools input[type="radio"]:checked + label,
.tool-group input[type="radio"]:checked + label,
.drawing-tools input[type="checkbox"]:checked + label, 
.note-tools input[type="checkbox"]:checked + label,
.tool-group input[type="checkbox"]:checked + label {
    background: #e3f2fd !important;
    border: 2px solid #2196f3 !important;
}

/* Force visibility only for Mode Main Xul */
.modal .close, #note-modal .close {
    display: block !important;
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    font-size: 24px !important;
    color: #666 !important;
    cursor: pointer !important;
    z-index: 9999 !important;
}

/* Responsive design 
@media (max-width: 600px) {
    .menu-bar {
        width: 50px;
    }
    
    .menu-button {
        width: 35px;
        height: 35px;
    }
    
    .book-container {
        padding: 0 60px;
    }
    
    .page-content {
        padding: 15px;
    }
    
    .cover h1 {
        font-size: 2em;
    }
}
*/
/* Full screen styles */
.fullscreen-enabled .app-container {
    width: 100vw;
    height: 100vh;
}

/* StPageFlip styles */
.stf__parent {
    height: 100%;
    background: transparent !important;
}

.stf__wrapper {
    height: 100%;
    background: transparent !important;
}

.stf__block {
    height: 100%;
    background: transparent !important;
}

.app-container {
    background: transparent !important;
}

/* Style for when the book is in focus */
.stf__block.--active {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Style for page return animation */
.stf__item.--hard {
    background-color: #f0f0f0;
}

/* Style for Page Shadow */
.stf__outerShadow {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.stf__innerShadow {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
}

/* Custom styles for "hard" pages */
.stf__item--hard {
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Custom styles for front page, last page and covers */
.stf__item--first, .stf__item--last, .stf__item--cover {
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Overwrite styles for front page, last page and cover */
.page:first-child,
.page:last-child,
.page.cover {
  width: 500px;
  height: 700px;
}

/* Sets for page numbers */
.page-number {
  position: absolute;
  bottom: 20px;
  font-size: 14px;
  color: #888;
}

.page-number.left {
  left: 20px;
}

.page-number.right {
  right: 20px;
}

/* Style for the icons on the edge of the page */
.page-margin-icons {
    position: absolute;
    top: 10px; 
    left: -35px; 
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    z-index: 5; 
    gap: 10px; 
    opacity: 0; /* Initial state: invisible */
    transform: translateX(-10px); /* Initial state: displaced */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* JS added class to trigger animation */
.page-margin-icons.icons-visible-animated {
    opacity: 1;
    transform: translateX(0);
}

.page-margin-icons i {
    font-size: 20px; 
    color: #333; 
    margin-bottom: 0; 
    padding: 8px; 
    background-color: rgba(255, 255, 255, 0.85); 
    border-radius: 5px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); 
    cursor: pointer; 
    transition: transform 0.2s, box-shadow 0.2s; 
}

.page-margin-icons i:hover {
    color: var(--ui-accent, #007bff); 
    transform: scale(1.1); 
    box-shadow: 0 3px 6px rgba(0,0,0,0.4); 
}

/* For right pages - we also adjust the initial state */
.stf__item.--right .page-margin-icons,
.stf__item--right .page-margin-icons,
.stf__item[data-side="right"] .page-margin-icons,
.page-right .page-margin-icons,
.page[data-side="right"] .page-margin-icons {
    left: auto !important;
    right: -35px !important;
    align-items: flex-end !important;
    transform: translateX(10px); /* Initial status: displaced from the right */
}

/* Animation class applied to the right icons */
.stf__item.--right .page-margin-icons.icons-visible-animated,
.stf__item--right .page-margin-icons.icons-visible-animated,
.stf__item[data-side="right"] .page-margin-icons.icons-visible-animated,
.page-right .page-margin-icons.icons-visible-animated {
    opacity: 1; /* Devine vizibil */
    transform: translateX(0); /* Return to final position */
}

/* Specific styles for navigation buttons moved page */
#prev-page, #next-page {
    position: absolute !important; /* We ensure that position is absolute */
    z-index: 1002; /* Raised z-index to be above other elements */
    background-color: rgba(255, 255, 255, 0.85);
    color: #333;
    border: none;
    border-radius: 5px; 
    width: auto; 
    height: auto; 
    padding: 8px; 
    cursor: pointer;
    display: flex; 
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s, color 0.3s, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    font-size: 20px;
    opacity: 0; 
    visibility: hidden; 
    bottom: 20px !important;
    top: auto !important; 
}

/* Specific styles for single page mode - fixed positioning */
.app-container[style*="overflow-y: auto"] #prev-page,
.app-container[style*="overflow-y: auto"] #next-page {
    position: fixed !important;
    z-index: 1002 !important;
}

#prev-page {
    left: 20px !important; 
    right: auto !important; 
}

#next-page {
    right: 20px !important; 
    left: auto !important; 
}

#prev-page.nav-buttons-visible, 
#next-page.nav-buttons-visible {
    opacity: 1 !important; 
    visibility: visible !important; 
}

#prev-page:hover, #next-page:hover {
    color: var(--ui-accent, #007bff);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

/* Query average for narrower screens */
@media screen and (max-width: 768px) {
    #prev-page, #next-page {
        bottom: 15px !important; 
        padding: 10px !important; 
        font-size: 22px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        z-index: 1002 !important;
    }

    #prev-page {
        left: 10px !important; 
    }

    #next-page {
        right: 10px !important; 
    }

    .new-left-sidebar .menu-button {
        width: 44px;
        height: 44px;
        padding: 8px;
        font-size: 18px;
    }
    .new-left-sidebar .menu-button i {
        font-size: 20px !important;
    }
    .menu-button-like-input {
        width: 44px !important;
        height: 44px !important;
        font-size: 14px !important;
    }
}

/* Query media for very narrow screens (e.g. mobile phones) */
@media screen and (max-width: 480px) {
    #prev-page, #next-page {
        bottom: 10px !important; 
        padding: 10px !important; 
        font-size: 20px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        z-index: 1002 !important;
    }

    #prev-page {
        left: 8px !important; 
    }

    #next-page {
        right: 8px !important; 
    }
}

/* Responsive Design for Lateral Bar and Little Height Buttons */
@media screen and (max-height: 600px) {
	.new-left-sidebar {
		padding: 4px; /* Padding and smaller for low heights */
	}
	.new-left-sidebar .menu-button {
		width: 36px;
		height: 36px;
		padding: 5px;
		font-size: 14px;
		margin: 4px 0; /* minimum vertical space */
	}
	.dropdown-content {
		min-width: 180px; /* Low minimum width for dropdown */
		padding: 3px 0;
	}
	.dropdown-content a {
		padding: 6px 12px; /* Reduced padding for dropdown items */
		font-size: 13px;
	}
	.dropdown-content a i {
		margin-right: 6px;
	}
}

/* For very small resolutions on mobile */
@media screen and (max-width: 480px) {
	.new-left-sidebar {
		width: 50px;
		padding: 4px;
	}
	.new-left-sidebar .menu-button {
		width: 42px;
		height: 42px;
		padding: 6px;
		font-size: 16px;
		margin-bottom: 3px;
	}
	.new-left-sidebar .menu-button i {
		font-size: 18px !important;
	}
	.menu-button-like-input {
		width: 42px !important;
		height: 42px !important;
		font-size: 13px !important;
		padding: 4px !important;
	}
	.app-container {
		margin-left: 54px;
	}
	
	.app-container.sidebar-hidden {
		margin-left: 5px !important;
	}
}

@media screen and (max-height: 450px) {
	.new-left-sidebar {
		padding: 2px;
	}
	.new-left-sidebar .menu-button {
		width: 36px;
		height: 36px;
		padding: 5px;
		font-size: 14px;
		margin: 2px 0;
	}
	.dropdown-content {
		min-width: 160px;
	}
	.dropdown-content a {
		padding: 4px 10px;
		font-size: 12px;
	}
	.dropdown-content a i {
		margin-right: 5px;
	}
	/* We hide the text from the drop down and just leave the icons if it gets too cramped */
	/* Optionally, it can be activated by removing the comment
	.dropdown-content a span {
		display: none; 
	}
	.dropdown-content a i {
		margin-right: 0; 
	}
	*/
}

/* Extra compact for very little height */
@media screen and (max-height: 350px) {
	.new-left-sidebar { padding: 1px; }
	.new-left-sidebar .menu-button { width: 32px; height: 32px; padding: 4px; font-size: 13px; margin: 2px 0; }
	#page-number-input { width: 32px; padding: 2px; font-size: 11pt; margin: 2px 0; }
	#page-number-input::placeholder { font-size: 0.7em; }
}

#single-page-viewer {
    width: 100%; /* JS set at available width */
    /* height: 100%; */ /* Eliminat; va fi auto sau setat de JS la auto */
    height: auto; /* Allow the container to grow with the content */
    display: flex; /* We keep to center the image if its width is less than the container */
    align-items: flex-start; /* Line up the image up if it's shorter */
    justify-content: center; /* Center image horizontally */
    position: absolute; 
    top: 0; /* Va fi ajustat de JS cu padding-ul app-container */
    left: 0; /* Va fi ajustat de JS cu padding-ul app-container */
    /* padding: 10px; */ /* Removed the paddin from here, will be managed by positioning from JS into the app- container */
    box-sizing: border-box;
    overflow: visible; /* Allows both vertical and horizontal scroll to magnification */
}

#single-page-viewer img {
    width: 100%; /* Force image to occupy the full width of the #single-page-viewer container */
    height: auto; /* The height shall be adjusted automatically to maintain proportions */
    max-width: 100%; /* Redundant if the width is 100%, but it doesn't hurt */
    /* max-height: 100%; */ /* Removed in order to allow the visible height to be exceeded */
    object-fit: contain; /* It may not be necessary, but we'll leave him for now. */
    display: block; /* Remove extra space under image if inline */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

/* Cursor for active drawing mode */
.app-container.drawing-active,
.app-container.drawing-active #single-page-viewer,
.app-container.drawing-active #book .stf__item {
    cursor: crosshair;
}

/* Style for the active button (can be generalized for all toggle buttons) */
.new-left-sidebar .menu-button.active {
    background-color: var(--ui-accent, #007bff);
    color: white;
}

/* Styles for the number of activities */
.activity-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: white;
    color: #e74c3c;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 14px  !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity:90%;
    border: 1px solid #ccc !important;
}

.new-left-sidebar .menu-button {
    position: relative; /* Required for absolute positioning of the badge */
}

/* Style for Audio Player */
.audio-player-container {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    z-index: 1001 !important;
    min-width: 200px !important;
}

.close-audio-player {
    position: absolute !important;
    top: 2px !important;
    right: 5px !important;
    background: transparent !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    color: #999 !important;
}

.close-audio-player:hover {
    color: #333 !important;
}

.audio-player-container audio {
    width: 100% !important;
    height: 30px !important;
}

/* Drawing cloth styles */
#page-drawing-canvas {
    position: absolute; /* Positioned absolutely above the page content */
    z-index: 999; /* Under the pins but over the pages */
    display: block; /* Always visible to display drawings */
    pointer-events: none !important; /* Default read-only, do not block the clicks */
}

/* When the drawing mode is active on the app- container, the canvas becomes editable */
.app-container.drawing-active #page-drawing-canvas {
    pointer-events: auto !important; /* Editable in drawing mode */
    z-index: 1000; /* We only increase the index when it's active. */
}

/* When it's pines mode, the canvas must be subs pines */
body.note-adding-mode #page-drawing-canvas {
    z-index: 500 !important; /* Sub pin-uri */
    pointer-events: none !important; /* Nu interfere cu pin-urile */
}

/* When it's not in drawing mode, the canvas must not block the pins */
body:not(.drawing-active) #page-drawing-canvas {
    pointer-events: none !important;
    z-index: 999 !important; /* Sub pin-uri */
}

/* When the drawing mode is active on the app- container AND on the card (double mode), disable the pointer- events on the internal pages of PageFlip */
.app-container.drawing-active .drawing-active-on-book .stf__item {
    pointer-events: none !important; 
}

/* Responsive adjustments for the new sidebar and app container */
/* ... existing CSS ... */

/* Loading screen styles */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9); /* Fundal semi-transparent alb */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Make sure it's above the other elements */
  transition: opacity 0.5s ease; /* Estompation effect */
}

.loading-spinner {
  border: 8px solid #f3f3f3; /* Culoarea gri a cercului */
  border-top: 8px solid var(--ui-accent, #3498db);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite; /* Rotation animation */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loading-screen p {
  margin-top: 15px;
  font-size: 1.2em;
  color: #555;
}

/* Class to hide the charging screen */
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none; /* Disable mouse interactions */
}

/* Class for hiding the book during loading */
.book-hidden {
    opacity: 0;           /* invisible */
    visibility: hidden;   /* out of event flow */
    pointer-events: none; /* prevenim clicurile accidentale */
    transition: opacity .25s ease; /* Enjoy your fadea when the class is eliminated */
}

/* Fade-in effect for the book */
.book {
    transition: opacity .25s ease;
}

/* Transition for book appearance */
#book {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Hide the book until JavaScript takes out his class */
.book-hidden {
    opacity: 0;           /* invisible */
    visibility: hidden;   /* out of event flow */
    pointer-events: none; /* prevenim clicurile accidentale */
    transition: opacity .25s ease; /* Enjoy your fadea when the class is eliminated */
}

/* HIDE THE SIDEBAR IN EDITATION MODES */
body.drawing-active .new-left-sidebar,
body.note-adding-mode .new-left-sidebar {
    display: none !important;
}

/* AID APP-CONTAINER WHEN SIDEGAR IS HIDDEN IN EDITATION MODES */
body.drawing-active .app-container,
body.note-adding-mode .app-container {
    padding-left: 0 !important;
}

/* Fade-in effect for the book */
.book {
    transition: opacity .25s ease;
}

/* Transition for book appearance */
#book {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Style for the interactive icons from pages */
.page-interactive-icon {
    z-index: 10000 !important;
    cursor: pointer;
    font-size: 18px;
    color: var(--btn-page_content_icons-color, #000);
    background-color: var(--btn-page_content_icons-bg, #fbbf24);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
    pointer-events: auto !important;
}

.page-interactive-icon:hover {
    transform: scale(1.15);
    filter: brightness(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Keyboard focus on the page icons and the activity-list titles (role="button").
   Separate rules: Safari under 15.4 does not know :focus-visible. */
.page-interactive-icon:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}
.page-interactive-icon:focus:not(:focus-visible) {
    outline: none;
}
.task-title[role="button"]:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.task-title[role="button"]:focus:not(:focus-visible) {
    outline: none;
}

/* INTERACTIVE GAMES (AMMI) - VERY CLOSED */
#gameDialog,
#gameDialog.ui-dialog,
.ui-dialog.ui-widget.ui-widget-content,
.ui-dialog[aria-describedby="gameDialog"],
.ui-widget-content[aria-describedby="gameDialog"],
.ui-widget[aria-describedby="gameDialog"] {
    z-index: 20000 !important; /* Over all the ways and our silo */
    background: transparent !important;
    border: none !important;
}

/* OVERLAY FOR INTERACTIVE GAMES - A LITTLE OPEN */
.ui-widget-overlay,
.ui-widget-overlay.ui-front {
    background-color: rgba(0, 0, 0, 0.75) !important; /* MORE OPEN FOR GAMES */
    -webkit-backdrop-filter: blur(6px) !important; /* Safari sub 18 */
    backdrop-filter: blur(6px) !important; /* BLUR MODERAT */
    z-index: 19999 !important; /* Under dialogue but above all others */
}

/* Complete titlebar removal ONLY for interactive games */
.ui-dialog[aria-describedby="gameDialog"] .ui-dialog-titlebar,
.ui-dialog[aria-describedby="dialog"] .ui-dialog-titlebar,
.ui-dialog[aria-describedby="dialog1"] .ui-dialog-titlebar,
.game-dialog-container .ui-dialog-titlebar,
.ui-dialog.game-dialog-container .ui-dialog-titlebar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

.ui-widget-overlay,
.ui-widget-overlay.ui-front {
    z-index: 19999 !important; /* Under dialogue but above all others */
}

/* Make sure the interactive dialogues are over the sidebar */
.ui-dialog {
    z-index: 40000 !important;
}

/* AMMI MODALS CENTRES - IDENTIFICATION FOR ALL SCANES */
/* EXCEPTION:.game-digital-dialogue has its own styles */
/* DOAR Desktop (>= 641px): centrat cu auto sizing */
/* On mobile (< 641px) let JS manage dimensions */
@media (min-width: 641px) {
    .ui-dialog:not(.game-digital-dialog) {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 95vw !important;
        max-height: 95vh !important;
        width: auto !important;
        height: auto !important;
    }

    .ui-dialog-content:not(.game-digital-dialog .ui-dialog-content) {
        overflow: visible !important;
    }
}

/* ===== STYLES FOR DIGITAL DIALOGUE GAME (.GAME-DIGITAL-dialog) ===== */
/* Scroll on the page, not fixed. Mobile = almost fullscreen, Desktop = centre max 800px */

/* DEFAULT (Mobil < 641px): full width cu 5px margine */
.game-digital-dialog {
    position: absolute !important;
    top: 10px !important;
    left: 5px !important;
    right: 5px !important;
    bottom: auto !important;
    width: calc(100vw - 10px) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10050 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Desktop (>= 641px): centrat, max 800px */
@media (min-width: 641px) {
    .game-digital-dialog {
        left: 50% !important;
        right: auto !important;
        width: 800px !important;
        max-width: calc(100vw - 40px) !important;
        transform: translateX(-50%) !important;
    }
}

/* Content of the digital dialogue */
.game-digital-dialog .ui-dialog-content {
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Space reserved up for round navigation buttons (close / forward /
   Back). The engine puts them absolutely, with top: 0 right: 0, in the right-up corner of the
   #dialog1, and the only separation from the content was an <br> (~ 20px), too
   little for the 44px buttons: the first row of the load enters below them.
   We replace the <br> with a tape the height of the buttons. Applicable to any
   width, because this window is only used by the mobile version of the book.
   Valoarea = 44px (.btnNavAmmi din window_games.css) + 4px respiro. */
.ui-dialog.game-digital-dialog #dialog1 > br {
    display: none !important;
}

.ui-dialog.game-digital-dialog #stageBody {
    padding-top: 48px !important;
}

/* ===== LITTLE SHEETS: DIGITAL GAME WINDOW WITHOUT RAME =====
   On the mobile double frame (frame on the wrapper-dialog + frame on #dialog1, both
   „5px ridge", puse inline din games-engine-digital.js) plus padding-ul de 10px
   eat ~ 20px on each side, and the frame can't be seen whole anyway because
   The dialogue is higher than the screen. Under the threshold we remove the frame, shadow and spaces
   Useless, to keep the entire screen for content.
   The desktop (above the threshold) remains unchanged.
   The PRAGUE only changes in line @ media below (768px). */
@media (max-width: 768px), (max-height: 500px) {
    .ui-dialog.game-digital-dialog {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        /* no side edges: left / right 0 + width auto (not 100vw, so as not to
           Horizontal scroll occurs due to scrollbar) */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Content of the dialogue: no frame, just enough not to stick the text to the edge */
    .ui-dialog.game-digital-dialog #dialog1,
    .ui-dialog.game-digital-dialog .ui-dialog-content {
        border: 0 !important;
        border-radius: 0 !important;
        padding: 4px !important;
    }

    /* Footerul cu butoanele mari: padding-ul inline de 10px e inutil aici */
    .ui-dialog.game-digital-dialog #footerGame {
        padding: 4px 0 !important;
    }
}

/* Digital / mobile mode: complete removal of window frame */
body.digital-mode .ui-dialog.game-digital-dialog,
html.digital-mode .ui-dialog.game-digital-dialog,
body.digital-mode #dialog1,
html.digital-mode #dialog1 {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
}

/* Games styles from the old app - REPRODUCED EXACTLY */
#dialog {
    background: transparent !important;
    border: none !important;
}

/* For digital (#dialog1) on classic desktop (over 768px, outside digital mode) we want frame */
html:not(.digital-mode) body:not(.digital-mode) #dialog1 {
    background: #ffffff !important;
    border: 5px ridge var(--ui-primary, #13989d) !important;
    padding: 10px !important;
}

#dialog .ui-dialog-titlebar,
#dialog1 .ui-dialog-titlebar {
    display: none !important;
}

/* StageBody without forced background (background comes from game / background) */
#stageBody {
    position: relative !important;
    background: transparent !important; /* fundalul real este #imgBack inserat de engine */
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    top: 0 !important;
}

/* The frame of the activity window - drawn from CSS, replaces frame_activity.png.
   Two Man2025 → Colours of → Interface
   --activity-frame-color (closed: corners, outer edge) and
   --activity-frame-light (open: middle frame, line next to content).
   Degrade + shadows give relief; the same formula is in the preview of Man2025. */
#imgBack.activity-frame {
    --afr-dark: var(--activity-frame-color, #398000);
    --afr-light: var(--activity-frame-light, #dfff22);
    --afr-w: var(--activity-frame-width, 12px); /* grosimea ramei, din Man2025 */
    /* White background under frame: the overlay of the game is transparent and without it a transparent frame
       (low opacity / "No frame") let to see the page of the book, as without background image. */
    background: #ffffff;
    border-radius: 6px;
    pointer-events: none;
}

/* The frame layer (only affected by opacity): degrades + the open line of 2px near the content.
   Tipul ramei vine din html[data-activity-frame] = gradient | solid | none,
   opacitatea din --activity-frame-opacity (0-1). */
#imgBack.activity-frame::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
    opacity: var(--activity-frame-opacity, 1);
    background:
        linear-gradient(var(--afr-light), var(--afr-light)) var(--afr-w) var(--afr-w) / calc(100% - 2 * var(--afr-w)) calc(100% - 2 * var(--afr-w)) no-repeat,
        linear-gradient(135deg, var(--afr-dark) 0%, var(--afr-light) 18%, var(--afr-light) 70%, var(--afr-dark) 100%);
    box-shadow:
        inset 0 0 7px rgba(0, 0, 0, 0.55),
        inset 0 0 14px var(--afr-light),
        0 0 6px rgba(0, 0, 0, 0.45);
}

/* One color: frame filled in dark color, white inlet line discreet */
html[data-activity-frame="solid"] #imgBack.activity-frame::before {
    background:
        linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) var(--afr-w) var(--afr-w) / calc(100% - 2 * var(--afr-w)) calc(100% - 2 * var(--afr-w)) no-repeat,
        var(--afr-dark);
    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, 0.35),
        0 0 6px rgba(0, 0, 0, 0.45);
}

html[data-activity-frame="none"] #imgBack.activity-frame::before {
    display: none;
}

/* Interiorul alb (nu e afectat de opacitatea ramei) */
#imgBack.activity-frame::after {
    content: '';
    position: absolute;
    top: calc(var(--afr-w) + 2px);
    right: calc(var(--afr-w) + 2px);
    bottom: calc(var(--afr-w) + 2px);
    left: calc(var(--afr-w) + 2px);
    background: #ffffff;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.18);
}

html[data-activity-frame="none"] #imgBack.activity-frame::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: none;
}

/* Style for clickable game elements */
*[data-a-index] {
    cursor: pointer !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    transition: background-color 0.3s ease !important;
}

*[data-a-index]:hover {
    background-color: rgba(200, 230, 255, 0.5) !important;
}

*[data-a-index].rounded {
    background-color: #cef !important;
    border: 1px solid #999 !important;
}

/* More obvious round corners when selecting (as in the old game) */
*[data-a-index].rounded {
    border-radius: 12px !important;
    box-shadow: inset 1px -1px 18px rgba(53,122,23,0.6) !important;
}

#gameStage {
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Footer game transparent */
#footerGame {
    background: transparent !important;
    text-align: center !important;
    position: relative !important;
    z-index: 20 !important;
    padding: 10px !important;
}

/* Remove Border / Shadow Game Dialogue */
.game-dialog-container,
.game-dialog-container.ui-dialog,
.ui-dialog.game-dialog-container,
.ui-dialog[aria-describedby="gameDialog"],
#gameDialog,
#gameDialog.ui-dialog-content,
.ui-dialog-content#gameDialog,
.ui-dialog-content.ui-widget-content#gameDialog,
div#gameDialog.ui-dialog-content.ui-widget-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.game-dialog-container .ui-dialog-content,
#gameDialog .ui-dialog-content,
.ui-widget-content#gameDialog,
#gameDialog.ui-widget-content,
div.ui-dialog-content#gameDialog,
.ui-dialog .ui-dialog-content#gameDialog {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* OVERLAY FOR CLASS BODY GAMES */
.game-modal-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75) !important; /* MORE OPEN */
    -webkit-backdrop-filter: blur(6px) !important; /* Safari sub 18 */
    backdrop-filter: blur(6px) !important; /* BLUR MODERAT */
    z-index: 19998 !important;
    pointer-events: auto;
    animation: gameOverlayFadeIn 0.3s ease-out;
}

@keyframes gameOverlayFadeIn {
    from {
        opacity: 0;
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.75);
    }
}

/* Hide the silo and buttons when the games are open */
.game-modal-open .new-left-sidebar,
.game-modal-open #prev-page,
.game-modal-open #next-page,
.game-modal-open #book,
.game-modal-open #single-page-viewer,
.game-modal-open .stf__item,
.game-modal-open .page {
    pointer-events: none !important;
    opacity: 0.1 !important; /* ALMOST INVISIBLE FOR GAMES */
}

/* Backdrop for normal modes - MORE OPEN */
.help-modal-open #book::before,
.tasks-modal-open #book::before,
.toc-modal-open #book::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25) !important; /* MORE TRANSPARENT - to see the book a */
    z-index: 9999;
    pointer-events: auto;
}

/* Backdrop for Games - PUTTER OPEN */
.game-modal-open #book::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75) !important; /* MORE OPEN FOR GAMES */
    z-index: 9999;
    pointer-events: auto;
}

/* Style for the container of interactive icons on the sidelines - THIS BLOC WILL BE ELIMINATED */
/*
.page-margin-icons-wrapper {
    position: absolute;
    top: 20px; 
    right: 20px; 
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    z-index: 1050; 
}
*/

/* Ensure that.page-content is a positioning context if not already */
.page-content {
    position: relative; /* Required for absolute positioning of the icons wrapper */
}

/* Optional style to limit the width of the wrapper if necessary */
/*
.page-margin-icons-wrapper .page-interactive-icon {
    max-width: 45px; / / Or width set in JS
}
*/

/* Style for the icons in single page mode */
.single-page-icons {
    position: absolute;
    top: 10px;
    right: -35px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 1000;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    max-height: none;
    overflow: visible;
    width: auto;
    min-width: 50px;
}

.single-page-icons.icons-visible-animated {
    opacity: 1;
    transform: translateX(0);
}

.single-page-icons i {
    font-size: 20px;
    color: #333;
    margin-bottom: 0;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.single-page-icons i:hover {
    color: var(--ui-accent, #007bff);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.single-page-icons .page-interactive-icon {
    position: static !important;
    margin: 0;
    font-size: 16px !important;
    color: var(--btn-page_content_icons-color, #000) !important;
    background-color: var(--btn-page_content_icons-bg, #fbbf24) !important;
    width: auto !important;
    height: auto !important;
    border-radius: 5px !important;
    padding: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.single-page-icons .page-interactive-icon:hover {
    filter: brightness(1.1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* On your mobile, the icons of games at the bottom of the page */
@media screen and (max-width: 768px) {
    .single-page-icons {
        top: auto;
        bottom: 8px;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    .single-page-icons .page-interactive-icon,
    .single-page-icons i {
        font-size: 18px !important;
        padding: 6px !important;
    }
}

/* Style for Audio Player */
.audio-player-container,
.media-player-container {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
}

/* Player control styles */
.media-play-pause-btn:hover {
    background: #0056b3 !important;
}

.media-menu-btn:hover {
    color: #333 !important;
}

.media-close-btn:hover {
    color: #666 !important;
}

.media-player-container audio,
.media-player-container video {
    outline: none;
}

.media-player-container audio::-webkit-media-controls-panel {
    background-color: transparent;
}

.play-pause-btn {
    background: var(--ui-accent, #007bff);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-menu-btn {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #666;
    padding: 2px;
}

.close-audio-player {
    background: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #999;
    margin-left: auto;
}

.audio-player-container audio {
    flex: 1;
    height: 32px;
    min-width: 140px;
    border-radius: 16px;
}

/* Wrapper for single page mode */
.single-page-wrapper,
.mobile-html-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Drawing toolbar styles */
#drawing-tools-panel {
    position: fixed;
    top: 70px;
    left: 10px;
    background: rgba(250, 250, 250, 0.92);
    padding: 15px;
    border-radius: 10px;
    z-index: 1003;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.08);
    min-width: 36px !important; /* remove the high constraint to allow narrow panel */
}

/* Style for Vintage Audio Player */
.vintage-audio-frame {
    background: linear-gradient(45deg, #8B4513, #A0522D, #CD853F);
    border: 3px solid #654321;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden; /* Hide the extra white part */
}

.vintage-audio-frame::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
    border-radius: 8px;
    border: 1px solid #444;
}

.vintage-audio-frame::after {
    content: 'AUDIO PLAYER';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0 0 3px #00ff00;
}

.vintage-btn {
    background: linear-gradient(45deg, #444, #666, #888);
    border: 2px solid #333;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.2);
    -webkit-user-select: none; /* Safari ignores unprefixed version until v17 */
    user-select: none;
}

.vintage-btn:hover {
    background: linear-gradient(45deg, #555, #777, #999);
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.3);
}

.vintage-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(0,0,0,0.2);
}

.vintage-btn[disabled] {
    opacity: 0.5;
    background: linear-gradient(45deg, #333, #444, #555);
    transform: none !important;
    cursor: not-allowed;
}

.vintage-play-btn {
    color: #00ff00;
    text-shadow: 0 0 3px #00ff00;
}

.vintage-pause-btn {
    color: #ffff00;
    text-shadow: 0 0 3px #ffff00;
}

.vintage-stop-btn {
    color: #ff4444;
    text-shadow: 0 0 3px #ff4444;
}

#drawing-tools-panel h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
}

#drawing-tools-panel button {
    background: var(--skin-auth-color, #13989d);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.2s ease;
    font-size: 13px;
}

#drawing-tools-panel button:hover {
    background: var(--skin-auth-color-hover, #107a7e);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#drawing-tools-panel label {
    display: inline-block;
    margin: 5px 10px 5px 0;
    font-size: 12px;
    color: #555;
}

#drawing-tools-panel input[type="color"] {
    width: 40px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

#drawing-tools-panel input[type="range"] {
    width: 80px;
    margin-left: 5px;
}

/* Uniform style for the close button in the drawing bar - REPARED */
#close-drawing-tools {
    color: #999 !important;
    font-size: 28px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    background: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    z-index: 1000 !important;
}

#close-drawing-tools:hover {
    color: #000 !important;
    background: #f0f0f0 !important;
}

/* Style for active drawing bar buttons */
#add-note-btn.active {
    background: var(--skin-auth-color, #13989d) !important;
}

#drawing-mode-btn.active {
    background: var(--skin-auth-color, #13989d) !important;
}

/* Mouse follower pin hidden in pin mode */
.note-adding-mode .mouse-follower-pin {
    display: none !important;
}

/* Style for the notebook - use the ones with! Important above */

/* Note pin styles */
.note-pin {
    transition: transform 0.2s ease;
   /* outline: 2px solid rgba(255,255,255,0.8) !important; 
    border-radius: 3px !important;*/
}

.note-pin:hover {
    transform: scale(1.2);
    outline: 3px solid rgba(255,255,255,1) !important; /* Contur mai vizibil la hover */
}

/* Pines in active mode to be extra visible */
body.note-adding-mode .note-pin {
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8)) !important;
    z-index: 30000 !important; /* And higher in active mode */
}

/* Pins mode styles */
.note-adding-mode {
    cursor: crosshair !important;
}

.note-adding-mode #book,
.note-adding-mode #single-page-viewer,
.note-adding-mode .page-content {
    cursor: crosshair !important;
}

/* Hide navigation buttons in pin mode */
.note-adding-mode #prev-page,
.note-adding-mode #next-page,
.note-adding-mode .nav-buttons-visible {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Just when we draw or add notes */
body.drawing-active .stf__item:hover,
body.note-adding-mode .stf__item:hover {
    transform: none !important;
}

body.drawing-active .page:hover,
body.note-adding-mode .page:hover {
    transform: none !important;
}

/* We prevent hover on any element in the book when the drawing bar is active */
body.drawing-active .stf__wrapper:hover,
body.drawing-active .stf__item:hover,
body.drawing-active .page-content:hover {
    transform: none !important;
    cursor: crosshair !important;
}

body.note-adding-mode .stf__wrapper:hover,
body.note-adding-mode .stf__item:hover,
body.note-adding-mode .page-content:hover {
    transform: none !important;
    cursor: crosshair !important;
}

/* COMPLETE BLOCKING ALL HOURS AND CLICK IN EDITATION */
body.drawing-active .stf__item,
body.drawing-active .page,
body.note-adding-mode .stf__item,
body.note-adding-mode .page {
    pointer-events: none !important;
}

/* I AM COMPLETELY BLOCKING THE HALL ON THE CORNERS IN AN EDITED MANNER. */
body.drawing-active .stf__wrapper .stf__item,
body.note-adding-mode .stf__wrapper .stf__item,
body.drawing-active .stf__item,
body.note-adding-mode .stf__item {
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
}

body.drawing-active .stf__wrapper .stf__item:hover,
body.note-adding-mode .stf__wrapper .stf__item:hover,
body.drawing-active .stf__item:hover,
body.note-adding-mode .stf__item:hover {
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
    pointer-events: none !important;
}

/* BUT I ALLOWED CLICKS FOR DESENATION AND PINES ON THE CONTACT OF THE CARRIAGE */
body.drawing-active #book,
body.drawing-active .page-content,
body.drawing-active #single-page-viewer,
body.note-adding-mode #book,
body.note-adding-mode .page-content,
body.note-adding-mode #single-page-viewer {
    pointer-events: auto !important;
}

/* Allows and clicks on divs and spines in pin mode */
body.note-adding-mode div,
body.note-adding-mode span,
body.note-adding-mode p {
    pointer-events: auto !important;
}

/* ENSURE THAT PINES ARE ALWAYS CLICKABLE AND VISITABLE */
.note-pin {
    pointer-events: auto !important;
    z-index: 25000 !important; /* A lot over any item */
    position: absolute !important; /* Absolute positioning for z- index */
    background: none !important; /* Make sure the background doesn't interfere */
}

/* I'M SURE THE ONLY ONE-PAGE-VIEWER CAN BE CLICKED FOREVER. */
#single-page-viewer {
    pointer-events: auto !important;
}

/* ================================
   NOTEPAD MODAL STYLING 
   ================================ */

.notepad-modal {
    position: relative;
    max-width: 400px;
    margin: 6% auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; /* POWERFUL HUMMER ON THE FUND */
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    border: 2px solid rgba(255, 255, 255, 0.2) !important; /* _ */
    animation: modalContentSlideIn 0.4s ease-out;
}

.notepad-header {
    background: var(--skin-auth-color, #13989d);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 18px 18px 0 0;
    position: relative;
}

.notepad-header h3 {
    color: white;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-style: italic;
}

.notepad-close {
    color: white !important;
    font-size: 28px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
}

.notepad-close:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.notepad-content {
    background: #fff;
    padding: 0;
    position: relative;
}

.notepad-lines {
    background: 
        linear-gradient(to right, 
            var(--skin-auth-color, #13989d) 0px, 
            var(--skin-auth-color, #13989d) 3px, 
            transparent 3px, 
            transparent 35px,
            #e8e8e8 35px,
            #e8e8e8 36px,
            transparent 36px
        ),
        repeating-linear-gradient(
            transparent,
            transparent 26px,
            #f0f8ff 26px,
            #f0f8ff 28px
        );
    background-size: 100% 28px;
    min-height: 280px;
    position: relative;
    padding: 16px 0;
}

.notepad-lines textarea {
    width: 100%;
    height: 280px;
    border: none;
    background: transparent;
    padding-left: 45px;
    padding-right: 20px;
    padding-top: 0px; /* without padding up */
    font-family: 'Segoe UI', 'Arial', sans-serif;
    font-size: 15px;
    line-height: 28px; /* exactly like the height of the lines */
    color: #333;
    resize: none;
    outline: none;
    transform: translateY(-12px); /* move text 12px above - bottom on line */
}

.notepad-lines textarea::placeholder {
    color: #aaa;
    font-style: italic;
    line-height: 28px;
}

.notepad-footer {
    background: #f8f8f8;
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 18px 18px;
}

.notepad-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    min-width: 80px;
}

.notepad-btn-save {
    background: var(--skin-auth-color, #13989d);
    color: white;
}

.notepad-btn-save:hover {
    background: var(--skin-auth-color-hover, #107a7e);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(19,152,157,0.3);
}

.notepad-btn-cancel {
    background: #6c757d;
    color: white;
}

.notepad-btn-cancel:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108,117,125,0.3);
}

.notepad-btn-delete {
    background: #dc3545;
    color: white;
}

.notepad-btn-delete:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220,53,69,0.3);
}

/* Styles for global wiper buttons */
#delete-all-notes-btn:hover,
#delete-all-drawings-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
}

/* Compact dimensions for drawing buttons (clear / delete all) */
#clear-canvas-btn, #delete-all-drawings-btn {
    width: 60px !important; /* and smaller, as in notes */
    height: 26px !important;
    padding: 0 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#delete-all-notes-btn:hover {
    box-shadow: 0 6px 16px rgba(231,76,60,0.4) !important;
}

#delete-all-drawings-btn:hover {
    box-shadow: 0 6px 16px rgba(230,126,34,0.4) !important;
}

#delete-notes-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(220,53,69,0.4) !important; 
}

/* Central Shade for Double Page Module */
.book-center-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    /* As in the old book: shadow.png (78x1935) lying on the top of the book,
       Proportional width, full opacity → narrow and well-defined */
    width: auto;
    aspect-ratio: 78 / 1935;
    transform: translateX(-50%);
    background: url('../media/skins/shadow.png') center center no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    display: none; /* implicit ascuns */
}

/* Safari under 15 has no appearance-ratio: with width: self shadow would be width 0.
   The container has the width of two pages (~ 1402x1903), so 78 / 1935 of height is 2.75% of width. */
@supports not (aspect-ratio: 1 / 1) {
    .book-center-shadow {
        width: 2.75%;
    }
}

/* Double display */
body[data-display-mode="double"] .book-container .book-center-shadow {
    display: block;
}

/* Disable central minimalist-style shadow - PERMITEM AFISAREA */
/* body[data-ministyle="1"] .book-container .book-center-shadow { display: none !important; } */

/* FORCE to display the central shadow always - ultra specific selector */
html body .book-container .book-center-shadow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* Simplified aspect: keeps the central shadow discreet from before (wide, 55%) */
html body[data-ministyle="1"] .book-container .book-center-shadow {
    width: 120px;
    aspect-ratio: auto;
    background-repeat: repeat-y;
    background-size: 100% auto;
    opacity: 0.55 !important;
}

/* Ascundem umbra DOAR pe coperte (folosind clasa first-last-page) */
html body .book-container.first-last-page .book-center-shadow {
    display: none !important;
}

/* The old rule specific for double mode - we commend it for safety */
/* body[data-display-mode="double"] .book-container:not(.first-last-page) .book-center-shadow {
    display: block !important;
} */

/* Disable all umbrellas and frames in minimalist style */
body[data-ministyle="1"] .book-container {
    box-shadow: none !important;
}

body[data-ministyle="1"] #book {
    box-shadow: none !important;
}

body[data-ministyle="1"] .page-content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important; /* Just keep the shadow of the page */
}

/* Keep the central shadow visible in drawing mode (does not interfere with drawing) */
body.drawing-active .book-center-shadow,
body.note-adding-mode .book-center-shadow {
    pointer-events: none !important;
    display: block !important;
}



/* Force drawing icon color globally to avoid library overrides */
#drawing-mode-label i {
    color: #495057 !important;
}
#drawing-mode-label.tool-selected i, 
#drawing-mode-label.active i {
    color: #fff !important;
}



/* Simplified shadow - direct on #book, scales automatically with zoom */
#book {
    transition: box-shadow 0.3s ease, clip-path 0.3s ease;
}

/* First and last page styles - without frames and shadows */
.book-container.first-last-page {
    box-shadow: none !important;
}

#book.first-last-page {
    box-shadow: none !important;
}

.first-last-page .book-center-shadow {
    display: none !important;
}

.first-last-page .page-content {
    box-shadow: none !important;
}

/* ==========================================
   MOBILE SUB 640px - Full width, ZERO margin / padding for digital HTML
   ========================================== */
@media (max-width: 640px) {
    /* Containerul principal - prevenim overflow pe ambele axe */
    html, body {
        overflow: hidden !important;
    }
    
    /* We do not change the position of the book or container - it behaves as on the desktop */
    /* The book remains centered and with visible sidebar */
    
    /* Digital HTML Wrap - only for HTML content */
    .mobile-html-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Digital content images adapt */
    .mobile-html-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Dialoguri interactive/statice/video - full width pe mobil */
    /* EXCEPTION:.gama-digital-dialog has its own styles defined above */
    .ui-dialog:not(.game-digital-dialog),
    #gameDialog {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
    
    /* Digital dialogue on mobile - occupy the entire screen with small edge */
    /* NOTE: Left / right / width here are overwritten by the block "without frame"
       de la @media (max-width: 768px) (vezi ~linia 3260), care duce dialogul
       To the edge of the screen. I'll stay as fallback if the threshold rises. */
    .game-digital-dialog {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        right: 5px !important;
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    /* The icons of games on mobile - no white background, inline */
    .single-page-icons,
    .mobile-html-wrapper .single-page-icons {
        position: relative !important;
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        background: transparent !important;
        padding: 5px !important;
        margin-top: 10px !important;
        box-shadow: none !important;
        z-index: 100 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    
    /* Mobile navigation buttons under 640px - down in the page as on the desktop */
    /* DO NOT change position - leave default behavior in the application */
}

/* ==========================================================================
   Modern Video Captions / Subtitles Styling (WCAG 1.2.2 Compliant)
   ========================================================================== */
video::cue {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    white-space: pre-line !important;
}

@media (max-width: 768px) {
    video::cue {
        font-size: 13px !important;
        padding: 2px 6px !important;
    }
}