/* One translucent attendance sheet; cell semantics and report typography stay intact. */
:root{
 --attendance-glass:color-mix(in srgb,var(--apple-surface) 52%,transparent);
 --attendance-glass-edge:color-mix(in srgb,var(--apple-white) 72%,var(--line));
 --attendance-glass-sheen:color-mix(in srgb,var(--apple-white) 14%,transparent);
 --attendance-glass-shadow:0 10px 30px color-mix(in srgb,var(--apple-black) 5%,transparent);
}
:root[data-theme=dark]{
 --attendance-glass:color-mix(in srgb,var(--apple-surface) 54%,transparent);
 --attendance-glass-edge:color-mix(in srgb,var(--apple-white) 16%,transparent);
 --attendance-glass-sheen:color-mix(in srgb,var(--apple-white) 4%,transparent);
 --attendance-glass-shadow:0 10px 30px color-mix(in srgb,var(--apple-black) 18%,transparent);
}
@media screen{
 /* Soft color behind the sheet makes the material visible on an otherwise flat canvas. */
 .workspace-ui:not(.attendance-focus) main:has(.workspace-sheet){
  background:radial-gradient(ellipse at 8% 32%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),radial-gradient(ellipse at 95% 80%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 52%),var(--apple-canvas);
  background-attachment:fixed;
 }
 .workspace-ui .workspace-sheet,.workspace-ui.attendance-focus .workspace-sheet{
  background:linear-gradient(120deg,var(--attendance-glass-sheen),transparent 60%),var(--attendance-glass);
  border-color:var(--attendance-glass-edge);box-shadow:var(--attendance-glass-shadow),inset 0 1px 0 var(--attendance-glass-sheen);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
 }
 .workspace-ui .workspace-sheet .workspace-sheet-heading,
 .workspace-ui .workspace-sheet .workspace-controls,
 .workspace-ui .workspace-sheet #pagination,
 .workspace-ui .workspace-sheet .month-grid{background:transparent}
 .workspace-ui .workspace-sheet .month-grid .day-cell:not(.sunday):not(.holiday-day):not(.makeup-day):not(.proposed-day){--attendance-day-bg:transparent}
 .workspace-ui .workspace-sheet .month-grid tbody td.summary-col:not(.attendance-review-pinned){background:transparent}
 .workspace-ui:not(.attendance-focus) .duty-calendar-toolbar{
  background:var(--attendance-glass);border-color:var(--attendance-glass-edge);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
 }
 /* A neutral backing keeps the chosen light/dark sheet readable in focus mode. */
 .workspace-ui.attendance-focus #content{background:var(--apple-canvas);border-radius:var(--radius-panel)}
 /* Confirmation text gets a denser pane than the main workspace. */
 body.workspace-ui #appNoticeDialog .app-notice-card{
  --floating-glass:color-mix(in srgb,var(--apple-surface) 74%,transparent);
  --floating-blur:16px;
 }
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .workspace-ui .workspace-sheet,.workspace-ui:not(.attendance-focus) .duty-calendar-toolbar{background:var(--surface)}
 }
}
@media screen and (max-width:900px){
 /* Sticky toolbars need their own translucent surface when content passes underneath. */
 .workspace-ui .workspace-sheet .workspace-sheet-heading,
 .workspace-ui .workspace-sheet .workspace-controls{background:color-mix(in srgb,var(--apple-surface) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .workspace-ui .workspace-sheet .mobile-staff{background:color-mix(in srgb,var(--apple-surface) 48%,transparent)}
 .workspace-ui .workspace-sheet .mobile-view-switch,.workspace-ui .workspace-sheet .mobile-day-status{background:color-mix(in srgb,var(--bg-alt) 55%,transparent)}
}

/* Light appearance: cool neutral canvas beneath a clearer white glass sheet. */
@media screen{
 html[data-theme=light] .workspace-ui{
  --attendance-light-canvas:color-mix(in srgb,var(--accent) 2%,color-mix(in srgb,var(--apple-ink) 6%,var(--apple-canvas)));
  --attendance-glass:color-mix(in srgb,var(--apple-white) 46%,transparent);
  --attendance-glass-edge:color-mix(in srgb,var(--apple-white) 94%,var(--line));
  --attendance-glass-sheen:color-mix(in srgb,var(--apple-white) 24%,transparent);
  --attendance-glass-shadow:0 12px 32px color-mix(in srgb,var(--apple-black) 9%,transparent);
 }
 html[data-theme=light] .workspace-ui:not(.attendance-focus) main:has(.workspace-sheet){
  background:radial-gradient(ellipse at 8% 32%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 58%),radial-gradient(ellipse at 95% 80%,color-mix(in srgb,var(--apple-white) 30%,transparent),transparent 55%),var(--attendance-light-canvas);
  background-attachment:fixed;
 }
 html[data-theme=light] .workspace-ui .workspace-sheet .workspace-search:not(:focus-within){
  background:color-mix(in srgb,var(--apple-white) 42%,transparent);
  border-color:color-mix(in srgb,var(--apple-white) 75%,var(--line));
 }
 html[data-theme=light] .workspace-ui .workspace-sheet-tools :is(.attendance-focus-toggle,.attendance-actions-toggle):where(:not(:hover):not([aria-pressed=true])),
 html[data-theme=light] .workspace-ui .workspace-controls .attendance-symbol-settings:not(:hover){
  background:color-mix(in srgb,var(--apple-white) 40%,transparent);
  border-color:color-mix(in srgb,var(--apple-white) 70%,var(--line));
 }
 html[data-theme=light] .workspace-ui .workspace-period :is(.attendance-month-toggle,#printGrid):not(:hover){
  background:color-mix(in srgb,var(--apple-white) 58%,transparent);
  border-color:color-mix(in srgb,var(--apple-white) 78%,var(--line));
 }
 /* Frozen headers/name columns intentionally stay opaque for readable scrolling. */
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme=light] .workspace-ui .workspace-sheet{background:var(--surface)}
 }
}
@media screen and (max-width:900px){
 html[data-theme=light] .workspace-ui .workspace-sheet :is(.workspace-sheet-heading,.workspace-controls){background:color-mix(in srgb,var(--apple-white) 80%,transparent)}
 html[data-theme=light] .workspace-ui .workspace-sheet .mobile-staff{background:color-mix(in srgb,var(--apple-white) 40%,transparent)}
}

