/* Completely hide Flatpickr month dropdown for calendar header */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: none !important;
}
/* Hide Flatpickr month/year dropdown arrow for cleaner calendar header */
.flatpickr-current-month .flatpickr-monthDropdown-months:after,
.flatpickr-current-month .flatpickr-monthDropdown-months:before,
.flatpickr-current-month .flatpickr-monthDropdown-months svg,
.flatpickr-current-month .flatpickr-monthDropdown-months .arrowUp,
.flatpickr-current-month .flatpickr-monthDropdown-months .arrowDown {
  display: none !important;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --bg-dark: rgba(0,0,0,0.78);
  --bg-darker: rgba(10,10,10,0.62);
  --text-primary: #ffffff;
  --text-secondary: #666666;
  --accent-blue: #0037ff;
  --border-color: #222222;
  --hover-bg: rgba(255, 255, 255, 0.05);
  --accent-gold: linear-gradient(90deg, #ffd700, #ffb347);
}

/* Page background: use the project image if present. Relative path adjusted for CSS folder location */
body {
  background-image: url('../image/websitebg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Utility: pages that include a footer should stretch so the footer sits at the bottom */
.page-with-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-with-footer main {
  flex: 1 0 auto;
}
.page-with-footer .site-footer {
  margin-top: auto;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Scoped Flatpickr day rules (moved out of nested body block) */
.todo-app-scope .flatpickr-day {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.todo-app-scope .flatpickr-day:hover:not(.selected):not(.disabled) {
  background: rgba(255,255,255,0.02) !important;
  transform: translateY(-2px) !important;
}

.todo-app-scope .flatpickr-day.selected {
  background: linear-gradient(90deg,#4F46E5,#6366F1) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(79,70,229,0.18) !important;
}

.todo-app-scope .flatpickr-day.today {
  border: 1px solid rgba(255,190,60,0.16) !important;
  background: rgba(255,183,25,0.03) !important;
}

.todo-app-scope .flatpickr-day.today:hover {
  background: rgba(255,183,25,0.06) !important;
}

.todo-app-scope .flatpickr-day.prevMonthDay,
.todo-app-scope .flatpickr-day.nextMonthDay {
  color: #7a7a7a !important;
  opacity: 0.55 !important;
}

.todo-app-scope .flatpickr-day.disabled {
  color: var(--text-secondary) !important;
  opacity: 0.32 !important;
  cursor: not-allowed !important;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 20px;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

nav a.active {
  background: linear-gradient(45deg, #ffd700, #ffb347);
  color: #000;
}

/* Adjust main content to account for fixed nav */
.todo-app-scope .app {
  margin-top: 70px;
}

nav a:hover {
  transform: translateY(-2px);
}

h1, h2 {
  margin: 16px 0;
  color: white;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  display: inline-block;
}

.container {
    background-color: rgba(13, 13, 17, 0.95);
    padding: 24px 28px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    width: 90%;
    max-width: 800px;
    margin: 28px auto;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hero-inner {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 30px;
  border-radius: 16px;
  margin: 20px auto;
  max-width: 900px;
}

.lead {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 15px 20px;
  border-radius: 8px;
  margin: 15px 0;
  display: inline-block;
}

.feature {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

footer {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 15px 0;
  margin-top: 30px;
}

/* Documentation Page Button Styles */
.docs-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
  margin: 30px auto;
}

.coming-soon-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.3s ease;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.coming-soon-button:disabled {
  opacity: 0.6;
}

.github-link-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.github-link-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #5558e3 0%, #7b4be3 100%);
}

.github-link-button:active {
  transform: translateY(0);
}

.doc-link-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.doc-link-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #5558e3 0%, #7b4be3 100%);
}

.doc-link-button:active {
  transform: translateY(0);
}

/* Documentation Snippets Section */
.docs-snippets {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.docs-snippets h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 40px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.snippets-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.snippet-card {
  background: rgba(30, 30, 46, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.snippet-card:hover {
  transform: translateY(-8px);
  border-color: #6366f1;
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2);
  background: rgba(30, 30, 46, 0.8);
}

.snippet-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.snippet-card:hover img {
  transform: scale(1.05);
}

.snippet-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  margin: 16px 16px 8px 16px;
  padding: 0;
}

.snippet-card p {
  font-size: 0.95rem;
  color: #aaa;
  margin: 0 16px 16px 16px;
  padding: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .docs-snippets h2 {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }

  .snippets-gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }

  .snippet-card img {
    height: 180px;
  }

  .snippet-card h3 {
    font-size: 1rem;
    margin: 12px 12px 6px 12px;
  }

  .snippet-card p {
    font-size: 0.9rem;
    margin: 0 12px 12px 12px;
  }
}

/* Layout: header / hero / features / footer similar to Wix style */
.site-header { background: transparent; padding: 18px 12px; }
.header-inner { max-width: 1100px; margin: 0 auto; display:flex; align-items:center; gap:18px; }
.logo { font-weight:800; font-size:20px; color:var(--text-primary); }
.main-nav { margin-left: auto; }
.main-nav a { margin: 0 12px; color:var(--text-primary); text-decoration:none; }
.header-cta { margin-left: 18px; }

.hero { padding: 56px 12px; text-align:center; }
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero h1 { font-size: 56px; line-height:1.02; margin-bottom: 12px; color:var(--text-primary); font-weight:800; }
.hero .lead { font-size:18px; color:var(--text-primary); margin-bottom:18px; }
.hero-ctas .btn { margin-right:10px; }

/* Fastodo-like hero CTA styles */
.hero-ctas { margin-top: 18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-lg { padding: 14px 20px; font-size:18px; border-radius:12px; }
.rounded-xl { border-radius: 12px; }
.drop-shadow-md { box-shadow: 0 8px 24px rgba(0,0,0,0.16); }

.container-wide { max-width:1100px; margin: 0 auto; padding: 0 12px; }
.features { padding: 24px 0 48px 0; }
.feature-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-top:18px; }
.feature { background: rgba(255,255,255,0.02); padding:18px; border:1px solid var(--ash); border-radius:10px; }
.feature h3 { margin:0 0 8px 0; color:var(--text-primary); }
.feature p { margin:0; color:var(--text-primary); }

.about { padding: 0 0 48px 0; }

.site-footer { border-top:1px solid var(--ash); padding:18px 0; margin-top:34px; }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding: 0 12px; color:var(--text-primary); }
.footer-links a { color:var(--text-primary); margin-left:12px; }

.footer-info {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.footer-info p {
  margin: 4px 0;
  padding: 0;
}

/* Buttons */
.btn { display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; position:relative; isolation:isolate; }
.btn-primary { background: var(--accent-1, #8b6ef5); color: #0f0f14; box-shadow: 0 0 0 0 rgba(139,110,245,0.45); border: 1px solid rgba(139,110,245,0.35); }
.btn-ghost { background:transparent; color:var(--text-0); border:1px solid rgba(139,110,245,0.35); }

/* Circular glow for primary .btn elements only (avoid applying to every <button>) */
.btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(60px 60px at center, rgba(139,110,245,0.35), rgba(59,42,122,0.15) 60%, transparent 70%);
  filter: blur(6px);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

/* Hover/focus intensify glow and adjust bg */
.btn:hover, .btn:focus, button:hover, button:focus {
  box-shadow: 0 0 0 2px rgba(139,110,245,0.25), 0 10px 24px rgba(59,42,122,0.35);
}
.btn-primary:hover, .btn-primary:focus { background: var(--accent-0, #6b4fd3); color: #fff; }

/* Base <button> element styling (global buttons) */
button {
  padding: 10px 16px;
  margin-left: 10px;
  border: 1px solid rgba(139,110,245,0.35);
  background-color: var(--accent-1, #8b6ef5);
  color: #0f0f14;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, transform 120ms ease, box-shadow 0.2s ease;
}

button:hover { background-color: var(--accent-0, #6b4fd3); color:#fff; }
button:active { transform: translateY(1px); }

@media (max-width:600px) {
  .hero h1 { font-size:28px; }
  .header-inner { flex-wrap:wrap; }
  .main-nav { order:3; width:100%; text-align:center; margin-top:12px; }
  .header-cta { order:2; margin-left:0; }
}

.input-section {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

input[type="text"], input[type="search"] {
  width: 70%;
  padding: 10px;
  border: 1px solid var(--ash);
  border-radius: 8px;
  font-size: 15px;
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
}

button {
  padding: 10px 14px;
  margin-left: 10px;
  border: none;
  background-color: #2575fc;
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, transform 120ms ease;
}

button:hover { background-color: #1e5bd8; }

ul { list-style-type: none; padding: 0; margin: 0; }



/* Calendar Column Styles */
.calendar-section {
  background: #0D0D0D;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  width: 100px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  position: relative;
}

/* Calendar Toggle Button */
.calendar-toggle {
  background: #161616;
  border: none;
  padding: 12px;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  width: 100%;
  margin: 0;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-toggle:hover {
  background: rgba(40, 40, 45, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.calendar-toggle .calendar-icon {
  font-size: 1.2em;
}

#calendar-container {
  background: #161616;
  padding: 12px;
  transition: all 0.3s ease;
  opacity: 1;
  transform: translateY(0);
  max-height: 320px;
  overflow: hidden;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#calendar-container.calendar-hidden {
  max-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  border: none;
}

#calendar-container.calendar-hidden {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  padding: 0;
  margin: 0;
  border: none;
}

.calendar-section h3 {
  color: var(--text-0);
  font-size: 18px;
  margin-bottom: 16px;
  text-align: center;
}

#calendar-container {
  background: rgba(20, 20, 25, 0.6);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#task-date {
  display: none !important;
}

/* Flatpickr Calendar Custom Styling */
.flatpickr-calendar {
  /* Modern soft card */
  background: linear-gradient(180deg, rgba(18,18,20,0.98), rgba(10,10,12,0.98)) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02) !important;
  padding: 18px 16px !important;
  margin: 0;
}

#current-month-display {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.6px;
}

/* subtle divider below header */
.flatpickr-calendar .calendar-divider {
  height: 1px;
  background: rgba(255,255,255,0.04);
  margin: 8px 0 12px 0;
  border-radius: 2px;
}

/* Home button styles */
.home-btn-fixed {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  background: linear-gradient(45deg, #ffd700, #ffb347) !important;
  color: #000 !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
}

.home-btn-fixed:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4) !important;
}

/* To-do widget styles */
.todo-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #2575fc;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(37,117,252,0.25);
  cursor: pointer;
  z-index: 3;
}

.todo-toggle .todo-badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e74c3c;
  color: white;
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}

/* small nav counter for completed today */
.nav-todo-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  color: #d0f0d6; /* pale green */
  font-weight: 700;
}

.todo-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 360px;
  max-width: calc(100% - 40px);
  transform: translate(-50%, -48%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 3;
}

.todo-modal.open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

/* Expanded modal when opened from ribbon/nav (larger, more app-like) */
.todo-modal.expanded {
  width: 720px;
  max-width: calc(100% - 40px);
}

.todo-card {
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  overflow: hidden;
}

.todo-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #eee; }
.todo-header h3 { margin:0; font-size:16px; }
.todo-close { background:none; border:none; cursor:pointer; font-size:16px; }
.todo-body { padding:12px; }
.todo-body .input-section { margin-bottom:10px; }
.todo-body input { width: 65%; }
.todo-body button { margin-left:8px; }
.todo-body ul { max-height: 260px; overflow:auto; }

/* Small responsive tweaks */
@media (min-width: 900px) {
  .container { width: 420px; }
  /* enable fixed attachment on larger screens for a nicer effect when an image is present */
  body { background-attachment: fixed; }
}

@media (max-width: 768px) {
  .todo-container {
    padding: 20px;
  }
  
  .todo-input {
    font-size: 14px;
    padding: 12px;
  }
}

/* Scoped light app styles for To-Do App page only */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.todo-app {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    min-height: 100vh;
    background: #000;
    color: #fff;
    display: flex;
    overflow: hidden;
}

.app-container {
    display: flex;
    width: 100%;
    height: calc(100vh - 53px); /* Adjust for nav height */
    background: var(--bg-dark);
}

/* Calendar Section */
.calendar-section {
    width: 400px;
    background: var(--bg-darker);
    border-right: 1px solid var(--border-color);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calendar-section h2 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0;
    color: var(--text-secondary);
}

/* Selected Date Display */
#selected-date-display {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 16px 0;
    padding: 0 8px;
}

.calendar-section h2 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    padding: 12px;
    background: #000;
    letter-spacing: 0.5px;
}

.calendar-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin: 20px 0;
    text-align: center;
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Flatpickr Calendar Customization */
.flatpickr-calendar {
    background: var(--bg-dark) !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 280px !important;
    font-family: inherit !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.flatpickr-months {
    background: var(--bg-dark) !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}

.flatpickr-month {
    height: auto !important;
    color: var(--text-primary) !important;
}

/* Hide Flatpickr's default month/year header (we use custom #current-month-display instead) */
.flatpickr-current-month {
  display: none !important;
}

/* Original styling for reference (kept but hidden) */
.flatpickr-current-month-original {
  padding: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 34px !important;
  position: relative !important;
  text-align: center !important;
  margin: 0 30px !important; /* Add margin for arrows */
}

/* Fix month dropdown and year input positioning */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  position: static !important;
  display: inline-block !important;
  height: auto !important;
  padding: 0 4px !important;
}

.flatpickr-current-month input.cur-year {
  width: 60px !important;
  margin-left: 5px !important;
}.flatpickr-current-month .cur-month {
    font-weight: 500 !important;
    font-size: 16px !important;
}

.flatpickr-current-month .cur-year {
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 8px !important;
    height: auto !important;
    padding: 0 !important;
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

.flatpickr-weekdays {
    background: var(--bg-dark) !important;
    margin-bottom: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
}

.flatpickr-weekday {
    display: block !important;
    width: 100% !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
  font-size: 13px !important;
  background: transparent !important;
  text-align: center !important;
  padding: 6px 0 !important;
  color: rgba(200,200,210,0.8) !important;
  letter-spacing: 0.6px !important;
}

.flatpickr-weekday > span { display: block !important; }

.flatpickr-days {
  border: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dayContainer {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

.flatpickr-day {
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.flatpickr-day:hover:not(.selected):not(.disabled) {
  background: rgba(255,255,255,0.02) !important;
  transform: translateY(-2px) !important;
}

.flatpickr-day.selected {
  background: linear-gradient(90deg,#4F46E5,#6366F1) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(79,70,229,0.18) !important;
}

.flatpickr-day.today {
  border: 1px solid rgba(255,190,60,0.16) !important;
  background: rgba(255,183,25,0.03) !important;
}

.flatpickr-day.today:hover {
  background: rgba(255,183,25,0.06) !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-secondary) !important;
  opacity: 0.55 !important;
}

.flatpickr-day.disabled {
  color: var(--text-secondary) !important;
  opacity: 0.32 !important;
  cursor: not-allowed !important;
}

.todo-app-scope::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a24 0%, #12121a 100%);
  z-index: -1;
  /* Purple/Black/Grey theme variables */
  --bg-0: rgba(11,11,15,0.75);   /* near-black with slight blue, semi-transparent */
  --bg-1: rgba(18,18,26,0.68);   /* deep charcoal, slightly translucent */
  --bg-2: rgba(26,26,36,0.62);   /* dark grey with purple tint, translucent */
  --text-0: #ececf1; /* light grey text */
  --muted: #a1a1b3;  /* muted grey */
  --accent-0: #6b4fd3; /* primary purple */
  --accent-1: #8b6ef5; /* lighter purple */
  --accent-2: #3b2a7a; /* dark purple for hovers */
}

.todo-app-scope .app {
  display: grid;
  grid-template-columns: 400px 1fr; /* Even wider sidebar */
  background: rgba(13, 13, 17, 0.97);
  color: var(--text-0);
  width: 98%; /* Slightly wider to use more screen space */
  max-width: 1400px;
  height: calc(100vh - 100px);
  margin: 60px auto 20px auto; /* Increased top margin for nav */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* subtle gold accent bar */
.todo-app-scope .app:before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #3b2a7a, #6b4fd3, #8b6ef5);
}

/* Sidebar */
.todo-app-scope .sidebar {
  background: rgba(15, 15, 20, 0.95);
  padding: 24px;
  box-sizing: border-box;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 400px;
}

.todo-app-scope .sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.todo-app-scope .sidebar-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  margin: 0;
}

.todo-app-scope .sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
}

.todo-app-scope .sidebar-link:hover,
.todo-app-scope .sidebar-link.active {
  background: rgba(99, 102, 241, 0.1);
  color: rgb(99, 102, 241);
}

.todo-app-scope .sidebar h2, 
.todo-app-scope .sidebar h3 {
  color: var(--text-0);
  margin-bottom: 10px;
}

.todo-app-scope #task-date {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a2a36;
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 14px;
  margin-bottom: 8px;
  cursor: pointer;
}

.todo-app-scope #task-date:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(139,110,245,0.45);
}

.todo-app-scope #selected-date-display {
  font-weight: 600;
  color: var(--accent-1);
  text-align: center;
  margin-bottom: 15px;
}

.todo-app-scope .task-list {
  list-style: none;
  padding: 0;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
  margin: 20px 0;
  display: grid;
  gap: 12px;
}

.todo-app-scope .task-item {
  background: rgba(30, 30, 35, 0.6);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
  gap: 8px;
}

.todo-app-scope .task-item.completed {
  opacity: 0.7;
  background: rgba(20, 20, 25, 0.4);
}

.todo-app-scope .task-item.completed .task-text {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.6);
}

.todo-app-scope .task-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.todo-app-scope .priority-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  padding: 4px;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.todo-app-scope .priority-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.todo-app-scope .delete-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.todo-app-scope .delete-btn:hover {
  opacity: 1;
  color: #ff4444;
  transform: scale(1.1);
}

.todo-app-scope .task-date {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.6);
  min-width: 100px;
}

.todo-app-scope .no-tasks {
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  background: rgba(20, 20, 25, 0.4);
  border-radius: 12px;
}

.todo-app-scope #task-list li:hover {
  background: rgba(35, 35, 40, 0.8);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.12);
}

.todo-app-scope #task-list .task-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.todo-app-scope #task-list .checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.todo-app-scope #task-list .checkbox.checked {
  background: rgb(99, 102, 241);
  border-color: rgb(99, 102, 241);
}

.todo-app-scope #task-list .priority {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.todo-app-scope #task-list .priority.high {
  background: rgba(239, 68, 68, 0.2);
  color: rgb(239, 68, 68);
}

