/* Backoffice UI theme — same Basecamp/Fizzy-inspired palette as tenant.css
   (tokens shared via design_tokens.css), different component shapes for an
   admin tool: a single-row top app bar + workspace switcher instead of a
   sidebar, a workspace hub of tool tiles on the Overview page instead of
   persistent sub-nav chrome, and cards-over-tables. */

.backoffice-body {
  /* Flatter, tighter radius than the tenant surface's --radius: 20px --
     matches the plain, hairline-bordered look of Basecamp's actual
     product UI rather than a soft rounded "SaaS dashboard" card. Scoped
     here (not in design_tokens.css) so tenant.css is untouched. */
  --radius: 8px;
  background-color: var(--panel);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.backoffice-body *:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Containers */
.backoffice-container {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.backoffice-container-wide {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 768px) {
  .backoffice-container,
  .backoffice-container-wide {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Typography */
.backoffice-heading {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.backoffice-text-muted {
  color: var(--muted);
  line-height: 1.5;
}

.backoffice-link {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}

.backoffice-link:hover {
  color: var(--purple-dark);
  text-decoration: underline;
}

/* Top app bar */
.backoffice-topbar {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* Workspace switcher */
.backoffice-switcher-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  border-radius: max(4px, calc(var(--radius) - 8px));
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  background-color: transparent;
  transition: background-color 150ms ease;
}

.backoffice-switcher-button:hover {
  background-color: var(--panel);
}

.backoffice-switcher-menu {
  background: var(--white);
  border-radius: max(4px, calc(var(--radius) - 4px));
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* Overrides the view's `absolute left-0 w-72` Tailwind utilities -- same
   overflow problem and fix as .backoffice-section-menu above (this file
   loads after Tailwind's, so these win at equal specificity). */
@media (max-width: 620px) {
  .backoffice-switcher-menu {
    position: fixed;
    top: 4.5rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
  }
}

.backoffice-switcher-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: max(4px, calc(var(--radius) - 12px));
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color 150ms ease;
}

.backoffice-switcher-item:hover {
  background-color: var(--panel);
}

.backoffice-switcher-item-active {
  background-color: var(--purple-soft);
  color: var(--purple-dark);
}

/* Section menu — Basecamp-style dropdown in the top bar that replaces a
   persistent second nav row. Lists the workspace's sections with a color
   dot + count; the Overview page itself renders the same sections as
   content-preview cards (below). See BACKOFFICE_UI_REDESIGN_PLAN.md. */
.backoffice-section-menu-wrap {
  position: relative;
}

.backoffice-section-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border-radius: max(4px, calc(var(--radius) - 12px));
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  background-color: transparent;
  transition: background-color 150ms ease;
}

.backoffice-section-trigger:hover {
  background-color: var(--panel);
}

.backoffice-section-trigger-active {
  color: var(--purple-dark);
  background-color: var(--purple-soft);
}

.backoffice-section-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 15rem;
  background: var(--white);
  border-radius: max(4px, calc(var(--radius) - 4px));
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 0.375rem;
  z-index: 50;
}

/* On mobile the trigger can sit anywhere across the topbar (it's just one
   item among several, not pinned to an edge), so a fixed 240px menu
   anchored at left:0 can run off either side depending on the page.
   Pin it to the viewport instead of the trigger below this width. */
@media (max-width: 620px) {
  .backoffice-section-menu {
    position: fixed;
    top: 4.5rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
  }
}

.backoffice-section-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: max(4px, calc(var(--radius) - 12px));
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-2);
  transition: background-color 150ms ease;
}

.backoffice-section-item:hover {
  background-color: var(--panel);
}

.backoffice-section-item-active {
  background-color: var(--purple-soft);
  color: var(--purple-dark);
}

.backoffice-section-item .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.backoffice-section-item .count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.dot-purple { background-color: var(--purple); }
.dot-mint { background-color: var(--mint-dark); }
.dot-warning { background-color: var(--warning); }

/* Small uppercase heading grouping a run of .backoffice-section-item
   links within one dropdown -- e.g. the "Templates" group in the top bar
   Manage menu, separating it from Workspaces/Admins above it. */
.backoffice-section-menu-label {
  padding: 0.625rem 0.625rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 0.25rem;
}
.dot-sky { background-color: var(--sky); }

/* Workspace overview — the workspace's sections rendered as a grid of
   content-preview cards on the Overview page itself (Basecamp
   project-page style), each with a colored heading and a peek at its
   real recent content instead of a bare navigation icon. */
.backoffice-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 620px) {
  .backoffice-overview-grid { grid-template-columns: 1fr; }
}

.backoffice-overview-card {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}

.backoffice-overview-card-span-2 {
  grid-column: span 2;
}

@media (max-width: 620px) {
  .backoffice-overview-card-span-2 { grid-column: span 1; }
}

.backoffice-overview-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.backoffice-overview-card-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Solid-fill icon tile -- a flat saturated color square with a white
   glyph, not a soft pastel square with a thin colored stroke icon. */
.backoffice-overview-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: max(4px, calc(var(--radius) - 2px));
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.backoffice-overview-card-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--white);
  stroke-width: 2.25;
}

