/* ========================================
   MAIN CALENDAR STYLES
   Structural and component styles without themes
   ======================================== */

/* ========================================
   GOOGLE FONTS IMPORT
   ======================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap");

/* Body and general setup */
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, sans-serif;
  color: var(--calendar-dates-textColor);
  background: transparent;
  overflow: hidden;
}

/* Main calendar widget container */
.calendar-widget {
  width: 300px;
  height: 520px;
  background: var(--calendar-bg-color);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  user-select: none;
  border: var(--calendar-border);
  /* box-shadow: 0 8px 40px rgba(20, 20, 30, 0.19); */
  display: flex;
  flex-direction: column;

  transition: background 0.2s;
}

/* ========================================
   MONTH VIEW SECTION
   ======================================== */

/* Container for the month view (top section) */
.month-view-container {
  flex: 0 0 auto;
  height: 300px;
  min-height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--calendar-bg-color);
}

/* Month header with navigation and month/year display */
.month-header {
  height: 52.5px;
  background: var(--calendar-header-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: var(--calendar-month-header-text, white);
  position: relative;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Month and year display text */
.month-year-display {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.45px;
  position: relative;
  z-index: 2;
}

/* Navigation arrows for previous/next month */
.nav-arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */
  will-change: transform; /* Optimize for animation */
  user-select: none;
  position: relative;
  z-index: 2;
  line-height: 1;
  vertical-align: middle;
  color: var(--nav-arrow-color);
  background: none;
  font-weight: 700;
}

.nav-arrow:hover {
  background-color: var(--nav-arrow-hover-bg);
  color: var(--nav-arrow-hover-color);
  transform: scale(1.1);
}

/* ========================================
   CALENDAR GRID STYLING
   ======================================== */

/* Container for the calendar grid */
.calendar-grid {
  flex: 1 1 auto;
  padding: 12px;
  background: var(--calendar-bg-color);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Weekdays header row */
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.5px;
  margin-bottom: 6px;
}

/* Individual weekday labels */
.weekday {
  font-size: 13px;
  font-weight: 800;
  color: var(--calendar-weekdays-header-textColor);
  text-align: center;
  padding: 3px 0;
  letter-spacing: 0.04em;
}

/* Grid container for calendar days */
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  height: calc(100% - 24px);
}

/* Individual day cells */
.day-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--calendar-dates-textColor);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */
  will-change: transform; /* Optimize for animation */
  min-height: 28px;
  position: relative;
  font-weight: 600;
  background: none;
}

.day-cell:hover {
  background-color: var(--calendar-days-hover-color);
  transform: scale(1.1);
}

/* Days from other months (grayed out) */
.day-cell.other-month {
  color: var(--calendar-weekdays-header-textColor);
  opacity: 0.6;
}

/* Today's date highlighting */
.day-cell.today {
  color: var(--calendar-currentDay-textColor);
  background: linear-gradient(
    135deg,
    var(--calendar-currentDay-highlight-color) 0%,
    var(--calendar-currentDay-highlight-color) 100%
  );
  border: 1px solid var(--calendar-event-border);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(252, 137, 85, 0.24);
}

/* Days with events */
.day-cell.has-event {
  background-color: var(--calendar-reminderDay-highlight-color);
  font-weight: 600;
  border: var(--calendar-event-border);
}

/* ========================================
   UPCOMING EVENTS SECTION
   ======================================== */

/* Container for upcoming events (bottom section) */
.upcoming-events {
  flex: 1 1 0;
  min-height: 0;
  background: var(--calendar-bg-color);
  border-top: var(--calendar-event-border);
  display: flex;
  flex-direction: column;
  padding: 9px 10px 13px 10px;
  box-sizing: border-box;
  height: 212px;
  max-height: 212px;
}

/* "Upcoming" section title */
.upcoming-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--calendar-weekdays-header-textColor);
  margin: 0 0 9px 4px;
  letter-spacing: 0.13em;
  flex: 0 0 auto;
  text-shadow: 0 1px 0 #fdf2f8, 0 0.5px 0 #fff4;
}

/* Scrollable event list container */
.event-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: 190px;
  padding-top: 3px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar for webkit browsers */
.event-list::-webkit-scrollbar {
  display: none;
}

* {
  -ms-overflow-style: none; /* IE & Edge */
  scrollbar-width: none; /* Firefox */
}

/* ========================================
   EVENT TAP STYLING
   ======================================== */

/* Individual event tap/card */
.event-tap {
  border-radius: 14px;
  box-shadow: var(--reminder-tab-highlight-shadow);
  font-size: 16px;
  line-height: 1.24;
  min-height: 70px;
  max-height: 70px;
  border: 2.5px solid transparent;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--Other-upcoming-reminder-tab-color);
  position: relative;
  color: var(--Second-reminder-tab-text-color);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}

