/* Timetable Maker — custom styles layered on Tailwind Play CDN */
:root{
  --bg:#f6f7fb; --surface:#ffffff; --surface-2:#f1f3f9;
  --text:#0f172a; --muted:#64748b; --border:#e5e7eb;
  --brand:#6366f1; --brand-2:#8b5cf6; --accent:#06b6d4;
  --shadow: 0 10px 30px -10px rgba(15,23,42,.18);
  --grad: linear-gradient(135deg,#6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
}
html.dark{
  --bg:#0b1020; --surface:#121831; --surface-2:#0f1530;
  --text:#e6e9f5; --muted:#9aa3bf; --border:rgba(255,255,255,.08);
  --shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
html,body{background:var(--bg); color:var(--text);}
*{border-color:var(--border);}
body{font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Inter", sans-serif; -webkit-font-smoothing:antialiased;}

.glass{background:color-mix(in oklab, var(--surface) 75%, transparent); backdrop-filter: blur(14px); border:1px solid var(--border); box-shadow: var(--shadow);}
.card{background:var(--surface); border:1px solid var(--border); border-radius:1rem; box-shadow: var(--shadow);}
.surface-2{background:var(--surface-2);}
.muted{color:var(--muted);}
.brand-grad{background: var(--grad);}
.brand-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:.75rem; font-weight:600; transition: transform .15s ease, box-shadow .15s ease, background .2s ease; border:1px solid transparent;}
.btn-primary{background:var(--grad); color:white; box-shadow: 0 8px 24px -8px rgba(99,102,241,.6);}
.btn-primary:hover{transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(99,102,241,.7);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:#ef4444; color:white;}
.btn-danger:hover{background:#dc2626;}
.chip{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; font-size:.72rem; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--border);}
.input, .select, .textarea{width:100%; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:.6rem; padding:.55rem .7rem; font-size:.9rem;}
.input:focus, .select:focus, .textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);}
.label{font-size:.78rem; color:var(--muted); margin-bottom:.25rem; display:block;}

/* Timetable grid */
.tt-wrap{overflow:auto; border-radius:1rem; border:1px solid var(--border); background:var(--surface);}
.tt-grid{display:grid; min-width:780px;}
.tt-cell{border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:.4rem; min-height:84px; position:relative;}
.tt-head{position:sticky; top:0; z-index:5; background:var(--surface-2); font-weight:700; padding:.7rem .5rem; text-align:center; border-bottom:1px solid var(--border); border-right:1px solid var(--border); font-size:.85rem;}
.tt-time{position:sticky; left:0; z-index:4; background:var(--surface-2); font-size:.72rem; color:var(--muted); padding:.5rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; display:flex; flex-direction:column; justify-content:center; gap:.15rem;}
.tt-head.corner{position:sticky; left:0; top:0; z-index:6;}
.tt-cell.empty{background:repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in oklab, var(--muted) 6%, transparent) 8px 9px);}
.tt-cell.empty:hover{background:color-mix(in oklab, var(--brand) 8%, var(--surface));}
.tt-block{height:100%; border-radius:.6rem; padding:.5rem .6rem; color:#0b1020; cursor:grab; display:flex; flex-direction:column; gap:.15rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.08); transition: transform .12s ease;}
.tt-block:hover{transform: translateY(-1px);}
.tt-block.dragging{opacity:.6;}
.tt-block .t-sub{font-weight:700; font-size:.85rem; line-height:1.15;}
.tt-block .t-meta{font-size:.7rem; opacity:.85;}
.tt-block .t-actions{margin-top:auto; display:flex; gap:.25rem; opacity:0; transition:opacity .15s;}
.tt-block:hover .t-actions{opacity:1;}
.tt-block .t-actions button{background:rgba(255,255,255,.55); border-radius:.35rem; padding:.15rem .35rem; font-size:.65rem;}
.tt-block.conflict{outline:2px solid #ef4444; outline-offset:-2px;}

/* Sidebar */
.side{width:280px; flex-shrink:0;}
@media (max-width: 900px){ .side{width:100%;} }

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(2,6,23,.5); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; opacity:0; pointer-events:none; transition:opacity .2s;}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
.modal{background:var(--surface); border-radius:1rem; width:100%; max-width:520px; padding:1.25rem; border:1px solid var(--border); box-shadow:var(--shadow); transform:translateY(8px) scale(.98); transition: transform .2s;}
.modal-backdrop.open .modal{transform:translateY(0) scale(1);}

/* Toast */
.toast-wrap{position:fixed; bottom:1rem; right:1rem; z-index:60; display:flex; flex-direction:column; gap:.5rem;}
.toast{background:var(--surface); border:1px solid var(--border); padding:.7rem 1rem; border-radius:.7rem; box-shadow:var(--shadow); font-size:.85rem; animation: slideIn .25s ease;}
@keyframes slideIn{from{transform:translateY(8px); opacity:0;} to{transform:translateY(0); opacity:1;}}

/* Hero animation */
.hero-orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none;}
.fade-up{opacity:0; transform: translateY(12px); animation: fadeUp .6s ease forwards;}
@keyframes fadeUp{to{opacity:1; transform: translateY(0);}}

/* Accordion */
details.faq{background:var(--surface); border:1px solid var(--border); border-radius:.8rem; padding:1rem 1.1rem; transition:background .15s;}
details.faq[open]{background: color-mix(in oklab, var(--brand) 6%, var(--surface));}
details.faq summary{cursor:pointer; font-weight:600; list-style:none;}
details.faq summary::-webkit-details-marker{display:none;}

/* Utility */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{scrollbar-width:none;}
.divider{height:1px; background:var(--border); margin:1rem 0;}

/* Print */
@media print{
  body * { visibility: hidden; }
  #timetable, #timetable * { visibility: visible; }
  #timetable { position: absolute; left:0; top:0; width:100%; }
  .no-print{display:none !important;}
}