.backoffice-overview-card-icon.i-purple { background-color: var(--purple); }
.backoffice-overview-card-icon.i-mint { background-color: var(--mint-dark); }
.backoffice-overview-card-icon.i-warning { background-color: var(--warning); }
.backoffice-overview-card-icon.i-sky { background-color: var(--sky-dark); }
.backoffice-overview-card-icon.i-ink { background-color: var(--ink-2); }
.backoffice-overview-card-icon.i-danger { background-color: var(--danger); }

.backoffice-overview-card-open {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.backoffice-overview-card:hover .backoffice-overview-card-open {
  color: var(--purple-dark);
}

.backoffice-overview-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.backoffice-preview-empty {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Message preview row */
.backoffice-preview-message {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.backoffice-preview-message .body {
  min-width: 0;
}

.backoffice-preview-message .who {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-2);
}

.backoffice-preview-message .snippet {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* File preview row */
.backoffice-preview-file {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.backoffice-preview-file-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sky-dark);
  color: var(--white);
}

.backoffice-preview-file-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 2.25;
}

.backoffice-preview-file .fname {
  font-weight: 700;
  color: var(--ink-2);
}

.backoffice-preview-file .fmeta {
  color: var(--muted);
  font-size: 0.75rem;
}

/* Action preview row — an action has a request type (approval, file
   request, meeting, ...), not a done/undone state, so it's shown with
   its type icon + badge rather than a checkbox. */
.backoffice-preview-action {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.backoffice-preview-action-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mint-dark);
  color: var(--white);
}

.backoffice-preview-action-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 2.25;
}

.backoffice-preview-action .title {
  font-weight: 600;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backoffice-preview-action .type {
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Project preview row */
.backoffice-preview-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.backoffice-preview-project .name {
  font-weight: 700;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Activity preview row -- the icon's own color comes from
   Event::Description#icon_colors (per-action), not a fixed class here. */
.backoffice-preview-event {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.backoffice-preview-event-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.backoffice-preview-event-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 2.25;
}

.backoffice-preview-event .desc {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backoffice-preview-event .time {
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Two-line variant (icon + description, then workspace badge + time below)
   for narrower placements like the dashboard sidebar, where a workspace
   badge won't fit on the same line as a full sentence. */
.backoffice-preview-event-stacked {
  align-items: flex-start;
}

.backoffice-preview-event-stacked .backoffice-preview-event-icon {
  margin-top: 0.0625rem;
}

/* Notification list row (bell dropdown + full index page) */
.backoffice-notification {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  position: relative;
  transition: background-color 100ms ease;
}

.backoffice-notification:hover {
  background: var(--panel);
}

.backoffice-notification-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin-top: 0.125rem;
}

.backoffice-notification-icon svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.25;
}

.backoffice-notification-icon.i-purple { background-color: var(--purple); }
.backoffice-notification-icon.i-mint { background-color: var(--mint-dark); }
.backoffice-notification-icon.i-warning { background-color: var(--warning); }
.backoffice-notification-icon.i-sky { background-color: var(--sky-dark); }

.backoffice-notification-message {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.4;
}

.backoffice-notification-unread .backoffice-notification-message {
  font-weight: 600;
  color: var(--ink);
}

.backoffice-notification-time {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

.backoffice-notification-list > li + li {
  border-top: 1px solid var(--line);
}

.backoffice-notification-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--purple);
  flex-shrink: 0;
  margin-top: 0.375rem;
}

/* Toggle switch (checkbox styled as a track + sliding thumb) */
.backoffice-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.backoffice-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.backoffice-toggle-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background-color 150ms ease;
}

.backoffice-toggle-thumb {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17, 17, 22, 0.25);
  transition: transform 150ms ease;
}