/* Match the monochrome dark appearance while retaining stored symbol colors. */
@media screen{
 html[data-theme=light] .workspace-ui .workspace-sheet{
  --custom-symbol-display-ink:var(--text);
  --custom-symbol-display-bg:var(--bg-alt);
 }
 html[data-theme=light] .workspace-ui .workspace-sheet .workspace-controls .workspace-code{background:var(--bg-alt);color:var(--text)}
 html[data-theme=light] .workspace-ui .workspace-sheet .workspace-controls .symbol.selected{--custom-symbol-display-ink:var(--accent);--custom-symbol-display-bg:var(--info-bg)}
 html[data-theme=light] .workspace-ui .workspace-sheet .workspace-controls .symbol.selected .workspace-code{background:var(--info-bg);color:var(--accent)}
 html[data-theme=light] .workspace-ui .workspace-sheet .month-grid :is(.sunday,.holiday-day,.makeup-day,.proposed-day){--attendance-day-bg:color-mix(in srgb,var(--apple-ink) 3%,transparent);background:var(--attendance-day-bg)}
 html[data-theme=light] .workspace-ui .workspace-sheet .month-grid .day-cell.marked[style*="--attendance-cell-color"]{background:var(--attendance-day-bg);color:var(--text)}
 html[data-theme=light] .workspace-ui .workspace-sheet .month-grid thead :is(.sunday,.holiday-day,.makeup-day,.proposed-day){background:var(--bg-alt)}
 html[data-theme=light] .workspace-ui .workspace-sheet .month-grid :is(.sunday,.holiday-day,.makeup-day,.proposed-day) :is(.attendance-day-number,.attendance-day-weekday){color:var(--text-2)}
 html[data-theme=light] .workspace-ui .workspace-sheet .month-grid thead th.workspace-today{background:var(--info-bg)}
 html[data-theme=light] .workspace-ui .workspace-sheet .month-grid .workspace-today :is(.attendance-day-number,.attendance-day-weekday){color:var(--accent)}
 html[data-theme=light] .workspace-ui .workspace-sheet .staff-role-tag{background:transparent;color:var(--text-2);border-color:transparent}
 html[data-theme=light] .workspace-ui .workspace-sheet .mobile-staff-status .workspace-cell-code{background:var(--bg-alt);color:var(--text)}
 html[data-theme=light] .workspace-ui .workspace-sheet .mobile-staff .workspace-avatar{background:var(--bg-alt);color:var(--text-2)}
 html[data-theme=light] .workspace-ui .workspace-sheet .mobile-staff.is-recorded{border-left-color:var(--line)}
 html[data-theme=light] .workspace-ui .workspace-sheet .mobile-holiday-note{background:var(--bg-alt);color:var(--text-2)}
 /* Day tags retain their shape and responsive layout, using white glass instead of pastels. */
 html[data-theme=light] .workspace-ui .duty-calendar-day,
 html[data-theme=light] .workspace-ui .duty-calendar-day:is(.is-weekend,.is-today){
  --day-tag-start:var(--bg-alt);--day-tag-end:var(--bg-alt);--day-tag-ink:var(--text);
  border-color:var(--line);background:var(--attendance-glass);
  box-shadow:inset 0 1px 0 var(--attendance-glass-sheen);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 }
 html[data-theme=light] .workspace-ui .duty-calendar .duty-calendar-day .duty-calendar-day-heading{background:color-mix(in srgb,var(--apple-white) 35%,transparent);border-color:var(--line)}
 html[data-theme=light] .workspace-ui .duty-calendar-day-heading::before{border-color:var(--line);background:color-mix(in srgb,var(--apple-white) 65%,transparent);box-shadow:none}
 html[data-theme=light] .workspace-ui .duty-calendar-day .duty-calendar-day-heading time{color:var(--text-2);font-weight:400}
 html[data-theme=light] .workspace-ui .duty-calendar-day .duty-weekend-badge{padding-inline:3px;background:transparent;border-color:var(--line);color:var(--text-2);font-size:9px;font-weight:400}
 html[data-theme=light] .workspace-ui .duty-calendar-day.is-weekend{background:color-mix(in srgb,var(--bg-alt) 48%,transparent)}
 html[data-theme=light] .workspace-ui .duty-calendar-day.is-today{--day-tag-ink:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
 html[data-theme=light] .workspace-ui .duty-calendar-day .duty-today-badge{padding-inline:3px;background:var(--info-bg);border-color:transparent;color:var(--accent);font-size:9px;font-weight:500}
 html[data-theme=light] .workspace-ui .duty-calendar-person{border-color:var(--line);background:color-mix(in srgb,var(--apple-white) 55%,transparent);box-shadow:none}
 html[data-theme=light] .workspace-ui .duty-calendar-name{color:var(--text);font-weight:500}
 html[data-theme=light] .workspace-ui .duty-calendar-day:hover{border-color:color-mix(in srgb,var(--apple-ink) 22%,transparent);box-shadow:inset 0 1px 0 var(--attendance-glass-sheen)}
 html[data-theme=light] .workspace-ui .duty-calendar-day:is(.is-picking,.duty-drop-target),
 html[data-theme=light] .workspace-ui .duty-calendar-person.duty-drop-person{border-color:var(--accent);background:var(--info-bg);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
 html[data-theme=light] .workspace-ui .duty-calendar-day.duty-drop-invalid{border-color:var(--red-text);box-shadow:0 0 0 2px color-mix(in srgb,var(--red-text) 18%,transparent)}
}