\
:root{ --brand:#0d6efd; --brand2:#20c997; }

/* full-height flex for sticky footer */
body { min-height: 100vh; display: flex; flex-direction: column; }

.brand-dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 25%, rgba(255,255,255,.2) 26% 100%), var(--brand);
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

/* toolbar */
.kal-toolbar{
  display:flex; flex-wrap:wrap; gap:.5rem;
  align-items:center; justify-content:space-between;
}
.kal-toolbar .left, .kal-toolbar .right{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

/* Month view */
.kal-month{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:.5rem;
}
.kal-dow{
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--bs-secondary-color);
  padding:.25rem .5rem;
}
.kal-cell{
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding:.5rem;
  min-height: 120px;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, var(--bs-secondary-bg) 8%);
  position:relative;
  overflow:hidden;
}
.kal-cell .date{
  font-weight:600;
  font-size:.85rem;
  color: var(--bs-secondary-color);
}
.kal-cell.today{
  border-color: color-mix(in oklab, var(--brand) 60%, var(--bs-border-color) 40%);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.18);
}
.kal-events{ margin-top:.25rem; display:flex; flex-direction:column; gap:.25rem; }
.kal-pill{
  border-radius: .75rem;
  padding:.15rem .45rem;
  font-size:.75rem;
  display:flex; gap:.35rem; align-items:center;
  cursor:pointer;
  user-select:none;
  border: 1px solid color-mix(in oklab, var(--bs-border-color) 75%, transparent 25%);
  background: color-mix(in oklab, var(--bs-body-bg) 92%, var(--bs-secondary-bg) 8%);
}
.kal-pill .dot{ width:.55rem; height:.55rem; border-radius:999px; flex: 0 0 auto; }
.kal-pill .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kal-pill:hover{ filter: brightness(0.98); }

/* Week/Day grid like calender.digital (clean, time-grid) */
.kal-grid-wrap{
  border:1px solid var(--bs-border-color);
  border-radius: 1rem;
  overflow:hidden;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, var(--bs-secondary-bg) 8%);
}

.kal-grid-head{
  display:grid;
  grid-template-columns: 64px repeat(7, minmax(0,1fr));
  border-bottom: 1px solid var(--bs-border-color);
}
.kal-grid-head.day{ grid-template-columns: 64px 1fr; }

.kal-grid-head .hcell{
  padding:.5rem .5rem;
  font-size:.8rem;
  color: var(--bs-secondary-color);
  background: color-mix(in oklab, var(--bs-body-bg) 86%, var(--bs-secondary-bg) 14%);
  border-right: 1px solid var(--bs-border-color);
}
.kal-grid-head .hcell:last-child{ border-right:0; }

.kal-grid-body{
  position:relative;
  height: 860px; /* ~ 6:00-22:00 at 50px per hour */
  overflow:auto;
}
.kal-grid{
  display:grid;
  grid-template-columns: 64px repeat(7, minmax(0,1fr));
}
.kal-grid.day{ grid-template-columns: 64px 1fr; }

.kal-time-col{
  position:relative;
  border-right: 1px solid var(--bs-border-color);
}
.kal-time{
  height:50px;
  padding:.25rem .5rem;
  font-size:.75rem;
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-body-bg) 96%, var(--bs-secondary-bg) 4%);
}
.kal-col{
  position:relative;
  border-right: 1px solid var(--bs-border-color);
}
.kal-col:last-child{ border-right:0; }
.kal-rowline{
  height:50px;
  border-bottom: 1px solid var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-body-bg) 96%, var(--bs-secondary-bg) 4%);
}
.kal-event-block{
  position:absolute;
  left:6px; right:6px;
  border-radius: .75rem;
  padding:.35rem .45rem;
  font-size:.78rem;
  border: 1px solid color-mix(in oklab, var(--bs-border-color) 70%, transparent 30%);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  cursor:pointer;
  overflow:hidden;
}
.kal-event-block .line1{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kal-event-block .line2{ font-size:.72rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kal-all-day{
  display:flex; flex-wrap:wrap; gap:.35rem;
  padding:.5rem;
  border-bottom:1px solid var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-body-bg) 88%, var(--bs-secondary-bg) 12%);
}
.kal-all-day .kal-pill{ font-size:.78rem; }

