/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --color-navy: #0b1f3a;
  --color-navy-dark: #071429;
  --color-primary: #1d63ed;
  --color-primary-dark: #124fc4;
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-text: #1a2233;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 10px;
  --shadow-card: 0 20px 45px -20px rgba(11, 31, 58, 0.35);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin: 0 0 0.5rem;
}

/* ---------- Auth pages (sign in / forgot password / reset password / accept invite) ---------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at top left, var(--color-navy) 0%, var(--color-navy-dark) 60%);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 40px 36px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.auth-brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  flex-shrink: 0;
}

.auth-brand__name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.auth-card h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

.auth-card__subtitle {
  color: var(--color-muted);
  font-size: 0.925rem;
  margin-bottom: 24px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="file"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 99, 237, 0.15);
}

/* Chip-based multi-select (multi_select_controller.js). The control mimics a text input so it
   sits flush with the fields around it; the real `<select multiple>` inside is hidden by the
   controller and only submits. Without JS the native select shows instead, which is why there's
   no `display: none` on it here. */
.multi-select {
  position: relative;
}

.multi-select__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.multi-select:focus-within .multi-select__control {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 99, 237, 0.15);
}

.multi-select__chips {
  display: contents;
}

.multi-select__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 50px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  line-height: 1.3;
}

.multi-select__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.multi-select__chip-remove:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.multi-select__empty {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Selector is `.field input.multi-select__input` to match the specificity of the shared
   `.field input[type="text"]` rule above, which would otherwise give this a border, padding and
   background of its own and make it look like a second input inside the control.
   Flexes to fill the row it lands on, so the caret sits after the last chip rather than on a line
   of its own, but stays wide enough to type into when chips already fill the row. */
.field input.multi-select__input {
  flex: 1 1 120px;
  min-width: 120px;
  border: 0;
  outline: none;
  /* The focus ring belongs on the whole control (see :focus-within above), not on the bare input
     sitting inside it — `.field input:focus` would otherwise draw a second ring within the first. */
  box-shadow: none;
  padding: 4px 0;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: transparent;
}

/* Absolute so opening the list doesn't shove the rest of the (already long) segment form down. */
.multi-select__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.multi-select__option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.multi-select__option:hover,
.multi-select__option:focus {
  background: var(--color-bg);
}

.multi-select__no-match {
  margin: 0;
  padding: 10px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Fallback for a no-JS page: `.field select` above sets a single-line control's vertical padding,
   which on a `multiple` select indents every option and clips the last visible row. */
.field select[multiple] {
  height: auto;
  padding: 4px;
}

.field select[multiple] option {
  padding: 6px 10px;
  border-radius: 5px;
}

.field textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
}

/* Position fields hold a short number (e.g. "0"–"20"), not prose — full-width like every other
   text field/select looks oversized. `width: 100%` (inherited from the shared rule above) keeps
   it scaling down inside a narrow block (e.g. a nested-row grid cell), capped at 100px so it
   doesn't stretch to fill a wide one. */
.field--position input[type="number"] {
  max-width: 100px;
}

.field input[readonly] {
  background: var(--color-bg);
  color: var(--color-muted);
}

.field__hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 6px;
}

.field__hint--error {
  color: var(--color-danger);
}

.required-marker {
  color: var(--color-danger);
  margin-left: 3px;
}

.field--invalid input,
.field--invalid select,
.field--invalid trix-editor {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px var(--color-danger-bg) !important;
}

.nested-block--invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px var(--color-danger-bg) !important;
}

.thumb-preview {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-preview i {
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 0.85);
}

.required-asterisk {
  color: var(--color-danger);
}

.company-logo-preview {
  max-width: 160px;
  max-height: 80px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px;
  background: var(--color-surface);
}

.field__image-preview {
  display: block;
  max-width: 320px;
  max-height: 180px;
  margin-top: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px;
  background: var(--color-surface);
  object-fit: contain;
}

