/*
 * Skydancer Marine Web App — UX-WebBeta-B
 *
 * Webapp-specific component styles.
 * Depends on tokens.css (must be linked first), btn-variants.css, nav.css.
 * All served at /webapp/static/css/{tokens|btn-variants|nav}.css.
 *
 * Rule: do not hard-code hex or rgb color values here.
 * All colors use semantic token variables defined in tokens.css.
 * Exception: transparent and currentColor are always permitted.
 */


/* ── RESET ─────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text1);
  line-height: var(--lh-base);
}

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

a:hover {
  text-decoration: underline;
}


/* ── AUTH SCREENS ──────────────────────────────────────────────────────── */

.auth-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.auth-logo {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-logo-sv {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--text3);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.auth-logo-name {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
}

.auth-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0 0 var(--space-2);
}

.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: 0 0 var(--space-6);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--text3);
  font-size: var(--text-xs);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-footer {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text3);
}


/* ── FORM FIELDS ───────────────────────────────────────────────────────── */

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text2);
}

.field-input {
  padding: 10px var(--space-3);
  background: var(--panel-bright);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text1);
  min-height: var(--touch-min);
  transition: border-color var(--transition-fast);
}

.field-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
}

.field-input::placeholder {
  color: var(--text3);
}


/* ── PROVIDER BUTTONS (disabled / gated) ──────────────────────────────── */

.provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: 10px var(--space-4);
  background: var(--panel-bright);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text3);
  cursor: not-allowed;
  opacity: 0.55;
  margin-bottom: var(--space-2);
}

.provider-btn:last-of-type {
  margin-bottom: 0;
}


/* ── FLASH / ALERT MESSAGES ────────────────────────────────────────────── */

.flash-error {
  background: var(--palette-red-a12);
  border: 1px solid var(--palette-red-a15);
  color: var(--brand-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.flash-info {
  background: var(--palette-teal-a08);
  border: 1px solid var(--brand-primary-border);
  color: var(--brand-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}


/* ── PAGE HEADER ───────────────────────────────────────────────────────── */

.page-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0 0 var(--space-1);
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: 0;
}


/* ── EMPTY STATE ───────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  min-height: 320px;
}

.empty-state-body {
  font-size: var(--text-md);
  color: var(--text3);
  max-width: 360px;
  line-height: var(--lh-snug);
}


/* ── AUTH CALLBACK ─────────────────────────────────────────────────────── */

.callback-card {
  max-width: 480px;
  text-align: center;
}

.callback-status {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin-bottom: var(--space-3);
}

.callback-detail {
  font-size: var(--text-sm);
  color: var(--text3);
  margin-bottom: var(--space-6);
  line-height: var(--lh-snug);
}


/* ── TRIAL BANNER ──────────────────────────────────────────────────────── */

.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: var(--palette-teal-a08);
  border-bottom: 1px solid var(--brand-primary-border);
}

.trial-banner-text {
  font-size: var(--text-sm);
  color: var(--brand-primary);
  flex: 1;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: auto;
}


/* ── EMPTY STATE SETUP LINK ────────────────────────────────────────────── */

.empty-state-setup-link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--brand-primary);
  font-weight: var(--fw-medium);
}

.empty-state-setup-link:hover {
  text-decoration: underline;
}


/* ── ONBOARDING INTRO ──────────────────────────────────────────────────── */

.intro-page {
  background: var(--bg);
}

.intro-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
}

.intro-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.intro-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.intro-brand-sv {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--text3);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.intro-brand-name {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text1);
}

.intro-skip-link {
  font-size: var(--text-sm);
  color: var(--text3);
}

.intro-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.intro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--transition-fast);
}

.intro-dot.active {
  background: var(--brand-primary);
}

.intro-viewport {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.intro-track {
  display: flex;
  transition: transform 350ms ease;
  height: 100%;
}

.intro-card {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  gap: var(--space-4);
}

.intro-card-icon {
  width: 80px;
  height: 80px;
  color: var(--brand-primary);
}

.intro-card-icon svg {
  width: 100%;
  height: 100%;
}

.intro-card-headline {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0;
  line-height: var(--lh-snug);
}

.intro-card-body {
  font-size: var(--text-md);
  color: var(--text3);
  margin: 0;
  max-width: 320px;
  line-height: var(--lh-base);
}

.intro-cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
  margin-top: var(--space-2);
}

