.calendar-page{
  --cal-bg: rgba(8, 16, 30, 0.76);
  --cal-stroke: rgba(255,255,255,0.1);
  --cal-text: #ebf2ff;
  --cal-muted: #aac0e8;
  --cal-accent: #61c2ff;
  --cal-ok: #2dd4bf;
  --cal-w1: #ffd400;
  --cal-w2: #ff8c00;
  --cal-w3: #ff2b2b;
  --cal-shadow: 0 22px 60px rgba(0,0,0,0.35);
  color: var(--cal-text);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calendar-hero,
.card-glass{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cal-stroke);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    var(--cal-bg);
  box-shadow: var(--cal-shadow);
}

.calendar-hero{
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.calendar-hero::before,
.card-glass::before{
  content:"";
  position:absolute;
  inset:auto -10% -60% auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97,194,255,0.16), rgba(97,194,255,0));
  pointer-events:none;
}

.calendar-eyebrow{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .76rem;
  color: #9ddcff;
  font-weight: 800;
  margin-bottom: 10px;
}

.calendar-hero h1{
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.02;
}

.calendar-lead{
  margin: 14px 0 0;
  max-width: 70ch;
  color: var(--cal-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.calendar-hero__meta{
  display: grid;
  gap: 14px;
}

.calendar-meta-card{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(6, 12, 24, 0.48);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-meta-card__label{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #87b6ec;
}

.calendar-meta-card strong{font-size:1.1rem}
.calendar-meta-card small{color:var(--cal-muted);line-height:1.5}

.calendar-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 18px;
  align-items:start;
}

.card-glass{padding: 20px}

.calendar-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.calendar-toolbar__nav,
.calendar-toolbar__meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.calendar-month{
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.calendar-select-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  color: var(--cal-muted);
  font-size: .88rem;
}

.calendar-select{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(5,12,24,0.72);
  color: var(--cal-text);
  border-radius: 14px;
  min-width: 220px;
  padding: 12px 14px;
}

.calendar-btn{
  appearance:none;
  border:1px solid rgba(97,194,255,0.36);
  background: linear-gradient(180deg, rgba(97,194,255,0.22), rgba(97,194,255,0.12));
  color: var(--cal-text);
  font-weight: 800;
  padding: 11px 15px;
  border-radius: 14px;
  cursor:pointer;
}

.calendar-btn:hover{background: linear-gradient(180deg, rgba(97,194,255,0.28), rgba(97,194,255,0.15));}
.calendar-btn--ghost{background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12);}
.calendar-btn--ghost:hover{background: rgba(255,255,255,0.08);}

.calendar-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-stat{
  padding: 14px 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(5,10,22,0.54);
}

.calendar-stat span{
  display:block;
  font-size: .84rem;
  color: var(--cal-muted);
  margin-bottom: 7px;
}

.calendar-stat strong{
  display:block;
  font-size: 1.45rem;
}

.calendar-weekdays,
.calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 10px;
}

