/* CM001 kit — calendar.css. The CM017 Maintenance Calendar surface: month / week / day / year grids
 * and the event chip.
 *
 * Colour rule (WCAG): a pale tinted fill cannot satisfy both 1.4.3 (text contrast) and 1.4.11
 * (non-text contrast) at once. So the hue is carried by a 4px start-border and a faint tint, while
 * the LABEL stays on the normal text colour. Colour is never the only signal — every chip also
 * carries a state icon and its ref, so the board still reads with no colour perception at all.
 *
 * The hue arrives per chip as the custom property --chip-hue (set inline, because trade colours are
 * data, not design tokens).
 */
@layer cm.components {

  /* ------------------------------ shell ------------------------------ */
  .cm-cal { --cal-cell-min: 118px; }
  .cm-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
  .cm-cal-bar .cm-cal-title { font-size: 15px; font-weight: 700; margin: 0 4px; min-inline-size: 12ch; }
  .cm-cal-spacer { flex: 1 1 auto; }

  /* ------------------------- month / week grid ------------------------ */
  .cm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    min-inline-size: 760px;               /* below this it scrolls inside .tablewrap */
  }
  .cm-cal-wd {
    background: var(--surface-2);
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-3);
    text-align: center;
  }
  .cm-cal-day {
    background: var(--surface);
    min-block-size: var(--cal-cell-min);
    padding: 6px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background-color .15s ease, box-shadow .15s ease;
  }
  .cm-cal-day.is-outside { background: var(--surface-2); }
  .cm-cal-day.is-outside .cm-cal-daynum { opacity: .45; }
  .cm-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
  .cm-cal-day.is-weekend:not(.is-outside) { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }

  .cm-cal-dayhead { display: flex; align-items: center; gap: 6px; }
  .cm-cal-daynum { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .cm-cal-day.is-today .cm-cal-daynum { color: var(--brand); }
  .cm-cal-daycount { margin-inline-start: auto; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

  /* week view gives each day far more vertical room */
  .cm-cal--week .cm-cal-day { min-block-size: 320px; }

  /* a day cell that is a live drop target while dragging */
  .cm-cal-day.cm-drop-hover { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); box-shadow: inset 0 0 0 2px var(--brand); }
  .cm-cal-day.is-nodrop { opacity: .55; }

  /* ------------------------------- chip ------------------------------- */
  .cm-cal-chip {
    --chip-hue: #64748b;
    display: block;
    inline-size: 100%;
    text-align: start;
    border: 1px solid color-mix(in srgb, var(--chip-hue) 34%, transparent);
    border-inline-start: 4px solid var(--chip-hue);
    background: color-mix(in srgb, var(--chip-hue) 10%, var(--surface));
    color: var(--text);
    border-radius: var(--radius-sm, 7px);
    padding: 4px 7px;
    font-size: 11.5px;
    line-height: 1.35;
    cursor: grab;
    touch-action: none;                    /* Pointer Events drag needs this */
    text-decoration: none;
  }
  .cm-cal-chip:hover { background: color-mix(in srgb, var(--chip-hue) 18%, var(--surface)); }
  .cm-cal-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .cm-cal-chip.is-hidden { display: none; }
  /* A forecast has not been raised yet — dashed edge and a lighter fill say "provisional"
     without relying on colour alone; the chip also carries the word Forecast and a PLAN flag. */
  .cm-cal-chip.is-forecast { border-style: dashed; background: transparent; cursor: pointer; }
  .cm-cal-chip.is-forecast:hover { background: color-mix(in srgb, var(--chip-hue) 8%, var(--surface)); }
  .cm-cal-chip.is-dragging { cursor: grabbing; opacity: .9; box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.18)); z-index: 5; position: relative; }
  .cm-cal-chip[data-movable="0"] { cursor: default; }

  .cm-cal-chip-top { display: flex; align-items: center; gap: 4px; }
  .cm-cal-chip-ico { color: var(--chip-hue); flex: 0 0 auto; display: inline-flex; }
  .cm-cal-chip-ref { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--text-3); font-family: var(--font-mono, monospace); }
  .cm-cal-chip-flag { margin-inline-start: auto; font-size: 9.5px; font-weight: 700; color: var(--chip-hue); }
  .cm-cal-chip-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-cal-chip-sub { display: block; font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* "+N more" — the overflow affordance, so a busy day never silently truncates */
  .cm-cal-more {
    display: block; inline-size: 100%; text-align: start;
    font-size: 10.5px; font-weight: 700; color: var(--brand);
    background: none; border: 0; padding: 2px 7px; cursor: pointer; border-radius: var(--radius-sm, 7px);
  }
  .cm-cal-more:hover { background: var(--brand-50); }

  /* --------------------------- overdue rail --------------------------- */
  .cm-cal-rail { display: flex; gap: 8px; overflow-x: auto; padding-block-end: 4px; scrollbar-width: thin; }
  .cm-cal-rail .cm-cal-chip { inline-size: auto; min-inline-size: 210px; flex: 0 0 auto; }

  /* ------------------------------ legend ------------------------------ */
  .cm-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-block-start: 10px; }
  .cm-cal-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
  .cm-cal-swatch { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--chip-hue, #64748b); border: 1px solid color-mix(in srgb, var(--chip-hue, #64748b) 55%, transparent); flex: 0 0 auto; }

  /* ---------------------------- day agenda ---------------------------- */
  .cm-cal-agenda { display: flex; flex-direction: column; gap: 8px; }
  .cm-cal-agenda .cm-cal-chip { font-size: 13px; padding: 9px 12px; }
  .cm-cal-agenda .cm-cal-chip-title { white-space: normal; }

  /* ---------------------- year-at-a-glance ---------------------------- */
  .cm-cal-year { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
  .cm-cal-mini { border: 1px solid var(--line); border-radius: var(--radius-md, 10px); padding: 12px 14px; background: var(--surface); }
  .cm-cal-mini.is-empty { opacity: .6; }
  .cm-cal-mini-h { display: flex; align-items: baseline; gap: 8px; margin-block-end: 8px; }
  .cm-cal-mini-h a { font-weight: 700; font-size: 13px; text-decoration: none; color: var(--text); }
  .cm-cal-mini-h a:hover { color: var(--brand); }
  .cm-cal-mini-n { margin-inline-start: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  /* stacked proportional bar: done | planned | overdue | missed */
  .cm-cal-stack { display: flex; block-size: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
  .cm-cal-stack span { display: block; block-size: 100%; }
  .cm-cal-seg-done    { background: #15803d; }
  .cm-cal-seg-planned { background: #64748b; }
  .cm-cal-seg-overdue { background: #b91c1c; }
  .cm-cal-seg-missed  { background: #7f1d1d; }
  .cm-cal-mini-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-block-start: 8px; font-size: 10.5px; color: var(--text-3); }

  /* ----------------------------- responsive ---------------------------- */
  /* The platform convention is horizontal scroll inside .tablewrap rather than reflow. Below 640px a
   * 7-column grid is unreadable on a phone, so the month/week grid collapses to a stacked agenda:
   * each day becomes a full-width block and only days that HAVE work are shown. */
  @media (max-width: 640px) {
    .cm-cal-grid { min-inline-size: 0; grid-template-columns: 1fr; }
    .cm-cal-wd { display: none; }
    .cm-cal-day { min-block-size: 0; }
    .cm-cal--week .cm-cal-day { min-block-size: 0; }
    .cm-cal-day.is-outside, .cm-cal-day:not(.has-items) { display: none; }
    .cm-cal-day.has-items .cm-cal-daynum::after { content: attr(data-long); font-weight: 600; color: var(--text-3); margin-inline-start: 6px; }
    .cm-cal-chip-title { white-space: normal; }
  }
}