/*
 * Unified Work Center — .wc-* scoped skin.
 * Rules of the house: page-scoped prefixed classes only (raw Tailwind is
 * not compiled for custom blades), CSS logical properties everywhere so
 * one sheet serves AR (RTL) and EN (LTR), no font-family (typography.css
 * is the single source), dark mode = token remap under .dark.
 * Breakpoints mirror the approved navigation redesign: 1023.98 / 767.98.
 */

.wc {
    /* Every colour here is a shared role read from the token layer
       (tokens.css, HO-3104): each resolves to the very value it replaced,
       in both themes — this sheet was already written on the same palette,
       so there is no dark block left to keep. */
    --wc-bg: transparent;
    --wc-card: var(--ho-surface);
    --wc-border: var(--ho-line);
    --wc-text: var(--ho-ink);
    --wc-muted: var(--ho-ink-muted);
    --wc-soft: var(--ho-surface-inset);
    --wc-accent: var(--ho-info-line);
    --wc-accent-soft: var(--ho-info-soft);
    --wc-danger: var(--ho-danger-line);
    --wc-danger-soft: var(--ho-danger-soft);
    --wc-warn: var(--ho-warning-line);
    --wc-warn-soft: var(--ho-warning-soft);
    --wc-ok: var(--ho-success-line);
    --wc-ok-soft: var(--ho-success-soft);
    /* Small text ON a soft tint takes the ink token, not the line one: a
       `-line` colour is tuned for bars and large figures and sits at
       3.2–4.4:1 on its own tint at badge size. */
    --wc-danger-ink: var(--ho-danger-ink);
    --wc-warn-ink: var(--ho-warning-ink);
    --wc-ok-ink: var(--ho-success-ink);
    --wc-radius: 0.625rem;

    color: var(--wc-text);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-inline-size: 80rem;
    margin-inline: auto;
    inline-size: 100%;
}


/* ── Header ─────────────────────────────────────────────────────── */
.wc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.wc-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.wc-date {
    color: var(--wc-muted);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
}

.wc-head-side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wc-scopes {
    display: inline-flex;
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    padding: 0.1875rem;
    gap: 0.125rem;
}

.wc-scope-chip {
    padding: 0.3125rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-muted);
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.wc-scope-chip:hover {
    color: var(--wc-text);
}

.wc-scope-chip.is-active {
    background: var(--wc-card);
    color: var(--wc-accent);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.wc-freshness {
    color: var(--wc-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.wc-member-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--wc-accent-soft);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ACT-NOTIF-2: a bell deep link the write boundary refused. */
.wc-notice {
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--wc-warn);
    background: var(--wc-warn-soft);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
}

.wc-member-banner a {
    color: var(--wc-accent);
    font-weight: 600;
    font-size: 0.8125rem;
}

/* ── Brief strip ────────────────────────────────────────────────── */
.wc-brief {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
}

.wc-brief-stat {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.wc-brief-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.wc-brief-stat.is-click { cursor: pointer; text-decoration: none; color: inherit; transition: background 120ms ease, border-color 120ms ease; }
.wc-brief-stat.is-click:hover { background: var(--wc-soft); }
.wc-brief-stat.is-click:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; }
.wc-brief-stat.is-active { border-color: var(--wc-accent); box-shadow: inset 0 0 0 1px var(--wc-accent); }
.wc-brief-stat.is-zero { cursor: default; }
.wc-member-num { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.wc-member-num:hover { text-decoration-style: solid; }
.wc-brief-plus { font-size: 0.75em; margin-inline-start: 1px; opacity: 0.8; }
.wc-lane-note { font-size: 0.8125rem; color: var(--wc-muted); margin: -0.25rem 0 0.5rem; }
.wc-brief-stat.overdue:not(.is-zero) .wc-brief-num { color: var(--wc-danger); }
.wc-brief-stat.attention:not(.is-zero) .wc-brief-num { color: var(--wc-warn); }
.wc-brief-stat.approvals:not(.is-zero) .wc-brief-num { color: var(--wc-accent); }
/* The approvals tile's second clock — «2 past their SLA» — under its count,
   so the lane's own overdue is read beside «Overdue — my work», not against it. */
.wc-brief-sub { font-size: var(--ho-text-xs); font-weight: 700; color: var(--wc-muted); white-space: nowrap; }
.wc-brief-sub.is-danger { color: var(--wc-danger-ink); }

.wc-brief-label {
    color: var(--wc-muted);
    font-size: var(--ho-text-xs);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sections ───────────────────────────────────────────────────── */
.wc-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.wc-section-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wc-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Next best action ───────────────────────────────────────────── */
.wc-next-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--wc-accent-soft);
    border: 1px solid var(--wc-accent);
    border-radius: var(--wc-radius);
    padding: 0.875rem 1rem;
    transition: filter 0.15s;
}

.wc-next-card:hover { filter: brightness(0.98); }

.wc-next-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
}

