:root{ --bg:#0b1220; --panel:#0f1b33; --card:#122041; --ink:#eaf1ff; --muted:#b9c7e6; --line:#2a3a63; --accent:#4da3ff; --accent2:#2dd4bf; --danger:#ff5d5d; --paper:#ffffff; --paper-ink:#111827; --paper-line:#4b5563; --break:#fff2cc; --lunch:#e2f0d9; --title:#d9e1f2; --header:#ededed; --day:#f4f8ff; --shadow: 0 10px 30px rgba(0,0,0,.25); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Calibri", sans-serif; color:var(--ink); background: radial-gradient(1200px 500px at 20% -10%, #1b2d5a 0%, rgba(27,45,90,0) 60%), radial-gradient(900px 500px at 90% 0%, #153b5a 0%, rgba(21,59,90,0) 55%), linear-gradient(180deg, var(--bg), #070b14); font-size: 14px; } .topbar{ position:sticky; top:0; z-index:100; padding:12px; display:flex; gap:10px; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.06); background: rgba(11,18,32,.95); backdrop-filter: blur(10px); } .brand{min-width:200px; flex-shrink: 0;} .brand__title{font-weight:900; letter-spacing:.4px; font-size:15px} .brand__meta{margin-top:6px; display:flex; gap:10px; flex-wrap:wrap} .brand__meta label{font-size:11px; color:var(--muted)} .brand__meta input{ margin-left:6px; padding:4px 6px; border-radius:6px; border:1px solid var(--line); background:#0a1326; color:var(--ink); font-size: 12px; width: 100px; } /* Specific style for the long title input */ .brand__meta input#titleInput { width: 220px; } .actions{display:flex; gap:8px; align-items:center; overflow-x:auto; padding-bottom:2px; margin-left:auto; margin-right:10px} .actions::-webkit-scrollbar{height:0;width:0} .sep{display:inline-block; width:1px; height:28px; background:rgba(255,255,255,.12); margin:0 4px} .panelToggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--ink); cursor:pointer; font-size:22px; user-select:none; flex-shrink: 0; z-index: 101; } .btn{ appearance:none; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--ink); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700; font-size: 13px; transition: all 0.2s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .btn:hover{background:rgba(255,255,255,.12);} .btn:active{transform:scale(0.96);} .btn.primary{background:rgba(77,163,255,.22); border-color:rgba(77,163,255,.45)} .btn.primary:hover{background:rgba(77,163,255,.35);} .btn.accent{background:rgba(45,212,191,.20); border-color:rgba(45,212,191,.45)} .btn.danger{background:rgba(255,93,93,.14); border-color:rgba(255,93,93,.45)} .btn.small{padding: 4px 10px; font-size: 14px; height: 36px;} .layout{display:grid; grid-template-columns:1fr; gap:12px; padding:12px; align-items:start} .panel{ position:fixed; inset:0 0 0 auto; width:min(450px, 92vw); transform: translateX(110%); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1); background: #0b1220; border-left: 1px solid rgba(255,255,255,.10); padding:16px; overflow-y:auto; z-index:200; box-shadow: -10px 0 50px rgba(0,0,0,0.7); } .panel.open{transform: translateX(0)} .panelHead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px} .card{background:rgba(18,32,65,.72); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; box-shadow: var(--shadow); margin-bottom:16px} .cardHead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px} .card h3{margin:0 0 12px 0; font-size:14px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9;} .row{display:flex; gap:10px; align-items:center; justify-content:space-between; margin:10px 0} .row label{font-size:12px; color:var(--muted)} .row input, .row select{flex:1; margin-left:8px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:#0a1326; color:var(--ink); font-size: 13px;} .hint{font-size:12px; color:rgba(233,241,255,.70); line-height:1.4; margin-bottom: 10px;} .list{display:flex; flex-direction:column; gap:6px; margin:10px 0} .listItem{display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.15); cursor:pointer; transition: background 0.2s;} .listItem:hover{background:rgba(255,255,255,.05);} .listItem b{font-size:13px} .listItem span{font-size:12px; color:var(--muted)} .assign{display:flex; flex-direction:column; gap:10px; margin-top:10px} .assignRow{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.15);} .assignRow__top { display:flex; justify-content:space-between; align-items:center; } .assignRow__meta { display:flex; flex-direction:column; } .assignRow__meta .name { font-weight:900; font-size:13px; } .assignRow__meta .abbrev { font-size:11px; color:rgba(233,241,255,.65); } .assignRow__meta .counts { font-size:11px; color:rgba(233,241,255,.7); margin-top:4px; } .assignRow__controls { display:grid; grid-template-columns: 1.2fr 1.2fr 1.2fr auto; gap:6px; align-items:center; margin-top:6px; background: rgba(0,0,0,0.2); padding:6px; border-radius:8px;} .assignRow__slots { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .slotTag { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 6px; border-radius:4px; background:rgba(45,212,191,.20); color:#fff; border:1px solid rgba(45,212,191,.4); user-select:none; } .slotTag .x { cursor:pointer; font-weight:bold; color:var(--danger); margin-left:4px; padding: 0 4px;} .workspace{min-width:0; padding-bottom: 60px;} .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px} .tab{padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); cursor:pointer; font-weight:700; color: var(--muted); transition: all 0.2s;} .tab.active{background:rgba(77,163,255,.20); border-color:rgba(77,163,255,.45); color: #fff;} .tab:hover{background:rgba(255,255,255,.1);} .tab.teacher-tab { border-color: var(--accent2); color: var(--accent2); } .tab.teacher-tab.active { background: rgba(45,212,191,.20); color: #fff; } .sheetWrap{background:rgba(18,32,65,.55); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:16px; box-shadow: var(--shadow)} .sheetHeader{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; flex-wrap: wrap;} .sheetHeader h2{margin:0; font-size: 22px;} #headerTeacherSelect {display:none; margin-left: 10px; padding: 6px; border-radius: 8px; border: 1px solid var(--accent2); background: #0a1326; color: #fff; font-size: 16px; font-weight: bold;} #headerTeacherSelect.visible { display: inline-block; } .submeta{font-size:13px; color:rgba(233,241,255,.70); margin-top:4px} .sheetHeader__right{display:flex; gap: 8px; flex-wrap: wrap;} .tableWrap{overflow:auto; padding-bottom:10px} .timetable{border-collapse:collapse; background:var(--paper); color:var(--paper-ink); width:100%; min-width: 800px; table-layout:fixed; border:2px solid var(--paper-line)} .timetable td, .timetable th{border:1px solid var(--paper-line); padding:6px 4px; text-align:center; vertical-align:middle; font-size:12px; line-height:1.1; font-weight:600} .timetable .titleRow td{background:var(--title); font-weight:900; font-size:18px; letter-spacing:.4px; padding:12px 6px; border-bottom:2px solid var(--paper-line)} .timetable .headerRow th{background:var(--header); font-weight:900; border-bottom:2px solid var(--paper-line); font-size: 11px; padding: 8px 2px;} .timetable .dayCell{background:var(--day); font-weight:900; width: 80px;} .day-row{height: 31.5mm;} .timetable .breakCell{background:var(--break); font-weight:900; padding: 10px 2px; writing-mode: vertical-lr; text-orientation: mixed;} .timetable .lunchCell{background:var(--lunch); font-weight:900; padding: 10px 2px; writing-mode: vertical-lr; text-orientation: mixed;} .lesson{user-select:none; height: 100%; display:flex; flex-direction:column; justify-content:center; border-radius:6px; padding:4px; border:1px solid rgba(17,24,39,.15); background:rgba(77,163,255,.15); min-height: 48px;} .lesson b { font-size: 13px; color: #000; display: block;} .lesson small{display:block; opacity:.85; font-weight:600; font-size: 11px; color: #333; margin-top:2px} .lesson.double{background:rgba(77,163,255,.25); border:2px solid rgba(77,163,255,.4);} .lesson.teacher-view { background: rgba(45,212,191,.2); border-color: rgba(45,212,191,.5); } .lesson.conflict{background:rgba(255,93,93,.25); border-color:rgba(255,93,93,.60)} .lesson.locked{background:rgba(255, 179, 0, 0.2); border-color:rgba(255, 179, 0, 0.6);} .cellEditable{cursor:pointer; height: 1px;} .cellEditable:hover{background: rgba(0,0,0,0.03);} .cellEmpty{color:#9ca3af; font-weight: 400;} td.drag-over{outline:3px dashed rgba(77,163,255,.9); outline-offset:-3px;} td.dragging{opacity:.55;} td.drag-block{box-shadow: inset 0 0 0 3px rgba(77,163,255,.8);} td.drag-over-block{box-shadow: inset 0 0 0 3px rgba(45,212,191,.8);} .status{font-size:13px; color:rgba(233,241,255,.85); margin-top:12px; padding:12px 16px; border-radius:12px; border:1px dashed rgba(255,255,255,.18); background:rgba(0,0,0,.25); white-space:pre-wrap; line-height: 1.5;} .editBox{min-width:260px; background: var(--card); padding: 10px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.4); border: 1px solid var(--line); position: relative; z-index: 100;} .edit{display:flex; flex-direction:column; gap:8px} .edit select, .edit input{padding:10px 10px; border-radius:8px; border:1px solid rgba(17,24,39,.25); font-size:13px} .edit__buttons{display:flex; gap:8px; justify-content:flex-end} .editWarn{font-size:12px; color:rgba(233,241,255,.75); background:rgba(255,93,93,.12); border:1px solid rgba(255,93,93,.25); padding:8px; border-radius:10px; line-height:1.35} .quickBar{display:flex; gap:6px; flex-wrap:wrap} .quickBar button{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; padding:6px 8px; border-radius:10px; cursor:pointer; font-weight:800; font-size:12px} .quickBar button.clear{border-color: rgba(255,93,93,.35); background: rgba(255,93,93,.12)} .editRow{display:flex; gap:10px; align-items:center; justify-content:space-between} .editRow label{font-size:12px; color:rgba(233,241,255,.8)} .editRow input[type=checkbox]{width:18px; height:18px} .toastHost{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:1000; display:flex; flex-direction:column; gap:8px; width:min(400px, 92vw)} .toast{background:rgba(15,23,42,0.95); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:12px 16px; box-shadow: var(--shadow); display:flex; gap:12px; align-items:flex-start; justify-content:space-between; backdrop-filter: blur(8px);} .toast .x{background:transparent; border:none; color:#fff; cursor:pointer; font-size:18px; line-height:1; padding: 0 4px; opacity: 0.6;} .footer{padding:10px 14px; color:rgba(233,241,255,.55); font-size:12px; text-align: center;} .panelOverlay {position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.3s;} .panelOverlay.open { opacity: 1; pointer-events: all; } @media (min-width: 1024px){ .actions{display:flex; overflow:visible; margin-left: 0; justify-content: flex-end;} .panelToggle{display:none} .layout{grid-template-columns: 400px 1fr} .panel{position:sticky; inset:auto; transform:none; width:auto; background:transparent; border:none; padding:0; overflow:visible; z-index:auto; box-shadow: none;} .panel.open{transform:none} .panelOverlay { display: none; } .brand__meta input { width: auto; } } /* Updated to hide entire sheet header in PDF mode */ .pdf-mode .sheetHeader, .pdf-mode .status, .pdf-mode .actions { display: none !important; } .pdf-mode.sheetWrap { background: #fff !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; border-radius: 0 !important; } @media print { @page { size: A4 landscape; margin: 5mm; } body { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .topbar, .panel, .tabs, .footer, .sheetHeader, .status, .toastHost, .submeta, .panelToggle, .actions { display: none !important; } .layout { display: block !important; padding: 0 !important; margin: 0 !important; } .sheetWrap { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; width: 100% !important; } .tableWrap { overflow: visible !important; } .timetable { width: 99% !important; margin: 0 auto; border: 3px solid #000 !important; font-family: "Calibri", Arial, sans-serif !important; page-break-inside: avoid; } .timetable td, .timetable th { border: 1px solid #000 !important; font-size: 10pt !important; padding: 2px !important; color: #000 !important; } .timetable .titleRow td { background: #ddd !important; font-size: 14pt !important; border-bottom: 2px solid #000 !important; color: #000 !important; } .timetable .headerRow th { background: #eee !important; font-size: 9pt !important; border-bottom: 2px solid #000 !important; } .timetable .dayCell { background: #f0f0f0 !important; } .timetable .breakCell { background: #e0e0e0 !important; } .timetable .lunchCell { background: #d0d0d0 !important; } .lesson { border: none !important; background: transparent !important; padding: 0 !important; } .lesson b { font-size: 10pt !important; } .lesson small { font-size: 8pt !important; color: #333 !important; } #headerTeacherSelect { display: none !important; } } @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap'); :root{ --bg1:#ffedd5; --bg2:#fee2e2; --bg3:#dbeafe; --card:#ffffffcc; --text:#0f172a; --muted:#475569; --accent1:#fb7185; --accent2:#fb923c; --accent3:#60a5fa; --shadow: 0 18px 45px rgba(2,6,23,.12); --radius: 22px; } *{ box-sizing:border-box; } body{ margin:0; min-height:100vh; font-family: Inter, system-ui, -apple-system, sans-serif; color:var(--text); display:grid; place-items:center; padding: 28px 16px; background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3)); background-size: 220% 220%; animation: bgShift 14s ease-in-out infinite; overflow-x:hidden; } .blob{ position:fixed; width: 520px; height: 520px; border-radius: 50%; filter: blur(35px); opacity: .45; z-index:0; pointer-events:none; transform: translate3d(0,0,0); animation: drift 18s ease-in-out infinite; } .blob.b1{ background: radial-gradient(circle at 30% 30%, var(--accent2), transparent 60%); left:-180px; top:-180px; } .blob.b2{ background: radial-gradient(circle at 70% 40%, var(--accent1), transparent 60%); right:-220px; top:80px; animation-duration: 22s; } .blob.b3{ background: radial-gradient(circle at 50% 60%, var(--accent3), transparent 60%); left:20%; bottom:-260px; animation-duration: 20s; } @keyframes bgShift{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } @keyframes drift{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(35px,-22px) scale(1.05); } } .card{ position:relative; z-index:1; width:min(920px, 92vw); background: var(--card); border: 1px solid rgba(255,255,255,.65); backdrop-filter: blur(10px); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 34px); display:flex; flex-direction: column; gap: 22px; animation: popIn .7s ease both; } .guest-layout { display:grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items:center; width: 100%; } .dashboard-layout { display:none; flex-direction: column; width: 100%; } @keyframes popIn{ from{ opacity:0; transform: translateY(14px) scale(.99); } to{ opacity:1; transform: translateY(0) scale(1); } } .title{ margin:0 0 10px 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.06; letter-spacing: -0.02em; } .title .grad{ background: linear-gradient(90deg, var(--accent2), var(--accent1), var(--accent3)); -webkit-background-clip:text; background-clip:text; color: transparent; } .subtitle{ margin:0 0 18px 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; } .cta-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 24px; border-radius: 14px; border: 0; text-decoration:none; font-weight: 700; letter-spacing: .01em; cursor:pointer; transform: translateZ(0); transition: all .18s ease; box-shadow: 0 12px 28px rgba(251, 146, 60, .22); background: linear-gradient(135deg, var(--accent2), var(--accent1)); color:#fff; font-size: 15px; } .btn:hover{ transform: translateY(-2px); filter: saturate(1.06); box-shadow: 0 16px 34px rgba(251, 146, 60, .28); } .btn:active{ transform: translateY(0); } .btn.secondary { background: #fff; color: var(--accent1); border: 2px solid var(--accent1); box-shadow: none; } .btn.secondary:hover { background: var(--bg2); } .hint{ color: var(--muted); font-size: 13px; } .art{ width:100%; height: 320px; border-radius: 18px; background: linear-gradient(135deg, rgba(96,165,250,.22), rgba(251,113,133,.22), rgba(251,146,60,.20)); border: 1px solid rgba(255,255,255,.55); display:grid; place-items:center; overflow:hidden; position:relative; } .art img{ width: min(340px, 75%); height:auto; filter: drop-shadow(0 18px 24px rgba(2,6,23,.18)); transform: translateY(2px); animation: floaty 6.5s ease-in-out infinite; } @keyframes floaty{ 0%,100%{ transform: translateY(4px); } 50%{ transform: translateY(-10px); } } .app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; width: 100%; } .app-card { background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.8); border-radius: 18px; padding: 24px; text-decoration: none; color: var(--text); transition: all 0.2s ease; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .app-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.9); box-shadow: 0 10px 25px rgba(0,0,0,0.08); } .app-icon { font-size: 32px; margin-bottom: 5px; background: linear-gradient(135deg, var(--accent2), var(--accent1)); -webkit-background-clip: text; background-clip: text; color: transparent; } .app-title { font-size: 18px; font-weight: 800; } .app-desc { font-size: 13px; color: var(--muted); line-height: 1.4; } @media (max-width: 860px){ .guest-layout{ grid-template-columns: 1fr; } .art{ height: 240px; } .app-grid { grid-template-columns: 1fr; } } :root{ --bg:#0b1220; --panel:#0f1b33; --card:#122041; --ink:#eaf1ff; --muted:#b9c7e6; --line:#2a3a63; --accent:#4da3ff; --accent2:#2dd4bf; --danger:#ff5d5d; --paper:#ffffff; --paper-ink:#111827; --paper-line:#4b5563; --break:#fff2cc; --lunch:#e2f0d9; --title:#d9e1f2; --header:#ededed; --day:#f4f8ff; --shadow: 0 10px 30px rgba(0,0,0,.25); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Calibri", sans-serif; color:var(--ink); background: radial-gradient(1200px 500px at 20% -10%, #1b2d5a 0%, rgba(27,45,90,0) 60%), radial-gradient(900px 500px at 90% 0%, #153b5a 0%, rgba(21,59,90,0) 55%), linear-gradient(180deg, var(--bg), #070b14); font-size: 14px; } .topbar{ position:sticky; top:0; z-index:100; padding:12px; display:flex; gap:10px; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.06); background: rgba(11,18,32,.95); backdrop-filter: blur(10px); } .brand{min-width:200px; flex-shrink: 0;} .brand__title{font-weight:900; letter-spacing:.4px; font-size:15px} .brand__meta{margin-top:6px; display:flex; gap:10px; flex-wrap:wrap} .brand__meta label{font-size:11px; color:var(--muted)} .brand__meta input{ margin-left:6px; padding:4px 6px; border-radius:6px; border:1px solid var(--line); background:#0a1326; color:var(--ink); font-size: 12px; width: 100px; } /* Specific style for the long title input */ .brand__meta input#titleInput { width: 220px; } .actions{display:flex; gap:8px; align-items:center; overflow-x:auto; padding-bottom:2px; margin-left:auto; margin-right:10px} .actions::-webkit-scrollbar{height:0;width:0} .sep{display:inline-block; width:1px; height:28px; background:rgba(255,255,255,.12); margin:0 4px} .panelToggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--ink); cursor:pointer; font-size:22px; user-select:none; flex-shrink: 0; z-index: 101; } .btn{ appearance:none; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:var(--ink); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700; font-size: 13px; transition: all 0.2s; white-space: nowrap; text-decoration: none; /* for links */ display: inline-flex; align-items: center; justify-content: center; } .btn:hover{background:rgba(255,255,255,.12);} .btn:active{transform:scale(0.96);} .btn.primary{background:rgba(77,163,255,.22); border-color:rgba(77,163,255,.45)} .btn.primary:hover{background:rgba(77,163,255,.35);} .btn.accent{background:rgba(45,212,191,.20); border-color:rgba(45,212,191,.45)} .btn.danger{background:rgba(255,93,93,.14); border-color:rgba(255,93,93,.45)} .btn.small{padding: 4px 10px; font-size: 14px; height: 36px;} .layout{display:grid; grid-template-columns:1fr; gap:12px; padding:12px; align-items:start} .panel{ position:fixed; inset:0 0 0 auto; width:min(450px, 92vw); transform: translateX(110%); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1); background: #0b1220; border-left: 1px solid rgba(255,255,255,.10); padding:16px; overflow-y:auto; z-index:200; box-shadow: -10px 0 50px rgba(0,0,0,0.7); } .panel.open{transform: translateX(0)} .panelHead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px} .card{background:rgba(18,32,65,.72); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; box-shadow: var(--shadow); margin-bottom:16px} .cardHead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px} .card h3{margin:0 0 12px 0; font-size:14px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9;} .row{display:flex; gap:10px; align-items:center; justify-content:space-between; margin:10px 0} .row label{font-size:12px; color:var(--muted)} .row input, .row select{flex:1; margin-left:8px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:#0a1326; color:var(--ink); font-size: 13px;} .hint{font-size:12px; color:rgba(233,241,255,.70); line-height:1.4; margin-bottom: 10px;} .list{display:flex; flex-direction:column; gap:6px; margin:10px 0} .listItem{display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.15); cursor:pointer; transition: background 0.2s;} .listItem:hover{background:rgba(255,255,255,.05);} .listItem b{font-size:13px} .listItem span{font-size:12px; color:var(--muted)} .assign{display:flex; flex-direction:column; gap:10px; margin-top:10px} .assignRow{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.15);} .assignRow__top { display:flex; justify-content:space-between; align-items:center; } .assignRow__meta { display:flex; flex-direction:column; } .assignRow__meta .name { font-weight:900; font-size:13px; } .assignRow__meta .abbrev { font-size:11px; color:rgba(233,241,255,.65); } .assignRow__meta .counts { font-size:11px; color:rgba(233,241,255,.7); margin-top:4px; } .assignRow__controls { display:grid; grid-template-columns: 1.2fr 1.2fr 1.2fr auto; gap:6px; align-items:center; margin-top:6px; background: rgba(0,0,0,0.2); padding:6px; border-radius:8px;} .assignRow__slots { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .slotTag { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 6px; border-radius:4px; background:rgba(45,212,191,.20); color:#fff; border:1px solid rgba(45,212,191,.4); user-select:none; } .slotTag .x { cursor:pointer; font-weight:bold; color:var(--danger); margin-left:4px; padding: 0 4px;} .workspace{min-width:0; padding-bottom: 60px;} .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px} .tab{padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); cursor:pointer; font-weight:700; color: var(--muted); transition: all 0.2s;} .tab.active{background:rgba(77,163,255,.20); border-color:rgba(77,163,255,.45); color: #fff;} .tab:hover{background:rgba(255,255,255,.1);} .tab.teacher-tab { border-color: var(--accent2); color: var(--accent2); } .tab.teacher-tab.active { background: rgba(45,212,191,.20); color: #fff; } .sheetWrap{background:rgba(18,32,65,.55); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:16px; box-shadow: var(--shadow)} .sheetHeader{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; flex-wrap: wrap;} .sheetHeader h2{margin:0; font-size: 22px;} #headerTeacherSelect {display:none; margin-left: 10px; padding: 6px; border-radius: 8px; border: 1px solid var(--accent2); background: #0a1326; color: #fff; font-size: 16px; font-weight: bold;} #headerTeacherSelect.visible { display: inline-block; } .submeta{font-size:13px; color:rgba(233,241,255,.70); margin-top:4px} .sheetHeader__right{display:flex; gap: 8px; flex-wrap: wrap;} .tableWrap{overflow:auto; padding-bottom:10px} .timetable{border-collapse:collapse; background:var(--paper); color:var(--paper-ink); width:100%; min-width: 800px; table-layout:fixed; border:2px solid var(--paper-line)} .timetable td, .timetable th{border:1px solid var(--paper-line); padding:6px 4px; text-align:center; vertical-align:middle; font-size:12px; line-height:1.1; font-weight:600} .timetable .titleRow td{background:var(--title); font-weight:900; font-size:18px; letter-spacing:.4px; padding:12px 6px; border-bottom:2px solid var(--paper-line)} .timetable .headerRow th{background:var(--header); font-weight:900; border-bottom:2px solid var(--paper-line); font-size: 11px; padding: 8px 2px;} .timetable .dayCell{background:var(--day); font-weight:900; width: 80px;} .day-row{height: 31.5mm;} .timetable .breakCell{background:var(--break); font-weight:900; padding: 10px 2px; writing-mode: vertical-lr; text-orientation: mixed;} .timetable .lunchCell{background:var(--lunch); font-weight:900; padding: 10px 2px; writing-mode: vertical-lr; text-orientation: mixed;} .lesson{user-select:none; height: 100%; display:flex; flex-direction:column; justify-content:center; border-radius:6px; padding:4px; border:1px solid rgba(17,24,39,.15); background:rgba(77,163,255,.15); min-height: 48px;} .lesson b { font-size: 13px; color: #000; display: block;} .lesson small{display:block; opacity:.85; font-weight:600; font-size: 11px; color: #333; margin-top:2px} .lesson.double{background:rgba(77,163,255,.25); border:2px solid rgba(77,163,255,.4);} .lesson.teacher-view { background: rgba(45,212,191,.2); border-color: rgba(45,212,191,.5); } .lesson.conflict{background:rgba(255,93,93,.25); border-color:rgba(255,93,93,.60)} .lesson.locked{background:rgba(255, 179, 0, 0.2); border-color:rgba(255, 179, 0, 0.6);} .cellEditable{cursor:pointer; height: 1px;} .cellEditable:hover{background: rgba(0,0,0,0.03);} .cellEmpty{color:#9ca3af; font-weight: 400;} td.drag-over{outline:3px dashed rgba(77,163,255,.9); outline-offset:-3px;} td.dragging{opacity:.55;} td.drag-block{box-shadow: inset 0 0 0 3px rgba(77,163,255,.8);} td.drag-over-block{box-shadow: inset 0 0 0 3px rgba(45,212,191,.8);} .status{font-size:13px; color:rgba(233,241,255,.85); margin-top:12px; padding:12px 16px; border-radius:12px; border:1px dashed rgba(255,255,255,.18); background:rgba(0,0,0,.25); white-space:pre-wrap; line-height: 1.5;} .editBox{min-width:260px; background: var(--card); padding: 10px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.4); border: 1px solid var(--line); position: relative; z-index: 100;} .edit{display:flex; flex-direction:column; gap:8px} .edit select, .edit input{padding:10px 10px; border-radius:8px; border:1px solid rgba(17,24,39,.25); font-size:13px} .edit__buttons{display:flex; gap:8px; justify-content:flex-end} .editWarn{font-size:12px; color:rgba(233,241,255,.75); background:rgba(255,93,93,.12); border:1px solid rgba(255,93,93,.25); padding:8px; border-radius:10px; line-height:1.35} .quickBar{display:flex; gap:6px; flex-wrap:wrap} .quickBar button{border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; padding:6px 8px; border-radius:10px; cursor:pointer; font-weight:800; font-size:12px} .quickBar button.clear{border-color: rgba(255,93,93,.35); background: rgba(255,93,93,.12)} .editRow{display:flex; gap:10px; align-items:center; justify-content:space-between} .editRow label{font-size:12px; color:rgba(233,241,255,.8)} .editRow input[type=checkbox]{width:18px; height:18px} .toastHost{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:1000; display:flex; flex-direction:column; gap:8px; width:min(400px, 92vw)} .toast{background:rgba(15,23,42,0.95); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:12px 16px; box-shadow: var(--shadow); display:flex; gap:12px; align-items:flex-start; justify-content:space-between; backdrop-filter: blur(8px);} .toast .x{background:transparent; border:none; color:#fff; cursor:pointer; font-size:18px; line-height:1; padding: 0 4px; opacity: 0.6;} .footer{padding:10px 14px; color:rgba(233,241,255,.55); font-size:12px; text-align: center;} .panelOverlay {position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.3s;} .panelOverlay.open { opacity: 1; pointer-events: all; } @media (min-width: 1024px){ .actions{display:flex; overflow:visible; margin-left: 0; justify-content: flex-end;} .panelToggle{display:none} .layout{grid-template-columns: 400px 1fr} .panel{position:sticky; inset:auto; transform:none; width:auto; background:transparent; border:none; padding:0; overflow:visible; z-index:auto; box-shadow: none;} .panel.open{transform:none} .panelOverlay { display: none; } .brand__meta input { width: auto; } } /* Updated to hide entire sheet header in PDF mode */ .pdf-mode .sheetHeader, .pdf-mode .status, .pdf-mode .actions { display: none !important; } .pdf-mode.sheetWrap { background: #fff !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; border-radius: 0 !important; } @media print { @page { size: A4 landscape; margin: 5mm; } body { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .topbar, .panel, .tabs, .footer, .sheetHeader, .status, .toastHost, .submeta, .panelToggle, .actions { display: none !important; } .layout { display: block !important; padding: 0 !important; margin: 0 !important; } .sheetWrap { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; width: 100% !important; } .tableWrap { overflow: visible !important; } .timetable { width: 99% !important; margin: 0 auto; border: 3px solid #000 !important; font-family: "Calibri", Arial, sans-serif !important; page-break-inside: avoid; } .timetable td, .timetable th { border: 1px solid #000 !important; font-size: 10pt !important; padding: 2px !important; color: #000 !important; } .timetable .titleRow td { background: #ddd !important; font-size: 14pt !important; border-bottom: 2px solid #000 !important; color: #000 !important; } .timetable .headerRow th { background: #eee !important; font-size: 9pt !important; border-bottom: 2px solid #000 !important; } .timetable .dayCell { background: #f0f0f0 !important; } .timetable .breakCell { background: #e0e0e0 !important; } .timetable .lunchCell { background: #d0d0d0 !important; } .lesson { border: none !important; background: transparent !important; padding: 0 !important; } .lesson b { font-size: 10pt !important; } .lesson small { font-size: 8pt !important; color: #333 !important; } #headerTeacherSelect { display: none !important; } } @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); :root { --accent: #1e40af; --accent-hover: #1d4ed8; --primary-text: #1f2937; --muted-text: #6b7280; --border-color: #d1d5db; --bg: #f3f4f6; --card-bg: #ffffff; --success: #059669; --warn: #f59e0b; --danger: #dc2626; --header-bg: #eff6ff; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --page-w: 210mm; --page-h: 297mm; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { to { opacity: 0; transform: translateY(15px); } } @keyframes spin { to { transform: rotate(360deg); } } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--bg); font-family: var(--font-sans); color: var(--primary-text); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } .page-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; animation: fadeIn 0.5s ease-out; } .page-header { position: sticky; top: 16px; z-index: 100; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); padding: 12px 16px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-color); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } main { padding-top: 16px; } .toolbar-group { display: flex; gap: 10px; align-items: center; } .toolbar-group.main-actions { flex: 1 1 auto; } .toolbar-group.secondary-actions { flex-shrink: 0; } .group { display: flex; gap: 10px; align-items: center; } .group label { font-size: 13px; color: var(--muted-text); font-weight: 500; } select, input[type=text], input[type=number], input[type=date] { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; min-width: 160px; background: var(--card-bg); font-family: var(--font-sans); font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; } select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1); } button, a.btn { padding: 9px 16px; background-color: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 13px; transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; } button:hover, a.btn:hover { background-color: var(--accent-hover); box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15); } button:active, a.btn:active { transform: translateY(1px); } button.secondary, a.btn.secondary { background-color: #f3f4f6; color: #374151; border: 1px solid var(--border-color); } button.secondary:hover, a.btn.secondary:hover { background-color: #e5e7eb; } button.ghost { background: transparent; color: var(--accent); border: 1px solid #bfd5ff; } button.ghost:hover { background: #e0f2fe; } button.danger { background-color: var(--danger); color: white; } button.danger:hover { background-color: #b91c1c; } button:disabled, a.btn[aria-disabled="true"] { background-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow: none; transform: none; } button .spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; } .chip { display: inline-flex; align-items: center; gap: 6px; background: #e0f2fe; color: var(--accent); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; border: 1px solid rgba(30, 64, 175, 0.1); } .hamburger-btn { background: transparent; border: none; padding: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: background-color 0.2s; } .hamburger-btn:hover { background-color: #f3f4f6; } .hamburger-btn .icon { width: 24px; height: 24px; color: var(--primary-text); } .nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .nav-backdrop.open { opacity: 1; visibility: visible; } .nav-drawer { position: fixed; top: 0; left: 0; height: 100%; width: 280px; background: var(--card-bg); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); z-index: 1001; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; max-height: 100vh; scrollbar-width: thin; } .nav-drawer.open { transform: translateX(0); } .nav-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .nav-header h3 { margin: 0; font-size: 18px; color: var(--accent); } .nav-links { list-style: none; padding: 16px 0; margin: 0; flex-grow: 1; overflow-y: auto; } .nav-links li a { display: flex; align-items: center; gap: 12px; padding: 12px 20px; text-decoration: none; color: var(--primary-text); font-weight: 600; font-size: 14px; border-left: 3px solid transparent; transition: background-color 0.2s, border-color 0.2s; } .nav-links li a:hover { background-color: #f9fafb; border-left-color: var(--accent); } .nav-links li a .icon { width: 24px; height: 24px; } .nav-links li a.danger-link { color: var(--danger); } .nav-links li a.danger-link:hover { background-color: #fef2f2; border-left-color: var(--danger); } .nav-links .separator { height: 1px; background-color: var(--border-color); margin: 12px 20px; } .nav-links li:nth-of-type(1) a .icon { color: #2563eb; } .nav-links li:nth-of-type(2) a .icon { color: #059669; } .nav-links li:nth-of-type(4) a .icon { color: #9333ea; } .nav-links li:nth-of-type(5) a .icon { color: #ca8a04; } .nav-links li:nth-of-type(6) a .icon { color: #db2777; } .nav-links li:nth-of-type(7) a .icon { color: #64748b; } .nav-links li:nth-of-type(8) a .icon { color: #f97316; } .nav-links li:nth-of-type(10) a .icon { color: #0d9488; } .nav-links li:nth-of-type(11) a .icon { color: #2563eb; } .nav-links li:nth-of-type(13) a .icon { color: #059669; } .nav-links li:nth-of-type(14) a .icon { color: #9333ea; } .nav-links li:nth-of-type(15) a .icon { color: #ca8a04; } .nav-links li:nth-of-type(16) a .icon { color: #db2777; } .nav-links li:nth-of-type(17) a .icon { color: #0d9488; } #drop_zone { border: 2px dashed var(--border-color); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; flex-grow: 1; } #drop_zone.dragover { background-color: #e0f2fe; border-color: var(--accent); } #drop_zone p { margin: 0; color: var(--muted-text); font-weight: 500; } #drop_zone p small { display: block; font-size: 12px; margin-top: 4px; } #filename { font-weight: 600; color: var(--accent); margin-top: 8px; font-size: 13px; } .panel { background: var(--card-bg); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color); margin-bottom: 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03); animation: slideUpIn 0.5s ease-out forwards; } .panel h3 { margin: 0 0 16px 0; font-size: 18px; color: var(--primary-text); } .two-col { display: grid; grid-template-columns: 1fr 400px; gap: 24px; } .editor-grid { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; } .editor-grid th, .editor-grid td { border-bottom: 1px solid #e5e7eb; padding: 10px 12px; text-align: left; } .editor-grid th { background: #f9fafb; font-weight: 600; color: var(--primary-text); } .editor-grid tr:hover td { background-color: #f9fafb; } #statusBar { position: sticky; top: calc(16px + 65px + 12px); z-index: 50; background: var(--card-bg); border-radius: 10px; padding: 8px 16px; border: 1px solid var(--border-color); font-size: 13px; display: flex; justify-content: space-between; align-items: center; animation: slideUpIn 0.4s ease-out forwards; margin-bottom: 16px; } #statusBar .left { font-weight: 600; } #statusBar.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } #statusBar.warn { background: #fffbeb; border-color: #fde68a; color: #854d0e; } #statusBar.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .sheet { width: 100%; min-height: 420px; background: #fff; padding: 20px; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05); overflow: hidden; } .school-head { display: flex; justify-content: center; align-items: center; line-height: 1; margin-bottom: 10px; padding: 10px 0; border-bottom: 2px solid #e5e7eb; } .school-head h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--primary-text); letter-spacing: -0.5px; } .school-head .addr { font-size: 12px; color: var(--muted-text); margin-top: 2px; } .school-head .motto { margin-top: 4px; font-weight: 700; color: var(--accent); font-size: 14px; } .key { font-size: 11px; color: var(--muted-text); text-align: center; margin: 8px 0; padding: 4px 8px; background: #f9fafb; border-radius: 4px; } .title { text-align: center; font-weight: 700; margin: 10px 0 16px; font-size: 16px; text-transform: uppercase; color: var(--primary-text); } .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; border: 1px solid var(--border-color); padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; background: #fcfcfc; } .meta div { display: flex; gap: 8px; align-items: center; } .meta label { font-weight: 700; min-width: 110px; color: var(--primary-text); } table.report { width: 100%; border-collapse: collapse; font-size: 11.5px; table-layout: fixed; margin-bottom: 12px; } table.report th, table.report td { border: 1px solid #d1d5db; padding: 7px 4px; text-align: center; word-break: break-word; } table.report th { background-color: var(--header-bg); font-weight: 700; color: var(--primary-text); } table.report thead th:first-child { width: 18%; min-width: 18%; } table.report tbody td { padding: 9px 4px; } table.report tbody tr:nth-child(even) { background-color: #f9fafb; } table.report td.label { text-align: left; padding-left: 10px; font-weight: 700; color: #374151; } .grade-ee { color: #28a745; font-weight: 700; } .grade-me { color: #007bff; font-weight: 700; } .grade-ae { color: #ffbf00; font-weight: 700; } .grade-be { color: #6c757d; font-weight: 700; } .performance-section { display: flex; align-items: flex-start; gap: 15px; margin: 15px 0; } .performance-label { font-weight: 800; color: var(--primary-text); font-size: 12px; flex-shrink: 0; width: 35%; line-height: 1.3; padding-top: 5px; } .label-style-1 { color: #8433FF; } .label-style-2 { color: #007bff; } .label-style-3 { color: #28a745; } .mini-chart-wrap { margin: 0; flex-grow: 1; position: relative; height: 90px; display: flex; gap: 5px; } .y-axis-labels { display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; font-weight: 500; color: var(--muted-text); height: 70px; margin-top: 5px; text-align: right; flex-shrink: 0; width: 30px; } .mini-chart { flex-grow: 1; display: flex; justify-content: space-around; align-items: flex-end; position: relative; height: 70px; width: 100%; border-bottom: 1px solid #333; border-left: 1px solid #333; margin-top: 5px; padding: 0 5%; } .grid-line { position: absolute; left: 0; right: 0; height: 1px; border-top: 1px dashed #d1d5db; z-index: 0; } .bar-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; height: 100%; width: 30%; margin: 0; text-align: center; z-index: 1; } .chart-bar { height: var(--bar-height); width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; transition: height 0.5s ease-out; } .bar-opener { background: linear-gradient(to top, #007bff, #5aa5ff); box-shadow: 0 -2px 4px rgba(0, 123, 255, 0.3); } .bar-mid { background: linear-gradient(to top, #28a745, #5cb85c); box-shadow: 0 -2px 4px rgba(40, 167, 69, 0.3); } .bar-end { background: linear-gradient(to top, #dc3545, #e06e78); box-shadow: 0 -2px 4px rgba(220, 53, 69, 0.3); } .bar-generic-1 { background: linear-gradient(to top, #007bff, #5aa5ff); box-shadow: 0 -2px 4px rgba(0, 123, 255, 0.3); } .bar-generic-2 { background: linear-gradient(to top, #28a745, #5cb85c); box-shadow: 0 -2px 4px rgba(40, 167, 69, 0.3); } .bar-generic-3 { background: linear-gradient(to top, #ffc107, #ffd54f); box-shadow: 0 -2px 4px rgba(255, 193, 7, 0.3); } .bar-generic-4 { background: linear-gradient(to top, #dc3545, #e06e78); box-shadow: 0 -2px 4px rgba(220, 53, 69, 0.3); } .bar-generic-5 { background: linear-gradient(to top, #6f42c1, #9b72d9); box-shadow: 0 -2px 4px rgba(111, 66, 193, 0.3); } .bar-value { font-size: 10px; font-weight: 700; color: var(--primary-text); margin-bottom: 2px; white-space: nowrap; text-shadow: 0 0 2px white; } .chart-labels { position: absolute; bottom: -5px; left: 35px; right: 0; display: flex; justify-content: space-around; padding: 0 5%; } .chart-label { width: auto; text-align: center; font-weight: 600; line-height: 1.1; font-size: 10px; white-space: nowrap; transform: translateY(100%); } .comments-row, .sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; font-size: 12px; } .comments-block { display: flex; flex-direction: column; gap: 4px; } .comments-block>div:first-child { font-weight: 700; margin-bottom: 0px; color: var(--accent); border-bottom: 1px dashed #e5e7eb; padding-bottom: 4px; font-size: 13px; } .comments-block>div:nth-child(2) { min-height: 30px; line-height: 1.3; color: var(--primary-text); } .sign-row { margin-top: 10px; padding: 5px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .sign-row.foot-dates { margin-top: 10px; padding: 5px 0; border: none; border-bottom: 1px solid var(--border-color); } .sign { border: none; border-bottom: 1px solid #9ca3af; padding: 0; border-radius: 0; min-height: 20px; background: transparent; line-height: 1.2; font-size: 11px; display: flex; align-items: flex-end; padding-bottom: 2px; } .sign b { color: #374151; font-weight: 600; margin-right: 4px; white-space: nowrap; } .sign .signature-font { font-family: 'Dancing Script', cursive; font-size: 20px; color: #223c8a; padding: 0 5px; } .sign-row .right-col { display: flex; flex-direction: column; gap: 10px; } .sign-row .right-col .sign:last-child { margin-top: auto; } .toasts { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 9999; } .toast { background: #27272a; color: white; padding: 12px 16px; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); font-size: 14px; display: flex; align-items: center; gap: 8px; font-weight: 500; animation: toastIn 0.4s ease-out; } .toast.exiting { animation: toastOut 0.4s ease-in forwards; } .toast.success { background-color: var(--success); } .toast.error { background-color: var(--danger); } .toast.warn { background-color: var(--warn); color: #1e293b; } dialog { border-radius: 12px; padding: 0; border: 1px solid var(--border-color); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); max-width: 740px; width: 90%; } dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } dialog[open] { animation: slideUpIn 0.4s ease-out; } .dlg-hd { padding: 16px 20px; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--border-color); } .dlg-bd { padding: 20px; line-height: 1.6; } .dlg-ft { padding: 12px 20px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid #f9fafb; background: #f9fafb; } #errorDlg .dlg-hd { background: #fef2f2; color: var(--danger); } #confirmDlg .dlg-hd { background: #fffbeb; color: #854d0e; } pre.err { background: #f9fafb; border: 1px solid var(--border-color); padding: 12px; max-height: 240px; overflow: auto; border-radius: 6px; font-size: 13px; white-space: pre-wrap; } .la-grid { display: grid; grid-template-columns: 1fr 120px auto; gap: 10px; align-items: center; margin-bottom: 10px; } .la-grid > label { font-weight: 600; font-size: 12px; color: var(--muted-text); padding-bottom: 4px; } .la-grid-header { border-bottom: 1px solid var(--border-color); } .la-item input[type="text"] { width: 100%; } .la-item .key-display { font-family: monospace; font-size: 13px; color: var(--muted-text); padding: 8px 12px; background: #f9fafb; border-radius: 8px; border: 1px solid var(--border-color); } .details-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .details-form .input-group { display: flex; flex-direction: column; gap: 6px; } .details-form label { font-weight: 600; font-size: 13px; color: var(--primary-text); } .details-form input, .details-form select { width: 100%; } @media (max-width: 960px) { .page-container { padding: 0 16px; margin: 0 auto; } .page-header { flex-direction: column; align-items: stretch; top: 0; border-radius: 0; } #statusBar { top: 150px; } .two-col { grid-template-columns: 1fr; } .panel { padding: 16px; } } @media (max-width: 768px) { #statusBar { top: 200px; } .toolbar-group { flex-wrap: wrap; } .details-form { grid-template-columns: 1fr; } } .school-head h1 { font-size: 20px; } .title { font-size: 14px; } table.report { font-size: 10.2px; } table.report th, table.report td { padding: 4px 2px; border-color: #000; } .meta { font-size: 11px; padding: 6px; } .comments-block>div:nth-child(2) { min-height: 20px; } .mini-chart-wrap { height: 70px; } .mini-chart { height: 48px; padding-bottom: 8px; } .chart-bar { min-height: 2px; } .bar-value { font-size: 9px; margin-bottom: 1px; } .chart-labels, .chart-label { font-size: 9px; } .comments-row, .sign-row { margin-top: 6px; gap: 10px; } .sign { min-height: 15px; } .sign-row.foot-dates { margin-top: 8px; } .sheet, .sheet table, .sheet tr, .sheet td { page-break-inside: avoid; break-inside: avoid; } .sheet { height: auto !important; overflow: visible !important; } img, svg { max-width: 100% !important; max-height: 120mm !important; height: auto !important; } .sheet { font-size: 12px !important; } /* --- Print (fixed: only print #batchContainer and avoid empty pages) --- */ @media print { @page { size: A4 portrait; margin: 6mm 8mm 12mm 8mm; } html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; } /* Hide everything by default to prevent accidental blank pages */ body * { visibility: hidden !important; } /* Only show the printable batch container */ #batchContainer, #batchContainer * { visibility: visible !important; } #batchContainer { display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; } /* Ensure each sheet paginates cleanly */ .sheet { box-shadow: none !important; margin: 0 !important; padding: 3mm 5mm !important; font-size: 10.8px !important; line-height: 1.15 !important; page-break-after: always; break-after: page; } .sheet:last-child { page-break-after: auto; break-after: auto; } .sheet table.report th, .sheet table.report td { padding: 1.8px 1.8px !important; } .comments-row, .sign-row, .meta, .no-break-footer, .print-footer { page-break-inside: avoid !important; break-inside: avoid !important; } .sheet h1, .sheet h2, .sheet h3 { margin-top: 0.35em !important; margin-bottom: 0.25em !important; } .sheet p { margin: 0.15em 0 !important; } img, svg { max-width: 100% !important; height: auto !important; } } /* --- Header position tweak (move logo + address upward) --- */ .school-head { margin-top: -8px !important; padding-top: 2px !important; } /* --- Stronger header shift upward --- */ .school-head { margin-top: -18px !important; padding-top: 0 !important; padding-bottom: 4px !important; } .school-head h1 { margin-top: 0 !important; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); body { font-family: 'Inter', Arial, sans-serif; margin: 0; color: #1f2937; background: #f3f4f6; } .page { width: 210mm; min-height: 297mm; padding: 10mm; margin: 10mm auto; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .header { text-align: center; border-bottom: 2px solid #1e40af; padding-bottom: 10px; margin-bottom: 15px; } .header h1 { margin: 0; font-size: 24px; font-weight: 800; color: #1e40af; } .header h2 { margin: 5px 0 0; font-size: 18px; color: #1f2937; font-weight: 600; text-transform: uppercase; } .grade-block { border-top: 1px solid #d1d5db; padding-top: 15px; margin-top: 25px; page-break-before: always; } .grade-block:first-child { border-top: none; margin-top: 0; page-break-before: auto; } .grade-title { font-size: 20px; color: #1f2937; border-bottom: 2px solid #d1d5db; padding-bottom: 8px; margin-bottom: 15px; font-weight: 700; } .term-section { margin-bottom: 20px; } .term-title { font-size: 16px; color: #1e40af; font-weight: 600; margin: 0 0 10px 0; text-transform: uppercase; } .two-column-layout { display: flex; gap: 20px; } .column { flex: 1; min-width: 0; } h4 { font-size: 14px; font-weight: 600; color: #374151; margin: 0 0 8px; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; } .summary-list { list-style-type: none; padding-left: 0; margin: 0; } .summary-list li { font-size: 13px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted #e5e7eb; } .summary-list li:last-child { border-bottom: none; } .summary-list .name { flex-grow: 1; padding-right: 10px; } .summary-list .score { font-weight: 600; color: #1f2937; flex-shrink: 0; text-align: right; } .print-btn-container { text-align: center; margin-top: 30px; position: fixed; bottom: 20px; right: 20px; z-index: 100; } .print-btn { padding: 12px 24px; font-size: 16px; cursor: pointer; background: #1e40af; color: white; border: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } @media print { @page { size: A4 portrait; margin: 6mm 8mm 12mm 8mm; } body { background: none; } .page { margin: 0; box-shadow: none; } .print-btn-container { display: none; } .grade-block { border-top-color: #999; } .header { border-bottom-color: #000; } .grade-title { border-bottom-color: #999; } .summary-list li { border-bottom-color: #ccc; } } /* --- Header position tweak (move logo + address upward) --- */ .school-head { margin-top: -8px !important; padding-top: 2px !important; } /* --- Stronger header shift upward --- */ .school-head { margin-top: -18px !important; padding-top: 0 !important; padding-bottom: 4px !important; } .school-head h1 { margin-top: 0 !important; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap'); :root{ --bg1:#ffedd5; --bg2:#fee2e2; --bg3:#dbeafe; --card:#ffffffcc; --text:#0f172a; --muted:#475569; --accent1:#fb7185; --accent2:#fb923c; --accent3:#60a5fa; --shadow: 0 18px 45px rgba(2,6,23,.12); --radius: 22px; --ring: 0 0 0 4px rgba(251,146,60,.22); } *{ box-sizing:border-box; } body{ margin:0; min-height:100vh; font-family: Inter, system-ui, -apple-system, sans-serif; color:var(--text); display:grid; place-items:center; padding: 28px 16px; background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3)); background-size: 220% 220%; animation: bgShift 14s ease-in-out infinite; overflow:hidden; } .blob{ position:fixed; width: 520px; height: 520px; border-radius: 50%; filter: blur(35px); opacity: .45; z-index:0; pointer-events:none; transform: translate3d(0,0,0); animation: drift 18s ease-in-out infinite; } .blob.b1{ background: radial-gradient(circle at 30% 30%, var(--accent2), transparent 60%); left:-180px; top:-180px; } .blob.b2{ background: radial-gradient(circle at 70% 40%, var(--accent1), transparent 60%); right:-220px; top:80px; animation-duration: 22s; } .blob.b3{ background: radial-gradient(circle at 50% 60%, var(--accent3), transparent 60%); left:20%; bottom:-260px; animation-duration: 20s; } @keyframes bgShift{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } @keyframes drift{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(35px,-22px) scale(1.05); } } .card{ position:relative; z-index:1; width:min(520px, 94vw); background: var(--card); border: 1px solid rgba(255,255,255,.65); backdrop-filter: blur(10px); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 22px; animation: popIn .7s ease both; } @keyframes popIn{ from{ opacity:0; transform: translateY(14px) scale(.99); } to{ opacity:1; transform: translateY(0) scale(1); } } h1{ margin: 0 0 8px 0; font-size: 28px; letter-spacing: -0.02em; } .sub{ margin: 0 0 18px 0; color: var(--muted); font-size: 14px; line-height: 1.55; } label{ display:block; font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; } input{ width:100%; padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.85); font-size: 15px; outline: none; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } input:focus{ border-color: rgba(251,146,60,.55); box-shadow: var(--ring); transform: translateY(-1px); } .password-container{ position:relative; } .eye-icon{ position:absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor:pointer; user-select:none; font-size: 18px; opacity: .85; transition: transform .15s ease, opacity .15s ease; } .eye-icon:hover{ transform: translateY(-50%) scale(1.06); opacity: 1; } .btn{ width:100%; margin-top: 18px; padding: 12px 16px; border-radius: 14px; border:0; cursor:pointer; font-weight: 800; letter-spacing: .01em; color:#fff; background: linear-gradient(135deg, var(--accent2), var(--accent1)); box-shadow: 0 14px 30px rgba(251,146,60,.22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn:hover{ transform: translateY(-2px); filter:saturate(1.06); box-shadow: 0 18px 38px rgba(251,146,60,.28); } .btn:active{ transform: translateY(0); } .error{ display:none; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .22); color: #b91c1c; font-size: 13px; } .foot{ margin-top: 14px; text-align:center; color: var(--muted); font-size: 12.5px; } .foot a{ color: #1d4ed8; text-decoration:none; font-weight: 700; } .foot a:hover{ text-decoration:underline; } /* ========================================= 1. CORE VARIABLES & RESET ========================================= */ :root { --border-color: #0000FF; /* Standard Blue Border */ --row-alt-bg: #E6E6FF; /* Light Blue Row Background */ --font-main: 'Times New Roman', serif; --ui-bg: #2c3e50; --ui-text: #ecf0f1; } * { box-sizing: border-box; -webkit-print-color-adjust: exact; } body { background-color: #525659; /* Dark grey backdrop */ margin: 0; padding: 0; padding-top: 70px; /* Space for fixed UI header */ font-family: var(--font-main); } /* ========================================= 2. A4 LANDSCAPE PAGE LAYOUT ========================================= */ .page { width: 297mm; min-height: 210mm; background: white; margin: 0 auto 20px auto; padding: 10mm; position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.5); } /* ========================================= 3. TYPOGRAPHY & EDITABLE HEADERS ========================================= */ h1 { text-align: center; font-weight: 900; text-decoration: underline; font-size: 16pt; margin: 0 0 10px 0; text-transform: uppercase; color: black; outline: none; cursor: text; } h1:focus, th:focus { background-color: #fffde7; outline: 2px solid orange; /* Focus indicator */ } /* ========================================= 4. TABLE STYLING (LOCKED LAYOUT) ========================================= */ table { width: 100%; border-collapse: collapse; table-layout: fixed; /* CRITICAL: Locks column widths */ font-size: 9.5pt; border: 1px solid var(--border-color); } /* Strict Column Widths */ col.c1 { width: 3%; } /* Week */ col.c2 { width: 4%; } /* Lesson */ col.c3 { width: 7%; } /* Strand */ col.c4 { width: 9%; } /* Sub-strand */ col.c5 { width: 17%; } /* Specific Learning Outcomes */ col.c6 { width: 18%; } /* Learning Experience */ col.c7 { width: 10%; } /* Key Inquiry Q */ col.c8 { width: 11%; } /* Resources */ col.c9 { width: 11%; } /* Assessment */ col.c10 { width: 10%; } /* Reflection */ th, td { border: 1px solid var(--border-color); padding: 4px; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; } th { font-weight: bold; text-align: left; background-color: white; height: 40px; color: black; cursor: text; /* Indicates editable */ } /* Row Colors */ tr.blue-row { background-color: var(--row-alt-bg); } tr.white-row { background-color: white; } /* ========================================= 5. EDITABLE AREAS ========================================= */ .editable { outline: none; width: 100%; min-height: 1.2em; cursor: text; white-space: pre-wrap; /* Preserves line breaks */ } .editable:focus { background-color: #fffde7; /* Subtle yellow highlight when editing */ } /* Non-editable cells (Week/Lesson numbers) */ .locked-cell { font-weight: bold; text-align: center; pointer-events: none; user-select: none; } /* Inner Content Styling */ ul { margin: 0; padding-left: 15px; } li { margin-bottom: 2px; } a { color: black; text-decoration: underline; font-style: italic; font-weight: bold; cursor: text; } /* ========================================= 6. UI CONTROL BAR ========================================= */ #generator-ui { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: var(--ui-bg); display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .ui-label { color: var(--ui-text); font-family: sans-serif; font-weight: bold; font-size: 14px; margin-right: 10px; } .btn { padding: 8px 16px; border: none; border-radius: 4px; font-family: sans-serif; font-weight: bold; cursor: pointer; font-size: 13px; transition: opacity 0.2s; color: white; text-decoration: none; /* For link buttons */ display: inline-flex; align-items: center; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-back { background: #34495e; border: 1px solid #7f8c8d; } .btn-hist { background: #8e44ad; } /* Purple for History */ .btn-add { background: #27ae60; } .btn-save { background: #f39c12; } .btn-pdf { background: #c0392b; } .btn-clear { background: #e74c3c; border: 1px solid #c0392b; } /* Red for clear */ /* ========================================= 7. PRINT MEDIA QUERY (CRITICAL FOR PDF) ========================================= */ @media print { body { padding: 0; background: white; } #generator-ui { display: none !important; } .page { margin: 0; box-shadow: none; width: 100%; } /* Prevent page breaks inside rows if possible */ tr { page-break-inside: avoid; } }