.field__error {
  font-size: 0.8rem;
  color: var(--color-danger);
  margin-top: 6px;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn:hover {
  background: var(--color-primary-dark);
}

.btn--secondary {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-danger-bg);
  text-decoration: none;
}

.btn--small {
  width: auto;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.btn--medium {
  width: auto;
  padding: 10px 22px;
  font-size: 0.9rem;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.auth-links {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.auth-links--center {
  justify-content: center;
}

.flash {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.875rem;
  margin-bottom: 18px;
}

.flash--notice {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.flash--alert {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.error-summary {
  background: var(--color-danger-bg);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  color: var(--color-danger);
  font-size: 0.875rem;
}

.error-summary p {
  margin: 0 0 6px;
  font-weight: 600;
}

.error-summary ul {
  margin: 0;
  padding-left: 18px;
}

/* ---------- Dashboard chrome (header + content) ---------- */

.app-header {
  background: var(--color-navy);
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Mobile nav toggle — only ever visible below the 768px breakpoint (see the media query at the
   bottom of this file), so it's inert chrome on desktop where the sidebar is always shown. */
.sidebar-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.app-header__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45vw;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.app-header__brand .auth-brand__mark {
  width: 28px;
  height: 28px;
}

.app-header__user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.875rem;
}

/* Super-admin-only "viewing company" switcher — appears first in the markup (see
   application.html.erb), but `order` moves it after .app-header__user's other flex items
   (email/role-badge/sign-out, all default `order: 0`) so it renders on the right without
   reordering the HTML itself. */
.company-switcher {
  order: 1;
}

/* Desktop/tablet only: splits .app-header__user into two clusters — email + role-badge on the
   left, company-switcher + sign-out on the right — via explicit `order` plus `margin-left: auto`
   on the first "right" item (pushes it and everything after it away from the left cluster).
   Mobile (see max-width: 768px below) keeps its own stacked/centered layout untouched. */
@media (min-width: 769px) {
  /* .sidebar-toggle-btn is `display: none` at this width, leaving .app-header__user as the ONLY
     flex item in .app-header — .app-header's `justify-content: space-between` has nothing to
     space against then, so .app-header__user just sits shrink-to-fit at the left, and everything
     below (order/margin-left: auto) only repositions content within that small left-sitting box
     rather than actually reaching the header's right edge. `flex: 1` makes it fill the row. */
  .app-header__user {
    flex: 1;
  }

  .app-header__email {
    order: 1;
  }

  .role-badge {
    order: 2;
  }

  .company-switcher {
    order: 3;
  }

  /* Default: no company-switcher in the DOM (every role except super_admin), so Sign out is the
     only "right cluster" item — push it to the header's right edge itself. */
  .sign-out-form {
    order: 4;
    margin-left: auto;
  }

  /* super_admin: the switcher is present. Move the push onto .company-switcher instead so it
     lands immediately to the left of Sign out (both clustered on the right) — leaving the push
     on .sign-out-form here too would split the free space between the two and strand the
     switcher back next to .role-badge. */
  .app-header__user:has(.company-switcher) .company-switcher {
    margin-left: auto;
  }

  .app-header__user:has(.company-switcher) .sign-out-form {
    margin-left: 0;
  }
}

.role-badge {
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Matches .app-header__user's other controls: .role-badge's translucent-on-navy background and
   .btn--small's compact padding/font-size, since the switcher sits in that same row. */
.company-switcher__select {
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
}

.company-switcher__select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
}

.company-switcher__select option {
  color: var(--color-text);
  background: var(--color-surface);
}

.app-header a {
  color: #fff;
}

.app-shell {
  display: flex;
  align-items: stretch;
}

.app-sidebar {
  width: 220px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--color-navy-dark);
  padding: 16px 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}

.app-sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, other WebKit/Blink browsers */
}

.sidebar-close-btn {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

.sidebar-close-btn {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

.sidebar-close-btn {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav__item {
  margin: 2px 12px;
}

.sidebar-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  font-weight: 500;
}

.sidebar-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.sidebar-nav__item.is-active .sidebar-nav__link {
  background: var(--color-primary);
  color: #fff;
}

.sidebar-nav__link svg {
  flex-shrink: 0;
}

.sidebar-nav__heading {
  margin: 16px 12px 4px;
  padding: 0 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.app-shell__content {
  flex: 1;
  min-width: 0;
}

.app-main {
  max-width: 960px;
  padding: 32px 24px 64px;
}

.action-icons {
  display: flex;
  gap: 6px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}

.icon-btn:hover {
  text-decoration: none;
}

.icon-btn--show:hover {
  color: var(--color-muted);
  border-color: var(--color-muted);
}

.icon-btn--edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.icon-btn--delete {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-bg);
  color: var(--color-danger);
}

.icon-btn--delete:hover {
  color: #fff;
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  /* Every admin index/show table (team-table) sits directly inside a .card with no wrapper of
     its own — scrolling the card horizontally, rather than editing every view to add a
     dedicated wrapper div, is what keeps a many-column table from blowing out the layout on a
     narrow viewport. Harmless at any width wider than its content. */
  overflow-x: auto;
}

.card h2 {
  font-size: 1.15rem;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.card__header h2 {
  margin: 0;
}

.search-form {
  display: flex;
  align-items: stretch;
}

.search-form__field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 0 12px;
  background: var(--color-surface);
}

.search-form__field:focus-within {
  border-color: var(--color-primary);
}

.search-form__icon {
  display: inline-flex;
  color: var(--color-muted);
}

.search-form__input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  min-width: 200px;
  padding: 8px 0;
  color: var(--color-text);
}

.search-form__input::placeholder {
  color: var(--color-muted);
}

.search-form__submit {
  border: 1px solid var(--color-border);
  border-radius: 0 6px 6px 0;
  background: var(--color-surface);
  color: var(--color-muted);
  padding: 0 18px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.search-form__submit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.stat-tile__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
}

.stat-tile__label {
  color: var(--color-muted);
  font-size: 0.85rem;
}

table.team-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.team-table th,
table.team-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

table.team-table th {
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-pill--accepted {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-pill--pending {
  background: #fffbeb;
  color: #b45309;
}

.status-pill--inactive {
  background: var(--color-border);
  color: var(--color-muted);
}

/* Kaminari's default view templates (app/views/kaminari/*.html.erb) — .page/.next/.prev/.first/
   .last/.gap are the classes those partials render, not something chosen here. */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 0.85rem;
}

.pagination .page,
.pagination .next,
.pagination .prev,
.pagination .first,
.pagination .last {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-text);
}

.pagination .page a,
.pagination .next a,
.pagination .prev a,
.pagination .first a,
.pagination .last a {
  color: inherit;
}

.pagination .page:hover,
.pagination .next:hover,
.pagination .prev:hover,
.pagination .first:hover,
.pagination .last:hover {
  background: var(--color-bg);
  text-decoration: none;
}

.pagination .page.current {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.pagination .gap {
  color: var(--color-muted);
}

.invite-form {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.invite-form .field {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}

.invite-form .btn {
  width: auto;
  padding: 11px 20px;
}

.admin-readonly-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.9rem;
}

.admin-readonly-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
}

.admin-email-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-email-row input {
  flex: 1;
}

.add-admin-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 4px;
}

.nested-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
  background: var(--color-bg);
}

.nested-block h3 {
  font-size: 0.95rem;
  margin: 0 0 12px;
}

.nested-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  align-items: end;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--color-surface);
}