.todo-app-scope #task-list .priority.medium {
  background: rgba(245, 158, 11, 0.2);
  color: rgb(245, 158, 11);
}

.todo-app-scope #task-list .priority.low {
  background: rgba(16, 185, 129, 0.2);
  color: rgb(16, 185, 129);
}

.todo-app-scope #task-list li button {
  border: none;
  color: white;
  border-radius: 5px;
  padding: 5px 8px;
  margin-left: 5px;
  cursor: pointer;
}

.todo-app-scope button.edit {
  background: var(--accent-0);
  color: var(--text-0);
}
.todo-app-scope button.delete {
  background: #5a1c75;
  color: var(--text-0);
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
    background: #000;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.task-header {
    margin-bottom: 30px;
}

.task-header h1 {
    font-size: 20px;
    margin: 0 0 16px 0;
    font-weight: 600;
}

.task-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 8px;
}

.task-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 0;
    height: 32px;
}

.task-input::placeholder {
    color: var(--text-secondary);
}

.task-input:focus {
    outline: none;
}

.task-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 4px 8px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.add-task-btn {
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    line-height: 1;
}

.add-task-btn:hover {
    background: #002ee6;
    transform: translateY(-1px);
}

.focus-link-btn {
    background: var(--primary-color, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.focus-link-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.focus-link-btn span {
    font-size: 16px;
}

/* Task Filter and Search Controls */
.task-filter-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.search-filter {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
}

.task-search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 0;
    height: 32px;
}

.task-search-input::placeholder {
    color: var(--text-secondary);
}

.task-search-input:focus {
    outline: none;
}

.sort-filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sort-select,
.filter-select {
    flex: 1;
    min-width: 150px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-select:hover,
.filter-select:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}

.sort-select:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.sort-select option,
.filter-select option {
    background: #1a1a2e;
    color: var(--text-primary);
}

.task-count {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 6px;
}

.no-tasks-message {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px dashed var(--border-color);
}

.no-tasks-message p {
    margin: 0;
}

/* Responsive Design for Filter Controls */
@media (max-width: 768px) {
    .task-filter-controls {
        gap: 10px;
    }

    .sort-filter-buttons {
        flex-direction: column;
    }

    .sort-select,
    .filter-select {
        width: 100%;
    }
}

/* Task Sections */
.task-section {
  margin-top: 20px;
  height: 45vh;
  min-height: 220px;
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 24px;
}

/* Remove margin-bottom from the last task section to prevent overlap */
.task-section:last-of-type {
  margin-bottom: 0;
}
.task-section h3 {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    background: inherit;
    padding: 8px 0;
    z-index: 1;
}

.task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-section {
    margin-bottom: 24px;
}

/* Enhanced Views Section */
.views-section {
    margin: 0;
    position: relative;
    z-index: 10;
    background: #0D0D0D;
    padding: 0;
    transition: all 0.3s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.views-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    padding: 12px;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* When calendar is hidden, allow views section to expand */
#calendar-container.calendar-hidden + #selected-date-display + .views-section {
    max-height: calc(100vh - 200px);
}

.view-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

.task-list:empty::after {
    content: 'No tasks for this date';
    color: var(--text-secondary);
    font-style: italic;
    padding: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

/* View Links */
.views-section {
    margin-top: 24px;
}

.view-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.view-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    color: #fff;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background-color 0.2s ease;
    cursor: pointer;
    font-size: 13px;
}

.view-link.active {
    background: #FFB700;
    color: #000;
}

.view-link:hover:not(.active) {
    background: #161616;
}

.view-link:hover {
    background: rgba(255, 255, 255, 0.05);
}

.view-link.active {
    background: var(--accent-gold);
    color: #000;
    box-shadow: 0 2px 8px rgba(255,215,0,0.2);
}

.view-icon {
    font-size: 16px;
    opacity: 0.8;
}





.task-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    font-size: 13px;
}

