/* OQCal — shared Day/Week/Month calendar (Google-Calendar style). Consumes tokens.css. */
.oqcal{display:flex;flex-direction:column;gap:12px;}
.oqcal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.oqcal-head .oqcal-title{font-size:15px;font-weight:var(--w-bold);letter-spacing:-.01em;flex:1;min-width:160px;}
.oqcal-views{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;}
.oqcal-views button{appearance:none;border:0;background:transparent;color:var(--fg-muted);font:inherit;font-size:13px;font-weight:var(--w-medium);padding:5px 12px;border-radius:7px;cursor:pointer;}
.oqcal-views button.on{background:var(--accent);color:var(--accent-fg);}
.oqcal-nav{display:flex;gap:4px;align-items:center;}
.oqcal-nav button{appearance:none;border:1px solid var(--border-strong);background:var(--surface-3);color:var(--fg);font:inherit;font-size:14px;height:30px;min-width:30px;padding:0 10px;border-radius:8px;cursor:pointer;}
.oqcal-nav button:hover{background:var(--surface-4);}
/* the jump dropdown (replaces ‹ ›): pick a day/week/month directly */
.cal-jump{appearance:none;-webkit-appearance:none;border:1px solid var(--border-strong);background-color:var(--surface-3);color:var(--fg);font:inherit;font-size:13px;font-weight:var(--w-medium);height:30px;padding:0 26px 0 11px;border-radius:8px;cursor:pointer;max-width:210px;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) center,calc(100% - 9px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.cal-jump:hover{background-color:var(--surface-4);}
@media(max-width:560px){.cal-jump{height:44px;font-size:14px;flex:1;max-width:none;} .oqcal-nav{flex:1;} .oqcal-nav #cal-today{height:44px;}}

/* ---- time grid (day / week) ---- */
.oqcal-grid{display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-1);}
.oqcal-grid.week{grid-template-columns:54px repeat(7,1fr);}
.oqcal-grid.day{grid-template-columns:54px 1fr;}
.oqcal-colhead{position:sticky;top:0;z-index:2;background:var(--glass-1);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:8px 6px;text-align:center;font-size:11px;color:var(--fg-muted);}
.oqcal-colhead .dn{text-transform:uppercase;letter-spacing:.04em;font-size:10px;}
/* every day-number is the SAME 30x30 centered box so the "today" circle aligns perfectly
   with the plain numbers in adjacent columns (it just fills the box with the accent). */
.oqcal-colhead .dd{font-size:18px;font-weight:var(--w-bold);color:var(--fg);line-height:1;display:inline-grid;place-items:center;width:30px;height:30px;margin-top:2px;}
.oqcal-colhead.today .dd{color:var(--accent-fg);background:var(--accent);border-radius:50%;}
.oqcal-corner{background:var(--glass-1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2;}
.oqcal-gutter{border-right:1px solid var(--border);}
.oqcal-hour{height:48px;border-bottom:1px solid var(--border);font-size:10.5px;color:var(--fg-subtle);text-align:right;padding:2px 6px 0 0;box-sizing:border-box;}
.oqcal-col{position:relative;border-right:1px solid var(--border);}
.oqcal-col:last-child{border-right:0;}
.oqcal-col .slot{height:48px;border-bottom:1px solid var(--border);box-sizing:border-box;}
.oqcal-ev{position:absolute;left:3px;right:3px;border-radius:7px;padding:3px 6px;font-size:11px;overflow:hidden;cursor:pointer;border-left:3px solid var(--accent);background:var(--accent-ghost);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18);}
.oqcal-ev b{display:block;font-size:11px;font-weight:var(--w-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.oqcal-ev .et{font-size:10px;color:var(--fg-muted);}
.oqcal-ev.completed{border-left-color:var(--ok);background:var(--ok-ghost);}
.oqcal-ev.cancelled{border-left-color:var(--err);background:var(--danger-ghost);opacity:.65;}
.oqcal-ev.pending_acceptance{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent);}

/* ---- month grid ---- */
.oqcal-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.oqcal-month .mh{background:var(--glass-1);padding:7px 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);border-bottom:1px solid var(--border);text-align:center;}
.oqcal-mday{min-width:0;overflow:hidden;min-height:104px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 6px;background:var(--surface-1);}
.oqcal-mday:nth-child(7n){border-right:0;}
.oqcal-mday.dim{background:var(--surface-2);opacity:.55;}
.oqcal-mday .mdn{font-size:12px;color:var(--fg-muted);margin-bottom:4px;} .oqcal-mday.today .mdn{color:var(--accent-fg);background:var(--accent);width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-weight:var(--w-bold);}
.oqcal-mchip{font-size:10.5px;border-radius:5px;padding:2px 5px;margin-bottom:3px;cursor:pointer;border-left:3px solid var(--accent);background:var(--accent-ghost);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.oqcal-mchip.completed{border-left-color:var(--ok);background:var(--ok-ghost);} .oqcal-mchip.cancelled{border-left-color:var(--err);opacity:.6;}
.oqcal-more{font-size:10px;color:var(--fg-subtle);cursor:pointer;}
@media(max-width:760px){
  .oqcal-grid.week{grid-template-columns:40px repeat(7,minmax(64px,1fr));overflow-x:auto;}
  .oqcal-month{font-size:11px;} .oqcal-mday{min-height:72px;}
}