/* assets/style.css */
:root{--bg:#f5f2fa;--muted:#bdbfc7;--accent:#111}
*{box-sizing:border-box;font-family:Inter,system-ui,Arial}
html{margin:0;}body{margin:0;min-height:100vh;background:var(--bg);}
.header{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);z-index:40}
.logo{font-weight:700;font-size:24px;text-align:center;display:flex;}
.nav{display:flex;gap:8px;margin-left:16px}
.nav button{border:0;padding:10px 14px;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-weight:600}
.nav button.active{background:#fff;color:#000;box-shadow:0 4px 18px rgba(0,0,0,0.08)}
.container{padding-top:90px;padding-left:16px;padding-right:16px;display:flex;gap:16px}
.page{width:100%;min-height:calc(100vh - 110px);display:none}
.page.active{display:block}
.card{background:#fff;padding:14px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.row{display:flex;gap:12px}
.col{flex:1}
.side{width:320px}
.right{width:360px}
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th,.table td{padding:8px;border-bottom:1px solid #eee;text-align:left}
.small{font-size:13px;color:#666}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;border:0;background:#111;color:#fff;cursor:pointer}
.form{display:flex;flex-direction:column;gap:8px}
.input{padding:8px;border-radius:8px;border:1px solid #ddd}
.left-nav{width:300px;max-height:100vh;overflow:auto}
.semester{background:#fff;margin-bottom:8px;border-radius:8px;padding:8px}
.course-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:6px;margin-top:6px}
.course-name{padding:8px;border-radius:6px}
.grade-badge{min-width:48px;text-align:center;padding:6px;border-radius:6px;font-weight:700}
.milestone-table{width:100%;border-collapse:collapse}
.milestone-table th,.milestone-table td{padding:6px;border-bottom:1px solid #eee; text-align: center;}
.milestone-input {
	width: 70px;
	padding: 4px 6px;
}
.gmin, .gmax {
	width: 70px;
}
.threshold-table input {
    width: 70px;
}
.kpi{background:#fff;padding:10px;border-radius:8px;margin-top:8px}
.circle{width:120px;height:120px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:700;margin:12px auto;flex-shrink:0;font-size:60px;}
#thresholdAreaContainer {
    min-width: 380px !important;
	margin-left: 60px !important;
}

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

.course-top-stats {
  display:flex;
  align-items:center;
  gap:15px;
}

.course-top-stats .pts {
  font-size:14px;
  text-align:right;
}

.two-col-area {
  display:flex;
  gap:20px;
}

.two-col-area .card {
  flex:1;
}

/* Kisebb inputbox a ponthatár táblához */
#gradeTable input {
  width:70px;
  padding:4px;
}

/* Milestone ikonok */
.milestone-actions {
  display:flex;
  gap:6px;
}

.milestone-actions i {
  cursor:pointer;
  font-size:18px;
}

.hidden{ display:none;}

/* stretch side/center panes to viewport height minus header */
.left-nav, .col, #rightSidebar, .left-nav.card, .col.card, #rightSidebar.card {
  height: auto; min-height: calc(100vh - 500px); /* header + paddings: finomhangold szükség szerint */
}

/* Fejléc – felhasználónév / jelszó / kijelentkezés jobbra igazítva */
.user-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

#userLabel {
  font-weight: 600;
}

/* Ponttáblázat – fix oldalsáv szélesség desktopon */
#points .row {
  align-items: flex-start;
}

#points .left-nav,
#points #rightSidebar {
  overflow: auto;
}

#points.has-course .row {
  align-items: stretch;
}

#points.has-course .left-nav,
#points.has-course #rightSidebar {
  max-height: none;
}

#points .col.card {
  flex: 1 1 auto;    /* középső panel rugalmas */
  min-width: 0;      /* ne okozzon overflow-ot */
}

/* Enroll oldal – félévek táblázat kártya ne nőjön végtelenre */
#enroll .col {
  height: auto;
  min-height: calc(100vh - 500px);
  overflow-y: auto;
  gap: 12px;
}
#semesterTable {
  max-height: 360px;     /* állítsd ízlés szerint */
  overflow-y: auto;
  display: block;
}
#semesterTable thead, #semesterTable tbody, #semesterTable tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

body.no-page-scroll {
  overflow: hidden;
}

#points .left-nav::-webkit-scrollbar,
#points #rightSidebar::-webkit-scrollbar {
  width: 10px;
}

#points .left-nav::-webkit-scrollbar-track,
#points #rightSidebar::-webkit-scrollbar-track {
  background: transparent;
}

#points .left-nav::-webkit-scrollbar-thumb,
#points #rightSidebar::-webkit-scrollbar-thumb {
  background: rgba(120,120,120,0.45);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Dark mode finomhangolás */
body.dark-mode #points .left-nav::-webkit-scrollbar-thumb,
body.dark-mode #points #rightSidebar::-webkit-scrollbar-thumb {
  background: rgba(200,200,200,0.25);
}

/* === Scrollbar styling (Firefox) === */
#points .left-nav,
#points #rightSidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,120,0.45) transparent;
}

body.dark-mode #points .left-nav,
body.dark-mode #points #rightSidebar {
  scrollbar-color: rgba(200,200,200,0.25) transparent;
}

