.work-calendar-page { padding-block: 42px 80px; }
.work-calendar-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.work-calendar-heading h1 { margin:0; color:var(--navy); font-size:32px; }
.work-calendar-heading p { margin:8px 0 0; color:var(--muted); }
.work-calendar-toolbar { display:grid; grid-template-columns:minmax(180px,260px) 1fr minmax(180px,260px); align-items:center; margin:28px 0 16px; }
.work-calendar-toolbar > select { min-height:44px; padding:8px 10px; border:1px solid #cbd5dc; border-radius:4px; background:#fff; color:var(--navy); font:inherit; }
.work-calendar-month { grid-column:2; display:flex; width:max-content; align-items:center; justify-content:center; justify-self:center; gap:16px; }
.work-calendar-month strong { width:140px; text-align:center; color:var(--navy); font-size:20px; }
.work-calendar-month button { display:flex; width:42px; height:42px; align-items:center; justify-content:center; padding:0; line-height:0; }
.work-calendar-month button svg { display:block; width:20px; height:20px; }
.work-calendar-filters { display:flex; gap:8px; margin-bottom:9px; }
.work-calendar-filters button { min-height:38px; padding:7px 16px; border:1px solid #cbd8dc; border-radius:20px; background:#fff; color:#536b75; font-weight:700; }
.work-calendar-filters button.is-active { border-color:#147f70; color:#fff; background:#147f70; }
.work-calendar-legend { display:flex; align-items:center; gap:15px; margin-bottom:16px; color:#667982; font-size:11px; }
.work-calendar-legend span { display:flex; align-items:center; gap:6px; }
.work-calendar-legend span::before { width:9px; height:9px; border-radius:50%; background:var(--event-accent); content:""; }
.work-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); overflow:hidden; border:1px solid #cedadd; border-radius:10px; background:#fff; box-shadow:0 7px 24px rgba(19,52,66,.06); }
.work-calendar-weekday { padding:11px 8px; border-bottom:1px solid #dce5e7; color:#647880; background:#f4f7f7; font-size:12px; text-align:center; }
.work-calendar-week { position:relative; display:grid; grid-column:1/-1; grid-template-columns:repeat(7,minmax(0,1fr)); }
.work-calendar-day { min-width:0; min-height:132px; padding:8px; border-right:1px solid #e4eaec; border-bottom:1px solid #e4eaec; }
.work-calendar-week .work-calendar-day:last-of-type { border-right:0; }
.work-calendar-day.is-outside { background:#f8fafb; opacity:.56; }
.work-calendar-day.is-today { box-shadow:inset 0 0 0 2px #21957f; }
.work-calendar-date { display:grid; width:25px; height:25px; place-items:center; margin-bottom:5px; color:#526772; font-size:12px; }
.work-calendar-day.is-today .work-calendar-date { border-radius:50%; color:#fff; background:#168673; font-weight:800; }
.work-calendar-week-events { position:absolute; z-index:2; top:38px; right:0; left:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(4,25px); pointer-events:none; }
.work-calendar-event { display:block; align-self:center; width:auto; min-width:0; height:23px; margin:0 2px; padding:3px 6px; overflow:hidden; border:0; border-left:3px solid #568d9b; border-radius:3px; color:#294957; background:#e8f1f3; font-size:11px; text-align:left; text-overflow:ellipsis; white-space:nowrap; pointer-events:auto; }
.work-calendar-event.is-overdue { border-left-color:#bd5e58; color:#783d39; background:#f8e9e7; }
.work-calendar-event.is-today { border-left-color:#d79937; color:#705124; background:#fff3db; }
.work-calendar-event.is-completed { border-left-color:#849398; color:#718086; background:#eef1f2; text-decoration:line-through; }
.work-calendar-event.is-manual { font-weight:700; }
.is-color-education { --event-accent:#527b9f; --event-text:#34556f; --event-background:#e5eef7; }
.is-color-improvement { --event-accent:#ae7447; --event-text:#714b2e; --event-background:#f6e9df; }
.is-color-teal { --event-accent:#397f74; --event-text:#285b54; --event-background:#e0f0ed; }
.is-color-blue { --event-accent:#5c789d; --event-text:#405875; --event-background:#e8edf5; }
.is-color-purple { --event-accent:#80699a; --event-text:#5b496e; --event-background:#eee9f3; }
.is-color-orange { --event-accent:#b87945; --event-text:#754d2d; --event-background:#f7eadf; }
.is-color-green { --event-accent:#638868; --event-text:#446048; --event-background:#e5f0e7; }
.is-color-gray { --event-accent:#7b888e; --event-text:#4e5c62; --event-background:#eceff1; }
.work-calendar-event[class*="is-color-"] { border-left-color:var(--event-accent); color:var(--event-text); background:var(--event-background); }
.work-calendar-event.is-important { box-shadow:inset 0 0 0 1px rgba(101,79,31,.22); }
.work-calendar-event.is-completed { opacity:.62; filter:saturate(.55); text-decoration:line-through; }
.work-calendar-more { display:block; align-self:center; margin:0 6px; color:#657982; font-size:11px; pointer-events:none; }
.work-calendar-empty { margin-top:20px; padding:28px; border:1px dashed #cbd8dc; border-radius:8px; color:var(--muted); text-align:center; }
.work-calendar-dialog { width:min(560px,calc(100% - 28px)); max-height:calc(100svh - 36px); padding:0; overflow:auto; border:0; border-radius:10px; box-shadow:0 22px 65px rgba(8,30,42,.28); }
.work-calendar-dialog::backdrop { background:rgba(8,30,42,.55); }
.work-calendar-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:26px; }
.work-calendar-form h2,.work-calendar-form label:has(textarea),.work-calendar-message,.work-calendar-dialog-actions { grid-column:1/-1; }
.work-calendar-form h2 { margin:0 0 4px; color:var(--navy); }
.work-calendar-form label { display:grid; gap:7px; min-width:0; color:var(--navy); font-size:13px; font-weight:650; }
.work-calendar-form input,.work-calendar-form select,.work-calendar-form textarea { min-width:0; min-height:44px; padding:10px; border:1px solid #cbd5dc; border-radius:4px; background:#fff; color:var(--navy); font:inherit; }
.work-calendar-form textarea { min-height:92px; resize:vertical; }
.work-calendar-form .work-calendar-important { display:flex; min-height:44px; align-items:center; gap:9px; }
.work-calendar-form .work-calendar-important input { width:18px; min-height:18px; margin:0; accent-color:#147f70; }
.work-calendar-form .work-calendar-colors { display:flex; grid-column:1/-1; align-items:center; gap:12px; min-width:0; margin:0; padding:0; border:0; }
.work-calendar-form .work-calendar-colors legend { margin-bottom:7px; padding:0; color:var(--navy); font-size:13px; font-weight:650; }
.work-calendar-form .work-calendar-colors label { position:relative; display:block; }
.work-calendar-form .work-calendar-colors input { position:absolute; width:1px; min-height:1px; margin:0; opacity:0; }
.work-calendar-form .work-calendar-colors span { display:block; width:26px; height:26px; border:5px solid #fff; border-radius:50%; background:var(--event-accent); box-shadow:0 0 0 1px #bdc9cd; cursor:pointer; }
.work-calendar-form .work-calendar-colors input:checked + span { box-shadow:0 0 0 2px var(--event-accent); }
.work-calendar-form .work-calendar-colors input:focus-visible + span { outline:2px solid #147f70; outline-offset:4px; }
.work-calendar-message { min-height:20px; margin:0; color:#a3443f; font-size:13px; }
.work-calendar-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
@media (max-width:700px) {
  .work-calendar-page { width:calc(100% - 24px); padding-block:25px 50px; }
  .work-calendar-heading { align-items:flex-start; flex-direction:column; }
  .work-calendar-toolbar { grid-template-columns:1fr; gap:13px; }
  .work-calendar-month { grid-column:1; grid-row:1; }
  .work-calendar-toolbar > select { grid-row:2; }
  .work-calendar-grid { overflow-x:auto; grid-template-columns:repeat(7,minmax(92px,1fr)); }
  .work-calendar-week { grid-template-columns:repeat(7,minmax(92px,1fr)); }
  .work-calendar-day { min-height:140px; }
  .work-calendar-form { grid-template-columns:1fr; padding:20px; }
  .work-calendar-form h2,.work-calendar-form label,.work-calendar-message,.work-calendar-dialog-actions { grid-column:1; }
}