/*******************************************************************************
 * ROOT VARIABLES
 ******************************************************************************/
:root {
  /* Layout variables */
  --columns-per-row: 16;
  --rect-gap: 6px;
  --week-gap: 2px;
  --week-size: 4px;
  --month-gap: 10px;
  --month-cell-width: calc(calc(calc(var(--week-size) * 4) + calc(var(--week-gap) * 4) * 4));
  --calendar-width: calc(calc(var(--month-cell-width) * var(--columns-per-row)) - calc(var(--month-cell-width) * 3));
  
  /* Alternative layout variables */
  --rows-per-rect: 10;
  --cols-per-rect: 26;
  --decade-gap: 20px;
  --rect-block-gap: 10px;
  
  /* Spacing variables */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 25px;
  
  /* Typography variables */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 50px;
  
  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  
  /* Colors - Dark theme (default) */
  --color-background: #0d1117;
  --color-dark-gray: #c9d1d9;
  --color-dark-gray-filled: #c9d1d9;
  --color-black: #fff;
  --color-white: #0d1117;
  --color-text: #c9d1d9;
  
  /* UI Element Colors */
  --color-option-bg: #2a2a2a;
  --color-input-bg: #333;
  --color-input-border: #444;
  --color-container-bg: #1a1a1a;
  --color-button-bg: #555;
  --color-button-text: #fff;
  --color-accent: #58a6ff;
  --color-card-shadow: rgba(0, 0, 0, 0.4);
  --color-hover-bg: #2a2a2a;
  --color-border-light: #30363d;
  
  /* Period colors */
  --color-academic: #4285f4;
  --color-parents: #ea4335;
  --color-siblings: #fbbc05;
  --color-grandparents: #34a853;
  --color-work: #673ab7;
  --color-special-event: #ff5722;
  --color-birthday: #e91e63;
  
  /* Event colors */
  --color-event-blue: #18aedb;
  --color-event-red: #f8312f;
  --color-event-yellow: #f8f806;
  --color-event-green: #3ef806;
  --color-event-dark: #222222;
  --color-event-orange: #f88b06;
  
  /* Animation variables */
  --transition-fast: 150ms;
  --transition-medium: 300ms;
  --transition-slow: 500ms;
  
  /* Box shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 10px var(--color-card-shadow);
}

/* Light theme colors - Applied with prefers-color-scheme media query */
@media (prefers-color-scheme: light) {
  :root {
    /* Colors - Light theme */
    --color-background: #ffffff;
    --color-dark-gray: #555555;
    --color-dark-gray-filled: #555555;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-text: #333333;
    
    /* UI Element Colors - Light theme */
    --color-option-bg: #f5f5f5;
    --color-input-bg: #ffffff;
    --color-input-border: #cccccc;
    --color-container-bg: #f8f8f8;
    --color-button-bg: #e0e0e0;
    --color-button-text: #333333;
    --color-accent: #0366d6;
    --color-card-shadow: rgba(0, 0, 0, 0.1);
    --color-hover-bg: #eeeeee;
    --color-border-light: #dddddd;
    
    /* Period colors remain the same for consistency */
    
    /* Box shadows - Light theme */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.12);
  }
}

/*******************************************************************************
 * BASIC STYLES
 ******************************************************************************/
/* Base styles */
body {
  background-color: var(--color-background);
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--color-text);
}

/* Global transitions for smooth interactions */
body, .calendar, .options-container, input, select, button, .event-item,
.modifier-item, .period-item, .event-item, .birthday-highlight, .legend-item {
  transition: all 0.3s ease;
}

/* Typography */
.title {
  color: var(--color-dark-gray);
  font-size: 50px;
  font-weight: 700;
  text-align: center;
}

/*******************************************************************************
 * LAYOUT AND CONTAINERS
 ******************************************************************************/
/* Main content containers */
.wrapper, .quote {
  font-size: 12px;
  margin: 25px auto;
  max-width: var(--calendar-width);
  padding: 0 2rem;
  width: calc(100% - 4rem);
}

/* Statistics container styling */
.stats.wrapper {
  margin: 12px auto;
  opacity: 0.7;
  padding: 0;
  text-align: right;
  transform: translateX(5px);
}

.weeksleft-label, .daysleft-label, .yearsleft-label {
  margin: 0.3em 0;
}

