/* worklist module styles (tokens only, logical properties).
   List and details sit side by side when the content area is wide enough (container query);
   on narrow screens one pane shows at a time. */

.wl { container: wl / inline-size; }
.wl-split { display: grid; gap: var(--gap); align-items: start; }
.wl-split[data-view="detail"] > .wl-list,
.wl-split[data-view="list"] > .wl-detail { display: none; }

/* ---------- list pane ---------- */
.wl-list { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.wl-list > .tabs { padding-inline: 8px; flex: none; gap: 0; }
.wl-list > .tabs .tab { flex: 1 1 auto; justify-content: center; padding-inline: 8px; }
.wl-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.wl-list-tools { display: grid; gap: 12px; padding: 14px var(--card-padding) 12px; border-block-end: var(--border-width) solid var(--border); flex: none; }
.wl-list-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.wl-subhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.wl-h2 { margin: 0; margin-inline-end: auto; font-size: var(--text-body-md-size); font-weight: 600; }
.wl-tools { display: flex; gap: 8px; }
.wl-tools > .input-group { flex: 1 1 auto; }
.wl-filter-btn { flex: none; }
.wl-filter-btn .badge-count { margin-inline-start: 2px; }

.wl-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: var(--radius-lg); background: var(--muted); }
.wl-filters[hidden] { display: none; }
.wl-filters .span-2 { grid-column: 1 / -1; }
.wl-range { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.wl-range > legend { padding: 0; margin-block-end: 8px; }
.wl-range .row-2 { gap: 8px; }

.wl-chips { gap: 6px; }
.wl-chips .toggle { position: relative; height: 32px; padding-inline: 12px; font-size: var(--text-body-sm-size); }

.wl-bulk {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 10px 12px; border-radius: var(--radius-lg);
  background: var(--accent); color: var(--accent-foreground);
}
.wl-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body-sm-size); font-weight: 500; cursor: pointer; }
.wl-bulk-count { font-size: var(--text-body-sm-size); font-weight: 600; }
.wl-bulk-actions { display: flex; gap: 8px; margin-inline-start: auto; }

.wl-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wl-meta-row p { margin: 0; }
.wl-sort { display: flex; align-items: center; gap: 8px; }
.wl-sort .select-wrap { width: 170px; }
.wl-sort .select { height: 32px; font-size: var(--text-body-sm-size); }

.wl-cards { list-style: none; margin: 0; padding: 12px var(--card-padding); display: grid; gap: 10px; align-content: start; }
.wl-list-empty { padding: 12px var(--card-padding); }
.wl-list-body > .pager { flex: none; }