/* Dark mode polish */
[data-bs-theme="dark"] .kal-event-block{
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
[data-bs-theme="dark"] .kal-cell,
[data-bs-theme="dark"] .kal-pill,
[data-bs-theme="dark"] .kal-grid-wrap{
  background: color-mix(in oklab, var(--bs-body-bg) 86%, #000 14%);
}

/* responsive: on small screens prefer list */
\
.kal-dow{ display:block; }
  .kal-cell{ min-height: 110px; }
  .kal-grid-head{ grid-template-columns: 64px repeat(7, 220px); }
  .kal-grid{ grid-template-columns: 64px repeat(7, 220px); }
  .kal-grid-head.day{ grid-template-columns: 64px 1fr; }
  .kal-grid.day{ grid-template-columns: 64px 1fr; }
}


.kal-cell.selected{
  outline: 2px solid color-mix(in oklab, var(--brand) 70%, transparent 30%);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.12);
}



/* Multi-day / all-day bars (week/day like typical calendars) */
.kal-all-day{
  position: relative;
  display:block;
  padding:.5rem;
}
.kal-allday-bars{
  position: relative;
}
.kal-spanbar{
  position:absolute;
  height: 28px;
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .78rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border: 1px solid color-mix(in oklab, var(--bs-border-color) 70%, transparent 30%);
  cursor:pointer;
}
.kal-spanbar .dot{
  width:.55rem;height:.55rem;border-radius:999px;flex:0 0 auto;
}



/* Classic month view: weeks with spanning all-day lanes */
.kal-month{ display:flex; flex-direction:column; gap:.5rem; }
.kal-week{ position:relative; }
.kal-week-days{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:.5rem;
}
.kal-week-bars{
  position:absolute;
  left:0; right:0;
  top: 42px; /* below top area inside cells (date row) */
  pointer-events:none;
}
.kal-week-bars .kal-spanbar{
  pointer-events:auto;
  height: 26px;
  font-size: .78rem;
  border-radius: 999px;
}

/* make cells a bit taller to allow event pills */
.kal-cell{ min-height: 140px; }

/* Inside day cell: timed/single-day pills */
.kal-events{ margin-top:.35rem; display:flex; flex-direction:column; gap:.25rem; }

/* Responsive month keeps 7 columns and scrolls horizontally like classic calendars */
.month-scroll{ overflow: visible; }
@media (max-width: 767.98px){
  .kal-week{ min-width:0; }
}



/* Responsive refinements: true 7-column month on mobile (no forced min-width) */
@media (max-width: 767.98px){
  .month-scroll{ overflow: visible; }
  .kal-week, .kal-week-days{ min-width: 0 !important; }
  .kal-week-days{ gap:.25rem; }
  .kal-cell{ padding:.4rem; border-radius:.85rem; min-height: 92px; }
  .kal-cell .date{ font-size:.8rem; }
  .kal-dow{ font-size:.68rem; padding:.15rem .35rem; }
  .kal-pill{ font-size:.68rem; padding:.12rem .35rem; border-radius:.65rem; }
  .kal-week-bars{ top: 36px; }
  .kal-week-bars .kal-spanbar{ height: 22px; font-size:.7rem; }
}

/* On very small screens, hide weekday badge inside cells to reduce clutter */
@media (max-width: 420px){
  .kal-cell .badge{ display:none; }
}

.kal-pill .dot{ display:none; }
.kal-spanbar .dot{ display:none; }



