/* Concierge Desk — shell, top bar, three-pane grid, shared controls. */

.desk { display: grid; grid-template-rows: 52px 1fr; height: 100vh; }

.desk-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; border-bottom: 1px solid var(--ha-border);
  background: var(--ha-surface);
}
.desk-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: var(--ha-weight-bold); font-size: 15px; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ha-ink);
}
.desk-brand .dot {
  width: 18px; height: 18px; border-radius: var(--ha-radius-sm);
  background: var(--ha-blue-primary); display: inline-block;
}
.desk-search {
  flex: 1; max-width: 420px; height: 34px; border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md); background: var(--ha-surface-subtle);
  display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--ha-ink-muted);
}
.desk-search input {
  border: 0; background: transparent; outline: none; font: inherit;
  color: var(--ha-ink); width: 100%;
}
.desk-nav { display: flex; align-items: center; gap: 4px; }
.desk-navlink {
  font-size: 13px; font-weight: var(--ha-weight-medium); color: var(--ha-ink-muted);
  text-decoration: none; padding: 6px 12px; border-radius: var(--ha-radius-md);
}
.desk-navlink:hover { background: var(--ha-row-hover); color: var(--ha-ink); }
.desk-navlink.active { color: var(--ha-ink); background: var(--ha-accent-tint); }
.desk-navlink:focus-visible { outline: none; box-shadow: var(--ha-focus-ring); }
.desk-spacer { flex: 1; }
.desk-shift {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ha-ink-muted);
}
.desk-shift .on { width: 8px; height: 8px; border-radius: 50%; background: var(--ha-success); }
.desk-me { display: flex; align-items: center; gap: 8px; font-weight: var(--ha-weight-medium); }
.desk-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ha-blue-primary-soft);
  color: var(--ha-surface); display: grid; place-items: center;
  font-size: 12px; font-weight: var(--ha-weight-bold);
}
.desk-signout {
  background: none; border: 0; padding: 0; color: var(--ha-blue-text);
  font: inherit; font-size: 13px; cursor: pointer;
}

.desk-panes { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
/* The workspace turbo-frame fills its bounded grid row (the .desk 52px 1fr row),
   giving the inner panes a definite height to scroll within. overflow: hidden
   keeps the scroll regions (the homeowner thread, the right lane) inside it so
   the page itself never scrolls. */
.workspace-frame {
  display: flex; flex-direction: column; height: 100%;
  min-height: 0; min-width: 0; overflow: hidden;
}
/* The dossier view (#desk_dossier) is a plain block child with no inner scroll
   region of its own, so let the frame scroll when it's showing the dossier —
   without disturbing the homeowner workspace's own inner scroll panes. */
.workspace-frame:has(> #desk_dossier) { overflow-y: auto; }
/* The transient flash banner (wrapped in #desk_flash) takes its natural height
   above the panes; the .workspace (added :only-child-aware below) fills the rest
   and scrolls inside. */
.workspace-frame > #desk_flash { flex: none; }

/* Shared pill + button vocabulary. */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px;
  border-radius: var(--ha-radius-pill); font-size: 12px;
  font-weight: var(--ha-weight-medium); line-height: 1; color: var(--ha-surface);
}
.pill .glyph { width: 12px; height: 12px; }
.pill.outline {
  background: transparent; border: 1px solid var(--ha-border); color: var(--ha-ink);
}

.btn {
  height: 34px; padding: 0 18px; border-radius: var(--ha-radius-pill); font: inherit;
  font-size: 13px; cursor: pointer; border: 0; display: inline-flex; align-items: center;
  gap: 7px; transition: background-color 120ms ease; text-decoration: none;
}
.btn-primary { background: var(--ha-blue-primary); color: var(--ha-surface); }
.btn-primary:hover { background: var(--ha-blue-primary-alt); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
/* Pin the primary CTA label white in every link state. The desk shell wraps
   content in .ha, and `.ha a { color: var(--ha-blue-text) }` (colors_and_type)
   out-specifies `.btn-primary` on an <a>, tinting the label light-blue. These
   raise specificity so the label stays white-on-navy (AAA). The inner SVG uses
   stroke="currentColor", so it follows. */
.ha a.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover { color: var(--ha-surface); }
.btn-secondary {
  background: var(--ha-surface); color: var(--ha-ink);
  border: 2px solid var(--ha-blue-primary); padding: 0 16px;
}
.btn-secondary:hover { background: var(--ha-row-hover); }
.btn-ghost {
  background: transparent; color: var(--ha-ink-muted); border: 1px solid var(--ha-border);
}
.btn-ghost:hover { color: var(--ha-ink); }
.btn-danger {
  background: transparent; color: var(--ha-danger); border: 1px solid var(--ha-border);
}
.btn-danger:hover { background: var(--ha-danger-bg); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ha-surface), 0 0 0 4px var(--ha-blue-accent);
}

/* Flash banners. The shared box styling is type-agnostic; the COLOR treatment
   is keyed off data-flash-type so a success flash reads as success, not an
   error. Red is reserved for real errors (alert); any unrecognized type falls
   back to the calm success/notice treatment, never danger. */
.desk-flash {
  margin: 12px 24px; padding: 10px 14px; border-radius: var(--ha-radius-md);
  border: 1px solid transparent; font-size: 13px;
}
.desk-flash,
.desk-flash[data-flash-type="notice"] {
  background: var(--ha-success-tint); border-color: var(--ha-success-edge);
  color: var(--ha-success);
}
.desk-flash[data-flash-type="alert"] {
  background: var(--ha-danger-bg); border-color: var(--ha-danger);
  color: var(--ha-danger);
}