.task-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.task-item.completed {
    opacity: 0.5;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.4);
}

.task-checkbox {
  width: 22px;
  height: 22px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  padding: 0;
  color: rgba(255, 255, 255, 0.3);
  position: relative;
  border-radius: 50%;
}

.task-checkbox:hover {
  color: var(--accent-blue);
  transform: scale(1.1);
  background: rgba(0, 55, 255, 0.1);
}

.task-checkbox.checked {
  color: var(--accent-blue);
}

.task-checkbox .circle-icon {
  transition: all 0.3s ease;
  transform-origin: center;
}

.task-checkbox:hover .circle-icon {
  transform: scale(1.2);
}

.task-checkbox.checked .circle-icon {
  animation: checkPop 0.3s ease forwards;
}

@keyframes checkPop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}.task-text {
    flex: 1;
    color: #fff;
}

.task-date {
    color: #666;
    font-size: 13px;
}

.task-actions {
    display: flex;
    gap: 8px;
}

.task-actions button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 16px;
}

.task-actions button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.star-btn {
    color: #666 !important;
    font-size: 20px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.star-btn:hover {
    color: #000 !important;
    background: var(--accent-gold) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255,215,0,0.2) !important;
}

.star-btn.active {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5) !important;
}

.task-item.important {
    border-left: 3px solid #ffd700;
    padding-left: 13px;
}

