#login-screen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--primary-blue); z-index: 2000;
            display: flex; justify-content: center; align-items: center;
            flex-direction: column;
        }
        .login-card {
            background: white; padding: 40px; border-radius: 30px; width: 400px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2); text-align: center;
        }
        .login-logo { font-size: 32px; font-weight: bold; font-style: italic; color: var(--primary-blue); margin-bottom: 10px; }
        .login-input { width: 100%; padding: 14px; border: 2px solid #E5E7EB; border-radius: 12px; margin-top: 20px; font-size: 16px; outline: none; }
        .login-input:focus { border-color: var(--primary-blue); }
        .login-btn { 
            width: 100%; padding: 14px; background: var(--primary-blue); color: white; border: none; 
            border-radius: 12px; margin-top: 20px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; 
        }
        .login-btn:hover { background: var(--primary-dark); }
        .hint { margin-top: 20px; font-size: 12px; color: #888; background: #f9f9f9; padding: 10px; border-radius: 8px; }

        html,
        body,
        .sidebar-scroll,
        .main-content {
            scrollbar-width: auto;
            scrollbar-color: rgba(15, 104, 248, 0.45) rgba(15, 23, 42, 0.08);
        }

        html::-webkit-scrollbar,
        body::-webkit-scrollbar,
        .sidebar-scroll::-webkit-scrollbar,
        .main-content::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        html::-webkit-scrollbar-track,
        body::-webkit-scrollbar-track,
        .sidebar-scroll::-webkit-scrollbar-track,
        .main-content::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.08);
            border-radius: 999px;
        }

        html::-webkit-scrollbar-thumb,
        body::-webkit-scrollbar-thumb,
        .sidebar-scroll::-webkit-scrollbar-thumb,
        .main-content::-webkit-scrollbar-thumb {
            background: rgba(15, 104, 248, 0.45);
            border-radius: 999px;
            border: 3px solid rgba(15, 23, 42, 0.08);
        }

        html::-webkit-scrollbar-corner,
        body::-webkit-scrollbar-corner,
        *::-webkit-scrollbar-corner,
        html::-webkit-resizer,
        body::-webkit-resizer,
        *::-webkit-resizer {
            background: transparent !important;
            display: none !important;
        }

        *::-webkit-scrollbar-button,
        *::-webkit-scrollbar-button:single-button {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
            background-image: none !important;
            border: 0 !important;
            box-shadow: none !important;
            opacity: 0 !important;
            -webkit-appearance: none !important;
        }

        *::-webkit-scrollbar-button:vertical:start:decrement,
        *::-webkit-scrollbar-button:vertical:end:increment,
        *::-webkit-scrollbar-button:horizontal:start:decrement,
        *::-webkit-scrollbar-button:horizontal:end:increment,
        *::-webkit-scrollbar-button:start:decrement,
        *::-webkit-scrollbar-button:end:increment,
        *::-webkit-scrollbar-button:increment,
        *::-webkit-scrollbar-button:decrement {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
            background-image: none !important;
            border: 0 !important;
            box-shadow: none !important;
            opacity: 0 !important;
            -webkit-appearance: none !important;
        }

        /* Mobile-only UI elements (phone layout) */
        #mobile-topbar,
        #mobile-day-strip,
        #mobile-bottom-nav,
        #mobile-sidebar-backdrop {
            display: none;
        }

        .sidebar {
            width: 235px; background-color: var(--sidebar-bg); min-height: 100vh; height: auto; display: flex; flex-direction: column;
            padding: 12px 10px 0; border-radius: 0;
            overflow: hidden; flex-shrink: 0; z-index: 10020; /* raised to appear above fixed profile/footer */
        }
        @supports (height: 100dvh) {
            .sidebar { min-height: 100dvh; height: auto; }
        }
        .sidebar-scroll {
            overflow-y: auto;
            overflow-x: hidden;
            flex: 1 1 auto;
            min-height: 0;
                /* Ensure enough bottom padding so the last nav items can be scrolled
                    above the fixed user profile. Increased to accommodate the profile's
                    height and comfortable spacing. */
                padding-bottom: 12px;
            margin-right: -12px;
            padding-right: 12px;
        }
        /* Top control oval and collapsed sidebar behaviour */
        .sidebar .logo-area .top-controls-oval { background: var(--light-blue-bg); border-radius: 999px; padding: 6px; display:flex; gap:4px; align-items:center; margin-left:32px !important; }
        .oval-btn { background: transparent; border: none; cursor: pointer; width:38px; height:34px; display:flex; align-items:center; justify-content:center; border-radius: 999px; color: var(--primary-blue); transition: background 0.15s, transform 0.08s; }
        .oval-btn:hover { background: rgba(28,119,255,0.08); transform: translateY(-1px); }
        .oval-btn i { font-size:18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
        /* bigger icons for sidebar controls */
        #fullscreen-btn i, #pin-toggle i { font-size:18px; }
        /* vertical separator between control buttons */
        .control-divider { width:1px; height:20px; background:#ccc; margin:0 6px; }

        /* Pin icon crossed (for 'unpinned' state) */
        .pin-icon { position: relative; display: inline-block; }
        .pin-icon::before {
            content: '';
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            width: 14px; height: 2px; border-radius: 2px;
            background: currentColor;
            display: none;
            pointer-events: none;
        }
        /* Show the slash when the button indicates unpinned (aria-pressed="false") */
        .oval-btn[aria-pressed="false"] .pin-icon::before { display: block; }
        /* Make all buttons visually oval */
        button, .action-btn { border-radius: 999px !important; }

        /*
         * Exception: buttons inside the Journals area (and the gradebook view)
         * should keep the original/compact corners. Override the global
         * rounded rule for those containers.
         */
        /* Keep specific journal/gradebook controls compact, but avoid targeting all buttons
           (so scale/zoom buttons like `.scale-option` keep their shape). */
        #journals .action-btn,
        #journals .btn,
        #journals .gb-subbar > button,
        #journals .journal-link,
        #journals .journal-tab-button,
        #journals .journal-controls button,
        #gradebook-view .action-btn,
        #gradebook-view .btn,
        #gradebook-view .nav-zoom-box .nav-btn {
            border-radius: 6px !important;
        }

        /* Journal tabs and their sub-tabs should have rounded square style (override global oval) */
        .journal-tab, .journal-sub-tab { border-radius: 12px !important; }

        .journal-admin-btn { border-radius: 14px !important; }

        #class-admin-panel { width: 100%; position: relative; padding: 12px 0; }
        #class-admin-panel .class-admin-card {
            background: linear-gradient(180deg, #2B9BFF 0%, #1C77FF 100%) !important;
            border-radius: 20px !important;
            padding: 30px 30px !important;
            box-shadow: 0 10px 30px rgba(2, 6, 23, 0.1) !important;
            display: grid !important;
            grid-template-columns: 240px 1fr !important;
            align-items: end !important;
            gap: 20px !important;
            min-height: 180px !important;
            position: relative !important;
            border: none !important;
        }
        #class-admin-panel .class-admin-kicker {
            position: absolute !important;
            top: 30px !important;
            left: 30px !important;
            font-size: 13px !important;
            color: rgba(255,255,255,0.8) !important;
            font-weight: 600 !important;
            margin: 0 !important;
        }
        #class-admin-panel .class-admin-left-side {
            display: flex !important;
            flex-direction: column !important;
            gap: 15px !important;
            align-items: flex-start !important;
            padding-bottom: 5px !important;
            min-width: 0 !important;
        }
        #class-admin-panel .class-admin-bubble {
              height: 26px !important;
              padding: 0 10px !important;
              border-radius: 999px !important;
              display: inline-flex !important;
              align-items: center !important;
              justify-content: center !important;
              font-weight: 900 !important;
              font-size: 12px !important;
              width: fit-content !important;
              max-width: 160px !important;
              white-space: nowrap !important;
              overflow: hidden !important;
              text-overflow: ellipsis !important;
              border: none !important;
              box-shadow: none !important;
              margin-top: 6px !important;
              margin-bottom: 0 !important;
        }
        #class-admin-panel .class-admin-title {
            font-size: 20px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            line-height: 1 !important;
            margin: 0 !important;
            max-width: none !important;
        }

        .gb-admin-journal-subtitle {
            margin: 4px 0 10px 0;
            padding: 0 8px;
            font-size: 20px;
            font-weight: 800;
            color: #ffffff;
            line-height: 1.15;
        }
        #class-admin-panel .class-admin-actions-scroll {
            display: flex !important;
            gap: 15px !important;
            justify-content: flex-start !important;
            overflow-x: visible !important;
            padding: 0 !important;
            align-items: end !important;
        }
        #class-admin-panel .journal-admin-btn {
            width: 140px !important;
            min-width: 140px !important;
            height: 120px !important;
            background: #ffffff !important;
            border-radius: 20px !important;
            padding: 15px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            align-items: flex-start !important;
            border: none !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
            cursor: pointer !important;
            transition: transform 0.2s !important;
        }
        #class-admin-panel .journal-admin-btn:hover {
            transform: translateY(-5px) !important;
        }
        #class-admin-panel .class-admin-icon-box {
            width: 36px !important;
            height: 36px !important;
            border-radius: 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        #class-admin-panel .class-admin-icon-box i {
            font-size: 18px !important;
        }
        #class-admin-panel .class-admin-btn-label {
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #111 !important;
            line-height: 1.2 !important;
            text-align: left !important;
        }

        @media (max-width: 820px) {
            #class-admin-panel .class-admin-main-row { flex-direction: column !important; }
            #class-admin-panel .class-admin-actions-scroll { width: 100% !important; }
        }

        /* Ensure comma in lesson-day header is white and spaced */
        .lesson-day-header-flex .header-comma { color: #ffffff; }
        /* General rule so header comma is white wherever used */
        .header-comma { color: #ffffff; }

        /* Collapsed sidebar: icons-only */
        .sidebar { transition: width 0.25s ease; width: 235px; }
        .sidebar.collapsed { width: 64px; }
        .sidebar.collapsed .logo img { width:36px; height:36px; }
        .sidebar.collapsed .nav-item { font-size: 0; padding-left: 0; padding-right: 0; margin-left: 0; width: calc(64px - 0px); justify-content: center; align-self: unset; }
        .sidebar.collapsed .nav-item i { margin-right: 0; font-size: 18px; }
        .sidebar.collapsed .nav-item .nav-icon { margin-right: 0; width: 20px; height: 20px; }
        .sidebar.collapsed .nav-item .arrow { display: none; }
        .sidebar.collapsed .submenu { display: none !important; }
        .sidebar.collapsed .user-profile { left: 8px; width: calc(64px - 28px); overflow: hidden; }
        .sidebar.collapsed:hover { width: 235px; }
        .sidebar.collapsed:hover .nav-item { font-size: 12.5px; }
        .logo-area { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 0 8px; }
        /* shift logo slightly left to align better */
        .logo { margin-left: 0px; }
        .logo { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; background: transparent; border-radius: 0; /* allow left shift */ }
        .logo img { display: block; width: 61px; height: 61px; object-fit: contain; }
        
        .year-display { padding: 10px 16px; background: #f9fafb; border-radius: 12px; margin-bottom: 15px; font-size: 13px; font-weight: 600; color: var(--text-dark); display: flex; justify-content: space-between; align-items: center; border: 1px solid #eee;}

        /* School year button: compact size */
        .school-year-btn {
            padding: 5px 10px; border-radius: 10px !important; background: var(--primary-blue); color: #ffffff; border: 2px solid #ffffff; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
            height: 40px; /* ensure consistent height */
            min-height: 40px;
            box-sizing: border-box;
        }
        .school-year-btn .school-year-icon { color: #ffffff; font-size: 12px; }

          .nav-section { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
          /* Apply spacing only between top-level nav items (not between parent and submenu items) */
          .nav-section > .nav-item { margin-top: 10px; }
          .nav-section > .nav-item:first-child { margin-top: 0; }

          body.admin-role .sidebar-scroll .nav-section > .nav-item { margin-top: 12px; }
          body.admin-role .sidebar-scroll .nav-section > .nav-item:first-child { margin-top: 0; }
        
        .nav-item { 
            display: flex; align-items: baseline; padding: 10px 12px; margin-left: 10px; margin-right: 10px; border-radius: 12px; 
            color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: 13.5px; 
            transition: background-color 0.2s, color 0.2s; cursor: pointer; user-select: none;
            box-sizing: border-box;
            width: calc(100% - 20px);
            align-self: flex-start;
        }

        .sidebar .nav-item { font-size: 12.5px; align-items: center; }
        .nav-item:hover { background-color: #f3f4f6; }
        .nav-item.active { background-color: var(--light-blue-bg); color: var(--primary-blue); }
        .nav-item .nav-icon { align-self: center; }
        .nav-item i { align-self: center; }
        .nav-item i { width: 20px; margin-right: 12px; text-align: center; font-size: 18px; }
        .nav-item .nav-icon { width: 18px; height: 18px; margin-right: 12px; flex: 0 0 auto; color: currentColor; }
        .sidebar .nav-item i { line-height: 1; }
        .sidebar .nav-item .nav-icon { display: block; }
        .nav-item .nav-icon * { fill: currentColor; }
        /* Arrow styling is defined later in the stylesheet (triangle indicator). */
        
        .submenu {
            padding-left: 0;
            flex-direction: column;
            gap: 0;
            margin-top: 0;
            box-sizing: border-box;
            width: calc(100% - 20px);
            margin-left: 10px;
            margin-right: 10px;
            align-self: flex-start;
            display: flex;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.32s cubic-bezier(.2,.9,.3,1), opacity 0.18s ease;
        }
        .submenu.open {
            max-height: 800px; /* large enough to show contents; JS toggle will add/remove .open */
            opacity: 1;
        }
        /* When a submenu is opened immediately after a parent, remove any top padding so submenu sits flush */
        .nav-item + .submenu.open { margin-top: 0; padding-top: 0; }
        .submenu .nav-item { font-size: 13.5px; padding: 8px 16px; margin-left: 10px; margin-right: 10px; color: var(--text-grey); width: calc(100% - 10px); align-self: flex-start; }
        .sidebar .submenu .nav-item { font-size: 12.5px; }
        .submenu .nav-item:hover { color: var(--text-dark); }

        /* Sidebar divider: use an <hr> for semantic separation and a strong, solid line
           Render-proof rules (high z-index, layer promotion, full-width within padding)
           to avoid the previous zoom-dependent visibility bug. */
        .sidebar-divider {
            display: block;
            height: 0;
            border: none;
            border-top: 1px solid rgba(15, 23, 42, 0.12);
            background: transparent;
            /* keep a bit of right margin so the divider doesn't get visually hidden
               behind overlay scrollbars; promote to its own layer to avoid hairline
               rendering glitches when scrolling */
            margin: 12px -16px;
            width: calc(100% + 32px);
            position: relative;
            z-index: 6;
            opacity: 1;
            border-radius: 1px;
            transform: translateZ(0);
            flex: 0 0 auto;
        }

        /* Reduce the gap between "Налаштування" and the following divider only */
        .sidebar-scroll > nav.nav-section + .sidebar-spacer + .sidebar-divider {
            margin-top: 4px;
        }

        body.teacher-role .sidebar-scroll > nav.nav-section + .sidebar-spacer + .sidebar-divider {
            margin-top: 2px;
        }

        /* Slightly stronger appearance on hover/focus contexts to aid visibility */
        .sidebar-divider:focus, .sidebar-divider:hover {
            border-top-color: rgba(15, 23, 42, 0.28);
        }
        .spacer { flex-grow: 1; }
        /* Small spacer used to create visual gaps between groups */
          /* Make sidebar spacer visible by giving it a small fixed height so
              there is a modest gap between navigation groups and dividers. */
          /* Use equal spacer size so top and bottom gaps are identical */
          .sidebar-spacer { height: 4px; flex: 0 0 auto; }

        body.admin-role .sidebar-scroll > nav.nav-section:first-of-type + .sidebar-spacer {
            height: 14px;
        }
        body.admin-role .sidebar-scroll > nav.nav-section:first-of-type + .sidebar-spacer + .sidebar-divider + .sidebar-spacer {
            height: 14px;
        }

        body.admin-role .sidebar-scroll > nav.nav-section:nth-of-type(2) + .sidebar-spacer {
            height: 10px;
        }
        .user-profile { padding: 12px 16px; margin-top: auto; border-top: none; position: relative; bottom: auto; left: auto; width: 100%; background: var(--sidebar-bg); z-index: 9999; box-shadow: none; box-sizing: border-box; flex: 0 0 auto; }
        .sidebar.collapsed .user-profile { width: 64px; padding: 12px; }
        .avatar { width: 42px; height: 42px; background-color: var(--light-blue-bg); color: var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px;}
        .user-profile .user-name {
            color: #111;
            font-weight: 700;
            font-size: 13.5px;
            margin-top: 3px;
            line-height: 1.15;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
        /* Hide legacy role element if present */
        .user-profile .user-role { display: none !important; }
        /* New inner rounded white card */
        .user-card-inner { background: #ffffff; border-radius: 16px; border: 1px solid #e6e6e6; padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 6px; margin: 0 -20px; box-sizing: border-box; justify-content: center; min-height: 62px; }
        .sidebar.collapsed .user-card-inner { margin: 0 -14px; padding: 4px 8px 12px; min-height: 62px; }
        .user-card-top { display: flex; align-items: center; gap: 8px; }
        .user-card-top .avatar { flex: 0 0 auto; }
        .user-card-top .user-name { flex: 1 1 auto; }
        .user-logout-full { width: 100%; background: #ffffff; color: #111; border: 1px solid #e6e6e6; padding: 10px; border-radius: 8px; font-weight: 700; text-align: center; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
        .user-logout-full i { color: #111; }
        .logout-left { color: #111 !important; }
        .user-profile .nav-item.user-logout { display: none; }

        .main-content { flex-grow: 1; padding: 20px 36px; color: white; overflow-y: auto; position: relative; display: none; }
        
        .page-section { display: none; animation: fadeIn 0.36s cubic-bezier(.2,.9,.3,1); }
        .page-section.active { display: block; }
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(8px) scale(0.995); }
            60% { opacity: 0.98; transform: translateY(-4px) scale(1.002); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Move header left to align with page edge (compensate main-content padding) */
        .header { margin-left: -15px; margin-top: -4px; }
        .header h1 { font-size: 28px; font-weight: 600; margin-bottom: 4px; line-height: 1.15; }
        .header p { font-size: 14px; opacity: 0.8; margin-bottom: 30px; }
        .header.reduced-header #header-top { display: flex; align-items: center; gap: 6px; }
        .header.reduced-header #header-bottom { margin-bottom: 0 !important; }
        .header .header-page-icon,
        .header.reduced-header .header-page-icon { display: inline-flex; align-items: center; justify-content: center; color: #e5e7eb; font-size: inherit; }
        .header .header-page-icon svg,
        .header .header-page-icon i,
        .header.reduced-header .header-page-icon svg,
        .header.reduced-header .header-page-icon i { height: 1em; width: auto; color: inherit; font-size: 1em; line-height: 1; vertical-align: -0.08em; }
        /* Keep breadcrumb separators visually unchanged */
        .header.reduced-header .header-crumb-sep { margin: 0 4px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .section-title { font-size: 24px; font-weight: 600; }
        /* Hide per-page subtitles because the header shows the current page */
        .section-title { display: none; }

        /* Top header typography tweaks (per request): bottom line smaller, top line slightly bigger */
        .header #header-top { font-size: 27px; line-height: 1.1; }
        .header #header-bottom { font-size: 11px; opacity: 1; color: #ffffff; }

        .header #header-top { color: #ffffff; }

        /* Raise specific cloned icons in the header to better align with text */
        .header .header-page-icon .fa-users,
        .header .header-page-icon .fa-chart-simple,
        .header .header-page-icon .fa-gear,
        .header .header-page-icon .fa-headset {
            display: inline-block;
            transform: translateY(-0.15em);
        }

        #header-top { max-width: 100%; font-size: 20px; line-height: 1.2; }
        #header-top > span { display: inline-block; max-width: 100%; }

        /* Reduced header size for non-home pages (1.75× smaller).
           Target by ID for high specificity to override all other rules. */
        .header.reduced-header #header-top {
            font-size: 15.43px !important;
            line-height: 1.1 !important;
        }
        .header.reduced-header #header-bottom {
            font-size: 6.29px !important;
            line-height: 1.0 !important;
        }
        
        button,
        .btn,
        .btn-primary,
        .action-btn,
        .nav-btn {
            box-shadow: 0 0 0 1px rgba(255,255,255,0.35), inset 0 0 10px rgba(255,255,255,0.10);
            transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
        }
        #journals button,
        #journals .btn,
        #journals .btn-primary,
        #journals .action-btn,
        #journals .nav-btn,
        #schedule button,
        #schedule .btn,
        #schedule .btn-primary,
        #schedule .action-btn,
        #schedule .nav-btn {
            box-shadow: none !important;
        }
        button:hover,
        .btn:hover,
        .btn-primary:hover,
        .action-btn:hover,
        .nav-btn:hover {
            box-shadow: 0 0 0 1px rgba(255,255,255,0.55), 0 0 18px rgba(255,255,255,0.22), inset 0 0 12px rgba(255,255,255,0.14);
        }
        #journals button:hover,
        #journals .btn:hover,
        #journals .btn-primary:hover,
        #journals .action-btn:hover,
        #journals .nav-btn:hover,
        #schedule button:hover,
        #schedule .btn:hover,
        #schedule .btn-primary:hover,
        #schedule .action-btn:hover,
        #schedule .nav-btn:hover {
            box-shadow: none !important;
        }
        button:focus-visible,
        .btn:focus-visible,
        .btn-primary:focus-visible,
        .action-btn:focus-visible,
        .nav-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 0 0 4px rgba(255,255,255,0.20), 0 0 18px rgba(255,255,255,0.22), inset 0 0 12px rgba(255,255,255,0.14);
        }
        #journals button:focus-visible,
        #journals .btn:focus-visible,
        #journals .btn-primary:focus-visible,
        #journals .action-btn:focus-visible,
        #journals .nav-btn:focus-visible,
        #schedule button:focus-visible,
        #schedule .btn:focus-visible,
        #schedule .btn-primary:focus-visible,
        #schedule .action-btn:focus-visible,
        #schedule .nav-btn:focus-visible {
            box-shadow: none !important;
        }

        .btn-primary {
            background-color: var(--primary-blue); 
            color: white;
            border: none; padding: 12px 24px;
            border-radius: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;
            transition: transform 0.1s, background-color 0.2s;
        }
        .btn-primary:hover { background-color: var(--primary-dark); }
        .btn-primary:active { transform: scale(0.98); }
        
        .card { background-color: var(--card-glass); border-radius: var(--border-radius); padding: 24px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.1); }

        /* Global thin rounded light-blue (блакитні) scrollbars */
        * {
            scrollbar-width: thin; /* Firefox */
            /* thumb, track */
            scrollbar-color: #93C5FD rgba(0,0,0,0.04);
        }
        /* WebKit browsers */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: rgba(147,197,253,0.9); border-radius: 10px; border: 2px solid rgba(255,255,255,0.6); background-clip: padding-box; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(147,197,253,1); }
        /* Ensure key scrollable elements use the same light-blue theme */
        .sidebar, .main-content, .conversations-list, .chat-messages, .modal-window, .storage-stats-grid, .home-lesson-item { scrollbar-color: #93C5FD rgba(0,0,0,0.04); }
        .white-card { background: white; color: var(--text-dark); border-radius: 16px; overflow: hidden; padding: 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

        /* Home widgets and journal bubbles */
        .home-side-widgets { display:flex; flex-direction:column; gap:12px; width:280px; }
        .home-widget { background: var(--light-blue-bg); border-radius: 14px; padding: 16px; color: #0f172a; min-height: 34px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); }
        .home-widget .widget-title { font-size:13px; font-weight:700; color: #0f172a; margin-bottom:8px; }
        .home-class-name { font-size:20px; font-weight:800; color:#0f172a; }
        .home-class-meta { color:#475569; margin-top:8px; font-size:13px; }

        /* Home page (blue) layout */
        #home .home-shell { display:flex; gap: 24px; }
        #home .home-main { flex: 1; min-width: 0; }
        #home .home-toprow { display:flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        #home .home-title { font-size: 24px; font-weight: 600; color: white; margin: 0; margin-left: -12px; }
        #home .home-full-schedule-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.14);
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.20);
            background: rgba(255,255,255,0.06);
            color: white;
            cursor: pointer;
            font-weight: 700;
            transition: 0.15s;
            padding: 12px 18px;
            font-size: 16px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-left: auto;
            margin-right: 0;
            transform: translateX(0);
        }
        #home .home-full-schedule-btn:hover { background: rgba(255,255,255,0.10); }

        #home .home-schedule { display:flex; flex-direction: column; gap: 16px; min-height: 420px; }

        #home .home-right {
            width: clamp(270px, 24vw, 370px);
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-left: auto;
            margin-right: -24px;
            min-width: 0;
            border-left: 0;
        }

        #home .home-right-frame {
            border-radius: 18px;
            padding: 14px;
            background: linear-gradient(180deg, rgba(28,119,255,0.92) 0%, rgba(28,119,255,0.78) 100%);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 18px 40px rgba(2,6,23,0.14);
            backdrop-filter: none;
        }

        #home .home-widget-title {
            font-size: 14px;
            font-weight: 800;
            color: rgba(255,255,255,0.92);
            margin: 0;
            text-transform: none;
            letter-spacing: 0;
        }

        #home .home-empty {
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 14px;
            height: 420px;
            color: rgba(255,255,255,0.92);
            font-weight: 700;
        }
        #home .home-empty-icon {
            width: 78px;
            height: 78px;
            border-radius: 18px;
            display:flex;
            align-items:center;
            justify-content:center;
            background: rgba(255,255,255,0.18);
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: 0 18px 50px rgba(255,255,255,0.14), 0 18px 40px rgba(2,6,23,0.22);
            backdrop-filter: blur(10px);
        }
        #home .home-empty-icon i { font-size: 34px; color: rgba(255,255,255,0.95); }
        #home .home-empty-text { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.98); }
        #home .home-empty-img {
            width: 86px;
            height: 86px;
            object-fit: contain;
            filter: drop-shadow(0 18px 40px rgba(2,6,23,0.22));
        }

        .home-journals-card { background: linear-gradient(90deg,#EFF6FF,#F0F9FF); border-radius: 14px; padding: 12px; min-height: 120px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); border:1px solid rgba(28,119,255,0.06); }
        .home-journals-list { display:flex; flex-direction:column; gap:8px; }
        /* New style: elongated blue journal button with left bubble (class) */
        .home-journal-btn { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:8px !important; background: #5c9bfc; color: white; font-weight:800; cursor:pointer; box-shadow: none; border: 1px solid rgba(0,0,0,0.06); width: 100%; }
        .home-journal-btn:hover { background: #4f8ff7; transform: translateY(-1px); }
        .home-journal-badge { background: #FFB6C1 !important; color: #000 !important; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:800; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
        /* Slightly round corners of the first 5 journals in the My Journals list */
        #home-my-journals > .home-journal-btn:nth-child(-n+5),
        #home-my-journals > *:nth-child(-n+5) {
            border-radius: 18px !important;
            overflow: hidden;
        }
        .home-journal-subject { font-size:13.5px; line-height:1; color: rgba(255,255,255,0.92); font-weight:700; text-align:left; flex:1; }
        .home-all-journals { margin-top:10px; display:flex; justify-content:center; }
        .home-all-journals .btn { padding:10px 14px; border-radius:999px !important; background: transparent; color:white; font-weight:550; border: 1px solid rgba(255,255,255,0.55); cursor:pointer; width:100%; text-align:center; font-size:16px; height:44px; display:inline-flex; align-items:center; justify-content:center; }
        .home-all-journals .btn:hover { background: rgba(255,255,255,0.10); }

        /* Frame that contains both My Class and My Journals */
        .home-journals-frame { background: transparent; border-radius: 14px; padding: 12px; color: inherit; border: none; }
        .home-my-class-card { background: white; color: #0f172a; border-radius: 12px; padding: 18px; min-height: 108px; transform-origin: top left; position: relative; }
        .home-class-arrow {
            position: absolute;
            right: 12px;
            bottom: 12px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #ffffff;
            border: 3px solid var(--primary-blue);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-blue);
            cursor: pointer;
            box-shadow: 0 5px 12px rgba(2,6,23,0.06);
            transition: transform 0.12s ease, box-shadow 0.12s ease;
            padding: 0;
        }
        .home-class-arrow i { font-size: 12px; color: var(--primary-blue); }
        .home-class-arrow-icon { width: 14px; height: 14px; display: block; }
        .home-class-arrow:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2,6,23,0.10); }

        /* Ensure the class text uses the available inner width, without expanding the card.
           Leave space for the round arrow button by subtracting its width. */
        .home-my-class-card .home-my-class-text {
            display: block;
            width: calc(100% - 60px); /* reserve ~60px for the arrow and padding */
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #home-my-class {
            font-size: 17px !important;
            font-weight: 750 !important;
        }

        /* Ensure badges inside the Home "Мої предмети" widget use black text */
        #home-my-journals .journal-class-badge { color: #000 !important; }

        /* Dark-blue rounded widget container for My Class / My Journals */
        .home-widget-dark { background: transparent; border-radius: 0; padding: 0; color: white; box-shadow: none; border: none; backdrop-filter: none; }
        .home-widget-dark .home-my-class-text { font-size: 18px; font-weight: 800; color: white; text-align: left; }
        
        .data-table { width: 100%; border-collapse: collapse; }
        /* Sticky columns: CSS-only sticky layout to replace JS left-offset handling */
        .gb-sticky-col {
            width: 20px;
            min-width: 20px;
            max-width: 20px;
            position: static;
            left: 0;
            z-index: 50;
        }
        .gb-sticky-col-2 {
            /* student name column: reduced default width to improve layout */
            width: 200px;
            min-width: 160px; /* allow some flex when space is tight */
            max-width: 320px;
            position: static;
            left: auto;
            z-index: 49;
        }
        /* Sticky average column placed after index + name columns. Adjust left if you change widths above. */
        .gb-sticky-avg {
            position: static;
            left: auto;
            z-index: 48;
            min-width: 60px;
            max-width: 160px;
            width: 80px;
        }
        /* Ensure inner wrappers respect the fixed width */
        th.gb-sticky-col-2 > div, td.gb-sticky-col-2 > div {
            padding-left: 10px;
            padding-right: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .data-table th { text-align: left; padding: 16px; background: #f9fafb; color: #6b7280; font-size: 12px; text-transform: uppercase; font-weight: 600; }
        .data-table td { padding: 16px; border-bottom: 1px solid #e5e7eb; font-size: 14px; vertical-align: middle; }
        .role-badge { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
        .role-admin { background: #fee2e2; color: #991b1b; }
        .role-teacher { background: #dbeafe; color: #1e40af; }
        .status-active { background: var(--success-bg); color: var(--success-green); }

        .teachers-table-shell { margin-left: 0; margin-right: 0; }
        #learning-rooms .white-card { margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); }
        #learning-rooms .teachers-table-shell { margin-left: 0; margin-right: 0; }
        #learning-rooms .teachers-card-head { padding: 10px 12px 8px 12px !important; }
        #learning-rooms .teachers-search { max-width: 420px !important; }
        #learning-rooms .data-table th { padding: 12px 12px; font-size: 11px; }
        #learning-rooms .data-table td { padding: 12px 12px; font-size: 13px; }

        .teachers-card {
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 18px 40px rgba(2,6,23,0.10);
            border: 1px solid rgba(255,255,255,0.14);
            display: flex;
            flex-direction: column;
            height: calc(100vh - 100px);
            min-height: 420px;
        }
        .teachers-card-head {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            background: linear-gradient(180deg, rgba(28,119,255,0.92) 0%, rgba(28,119,255,0.78) 100%);
            border-bottom: 1px solid rgba(255,255,255,0.18);
            color: #fff;
        }
        .teachers-card-title { font-size: 18px; font-weight: 900; }
        .teachers-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .teachers-toolbar .tbtn {
            height: 32px;
            padding: 0 10px;
            border-radius: 9px;
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.10);
            color: #fff;
            font-weight: 800;
            font-size: 13px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .teachers-toolbar .tbtn:hover { background: rgba(255,255,255,0.16); }
        .teachers-toolbar .tselect {
            height: 32px;
            border-radius: 9px;
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.10);
            color: #fff;
            font-weight: 800;
            font-size: 13px;
            padding: 0 8px;
            outline: none;
        }
        .teachers-toolbar .tselect option { color: #111; }
        .teachers-search {
            height: 32px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 10px;
            border-radius: 9px;
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.10);
            color: #fff;
        }
        .teachers-search input {
            border: none;
            outline: none;
            background: transparent;
            color: #fff;
            font-weight: 700;
            font-size: 13px;
            width: 210px;
            max-width: 55vw;
        }
        .teachers-search input::placeholder { color: rgba(255,255,255,0.82); }
        .teachers-table-wrap {
            background: #fff;
            color: #0f172a;
            font-weight: 800;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }
        .teachers-table-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }
        .teachers-table-wrap .data-table th { background: #ffffff; color: #6b7280; border-bottom: 1px solid #e5e7eb; font-weight: 900; padding: 10px; font-size: 11px; }
        .teachers-table-wrap .data-table td { background: #ffffff; padding: 10px; font-size: 12px; font-weight: 800; }
        .teachers-table-wrap .data-table tr:hover td { background: #f8fbff; }
        .teachers-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border-top: 1px solid #e5e7eb;
            color: #475569;
            font-weight: 800;
            font-size: 11px;
        }
        .teachers-pager { display: flex; align-items: center; gap: 8px; }
        .teachers-pager .pbtn {
            width: 30px;
            height: 30px;
            border-radius: 9px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #0f172a;
            font-weight: 900;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .teachers-pager .pbtn.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
        .teachers-pager .pbtn:disabled { opacity: 0.45; cursor: not-allowed; }
        .teachers-perpage {
            height: 30px;
            border-radius: 9px;
            border: 1px solid #e5e7eb;
            background: #f8fafc;
            color: #0f172a;
            font-weight: 800;
            font-size: 11px;
            padding: 0 8px;
            outline: none;
        }

        #teachers .section-header { margin-bottom: 10px; }

        .action-btn { background: none; border: none; cursor: pointer; color: var(--text-grey); padding: 5px; font-size: 16px; transition: color 0.2s; }
        .action-btn:hover { color: var(--primary-blue); }
        .action-btn.delete:hover { color: var(--danger-red); }
        .logout-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--text-grey); padding: 6px 8px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }
        .logout-btn i { font-size: 14px; }
        .logout-btn:hover { color: var(--primary-blue); background: rgba(28,119,255,0.06); }

        .journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
        /* Slight right gutter on the journals selection view so cards don't touch page edge */
        #journals-list-view { padding-right: 62px; }
        @media (min-width: 1100px) {
            .journal-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
        }
        .teachers-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 16px; }
          .journal-card { 
              background: white; border-radius: 18px; padding: 16px; color: var(--text-dark); 
              display: flex; flex-direction: column; justify-content: space-between; min-height: 140px; 
              cursor: pointer; position: relative;
          }
        body:not(.admin-role) .journal-card .journal-subject { margin-top: auto; }
        /* For administrative roles, also push journal title to the bottom of the card */
        body.admin-role .journal-card .journal-subject { margin-top: auto; }
        .journal-top { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
        .journal-card:hover { transform: none; box-shadow: none; }
        .journal-subject { font-size: 16.7px; font-weight: 590; margin-bottom: 4px; color: var(--primary-blue); margin-left: 0; }
        .journal-card.hide-teacher-field .journal-teacher { display: none; }
        .journal-card.hide-teacher-field .journal-bottom { flex: 1 1 auto; width: 100%; }
        .journal-card.hide-teacher-field .journal-bottom .journal-subject { margin-top: auto; }
        .subst-wrap {
            grid-column: 1 / -1;
            background: linear-gradient(180deg, rgba(28,119,255,0.92) 0%, rgba(28,119,255,0.78) 100%);
            border-radius: 18px;
            padding: 14px;
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 18px 40px rgba(2,6,23,0.10);
        }
        .subst-strip-title {
            font-weight: 900;
            color: rgba(255,255,255,0.92);
            margin: 2px 0 10px;
        }
        .subst-strip {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(220px, 1fr);
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 8px;
            scroll-snap-type: x mandatory;
        }
        .subst-strip::-webkit-scrollbar { height: 8px; }
        .subst-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
        .subst-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 999px; }
        .journal-card.subst-card {
            background: rgba(255,255,255,0.98);
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 10px 24px rgba(16,24,40,0.08);
            scroll-snap-align: start;
        }
        .journal-card.subst-card:hover {
            box-shadow: 0 14px 34px rgba(16,24,40,0.12);
        }
        .journal-class-badge { 
            display: inline-flex; align-items: center; justify-content: center;
            background: #fee2e2; color: #991b1b;
            padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; margin-bottom: 12px; min-width:0; text-align:center;
            box-shadow: 0 6px 14px rgba(16,24,40,0.04);
            border: 1px solid rgba(0,0,0,0.04);
            margin-left: 0;
            max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .journal-badges-row { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
        .journal-group-badge {
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(56, 189, 248, 0.18);
            color: #111;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 750;
            margin-bottom: 12px;
            min-width: 0;
            text-align: center;
            border: 1px solid rgba(2, 132, 199, 0.25);
            box-shadow: 0 6px 14px rgba(16,24,40,0.03);
            max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .journal-teacher { font-size: 11.5px; color: #666; display: flex; align-items: center; gap: 8px; font-weight: 600; margin-left: 0; margin-top: auto; }

        /* For high-level admin roles: keep badges at top, push subject and teacher to bottom of the card */
        body.role-superadmin .journal-card,
        body.role-platform-admin .journal-card,
        body.role-deputy .journal-card,
        body.role-director .journal-card {
            position: relative;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-end !important;
        }
        /* Keep badges visually pinned to the top inside the card */
        body.role-superadmin .journal-card .journal-badges-row,
        body.role-platform-admin .journal-card .journal-badges-row,
        body.role-deputy .journal-card .journal-badges-row,
        body.role-director .journal-card .journal-badges-row {
            position: absolute !important;
            top: 12px !important;
            left: 16px !important;
            right: 16px !important;
            display: flex !important;
            gap: 8px !important;
        }
        /* Add top padding on the card so absolute badges don't overlap content */
        body.role-superadmin .journal-card,
        body.role-platform-admin .journal-card,
        body.role-deputy .journal-card,
        body.role-director .journal-card {
            padding-top: 44px !important;
            /* reduce bottom padding so teacher can sit closer to the card bottom */
            padding-bottom: 6px !important;
        }
        /* Ensure bottom container sticks to card bottom with no extra bottom margins
           and allow full subject names to wrap; keep teacher pinned to bottom */
        .journal-bottom { margin-top: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding-bottom: 0 !important; }

        /* Allow subject to show fully (wrap) and not be truncated */
        .journal-bottom > .journal-subject {
            height: auto !important;
            line-height: normal !important;
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            white-space: normal !important;
            text-overflow: unset !important;
            word-break: break-word !important;
        }

        /* Keep teacher pinned to the bottom of the bottom container; allow it to sit lower than subject */
        .journal-bottom > .journal-teacher {
            height: auto !important;
            line-height: 18px !important;
            margin: 0 !important;
            padding: 0 !important;
            align-self: stretch !important;
            font-size: 12px !important;
        }

        /* Keep zero bottom margins specifically for admin roles too */
        body.role-superadmin .journal-card .journal-subject,
        body.role-platform-admin .journal-card .journal-subject,
        body.role-deputy .journal-card .journal-subject,
        body.role-director .journal-card .journal-subject,
        body.role-superadmin .journal-card .journal-teacher,
        body.role-platform-admin .journal-card .journal-teacher,
        body.role-deputy .journal-card .journal-teacher,
        body.role-director .journal-card .journal-teacher {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Move teacher name closer to the card bottom for admin roles */
        body.role-superadmin .journal-card,
        body.role-platform-admin .journal-card,
        body.role-deputy .journal-card,
        body.role-director .journal-card {
            padding-bottom: 6px !important; /* reduce from 16px to bring content lower */
        }
        .journal-bottom > .journal-teacher { padding-bottom: 0 !important; }

        .classes-parallel-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 16px;
            align-items: start;
        }
        @media (min-width: 1100px) {
            .classes-parallel-grid {
                grid-template-columns: repeat(6, minmax(100px, 1fr));
            }
        }
        .class-card {
            background: #fff;
            border-radius: 18px;
            padding: 14px;
            color: var(--text-dark);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 200px;
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 10px 24px rgba(16,24,40,0.08);
        }
        .class-card:hover {
            box-shadow: 0 14px 34px rgba(16,24,40,0.12);
        }
        .class-card__top {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
        }
        .class-card__teacher {
            font-size: 16px;
            font-weight: 900;
            line-height: 1.15;
            color: #0f172a;
            margin-top: 4px;
        }

        .class-card__divider {
            height: 1px;
            background: rgba(2, 6, 23, 0.10);
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .class-card__footer {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6b7280;
            font-size: 14px;
            font-weight: 800;
            margin-top: 0;
        }
        .class-card__footer svg {
            width: 16px;
            height: 16px;
            color: #6b7280;
            flex: 0 0 auto;
        }

        /* Journals cards list should scroll when many items */
        #journals-list-view {
            zoom: 0.94;
            display: flex;
            flex-direction: column;
            height: calc(100vh - 100px);
            min-height: 0;
            overflow: hidden;
        }
        #journals-grid-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            padding-right: 6px;
        }

        /* Global scroll fix: do not lock Journals list into a fixed-height scroll container.
           Let .main-content handle per-page scrolling. */
        #journals-list-view {
            height: auto;
            min-height: 0;
            overflow: visible;
        }
        #journals-grid-body {
            overflow: visible;
            padding-right: 0;
        }

        .gb-wrapper {
            background: transparent;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            height: calc(100vh - 60px);
            overflow: hidden;
        }

        #gradebook-view {
            background: transparent; /* made transparent per request */
            border-radius: 24px;
            padding: 0;
            overflow: hidden;
            margin-left: -12px;
            margin-right: -12px;
            box-shadow: none; /* remove outer shadow */
            border: none; /* ensure no border remains */
        }
        /* Remove the extra empty header strip above the subbar (per скрін 3) */
        #gradebook-view .gb-header-top,
        #gradebook-view .gb-controls-top {
            display: none !important;
        }
        #gradebook-view .gb-wrapper {
            /* Keep the gradebook card comfortably smaller than the full viewport
               so it fits inside the blue frame (matching the red frame in the
               screenshot) and is fully visible without page scroll. Use
               hidden overflow on the wrapper and enable scrolling inside the
               content area so the inner table can scroll. */
            height: auto;
            max-height: calc(100vh - 20px);
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #gradebook-view.has-admin-subtitle .gb-wrapper {
            max-height: calc(100vh - 64px);
        }
        #gradebook-view .gb-tabs-row {
            padding: 10px 0 6px;
            margin-top: 0;
        }
        #gradebook-view .gb-tabs-row {
            overflow: visible;
        }
        #gradebook-view .gb-tabs {
            margin-top: 0;
        }
        #gradebook-view .gb-tab {
            line-height: 1;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        #gradebook-view .gb-header-content-wrap {
            border: none;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 14px 34px rgba(2,6,23,0.16);
            background: #ffffff;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        /* Remove any leftover top gap above the subbar so controls sit flush under tabs */
        #gradebook-view .gb-header-area {
            padding-top: 0;
        }
        #gradebook-view .gb-subbar-header {
            padding-top: 0;
        }
        #gradebook-view .gb-content {
            border: none;
            box-shadow: none;
            margin: 0;
            padding: 8px;
            border-radius: 0;
            flex: 1 1 auto;
            min-height: 0;
            /* Enable internal scrolling so large tables stay inside the
               visible card while the page itself doesn't get an extra scrollbar. */
            overflow: auto;
        }

        /* Edge-to-edge table area for grades/attendance */
        #gradebook-view #tab-attendance.gb-content,
        #gradebook-view #tab-grades.gb-content {
            padding: 0;
        }

        /* Override earlier rule that added padding-top:10px */
        #gradebook-view #tab-attendance,
        #gradebook-view #tab-grades {
            padding-top: 0;
        }
        #gradebook-view #gb-zoom-grades,
        #gradebook-view #gb-zoom-attendance {
            width: 100%;
        }
        #gradebook-view #gb-table,
        #gradebook-view #attendance-table {
            width: 100%;
        }

        #gradebook-view .gb-header-area { flex: 0 0 auto; }

        #gradebook-view .gb-wrapper,
        #gradebook-view .gb-header-content-wrap {
            overscroll-behavior: none;
        }

        /* Seam between header (blue) and content (white) */
        #gradebook-view .gb-header-area {
            background: #1A67E6;
        }
        #gradebook-view .gb-subbar-header {
            padding: 6px 4px 6px 12px;
            background: #377EFF;
        }

        #gradebook-view .gb-subbar {
            align-items: center;
            gap: 12px;
            padding-top: 0;
            min-height: 42px;
            background: transparent;
        }
        #gradebook-view .gb-controls {
            gap: 8px;
            justify-content: flex-end;
        }
        #gradebook-view .school-year-btn {
            height: 40px;
            padding: 0 12px;
            border-radius: 10px !important;
            background: rgba(255,255,255,0.16);
            border: 1px solid rgba(255,255,255,0.22);
            color: #fff;
            font-weight: 700;
            font-size: 12px;
            line-height: 1;
            box-shadow: none;
            display: inline-flex;
            align-items: center;
            box-sizing: border-box;
        }
        #gradebook-view .school-year-btn .school-year-icon {
            font-size: 12px;
            opacity: 0.95;
        }

        #gradebook-view .gb-subbar .btn-add-column {
            height: 32px;
            padding: 0 10px;
            border-radius: 10px;
            background: transparent;
            border: none;
            color: #fff;
            font-weight: 600;
            gap: 8px;
        }
        #gradebook-view .gb-subbar .btn-add-column:hover {
            background: rgba(255,255,255,0.12);
        }
        #gradebook-view .gb-subbar .btn-add-column .plus-circle {
            width: 18px;
            height: 18px;
            background: #ffffff;
            border: 1px solid rgba(255,255,255,0.85);
        }
        #gradebook-view .gb-subbar .btn-add-column .plus-circle span {
            font-size: 14px;
            line-height: 1;
            color: var(--primary-blue);
        }

        #gradebook-view .scale-pill {
            height: 38px;
            padding: 3px 4px;
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.22);
            gap: 2px;
        }
        #gradebook-view .scale-option {
            height: 32px;
            min-width: 44px;
            padding: 0 10px;
            font-size: 12px;
            border-radius: 999px;
            transform: none;
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.92);
        }
        #gradebook-view .scale-option.active {
            background: rgba(255,255,255,0.92);
            color: #1c77ff;
            box-shadow: 0 6px 14px rgba(2,6,23,0.10);
            transform: none;
        }
        /* Ensure the active scale/zoom option is strongly rounded (pill) */
        #gradebook-view .scale-option.active,
        #gradebook-view .scale-option[data-scale="1"] {
            border-radius: 999px !important;
        }

        #gradebook-view .nav-zoom-box {
            background: transparent;
            border: none;
            padding: 0;
            gap: 6px;
            height: 44px;
        }
        /* Special rule: these two journal/gradebook nav buttons should be
           rounded-square only (override global oval rule). Slightly smaller. */
        #gradebook-view .nav-zoom-box .nav-btn {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 14px !important;
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.10);
            color: #fff;
            box-shadow: none;
        }
        #gradebook-view .nav-zoom-box .nav-btn:hover {
            background: rgba(255,255,255,0.18);
            transform: none;
        }

        #gradebook-view .three-dot-btn {
            width: 32px;
            height: 32px;
            border-radius: 999px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: none;
        }

        #gradebook-view .gb-controls-top {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            position: relative;
            min-height: 32px;
        }
        #gradebook-view .gb-controls-top .export-menu {
            right: 0;
            top: calc(100% + 10px);
        }

        /* Zoom surface: scale without transform to avoid sticky/header clipping */
        #gradebook-view .gb-zoom-surface {
            width: max-content;
        }
        
        #gradebook-view #tab-attendance.gb-content,
        #gradebook-view #tab-grades.gb-content,
        #gradebook-view #tab-planning.gb-content {
            margin: 0;
            border-radius: 0;
        }

        /* Give the inner content a tiny top inset so first grid line is visible (fixes "eaten" top edge) */
        #gradebook-view #tab-attendance,
        #gradebook-view #tab-grades {
            padding-top: 10px;
        }

        /* When embedded lesson-day is shown inside gradebook, keep it aligned with inner card width */
        #gradebook-view .lesson-day-shell {
            max-width: none;
            .nav-item { padding: 8px 10px; font-size: 14px; }
            /* Make modals occupy full viewport on small screens */
            .modal-window, .modal { width: 100% !important; height: 100% !important; max-width: none !important; border-radius: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; }
            .modal-content { height: 100%; overflow:auto; }

            /* Mobile phone layout (small screens) */
            body { display: block; height: auto; overflow: auto; }
            #app-sidebar { display: none; }
            #mobile-topbar,
            #mobile-day-strip,
            #mobile-bottom-nav { display: block; }
            #mobile-sidebar-backdrop.active { display: block; }

            #mobile-topbar {
                position: fixed;
                top: 0; left: 0; right: 0;
                height: 62px;
                padding: 0 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                background: rgba(28, 119, 255, 0.92);
                backdrop-filter: blur(14px);
                z-index: 2000;
            }
            #mobile-topbar .mobile-icon {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: white;
                background: rgba(255,255,255,0.14);
                border: 1px solid rgba(255,255,255,0.22);
                cursor: pointer;
            }
            #mobile-bell-btn {
                position: fixed;
                top: 9px;
                right: 14px;
                z-index: 2001;
            }
            #mobile-bell-btn.has-unread::after {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 999px;
                background: #ef4444;
                right: 6px;
                bottom: 6px;
                box-shadow: 0 0 0 2px rgba(28, 119, 255, 0.92);
            }
            #mobile-topbar .mobile-title {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                color: white;
                font-weight: 800;
                line-height: 1.1;
                font-size: 14px;
            }
            #mobile-topbar .mobile-title div { line-height: 1.2; }
            #mobile-topbar .mobile-day-nav {
                width: 36px;
                height: 36px;
                border-radius: 12px;
                background: rgba(255,255,255,0.14);
                border: 1px solid rgba(255,255,255,0.22);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: white;
            }
            #mobile-topbar .mobile-day-nav:hover {
                background: rgba(255,255,255,0.20);
            }
            /* Hide desktop header on mobile to match mobile layout */
            .header { display: none; }
            .home-toprow { display: none; }
            .home-shell { padding: 0 12px 16px; }
            #home-schedule-container { padding-bottom: 16px; }
            #home-schedule-container .home-lesson-item { margin-bottom: 12px; }
            #home-schedule-container .home-lesson-card { border-radius: 18px; padding: 18px; }
            #home-schedule-container .home-lesson-icon { display: flex; }
            #home-schedule-container .home-room-number { display: none; }

            #mobile-day-strip {
                position: fixed;
                top: 62px;
                left: 0;
                right: 0;
                padding: 8px 12px 10px;
                display: flex;
                gap: 8px;
                overflow-x: auto;
                scrollbar-width: thin;
                -webkit-overflow-scrolling: touch;
                background: rgba(28, 119, 255, 0.92);
                z-index: 2000;
            }
            #mobile-day-strip button {
                flex: 0 0 auto;
                padding: 8px 10px;
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,0.25);
                background: rgba(255,255,255,0.12);
                color: rgba(255,255,255,0.92);
                font-weight: 700;
                font-size: 12px;
                cursor: pointer;
                white-space: nowrap;
            }
            #mobile-day-strip button.active {
                background: rgba(255,255,255,0.95);
                color: var(--primary-blue);
                border-color: rgba(255,255,255,0.7);
            }

            /* Mobile topbar should still appear on mobile, but date/day strip and navigation only on Home */
            body:not(.mobile-home) #mobile-day-strip { display: none !important; }
            body:not(.mobile-home) #mobile-topbar .mobile-day-nav,
            body:not(.mobile-home) #mobile-topbar #mobile-date,
            body:not(.mobile-home) #mobile-topbar #mobile-day { display: none !important; }
            body:not(.mobile-home) #mobile-topbar #mobile-page-title { display: block !important; }
            body.mobile-home #mobile-topbar #mobile-page-title { display: none !important; }

            #mobile-bottom-nav {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 66px;
                padding: 6px 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 4px;
                background: rgba(255,255,255,0.94);
                border-top: 1px solid rgba(0,0,0,0.08);
                z-index: 2000;
            }
            #mobile-bottom-nav button {
                flex: 1;
                height: 54px;
                border-radius: 14px;
                background: transparent;
                border: none;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                color: rgba(17,24,39,0.7);
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                transition: background 0.15s;
            }
            #mobile-bottom-nav button.active {
                color: var(--primary-blue);
                background: rgba(28,119,255,0.10);
            }
            #mobile-bottom-nav button:hover {
                background: rgba(28,119,255,0.12);
            }
            #mobile-bottom-nav button i { font-size: 18px; }

            #mobile-sidebar-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.4);
                z-index: 1950;
            }
            #app-sidebar.mobile-open {
                display: flex !important;
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: 280px;
                max-width: 80%;
                padding-top: 64px;
                box-shadow: 0 14px 30px rgba(0,0,0,0.22);
                z-index: 2000;
            }

            /* ensure content doesn't go under top and bottom bars */
            .main-content { padding-top: 124px; padding-bottom: 90px; }
            .home-shell { flex-direction: column; gap: 14px; }
            .home-right { display: none; }
        }
        /* Inline schedule selects: keep displayed value white, but dropdown/options text black */
        #schedule-view-mode, #schedule-view-value {
            color: white; /* visible value in the pill stays white */
            background: transparent;
            border: 1px solid rgba(255,255,255,0.12);
            -webkit-appearance: none;
            appearance: none;
        }
        /* narrower widths for mode/value selects */
        #schedule-view-mode { min-width: 110px; width: 110px; }
        #schedule-view-value { min-width: 120px; width: 120px; }
        #schedule-view-mode option, #schedule-view-value option {
            color: #000; /* options in the dropdown are black */
            background: #fff;
        }
        /* Combined header + table block: rounded top, seamless connection */
        .gb-header-content-wrap {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            border-radius: 12px 12px 0 0;
            border: 1px solid rgba(0,0,0,0.18);
        }

        /* Lesson day mode: details view should not inherit "white table" wrapper styles */
        #gradebook-view.lesson-day-mode .gb-header-content-wrap {
            border: 0;
            border-radius: 0;
            overflow: visible;
            background: transparent;
        }
        #gradebook-view.lesson-day-mode {
            padding: 0;
            border-radius: 24px;
            overflow: hidden;
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
            box-sizing: border-box;
        }
        #gradebook-view.lesson-day-mode .gb-wrapper {
            height: auto;
            overflow: visible;
        }
        #gradebook-view.lesson-day-mode .lesson-day-view {
            padding: 0;
        }
        #gradebook-view.lesson-day-mode .lesson-day-topbar {
            border-radius: 18px;
        }
        .gb-header-area { 
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            gap: 0;
            background: #F5F5F5; /* header of opened journal set to light gray */
            color: var(--text-dark);
            flex-shrink: 0;
        }
        
        .gb-subbar-header {
            padding: 0; /* remove internal padding so controls sit flush to frame edges */
            border-bottom: none;
            background: transparent;
            color: var(--text-dark);
        }
        .gb-breadcrumbs { 
            font-size: 20px;
            font-weight: 600;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .gb-breadcrumbs span { 
            cursor: pointer;
            opacity: 0.8;
            transition: opacity 0.2s;
        }
        .gb-breadcrumbs span:hover { 
            opacity: 1;
        }
        .gb-breadcrumbs .sep { 
            color: rgba(0,0,0,0.35);
            font-size: 14px;
        }
        .gb-breadcrumbs .current { 
            color: var(--text-dark);
            opacity: 1;
            cursor: default;
            font-weight: 700;
        }

        .gb-tabs {
            display: inline-flex;
            gap: 0;
            padding: 0;
            background: transparent;
            margin: 0;
            border: none;
            border-radius: 0;
            overflow: visible;
            align-items: center;
            justify-content: flex-start; /* left aligned */
            flex: none; /* keep static width */
            margin-top: 2px; /* minimal gap from top */
            margin-bottom: 2px; /* minimal gap to subbar */
            align-self: flex-start; /* ensure tabs are left-aligned inside the header column */
        }

        .gb-tabs-row { background: transparent; padding:8px 0; display:flex; justify-content:flex-start; flex-shrink: 0; margin-top: -6px; }
        .gb-tabs-row .gb-tabs { 
            margin-top:0; 
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            padding-left: 10px;
            display: inline-flex;
            gap: 0;
            overflow: visible;
            white-space: nowrap;
            flex-wrap: nowrap;
        }

        /* Subbar under tabs: full width row with left and right groups */
        .gb-subbar {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
            padding: 0; /* remove left/right padding so items can touch edges */
        }

        /* Ensure the right-side controls are pushed to the very end and touch the frame */
        .gb-subbar .gb-controls {
            margin-left: 2;
            margin-right: 0;
            padding-right: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }

        /* Remove any default button margins so edge buttons are flush */
        /* keep zero margin for subbar buttons except when a special gap is requested */
        .gb-subbar > button:not(.school-year-gap),
        .gb-subbar #school-year-block:not(.school-year-gap) {
            margin: 0;
        }
        .gb-subbar .gb-controls > *:first-child { margin-left: 0; }
        .gb-subbar .gb-controls > *:last-child { margin-right: 0; }
        
        .gb-subbar-header .gb-subbar {
            padding-top: 0;
        }

        /* Force zero horizontal padding/margins so controls touch the frame edges */
        #gradebook-view .gb-header-content-wrap,
        #gradebook-view .gb-header-area,
        #gradebook-view .gb-subbar-header,
        #gradebook-view .gb-subbar {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin: 0 !important;
        }

        /* Remove extra padding inside the nav controls and scale pill */
        #gradebook-view .nav-zoom-box { padding-right: 0 !important; padding-left: 0 !important; }
        #gradebook-view .scale-pill { padding-left: 4px !important; padding-right: 4px !important; }

        /* Ensure leftmost and rightmost buttons have no external gap, but allow special gap on school-year-gap */
        #gradebook-view #school-year-block:not(.school-year-gap),
        #gradebook-view #btn-add-column,
        #gradebook-view .nav-zoom-box .nav-btn {
            margin: 0 !important;
        }

        .gb-header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
        }

        .gb-left-top { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }

        .gb-controls { display:flex; align-items:center; gap:4px; }

        .btn-add-column { display:inline-flex; align-items:center; gap:8px; background:var(--primary-blue); color:#fff; border:0; padding:6px 10px; border-radius:8px; cursor:pointer; }
        .btn-add-column .plus-circle { width:22px; height:22px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--primary-blue); font-weight:700; }

        .nav-zoom-box { 
            display: inline-flex;
            gap: 6px;
            padding: 4px 6px;
            background: rgba(0,0,0,0.02);
            border-radius: 12px;
            border: 1px solid rgba(0,0,0,0.04);
            height: 34px;
            align-items: center;
        }
        .nav-zoom-box .nav-btn { 
            padding: 6px 8px;
            height: 30px;
            min-width: 36px;
            background: transparent;
            color: var(--primary-blue);
            border: 1px solid rgba(15,104,248,0.08);
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.12s, color 0.12s, box-shadow 0.12s, transform 0.06s;
        }
        .nav-zoom-box .nav-btn:hover { 
            background: rgba(15,104,248,0.06);
            color: var(--primary-blue);
            transform: translateY(-1px); 
        }

        .school-year {
            background: var(--primary-blue);
            color: #fff;
            border: 2px solid var(--primary-blue);
            padding: 4px 8px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 13px;
            line-height: 1;
        }

        /* Only when the school-year button shows specific year (2025/2026)
           add a small left offset so it isn't flush to the frame. The class
           `school-year-gap` is applied via JS only for that exact text. */
        .school-year-btn.school-year-gap {
            margin-left: 10px !important;
        }

        .gb-subbar .btn-add-column {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #1c77ff00;
            color: #fff;
            border: 0;
            padding: 6px 10px;
            border-radius: 8px;
            cursor: pointer;
        }

        .gb-subbar .btn-add-column span { font-weight:600; }


        .school-year-icon { color: #fff; margin-left:8px; font-size:14px; vertical-align:middle; }
        /* Three-dot export button */
        .three-dot-btn {
            width: 36px; height: 36px; border-radius: 50%; background: var(--primary-blue); display: inline-flex; align-items: center; justify-content: center; color: white; cursor: pointer; border: none; box-shadow: 0 6px 18px rgba(15,104,248,0.12);
        }
        .three-dot-btn i { font-size: 14px; transform: translateY(-1px); }
        .export-menu {
            position: absolute; right: 24px; top: 64px; background: white; color: var(--text-dark); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); padding: 8px; display: none; min-width: 160px; z-index: 9999;
        }
        .export-menu.open { display: block; }
        .export-menu button { width: 100%; background: transparent; border: none; text-align: left; padding: 8px 12px; font-size: 14px; cursor: pointer; color: var(--text-dark); border-radius: 8px; }
        .export-menu button:hover { background: #f3f4f6; color: var(--primary-blue); }

        /* Zoom panel */
        .zoom-wrapper { position: relative; display: inline-block; }
        .zoom-toggle {
            display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; background: white; color: var(--primary-blue); border-radius: 999px; height: 36px; border: 1px solid rgba(28,119,255,0.08); font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(28,119,255,0.06);
        }
        .zoom-toggle i { font-size: 14px; }

        .zoom-popup {
            position: absolute; right: 0; top: calc(100% + 10px); background: white; color: var(--text-dark); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(2,6,23,0.15); min-width: 320px; display: none; z-index: 9999;
        }
        .zoom-popup.open { display: block; }
        .zoom-controls { display: flex; align-items: center; gap: 10px; }
        .zoom-btn { background: var(--primary-blue); color: white; border: none; width: 33px; height: 33px; border-radius: 8px; font-weight: 700; cursor: pointer; }
        .zoom-range { flex: 1; }
        .zoom-range input[type='range'] { width: 100%; height: 6px; appearance: none; background: linear-gradient(90deg,var(--primary-blue), #3b82f6); border-radius: 6px; outline: none; }
        .zoom-option { background: transparent; color: var(--primary-blue); padding: 6px 10px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 13px; border: 1px solid transparent; }
        .zoom-option.active { background: #ffffff; color: var(--primary-blue); border-color: rgba(0,0,0,0.04); }
        .zoom-reset { background: transparent; border: 1px solid rgba(0,0,0,0.06); padding: 6px 8px; border-radius: 8px; cursor: pointer; }
        /* New scale pill (big pill with three small options) — colors match tabs */
        .scale-pill {
            display: inline-flex;
            gap: 6px;
            padding: 4px 6px;
            background: rgba(255,255,255,0.06);
            border-radius: 999px;
            align-items: center;
            border: 1px solid rgba(255,255,255,0.08);
            height: 40px;
        }
        .scale-option {
            padding: 0 12px;
            height: 100%;
            min-width: 48px;
            border-radius: 999px;
            background: transparent;
            color: rgba(255,255,255,0.9);
            font-weight: 700;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            transition: background 0.12s, color 0.12s, box-shadow 0.12s, transform 0.06s;
            box-sizing: border-box;
        }
        .scale-option:hover:not(.active) { background: rgba(255,255,255,0.18); color: white; transform: translateY(-1px); }
        .scale-option.active { background: white; color: var(--primary-blue); box-shadow: 0 6px 18px rgba(28,119,255,0.12); transform: translateY(-1px); }
        /* Ensure the 100% scale button always shows white background and blue text regardless of zoom */
        #gradebook-view .scale-option[data-scale="1"] {
            background: #ffffff !important;
            color: var(--primary-blue) !important;
            box-shadow: none !important;
        }
        #gradebook-view .scale-option[data-scale="1"].active {
            background: #ffffff !important;
            color: var(--primary-blue) !important;
            box-shadow: 0 6px 18px rgba(28,119,255,0.12) !important;
        }
        /* small responsive tweak */
        @media (max-width: 700px) { .zoom-popup { right: 8px; left: 8px; min-width: auto; } }
        .gb-actions-wrap { position: relative; display:flex; align-items:center; gap:10px; }
        .gb-tab {
            padding: 8px 10px;
            height: 34px;
            min-height: 34px;
            min-width: 0;
            background: transparent;
            color: white;
            border-radius: 0;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .gb-tab.active {
            background: transparent;
            color: white;
            box-shadow: none;
            transform: none;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 8px;
            text-decoration-thickness: 2px;
        }
        /* Inactive toggle/tab underlines should be light gray */
        .gb-tab:not(.active),
        .filter-btn:not(.active),
        .journal-tab:not(.active),
        #journals .journal-tab-button:not(.active),
        #journals .gb-subbar > button:not(.active) {
            text-decoration-color: #d1d5db !important;
        }
        .filter-btn:not(.active),
        .gb-tab:not(.active),
        .journal-tab:not(.active) {
            color: #bdc9de;
        }
        .gb-tab:hover:not(.active) {
            background: transparent;
            color: #bdc9de;
        }

        .filter-btn:hover:not(.active) {
            background: transparent;
            color: #bdc9de;
        }

        /* Slightly smaller font for the gradebook sub-tabs requested */
        #gradebook-view .gb-tab[data-gb="attendance"],
        #gradebook-view .gb-tab[data-gb="grades"],
        #gradebook-view .gb-tab[data-gb="planning"] {
            font-size: 16px;
        }

        #gradebook-view .gb-tab[data-gb="planning"] {
            margin-left: 4px;
        }

        .gb-content { 
            flex-grow: 1;
            overflow: auto;
            background: #ffffff; /* white inner frame like screenshot */
            position: relative;
            padding: 12px; /* inner padding for table */
            border-radius: 12px;
            margin: 8px; /* gap from wrapper edges */
        }
        /* Tab-attendance and tab-grades: combined with header, no top gap */
        #tab-attendance.gb-content,
        #tab-grades.gb-content {
            margin: 0 8px 8px 8px;
            border-radius: 0 0 12px 12px;
        }

        .gb-table {
            border-collapse: separate;
            border-spacing: 0;
            width: max-content; /* table width equals sum of column widths */
            table-layout: auto; /* allow columns to size to their content and min-widths */
            background: transparent;
            border-radius: 0;
            overflow: visible;
            border: none;
            
        }

        /* Gradebook grid styling closer to reference (thin blue grid, compact rows, zebra) */
        #gradebook-view .gb-table th {
            border-color: rgba(28,119,255,0.16) !important;
            padding: 6px 6px !important;
            height: 34px !important;
            font-size: 11px !important;
            letter-spacing: 0.2px !important;
            text-transform: none !important;
        }
        /* Header block must remain visible during vertical scroll (sticky within the scroll container). */
        #gradebook-view .gb-table thead th.gb-sticky-col,
        #gradebook-view .gb-table thead th.gb-sticky-col-2,
        #gradebook-view .gb-table thead th.gb-sticky-avg,
        #gradebook-view .gb-table thead th.gb-avg-col {
            position: sticky !important;
        }
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col {
            top: 0 !important;
            z-index: 40;
        }
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col {
            top: var(--gb-thead-row1-h, 14px) !important;
            z-index: 35;
        }
        #gradebook-view .gb-table td {
            border-color: rgba(28,119,255,0.14) !important;
            height: 36px !important;
            font-size: 13px !important;
            background: #ffffff;
        }
        #gradebook-view .gb-table tbody tr:nth-child(even) td {
            background: #ffffff !important;
        }
        /* Sticky columns had forced white background elsewhere; keep zebra consistent on the frozen area */
        #gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-col,
        #gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-col-2,
        #gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-avg {
            background: #ffffff !important;
        }
        #gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-col,
        #gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-col-2,
        #gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-avg {
            background: #ffffff !important;
        }
        /* Hover should highlight only the active cell (not the whole row),
           otherwise the frozen (sticky) area looks like a misaligned stripe after horizontal scroll. */
        #gradebook-view .gb-table tbody td:hover {
            background: rgba(28,119,255,0.08) !important;
        }

        /* Visual separator at the end of frozen columns (prevents “merged grid” look on horizontal scroll) */
        #gradebook-view .gb-table th.gb-sticky-avg,
        #gradebook-view .gb-table td.gb-sticky-avg {
            box-shadow: none !important;
            background-clip: padding-box;
        }
        /* Attendance view has only 2 frozen columns; add separator to the name column */
        #gradebook-view #att-table th.gb-sticky-col-2,
        #gradebook-view #att-table td.gb-sticky-col-2 {
            box-shadow: none !important;
            background-clip: padding-box;
        }
        #gradebook-view #att-table thead tr:nth-child(2) {
            display: none;
        }

        #gradebook-view #att-table thead th {
            position: static !important;
            top: auto !important;
            left: auto !important;
            z-index: auto !important;
        }
        
        /* Sticky layout for stretched containers: single source of truth for widths/offsets.
           (Overrides earlier scattered sticky rules via higher specificity + !important.) */
        #gradebook-view .gb-table {
            --gb-sticky-col-1-w: 50px;
            --gb-sticky-col-2-w: 200px;
            --gb-sticky-avg-w: 60px;
            --gb-thead-row1-h: 26px;
            --gb-thead-row2-h: 26px;
        }
        
        #gradebook-view .gb-table .gb-sticky-col {
            width: var(--gb-sticky-col-1-w) !important;
            min-width: var(--gb-sticky-col-1-w) !important;
            max-width: var(--gb-sticky-col-1-w) !important;
        }
        #gradebook-view .gb-table .gb-sticky-col-2 {
            width: var(--gb-sticky-col-2-w) !important;
            min-width: 160px !important;
            max-width: var(--gb-sticky-col-2-w) !important;
        }
        #gradebook-view .gb-table .gb-sticky-avg {
            width: var(--gb-sticky-avg-w) !important;
            min-width: 40px !important;
            max-width: var(--gb-sticky-avg-w) !important;
        }
        
        /* Header sticky rows: keep row 1 and row 2 stacked without overlap at any zoom. */
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col {
            height: var(--gb-thead-row1-h) !important;
            top: 0 !important;
            z-index: 60;
            line-height: 1.0 !important;
        }
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col {
            height: var(--gb-thead-row2-h) !important;
            top: var(--gb-thead-row1-h) !important;
            z-index: 55;
            line-height: 1.0 !important;
        }

        #gradebook-view #gb-table thead th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col) {
            position: static !important;
            top: auto !important;
            left: auto !important;
            z-index: auto !important;
        }

        #gradebook-view #gb-table thead th.date-clickable,
        #gradebook-view #gb-table thead th.gb-subtype-header {
            position: static !important;
            top: auto !important;
            left: auto !important;
            z-index: auto !important;
        }

        #gradebook-view .gb-table thead th.date-clickable,
        #gradebook-view .gb-table thead th.gb-subtype-header {
            position: static !important;
            top: auto !important;
            left: auto !important;
            z-index: auto !important;
        }
        
        /* Frozen columns: explicit left offsets based on the actual frozen widths. */
        #gradebook-view .gb-table th.gb-sticky-col,
        #gradebook-view .gb-table td.gb-sticky-col {
            position: sticky !important;
            left: 0 !important;
        }
        #gradebook-view .gb-table th.gb-sticky-col-2,
        #gradebook-view .gb-table td.gb-sticky-col-2 {
            position: sticky !important;
            left: var(--gb-sticky-col-1-w) !important;
        }
        #gradebook-view .gb-table th.gb-sticky-avg,
        #gradebook-view .gb-table td.gb-sticky-avg {
            position: sticky !important;
            left: calc(var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)) !important;
        }

        /* Hard-bind selectors for the real rendered tables and the avg column helper class.
           This prevents misses when other global rules/inline left offsets are present. */
        #gradebook-view #gb-table th.gb-sticky-col,
        #gradebook-view #gb-table td.gb-sticky-col,
        #gradebook-view #att-table th.gb-sticky-col,
        #gradebook-view #att-table td.gb-sticky-col {
            position: sticky !important;
            left: 0 !important;
        }
        #gradebook-view #gb-table th.gb-sticky-col-2,
        #gradebook-view #gb-table td.gb-sticky-col-2,
        #gradebook-view #att-table th.gb-sticky-col-2,
        #gradebook-view #att-table td.gb-sticky-col-2 {
            position: sticky !important;
            left: var(--gb-sticky-col-1-w) !important;
        }
        #gradebook-view #gb-table th.gb-sticky-avg,
        #gradebook-view #gb-table td.gb-sticky-avg,
        #gradebook-view #gb-table th.gb-avg-col,
        #gradebook-view #gb-table td.gb-avg-col {
            position: sticky !important;
            left: calc(var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)) !important;
        }
        
        /* Layering matrix: body frozen columns < header < header+frozen corner. */
        #gradebook-view .gb-table td.gb-sticky-col,
        #gradebook-view .gb-table td.gb-sticky-col-2,
        #gradebook-view .gb-table td.gb-sticky-avg {
            z-index: 30 !important;
            background: #ffffff !important;
        }

        #gradebook-view .gb-table th.gb-sticky-col,
        #gradebook-view .gb-table td.gb-sticky-col {
            box-shadow: none !important;
            background-clip: padding-box;
        }

        /* Stability fix for sticky + overflow + zoom repaint issues (header/frozen cells disappearing after scroll).
           Force compositor layer on sticky elements to avoid flicker/clipping on scroll end. */
        #gradebook-view .gb-table td.gb-sticky-col,
        #gradebook-view .gb-table td.gb-sticky-col-2,
        #gradebook-view .gb-table td.gb-sticky-avg,
        #gradebook-view .gb-table td.gb-avg-col,
        #gradebook-view .gb-table th.gb-sticky-col,
        #gradebook-view .gb-table th.gb-sticky-col-2,
        #gradebook-view .gb-table th.gb-sticky-avg,
        #gradebook-view .gb-table th.gb-avg-col {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            backface-visibility: hidden;
            will-change: transform;
        }

        /* Ensure z-index ordering remains stable after scrolling stops (avoid layer flattening quirks). */
        #gradebook-view #tab-attendance.gb-content,
        #gradebook-view #tab-grades.gb-content {
            isolation: isolate;
            position: relative;
        }
        #gradebook-view .gb-table thead th {
            /* Horizontal header (dates/types) must always stay above table body */
            z-index: 500;
            background: #ffffff !important;
        }
        #gradebook-view .gb-table thead th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col) {
            z-index: 500 !important;
        }
        #gradebook-view .gb-table thead th.gb-sticky-col,
        #gradebook-view .gb-table thead th.gb-sticky-col-2,
        #gradebook-view .gb-table thead th.gb-sticky-avg {
            z-index: 2000;
        }
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
        #gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
        #gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg {
            z-index: 2100;
        }
        /* Reduce the width of the student name column (ПІБ) ~1.5x
           by setting explicit fixed width for sticky columns. */
        .gb-sticky-col {
            /* slightly wider index column for № (increased) */
            width: 50px;
            min-width: 50px;
            max-width: 50px;
        }
        .gb-sticky-col-2 {
            /* student name column: fixed comfortable width but with sensible min */
            width: 240px;
            min-width: 180px; /* prevent it collapsing too small when many date columns added */
            max-width: 420px;
            /* when anchored to the right, this will be positioned via the sticky rule below */
        }
        /* Ensure inner wrappers respect the fixed width */
        th.gb-sticky-col-2 > div, td.gb-sticky-col-2 > div {
            padding-left: 10px;
            padding-right: 8px;
            justify-content: flex-start;
        }
        .gb-table th {
            background: white; /* white header cells */
            position: sticky;
            top: 0;
            z-index: 10;
            border: 1px solid rgba(0,0,0,0.08);
            padding: 12px 8px;
            height: 50px;
            font-size: 13px;
            text-align: center;
            vertical-align: middle;
            color: var(--text-dark);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Force fixed table layout so colgroup widths determine column sizes
           and columns do not stretch with the outer container width. This
           makes sticky positioning independent from container size. */
        #gradebook-view .gb-table {
            table-layout: fixed;
        }
        /* Fix multi-row sticky headers: first header row sticks to top, second row sticks below it.
           Without this, the header can visually "jump"/overlap during scroll (as on screenshots). */
        .gb-table thead tr:nth-child(1) th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col) { top: 0; z-index: 40; }
        .gb-table thead tr:nth-child(2) th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col) { top: 26px; z-index: 35; }
        /* Half-height date header cells in gradebook */
        .gb-table th.gb-header-clickable {
            height: 26px;
            padding-top: 6px;
            padding-bottom: 6px;
        }
        .gb-table td {
            border: 1px solid rgba(0,0,0,0.06); /* gray outline for each cell */
            height: 45px;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: var(--text-dark);
            background: white; /* make cells white */
            transition: background-color 0.2s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box;
        }
        /* Make non-sticky (date) columns have a reasonable minimum width so adding many
           columns causes horizontal scroll instead of shrinking the sticky name column. */
        .gb-table th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg),
        .gb-table td:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg) {
            min-width: 62px;
        }
        /* Ensure sticky columns (student names) fill their cell area edge-to-edge
           and that their inner content is vertically centered and left-aligned. */
        .gb-table th.gb-sticky-col,
        .gb-table td.gb-sticky-col,
        .gb-table th.gb-sticky-col-2,
        .gb-table td.gb-sticky-col-2,
        .gb-table th.gb-sticky-avg,
        .gb-table td.gb-sticky-avg {
            padding: 0; /* remove extra spacing around the sticky columns */
            background: white !important; /* ensure sticky columns are white */
            color: var(--text-dark) !important;
            border: 1px solid rgba(0,0,0,0.06) !important;
            backdrop-filter: none !important;
            box-shadow: none !important;
        }
        .gb-table th.gb-sticky-col > div,
        .gb-table td.gb-sticky-col > div,
        .gb-table th.gb-sticky-col-2 > div,
        .gb-table td.gb-sticky-col-2 > div {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start; /* keep text left-aligned inside the rectangle */
            padding: 0 12px; /* comfortable inset from the edge */
            /* Allow student names to wrap instead of being ellipsized so
               highlighted (yellow) names remain readable. */
            overflow: visible;
            white-space: normal;
            text-overflow: clip;
            line-height: 1.2;
            padding-top: 6px; padding-bottom: 6px;
        }
        /* extra fixed-position styling applied when columns should remain
           visible at top of viewport even if table scrolls vertically out of view */
        .gb-table th.gb-sticky-col.fixed,
        .gb-table th.gb-sticky-col-2.fixed,
        .gb-table th.gb-sticky-avg.fixed {
            /* Prevent JS from forcing 'fixed' positioning which breaks horizontal scrolling.
               Keep these elements sticky within the scroll container so they move horizontally
               with the table while remaining visible during vertical scroll. */
            position: sticky;
            z-index: 70;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }
        /* When headers have 2 rows, .fixed must preserve different top offsets to avoid overlap */
        .gb-table thead tr:nth-child(1) th.fixed { top: 0 !important; z-index: 80; }
        .gb-table thead tr:nth-child(2) th.fixed { top: 26px !important; z-index: 75; }
        /* Corner (sticky + header) should stay above everything */
        .gb-table thead tr:nth-child(1) th.gb-sticky-col.fixed,
        .gb-table thead tr:nth-child(1) th.gb-sticky-col-2.fixed,
        .gb-table thead tr:nth-child(1) th.gb-sticky-avg.fixed { z-index: 90; }
        /* IMPORTANT: body cells in frozen columns must NOT stick vertically (only horizontally).
           If JS adds `.fixed` to TDs, ensure they still scroll down with rows. */
        .gb-table td.gb-sticky-col.fixed,
        .gb-table td.gb-sticky-col-2.fixed,
        .gb-table td.gb-sticky-avg.fixed {
            position: sticky;
            top: auto !important;
            box-shadow: none;
        }
        /* For sticky header cells that span two rows, keep label at the bottom */
        .gb-table th.gb-sticky-col,
        .gb-table th.gb-sticky-col-2,
        .gb-table th.gb-sticky-avg {
            vertical-align: bottom;
        }
        .gb-table th.gb-sticky-col > div,
        .gb-table th.gb-sticky-col-2 > div,
        .gb-table th.gb-sticky-avg > div {
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
        }
        /* For any cells that contain a wrapper div, make it fill the full cell so content
           doesn't appear to 'float' inside the rounded rectangle. */
        .gb-table td > div,
        .gb-table th > div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 0; /* default no extra padding for inner wrappers */
            color: var(--text-dark);
        }
        /* Student cell layout: rectangular avatar with initials + full name */
        .student-cell {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .student-avatar {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 12px;
            /* slight left shift so avatar sits closer to the table edge */
            margin-left: -8px;
            flex-shrink: 0;
        }
        .student-name-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* максимум 1 перенос (2 рядки) */
            line-clamp: 2;
            overflow: hidden;
            font-weight: 590;
            line-height: 1.15;
            /* slightly smaller font for ПІБ */
            font-size: 12px;
        }
        /* Ensure sticky column headers and cells render with solid white background
           and consistent borders so they don't appear blue or translucent. */
        .gb-table th.gb-sticky-col,
        .gb-table th.gb-sticky-col-2 {
            background: white !important;
            color: var(--text-dark) !important;
            border: 1px solid rgba(0,0,0,0.06) !important;
        }
        /* Only header cells should be sticky; body cells must remain in normal flow so they scroll
           vertically with the table rows. Applying sticky to td causes each body cell to stick to the
           top of the viewport which prevents row content from scrolling. */
        th.gb-sticky-col { 
            position: sticky;
            top: 0; /* stay visible at top when vertically scrolling */
            width: 50px !important;
            min-width: 50px !important;
            max-width: 50px !important;
            background: white !important;
            z-index: 20;
            border-right: 1px solid rgba(0,0,0,0.06) !important;
            backdrop-filter: none !important;
        }
        th.gb-sticky-col-2 { 
            position: sticky;
            top: 0; /* keep name column header visible during vertical scroll */
            /* student name column remains in normal horizontal flow so it scrolls with table */
            width: 200px !important;
            min-width: 160px !important;
            max-width: 200px !important;
            background: white !important;
            z-index: 20;
            border-right: 1px solid rgba(0,0,0,0.06) !important;
            backdrop-filter: none !important;
        }
        .gb-table td.gb-sticky-col {
            color: #1c77ff !important;
            font-weight: 800 !important;
        }
        /* Hide ONLY the separator between the number column and the student name column */
        .gb-table th.gb-sticky-col,
        .gb-table td.gb-sticky-col {
            border-right: 1px solid transparent !important;
        }
        .gb-table th.gb-sticky-col-2,
        .gb-table td.gb-sticky-col-2 {
            border-left: 1px solid transparent !important;
        }
        /* Ensure the "Учні" header sits at the top (not bottom-aligned like other sticky headers) */
        .gb-table th.gb-sticky-col-2 > div {
            justify-content: flex-start !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }
        /* Keep BOTH header rows visible when vertically scrolling:
           row 1 (dates) sticks at top:0, row 2 (types / class) sticks below it. */
        .gb-table thead tr:nth-child(1) th {
            top: 0 !important;
            z-index: 12;
            padding-top: 2px !important;
            padding-bottom: 2px !important;
            height: 14px !important;
            line-height: 1.0 !important;
        }
        .gb-table thead tr:nth-child(2) th {
            top: 14px !important;
            z-index: 11;
            padding-top: 2px !important;
            padding-bottom: 2px !important;
            height: 13px !important;
            line-height: 1.0 !important;
        }
        .gb-table thead tr:nth-child(2) th.gb-subtype-header {
            padding-top: 2px !important;
            padding-bottom: 2px !important;
        }
        /* Slightly shift "Учні" (first header row) left compared to the class row */
        .gb-table thead tr:nth-child(1) th.gb-sticky-col-2 {
            padding-left: 6px !important;
        }
        .gb-students-title {
            font-size: 11px;
            font-weight: 700;
            color: #000;
            text-transform: none;
            letter-spacing: 0.5px;
            line-height: 1.1;
        }
        .gb-students-subtitle {
            font-size: 11px;
            font-weight: 700;
            color: #000;
            text-transform: none;
            letter-spacing: 0;
            line-height: 1.1;
            margin-top: 1px;
        }
        th.gb-sticky-avg {
            /* sticky average column header: stick vertically only, do not force horizontal offset */
            position: sticky;
            top: 0; /* remain at top when scrolling vertically */
            width: 40px !important;
            min-width: 40px !important;
            max-width: 60px !important;
            background: white !important;
            z-index: 25;
            border-right: 1px solid rgba(0,0,0,0.06) !important;
            backdrop-filter: none !important;
            transform: translateZ(0);
        }
        /* Make body cells for the left columns horizontally sticky (frozen) while allowing
           vertical scrolling of rows. We'll compute exact `left` offsets dynamically via JS
           so columns remain aligned with headers even when widths change. */
        td.gb-sticky-col,
        td.gb-sticky-col-2,
        td.gb-sticky-avg {
            position: sticky !important;
            left: 0; /* overridden by inline style from JS when available */
            transform: none !important;
            background: white !important;
            z-index: 22 !important; /* below header z-index but above normal cells */
        }
        th.gb-sticky-col,
        th.gb-sticky-col-2,
        th.gb-sticky-avg {
            z-index: 30;
            background: white !important;
            backdrop-filter: none !important;
            color: var(--text-dark) !important;
        }
        .gb-cell { 
            width: 25px;
            min-width: 25px;
            max-width: 25px;
            cursor: pointer;
            transition: all 0.1s;
            user-select: none;
            font-weight: 500;
        }
        .gb-subtype-header {
            width: 12px;
            min-width: 12px;
            max-width: 12px;
            padding-left: 0;
            padding-right: 0;
            position: relative; /* allow absolute-positioned stars */
        }
        .gb-cell:hover { 
            /* highlight any grade/attendance cell with a light grey background on hover */
            background: #f3f4f6;
        }
        .gb-cell.is-active {
            background: #ffffff;
            box-shadow: inset 0 0 0 2px #2563eb;
            border-radius: 6px;
            z-index: 3;
        }
        .gb-cell.is-active:hover {
            background: #ffffff;
        }
        .gb-cell input { 
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            background: transparent;
            text-align: center;
            font-size: 14px;
            color: var(--text-dark);
        }
        .gb-cell input:focus { 
            background: rgba(0,0,0,0.04);
        }
        .gb-avg-col { 
            background: rgba(28, 119, 255, 0.2);
            color: white;
            font-weight: bold;
            width: 30px;
            font-size: 15px;
        }
        .gb-avg-label {
            /* smaller font to fit "Середня оцінка" into the current header cell width */
            display: inline-block;
            font-size: 10px;
            line-height: 1.1;
            white-space: normal;
        }
        .gb-header-clickable { 
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .gb-header-clickable:hover { 
            background: rgba(255, 255, 255, 0.2);
        }
        .col-type-label { 
            display: block;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 25px;
            font-weight: 500;
        }

        .att-cell.absent {
            background-color: rgba(239, 68, 68, 0.2);
            color: #fee2e2;
            font-weight: bold;
        }
        .att-cell.late {
            background-color: rgba(245, 158, 11, 0.2);
            color: #fef3c7;
            font-weight: bold;
        }

        /* Planning tab: keep same journal frame as other tabs */
        .gb-content-planning { background: #ffffff !important; padding: 0 !important; margin: 0 8px 8px 8px !important; border-radius: 0 0 12px 12px !important; }
        .planning-toolbar {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 16px; padding: 12px 16px; background: #fff;
            border-radius: 12px; box-shadow: 0 8px 22px rgba(2,6,23,0.06);
        }
        .planning-toolbar-left { display: flex; align-items: center; gap: 12px; }
        .planning-count {
            font-size: 13px; color: #64748b; font-weight: 500;
            background: #f1f5f9; padding: 6px 12px; border-radius: 8px;
        }
        .btn-planning-add {
            display: inline-flex; align-items: center; gap: 8px;
            background: #1C77FF; color: #fff; border: none; padding: 10px 18px;
            border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer;
            transition: background 0.2s, transform 0.1s;
        }
        .btn-planning-add:hover { background: #1565d8; transform: translateY(-1px); }
        .btn-planning-export {
            display: inline-flex; align-items: center; gap: 6px;
            background: #fff; color: #475569; border: 1px solid #e2e8f0;
            padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
            transition: all 0.2s;
        }
        .btn-planning-export:hover { background: #f1f5f9; color: #1C77FF; border-color: #1C77FF; }
        .planning-export-wrap { position: relative; }
        .planning-export-menu {
            position: absolute; right: 0; top: calc(100% + 6px); background: #fff;
            border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            padding: 6px; min-width: 140px; z-index: 1000; display: none;
            border: 1px solid #e2e8f0;
        }
        .planning-export-menu.open { display: block; }
        .planning-export-menu button {
            width: 100%; background: transparent; border: none; text-align: left;
            padding: 10px 14px; font-size: 14px; cursor: pointer; color: #334155;
            border-radius: 8px; display: flex; align-items: center; gap: 10px;
        }
        .planning-export-menu button:hover { background: #f1f5f9; color: #1C77FF; }
        .planning-table-wrap {
            background: #fff; border-radius: 12px; overflow: hidden;
            border: none; box-shadow: none;
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }
        .planning-grid-head {
            display: grid;
            grid-template-columns: 56px 160px 1.2fr 1fr 56px;
            gap: 12px;
            padding: 12px 12px;
            align-items: center;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.2px;
            border-bottom: 1px solid #e2e8f0;
        }
        .planning-grid-head > div {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .planning-grid-scroll {
            overflow: auto;
            min-height: 0;
            flex: 1;
            scrollbar-gutter: stable;
        }
        .planning-grid-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 12px 12px;
        }
        .planning-row {
            display: grid;
            grid-template-columns: 56px 160px 1.2fr 1fr 56px;
            gap: 12px;
            align-items: center;
        }
        .planning-num {
            font-weight: 700;
            color: #475569;
            text-align: center;
        }
        .planning-datecell {
            color: #475569;
            font-weight: 600;
            line-height: 1.15;
            cursor: pointer;
        }
        .planning-datecell .date-top { font-size: 13px; }
        .planning-datecell .date-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
        .planning-box {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px 12px;
            min-height: 44px;
            display: flex;
            align-items: center;
            color: #0f172a;
            box-shadow: 0 1px 0 rgba(15,23,42,0.02);
        }
        .planning-box.placeholder {
            border-style: dashed;
            color: #94a3b8;
            background: #fbfdff;
        }
        .planning-arrow {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #334155;
            transition: background 0.15s, border-color 0.15s, transform 0.05s;
        }
        .planning-arrow:hover { background: #f8fafc; border-color: #cbd5e1; }
        .planning-arrow:active { transform: translateY(1px); }
        .plan-empty {
            text-align: center;
            padding: 48px 24px !important;
            color: #94a3b8 !important;
        }
        .plan-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: 0.5; }
        .plan-empty span { font-size: 16px; font-weight: 600; display: block; margin-bottom: 6px; }
        .plan-empty p { font-size: 13px; margin: 0; opacity: 0.8; }
        .planning-sidepanel {
            position: fixed;
            top: 0;
            right: 0;
            width: 420px;
            max-width: 92vw;
            height: 100vh;
            background: #ffffff;
            box-shadow: -10px 0 30px rgba(2,6,23,0.18);
            z-index: 100050;
            display: flex;
            flex-direction: column;
            transform: translateX(110%);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: transform 0.28s ease, opacity 0.28s ease;
        }
        .planning-sidepanel.open {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .planning-sidepanel.closing {
            transform: translateX(110%);
            opacity: 0;
            visibility: visible;
            pointer-events: none;
        }
        .planning-sidepanel-header {
            padding: 16px 16px;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .planning-sidepanel-title {
            font-weight: 800;
            color: #0f172a;
        }
        .planning-sidepanel-close {
            border: 1px solid #e2e8f0;
            background: #fff;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #334155;
        }
        .planning-sidepanel-body {
            padding: 12px 16px;
            overflow: auto;
            flex: 1;
            min-height: 0;
        }
        .planning-sidepanel-section-title {
            font-size: 12px;
            font-weight: 800;
            color: #64748b;
            margin: 8px 0 10px;
        }
        .planning-sidepanel-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid #eef2f7;
            border-radius: 12px;
            background: #fff;
            margin-bottom: 10px;
        }
        .planning-sidepanel-item-text {
            font-size: 13px;
            color: #0f172a;
            line-height: 1.3;
            flex: 1;
        }
        .planning-sidepanel-item-actions {
            display: flex;
            gap: 6px;
            flex: 0 0 auto;
        }
        .planning-sidepanel-iconbtn {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            background: #fff;
            cursor: pointer;
            color: #1C77FF;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .planning-sidepanel-footer {
            padding: 12px 16px 16px;
            border-top: 1px solid #eef2f7;
        }
        .planning-sidepanel-input {
            width: 100%;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 12px;
            outline: none;
            font-size: 14px;
            background: #f8fafc;
        }
        .planning-sidepanel-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 12px;
        }
        .planning-sidepanel-save {
            border: none;
            background: #1C77FF;
            color: #fff;
            border-radius: 12px;
            padding: 10px 16px;
            font-weight: 800;
            cursor: pointer;
            opacity: 0.95;
        }
        .planning-sidepanel-save:hover { opacity: 1; }

        .lesson-topic-empty {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 22px 16px;
            text-align: center;
            color: #64748b;
        }
        .lesson-topic-empty-icon {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(28,119,255,0.12);
            color: #1C77FF;
            font-size: 22px;
            box-shadow: 0 8px 18px rgba(28,119,255,0.18);
        }
        .lesson-topic-empty-title {
            font-size: 13px;
            font-weight: 800;
            color: #475569;
        }

        .lesson-topic-muted {
            color: #94a3b8;
            font-size: 13px;
            padding: 8px 0;
            font-weight: 700;
        }

        .lesson-topic-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid #eef2f7;
            border-radius: 14px;
            background: #fff;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .lesson-topic-item:hover { background: #f8fafc; }
        .lesson-topic-item-selected { cursor: default; }
        .lesson-topic-item-selected:hover { background: #fff; }
        .lesson-topic-check {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: rgba(28,119,255,0.12);
            border: 1px solid rgba(28,119,255,0.22);
            color: #1C77FF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex: 0 0 auto;
        }
        .lesson-topic-check.is-empty {
            background: #fff;
            border: 1px solid #cbd5e1;
            color: transparent;
        }
        .lesson-topic-text {
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.25;
            flex: 1;
            min-width: 0;
        }
        .lesson-topic-actions { flex: 0 0 auto; }
        .planning-sidepanel-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(2,6,23,0.35);
            z-index: 100040;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.22s ease;
        }
        .planning-sidepanel-backdrop.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .planning-sidepanel-backdrop.closing {
            opacity: 0;
            visibility: visible;
            pointer-events: none;
        }
        .plan-table, #plan-table {
            width: 100%; border-collapse: collapse; background: #fff;
        }
        .plan-table th, #plan-table th {
            background: #f1f5f9; color: #334155; text-transform: uppercase;
            font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
            padding: 14px 16px; text-align: left; border-bottom: 2px solid #e2e8f0;
        }
        .plan-table td, #plan-table td {
            color: #1e293b; padding: 14px 16px; border-bottom: 1px solid #f1f5f9;
            font-size: 14px; vertical-align: middle;
        }
        .plan-table tr:last-child td, #plan-table tr:last-child td { border-bottom: none; }
        .plan-table tr:hover td, #plan-table tr:hover td { background: #f8fafc; }
        .plan-num { width: 48px; color: #64748b; font-weight: 600; }
        .plan-date { width: 100px; font-weight: 600; color: #1C77FF; cursor: pointer; }
        .plan-date:hover { text-decoration: underline; }
        .plan-topic { font-weight: 500; }
        .plan-hw { color: #64748b; font-size: 13px; max-width: 280px; }
        .plan-actions { width: 90px; }
        .plan-actions .action-btn { margin-right: 4px; }

        .gb-header-content-wrap #gb-actions {
            background: #1C77FF;
            flex-shrink: 0;
        }
        /* Planning tab should keep the same header/subbar controls as other tabs */
        .gb-wrapper.planning-tab-active #tab-planning { display: flex !important; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
        .gb-wrapper.planning-tab-active .gb-subbar-header {
            display: none !important;
        }
        .gb-wrapper.planning-tab-active .gb-subbar-header #school-year-block,
        .gb-wrapper.planning-tab-active .gb-subbar-header .btn-add-column,
        .gb-wrapper.planning-tab-active .gb-subbar-header .zoom-wrapper,
        .gb-wrapper.planning-tab-active .gb-subbar-header .nav-zoom-box {
            display: none !important;
        }
        #gb-actions .btn-primary {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
        }
        #gb-actions .btn-primary:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .gb-content::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .gb-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
        }
        .gb-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }
        .gb-content::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .group-badge {
            display: inline-block;
            background: rgba(56, 189, 248, 0.2);
            color: #7dd3fc;
            font-size: 9px;
            padding: 1px 5px;
            border-radius: 4px;
            margin-top: 3px;
            font-weight: 600;
        }

        .grade-with-comment {
            position: relative;
            background: rgba(59, 130, 246, 0.15) !important;
        }
        .grade-with-comment::after {
            content: "💬";
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 8px;
            color: #93c5fd;
        }

        .day-selector { display: flex; gap: 10px; margin-bottom: 20px; }
        .day-pill { padding: 8px 20px; background: rgba(255,255,255,0.2); color: white; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); transition: 0.2s; }
        .day-pill:hover { background: rgba(255,255,255,0.3); }
        .day-pill.active { background: white; color: var(--primary-blue); }

        .schedule-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; position: relative; }
        .time-col { width: 100px; padding-top: 24px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.9); flex-shrink: 0; }
        .schedule-card { 
            flex-grow: 1; padding: 20px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); 
            transition: transform 0.2s; position: relative;
            min-height: 120px;
        }
        .schedule-card.clickable {
            cursor: pointer;
            position: relative;
        }
        .schedule-card.clickable:hover::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.1);
            border-radius: 24px;
        }
        .schedule-card:hover { transform: translateY(-2px); }
        .schedule-card.blue { background: rgba(255,255,255,0.2); color:white; }
        .schedule-card.white { background: white; color: var(--text-dark); }
        .schedule-delete { 
            position: absolute; top: 15px; right: 15px; color: inherit; opacity: 0.5; 
            cursor: pointer; transition: 0.2s; z-index: 5;
        }
        .schedule-delete:hover { opacity: 1; color: var(--danger-red); }
        
        .schedule-edit {
            position: absolute; 
            top: 15px; 
            right: 45px; 
            color: inherit; 
            opacity: 0.5; 
            cursor: pointer; 
            transition: 0.2s; 
            z-index: 5;
        }
        .schedule-edit:hover { 
            opacity: 1; 
            color: var(--primary-blue); 
        }
        
        .subst-badge {
            position: absolute;
            top: 10px;
            right: 45px;
            background: var(--warning-yellow);
            color: #333;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 10px;
            font-weight: bold;
            z-index: 5;
        }
        .subst-info {
            font-size: 11px;
            color: var(--warning-yellow);
            margin-top: 5px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .news-item { border-left: 4px solid var(--primary-blue); padding-left: 16px; margin-bottom: 24px; }
        .news-date { font-size: 12px; color: #888; margin-bottom: 4px; font-weight: 600; text-transform: uppercase; }
        .news-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #111; }
        .news-content { font-size: 14px; line-height: 1.5; color: #4b5563; }

        .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

        body.modal-open {
            overflow: hidden;
        }

        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px);
            z-index: 6000; display: none; justify-content: center; align-items: center;
            opacity: 0; transition: opacity 0.3s;
            pointer-events: none;
        }
        .modal-overlay.open { display: flex; opacity: 1; pointer-events: auto; }
        .modal-overlay.closing { display: flex; opacity: 0; pointer-events: none; }
        
        .modal-window {
            background: #ffffff; width: 500px; max-width: 90%; max-height: 90vh; overflow-y: auto;
            border-radius: 18px; padding: 26px; position: relative;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
            color: var(--text-dark); transform: translateY(-24px); opacity: 0;
            transition: transform 0.28s ease, opacity 0.28s ease;
        }
        .modal-overlay.open .modal-window { transform: translateY(0); opacity: 1; }
        .modal-overlay.closing .modal-window { transform: translateY(-24px); opacity: 0; }

/* Visual grouping: make the № / ПІБ / Середня columns appear as a single block
   while preserving their widths, sticky behavior and the separator between
   the student name and average columns. This is purely visual and does not
   change DOM structure or JS column indexes. */
#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg,
#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg {
    background: #ffffff !important;
    background-clip: padding-box;
}