/* Request card: the whole card opens the request (stretched link); the checkbox and buttons sit above it. */
.wl-card {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: var(--card);
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.wl-card:hover { background: color-mix(in oklab, var(--accent) 45%, var(--card)); }
.wl-card.is-current { border-color: var(--primary); background: color-mix(in oklab, var(--accent) 60%, var(--card)); box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .wl-card.is-current { box-shadow: inset -3px 0 0 var(--primary); }
.wl-card.is-checked { border-color: var(--primary); }
.wl-card:has(.wl-card-link:focus-visible) { outline: var(--focus-ring-width) solid var(--ring); outline-offset: var(--focus-ring-offset); }
.wl-card-link { color: var(--foreground); font-weight: 600; text-decoration: none; min-width: 0; }
.wl-card-link:focus-visible { outline: none; }
.wl-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wl-card-link:hover { text-decoration: underline; }
.wl-card-pick { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 36px; margin-inline: -4px -6px; flex: none; cursor: pointer; }
.wl-card-pick::before { content: ""; position: absolute; inset: -4px -6px; }
.wl-raise, .wl-card .btn { position: relative; z-index: 1; }
.wl-icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: var(--radius-lg); background: var(--accent); color: var(--accent-foreground);
}
.wl-icon .icon { width: 18px; height: 18px; }
.wl-icon-lg { width: 44px; height: 44px; }
.wl-icon-lg .icon { width: 22px; height: 22px; }
.wl-card-body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.wl-card-top { display: flex; align-items: baseline; gap: 8px; }
.wl-card-time { margin-inline-start: auto; color: var(--muted-foreground); font-size: var(--text-body-xs-size); white-space: nowrap; }
.wl-card-meta { margin: 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.wl-card-msg { margin: 4px 0 0; font-size: var(--control-font-size); }
.wl-card-sum { margin: 2px 0 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.wl-card-sum > span { color: var(--foreground); font-weight: 600; margin-inline-end: 4px; }
.wl-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
.wl-card-foot { display: flex; justify-content: flex-end; margin-block-start: 6px; margin-inline-end: -8px; }

/* ---------- details pane ---------- */
.wl-detail { container: wld / inline-size; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.wl-back { align-self: flex-start; }
.wl-detail-empty { min-height: 360px; display: grid; place-items: center; }
.wl-dhead {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  gap: 12px 14px; padding: var(--card-padding);
}
.wl-dhead-text { min-width: 0; }
.wl-dtitle { margin: 0; font-family: var(--typeface-heading); font-size: 20px; line-height: 1.3; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
:lang(ar) .wl-dtitle { font-family: var(--typeface); letter-spacing: 0; }
.wl-dsub { margin: 4px 0 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.wl-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.wl-actions:empty { display: none; }
.wl-state { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block-start: 12px; border-block-start: var(--border-width) solid var(--border); }
.wl-state-text { margin: 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.wl-fyi-note {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--info) 14%, var(--card)); color: color-mix(in oklab, var(--info) 80%, var(--foreground));
  font-size: var(--text-body-sm-size); font-weight: 600;
}
.wl-fyi-note .icon { width: 16px; height: 16px; }
.wl-quote {
  flex: 1 1 100%; margin: 0; padding: 10px 14px; border-radius: var(--radius-lg);
  background: var(--muted); border-inline-start: 4px solid var(--info);
}
.wl-quote p { margin: 0; }
.wl-quote .wl-quote-label { color: var(--muted-foreground); font-size: var(--text-body-sm-size); font-weight: 600; margin-block-end: 2px; }

.wl-menu-wrap { position: relative; }
.wl-menu {
  position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 6px); z-index: var(--z-dropdown);
  display: grid; gap: 2px; min-width: 232px; padding: 6px;
  background: var(--popover); color: var(--popover-foreground);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-3);
}
.wl-menu[hidden] { display: none; }
.wl-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding-inline: 12px;
  border: 0; border-radius: var(--radius-md); background: none; color: inherit;
  font: inherit; font-size: var(--control-font-size); text-align: start; cursor: pointer;
}
.wl-menu button .icon { color: var(--muted-foreground); width: 18px; height: 18px; }
.wl-menu button:hover, .wl-menu button:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.wl-menu button:focus-visible { outline-offset: -2px; }

.wl-sec-title { margin: 0; }
.wl-sec-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px;
  padding-inline: var(--card-padding); padding-block: 14px;
  border: 0; border-radius: inherit; background: none; color: inherit; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: var(--heading-weight); text-align: start;
}
.wl-sec-btn:hover { background: color-mix(in oklab, var(--accent) 40%, transparent); }
.wl-sec-btn .wl-chev { margin-inline-start: auto; color: var(--muted-foreground); transition: transform var(--duration-fast) var(--ease-standard); }
.wl-sec-btn[aria-expanded="true"] .wl-chev { transform: rotate(180deg); }
.wl-sec-body { display: grid; gap: 18px; padding: 16px var(--card-padding) var(--card-padding); border-block-start: var(--border-width) solid var(--border); }
.wl-sec-body[hidden] { display: none; }
.wl-sec .timeline { padding-block-start: 2px; }

.wl-label { margin: 0 0 8px; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.wl-files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wl-file {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding-block: 6px; padding-inline: 12px 6px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--muted);
}
.wl-file > .icon { color: var(--link); }
.wl-file-text { display: grid; min-width: 0; flex: 1 1 auto; }
.wl-file-name { font-weight: 500; font-size: var(--control-font-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.wl-file-meta { color: var(--muted-foreground); font-size: var(--text-body-xs-size); }
.wl-nofiles { margin: 0; }

/* ---------- dialogs ---------- */
.wl-ctx { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--muted); }
.wl-ctx-text { min-width: 0; }
.wl-ctx-title { margin: 0; font-weight: 600; }
.wl-ctx-sub { margin: 2px 0 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.wl-ctx-list { display: grid; gap: 8px; }
.wl-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 196px; overflow-y: auto; }
.wl-mini li { padding: 8px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-md); background: var(--card); font-size: var(--text-body-sm-size); }
.wl-flush { margin: 0; }
.wl-people-wrap { display: grid; gap: 8px; padding: 10px; margin-inline: -10px; border-radius: var(--radius-lg); border: var(--border-width) solid transparent; }
.wl-people-wrap[data-invalid] { background: color-mix(in oklab, var(--destructive) 7%, transparent); border-color: color-mix(in oklab, var(--destructive) 35%, transparent); }
.wl-people { max-height: 300px; }
.wl-person { display: grid; gap: 1px; min-width: 0; }
.wl-person .picker-meta { overflow-wrap: anywhere; }
.wl-chosen { display: grid; gap: 8px; }
.wl-chosen-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.wl-chosen-row .wl-person { flex: 1 1 auto; }
.wl-top-error { padding: 10px 12px; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--destructive) 8%, var(--popover)); }
.wl-review { display: grid; gap: 14px; }
.wl-review + .wl-review { padding-block-start: 16px; border-block-start: var(--border-width) solid var(--border); }
.wl-review-title { margin: 0; font-size: 16px; font-weight: 600; }
.wl-changed { vertical-align: middle; }
.wl-dialog .dropzone { padding: 18px 16px; }

