/*
 * Account app glue for the Bento product design system (vendor/bento-design, brand: tatami).
 * Everything here reads --bento-* tokens, so it follows data-theme. Scoped to .ui-root or html[data-theme],
 * which only the account and devise layouts set; the marketing site is untouched.
 * Served as a plain file after bento-ui.css (themes/light/layouts/_product_head), so it needs no Tailwind
 * build and wins the cascade over equal-specificity design-system rules.
 */

.hugeicon {
  display: inline-block;
  flex-shrink: 0;
  color: inherit;
}

/* Preflight's [hidden] rule loses to any class that sets display, such as .ui-btn and .ui-toast. */
.ui-root [hidden]:not([hidden="until-found"]) {
  display: none !important;
}

.account-push-toggle > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Shell */

.account-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--bento-radius-sm);
  object-fit: cover;
}

.account-avatar {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 9999px;
  object-fit: cover;
}

.account-team-initials {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--bento-radius-sm);
  background-color: var(--bento-bg-muted);
  color: var(--bento-fg-muted);
  font-size: 10px;
  font-weight: var(--bento-weight-medium);
}

.account-team-menu > summary::-webkit-details-marker,
.account-user-menu > summary::-webkit-details-marker,
.ui-menu-button > summary::-webkit-details-marker {
  display: none;
}

.account-team-menu > summary,
.account-user-menu > summary,
.ui-menu-button > summary {
  list-style: none;
}

/* Team picker: 8px above it and 36px tall, matching the Bento app sidebar's site picker. */
.ui-sidebar-header {
  min-height: 44px;
  padding-top: 8px;
}

.ui-sidebar-header .ui-sidebar-switcher {
  height: 36px;
}

/* In the 40px top bar the picker is 32px with 4px above and below. The mobile drawer's
   top safe-area padding comes from vendor/bento-design (.ui-sidebar at max-width 767px). */
.ui-topbar .ui-sidebar-switcher {
  height: 32px;
  margin-block: 4px;
}

.ui-sidebar .account-drawer-close {
  display: none;
}

@media (max-width: 767px) {
  .ui-sidebar .account-drawer-close {
    display: inline-flex;
  }

  .ui-sidebar .account-sidebar-collapse {
    display: none;
  }
}

.ui-shell.account-shell-bare {
  grid-template-columns: minmax(0, 1fr);
}

/* Project report: a full-height workspace (report plus AI chat) instead of a scrolling page. */
.account-full-bleed {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.account-tv {
  min-height: 100dvh;
  padding: 16px;
}

/* A bare page header before .ui-page existed; the page frame now spaces its children. */
.ui-page > .ui-page-header + .ui-tabs {
  margin-top: -8px;
}

/* Sign in, sign up, and onboarding: the mascot over one card, centered. */
.devise-frame {
  display: flex;
  box-sizing: border-box;
  min-height: 100dvh;
  flex-direction: column;
  background-color: var(--bento-bg);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.devise-box {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 24px 16px;
}

.devise-mascot {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.devise-card-body {
  padding: 32px;
}

@media (max-width: 639px) {
  .devise-frame .devise-box {
    justify-content: flex-start;
    padding: 12px 12px 24px;
  }

  .devise-card-body {
    padding: 20px;
  }
}

/* Tables that are not yet ui-table: the same look (vendor/bento-design .ui-table). */
.ui-root table.account-table:not(.ui-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bento-text-body);
}

.ui-root table.account-table:not(.ui-table) th {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--bento-border);
  color: var(--bento-fg-muted);
  font-size: var(--bento-text-caption);
  font-weight: var(--bento-weight-medium);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ui-root table.account-table:not(.ui-table) td {
  height: 40px;
  padding: 0 12px;
  border-top: 1px solid var(--bento-border-subtle);
}

/* Legacy BT buttons rendered by gem partials match ui-btn-primary and ui-btn. */
.ui-root .button {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--bento-accent-edge);
  border-radius: var(--bento-radius-md);
  background-color: var(--bento-accent);
  color: var(--bento-fg-on-accent);
  font-size: var(--bento-text-body);
  font-weight: var(--bento-weight-medium);
  box-shadow: 0 var(--bento-edge-depth) 0 0 var(--bento-accent-edge);
}

.ui-root .button:hover {
  background-color: var(--bento-accent-hover);
}

.ui-root .button-secondary {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--bento-border-strong);
  border-radius: var(--bento-radius-md);
  background-color: var(--bento-surface);
  color: var(--bento-fg);
  font-size: var(--bento-text-body);
  font-weight: var(--bento-weight-medium);
  box-shadow: 0 var(--bento-edge-depth) 0 0 var(--bento-edge);
}