.intro-setup-link-hint {
  font-size: var(--text-xs);
  color: var(--text3);
  margin: 0;
  line-height: var(--lh-snug);
}

.intro-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  gap: var(--space-3);
}

.intro-prev-btn,
.intro-next-btn {
  min-width: 100px;
}


/* ── ONBOARDING WIZARD ─────────────────────────────────────────────────── */

.wizard-page {
  background: var(--bg);
}

.wizard-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.wizard-header {
  margin-bottom: var(--space-6);
}

.wizard-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0;
}

.wizard-form {
  display: flex;
  flex-direction: column;
}

.wizard-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.typeahead-wrap {
  position: relative;
}

.typeahead-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
}

.typeahead-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  min-height: var(--touch-min);
  justify-content: center;
}

.typeahead-option:hover {
  background: var(--panel-bright);
}

.ta-make-model {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text1);
}

.ta-detail {
  font-size: var(--text-xs);
  color: var(--text3);
}

.field-input--error {
  border-color: var(--brand-danger);
}

.field-input--error:focus {
  box-shadow: 0 0 0 3px var(--palette-red-a15);
}


/* ── MODAL OVERLAY ─────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  padding: var(--space-4);
}

@media (min-width: 480px) {
  .modal-overlay {
    align-items: center;
  }
}

.modal-card {
  background: var(--panel);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0;
}

.modal-body {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: 0;
  line-height: var(--lh-base);
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* ── HYDRATION TRANSITION ──────────────────────────────────────────────── */

.hydration-page {
  background: var(--bg);
}

.hydration-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-8) var(--space-6);
}

.hydration-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.hydration-headline {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0;
}

.hydration-subtext {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: 0;
  line-height: var(--lh-base);
}

.hydration-bar-wrap {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-2);
}

.hydration-bar {
  height: 100%;
  background: var(--brand-primary);
  border-radius: 2px;
  animation: hydration-fill 1.4s ease-in-out forwards;
}

@keyframes hydration-fill {
  from { width: 0; }
  to   { width: 100%; }
}


/* ── HOME SCREEN (WebBeta-D1) ──────────────────────────────────────────── */
/*
 * All colors via token variables (tokens.css).
 * No hardcoded hex, rgb, or hsl values permitted in this section.
 * transparent and currentColor are always permitted.
 */

/* Vessel identity row */

.home-vessel-row {
  padding: var(--space-5) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--border);
  min-height: 72px;
}

.home-vessel-name {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0 0 var(--space-1);
}

.home-vessel-meta {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: 0;
}

.home-vessel-identity[hidden] { display: none; }

/* Skeleton lines */

.home-vessel-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.skeleton-line {
  height: 16px;
  background: var(--border);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  width: 60%;
}

.skeleton-line--wide   { width: 80%; }
.skeleton-line--narrow { width: 40%; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Quick actions */

.home-quick-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-quick-actions::-webkit-scrollbar { display: none; }

.home-quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 80px;
  padding: var(--space-3) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text2);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  text-align: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.home-quick-action-btn:hover {
  background: var(--panel-bright);
  color: var(--brand-primary);
  text-decoration: none;
}

.home-quick-action-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.home-quick-action-icon {
  width: 24px;
  height: 24px;
  color: var(--brand-primary);
}

.home-quick-action-icon svg {
  width: 100%;
  height: 100%;
}

.home-quick-action-label {
  white-space: nowrap;
}

/* Summary grid — desktop two-column, tablet two-column, mobile one-column */

.home-grid,
.home-grid-loading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-8);
}

.home-grid[hidden],
.home-grid-loading[hidden] { display: none; }

/* Cards */

.home-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  min-height: 140px;
}

.home-card--skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

.home-card-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: 0 0 var(--space-3);
}

.home-card-body {
  font-size: var(--text-sm);
  color: var(--text2);
}

/* Status lines */

.home-status-line {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text2);
}

.home-status-label {
  color: var(--text3);
  font-weight: var(--fw-medium);
}

.home-status-empty { color: var(--text3); }

