:root{
  --bg:#f6f7fb; --card:#fff; --ink:#1f2937; --muted:#6b7280; --border:#e5e7eb;
  --primary:#6c8ef5; --primary-600:#587cf0; --primary-700:#4a6ce0;
  --success:#5fc8a7; --warning:#f4c28b; --progress:#a4cafe;
  --shadow-sm:0 4px 12px rgba(17,24,39,.06);
  --shadow-md:0 10px 30px rgba(17,24,39,.1);
  --fc-border-color:var(--border); --fc-page-bg-color:var(--bg);
  --fc-neutral-bg-color:#fafbff; --fc-list-event-hover-bg-color:#f6f7fb;
  --radius:12px; --radius-lg:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0; padding:0; background:radial-gradient(circle at top left, #eef2ff, #f8fbff 55%, #edf4ff);
  color:var(--ink);
}

.app-body{ padding:48px 32px 80px; min-height:100vh; }
.app-shell{
  max-width:1120px; margin:0 auto; display:flex; flex-direction:column; gap:32px;
}

.hero{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  background:linear-gradient(120deg, rgba(255,255,255,.95), rgba(238,242,255,.95));
  border-radius:var(--radius-lg); padding:28px 32px; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.hero-copy{ flex:1 1 320px; display:flex; flex-direction:column; gap:10px; }
.hero h1{ margin:0; font-size:30px; line-height:1.25; font-weight:600; }
.hero p{ margin:0; color:var(--muted); max-width:420px; font-size:15px; line-height:1.6; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end; min-width:220px; }

.panel{
  background:var(--card);
  border:1px solid rgba(148,163,184,.25);
  border-radius:var(--radius-lg);
  padding:5px;
  box-shadow:var(--shadow-sm);
  position:relative;
}

.panel-header{
  display:flex;
  margin-top:10px;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  flex-wrap:wrap;
}

.panel-header-actions{
  display:flex;
  align-items:center;
  gap:5px;
}

.panel-title{
  font-size:18px;
  font-weight:600;
  color:#1f2937;
  line-height:1.4;

  margin-left:10px;
  padding-right:40px;
}

.filter-panel .panel-title{
  font-size:20px;
}

.collapsible-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(108,142,245,.35);
  background:#eef2ff;
  color:var(--primary-700);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  box-shadow:0 4px 12px rgba(108,142,245,.18);
  padding:0;
  line-height:1;
  position:absolute;
  top:5px;
  right:5px;
  transform-origin:center;
}
.collapsible-trigger:hover{
  background:#e0e7ff;
  border-color:rgba(88,124,240,.6);
}
.collapsible-trigger:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(108,142,245,.35);
}
.collapsible-trigger:active{
  transform:scale(.95);
}

.chevron-icon{
  width:18px;
  height:18px;
  transition:transform .25s ease;
}

.panel.is-collapsed .chevron-icon{
  transform:rotate(180deg);
}

.collapsible-content{
  overflow:hidden;
  transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
  margin-top:5px;
  padding:5px;
  opacity:1;
}

.collapsible-content.is-collapsed{
  margin-top:0;
  opacity:0;
  pointer-events:none;
}
.filter-panel .panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:5px;
  flex-wrap:wrap;
}