.backoffice-toggle-input:checked ~ .backoffice-toggle-track {
  background: var(--purple);
}

.backoffice-toggle-input:checked ~ .backoffice-toggle-track .backoffice-toggle-thumb {
  transform: translateX(1rem);
}

.backoffice-toggle-input:focus-visible ~ .backoffice-toggle-track {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Cards */
.backoffice-card {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 150ms ease;
}

/* A message read as a letter, not a system record -- warm paper tone
   instead of the app's cool grey panel. */
.backoffice-letter {
  background: #fffdf9;
  border: 1.5px solid #f1ece0;
  border-radius: var(--radius);
}

.backoffice-card-link:hover {
  border-color: var(--ink-2);
}

/* Drag/click multi-select state for the Files grid and list views
   (selectable_controller.js toggles this class, no inline style so it
   stays overridable and themeable from one place). */
.is-selected {
  background-color: var(--purple-soft) !important;
  border-color: var(--purple) !important;
}

/* Workspace card figures */
.backoffice-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.backoffice-stat-value {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.backoffice-stat-label {
  font-size: 0.6875rem;
  color: var(--muted);
  font-weight: 600;
}

/* Buttons */
.backoffice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: max(4px, calc(var(--radius) - 8px));
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.backoffice-btn-primary {
  background-color: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}

.backoffice-btn-primary:hover {
  background-color: var(--purple-dark);
  border-color: var(--purple-dark);
  transform: translateY(-1px);
}

.backoffice-btn-secondary {
  background-color: var(--white);
  color: var(--purple);
  border-color: var(--line);
}

.backoffice-btn-secondary:hover {
  background-color: var(--purple-soft);
  border-color: var(--purple-soft);
}

.backoffice-btn-danger {
  background-color: var(--danger-soft);
  color: var(--danger-dark);
  border-color: transparent;
}

.backoffice-btn-danger:hover {
  background-color: var(--danger);
  color: var(--white);
}

.backoffice-btn-ghost {
  background-color: transparent;
  color: var(--muted);
  border-color: transparent;
  padding: 0.5rem 0.75rem;
}

.backoffice-btn-ghost:hover {
  background-color: var(--panel);
  color: var(--ink);
}

.backoffice-btn-icon {
  padding: 0.375rem;
  background-color: transparent;
  color: var(--muted);
  border-color: transparent;
  border-radius: max(4px, calc(var(--radius) - 12px));
}

.backoffice-btn-icon:hover {
  background-color: var(--panel);
  color: var(--ink);
}

.backoffice-btn-icon.backoffice-btn-primary {
  padding: 0.5rem;
  background-color: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

.backoffice-btn-icon.backoffice-btn-primary:hover {
  background-color: var(--purple-dark);
  color: var(--white);
  transform: none;
}

/* Badges */
.backoffice-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.backoffice-badge-purple { background-color: var(--purple-soft); color: var(--purple-dark); }
.backoffice-badge-mint { background-color: var(--mint-soft); color: var(--mint-dark); }
.backoffice-badge-sky { background-color: var(--sky-soft); color: var(--sky-dark); }
.backoffice-badge-warning { background-color: var(--warning-soft); color: var(--warning-dark); }
.backoffice-badge-danger { background-color: var(--danger-soft); color: var(--danger-dark); }
.backoffice-badge-muted { background-color: var(--panel); color: var(--muted); }

/* Sprint timeline -- horizontal strip of sprint cards on Phase/Sprint show,
   scrollable with snap so the current sprint reads as "you are here" among
   its neighbors instead of a plain chronological list. */
.backoffice-sprint-timeline {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.25rem 0.125rem;
  min-width: 0;
}

.backoffice-sprint-node {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  border-radius: max(4px, calc(var(--radius) - 6px));
  border: 1.5px solid var(--line);
  background: var(--white);
  transition: border-color 150ms ease, transform 150ms ease;
}

.backoffice-sprint-node:hover {
  border-color: var(--muted);
}

.backoffice-sprint-node.is-current {
  border-color: var(--purple);
  background: var(--purple-soft);
  transform: translateY(-2px);
}

.backoffice-sprint-node-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backoffice-sprint-node-dates {
  font-size: 0.75rem;
  color: var(--muted);
}

.backoffice-sprint-node-progress {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.backoffice-sprint-node-progress > span {
  display: block;
  height: 100%;
  background: var(--purple);
  border-radius: inherit;
}

.backoffice-sprint-node-complete .backoffice-sprint-node-progress > span { background: var(--mint-dark); }
.backoffice-sprint-node-waiting_on_client .backoffice-sprint-node-progress > span { background: var(--warning-dark); }

/* Dashboard shell -- main content + a sticky comments sidebar, used by
   Project/Phase/Sprint show pages so comments stay visible alongside
   whatever you're actually looking at instead of buried below a long
   description. */
.backoffice-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.backoffice-dashboard-sidebar {
  position: sticky;
  top: 5rem;
  border-left: 1.5px solid var(--line);
  padding-left: 1.5rem;
}

@media (max-width: 900px) {
  .backoffice-dashboard {
    grid-template-columns: 1fr;
  }

  .backoffice-dashboard-sidebar {
    position: static;
    border-left: none;
    padding-left: 0;
    border-top: 1.5px solid var(--line);
    padding-top: 1.5rem;
  }
}

.backoffice-progress-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.backoffice-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--purple);
}

/* Sprint progress slider -- drag to update, no separate save step. Native
   range input styled with accent-color so it keeps free keyboard/touch
   support instead of a hand-rolled custom slider. */
.backoffice-progress-slider {
  width: 100%;
  accent-color: var(--purple);
  cursor: pointer;
}

/* Status stepper -- a clickable row of every status a sprint (or phase,
   should it need one later) can be in, so changing it is one click instead
   of opening the edit form for a single field. */
.backoffice-status-stepper {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.backoffice-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 99px;
  border: 1.5px solid transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 150ms ease, border-color 150ms ease;
}

.backoffice-status-pill:hover {
  opacity: 0.8;
}

/* Set directly (button_to's status stepper) or driven by a checked
   checkbox inside it (the tag picker's label pills -- see
   _tag_fields.html.erb), so both need no JS to reflect selection. */
.backoffice-status-pill.is-current,
.backoffice-status-pill:has(input:checked) {
  opacity: 1;
  border-color: currentColor;
}

/* Phase/section divider -- "— Phase — Title ————— (edit)" row separating
   each phase's sprint timeline on the project dashboard. */
.backoffice-section-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.backoffice-section-divider-line {
  flex: 1;
  height: 1.5px;
  background: var(--line);
}

/* Empty state */
.backoffice-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
  background: var(--panel);
  border-radius: var(--radius);
}

/* Used when the empty state is nested inside another card (e.g. below a
   search bar) -- flush top corners so it doesn't round awkwardly against
   the straight edge above it; bottom corners still match the outer card. */
.backoffice-empty-flush {
  border-radius: 0 0 var(--radius) var(--radius);
}

.backoffice-empty-sketch {
  width: 6rem;
  height: 6rem;
  color: var(--purple);
  opacity: 0.75;
  margin-bottom: 1.25rem;
}

/* Form fields */
.backoffice-field {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: max(4px, calc(var(--radius) - 8px));
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 150ms ease;
}

.backoffice-field:focus {
  border-color: var(--purple);
}

.backoffice-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

.backoffice-field-hint {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.backoffice-field-error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: 0.25rem;
}

.backoffice-select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b6b78'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
}