/* MX card */

.home-mx-stat {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text2);
}

.home-mx-overdue { color: var(--brand-danger); }

.home-stat-count {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text1);
}

.home-mx-next,
.home-mx-empty {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text3);
}

/* Crew card */

.home-crew-stat {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text2);
}

.home-crew-pending {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--text3);
}

.home-systems-label {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--text3);
}

.home-systems-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.home-system-item {
  font-size: var(--text-xs);
  color: var(--text2);
}

.home-system-count {
  color: var(--text3);
}

/* Activity card */

.home-activity-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text3);
  line-height: var(--lh-base);
}

.home-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-activity-item {
  font-size: var(--text-sm);
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}

.home-activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.home-activity-date {
  color: var(--text3);
  font-size: var(--text-xs);
  margin-left: var(--space-2);
}

/* API error state */

.home-api-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.home-api-error[hidden] { display: none; }

.home-api-error-msg {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: 0;
}

/* Empty state */

.home-empty-state[hidden] { display: none; }

/* Tablet: 768–1023px — two-column grid still works; side-nav collapses to rail */

@media (max-width: 1023px) and (min-width: 768px) {
  .home-grid,
  .home-grid-loading {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile: < 768px — single column; bottom tab bar active */

@media (max-width: 767px) {
  .home-grid,
  .home-grid-loading {
    grid-template-columns: 1fr;
    padding: var(--space-3) var(--space-4) var(--space-6);
    gap: var(--space-3);
  }

  .home-vessel-row {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .home-quick-actions {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  .home-quick-action-btn {
    min-width: 72px;
    padding: var(--space-2) var(--space-2);
  }
}


/* ── MX SCREEN (WebBeta-D2) ───────────────────────────────────────────────── */
/*
 * All colors via token variables (tokens.css).
 * No hardcoded hex, rgb, or hsl values permitted in this section.
 * transparent and currentColor are always permitted.
 */

/* Page header */

.mx-page-header {
  padding: var(--space-5) var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

.mx-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Summary strip */

.mx-summary-strip {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  flex-wrap: wrap;
}

.mx-summary-strip[hidden] { display: none; }

.mx-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.mx-stat-pill--danger { border-color: var(--brand-danger); }
.mx-stat-pill--warn   { border-color: var(--brand-warning, var(--border)); }
.mx-stat-pill--muted  { opacity: 0.7; }

.mx-stat-count {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text1);
  line-height: 1;
}

.mx-stat-pill--danger .mx-stat-count { color: var(--brand-danger); }

.mx-stat-label {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-top: var(--space-1);
  white-space: nowrap;
}

/* Filter bar */

.mx-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.mx-filter-status-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.mx-status-btn {
  padding: var(--space-1) var(--space-3);
  background: var(--panel);
  border: none;
  border-right: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text2);
  cursor: pointer;
  min-height: var(--touch-min);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mx-status-btn:last-child { border-right: none; }
.mx-status-btn:hover { background: var(--panel-bright); color: var(--brand-primary); }

.mx-status-btn--active {
  background: var(--brand-primary);
  color: var(--palette-neutral-00);
}

.mx-status-btn--active:hover {
  background: var(--brand-primary);
  color: var(--palette-neutral-00);
}

.mx-status-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mx-filter-search-wrap {
  flex: 1;
  min-width: 140px;
}

.mx-search-input {
  width: 100%;
}

.mx-search-input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
}

.mx-filter-dropdowns {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.mx-filter-select {
  min-width: 120px;
}

.mx-filter-select:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
}

/* Content area: desktop two-column list + detail */

.mx-content-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  flex: 1;
}

/* List region */

.mx-list-region {
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.mx-list-loading {
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mx-list-loading[hidden] { display: none; }

.mx-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* API error */

.mx-api-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.mx-api-error[hidden] { display: none; }

.mx-api-error-msg {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: 0;
}

/* MX item list */

.mx-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mx-item-list[hidden] { display: none; }

.mx-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mx-item-row:hover { background: var(--panel-bright); }
.mx-item-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-primary); }

.mx-item-row--selected {
  background: var(--palette-teal-a08);
  border-left: 3px solid var(--brand-primary);
  padding-left: calc(var(--space-6) - 3px);
}

.mx-item-row-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.mx-item-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.mx-item-system {
  font-size: var(--text-xs);
  color: var(--text3);
}

.mx-item-date {
  font-size: var(--text-xs);
  color: var(--text3);
}

.mx-item-updated {
  font-size: var(--text-xs);
  color: var(--text3);
  flex-shrink: 0;
}

/* Priority badge */

.mx-priority-badge {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--panel-bright);
  color: var(--text2);
  border: 1px solid var(--border);
  text-transform: capitalize;
}

.mx-priority-badge--high {
  background: var(--palette-red-a12, var(--panel-bright));
  color: var(--brand-danger);
  border-color: var(--brand-danger);
}

.mx-priority-badge--low { opacity: 0.7; }

/* Status chip */

.mx-status-chip {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--palette-teal-a08);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary-border, var(--border));
  text-transform: capitalize;
}

