/* WorkForce Setup module styles (tokens only, logical properties only).
   Shared components (cards, tables, dialogs, pickers, tabs, status badges) come from css/components.css. */

/* Label colors for shifts: chart series tokens; 0 = system shift. */
.wf-c0 { --wf-c: var(--muted-foreground); }
.wf-c1 { --wf-c: var(--chart-1); }
.wf-c2 { --wf-c: var(--chart-2); }
.wf-c3 { --wf-c: var(--chart-3); }
.wf-c4 { --wf-c: var(--chart-4); }
.wf-c5 { --wf-c: var(--chart-5); }

/* Tabs row with the tab's main action at the end */
.wf-tabbar { display: flex; align-items: flex-end; gap: 12px; border-block-end: var(--border-width) solid var(--border); }
.wf-tabbar .tabs { flex: 1; min-width: 0; border-block-end: 0; }
.wf-tabbar .wf-new { flex: none; margin-block-end: 6px; }
.wf-tabpanel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* List of cards (shifts, work plans, rotation plans) */
.wf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wf-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: var(--card);
}
.wf-dot { width: 12px; height: 12px; margin-block-start: 6px; border-radius: 999px; background: var(--wf-c); flex: none; }
.wf-dot-sm { width: 8px; height: 8px; margin: 0; }
.wf-item-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.wf-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wf-item-title { margin: 0; font-size: var(--text-body-md-size); font-weight: 600; overflow-wrap: anywhere; }
.wf-item-time { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wf-item-meta, .wf-item-desc { margin: 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.wf-item-desc { color: var(--foreground); }
.wf-item-meta .wf-sep { margin-inline: 6px; }
.wf-sep { color: var(--muted-foreground); }
.wf-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.wf-push { margin-inline-start: auto; }
.wf-code { font-family: var(--typeface-mono); letter-spacing: .02em; }
.wf-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wf-tag {
  padding: 2px 8px; border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  background: var(--muted); color: var(--foreground); font-size: var(--text-body-xs-size, 12px);
}
.toolbar .wf-wide-select { flex: 0 1 300px; }
.wf-sort { position: relative; display: flex; align-items: center; }
.wf-sort > .icon { position: absolute; inset-inline-start: 12px; z-index: 1; color: var(--muted-foreground); pointer-events: none; }
.wf-sort .select-wrap { flex: 1; }
.wf-sort .select { padding-inline-start: 36px; }

/* Rotation card table */
.wf-rottable { margin-block-start: 8px; }
.wf-viewall { width: 100%; border-radius: 0; border-block-start: var(--border-width) solid var(--border); color: var(--link); }

/* Read-only work plan summary */
.wf-sum { display: grid; gap: 8px; min-width: 0; }
.wf-sum-title { margin: 0; font-size: 16px; font-weight: 600; }
.wf-sumtable tbody th { font-weight: 500; white-space: nowrap; }
.wf-row-off th, .wf-row-off td { color: var(--muted-foreground); }
.wf-shiftline { display: flex; align-items: center; gap: 8px; }
.wf-shiftline + .wf-shiftline { margin-block-start: 4px; }
.wf-total { margin: 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); font-weight: 600; }
.wf-scroll { max-height: 56vh; overflow-y: auto; }
.wf-back, .wf-addrow, .wf-addweek { align-self: flex-start; justify-self: start; }
.wf-assigned { display: flex; align-items: center; gap: 6px; }

/* Forms inside dialogs */
.wf-callout-info {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-lg);
  border: var(--border-width) solid color-mix(in oklab, var(--info) 45%, transparent);
  background: color-mix(in oklab, var(--info) 10%, var(--popover)); color: var(--popover-foreground);
}
.wf-callout-info > .icon { flex: none; margin-block-start: 2px; color: color-mix(in oklab, var(--info) 80%, var(--foreground)); }
.wf-callout-info p { margin: 0; font-size: var(--control-font-size); }
.wf-upper { text-transform: uppercase; }
.wf-time { font-variant-numeric: tabular-nums; }
:is(.dark) .wf-time { color-scheme: dark; }
.wf-textarea { min-height: 64px; }
.wf-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wf-fieldset > legend { padding: 0; margin-block-end: 6px; }
.wf-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--control-height); }
.wf-swatch { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; cursor: pointer; }
.wf-swatch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wf-sw { width: 22px; height: 22px; border-radius: 999px; background: var(--wf-c); }
.wf-swatch-input:checked + .wf-sw { outline: 2px solid var(--foreground); outline-offset: 3px; }
.wf-swatch-input:focus-visible + .wf-sw { outline: var(--focus-ring-width) solid var(--ring); outline-offset: 3px; }
.wf-checkfield { display: grid; gap: 2px; }
.wf-checkfield .field-hint { margin-inline-start: 28px; }
.wf-check { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: var(--control-font-size); font-weight: 500; cursor: pointer; }
.wf-optgroup { display: grid; gap: 10px; }