/* Table — kept for genuinely dense/tabular data only, not the default
   index shape (see BACKOFFICE_UI_REDESIGN_PLAN.md). */
.backoffice-table {
  width: 100%;
  border-collapse: collapse;
}

.backoffice-table th {
  background-color: var(--panel);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 1rem;
}

.backoffice-table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-2);
}

.backoffice-table tbody tr {
  transition: background-color 150ms ease;
}

.backoffice-table tbody tr:hover {
  background-color: var(--panel);
}

/* Detail card header — the workspace's identity (logo, name, status,
   subdomain) plus its page actions in one row, not a raw database dump
   of labeled fields. Used by the workspace Overview page. */
.backoffice-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.backoffice-detail-header-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.backoffice-detail-name {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.backoffice-detail-subtitle {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.25rem;
}


/* Inline forms -- a label beside the field with an underline instead of
   a boxed input, an icon giving the field context, and hint text below.
   Not a copy of any one product's to-do form, but the same idea: a form
   that reads like the rest of the page instead of a walled-off system
   form. See workspaces/edit.html.erb for the reference implementation. */
.backoffice-form-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.125rem 0;
}

.backoffice-form-row.hidden {
  display: none;
}

.backoffice-form-row + .backoffice-form-row {
  border-top: 1px solid var(--line);
}

.backoffice-form-label {
  flex: 0 0 9rem;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ink);
}

.backoffice-form-control {
  flex: 1;
  min-width: 0;
}