.todo-app-scope .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.todo-app-scope .page-title {
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.todo-app-scope .task-actions {
  display: flex;
  gap: 8px;
}

.todo-app-scope .icon-button {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.todo-app-scope .icon-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* Buttons and inputs theme */
.todo-app-scope .btn.btn-primary,
.todo-app-scope #add-task {
  background: var(--accent-1);
  color: #0f0f14;
  border: 1px solid rgba(139,110,245,0.35);
}
.todo-app-scope .btn.btn-primary:hover,
.todo-app-scope #add-task:hover {
  background: var(--accent-0);
  color: #fff;
}

/* Circular glow inside todo app as well */
.todo-app-scope .btn.btn-primary::before,
.todo-app-scope #add-task::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(60px 60px at center, rgba(139,110,245,0.4), rgba(59,42,122,0.2) 60%, transparent 70%);
  filter: blur(6px);
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

.todo-app-scope #task-input {
  background: var(--bg-2);
  border: 1px solid #2a2a36;
  color: var(--text-0);
}

.todo-app-scope h1 {
  color: white;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

.todo-app-scope .task-input {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.todo-app-scope #task-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(20, 20, 25, 0.8);
  color: white;
  font-size: 13px;
  transition: all 0.3s ease;
  margin-right: 6px;
}

.todo-app-scope #task-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(25, 25, 30, 0.9);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.todo-app-scope #add-task {
  background: rgb(99, 102, 241);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 13px;
  min-width: 80px;
}