/* ── Attention chips ────────────────────────────────────────────── */
.wc-attention {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.625rem;
}

.wc-attn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-inline-start: 3px solid var(--wc-warn);
    border-radius: var(--wc-radius);
    padding: 0.625rem 0.875rem;
    min-inline-size: 0;
    transition: background 0.15s;
}

.wc-attn:hover { background: var(--wc-soft); }
.wc-attn.sev-critical { border-inline-start-color: var(--wc-danger); }
.wc-attn.sev-high { border-inline-start-color: var(--wc-danger); }
.wc-attn.sev-warning { border-inline-start-color: var(--wc-warn); }
.wc-attn.sev-info { border-inline-start-color: var(--wc-accent); }

.wc-attn-count {
    font-size: 1.125rem;
    font-weight: 700;
    min-inline-size: 1.75rem;
    text-align: center;
}

.sev-critical .wc-attn-count, .sev-high .wc-attn-count { color: var(--wc-danger); }
.sev-warning .wc-attn-count { color: var(--wc-warn); }
.sev-info .wc-attn-count { color: var(--wc-accent); }

.wc-attn-body {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-inline-size: 0;
    flex: 1;
}

.wc-attn-title { font-size: 0.8125rem; font-weight: 700; }
.wc-attn-reason {
    font-size: 0.75rem;
    color: var(--wc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-attn-src {
    font-size: var(--ho-text-xs);
    color: var(--wc-muted);
    background: var(--wc-soft);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

/* ── Main grid ──────────────────────────────────────────────────── */
.wc-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.wc-col-main, .wc-col-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
}

/* ── Work rows ──────────────────────────────────────────────────── */
.wc-bucket-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wc-muted);
    margin-block-start: 0.25rem;
}

.wc-bucket-label.bucket-due_overdue { color: var(--wc-danger); }

.wc-rows {
    display: flex;
    flex-direction: column;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow: hidden;
}

.wc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-block-end: 1px solid var(--wc-border);
    min-inline-size: 0;
    transition: background 0.15s;
}

.wc-row:last-child { border-block-end: none; }
.wc-row:hover { background: var(--wc-soft); }
.wc-row.is-overdue { background: color-mix(in srgb, var(--wc-danger-soft) 45%, var(--wc-card)); }
.wc-row.is-overdue:hover { background: var(--wc-danger-soft); }

.wc-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
    background: var(--wc-muted);
    flex-shrink: 0;
}

.wc-dot.prio-critical { background: var(--wc-danger); box-shadow: 0 0 0 3px var(--wc-danger-soft); }
.wc-dot.prio-urgent { background: var(--wc-danger); }
.wc-dot.prio-high { background: var(--wc-warn); }
.wc-dot.prio-normal { background: var(--wc-accent); }
.wc-dot.prio-low { background: var(--wc-muted); }
.wc-dot.prio-none { background: var(--wc-border); }
.wc-dot.prio-approval { background: var(--wc-accent); }

.wc-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    flex: 1;
    min-inline-size: 0;
}