.filter-groups{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.filter-group{ display:flex; flex-direction:column; gap:12px; }
.filter-group-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.filter-group-header h3{ margin:0; font-size:15px; color:#334155; }
.select-toggle{
  display:flex; align-items:center; gap:8px; font-weight:600; color:var(--primary);
  background:#eef2ff; padding:6px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(108,142,245,.35);
}
.select-toggle input{ accent-color:var(--primary); width:16px; height:16px; }
.filter-chip{ display:inline-flex; }
.filter-chip input{ display:none; }
.filter-chip-pill{ display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid currentColor; background:#fff; transition:all .2s; }
.filter-chip-pill:hover{ box-shadow:0 6px 18px rgba(79,70,229,.12); transform:translateY(-2px); }
.filter-chip-pill.selected{ opacity:.45; }
.status-pill--pending{ background:#fef3c7; border-color:#fde68a; color:#92400e; }
.status-pill--in-progress{ background:#e0f2fe; border-color:#bae6fd; color:#0369a1; }
.status-pill--complete{ background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.status-pill--rejected{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
.type-pill--feature{ background:#fff; border-color:#4F46E5; color:#4F46E5; }
.type-pill--bug{ background:#fff; border-color:#DC2626; color:#DC2626; }
.type-pill--scheduled{ background:#fff; border-color:#059669; color:#059669; }
.type-pill--announcement{ background:#fff; border-color:#7C3AED; color:#7C3AED; }

.status-chip-grid,
.type-chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

/* .calendar-panel{ padding:5px; } */
.footer-actions{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.footer-actions .panel-title{
  font-size:18px;
}
.footer-actions-body{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
}

.page-footer{
  text-align:center; padding:12px 0 0; margin-top:-12px;
  color:var(--muted); font-size:13px;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:24px;
  align-items:start;
}
.today-summary .summary-header{
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.today-summary .summary-header .panel-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
}
.today-summary .summary-header .summary-total{ margin-left:0; }
.today-summary .summary-header .collapsible-trigger{
  margin-left:auto;
}
.week-summary .summary-header{ align-items:center; }
.summary-total{ font-weight:600; color:var(--primary-700); background:#eef2ff; padding:6px 14px; border-radius:999px; font-size:12px; }
.summary-list{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.summary-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border:1px solid rgba(148,163,184,.25); border-radius:10px;
  background:#f9fbff; box-shadow:0 2px 8px rgba(15,23,42,.05);
  position:relative;
}
.summary-label:hover + .summary-tooltip,
.summary-label:focus + .summary-tooltip,
.summary-tooltip:hover,
.summary-tooltip:focus-within{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.summary-dot{
  display:inline-block;
  width:8px; height:8px; border-radius:50%;
  border:2px solid transparent;
  background:#fff;
}
.summary-meta{ display:flex; flex-direction:column; gap:4px; }
.summary-subrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.summary-type{ font-size:10px; font-weight:600; }
.summary-label{ font-weight:600; font-size:12px; color:#1f2937; cursor:help; position:relative; }
.summary-count{ margin-left:auto; font-weight:600; color:#0f172a; font-size:11px; padding:3px 8px; border-radius:999px; background:#e2e8ff; }
.summary-status{
  align-self:flex-start;
  border:1px solid rgba(108,142,245,.55);
  background:#eef2ff;
  color:var(--primary-700);
  font-size:10px;
  font-weight:600;
  padding:3px 24px 3px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  min-width:160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23587cf0' d='M6 8a.75.75 0 0 1-.53-.22l-5-5a.75.75 0 1 1 1.06-1.06L6 6.19l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5A.75.75 0 0 1 6 8Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
}
.summary-status:hover{ box-shadow:0 4px 12px rgba(15,23,42,.08); }
.summary-status:focus{ outline:none; box-shadow:0 0 0 3px rgba(108,142,245,.25); }
.summary-status:disabled{ opacity:.6; cursor:wait; }
.summary-status[data-status="pending"]{
  background:#fef3c7;
  border-color:#f59e0b;
  color:#92400e;
}
.summary-status[data-status="in-progress"]{
  background:#e0f2fe;
  border-color:#3b82f6;
  color:#0f4a8a;
}
.summary-status[data-status="complete"]{
  background:#dcfce7;
  border-color:#22c55e;
  color:#166534;
}
.summary-status[data-status="rejected"]{
  background:#fee2e2;
  border-color:#ef4444;
  color:#b91c1c;
}
.summary-tooltip{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  background:rgba(15,23,42,.92);
  color:#fff;
  padding:12px 14px;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(15,23,42,.2);
  opacity:0;
  visibility:hidden;
  transform:translate(calc(var(--tooltip-shift, 0px)), -6px);
  transition:opacity .15s ease, transform .15s ease;
  z-index:999;
  pointer-events:none;
  max-width:min(360px, calc(100vw - 36px));
  width:max-content;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.summary-tooltip::before{
  content:'';
  position:absolute;
  left:20px;
  top:-8px;
  border-width:8px;
  border-style:solid;
  border-color:transparent transparent rgba(15,23,42,.92) transparent;
  transform:translateX(calc(var(--tooltip-shift, 0px)));
}
.summary-tooltip-title{
  display:block;
  font-weight:600;
  font-size:13px;
  margin-bottom:6px;
}
.summary-tooltip-desc{
  display:block;
  font-size:12px;
  line-height:1.5;
  color:#e2e8f0;
  white-space:normal;
}
.summary-empty{
  margin:16px 0 0; font-size:13px; color:var(--muted);
}
.summary-empty[hidden]{ display:none; }

.pill-picker {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.pill-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background-color:#fff;
  cursor:pointer;
  transition:all 0.2s;
  flex:1 1 calc(50% - 10px);
  min-width:150px;
}

.week-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
}
.week-card{
  background:#f9fbff;
  border:1px solid rgba(148,163,184,.25);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.week-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.week-day{
  font-weight:600;
  color:#1f2937;
  font-size:14px;
}
.week-date{
  display:block;
  font-size:12px;
  color:#64748b;
}
.week-count{
  font-size:7px;
  font-weight:600;
  color:#0f172a;
  padding:3px 3px;
  border-radius:999px;
  background:#e2e8ff;
}
.week-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.week-list li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#334155;
  line-height:1.4;
  position:relative;
}
.week-task{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  position:relative;
  cursor:default;
  color:inherit;
}
.week-task-label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.week-task-tooltip{
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  background:rgba(15,23,42,.5);
  color:#fff;
  padding:10px 12px;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(15,23,42,.2);
  max-width:280px;
  opacity:0;
  visibility:hidden;
  transform:translate(calc(-50% + var(--tooltip-shift, 0px)), -4px);
  transition:opacity .15s ease, transform .15s ease;
  z-index:999;
  pointer-events:none;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.week-task-tooltip::before{
  content:'';
  position:absolute;
  left:50%;
  top:-6px;
  border-width:6px;
  border-style:solid;
  border-color:transparent transparent rgba(15,23,42,.5) transparent;
  transform:translateX(calc(-50% + var(--tooltip-shift, 0px)));
}
.week-task:hover .week-task-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.week-task-tooltip-title{
  display:block;
  font-weight:600;
  font-size:10px;
  margin-bottom:4px;
}
.week-task-tooltip-desc{
  display:block;
  font-size:8px;
  line-height:1.4;
  white-space:normal;
}
.calendar-event{
  position:relative;
  cursor:pointer;
  overflow:visible !important;
  z-index:1;
}
.calendar-event:hover,
.calendar-event:focus-within{
  z-index:1000;
}
.calendar-event-tooltip{
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  background:rgba(15,23,42,.5);
  color:#fff;
  padding:12px 14px;
  border-radius:10px;
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  opacity:0;
  visibility:hidden;
  transform:translate(calc(-50% + var(--tooltip-shift, 0px)), -6px);
  transition:opacity .15s ease, transform .15s ease;
  z-index:999;
  min-width:220px;
  max-width:300px;
  pointer-events:none;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.calendar-event-tooltip::before{
  content:'';
  position:absolute;
  left:50%;
  top:-8px;
  border-width:8px;
  border-style:solid;
  border-color:transparent transparent rgba(15,23,42,.5) transparent;
  transform:translateX(calc(-50% + var(--tooltip-shift, 0px)));
}
.calendar-event:hover .calendar-event-tooltip,
.calendar-event:focus-within .calendar-event-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.calendar-event-tooltip-title{
  display:block;
  font-weight:600;
  font-size:10px;
  margin-bottom:6px;
}
.calendar-event-tooltip-meta{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-bottom:6px;
}
.calendar-event-tooltip-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:8px;
  font-weight:600;
  border:1px solid currentColor;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.calendar-event-tooltip-chip--status{
  background:rgba(255,255,255,.12);
}
.calendar-event-tooltip-desc{
  display:block;
  font-size:8px;
  line-height:1.45;
  color:#e2e8f0;
  white-space:normal;
}
.week-bullet{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
  border:2px solid transparent;
  background:#fff;
}
.week-type{
  font-size:8px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.week-empty-text{
  font-style:italic;
  color:#94a3b8;
}

/* Calendar card */
#calendar{
  max-width:1100px; margin:0 auto; background:var(--card); padding:28px;
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}

/* FullCalendar soften */
.fc{
  --fc-today-bg-color:rgba(108,142,245,.14);
  font-size:13px;
}


.fc .fc-toolbar.fc-header-toolbar{
  margin-bottom:16px; display:flex; justify-content:space-between; align-items:center;
}
.fc .fc-button{
  border:1px solid var(--border); background:#fff; color:var(--ink);
  border-radius:999px; padding:8px 16px; box-shadow:none;
  transition:background .2s, box-shadow .2s, transform .05s;
  height:auto; min-width:36px;
}
.fc .fc-button:hover{ background:#eef2ff; box-shadow:var(--shadow-sm); }
.fc .fc-button:active{ transform:translateY(1px); }
.fc .fc-button-primary{ background:white; border-color:var(--border); color:var(--ink); }
.fc .fc-button-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); color:#fff; }
.fc .fc-button-primary:disabled{ background:#cbd5e1; border-color:#cbd5e1; color:#fff; }
.fc-theme-standard .fc-scrollgrid{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; }
.fc .fc-col-header-cell{ background:#f8faff; }
.fc .fc-col-header-cell-cushion{ padding:12px 0; font-weight:600; font-size:13px; color:#334155; }
.fc .fc-daygrid-day{ transition:background .2s ease; }
.fc .fc-daygrid-day:hover{ background:#f5f8ff; }
.fc .fc-daygrid-day-frame{ padding:10px 0px; }
.fc .fc-daygrid-day-number{ font-weight:600; color:#475569; }
.fc-event,.fc-daygrid-event{
  border:1px solid transparent; border-radius:12px; padding:6px 10px;
  margin-top:6px; box-shadow:0 4px 10px rgba(15,23,42,.12); font-weight:500;
}
.fc .fc-daygrid-event-harness{ margin-bottom:4px; }
.fc .fc-daygrid-day-events{ margin:6px 0 0; }
.fc .fc-daygrid-day-top{ align-items:flex-start; }



/* Floating add button */
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#addEventButton{
  position:fixed; bottom:24px; right:24px;
  padding:12px 20px; font-size:12px; border-radius:26px;
  background: linear-gradient(-45deg, #6c8ef5, #a4cafe, #5fc8a7, #f4c28b);
  background-size: 400% 400%;
  color:#fff; border:0; cursor:pointer;
  box-shadow: 0 0 20px rgba(108, 142, 245, 0.4);
  animation: gradient-animation 15s ease infinite;
  transition:transform .15s, box-shadow .2s;
  z-index: 99;
}

#addEventButton:hover{
  transform:translateY(-2px);
  box-shadow: 0 0 30px rgba(108, 142, 245, 0.7);
  animation-play-state: paused;
}

.btn-animated-gradient-1{
  background-image: linear-gradient(-45deg, #6c8ef5, #a4cafe);
  background-size: 400% 400%;
  background-color: transparent;
  color:#fff; border:0; cursor:pointer;
  box-shadow: 0 0 20px rgba(108, 142, 245, 0.4);
  animation: gradient-animation 15s ease infinite;
  transition:transform .15s, box-shadow .2s;
}

.btn-animated-gradient-1:hover{
  transform:translateY(-2px);
  box-shadow: 0 0 30px rgba(108, 142, 245, 0.7);
  animation-play-state: paused;
}

.btn-animated-gradient-2{
  background-image: linear-gradient(-45deg, #ffffff, #dadada);
  background-size: 400% 400%;
  background-color: transparent;
  color:#000000; border:0; cursor:pointer;
  box-shadow: 0 0 20px rgba(108, 142, 245, 0.4);
  animation: gradient-animation 15s ease infinite;
  transition:transform .15s, box-shadow .2s;
  border: 1px solid #1f2937;
}

.btn-animated-gradient-2:hover{
  transform:translateY(-2px);
  box-shadow: 0 0 30px rgba(108, 142, 245, 0.7);
  animation-play-state: paused;
}

.telegram-config-button,
.check-due-tasks-button{
  padding:8px 14px; font-size:12px; border-radius:12px;
  border:none; min-width:140px; text-transform:none; letter-spacing:.01em;
}
.check-due-tasks-button{ color:#1f2937; border:1px solid rgba(30,41,59,.22); background:#fff; }
.check-due-tasks-button:hover{ background:#f1f5ff; }

/* Modal shell */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  padding:32px 16px;
  backdrop-filter:blur(6px);
  background:rgba(15,18,28,.45);
  animation:fadeIn .25s ease-out;
  align-items:center;
  justify-content:center;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.modal-content{
  width:min(540px, 100%);
  max-height:90vh;
  background:var(--card);
  border-radius:20px;
  box-shadow:0 22px 45px rgba(15,23,42,.18);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
}
.modal-content::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg, rgba(108,142,245,.18), rgba(95,200,167,.15));
  opacity:.35;
  pointer-events:none;
}
.modal-content > *{ position:relative; }

/* Modal header/body/footer */
.modal-header{
  padding:28px 32px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(180deg, rgba(238,242,255,.95), rgba(255,255,255,.96));
  border-bottom:1px solid rgba(148,163,184,.25);
}
.modal-title-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.modal-title-wrap h2{
  margin:0;
  font-size:20px;
  font-weight:600;
  color:#1f2937;
}
.modal-subtitle{
  margin:0;
  color:#607089;
  font-size:13px;
}
.close-button{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(99,102,241,.2);
  color:#64748b;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, color .15s;
}
.close-button:hover{
  color:#4a6ce0;
  transform:scale(1.05);
  box-shadow:0 6px 18px rgba(79,70,229,.2);
}

.modal-container{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:24px 32px 28px;
  overflow:hidden;
}
.modal-body{
  margin:0;
  padding:0;
  flex:1;
  overflow:auto;
  padding-right:6px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.modal-footer{
  margin:0;
  padding-top:18px;
  border-top:1px solid rgba(148,163,184,.25);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
}

#loginModal .modal-footer{
  justify-content:flex-start;
  padding-top:12px;
}

/* Form grid */
.modal-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.field-group{ display:flex; flex-direction:column; }
.field--full{ grid-column:1 / -1; }

label{ margin-bottom:6px; font-weight:600; color:#2b3442; font-size:13px; }
input,textarea,select{
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px;
  background:#fff; color:var(--ink); font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--primary-600); box-shadow:0 0 0 3px rgba(108,142,245,.18);
}

/* Details list (view modal) */
.details-list{ margin:0 0 8px 0; padding:0; }
.details-row{
  display:grid; grid-template-columns:140px 1fr; gap:8px 14px; align-items:start;
  padding:8px 0; border-bottom:1px dashed var(--border);
}
.details-row:last-child{ border-bottom:0; }
.details-row dt{ margin:0; color:var(--muted); font-weight:600; font-size:13px; }
.details-row dd{ margin:0; font-size:14px; color:var(--ink); word-break:break-word; }



/* Buttons */
button{ font-family:inherit; font-weight:600; border-radius:8px; border:none; cursor:pointer; transition:all .2s; }
.btn-primary{ background:var(--primary); color:#fff; padding:8px 14px; font-size:12px; box-shadow:0 2px 8px rgba(17,24,39,.08); }
.btn-primary:hover{ background:var(--primary-600); }
.btn-secondary{ background:#f4f5fa; color:#394867; padding:8px 14px; font-size:12px; }
.btn-secondary:hover{ background:#eaeefb; }
.btn-danger{ background:#ef6b78; color:#fff; padding:8px 14px; font-size:12px; }
.btn-danger:hover{ background:#e35463; }

/* Selection Pills */
.pill-option:hover {
  background-color:#f4f6ff;
}
.pill-option.selected {
  background-color:#eef5ff;
  box-shadow:0 4px 14px rgba(108,142,245,.18);
}
.pill-chip,
.type-chip,
.status-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 2px;
  border-radius:999px;
  font-size:8px;
  font-weight:600;
  border:1px solid currentColor;
  transition:all .2s;
}
.type-chip{ background:#fff; }
.type-pill--feature{ color:#4F46E5; border-color:#4F46E5; background:#fff; }
.type-pill--bug{ color:#DC2626; border-color:#DC2626; background:#fff; }
.type-pill--scheduled{ color:#059669; border-color:#059669; background:#fff; }
.type-pill--announcement{ color:#FF69B4; border-color:#FF69B4; background:#fff; }
.status-chip--pending{ background:#fef3c7; border-color:#fde68a; color:#92400e; }
.status-chip--in-progress{ background:#e0f2fe; border-color:#bae6fd; color:#0369a1; }
.status-chip--complete{ background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.status-chip--rejected{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
.pill-option.selected .pill-chip{
  transform:translateY(-1px);
}

.tick {
  margin-left:auto;
  color: var(--primary);
  font-weight: bold;
  opacity:0;
  transition:opacity 0.2s;
}

.pill-option.selected .tick {
  opacity: 1;
}

.flex-grow { flex-grow: 1; }

/* Filter Container */
.filter-options{ display:flex; flex-wrap:wrap; gap:12px; }

.loading-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(4px);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.loading-overlay.visible{
  opacity:1;
  pointer-events:auto;
}
.loading-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px 28px;
  border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow-md);
  min-width:180px;
}
.loading-spinner{
  width:42px;
  height:42px;
  border-radius:50%;
  border:4px solid rgba(99,102,241,.15);
  border-top-color:var(--primary);
  animation:loading-spin .8s linear infinite;
}
@keyframes loading-spin{
  to{transform:rotate(360deg);}
}
.loading-text{
  margin:0;
  font-weight:600;
  color:var(--primary-700);
  font-size:14px;
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 768px) {
  .app-body{ padding:32px 20px 72px; }
  .hero{ padding:28px; }
  .hero h1{ font-size:26px; }
  #calendar{ padding:16px; }
  .footer-actions-body{ justify-content:flex-start; width:100%; }
  .summary-grid{ grid-template-columns:1fr; gap:20px; }
  .filter-groups{ grid-template-columns:1fr; }
  .modal{ padding:24px 12px; }
  .modal-content{ max-height:88vh; border-radius:18px; }
  .modal-header{ padding:24px 20px 16px; }
  .modal-container{ padding:20px 20px 24px; }
}


p{
  font-size: 8px;
}