.todo-app-scope #add-task:hover {
  background: rgb(79, 82, 221);
  transform: translateY(-1px);
}

.todo-app-scope #add-task:hover {
  background: #0056b3;
}

.todo-app-scope #summary {
  background: rgba(18, 18, 24, 0.6);
  border-radius: 16px;
  padding: 20px;
  height: 65%;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
}

.todo-app-scope #all-tasks li {
  background: rgba(25, 25, 30, 0.6);
  margin-bottom: 10px;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.todo-app-scope #all-tasks li:hover {
  background: rgba(30, 30, 35, 0.8);
  transform: translateY(-1px);
}

.todo-app-scope #all-tasks li span {
  color: var(--accent-1);
}

.todo-app-scope ::-webkit-scrollbar {
  width: 8px;
}

.todo-app-scope ::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

/* Fixed Home button top-right for todo app */
.todo-app-scope .home-btn-fixed {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* Responsive layout adjustments */
/* Responsive Design */
@media (max-width: 768px) {
  .todo-app-scope {
    padding: 10px;
  }
  
  .todo-app-scope .app {
    width: 100%;
    height: calc(100vh - 20px);
    flex-direction: column;
  }
  
  .todo-app-scope .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 15px;
  }
  
  .todo-app-scope .main-content {
    padding: 15px;
  }
  
  .todo-app-scope #task-list {
    max-height: calc(100vh - 300px);
  }
  
  .todo-app-scope #task-list li {
    padding: 12px;
  }
  
  .todo-app-scope .task-input {
    flex-direction: column;
    gap: 10px;
  }
  
  .todo-app-scope #task-input {
    width: 100%;
    font-size: 16px;
    padding: 14px;
  }
  
  .todo-app-scope #add-task {
    width: 100%;
    margin: 0;
    padding: 14px;
    font-size: 16px;
  }

  .view-link {
    padding: 14px;
    margin: 4px 0;
  }
  
  .calendar-section {
    max-height: 40vh;
    overflow-y: auto;
  }
}

/* Tablet Optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  .calendar-section {
    width: 280px;
  }

  .task-item {
    padding: 14px;
  }
}

/* TV Screen Optimization */
@media (min-width: 1920px) {
  :root {
    font-size: 18px;
  }

  .app-container {
    max-width: 1800px;
    margin: 0 auto;
  }

  .calendar-section {
    width: 480px;
  }

  .task-item {
    padding: 24px;
  }

  .task-input, .add-task-btn {
    padding: 16px 24px;
    font-size: 18px;
  }

  .view-link {
    padding: 16px;
    font-size: 18px;
  }

  .star-btn {
    font-size: 24px !important;
  }
}

/* Small Phone Optimization */
@media (max-width: 480px) {
  nav {
    flex-wrap: wrap;
    padding: 8px;
  }

  nav a {
    width: calc(50% - 12px);
    margin: 3px;
    padding: 10px;
    font-size: 14px;
  }

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

  .task-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }

  .calendar-section {
    padding: 12px;
  }
}