/* Force true classic 7-column month on mobile WITHOUT horizontal scrolling */
@media (max-width: 767.98px){
  .month-scroll{ overflow: visible; }
  #monthGrid{ width: 100% !important; }
  .kal-week{ width: 100% !important; min-width: 0 !important; }
  .kal-week-days{
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: .2rem !important;
  }

  /* Make cells compact so 7 fit */
  .kal-cell{
    min-height: 78px !important;
    padding: .32rem !important;
    border-radius: .75rem !important;
  }
  .kal-cell .date{ font-size: .78rem !important; }

  /* Hide DOW header row (still classic month numbers), saves space */
  .kal-dow{ display:none !important; }

  /* Limit visible event lines in month cells on mobile */
  .kal-events{ gap:.18rem !important; }
  .kal-pill{ font-size: .62rem !important; padding: .08rem .28rem !important; border-radius: .6rem !important; }
  .kal-pill .t{ max-width: 100%; }

  /* Multi-day bars: thinner */
  .kal-week-bars{ top: 30px !important; }
  .kal-week-bars .kal-spanbar{ height: 18px !important; font-size: .62rem !important; padding: .12rem .32rem !important; }
}

/* ultra small devices */
@media (max-width: 390px){
  .kal-cell{ min-height: 70px !important; padding:.28rem !important; }
  .kal-week-bars{ top: 28px !important; }
  .kal-week-bars .kal-spanbar{ height: 16px !important; font-size: .6rem !important; }
}


/* Absolute guarantee: no horizontal scrolling on mobile */
@media (max-width: 767.98px){
  html, body{ overflow-x:hidden !important; }
  .month-scroll{ overflow: visible; }
  .kal-week, .kal-week-days{ width:100% !important; min-width:0 !important; }
  .kal-week-days{ grid-template-columns: repeat(7, minmax(0,1fr)) !important; gap:.2rem !important; }
  .kal-cell{ min-height:78px !important; padding:.32rem !important; border-radius:.75rem !important; }
  .kal-dow{ display:none !important; }
  .kal-week-bars{ top:30px !important; }
  .kal-week-bars .kal-spanbar{ height:18px !important; font-size:.62rem !important; padding:.12rem .32rem !important; }
  .kal-pill{ font-size:.62rem !important; padding:.08rem .28rem !important; border-radius:.6rem !important; }
}
.kal-spanbar, .kal-event-block, .kal-pill{ box-sizing:border-box; }



/* ===============================
   Month view (kalender.digital-like)
   8 columns: KW + 7 days, no horizontal scroll
=============================== */
.kal-month{
  display: grid;
  grid-template-columns: 54px repeat(7, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, #000 8%);
}
.kal-mhead{
  background: color-mix(in oklab, var(--bs-body-bg) 86%, #000 14%);
  font-weight: 600;
  font-size: .78rem;
  text-transform: none;
  letter-spacing: .02em;
  padding: .5rem .45rem;
  border-bottom: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  text-align: center;
}
.kal-mhead.kw{ text-align:left; padding-left:.6rem; }
.kal-mrow{
  display: contents; /* allows grid cells align in parent grid */
}
.kal-kw{
  padding: .55rem .55rem;
  font-size: .78rem;
  color: var(--bs-secondary-color);
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-body-bg) 86%, #000 14%);
}
.kal-daycell{
  position: relative;
  min-height: 92px;
  padding: .4rem .35rem .35rem;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-body-bg) 96%, #000 4%);
}
.kal-daycell:nth-child(8n){ border-right: none; } /* last column */
.kal-daytop{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.35rem;
  margin-bottom:.25rem;
}
.kal-daynum{
  font-size:.9rem;
  font-weight:600;
  opacity:.95;
}
.kal-daycell.outside .kal-daynum{ opacity:.45; }
.kal-daycell.today{
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 65%, transparent 35%);
}
.kal-daycell.selected{
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 85%, transparent 15%);
}
.kal-dayevents{ display:flex; flex-direction:column; gap:.18rem; }