/*******************************************************************************
 * CALENDAR GRID LAYOUT
 ******************************************************************************/
/* Main calendar grid */
.calendar {
  display: grid;
  grid-gap: var(--month-gap);
  grid-template-columns: repeat(var(--columns-per-row), auto);
  width: 100%;
  justify-content: center;
  margin: auto;
}

/* Year cell container */
.year-cell {
  display: grid;
  gap: var(--week-gap);
}

/* Year wrapper with positioning context */
.year-wrapper {
  position: relative;
  z-index: 0;
}

/* Increase z-index on hover to show tooltips above other content */
.year-wrapper:hover {
  z-index: 99999999;
}

/* Month cells within year */
.month-cell {
  display: grid;
  gap: var(--week-gap);
  grid-template-columns: repeat(4, calc(var(--week-size) + var(--week-gap)));
  max-width: var(--month-cell-width);
  transition: all 150ms;
}

/* Year label typography */
.year-label {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 4px;
  margin-top: 0;
  text-align: center;
}

/*******************************************************************************
 * WEEK CELLS - VISUAL STATES
 ******************************************************************************/
/* Basic week cell styling */
.week-cell {
  align-items: center;
  border: 1px solid var(--color-dark-gray);
  display: inline-flex;
  height: var(--week-size);
  justify-content: center;
  width: var(--week-size);
}

/* Filled week cells (past dates) */
.week-cell.filled {
  background-color: var(--color-dark-gray-filled);
  border-color: var(--color-dark-gray-filled);
}

/* Unfilled week cells (future dates) */
.week-cell:not(.filled) {
  opacity: 0.8;
}

/* Hidden weeks (before birth date) */
.week-cell.invisible,
.invisible {
  background-color: var(--color-background) !important;
  border: 1px solid var(--color-background) !important;
}

/* Week cells with tooltips */
.week-cell.has-tooltip {
  border-color: currentColor;
  border-radius: 0;
  font-size: 7px;
  position: relative;
}

/*******************************************************************************
 * LIFE PERIOD STYLES
 ******************************************************************************/
/* Common styles for all period types */
.week-cell.academic,
.week-cell.parents,
.week-cell.siblings,
.week-cell.grandparents,
.week-cell.work,
.week-cell.birthday {
  border-width: 1px !important;
}

/* Academic period */
.week-cell.academic {
  border-color: var(--color-academic) !important;
}

/* Parents period */
.week-cell.parents {
  border-color: var(--color-parents) !important;
}

/* Siblings period */
.week-cell.siblings {
  border-color: var(--color-siblings) !important;
}

/* Grandparents period */
.week-cell.grandparents {
  border-color: var(--color-grandparents) !important;
}

/* Work period */
.week-cell.work {
  border-color: var(--color-work) !important;
}

/* Birthday weeks */
.week-cell.birthday {
  border-color: var(--color-birthday) !important;
}

/* Special events */
.week-cell.event {
  background-color: var(--color-special-event) !important;
  border-color: var(--color-special-event) !important;
}

/* Outline style for special cases */
.week-cell.outline {
  background-color: transparent !important;
  border-width: 2px !important;
}

/*******************************************************************************
 * TOOLTIPS
 ******************************************************************************/
/* Basic tooltip setup */
[data-tooltip] {
  cursor: default;
  position: relative;
}

/* Change cursor on hover */
[data-tooltip]:hover {
  cursor: help;
}

/* Tooltip content bubble */
[data-tooltip]:hover::before {
  animation: fade-in 150ms ease;
  background-color: var(--color-black);
  border-radius: 4px;
  bottom: calc(100% + 10px);
  color: var(--color-white);
  content: attr(data-tooltip);
  display: block;
  font-size: 12px;
  left: 50%;
  max-width: 170px;
  min-width: 60px;
  padding: 6px;
  position: absolute;
  text-align: center;
  transform: translate(-50%);
  width: max-content;
  z-index: 20000;
}

/* Tooltip arrow */
[data-tooltip]:hover::after {
  animation: fade-in 150ms ease;
  border: 1px solid var(--color-black);
  border-color: var(--color-black) transparent transparent;
  border-width: 4px 6px 0;
  bottom: calc(100% + 6px);
  content: "";
  display: block;
  height: 0;
  left: 50%;
  margin-left: -6px;
  position: absolute;
  width: 0;
  z-index: 1;
}