.wc-row-title {
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-row-context {
    font-size: 0.75rem;
    color: var(--wc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-row-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wc-row-badges { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }

.wc-badge {
    font-size: var(--ho-text-xs);
    font-weight: 700;
    background: var(--wc-soft);
    color: var(--wc-muted);
    border-radius: 999px;
    padding: 0.125rem 0.4375rem;
    white-space: nowrap;
}

.wc-badge.is-danger { background: var(--wc-danger-soft); color: var(--wc-danger-ink); }
.wc-badge.is-warn { background: var(--wc-warn-soft); color: var(--wc-warn-ink); }

.wc-due {
    font-size: 0.75rem;
    color: var(--wc-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wc-due.is-danger { color: var(--wc-danger); font-weight: 700; }
/* How long an approval has waited. A week is where it turns red — not an SLA
   (none may exist for the lane), just the point past which nobody meant it. */
.wc-waiting { font-variant-numeric: tabular-nums; }

.wc-cta {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wc-accent);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.1875rem 0.625rem;
    white-space: nowrap;
}

.is-danger { color: var(--wc-danger); }
.wc-muted { color: var(--wc-muted); }

/* ── Members table ──────────────────────────────────────────────── */
.wc-table-wrap {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow-x: auto;
}

.wc-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.wc-table th {
    text-align: start;
    color: var(--wc-muted);
    font-size: var(--ho-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.875rem;
    border-block-end: 1px solid var(--wc-border);
    white-space: nowrap;
}

.wc-table td {
    padding: 0.5625rem 0.875rem;
    border-block-end: 1px solid var(--wc-border);
    white-space: nowrap;
}

.wc-table tr:last-child td { border-block-end: none; }
.wc-table td.is-danger { font-weight: 700; }

.wc-member-link { font-weight: 600; color: var(--wc-accent); }

/* ── Metrics / rail ─────────────────────────────────────────────── */
.wc-metrics { display: flex; flex-direction: column; gap: 0.625rem; }

.wc-metric {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.wc-metric.is-risk { border-inline-start: 3px solid var(--wc-warn); }
.wc-metric.is-na { opacity: 0.85; }

.wc-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wc-metric-label { font-size: 0.8125rem; font-weight: 700; }
.wc-metric-src {
    font-size: var(--ho-text-xs);
    color: var(--wc-muted);
    background: var(--wc-soft);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

.wc-metric-value { display: flex; align-items: baseline; gap: 0.25rem; }
.wc-metric-actual { font-size: 1.25rem; font-weight: 700; }
.wc-metric-target { color: var(--wc-muted); font-size: 0.8125rem; }
.wc-metric-na { color: var(--wc-muted); font-weight: 700; font-size: 1rem; }
.wc-metric-reason { color: var(--wc-muted); font-size: 0.75rem; }

.wc-bar {
    block-size: 0.375rem;
    background: var(--wc-soft);
    border-radius: 999px;
    overflow: hidden;
}

.wc-bar-fill {
    block-size: 100%;
    background: var(--wc-accent);
    border-radius: 999px;
}

.wc-metric-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--wc-muted);
    font-size: var(--ho-text-xs);
}

.wc-metric-foot a { color: var(--wc-accent); font-weight: 700; }

/* ── Insights ───────────────────────────────────────────────────── */
.wc-insights { display: flex; flex-direction: column; gap: 0.5rem; }

.wc-insight {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    transition: background 0.15s;
}

.wc-insight:hover { background: var(--wc-soft); }
.wc-insight-title { font-size: 0.8125rem; font-weight: 700; }
.wc-insight-text {
    font-size: 0.75rem;
    color: var(--wc-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wc-insight-src {
    font-size: var(--ho-text-xs);
    color: var(--wc-muted);
}

/* ── Responsive: tablet/drawer boundary ─────────────────────────── */
@media (max-width: 1023.98px) {
    .wc-grid { grid-template-columns: minmax(0, 1fr); }
    .wc-brief { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Responsive: mobile 390 ─────────────────────────────────────── */
@media (max-width: 767.98px) {
    .wc { gap: 0.75rem; }
    .wc-title { font-size: 1.125rem; }
    .wc-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .wc-attention { grid-template-columns: minmax(0, 1fr); }
    .wc-head { align-items: stretch; flex-direction: column; }
    .wc-scopes { inline-size: 100%; justify-content: space-between; overflow-x: auto; }
    .wc-scope-chip { flex: 1; text-align: center; padding-inline: 0.5rem; }

    .wc-row { flex-wrap: wrap; row-gap: 0.25rem; }
    .wc-row-side {
        inline-size: 100%;
        justify-content: space-between;
        padding-inline-start: 1.25rem;
    }
}

/* ── WC-START-1: start state + add-task ─────────────────────────── */
.wc-start {
    background: var(--wc-card);
    border: 1px dashed var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 1.75rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}
.wc-start-title { font-weight: 700; font-size: 1rem; }
.wc-start-desc { color: var(--wc-muted); font-size: 0.8125rem; max-inline-size: 36rem; }
.wc-start-hint { color: var(--wc-muted); font-size: 0.75rem; max-inline-size: 36rem; }
.wc-start-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
}
.wc-start-link { font-size: 0.8125rem; font-weight: 600; color: var(--wc-accent); }
.wc-add-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-accent);
    background: var(--wc-card);
    border: 1px solid var(--wc-accent);
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.wc-add-btn:hover { background: var(--wc-accent-soft); }
.wc-add-btn.is-primary { color: #fff; background: var(--wc-accent); }
.wc-add-btn.is-primary:hover { filter: brightness(0.95); background: var(--wc-accent); }

/* ── WC-QA-1: search & filters bar ──────────────────────────────── */
.wc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: 0.625rem;
}
.wc-filter-q {
    flex: 1 1 12rem;
    min-inline-size: 8rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--wc-text);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
}
.wc-filter-select {
    padding: 0.375rem 1.75rem 0.375rem 0.625rem;
    font-size: 0.75rem;
    color: var(--wc-text);
    background-color: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
}
.wc-filter-clear {
    font-size: 0.75rem;
    color: var(--wc-accent);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}
.wc-filter-count { font-size: var(--ho-text-xs); color: var(--wc-muted); }
.wc-no-results {
    padding: 0.875rem;
    font-size: 0.8125rem;
    color: var(--wc-muted);
    text-align: center;
}

/* Row link (row became a div so link + button can coexist). */
a.wc-row-main { text-decoration: none; color: inherit; }

/* ── WC-QA-1: quick-action trigger ──────────────────────────────── */
.wc-qa-open {
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--wc-accent);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}
.wc-qa-open:hover { background: var(--wc-border); }

/* ── WC-QA-1: quick-execution drawer ────────────────────────────── */
.wc-qa-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 0.35);
}
.wc-qa-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 41;
    inline-size: min(26rem, 100vw);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    overflow-y: auto;
    background: var(--wc-card);
    border-inline-start: 1px solid var(--wc-border);
    box-shadow: 0 0 2rem rgb(0 0 0 / 0.18);
}
.wc-qa-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block-end: 0.625rem;
    border-block-end: 1px solid var(--wc-border);
}
.wc-qa-head-text { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
.wc-qa-title { font-size: 0.9375rem; font-weight: 700; color: var(--wc-text); }
.wc-qa-context { font-size: 0.75rem; color: var(--wc-muted); }
.wc-qa-close {
    flex-shrink: 0;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--wc-muted);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    cursor: pointer;
}
.wc-qa-error {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    color: var(--wc-danger);
    background: var(--wc-danger-soft);
    border-radius: 0.5rem;
}
.wc-qa-note { font-size: 0.8125rem; color: var(--wc-muted); }
.wc-qa-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.wc-qa-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-text);
    text-align: center;
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}
.wc-qa-btn:hover { background: var(--wc-border); }
.wc-qa-btn.is-primary { color: #fff; background: var(--wc-accent); border-color: var(--wc-accent); }
.wc-qa-btn.is-danger { color: var(--wc-danger-ink); background: var(--wc-danger-soft); border-color: transparent; }
.wc-qa-form { display: flex; flex-direction: column; gap: 0.5rem; }
.wc-qa-form-title { font-size: 0.875rem; font-weight: 700; color: var(--wc-text); }
.wc-qa-label { font-size: 0.75rem; color: var(--wc-muted); }
.wc-qa-input {
    inline-size: 100%;
    padding: 0.4375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--wc-text);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
}
.wc-qa-hint { font-size: var(--ho-text-xs); color: var(--wc-muted); }
.wc-qa-form-actions { display: flex; gap: 0.5rem; margin-block-start: 0.25rem; }
.wc-qa-form-actions .wc-qa-btn { flex: 1; }