.event-tap:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Today's events */
.event-today {
  color: var(--event-today-text);
  background-color: var(--event-today-bg, rgba(255, 255, 0, 0.1));
  border: var(--event-today-border);
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.2);
}

/* Event tap hover state */
.event-today:hover {
  background: var(--event-today-bg-hover);
  color: var(--event-today-text-hover);
}

.event-today .event-tap-date {
  color: var(--event-today-date);
  font-weight: bold;
}

/* Today's countdown styling */
.event-today .event-tap-countdown {
  color: var(--event-today-countdown);
  font-weight: bold;
  border: var(--event-today-countdown-box-border);
  background: var(--event-today-countdown-box-shadow);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ===== THIS MONTH'S EVENTS ===== */
.event-this-month .event-tap-date {
  color: var(--thismonth-date-color, #4a6bdf);
}

.event-this-month .event-tap-countdown {
  color: var(--thismonth-countdown-color, #6c8eff);
  font-weight: bold;
  background: var(--thismoth-countdown-box-shadow);
  border: var(--thismoth-countdown-box-border);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ===== FUTURE EVENTS ===== */
.event-future .event-tap-date {
  color: var(--future-date-color, #999999);
  opacity: 1;
}

.event-future .event-tap-countdown {
  color: var(--future-countdown-color, #aaaaaa);
  box-shadow: var(--future-countdown-shadow);
  border: var(--future-countdown-border);
  border-radius: 10px;
  padding: 2px 8px;
  opacity: 1;
}

.event-this-month {
  color: var(--this-month-text);
  border: var(--event-border);
  opacity: 0.9;
}

.event-future {
  color: var(--future-month-text);
  background-color: var(--future-month-bg);
  opacity: 0.7;
  border: var(--event-border);
}

/* First row of event tap - icon and event name */
.event-tap-row1 {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 22px 0 22px;
  letter-spacing: 0.02em;
  position: relative;
}

/* Second row of event tap - date and countdown */
.event-tap-row2 {
  font-size: 15px;
  color: var(--Second-event_date_text-color);
  padding: 5px 22px 14px 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  font-weight: 700;
}

/* Base button style - empty circle */
.event-tap-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 26px;
  height: 26px;
  margin-top: 12px;
  padding: 0;
  border: 2px solid var(--event-checkbox-emptyBorder);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}

.event-tap-btn:hover {
  border-color: var(--event-checkbox-emptyBorder);
  transform: scale(1.2);
}

.event-completed .event-tap-btn {
  background: var(--event-checkbox-completed-bg);
  border-color: var(--event-checkbox-completed-emptyBorder);
  font-weight: 600;
  color: var(--event-checkox-textColor);
}

.event-tap-btn:active {
  transform: scale(0.95);
}

/* Add these styles to preserve existing tap styling */
.event-completed {
  opacity: 0.85;
}

/* ============================
   EVENT TAP BTN: TODAY
   ============================ */
.event-today .event-tap-btn {
  border: var(--event-today-checkbox-border);

  background: transparent;
}

.event-today .event-tap-btn:hover {
  border: var(--event-today-checkbox-border);
  transform: scale(1.1);
}

.event-completed.event-today .event-tap-btn {
  background: var(--event-checkbox-completed-bg);
  border: var(--event-today-checkbox-completed-border);
  color: var(--event-checkbox-sign-color);
}

/* ============================
   EVENT TAP BTN: THIS MONTH + FUTURE
   ============================ */
.event-this-month .event-tap-btn,
.event-future .event-tap-btn {
  border: var(--eventOther-checkbox-border);
  background: transparent;
}

.event-this-month .event-tap-btn:hover,
.event-future .event-tap-btn:hover {
  border: var(--eventOther-checkbox-border);
  transform: scale(1.1);
}

.event-completed.event-this-month .event-tap-btn,
.event-completed.event-future .event-tap-btn {
  background: var(--eventOther-checkbox-completed-bg);
  border: var(--eventOther-checkbox-border);
  color: var(--eventOther-checkbox-sign-color);
}

.event-completed .completed-text {
  text-decoration: line-through;
  color: var(--event-lineThrough-todayColor);
  position: relative;
}

.event-completed .completed-text::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor; /* fallback */
  transform: translateY(-50%);
}

/* Today specific completed line */
.event-completed.event-today .completed-text {
  color: var(--event-lineThrough-todayColor);
}

.event-completed.event-this-month .completed-text {
  color: var(--event-lineThrough-all-eventColor);
}

.event-completed.event-future .completed-text {
  color: var(--event-lineThrough-all-eventColor);
}

/* ========================================
   TODO VIEW STYLES
   ======================================== */
.todo-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 303px;
  height: 523px;
  background: var(--todo-page-bgColor);
  display: none;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
  z-index: 10;
  border-radius: 22px;
  border: var(--todo-border);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(20, 20, 30, 0.19);
}

.todo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--todo-backBtn-color);
  margin-right: 10px;
  padding: 8px;
  border-radius: 50%;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}

.back-button:hover {
  background-color: var(--todo-backBtn-color-hover);
}

.back-button:hover .back-icon {
  transform: translateX(-3px);
}

.back-icon {
  transition: transform 0.3s ease;
}

.back-button:active {
  transform: scale(0.95);
}

.back-button:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Ripple Effect - Smoother Version */
.back-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Hover Ripple */
.back-button:hover::before {
  opacity: 1;
}

/* Mouse Leave Transition */
.back-button {
  animation: gentleReturn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes gentleReturn {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

.todo-date {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.day-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--todo-day-color);
}

.full-date {
  font-size: 16px;
  color: var(--todo-day-color);
}

.todo-input-container {
  display: flex;
  margin-bottom: 20px;
}

#todo-input {
  flex: 1;
  padding: 10px 15px;
  border: var(--todo-textInput-border);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  background: var(--todo-textInput-bgColor);
  color: var(--todo-textInput-textColor);
}

#add-todo-btn {
  margin-left: 8px;
  min-width: 36px;
  height: 36px;
  background: var(--todo-addBtn-bgColor);
  border: var(--todo-addBtn-border);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--todo-addBtn-textColor);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}