/* Work plan: shifts per day */
.wf-days { display: grid; gap: 8px; padding-block-start: 12px; border-block-start: var(--border-width) solid var(--border); }
.wf-days-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.wf-day { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.wf-day-name {
  display: flex; align-items: center; min-height: var(--control-height); padding-inline: 12px;
  border: var(--border-width) solid var(--border); border-radius: var(--control-radius);
  font-size: var(--text-body-sm-size); font-weight: 500;
}
.wf-day[data-invalid] .wf-day-name { color: var(--destructive); border-color: var(--destructive); }
.wf-day-slots { display: grid; gap: 6px; min-width: 0; }
.wf-slot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wf-slot .select-wrap { flex: 1; }
.wf-addslot { margin-block-start: 4px; }

/* Rotation dialog: form and the available work plans side by side */
.wf-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.wf-split-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wf-split-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-inline-start: 24px; border-inline-start: var(--border-width) solid var(--border); }
.wf-split .picker { margin-inline: 0; padding: 0; }
.wf-plancards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 560px; overflow-y: auto; }
.wf-plancard { padding: 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.wf-plancard-head { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding-block-end: 8px; border-block-end: var(--border-width) solid var(--border); font-size: var(--control-font-size); }
.wf-plancard-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--text-body-sm-size); font-variant-numeric: tabular-nums; }
.wf-plancard-days li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; }
.wf-plancard-days li > span:first-child { color: var(--muted-foreground); }
.wf-setup {
  display: grid; gap: 8px; padding: 12px; margin-inline: -12px;
  border: var(--border-width) solid transparent; border-radius: var(--radius-lg);
}
.wf-setup[data-invalid] { background: color-mix(in oklab, var(--destructive) 7%, transparent); border-color: color-mix(in oklab, var(--destructive) 35%, transparent); }
.wf-caps { text-transform: uppercase; font-size: var(--text-body-sm-size); letter-spacing: .04em; }
:lang(ar) .wf-caps { text-transform: none; letter-spacing: 0; }
.wf-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.wf-week {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "n sel rm" "date sel rm" "err err err";
  column-gap: 8px; align-items: center;
}
.wf-week > .wf-week-n { grid-area: n; }
.wf-week > .wf-week-date { grid-area: date; }
.wf-week > .wf-week-sel { grid-area: sel; }
.wf-week > .btn { grid-area: rm; }
.wf-week > .wf-week-err { grid-area: err; margin-block-start: 4px; }
.wf-week-headrow { grid-template-areas: none; grid-template-columns: 112px minmax(0, 1fr); }
.wf-week-headrow.wf-week { font-size: var(--text-body-sm-size); color: var(--muted-foreground); font-weight: 600; padding-block-end: 4px; border-block-end: var(--border-width) solid var(--border); }
.wf-week-n { font-size: var(--text-body-sm-size); font-weight: 600; white-space: nowrap; }
.wf-week-date { font-size: var(--text-body-sm-size); color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-gen { display: grid; gap: 8px; padding-block-start: 12px; border-block-start: var(--border-width) solid var(--border); }
.wf-gen-actions { display: flex; justify-content: flex-end; gap: 8px; }
.wf-output { display: flex; align-items: center; background: var(--muted); color: var(--foreground); }

/* Holiday calendar */
.wf-calbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wf-monthnav {
  display: flex; align-items: center; gap: 4px; padding: 4px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card);
}
.wf-month { margin: 0; min-width: 190px; text-align: center; font-size: 16px; font-weight: 600; }
.wf-calbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-caltype { width: 160px; }
.wf-calwrap { min-width: 0; }
.wf-cal { table-layout: fixed; border-collapse: separate; border-spacing: 4px; margin-inline: -4px; width: calc(100% + 8px); }
.wf-cal th { padding: 8px 4px; color: var(--muted-foreground); font-size: var(--text-body-sm-size); font-weight: 600; text-align: center; }
.wf-cal abbr { text-decoration: none; }
.wf-cell {
  height: 104px; padding: 8px; vertical-align: top;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card);
}
.wf-out { color: var(--muted-foreground); background: repeating-linear-gradient(135deg, var(--muted) 0 6px, var(--card) 6px 12px); }
.wf-today { outline: 2px solid var(--primary); outline-offset: -2px; }
.wf-today .wf-daynum { color: var(--link); }
.wf-cell-top { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: 4px; min-width: 0; }
.wf-daynum { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.wf-dayalt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); font-size: 11px; }
.wf-hchips { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.wf-hchip {
  display: flex; align-items: center; min-width: 0;
  border: var(--border-width) solid color-mix(in oklab, var(--info) 45%, transparent); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--info) 12%, var(--card));
}
.wf-hchip-open {
  flex: 1; min-width: 0; padding: 3px 6px; border: 0; border-radius: inherit; background: none; color: var(--foreground);
  font: inherit; font-size: 12px; font-weight: 500; line-height: 1.3; text-align: start; cursor: pointer;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere;
}
.wf-hchip-open:hover { text-decoration: underline; }
.wf-hchip-x { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted-foreground); cursor: pointer; }
.wf-hchip-x:hover { background: var(--accent); color: var(--accent-foreground); }
.wf-hchip-x .icon { width: 14px; height: 14px; }
.wf-mark { display: none; }
.wf-yearlist { display: grid; gap: 12px; margin-block-start: 8px; }
.table.wide.wf-yeartable { min-width: 760px; }
.wf-linkbtn {
  padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 500; text-align: start;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.wf-yearempty { margin: 0; }

/* Holiday details, history, audit trail */
.wf-exlist { list-style: none; margin: 0; padding: 4px; display: grid; gap: 4px; max-height: 300px; overflow-y: auto; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.wf-exrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.wf-exrow b { font-weight: 600; font-size: var(--control-font-size); }
.wf-exrow-time { display: grid; justify-items: end; text-align: end; font-size: var(--text-body-sm-size); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-history { padding-block-start: 12px; border-block-start: var(--border-width) solid var(--border); }
.wf-history > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; cursor: pointer; }
.wf-history[open] > summary { margin-block-end: 12px; }

/* Add / edit holidays */
.wf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wf-modes .toggle { width: 100%; border-radius: var(--control-radius); }
.wf-hlist { display: grid; gap: 8px; }
.wf-hrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wf-hrow { display: grid; gap: 12px; padding: 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.wf-hrow[data-invalid], .wf-hlist-bad .wf-hrow { border-color: color-mix(in oklab, var(--destructive) 45%, transparent); background: color-mix(in oklab, var(--destructive) 5%, var(--popover)); }
.wf-hrow-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: -4px; }
.wf-hrow-2 { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; align-items: start; }

/* Exempted employees picker */
.wf-exlist-pick { max-height: 340px; }
.wf-excards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 520px; overflow-y: auto; }
.wf-ex { display: grid; gap: 8px; padding: 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.wf-ex[data-invalid] { border-color: color-mix(in oklab, var(--destructive) 45%, transparent); }
.wf-ex-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wf-ex-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; align-items: end; }
.wf-ex-hrs { grid-column: 1 / -1; font-weight: 600; font-size: var(--text-body-sm-size); white-space: nowrap; }
.wf-ex-hrs:empty { display: none; }
.wf-exnone { margin: 0; }

/* Tablet: dialogs stack their two columns */
@media (max-width: 860px) {
  .wf-split { grid-template-columns: minmax(0, 1fr); }
  .wf-split-side { padding-inline-start: 0; padding-block-start: 16px; border-inline-start: 0; border-block-start: var(--border-width) solid var(--border); }
  .wf-plancards, .wf-excards { max-height: none; }
}

/* Phone */
@media (max-width: 720px) {
  .wf-tabbar { flex-direction: column-reverse; align-items: stretch; gap: 8px; border-block-end: 0; }
  .wf-tabbar .tabs { border-block-end: var(--border-width) solid var(--border); }
  .wf-tabbar .wf-new { margin-block-end: 0; }
  .wf-item { flex-wrap: wrap; padding: 12px; }
  .wf-item-body { flex-basis: calc(100% - 24px); }
  .wf-item-actions { width: 100%; justify-content: flex-start; padding-inline-start: 24px; }
  .wf-item-rot .wf-item-actions, .wf-item-actions.wf-push { width: auto; padding-inline-start: 0; }
  .toolbar .wf-wide-select { flex: 1 1 100%; }
  /* 44px touch targets for the module's small buttons */
  .wf-panel .btn-sm, .wf-panel .btn-icon, dialog .wf-day .btn, dialog .wf-week .btn, dialog .wf-hrow .btn,
  dialog .wf-ex .btn, dialog .wf-gen .btn, dialog .wf-addrow, dialog .wf-addweek, dialog .wf-back { min-height: 44px; min-width: 44px; }
  .wf-swatch { width: 44px; height: 44px; }
  .wf-check { min-height: 44px; }
  .wf-day { grid-template-columns: minmax(0, 1fr) auto; }
  .wf-day-name { grid-column: 1 / -1; min-height: 0; padding: 0; border: 0; font-size: var(--control-font-size); font-weight: 600; }
  .wf-addslot { margin-block-start: 0; }
  .wf-week { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n date rm" "sel sel sel" "err err err"; row-gap: 4px; padding-block-end: 8px; border-block-end: var(--border-width) solid var(--border); }
  .wf-week-headrow { display: none; }
  .wf-calbar-end { margin-inline-start: 0; width: 100%; }
  .wf-calbar-end .wf-caltype { flex: 1; width: auto; }
  .wf-monthnav { flex: 1; justify-content: space-between; }
  .wf-month { min-width: 0; }
  .wf-cal { border-spacing: 2px; margin-inline: -2px; width: calc(100% + 4px); }
  .wf-cal th { padding: 6px 0; font-size: 11px; }
  .wf-cell { height: 52px; padding: 4px; }
  .wf-cell-top { justify-content: center; }
  .wf-daynum { font-size: 14px; }
  .wf-dayalt, .wf-hchips { display: none; }
  .wf-has { border-color: color-mix(in oklab, var(--info) 60%, transparent); }
  .wf-mark { display: block; width: 8px; height: 8px; margin: 6px auto 0; border-radius: 999px; background: var(--info); }
  .wf-hrow-2 { grid-template-columns: minmax(0, 1fr) 96px; }
  .wf-exrow { flex-wrap: wrap; }
  .wf-exrow-time { justify-items: start; text-align: start; }
}