/*******************************************************************************
 * ANIMATIONS
 ******************************************************************************/
/* Fade-in animation for tooltips */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*******************************************************************************
 * OPTIONS PANEL
 ******************************************************************************/
/* Options panel container */
.options-panel {
  margin-bottom: 20px;
}

/* Options expanded container */
.options-container {
  background-color: var(--color-container-bg);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  padding: 20px;
  max-height: 2000px; /* Large enough for all content */
  opacity: 1;
  overflow: hidden;
  transform-origin: top;
  transform: scaleY(1);
  transition: all 0.5s ease;
}

/* Collapsed options container */
.options-container.hidden {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: none;
  transform: scaleY(0);
}

/* Hidden elements */
.hidden {
  display: none;
}

/*******************************************************************************
 * FORM ELEMENTS
 ******************************************************************************/
/* Row of form elements */
.form-row {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

/* Form groups within a row */
.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
  margin-bottom: var(--spacing-sm);
}

/* Standard form group */
.form-group {
  margin-bottom: 15px;
}

/* Form labels */
.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}

/* Form inputs styling */
.form-group input, 
#add-event-form input, 
#event-frequency {
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  color: var(--color-text);
  border-radius: 4px;
  padding: 8px;
  margin-right: 5px;
  margin-bottom: 10px;
}

#event-name {
  flex: 1;
}

/* Add event form responsiveness */
#add-event-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

#add-event-form input,
#event-frequency {
  min-width: 120px;
}

@media (max-width: 400px) {
  #add-event-form {
    flex-direction: column;
  }
  
  #add-event-btn {
    width: 97%;
    /* margin-top: var(--spacing-xs); */
  }
}

/*******************************************************************************
 * BUTTONS
 ******************************************************************************/
/* General button styles */
.toggle-btn, .primary-btn {
  background-color: var(--color-button-bg);
  border: none;
  border-radius: 4px;
  color: var(--color-button-text);
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

/* Button hover effects */
.toggle-btn:hover, .primary-btn:hover {
  background-color: var(--color-accent);
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Add event button special styling */
#add-event-btn {
  grid-column: 2;
  background-color: var(--color-special-event);
  border: 1px solid #ff1400;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  margin-bottom: 10px;
}

/*******************************************************************************
 * LIFE MODIFIERS SECTION
 ******************************************************************************/
/* Life modifiers container */
.life-expectancy-modifiers {
  border-top: 1px solid var(--color-border-light);
  margin-top: 20px;
  padding-top: 15px;
}

/* Life modifiers grid layout */
.life-expectancy-modifiers .period-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

/* Standard period group layout */
.period-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px; /* gap: var(--spacing-md); */
  margin-top: 10px;
}

/* Checkbox wrapper for toggles */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Item cards for options */
.modifier-item, .period-item, .event-item, .birthday-highlight {
  background-color: var(--color-option-bg);
  border-radius: 8px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  height: fit-content;
}

/* No bottom margin variant for specific items */
.period-item.no-margin-bottom {
  margin-bottom: 0;
}

/* Remove margin for life expectancy modifier items */
.life-expectancy-modifiers .period-item {
  margin-bottom: 0;
}

/* Hover effect for option cards */
.modifier-item:hover, .period-item:hover, .birthday-highlight:hover {
  transform: translateY(-2px);
}

/* Value inputs for modifiers and periods */
.modifier-value, .period-value {
  margin-top: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

/* Range input rows */
.period-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

/* Number inputs in period settings */
.period-range input[type="number"] {
  width: 60px;
  flex-shrink: 0;
}

/* Responsive grid adjustments */
@media (max-width: 900px) {
  .life-expectancy-modifiers .period-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .life-expectancy-modifiers .period-group {
    grid-template-columns: 1fr;
  }
  
  .period-range {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .period-range label {
    margin-bottom: 4px;
  }
  
  .period-range input[type="number"] {
    /* width: 100%; */
    margin-bottom: var(--spacing-xs);
  }
}

/*******************************************************************************
 * EVENTS SECTION
 ******************************************************************************/
/* Add event form */
#add-event-form {
  margin-bottom: var(--spacing-md);
}

/* Event item in list */
.event-item {
  background-color: var(--color-option-bg);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 200px;
}

.event-frequency {
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

/* Event delete button */
.event-item button {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.event-item button:hover {
  background-color: #e53935;
}

@media (max-width: 400px) {
  .event-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .event-item button {
    align-self: flex-end;
  }
}


/*******************************************************************************
 * LEGEND
 ******************************************************************************/
/* Legend container */
.legend-container {
  background-color: var(--color-container-bg);
  border-radius: 8px;
  box-shadow: 0 2px 10px var(--color-card-shadow);
  padding: 20px;
  margin: 40px auto;
}

/* Legend title */
.legend-container h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  color: var(--color-text);
  font-weight: 600;
}

/* Legend items container */
.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Individual legend item */
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

/* Legend item hover effect */
.legend-item:hover {
  transform: translateY(-2px);
}

/* Legend color box */
.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--color-border-light);
}