#add-todo-btn:hover {
  opacity: 1;
  transform: scale(1.1) translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  background: var(
    --todo-addBtn-bgColor-hover,
    hsl(from var(--todo-addBtn-bgColor-hover) h s calc(l * 0.9))
  );
}

#add-todo-btn:active {
  transform: scale(1.05) translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Pressed-down effect */
}

.todo-items {
  overflow-y: auto;
  flex: 1;
  max-height: calc(520px - 180px);
}

.todo-item {
  /* Layout */
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  margin: 12px 0;
  /* Visual Style */
  background: var(--todo-page-bgColor);
  border-radius: 12px;
  border: var(--todolist-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  color: var(--todo-text-color);
  /* Typography */
  font-size: 15px;
  line-height: 1.4;
  /* Interactions */
  cursor: grab;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */

  transform: translateZ(0);
}

.todo-item .todo-drag-handle {
  margin-right: 8px;
  pointer-events: none; /* Make handle non-interactive */
  opacity: 0.8; /* Keep visible but subtle */
}

.todo-item:hover {
  color: var(--todolist-textColor-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: var(--todolist-bgColor-hover);
  border-color: var(--todolist-border-hover);
}

.todo-item:active {
  cursor: grabbing;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Completed State */
.todo-item.completed {
  opacity: 0.85;
  background: var(--todolist-complete-bgColor);
}

.todo-item.completed .todo-item-text {
  text-decoration: line-through;
  color: var(--todolist-completed-textColor);
  opacity: 0.9;
}

/* Checkbox */
.todo-checkbox {
  appearance: none; /* reset default */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none; /* Firefox */

  width: 22px;
  height: 22px;

  margin-left: -20px;
  border: var(--todolist-border);

  border-radius: 50%; /* makes it round */
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}
.todo-checkbox:checked {
  background: var(--eventOther-checkbox-completed-bg);
  border-color: var(--todolist-border);
  color: var(--eventOther-checkbox-sign-color);
}

.todo-checkbox:checked::after {
  content: "✓";
  font-size: 14px;
  font-weight: bold;
  position: absolute; /* position relative to .todo-checkbox */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* center it */
}

.todo-checkbox:hover {
  transform: scale(1.1);
}

/* Text */
.todo-item-text {
  flex: 1;
  margin: 0;
  padding: 2px 0;
  word-break: break-word;
  transition: all 0.2s ease;
}

/* Drag State */
.todo-item.dragging {
  opacity: 0.8;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: var(--todo-drag-bg);
}

/* Priority Indicator (Optional) */
.todo-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: transparent;
  transition: background 0.2s ease;
}

.todo-item.priority-high::before {
  background: #ff5a5a;
}

.todo-item.priority-medium::before {
  background: #ffb74d;
}

.todo-delete-btn {
  /* Interaction */
  border: 0.5px solid #00000096; 
  outline: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */

  /* Visual Design */
  color: var(--todo-delete-btn-textColor);
  font-size: 22px;
  line-height: 1;
  background: var(--todo-delete-btn-color);
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Accessibility */
  outline: none;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* base shadow */
}

/* Hover State (scale + subtle lift) */
.todo-delete-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}

/* Active/Pressed State (pressed in look) */
.todo-delete-btn:active {
  transform: scale(1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* lighter shadow when pressed */
  transition-duration: 0.1s;
}

/* Focus State (Accessibility) */
.todo-delete-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--Second-remainingTime-text-color),
    0 2px 6px rgba(0, 0, 0, 0.15);
}