/* Rows with a multi-line field. The auto-fit columns above split evenly, so a textarea sharing a
   row with three short inputs gets a fifth of the width and truncates all of them; this stacks
   the row instead and lets the wide field have the full width. `align-items: start` because the
   `end` alignment above pins every cell to the bottom of the tallest one, which reads as
   misaligned labels once a cell is several lines tall. */
/* Doubled class for specificity: the responsive override at the bottom of this file also targets
   `.nested-row` and comes later, so a single class here would lose the column count on small
   screens — exactly where a stacked row matters most. */
.nested-row.nested-row--stacked {
  grid-template-columns: 1fr;
  align-items: start;
}

/* Flex rather than the grid above: a position field holds one or two digits and its input is
   capped at 100px anyway, so an equal grid track leaves dead space beside it and truncates the
   text fields sharing the row. Here it takes only what it needs and the rest split the remainder.
   `min-width: 0` because flex items default to their content's intrinsic width, which would push
   a long placeholder past its share. */
.nested-row__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.nested-row__fields > .field {
  flex: 1 1 140px;
  min-width: 0;
}

.nested-row__fields > .field--position {
  flex: 0 0 100px;
}

/* The row is a single full-width column, so a stretched grid item would make the Remove button
   as wide as the row. */
.nested-row--stacked > .btn {
  justify-self: start;
}