/* Below this width the fixed 9rem label column leaves too little room for
   the control (as little as ~130px), which is what made dropdowns like
   .backoffice-type-menu overflow the viewport -- stack label above
   control instead, same breakpoint as the rest of this file. */
@media (max-width: 620px) {
  .backoffice-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
  }

  .backoffice-form-label {
    flex: none;
    padding-top: 0;
  }
}

.backoffice-form-input {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--line);
  padding: 0.5rem 0.125rem;
  transition: border-color 150ms ease;
}

.backoffice-form-input:focus-within {
  border-color: var(--purple);
}

.backoffice-form-input svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--muted);
  flex-shrink: 0;
}

.backoffice-form-input input[type="text"],
.backoffice-form-input input[type="email"],
.backoffice-form-input input[type="password"],
.backoffice-form-input input[type="date"],
.backoffice-form-input select {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--ink);
  padding: 0;
}

.backoffice-form-input input::placeholder {
  color: var(--muted);
}

/* Same underline treatment as .backoffice-form-input, for a <textarea>
   used standalone (no icon prefix). Pairs with the `autogrow` Stimulus
   controller, which grows the height to fit content instead of
   scrolling internally. */
.backoffice-form-underline {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--line);
  padding: 0.5rem 0.125rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  resize: none;
  overflow: hidden;
  transition: border-color 150ms ease;
}

.backoffice-form-underline:focus {
  outline: none;
  border-color: var(--purple);
}

/* Strips Lexxy's boxed-field chrome (border/radius/shadow) so a rich text
   area reads as plain writing continuing below a hairline, matching
   .backoffice-form-underline's plain-text sibling instead of looking like
   a bordered widget dropped into the page. */
.backoffice-compose-editor {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1.5px solid var(--line) !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transition: border-color 150ms ease;
}

.backoffice-compose-editor:focus-within {
  border-bottom-color: var(--purple) !important;
}

.backoffice-form-underline::placeholder {
  color: var(--muted);
}

.backoffice-form-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}

.backoffice-form-error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: 0.5rem;
}

/* Collapsible goal/description text (native <details>), used where a list
   item's own text would otherwise dominate the row it sits in -- e.g. a
   phase or sprint's description in the template instantiation preview. */
.backoffice-disclosure summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.backoffice-disclosure summary::-webkit-details-marker {
  display: none;
}

.backoffice-disclosure summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 150ms ease;
  flex-shrink: 0;
}

.backoffice-disclosure[open] summary::before {
  transform: rotate(45deg);
}

.backoffice-disclosure summary:hover {
  color: var(--ink-2);
}

.backoffice-disclosure-content {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Switch toggle -- flat pill, no shadow, matching the rest of the flat
   Basecamp-referenced buttons/cards, used instead of raw checkboxes. */
.backoffice-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--ink) 18%, var(--white));
  cursor: pointer;
  transition: background-color 150ms ease;
}

.backoffice-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.backoffice-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--white);
  transition: transform 150ms ease;
  pointer-events: none;
}

.backoffice-switch:has(input:checked) {
  background-color: var(--purple);
}

.backoffice-switch:has(input:checked) .backoffice-switch-knob {
  transform: translateX(1rem);
}

.backoffice-switch:has(input:focus-visible) {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Type selector -- an inline dropdown (not a plain <select>, and not a
   permanently-expanded card grid) for a choice that changes what the
   rest of the form does, e.g. an action's request type. Closed, it
   shows just the selected title; open, each option shows its icon,
   title, and a one-line description of what it does. Selection state
   and the trigger's label are pure CSS (:has(input:checked)) -- no JS
   beyond the generic `dropdown` controller for open/close. */
.backoffice-type-select {
  position: relative;
}

.backoffice-type-trigger {
  width: 100%;
  cursor: pointer;
}

.backoffice-type-trigger-chevron {
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.backoffice-type-trigger-option {
  display: none;
  align-items: center;
  gap: 0.625rem;
}

.backoffice-type-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 20rem;
  background: var(--white);
  border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 0.375rem;
  z-index: 30;
}

@media (max-width: 620px) {
  .backoffice-type-menu {
    min-width: 0;
    max-width: calc(100vw - 2.5rem);
  }
}

.backoffice-type-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem;
  border-radius: max(4px, calc(var(--radius) - 4px));
  cursor: pointer;
  transition: background-color 150ms ease;
}

.backoffice-type-option:hover {
  background-color: var(--panel);
}