/* Event chips (full colored) */
.kal-chip{
  border-radius: 999px;
  padding: .12rem .4rem;
  font-size: .68rem;
  line-height: 1.25;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.kal-chip strong{ font-weight:700; }

/* Multi-day bars inside week row overlay */
.kal-week-overlay{
  position: relative;
  grid-column: 2 / span 7;
  height: 0; /* overlay only */
}
.kal-week-overlay .kal-spanbar{
  position:absolute;
  height: 22px;
  border-radius: 999px;
  padding: .1rem .45rem;
  font-size: .68rem;
  line-height: 1.2;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  cursor:pointer;
  border: 1px solid transparent;
}

/* Mobile: keep 8 columns, shrink heights */
@media (max-width: 767.98px){
  .kal-month{ grid-template-columns: 46px repeat(7, minmax(0,1fr)); border-radius: .9rem; }
  .kal-mhead{ font-size: .7rem; padding:.42rem .2rem; }
  .kal-kw{ font-size:.7rem; padding:.45rem .35rem; }
  .kal-daycell{ min-height: 74px; padding:.32rem .22rem .22rem; }
  .kal-daynum{ font-size:.82rem; }
  .kal-chip{ font-size:.6rem; padding:.08rem .32rem; }
  .kal-week-overlay .kal-spanbar{ height: 18px; font-size:.6rem; padding:.08rem .32rem; }
}

/* Prevent horizontal scroll from any month elements */
#monthGrid, .kal-month{ max-width: 100%; }



/* ===== Month view FIX: week rows container (no weird gridRow math) ===== */
.kal-month{ display:flex !important; flex-direction:column !important; gap:0 !important; }
.kal-month-wrap{
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, #000 8%);
}
.kal-month-head{
  display:grid;
  grid-template-columns: 54px repeat(7, minmax(0,1fr));
  background: color-mix(in oklab, var(--bs-body-bg) 86%, #000 14%);
  border-bottom: 1px solid var(--bs-border-color);
}
.kal-month-head > div{
  padding:.5rem .45rem;
  font-weight:600;
  font-size:.78rem;
  text-align:center;
  border-right:1px solid var(--bs-border-color);
}
.kal-month-head > div:last-child{ border-right:none; }
.kal-weekrow{
  position:relative;
  display:grid;
  grid-template-columns: 54px repeat(7, minmax(0,1fr));
}
.kal-kw{
  padding:.55rem .55rem;
  font-size:.78rem;
  color: var(--bs-secondary-color);
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-body-bg) 86%, #000 14%);
}
.kal-daycell{
  position:relative;
  min-height: 92px;
  padding:.4rem .35rem .35rem;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-body-bg) 96%, #000 4%);
}
.kal-weekrow > .kal-daycell:nth-child(8n){ border-right:none; } /* last day in row */
.kal-weekrow:last-child > .kal-kw,
.kal-weekrow:last-child > .kal-daycell{ border-bottom:none; }

.kal-weekrow .kal-week-overlay{
  position:absolute;
  left:54px; right:0;
  top: 30px;
  pointer-events:none;
}
.kal-weekrow .kal-week-overlay .kal-spanbar{
  position:absolute;
  height: 22px;
  border-radius:999px;
  padding:.1rem .45rem;
  font-size:.68rem;
  line-height:1.2;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border:1px solid transparent;
  cursor:pointer;
  pointer-events:auto;
}

@media (max-width: 767.98px){
  .kal-month-head, .kal-weekrow{ grid-template-columns: 46px repeat(7, minmax(0,1fr)); }
  .kal-weekrow .kal-week-overlay{ left:46px; top: 26px; }
  .kal-daycell{ min-height: 74px; padding:.32rem .22rem .22rem; }
  .kal-month-head > div{ font-size:.7rem; padding:.42rem .2rem; }
  .kal-kw{ font-size:.7rem; padding:.45rem .35rem; }
  .kal-weekrow .kal-week-overlay .kal-spanbar{ height: 18px; font-size:.6rem; padding:.08rem .32rem; }
}