/* calendar.ui.css — сетка и базовый UI (минимум, подгоняется под общий стиль) */
#kc-calendar { --cell: 42px; --gap: 6px; padding: 8px; }
#kc-calendar .cal-head { display:flex; align-items:center; gap:8px; }
#kc-calendar #calTitle { font-weight:600; }

#dowRow { display:grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); }
#dowRow .kc-dow { text-align:center; font-weight:600; opacity:.9; padding:4px 0; }

#grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); }
#grid .kc-day { min-height: calc(var(--cell) * 1.2); border: 1px solid #333; border-radius: 10px; padding: 6px; display:flex; flex-direction: column; gap: 6px; }
#grid .kc-day .num { font-weight:600; }
#grid .kc-day.today { outline: 2px solid #0af; }
#grid .kc-day.off { opacity:.6; }
#grid .kc-day.busy { background: rgba(255,0,0,.08); }

#workLine { margin-top: 8px; font-size: 14px; opacity:.9; display:block; }


#slots .kc-slot { border: 1px solid #333; border-radius: 10px; padding: 8px 10px; cursor: pointer; background: transparent; }
#slots .kc-slot.selected, .kc-time-grid .slot.selected { outline: 2px solid #0af; }
#slots .kc-slot.tpG { box-shadow: 0 0 0 2px rgba(255,215,0,.35) inset; }
#slots .kc-slot.tpS { box-shadow: 0 0 0 2px rgba(192,192,192,.35) inset; }
#slots .kc-slot.tpN { box-shadow: 0 0 0 1px rgba(128,128,128,.35) inset; }
#slots .kc-slot.busy { opacity:.45; pointer-events:none; }

.kc-modal { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.45); z-index: 9999; }
.kc-modal .box { background: #111; color: #fff; border: 1px solid #333; border-radius: 12px; padding: 16px; width: min(420px, 90vw); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.kc-modal .box h3 { margin: 0 0 8px; font-size: 16px; }
.kc-modal .box p { margin: 0 0 8px; opacity: .9; }
.kc-modal .actions { display:flex; justify-content:flex-end; gap:8px; margin-top: 10px; }
.kc-modal .btn { border: 1px solid #333; background: transparent; color: inherit; cursor: pointer; padding: 6px 10px; border-radius: 10px; }
#grid .kc-day.selected { outline: 2px solid var(--accent); box-shadow: 0 0 0 2px rgba(46,107,255,.25) inset; }
#grid .kc-day:hover { background: var(--tile2); }

/* Time slots grid: 6 per row, centered, with side padding */
#slots{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 92%;
  margin: 8px auto 0;
  padding: 0 12px;
  justify-items: stretch;
  box-sizing: border-box;
}

/* Responsive column count so slots don't overflow */




/* Base slot style: full fill */
#slots .kc-slot{ min-width: 0; white-space: nowrap; 
  background: var(--kc-slot-bg, #101a28);
  color: var(--kc-slot-fg, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
}
/* Silver */
#slots .kc-slot.tpS{
  background: var(--kc-slot-silver-bg, #808a9a);
  color: #fff;
  font-weight: 700;
  box-shadow: none; /* remove inset rings */
}
/* Gold */
#slots .kc-slot.tpG{
  background: var(--kc-slot-gold-bg, #caa84a);
  color: #111; /* black on yellow */
  font-weight: 800;
  box-shadow: none;
}
/* Normal/busy */
#slots .kc-slot.busy{ opacity: .45; pointer-events: none; }
#slots .kc-slot.tpS{ font-weight: 400; }
#slots .kc-slot.tpG{ font-weight: 400; }
.kc-modal .btn-primary{ background: var(--accent-color, #2e6bff); color: var(--accent-contrast, #fff); border: 0; }
/* narrow days */
#grid{   gap: 6px; }
#grid .kc-day{ width: 90%; }
#workLine{
  text-align: center;
  margin: 10px auto 14px;
  line-height: 1.35;
}
#workLine .work-title{
  font-weight: 700;
  margin-bottom: 4px;
}
#workLine .work-hours{
  font-weight: 400;
  opacity: .85;
}
#grid{ gap: 6px; }

/* Equal gaps and full-width day cells */
#grid{ gap: 6px; justify-items: stretch; }
#grid .kc-day{ width: 100%; }