@media (max-width: 767.98px) {
    .wc-qa-drawer { inline-size: 100vw; }
    .wc-filters { padding: 0.5rem; }
}


/* ── خدماتي اليومية / My Daily Services ─────────────────────────────
   RESTORED 2026-09-09. The markup for these two cards reached `main`
   without its stylesheet: the branch commits carried blade + CSS
   together, but the commit that landed the feature on main
   (33af5eca4, #1196) contains the blade, the provider, the language
   files and the tests — and no CSS hunk at all. With no rule matching
   `.wc-daily*`, the `dl`/`dd` markup fell back to browser defaults and
   the punch and requests cards rendered as bare stacked text with the
   em-dashes stretched across the page (production screenshot,
   2026-09-09). Nothing about the data changed — shift, flexible
   schedule, states and links are the provider's, untouched.

   Layout: ONE column on phones, two balanced equal-height columns from
   640px. Component-scoped: every selector here starts at `.wc-daily`
   or one of its own `.wc-daily-*` children, so no other Work Center
   surface can be reached. Logical properties only — one sheet serves
   AR (RTL) and EN (LTR) — and nothing sets a minimum inline size, so a
   card shrinks with the viewport instead of pushing it. */
.wc-daily-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .wc-daily-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wc-daily-card {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-inline-start: 3px solid var(--wc-accent);
    border-radius: var(--wc-radius);
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.wc-daily-card.state-in { border-inline-start-color: var(--wc-warn); }
.wc-daily-card.state-out { border-inline-start-color: var(--wc-ok); }

.wc-daily-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wc-daily-name { font-size: 0.9375rem; font-weight: 700; }

.wc-daily-state {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    background: var(--wc-soft);
    color: var(--wc-muted);
}

.wc-daily-card.state-in .wc-daily-state { background: var(--wc-warn-soft); color: var(--wc-warn-ink); }
.wc-daily-card.state-out .wc-daily-state { background: var(--wc-ok-soft); color: var(--wc-ok-ink); }

/* Each fact is a compact label/value pair. `dt` and `dd` are block-level
   by default, which is exactly what stretched a lone “—” across the
   whole card; here the pair sits inline and only the row wraps. */
.wc-daily-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin: 0;
}

