/* ─────────────────────────────────────────────────────────────────────────────
   kcalendar.css
   Styles for the kcalendar.js injectable calendar widget.
   Link this before kcalendar.js:
     <link rel="stylesheet" href="kcalendar.css">
     <script src="kcalendar.js"></script>
───────────────────────────────────────────────────────────────────────────── */

.kcal-wrap * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Container ── */
.kcal-wrap {
  --kcal-bg:          #1a1d2e;
  --kcal-header-bg:   #20243a;
  --kcal-border:      #2a2f4e;
  --kcal-text:        #dde1f5;
  --kcal-muted:       #4a506e;
  --kcal-hover:       #2a2f4e;
  --kcal-accent:      #3d7bbf;
  --kcal-accent-text: #ffffff;
  --kcal-today-ring:  #3d7bbf;

  background:   var(--kcal-bg);
  color:        var(--kcal-text);
  font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:    14px;
  border-radius: 10px;
  overflow:     hidden;
  user-select:  none;
  width:        280px;
  box-shadow:   0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ── Header ── */
.kcal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  background:      var(--kcal-header-bg);
  border-bottom:   1px solid var(--kcal-border);
  min-height:      44px;
}

.kcal-title {
  font-weight:    600;
  font-size:      14px;
  letter-spacing: 0.3px;
  display:        flex;
  align-items:    center;
  gap:            4px;
}

.kcal-title-clickable {
  cursor:     pointer;
  transition: color 0.18s;
  color:      var(--kcal-text);
}
.kcal-title-clickable:hover { color: #6faee8; }

.kcal-title-plain { color: var(--kcal-text); }

.kcal-arrow {
  cursor:          pointer;
  width:           30px;
  height:          30px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  color:           #8890b0;
  transition:      background 0.18s, color 0.18s;
  line-height:     1;
  flex-shrink:     0;
}
.kcal-arrow:hover {
  background: var(--kcal-hover);
  color:      var(--kcal-text);
}

/* ── Body ── */
.kcal-body { 
  box-sizing: border-box;
  padding-right: 8px;
  padding: 10px 12px 14px; 
  max-height: 400px;
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar { display: none; }
  width: 100%;
  min-width: 100%;

 mask-image: linear-gradient(to bottom,
    transparent 0px,
    black 10px,
    black calc(100% - 10px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0px,
    black 10px,
    black calc(100% - 10px),
    transparent 100%);

}


/* ── Day view ── */
.kcal-weekdays {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom:         4px;
}

.kcal-weekday {
  text-align:     center;
  font-size:      11px;
  font-weight:    700;
  color:          var(--kcal-muted);
  padding:        4px 0;
  letter-spacing: 0.5px;
}

.kcal-days-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   1px;
}

.kcal-day {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          34px;
  border-radius:   50%;
  cursor:          pointer;
  font-size:       13px;
  color:           var(--kcal-text);
  transition:      background 0.15s;
}
.kcal-day:hover:not(.kcal-selected) { background: var(--kcal-hover); }

.kcal-day.kcal-other-month { color: var(--kcal-muted); }

.kcal-day.kcal-today:not(.kcal-selected) {
  border:      1.5px solid var(--kcal-today-ring);
  color:       #6faee8;
  font-weight: 600;
}

.kcal-day.kcal-selected {
  background:  var(--kcal-accent) !important;
  color:       var(--kcal-accent-text) !important;
  font-weight: 700;
}

.kcal-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.kcal-cell {
  white-space: nowrap;
  min-width: 0;
}

.kcal-active {
  outline: 2px solid var(--border-focus);
  background: rgba(255,255,255,0.05);
}

/* ── Month / Year grids (shared) ── */
.kcal-grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   6px;
  padding:               4px 0;
}

.kcal-cell {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         11px 6px;
  border-radius:   7px;
  cursor:          pointer;
  font-size:       13px;
  color:           var(--kcal-text);
  transition:      background 0.15s;
}
.kcal-cell:hover:not(.kcal-selected) { background: var(--kcal-hover); }

.kcal-cell.kcal-selected {
  background:  var(--kcal-accent) !important;
  color:       var(--kcal-accent-text) !important;
  font-weight: 700;
}