.backoffice-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.backoffice-type-option:has(input:checked) {
  background-color: var(--purple-soft);
}

.backoffice-type-option:has(input:focus-visible) {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.backoffice-type-icon {
  width: 2rem;
  height: 2rem;
  border-radius: max(4px, calc(var(--radius) - 4px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.backoffice-type-icon svg {
  width: 1rem;
  height: 1rem;
  color: var(--white);
  stroke-width: 2.25;
}

.backoffice-type-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ink);
}

.backoffice-type-description {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.backoffice-type-icon.i-purple { background-color: var(--purple); }
.backoffice-type-icon.i-mint { background-color: var(--mint-dark); }
.backoffice-type-icon.i-warning { background-color: var(--warning); }
.backoffice-type-icon.i-sky { background-color: var(--sky-dark); }

/* Which trigger-option is visible depends on which radio is checked --
   WorkspaceAction#request_type is a fixed 5-value enum, so these are
   hardcoded rather than generated. */
.backoffice-type-select:has(input[value="approval"]:checked) .backoffice-type-trigger-option[data-type="approval"],
.backoffice-type-select:has(input[value="multiple_choice"]:checked) .backoffice-type-trigger-option[data-type="multiple_choice"],
.backoffice-type-select:has(input[value="file_upload"]:checked) .backoffice-type-trigger-option[data-type="file_upload"],
.backoffice-type-select:has(input[value="meeting_request"]:checked) .backoffice-type-trigger-option[data-type="meeting_request"],
.backoffice-type-select:has(input[value="access"]:checked) .backoffice-type-trigger-option[data-type="access"] {
  display: flex;
}

/* Pill filters -- a loose row of rounded chips for switching who/what a
   list is scoped to, instead of a bordered tab strip with underlines
   (reads as admin-dashboard chrome). Status/urgency is expressed by the
   list's own section grouping, not by a tab here. */
.backoffice-pill-filter {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid var(--line);
  white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.backoffice-pill-filter:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}

.backoffice-pill-filter-active,
.backoffice-pill-filter-active:hover {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

/* Wizard step indicator -- a horizontal numbered track with connecting
   lines, used by any multi-step flow (currently just workspace creation). */
.backoffice-wizard-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.backoffice-wizard-step {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.75rem;
}

.backoffice-wizard-step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 800;
  background: var(--panel);
  color: var(--muted);
}

.backoffice-wizard-step-reached .backoffice-wizard-step-circle {
  background: var(--purple-soft);
  color: var(--purple-dark);
}

.backoffice-wizard-step-current .backoffice-wizard-step-circle {
  background: var(--purple);
  color: var(--white);
}

.backoffice-wizard-step-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
}

.backoffice-wizard-step-reached .backoffice-wizard-step-label {
  color: var(--muted);
}

.backoffice-wizard-step-current .backoffice-wizard-step-label {
  color: var(--ink);
}

.backoffice-wizard-step-connector {
  flex: 1;
  height: 1.5px;
  background: var(--line);
  margin: 0 1rem;
}

/* Selectable card for a mutually-exclusive choice (radio input styled as
   a full card, checked state via :has -- same idea as .backoffice-type-option). */
.backoffice-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: max(4px, calc(var(--radius) - 8px));
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.backoffice-radio-card:hover {
  border-color: var(--muted);
}

.backoffice-radio-card:has(input:checked) {
  background: var(--purple-soft);
  border-color: var(--purple);
}

.backoffice-radio-card input[type="radio"] {
  margin-top: 0.1875rem;
  accent-color: var(--purple);
  flex-shrink: 0;
}

/* Tree select for action targets (project > phase > sprint) */
.tree-select-panel {
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.5rem;
  background: var(--white);
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: max(4px, calc(var(--radius) - 6px));
  transition: background-color 150ms ease;
}

.tree-row:hover {
  background-color: var(--panel);
}

.tree-toggle,
.tree-toggle-spacer {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tree-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  transition: transform 150ms ease, color 150ms ease;
}

.tree-toggle:hover {
  color: var(--ink);
}

.tree-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}

.tree-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--ink);
}

.tree-label-text {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-label input[type="radio"] {
  accent-color: var(--purple);
  flex-shrink: 0;
}

.tree-children {
  margin-left: 0.625rem;
  padding-left: 0.625rem;
  border-left: 1.5px solid var(--line);
}

.tree-node[data-active="true"] > .tree-row .tree-label-text {
  color: var(--purple-dark);
}

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