.empty-todos {
  text-align: center;
  color: var(--calendar-weekdays-header-textColor);
  padding: 20px;
  font-size: 14px;
}

/* Drag States - Enhanced Visual Feedback */
.todo-item.sortable-chosen {
  background: var(--calendar-bg-color);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.todo-item.sortable-ghost {
  opacity: 0.5;
  background: var(--calendar-bg-color);
}

/* Smoother Transitions */
.todo-item {
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease;
}

* {
  -webkit-tap-highlight-color: transparent; /* Removes mobile tap flash */
}

/* ========================================
   SWIPE CONTAINER FOR CALENDAR + BIO PAGE
   ======================================== */

.swipe-container {
  position: relative;
  width: 300px;
  height: 520px;
  overflow: hidden;
  touch-action: pan-y pan-x;
}

.calendar-widget,
.bio-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 520px;
  transition: transform 0.35s cubic-bezier(0.45, 0.15, 0.3, 1), opacity 0.25s;
  will-change: transform;
  border-radius: 22px;
  /* box-shadow: 0 8px 40px rgba(20, 20, 30, 0.19);
  background: var(--calendar-bg-color, #fff); */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  cursor: default;
}

.bio-page {
  background: var(--calendar-bg-color, #fff);
  border: var(--calendar-border, 2px solid #000);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  /* Initially hidden */
  opacity: 0;
  pointer-events: none;
  user-select: none !important;
  cursor: default !important;
  -webkit-user-drag: none !important;
}

input,
textarea,
.todo-input-container input,
button,
.todo-delete-btn {
  user-select: auto;
  cursor: auto;
}

.bio-page.active {
  opacity: 1;
  pointer-events: auto;
}

.bio-content {
  width: 80%;

  height: 70%;
  display: flex;

  flex-direction: column;
  justify-content: space-between; /* push bio to center and buttons to bottom */
  align-items: center;
}

.bio-inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  justify-content: center; /* center logo, text, social */
  gap: 17px;
}
.bio-logo-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(
    --bio-logo-wrapper-bg,
    transparent
  ); /* 👈 Background here */
  border: var(--bio-logo-wrapper-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center; /* scale from center */
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}
.bio-logo-wrapper:hover {
  transform: scale(1.15); /* Slightly more subtle scale */
}

.bio-logo {
  width: 70px;
  height: 70px;
  filter: var(--logo-color);
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 3px;
  transform-origin: center; /* scale from center */
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}

.bio-text {
  font-size: 18px;
  color: var(--calendar-dates-textColor);
  text-align: start;
  font-weight: 600;
  margin-bottom: 2px;
}

.bio-social {
  display: flex;
  gap: 22px; /* Slightly increased gap */
  margin-top: 20px;
}

.bio-social-link {
  margin-top: -35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  scale: 1.4;
  width: 38px; /* Increased size */
  height: 38px; /* Increased size */
  border-radius: 50%;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}

.bio-social-link:hover {
  transform: scale(1.15); /* Slightly more subtle scale */
  background: transparent;
}

.icons {
  fill: var(--icons-svg-color);
}

.bio-social-link svg {
  display: block;
  width: 18px; /* Ensure SVG scales properly */
  height: 18px;
}

.calendar-widget.swiped-left {
  transform: translateX(-100%);
  opacity: 0.4;
}

.bio-page.swiped-in {
  transform: translateX(0);
  opacity: 1;
}

.bio-backup-actions {
  display: flex;
  scale: 1.4;
  justify-content: center;
  margin-top: 0; /* remove old margin */
}

.bio-action-btn {
  margin-top: -50px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */

  will-change: transform; /* Optimize for animation */
}

.bio-action-btn img {
  display: block;
  pointer-events: none; /* Prevent image from blocking button click */
}

.bio-action-btn svg {
  display: block;
}

.bio-action-btn:hover {
  transform: scale(1.15); /* Slightly more subtle scale */
  background: transparent;
}

.calendar-widget {
  z-index: 3;
  transition: transform 0.35s cubic-bezier(0.45, 0.15, 0.3, 1), opacity 0.25s;
}

.calendar-widget.theme-animate {
  animation: themeFade 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes themeFade {
  from {
    opacity: 0.3;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal.active .modal-content {
  animation: fadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Small screen adjustments */
@media (max-width: 320px) {
  .calendar-widget {
    width: 99vw;
  }

  @media (hover: none) {
    .todo-item:hover {
      transform: none;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
  }
}