/* =========================================================
   TimetableMaker — custom styles
   Layered on top of Tailwind CSS (Play CDN)
   ========================================================= */

:root {
  --brand: #6366f1;
  --brand-600: #4f46e5;
  --ring: rgba(99, 102, 241, 0.45);
}

* { -webkit-tap-highlight-color: transparent; }

html, body { overscroll-behavior-y: none; }

/* Smooth theme transition */
body, header, footer, section, article, aside, nav, div, button, input, select, textarea {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.6); background-clip: content-box; }

/* =================== Reusable component classes =================== */

/* Gradient primary button */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border-radius: .6rem;
  font-size: .8rem; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #a855f7);
  box-shadow: 0 10px 25px -10px var(--ring);
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { opacity: .92; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* Secondary button */
.btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border-radius: .6rem;
  font-size: .8rem; font-weight: 600;
  background: #fff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.dark .btn-secondary { background: #0f172a; color: #e2e8f0; border-color: #1e293b; }
.btn-secondary:hover { border-color: #a5b4fc; transform: translateY(-1px); }

/* Toolbar icon buttons */
.tool-btn {
  display: inline-grid; place-items: center;
  height: 2.2rem; width: 2.2rem; border-radius: .55rem;
  background: #f1f5f9; color: #475569;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.dark .tool-btn { background: #1e293b; color: #cbd5e1; }
.tool-btn:hover { background: #e0e7ff; color: var(--brand-600); transform: translateY(-1px); }
.dark .tool-btn:hover { background: #312e81; color: #c7d2fe; }

.tool-btn-sm {
  display: inline-grid; place-items: center;
  height: 1.8rem; width: 1.8rem; border-radius: .45rem;
  background: #f1f5f9; color: #475569; font-size: .7rem;
  transition: background-color .15s ease, color .15s ease;
}
.dark .tool-btn-sm { background: #1e293b; color: #cbd5e1; }
.tool-btn-sm:hover { background: #e0e7ff; color: var(--brand-600); }

/* Input field */
.input-field {
  width: 100%;
  padding: .55rem .75rem;
  border-radius: .55rem;
  font-size: .875rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dark .input-field { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
.input-field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); background: #fff; }
.dark .input-field:focus { background: #0b1220; }

/* Feature card */
.feature-card {
  position: relative;
  padding: 1.25rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.dark .feature-card { background: #0f172a; border-color: #1e293b; }
.feature-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.08), transparent 50%);
  opacity: 0; transition: opacity .25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 35px -15px rgba(15,23,42,.18); border-color: #c7d2fe; }
.dark .feature-card:hover { border-color: #4338ca; box-shadow: 0 20px 35px -15px rgba(0,0,0,.5); }
.feature-card:hover::before { opacity: 1; }
.feature-card h3 { font-weight: 700; font-size: 1.05rem; margin-bottom: .35rem; position: relative; }
.feature-card p { font-size: .875rem; color: #64748b; line-height: 1.55; position: relative; }
.dark .feature-card p { color: #94a3b8; }
.feature-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .75rem;
  display: grid; place-items: center; font-size: 1.1rem;
  margin-bottom: .85rem; position: relative;
}

/* =================== Timetable grid =================== */

#timetable {
  display: grid;
  grid-template-columns: 90px repeat(var(--days, 5), minmax(140px, 1fr));
  gap: 1px;
  background: #e2e8f0;
}
.dark #timetable { background: #1e293b; }

/* Header row */
.tt-corner, .tt-day-head {
  background: #f8fafc;
  padding: .7rem .5rem;
  font-weight: 700;
  font-size: .8rem;
  text-align: center;
  color: #475569;
  position: sticky; top: 0; z-index: 2;
}
.dark .tt-corner, .dark .tt-day-head { background: #0b1220; color: #cbd5e1; }
.tt-corner { text-align: left; padding-left: .8rem; color: #94a3b8; font-weight: 600; }
.tt-day-head.today { color: var(--brand-600); }
.dark .tt-day-head.today { color: #c7d2fe; }
.tt-day-head.today::after {
  content: ""; display: block; width: 1.5rem; height: 2px; margin: .25rem auto 0;
  background: var(--brand); border-radius: 9999px;
}

/* Time slot label */
.tt-time {
  background: #f8fafc;
  padding: .5rem .5rem;
  font-size: .7rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .15rem;
  position: sticky; left: 0; z-index: 1;
}
.dark .tt-time { background: #0b1220; color: #94a3b8; }
.tt-time .period-num { font-size: .65rem; opacity: .6; }

/* Cells */
.tt-cell {
  background: #fff;
  min-height: 78px;
  padding: .35rem;
  position: relative;
  cursor: pointer;
}
.dark .tt-cell { background: #0f172a; }
.tt-cell:hover { background: #f8fafc; }
.dark .tt-cell:hover { background: #16203a; }
.tt-cell.empty::before {
  content: "+"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.25rem; color: #cbd5e1; opacity: 0; transition: opacity .15s ease;
  font-weight: 300;
}
.dark .tt-cell.empty::before { color: #334155; }
.tt-cell.empty:hover::before { opacity: 1; }
.tt-cell.drag-over { outline: 2px dashed var(--brand); outline-offset: -3px; background: #eef2ff; }
.dark .tt-cell.drag-over { background: #1e1b4b; }

/* Entry block inside cell */
.tt-entry {
  border-radius: .55rem;
  padding: .4rem .5rem;
  font-size: .75rem;
  height: 100%;
  display: flex; flex-direction: column; gap: .1rem;
  cursor: grab;
  position: relative;
  border-left: 3px solid currentColor;
  background: var(--entry-bg, #f1f5f9);
  color: var(--entry-color, #1e293b);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tt-entry:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(15,23,42,.25); }
.tt-entry:active { cursor: grabbing; }
.tt-entry .tt-subject { font-weight: 700; line-height: 1.15; word-break: break-word; }
.tt-entry .tt-meta { font-size: .65rem; opacity: .8; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.tt-entry .tt-meta span { display: inline-flex; align-items: center; gap: .2rem; }
.tt-entry .tt-notes { font-size: .65rem; opacity: .7; font-style: italic; margin-top: .15rem; }
.tt-entry .tt-delete {
  position: absolute; top: .2rem; right: .2rem;
  width: 1.1rem; height: 1.1rem; border-radius: .3rem;
  display: none; place-items: center;
  background: rgba(15,23,42,.55); color: #fff; font-size: .6rem;
}
.tt-entry:hover .tt-delete { display: grid; }
.tt-entry .tt-delete:hover { background: rgba(220,38,38,.85); }

/* Conflict highlight */
.tt-entry.conflict { animation: pulseConflict 1.6s ease-in-out infinite; }
@keyframes pulseConflict {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%     { box-shadow: 0 0 0 4px rgba(220,38,38,.35); }
}

/* Empty slot soft highlight (alternating) */
.tt-cell:nth-child(odd) { background: #fcfcfd; }
.dark .tt-cell:nth-child(odd) { background: #0c1424; }

/* Search filter dim */
.tt-entry.dimmed { opacity: .2; filter: grayscale(.6); }

/* =================== Day toggle chips =================== */
.day-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .55rem; border-radius: 9999px;
  font-size: .7rem; font-weight: 600;
  background: #f1f5f9; color: #64748b;
  cursor: pointer; user-select: none;
  transition: all .15s ease;
}
.dark .day-chip { background: #1e293b; color: #94a3b8; }
.day-chip.active { background: var(--brand); color: #fff; }
.day-chip:hover { transform: translateY(-1px); }

/* =================== Color palette swatches =================== */
.color-swatch {
  width: 1.6rem; height: 1.6rem; border-radius: .45rem;
  cursor: pointer; position: relative;
  border: 2px solid transparent;
  transition: transform .12s ease;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { border-color: #0f172a; box-shadow: 0 0 0 2px #fff inset; }
.dark .color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px #0f172a inset; }
.color-swatch.selected::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: .75rem; font-weight: 700;
}

/* Legend chip */
.legend-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 9999px;
  background: #f1f5f9; color: #475569;
  font-size: .7rem; font-weight: 600;
}
.dark .legend-chip { background: #1e293b; color: #cbd5e1; }
.legend-chip .dot { width: .6rem; height: .6rem; border-radius: 9999px; }

/* =================== Modals =================== */
.modal-enter { animation: modalIn .25s cubic-bezier(.22,1,.36,1); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =================== Toast =================== */
.toast {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-radius: .65rem;
  background: #fff; color: #1e293b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 15px 30px -10px rgba(15,23,42,.25);
  font-size: .825rem; font-weight: 500;
  animation: toastIn .25s cubic-bezier(.22,1,.36,1);
}
.dark .toast { background: #0f172a; color: #e2e8f0; border-color: #1e293b; }
.toast.success { border-left: 3px solid #10b981; }
.toast.error   { border-left: 3px solid #ef4444; }
.toast.info    { border-left: 3px solid var(--brand); }
.toast.warn    { border-left: 3px solid #f59e0b; }
.toast i { font-size: .95rem; }
.toast.success i { color: #10b981; }
.toast.error i   { color: #ef4444; }
.toast.info i    { color: var(--brand); }
.toast.warn i    { color: #f59e0b; }
.toast.leaving { animation: toastOut .25s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(40px); } }

/* =================== Accordion =================== */
.accordion-item {
  border: 1px solid #e2e8f0;
  border-radius: .85rem;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dark .accordion-item { background: #0f172a; border-color: #1e293b; }
.accordion-item:hover { border-color: #c7d2fe; }
.dark .accordion-item:hover { border-color: #4338ca; }
.accordion-header {
  width: 100%; text-align: left;
  padding: 1rem 1.15rem;
  font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer;
}
.accordion-icon { transition: transform .25s ease; color: var(--brand); }
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}
.accordion-body-inner { padding: 0 1.15rem 1.15rem; color: #64748b; font-size: .9rem; line-height: 1.6; }
.dark .accordion-body-inner { color: #94a3b8; }

/* =================== Template preview cards =================== */
.tpl-card {
  position: relative;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dark .tpl-card { background: #0f172a; border-color: #1e293b; }
.tpl-card:hover { transform: translateY(-4px); box-shadow: 0 20px 35px -15px rgba(15,23,42,.2); border-color: #c7d2fe; }
.dark .tpl-card:hover { border-color: #4338ca; }
.tpl-preview {
  height: 140px;
  padding: .75rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
}
.dark .tpl-preview { background: linear-gradient(135deg, #0b1220, #1e1b4b); }
.tpl-preview .tpl-cell { border-radius: .25rem; height: 100%; }

/* =================== Misc =================== */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: .5rem;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Fullscreen tweaks */
:fullscreen #timetableWrap { border-radius: 0; }
:fullscreen #timetable { min-width: 0; }

/* Print styles */
@media print {
  body { background: #fff !important; color: #000 !important; }
  header, footer, #builder .tool-btn, #builder .btn-primary, #builder .btn-secondary,
  #builder select, #builder input, .toast, #editModal, #shareModal, #newsletterForm,
  #statsBar, #saveBadge, .day-chip, #legend { display: none !important; }
  #timetableWrap { box-shadow: none !important; border: none !important; }
  #timetable { background: #fff !important; }
  .tt-cell, .tt-day-head, .tt-time, .tt-corner { background: #fff !important; color: #000 !important; border: 1px solid #ddd !important; }
  .tt-entry { box-shadow: none !important; }
  section { padding: 0 !important; }
  #builder { padding-top: 0 !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}