/*******************************************************************************
 * FOOTER LINKS
 ******************************************************************************/
/* GitHub link wrapper */
.github-link-wrapper {
  margin: 0 auto 60px;
  max-width: var(--calendar-width);
  padding: 0 2rem;
  width: calc(100% - 4rem);
}

/* GitHub link styling */
.github-link-wrapper a {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  gap: 0.6rem;
  text-decoration: none;
}

/*******************************************************************************
 * ACCESSIBILITY
 ******************************************************************************/
/* Screen reader text - visually hidden but available to screen readers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/*******************************************************************************
 * PRINT STYLES
 ******************************************************************************/
/* Page size for printing */
@page {
  size: a4 portrait;
}

/* Print color adjustments */
@media print {
  .week-cell {
    -webkit-print-color-adjust: exact;
  }
}

/*******************************************************************************
 * RESPONSIVE MEDIA QUERIES
 ******************************************************************************/
/* Large tablet/small desktop */
@media (max-width: 740px) {
  .calendar {
    grid-template-columns: repeat(16, auto);
  }
}

/* Tablet */
@media (max-width: 660px) {
  .calendar {
    grid-template-columns: repeat(12, auto);
  }
  
  .stats.wrapper {
    max-width: 80%;
    text-align: center;
    transform: none;
  }
}

/* Large mobile */
@media (max-width: 500px) {
  .calendar {
    grid-template-columns: repeat(10, auto);
  }
}

/* Small mobile */
@media (max-width: 430px) {
  .calendar {
    grid-template-columns: repeat(8, auto);
  }
}

/*******************************************************************************
 * ALTERNATIVE LAYOUT STYLES
 ******************************************************************************/
/* Rectangle container for alternative layout */
.rect-container {
  display: grid;
  grid-template-columns: repeat(var(--cols-per-rect), calc(var(--week-size) + var(--week-gap)));
  grid-template-rows: repeat(var(--rows-per-rect), calc(var(--week-size) + var(--week-gap)));
  gap: var(--week-gap);
}

/* Alternative layout calendar container */
.calendar.alternative-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: var(--spacing-md); */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Decade block wrapper - containing label and container */
.decade-block-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  /* margin-bottom: var(--spacing-md); */
  position: relative;
}

/* Decade label for alternative layout */
.decade-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  /* margin-bottom: var(--spacing-xs); */
  text-align: center;
  width: 100%;
}

/* Decade container with two rectangles */
.decade-container {
  display: flex;
  gap: var(--rect-block-gap);
  justify-content: center;
  position: relative;
  width: fit-content;
}

/* Age label that appears at the right of each decade group */
.decade-age-label {
  position: absolute;
  bottom: 10%;
  right: -30px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  opacity: 0.8;
  font-weight: 500;
  transform: translateY(50%);
}

/* Responsive adjustments for alternative layout */
@media (max-width: 900px) {
  .decade-container {
    transform: scale(0.9);
    transform-origin: center;
  }
  
  .decade-age-label {
    right: -25px;
  }
}

@media (max-width: 750px) {
  .decade-container {
    transform: scale(0.8);
  }
  
  .decade-age-label {
    right: -20px;
  }
}

@media (max-width: 600px) {
  .decade-container {
    transform: scale(0.7);
  }
}

@media (max-width: 500px) {
  .decade-container {
    flex-direction: column;
    gap: var(--spacing-sm);
    transform: scale(0.9);
  }
  
  .decade-age-label {
    right: auto;
    bottom: auto;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
  }
}

@media (max-width: 400px) {
  .decade-container {
    transform: scale(0.8);
  }
}

@media (max-width: 350px) {
  .decade-container {
    transform: scale(0.7);
  }
}