/* `.nested-row`'s `display: grid` has the same specificity as the UA's `[hidden] { display:
   none }` and comes later in the cascade, so it wins — setting `row.hidden = true` (used by
   nested_fields_controller.js to hide a removed, DB-persisted row) had no visual effect without
   this override. */
.nested-row[hidden] {
  display: none;
}

.nested-row .field {
  margin-bottom: 0;
}

/* The category/exceptions machine pickers (_segment_item_fields.html.erb) sit as two stacked
   `.field`s inside one wrapper div (both share a multi_select_controller instance — see its
   comment). `.nested-row .field`'s margin-bottom: 0 above strips their normal field spacing since
   they're not columns in a gapped grid/flex row like the fields above them, so this restores
   breathing room between them and around the group as a whole. */
.nested-row__machines {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.nested-row__machines .field__hint {
  margin-bottom: 8px;
}

.settings-entry {
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--color-surface);
}

.settings-entry__actions,
.settings-group__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.settings-row__value {
  grid-column: 1 / -1;
}

.settings-row__value trix-editor {
  min-height: 90px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.settings-row__value textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  resize: vertical;
}

.settings-image-preview {
  display: block;
  max-width: 160px;
  max-height: 100px;
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px;
  background: var(--color-surface);
}

.settings-summary-group {
  margin-bottom: 18px;
}

.settings-summary-group h3 {
  font-size: 0.95rem;
  margin: 0 0 8px;
}

.settings-summary-entry {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--color-bg);
}

.settings-summary-entry dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-top: 8px;
}

.settings-summary-entry dt:first-child {
  margin-top: 0;
}

.settings-summary-entry dd {
  margin: 2px 0 0;
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .auth-card {
    padding: 28px 22px;
  }
}

/* ---------- Admin dashboard responsive layout ---------- */