.calendar-weekdays{margin-bottom:10px}
.calendar-weekdays span{
  padding: 8px 4px;
  text-align:center;
  font-size: .83rem;
  color: #99bce5;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.calendar-cell{
  min-height: 118px;
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(7,13,24,0.62);
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  text-align:left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.calendar-cell:hover{transform: translateY(-2px); border-color: rgba(97,194,255,0.28);}
.calendar-cell.is-selected{border-color: rgba(97,194,255,0.62); background: rgba(16,31,56,0.82);}
.calendar-cell.is-today{box-shadow: inset 0 0 0 1px rgba(97,194,255,0.62);}
.calendar-cell.is-empty{opacity:.34; cursor:default}
.calendar-cell.is-warning-1{background: linear-gradient(180deg, rgba(250,204,21,0.14), rgba(7,13,24,0.62));}
.calendar-cell.is-warning-2{background: linear-gradient(180deg, rgba(251,146,60,0.16), rgba(7,13,24,0.62));}
.calendar-cell.is-warning-3{background: linear-gradient(180deg, rgba(251,113,133,0.18), rgba(7,13,24,0.62));}

.calendar-cell__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.calendar-cell__day{
  font-size: 1.1rem;
  font-weight: 900;
}
.calendar-cell__today{
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  background: rgba(97,194,255,0.18);
  color: #b9e7ff;
}
.calendar-cell__badges{display:flex;flex-wrap:wrap;gap:6px}
.calendar-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .74rem;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--cal-text);
}
.calendar-pill--warn-1{background: rgba(250,204,21,0.16); color: #fde68a;}
.calendar-pill--warn-2{background: rgba(251,146,60,0.18); color: #fdba74;}
.calendar-pill--warn-3{background: rgba(251,113,133,0.18); color: #fda4af;}
.calendar-pill--notes{background: rgba(45,212,191,0.14); color: #9ff5e7;}
.calendar-cell__titles{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.calendar-cell__titles span{
  color: var(--cal-muted);
  font-size: .8rem;
  line-height: 1.34;
}

.calendar-side{display:flex;flex-direction:column;gap:18px; position:sticky; top:84px}
.calendar-side__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}
.calendar-side__eyebrow{
  color:#8fb8ef;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  margin-bottom:6px;
}
.calendar-day-card h2,
.calendar-form-card h3,
.calendar-block__head h3{margin:0}
.calendar-side__badge{
  border-radius:999px;
  padding:7px 12px;
  font-size:.78rem;
  font-weight:800;
  background: rgba(255,255,255,0.06);
  color: var(--cal-muted);
}
.calendar-side__badge.is-warning-1{background: rgba(250,204,21,0.16); color: #fde68a;}
.calendar-side__badge.is-warning-2{background: rgba(251,146,60,0.18); color: #fdba74;}
.calendar-side__badge.is-warning-3{background: rgba(251,113,133,0.18); color: #fda4af;}
.calendar-side__badge.is-ok{background: rgba(45,212,191,0.14); color: #9ff5e7;}

.calendar-day-summary{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.calendar-day-summary__item{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,10,22,0.52);
}
.calendar-day-summary__item span{display:block;font-size:.8rem;color:var(--cal-muted);margin-bottom:6px}
.calendar-day-summary__item strong{display:block;font-size:1rem}

.calendar-block{display:flex;flex-direction:column;gap:10px}
.calendar-block + .calendar-block{margin-top:20px}
.calendar-block__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.calendar-block__head small{color:var(--cal-muted);line-height:1.45;max-width:240px;text-align:right}

.calendar-warning-list,
.calendar-note-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.calendar-warning-item,
.calendar-note-item,
.calendar-empty{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(5,10,22,0.52);
  padding: 13px 14px;
}
.calendar-empty{color:var(--cal-muted);line-height:1.55}
.calendar-warning-item__head,
.calendar-note-item__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:8px;
}
.calendar-warning-item__title,
.calendar-note-item__title{font-weight:800;font-size:1rem}
.calendar-warning-item__meta,
.calendar-note-item__meta{font-size:.82rem;color:var(--cal-muted);line-height:1.45}
.calendar-warning-item__body,
.calendar-note-item__body{font-size:.94rem;line-height:1.58;color:#d7e6ff;white-space:pre-wrap}
.calendar-note-item__author{font-size:.8rem;color:#9fdcff;font-weight:700}
.calendar-warning-level{
  border-radius:999px;
  padding:5px 9px;
  font-size:.74rem;
  font-weight:800;
}
.calendar-warning-level.level-1{background: rgba(250,204,21,0.16); color: #fde68a;}
.calendar-warning-level.level-2{background: rgba(251,146,60,0.18); color: #fdba74;}
.calendar-warning-level.level-3{background: rgba(251,113,133,0.18); color: #fda4af;}

.calendar-form{display:flex;flex-direction:column;gap:12px}
.calendar-form label{display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:#dce8fd}
.calendar-form input,
.calendar-form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(5,12,24,0.76);
  color: var(--cal-text);
  padding: 12px 14px;
  outline:none;
}
.calendar-form input:focus,
.calendar-form textarea:focus,
.calendar-select:focus{
  border-color: rgba(97,194,255,0.44);
  box-shadow: 0 0 0 3px rgba(97,194,255,0.12);
}
.calendar-form textarea{resize:vertical; min-height:140px}
.calendar-form__actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.calendar-form__status{color:var(--cal-muted);font-size:.9rem;line-height:1.5;max-width:360px}
.calendar-form__status.is-error{color:#fda4af}
.calendar-form__status.is-success{color:#9ff5e7}

@media (max-width: 1180px){
  .calendar-hero,
  .calendar-layout{grid-template-columns:1fr}
  .calendar-side{position:static}
}

@media (max-width: 760px){
  .calendar-hero,
  .card-glass{padding:16px}
  .calendar-weekdays,
  .calendar-grid{gap:6px}
  .calendar-cell{min-height:96px;padding:10px;border-radius:14px}
  .calendar-cell__day{font-size:1rem}
  .calendar-cell__titles span{font-size:.72rem}
  .calendar-stats,
  .calendar-day-summary{grid-template-columns:1fr}
  .calendar-toolbar{align-items:stretch}
  .calendar-toolbar__nav,
  .calendar-toolbar__meta{width:100%}
  .calendar-toolbar__nav .calendar-btn{flex:1}
  .calendar-select{min-width:0;width:100%}
  .calendar-block__head{flex-direction:column}
  .calendar-block__head small{text-align:left;max-width:none}
  .calendar-form__actions .calendar-btn{width:100%}
}


.calendar-month-input{
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(5,12,24,0.72);
  color: var(--cal-text);
  border-radius: 14px;
  min-width: 190px;
  padding: 11px 14px;
}

.calendar-legend{
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(5,10,22,0.54);
}

.calendar-legend__title{
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#9fdcff;
  margin-bottom:10px;
}

.calendar-legend__items{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}

.calendar-legend__item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.86rem;
  color:var(--cal-text);
}

.calendar-legend__swatch{
  width:14px;
  height:14px;
  border-radius:999px;
  display:inline-flex;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
}

.calendar-legend__swatch.is-quiet{background: rgba(29,185,84,0.24); border-color: rgba(29,185,84,0.5);}
.calendar-legend__swatch.is-warning-1{background: rgba(255,212,0,0.9); border-color: rgba(255,212,0,1);}
.calendar-legend__swatch.is-warning-2{background: rgba(255,140,0,0.9); border-color: rgba(255,140,0,1);}
.calendar-legend__swatch.is-warning-3{background: rgba(255,43,43,0.92); border-color: rgba(255,43,43,1);}
.calendar-legend small{display:block;margin-top:10px;color:var(--cal-muted);line-height:1.5}

.calendar-cell.is-warning-1{background: linear-gradient(180deg, rgba(255,212,0,0.18), rgba(7,13,24,0.70)); border-color: rgba(255,212,0,0.38);}
.calendar-cell.is-warning-2{background: linear-gradient(180deg, rgba(255,140,0,0.18), rgba(7,13,24,0.70)); border-color: rgba(255,140,0,0.38);}
.calendar-cell.is-warning-3{background: linear-gradient(180deg, rgba(255,43,43,0.18), rgba(7,13,24,0.72)); border-color: rgba(255,43,43,0.40);}
.calendar-cell.is-warning-live{animation: calendarWarningPulse 1.7s ease-in-out infinite;}

@keyframes calendarWarningPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0), inset 0 0 0 1px rgba(255,255,255,0.02); }
  45%{ box-shadow: 0 0 0 3px rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.08); }
  70%{ box-shadow: 0 0 0 5px rgba(255,255,255,0), 0 0 18px rgba(255,255,255,0.05); }
}

.calendar-pill--warn-1{background: rgba(255,212,0,0.18); color: #ffe573;}
.calendar-pill--warn-2{background: rgba(255,140,0,0.18); color: #ffc166;}
.calendar-pill--warn-3{background: rgba(255,43,43,0.18); color: #ff9f9f;}
.calendar-side__badge.is-warning-1{background: rgba(255,212,0,0.18); color: #ffe573;}
.calendar-side__badge.is-warning-2{background: rgba(255,140,0,0.18); color: #ffc166;}
.calendar-side__badge.is-warning-3{background: rgba(255,43,43,0.18); color: #ff9f9f;}
.calendar-warning-level.level-1{background: rgba(255,212,0,0.18); color: #ffe573;}
.calendar-warning-level.level-2{background: rgba(255,140,0,0.18); color: #ffc166;}
.calendar-warning-level.level-3{background: rgba(255,43,43,0.18); color: #ff9f9f;}

@media (max-width: 760px){
  .calendar-legend__items{grid-template-columns:repeat(2, minmax(0,1fr))}
  .calendar-select,
  .calendar-month-input{min-width:100%}
}

/* 2026-03-08: jaśniejsze dni i wyróżnione komentarze */
.calendar-legend__items {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.calendar-legend__swatch.is-notes {
  background: rgba(45, 212, 191, 0.9);
  border-color: rgba(45, 212, 191, 1);
}

.calendar-cell__topFlags {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calendar-cell__day {
  color: #fdfefe;
  font-size: 1.24rem;
  letter-spacing: 0.02em;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.14);
}

.calendar-cell.has-notes {
  border-color: rgba(45, 212, 191, 0.28);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.12);
}

.calendar-cell__note-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, 0.32);
  background: rgba(45, 212, 191, 0.16);
  color: #aafaf0;
  font-size: 0.78rem;
  font-weight: 900;
}

.calendar-pill--notes {
  border: 1px solid rgba(45, 212, 191, 0.24);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0.1));
  color: #b6fff5;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.08);
}

.calendar-note-item {
  border-color: rgba(45, 212, 191, 0.2);
  background:
    radial-gradient(220px 120px at 0% 0%, rgba(45, 212, 191, 0.12), transparent 70%),
    rgba(5, 10, 22, 0.58);
}

.calendar-note-item__title {
  color: #f2fbff;
}

.calendar-note-item__author {
  color: #aaf5ea;
}

.calendar-note-item__body {
  color: #e2f4ff;
}

@media (max-width: 760px) {
  .calendar-legend__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-cell__day {
    font-size: 1.08rem;
  }

  .calendar-cell__note-marker {
    min-width: 24px;
    min-height: 24px;
    padding: 0 6px;
    font-size: 0.72rem;
  }
}

/* 2026-03-17 Stage 3: tighter mobile layout */
@media (max-width: 560px) {
  .calendar-hero {
    padding: 16px;
  }

  .calendar-hero__meta {
    grid-template-columns: 1fr;
  }

  .calendar-toolbar__nav,
  .calendar-toolbar__meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .calendar-toolbar__nav .calendar-btn,
  .calendar-select,
  .calendar-month-input {
    width: 100%;
  }

  .calendar-weekdays span {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .calendar-cell {
    min-height: 88px;
    padding: 8px;
  }

  .calendar-side__header {
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .calendar-legend__items {
    grid-template-columns: 1fr;
  }
}