/*
  Stylesheet for the freshcarry academic dashboard.
  The design emphasises clarity, generous white space and a modular layout. It
  incorporates modern web design trends such as bento‑style content sections,
  expressive typography, negative space and bold, saturated colour
  accents. Colours can be adjusted via CSS variables to
  suit personal taste or institutional branding.
*/

:root {
  /* Updated colour palette for a sleek black and gold theme */
  --primary-color: #D4AF37; /* metallic gold */
  --secondary-color: #8A6D1D; /* dark gold accent */
  --background-color: #0e0e0e; /* near black background */
  --section-background: #1a1a1a; /* dark section backgrounds */
  --text-color: #f5f5f5; /* light text colour */
}

/* Global resets and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

/* Header and navigation */
header#hero {
  height: 60vh;
  background-size: cover;
  background-position: center;
  position: relative;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

header#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* ensure hero content sits above overlay */
header#hero > * {
  position: relative;
  z-index: 2;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(30, 30, 30, 0.8);
  z-index: 3;
}

.nav .logo {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.3s;
}

.nav-links li a:hover {
  background: rgba(255, 255, 255, 0.3);
}

.hero-content {
  text-align: center;
  margin-top: auto;
  margin-bottom: 3rem;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.2rem;
  margin: 0;
}

/* Section styling */
.section {
  padding: 4rem 2rem;
  margin-top: 2rem;
  background: var(--section-background);
  border-radius: 12px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

/* Grade dashboard */
.grade-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.grade-inputs label {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  font-weight: 500;
}

.grade-inputs input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  margin-top: 0.25rem;
  font-size: 1rem;
  background: #2a2a2a;
  color: var(--text-color);
}

#gradeChart {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

#averageDisplay {
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Forms */
form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

form input,
form textarea {
  flex: 1 1 200px;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 1rem;
  background: #2a2a2a;
  color: var(--text-color);
}

form select {
  flex: 1 1 200px;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 1rem;
  background: #2a2a2a;
  color: var(--text-color);
}

form button {
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  flex: 0 0 auto;
}

form button:hover {
  background: var(--secondary-color);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th,
td {
  padding: 0.75rem;
  text-align: left;
  border: 1px solid #ddd;
  color: var(--text-color);
}

th {
  background: var(--secondary-color);
  color: var(--section-background);
  font-weight: 600;
}

tr:nth-child(even) td {
  background: #222222;
}

/* Manual textarea */
#manual textarea {
  width: 100%;
  resize: vertical;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

/* Manual summary callout */
.manual-summary {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #fafafa;
  border-left: 4px solid var(--secondary-color);
  border-radius: 6px;
}

.manual-summary h3 {
  margin-top: 0;
  color: var(--primary-color);
}

.manual-summary ul {
  padding-left: 1.25rem;
}

.manual-summary li {
  margin-bottom: 0.5rem;
}

.manual-summary a {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Syllabus summary */
.syllabus-summary {
  margin-top: 1rem;
}

.syllabus-summary h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.syllabus-summary ul {
  padding-left: 1.25rem;
  margin: 0;
  list-style-type: disc;
}

.syllabus-summary li {
  margin-bottom: 0.4rem;
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background: #f1f1f1;
  color: #555;
  margin-top: 2rem;
  font-size: 0.9rem;
}

/* Mission section callout */
.mission-section p {
  margin-top: 1rem;
  background: #fafafa;
  border-left: 4px solid var(--secondary-color);
  padding: 1rem;
  border-radius: 6px;
}

/* School logo */
.school-logo {
  height: 40px;
  width: auto;
  margin-right: 0.5rem;
}

/* Task list styling */
#tasksList {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: #fafafa;
}

.task-item.completed {
  opacity: 0.6;
  text-decoration: line-through;
}

.task-info {
  flex: 1;
}

.task-actions button {
  background: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.task-actions button:hover {
  background: var(--primary-color);
}

/* Pomodoro timer styling */
.pomodoro-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

#timerDisplay {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
}

.timer-controls button {
  background: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin: 0 0.25rem;
  cursor: pointer;
}

.timer-controls button:hover {
  background: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 2rem;
    top: 3.5rem;
    background: rgba(0, 0, 0, 0.8);
    padding: 1rem 2rem;
    border-radius: 8px;
    z-index: 1000;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
}

/* Mobile nav toggle button */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: '';
  display: block;
  width: 25px;
  height: 3px;
  background: #ffffff;
  margin: 5px 0;
  transition: transform 0.3s ease;
}