/* ---------- two panes when there is room ---------- */
@container wl (min-width: 860px) {
  .wl-split { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
  .wl-split[data-view] > .wl-list, .wl-split[data-view] > .wl-detail { display: flex; }
  .wl-list { position: sticky; inset-block-start: 88px; max-height: calc(100dvh - 104px); }
  .wl-list-body { overflow: hidden; }
  .wl-cards { overflow-y: auto; flex: 1 1 auto; min-height: 120px; }
  .wl-back { display: none; }
}
/* Request header: actions beside the title when the details pane is wide, on their own row otherwise. */
@container wld (min-width: 680px) {
  .wl-dhead { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wl-actions { grid-column: auto; justify-content: flex-end; max-width: 420px; }
  .wl-menu { inset-inline-start: auto; inset-inline-end: 0; }
}

/* ---------- phones: 44px touch targets ---------- */
@media (max-width: 720px) {
  .wl .btn-sm, .wl-dialog .btn-sm { height: 44px; }
  .wl .btn-icon.btn-sm, .wl-dialog .btn-icon.btn-sm { width: 44px; }
  .wl .btn, .wl-dialog .btn, .wl-sort .select, .wl .input, .wl .select { min-height: 44px; }
  .wl-chips .toggle::before { content: ""; position: absolute; inset: -6px 0; }
  .wl-card-pick { width: 44px; height: 44px; margin-inline: -10px -8px; margin-block: -4px; }
  .wl-card-pick::before { inset: 0; }
  .wl-menu button { min-height: 44px; }
  .wl-actions .btn { flex: 1 1 auto; }
  .wl-actions .wl-menu-wrap { flex: 1 1 auto; display: flex; }
  .wl-actions .wl-menu-wrap > .btn { flex: 1 1 auto; }
  .wl-bulk-actions { margin-inline-start: 0; width: 100%; }
  .wl-bulk-actions .btn { flex: 1 1 auto; }
  .wl-dialog .dialog-foot { flex-wrap: wrap; }
  .wl-dialog .dialog-foot .btn { flex: 1 1 auto; }
  .wl-dialog .dialog-foot .spacer { flex-basis: 100%; }
  .wl-sec-btn { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-card, .wl-sec-btn .wl-chev { transition: none; }
}