/* ================================================================
   Year Calendar Plugin — Frontend CSS
   Faithful replica of calendarr.com visual style
   ================================================================ */

/* ── Variables ── */
.ycal-wrap {
  --ycal-font:           Arial, Helvetica, sans-serif;
  --ycal-blue:           #2d6cdf;
  --ycal-blue-dark:      #1a4fa3;
  --ycal-blue-light:     #e8f0fc;
  --ycal-red:            #d0021b;
  --ycal-red-light:      #fde8eb;
  --ycal-today-bg:       #f5a623;
  --ycal-today-color:    #fff;
  --ycal-weekend-color:  #d0021b;
  --ycal-pad-color:      #aaa;
  --ycal-pad-bg:         #f9f9f9;
  --ycal-border:         #dde3ef;
  --ycal-shadow:         0 1px 4px rgba(0,0,0,.10);
  --ycal-header-h:       36px;
  --ycal-cell-size:      32px;
  --ycal-gap:            12px;

  font-family:  var(--ycal-font);
  font-size:    14px;
  color:        #333;
  line-height:  1.3;
  width:        100%;
  box-sizing:   border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* ── 12-month grid: 3 columns on desktop ── */
.ycal-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--ycal-gap);
}

/* ── Single month card ── */
.ycal-month {
  background:     #fff;
  border:         1px solid var(--ycal-border);
  border-radius:  4px;
  box-shadow:     var(--ycal-shadow);
  overflow:       hidden;
}

/* ── Month header (blue bar) ── */
.ycal-month-header {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  background:       var(--ycal-blue);
  color:            #fff;
  padding:          0 10px;
  height:           var(--ycal-header-h);
}

.ycal-month-name {
  font-size:      13px;
  font-weight:    700;
  letter-spacing: .04em;
}

.ycal-month-year {
  font-size:   12px;
  opacity:     .8;
  font-weight: 400;
}

/* ── Day-of-week header row ── */
.ycal-dow-row {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  background:            var(--ycal-blue-light);
  border-bottom:         1px solid var(--ycal-border);
}

.ycal-dow {
  text-align:   center;
  font-size:    11px;
  font-weight:  700;
  color:        var(--ycal-blue-dark);
  padding:      5px 0 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.ycal-dow-weekend {
  color: var(--ycal-red);
}

/* ── Day cells grid ── */
.ycal-days {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
}

.ycal-day {
  position:    relative;
  text-align:  center;
  padding:     4px 2px;
  min-height:  var(--ycal-cell-size);
  border-right:  1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  cursor:        default;
  transition:    background .1s;
}

.ycal-day:hover {
  background: #f5f8ff;
}

.ycal-dn {
  display:     block;
  font-size:   13px;
  font-weight: 400;
  line-height: 22px;
  color:       #333;
}

/* ── Out-of-month padding days ── */
.ycal-day-pad {
  background: var(--ycal-pad-bg);
}

.ycal-day-pad .ycal-dn {
  color: var(--ycal-pad-color);
}

.ycal-day-pad:hover {
  background: var(--ycal-pad-bg);
}

/* ── Weekend days ── */
.ycal-weekend .ycal-dn {
  color: var(--ycal-red);
}

/* ── Today ── */
.ycal-today {
  background: var(--ycal-today-bg) !important;
}

.ycal-today .ycal-dn {
  color:       var(--ycal-today-color) !important;
  font-weight: 700;
}

.ycal-today:hover {
  background: #e09520 !important;
}

/* ── Holiday cell ── */
.ycal-holiday {
  background: var(--ycal-red-light);
  cursor:     pointer;
}

.ycal-holiday .ycal-dn {
  color:       var(--ycal-red);
  font-weight: 700;
}

.ycal-holiday:hover {
  background: #f9ccd2;
}

/* ── Tooltip on holiday hover ── */
.ycal-day[data-holiday]:hover::after {
  content:         attr(data-holiday);
  position:        absolute;
  bottom:          calc(100% + 6px);
  left:            50%;
  transform:       translateX(-50%);
  background:      #222;
  color:           #fff;
  font-size:       11px;
  font-family:     var(--ycal-font);
  padding:         5px 9px;
  border-radius:   3px;
  white-space:     nowrap;
  z-index:         999;
  pointer-events:  none;
  box-shadow:      0 2px 8px rgba(0,0,0,.25);
  max-width:       180px;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.ycal-day[data-holiday]:hover::before {
  content:        '';
  position:       absolute;
  bottom:         calc(100% + 2px);
  left:           50%;
  transform:      translateX(-50%);
  border:         4px solid transparent;
  border-top-color: #222;
  z-index:        1000;
  pointer-events: none;
}

/* ── Holiday list below month ── */
.ycal-hlist {
  border-top:  2px solid var(--ycal-blue-light);
  padding:     6px 8px 8px;
  background:  #fafbff;
}

.ycal-hitem {
  display:       flex;
  align-items:   flex-start;
  gap:           7px;
  padding:       3px 0;
  border-bottom: 1px solid #eef0f8;
  font-size:     11px;
  line-height:   1.35;
}

.ycal-hitem:last-child {
  border-bottom: none;
}

.ycal-hitem-day {
  flex-shrink:  0;
  width:        20px;
  font-weight:  700;
  color:        var(--ycal-red);
  text-align:   right;
}

.ycal-hitem-name {
  color: #444;
}

/* ── Legend ── */
.ycal-legend {
  display:     flex;
  flex-wrap:   wrap;
  gap:         16px;
  margin-top:  14px;
  padding:     10px 12px;
  background:  #f7f9ff;
  border:      1px solid var(--ycal-border);
  border-radius: 4px;
  font-size:   12px;
  color:       #555;
}

.ycal-legend-item {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.ycal-legend-swatch {
  display:       inline-block;
  width:         16px;
  height:        16px;
  border-radius: 2px;
  border:        1px solid rgba(0,0,0,.1);
  flex-shrink:   0;
}

.ycal-legend-today   { background: var(--ycal-today-bg); }
.ycal-legend-holiday { background: var(--ycal-red-light); border: 1px solid var(--ycal-red); }
.ycal-legend-weekend { background: #fff; }
.ycal-legend-weekend::after {
  content:     '7';
  display:     block;
  text-align:  center;
  font-size:   10px;
  font-weight: 700;
  color:       var(--ycal-red);
  line-height: 16px;
}

/* ================================================================
   Responsive
   ================================================================ */

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .ycal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 560px) {
  .ycal-grid {
    grid-template-columns: 1fr;
  }

  .ycal-wrap {
    --ycal-cell-size: 38px;
  }

  .ycal-dn {
    font-size:   14px;
    line-height: 26px;
  }

  .ycal-dow {
    font-size: 10px;
  }
}