/* Kalendomat widget – scoped to .klm, themable via CSS custom properties.
 *
 * The widget is embedded into unknown themes. Host CSS such as
 * "button:hover { background: <theme colour> !important }" otherwise repaints our
 * controls and leaves same-colour text on a same-colour background, so every
 * interactive state pins BOTH background-color and color with !important.
 * The values stay var()-driven, so colours are still customised through
 * --klm-accent and friends rather than by overriding these rules.
 */
.klm{
  --klm-accent:#DF6502;
  --klm-on-accent:#ffffff;
  --klm-text:#1f2328;
  --klm-muted:#6b7280;
  --klm-border:#e5e7eb;
  --klm-bg:#ffffff;
  --klm-soft:#f5f6f8;
  --klm-soft-hover:#e8eaed;
  --klm-radius:10px;
  --klm-lane-h:1.5rem;
  --klm-teams:#4b53bc;
  --klm-zoom:#0b5cff;
  --klm-meet:#00897b;
  --klm-webex:#0a7bd6;
  color:var(--klm-text);
  font:inherit;
  line-height:1.5;
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  position:relative;
}
.klm *,.klm *::before,.klm *::after{box-sizing:inherit}
.klm h2,.klm h3,.klm p{margin:0}
.klm [hidden]{display:none !important}

/* ---------- neutral base: undo theme styling on our links and buttons ---------- */
.klm a,.klm button{
  font:inherit;text-shadow:none;text-transform:none;letter-spacing:inherit;
  border-radius:0;min-height:0;min-width:0;margin:0;
  background-color:transparent !important;background-image:none !important;
  color:inherit !important;box-shadow:none !important;
}
.klm button{cursor:pointer;border:0;padding:0}
.klm a:hover,.klm a:focus,.klm a:active,
.klm button:hover,.klm button:focus,.klm button:active{
  background-color:transparent !important;background-image:none !important;
  color:inherit !important;box-shadow:none !important;
  text-decoration:none;transform:none;filter:none;
}
.klm a:not([class]),.klm a:not([class]):hover{color:var(--klm-accent) !important;text-decoration:underline}

/* ---------- toolbar ---------- */
.klm-toolbar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;margin:0 0 1rem}
.klm .klm-seg{display:inline-flex;border:1px solid var(--klm-border);border-radius:999px;background-color:var(--klm-soft);padding:2px}
.klm .klm-seg button{padding:.4rem .95rem;font-weight:600;border-radius:999px;line-height:1.3;font-size:.9rem;background-color:transparent !important;color:var(--klm-muted) !important}
.klm .klm-seg button:hover{background-color:var(--klm-soft-hover) !important;color:var(--klm-text) !important}
.klm .klm-seg button[aria-selected="true"],
.klm .klm-seg button[aria-selected="true"]:hover{background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important}
.klm .klm-seg button:focus-visible,.klm .klm-iconbtn:focus-visible,.klm .klm-btn:focus-visible,
.klm .klm-textbtn:focus-visible,.klm .klm-bar:focus-visible,.klm .klm-daynum:focus-visible,
.klm .klm-more:focus-visible,.klm .klm-cal-item:focus-visible{outline:2px solid var(--klm-accent);outline-offset:2px}

.klm-nav{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.35rem;max-width:100%;min-width:0}
.klm-nav h2{font-size:1.05rem;font-weight:700;min-width:11rem;text-align:center;line-height:1.3;overflow-wrap:break-word}
.klm .klm-iconbtn{border:1px solid var(--klm-border) !important;border-radius:999px;width:2.2rem;height:2.2rem;display:inline-grid;place-items:center;padding:0;background-color:var(--klm-bg) !important;color:var(--klm-text) !important}
.klm .klm-iconbtn svg{width:18px;height:18px}
.klm .klm-iconbtn:hover{background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important;border-color:var(--klm-accent) !important}
.klm .klm-textbtn{border:1px solid var(--klm-border) !important;border-radius:999px;padding:.35rem .85rem;font-size:.85rem;font-weight:600;background-color:var(--klm-bg) !important;color:var(--klm-text) !important}
.klm .klm-textbtn:hover{background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important;border-color:var(--klm-accent) !important}

