/* app.css — components Tabler core doesn't ship. Currently just the
   year-at-a-glance calendar. Colours come from Tabler tokens so light/dark
   and any brand.css override are inherited automatically. */

.hp-cal {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.72rem;
  line-height: 1.6;
}
.hp-cal th {
  font-weight: 500;
  text-align: center;
  color: var(--tblr-secondary);
  padding: 0 0 2px;
  font-size: 0.62rem;
  text-transform: uppercase;
}
.hp-cal th.hp-wknd-h { color: var(--tblr-primary); }
.hp-cal td {
  text-align: center;
  padding: 1px 0;
  border-radius: 3px;
  color: var(--tblr-body-color);
}
.hp-cal td.hp-cal-pad { color: transparent; }
.hp-cal td.hp-wknd { color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); }
.hp-cal td.hp-hol  { background: var(--tblr-primary); color: #fff; font-weight: 600; }
.hp-cal td.hp-est  { background: var(--tblr-warning); color: #000; font-weight: 600; }
.hp-cal td.hp-today { outline: 2px solid var(--tblr-azure); outline-offset: -2px; }
.hp-cal td.hp-opt  { box-shadow: inset 0 -2px 0 var(--tblr-secondary); }
/* school holidays: an underline bar, so a holiday inside a break stays readable */
.hp-cal td.hp-school { box-shadow: inset 0 -3px 0 var(--tblr-green); }
.hp-cal td.hp-school:not(.hp-hol):not(.hp-est):not(.hp-wknd) { background: color-mix(in srgb, var(--tblr-green) 14%, transparent); }

/* legend */
.hp-cal-legend { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.hp-cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.hp-sw { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.hp-sw.hp-hol  { background: var(--tblr-primary); }
.hp-sw.hp-est  { background: var(--tblr-warning); }
.hp-sw.hp-wknd { background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); }
.hp-sw.hp-school { background: color-mix(in srgb, var(--tblr-green) 30%, transparent); box-shadow: inset 0 -3px 0 var(--tblr-green); }

/* ---- leave planner ----------------------------------------------------- */
.hp-pl-block { border-left: 4px solid var(--tblr-primary); }
.hp-pl-strip { display: flex; flex-wrap: wrap; gap: 2px; margin-top: .5rem; }
.hp-pl-strip span { min-width: 2.1rem; padding: 2px 0; text-align: center; border-radius: 4px;
                    font-size: .7rem; line-height: 1.15; background: var(--tblr-bg-surface-secondary); }
.hp-pl-strip span small { display: block; font-size: .6rem; opacity: .75; }
.hp-pl-strip span.h { background: var(--tblr-primary); color: #fff; }
.hp-pl-strip span.l { background: var(--tblr-yellow); color: #000; font-weight: 600; }
.hp-pl-sum { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

/* school matrix: keep dates on one line, let the table scroll on phones */
.hp-school-matrix td:not(:first-child), .hp-school-matrix th:not(:first-child) { white-space: nowrap; }
@media (max-width: 575.98px) {
  .hp-school-matrix { font-size: .8rem; }
  .hp-school-matrix td, .hp-school-matrix th { padding-left: .4rem; padding-right: .4rem; }
}

/* shade weekend rows in the holiday table so it isn't a flat grid */
tr.hp-row-wknd > td { background: var(--tblr-bg-surface-secondary); }

@media print {
  .hp-cal td.hp-hol { background: none !important; color: #000 !important;
                      outline: 1.5px solid #000; outline-offset: -1px; }
  .hp-cal td.hp-est { background: none !important; color: #000 !important;
                      outline: 1.5px dashed #000; outline-offset: -1px; }
  .hp-cal td.hp-wknd { background: #f0f0f0 !important; }
  .hp-cal-grid .card { break-inside: avoid; }
}