.nav-links.open {
  display: flex;
}

/* Summary card styling */
.summary-card {
  background: var(--primary-color);
  color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.summary-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.average-value {
  font-size: 2rem;
  font-weight: 700;
}

.average-value.avg-good {
  color: #38a169; /* green */
}
.average-value.avg-ok {
  color: #d69e2e; /* yellow */
}
.average-value.avg-bad {
  color: #e53e3e; /* red */
}

/* Remove button styling */
button.remove-course,
button.remove-event {
  background: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.3s;
}

button.remove-course:hover,
button.remove-event:hover {
  background: var(--primary-color);
}

/* Tools section */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.tool-card {
  background: #fafafa;
  border-left: 4px solid var(--primary-color);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tool-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}
.tool-card p {
  flex: 1;
  margin-bottom: 0.5rem;
}
.tool-card a {
  align-self: flex-start;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}
.tool-card a:hover {
  text-decoration: underline;
}

/* Flashcards section */
#flashcardsList {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.flashcard-item {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flashcard-content {
  flex: 1;
}
.flashcard-actions button {
  background: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-left: 0.5rem;
  cursor: pointer;
}
.flashcard-actions button:hover {
  background: #d9534f;
}

.quiz-area {
  margin-top: 1rem;
  text-align: center;
}
.quiz-card {
  margin-top: 1rem;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}
.quiz-buttons {
  margin-top: 0.5rem;
}
.quiz-buttons button {
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  padding: 0.4rem 0.8rem;
  margin: 0 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.quiz-buttons button:hover {
  background: var(--secondary-color);
}
.quiz-card input {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
#quizFeedback {
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Calendar section */
.calendar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.calendar-controls button {
  background: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
.calendar-controls button:hover {
  background: var(--primary-color);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.calendar-header {
  font-weight: 600;
  text-align: center;
  padding: 0.5rem 0;
  background: var(--primary-color);
  color: #ffffff;
  border-radius: 4px;
}
.calendar-cell {
  min-height: 80px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0.5rem;
  position: relative;
  cursor: pointer;
}
.calendar-cell span.date-number {
  font-weight: 600;
}
.calendar-cell.event {
  background: rgba(0, 85, 164, 0.15);
  border: 1px solid var(--primary-color);
}
.calendar-cell:hover {
  background: #f0f4fa;
}
.event-details {
  margin-top: 1rem;
  padding: 1rem;
  background: #fafafa;
  border-left: 4px solid var(--secondary-color);
  border-radius: 6px;
}
.event-details h3 {
  margin-top: 0;
  color: var(--primary-color);
}

/* Grade predictor */
#predictor label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
#predictor input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 0.5rem;
  font-size: 1rem;
}
#predictor button {
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}
#predictor button:hover {
  background: var(--secondary-color);
}
#predictorResult {
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Compliance checklist */
.compliance-item {
  margin-bottom: 0.5rem;
}
#complianceResult {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* Layout for compliance form */
#complianceForm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
}
#complianceForm .compliance-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#complianceForm button {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Profile summary */
.profile-summary {
  margin-top: 1rem;
  padding: 1rem;
  background: #fafafa;
  border-left: 4px solid var(--secondary-color);
  border-radius: 6px;
  color: #333;
}

/* Contacts section */
#contactsTable .remove-contact {
  background: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
#contactsTable .remove-contact:hover {
  background: var(--primary-color);
}

/* Quote section */
#quoteDisplay {
  font-style: italic;
  font-size: 1.2rem;
  margin-top: 1rem;
  color: var(--secondary-color);
}