/* ---------- states ---------- */
.klm-state{padding:2rem 1rem;text-align:center;color:var(--klm-muted);border:1px dashed var(--klm-border);border-radius:var(--klm-radius)}
.klm-state--error{color:#b42318;border-color:#f3c2bd}

/* ---------- list ---------- */
.klm-group{font-size:.8rem;font-weight:700;margin:1.5rem 0 .25rem;color:var(--klm-muted);text-transform:uppercase;letter-spacing:.06em}
.klm-group:first-child{margin-top:0}
.klm-item{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-top:1px solid var(--klm-border)}
.klm-item--past{opacity:.75}
.klm-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--klm-soft);border-radius:var(--klm-radius);padding:.45rem .25rem .5rem;text-align:center;align-self:start;border-top:3px solid var(--klm-accent);line-height:1.15}
.klm-badge-d{font-size:1.65rem;font-weight:800}
.klm-badge-wd,.klm-badge-m{font-size:.7rem;text-transform:uppercase;color:var(--klm-muted);font-weight:700;letter-spacing:.04em}
.klm-badge-to{font-size:.68rem;font-weight:700;color:var(--klm-accent);margin-top:.2rem;white-space:nowrap}
.klm-main{min-width:0}
.klm-meta{font-size:.875rem;color:var(--klm-muted);display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:center}
.klm-time,.klm-tag{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;color:var(--klm-text)}
.klm-time svg,.klm-tag svg{width:14px;height:14px;flex:0 0 auto}
.klm-tag{color:var(--klm-accent)}
.klm-title{margin:.15rem 0 .35rem;font-size:1.125rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.klm-excerpt{margin:0 0 .25rem;overflow-wrap:anywhere}
.klm-content{margin:.6rem 0 .25rem;overflow-wrap:anywhere}
.klm-content img,.klm-content iframe,.klm-content video{max-width:100%;height:auto}
.klm-content p:not(:last-child){margin-bottom:.75em}
.klm .klm-content a,.klm .klm-content a:hover{color:var(--klm-accent) !important;background-color:transparent !important;text-decoration:underline}
.klm-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem;align-items:center}

