/* Concierge Desk — Worklist (the default landing) + the shared SLA pill.
   Built on desk_tokens.css. No raw hex, no side-stripe borders, sentence case,
   stroke icons only, two-shadow discipline. */

/* The focus layout: topbar over a single scrolling pane (no funnel queue). */
.desk-focus { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.focus-pane { overflow-y: auto; background: var(--ha-pane-bg); padding: 24px; }

.worklist { max-width: 880px; margin: 0 auto; }

.worklist-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}

/* Top indicators ---------------------------------------------------------- */
.worklist-indicators { display: flex; gap: 10px; align-items: center; }
.indicator {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: var(--ha-radius-pill);
  background: var(--ha-surface); border: 1px solid var(--ha-border);
  text-decoration: none; color: var(--ha-ink); font-size: 13px;
}
.indicator:not(.is-static):hover { background: var(--ha-row-hover); }
.indicator:focus-visible { outline: none; box-shadow: var(--ha-focus-ring); }
.indicator-n { font-weight: var(--ha-weight-bold); }
.indicator-label { color: var(--ha-ink-muted); font-size: 12px; }
.indicator-zero { color: var(--ha-ink-muted); font-size: 13px; }

/* Buckets ----------------------------------------------------------------- */
.bucket { margin-bottom: 28px; }
.bucket-head { margin-bottom: 10px; }
.bucket-title {
  font-size: 15px; font-weight: var(--ha-weight-bold); color: var(--ha-ink);
  margin: 0;
}
.bucket-count { color: var(--ha-ink-muted); font-weight: var(--ha-weight-book); }
.bucket-sub { margin: 2px 0 0; font-size: 13px; color: var(--ha-ink-muted); }

/* Bucket explainer: a small info icon that reveals a tooltip on hover/focus,
   so a concierge can learn what each bucket means without leaving the page. */
.bucket-info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 4px; vertical-align: middle;
  color: var(--ha-ink-muted); cursor: help;
}
.bucket-info svg { width: 15px; height: 15px; }
.bucket-info:hover, .bucket-info:focus-visible { color: var(--ha-blue-text); }
.bucket-info:focus-visible { outline: none; box-shadow: var(--ha-focus-ring); border-radius: 50%; }
.bucket-tip {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: max-content; max-width: 260px;
  padding: 9px 11px; border-radius: var(--ha-radius-sm, 8px);
  background: var(--ha-ink); color: var(--ha-surface);
  font-size: 12px; font-weight: var(--ha-weight-book); line-height: 1.45;
  letter-spacing: normal; text-align: left; white-space: normal;
  box-shadow: var(--ha-shadow-card, 0 6px 16px rgba(20, 60, 85, 0.18));
  opacity: 0; visibility: hidden; transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 5; pointer-events: none;
}
.bucket-info:hover .bucket-tip,
.bucket-info:focus .bucket-tip,
.bucket-info:focus-visible .bucket-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.bucket-empty {
  margin: 0; padding: 14px 16px; font-size: 13px; color: var(--ha-ink-muted);
  background: var(--ha-surface); border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md);
}

.bucket-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* A row ------------------------------------------------------------------- */
.wl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; background: var(--ha-worklist-bucket-bg);
  border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
}
.wl-row:hover { background: var(--ha-worklist-row-hover); }
.wl-open {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  color: var(--ha-ink); flex: 1 1 auto; min-width: 0;
}
.wl-open:focus-visible { outline: none; box-shadow: var(--ha-focus-ring); border-radius: 4px; }
.wl-who { font-weight: var(--ha-weight-bold); font-size: 14px; }
.wl-meta {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--ha-ink-muted); flex-wrap: wrap;
}
.wl-reason { color: var(--ha-ink); }
.wl-sep { color: var(--ha-border); }

.wl-aside { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.wl-waiting { font-size: 12px; color: var(--ha-ink-muted); font-variant-numeric: tabular-nums; }

/* All-caught-up (the good empty state). */
.worklist-allclear {
  padding: 48px 24px; text-align: center; background: var(--ha-surface);
  border: 1px solid var(--ha-border); border-radius: var(--ha-radius-lg);
}
.allclear-line { margin: 0; font-size: 15px; color: var(--ha-ink); }

/* Calm notice that the SLA thresholds are unreviewed defaults. */
.sla-defaults-notice {
  margin: var(--ha-space-6) 0 0; font-size: 12px; color: var(--ha-ink-muted);
}

/* Shared SLA stuck-timer pill (worklist rows AND funnel rows) -------------- */
.sla-pill { display: inline-flex; align-items: center; gap: 6px; }
.sla-time { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: var(--ha-weight-medium); }
.sla-flag {
  font-size: 11px; font-weight: var(--ha-weight-bold);
  padding: 1px 7px; border-radius: var(--ha-radius-pill);
}
.sla-flag.is-red { color: var(--ha-danger); background: var(--ha-danger-bg); }
.sla-flag.is-amber {
  color: var(--ha-sla-amber);
  background: color-mix(in srgb, var(--ha-sla-amber) 12%, transparent);
}