/*
 * Host UI building blocks — shared by host workspace pages.
 *
 * Owner for: the phone host tab bar (#host-tab-bar), grouped row lists
 * (.host-ui-rows), host buttons (.host-ui-btn:not(.ui-button)) and empty states
 * (.host-ui-empty). Pages compose these instead of inventing per-page
 * button and card styles. Colors come from base/variables.css host tokens.
 *
 * Layout rules:
 * - One primary .host-ui-btn:not(.ui-button) per screen or card; other destinations are rows.
 * - Rows are whole-row tap targets (min 3rem) with a trailing chevron.
 * - The tab bar owns --swiftspot-mobile-bottom-nav-offset on host phone pages
 *   (see host-sidebar.css), so fixed bottom bars and the support button clear it.
 */

/* Declared on body as well as :root: the dark host-product tokens are set on
   body.host-workspace (variables.css), and var() resolves where declared. */
:root,
body {
  --host-ui-surface: var(--host-product-card-bg, #fff);
  --host-ui-border: var(--host-product-card-border, #e4e0d8);
  --host-ui-text: var(--host-product-text, #252a2d);
  --host-ui-text-muted: var(--host-product-text-secondary, #4f585c);
  --host-ui-accent: var(--host-product-primary-fg, #0f5a56);
  --host-ui-radius: 0.875rem;
  --host-ui-row-height: 3.25rem;
  --host-tab-bar-height: 3.5rem;
}

/* Surface and text follow the host-product dark tokens in variables.css. */
.dark,
.dark body {
  --host-ui-border: var(--color-dark-border-subtle, rgb(255 255 255 / 10%));
  --host-ui-text-muted: var(--color-dark-text-secondary, #a5adb9);
  --host-ui-accent: var(--color-brand-accent-on-dark-surface, #5eead4);
}

/* ---- Buttons ---- */

.host-ui-btn:not(.ui-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.host-ui-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.host-ui-btn--primary:not(.ui-button) {
  background: var(--host-product-primary, #28343d);
  color: var(--host-product-primary-text, #fff);
}

.host-ui-btn--primary:not(.ui-button):hover {
  background: var(--host-product-primary-hover, #1f2933);
  color: var(--host-product-primary-text, #fff);
}

.dark .host-ui-btn--primary:not(.ui-button) {
  background: var(--color-dark-text, #f5f6f8);
  color: var(--color-dark-bg, #17191d);
}

.dark .host-ui-btn--primary:not(.ui-button):hover {
  background: #ffffff;
  color: var(--color-dark-bg, #17191d);
}

.host-ui-btn:not(.ui-button):focus-visible,
.host-ui-row:not(.ui-row):focus-visible,
.host-tab-bar__item:focus-visible {
  outline: 2px solid var(--host-ui-accent);
  outline-offset: 2px;
}

/* ---- Grouped row list ---- */

.host-ui-section-title:not(.ui-text-section-title) {
  margin: 1.5rem 0 0.5rem;
  padding: 0 0.25rem;
  color: var(--host-ui-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.host-ui-rows { margin: 0; padding: 0; list-style: none; }
.host-ui-rows:not(.ui-list) {
  overflow: hidden;
  border: 1px solid var(--host-ui-border);
  border-radius: var(--host-ui-radius);
  background: var(--host-ui-surface);
}

.host-ui-rows:not(.ui-list) > li + li {
  border-top: 1px solid var(--host-ui-border);
}

.host-ui-row:not(.ui-row) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--host-ui-row-height);
  padding: 0.625rem 0.875rem 0.625rem 1rem;
  color: var(--host-ui-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.host-ui-row:not(.ui-row):hover {
  background: rgb(15 23 42 / 3%);
}

.dark .host-ui-row:not(.ui-row):hover {
  background: rgb(255 255 255 / 4%);
}

.host-ui-row:not(.ui-row) .host-ui-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 0.5rem;
  background: var(--color-brand-accent-outline-hover, rgb(40 117 108 / 7%));
  color: var(--host-ui-accent);
}

.dark .host-ui-row:not(.ui-row) .host-ui-row__icon {
  background: rgb(94 234 212 / 10%);
}

.host-ui-row__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.host-ui-row__label {
  flex: 1 1 auto;
  min-width: 0;
}

.host-ui-row__hint {
  display: block;
  margin-top: 0.125rem;
  color: var(--host-ui-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.host-ui-row::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  margin-right: 0.25rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: 0.35;
  transform: rotate(45deg);
}

/* ---- Empty state ---- */

.host-ui-empty {
  padding: 1.5rem 1.25rem;
  border: 1px dashed var(--host-ui-border);
  border-radius: var(--host-ui-radius);
  text-align: center;
}

.host-ui-empty h2 {
  margin: 0;
  color: var(--host-ui-text);
  font-size: 1rem;
  font-weight: 650;
}

.host-ui-empty p {
  margin: 0.375rem auto 0;
  max-width: 28rem;
  color: var(--host-ui-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---- Phone host tab bar ---- */

.host-tab-bar {
  display: none;
}

@media (max-width: 767px) {
  .host-tab-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 44;
    display: block;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--host-ui-border);
    background: rgb(255 255 255 / 92%);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }

  .dark .host-tab-bar {
    background: rgb(23 25 29 / 90%);
  }

  .host-tab-bar__items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--host-tab-bar-height);
    max-width: 32rem;
    margin: 0 auto;
  }

  .host-tab-bar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--host-ui-text-muted);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .host-tab-bar__item svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .host-tab-bar__item.is-active {
    color: var(--host-ui-accent);
    font-weight: 650;
  }

  #host-tab-bar .host-tab-bar__item .swiftspot-nav-badge {
    position: absolute;
    top: 0.3125rem;
    right: auto;
    left: calc(50% + 0.375rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border: 0;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--host-ui-surface);
  }

  #host-tab-bar .host-tab-bar__item .swiftspot-nav-badge.hidden {
    display: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
  .host-tab-bar { background: var(--host-ui-surface); }
}

.host-ui-row.ui-row .host-ui-row__hint { font-size: var(--type-muted-size); }