/* Felső nav gombok – finom hover/active animáció */
.nav button {
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.nav button:hover {
  background:#fff;
  color:#000;
  box-shadow:0 4px 18px rgba(0,0,0,0.12);
  transform:translateY(-1px);
}

/* Félév doboz fejléce */
.left-nav .semester h4 {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 4px;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}

.left-nav .semester h4:hover {
  background:#eef2ff;
  color:#111827;
}

/* Kurzus itemek */
.course-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 8px;
  border-radius:6px;
  margin-bottom:4px;
  cursor:pointer;
  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.course-item:hover {
  background:#f5f5ff;
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(15,23,42,0.08);
}

/* Aktív (kiválasztott) kurzus */
.course-item.active {
  background:#111827;
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}

.course-item.active .course-name {
  color:#e5e7eb;
}

.date-popup {
  position:fixed;
  z-index:50;
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(15,23,42,0.18);
  padding:8px;
  min-width:180px;
}
.date-popup .input {
  width:100%;
}
.calendar-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
#calendarGrid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}

#calendar .row {
  align-items: flex-start;
}

#calendar .col {
  flex: 0 0 66.666%;
  max-width: 66.666%;
}

#calendar .right-nav {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position:relative;
  min-height:60px;
  padding:4px;
  border-radius:6px;
  background:#f9fafb;
  font-size:0.85rem;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
}
.cal-day span.day-num {
  font-weight:600;
}
.cal-day:hover {
  background:#eef2ff;
  transform:translateY(-1px);
}
.cal-day.has-task::after {
  content: none;
}
.cal-day.today {
  background: #32c8aa;
}

.cal-day.past-day span.day-num {
  color: #9e9e9e;
}

.task-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  margin-top: 2px;
}

.task-dot {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #e53935;
}

.task-dot.has-score {
  background: #3ca0f0;
}

.calendar-task-card.has-score {
  background: #3ca0f0;
  color: #fff;
}

.calendar-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-task-main {
  min-width: 0;
}

.calendar-task-score {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

/* naptár feladatkártyák halvány szürke háttérrel */
.calendar-task-card {
  background: #c3c3c3;
}
.cal-day.other-month {
  opacity:0.35;
}
/* határidő felirat a ponttáblázatban */
.ms-date-label {
  margin-left: 4px;
  font-size: 0.8rem;
  color: #555;
}
.auth-screen {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0f172a;
  z-index:50;
}
.auth-card {
  max-width:320px;
  width:90%;
}
.auth-form label {
  display:block;
  margin-bottom:8px;
}
.auth-tabs {
  display:flex;
  gap:6px;
  margin-bottom:10px;
}
.auth-tabs .btn.small {
  flex:1 1 0;
}
/* Mindig látható lábléc */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 0.85rem;
  z-index: 35;
}

.footer-right a {
  color: var(--accent);
  text-decoration: none;
}
.footer-right a:hover {
  text-decoration: underline;
}

/* hogy a lábléc ne takarja el a tartalmat */
main.container {
  padding-bottom: 56px;
}

.hidden { display:none !important; }

body.dark-mode {
  --bg: #020617;
  background: var(--bg);
  color: #e5e7eb;
}

body.dark-mode .card,
body.dark-mode .auth-card {
  background: #0b1120;
  color: #e5e7eb;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

body.dark-mode .header.card {
  background: rgba(15, 23, 42, 0.95);
}

body.dark-mode .nav button {
  color: #9ca3af;
}

body.dark-mode .nav button.active {
  background: #111827;
  color: #f9fafb;
}

body.dark-mode .input {
  background: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

body.dark-mode .input::placeholder {
  color: #6b7280;
}

body.dark-mode .table th,
body.dark-mode .table td {
  border-color: #1f2937;
}

body.dark-mode .semester,
body.dark-mode .course-item {
  background: #020617;
}

body.dark-mode .course-item.active {
  background:#fff;
  color:#000;
}

body.dark-mode .course-item.active .course-name {
  color:#000;
}

body.dark-mode .footer {
  background: #020617;
  color: #9ca3af;
}

body.dark-mode .auth-screen {
  background: #020617;
}

body.dark-mode .auth-card {
  background: #0b1120;
}

body.dark-mode .cal-day {
  background:#020617;
  border:1px solid #1f2937;
  color:#e5e7eb;
}

body.dark-mode .cal-day:hover {
  background:#111827;
}

body.dark-mode .cal-day.today {
  background:#22c55e;
  color:#022c22;
}

body.dark-mode .calendar-task-card {
  background:#111827;
}

body.dark-mode .task-dot.has-score {
  background: #3ca0f0;
  color: black;
}

body.dark-mode .calendar-task-card.has-score {
  background: #3ca0f0;
  color: black;
}

body.dark-mode .cal-day.past-day span.day-num {
  color:#6b7280;
}

#themeToggle {
  min-width: 96px;
}

body:not(.dark-mode) #themeToggle {
  background: #000;
  color: #fff;
}

body.dark-mode #themeToggle {
  background: #fff;
  color: #000;
}

@media(max-width:1000px){.container{flex-direction:column}.side,.right{width:100%}}

/* Általános mobilbarátítás */
@media (max-width: 1000px) {
  .container {
    flex-direction: column;
    padding-left:8px;
    padding-right:8px;
  }

  .row {
    flex-direction: column;
  }

  .left-nav,
  #rightSidebar,
  .right-nav {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .header {
    padding:8px 10px;
  }

  .nav {
    flex-wrap: wrap;
    justify-content:center;
    margin-left:0;
  }

  .nav button {
    flex:0 1 auto;
  }
}

@media (max-width: 600px) {
  .header {
    flex-wrap: wrap;
    height:auto;
    gap:8px;
  }

  .logo img {
    height:40px;
  }

  .nav {
    width:100%;
    margin-top:4px;
  }

  .card {
    padding:10px;
  }

  table {
    font-size:0.9rem;
  }

  .course-item {
    flex-direction:column;
    align-items:flex-start;
  }
}