/* Enhanced Ribbon Behavior */
/* Notification System */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    z-index: 1000;
    animation: slideIn 0.3s ease-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification.success {
    background: linear-gradient(45deg, #00c853, #69f0ae);
}

.notification.error {
    background: linear-gradient(45deg, #ff1744, #ff5252);
}

.notification.info {
    background: linear-gradient(45deg, #2196f3, #64b5f6);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Task Interaction Improvements */
.task-item {
    position: relative;
    overflow: hidden;
    user-select: none;
    min-height: 44px;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-item.deleting {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.task-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.task-item:hover::before {
    opacity: 1;
}

.task-item.completed::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 50%;
    width: calc(100% - 120px);
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.task-item.completed::after {
    transform: scaleX(1);
}

/* Navigation System */
.nav-trigger {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 999;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}

nav {
  background: rgba(12,12,12,0.95);
  padding: 12px 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: center;
  gap: 12px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-100%);
  transition: all 200ms ease-out;
  will-change: transform, opacity;
  pointer-events: none;
}

.nav-trigger:hover ~ nav,
nav:hover,
nav:focus-within {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Adjust content for nav */
.app-container {
  margin-top: 15px;
}

/* Golden glow on hover for primary top-level controls */
nav a:hover,
.view-link:hover,
.icon-btn:hover,
.add-task-btn:hover,
.todo-app-scope .home-btn-fixed:hover,
.star-btn:hover {
  background: linear-gradient(90deg, #ffd700, #ffb347) !important;
  color: #000 !important;
  box-shadow: 0 10px 30px rgba(255,215,0,0.16),
              0 0 40px rgba(255,215,0,0.10) inset;
  transform: translateY(-2px);
}

/* Ensure active/selected states still read well when using gold hover */
nav a.active, .view-link.active {
  background: linear-gradient(90deg, #ffd700, #ffb347);
  color: #000;
}

/* Small accessibility: increase hit area for view buttons */
.view-link {
  padding: 12px 14px;
}

/* ===== Flatpickr inline calendar overrides =====
   Fix layout conflicts caused by multiple earlier rules and ensure
   inline calendar stretches to its container, days wrap correctly,
   and month header centers. These are non-breaking, high-specificity
   overrides applied last so they take precedence. ===== */
.flatpickr-calendar.inline,
.todo-app-scope .flatpickr-calendar.inline {
  position: static !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.flatpickr-calendar {
  font-family: inherit !important;
}

.flatpickr-months {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
}

.flatpickr-month {
  height: 34px !important;
  background: transparent !important;
}

.flatpickr-current-month {
  font-size: 14px !important;
  padding: 0 !important;
}

.flatpickr-weekdays {
  background: transparent !important;
  margin-bottom: 8px !important;
}

.flatpickr-weekday {
  font-size: 12px !important;
  color: #666 !important;
  font-weight: normal !important;
  background: transparent !important;
}

.flatpickr-days {
  border: none !important;
  padding: 0 !important;
}

.dayContainer {
  padding: 0 !important;
  gap: 4px !important;
}

.flatpickr-months {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
}

.flatpickr-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.flatpickr-days .dayContainer {
  display: contents !important;
}

.flatpickr-day {
  box-sizing: border-box !important;
  padding: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 13px !important;
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flatpickr-day.selected {
  background: #FFB700 !important;
  color: #000 !important;
  font-weight: 600 !important;
}

.flatpickr-day:hover:not(.selected) {
  background: #161616 !important;
}

.flatpickr-day.today {
  border: none !important;
  background: #161616 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #666 !important;
}

/* If multiple months are shown, ensure they flow side-by-side nicely */
.flatpickr-months .flatpickr-month {
  min-width: 180px !important;
}

/* constrain calendar container in sidebar so calendar doesn't expand too wide */
.todo-app-scope #calendar-container {
  max-width: none;
}

/* keep arrow SVGs vertically centered */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Focus styles for keyboard navigation */
.flatpickr-day:focus {
  outline: 2px solid var(--accent-blue, #0037ff) !important;
  outline-offset: -2px !important;
}

.flatpickr-weekday:focus {
  outline: 2px solid var(--accent-blue, #0037ff) !important;
  outline-offset: -2px !important;
}

/* Responsive: reduce gap and height on screens narrower than 480px */
@media (max-width: 480px) {
  .flatpickr-days {
    gap: 2px !important;
    padding: 4px !important;
  }
  
  .flatpickr-day {
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    margin: 1px !important;
  }
  
  .flatpickr-weekday {
    font-size: 11px !important;
    height: 24px !important;
    line-height: 24px !important;
  }
  
  .flatpickr-months .flatpickr-month {
    min-width: 140px !important;
  }
}

/* Responsive: adjust for medium screens (480px - 768px) */
@media (max-width: 768px) {
  .flatpickr-days {
    gap: 3px !important;
  }
  
  .flatpickr-day {
    height: 32px !important;
    line-height: 32px !important;
    font-size: 12px !important;
  }
}

/* End overrides */

/* === Final calendar polish overrides (high specificity to override earlier rules) === */
:root {
  --accent-gold-start: #ffd700;
  --accent-gold-end: #ffb347;
  --selected-gradient: linear-gradient(90deg, var(--accent-gold-start), var(--accent-gold-end));
  --today-glow: rgba(255,183,25,0.12);
}

/* Use a scoped selector to ensure these rules override previous flatpickr definitions */
.todo-app-scope .flatpickr-day.selected {
  background: var(--selected-gradient) !important;
  color: #000 !important;
  font-weight: 700 !important;
  /* simplified shadow for better parser compatibility */
  box-shadow: 0 10px 30px rgba(255,183,25,0.14) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transform: translateY(-3px) !important;
}

.todo-app-scope .flatpickr-day.today {
  background: rgba(255,183,25,0.03) !important;
  box-shadow: 0 6px 20px var(--today-glow) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,190,60,0.18) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.todo-app-scope .flatpickr-days .flatpickr-day {
  min-height: 46px !important;
  height: 46px !important;
  line-height: 46px !important;
  border-radius: 10px !important;
}

/* Slightly reduce outer gaps for a tighter grid similar to the screenshot */
.todo-app-scope .flatpickr-days {
  gap: 6px !important;
}

/* Make weekdays clearer and centered */
.todo-app-scope .flatpickr-weekday {
  color: rgba(220,220,230,0.75) !important;
  font-weight: 600 !important;
}

/* Ensure divider styling (already present above) applies within the todo-app scope */
.todo-app-scope .flatpickr-calendar .calendar-divider {
  background: rgba(255,255,255,0.03) !important;
  margin: 10px 0 12px 0 !important;
}

/* Small-screen tweak to keep day cells tappable but compact */
@media (max-width: 480px) {
  .todo-app-scope .flatpickr-days .flatpickr-day { height: 34px !important; line-height:34px !important; }
}

/* Calendar layout: unified weekday headers and day grid for consistent alignment */
.todo-app-scope .flatpickr-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 46px) !important;
  gap: 6px !important;
  padding: 0 6px !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.todo-app-scope .flatpickr-weekday {
  width: 46px !important;
  text-align: center !important;
  padding: 2px 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.78) !important;
}

/* Two-letter weekday labels for compact, even spacing */
.todo-app-scope .flatpickr-weekday:nth-child(1)::after { content: 'Su'; }
.todo-app-scope .flatpickr-weekday:nth-child(2)::after { content: 'Mo'; }
.todo-app-scope .flatpickr-weekday:nth-child(3)::after { content: 'Tu'; }
.todo-app-scope .flatpickr-weekday:nth-child(4)::after { content: 'We'; }
.todo-app-scope .flatpickr-weekday:nth-child(5)::after { content: 'Th'; }
.todo-app-scope .flatpickr-weekday:nth-child(6)::after { content: 'Fr'; }
.todo-app-scope .flatpickr-weekday:nth-child(7)::after { content: 'Sa'; }
.todo-app-scope .flatpickr-weekday > span { display: none !important; }

/* Day grid: fixed column widths to match weekday headers, centered */
.todo-app-scope .flatpickr-days {
  display: grid !important;
  grid-template-columns: repeat(7, 46px) !important;
  gap: 6px !important;
  justify-content: center !important;
  padding: 6px !important;
}

.todo-app-scope .flatpickr-day {
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  .todo-app-scope .flatpickr-weekdays,
  .todo-app-scope .flatpickr-days { grid-template-columns: repeat(7, 38px) !important; gap: 6px !important; }
  .todo-app-scope .flatpickr-day,
  .todo-app-scope .flatpickr-weekday { width: 38px !important; height: 38px !important; font-size:12px !important; }
}

/* Ensure month navigation controls remain visible regardless of selection state */
.todo-app-scope .flatpickr-months .flatpickr-prev-month,
.todo-app-scope .flatpickr-months .flatpickr-next-month {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  color: rgba(200,200,210,0.9) !important;
  background: transparent !important;
  transition: background-color 0.12s ease, transform 0.12s ease !important;
  z-index: 10 !important;
}

.todo-app-scope .flatpickr-months .flatpickr-prev-month:hover,
.todo-app-scope .flatpickr-months .flatpickr-next-month:hover {
  background: rgba(255,255,255,0.03) !important;
  transform: translateY(-2px) !important;
}

/* If the custom header (#current-month-display) is present, keep the nav arrows visible beside it */
.todo-app-scope #current-month-display {
  display: block !important;
}

/* Date Picker Section */
.date-picker-section {
  background: transparent;
  padding: 18px 0 28px;
  color: #e6eef2;
}

.date-picker-container {
  max-width: 820px;
  margin: 0 auto;
  background: #0f1113;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(3,6,8,0.6);
}

.date-picker-container h2 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 15px;
}

.date-picker-inputs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-size: 13px;
  color: #9aa0a6;
  font-weight: 500;
}

.input-group input {
  padding: 10px 12px;
  background: #1a1a1f;
  border: 1px solid #333;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  min-width: 150px;
}

.input-group input:focus {
  outline: none;
  border-color: #9ee37a;
  box-shadow: 0 0 0 2px rgba(158, 227, 122, 0.2);
}

#selected-date-output {
  color: #9ee37a;
  font-weight: 600;
  font-size: 14px;
  min-height: 20px;
}

@media (max-width: 640px) {
  .date-picker-inputs {
    flex-direction: column;
    gap: 12px;
  }
  .input-group input {
    min-width: 100%;
  }
}

/* Date Picker for Todo App Sidebar */
.date-picker-section-sidebar {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 12px 0;
}

.date-picker-section-sidebar h3 {
  font-size: 12px;
  font-weight: 600;
  color: #ccc;
  margin: 0 0 12px 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-picker-inputs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-group-sidebar label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.input-group-sidebar input {
  padding: 8px 10px;
  background: #1a1a1f;
  border: 1px solid #333;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
}

.input-group-sidebar input:focus {
  outline: none;
  border-color: #9ee37a;
  box-shadow: 0 0 0 2px rgba(158, 227, 122, 0.15);
}

/* Ensure text is white on non-todo pages */
body:not(.todo-app) {
  color: #ffffff;
}

body:not(.todo-app) h1,
body:not(.todo-app) h2,
body:not(.todo-app) h3,
body:not(.todo-app) h4,
body:not(.todo-app) h5,
body:not(.todo-app) h6,
body:not(.todo-app) p,
body:not(.todo-app) span,
body:not(.todo-app) a,
body:not(.todo-app) li,
body:not(.todo-app) div,
body:not(.todo-app) main,
body:not(.todo-app) section,
body:not(.todo-app) article {
  color: #ffffff !important;
}

body:not(.todo-app) a:hover {
  color: #ffffff;
}

/* ===== SCROLLING CSS ===== */
/* Enhanced Scrolling and Container Management */
html, body {
    overflow-x: hidden;
    min-height: 100vh;
    scrollbar-gutter: stable;
}

body {
    overflow-y: auto;
    overflow-x: hidden;
}

.app-container {
    overflow: hidden;
    position: relative;
}

.main-content {
    overflow: auto;
    scrollbar-gutter: stable;
    padding: 20px 24px;
}

.task-section {
    overflow: visible;
    margin-bottom: 24px;
}

.task-list {
    overflow-x: auto;
    overflow-y: auto;
    min-width: min-content;
    padding-bottom: 8px;
}

.task-item {
    min-width: max-content;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
}

.container {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.container, 
.hero-inner, 
.feature,
.todo-app-scope #summary {
    overflow-y: auto;
    max-height: 90vh;
}

.container-wide,
.feature-grid,
.hero,
.site-header {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .container {
        max-height: none;
    }
    
    .todo-app-scope #summary {
        max-height: 70vh;
    }
}

/* ===== NAV-FIXES CSS ===== */
/* Hide scrollbar for navigation */
nav::-webkit-scrollbar {
    display: none;
}

/* Allow dropdowns to overflow the fixed nav */
nav {
    overflow-y: visible !important;
}

/* Navigation links */
nav a {
    white-space: nowrap;
    min-width: fit-content;
    position: relative;
    overflow: visible;
}

/* Dropdown container */
nav .dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content */
nav .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: rgba(18, 18, 24, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    backdrop-filter: blur(10px);
    margin-top: 8px;
}

/* Show dropdown on hover */
nav .dropdown:hover .dropdown-content {
    display: block;
    animation: fadeInDown 0.2s ease-out;
}

/* Make dropdown accessible via keyboard */
nav .dropdown:focus-within .dropdown-content {
    display: block;
    animation: fadeInDown 0.2s ease-out;
}

/* Show dropdown when toggled via JS by adding .open */
nav .dropdown.open .dropdown-content {
    display: block;
    animation: fadeInDown 0.18s ease-out;
}

/* Make the dropdown toggle visually interactive when used as a button */
nav .dropdown > a[role="button"] {
    cursor: pointer;
}

/* Dropdown links */
nav .dropdown-content a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: white;
    transition: all 0.2s ease;
}

nav .dropdown-content a:hover {
    background: linear-gradient(90deg, #ffd700, #ffb347);
    color: #000;
}

/* Dropdown animation */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Active dropdown item */
nav .dropdown-content a.active {
    background: linear-gradient(90deg, #ffd700, #ffb347);
    color: #000;
}

/* ===== TEAM PAGE STYLES ===== */
/* Team member grid layout */
main.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 20px 12px;
}

main.container h2 {
    grid-column: 1 / -1;
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.team-member:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.team-member p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #e0e0e0;
}

.team-member strong {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: #ffffff;
}

@media (max-width: 768px) {
    main.container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .team-member {
        padding: 10px;
    }
    
    .team-member img {
        width: 100px;
        height: 100px;
    }
}

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

/* === MODAL STYLES === */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.open {
    display: flex;
}

.modal-content {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #888888;
}

.modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #aaaaaa;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: flex-end;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #888888;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

.form-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: #d4af37;
    color: #aaaaaa;
}

.reminder-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 12px;
}

.reminder-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reminder-input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s ease;
}

.reminder-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
}

.reminder-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.reminder-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reminder-select:hover {
    background: rgba(255, 255, 255, 0.05);
}

.reminder-select:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
}