/* Subtle rounded outer border around the three frozen columns */
#gradebook-view .gb-table thead tr th.gb-sticky-col:first-of-type {
    border-radius: 8px 0 0 8px;
    border: 1px solid rgba(229,231,235,0.95) !important;
    border-right: none !important;
}
#gradebook-view .gb-table tbody tr td.gb-sticky-col:first-of-type {
    border-left: 1px solid rgba(229,231,235,0.95) !important;
    border-right: none !important;
}
#gradebook-view .gb-table thead tr th.gb-sticky-avg:last-of-type {
    border-radius: 0 8px 8px 0;
    border: 1px solid rgba(229,231,235,0.95) !important;
    border-left: none !important;
}
#gradebook-view .gb-table tbody tr td.gb-sticky-avg:last-of-type {
    border-right: 1px solid rgba(229,231,235,0.95) !important;
    border-left: none !important;
}

/* Preserve the thin separator between the name and average columns (keep visual stripe) */
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-col-2 {
    border-left: none !important;
    border-right: 1px solid rgba(229,231,235,0.6) !important;
}

/* Do not override widths or sticky offsets — keep current behaviour */
#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table th.gb-sticky-col-2,
#gradebook-view .gb-table th.gb-sticky-avg {
    background-clip: padding-box;
}


        /* Popover-style modals should animate too */
        .modal-overlay.open .grade-popover-win,
        .modal-overlay.open .schedule-popover-win {
            transform: translateY(0);
            opacity: 1;
            transition: transform 0.22s ease, opacity 0.22s ease;
        }
        .modal-overlay .grade-popover-win,
        .modal-overlay .schedule-popover-win {
            transform: translateY(-18px);
            opacity: 0;
        }
        .modal-overlay.closing .grade-popover-win,
        .modal-overlay.closing .schedule-popover-win {
            transform: translateY(-18px);
            opacity: 0;
        }

        .modal-overlay .modal {
            transform: translateY(-24px);
            opacity: 0;
            transition: transform 0.28s ease, opacity 0.28s ease;
        }
        .modal-overlay.open .modal { transform: translateY(0); opacity: 1; }
        .modal-overlay.closing .modal { transform: translateY(-24px); opacity: 0; }

        .modal-overlay .progress-modal {
            transform: translateY(-24px);
            opacity: 0;
            transition: transform 0.28s ease, opacity 0.28s ease;
        }
        .modal-overlay.open .progress-modal { transform: translateY(0); opacity: 1; }
        .modal-overlay.closing .progress-modal { transform: translateY(-24px); opacity: 0; }

        .modal-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
        .modal-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #0f172a; }
        .close-btn { background: rgba(15, 23, 42, 0.04); border: none; font-size: 22px; cursor: pointer; color: rgba(15, 23, 42, 0.55); transition: background 0.2s, color 0.2s; width: 36px; height: 36px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
        .close-btn:hover { background: rgba(15, 23, 42, 0.08); color: rgba(15, 23, 42, 0.75); }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid rgba(15, 23, 42, 0.08);
        }
        .modal-window .btn-cancel,
        .modal-window .btn-submit {
            appearance: none;
            border: none;
            border-radius: 999px;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
            user-select: none;
        }
        .modal-window .btn-cancel {
            background: #f1f5f9;
            color: #0f172a;
        }

        .mriia-hw-modal {
            width: 560px;
            max-width: 92vw;
        }

        .mriia-hw-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        @media (max-width: 560px) {
            .mriia-hw-grid { grid-template-columns: 1fr; }
        }

        .mriia-hw-filebox {
            border: 1px dashed rgba(15, 23, 42, 0.18);
            background: rgba(28, 119, 255, 0.06);
            border-radius: 14px;
            padding: 16px;
            width: 140px;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
            user-select: none;
        }

        .mriia-hw-filebox:hover {
            background: rgba(28, 119, 255, 0.09);
            border-color: rgba(28, 119, 255, 0.35);
            transform: translateY(-1px);
        }

        .mriia-hw-fileicon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1C77FF;
        }

        .mriia-hw-filelabel {
            font-size: 12px;
            font-weight: 800;
            color: #1C77FF;
            text-align: center;
            line-height: 1.2;
        }
        .modal-window .btn-cancel:hover { background: #e9eef6; }
        .modal-window .btn-submit {
            background: var(--primary-blue);
            color: #ffffff;
            box-shadow: 0 12px 24px rgba(28, 119, 255, 0.22);
        }
        .modal-window .btn-submit:hover { box-shadow: 0 16px 30px rgba(28, 119, 255, 0.28); }
        .modal-window .btn-cancel:active,
        .modal-window .btn-submit:active { transform: translateY(1px); }
        .modal-window .btn-cancel:focus-visible,
        .modal-window .btn-submit:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(28, 119, 255, 0.20);
        }
        .modal-window .btn-submit:disabled,
        .modal-window .btn-cancel:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            box-shadow: none;
        }

        #toast-container {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 250000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }
        .toast {
            min-width: 280px;
            max-width: min(460px, calc(100vw - 40px));
            background: #ffffff;
            color: #111827;
            border-radius: 999px;
            padding: 14px 16px;
            border: 1px solid rgba(17, 24, 39, 0.10);
            box-shadow: 0 18px 30px rgba(0,0,0,0.16);
            transform: translateY(10px);
            opacity: 0;
            transition: transform 0.22s ease, opacity 0.22s ease;
            pointer-events: auto;
        }
        .toast.open {
            transform: translateY(0);
            opacity: 1;
        }
        .toast-icon {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .toast-icon svg {
            width: 16px;
            height: 16px;
            display: block;
        }
        .toast.success .toast-icon { background: #16a34a; }
        .toast.error .toast-icon { background: #111827; }
        .toast.success .toast-icon svg,
        .toast.error .toast-icon svg { color: #ffffff; }
        .toast-close {
            appearance: none;
            border: none;
            background: transparent;
            color: rgba(17, 24, 39, 0.55);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            margin-left: 6px;
        }
        .toast-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        .toast-text {
            font-size: 16px;
            line-height: 1.3;
            font-weight: 600;
            flex: 1;
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        .form-group { margin-bottom: 16px; }
        .form-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #374151; }
        .form-input, .form-select, .form-textarea {
            width: 100%; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px;
            font-size: 14px; outline: none; transition: border-color 0.2s; background: white;
        }

        /* Fullscreen 'user not found' screen */
        #notfound-screen { position: fixed; inset: 0; background: var(--primary-blue); color: #fff; display: none; z-index: 3000; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
        #notfound-screen.open { display:flex; }
        #notfound-screen h2 { font-size:28px; font-weight:800; }
        #notfound-screen p { font-size:16px; opacity:0.95; }
        #notfound-screen .nf-btn { margin-top:18px; padding:12px 20px; border-radius:12px; background:#fff; color:var(--primary-blue); font-weight:700; border:none; cursor:pointer; }
        .form-textarea { resize: vertical; min-height: 80px; }
        .form-input:focus, .form-select:focus { border-color: var(--primary-blue); }
        
        /* Коло для вводу оцінки в модальному вікні */
        .grade-circle-wrapper {
            width: 120px;
            height: 120px;
            border-radius: 999px;
            border: 3px solid var(--primary-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            margin-top: 4px;
            background: #f9fafb;
        }
        .grade-circle-input {
            width: 80px;
            height: 80px;
            border-radius: 999px;
            border: none;
            text-align: center;
            font-size: 32px;
            font-weight: 700;
            outline: none;
            background: white;
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
        }
        .grade-circle-input::placeholder {
            font-size: 12px;
            font-weight: 500;
        }

        /* Grade popover (1:1 like screenshot) */
        #modal-grade-edit.modal-overlay { z-index: 200000; }
        #modal-grade-edit.open { background: transparent !important; backdrop-filter: none !important; }
        #modal-grade-edit .grade-popover-win { border-radius: 20px; overflow: hidden; box-shadow: none; border: none; padding: 0; display:flex; flex-direction: column; max-height: 70vh; }
        #modal-grade-edit .grade-popover-top { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px 6px 14px; background: #ffffff; }
        #modal-grade-edit .grade-popover-top-left { display:flex; align-items:center; gap: 10px; min-width: 0; flex: 1 1 auto; }
        #modal-grade-edit .grade-popover-date { background: #EAF2FF; color: #1C77FF; font-weight: 900; font-size: 12px; padding: 5px 9px; border-radius: 12px; }
        #modal-grade-edit .grade-popover-title { font-weight: 900; font-size: 14px; color: #0f172a; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
        #modal-grade-edit .grade-popover-trash { width: 30px; height: 30px; border-radius: 12px; border: 1px solid #FECACA; background: #ffffff; color:#EF4444; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex: 0 0 auto; }
        #modal-grade-edit .grade-popover-trash:hover { background: #FEF2F2; }
        #modal-grade-edit .grade-popover-close { width: 32px; height: 32px; border-radius: 12px; border: none; background: transparent; color:#0f172a; font-size: 20px; cursor:pointer; line-height: 1; }
        #modal-grade-edit .grade-popover-body { padding: 8px 14px 12px 14px; background: #F8FAFC; flex: 1 1 auto; overflow-y: auto; }
        #modal-grade-edit .grade-popover-student { display:flex; align-items:center; gap: 12px; margin-top: 6px; }
        #modal-grade-edit .grade-popover-avatar { width: 42px; height: 42px; border-radius: 14px; background: #E5E7EB; color:#0f172a; display:flex; align-items:center; justify-content:center; font-weight: 900; }
        #modal-grade-edit .grade-popover-student-name { font-weight: 900; font-size: 15px; color:#0f172a; }
        #modal-grade-edit .grade-popover-gr { margin-left: auto; background: #EEF2FF; border: 1px solid #D7E5FF; color:#1C77FF; font-weight: 900; font-size: 12px; padding: 6px 10px; border-radius: 999px; display:none; }
        #modal-grade-edit .grade-popover-circle-wrap { display:flex; justify-content:center; margin: 10px 0 8px 0; }
        #modal-grade-edit .grade-popover-circle { width: 90px; height: 90px; border-radius: 999px; background: #F1F5FF; border: 3px solid #D7E5FF; display:flex; align-items:center; justify-content:center; }
        #modal-grade-edit .grade-popover-circle-input { width: 52px; height: 82px; border: none; outline: none; background: transparent; text-align:center; font-weight: 900; font-size: 40px; color:#0f172a; }
        #modal-grade-edit .grade-popover-toggle-row { display:flex; align-items:center; justify-content:center; gap: 12px; margin-bottom: 12px; }
        #modal-grade-edit .grade-popover-toggle-text { font-weight: 800; color:#334155; font-size: 13px; }
        #modal-grade-edit .grade-popover-switch { position: relative; display:inline-flex; width: 48px; height: 28px; }
        #modal-grade-edit .grade-popover-switch input { opacity:0; width:0; height:0; }
        #modal-grade-edit .grade-popover-slider { position:absolute; inset:0; background:#E2E8F0; border-radius:999px; transition: all .2s; }
        #modal-grade-edit .grade-popover-slider:before { content:''; position:absolute; height: 22px; width: 22px; left: 3px; top: 3px; background:white; border-radius: 999px; box-shadow: 0 3px 10px rgba(2,6,23,0.18); transition: all .2s; }
        #modal-grade-edit .grade-popover-switch input:checked + .grade-popover-slider { background:#1C77FF; }
        #modal-grade-edit .grade-popover-switch input:checked + .grade-popover-slider:before { transform: translateX(20px); }
        /* Tight quick-grade pills to match screenshot: small pills, minimal gaps */
        #modal-grade-edit .grade-popover-pills { display: flex; justify-content: center; flex-wrap: nowrap; align-items: center; }
        #modal-grade-edit .grade-popover-pill { border: 1px solid #E2E8F0; background: #F8FAFC; color: #0f172a; border-radius: 999px; font-weight: 900; font-size: 10px; line-height: 1; cursor: pointer; margin: 0; flex: 0 0 auto; white-space: nowrap; }
        #modal-grade-edit .grade-popover-pill.active { background:#EAF2FF; border-color:#BBD7FF; color:#1C77FF; }
        #modal-grade-edit .grade-popover-divider { height: 1px; background: #E2E8F0; margin: 12px 0; }
        #modal-grade-edit .grade-popover-section-title { font-weight: 900; color:#0f172a; font-size: 13px; margin-bottom: 8px; text-align:left; }
        #modal-grade-edit .grade-popover-work { display:flex; justify-content:center; gap: 12px; }
        #modal-grade-edit .grade-popover-work-dot { width: 48px; height: 48px; border-radius: 16px; border: 2px solid #D7E5FF; background: #EEF4FF; cursor:pointer; }
        #modal-grade-edit .grade-popover-work-dot.active { background: #DCEBFF; border-color: #9FC2FF; }
        #modal-grade-edit .grade-popover-row { display:flex; align-items:center; justify-content:space-between; padding: 7px 4px; cursor: pointer; color:#0f172a; }
        #modal-grade-edit .grade-popover-row-title { font-weight: 900; font-size: 13px; }
        #modal-grade-edit .grade-popover-row-chevron { font-weight: 900; color:#64748b; }
        #modal-grade-edit .grade-popover-textarea { width: 100%; border-radius: 16px; border: 1px solid #E2E8F0; padding: 9px 10px; font-weight: 700; color:#0f172a; resize: none; background: #ffffff; }
        #modal-grade-edit .grade-popover-actions { background: #F8FAFC; padding: 8px 12px 12px 12px; flex: 0 0 auto; }
        #modal-grade-edit .grade-popover-submit { width: 100%; height: 36px; border: none; border-radius: 999px; background: #1C77FF; color:#fff; font-weight: 900; font-size: 13px; cursor:pointer; }
        #modal-grade-edit .grade-popover-submit.enabled { filter: none; opacity: 1; }
        #modal-grade-edit .grade-popover-submit:not(.enabled) { opacity: .55; }
        #modal-grade-edit .grade-popover-hidden { display:none; }

        #modal-grade-edit .grade-gr-menu { display:none; margin-top: 10px; padding: 10px; border-radius: 16px; border: 1px solid #E2E8F0; background: #ffffff; }
        #modal-grade-edit .grade-gr-menu.open { display:block; }
        #modal-grade-edit .grade-gr-menu-items { display:flex; gap: 8px; flex-wrap: wrap; }
        #modal-grade-edit .grade-gr-item { border: 1px solid #E2E8F0; background:#F8FAFC; color:#0f172a; padding: 7px 11px; border-radius: 999px; font-weight: 900; font-size: 12px; cursor:pointer; }

        /* Compact type select in grade popover */
        #modal-grade-edit #grade-type-select.form-select { height: 28px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
        #modal-grade-edit .grade-gr-item.active { background:#EAF2FF; border-color:#BBD7FF; color:#1C77FF; }

        #modal-schedule-lesson.modal-overlay { z-index: 200000; }
        /* Ensure role-edit modal appears above fixed sidebar and other overlays */
        #modal-role-edit.modal-overlay { z-index: 200000; }
        #modal-schedule-lesson.open { background: transparent !important; backdrop-filter: none !important; }
        #modal-schedule-lesson .schedule-popover-win { border-radius: 20px; overflow: hidden; box-shadow: none; border: none; padding: 0; display:flex; flex-direction: column; max-height: 70vh; }
        #modal-schedule-lesson .schedule-popover-top { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px 6px 14px; background: #ffffff; }
        #modal-schedule-lesson .schedule-popover-top-left { display:flex; align-items:center; gap: 10px; min-width: 0; flex: 1 1 auto; }
        #modal-schedule-lesson .schedule-popover-date { background: #EAF2FF; color: #1C77FF; font-weight: 900; font-size: 12px; padding: 5px 9px; border-radius: 12px; }
        #modal-schedule-lesson .schedule-popover-title { font-weight: 900; font-size: 14px; color: #0f172a; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
        #modal-schedule-lesson .schedule-popover-close { width: 32px; height: 32px; border-radius: 12px; border: none; background: transparent; color:#0f172a; font-size: 20px; cursor:pointer; line-height: 1; }
        #modal-schedule-lesson .schedule-popover-body { padding: 10px 14px 12px 14px; background: #ffffff; flex: 1 1 auto; overflow-y: auto; }
        #modal-schedule-lesson .schedule-popover-classline { font-weight: 900; font-size: 18px; color:#0f172a; margin-top: 2px; }
        #modal-schedule-lesson .schedule-popover-subjectline { font-weight: 800; font-size: 14px; color:#0f172a; margin-top: 8px; }
        #modal-schedule-lesson .schedule-popover-linkrow { display:flex; align-items:center; gap: 10px; margin-top: 12px; font-weight: 800; color:#1C77FF; cursor: pointer; user-select: none; }
        #modal-schedule-lesson .schedule-popover-linkrow i { width: 18px; min-width: 18px; text-align:center; }
        #modal-schedule-lesson .schedule-popover-divider { height: 1px; border-top: 1px dashed #E2E8F0; margin: 14px 0; }
        #modal-schedule-lesson .schedule-popover-section-title { font-weight: 900; color:#0f172a; font-size: 14px; margin-bottom: 8px; text-align:left; }
        #modal-schedule-lesson .schedule-popover-topic { font-weight: 700; color:#0f172a; font-size: 13px; line-height: 1.25; }
        #modal-schedule-lesson .schedule-popover-topic::before { content: '•'; margin-right: 8px; color:#1C77FF; }
        #modal-schedule-lesson .schedule-popover-chipwrap { display:flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
        #modal-schedule-lesson .schedule-popover-chip { display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; background: #F8FAFC; border: 1px solid #E2E8F0; color:#0f172a; font-weight: 800; font-size: 12px; max-width: 100%; }
        #modal-schedule-lesson .schedule-popover-chip i { color:#64748b; }
        #modal-schedule-lesson .schedule-popover-chip span { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
        #modal-schedule-lesson .schedule-popover-actions { background: #ffffff; padding: 10px 14px 14px 14px; flex: 0 0 auto; }
        #modal-schedule-lesson .schedule-popover-submit { width: 100%; height: 44px; border: none; border-radius: 16px; background: #1C77FF; color:#fff; font-weight: 900; font-size: 14px; cursor:pointer; }
        #modal-schedule-lesson .schedule-popover-submit:hover { filter: brightness(0.98); }

        /* Home page responsiveness */
        @media (max-width: 1100px) {
            .home-shell { grid-template-columns: 1fr; }
            .home-side-widgets { width: 100%; }
        }
        .grade-group-pill {
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 12px;
            border: 1px solid #e5e7eb;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f9fafb;
        }
        .grade-group-pill input {
            margin: 0;
        }
        .grade-group-pill.active {
            border-color: var(--primary-blue);
            background: #eff6ff;
            color: var(--primary-blue);
        }

        /* Зірочка автопідрахунку */
        .auto-star-wrapper {
            position: relative;
            display: inline-block;
        }
        .auto-star-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 18px;
            height: 18px;
            border-radius: 6px;
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #2563eb;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
        }
        .schedule-view-label {
            font-weight: 600;
            font-size: 14px;
        }
        
        .journal-filters {
            margin-bottom: 20px;
            display: inline-flex; /* shrink to fit content */
            gap: 0;
            align-items: center;
            padding: 0;
            padding-left: 10px;
            background: transparent;
            border: none;
            border-radius: 0;
            overflow: visible;
            width: auto;
            white-space: nowrap;
            flex-wrap: nowrap;
        }
        .journal-tab {
            font-size: 14,5px; /* slightly larger label for Мої предмети / Мій клас / Класи / Вчителі / Позакласна діяльність */
            font-weight: 700;
            cursor: pointer;
        }
        .filter-btn {
            padding: 8px 10px;
            height: 34px;
            min-height: 34px;
            border-radius: 0;
            border: none;
            background: transparent;
            color: white;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.15s;
            outline: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .filter-btn:hover {
            background: transparent;
            transform: none;
        }
        .filter-btn.active {
            background: transparent;
            color: white;
            box-shadow: none;
            text-decoration: underline;
            text-underline-offset: 8px;
            text-decoration-thickness: 2px;
        }

        #journals-tabs-wrap {
            padding: 0 !important;
            margin: 0 !important;
        }

        .journal-subfilters {
            margin-top: 0px;
            margin-bottom: 10px;
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 16px;
            padding: 12px;
            display: none;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .journal-subfilters.open { display: flex; }
        .journal-subfilters .jsf-select {
            height: 40px;
            min-width: 220px;
            padding: 0 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.16);
            color: #ffffff;
            font-weight: 800;
            outline: none;
            appearance: none;
        }
        .journal-subfilters .jsf-select option {
            color: #0f172a;
        }

        #journals-class-subfilters {
            flex-wrap: nowrap;
            width: 100%;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 16px;
            padding: 10px 12px;
            gap: 12px;
            justify-content: flex-start;
        }
        #journals-class-subfilters .jsf-select {
            flex: 0 0 220px;
            width: 220px;
            max-width: 220px;
            min-width: 220px;
            padding: 0 12px;
            height: 34px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.20);
            background: rgba(255,255,255,0.12);
            font-size: 12.5px;
            font-weight: 800;
        }

        @media (max-width: 520px) {
            #journals-class-subfilters { flex-wrap: wrap; }
            #journals-class-subfilters .jsf-select {
                flex: 1 1 100%;
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
        }

        .parallel-header {
            grid-column: 1 / -1;
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
            color: white;
        }

        @keyframes slideIn {
            0% { opacity: 0; transform: translateX(18px) scale(0.995); }
            60% { opacity: 0.98; transform: translateX(-6px) scale(1.002); }
            100% { opacity: 1; transform: translateX(0) scale(1); }
        }
        #sync-indicator {
            transition: background-color 0.3s, transform 0.3s;
            cursor: pointer;
        }
        #sync-indicator:hover {
            transform: scale(1.1);
        }
        .key-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 13px;
            margin-top: 10px;
        }
        .key-status.connected {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }
        .key-status.disconnected {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }
        .key-status.local {
            background: #fef3c7;
            color: #92400e;
            border: 1px solid #fde68a;
        }

        .sync-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 999;
            transition: all 0.3s;
        }
        .sync-indicator.connected {
            background: #10B981;
            color: white;
        }
        .sync-indicator.disconnected {
            background: #EF4444;
            color: white;
        }
        .sync-indicator.local {
            background: #F59E0B;
            color: white;
        }
        .sync-indicator.syncing {
            background: #3B82F6;
            color: white;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 rgba(59,130,246,0); }
            50% { transform: scale(1.04); box-shadow: 0 10px 30px rgba(59,130,246,0.12); }
            100% { transform: scale(1); box-shadow: 0 0 0 rgba(59,130,246,0); }
        }

        .sync-status-message {
            position: fixed;
            top: 20px;
            right: 20px;
            max-width: 300px;
            z-index: 10000;
            animation: slideIn 0.3s ease;
        }
        .sync-status-message > div {
            background: #3B82F6;
            color: white;
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sync-status-message .success {
            background: #10B981;
        }
        .sync-status-message .warning {
            background: #F59E0B;
        }
        .sync-status-message .error {
            background: #EF4444;
        }
        .sync-status-message .info {
            background: #3B82F6;
        }
        
        .bin-test-success {
            background: #d1fae5;
            color: #065f46;
            padding: 8px;
            border-radius: 6px;
            margin-top: 5px;
            font-size: 12px;
        }
        .bin-test-warning {
            background: #fef3c7;
            color: #92400e;
            padding: 8px;
            border-radius: 6px;
            margin-top: 5px;
            font-size: 12px;
        }
        .bin-test-error {
            background: #fee2e2;
            color: #991b1b;
            padding: 8px;
            border-radius: 6px;
            margin-top: 5px;
            font-size: 12px;
        }
        
        .copy-btn {
            background: #f3f4f6;
            border: none;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.2s;
        }
        .copy-btn:hover {
            background: #e5e7eb;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .stats-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .stats-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #374151;
        }
        .stats-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary-blue);
        }
        .stats-subvalue {
            font-size: 14px;
            color: #6B7280;
            margin-top: 5px;
        }
        .stats-chart {
            height: 200px;
            margin-top: 15px;
        }

        .dash-wrap { padding: 22px; }
        .dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid #e5e7eb; }
        .dash-title { display:flex; flex-direction: column; gap: 6px; }
        .dash-title h3 { margin: 0; font-size: 18px; font-weight: 900; color: #0f172a; }
        .dash-title .dash-sub { font-size: 13px; font-weight: 700; color: #64748b; }
        .dash-actions { display:flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .dash-pill { padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; }

        .dash-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 18px 22px 22px; }
        .dash-col-12 { grid-column: span 12; }
        .dash-col-8 { grid-column: span 8; }
        .dash-col-6 { grid-column: span 6; }
        .dash-col-4 { grid-column: span 4; }
        .dash-col-3 { grid-column: span 3; }
        @media (max-width: 1100px) {
            .dash-col-8 { grid-column: span 12; }
            .dash-col-6 { grid-column: span 12; }
            .dash-col-4 { grid-column: span 12; }
            .dash-col-3 { grid-column: span 6; }
        }
        @media (max-width: 640px) {
            .dash-col-3 { grid-column: span 12; }
        }

        .kpi-card { background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); border: 1px solid #e5e7eb; border-radius: 18px; padding: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
        .kpi-top { display:flex; align-items: center; justify-content: space-between; gap: 10px; }
        .kpi-label { font-size: 12px; font-weight: 900; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
        .kpi-icon { width: 34px; height: 34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; }
        .kpi-value { margin-top: 10px; font-size: 28px; font-weight: 950; color: #0f172a; line-height: 1.1; }
        .kpi-meta { margin-top: 6px; font-size: 12px; font-weight: 800; color: #64748b; display:flex; gap: 10px; flex-wrap: wrap; }
        .kpi-good { color: #047857; background: #d1fae5; border: 1px solid #a7f3d0; padding: 4px 10px; border-radius: 999px; }
        .kpi-warn { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; padding: 4px 10px; border-radius: 999px; }
        .kpi-bad { color: #991b1b; background: #fee2e2; border: 1px solid #fecaca; padding: 4px 10px; border-radius: 999px; }

        .dash-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
        .dash-card-head { padding: 14px 16px; display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eef2f7; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); }
        .dash-card-title { font-size: 14px; font-weight: 950; color: #0f172a; margin: 0; }
        .dash-card-sub { font-size: 12px; font-weight: 800; color: #64748b; margin-top: 4px; }
        .dash-card-body { padding: 14px 16px; }

        .dash-search { width: min(360px, 100%); padding: 9px 12px; border-radius: 12px; border: 1px solid #e5e7eb; background: #ffffff; color: #0f172a; font-size: 13px; font-weight: 800; outline: none; }
        .dash-search:focus { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12); }
        .dash-search::placeholder { color: #94a3b8; font-weight: 800; }

        .dash-table-wrap { overflow: auto; }
        .dash-table { width: 100%; border-collapse: collapse; min-width: 620px; }
        .dash-table th { text-align: left; padding: 12px 12px; background: #f8fafc; color: #64748b; font-size: 11px; text-transform: uppercase; font-weight: 950; border-bottom: 1px solid #e5e7eb; letter-spacing: 0.06em; position: sticky; top: 0; z-index: 1; }
        .dash-table td { padding: 12px 12px; border-bottom: 1px solid #eef2f7; font-size: 13px; font-weight: 800; color: #0f172a; }
        .dash-table tr:hover td { background: #f8fbff; }

        .mini-badge { display:inline-flex; align-items:center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; border: 1px solid #e5e7eb; background: #ffffff; color: #0f172a; white-space: nowrap; }
        .mini-dot { width: 8px; height: 8px; border-radius: 999px; background: #94a3b8; }
        .mini-dot.good { background: #10b981; }
        .mini-dot.warn { background: #f59e0b; }
        .mini-dot.bad { background: #ef4444; }

        .svg-chart { width: 100%; height: auto; display:block; }
        .chart-legend { display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
        .chart-legend .mini-badge { background: #f8fafc; }

        .problem-item { display:flex; align-items:flex-start; justify-content: space-between; gap: 14px; padding: 12px 12px; border-radius: 14px; border: 1px solid #eef2f7; background: #ffffff; }
        .problem-item + .problem-item { margin-top: 10px; }
        .problem-left { display:flex; flex-direction: column; gap: 6px; }
        .problem-title { font-size: 13px; font-weight: 950; color: #0f172a; }
        .problem-desc { font-size: 12px; font-weight: 800; color: #64748b; line-height: 1.35; }
        .problem-right { display:flex; flex-direction: column; align-items: flex-end; gap: 6px; }
        .problem-priority { font-size: 12px; font-weight: 950; }

        .dash-spark { margin-top: 10px; width: 100%; height: 40px; }

        .calendar-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 30px;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .calendar-nav-btn {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .calendar-nav-btn:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .calendar-month-year {
            font-size: 24px;
            font-weight: 700;
            color: white;
            text-align: center;
            flex-grow: 1;
        }

        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            margin-bottom: 15px;
        }

        .weekday {
            text-align: center;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            padding: 10px 0;
        }

        .calendar-days-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
        }

        .calendar-day {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 15px 10px;
            min-height: 120px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: all 0.2s;
            color: white;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .calendar-day:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        .calendar-day.empty {
            background: transparent;
            border: none;
            cursor: default;
        }

        /* Align home lesson subject width and baseline with the class pill (bubble) */
        .home-lesson-header {
            display: flex;
            align-items: center; /* vertical baseline alignment */
            gap: 12px;
        }
        .home-class-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 22px; /* consistent with subject */
            flex: 0 0 auto;
        }
        .home-class-pill, .home-class-pill * {
            line-height: 22px;
        }
        .home-subject {
            display: block; /* allow width control and wrapping */
            line-height: 22px; /* match pill baseline */
            margin: 0;
            padding: 0;
            flex: 1 1 auto;
            min-width: 0; /* allow flex to shrink on small screens */
        }
        @media (max-width: 520px) {
            .home-lesson-header { gap: 8px; }
        }

        .calendar-day.empty:hover {
            background: transparent;
            transform: none;
        }

        .calendar-day.today {
            background: rgba(28, 119, 255, 0.2);
            border-color: rgba(28, 119, 255, 0.4);
        }

        .day-number {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 8px;
            align-self: flex-start;
        }

        .day-events {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
            overflow: hidden;
        }

        .event-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
        }

        .event-dot.holiday {
            background-color: var(--holiday-color);
        }

        .event-dot.meeting {
            background-color: var(--meeting-color);
        }

        .event-dot.excursion {
            background-color: var(--excursion-color);
        }

        .event-dot.other {
            background-color: var(--other-color);
        }

        .day-event {
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 8px;
            margin-top: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
        }

        .day-event.holiday {
            background: rgba(16, 185, 129, 0.2);
            color: #10B981;
        }

        .day-event.meeting {
            background: rgba(59, 130, 246, 0.2);
            color: #3B82F6;
        }

        .day-event.excursion {
            background: rgba(139, 92, 246, 0.2);
            color: #8B5CF6;
        }

        .day-event.other {
            background: rgba(245, 158, 11, 0.2);
            color: #F59E0B;
        }

        .events-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 11px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .events-list-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .events-list-title {
            font-size: 20px;
            font-weight: 700;
            color: white;
            margin-bottom: 20px;
        }

        .event-list-item {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            transition: all 0.2s;
        }

        .event-list-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        .event-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .event-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .event-type-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .event-type-badge.holiday {
            background: rgba(16, 185, 129, 0.2);
            color: #10B981;
        }

        .event-type-badge.meeting {
            background: rgba(59, 130, 246, 0.2);
            color: #3B82F6;
        }

        .event-type-badge.excursion {
            background: rgba(139, 92, 246, 0.2);
            color: #8B5CF6;
        }

        .event-type-badge.other {
            background: rgba(245, 158, 11, 0.2);
            color: #F59E0B;
        }

        .event-date {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 10px;
        }

        .event-description {
            font-size: 14px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 15px;
        }

        .event-class {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            margin-top: 10px;
        }

        .event-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .no-events {
            text-align: center;
            padding: 40px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 16px;
        }

        .calendar-filter {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-chip {
            padding: 8px 16px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .filter-chip:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .filter-chip.active {
            background: white;
            color: var(--primary-blue);
        }

        .schedule-filter-panel {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .schedule-filter-panel select {
            padding: 10px 15px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.15);
            color: white;
            font-weight: 600;
            min-width: 200px;
            cursor: pointer;
            outline: none;
        }

        .schedule-filter-panel select option {
            background: white;
            color: var(--text-dark);
        }

        .schedule-filter-panel button {
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.15);
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .schedule-filter-panel button:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        #schedule .section-header {
            margin-bottom: 0;
        }
        #schedule .section-title {
            font-size: 26px;
        }
        .schedule-frame {
            background: #0F68F8;
            border-radius: 18px;
            padding: 6px 12px;
            margin-top: -10px;
        }
        .schedule-top-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-bottom: 6px;
        }
        .schedule-center-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        .schedule-left-controls { flex: 1; }
        .schedule-left-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .schedule-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.10);
            color: rgba(255,255,255,0.92);
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
        }
        .schedule-pill.primary {
            background: rgba(255,255,255,0.16);
        }
        .schedule-pill.active {
            background: rgba(255,255,255,0.92);
            color: #1c77ff;
            border-color: rgba(255,255,255,0.92);
            box-shadow: 0 10px 24px rgba(2,6,23,0.10);
        }
        .schedule-week-nav {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 34px;
            padding: 0 10px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.10);
            color: rgba(255,255,255,0.92);
            font-weight: 800;
            font-size: 13px;
        }
        .schedule-week-nav button {
            width: 26px;
            height: 26px;
            border-radius: 8px;
            border: none;
            background: rgba(255,255,255,0.20);
            color: white;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .schedule-week-label {
            white-space: nowrap;
            font-weight: 800;
        }

        .schedule-week-picker {
            position: absolute;
            z-index: 100000;
            width: 260px;
            background: #1c77ff;
            border-radius: 14px;
            box-shadow: 0 14px 40px rgba(2,6,23,0.25);
            padding: 12px;
            color: #fff;
            display: none;
            left: 50%;
            top: calc(100% + 10px);
            transform: translateX(-50%);
        }
        .schedule-week-picker.open { display: block; }
        .schedule-week-picker * { box-sizing: border-box; }
        .schedule-week-picker-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            font-weight: 900;
        }

        .schedule-week-nav { position: relative; }
        .schedule-week-picker-header button {
            width: 28px;
            height: 28px;
            border-radius: 10px;
            border: none;
            background: rgba(255,255,255,0.18);
            color: #fff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .schedule-week-picker-title {
            font-size: 14px;
            letter-spacing: 0.2px;
            text-transform: none;
        }
        .schedule-week-picker-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin-bottom: 8px;
            opacity: 0.92;
            font-size: 11px;
            font-weight: 900;
        }
        .schedule-week-picker-weekdays div {
            text-align: center;
        }
        .schedule-week-picker-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
        }
        .schedule-week-picker-day {
            height: 30px;
            border-radius: 10px;
            border: none;
            background: rgba(255,255,255,0.14);
            color: #fff;
            font-weight: 900;
            cursor: pointer;
        }
        .schedule-week-picker-day.is-out {
            opacity: 0.55;
        }
        .schedule-week-picker-day.is-today {
            background: rgba(255,255,255,0.26);
            box-shadow: inset 0 0 0 2px rgba(255,255,255,0.58);
        }
        .schedule-week-picker-day.is-selected {
            background: rgba(255,255,255,0.92);
            color: #1c77ff;
        }
        .schedule-zoom {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .schedule-zoom .scale-pill {
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.10);
        }
        .schedule-zoom .zoom-option { color: rgba(255,255,255,0.92); }
        .schedule-zoom .zoom-option.active { background: rgba(255,255,255,0.92); color: #1c77ff; }
        .schedule-view-wrap { position: relative; }
        .schedule-view-menu {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            background: #fff;
            border: 1px solid rgba(15,23,42,0.10);
            border-radius: 14px;
            box-shadow: 0 18px 50px rgba(2,6,23,0.14);
            padding: 10px;
            min-width: 260px;
            z-index: 9999;
            display: none;
        }
        .schedule-view-menu.open { display: block; }
        .schedule-view-menu .menu-row { display:flex; gap:10px; align-items:center; }

        #schedule-make-substitution .schedule-frame {
            background: #2F73FF;
            border-radius: 18px;
            padding: 14px;
        }
        .schedule-view-menu select {
            width: 100%;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(15,23,42,0.12);
            background: #fff;
            color: #0f172a;
            font-weight: 700;
            outline: none;
        }
        .schedule-actions { display:flex; align-items:center; gap:10px; }

        .schedule-shell {
            background: rgba(255,255,255,0.92);
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 18px 40px rgba(2,6,23,0.10);
        }
        .schedule-table-header {
            background: #f8fbff;
            border-bottom: 1px solid rgba(15,23,42,0.08);
        }
        .schedule-table-header-grid {
            display: grid;
            grid-template-columns: 60px repeat(7, minmax(130px, 1fr));
            gap: 0;
        }
        .schedule-header-cell {
            padding: 8px 8px;
            border-right: 1px solid rgba(15,23,42,0.06);
            min-height: 52px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .schedule-header-cell:last-child {
            border-right: none;
        }
        .schedule-day-title {
            font-size: 12px;
            color: rgba(15,23,42,0.70);
            font-weight: 800;
            text-transform: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .schedule-date-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 20px;
            padding: 0 8px;
            border-radius: 999px;
            background: rgba(28,119,255,0.10);
            color: #1c77ff;
            font-weight: 800;
            font-size: 12px;
            width: max-content;
        }
        .schedule-date-pill.is-today {
            background: #1c77ff;
            color: white;
        }

        .schedule-table-body {
            overflow: auto;
            max-height: calc(100vh - 119px);
        }

        /* Align Schedule and Gradebook containers with the header title edge (desktop only) */
        @media (min-width: 769px) {
            #schedule .schedule-shell { margin-left: -20px; margin-right: -20px; }
            #journals #journal-filters {
                margin-left: -40px;
                margin-right: -40px;
            }
            #journals #journals-my-subfilters,
            #journals #journals-class-subfilters,
            #journals #journals-teachers-subfilters,
            #journals #journals-grid-body {
                margin-left: -20px;
                margin-right: -20px;
            }
            #gradebook-view .gb-tabs-row {
                margin-left: -16px;
                margin-right: -16px;
            }
            #class-admin-panel {
                margin-left: -20px;
                margin-right: -20px;
            }
        }

        /* When viewing 'Мій клас', make the admin panel and filters wider/expanded
           so they visually stretch more across the page (subtle increase). */
        #journals-tab-content #class-admin-panel,
        #journals-tab-content #journal-filters,
        #journals-tab-content #journals-my-subfilters,
        #journals-tab-content #journals-class-subfilters,
        #journals-tab-content #journals-teachers-subfilters {
            /* Match the journals grid horizontal gutters so left edge aligns with first card
               and right edge aligns with last card. Keep no extra horizontal padding. */
            margin-left: -20px !important;
            margin-right: -20px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* Remove any intrinsic left/right margin/padding these blocks might have */
        #journals-tab-content #class-admin-panel,
        #journals-tab-content #journal-filters,
        #journals-tab-content #journals-my-subfilters,
        #journals-tab-content #journals-class-subfilters,
        #journals-tab-content #journals-teachers-subfilters {
            margin-left: -20px !important;
            margin-right: -20px !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        @media (max-width: 768px) {
            #schedule .schedule-shell { margin-left: 0; margin-right: 0; }
            #gradebook-view { margin-left: 0; margin-right: 0; }
            #journals #journal-filters,
            #journals #journals-my-subfilters,
            #journals #journals-teachers-subfilters,
            #journals #journals-grid-body {
                margin-left: 0;
                margin-right: 0;
            }
        }
        .schedule-table-body-inner {
            transform-origin: top left;
        }
        .schedule-grid {
            display: grid;
            grid-template-columns: 60px repeat(7, minmax(130px, 1fr));
            gap: 0;
        }

        .schedule-subst-shell {
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 16px;
            overflow: hidden;
        }
        /* Make substitution container a bit more wide/stretch */
        .schedule-subst-shell { width: 100%; }

        /* Header actions placeholder for page-level buttons */
        .header { position: relative; }
        .header .header-actions { position: absolute; right: 20px; top: 12px; display:flex; gap:8px; align-items:center; }

        /* Ensure save button looks larger and has thin white border */
        #schedule-subst-save-btn { border:1px solid rgba(255,255,255,0.9); padding:14px 20px; font-size:16px; border-radius:12px; }
        .schedule-subst-top {
            padding: 14px 16px;
            background: rgba(255,255,255,0.06);
            border-bottom: 1px solid rgba(255,255,255,0.12);
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: flex-end;
        }
        .schedule-subst-field {
            flex: 1 1 220px;
            min-width: 220px;
        }
        .schedule-subst-field .form-label { color: rgba(255,255,255,0.85); }
        .schedule-subst-field .form-select,
        .schedule-subst-field .form-input { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
        .schedule-subst-field .form-select option { color:#000; }
        .schedule-subst-body {
            padding: 14px;
        }
        .schedule-subst-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }
        @media (max-width: 920px) {
            .schedule-subst-grid { grid-template-columns: 1fr; }
        }
        .schedule-subst-col {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .schedule-subst-lesson {
            background: rgba(255,255,255,0.96);
            border: 1px solid rgba(15,23,42,0.08);
            border-radius: 14px;
            padding: 12px 12px;
            display: flex;
            gap: 12px;
            align-items: center;
            min-height: 66px;
        }
        .schedule-subst-lesson-pill {
            background: #1C77FF;
            color: #fff;
            font-weight: 900;
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 999px;
            flex: 0 0 auto;
        }
        .schedule-subst-lesson-main { min-width: 0; }
        .schedule-subst-lesson-title {
            font-weight: 900;
            font-size: 14px;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .schedule-subst-lesson-sub {
            margin-top: 2px;
            font-weight: 800;
            font-size: 12px;
            color: rgba(15,23,42,0.70);
        }
        .schedule-subst-slot {
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 14px;
            padding: 12px;
            min-height: 66px;
            display:flex;
            align-items:center;
            justify-content:center;
            color: rgba(255,255,255,0.92);
            font-weight: 900;
            cursor: pointer;
            user-select: none;
            position: relative;
        }
        .schedule-subst-slot:hover { background: rgba(255,255,255,0.14); }
        .schedule-subst-slot-filled {
            justify-content: flex-start;
            gap: 12px;
            cursor: default;
        }
        .schedule-subst-slot-filled {
            background: #ffffff;
            border: 1px solid rgba(28,119,255,0.12);
            color: #1C77FF;
        }
        .schedule-subst-slot-filled .schedule-subst-slot-title { color: #1C77FF; font-weight:800; }
        .schedule-subst-slot-filled .schedule-subst-slot-name { color: #1C77FF; }
        .schedule-subst-slot-filled .schedule-subst-slot-title {
            font-weight: 900;
            font-size: 12px;
            opacity: 0.9;
        }
        .schedule-subst-slot-filled .schedule-subst-slot-name {
            font-weight: 900;
            font-size: 14px;
            margin-top: 2px;
        }
        .schedule-subst-edit {
            position:absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 34px;
            height: 34px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.20);
            background: rgba(255,255,255,0.10);
            color: #fff;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor: pointer;
        }
        .schedule-subst-edit:hover { background: rgba(255,255,255,0.16); }
        /* 'Мої заміни' cards now reuse standard journal styles.
           Removed custom .subst-* rules so elements with class
           `journal-card` render identically to other journal cards. */
        .schedule-time-cell {
            padding: 8px 8px;
            border-right: 1px solid rgba(15,23,42,0.06);
            border-bottom: 1px solid rgba(15,23,42,0.06);
            background: #fbfdff;
            color: rgba(15,23,42,0.62);
            font-weight: 800;
            font-size: 12px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .schedule-cell {
            padding: 0; /* lesson blocks should occupy full cell */
            border-right: 1px solid rgba(15,23,42,0.06);
            border-bottom: 1px solid rgba(15,23,42,0.06);
            background: white;
            min-height: 86px;
            display: flex;
            gap: 0;
            align-items: stretch;
        }
        .schedule-cell:nth-child(8n) {
            border-right: none;
        }
        .schedule-lesson-card {
            border-radius: 14px;
            padding: 8px 10px 8px 14px;
            border: 1px solid rgba(15,23,42,0.08);
            box-shadow: 0 8px 20px rgba(2,6,23,0.08);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-height: 100%;
            height: 100%;
            box-sizing: border-box;
            /* flex sizing handled by parent .schedule-cell */
            flex: 1 1 100%;
            max-width: 100%;
            position: relative;
            overflow: hidden;
            background: var(--lesson-bg, #F8FAFC);
        }

        .schedule-lesson-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--lesson-accent, rgba(15,23,42,0.18));
        }

        .schedule-lesson-card:active {
            cursor: grabbing;
        }

        .schedule-lesson-card.is-dragging {
            opacity: 0.55;
        }

        .schedule-cell.is-drop-target {
            outline: 2px solid rgba(28, 119, 255, 0.35);
            outline-offset: -2px;
        }

        /* When multiple lesson cards are present in a single cell, split equally */
        .schedule-cell > .schedule-lesson-card {
            flex: 1 1 50%;
            max-width: 50%;
        }
        /* Single lesson occupies full cell */
        .schedule-cell:has(> .schedule-lesson-card:only-child) > .schedule-lesson-card {
            flex: 1 1 100%;
            max-width: 100%;
        }
        .schedule-lesson-class {
            font-weight: 900;
            font-size: 12px;
            color: rgba(15,23,42,0.82);
            line-height: 1.1;
        }
        .schedule-lesson-subject {
            font-weight: 900;
            font-size: 14px;
            color: rgba(15,23,42,0.92);
            line-height: 1.15;
        }
        .schedule-lesson-rows {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
        }
        .schedule-lesson-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #0f172a;
            font-weight: 700;
            line-height: 1.15;
        }
        .schedule-lesson-row i {
            width: 14px;
            min-width: 14px;
            text-align: center;
            color: #0f172a;
        }
        .schedule-lesson-row .schedule-lesson-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .schedule-lesson-row.is-teacher {
            align-items: flex-start;
        }
        .schedule-lesson-row.is-teacher .schedule-lesson-text {
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            word-break: break-word;
        }

        /* Upcoming / past states for schedule grid lessons (main schedule on home) */
        .schedule-lesson-card.is-upcoming {
            background: rgba(28, 119, 255, 0.92);
            border: 1px solid rgba(255,255,255,0.18);
            color: rgba(255,255,255,0.95);
            box-shadow: 0 10px 26px rgba(2,6,23,0.12);
        }
        .schedule-lesson-card.is-upcoming .schedule-lesson-class,
        .schedule-lesson-card.is-upcoming .schedule-lesson-subject,
        .schedule-lesson-card.is-upcoming .schedule-lesson-row,
        .schedule-lesson-card.is-upcoming .schedule-lesson-text {
            color: rgba(255,255,255,0.95);
        }
        .schedule-lesson-card.is-upcoming:hover {
            background: rgba(28, 119, 255, 0.98);
        }

        .schedule-lesson-card.is-past {
            background: rgba(244, 247, 255, 0.96);
            border: 1px solid rgba(15,23,42,0.10);
            color: rgba(15,23,42,0.92);
            box-shadow: 0 10px 26px rgba(2,6,23,0.10);
        }
        .schedule-lesson-card.is-past .schedule-lesson-class,
        .schedule-lesson-card.is-past .schedule-lesson-subject,
        .schedule-lesson-card.is-past .schedule-lesson-row {
            color: rgba(15,23,42,0.92);
        }

        .holiday-message {
            background: rgba(16, 185, 129, 0.2);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #10B981;
            padding: 20px;
            border-radius: 16px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .date-clickable {
            cursor: pointer;
            transition: all 0.2s;
        }

        .date-clickable:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            transform: scale(1.05);
        }

        .no-schedule-message {
            background: rgba(255, 255, 255, 0.1);
            border: 1px dashed rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.7);
            padding: 30px;
            border-radius: 16px;
            text-align: center;
            margin-top: 0px;
            font-size: 16px;
        }

        .no-schedule-image-wrap {
            background: transparent;
            border: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .no-schedule-image {
            width: 87%;
            max-width: 87%;
            height: auto;
            display: block;
            object-fit: contain;
        }

        .schedule-day {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 15px 10px;
            min-height: 100px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.2s;
            color: white;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .schedule-day:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        .schedule-day.holiday {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.3);
        }

        .schedule-day-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 10px;
            text-align: center;
            color: white;
        }

        .schedule-day-lessons {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .schedule-lesson-item {
            font-size: 11px;
            padding: 5px 8px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .schedule-lesson-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .schedule-bells-panel {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .bells-display {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        
        .bell-time {
            background: rgba(255, 255, 255, 0.15);
            padding: 8px 15px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .schedule-frame .bell-time {
            color: rgba(255,255,255,0.95);
        }
        
        .bell-number {
            background: var(--primary-blue);
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
        }

        .schedule-frame .bell-number {
            background: rgba(255,255,255,0.22);
            border: 1px solid rgba(255,255,255,0.24);
        }
        
        .schedule-sync-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .schedule-sync-btn {
            padding: 10px 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.15);
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .schedule-sync-btn:hover {
            background: rgba(255, 255, 255, 0.25);
        }
        
        .schedule-sync-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            min-width: 200px;
            z-index: 100;
            display: none;
            overflow: hidden;
        }
        
        .schedule-sync-menu.show {
            display: block;
        }
        
        .schedule-sync-item {
            padding: 12px 16px;
            color: var(--text-dark);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background-color 0.2s;
        }
        
        .schedule-sync-item:hover {
            background: #f5f5f5;
        }
    
        /* Стилі для панелі управління сховищами */
        .bin-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .bin-status.active {
            background: #d1fae5;
            color: #065f46;
        }

        .bin-status.inactive {
            background: #fee2e2;
            color: #991b1b;
        }

        .bin-status.pending {
            background: #fef3c7;
            color: #92400e;
        }

        .storage-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .storage-stat-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 12px;
            border-left: 4px solid var(--primary-blue);
        }

        .storage-stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 5px;
        }

        .storage-stat-label {
            font-size: 13px;
            color: #666;
        }

        /* Адаптація для темної теми */
        @media (prefers-color-scheme: dark) {
            .storage-stat-card {
                background: rgba(255, 255, 255, 0.1);
                color: white;
            }
            
            .storage-stat-label {
                color: rgba(255, 255, 255, 0.7);
            }
        }

        /* Додаткові стилі для нових сторінок */

        /* Картки замін */
        .subst-badge {
            position: absolute;
            top: 10px;
            right: 45px;
            background: var(--warning-yellow);
            color: #333;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 10px;
            font-weight: bold;
            z-index: 5;
        }

        /* Статуси в таблицях */
        .status-badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
        }

        .status-present {
            background: #D1FAE5;
            color: #065F46;
        }

        .status-absent {
            background: #FEE2E2;
            color: #991B1B;
        }

        .status-late {
            background: #FEF3C7;
            color: #92400E;
        }

        .status-vacation {
            background: #DBEAFE;
            color: #1E40AF;
        }

        /* Фільтри */
        .report-filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .report-filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 200px;
        }

        /* Звіти */
        .report-card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .report-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-dark);
        }

        .report-meta {
            font-size: 14px;
            color: #666;
        }

        .report-section {
            margin-bottom: 25px;
        }

        .report-section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e5e7eb;
        }

        .reports-shell {
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .reports-inner {
            padding: 18px 18px 10px 18px;
        }

        .reports-breadcrumb {
            font-size: 12px;
            font-weight: 700;
            color: #6b7280;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .reports-breadcrumb-sep {
            color: #9ca3af;
            font-weight: 800;
        }

        .reports-list {
            border: 1px solid rgba(2, 132, 199, 0.18);
            border-radius: 14px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.92);
        }

        .reports-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 14px;
            border-bottom: 1px solid rgba(2, 132, 199, 0.14);
        }

        .reports-row:last-child {
            border-bottom: none;
        }

        .reports-row-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .reports-doc-icon {
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-blue);
        }

        .reports-doc-title {
            font-size: 14px;
            font-weight: 600;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .reports-generate-btn {
            border: 1px solid rgba(37, 99, 235, 0.35);
            background: rgba(255, 255, 255, 0.95);
            color: #2563eb;
            border-radius: 999px;
            padding: 7px 12px;
            font-weight: 700;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            flex: 0 0 auto;
        }

        .reports-generate-btn:hover {
            background: #eff6ff;
            box-shadow: 0 2px 10px rgba(37, 99, 235, 0.14);
        }

        .reports-generate-btn:active {
            transform: translateY(1px);
        }

        /* Additional report styles from user */
        .report-metrics .metric-card {
            transition: transform 0.2s;
        }

        .report-metrics .metric-card:hover {
            transform: translateY(-2px);
        }

        .report-table table {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .report-table th {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .report-conclusions li {
            position: relative;
            padding-left: 10px;
        }

        .report-conclusions li:before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--primary-blue);
        }

        /* Анімація завантаження для прев'ю */
        @keyframes fadeInReport {
            0% { opacity: 0; transform: translateY(12px) scale(0.995); }
            70% { opacity: 0.98; transform: translateY(-6px) scale(1.002); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        #report-preview {
            animation: fadeInReport 0.5s ease;
        }

        /* Адаптивність для мобільних */
        @media (max-width: 768px) {
            .reports-controls .form-group {
                flex: 1 0 100%;
            }
            
            .report-metrics {
                grid-template-columns: 1fr;
            }
            
            .report-table {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
        }

        /* Адаптивність */
        @media (max-width: 768px) {
            .report-filters {
                flex-direction: column;
            }
            
            .report-filter-group {
                width: 100%;
            }
            
            .report-card {
                padding: 15px;
            }
        }

        /* Home Page Schedule Styling */
        @media (min-width: 769px) {
            #home-schedule-container { margin-left: -12px; width: calc(100% + 12px); }
        }
        @media (max-width: 768px) {
            #home-schedule-container { margin-left: 0; width: 100%; }
        }
        .home-lesson-item {
            display: flex;
            gap: 20px;
            margin-bottom: 0;
        }
        .home-time {
            width: 100px;
            flex-shrink: 0;
            padding-top: 6px;
            font-size: 13px;
            opacity: 1;
            color: #ffffff;
            font-weight: 800;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        #home-schedule-container .home-time { padding-left: 10px; }
        .home-lesson-card {
            flex: 1;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 16px;
            padding: 20px;
            transition: all 0.2s;
        }
        /* Past/current lesson card (скрін 1): light surface with dark text */
        .home-lesson-card.is-past,
        .home-lesson-card.is-active {
            background: rgba(244, 247, 255, 0.96);
            border: 1px solid rgba(15,23,42,0.10);
            box-shadow: 0 10px 30px rgba(2,6,23,0.08);
        }
        /* Upcoming lesson card (скрін 2): blue glass */
        .home-lesson-card.is-upcoming {
            background: rgba(59, 130, 246, 0.55);
            border: 1px solid rgba(255,255,255,0.22);
            box-shadow: none;
        }
        .home-lesson-card:hover {
            background: rgba(255,255,255,0.12);
            transform: translateY(-2px);
        }
        .home-lesson-card.is-past:hover,
        .home-lesson-card.is-active:hover {
            background: rgba(255,255,255,0.96);
        }
        .home-lesson-card.is-upcoming:hover {
            background: rgba(59, 130, 246, 0.62);
        }
        .home-class-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.92);
            color: #0f172a;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 0; /* remove extra bottom gap so baseline aligns with subject */
            margin-right: 12px;
            box-shadow: 0 6px 14px rgba(16,24,40,0.04);
            border: 1px solid rgba(0,0,0,0.04);
            vertical-align: middle;
        }
        .home-lesson-card.is-upcoming .home-class-pill {
            background: rgba(255,255,255,0.92);
            border-color: rgba(255,255,255,0.55);
        }
        .home-subject {
            font-size: 16px;
            font-weight: 700;
            color: white;
            margin-bottom: 4px;
        }
        .home-lesson-card.is-past .home-subject,
        .home-lesson-card.is-active .home-subject {
            color: #0f172a;
        }
        .home-lesson-details {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            margin-top: 10px;
        }
        /* Home requirements: lesson details must not appear on Home cards */
        .home-lesson-details { display: none !important; }
        #home-schedule-container .home-lesson-details { display: grid !important; }
        #home-schedule-container .home-lesson-card {
            padding: 16px 18px;
            border-radius: 12px;
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            column-gap: 14px;
            row-gap: 12px;
            position: relative;
        }
        #home-schedule-container .home-lesson-card.is-active {
            background: rgba(255,255,255,0.96);
            border: 1px solid rgba(15,23,42,0.10);
            box-shadow: 0 10px 26px rgba(2,6,23,0.10);
        }
        #home-schedule-container .home-lesson-card.is-upcoming {
            background: rgba(28, 119, 255, 0.92);
            border: 1px solid rgba(255,255,255,0.18);
            box-shadow: 0 10px 26px rgba(2,6,23,0.12);
        }
        #home-schedule-container .home-lesson-card.is-past {
            background: rgba(255,255,255,0.96);
            border: 1px solid rgba(15,23,42,0.10);
            box-shadow: 0 10px 26px rgba(2,6,23,0.10);
        }
        #home-schedule-container .home-lesson-card.is-upcoming .home-subject {
            color: rgba(255,255,255,0.98);
        }
        #home-schedule-container .home-lesson-card.is-past .home-subject,
        #home-schedule-container .home-lesson-card.is-active .home-subject {
            color: #0f172a;
        }
        #home-schedule-container .home-lesson-card.is-upcoming .home-room-number {
            color: rgba(255,255,255,0.85);
        }
        #home-schedule-container .home-lesson-card.is-active .home-room-number,
        #home-schedule-container .home-lesson-card.is-past .home-room-number {
            color: rgba(15,23,42,0.72);
        }
        #home-schedule-container .home-room-number { font-size: 12.5px; font-weight: 800; text-align: right; align-self: end; justify-self: end; grid-column: 2; grid-row: 2; }
        #home-schedule-container .home-lesson-icon {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            align-self: start;
            width: 44px;
            height: 44px;
            border-radius: 18px;
            background: rgba(255,255,255,0.18);
            display: none; /* hidden by default (desktop) */
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.95);
        }
        #home-schedule-container .home-lesson-card.is-past .home-lesson-icon,
        #home-schedule-container .home-lesson-card.is-active .home-lesson-icon {
            background: rgba(28,119,255,0.10);
            color: rgba(28,119,255,0.85);
        }
        #home-schedule-container .home-lesson-details { gap: 10px; grid-column: 1 / span 2; grid-row: 2; margin-top: 0; }
        #home-schedule-container .home-detail-label { font-size: 14px; font-weight: 900; }
        #home-schedule-container .home-detail-text { font-size: 12.5px; font-weight: 800; }
        #home-schedule-container .home-lesson-header { grid-column: 1 / span 2; grid-row: 1; display:flex; align-items:center; gap: 12px; }
        #home-schedule-container .home-lesson-header .home-subject { margin-bottom: 0; align-self: center; }
        #home-schedule-container .home-lesson-header { align-items: center; }
        #home-schedule-container .home-subject { line-height: 1.2; }

        /* Strong override: ensure pill and subject share vertical center in the header */
        #home-schedule-container .home-lesson-header .home-class-pill,
        #home-schedule-container .home-lesson-header .home-subject {
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
            margin-bottom: 0 !important;
            line-height: 1.2 !important;
        }
        /* Make home lesson class pill match journal bubble sizing and appearance */
        #home-schedule-container .home-class-pill {
            padding: 8px 12px; /* match .journal-class-badge */
            font-size: 12px;
            font-weight: 700;
            border-radius: 999px;
            line-height: 1;
            transform: none;
            box-shadow: 0 6px 14px rgba(16,24,40,0.04);
            border: 1px solid rgba(0,0,0,0.04);
            background: rgba(255,255,255,0.92);
            color: #0f172a;
        }
        #home-schedule-container .home-lesson-card.is-active .home-class-pill,
        #home-schedule-container .home-lesson-card.is-past .home-class-pill {
            background: #1C77FF;
            color: #ffffff;
            border-color: rgba(255,255,255,0.0);
        }
        /* Room label must be single-line */
        #home-schedule-container .home-room-number { white-space: nowrap; }
        #home-schedule-container .home-lesson-card.is-past .home-room-number,
        #home-schedule-container .home-lesson-card.is-active .home-room-number { color: #0f172a; }
        #home-schedule-container .home-lesson-card.is-upcoming .home-room-number { color: rgba(255,255,255,0.95); }
        .home-detail-block {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .home-detail-label {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--primary-blue);
        }
        .home-detail-text {
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
        }
        .home-lesson-card.is-upcoming .home-detail-label,
        .home-lesson-card.is-upcoming .home-detail-text {
            color: rgba(255,255,255,0.95);
        }
        .home-lesson-card .home-lesson-details::before {
            content: '';
            display: block;
            height: 1px;
            width: 100%;
            background: rgba(15,23,42,0.10);
            margin-bottom: 4px;
        }
        .home-lesson-card.is-upcoming .home-lesson-details::before {
            background: rgba(255,255,255,0.28);
        }
        .home-room-number {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 18px;
            font-weight: 700;
            color: rgba(255,255,255,0.5);
        }
        .home-lesson-card.is-past .home-room-number,
        .home-lesson-card.is-active .home-room-number {
            color: rgba(15,23,42,0.55);
        }
        .home-lesson-card {
            position: relative;
        }

        .lesson-day-view {
            display: none;
            position: relative;
            inset: auto;
            z-index: auto;
            background: transparent;
            overflow: visible;
            padding: 0;
        }
        #lesson-day-view {
            margin-left: 0;
            margin-right: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .lesson-day-breadcrumbs {
            display: flex;
            align-items: center;
            gap: 0;
            color: rgba(255,255,255,0.92);
            font-weight: 800;
            font-size: 18px;
            margin-bottom: 8px;
            line-height: 1.1;
        }

        /* Lesson day: breadcrumbs should be only in the main header, not duplicated inside the panel */
        #gradebook-view.lesson-day-mode .lesson-day-breadcrumbs { display: none; }
        .lesson-day-breadcrumbs .crumb-dim {
            color: rgba(255,255,255,0.78);
            font-weight: 800;
            margin-left: 0;
            margin-right: 8px;
        }
        .lesson-day-topbar {
            background: rgba(255,255,255,0.96);
            border: none;
            border-radius: 16px;
            box-shadow: none;
            padding: 14px 14px;
        }
        .lesson-day-topbar-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .lesson-day-meta {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            align-items: start;
        }
        .lesson-day-meta .meta-col:last-child {
            justify-self: end;
            text-align: right;
        }
        #lesson-day-format {
            justify-content: flex-end;
        }
        .lesson-day-meta .meta-label {
            font-size: 11px;
            color: var(--primary-blue);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 4px;
        }
        .lesson-day-meta .meta-value {
            font-size: 13px;
            font-weight: 900;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lesson-day-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .lesson-day-open-journal {
            background: rgba(28,119,255,0.10);
            color: #1C77FF;
            border: 1px solid rgba(28,119,255,0.18);
            border-radius: 999px;
            padding: 10px 14px;
            font-weight: 900;
            cursor: pointer;
        }
        .lesson-day-open-journal:hover { background: rgba(28,119,255,0.14); }

        .lesson-day-header-open-journal {
            background: rgba(255,255,255,0.18);
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.28);
            border-radius: 999px;
            padding: 8px 12px;
            font-weight: 900;
            cursor: pointer;
            margin-left: 12px;
            white-space: nowrap;
        }
        .lesson-day-header-open-journal:hover { background: rgba(255,255,255,0.24); }

        .lesson-day-header-flex {
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
        }
        .lesson-day-header-spacer { flex: 1 1 auto; }

        .lesson-day-breadcrumbs-link {
            cursor: pointer;
            text-decoration: none !important;
        }

        .no-underline-link { text-decoration: none !important; }

        .header-crumb-sep {
            display: inline-block;
            margin: 0;
            color: rgba(255,255,255,0.6);
            line-height: 1;
            vertical-align: middle;
            white-space: nowrap;
        }

        /* Highlight text (and icon) that is immediately before a crumb separator (› or >) */
        .header-crumb-highlight {
            color: #d1d5db !important; /* light gray */
        }
        /* Ensure icons inside highlighted elements get the same color */
        .header-crumb-highlight i,
        .header-crumb-highlight .fa,
        .header-crumb-highlight .fa-* {
            color: #d1d5db !important; /* light gray */
        }
        /* When a separator itself is highlighted, give it the same color */
        .header-crumb-sep.header-crumb-highlight {
            color: #d1d5db !important; /* light gray */
        }

        /* Keep lesson-day header breadcrumbs visually aligned with other header states */
        .lesson-day-header-flex {
            min-height: 22px;
            flex-wrap: nowrap;
            white-space: nowrap;
        }

        .lesson-format-row {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .lesson-format-value {
            font-weight: 900;
            font-size: 13px;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lesson-format-pencil {
            width: 30px;
            height: 30px;
            border-radius: 12px;
            border: 1px solid rgba(28,119,255,0.18);
            background: rgba(28,119,255,0.10);
            color: #1C77FF;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .lesson-format-pencil:hover { background: rgba(28,119,255,0.14); }

        .lesson-format-menu {
            display: none;
            margin-top: 8px;
        }
        .lesson-format-menu.open { display: block; }

        .lesson-format-switch {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 2px;
            border-radius: 999px;
            background: rgba(28,119,255,0.10);
            border: 1px solid rgba(28,119,255,0.18);
        }
        .lesson-format-btn {
            border: none;
            background: transparent;
            color: #0f172a;
            font-weight: 900;
            font-size: 11px;
            padding: 5px 10px;
            border-radius: 999px;
            cursor: pointer;
            line-height: 1;
        }
        .lesson-format-btn.active {
            background: #1C77FF;
            color: #fff;
        }
        .lesson-format-btn:focus { outline: none; }
        .lesson-day-meta {
            display: flex;
            gap: 40px;
            align-items: center;
        }
        .lesson-day-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .lesson-day-link-top-btn {
            background: transparent;
            border: none;
            color: #1C77FF;
            font-weight: 800;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 999px;
            transition: background 0.2s;
        }
        .lesson-day-link-top-btn:hover {
            background: rgba(28,119,255,0.08);
        }
        .three-dot-btn-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #1C77FF;
            color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
        }
        .three-dot-btn-circle:hover {
            opacity: 0.9;
        }
        .lesson-day-tabs { margin-top: 10px; }
        .lesson-day-tabs .gb-tabs {
            background: transparent;
            border: none;
            border-radius: 999px;
            padding: 0;
            gap: 0;
        }
        .lesson-day-tabs { margin-left: 8px; }
        .lesson-day-tabs .gb-tab {
            color: rgba(255,255,255,0.92);
            border-radius: 999px;
            padding: 10px 14px;
            font-weight: 900;
            font-size: 12px;
            line-height: 1;
        }
        .lesson-day-tabs .gb-tab.active { background: transparent; color: rgba(255,255,255,0.92); box-shadow: none; }
        .lesson-day-board {
            margin-top: 14px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }
        .lesson-day-board.details-grid {
            grid-template-areas:
                "topics activities"
                "notes materials";
            align-items: stretch;
        }
        .lesson-day-area-topics { grid-area: topics; }
        .lesson-day-area-activities { grid-area: activities; }
        .lesson-day-area-notes { grid-area: notes; }
        .lesson-day-area-materials { grid-area: materials; }

        .lesson-day-section-title {
            font-size: 18px;
            font-weight: 700;
            color: #ffffff;
            margin: 0 0 16px 4px;
        }

        .lesson-day-box {
            border-radius: 16px;
            border: none;
            background: #4A8CFF;
            padding: 0;
            min-height: 220px;
            display: flex;
            flex-direction: column;
        }
        .lesson-day-box.is-large { min-height: 320px; }
        .lesson-day-box-inner {
            flex: 1;
            border-radius: 16px;
            border: none;
            background: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 24px;
            padding: 30px 20px;
        }
        .lesson-day-box-text {
            text-align: center;
            color: #ffffff;
            font-weight: 700;
            font-size: 15px;
            opacity: 0.95;
            line-height: 1.4;
            max-width: 520px;
        }

        .lesson-day-white-card {
            background: #ffffff;
            border: none;
            box-shadow: 0 8px 30px rgba(2,6,23,0.06);
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            min-height: auto;
        }
        .lesson-day-topic-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 20px;
            cursor: pointer;
            width: 100%;
            gap: 16px;
        }
        .lesson-day-topic-content {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }
        .lesson-day-topic-bullet {
            color: #1C77FF;
            font-size: 24px;
            line-height: 1;
            flex-shrink: 0;
        }
        .lesson-day-topic-text-main {
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lesson-day-topic-expand {
            color: #1C77FF;
            font-weight: 800;
            font-size: 13px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            flex-shrink: 0;
            cursor: pointer;
        }
        .lesson-day-topic-expand:hover {
            text-decoration: underline;
        }
        .lesson-day-white-card-head {
            display: none;
        }
        .lesson-day-white-card-title {
            display: none;
        }
        .lesson-day-white-card-body { 
            padding: 0; 
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        /* When a topic exists, show it as an inner white card with a blue bullet */
        .lesson-day-white-card-body {
            /* allow horizontal layout for topic + action */
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        /* the topic text element (id'd in JS) becomes a white pill card */
        #lesson-day-topic-text {
            background: #ffffff;
            color: #0f172a !important;
            font-weight: 800;
            padding: 14px 16px;
            border-radius: 14px;
            width: 100%;
            text-align: left;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 8px 30px rgba(2,6,23,0.06);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* small blue bullet before topic text */
        #lesson-day-topic-text::before{
            content: '•';
            margin-right: 8px;
            color: #1C77FF;
            font-size: 18px;
            line-height: 1;
            flex: 0 0 auto;
        }

        /* support toggling between short / full state (JS uses data-state)
           - short: single-line ellipsis, full: allow wrap
        */
        #lesson-day-topic-text[data-state="short"]{ white-space: nowrap; }
        #lesson-day-topic-text[data-state="full"]{ white-space: normal; }

        /* make the action button next to topic pill compact and fully rounded */
        .lesson-day-white-card-body .lesson-day-link-btn {
            min-width: auto;
            padding: 10px 14px;
            border-radius: 999px;
        }

        /* Ensure all buttons inside lesson details are pill-shaped (radius 999) */
        #lesson-day-view button,
        #lesson-day-view .lesson-day-link-btn,
        #lesson-day-view .lesson-day-pill-btn,
        #lesson-day-view .lesson-day-card-btn,
        #lesson-day-view .lesson-day-icon-btn,
        #lesson-day-view .planning-sidepanel-save,
        #lesson-day-view .planning-sidepanel-close {
            border-radius: 999px !important;
        }

        .lesson-day-topic-white-text {
            color: #ffffff;
            font-weight: 700;
            margin-bottom: 24px;
            font-size: 15px;
            line-height: 1.4;
            opacity: 0.95;
        }

        .lesson-day-col-row {
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            padding: 14px 0;
            border-top: 1px solid rgba(15,23,42,0.08);
        }
        .lesson-day-col-row:first-child { border-top: 0; }
        .lesson-day-col-row-title { font-weight: 800; color: #0f172a; font-size: 13px; }
        .lesson-day-col-row-sub { margin-top: 6px; font-weight: 700; font-size: 12px; color: rgba(15,23,42,0.70); }
        .lesson-day-icon-btn {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid rgba(15,23,42,0.10);
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: rgba(15,23,42,0.78);
        }
        .lesson-day-icon-btn:hover { background: rgba(15,23,42,0.03); }
        .lesson-day-add-link {
            margin-top: 10px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: rgba(28,119,255,0.95);
            font-weight: 900;
            cursor: pointer;
            user-select: none;
        }
        .lesson-day-add-link:hover { text-decoration: underline; }
        .lesson-day-add-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(28,119,255,0.12);
            border: 1px solid rgba(28,119,255,0.20);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #1C77FF;
            font-size: 10px;
        }
        .lesson-day-panel{
            background: rgba(255,255,255,0.96);
            border: none;
            box-shadow: none;
        }
        .lesson-day-panel-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .lesson-day-panel-title{
            font-weight: 900;
            color: #0f172a;
            font-size: 14px;
        }
        .lesson-day-panel-action{
            background: rgba(28,119,255,0.10);
            color: #1C77FF;
            border: 1px solid rgba(28,119,255,0.18);
            border-radius: 999px;
            padding: 8px 12px;
            font-weight: 900;
            cursor: pointer;
            white-space: nowrap;
        }
        .lesson-day-panel-action:hover{ background: rgba(28,119,255,0.14); }
        .lesson-day-panel-body{ margin-top: 8px; }
        .lesson-day-empty-center{
            text-align:center;
            color: rgba(15,23,42,0.70);
            font-weight: 800;
            font-size: 12px;
            line-height: 1.35;
            padding: 14px 10px;
            border-radius: 14px;
            background: rgba(15,23,42,0.03);
            border: none;
        }
        .lesson-day-card-blue{
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.18);
        }
        .lesson-day-empty-wrap{ margin-top: 6px; }
        .lesson-day-empty-text{ text-align:center; }
        .lesson-day-pill-btn{
            display:inline-flex;
            align-items:center;
            gap: 12px;
            background: #ffffff;
            color: #1C77FF;
            border: none;
            padding: 12px 24px;
            border-radius: 999px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .lesson-day-pill-btn:hover{ opacity: 0.9; }
        .lesson-day-pill-ico{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #1C77FF;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            margin-left: 4px;
        }
        .lesson-day-link-btn{
            display:inline-flex;
            align-items:center;
            gap: 12px;
            background: #ffffff;
            color: #1C77FF;
            border: none;
            padding: 12px 24px;
            border-radius: 999px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .lesson-day-link-btn:hover{ opacity: 0.9; }
        .lesson-day-card {
            background: rgba(255,255,255,0.14);
            border: none;
            border-radius: 16px;
            padding: 14px;
            min-height: 170px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .lesson-day-card.white {
            background: rgba(255,255,255,0.96);
            border: none;
        }
        .lesson-day-card-title { font-weight: 900; color: #0f172a; font-size: 14px; }
        .lesson-day-card:not(.white) .lesson-day-card-title { color: rgba(255,255,255,0.92); }
        .lesson-day-card-empty { color: rgba(255,255,255,0.86); font-weight: 800; font-size: 12px; line-height: 1.35; }
        .lesson-day-card.white .lesson-day-card-empty { color: #0f172a; }
        .lesson-day-card-btn {
            background: rgba(255,255,255,0.96);
            color: #0f172a;
            border: 1px solid rgba(15,23,42,0.10);
            border-radius: 999px;
            padding: 10px 14px;
            font-weight: 900;
            cursor: pointer;
        }
        .lesson-day-card-btn:hover { background: #ffffff; }
        @media (max-width: 980px){
            .lesson-day-meta { grid-template-columns: 1fr 1fr; }
            .lesson-day-board { grid-template-columns: 1fr; }
            .lesson-day-board.details-grid { grid-template-areas: "topics" "activities" "notes" "materials"; }
        }
                /* Ensure selected scale shows white background and blue text */
                .scale-option.active { background: #ffffff !important; color: var(--primary-blue) !important; }

                /* Oval button texture for Mriya */
                .button-mriya {
                    background: linear-gradient(135deg, #82a9ff 0%, #4b81ff 100%);
                    color: white;
                    padding: 15px 40px;
                    border-radius: 50px;
                    border: 1px solid rgba(255, 255, 255, 0.4);
                    font-family: sans-serif;
                    font-weight: bold;
                    /* Ефект глітча на тексті */
                    text-shadow: 
                        -1px 0px 0px rgba(255, 0, 255, 0.7), 
                         1px 0px 0px rgba(0, 255, 255, 0.7);
                    box-shadow: 0 4px 15px rgba(75, 129, 255, 0.4);
                }

                /* Quick attendance visuals and toast */
                .present-pill {
                    display: inline-block;
                    width: 18px;
                    height: 10px;
                    border-radius: 999px;
                    background: var(--primary-blue);
                    box-shadow: 0 4px 10px rgba(28,119,255,0.18);
                    vertical-align: middle;
                }

                .quick-oval {
                    position: absolute;
                    width: 32px;
                    height: 16px;
                    border-radius: 999px;
                    background: var(--primary-blue);
                    opacity: 0.0;
                    transform: scale(0.6);
                    transition: opacity 220ms ease, transform 220ms ease;
                    z-index: 9999;
                    pointer-events: none;
                }

                .toast-bottom-right {
                    position: fixed;
                    right: 18px;
                    bottom: 18px;
                    z-index: 12010;
                    display: flex;
                    gap: 8px;
                    align-items: center;
                    padding: 10px 14px;
                    background: rgba(255,255,255,0.98);
                    border-radius: 999px;
                    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
                    color: #0f172a;
                    font-weight: 700;
                    min-width: 220px;
                }

                .toast-success-badge {
                    background: #10B981;
                    color: white;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                }

                /* Attendance bubbles */
                .attendance-bubbles { display:flex; gap:12px; align-items:center; justify-content:center; }
                .attendance-bubble { padding:12px 18px; border-radius:999px; background:#f3f4f6; cursor:pointer; font-weight:800; border:1px solid transparent; }
                .attendance-bubble:hover { background:#e6f0ff; border-color: rgba(28,119,255,0.12); }

                /* New Attendance Modal Design */
                .attendance-new-modal {
                    width: 600px;
                    max-width: 95vw;
                    border-radius: 24px;
                    overflow: hidden;
                    background: #fff;
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
                }
                .attendance-new-header {
                    padding: 24px 32px;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                }
                .attendance-new-user-info {
                    display: flex;
                    gap: 16px;
                    align-items: center;
                }
                .attendance-new-avatar {
                    width: 48px;
                    height: 48px;
                    background: #F3F4F6;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                    color: #4B5563;
                    font-size: 16px;
                }
                .attendance-new-name {
                    font-size: 20px;
                    font-weight: 600;
                    color: #111827;
                }
                .attendance-new-date {
                    font-size: 14px;
                    color: #6B7280;
                    margin-top: 2px;
                }
                .attendance-new-close {
                    cursor: pointer;
                    font-size: 24px;
                    color: #374151;
                    line-height: 1;
                    padding: 4px;
                }
                .attendance-new-table {
                    width: 100%;
                    border-collapse: collapse;
                }
                .attendance-new-table th {
                    text-align: left;
                    padding: 12px 16px;
                    font-size: 13px;
                    font-weight: 600;
                    color: #374151;
                    border-bottom: 1px solid #E5E7EB;
                    background: #fff;
                }
                .attendance-new-table td {
                    padding: 16px;
                    border-bottom: 1px solid #F3F4F6;
                    font-size: 14px;
                    color: #374151;
                }
                .attendance-new-table tr:last-child td {
                    border-bottom: none;
                }
                .attendance-new-table .reason-col { width: 40%; }
                .attendance-new-table .status-col { width: 20%; text-align: center; }
                .attendance-new-table .status-col th { text-align: center; }
                
                .attendance-new-row-all {
                    background: #F0F7FF;
                }
                
                .attendance-new-cell-action {
                    cursor: pointer;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background 0.2s;
                    border-radius: 4px;
                }
                .attendance-new-cell-action:hover {
                    background: #F3F4F6;
                }
                .attendance-new-cell-action.active-n {
                    color: #fff;
                }
                .attendance-new-mark-circle {
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    background: #1C77FF;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                    font-size: 13px;
                }
                .attendance-new-footer {
                    padding: 24px 32px 32px;
                    display: flex;
                    justify-content: center;
                }
                .attendance-new-btn-submit {
                    background: #1C77FF;
                    color: #fff;
                    border: none;
                    border-radius: 999px;
                    padding: 14px 60px;
                    font-size: 16px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: opacity 0.2s;
                }
                .attendance-new-btn-submit:hover {
                    opacity: 0.9;
                }