.mx-status-chip--closed {
  background: var(--panel-bright);
  color: var(--text3);
  border-color: var(--border);
}

/* Empty state */

.mx-empty-state[hidden] { display: none; }

/* Detail panel */

.mx-detail-panel {
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}

.mx-detail-panel[hidden] { display: none; }

.mx-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.mx-detail-close-btn {
  background: none;
  border: none;
  font-size: var(--text-lg);
  color: var(--text3);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  font-family: var(--font-sans);
}

.mx-detail-close-btn:hover { color: var(--text1); }
.mx-detail-close-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.mx-detail-status-actions {
  display: flex;
  gap: var(--space-2);
}

.mx-detail-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text1);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-snug);
}

.mx-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mx-detail-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.mx-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  min-width: 80px;
}

.mx-detail-value {
  color: var(--text2);
  font-size: var(--text-sm);
}

.mx-detail-notes {
  margin-bottom: var(--space-4);
}

.mx-detail-notes-text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text2);
  line-height: var(--lh-base);
  white-space: pre-wrap;
}

.mx-detail-assignees {
  margin-bottom: var(--space-4);
}

.mx-assignee-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mx-assignee-item {
  font-size: var(--text-sm);
  color: var(--text2);
}

.mx-detail-notification-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--panel-bright);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.mx-detail-deferred-note {
  font-size: var(--text-xs);
  color: var(--text3);
}

/* Work log */

.mx-detail-worklog {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.mx-worklog-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mx-worklog-entry {
  background: var(--panel-bright);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.mx-worklog-body {
  font-size: var(--text-sm);
  color: var(--text1);
  margin: 0 0 var(--space-1);
  white-space: pre-wrap;
}

.mx-worklog-meta {
  font-size: var(--text-xs);
  color: var(--text3);
}

.mx-worklog-empty {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: var(--space-2) 0 0;
}

/* Work log form */

.mx-worklog-form-wrap {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.mx-worklog-heading {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text2);
  margin: 0 0 var(--space-3);
}

.mx-worklog-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mx-worklog-textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
}

.mx-worklog-textarea:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
}

.mx-worklog-error[hidden] { display: none; }

/* Add modal card */

.mx-add-modal-card {
  max-width: 480px;
}

.mx-add-form .field-group {
  margin-bottom: var(--space-4);
}

.mx-add-error[hidden] { display: none; }

/* Tablet: 768–1023px */

@media (max-width: 1023px) and (min-width: 768px) {
  .mx-content-area {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile: < 768px — single column */

@media (max-width: 767px) {
  .mx-content-area {
    grid-template-columns: 1fr;
  }

  .mx-list-region {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .mx-filter-bar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  .mx-filter-dropdowns {
    width: 100%;
  }

  .mx-filter-select {
    flex: 1;
    min-width: 0;
  }

  .mx-filter-search-wrap {
    min-width: 100%;
    order: -1;
  }

  .mx-page-header {
    padding: var(--space-4) var(--space-4) 0;
  }

  .mx-header-row {
    margin-bottom: var(--space-3);
  }

  .mx-item-row {
    padding: var(--space-3) var(--space-4);
  }

  .mx-item-row--selected {
    padding-left: calc(var(--space-4) - 3px);
  }

  .mx-detail-panel {
    padding: var(--space-4) var(--space-4);
  }
}