:root {
  --ink: #111827;
  --paper: #f9fafb;
  --card: #ffffff;
  --accent: #0058a0;
  --accent-soft: #e6f0fa;
  --success: #198754;
  --warn: #fd7e14;
  --danger: #d63384;
  --border-width: 3px;
  --shadow-offset: 8px;
}

/* Dark Mode Variables */
.dark {
  --ink: #ffffff;
  --paper: #111827;
  --card: #1f2937;
  --accent-soft: #1e3a8a;
  --accent: #60a5fa;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  transition: background-color 0.3s, color 0.3s;
  line-height: 1.5;
}

main {
  max-width: 1400px; /* Better than 98vw for ultra-wide monitors */
  width: 95%;
  margin: 2rem auto;
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .module-selector-grid {
    display: grid;
    grid-template-columns: 4fr 1.2fr;
    gap: 2rem;
    align-items: flex-start;
  }
  
  aside.card {
    position: sticky;
    top: 2rem;
  }
}

header {
    max-width: 1400px; 
    width: 95%;    
    margin: 0 auto;    /* Centers it */    
  border-bottom: 4px solid var(--ink);
  padding: 2rem 0;   /* Top/Bottom padding only */
  padding-left: 1.5rem;  /* Match card padding */
  /* padding-bottom: 1.5rem; */
  margin-bottom: 2rem;
}

header h1 {
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin: 0;
  text-transform: uppercase;
}


.card {
  background: var(--card);
  border: var(--border-width) solid var(--ink);
  padding: 1.5rem;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
}

/* Module Grid */
.module-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

button.module {
  all: unset; /* Reset button defaults */
  display: block;
  position: relative;
  background: var(--card);
  border: var(--border-width) solid var(--ink);
  padding: 0.75rem;
  height: 120px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  overflow: hidden;
}

button.module:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

button.module:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--ink);
}

button.module.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Module Typography */
.module-title {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.module-ects-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 6px;
  border: 2px solid var(--ink);
  background: var(--card);
}

.module-term-label {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.8;
}

.progress-container {
  background: #e5e7eb;
  border: 2px solid var(--ink);
  height: 1rem;
  margin: 1rem 0;
}

.progress-bar {
  height: 100%;
  background: var(--success);
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.module-group h3 {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 4px dashed var(--ink);
  font-size: 1.75rem;          /* Larger size */
  font-weight: 900;             /* Maximum thickness */
}



.module-group h3 {
  
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;      /* Tighter tracking for that 'heavy' look */
  line-height: 1.1;
  color: var(--ink);
}

.dark .module-group h3, 
.dark .module-group h3 span {
  color: #ffffff;
} */


footer {
  max-width: 1400px; 
  width: 95%;    
  margin: 0 auto !important;
  border-top: 4px solid var(--ink);
  padding: 2rem 0;
  margin-top: 2rem;
  text-align: center !important;
}

footer div {
  text-align: center !important;
}

footer p {
  margin: 0;
}



.dark a { color: var(--ink); }
.dark .progress-container { background: #374151; }

@media (max-width: 600px) {
  .module-container {
    grid-template-columns: 1fr 1fr;
  }
}


/* Base styling for all utility buttons */
.actions button,
.toggle-btn {
  appearance: none;
  background: var(--card);
  border: var(--border-width) solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;           /* Heavy weight to match titles */
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.25rem;
  /* margin-bottom: 0.1rem; */
  
  /* The Hard Shadow */
  box-shadow: 4px 4px 0 var(--ink); 
  transition: all 0.1s ease;
  position: relative;
}

/* Hover Effect: Moves slightly */
.actions button:hover,
.toggle-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}

/* Active/Click Effect: Button 'depresses' into the shadow */
.actions button:active,
.toggle-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* Specific styling for the Active Toggle (Module vs Calendar) */
.toggle-btn.active {
  background: var(--ink);
  color: var(--card); /* Inverts colors: Black background, White text */
  box-shadow: none;
  transform: translate(4px, 4px); /* Stays in the 'pressed' position */
}

/* Dark Mode adjustment for Active Toggle */
.dark .toggle-btn.active {
  background: #ffffff;
  color: #1f2937;
}


#degree-toggle-btn {
  background: var(--accent-soft); /* Light blue highlight */
  border: 4px solid var(--ink);
  padding: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 6px 6px 0px var(--ink);
  transition: all 0.1s ease;
}

#degree-toggle-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px var(--ink);
}

#degree-toggle-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px var(--ink);
}

#degree-text {
  color: var(--ink);
}

.dark #degree-text {
  color: #fff;
}

/* Remove the line and top spacing from the first module group */
.module-group:first-of-type h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}