.ui-root .button-secondary:hover {
  background-color: var(--bento-bg-subtle);
}

/* Charts drawn by Chart.js read their colors from these at render time (app/javascript/support/chart_theme.js). */
html[data-theme] {
  --account-chart-grid: var(--bento-border-subtle);
  --account-chart-tick: var(--bento-fg-subtle);
  --account-chart-delivered: var(--bento-success);
  --account-chart-deferred: var(--bento-warning);
  --account-chart-bounced: var(--bento-danger);
  --account-chart-processed: var(--bento-chart-1);
}

/* Long record names (addresses, URLs, message ids) wrap instead of widening the page. */
.ui-page-title {
  overflow-wrap: anywhere;
}

/* Secondaries hidden on phones can leave the actions row empty; drop it so it adds no gap. */
.ui-page-actions:not(:has(> :not(.hidden):not([hidden]))) {
  display: none;
}

@media (min-width: 640px) {
  .ui-page-actions:has(> .sm\:inline-flex) {
    display: flex;
  }
}

/* Bullet Train date and time pickers (daterangepicker, appended to <body>) on the product tokens. */
.ui-root .daterangepicker {
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius-xl);
  background-color: var(--bento-popover);
  box-shadow: var(--bento-shadow-md);
  color: var(--bento-fg);
  font-family: var(--bento-font-sans);
}

.ui-root .daterangepicker::before,
.ui-root .daterangepicker::after {
  display: none;
}

.ui-root .daterangepicker .calendar-table {
  border: 0;
  background-color: transparent;
}

.ui-root .daterangepicker td.off,
.ui-root .daterangepicker td.off.in-range {
  background-color: transparent;
  color: var(--bento-fg-subtle);
}

.ui-root .daterangepicker td.available:hover,
.ui-root .daterangepicker th.available:hover {
  background-color: var(--bento-fill-hover);
}

.ui-root .daterangepicker td.in-range {
  background-color: var(--bento-accent-subtle);
  color: var(--bento-fg);
}

.ui-root .daterangepicker td.active,
.ui-root .daterangepicker td.active:hover {
  background-color: var(--bento-accent);
  color: var(--bento-fg-on-accent);
}

.ui-root .daterangepicker .calendar-table .next span,
.ui-root .daterangepicker .calendar-table .prev span {
  border-color: var(--bento-fg-muted);
}

.ui-root .daterangepicker .drp-buttons,
.ui-root .daterangepicker .drp-calendar.left {
  border-color: var(--bento-border-subtle);
}

.ui-root .daterangepicker select {
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius-md);
  background-color: var(--bento-surface);
  color: var(--bento-fg);
}

/* Dashboard project cards: Open report is the card's main action. Compliance and Heatmap sit beside it
   when the card is wide enough, and live in the card's menu otherwise. */
.ui-root [data-project-card] {
  container-type: inline-size;
}

.ui-root [data-project-card] .project-card-link {
  display: none;
}

@container (max-width: 359px) {
  .ui-root [data-project-card] .project-card-primary {
    flex: 1 1 auto;
  }
}

@container (min-width: 360px) {
  .ui-root [data-project-card] .project-card-link {
    display: inline-flex;
  }

  .ui-root [data-project-card] .project-card-menu-link {
    display: none;
  }
}

body.ui-root {
  margin: 0;
}

/* Leave room under the last row for the floating Bento Chat support bubble (bottom right). */
.ui-root main.ui-page {
  padding-bottom: 96px;
}