.reminder-select option {
    background: #1a1a2e;
    color: var(--text-primary);
}

.reminder-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.reminder-section {
    display: flex;
    flex-direction: column;
}

.form-btn {
    padding: 8px 16px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    white-space: nowrap;
    flex: 1;
}

.form-btn:hover {
    background: #0030cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 55, 255, 0.2);
}

.form-btn.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.form-btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.reminder-display {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}

.reminder-set {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #88dd00;
}

.reminder-set strong {
    font-weight: 600;
    margin-right: 8px;
}

.reminder-info {
    flex: 1;
}

.reminder-frequency,
.reminder-notification {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.btn-clear {
    padding: 6px 12px;
    background: #d4af37;
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-clear:hover {
    background: #e0bc47;
}

.btn-primary, .btn-secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-primary {
    background: #d4af37;
    color: #000;
}

.btn-primary:hover {
    background: #e0bc47;
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* === TEXT STYLE CLASSES === */
.text-bold {
    font-weight: 700 !important;
}

.text-italic {
    font-style: italic !important;
}

.text-underline {
    text-decoration-line: underline !important;
}

.text-strikethrough {
    text-decoration-line: line-through !important;
    color: #888 !important;
}

/* Combinations of text-underline and text-strikethrough */
.text-underline.text-strikethrough {
    text-decoration-line: underline line-through !important;
}

/* === EDIT BUTTON === */
.edit-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.edit-btn:hover {
    color: #d4af37;
    transform: scale(1.1);
}

/* === NOTIFICATION REMINDER STYLE === */
.notification-reminder {
    background: linear-gradient(135deg, #88dd00 0%, #6ab800 100%) !important;
    color: #000 !important;
}

.notification-reminder strong {
    color: #000;
}

/* === TEXT STYLE TOOLBAR === */
.text-style-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.style-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #888888;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    min-width: 40px;
}

.style-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #aaaaaa;
}

.style-btn.active {
    background: #d4af37;
    border-color: #d4af37;
    color: #000;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4) inset, 0 4px 8px rgba(212, 175, 55, 0.2);
    font-weight: 700;
}

.style-btn.active:hover {
    background: #e0bc47;
    box-shadow: 0 0 16px rgba(224, 188, 71, 0.5) inset, 0 6px 12px rgba(224, 188, 71, 0.3);
}

.style-btn strong,
.style-btn em,
.style-btn u,
.style-btn s {
    font-size: 13px;
}

/* === LOADING AND VISUAL FEEDBACK === */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.style-indicator {
    display: inline-flex;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    color: #666;
}

.style-tag {
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid #d4af37;
    border-radius: 4px;
    padding: 2px 8px;
    color: #d4af37;
    font-weight: 500;
}