@media (max-width: 768px) {
  .app-header {
    padding: 12px 16px;
  }

  .sidebar-toggle-btn {
    display: inline-flex;
  }

  .app-header__user {
    flex-wrap: wrap;
    /* `center`, not flex-start/flex-end: this row's content (email/role-badge/sign-out) doesn't
       fill the row's full width, so pinning it to either edge leaves a big gap on the opposite
       side. Centering guarantees the left and right gaps stay equal regardless of content
       width. */
    justify-content: center;
    /* Without this, .app-header__user only ever grows as wide as its widest row (shrink-to-fit),
       so the switcher's `width: 100%` below would be 100% of that narrower box, not the header's
       full inner width — leaving unequal left/right padding against .app-header's own 16px
       padding. Forcing it to the full row width makes both sides symmetric. */
    width: 100%;
  }

  /* Drops to its own full-width row under email/role-badge/sign-out rather than squeezing into
     whatever horizontal space is left (same "stack instead of squeeze" pattern already used by
     .invite-form/.form-actions below at this breakpoint). */
  .company-switcher {
    flex: 1 1 100%;
  }

  .company-switcher__select {
    width: 100%;
  }

  .app-shell {
    position: relative;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-card);
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 12px 12px auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(7, 20, 41, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .sidebar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .app-main {
    padding: 20px 16px 48px;
  }

  .card {
    padding: 18px;
  }

  .nested-row {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .search-form {
    flex-wrap: wrap;
  }

  .search-form__field {
    border-radius: 6px;
    border-right: 1px solid var(--color-border);
    flex: 1;
  }

  .search-form__submit {
    border-radius: 6px;
    margin-top: 8px;
    width: 100%;
  }

  .invite-form {
    flex-direction: column;
    align-items: stretch;
  }

  .invite-form .btn {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .app-header__user {
    gap: 8px;
  }

  .app-header__email {
    max-width: 38vw;
  }

  .company-switcher__select {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* Trix / Action Text — overrides actiontext.css's hardcoded colors with the app's own field
   styling (CSS custom properties), so it follows the same visual language as every other input,
   and would automatically pick up a future dark theme the same way the rest of the form does.
   `!important` on every property actiontext.css also sets: both stylesheets target the exact
   same selectors at equal specificity, so without it the winner is whichever file Propshaft's
   `stylesheet_link_tag :app` happens to bundle last (alphabetical by filename) — fragile, and
   silently reversible by adding/renaming any future stylesheet. `!important` makes this app's
   styling win deterministically, on every trix-toolbar instance (any rich_text_area, on any
   current or future page), independent of bundling order. */
trix-toolbar {
  margin-bottom: 6px;
}

trix-toolbar .trix-button-group {
  border-color: var(--color-border) !important;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}

trix-toolbar .trix-button {
  color: var(--color-muted) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left-color: var(--color-border) !important;
}

trix-toolbar .trix-button:hover:not(:disabled) {
  color: var(--color-primary) !important;
}

trix-toolbar .trix-button.trix-active {
  background: var(--color-primary) !important;
  color: #fff !important;
}

trix-toolbar .trix-dialog {
  background: var(--color-surface) !important;
  border-top-color: var(--color-primary) !important;
  box-shadow: var(--shadow-card) !important;
}

trix-toolbar .trix-input--dialog {
  border-color: var(--color-border) !important;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

trix-editor {
  min-height: 8em;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}

trix-editor:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 99, 237, 0.15);
}

.trix-content {
  color: var(--color-text);
  font-size: 0.95rem;
}

.trix-content h1,
.trix-content h2,
.trix-content h3 {
  margin-bottom: 0.5em;
  color: var(--color-navy);
}

.trix-content p,
.trix-content ul,
.trix-content ol,
.trix-content pre,
.trix-content blockquote {
  margin-bottom: 0.75em;
}

.trix-content blockquote {
  border-color: var(--color-border);
  color: var(--color-muted);
}

.trix-content a {
  color: var(--color-primary);
}

/* Navigation tree — recursive, unlimited-depth nav item hierarchy. */
.nav-tree,
.nav-tree__children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-tree__children {
  margin: 6px 0 0 20px;
  padding-left: 16px;
  border-left: 2px solid var(--color-border);
}

.nav-tree__item {
  margin-bottom: 6px;
}

.nav-tree__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.nav-tree__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.nav-tree__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Drag-to-reorder (sortable_controller.js). The handle is purely visual — the whole `.nav-tree__
   item` is draggable (see _node.html.erb's comment on why that's fine for click-vs-drag). */
.nav-tree__handle {
  display: inline-flex;
  color: var(--color-muted);
  cursor: grab;
}

.nav-tree__item--dragging {
  opacity: 0.4;
}

/* Shown on the row a dragged item is currently hovering over, indicating which side it will land
   on if dropped now — a 2px accent bar so it doesn't shift the row's own height/padding. */
.nav-tree__item--drop-before > .nav-tree__row {
  box-shadow: 0 -2px 0 0 var(--color-primary);
}

.nav-tree__item--drop-after > .nav-tree__row {
  box-shadow: 0 2px 0 0 var(--color-primary);
}