.wc-daily-fact { display: flex; gap: 0.375rem; align-items: baseline; min-inline-size: 0; }
.wc-daily-fact dt { color: var(--wc-muted); font-size: 0.75rem; }
.wc-daily-fact dd { margin: 0; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-daily-shift { overflow-wrap: anywhere; }

.wc-daily-count { font-size: 0.8125rem; color: var(--wc-muted); display: inline-flex; align-items: baseline; gap: 0.25rem; }
.wc-daily-num { font-size: 1.125rem; font-weight: 700; color: var(--wc-accent); }
.wc-daily-count.is-zero .wc-daily-num { color: var(--wc-muted); }

/* Actions sit at the bottom of the card, so the two cards' buttons keep
   one baseline however tall their content is. */
.wc-daily-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: auto;
}

.wc-daily-btn {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wc-accent);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    text-align: center;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.wc-daily-btn.is-primary { background: var(--wc-accent); color: #fff; border-color: var(--wc-accent); }
.wc-daily-btn:hover { filter: brightness(0.95); }

/* ── My Daily Services · phone layout (< 640px) ─────────────────────
   TWO equal columns (owner ruling 2026-09-19, reversing the one-column
   ruling of 2026-09-09): «بصمتي» and «طلباتي» sit side by side on 360px
   and 390px, because the attendance card above them now carries the
   day's detail and the pair only needs to be compact. Everything here is
   scoped under `.wc-daily` and lives ONLY inside this max-width block —
   nothing at 640px and above changes by a single declaration. Cards
   stretch to equal height with the actions at the bottom; facts stack so
   a 160px column never squeezes a label against its value. Buttons keep a
   44px touch target and may wrap to two lines; the shift name clamps to
   two lines visually while its value stays whole. */
@media (max-width: 639.98px) {
    .wc-daily .wc-daily-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        align-items: stretch;
    }

    .wc-daily .wc-daily-card {
        padding: 0.625rem;
        gap: 0.375rem;
        min-inline-size: 0;
    }

    .wc-daily .wc-daily-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

    .wc-daily .wc-daily-name { font-size: 0.875rem; }

    .wc-daily .wc-daily-state {
        font-size: var(--ho-text-xs);
        padding: 0.0625rem 0.4375rem;
        max-inline-size: 100%;
        overflow-wrap: anywhere;
    }

    .wc-daily .wc-daily-facts { flex-direction: column; gap: 0.125rem; }
    .wc-daily .wc-daily-fact { flex-wrap: wrap; gap: 0.25rem; }
    .wc-daily .wc-daily-fact dt { font-size: var(--ho-text-xs); }
    .wc-daily .wc-daily-fact dd { font-size: 0.75rem; overflow-wrap: anywhere; min-inline-size: 0; }

    .wc-daily .wc-daily-shift {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .wc-daily .wc-daily-count { flex-wrap: wrap; font-size: 0.75rem; }
    .wc-daily .wc-daily-num { font-size: 1rem; }

    .wc-daily .wc-daily-actions {
        flex-direction: column;
        gap: 0.375rem;
        margin-block-start: auto;
    }

    .wc-daily .wc-daily-btn {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-block-size: 2.75rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ── الحضور والانصراف / Attendance card ─────────────────────────────
   Mobile-first and self-contained: every selector is under .wc-att, so no
   other Work Center card or grid is reachable from here. Logical
   properties only (RTL = LTR). Nothing sets a minimum inline size; long
   shift and site names wrap. The action is a full-width 48px touch target
   on phones and an ordinary button beside the facts from 640px. */
.wc-att .wc-att-card {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-inline-start: 3px solid var(--wc-accent);
    border-radius: var(--wc-radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.wc-att .wc-att-card.state-in { border-inline-start-color: var(--wc-warn); }
.wc-att .wc-att-card.state-out { border-inline-start-color: var(--wc-ok); }
.wc-att .wc-att-card.state-off { border-inline-start-color: var(--wc-border); }

.wc-att .wc-att-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wc-att .wc-att-shift { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; flex: 1 1 10rem; }
.wc-att .wc-att-shift-name { font-size: 0.9375rem; font-weight: 700; overflow-wrap: anywhere; }
.wc-att .wc-att-shift-time { font-size: 0.8125rem; color: var(--wc-muted); font-variant-numeric: tabular-nums; text-align: start; }

.wc-att .wc-att-state {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    background: var(--wc-soft);
    color: var(--wc-muted);
}

.wc-att .state-in .wc-att-state { background: var(--wc-warn-soft); color: var(--wc-warn); }
.wc-att .state-out .wc-att-state { background: var(--wc-ok-soft); color: var(--wc-ok); }

.wc-att .wc-att-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; }
.wc-att .wc-att-fact { display: flex; flex-wrap: wrap; gap: 0.25rem 0.375rem; align-items: baseline; min-inline-size: 0; }
.wc-att .wc-att-fact dt { color: var(--wc-muted); font-size: 0.75rem; }
.wc-att .wc-att-fact dd { margin: 0; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-inline-size: 0; }

.wc-att .wc-att-msg {
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wc-att .wc-att-msg.is-ok { background: var(--wc-ok-soft); color: var(--wc-ok); }
.wc-att .wc-att-msg.is-bad { background: var(--wc-danger-soft); color: var(--wc-danger); }
.wc-att .wc-att-msg.is-warn { background: var(--wc-warn-soft); color: var(--wc-warn); }

.wc-att .wc-att-btn {
    border: 0;
    border-radius: 0.625rem;
    min-block-size: 3rem;
    padding: 0.625rem 1rem;
    inline-size: 100%;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: normal;
}

.wc-att .wc-att-btn.is-in { background: var(--wc-ok); }
.wc-att .wc-att-btn.is-out { background: var(--wc-accent); }
.wc-att .wc-att-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wc-att .wc-att-btn:not(:disabled):hover { filter: brightness(0.95); }

.wc-att .wc-att-link { font-size: 0.75rem; font-weight: 700; color: var(--wc-accent); align-self: flex-start; }
.wc-att [x-cloak] { display: none; }

@media (min-width: 640px) {
    .wc-att .wc-att-card { padding: 0.75rem 0.875rem; max-inline-size: 40rem; }
    .wc-att .wc-att-btn { inline-size: auto; align-self: flex-start; min-inline-size: 12rem; min-block-size: 2.75rem; }
}
.wc-att .wc-att-note { font-size: 0.75rem; color: var(--wc-muted); line-height: 1.5; overflow-wrap: anywhere; }