/* ---------- buttons ---------- */
.klm .klm-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid transparent;font-size:.9rem;line-height:1.25;max-width:100%;background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important}
.klm .klm-btn span{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:auto}
.klm .klm-btn svg{width:17px;height:17px;flex:0 0 auto}
.klm .klm-btn:hover{background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important;filter:brightness(.9)}
.klm .klm-btn--teams,.klm .klm-btn--teams:hover{background-color:var(--klm-teams) !important;color:#fff !important}
.klm .klm-btn--zoom,.klm .klm-btn--zoom:hover{background-color:var(--klm-zoom) !important;color:#fff !important}
.klm .klm-btn--meet,.klm .klm-btn--meet:hover{background-color:var(--klm-meet) !important;color:#fff !important}
.klm .klm-btn--webex,.klm .klm-btn--webex:hover{background-color:var(--klm-webex) !important;color:#fff !important}
.klm .klm-btn--teams:hover,.klm .klm-btn--zoom:hover,.klm .klm-btn--meet:hover,.klm .klm-btn--webex:hover{filter:brightness(.9)}
.klm .klm-btn--ghost{background-color:var(--klm-bg) !important;color:var(--klm-text) !important;border-color:var(--klm-border) !important}
.klm .klm-btn--ghost:hover{background-color:var(--klm-soft-hover) !important;color:var(--klm-text) !important;border-color:var(--klm-accent) !important;filter:none}
.klm .klm-btn--ghost svg{color:var(--klm-muted)}
.klm .klm-btn--ghost:hover svg{color:var(--klm-accent)}

/* ---------- add to calendar ---------- */
.klm-cal{position:relative;display:inline-flex}
.klm .klm-cal-btn svg:last-child{width:14px;height:14px}
.klm-cal-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:14rem;max-width:min(22rem,88vw);background-color:var(--klm-bg);border:1px solid var(--klm-border);border-radius:calc(var(--klm-radius) - 2px);box-shadow:0 8px 24px rgba(16,24,40,.14);padding:.25rem;display:flex;flex-direction:column}
.klm-cal--up .klm-cal-menu{top:auto;bottom:calc(100% + 4px)}
/* open towards the left when the menu would leave the widget on the right */
.klm-cal--end .klm-cal-menu{left:auto;right:0}
.klm .klm-cal-item{display:block;padding:.6rem .75rem;border-radius:calc(var(--klm-radius) - 4px);font-size:.9rem;font-weight:500;text-decoration:none;background-color:transparent !important;color:var(--klm-text) !important}
.klm .klm-cal-item:hover{background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important;text-decoration:none}

/* ---------- month grid ---------- */
.klm-grid{border:1px solid var(--klm-border);border-radius:var(--klm-radius);overflow:hidden;background-color:var(--klm-bg)}
.klm-wdrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--klm-soft)}
.klm-wd{padding:.5rem .15rem;text-align:center;font-size:.72rem;font-weight:700;color:var(--klm-muted);text-transform:uppercase;letter-spacing:.04em}
.klm-week{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:2px;border-top:1px solid var(--klm-border);padding-bottom:.35rem}
.klm .klm-cell{min-height:6.25rem;border-left:1px solid var(--klm-border);cursor:pointer;background-color:transparent}
.klm .klm-cell:nth-child(1){border-left:0}
.klm .klm-cell:hover{background-color:var(--klm-soft)}
.klm .klm-cell--other{background-color:var(--klm-soft)}
.klm .klm-cell--other:hover{background-color:var(--klm-soft-hover)}
.klm .klm-cell--selected,.klm .klm-cell--selected:hover{box-shadow:inset 0 0 0 2px var(--klm-accent)}
.klm .klm-daynum{font-size:.85rem;font-weight:600;width:1.75rem;height:1.75rem;display:inline-grid;place-items:center;border-radius:999px;margin:.3rem 0 .15rem .3rem;justify-self:start;position:relative;background-color:transparent !important;color:var(--klm-text) !important}
.klm .klm-daynum:hover{background-color:var(--klm-soft-hover) !important;color:var(--klm-text) !important}
.klm .klm-daynum--other{color:var(--klm-muted) !important}
.klm .klm-daynum--today,.klm .klm-daynum--today:hover{background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important;font-weight:800}

/* event bars: one grid row per lane, spanning as many columns as the event lasts */
.klm .klm-bar{position:relative;display:flex;align-items:center;align-self:start;min-height:calc(var(--klm-lane-h) - 3px);margin:0 3px;padding:.25rem .5rem;border-radius:5px;font-size:var(--klm-bar-font,.75rem);font-weight:600;line-height:1.35;text-align:left;background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important}
.klm .klm-bar:hover{background-color:var(--klm-accent) !important;color:var(--klm-on-accent) !important;filter:brightness(.88)}
.klm-bar-label{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:auto}
.klm .klm-bar--teams,.klm .klm-bar--teams:hover{background-color:var(--klm-teams) !important;color:#fff !important}
.klm .klm-bar--zoom,.klm .klm-bar--zoom:hover{background-color:var(--klm-zoom) !important;color:#fff !important}
.klm .klm-bar--meet,.klm .klm-bar--meet:hover{background-color:var(--klm-meet) !important;color:#fff !important}
.klm .klm-bar--webex,.klm .klm-bar--webex:hover{background-color:var(--klm-webex) !important;color:#fff !important}
.klm .klm-bar--teams:hover,.klm .klm-bar--zoom:hover,.klm .klm-bar--meet:hover,.klm .klm-bar--webex:hover{filter:brightness(.88)}
/* open edges show the event continues into the previous / next week */
.klm .klm-bar--multi:not(.klm-bar--start){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0;padding-left:.55rem}
.klm .klm-bar--multi:not(.klm-bar--end){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.klm .klm-bar--multi:not(.klm-bar--start)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.35rem;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.klm .klm-more{font-size:.7rem;font-weight:700;padding:0 .3rem;margin:0 3px;text-align:left;border-radius:4px;background-color:transparent !important;color:var(--klm-muted) !important}
.klm .klm-more:hover{background-color:var(--klm-soft-hover) !important;color:var(--klm-text) !important}

.klm-agenda{margin-top:1.25rem}
.klm-agenda-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}
.klm-agenda-head h3{font-size:1rem;font-weight:700}
.klm-agenda .klm-item:first-of-type{border-top:0}

/* ---------- narrow containers (< 640px: sidebars, tablets, phones) ----------
 * Compact chrome and finger-sized controls. Event titles still show here: a day
 * column at this width is around 75px and up, which is enough for text.
 */
.klm--narrow .klm-week{row-gap:2px;padding-bottom:.3rem}
.klm--narrow .klm-cell{min-height:3.4rem}
.klm--narrow .klm-bar{padding:.2rem .35rem;margin:0 2px}
.klm--narrow .klm-daynum{width:1.6rem;height:1.6rem;font-size:.78rem;margin:.2rem auto .05rem;justify-self:center}
.klm--narrow .klm-nav h2{min-width:0;font-size:1rem}
.klm--narrow .klm-iconbtn{width:2.5rem;height:2.5rem}
.klm--narrow .klm-textbtn{padding:.5rem 1rem}
.klm--narrow .klm-seg button{padding:.5rem 1rem}
.klm--narrow .klm-cal-menu{min-width:11rem}
/* a picked day already names its date in the heading: drop the badge, gain width */
.klm--narrow .klm-agenda--day .klm-item{grid-template-columns:minmax(0,1fr);gap:0}
.klm--narrow .klm-agenda--day .klm-badge{display:none}

/* ---------- bars only (< 520px: a day column is under ~70px) ----------
 * No room for a title inside a column, so the grid becomes a compact navigator:
 * events are stripes that still show their span, and the day picked below the
 * grid carries the readable detail.
 */
.klm--bars{--klm-lane-h:.6rem}
.klm--bars .klm-week{row-gap:1px;padding-bottom:.25rem}
.klm--bars .klm-cell{min-height:2.75rem}
.klm--bars .klm-bar{min-height:.45rem;height:.45rem;padding:0;margin:0 2px;border-radius:3px}
.klm--bars .klm-bar-label{display:none}
.klm--bars .klm-more{font-size:.62rem;text-align:center;margin:0}
.klm--tiny .klm-item{grid-template-columns:3.6rem minmax(0,1fr);gap:.7rem}
.klm--tiny .klm-badge-d{font-size:1.35rem}
.klm--tiny .klm-badge-to{font-size:.6rem}
.klm--tiny .klm-title{font-size:1.02rem}
.klm--tiny .klm-toolbar{justify-content:center}