{"id":788,"date":"2026-07-30T17:01:56","date_gmt":"2026-07-30T17:01:56","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=788"},"modified":"2026-07-30T17:21:38","modified_gmt":"2026-07-30T17:21:38","slug":"timetable-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/timetable-generator\/","title":{"rendered":""},"content":{"rendered":"\n<div class=\"utc-app-wrapper\">\n    <style>\n        .utc-app-wrapper {\n            --utc-bg: #ffffff;\n            --utc-surface: #f8fafc;\n            --utc-card: #ffffff;\n            --utc-text: #0f172a;\n            --utc-muted: #64748b;\n            --utc-border: #e2e8f0;\n            --utc-primary: #2563eb;\n            --utc-accent: #3b82f6;\n            --utc-primary-hover: #1d4ed8;\n            --utc-shadow: rgba(0, 0, 0, 0.05);\n            --utc-danger: #dc2626;\n            --utc-warning: #d97706;\n            --utc-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            --utc-font-size: 14px;\n            --utc-cell-height: auto;\n            --utc-cell-width: auto;\n            --utc-border-radius: 12px;\n            --utc-header-bg: var(--utc-surface);\n            --utc-header-text: var(--utc-text);\n            --utc-grid-style: 1px solid var(--utc-border);\n            \n            font-family: var(--utc-font-family);\n            font-size: var(--utc-font-size);\n            color: var(--utc-text);\n            background-color: var(--utc-bg);\n            padding: 32px;\n            border-radius: 16px;\n            box-sizing: border-box;\n            border: 1px solid var(--utc-border);\n            margin: 24px 0;\n            width: 100%;\n            text-align: left;\n            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n            position: relative;\n        }\n\n        .utc-app-wrapper.utc-dark {\n            --utc-bg: #090d16;\n            --utc-surface: #111827;\n            --utc-card: #1f2937;\n            --utc-text: #f9fafb;\n            --utc-muted: #9ca3af;\n            --utc-border: #374151;\n            --utc-primary: #3b82f6;\n            --utc-accent: #60a5fa;\n            --utc-primary-hover: #60a5fa;\n            --utc-shadow: rgba(0, 0, 0, 0.3);\n            --utc-danger: #ef4444;\n            --utc-warning: #f59e0b;\n        }\n\n        .utc-app-wrapper.utc-fullscreen {\n            position: fixed !important;\n            top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;\n            z-index: 999999 !important; border-radius: 0 !important; margin: 0 !important;\n            overflow-y: auto !important; padding: 24px !important;\n        }\n\n        .utc-app-wrapper *, .utc-app-wrapper *::before, .utc-app-wrapper *::after {\n            box-sizing: border-box;\n        }\n\n        .utc-app-wrapper h2, .utc-app-wrapper h3 {\n            margin: 0 0 16px 0;\n            color: var(--utc-text);\n        }\n\n        .utc-app-wrapper h2 { font-size: 26px; font-weight: 700; }\n        .utc-app-wrapper h3 { font-size: 18px; font-weight: 600; }\n\n        \/* Toolbar Header *\/\n        .utc-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 24px;\n            padding-bottom: 16px;\n            border-bottom: 1px solid var(--utc-border);\n            flex-wrap: wrap;\n            gap: 16px;\n        }\n\n        .utc-theme-btn {\n            background: var(--utc-surface);\n            border: 1px solid var(--utc-border);\n            color: var(--utc-text);\n            padding: 8px 14px;\n            border-radius: var(--utc-border-radius);\n            cursor: pointer;\n            font-size: var(--utc-font-size);\n            font-weight: 500;\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            transition: all 0.2s;\n        }\n        .utc-theme-btn:hover { border-color: var(--utc-primary); }\n\n        \/* Stats overview *\/\n        .utc-stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\n            gap: 16px;\n            margin-bottom: 24px;\n        }\n        .utc-stat-card {\n            background: var(--utc-card);\n            padding: 16px;\n            border-radius: var(--utc-border-radius);\n            border: var(--utc-grid-style);\n            box-shadow: 0 2px 4px var(--utc-shadow);\n        }\n        .utc-stat-val { font-size: calc(var(--utc-font-size) + 8px); font-weight: 700; margin-bottom: 2px; color: var(--utc-accent); }\n        .utc-stat-lbl { font-size: calc(var(--utc-font-size) - 3px); text-transform: uppercase; color: var(--utc-muted); font-weight: 600; letter-spacing: 0.05em; }\n\n        \/* Action Buttons & Dropdowns *\/\n        .utc-btn-toolbar {\n            display: flex;\n            gap: 10px;\n            flex-wrap: wrap;\n            margin-bottom: 24px;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .utc-toolbar-group {\n            display: flex;\n            gap: 10px;\n            flex-wrap: wrap;\n            align-items: center;\n        }\n        .utc-btn {\n            background-color: var(--utc-primary);\n            color: #fff;\n            border: none;\n            padding: 10px 16px;\n            font-size: var(--utc-font-size);\n            font-weight: 600;\n            border-radius: var(--utc-border-radius);\n            cursor: pointer;\n            transition: background-color 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 6px;\n            text-decoration: none;\n        }\n        .utc-btn:hover { background-color: var(--utc-primary-hover); }\n        .utc-btn-sec { background-color: var(--utc-surface); color: var(--utc-text); border: var(--utc-grid-style); }\n        .utc-btn-sec:hover { background-color: var(--utc-border); }\n        .utc-btn-success { background-color: #16a34a; }\n        .utc-btn-success:hover { background-color: #15803d; }\n        .utc-btn-danger { background-color: var(--utc-danger); }\n        .utc-btn-danger:hover { background-color: #991b1b; }\n        .utc-btn.utc-active-mode {\n            background-color: var(--utc-accent);\n            color: #fff;\n            border-color: var(--utc-accent);\n        }\n        .utc-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n        \/* Dropdown Menu Container *\/\n        .utc-dropdown {\n            position: relative;\n            display: inline-block;\n        }\n        .utc-dropdown-content {\n            display: none;\n            position: absolute;\n            right: 0;\n            background-color: var(--utc-card);\n            min-width: 220px;\n            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);\n            border: var(--utc-grid-style);\n            border-radius: var(--utc-border-radius);\n            z-index: 99999;\n            padding: 6px 0;\n            margin-top: 4px;\n        }\n        .utc-dropdown-content button, .utc-dropdown-content label {\n            color: var(--utc-text);\n            padding: 10px 16px;\n            text-decoration: none;\n            display: block;\n            width: 100%;\n            text-align: left;\n            background: none;\n            border: none;\n            font-size: var(--utc-font-size);\n            font-weight: 500;\n            cursor: pointer;\n        }\n        .utc-dropdown-content button:hover, .utc-dropdown-content label:hover {\n            background-color: var(--utc-surface);\n            color: var(--utc-primary);\n        }\n        .utc-dropdown.utc-show .utc-dropdown-content {\n            display: block;\n        }\n\n        \/* View mode tabs & Zoom bar *\/\n        .utc-view-ctrls {\n            display: flex;\n            gap: 16px;\n            align-items: center;\n            background: var(--utc-surface);\n            padding: 10px 16px;\n            border-radius: var(--utc-border-radius);\n            border: var(--utc-grid-style);\n            margin-bottom: 24px;\n            flex-wrap: wrap;\n            justify-content: space-between;\n        }\n        .utc-view-tabs, .utc-zoom-tabs {\n            display: flex;\n            gap: 6px;\n            align-items: center;\n            flex-wrap: wrap;\n        }\n        .utc-tab-btn {\n            background: var(--utc-card);\n            border: var(--utc-grid-style);\n            color: var(--utc-text);\n            padding: 6px 12px;\n            border-radius: var(--utc-border-radius);\n            font-size: calc(var(--utc-font-size) - 2px);\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n        .utc-tab-btn:hover { border-color: var(--utc-primary); }\n        .utc-tab-btn.utc-active {\n            background: var(--utc-primary);\n            color: #fff;\n            border-color: var(--utc-primary);\n        }\n\n        \/* Search & Advanced Filter Toolbar *\/\n        .utc-filter-bar {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n            gap: 12px;\n            background: var(--utc-surface);\n            padding: 16px;\n            border-radius: var(--utc-border-radius);\n            border: var(--utc-grid-style);\n            margin-bottom: 24px;\n        }\n\n        \/* Layout Grid *\/\n        .utc-layout {\n            display: grid;\n            grid-template-columns: 380px 1fr;\n            gap: 28px;\n            align-items: start;\n        }\n        @media (max-width: 1024px) {\n            .utc-layout { grid-template-columns: 1fr; }\n        }\n\n        .utc-sidebar, .utc-preview-container {\n            background: var(--utc-card);\n            padding: 24px;\n            border-radius: var(--utc-border-radius);\n            border: var(--utc-grid-style);\n            box-shadow: 0 4px 6px -1px var(--utc-shadow);\n        }\n        .utc-sidebar { max-height: 85vh; overflow-y: auto; }\n        \n        .utc-preview-wrapper {\n            overflow: auto;\n            width: 100%;\n            transition: transform 0.2s ease;\n            transform-origin: top left;\n        }\n        .utc-preview-wrapper.utc-fit-mode {\n            width: 100% !important;\n            transform: none !important;\n        }\n\n        \/* Forms *\/\n        .utc-form-group {\n            display: flex;\n            flex-direction: column;\n            margin-bottom: 16px;\n        }\n        .utc-form-group label {\n            font-size: calc(var(--utc-font-size) - 1px);\n            font-weight: 600;\n            margin-bottom: 6px;\n            color: var(--utc-muted);\n        }\n        .utc-input {\n            padding: 10px 14px;\n            border: var(--utc-grid-style);\n            border-radius: var(--utc-border-radius);\n            font-size: var(--utc-font-size);\n            background-color: var(--utc-surface);\n            color: var(--utc-text);\n            width: 100%;\n            transition: border-color 0.2s, box-shadow 0.2s;\n        }\n        .utc-input:focus {\n            outline: none;\n            border-color: var(--utc-primary);\n            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n        }\n        input[type=\"color\"].utc-input {\n            padding: 4px 8px;\n            height: 40px;\n            cursor: pointer;\n        }\n        .utc-checkbox-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 8px;\n        }\n        .utc-checkbox-lbl {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            font-size: var(--utc-font-size);\n            cursor: pointer;\n            color: var(--utc-text);\n        }\n\n        \/* Banner metadata *\/\n        .utc-meta-banner {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px;\n            background: var(--utc-surface);\n            padding: 14px;\n            border-radius: var(--utc-border-radius);\n            border: var(--utc-grid-style);\n            margin-bottom: 20px;\n            font-size: var(--utc-font-size);\n        }\n        .utc-meta-item strong {\n            color: var(--utc-muted);\n            display: block;\n            font-size: calc(var(--utc-font-size) - 3px);\n            text-transform: uppercase;\n        }\n\n        \/* Timetable Table Styles *\/\n        .utc-table-wrap { width: 100%; overflow-x: auto; }\n        .utc-table {\n            width: 100%;\n            border-collapse: separate;\n            border-spacing: 0;\n            text-align: center;\n            min-width: 700px;\n        }\n        .utc-table th, .utc-table td {\n            border: var(--utc-grid-style);\n            padding: 12px 10px;\n            font-size: var(--utc-font-size);\n            vertical-align: middle;\n            height: var(--utc-cell-height);\n            width: var(--utc-cell-width);\n        }\n        .utc-table.utc-compact-table th, .utc-table.utc-compact-table td {\n            padding: 6px 8px;\n        }\n        .utc-table th {\n            background-color: var(--utc-header-bg);\n            color: var(--utc-header-text);\n            font-weight: 600;\n        }\n        .utc-time-cell {\n            background-color: var(--utc-surface);\n            font-weight: 600;\n            color: var(--utc-muted);\n            width: 140px;\n            font-size: calc(var(--utc-font-size) - 1px);\n        }\n        .utc-time-col-hidden .utc-time-cell {\n            display: none !important;\n        }\n\n        \/* Slot Cards & Drag and Drop *\/\n        .utc-slot {\n            border-radius: calc(var(--utc-border-radius) - 2px);\n            padding: 10px;\n            cursor: grab;\n            text-align: left;\n            position: relative;\n            transition: transform 0.15s, box-shadow 0.15s;\n            box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n            user-select: none;\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n        .utc-table.utc-compact-table .utc-slot {\n            padding: 6px 8px;\n            border-radius: calc(var(--utc-border-radius) - 4px);\n        }\n        .utc-slot:active { cursor: grabbing; }\n        .utc-slot:hover {\n            box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);\n            transform: translateY(-1px);\n        }\n        .utc-slot.utc-dragging { opacity: 0.4; }\n        .utc-slot.utc-conflict {\n            border: 2px dashed var(--utc-danger) !important;\n            animation: utc-pulse 1.5s infinite;\n        }\n        .utc-slot.utc-highlighted {\n            box-shadow: 0 0 0 3px var(--utc-accent) !important;\n        }\n        @keyframes utc-pulse {\n            0% { opacity: 1; }\n            50% { opacity: 0.6; }\n            100% { opacity: 1; }\n        }\n\n        .utc-slot-title { font-weight: 700; font-size: var(--utc-font-size); margin-bottom: 3px; }\n        .utc-table.utc-compact-table .utc-slot-title { font-size: calc(var(--utc-font-size) - 2px); margin-bottom: 1px; }\n        .utc-slot-det { font-size: calc(var(--utc-font-size) - 3px); opacity: 0.9; line-height: 1.3; }\n        .utc-table.utc-compact-table .utc-slot-det { font-size: calc(var(--utc-font-size) - 4px); }\n        \n        .utc-empty-slot {\n            color: var(--utc-muted);\n            font-style: italic;\n            font-size: calc(var(--utc-font-size) - 1px);\n            cursor: pointer;\n            padding: 18px 10px;\n            border: 1px dashed var(--utc-border);\n            border-radius: calc(var(--utc-border-radius) - 2px);\n            background: var(--utc-surface);\n            transition: all 0.2s;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .utc-table.utc-compact-table .utc-empty-slot {\n            padding: 8px 6px;\n        }\n        .utc-empty-slot:hover {\n            background: var(--utc-card);\n            border-color: var(--utc-primary);\n            color: var(--utc-primary);\n        }\n        .utc-empty-slot.utc-drag-over {\n            background: var(--utc-primary);\n            color: #fff;\n            border-style: solid;\n        }\n\n        \/* Conflict Notification Panel *\/\n        .utc-conflict-alert {\n            background-color: rgba(239, 68, 68, 0.1);\n            border: 1px solid var(--utc-danger);\n            color: var(--utc-danger);\n            padding: 12px 16px;\n            border-radius: var(--utc-border-radius);\n            margin-bottom: 20px;\n            font-size: var(--utc-font-size);\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        \/* Modal Overlay *\/\n        .utc-modal {\n            display: none;\n            position: fixed;\n            z-index: 9999999;\n            left: 0; top: 0; width: 100%; height: 100%;\n            background-color: rgba(0, 0, 0, 0.6);\n            backdrop-filter: blur(4px);\n            align-items: center;\n            justify-content: center;\n            padding: 16px;\n        }\n        .utc-modal-box {\n            background-color: var(--utc-card);\n            color: var(--utc-text);\n            padding: 28px;\n            border-radius: var(--utc-border-radius);\n            width: 100%;\n            max-width: 460px;\n            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n            border: var(--utc-grid-style);\n            max-height: 90vh;\n            overflow-y: auto;\n        }\n        .utc-modal-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 20px;\n            border-bottom: var(--utc-grid-style);\n            padding-bottom: 12px;\n        }\n        .utc-close-btn {\n            background: none; border: none; font-size: 24px; font-weight: bold; cursor: pointer; color: var(--utc-muted);\n        }\n        .utc-close-btn:hover { color: var(--utc-text); }\n\n        \/* Print A4 Optimization *\/\n        @media print {\n            @page {\n                size: A4 landscape;\n                margin: 10mm;\n            }\n            .utc-header, .utc-btn-toolbar, .utc-sidebar, .utc-stats-grid, .utc-theme-btn, .utc-filter-bar, .utc-conflict-alert, .utc-view-ctrls {\n                display: none !important;\n            }\n            .utc-layout { display: block !important; }\n            .utc-app-wrapper { border: none !important; padding: 0 !important; background: #fff !important; color: #000 !important; width: 100% !important; margin: 0 !important; }\n            .utc-preview-container { border: none !important; box-shadow: none !important; padding: 0 !important; }\n            .utc-preview-wrapper { overflow: visible !important; width: 100% !important; transform: none !important; }\n            .utc-table { width: 100% !important; }\n            .utc-table th, .utc-table td { border: 1px solid #000 !important; }\n            .utc-slot { break-inside: avoid; }\n        }\n    <\/style>\n\n    <!-- Top Sticky Toolbar \/ Header -->\n    <div class=\"utc-header\">\n        <div>\n            <h2>Universal Timetable Creator Pro<\/h2>\n            <p style=\"margin: 0; font-size: calc(var(--utc-font-size) - 1px); color: var(--utc-muted);\">Professional scheduling suite with advanced export tools and live synchronization.<\/p>\n        <\/div>\n        <button type=\"button\" class=\"utc-theme-btn\" id=\"utc-theme-toggle\">\n            <span id=\"utc-theme-icon\">\ud83c\udf19<\/span> <span id=\"utc-theme-text\">Dark Mode<\/span>\n        <\/button>\n    <\/div>\n\n    <!-- Live Stats Analytics Dashboard -->\n    <div class=\"utc-stats-grid\">\n        <div class=\"utc-stat-card\">\n            <div class=\"utc-stat-val\" id=\"utc-stat-scheduled\">0<\/div>\n            <div class=\"utc-stat-lbl\">Scheduled Slots<\/div>\n        <\/div>\n        <div class=\"utc-stat-card\">\n            <div class=\"utc-stat-val\" id=\"utc-stat-conflicts\">0<\/div>\n            <div class=\"utc-stat-lbl\" style=\"color: var(--utc-danger);\">Conflicts Found<\/div>\n        <\/div>\n        <div class=\"utc-stat-card\">\n            <div class=\"utc-stat-val\" id=\"utc-stat-occupancy\">0%<\/div>\n            <div class=\"utc-stat-lbl\">Occupancy Rate<\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Functional Command Toolbar -->\n    <div class=\"utc-btn-toolbar\">\n        <div class=\"utc-toolbar-group\">\n            <button type=\"button\" class=\"utc-btn utc-btn-success\" id=\"utc-btn-auto-schedule\">\u2728 Auto-Generate<\/button>\n            <button type=\"button\" class=\"utc-btn utc-btn-sec\" id=\"utc-btn-manual-toggle\" title=\"Toggle Manual Mode\">\ud83d\udd90\ufe0f Manual Mode<\/button>\n            <button type=\"button\" class=\"utc-btn\" id=\"utc-btn-undo\" title=\"Undo Action\" disabled=\"\">\u21a9\ufe0f Undo<\/button>\n            <button type=\"button\" class=\"utc-btn\" id=\"utc-btn-redo\" title=\"Redo Action\" disabled=\"\">\ud83d\udd01 Redo<\/button>\n        <\/div>\n        <div class=\"utc-toolbar-group\">\n            <!-- Export \/ Import Dropdown Menu -->\n            <div class=\"utc-dropdown\" id=\"utc-export-dropdown\">\n                <button type=\"button\" class=\"utc-btn\" id=\"utc-dropdown-toggle\">\ud83d\udcbe Export &amp; Import \u25be<\/button>\n                <div class=\"utc-dropdown-content\">\n                    <button type=\"button\" id=\"utc-exp-print\">\ud83d\udda8\ufe0f Print \/ Save as PDF<\/button>\n                    <button type=\"button\" id=\"utc-exp-copy\">\ud83d\udccb Copy Timetable<\/button>\n                    <button type=\"button\" id=\"utc-exp-json\">\ud83d\udce5 Download JSON<\/button>\n                    <label for=\"utc-imp-json-file\">\ud83d\udce4 Import JSON <input type=\"file\" id=\"utc-imp-json-file\" accept=\".json\" style=\"display:none;\"><\/label>\n                    <button type=\"button\" id=\"utc-exp-csv\">\ud83d\udcca Export CSV<\/button>\n                    <label for=\"utc-imp-csv-file\">\ud83d\udcc8 Import CSV <input type=\"file\" id=\"utc-imp-csv-file\" accept=\".csv\" style=\"display:none;\"><\/label>\n                    <button type=\"button\" id=\"utc-exp-html\">\ud83c\udf10 Download HTML<\/button>\n                    <button type=\"button\" id=\"utc-exp-png\">\ud83d\uddbc\ufe0f Download PNG (Canvas)<\/button>\n                    <button type=\"button\" id=\"utc-exp-svg\">\ud83d\udcd0 Download SVG<\/button>\n                <\/div>\n            <\/div>\n            <button type=\"button\" class=\"utc-btn utc-btn-sec\" id=\"utc-btn-fullscreen\">\ud83d\uddb5 Fullscreen<\/button>\n            <button type=\"button\" class=\"utc-btn utc-btn-danger\" id=\"utc-btn-reset\">Reset All<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- View Modes & Zoom Control Toolbar -->\n    <div class=\"utc-view-ctrls\">\n        <div class=\"utc-view-tabs\">\n            <span style=\"font-size: calc(var(--utc-font-size) - 2px); font-weight: 600; color: var(--utc-muted); margin-right: 4px;\">Layout:<\/span>\n            <button type=\"button\" class=\"utc-tab-btn utc-active\" data-view=\"weekly\">Weekly View<\/button>\n            <button type=\"button\" class=\"utc-tab-btn\" data-view=\"daily\">Daily View<\/button>\n            <button type=\"button\" class=\"utc-tab-btn\" data-view=\"compact\">Compact View<\/button>\n        <\/div>\n        <div class=\"utc-zoom-tabs\">\n            <span style=\"font-size: calc(var(--utc-font-size) - 2px); font-weight: 600; color: var(--utc-muted); margin-right: 4px;\">Zoom:<\/span>\n            <button type=\"button\" class=\"utc-tab-btn\" data-zoom=\"80\">80%<\/button>\n            <button type=\"button\" class=\"utc-tab-btn utc-active\" data-zoom=\"100\">100%<\/button>\n            <button type=\"button\" class=\"utc-tab-btn\" data-zoom=\"125\">125%<\/button>\n            <button type=\"button\" class=\"utc-tab-btn\" data-zoom=\"150\">150%<\/button>\n            <button type=\"button\" class=\"utc-tab-btn\" id=\"utc-fit-page-btn\" data-zoom=\"fit\">Fit to Page<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Search & Advanced Filter Toolbar -->\n    <div class=\"utc-filter-bar\">\n        <div class=\"utc-form-group\" style=\"margin-bottom:0;\">\n            <label for=\"utc-search-subject\">Search Subject \/ Info<\/label>\n            <input type=\"text\" id=\"utc-search-subject\" class=\"utc-input\" placeholder=\"Type keyword...\">\n        <\/div>\n        <div class=\"utc-form-group\" style=\"margin-bottom:0;\">\n            <label for=\"utc-filter-subject\">Filter Subject<\/label>\n            <select id=\"utc-filter-subject\" class=\"utc-input\">\n                <option value=\"\">All Subjects<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"utc-form-group\" style=\"margin-bottom:0;\">\n            <label for=\"utc-filter-teacher\">Filter Teacher<\/label>\n            <select id=\"utc-filter-teacher\" class=\"utc-input\">\n                <option value=\"\">All Teachers<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"utc-form-group\" style=\"margin-bottom:0;\" id=\"utc-filter-day-wrapper\">\n            <label for=\"utc-filter-day\">Filter Day<\/label>\n            <select id=\"utc-filter-day\" class=\"utc-input\">\n                <option value=\"\">All Days<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n\n    <!-- Conflict Warning Banner Area -->\n    <div id=\"utc-conflict-banner\" class=\"utc-conflict-alert\" style=\"display: none;\">\n        <span>\u26a0\ufe0f<\/span> <span id=\"utc-conflict-text\">Warning: Overlapping teacher or room assignments detected in active slots!<\/span>\n    <\/div>\n\n    <!-- Main Workspace Grid -->\n    <div class=\"utc-layout\">\n        \n        <!-- Sidebar Customizer Panel -->\n        <div class=\"utc-sidebar\">\n            <h3>Schedule Profile &amp; Styling<\/h3>\n            \n            <div class=\"utc-form-group\">\n                <label for=\"utc-preset\">Timetable Mode<\/label>\n                <select id=\"utc-preset\" class=\"utc-input\">\n                    <option value=\"School\">School<\/option>\n                    <option value=\"College\">College<\/option>\n                    <option value=\"University\" selected=\"\">University<\/option>\n                    <option value=\"Coaching\">Coaching<\/option>\n                    <option value=\"Personal Study\">Personal Study<\/option>\n                    <option value=\"Weekly Planner\">Weekly Planner<\/option>\n                    <option value=\"Office Schedule\">Office Schedule<\/option>\n                    <option value=\"Custom Planner\">Custom Planner<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-title\">Timetable Title<\/label>\n                <input type=\"text\" id=\"utc-title\" class=\"utc-input\" value=\"Master Schedule\">\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-institution\">Institution Name<\/label>\n                <input type=\"text\" id=\"utc-institution\" class=\"utc-input\" placeholder=\"e.g. Apex University\">\n            <\/div>\n\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-class\">Class \/ Grade<\/label>\n                    <input type=\"text\" id=\"utc-class\" class=\"utc-input\" placeholder=\"e.g. B.Tech\">\n                <\/div>\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-section\">Section<\/label>\n                    <input type=\"text\" id=\"utc-section\" class=\"utc-input\" placeholder=\"e.g. Section A\">\n                <\/div>\n            <\/div>\n\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-start-time\">Start Time<\/label>\n                    <input type=\"time\" id=\"utc-start-time\" class=\"utc-input\" value=\"09:00\">\n                <\/div>\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-duration\">Slot Duration (Mins)<\/label>\n                    <input type=\"number\" id=\"utc-duration\" class=\"utc-input\" value=\"60\" min=\"15\" max=\"180\">\n                <\/div>\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-slots-count\">Number of Time Slots<\/label>\n                <select id=\"utc-slots-count\" class=\"utc-input\">\n                    <option value=\"4\">4 Slots<\/option>\n                    <option value=\"5\">5 Slots<\/option>\n                    <option value=\"6\" selected=\"\">6 Slots<\/option>\n                    <option value=\"7\">7 Slots<\/option>\n                    <option value=\"8\">8 Slots<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label>Working Days<\/label>\n                <div class=\"utc-checkbox-grid\" id=\"utc-days-container\">\n                    <label class=\"utc-checkbox-lbl\"><input type=\"checkbox\" value=\"Monday\" checked=\"\"> Monday<\/label>\n                    <label class=\"utc-checkbox-lbl\"><input type=\"checkbox\" value=\"Tuesday\" checked=\"\"> Tuesday<\/label>\n                    <label class=\"utc-checkbox-lbl\"><input type=\"checkbox\" value=\"Wednesday\" checked=\"\"> Wednesday<\/label>\n                    <label class=\"utc-checkbox-lbl\"><input type=\"checkbox\" value=\"Thursday\" checked=\"\"> Thursday<\/label>\n                    <label class=\"utc-checkbox-lbl\"><input type=\"checkbox\" value=\"Friday\" checked=\"\"> Friday<\/label>\n                    <label class=\"utc-checkbox-lbl\"><input type=\"checkbox\" value=\"Saturday\"> Saturday<\/label>\n                    <label class=\"utc-checkbox-lbl\"><input type=\"checkbox\" value=\"Sunday\"> Sunday<\/label>\n                <\/div>\n            <\/div>\n\n            <hr style=\"border: none; border-top: var(--utc-grid-style); margin: 20px 0;\">\n            <h3>Advanced Customization<\/h3>\n\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-primary\">Primary Color<\/label>\n                    <input type=\"color\" id=\"utc-custom-primary\" class=\"utc-input\" value=\"#2563eb\">\n                <\/div>\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-accent\">Accent Color<\/label>\n                    <input type=\"color\" id=\"utc-custom-accent\" class=\"utc-input\" value=\"#3b82f6\">\n                <\/div>\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-custom-font-family\">Font Family<\/label>\n                <select id=\"utc-custom-font-family\" class=\"utc-input\">\n                    <option value=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\">System Default<\/option>\n                    <option value=\"'Inter', sans-serif\">Inter<\/option>\n                    <option value=\"'Roboto', sans-serif\">Roboto<\/option>\n                    <option value=\"'Poppins', sans-serif\">Poppins<\/option>\n                    <option value=\"'Georgia', serif\">Georgia (Serif)<\/option>\n                    <option value=\"'Courier New', monospace\">Monospace<\/option>\n                <\/select>\n            <\/div>\n\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-font-size\">Font Size<\/label>\n                    <select id=\"utc-custom-font-size\" class=\"utc-input\">\n                        <option value=\"12px\">Small (12px)<\/option>\n                        <option value=\"14px\" selected=\"\">Normal (14px)<\/option>\n                        <option value=\"16px\">Large (16px)<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-border-radius\">Border Radius<\/label>\n                    <select id=\"utc-custom-border-radius\" class=\"utc-input\">\n                        <option value=\"0px\">Square (0px)<\/option>\n                        <option value=\"8px\">Rounded (8px)<\/option>\n                        <option value=\"12px\" selected=\"\">Smooth (12px)<\/option>\n                        <option value=\"20px\">Pill (20px)<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-cell-height\">Cell Height<\/label>\n                    <input type=\"text\" id=\"utc-custom-cell-height\" class=\"utc-input\" placeholder=\"e.g. 70px or auto\" value=\"auto\">\n                <\/div>\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-cell-width\">Cell Width<\/label>\n                    <input type=\"text\" id=\"utc-custom-cell-width\" class=\"utc-input\" placeholder=\"e.g. 150px or auto\" value=\"auto\">\n                <\/div>\n            <\/div>\n\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-header-style\">Header Style<\/label>\n                    <select id=\"utc-custom-header-style\" class=\"utc-input\">\n                        <option value=\"surface\" selected=\"\">Surface Tint<\/option>\n                        <option value=\"primary\">Primary Solid<\/option>\n                        <option value=\"minimal\">Minimal Outline<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-custom-grid-toggle\">Grid Borders<\/label>\n                    <select id=\"utc-custom-grid-toggle\" class=\"utc-input\">\n                        <option value=\"show\" selected=\"\">Show Grid<\/option>\n                        <option value=\"hide\">Hide Grid<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-custom-time-toggle\">Time Column<\/label>\n                <select id=\"utc-custom-time-toggle\" class=\"utc-input\">\n                    <option value=\"show\" selected=\"\">Show Time Column<\/option>\n                    <option value=\"hide\">Hide Time Column<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-custom-theme-preset\">Theme Presets<\/label>\n                <select id=\"utc-custom-theme-preset\" class=\"utc-input\">\n                    <option value=\"blue\" selected=\"\">Blue<\/option>\n                    <option value=\"green\">Green<\/option>\n                    <option value=\"purple\">Purple<\/option>\n                    <option value=\"orange\">Orange<\/option>\n                    <option value=\"gray\">Gray<\/option>\n                    <option value=\"black\">Black<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <!-- Live Timetable Preview Panel -->\n        <div class=\"utc-preview-container\" id=\"utc-printable-area\">\n            \n            <div class=\"utc-meta-banner\" id=\"utc-meta-banner\">\n                <div class=\"utc-meta-item\"><strong>Institution<\/strong> <span id=\"utc-meta-inst\">University Name<\/span><\/div>\n                <div class=\"utc-meta-item\"><strong>Class \/ Sec<\/strong> <span id=\"utc-meta-classsec\">B.Tech &#8211; Section A<\/span><\/div>\n            <\/div>\n\n            <h3 id=\"utc-render-title\" style=\"text-align: center; margin-bottom: 24px;\">Master Schedule<\/h3>\n\n            <div class=\"utc-preview-wrapper\" id=\"utc-preview-wrapper\">\n                <div class=\"utc-table-wrap\">\n                    <table class=\"utc-table\" id=\"utc-table-element\">\n                        <!-- Dynamic rendering engine -->\n                    <\/table>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Infinite Slot Editor & Action Modal -->\n    <div class=\"utc-modal\" id=\"utc-modal\">\n        <div class=\"utc-modal-box\">\n            <div class=\"utc-modal-header\">\n                <h3 id=\"utc-modal-title\" style=\"margin: 0;\">Configure Entry<\/h3>\n                <button type=\"button\" class=\"utc-close-btn\" id=\"utc-modal-close\">\u00d7<\/button>\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-modal-subject\">Subject \/ Activity Name<\/label>\n                <input type=\"text\" id=\"utc-modal-subject\" class=\"utc-input\" placeholder=\"e.g. Advanced Mathematics\">\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-modal-teacher\">Teacher \/ Instructor Name<\/label>\n                <input type=\"text\" id=\"utc-modal-teacher\" class=\"utc-input\" placeholder=\"e.g. Prof. Alan Turing\">\n            <\/div>\n\n            <div class=\"utc-form-group\">\n                <label for=\"utc-modal-room\">Room \/ Location<\/label>\n                <input type=\"text\" id=\"utc-modal-room\" class=\"utc-input\" placeholder=\"e.g. Room 402 \/ Lab A\">\n            <\/div>\n\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-modal-color-scheme\">Color Theme By<\/label>\n                    <select id=\"utc-modal-color-scheme\" class=\"utc-input\">\n                        <option value=\"subject\">Subject<\/option>\n                        <option value=\"teacher\">Teacher<\/option>\n                        <option value=\"room\">Room<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"utc-form-group\">\n                    <label for=\"utc-modal-color\">Color Category<\/label>\n                    <select id=\"utc-modal-color\" class=\"utc-input\">\n                        <option value=\"blue\">Blue (Default)<\/option>\n                        <option value=\"emerald\">Emerald Green<\/option>\n                        <option value=\"purple\">Purple Indigo<\/option>\n                        <option value=\"amber\">Amber Gold<\/option>\n                        <option value=\"rose\">Rose Crimson<\/option>\n                        <option value=\"cyan\">Cyan Teal<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <div class=\"utc-form-group\" style=\"margin-bottom: 24px;\">\n                <label for=\"utc-modal-notes\">Additional Notes \/ Agenda<\/label>\n                <textarea id=\"utc-modal-notes\" class=\"utc-input\" rows=\"2\" placeholder=\"e.g. Bring assigned coursework notebook\"><\/textarea>\n            <\/div>\n\n            <div style=\"display: flex; gap: 10px; justify-content: space-between; align-items: center;\">\n                <div>\n                    <button type=\"button\" class=\"utc-btn utc-btn-sec\" id=\"utc-modal-duplicate\" style=\"font-size:calc(var(--utc-font-size) - 2px); padding:8px 12px;\">Duplicate<\/button>\n                    <button type=\"button\" class=\"utc-btn utc-btn-danger\" id=\"utc-modal-clear\" style=\"font-size:calc(var(--utc-font-size) - 2px); padding:8px 12px;\">Delete<\/button>\n                <\/div>\n                <button type=\"button\" class=\"utc-btn\" id=\"utc-modal-save\">Save Entry<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Core Runtime Execution Engine -->\n    <script>\n        (function() {\n            'use strict';\n\n            const colorPalette = {\n                blue: { bg: '#eff6ff', border: '#bfdbfe', text: '#1e40af' },\n                emerald: { bg: '#ecfdf5', border: '#a7f3d0', text: '#065f46' },\n                purple: { bg: '#f5f3ff', border: '#ddd6fe', text: '#5b21b6' },\n                amber: { bg: '#fffbeb', border: '#fde68a', text: '#92400e' },\n                rose: { bg: '#fff1f2', border: '#fecdd3', text: '#9f1239' },\n                cyan: { bg: '#ecfeff', border: '#a5f3fc', text: '#155e75' }\n            };\n\n            const presetColorKeys = ['blue', 'emerald', 'purple', 'amber', 'rose', 'cyan'];\n\n            const themePresets = {\n                blue: { primary: '#2563eb', accent: '#3b82f6' },\n                green: { primary: '#16a34a', accent: '#22c55e' },\n                purple: { primary: '#7c3aed', accent: '#8b5cf6' },\n                orange: { primary: '#ea580c', accent: '#f97316' },\n                gray: { primary: '#475569', accent: '#64748b' },\n                black: { primary: '#0f172a', accent: '#334155' }\n            };\n\n            const state = {\n                preset: \"University\",\n                title: \"Master Schedule\",\n                institution: \"Apex University\",\n                className: \"B.Tech\",\n                section: \"Section A\",\n                startTime: \"09:00\",\n                slotDuration: 60,\n                slotsCount: 6,\n                workingDays: [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\"],\n                darkMode: false,\n                viewMode: \"weekly\",\n                zoomLevel: \"100\",\n                manualMode: false,\n                dailySelectedDay: \"Monday\",\n                primaryColor: \"#2563eb\",\n                accentColor: \"#3b82f6\",\n                fontFamily: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\",\n                fontSize: \"14px\",\n                borderRadius: \"12px\",\n                cellHeight: \"auto\",\n                cellWidth: \"auto\",\n                headerStyle: \"surface\",\n                gridToggle: \"show\",\n                timeToggle: \"show\",\n                themePreset: \"blue\",\n                entries: {}\n            };\n\n            let undoStack = [];\n            let redoStack = [];\n\n            let searchKeyword = \"\";\n            let filterSubjectVal = \"\";\n            let filterTeacherVal = \"\";\n            let filterDayVal = \"\";\n\n            const wrapper = document.querySelector('.utc-app-wrapper');\n            const presetSelect = document.getElementById('utc-preset');\n            const titleInput = document.getElementById('utc-title');\n            const instInput = document.getElementById('utc-institution');\n            const classInput = document.getElementById('utc-class');\n            const secInput = document.getElementById('utc-section');\n            const startTimeInput = document.getElementById('utc-start-time');\n            const durationInput = document.getElementById('utc-duration');\n            const slotsCountSelect = document.getElementById('utc-slots-count');\n            const dayCheckboxes = document.querySelectorAll('#utc-days-container input[type=\"checkbox\"]');\n\n            const primaryColorInput = document.getElementById('utc-custom-primary');\n            const accentColorInput = document.getElementById('utc-custom-accent');\n            const fontFamilySelect = document.getElementById('utc-custom-font-family');\n            const fontSizeSelect = document.getElementById('utc-custom-font-size');\n            const borderRadiusSelect = document.getElementById('utc-custom-border-radius');\n            const cellHeightInput = document.getElementById('utc-custom-cell-height');\n            const cellWidthInput = document.getElementById('utc-custom-cell-width');\n            const headerStyleSelect = document.getElementById('utc-custom-header-style');\n            const gridToggleSelect = document.getElementById('utc-custom-grid-toggle');\n            const timeToggleSelect = document.getElementById('utc-custom-time-toggle');\n            const themePresetSelect = document.getElementById('utc-custom-theme-preset');\n\n            const renderTitle = document.getElementById('utc-render-title');\n            const tableElement = document.getElementById('utc-table-element');\n            const previewWrapper = document.getElementById('utc-preview-wrapper');\n            const metaBanner = document.getElementById('utc-meta-banner');\n            const metaInst = document.getElementById('utc-meta-inst');\n            const metaClassSec = document.getElementById('utc-meta-classsec');\n\n            const statScheduled = document.getElementById('utc-stat-scheduled');\n            const statConflicts = document.getElementById('utc-stat-conflicts');\n            const statOccupancy = document.getElementById('utc-stat-occupancy');\n            const conflictBanner = document.getElementById('utc-conflict-banner');\n\n            const searchInput = document.getElementById('utc-search-subject');\n            const filterSubjectSelect = document.getElementById('utc-filter-subject');\n            const filterTeacherSelect = document.getElementById('utc-filter-teacher');\n            const filterDaySelect = document.getElementById('utc-filter-day');\n            const filterDayWrapper = document.getElementById('utc-filter-day-wrapper');\n\n            const undoBtn = document.getElementById('utc-btn-undo');\n            const redoBtn = document.getElementById('utc-btn-redo');\n            const manualToggleBtn = document.getElementById('utc-btn-manual-toggle');\n            const themeToggleBtn = document.getElementById('utc-theme-toggle');\n            const themeIcon = document.getElementById('utc-theme-icon');\n            const themeText = document.getElementById('utc-theme-text');\n            const fullscreenBtn = document.getElementById('utc-btn-fullscreen');\n\n            const dropdownToggle = document.getElementById('utc-dropdown-toggle');\n            const exportDropdown = document.getElementById('utc-export-dropdown');\n\n            const viewTabBtns = document.querySelectorAll('.utc-view-tabs .utc-tab-btn');\n            const zoomTabBtns = document.querySelectorAll('.utc-zoom-tabs .utc-tab-btn');\n\n            const modal = document.getElementById('utc-modal');\n            const modalClose = document.getElementById('utc-modal-close');\n            const modalSave = document.getElementById('utc-modal-save');\n            const modalClear = document.getElementById('utc-modal-clear');\n            const modalDuplicate = document.getElementById('utc-modal-duplicate');\n            const modalSubject = document.getElementById('utc-modal-subject');\n            const modalTeacher = document.getElementById('utc-modal-teacher');\n            const modalRoom = document.getElementById('utc-modal-room');\n            const modalColorScheme = document.getElementById('utc-modal-color-scheme');\n            const modalColor = document.getElementById('utc-modal-color');\n            const modalNotes = document.getElementById('utc-modal-notes');\n\n            let activeCell = null;\n            let draggedCell = null;\n\n            function initApp() {\n                loadState();\n                bindEvents();\n                applyCustomStyles();\n                renderTimetable();\n            }\n\n            function recordHistory() {\n                undoStack.push(JSON.stringify(state.entries));\n                if (undoStack.length > 30) undoStack.shift();\n                redoStack = [];\n                updateHistoryButtons();\n            }\n\n            function updateHistoryButtons() {\n                undoBtn.disabled = undoStack.length === 0;\n                redoBtn.disabled = redoStack.length === 0;\n            }\n\n            function saveState() {\n                try {\n                    localStorage.setItem('utc_timetable_pro_v8', JSON.stringify(state));\n                } catch (e) {\n                    console.error('Storage access blocked', e);\n                }\n            }\n\n            function loadState() {\n                try {\n                    const saved = localStorage.getItem('utc_timetable_pro_v8');\n                    if (saved) {\n                        const parsed = JSON.parse(saved);\n                        Object.assign(state, parsed);\n\n                        presetSelect.value = state.preset;\n                        titleInput.value = state.title;\n                        instInput.value = state.institution;\n                        classInput.value = state.className;\n                        secInput.value = state.section;\n                        startTimeInput.value = state.startTime;\n                        durationInput.value = state.slotDuration;\n                        slotsCountSelect.value = state.slotsCount;\n\n                        primaryColorInput.value = state.primaryColor;\n                        accentColorInput.value = state.accentColor;\n                        fontFamilySelect.value = state.fontFamily;\n                        fontSizeSelect.value = state.fontSize;\n                        borderRadiusSelect.value = state.borderRadius;\n                        cellHeightInput.value = state.cellHeight;\n                        cellWidthInput.value = state.cellWidth;\n                        headerStyleSelect.value = state.headerStyle;\n                        gridToggleSelect.value = state.gridToggle;\n                        timeToggleSelect.value = state.timeToggle;\n                        themePresetSelect.value = state.themePreset;\n\n                        dayCheckboxes.forEach(cb => {\n                            cb.checked = state.workingDays.includes(cb.value);\n                        });\n\n                        if (state.darkMode) {\n                            wrapper.classList.add('utc-dark');\n                            themeIcon.textContent = '\u2600\ufe0f';\n                            themeText.textContent = 'Light Mode';\n                        }\n\n                        if (state.manualMode) {\n                            manualToggleBtn.classList.add('utc-active-mode');\n                            manualToggleBtn.textContent = '\ud83d\udd90\ufe0f Manual Mode (Active)';\n                        }\n\n                        updateViewTabsUI();\n                        updateZoomTabsUI();\n                    }\n                } catch (e) {\n                    console.error('State retrieval error', e);\n                }\n            }\n\n            function applyCustomStyles() {\n                wrapper.style.setProperty('--utc-primary', state.primaryColor);\n                wrapper.style.setProperty('--utc-accent', state.accentColor);\n                wrapper.style.setProperty('--utc-font-family', state.fontFamily);\n                wrapper.style.setProperty('--utc-font-size', state.fontSize);\n                wrapper.style.setProperty('--utc-border-radius', state.borderRadius);\n                wrapper.style.setProperty('--utc-cell-height', state.cellHeight);\n                wrapper.style.setProperty('--utc-cell-width', state.cellWidth);\n\n                if (state.gridToggle === 'hide') {\n                    wrapper.style.setProperty('--utc-grid-style', 'none');\n                } else {\n                    wrapper.style.setProperty('--utc-grid-style', '1px solid var(--utc-border)');\n                }\n\n                if (state.headerStyle === 'primary') {\n                    wrapper.style.setProperty('--utc-header-bg', state.primaryColor);\n                    wrapper.style.setProperty('--utc-header-text', '#ffffff');\n                } else if (state.headerStyle === 'minimal') {\n                    wrapper.style.setProperty('--utc-header-bg', 'transparent');\n                    wrapper.style.setProperty('--utc-header-text', 'var(--utc-text)');\n                } else {\n                    wrapper.style.setProperty('--utc-header-bg', 'var(--utc-surface)');\n                    wrapper.style.setProperty('--utc-header-text', 'var(--utc-text)');\n                }\n\n                if (state.timeToggle === 'hide') {\n                    tableElement.classList.add('utc-time-col-hidden');\n                } else {\n                    tableElement.classList.remove('utc-time-col-hidden');\n                }\n            }\n\n            function bindEvents() {\n                presetSelect.addEventListener('change', e => { state.preset = e.target.value; saveState(); });\n                titleInput.addEventListener('input', e => { \n                    state.title = e.target.value; \n                    renderTitle.textContent = state.title || \"Timetable\"; \n                    saveState(); \n                });\n                instInput.addEventListener('input', e => { state.institution = e.target.value; updateMetaBanner(); saveState(); });\n                classInput.addEventListener('input', e => { state.className = e.target.value; updateMetaBanner(); saveState(); });\n                secInput.addEventListener('input', e => { state.section = e.target.value; updateMetaBanner(); saveState(); });\n                startTimeInput.addEventListener('change', e => { state.startTime = e.target.value; renderTimetable(); saveState(); });\n                durationInput.addEventListener('input', e => { state.slotDuration = parseInt(e.target.value, 10) || 60; renderTimetable(); saveState(); });\n                slotsCountSelect.addEventListener('change', e => { state.slotsCount = parseInt(e.target.value, 10); renderTimetable(); saveState(); });\n\n                primaryColorInput.addEventListener('input', e => { state.primaryColor = e.target.value; applyCustomStyles(); saveState(); });\n                accentColorInput.addEventListener('input', e => { state.accentColor = e.target.value; applyCustomStyles(); saveState(); });\n                fontFamilySelect.addEventListener('change', e => { state.fontFamily = e.target.value; applyCustomStyles(); saveState(); });\n                fontSizeSelect.addEventListener('change', e => { state.fontSize = e.target.value; applyCustomStyles(); saveState(); });\n                borderRadiusSelect.addEventListener('change', e => { state.borderRadius = e.target.value; applyCustomStyles(); saveState(); });\n                cellHeightInput.addEventListener('input', e => { state.cellHeight = e.target.value || 'auto'; applyCustomStyles(); saveState(); });\n                cellWidthInput.addEventListener('input', e => { state.cellWidth = e.target.value || 'auto'; applyCustomStyles(); saveState(); });\n                headerStyleSelect.addEventListener('change', e => { state.headerStyle = e.target.value; applyCustomStyles(); saveState(); });\n                gridToggleSelect.addEventListener('change', e => { state.gridToggle = e.target.value; applyCustomStyles(); saveState(); });\n                timeToggleSelect.addEventListener('change', e => { state.timeToggle = e.target.value; applyCustomStyles(); saveState(); });\n                \n                themePresetSelect.addEventListener('change', e => {\n                    const presetKey = e.target.value;\n                    state.themePreset = presetKey;\n                    if (themePresets[presetKey]) {\n                        state.primaryColor = themePresets[presetKey].primary;\n                        state.accentColor = themePresets[presetKey].accent;\n                        primaryColorInput.value = state.primaryColor;\n                        accentColorInput.value = state.accentColor;\n                        applyCustomStyles();\n                    }\n                    saveState();\n                });\n\n                dayCheckboxes.forEach(cb => {\n                    cb.addEventListener('change', () => {\n                        state.workingDays = Array.from(dayCheckboxes).filter(i => i.checked).map(i => i.value);\n                        if (state.workingDays.length === 0) state.workingDays = [\"Monday\"];\n                        if (!state.workingDays.includes(state.dailySelectedDay)) {\n                            state.dailySelectedDay = state.workingDays[0];\n                        }\n                        renderTimetable();\n                        saveState();\n                    });\n                });\n\n                \/\/ Filters & Search\n                searchInput.addEventListener('input', e => { searchKeyword = e.target.value.toLowerCase().trim(); applyFilters(); });\n                filterSubjectSelect.addEventListener('change', e => { filterSubjectVal = e.target.value; applyFilters(); });\n                filterTeacherSelect.addEventListener('change', e => { filterTeacherVal = e.target.value; applyFilters(); });\n                filterDaySelect.addEventListener('change', e => { filterDayVal = e.target.value; applyFilters(); });\n\n                undoBtn.addEventListener('click', handleUndo);\n                redoBtn.addEventListener('click', handleRedo);\n\n                manualToggleBtn.addEventListener('click', () => {\n                    state.manualMode = !state.manualMode;\n                    if (state.manualMode) {\n                        manualToggleBtn.classList.add('utc-active-mode');\n                        manualToggleBtn.textContent = '\ud83d\udd90\ufe0f Manual Mode (Active)';\n                    } else {\n                        manualToggleBtn.classList.remove('utc-active-mode');\n                        manualToggleBtn.textContent = '\ud83d\udd90\ufe0f Manual Mode';\n                    }\n                    saveState();\n                });\n\n                themeToggleBtn.addEventListener('click', () => {\n                    state.darkMode = !state.darkMode;\n                    if (state.darkMode) {\n                        wrapper.classList.add('utc-dark');\n                        themeIcon.textContent = '\u2600\ufe0f';\n                        themeText.textContent = 'Light Mode';\n                    } else {\n                        wrapper.classList.remove('utc-dark');\n                        themeIcon.textContent = '\ud83c\udf19';\n                        themeText.textContent = 'Dark Mode';\n                    }\n                    saveState();\n                });\n\n                fullscreenBtn.addEventListener('click', () => {\n                    wrapper.classList.toggle('utc-fullscreen');\n                    if (wrapper.classList.contains('utc-fullscreen')) {\n                        fullscreenBtn.textContent = 'Exit Fullscreen';\n                    } else {\n                        fullscreenBtn.textContent = '\ud83d\uddb5 Fullscreen';\n                    }\n                });\n\n                \/\/ Dropdown Toggle\n                dropdownToggle.addEventListener('click', (e) => {\n                    e.stopPropagation();\n                    exportDropdown.classList.toggle('utc-show');\n                });\n                window.addEventListener('click', () => exportDropdown.classList.remove('utc-show'));\n\n                \/\/ Export & Import handlers\n                document.getElementById('utc-exp-print').addEventListener('click', () => window.print());\n                document.getElementById('utc-exp-copy').addEventListener('click', handleCopyTimetable);\n                document.getElementById('utc-exp-json').addEventListener('click', handleDownloadJSON);\n                document.getElementById('utc-imp-json-file').addEventListener('change', handleImportJSON);\n                document.getElementById('utc-exp-csv').addEventListener('click', handleDownloadCSV);\n                document.getElementById('utc-imp-csv-file').addEventListener('change', handleImportCSV);\n                document.getElementById('utc-exp-html').addEventListener('click', handleDownloadHTML);\n                document.getElementById('utc-exp-png').addEventListener('click', handleDownloadPNG);\n                document.getElementById('utc-exp-svg').addEventListener('click', handleDownloadSVG);\n\n                \/\/ View Mode Tabs\n                viewTabBtns.forEach(btn => {\n                    btn.addEventListener('click', () => {\n                        const view = btn.getAttribute('data-view');\n                        state.viewMode = view;\n                        updateViewTabsUI();\n                        renderTimetable();\n                        saveState();\n                    });\n                });\n\n                \/\/ Zoom Tabs\n                zoomTabBtns.forEach(btn => {\n                    btn.addEventListener('click', () => {\n                        const zoom = btn.getAttribute('data-zoom');\n                        state.zoomLevel = zoom;\n                        updateZoomTabsUI();\n                        applyZoom();\n                        saveState();\n                    });\n                });\n\n                modalClose.addEventListener('click', closeModal);\n                modalSave.addEventListener('click', saveModalEntry);\n                modalClear.addEventListener('click', clearModalEntry);\n                modalDuplicate.addEventListener('click', duplicateModalEntry);\n                window.addEventListener('click', e => { if (e.target === modal) closeModal(); });\n\n                document.getElementById('utc-btn-auto-schedule').addEventListener('click', handleAutoSchedule);\n                document.getElementById('utc-btn-reset').addEventListener('click', resetAll);\n            }\n\n            function updateViewTabsUI() {\n                viewTabBtns.forEach(btn => {\n                    if (btn.getAttribute('data-view') === state.viewMode) {\n                        btn.classList.add('utc-active');\n                    } else {\n                        btn.classList.remove('utc-active');\n                    }\n                });\n\n                if (state.viewMode === 'daily') {\n                    filterDayWrapper.style.display = 'none';\n                } else {\n                    filterDayWrapper.style.display = 'flex';\n                }\n            }\n\n            function updateZoomTabsUI() {\n                zoomTabBtns.forEach(btn => {\n                    if (btn.getAttribute('data-zoom') === state.zoomLevel) {\n                        btn.classList.add('utc-active');\n                    } else {\n                        btn.classList.remove('utc-active');\n                    }\n                });\n                applyZoom();\n            }\n\n            function applyZoom() {\n                previewWrapper.classList.remove('utc-fit-mode');\n                if (state.zoomLevel === 'fit') {\n                    previewWrapper.classList.add('utc-fit-mode');\n                    previewWrapper.style.transform = 'none';\n                } else {\n                    const scale = parseInt(state.zoomLevel, 10) \/ 100;\n                    previewWrapper.style.transform = `scale(${scale})`;\n                }\n            }\n\n            function updateMetaBanner() {\n                metaInst.textContent = state.institution || 'N\/A';\n                metaClassSec.textContent = `${state.className || 'General'} - ${state.section || 'Standard'}`;\n                if (!state.institution && !state.className) {\n                    metaBanner.style.display = 'none';\n                } else {\n                    metaBanner.style.display = 'grid';\n                }\n            }\n\n            function computeTimeRange(index) {\n                const [h, m] = state.startTime.split(':').map(Number);\n                const startMins = h * 60 + m + (index * state.slotDuration);\n                \n                const sh = Math.floor(startMins \/ 60) % 24;\n                const sm = startMins % 60;\n                \n                const endMins = startMins + state.slotDuration;\n                const eh = Math.floor(endMins \/ 60) % 24;\n                const em = endMins % 60;\n\n                const pad = (n) => n < 10 ? '0' + n : n;\n                return `${pad(sh)}:${pad(sm)} - ${pad(eh)}:${pad(em)}`;\n            }\n\n            function detectConflicts() {\n                const slotTeacherMap = {};\n                const slotRoomMap = {};\n                let conflictsSet = new Set();\n\n                for (let key in state.entries) {\n                    const entry = state.entries[key];\n                    const [day, slotIndex] = key.split('-');\n                    \n                    if (entry.teacher) {\n                        const tKey = `${slotIndex}-${entry.teacher.toLowerCase()}`;\n                        if (!slotTeacherMap[tKey]) slotTeacherMap[tKey] = [];\n                        slotTeacherMap[tKey].push(key);\n                    }\n\n                    if (entry.room) {\n                        const rKey = `${slotIndex}-${entry.room.toLowerCase()}`;\n                        if (!slotRoomMap[rKey]) slotRoomMap[rKey] = [];\n                        slotRoomMap[rKey].push(key);\n                    }\n                }\n\n                for (let tKey in slotTeacherMap) {\n                    if (slotTeacherMap[tKey].length > 1) {\n                        slotTeacherMap[tKey].forEach(k => conflictsSet.add(k));\n                    }\n                }\n                for (let rKey in slotRoomMap) {\n                    if (slotRoomMap[rKey].length > 1) {\n                        slotRoomMap[rKey].forEach(k => conflictsSet.add(k));\n                    }\n                }\n\n                return conflictsSet;\n            }\n\n            function getSlotColor(entry) {\n                const scheme = entry.colorScheme || 'subject';\n                let seedStr = entry.subject || 'default';\n                if (scheme === 'teacher') seedStr = entry.teacher || 'default';\n                if (scheme === 'room') seedStr = entry.room || 'default';\n\n                let hash = 0;\n                for (let i = 0; i < seedStr.length; i++) {\n                    hash = seedStr.charCodeAt(i) + ((hash << 5) - hash);\n                }\n                const index = Math.abs(hash) % presetColorKeys.length;\n                const key = entry.color || presetColorKeys[index];\n                return colorPalette[key] || colorPalette.blue;\n            }\n\n            function updateFilterDropdowns() {\n                const subjects = new Set();\n                const teachers = new Set();\n                const days = new Set(state.workingDays);\n\n                for (let key in state.entries) {\n                    const e = state.entries[key];\n                    if (e.subject) subjects.add(e.subject);\n                    if (e.teacher) teachers.add(e.teacher);\n                }\n\n                const curSub = filterSubjectSelect.value;\n                const curTch = filterTeacherSelect.value;\n                const curDay = filterDaySelect.value;\n\n                filterSubjectSelect.innerHTML = '<option value=\"\">All Subjects<\/option>';\n                subjects.forEach(s => {\n                    filterSubjectSelect.innerHTML += `<option value=\"${escapeHtml(s)}\">${escapeHtml(s)}<\/option>`;\n                });\n                filterSubjectSelect.value = curSub;\n\n                filterTeacherSelect.innerHTML = '<option value=\"\">All Teachers<\/option>';\n                teachers.forEach(t => {\n                    filterTeacherSelect.innerHTML += `<option value=\"${escapeHtml(t)}\">${escapeHtml(t)}<\/option>`;\n                });\n                filterTeacherSelect.value = curTch;\n\n                filterDaySelect.innerHTML = '<option value=\"\">All Days<\/option>';\n                days.forEach(d => {\n                    filterDaySelect.innerHTML += `<option value=\"${d}\">${d}<\/option>`;\n                });\n                filterDaySelect.value = curDay;\n            }\n\n            function renderTimetable() {\n                renderTitle.textContent = state.title;\n                updateMetaBanner();\n                updateFilterDropdowns();\n                applyCustomStyles();\n\n                const conflicts = detectConflicts();\n                tableElement.className = 'utc-table';\n                if (state.viewMode === 'compact') {\n                    tableElement.classList.add('utc-compact-table');\n                }\n                if (state.timeToggle === 'hide') {\n                    tableElement.classList.add('utc-time-col-hidden');\n                }\n\n                let daysToRender = state.workingDays;\n                if (state.viewMode === 'daily') {\n                    if (!daysToRender.includes(state.dailySelectedDay)) {\n                        state.dailySelectedDay = daysToRender[0] || \"Monday\";\n                    }\n                    daysToRender = [state.dailySelectedDay];\n                }\n\n                let html = '<thead><tr><th class=\"utc-time-cell\">Time Slot<\/th>';\n                if (state.viewMode === 'daily') {\n                    html += `<th colspan=\"1\">\n                        <select id=\"utc-daily-selector\" class=\"utc-input\" style=\"padding:4px 8px; font-size:var(--utc-font-size); font-weight:600; display:inline-block; width:auto;\">`;\n                    state.workingDays.forEach(d => {\n                        html += `<option value=\"${d}\" ${d === state.dailySelectedDay ? 'selected' : ''}>${d}<\/option>`;\n                    });\n                    html += `<\/select><\/th>`;\n                } else {\n                    daysToRender.forEach(day => {\n                        html += `<th>${day}<\/th>`;\n                    });\n                }\n                html += '<\/tr><\/thead><tbody>';\n\n                let scheduledCount = 0;\n                let totalPossible = state.workingDays.length * state.slotsCount;\n\n                for (let s = 0; s < state.slotsCount; s++) {\n                    const timerange = computeTimeRange(s);\n                    html += `<tr><td class=\"utc-time-cell\">Slot ${s + 1}<br><span style=\"font-size:calc(var(--utc-font-size) - 3px); font-weight:normal; opacity:0.8;\">${timerange}<\/span><\/td>`;\n\n                    daysToRender.forEach(day => {\n                        const key = `${day}-${s}`;\n                        const entry = state.entries[key];\n                        const isConflict = conflicts.has(key);\n\n                        html += `<td data-day=\"${day}\" data-slot=\"${s}\" class=\"utc-drop-target\">`;\n                        \n                        if (entry && (entry.subject || entry.teacher || entry.room)) {\n                            scheduledCount++;\n                            const cTheme = getSlotColor(entry);\n                            const conflictClass = isConflict ? 'utc-conflict' : '';\n\n                            html += `\n                                <div class=\"utc-slot ${conflictClass}\" \n                                     draggable=\"true\" \n                                     data-key=\"${key}\"\n                                     style=\"background-color: ${cTheme.bg}; border-color: ${cTheme.border};\">\n                                    <div class=\"utc-slot-title\" style=\"color: ${cTheme.text};\">${escapeHtml(entry.subject || 'Untitled')}<\/div>\n                                    <div class=\"utc-slot-det\">\ud83d\udc64 ${escapeHtml(entry.teacher || 'N\/A')}<\/div>\n                                    <div class=\"utc-slot-det\">\ud83d\udccd ${escapeHtml(entry.room || 'N\/A')}<\/div>\n                                    ${state.viewMode !== 'compact' && entry.notes ? `<div class=\"utc-slot-det\" style=\"margin-top:2px; font-style:italic;\">\ud83d\udcdd ${escapeHtml(entry.notes)}<\/div>` : ''}\n                                <\/div>\n                            `;\n                        } else {\n                            html += `\n                                <div class=\"utc-empty-slot\" data-day=\"${day}\" data-slot=\"${s}\">\n                                    + Add Entry\n                                <\/div>\n                            `;\n                        }\n                        html += `<\/td>`;\n                    });\n                    html += `<\/tr>`;\n                }\n                html += '<\/tbody>';\n                tableElement.innerHTML = html;\n\n                const dailySel = document.getElementById('utc-daily-selector');\n                if (dailySel) {\n                    dailySel.addEventListener('change', (e) => {\n                        state.dailySelectedDay = e.target.value;\n                        renderTimetable();\n                    });\n                }\n\n                bindSlotInteractions();\n\n                const emptyCount = totalPossible - scheduledCount;\n                const occupancy = totalPossible > 0 ? Math.round((scheduledCount \/ totalPossible) * 100) : 0;\n\n                statScheduled.textContent = scheduledCount;\n                statConflicts.textContent = conflicts.size;\n                statOccupancy.textContent = occupancy + '%';\n\n                if (conflicts.size > 0) {\n                    conflictBanner.style.display = 'flex';\n                    document.getElementById('utc-conflict-text').textContent = `Warning: ${conflicts.size} schedule overlapping conflict(s) detected!`;\n                } else {\n                    conflictBanner.style.display = 'none';\n                }\n\n                applyFilters();\n            }\n\n            function bindSlotInteractions() {\n                tableElement.querySelectorAll('.utc-slot, .utc-empty-slot').forEach(el => {\n                    el.addEventListener('click', (e) => {\n                        e.stopPropagation();\n                        const slotCard = el.closest('.utc-slot') || el;\n                        const day = slotCard.getAttribute('data-day') || el.closest('td').getAttribute('data-day');\n                        const slot = slotCard.getAttribute('data-slot') || el.closest('td').getAttribute('data-slot');\n                        openModal(day, slot);\n                    });\n                });\n\n                tableElement.querySelectorAll('.utc-slot').forEach(slot => {\n                    slot.addEventListener('dragstart', (e) => {\n                        if (state.manualMode) return;\n                        draggedCell = slot.getAttribute('data-key');\n                        slot.classList.add('utc-dragging');\n                        e.dataTransfer.setData('text\/plain', draggedCell);\n                    });\n\n                    slot.addEventListener('dragend', () => {\n                        slot.classList.remove('utc-dragging');\n                        draggedCell = null;\n                        tableElement.querySelectorAll('.utc-drop-target').forEach(td => td.classList.remove('utc-drag-over'));\n                    });\n                });\n\n                tableElement.querySelectorAll('td.utc-drop-target').forEach(td => {\n                    td.addEventListener('dragover', (e) => {\n                        if (state.manualMode) return;\n                        e.preventDefault();\n                        td.classList.add('utc-drag-over');\n                    });\n\n                    td.addEventListener('dragleave', () => {\n                        td.classList.remove('utc-drag-over');\n                    });\n\n                    td.addEventListener('drop', (e) => {\n                        if (state.manualMode) return;\n                        e.preventDefault();\n                        td.classList.remove('utc-drag-over');\n                        const targetDay = td.getAttribute('data-day');\n                        const targetSlot = td.getAttribute('data-slot');\n                        const targetKey = `${targetDay}-${targetSlot}`;\n\n                        if (draggedCell && draggedCell !== targetKey) {\n                            recordHistory();\n                            state.entries[targetKey] = state.entries[draggedCell];\n                            delete state.entries[draggedCell];\n                            saveState();\n                            renderTimetable();\n                        }\n                    });\n                });\n            }\n\n            function applyFilters() {\n                const slots = tableElement.querySelectorAll('.utc-slot');\n                slots.forEach(slot => {\n                    const key = slot.getAttribute('data-key');\n                    const [day, slotIdx] = key.split('-');\n                    const entry = state.entries[key] || {};\n\n                    const sub = (entry.subject || '').toLowerCase();\n                    const tch = (entry.teacher || '').toLowerCase();\n\n                    let matchesSearch = !searchKeyword || sub.includes(searchKeyword) || tch.includes(searchKeyword) || (entry.room || '').toLowerCase().includes(searchKeyword);\n                    let matchesSub = !filterSubjectVal || entry.subject === filterSubjectVal;\n                    let matchesTch = !filterTeacherVal || entry.teacher === filterTeacherVal;\n                    let matchesDay = !filterDayVal || day === filterDayVal;\n\n                    if (matchesSearch && matchesSub && matchesTch && matchesDay) {\n                        slot.style.opacity = '1';\n                        slot.classList.add('utc-highlighted');\n                    } else {\n                        slot.style.opacity = '0.3';\n                        slot.classList.remove('utc-highlighted');\n                    }\n                });\n\n                if (!searchKeyword && !filterSubjectVal && !filterTeacherVal && !filterDayVal) {\n                    slots.forEach(slot => slot.classList.remove('utc-highlighted'));\n                }\n            }\n\n            function openModal(day, slot) {\n                activeCell = { day, slot };\n                const key = `${day}-${slot}`;\n                const data = state.entries[key] || { subject: '', teacher: '', room: '', colorScheme: 'subject', color: 'blue', notes: '' };\n\n                modalSubject.value = data.subject || '';\n                modalTeacher.value = data.teacher || '';\n                modalRoom.value = data.room || '';\n                modalColorScheme.value = data.colorScheme || 'subject';\n                modalColor.value = data.color || 'blue';\n                modalNotes.value = data.notes || '';\n\n                document.getElementById('utc-modal-title').textContent = `Configure ${day} (Slot ${parseInt(slot)+1})`;\n                modal.style.display = 'flex';\n                modalSubject.focus();\n            }\n\n            function closeModal() {\n                modal.style.display = 'none';\n                activeCell = null;\n            }\n\n            function saveModalEntry() {\n                if (!activeCell) return;\n                const key = `${activeCell.day}-${activeCell.slot}`;\n                \n                const subject = modalSubject.value.trim();\n                const teacher = modalTeacher.value.trim();\n                const room = modalRoom.value.trim();\n                const colorScheme = modalColorScheme.value;\n                const color = modalColor.value;\n                const notes = modalNotes.value.trim();\n\n                recordHistory();\n                if (!subject && !teacher && !room && !notes) {\n                    delete state.entries[key];\n                } else {\n                    state.entries[key] = { subject, teacher, room, colorScheme, color, notes };\n                }\n\n                saveState();\n                renderTimetable();\n                closeModal();\n            }\n\n            function clearModalEntry() {\n                if (!activeCell) return;\n                const key = `${activeCell.day}-${activeCell.slot}`;\n                recordHistory();\n                delete state.entries[key];\n\n                saveState();\n                renderTimetable();\n                closeModal();\n            }\n\n            function duplicateModalEntry() {\n                if (!activeCell) return;\n                const key = `${activeCell.day}-${activeCell.slot}`;\n                const data = state.entries[key];\n                if (!data) return;\n\n                let slotIdx = parseInt(activeCell.slot) + 1;\n                let day = activeCell.day;\n                if (slotIdx >= state.slotsCount) {\n                    slotIdx = 0;\n                    const dayIdx = state.workingDays.indexOf(day);\n                    if (dayIdx !== -1 && dayIdx + 1 < state.workingDays.length) {\n                        day = state.workingDays[dayIdx + 1];\n                    }\n                }\n\n                const newKey = `${day}-${slotIdx}`;\n                recordHistory();\n                state.entries[newKey] = { ...data };\n                saveState();\n                renderTimetable();\n                closeModal();\n            }\n\n            \/\/ Export &#038; Import Feature Implementations\n            function handleDownloadJSON() {\n                const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(state, null, 2));\n                const downloadAnchor = document.createElement('a');\n                downloadAnchor.setAttribute(\"href\", dataStr);\n                downloadAnchor.setAttribute(\"download\", `${(state.title || 'timetable').toLowerCase().replace(\/\\s+\/g, '_')}_export.json`);\n                document.body.appendChild(downloadAnchor);\n                downloadAnchor.click();\n                downloadAnchor.remove();\n            }\n\n            function handleImportJSON(e) {\n                const fileReader = new FileReader();\n                if (e.target.files[0]) {\n                    fileReader.readAsText(e.target.files[0], \"UTF-8\");\n                    fileReader.onload = (event) => {\n                        try {\n                            const imported = JSON.parse(event.target.result);\n                            if (imported && imported.entries) {\n                                recordHistory();\n                                Object.assign(state, imported);\n                                saveState();\n                                loadState();\n                                renderTimetable();\n                                alert('Timetable successfully imported from JSON!');\n                            } else {\n                                alert('Invalid JSON format.');\n                            }\n                        } catch (err) {\n                            alert('Failed to parse JSON file.');\n                        }\n                    };\n                }\n            }\n\n            function handleDownloadCSV() {\n                let csvRows = [];\n                let headers = [\"Time Slot\", ...state.workingDays];\n                csvRows.push(headers.join(\",\"));\n\n                for (let s = 0; s < state.slotsCount; s++) {\n                    const timerange = computeTimeRange(s);\n                    let row = [`\"Slot ${s + 1} (${timerange})\"`];\n                    state.workingDays.forEach(day => {\n                        const key = `${day}-${s}`;\n                        const entry = state.entries[key];\n                        if (entry && (entry.subject || entry.teacher)) {\n                            row.push(`\"${(entry.subject || '')} | ${(entry.teacher || '')} | ${(entry.room || '')}\"`);\n                        } else {\n                            row.push('\"\"');\n                        }\n                    });\n                    csvRows.push(row.join(\",\"));\n                }\n\n                const csvString = csvRows.join(\"\\n\");\n                const blob = new Blob([csvString], { type: 'text\/csv;charset=utf-8;' });\n                const url = URL.createObjectURL(blob);\n                const downloadAnchor = document.createElement('a');\n                downloadAnchor.href = url;\n                downloadAnchor.download = `${(state.title || 'timetable').toLowerCase().replace(\/\\s+\/g, '_')}_export.csv`;\n                document.body.appendChild(downloadAnchor);\n                downloadAnchor.click();\n                downloadAnchor.remove();\n            }\n\n            function handleImportCSV(e) {\n                const fileReader = new FileReader();\n                if (e.target.files[0]) {\n                    fileReader.readAsText(e.target.files[0], \"UTF-8\");\n                    fileReader.onload = (event) => {\n                        try {\n                            const lines = event.target.result.split('\\n');\n                            if (lines.length < 2) {\n                                alert('Invalid CSV file.');\n                                return;\n                            }\n                            recordHistory();\n                            state.entries = {};\n                            const headers = lines[0].split(',').map(h => h.replace(\/\"\/g, '').trim());\n                            const days = headers.slice(1);\n                            state.workingDays = days;\n\n                            for (let i = 1; i < lines.length; i++) {\n                                if (!lines[i].trim()) continue;\n                                const row = lines[i].split(\/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)\/);\n                                const slotIdx = i - 1;\n                                for (let d = 0; d < days.length; d++) {\n                                    const cellData = (row[d + 1] || '').replace(\/\"\/g, '').trim();\n                                    if (cellData) {\n                                        const parts = cellData.split('|').map(p => p.trim());\n                                        const key = `${days[d]}-${slotIdx}`;\n                                        state.entries[key] = {\n                                            subject: parts[0] || '',\n                                            teacher: parts[1] || '',\n                                            room: parts[2] || '',\n                                            colorScheme: 'subject',\n                                            color: 'blue',\n                                            notes: ''\n                                        };\n                                    }\n                                }\n                            }\n                            state.slotsCount = Math.max(lines.length - 1, 4);\n                            saveState();\n                            renderTimetable();\n                            alert('Timetable successfully imported from CSV!');\n                        } catch (err) {\n                            alert('Failed to parse CSV file.');\n                        }\n                    };\n                }\n            }\n\n            function handleDownloadHTML() {\n                const fullHtml = `<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>${escapeHtml(state.title)}<\/title><style>body{font-family:sans-serif;padding:20px;color:#111;}table{width:100%;border-collapse:collapse;margin-top:20px;}th,td{border:1px solid #cbd5e1;padding:12px;text-align:center;}th{background:#f1f5f9;}<\/style><\/head><body><h2>${escapeHtml(state.title)}<\/h2><p>Institution: ${escapeHtml(state.institution)} | Class: ${escapeHtml(state.className)}<\/p>${document.getElementById('utc-printable-area').innerHTML}<\/body><\/html>`;\n                const blob = new Blob([fullHtml], { type: 'text\/html;charset=utf-8;' });\n                const url = URL.createObjectURL(blob);\n                const downloadAnchor = document.createElement('a');\n                downloadAnchor.href = url;\n                downloadAnchor.download = `${(state.title || 'timetable').toLowerCase().replace(\/\\s+\/g, '_')}.html`;\n                document.body.appendChild(downloadAnchor);\n                downloadAnchor.click();\n                downloadAnchor.remove();\n            }\n\n            function handleDownloadPNG() {\n                const htmlString = new XMLSerializer().serializeToString(document.getElementById('utc-printable-area'));\n                const svgString = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"1000\" height=\"700\"><foreignObject width=\"100%\" height=\"100%\"><div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" style=\"font-family:sans-serif; background:#fff; padding:20px;\">${htmlString}<\/div><\/foreignObject><\/svg>`;\n                const blob = new Blob([svgString], { type: 'image\/svg+xml;charset=utf-8' });\n                const URL = window.URL || window.webkitURL || window;\n                const blobURL = URL.createObjectURL(blob);\n                const image = new Image();\n                image.onload = () => {\n                    const canvas = document.createElement('canvas');\n                    canvas.width = 1000;\n                    canvas.height = 700;\n                    const context = canvas.getContext('2d');\n                    context.fillStyle = '#ffffff';\n                    context.fillRect(0, 0, canvas.width, canvas.height);\n                    context.drawImage(image, 0, 0);\n                    const png = canvas.toDataURL('image\/png');\n                    const downloadAnchor = document.createElement('a');\n                    downloadAnchor.href = png;\n                    downloadAnchor.download = `${(state.title || 'timetable').toLowerCase().replace(\/\\s+\/g, '_')}.png`;\n                    document.body.appendChild(downloadAnchor);\n                    downloadAnchor.click();\n                    downloadAnchor.remove();\n                };\n                image.src = blobURL;\n            }\n\n            function handleDownloadSVG() {\n                const htmlString = new XMLSerializer().serializeToString(document.getElementById('utc-printable-area'));\n                const svgString = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"1200\" height=\"800\"><foreignObject width=\"100%\" height=\"100%\"><div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" style=\"font-family:sans-serif; background:#fff; padding:20px;\">${htmlString}<\/div><\/foreignObject><\/svg>`;\n                const blob = new Blob([svgString], { type: 'image\/svg+xml;charset=utf-8' });\n                const url = URL.createObjectURL(blob);\n                const downloadAnchor = document.createElement('a');\n                downloadAnchor.href = url;\n                downloadAnchor.download = `${(state.title || 'timetable').toLowerCase().replace(\/\\s+\/g, '_')}.svg`;\n                document.body.appendChild(downloadAnchor);\n                downloadAnchor.click();\n                downloadAnchor.remove();\n            }\n\n            function handleAutoSchedule() {\n                recordHistory();\n                const mockSubjects = [\"Advanced Mathematics\", \"Computer Science\", \"Physics Lab\", \"English Literature\", \"Data Structures\", \"Digital Logic\", \"Operating Systems\", \"Electronics\"];\n                const mockTeachers = [\"Dr. Alan Turing\", \"Prof. Ada Lovelace\", \"Dr. Grace Hopper\", \"Prof. John von Neumann\", \"Dr. Dennis Ritchie\"];\n                const mockRooms = [\"Hall 101\", \"Lab 203\", \"Auditorium B\", \"Room 405\", \"Lab 3\"];\n\n                state.workingDays.forEach(day => {\n                    for (let s = 0; s < state.slotsCount; s++) {\n                        const key = `${day}-${s}`;\n                        if (!state.entries[key]) {\n                            const sub = mockSubjects[Math.floor(Math.random() * mockSubjects.length)];\n                            const tch = mockTeachers[Math.floor(Math.random() * mockTeachers.length)];\n                            const rm = mockRooms[Math.floor(Math.random() * mockRooms.length)];\n                            state.entries[key] = { subject: sub, teacher: tch, room: rm, colorScheme: 'subject', color: 'blue', notes: '' };\n                        }\n                    }\n                });\n\n                saveState();\n                renderTimetable();\n            }\n\n            function handleCopyTimetable() {\n                const textSummary = JSON.stringify(state, null, 2);\n                navigator.clipboard.writeText(textSummary).then(() => {\n                    alert('Timetable configuration and JSON copied to clipboard successfully!');\n                }).catch(() => {\n                    alert('Failed to copy to clipboard.');\n                });\n            }\n\n            function handleUndo() {\n                if (undoStack.length === 0) return;\n                redoStack.push(JSON.stringify(state.entries));\n                const prev = undoStack.pop();\n                state.entries = JSON.parse(prev);\n                saveState();\n                renderTimetable();\n                updateHistoryButtons();\n            }\n\n            function handleRedo() {\n                if (redoStack.length === 0) return;\n                undoStack.push(JSON.stringify(state.entries));\n                const next = redoStack.pop();\n                state.entries = JSON.parse(next);\n                saveState();\n                renderTimetable();\n                updateHistoryButtons();\n            }\n\n            function resetAll() {\n                if (confirm(\"Are you sure you want to completely reset all settings and entries?\")) {\n                    localStorage.removeItem('utc_timetable_pro_v8');\n                    undoStack = [];\n                    redoStack = [];\n                    state.entries = {};\n                    renderTimetable();\n                    updateHistoryButtons();\n                }\n            }\n\n            function escapeHtml(str) {\n                return (str || '').replace(\/&\/g, \"&amp;\")\n                                  .replace(\/<\/g, \"&lt;\")\n                                  .replace(\/>\/g, \"&gt;\")\n                                  .replace(\/\"\/g, \"&quot;\")\n                                  .replace(\/'\/g, \"&#039;\");\n            }\n\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', initApp);\n            } else {\n                initApp();\n            }\n\n        })();\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Universal Timetable Creator Pro Professional scheduling suite with advanced export tools and live synchronization. \ud83c\udf19 Dark Mode 0 Scheduled Slots 0 Conflicts Found 0% Occupancy Rate \u2728 Auto-Generate \ud83d\udd90\ufe0f Manual Mode \u21a9\ufe0f Undo \ud83d\udd01 Redo \ud83d\udcbe Export &amp; Import \u25be \ud83d\udda8\ufe0f Print \/ Save as PDF \ud83d\udccb Copy Timetable \ud83d\udce5 Download JSON \ud83d\udce4 Import JSON [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-788","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":5,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/788\/revisions"}],"predecessor-version":[{"id":794,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/788\/revisions\/794"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}