/* ===================== Spreadsheet-style grid ===================== */
kbd { font: 11px/1 ui-monospace, Consolas, monospace; background: #f1f3f5; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 2px 4px; color: var(--muted); }
.month-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.month-wrap .month { box-shadow: none; }
/* Column resize handle on the right edge of each day header */
.month .dow { position: relative; }
.col-rs { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.col-rs::after { content: ''; position: absolute; left: 3px; top: 20%; bottom: 20%; width: 2px; border-radius: 1px; background: var(--line-strong); opacity: 0; transition: opacity .15s; }
.month .dow:hover .col-rs::after, .col-rs:hover::after, body.col-resizing .col-rs::after { opacity: 1; background: var(--accent); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }
/* Each day is a clearly separated card: heavier borders and a shaded date band on top */
.day { min-height: 0; padding: 0; gap: 0; border-right: 2px solid #d3d9e1; border-bottom: 2px solid #d3d9e1; }
.day .head { padding: 4px 6px; gap: 6px; background: #e8ecf1; border-bottom: 1px solid #cfd6df; justify-content: flex-start; }
.day .num { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 800; font-size: 15px; color: #1b1f24;
  min-width: 28px; width: auto; height: 26px; padding: 0 5px; border-radius: 13px; }
.day .num:hover { background: #fff; color: var(--accent); }
.day .dname { font-size: 11.5px; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: .04em; }
.day .count { margin-left: auto; border: 0; background: rgba(255, 255, 255, .7); font: inherit; font-size: 11px; font-weight: 600; color: #4b5563; cursor: pointer; padding: 2px 8px; border-radius: 10px; }
.day .count:hover { background: #fff; color: var(--accent); }
.day.weekend .head { background: #eef0f3; }
.day.other .head { background: #f1f3f5; }
.day.other .num, .day.other .dname { color: #a3abb6; }
.day.today .head { background: #d6e6ff; border-bottom-color: #9ec2fb; }
.day.today .num, .day.today .num:hover { background: var(--accent); color: #fff; }
.day.today .dname { color: var(--accent); }
.day.today { box-shadow: inset 0 0 0 2px var(--accent); }
/* A day with a Holiday line is tinted in the Holiday color */
.day.holiday { background: color-mix(in srgb, var(--hday) 22%, #fff); }
.day.holiday .head { background: color-mix(in srgb, var(--hday) 45%, #fff); border-bottom-color: color-mix(in srgb, var(--hday) 60%, #fff); }
.day.holiday .cell { border-bottom-color: color-mix(in srgb, var(--hday) 30%, #fff); }
.day.holiday .num, .day.holiday .dname { color: color-mix(in srgb, var(--hday) 70%, #000); }
.day.today.holiday .num { color: #fff; }
.day .chip.loan { margin: 2px 4px 4px; width: auto; }
.lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); }

.cell { position: relative; min-height: 23px; border-bottom: 1px solid #e4e8ed; background: var(--bg, transparent); color: var(--fg, var(--ink));
  font-size: 12.5px; line-height: 1.35; padding: 2px 16px 2px 12px; cursor: text; }
.cell.filled { border-bottom-color: rgba(255, 255, 255, .55); }
.cell .txt { outline: none; white-space: pre-wrap; word-break: break-word; min-height: 17px; }
.cell .txt[tabindex] { cursor: pointer; }
.cell.fb .txt { font-weight: 700; }
.cell.fi .txt { font-style: italic; }
.cell.fs .txt { text-decoration: line-through; opacity: .75; }
.cell.cont { opacity: .8; font-style: italic; cursor: default; }
.cell.unconf { box-shadow: inset 3px 0 0 #e8590c; }
.cell.sel { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
.cell.sel.unconf { box-shadow: inset 0 0 0 2px var(--accent), inset 5px 0 0 #e8590c; }
.cell:focus-within { box-shadow: inset 0 0 0 2px var(--accent); background: var(--bg, #fff); z-index: 2; }
.cell.has-note::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #d93025 transparent transparent; }
.cell .grip { position: absolute; left: 0; top: 0; bottom: 0; width: 11px; display: grid; place-items: center; font-size: 9px; letter-spacing: -2px;
  color: currentColor; opacity: 0; cursor: grab; user-select: none; }
.cell:hover .grip, .cell.sel .grip { opacity: .45; }
.cell .grip:hover { opacity: 1 !important; }
.cell[data-job] { padding-right: calc(8px + var(--tail, 1) * 14px); }
.cell .tail { position: absolute; right: 5px; top: 3px; display: flex; align-items: center; gap: 2px; line-height: 1; }
.cell .okmark { font-size: 11px; font-weight: 700; width: 12px; text-align: center; }
.cell .bellmark { font-size: 10px; width: 12px; text-align: center; }
.cell .ibtn { width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; padding: 0;
  font: italic 700 10px/12px Georgia, 'Times New Roman', serif; cursor: pointer; opacity: .4; flex: none; position: relative; }
.cell .ibtn::before { content: ''; position: absolute; inset: -5px -5px -5px -4px; } /* easier to hit, especially on a phone */
.cell:hover .ibtn, .cell.sel .ibtn { opacity: .75; }
.cell .ibtn:hover { opacity: 1; background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: none) { .cell .ibtn { opacity: .6; } }
.cell.has-note .tail { right: 9px; }
.cell.found { outline: 2px solid #f5c400; outline-offset: -2px; }
.cell.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: inset 0 0 0 3px #f5c400, 0 0 0 4px rgba(245, 196, 0, .45); } 100% { box-shadow: none; } }
.cell.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
body:not(.can-edit) .cell[data-job] { cursor: pointer; }
body:not(.can-edit) .cell[data-job]:hover { filter: brightness(.96); }
.cell.ro { cursor: default; }
.cell.filler { padding: 0; border-bottom: 0; }
.cell.filler .txt { min-height: 0; }

/* Find window: movable, stays open, ▲ ▼ through the matches */
.find-win { position: fixed; z-index: 64; width: 330px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); display: flex; flex-direction: column; }
.fw-head { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 10px; background: #f3f5f8; border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0; cursor: move; user-select: none; touch-action: none; }
.fw-grip { color: #a3abb6; letter-spacing: -2px; font-size: 11px; }
.fw-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fw-head button { border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; width: 28px; height: 26px; cursor: pointer; font-size: 11px; color: var(--ink); }
.fw-head button:hover:not(:disabled) { background: #e8f0fe; color: var(--accent); }
.fw-head button:disabled { opacity: .4; cursor: default; }
.fw-head .x { border: 0; background: none; font-size: 20px; width: 24px; color: var(--muted); }
.find-win #findInput { margin: 8px; width: calc(100% - 16px); }
.fw-list { max-height: min(50vh, 380px); overflow-y: auto; border-top: 1px solid var(--line); }
.fr { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eef0f3; background: #fff;
  padding: 7px 10px; font: inherit; cursor: pointer; color: var(--ink); }
.fr:hover { background: var(--bg); }
.fr.active { background: #e8f0fe; box-shadow: inset 3px 0 0 var(--accent); }
.fr.past .fr-main b { color: #5d6673; font-weight: 600; }
.fr .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .2); flex: none; margin-top: 3px; }
.fr-main { display: flex; flex-direction: column; min-width: 0; }
.fr-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-main .sub { font-size: 11.5px; }
.fr-empty { padding: 12px; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .find-win { width: calc(100vw - 16px); } }

/* "+" after the fill colors, and its "Add a job type" box */
.fb-palette .add-type { width: 30px; justify-content: center; padding: 0; font-size: 16px; font-weight: 700; color: var(--accent); border-style: dashed; }
.type-pop { position: fixed; z-index: 62; width: 280px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 10px 12px; }
.type-pop .tp-head { font-weight: 700; margin-bottom: 8px; }
.type-pop label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-weight: 550; font-size: 13px; }
.type-pop label.check { flex-direction: row; align-items: center; font-weight: 450; }
.type-pop .tp-color { display: flex; align-items: center; gap: 8px; }
.type-pop .tp-color input { width: 44px; height: 30px; padding: 2px; }
.type-pop .tp-preview { flex: 1; padding: 4px 8px; border-radius: 4px; font-weight: 700; font-size: 12.5px; border: 1px solid rgba(0, 0, 0, .1); }
.type-pop .tp-foot { display: flex; align-items: center; gap: 6px; }
.type-pop .tp-foot .sub { font-size: 11px; }

/* Format bar, frozen under the top bar while you scroll (like Excel's ribbon).
   Row 1: tools. Row 2: the fill colors, with their names. */
.formatbar { position: sticky; top: var(--topbar, 52px); z-index: 15; display: flex; flex-direction: column; gap: 5px; padding: 5px 6px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 6px rgba(16, 24, 40, .08); }
.fb-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.formatbar .sel-info { flex: 0 1 230px; min-width: 120px; display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 0 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.formatbar .sel-info .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .2); flex: none; }
.fb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 2px; flex: none; }
.fb-group { display: inline-flex; flex: none; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: #fff; }
.fb-group button { border: 0; background: none; font: inherit; font-size: 12.5px; line-height: 1; padding: 5px 7px; cursor: pointer; color: var(--ink); min-width: 28px; height: 26px; white-space: nowrap; }
.fb-group button + button { border-left: 1px solid var(--line); }
.fb-group button:hover:not(:disabled) { background: var(--bg); }
.fb-group button.on { background: #e8f0fe; color: var(--accent); }
.fb-group button:disabled { color: #b8bec6; cursor: default; }
.fb-group.zoom #zoomLabel { min-width: 44px; font-variant-numeric: tabular-nums; }

/* Fill colors: labeled chips so you can tell what each color means */
.fb-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 5px; border-top: 1px solid var(--line); }
.fb-palette button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 4px; border: 1px solid var(--line-strong); border-radius: 13px;
  background: #fff; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; white-space: nowrap; flex: none; }
.fb-palette button:hover { border-color: var(--accent); background: #f5f9ff; }
.fb-palette button.current { border-color: var(--accent); background: #e8f0fe; box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }
.fb-palette .sw { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); flex: none; }
.fb-palette .sw.none { display: grid; place-items: center; background: #fff; font-size: 10px; color: var(--muted); }
.fb-palette-label { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0 2px 0 2px; white-space: nowrap; flex: none; }
/* Narrower screens: drop the button words, keep the tools on one row */
@media (max-width: 1360px) { .formatbar .lbl { display: none; } }
@media (max-width: 1100px) {
  .fb-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fb-tools::-webkit-scrollbar { display: none; }
  .formatbar .sel-info { display: none; }
}

.legend .lg-label { font-size: 12px; color: var(--muted); font-weight: 600; align-self: center; margin-right: 2px; }
.legend.palette button:hover { border-color: var(--accent); }
.legend button.current { border-color: var(--accent); box-shadow: 0 0 0 2px #b6d0fb; }
.legend .sw.none { display: grid; place-items: center; background: #fff; font-size: 11px; color: var(--muted); }
.legend .lg-mode { margin-left: auto; border-style: dashed; color: var(--muted); padding: 3px 10px; }

.tip { position: relative; background: #f0f6ff; border: 1px solid #c8dcfb; border-radius: 8px; padding: 8px 34px 8px 12px; margin-bottom: 10px; line-height: 1.6; font-size: 13px; }
.tip .x { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }

/* Right-click menu, hover card, note popup */
.ctx-menu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 6px; min-width: 250px; }
.ctx-menu > button { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; font: inherit; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.ctx-menu > button kbd { margin-left: auto; }
.ctx-menu > button:hover:not(:disabled) { background: var(--bg); }
.ctx-menu > button:disabled { color: #b8bec6; cursor: default; }
.ctx-menu > button.on { color: var(--accent); }
.ctx-menu > button.danger { color: var(--danger); }
.ctx-menu .m-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.ctx-menu .m-colors { display: grid; grid-template-columns: repeat(7, 26px); gap: 5px; padding: 4px 6px; }
.ctx-menu .m-colors button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .2); cursor: pointer; padding: 0; }
.ctx-menu .m-colors button:hover { transform: scale(1.12); }
.ctx-menu .m-colors button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.ctx-menu .m-colors .none { background: #fff; color: var(--muted); }
.hover-card { position: fixed; z-index: 55; width: 290px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 10px 12px; font-size: 13px; pointer-events: none; }
.hover-card .hc-title { font-weight: 700; display: flex; gap: 6px; align-items: center; }
.hover-card .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .2); flex: none; }
.hover-card .hc-row { display: flex; gap: 8px; margin-top: 3px; }
.hover-card .hc-row span { color: var(--muted); width: 56px; flex: none; }
.hover-card .hc-note { margin-top: 6px; background: #fffbe6; border: 1px solid #f2e3a0; border-radius: 6px; padding: 6px 8px; white-space: pre-wrap; }
.hover-card .hc-foot { margin-top: 6px; font-size: 12px; font-weight: 650; }
.note-pop { position: fixed; z-index: 58; width: 300px; background: #fffbe6; border: 1px solid #e9d27a; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 8px; }
.note-pop .np-head { font-size: 12px; font-weight: 650; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-pop textarea { background: #fffef5; border-color: #e9d27a; }
.note-pop .np-foot { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.note-pop .np-foot kbd { background: transparent; border: 0; color: inherit; opacity: .7; padding: 0; }
.spacer { flex: 1; }

/* Day card */
#dayDialog header { gap: 10px; }
#dayDialog .day-nav { display: flex; gap: 4px; }
#dayDialog .day-h { flex: 1; }
.dcard { border: 1px solid var(--line); border-left: 6px solid var(--bar); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.dcard .dc-head { display: flex; gap: 8px; align-items: center; }
.dcard .dc-title { flex: 1; font-weight: 650; font-size: 15px; }
.dcard .dc-head select { width: 190px !important; flex: none; }
.dcard .dc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin-top: 8px; }
.dialog .body .dcard label { font-size: 12px; color: var(--muted); font-weight: 550; margin: 0; gap: 2px; }
.dcard .dc-grid .wide { grid-column: span 3; }
.dialog .body .dcard .dc-notes { margin-top: 6px; }
.dcard .dc-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dialog .body .dcard .dc-foot label.check { margin: 0; font-size: 13px; color: var(--ink); }
.dcard input[readonly], .dcard textarea[readonly] { background: #f8f9fb; }
.dcard.loanc { border-left-color: #00a3ad; cursor: pointer; }
.dc-add { display: flex; gap: 8px; margin-top: 4px; }
.dc-add input { flex: 1; }
#dayBody h3 { margin: 14px 0 8px; }
button.linkish { border: 0; background: none; font: inherit; font-weight: 650; padding: 0; cursor: pointer; color: inherit; }
button.linkish:hover { color: var(--accent); }

/* Toast with Undo */
.toast { display: flex; align-items: center; gap: 12px; }
body:has(#tab-calendar:not([hidden])) .toast { bottom: calc(var(--mt-h, 48px) + 14px); }
.toast-action { border: 0; background: none; color: #8ab4f8; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }

/* Search results */
.search-results .grp { padding: 6px 12px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; background: #fbfcfd; }
.search-results .item.active { background: #e8f0fe; }

/* Phones: pinch-zoom works; the month scrolls sideways; the header scrolls away and the format bar freezes at the top */
@media (max-width: 760px) {
  .month-wrap .month { min-width: 760px; }
  .topbar { position: static; }
  .formatbar { top: 0; margin: 0 -12px 8px; border-radius: 0; border-left: 0; border-right: 0; z-index: 40; }
  .formatbar .sel-info, .formatbar .lbl { display: none; }
  .fb-group button { padding: 6px 9px; font-size: 14px; height: 32px; min-width: 34px; }
  /* Colors stay labeled on phones; swipe the row sideways to see them all */
  .fb-palette { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fb-palette::-webkit-scrollbar { display: none; }
  .fb-palette button { height: 32px; font-size: 13.5px; padding: 0 11px 0 5px; border-radius: 16px; }
  .fb-palette .sw { width: 20px; height: 20px; }
  .cell { font-size: 13px; min-height: 28px; padding-top: 5px; padding-bottom: 5px; }
  .tip { font-size: 12px; }
  .dcard .dc-grid { grid-template-columns: 1fr 1fr; }
  .dcard .dc-grid .wide { grid-column: span 2; }
  .dcard .dc-head { flex-wrap: wrap; }
  .dcard .dc-head select { width: 100% !important; }
  .ctx-menu { min-width: 230px; max-height: 80vh; overflow: auto; }
  .hover-card { display: none; }
}

/* Settings: reminder schedule */
.next-send { background: #eaf6ec; border: 1px solid #b7e1c1; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.next-send.off { background: #f6f7f9; border-color: var(--line-strong); color: var(--muted); }
.next-send .ns-main { font-size: 15px; margin-bottom: 2px; }
.card label.check.big { font-weight: 650; font-size: 15px; }
.field-label { font-weight: 550; margin: 4px 0 6px; }
.day-picks { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.card .day-picks label { display: block; margin: 0; }
.day-picks input { position: absolute; opacity: 0; pointer-events: none; }
.day-picks span { display: inline-block; min-width: 50px; text-align: center; padding: 7px 0; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; font-weight: 600; background: #fff; }
.day-picks input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.day-picks input:focus-visible + span { outline: 2px solid #b6d0fb; }
.type-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.card label.type-pick { flex-direction: row; align-items: center; gap: 6px; margin: 0; font-weight: 450; font-size: 13px; border: 1px solid var(--line); border-radius: 16px; padding: 3px 10px 3px 6px; background: #fff; cursor: pointer; }
.type-pick .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); }
.type-pick:has(input:not(:checked)) { opacity: .55; }

/* Pending list beside the month (the old sheet's "Pending Jobs/Equipment sent out" box) */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; align-items: start; }
.pending-panel { position: sticky; top: calc(var(--topbar, 52px) + var(--fbh, 0px) + 16px); background: var(--panel); border: 2px solid #f0c36d;
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; max-height: calc(100vh - var(--topbar, 52px) - var(--fbh, 0px) - var(--mt-h, 48px) - 40px);
  display: flex; flex-direction: column; }
.pp-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 2px; background: #fff7e0; }
.pp-title { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #7a5200; }
.pp-count { margin-left: auto; min-width: 22px; text-align: center; font-size: 12px; font-weight: 700; background: #f0c36d; color: #4d3400; border-radius: 10px; padding: 1px 7px; }
.pp-count:empty { display: none; }
.pp-sub { font-size: 11.5px; color: #7a5200; padding: 0 10px 6px; background: #fff7e0; border-bottom: 1px solid #f0d9a4; }
.pp-lines { overflow-y: auto; flex: 1; border-top: 0; }
.pp-empty { padding: 14px 10px; color: var(--muted); font-size: 13px; }
.pp-foot { font-size: 11px; color: var(--muted); padding: 6px 10px; border-top: 1px solid var(--line); background: #fbfcfd; }
.pending-panel.drop { outline: 3px dashed var(--accent); outline-offset: -3px; }
.lday.pending-l { border-color: #f0c36d; }
.lday.pending-l h3 { background: #fff7e0; color: #7a5200; }
@media (max-width: 1000px) {
  .cal-layout { grid-template-columns: 1fr; }
  .pending-panel { position: static; max-height: none; }
}
@media print { .cal-layout { grid-template-columns: 1fr 200px; } .pending-panel { position: static; max-height: none; box-shadow: none; } .pp-foot { display: none; } }

/* Settings: reminder email cards */
.settings .wide-card { grid-column: 1 / -1; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.run-card { border: 1px solid var(--line-strong); border-radius: 10px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.run-card.on { border-left: 5px solid #2da44e; }
.run-card.off { border-left: 5px solid #c4cad3; }
.run-card.dirty { box-shadow: 0 0 0 2px #f6d79a; }
.run-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8f9fb; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.run-head .run-name { flex: 1 1 220px; font-weight: 700; font-size: 15px; border-color: transparent; background: transparent; }
.run-head .run-name:hover, .run-head .run-name:focus { border-color: var(--line-strong); background: #fff; }
.run-next { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill.on { background: #eaf6ec; color: var(--ok); }
.pill.off { background: #eef0f3; color: var(--muted); }
.pill.warn { background: #fff4e5; color: var(--warn); }
.run-body { padding: 12px 14px; }
.run-grid { display: grid; grid-template-columns: auto auto 1fr; gap: 14px 22px; align-items: start; margin-bottom: 6px; }
.run-body .field-label { margin-top: 8px; }
.run-body textarea, .run-body input:not([type=checkbox]):not([type=radio]), .run-body select { max-width: 100%; }
.run-body label.check { margin: 6px 0 0; }
.row.tight { gap: 6px; flex-wrap: wrap; }
.quick-add { margin-left: 10px; font-weight: 400; font-size: 12px; color: var(--muted); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.pick-people { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.person { border: 1px solid var(--line-strong); background: #fff; border-radius: 14px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.person.in { background: #e8f0fe; border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* Reminder recipients as bubbles */
.rcpt-box { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 40px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: text; }
.rcpt-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px #b6d0fb; }
.rchip { display: inline-flex; align-items: center; gap: 6px; background: #e8f0fe; border: 1px solid #b6d0fb; color: #174ea6; border-radius: 15px;
  padding: 3px 4px 3px 11px; font-size: 13px; font-weight: 600; max-width: 100%; }
.rchip small { font-weight: 400; color: #4b6aa8; font-size: 11.5px; }
.rchip button { border: 0; background: rgba(23, 78, 166, .12); color: #174ea6; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; flex: none; }
.rchip button:hover { background: #cf222e; color: #fff; }
.jrem { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0 6px; background: #fbfcfd; }
.jrem h3 { margin: 0 0 8px; font-size: 14px; }
.jrem h3 .sub { font-weight: 400; color: var(--muted, #6b7280); font-size: 12px; margin-left: 4px; }
.jrem-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.jrem-list:empty { display: none; }
.jrem-list li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 7px; background: #fff8e1; border: 1px solid #f2d98b; font-size: 13px; }
.jrem-list li.sent { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
.jrem-list li.failed { background: #fdecec; border-color: #f5b5b5; }
.jrem-list .jr-main { flex: 1; min-width: 0; }
.jrem-list .jr-when { font-weight: 600; }
.jrem-list .jr-sub { font-size: 12px; color: #6b7280; word-break: break-word; }
.jrem-list .jr-x { border: 0; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 2px; }
.jrem-list .jr-x:hover { color: #cf222e; }
.jrem-new { display: grid; gap: 8px; }
.jrem-new .lbl { font-size: 13px; font-weight: 600; margin-bottom: -4px; }
.jrem-new #remAdd { justify-self: start; }
.jrem-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.jrem-presets button { border: 1px solid var(--line-strong); background: #fff; border-radius: 14px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.jrem-presets button:hover, .jrem-presets button.on { border-color: var(--accent); background: #e8f0fe; color: #174ea6; }
.jrem .rcpt-input { flex: 1 1 160px; min-width: 140px; border: 0 !important; outline: none; box-shadow: none !important; padding: 4px 6px; background: transparent; }
.run-body .rcpt-input { flex: 1 1 180px; min-width: 160px; border: 0 !important; outline: none; box-shadow: none !important; padding: 4px 6px; background: transparent; }
.pick-people .sub { align-self: center; margin-right: 2px; }
.seg-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-radio label { flex: 1 1 240px; margin: 0 !important; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span { display: block; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600; background: #fff; }
.seg-radio small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.seg-radio input:checked + span { border-color: var(--accent); background: #f0f6ff; box-shadow: 0 0 0 1px var(--accent); }
.run-actions { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.type-pick.loans { border-style: dashed; }
/* On/off switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; margin: 0 !important; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #c4cad3; border-radius: 11px; cursor: pointer; transition: background .15s; }
.switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.switch input:checked + span { background: #2da44e; }
.switch input:checked + span::before { transform: translateX(18px); }
@media (max-width: 760px) { .run-grid { grid-template-columns: 1fr; } }

/* Month tabs (like the sheet's tabs) */
/* Pinned along the bottom of the screen, like the sheet tabs in Google Sheets */
.month-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: stretch; gap: 6px; margin: 0;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); background: #f8f9fb; border-top: 1px solid var(--line-strong); box-shadow: 0 -2px 8px rgba(16, 24, 40, .06); }
body:has(#tab-calendar:not([hidden])) main { padding-bottom: calc(var(--mt-h, 48px) + 16px); }
#tab-calendar[hidden] .month-tabs { display: none; }
.mt-hidden-btn { flex: none; border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.mt-hidden-btn:hover, .mt-hidden-btn.on { color: var(--accent); border-color: var(--accent); background: #f0f6ff; }
.mt-strip { flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.mt-tab { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; overflow: hidden; }
.mt-tab .mt-go { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 550; padding: 5px 10px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.mt-tab .mt-x { border: 0; background: none; font: inherit; font-size: 14px; line-height: 1; padding: 5px 7px 5px 2px; cursor: pointer; color: var(--muted); opacity: 0; }
.mt-tab:hover .mt-x, .mt-tab.active .mt-x { opacity: 1; }
.mt-tab .mt-x:hover { color: var(--danger); }
.mt-tab:hover { border-color: var(--line-strong); }
.mt-tab.now .mt-go::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 5px; vertical-align: middle; }
.mt-tab.active { background: var(--accent); border-color: var(--accent); }
.mt-tab.active .mt-go, .mt-tab.active .mt-x { color: #fff; }
.mt-tab.active.now .mt-go::after { background: #fff; }
.mt-tab.is-hidden { border-style: dashed; }
.mt-add { flex: none; border: 1px dashed var(--line-strong); background: var(--panel); border-radius: 8px; width: 34px; font-size: 16px; font-weight: 700;
  color: var(--accent); cursor: pointer; }
.mt-add:hover { border-color: var(--accent); background: #f0f6ff; }
.mt-tab.is-hidden:not(.active) .mt-go { color: var(--muted); }
.mt-pop { position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 30; width: min(520px, calc(100vw - 24px)); max-height: 70vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 12px; }
.mt-pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.mt-year { margin-bottom: 10px; }
.mt-yh { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.mt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mt-item { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; font-size: 13px; }
.mt-item.active { border-color: var(--accent); background: #f0f6ff; }
.mt-item button { border: 0; background: none; font: inherit; cursor: pointer; padding: 0; color: var(--ink); font-weight: 550; }
.mt-item button:hover { color: var(--accent); text-decoration: underline; }
.mt-item .sub { margin-left: auto; font-size: 11px; }
.mt-pop-foot { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .mt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mt-tab .mt-x { opacity: 1; }
  .month-tabs { padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); }
}

/* Printing (Ctrl+P): just the month grid, landscape */
@media print {
  .month-tabs { display: none !important; }
  @page { size: landscape; margin: 10mm; }
  body { background: #fff; }
  .topbar, .formatbar, .tip, .cal-actions, #prev, #next, #todayBtn, .legend .lg-mode, .legend .lg-label, .toast, .day .count, .grip, .cell.blank { display: none !important; }
  main { padding: 0; max-width: none; }
  .month-wrap, .month { box-shadow: none !important; overflow: visible; zoom: 1 !important; }
  .cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 10px; min-height: 0; }
  .legend button { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .day { break-inside: avoid; }
}