:root {
  color-scheme: dark;
  /* Lifted off near-black for calmer text contrast (parity with calops-ui) */
  --bg-primary: #101216;
  --bg-secondary: #1c1e22;
  --bg-tertiary: #17191d;
  --bg-card: #212327;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --accent-blue: #4a9eff;
  --accent-blue-dark: #2d6fc7;
  --accent-blue-hover: #2563eb;
  --accent-glow: rgba(74, 158, 255, 0.3);
  --accent-red: #ff4a4a;
  --accent-red-dark: #cc2d2d;
  --accent-green: #22c55e;
  --accent-green-dark: #16a34a;
  --accent-orange: #f59e0b;
  --accent-orange-dark: #d97706;
  --accent-purple: #9b59b6;
  --accent-purple-dark: #7c3aed;
  --border: #333333;
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  --radius: 18px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-accent="blue"] {
  --accent-blue: #4a9eff;
  --accent-blue-dark: #2d6fc7;
  --accent-blue-hover: #2563eb;
  --accent-glow: rgba(74, 158, 255, 0.3);
}

body[data-accent="red"] {
  --accent-blue: #ff4a4a;
  --accent-blue-dark: #cc2d2d;
  --accent-blue-hover: #e11d48;
  --accent-glow: rgba(255, 74, 74, 0.3);
}

body[data-accent="orange"] {
  --accent-blue: #f59e0b;
  --accent-blue-dark: #d97706;
  --accent-blue-hover: #ea580c;
  --accent-glow: rgba(245, 158, 11, 0.3);
}

body[data-accent="green"] {
  --accent-blue: #22c55e;
  --accent-blue-dark: #16a34a;
  --accent-blue-hover: #15803d;
  --accent-glow: rgba(34, 197, 94, 0.3);
}

body[data-accent="purple"] {
  --accent-blue: #a855f7;
  --accent-blue-dark: #7c3aed;
  --accent-blue-hover: #8b5cf6;
  --accent-glow: rgba(168, 85, 247, 0.3);
}

body.theme-light {
  color-scheme: light;
  --bg-primary: #f6f7fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --text-primary: #111111;
  --text-secondary: #4b5563;
  --border: #e5e7eb;
  --shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100vh;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}

.tenant-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.tenant-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-sep {
  color: var(--border);
  font-size: 0.85rem;
  font-weight: 300;
  user-select: none;
}

.platform-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

.platform-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── ARP Text Brand (Orbitron) ─────────────────────────────────────────────── */
.arp-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.arp-brand-apex {
  color: #ffffff;
}
.arp-brand-rp {
  font-size: 0.52rem;
  background: linear-gradient(to right, #A7A7A7, #E6E6E6, #A7A7A7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.client-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.client-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
  filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1234%) hue-rotate(196deg) brightness(100%) contrast(101%);
}

.client-name {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 600;
  color: var(--text-primary);
}

@media (max-width: 600px) {
  .hero {
    gap: 8px;
  }

  .client-card {
    flex-direction: row;
    gap: 12px;
  }

  .client-logo {
    width: 50px;
    height: 50px;
  }

  .client-name {
    font-size: 16px;
  }
}

.login {
  display: grid;
  justify-content: center;
  margin-top: 40px;
}

.panel {
  width: min(420px, 90vw);
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel h2 {
  margin-top: 0;
}

label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  font-weight: 500;
}

input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

button {
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: var(--accent-blue);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px var(--accent-glow);
  background: var(--accent-blue-dark);
}

button.ghost {
  background: transparent;
  color: var(--accent-blue);
  border: 1px solid var(--border);
  box-shadow: none;
}

button.ghost:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
}

button.danger {
  background: var(--accent-red);
}

button.danger:hover {
  background: var(--accent-red-dark);
  box-shadow: 0 10px 20px rgba(255, 74, 74, 0.3);
}

#cancel-event-booking-btn {
  background: linear-gradient(180deg, #ff5b5b 0%, #d62f2f 100%);
  border: 1px solid rgba(255, 120, 120, 0.45);
  box-shadow: 0 10px 24px rgba(214, 47, 47, 0.28);
}

#cancel-event-booking-btn:hover {
  background: linear-gradient(180deg, #ff7373 0%, #bf2323 100%);
  border-color: rgba(255, 140, 140, 0.55);
  box-shadow: 0 12px 28px rgba(214, 47, 47, 0.36);
}

button.ghost.danger {
  background: transparent;
  color: #ef4444;
}

button.ghost.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  box-shadow: none;
}

.customer-edit-form {
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  margin-bottom: 16px;
}

.customer-edit-form .event-form-group {
  margin-bottom: 12px;
}

.layout-designer-content {
  max-width: 1100px;
  width: 95vw;
  padding: 0;
}

.layout-designer-grid {
  display: grid;
  grid-template-columns: 280px 1fr 220px;
  gap: 16px;
  padding: 16px;
}

.layout-sidebar,
.layout-properties {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  height: 100%;
  overflow-y: auto;
}

.layout-section {
  margin-bottom: 20px;
}

.layout-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
}

.layout-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.layout-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.layout-library-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.layout-library-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.layout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layout-list-section {
  display: grid;
  gap: 10px;
}

.layout-list-section+.layout-list-section {
  margin-top: 16px;
}

.layout-list-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  margin: 6px 2px 0;
}

.layout-list-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
}

.layout-list-item.active {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

.layout-list-item img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
}

.layout-thumb-placeholder {
  width: 70px;
  height: 50px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.layout-list-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.layout-list-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.layout-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.layout-list-action {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.layout-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.layout-palette button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.layout-canvas-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.layout-toolbar-group {
  min-width: 120px;
}

.layout-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.layout-canvas-wrapper {
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 12px;
}

#layout-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 8px;
}

.layout-email-panel {
  display: flex;
  gap: 8px;
  align-items: center;
}

.layout-designer-teaser {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-color: rgba(56, 189, 248, 0.38);
  background: linear-gradient(90deg, rgba(14, 116, 144, 0.16), rgba(79, 70, 229, 0.12));
  box-shadow: none;
}

.layout-designer-teaser p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.layout-designer-teaser strong {
  color: var(--text-primary);
}

.layout-designer-teaser-mark {
  color: #67e8f9;
  font-size: 1rem;
}

.layout-upgrade-message {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  padding: 12px;
  border-radius: 12px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.layout-upgrade-link {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 600;
}

.layout-attach-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.layout-attach-item {
  display: grid;
  grid-template-columns: 24px 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.layout-attach-open {
  justify-self: end;
}

.layout-attach-thumb img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.layout-attach-thumb .layout-thumb-placeholder {
  width: 80px;
  height: 60px;
}

.layout-attach-name {
  font-weight: 600;
}

.layout-attach-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Layout Designer Page (full workspace) */
.layout-page {
  width: 100%;
  max-width: none;
  padding: 18px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.layout-surface {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
}

.layout-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.layout-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--accent-blue);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
}

.layout-back:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
}

.layout-tenant {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.layout-tenant-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.layout-tenant-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.layout-tenant-name {
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-tenant-meta {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.layout-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.layout-status {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.layout-status[data-tone="ok"] {
  color: var(--accent-green);
  border-color: rgba(34, 197, 94, 0.35);
}

.layout-status[data-tone="warn"] {
  color: var(--accent-orange);
  border-color: rgba(245, 158, 11, 0.35);
}

.layout-status[data-tone="error"] {
  color: var(--accent-red);
  border-color: rgba(255, 74, 74, 0.35);
}

.layout-upgrade {
  padding: 26px 24px;
}

.layout-upgrade h2 {
  margin: 0 0 8px;
}

.layout-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.layout-toolbelt {
  position: relative;
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}

.layout-workflow-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.05), rgba(148, 163, 184, 0.02));
}

.layout-workflow-left,
.layout-workflow-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.layout-segmented button {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.layout-segmented button[aria-pressed="true"] {
  border-color: rgba(74, 158, 255, 0.65);
  background: rgba(74, 158, 255, 0.12);
  color: var(--accent-blue);
}

.layout-save-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.04);
  font-size: 0.82rem;
  font-weight: 700;
}

.layout-save-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.65);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.layout-save-state[data-tone="ok"]::before {
  background: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.layout-save-state[data-tone="warn"]::before {
  background: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.layout-save-state[data-tone="error"]::before {
  background: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(255, 74, 74, 0.16);
}

.layout-save-banner {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  gap: 10px;
  max-width: min(260px, calc(100% - 36px));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(74, 158, 255, 0.2);
  background: rgba(13, 18, 26, 0.92);
  box-shadow: 0 16px 32px rgba(4, 8, 14, 0.24);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  text-align: right;
}

.layout-save-banner.is-visible {
  opacity: 0.9;
  transform: translateY(0);
}

.layout-save-banner-title {
  font-weight: 700;
}

.layout-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(74, 158, 255, 0.22);
  background: rgba(74, 158, 255, 0.05);
}

.layout-selection-summary-text {
  font-weight: 700;
  color: var(--text-secondary);
}

.layout-selection-summary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.04);
}

.layout-context-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-context-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-context-actions button {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.layout-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 14px;
}

.layout-stage.layout-stage-sidebar-hidden {
  grid-template-columns: 1fr;
}

.layout-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.layout-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.layout-sidebar-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.layout-sidebar-body {
  padding: 14px 16px;
  overflow: auto;
  display: grid;
  gap: 12px;
}

.layout-placement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(74, 158, 255, 0.35);
  background: rgba(74, 158, 255, 0.12);
}

.layout-placement-text {
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 0;
}

.layout-placement-text span.muted {
  font-weight: 500;
  margin-left: 6px;
}

.layout-palette-grid-sidebar .palette-group-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-palette-grid-sidebar .palette-card {
  padding: 8px;
}

.layout-palette-grid-sidebar .palette-card-thumb {
  height: 56px;
  margin-bottom: 8px;
}

.layout-palette-grid-sidebar .palette-card-thumb img {
  object-fit: contain;
  object-position: center;
}

.layout-palette-grid-sidebar .palette-card-meta {
  display: none;
}

.layout-toolbelt-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.layout-toolbelt-row-email {
  align-items: center;
}

.layout-toolbelt-grow {
  flex: 1;
  min-width: 180px;
}

.layout-toolbelt-group {
  min-width: 130px;
}

.layout-toolbelt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.layout-toolbelt-actions button {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.layout-toolbelt-group-actions {
  min-width: 0;
}

.layout-button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.layout-button-row button {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.layout-mode {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-toolbelt-more {
  display: none;
}

.layout-toolbelt-more summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--accent-blue);
  background: transparent;
}

.layout-toolbelt-more summary:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
}

.layout-toolbelt-more summary::-webkit-details-marker {
  display: none;
}

.layout-toolbelt-row-more {
  margin-top: 12px;
}

.layout-toolbelt-row-inline {
  display: flex;
}

.layout-toolbelt-row-inline button.is-active,
.layout-toolbelt-row-more button.is-active,
.layout-canvas-toolbar button.is-active {
  border-color: rgba(74, 158, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.25);
}

.layout-canvas-toolbar {
  display: none;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
}

.layout-canvas-toolbar .layout-button-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.layout-canvas-toolbar .layout-button-row::-webkit-scrollbar {
  height: 6px;
}

.layout-canvas-toolbar .layout-button-row::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

.layout-canvas-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.layout-canvas-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.layout-canvas-hint {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.layout-palette-strip {
  display: none;
  width: 100%;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px;
  scroll-snap-type: x mandatory;
}

.layout-stage-sidebar-hidden .layout-canvas-meta {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.layout-stage-sidebar-hidden .layout-palette-strip {
  display: flex;
}

.layout-palette-strip::-webkit-scrollbar {
  height: 8px;
}

.layout-palette-strip::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

.palette-strip-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: 46px auto;
  gap: 6px;
  width: 64px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  scroll-snap-align: start;
}

.palette-strip-card:active {
  transform: scale(0.99);
}

.palette-strip-thumb {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.05);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.palette-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.palette-strip-name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.layout-canvas-wrapper {
  flex: 1;
  min-height: 0;
  padding: 0;
}

#layout-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: white;
}

.layout-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(420px, 92vw);
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  z-index: 250;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  animation: drawerInRight 0.18s ease-out;
}

#layout-drawer-properties {
  top: auto;
  right: auto;
  left: 16px;
  bottom: 16px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, 60vh);
  border: 1px solid var(--border);
  border-radius: 18px;
  animation: none;
}

#layout-drawer-properties .layout-drawer-header {
  padding: 12px 14px;
}

#layout-drawer-properties .layout-drawer-body {
  padding: 14px;
}

#layout-drawer-properties .layout-property {
  margin-bottom: 12px;
}

.layout-placement-banner-inline {
  max-width: 420px;
}

.layout-mobile-sheet-tabs {
  display: none;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-mobile-sheet-tabs button[aria-pressed="true"] {
  border-color: rgba(74, 158, 255, 0.65);
  background: rgba(74, 158, 255, 0.12);
  color: var(--accent-blue);
}

.layout-palette-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.layout-palette-filters button {
  min-width: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding-inline: 10px;
}

.layout-palette-filters button.is-active {
  border-color: rgba(74, 158, 255, 0.65);
  background: rgba(74, 158, 255, 0.12);
  color: var(--accent-blue);
}

.layout-palette-filters select {
  grid-column: 1 / -1;
  min-width: 0;
}

.layout-canvas-wrapper {
  position: relative;
}

.layout-marquee-box {
  position: absolute;
  border: 1.5px solid rgba(37, 99, 235, 0.9);
  background: rgba(37, 99, 235, 0.12);
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
}

.layout-selection-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100% - 28px);
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.84);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}

.layout-selection-hud button {
  border-radius: 10px;
}

.layout-legend-card {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  max-width: 220px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  font-size: 0.78rem;
  color: #1f2937;
  pointer-events: none;
  user-select: none;
}

.layout-legend-card[hidden] {
  display: none;
}

.layout-legend-card-header {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

.layout-legend-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.layout-legend-card-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.layout-legend-card-list svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #475569;
}

.layout-legend-card-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-legend-card-count {
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.layout-help-inline {
  border: 1px solid rgba(74, 158, 255, 0.2);
  background: rgba(74, 158, 255, 0.04);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.layout-help-inline-title {
  font-weight: 700;
}

.layout-help-inline-body {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.layout-version-history {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--bg-secondary);
  margin-bottom: 14px;
  display: grid;
  gap: 10px;
}

.layout-version-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.layout-version-history-header h4 {
  margin: 0;
}

.layout-version-history-list {
  display: grid;
  gap: 8px;
}

.layout-version-history-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  display: grid;
  gap: 8px;
}

.layout-version-history-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.layout-version-history-item-title {
  font-weight: 700;
}

.layout-version-history-item-meta {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.layout-version-history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-property-multi {
  border: 1px solid rgba(74, 158, 255, 0.22);
  border-radius: 14px;
  padding: 12px;
  background: rgba(74, 158, 255, 0.04);
}

.layout-multi-summary {
  font-weight: 700;
  color: var(--text-secondary);
}

.layout-multi-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.layout-confirm-modal-content {
  width: min(520px, 92vw);
}

.layout-quickstart-modal-content {
  width: min(1040px, 96vw);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
}

.layout-help-modal-content {
  width: min(780px, 96vw);
}

.layout-quickstart-body {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.layout-quickstart-catalog {
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.layout-quickstart-catalog-header {
  padding: 14px 14px 8px;
  display: grid;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.layout-quickstart-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.layout-quickstart-cat-tab[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  border-color: var(--accent);
}

.layout-quickstart-templates {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px 14px;
  display: grid;
  gap: 8px;
}

.layout-quickstart-template {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}

.layout-quickstart-template:hover {
  border-color: var(--accent);
}

.layout-quickstart-template.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-primary));
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.layout-quickstart-template-icon {
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
}

.layout-quickstart-template-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.layout-quickstart-template-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.layout-quickstart-template-tag {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.3;
}

.layout-quickstart-template-meta {
  color: var(--text-secondary);
  font-size: 0.74rem;
  opacity: 0.8;
  margin-top: 2px;
}

.layout-quickstart-config {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.layout-quickstart-config-header {
  padding: 14px 18px 8px;
  border-bottom: 1px solid var(--border);
}

.layout-quickstart-config-header h4 {
  margin: 0 0 4px;
}

.layout-quickstart-config-header p {
  margin: 0;
  font-size: 0.88rem;
}

.layout-quickstart-config-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.layout-quickstart-empty {
  padding: 18px 0;
  font-size: 0.92rem;
}

.layout-quickstart-field {
  display: grid;
  gap: 4px;
  font-size: 0.86rem;
}

.layout-quickstart-field-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.layout-quickstart-field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.layout-quickstart-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
}

.layout-quickstart-toggle input {
  margin: 0;
}

.layout-quickstart-preview {
  margin: 0 18px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 0.84rem;
}

.layout-quickstart-readiness {
  margin: 0 18px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

.layout-quickstart-readiness.is-error {
  background: color-mix(in srgb, var(--danger, #d9534f) 14%, var(--bg-primary));
  border-color: var(--danger, #d9534f);
  color: var(--text-primary);
}

.layout-quickstart-readiness.is-warn {
  background: color-mix(in srgb, #e0a900 16%, var(--bg-primary));
  border-color: #c99a00;
  color: var(--text-primary);
}

.layout-quickstart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.layout-quickstart-fitview-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
}

.layout-quickstart-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-help-sections {
  display: grid;
  gap: 16px;
}

.layout-help-sections section {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: var(--bg-secondary);
}

.layout-help-sections h4 {
  margin: 0 0 8px;
}

.layout-help-sections ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
}

.layout-page[data-ui-mode="speed"] .layout-toolbelt-row-inline {
  display: none;
}

.layout-page[data-ui-mode="speed"] .layout-canvas-hint {
  font-size: 0.78rem;
}

.layout-page[data-ui-mode="speed"] .layout-toolbelt-group-actions {
  min-width: 0;
}

.layout-page[data-ui-mode="speed"] .layout-toolbelt-row-more {
  gap: 10px;
}

.layout-page[data-ui-mode="speed"] .layout-toolbelt-row-more .layout-toolbelt-group {
  min-width: 110px;
}

#layout-drawer-library,
#layout-drawer-palette {
  left: 0;
  right: auto;
  border-left: none;
  border-right: 1px solid var(--border);
  animation: drawerInLeft 0.18s ease-out;
}

@keyframes drawerInLeft {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes drawerInRight {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.layout-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.layout-drawer-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.layout-drawer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.layout-drawer-body {
  padding: 16px;
  overflow: auto;
}

.layout-property {
  margin-bottom: 16px;
}

.layout-property-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.layout-property-actions button {
  min-width: 0;
  width: 100%;
  justify-content: center;
}

.layout-selected-kind {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.layout-textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.2;
}

.layout-rotation-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.layout-nudge {
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  justify-items: center;
  align-items: center;
}

#layout-nudge-up {
  grid-area: up;
}

#layout-nudge-left {
  grid-area: left;
}

#layout-nudge-right {
  grid-area: right;
}

#layout-nudge-down {
  grid-area: down;
}

.layout-nudge button {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
}

.layout-palette-grid {
  display: grid;
  gap: 18px;
}

.palette-group-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.palette-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.palette-card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 10px;
  text-align: left;
  box-shadow: none;
  transform: none;
}

.palette-card.is-favorite {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18) inset;
}

.palette-card:hover {
  background: var(--bg-tertiary);
  box-shadow: none;
  transform: translateY(-1px);
}

.palette-card-star {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #b45309;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  user-select: none;
}

.palette-card.is-favorite .palette-card-star {
  background: rgba(254, 243, 199, 0.95);
  border-color: rgba(245, 158, 11, 0.35);
  color: #92400e;
}

.palette-card-thumb {
  width: 100%;
  height: 84px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--border);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.palette-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.palette-card-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent-blue);
}

.palette-card-fallback svg {
  width: 54px;
  height: 54px;
  display: block;
}

.palette-strip-thumb svg {
  width: 34px;
  height: 34px;
  display: block;
}

.palette-card-name {
  font-weight: 700;
  line-height: 1.1;
}

.palette-card-meta {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 4px;
}

.palette-modal-content {
  width: min(900px, 96vw);
}

.palette-form {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: var(--bg-secondary);
  margin-bottom: 16px;
}

.palette-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.palette-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.palette-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.palette-auto-seating {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: var(--bg-secondary);
  margin-bottom: 16px;
}

.palette-auto-seating h4 {
  margin: 0 0 6px;
}

.palette-auto-seating p {
  margin: 0 0 12px;
}

.palette-auto-seating-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.layout-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-tertiary);
  font-weight: 650;
}

.palette-auto-seating input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 6px;
  accent-color: var(--accent-blue);
}

.auto-seat-header {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.85rem;
}

.auto-seat-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.auto-seat-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
}

.auto-seat-table-name {
  font-weight: 700;
}

.auto-seat-table-code {
  font-size: 0.8rem;
  margin-top: 2px;
}

.auto-seat-input {
  text-align: center;
  max-width: 120px;
  justify-self: end;
}

.palette-list {
  display: grid;
  gap: 10px;
}

.palette-manager-item {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--bg-secondary);
}

.palette-manager-thumb {
  width: 62px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #ffffff;
  display: grid;
  place-items: center;
}

.palette-manager-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.palette-manager-fallback {
  font-weight: 800;
  color: var(--accent-blue);
}

.palette-manager-name {
  font-weight: 700;
}

.palette-manager-meta {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.palette-manager-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .layout-header {
    align-items: stretch;
  }

  .layout-header-left,
  .layout-header-right {
    width: 100%;
  }

  .layout-header-right {
    justify-content: flex-start;
  }

  .layout-workflow-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .layout-workflow-left,
  .layout-workflow-right {
    width: 100%;
    justify-content: space-between;
  }

  .layout-workflow-left {
    justify-content: flex-start;
  }

  .layout-save-banner {
    top: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
  }

  .layout-selection-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .layout-toolbelt-row-inline {
    display: none;
  }

  .layout-toolbelt-more {
    display: block;
  }

  .layout-canvas-toolbar {
    display: flex;
  }

  .layout-mobile-sheet-tabs {
    display: flex;
  }

  .layout-stage {
    grid-template-columns: 1fr;
  }

  .layout-sidebar {
    display: none;
  }

  .layout-canvas-meta {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
  }

  .layout-palette-strip {
    display: flex;
  }

  .layout-palette-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-palette-filters select {
    grid-column: 1 / -1;
  }

  .layout-placement-banner-inline {
    max-width: none;
    width: 100%;
  }

  .layout-drawer {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: min(72vh, 620px);
    border-left: 1px solid var(--border);
    border-radius: 18px;
    animation: none;
  }

  #layout-drawer-properties {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-height: 62vh;
  }

  #layout-drawer-library,
  #layout-drawer-palette {
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto;
    width: auto;
    border-right: 1px solid var(--border);
  }

  .palette-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .layout-page {
    padding: 12px;
  }

  .layout-tenant {
    align-items: flex-start;
  }

  .layout-tenant-name,
  .layout-tenant-meta {
    white-space: normal;
  }

  .layout-header-right {
    gap: 8px;
  }

  .layout-header-right > .ghost {
    padding: 8px 10px;
  }

  .layout-workflow-left {
    gap: 6px;
  }

  .layout-workflow-left .small.ghost {
    padding: 8px 9px;
    font-size: 0.78rem;
  }

  .layout-mobile-sheet-tabs {
    gap: 6px;
  }

  .layout-mobile-sheet-tabs .small.ghost {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
  }

  .palette-group-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .layout-canvas-hint {
    display: none;
  }

  #layout-drawer-properties {
    left: 12px;
    right: 12px;
    width: auto;
  }

  .layout-selection-hud {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
  }

  .layout-quickstart-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(180px, 42vh) 1fr;
  }

  .layout-quickstart-catalog {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .layout-quickstart-field-row {
    grid-template-columns: 1fr 1fr;
  }

  .palette-auto-seating-grid {
    grid-template-columns: 1fr;
  }

  .auto-seat-header,
  .auto-seat-row {
    grid-template-columns: 1fr 92px;
  }

  .auto-seat-input {
    max-width: 92px;
  }
}

.error {
  color: var(--accent-red);
  min-height: 18px;
}

.muted {
  color: var(--text-secondary);
}

.site-footer {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.site-footer-app-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.site-footer-app-badges a {
  display: inline-flex;
  transition: opacity 0.2s;
}

.site-footer-app-badges a:hover {
  opacity: 0.75;
}

.site-footer-app-badges img {
  height: 38px;
  width: auto;
}

@media (max-width: 600px) {
  .site-footer-app-badges img {
    height: 34px;
  }
}

.site-footer-review {
  margin: 10px 0 0;
  font-size: 0.8rem;
}

.site-footer-review a {
  color: var(--text-secondary);
  text-decoration: none;
}

.site-footer-review a:hover {
  text-decoration: underline;
  color: var(--primary);
}

/* ── Mobile App Prompt ─────────────────────────────────────────────────────── */

html.mobile-app-prompt-open,
html.mobile-app-prompt-open body {
  overflow: hidden;
}

.mobile-app-prompt {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}

.mobile-app-prompt[hidden] {
  display: none;
}

.mobile-app-prompt-card {
  width: calc(100vw - 40px);
  max-width: 420px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  padding: 28px 22px 24px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.25);
  text-align: center;
}

.mobile-app-prompt:focus,
.mobile-app-prompt-card:focus {
  outline: none;
}

.mobile-app-prompt-screen[hidden] {
  display: none;
}

.mobile-app-prompt-logo {
  margin-bottom: 18px;
  font-size: 1.05rem;
  font-weight: 700;
}

.mobile-app-prompt h2 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 700;
  color: inherit;
}

.mobile-app-prompt p {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #475569;
}

.mobile-app-prompt-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.mobile-app-prompt-badges a {
  display: inline-flex;
  border-radius: 8px;
  transition: opacity 0.2s;
}

.mobile-app-prompt-badges a:hover,
.mobile-app-prompt-badges a:active {
  opacity: 0.8;
}

.mobile-app-prompt-badges a:focus-visible,
.mobile-app-prompt button:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}

.mobile-app-prompt-badges img {
  display: block;
  height: 42px;
  object-fit: cover;
  object-position: center;
  width: 132px;
}

.mobile-app-prompt-badges a:last-child img {
  width: 146px;
}

.mobile-app-prompt-continue,
.mobile-app-prompt-back,
.mobile-app-prompt-dismiss {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: transparent;
  color: #475569;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  min-height: 42px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mobile-app-prompt button:hover {
  box-shadow: none;
  transform: none;
}

.mobile-app-prompt-continue:hover,
.mobile-app-prompt-back:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

.mobile-app-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.mobile-app-prompt-actions .mobile-app-prompt-dismiss {
  border-color: rgba(220, 38, 38, 0.35);
  color: rgba(185, 28, 28, 0.95);
}

.mobile-app-prompt-actions .mobile-app-prompt-dismiss:hover {
  background: rgba(220, 38, 38, 0.08);
  color: rgba(153, 27, 27, 1);
}

@media (max-width: 360px) {
  .mobile-app-prompt {
    padding: 14px;
  }

  .mobile-app-prompt-card {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 24px 18px 20px;
  }

  .mobile-app-prompt-badges {
    gap: 8px;
  }
}

.site-footer-feedback {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.feedback-floating-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.feedback-launch-btn {
  border: 1px solid var(--accent-blue);
  background: rgba(74, 158, 255, 0.18);
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(74, 158, 255, 0.25);
}

.feedback-launch-btn:hover {
  background: rgba(74, 158, 255, 0.28);
  border-color: var(--accent-blue);
}

.feedback-launch-btn.feedback-launch-btn-modal {
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 10px;
  box-shadow: none;
}

.feedback-modal-entry {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}

.feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.feedback-dialog {
  width: min(560px, 96vw);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  position: relative;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.feedback-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.feedback-dialog-header h3 {
  margin: 0;
  color: var(--accent-blue);
}

.feedback-context {
  margin: 12px 0 0;
  font-size: 0.85rem;
}

.feedback-textarea {
  width: 100%;
  min-height: 160px;
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px;
  font: inherit;
  resize: vertical;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.25);
}

.feedback-error {
  margin: 10px 0 0;
  min-height: 18px;
}

.feedback-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.feedback-success {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(15, 15, 15, 0.95);
  font-weight: 700;
  color: #4ade80;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.feedback-checkmark {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(74, 222, 128, 0.75);
  background: rgba(74, 222, 128, 0.16);
  font-size: 1.1rem;
}

.feedback-overlay.is-success .feedback-success {
  display: inline-flex;
  opacity: 1;
  transform: scale(1);
}

.feedback-overlay.is-fading .feedback-dialog {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}

.help-dialog {
  width: min(560px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
}

.help-dialog-intro {
  margin: 12px 0 0;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.95rem;
}

.help-dialog-intro a {
  color: var(--accent-blue);
  font-weight: 700;
  text-decoration: none;
}

.help-dialog-intro a:hover {
  text-decoration: underline;
}

.help-onboarding-card {
  margin-top: 16px;
  padding: 18px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #d1d5db;
}

.help-onboarding-eyebrow {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #22c55e;
}

.help-onboarding-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  line-height: 1.25;
}

.help-onboarding-lead {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d1d5db;
}

.help-onboarding-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: helpstep;
  display: grid;
  gap: 10px;
}

.help-onboarding-steps li {
  counter-increment: helpstep;
  position: relative;
  padding-left: 32px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #d1d5db;
}

.help-onboarding-steps li::before {
  content: counter(helpstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-onboarding-steps strong {
  color: #fff;
  font-weight: 700;
}

.help-onboarding-steps a {
  color: #fff;
  text-decoration: underline;
  word-break: break-word;
}

.help-onboarding-disclaimer {
  margin: 12px 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
}

body.theme-light .help-onboarding-card {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

body.theme-light .help-onboarding-title,
body.theme-light .help-onboarding-steps strong {
  color: #0f172a;
}

body.theme-light .help-onboarding-lead,
body.theme-light .help-onboarding-steps li {
  color: #475569;
}

body.theme-light .help-onboarding-steps a {
  color: var(--accent-blue);
}

@media (max-width: 480px) {
  .help-onboarding-card {
    padding: 14px;
  }
  .help-onboarding-title {
    font-size: 1.05rem;
  }
  .help-onboarding-steps li {
    font-size: 0.85rem;
    padding-left: 28px;
  }
  .help-onboarding-steps li::before {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }
}

.app {
  margin-top: 32px;
  position: relative;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Shell toggle (POS Register ↔ Calendar) — pill switch in headers. */
.shell-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card, #111521);
  gap: 2px;
}

.shell-toggle__seg {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

/* Icons only render in the admin hero shell-toggle. Other surfaces (pos-ui,
   employee.html) reuse data-shell-target="calops" with a "Time Clock" label,
   so a calendar icon there would mislead. */
.hero-actions .shell-toggle__seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-actions .shell-toggle__seg[data-shell-target="calops"]::before,
.hero-actions .shell-toggle__seg[data-shell-target="pos"]::before,
.hero-actions .shell-toggle__seg[data-shell-target="commander"]::before {
  content: "";
  width: 14px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.92;
  flex-shrink: 0;
}
.hero-actions .shell-toggle__seg[data-shell-target="calops"]::before {
  background-image: url("/menu-icons/calendar-vector-light.png");
}
.hero-actions .shell-toggle__seg[data-shell-target="pos"]::before {
  background-image: url("/menu-icons/register-vector-light.png");
}
.hero-actions .shell-toggle__seg[data-shell-target="commander"]::before {
  background-image: url("/menu-icons/commander-vector-light.png");
}
body.theme-light .hero-actions .shell-toggle__seg[data-shell-target="calops"]::before {
  background-image: url("/menu-icons/calendar-vector-dark.png");
}
body.theme-light .hero-actions .shell-toggle__seg[data-shell-target="pos"]::before {
  background-image: url("/menu-icons/register-vector-dark.png");
}
body.theme-light .hero-actions .shell-toggle__seg[data-shell-target="commander"]::before {
  background-image: url("/menu-icons/commander-vector-dark.png");
}
body.theme-light .hero-actions .shell-toggle__seg.is-active[data-shell-target="calops"]::before {
  background-image: url("/menu-icons/calendar-vector-light.png");
}
body.theme-light .hero-actions .shell-toggle__seg.is-active[data-shell-target="pos"]::before {
  background-image: url("/menu-icons/register-vector-light.png");
}
body.theme-light .hero-actions .shell-toggle__seg.is-active[data-shell-target="commander"]::before {
  background-image: url("/menu-icons/commander-vector-light.png");
}

.shell-toggle__seg:hover:not(.is-active) {
  color: var(--text-primary);
  background: rgba(74, 158, 255, 0.08);
}

.shell-toggle__seg.is-active {
  background: var(--accent-blue, #4a9eff);
  color: #fff;
  cursor: default;
}

.shell-toggle__seg:focus-visible {
  outline: 2px solid var(--accent-blue, #4a9eff);
  outline-offset: 2px;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.header-brand img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .header-brand span {
    display: none;
  }
}

.menu-toggle {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
}

.menu-toggle:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Gateway admin messages banner */
.gateway-messages-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.gateway-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.25);
  font-size: 0.88rem;
  color: #ffd54f;
  animation: msgFadeIn 0.4s ease;
}

.gateway-msg-text {
  flex: 1;
}

.gateway-msg-dismiss {
  background: none;
  border: none;
  color: rgba(255, 193, 7, 0.6);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.2s;
}

.gateway-msg-dismiss:hover {
  color: #ffc107;
}

@keyframes msgFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.favorites-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}

.favorites-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.favorite-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent-blue);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.favorite-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 71, 255, 0.15);
}

.menu-panel {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(80px);
  width: min(280px, 90vw);
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: visible;
}

.menu-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.menu-panel-header h4 {
  margin: 0;
}

.menu-items {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hairline divider between menu clusters. Minimal height so no group dominates. */
.menu-sep {
  height: 1px;
  margin: 0 4px;
  background: rgba(128, 128, 128, 0.25);
  border: 0;
  flex: 0 0 auto;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
}

/* Current destination. app-shell.js sets this (plus aria-current="page") on the
   entry whose target matches the current path, so a menu destination that is a
   real page reads as one. */
.menu-btn.is-active {
  border-color: var(--accent-blue, #3b82f6);
  background: var(--bg-tertiary, rgba(59, 130, 246, 0.12));
  box-shadow: inset 3px 0 0 0 var(--accent-blue, #3b82f6);
}

.menu-btn.is-active .menu-btn-label {
  color: var(--text-primary);
  font-weight: 700;
}

/* Pending-reveal badge for Apex Collections nav button and favorite tiles. */
.menu-btn[data-pending],
.hero-fav-btn[data-pending],
.favorite-btn[data-pending] {
  position: relative;
  overflow: visible;
}
.apex-collections-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid rgba(26, 20, 10, 0.28);
  border-radius: 999px;
  background: #d0a640;
  color: #1a140a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34), 0 0 0 2px var(--bg-secondary, #1a1a1a);
  pointer-events: none;
  animation: apex-badge-pop 180ms ease-out both;
}
@keyframes apex-badge-pop {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .apex-collections-badge { animation: none; }
}

.menu-btn.ghost {
  background: var(--bg-card);
  font-weight: 500;
}

/* Tool icons in menu - light variants on dark theme, dark variants on light theme */
.menu-btn[data-menu-key]::before {
  content: "";
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.92;
}
body.theme-light .menu-btn[data-menu-key]::before {
  opacity: 0.85;
}

.menu-btn[data-menu-key="timesheets"]::before     { background-image: url("/menu-icons/timesheets-vector-light.png"); }
.menu-btn[data-menu-key="customers"]::before      { background-image: url("/menu-icons/customers-vector-light.png"); }
.menu-btn[data-menu-key="messages"]::before       { background-image: url("/menu-icons/messages-vector-light.png"); }
.menu-btn[data-menu-key="assets"]::before         { background-image: url("/menu-icons/assets-vector-light.png"); }
.menu-btn[data-menu-key="quotes"]::before         { background-image: url("/menu-icons/quotes-vector-light.png"); }
.menu-btn[data-menu-key="map-view"]::before       { background-image: url("/menu-icons/mapview-vector-light.png"); }
.menu-btn[data-menu-key="tent-squaring"]::before  { background-image: url("/menu-icons/tentsquaring-vector-light.png"); }
.menu-btn[data-menu-key="layouts"]::before        { background-image: url("/menu-icons/layouts-vector-light.png"); }
.menu-btn[data-menu-key="website-builder"]::before{ background-image: url("/menu-icons/websitebuilder-vector-light.png"); }
.menu-btn[data-menu-key="inventory"]::before      { background-image: url("/menu-icons/inventory-vector-light.png"); }
.menu-btn[data-menu-key="tools-group"]::before    { background-image: url("/menu-icons/tools-vector-light.png"); }
.menu-btn[data-menu-key="print-sheets"]::before   { background-image: url("/menu-icons/printsheets-vector-light.png"); }
.menu-btn[data-menu-key="analytics"]::before      { background-image: url("/menu-icons/analytics-vector-light.png"); }
.menu-btn[data-menu-key="timeclock"]::before      { background-image: url("/menu-icons/timeclock-vector-light.png"); }
.menu-btn[data-menu-key="settings"]::before       { background-image: url("/menu-icons/settings-vector-light.png"); }
.menu-btn[data-menu-key="users"]::before          { background-image: url("/menu-icons/users-vector-light.png"); }
.menu-btn[data-menu-key="documents"]::before      { background-image: url("/menu-icons/documents-vector-light.png"); }
.menu-btn[data-menu-key="notes"]::before          { background-image: url("/menu-icons/quicknotes-vector-light.png"); }
.menu-btn[data-menu-key="apex-collections"]::before { background-image: url("/menu-icons/collections-vector-light.png"); }
.menu-btn[data-menu-key="lawn-care-setup"]::before      { background-image: url("/menu-icons/lawn-care-setup-vector-light.png"); }
.menu-btn[data-menu-key="lawn-care-properties"]::before { background-image: url("/menu-icons/lawn-care-properties-vector-light.png"); }
.menu-btn[data-menu-key="lawn-care-crews"]::before      { background-image: url("/menu-icons/users-vector-light.png"); }
.menu-btn[data-menu-key="lawn-care-schedules"]::before  { background-image: url("/menu-icons/lawn-care-schedules-vector-light.png"); }
.menu-btn[data-menu-key="lawn-care-equipment"]::before  { background-image: url("/menu-icons/lawn-care-equipment-vector-light.png"); }
.menu-btn[data-menu-key="logout"]::before               { background-image: url("/menu-icons/logout-vector-light.png"); }

body.theme-light .menu-btn[data-menu-key="timesheets"]::before     { background-image: url("/menu-icons/timesheets-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="customers"]::before      { background-image: url("/menu-icons/customers-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="messages"]::before       { background-image: url("/menu-icons/messages-vector-black.png"); }
body.theme-light .menu-btn[data-menu-key="assets"]::before         { background-image: url("/menu-icons/assets-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="quotes"]::before         { background-image: url("/menu-icons/quotes-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="map-view"]::before       { background-image: url("/menu-icons/mapview-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="tent-squaring"]::before  { background-image: url("/menu-icons/tentsquaring-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="layouts"]::before        { background-image: url("/menu-icons/layouts-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="website-builder"]::before{ background-image: url("/menu-icons/websitebuilder-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="inventory"]::before      { background-image: url("/menu-icons/inventory-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="tools-group"]::before    { background-image: url("/menu-icons/tools-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="print-sheets"]::before   { background-image: url("/menu-icons/printsheets-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="analytics"]::before      { background-image: url("/menu-icons/analytics-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="timeclock"]::before      { background-image: url("/menu-icons/timeclock-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="settings"]::before       { background-image: url("/menu-icons/settings-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="users"]::before          { background-image: url("/menu-icons/users-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="documents"]::before      { background-image: url("/menu-icons/documents-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="notes"]::before          { background-image: url("/menu-icons/quicknotes-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="apex-collections"]::before { background-image: url("/menu-icons/collections-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="lawn-care-setup"]::before      { background-image: url("/menu-icons/lawn-care-setup-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="lawn-care-properties"]::before { background-image: url("/menu-icons/lawn-care-properties-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="lawn-care-crews"]::before      { background-image: url("/menu-icons/users-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="lawn-care-schedules"]::before  { background-image: url("/menu-icons/lawn-care-schedules-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="lawn-care-equipment"]::before  { background-image: url("/menu-icons/lawn-care-equipment-vector-dark.png"); }
body.theme-light .menu-btn[data-menu-key="logout"]::before               { background-image: url("/menu-icons/logout-vector-dark.png"); }

.menu-fav-toggle {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}

.menu-fav-toggle.is-favorite {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

/* ── Menu flyouts (Tools, Settings, …) ────────────────────────────────────── */

.menu-item-group {
  position: relative;
}

.menu-btn-group {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.menu-btn-caret {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.6;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease;
}

.menu-item-group:hover .menu-btn-caret,
.menu-item-group.is-flyout-open .menu-btn-caret {
  transform: translateX(4px);
  opacity: 1;
}

.menu-flyout {
  position: absolute;
  right: calc(100% + 14px);
  top: -10px;
  min-width: 240px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px) scale(0.97);
  transform-origin: right top;
  transition:
    opacity 0.22s ease,
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1010;
}

/* Invisible hover bridge so the cursor can cross the gap from button to flyout
   without dropping the :hover state — keeps the flyout open while traveling. */
.menu-flyout::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -18px;
  width: 22px;
  height: calc(100% + 20px);
}

.menu-item-group.is-flyout-open > .menu-flyout {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.menu-flyout-header {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 2px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.menu-flyout .menu-item {
  gap: 10px;
}

.menu-btn-logout {
  color: #d04a4a;
}

.menu-btn-logout:hover,
.menu-btn-logout:focus-visible {
  border-color: #d04a4a;
  background: rgba(208, 74, 74, 0.08);
  color: #d04a4a;
}

@media (prefers-reduced-motion: reduce) {
  .menu-flyout {
    transition: opacity 0.12s ease;
    transform: none;
  }
  .menu-item-group.is-flyout-open > .menu-flyout {
    transform: none;
  }
  .menu-btn-caret {
    transition: none;
  }
}

@media (max-width: 768px) {
  .menu-flyout {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 8px 0 0;
    min-width: 0;
  }
  .menu-flyout::before { display: none; }
  .menu-btn-caret { display: none; }
  .menu-btn-group { justify-content: flex-start; }
}

/* Touch/no-hover devices: inline the flyout at any width so Sign out and other
   sub-actions stay reachable without hover. */
@media (hover: none) and (pointer: coarse) {
  .menu-flyout {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 8px 0 0;
    min-width: 0;
  }
  .menu-flyout::before { display: none; }
  .menu-btn-caret { display: none; }
  .menu-btn-group { justify-content: flex-start; }
}

.header-btn {
  padding: 10px 20px;
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  margin: 0 0 6px;
  color: var(--accent-blue);
}

.calendar-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.calendar-stack .overdue-pickup-alert {
  margin-bottom: 0;
}

/* Overdue Pickup Alert */
.overdue-pickup-alert {
  background: linear-gradient(135deg, rgba(255, 167, 38, 0.15) 0%, rgba(255, 87, 34, 0.15) 100%);
  border: 1px solid rgba(255, 167, 38, 0.4);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  animation: pulse-subtle 2s ease-in-out infinite;
}

/* Overbooking alert reuses the .overdue-pickup-alert layout but in red so
   inventory shortfalls are visually distinct from overdue pickups. */
#overbooking-alert.overdue-pickup-alert {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.15) 100%);
  border-color: rgba(239, 68, 68, 0.45);
}
#overbooking-alert .overdue-pickup-content {
  color: #ef4444;
}

/* Unsigned-contract alert: blue, so paperwork-to-chase reads as distinct from
   the orange (overdue pickup) and red (inventory shortfall) urgency tiers. */
#contract-alert.overdue-pickup-alert {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16) 0%, rgba(37, 99, 235, 0.14) 100%);
  border-color: rgba(59, 130, 246, 0.42);
  /* No pulse — this is a weekly nudge, not a same-day emergency. */
  animation: none;
}
#contract-alert .overdue-pickup-content {
  color: #60a5fa;
}
#contract-alert .contract-alert-link {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Light theme: #60a5fa on a light surface fails contrast — darken the text and
   soften the gradient the same way the light theme treats the other banners. */
body.theme-light #contract-alert.overdue-pickup-alert {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.06) 100%);
  border-color: rgba(59, 130, 246, 0.3);
}
body.theme-light #contract-alert .overdue-pickup-content {
  color: #1d4ed8;
}

@keyframes pulse-subtle {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.85;
  }
}

.overdue-pickup-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffa726;
}

.overdue-pickup-content svg {
  flex-shrink: 0;
}

/* Email verify modal — minimal centered card */
.verify-email-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.verify-email-modal[hidden] { display: none; }
.verify-email-card {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  position: relative;
  color: #e0e0e0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.verify-email-card h3 { margin: 0 0 6px; font-size: 1.2rem; color: #fff; }
.verify-email-sub { margin: 0 0 16px; font-size: 0.88rem; color: #a0a0a0; }
.verify-email-card input#verify-email-code {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.5rem;
  letter-spacing: 6px;
  text-align: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid #333;
  border-radius: 10px;
  color: #fff;
  font-family: 'Courier New', monospace;
}
.verify-email-error {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #fca5a5;
}
.verify-email-error[hidden] { display: none; }
.verify-email-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  gap: 10px;
}
.verify-email-resend {
  background: none;
  border: none;
  color: #4a9eff;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 8px 0;
}
.verify-email-submit {
  background: #4a9eff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
  cursor: pointer;
}
.verify-email-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.verify-email-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  color: #888;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.overdue-pickup-content span {
  flex: 1;
  font-size: 0.9rem;
}

.overdue-pickup-content a {
  color: #ffcc80;
  text-decoration: underline;
  cursor: pointer;
}

.overdue-pickup-content a:hover {
  color: #fff;
}

.overdue-pickup-dismiss {
  background: none;
  border: none;
  color: #ffa726;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.overdue-pickup-dismiss:hover {
  opacity: 1;
}

.reminder-alerts-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reminder-alerts-container:empty {
  display: none;
}

.reminder-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.14) 0%, rgba(140, 80, 255, 0.14) 100%);
  border: 1px solid rgba(74, 158, 255, 0.4);
  color: #cfe4ff;
  font-size: 0.9rem;
}

.reminder-alert-banner .reminder-alert-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reminder-alert-banner .reminder-alert-title {
  font-weight: 600;
  color: #fff;
}

.reminder-alert-banner .reminder-alert-meta {
  font-size: 0.78rem;
  opacity: 0.8;
}

.reminder-alert-banner .reminder-alert-meta a,
.reminder-alert-banner a.reminder-alert-meta {
  text-decoration: underline;
  color: inherit;
}

.reminder-alert-banner .reminder-alert-dismiss {
  background: none;
  border: none;
  color: #cfe4ff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  opacity: 0.75;
}

.reminder-alert-banner .reminder-alert-dismiss:hover { opacity: 1; color: #fff; }

.reminder-alert-banner.reminder-alert-overflow {
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
}

.calendar-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.calendar-top-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.calendar-search-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.calendar-search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.calendar-search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  pointer-events: none;
}

.calendar-search-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calendar-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}

.calendar-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.calendar-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
}

.calendar-search-clear:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* ── Assistant search ─────────────────────────────────────────────────────── */

/* Cosmo-first search: separate submission and mode controls, never icon-only. */
.calendar-search-container.has-assistant-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px;
  align-items: center;
}
.calendar-search-container.has-assistant-toggle .calendar-search-icon { top: 14px; }
.calendar-search-container.has-assistant-toggle .calendar-search-input {
  grid-column: 1; grid-row: 1; min-width: 0; height: 44px;
  padding-right: 12px;
}
.calendar-search-container.has-assistant-toggle .calendar-search-clear {
  grid-column: 2; grid-row: 1; position: static; width: 32px; height: 40px;
}
.calendar-search-container .assistant-send,
.calendar-search-container .assistant-mode-toggle {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-height: 40px; height: auto; padding: 8px 12px; opacity: 1;
  border: 1px solid var(--border); border-radius: var(--radius, 8px);
  color: var(--text-primary); background: var(--bg-secondary); cursor: pointer;
  font: inherit; font-size: .8rem; white-space: nowrap;
}
.calendar-search-container .assistant-send { grid-column: 3; grid-row: 1; font-weight: 600; }
.calendar-search-container .assistant-mode-toggle { grid-column: 4; grid-row: 1; min-width: 112px; }
.calendar-search-container .assistant-send:disabled { opacity: .55; cursor: default; }
.calendar-search-container .assistant-mode-toggle[aria-pressed="true"] { border-color: var(--accent-blue); }
.calendar-search-container .assistant-send[hidden],
.calendar-search-container .assistant-mode-toggle[hidden],
.calendar-search-container .calendar-search-clear[hidden] { display: none; }
.assistant-search-mode-status { grid-column: 1 / -1; color: var(--text-secondary); font-size: .72rem; line-height: 1.4; }
.calendar-search-container button:focus-visible,
.cosmo-guide-panel :is(button, a):focus-visible { outline: 2px solid var(--accent, #448de5); outline-offset: 2px; }
@media (max-width: 700px) {
  .calendar-search-container.has-assistant-toggle { grid-template-columns: minmax(0, 1fr) auto auto; }
  .calendar-search-container .assistant-mode-toggle { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* A guide is read-only. Inset outline cannot extend beyond the viewport edge. */
.cosmo-guide-target { outline: 3px solid var(--accent, #448de5) !important; outline-offset: -3px !important; scroll-margin-block: 120px 240px; }
.cosmo-guide-panel {
  position: static; grid-column: 1 / -1; min-width: 0; margin-block: 12px;
  box-sizing: border-box; width: 100%; max-width: 100%; overflow-wrap: anywhere;
  border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 16px;
  background: var(--bg-card, #fff); color: var(--text-primary, #182235); box-shadow: var(--shadow, 0 8px 32px #0003);
  font-size: .86rem; line-height: 1.5;
}
/* Guides grow with the answer instead of hiding actions in its prose scroller. */
.assistant-answer-panel:has(.cosmo-guide-panel) { max-height: none; overflow-y: visible; }
.cosmo-guide-panel p { margin: 8px 0 12px; }
.cosmo-guide-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cosmo-guide-actions :is(button, a) { min-height: 36px; padding: 6px 10px; font: inherit; border-radius: 8px; }
.cosmo-guide-actions [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cosmo-guide-target, .cosmo-guide-panel { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.assistant-mascot-glyph {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.assistant-answer-mascot .assistant-mascot-glyph {
  width: 20px;
  height: 20px;
}

.assistant-idle {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  /* Cosmo's art carries its own glow, which otherwise spills past the corner. */
  overflow: hidden;
}

.assistant-idle[hidden] {
  display: none;
}

.assistant-idle-art {
  flex: 0 0 auto;
  width: auto;
  height: 88px;
  object-fit: contain;
}

.assistant-idle-copy {
  min-width: 0;
}

.assistant-idle-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.assistant-idle-body {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Starter questions. They wrap rather than scroll: a question half off the edge
   reads as decoration, and the whole point is that they're readable examples of
   a sentence you're allowed to type. */
.assistant-idle-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.assistant-starter {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.76rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.assistant-starter:hover,
.assistant-starter:focus-visible {
  color: var(--text-primary);
  border-color: rgba(74, 158, 255, 0.45);
  background: rgba(74, 158, 255, 0.12);
}

.assistant-answer-panel {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  max-height: 220px;
  overflow-y: auto;
}

.assistant-answer-panel[hidden] {
  display: none;
}

/* Action previews include consent text and explicit controls. Let the page grow
   instead of burying Approve below the prose panel's 220px internal scroller. */
.assistant-answer-panel.has-action-card {
  max-height: none;
  overflow-y: visible;
}

.assistant-answer-mascot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.12);
}

.assistant-answer-main {
  min-width: 0;
  flex: 1;
}

.assistant-answer-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.assistant-answer-body {
  margin-top: 2px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.assistant-answer-body:empty {
  display: none;
}

/* Out-of-prompts renders as a bare muted line: no mascot, no name badge, no
   panel chrome competing with the results underneath. */
.assistant-answer-panel.is-note-only {
  padding: 6px 2px;
  border-color: transparent;
  background: none;
}

.assistant-answer-panel.is-note-only .assistant-answer-mascot,
.assistant-answer-panel.is-note-only .assistant-answer-name {
  display: none;
}

/* ── Cosmo action card ──────────────────────────────────────────────────────
   A proposal, not an answer. It reads as a receipt you have not signed yet:
   deliberately heavier than the prose panel, because the difference between
   "Cosmo said something" and "Cosmo is about to change something" has to be
   obvious at a glance. */
.assistant-action-host:empty {
  display: none;
}

.cosmo-action-card {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-left: 3px solid var(--accent, #14b8a6);
  border-radius: 10px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  font-size: 0.82rem;
}

.cosmo-action-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cosmo-action-card-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent, #14b8a6);
  color: #06231f;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cosmo-action-card-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.cosmo-action-card-sections,
.cosmo-action-card-totals {
  margin: 0 0 8px;
  display: grid;
  gap: 2px;
}

.cosmo-action-card-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cosmo-action-card-key {
  color: var(--text-secondary);
}

.cosmo-action-card-value {
  margin: 0;
  text-align: right;
  /* Customer names and addresses are arbitrary length and must not push the
     amount column off the card. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.cosmo-action-card-totals {
  padding-top: 6px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
}

.cosmo-action-card-totals .cosmo-action-card-row:last-child {
  font-weight: 700;
}

.cosmo-action-card-lines {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}

.cosmo-action-card-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
}

.cosmo-action-card-line-label {
  overflow-wrap: anywhere;
}

.cosmo-action-card-line-detail {
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
}

.cosmo-action-card-line-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cosmo-action-card-footnote {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.cosmo-action-card-footnote[hidden],
.cosmo-action-card-status[hidden],
.cosmo-action-card-result[hidden] {
  display: none;
}

.cosmo-action-card-status {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.cosmo-action-card-result {
  margin-top: 8px;
}

.cosmo-action-card-link {
  color: var(--accent, #14b8a6);
  font-weight: 600;
  text-decoration: underline;
}

.cosmo-action-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.cosmo-action-card-approve,
.cosmo-action-card-cancel {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cosmo-action-card-approve {
  background: var(--accent, #14b8a6);
  color: #06231f;
}

.cosmo-action-card-cancel {
  background: transparent;
  border-color: var(--border-color, rgba(255, 255, 255, 0.18));
  color: var(--text-secondary);
}

.cosmo-action-card-approve:disabled,
.cosmo-action-card-cancel:disabled {
  opacity: 0.55;
  cursor: default;
}

.cosmo-action-card.is-executing {
  border-left-color: var(--warning, #f59e0b);
}

.cosmo-action-card.is-completed {
  border-left-color: var(--success, #22c55e);
}

.cosmo-action-card.is-completed .cosmo-action-card-badge {
  background: var(--success, #22c55e);
}

.cosmo-action-card.is-failed {
  border-left-color: var(--danger, #ef4444);
}

.cosmo-action-card.is-failed .cosmo-action-card-badge {
  background: var(--danger, #ef4444);
  color: #fff;
}

.cosmo-action-card.is-failed .cosmo-action-card-status {
  color: var(--danger, #ef4444);
}

/* Stale, expired and cancelled are all "this is over, nothing happened" —
   the same muted treatment, so none of them can be mistaken for a result. */
.cosmo-action-card.is-stale,
.cosmo-action-card.is-expired,
.cosmo-action-card.is-cancelled {
  border-left-color: var(--text-secondary);
  opacity: 0.75;
}

.cosmo-action-card.is-stale .cosmo-action-card-badge,
.cosmo-action-card.is-expired .cosmo-action-card-badge,
.cosmo-action-card.is-cancelled .cosmo-action-card-badge {
  background: var(--text-secondary);
  color: var(--bg-primary, #0d1117);
}

/* Deliberately quiet: a note, not an ad. */
.assistant-answer-note {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.85;
}

.assistant-answer-note[hidden] {
  display: none;
}

/* Quieter than the note above — this is a standing caveat, not a message, and
   it sits under every answer. It must be readable if you look for it and
   invisible if you're not. */
.assistant-answer-disclaimer {
  margin-top: 6px;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text-secondary);
  opacity: 0.6;
}

.assistant-answer-disclaimer[hidden] {
  display: none;
}

.assistant-thinking-dots {
  display: none;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}

.assistant-answer-panel.is-thinking .assistant-thinking-dots {
  display: inline-flex;
}

.assistant-thinking-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: assistant-thinking-pulse 1.2s ease-in-out infinite;
}

.assistant-thinking-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.assistant-thinking-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes assistant-thinking-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* The rotating "working on it" line. Deliberately NOT styled like
   .assistant-answer-body — smaller, muted and italic — because the two used to
   share an element and read as one sentence in Cosmo's voice. Chatter and
   answer must never be mistaken for each other. */
.assistant-answer-thinking {
  margin-top: 3px;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
}

.assistant-answer-thinking[hidden] {
  display: none;
}

/* One span per character, each starting fractionally later than the last, so
   the lift travels along the line as a wave. */
.assistant-thinking-char {
  display: inline-block;
  white-space: pre;
  animation: assistant-thinking-wave 2.6s ease-in-out infinite;
}

@keyframes assistant-thinking-wave {
  0%, 65%, 100% { transform: translateY(0); opacity: 0.7; }
  32% { transform: translateY(-1.5px); opacity: 1; }
}

/* Cycles pressed/unpressed to point at the Enter key without a line of copy
   telling people to press it. */
.assistant-enter-hint {
  display: none;
  align-items: center;
}

.assistant-mode-toggle.is-submit .assistant-enter-hint {
  display: inline-flex;
}

.assistant-enter-key {
  width: 20px;
  height: 15px;
  display: block;
  overflow: visible;
}

.assistant-enter-key-cap,
.assistant-enter-key-glyph {
  transform-origin: center;
  animation: assistant-enter-press 2.2s ease-in-out infinite;
}

.assistant-enter-key-cap {
  fill: currentColor;
  fill-opacity: 0.16;
  stroke: currentColor;
  stroke-opacity: 0.55;
  stroke-width: 1.2;
}

.assistant-enter-key-glyph {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes assistant-enter-press {
  0%, 58%, 100% { transform: translateY(0); }
  72%, 86% { transform: translateY(1.3px); }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-thinking-dots i {
    animation: none;
    opacity: 0.6;
  }

  .assistant-thinking-char,
  .assistant-enter-key-cap,
  .assistant-enter-key-glyph {
    animation: none;
  }

  .assistant-thinking-char {
    opacity: 1;
  }
}

.calendar-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.calendar-search-results[hidden] {
  display: none;
}

.search-result-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(74, 158, 255, 0.1);
}

.search-result-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.search-result-date {
  font-size: 0.8rem;
  color: var(--accent-blue);
  margin-bottom: 4px;
}

.search-result-details {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.search-result-details span {
  display: inline-block;
  margin-right: 12px;
}

.search-result-grouped {
  cursor: default;
}

.search-result-grouped:hover {
  background: transparent;
}

.search-result-date-row {
  padding: 6px 10px;
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--accent-blue);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.search-result-date-row:hover {
  background: rgba(74, 158, 255, 0.12);
}

.search-result-phase-row.phase-setup,
.search-result-phase-pill.phase-setup {
  color: #b45309;
}

.search-result-phase-row.phase-takedown,
.search-result-phase-pill.phase-takedown {
  color: #4b5563;
}

.search-result-phase-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px;
}

.search-result-phase-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.76rem;
  color: var(--accent-blue);
  cursor: pointer;
}

.search-result-phase-pill:hover {
  background: rgba(74, 158, 255, 0.12);
}

.search-result-items {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 4px;
  opacity: 0.8;
}

.search-section-heading {
  padding: 10px 16px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.08);
  border-bottom: 1px solid var(--border);
}

.search-result-document {
  display: grid;
  gap: 6px;
}

.search-result-document-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.search-result-document-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent-blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-result-document-snippet {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.search-no-results {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.search-loading {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.search-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.75;
  animation: searchSpin 0.7s linear infinite;
}

@keyframes searchSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Search results cascade in one-by-one as the (potentially large) result set
   renders, giving a "found-as-you-go" feel on big tenants. Per-item delay is
   set inline in app.js. */
@keyframes searchPopIn {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.search-result-pop {
  animation: searchPopIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .search-result-pop {
    animation: none;
  }
}

.search-result-action {
  cursor: default;
}

.search-result-action:hover {
  background: transparent;
}

.search-expand-btn {
  width: 100%;
  justify-content: center;
}

.search-expand-note {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
}

.calendar-month-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

.calendar-nav-select {
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.calendar-nav-select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.calendar-loading {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.calendar-loading-text {
  display: none;
}

#calendar {
  position: relative;
  min-height: 360px;
}

.inventory-trigger {
  background: var(--accent-blue);
  color: white;
}

.inventory-trigger:hover {
  box-shadow: 0 10px 20px var(--accent-glow);
  background: var(--accent-blue-dark);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 1000;
}

.modal[hidden] {
  display: none;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  width: min(760px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.modal-content h3 {
  color: var(--accent-blue);
  margin-top: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inventory-group {
  margin: 20px 0;
}

.inventory-row {
  display: grid;
  grid-template-columns: 1fr 100px 36px;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.inventory-row input {
  width: 100%;
}

.inventory-label {
  font-weight: 500;
}

.delete-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  background: transparent;
  color: var(--accent-red);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.delete-btn:hover {
  background: var(--accent-red);
  color: white;
  border-color: var(--accent-red);
  transform: none;
  box-shadow: none;
}

.add-form {
  margin-top: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: center;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Day detail modal */
.day-modal-content {
  max-width: 520px;
}

.day-modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.day-modal-header-left > h3 {
  margin-bottom: 0;
}

.day-modal-weather {
  display: inline-flex;
  align-items: center;
}

.day-weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  min-height: 30px;
}

.day-weather-chip.is-loading {
  opacity: 0.8;
  min-width: 48px;
  justify-content: center;
}

.day-weather-chip.is-estimate {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.06);
}

.day-weather-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
}

.day-weather-temp {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.day-weather-chip[data-variant="estimate"] .day-weather-icon {
  filter: saturate(0.9);
}

.print-sheets-modal-content {
  max-width: 920px;
}

.print-sheets-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.print-sheets-layout-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#print-sheets-crew {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
}

.print-sheets-note {
  margin: 2px 0 0;
  line-height: 1.4;
}

.print-sheets-address-list {
  display: grid;
  gap: 14px;
}

.print-sheets-address-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-secondary);
  display: grid;
  gap: 10px;
}

.print-sheets-address-title {
  font-weight: 600;
  color: var(--text-primary);
}

.print-sheets-address-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.print-sheets-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.day-detail-group {
  margin: 20px 0;
}

.day-detail-group-details {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.day-detail-group h4 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--accent-blue);
}

.day-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.day-detail-name {
  font-weight: 500;
}

.day-detail-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.9rem;
}

.avail-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.8rem;
}

.avail-badge.full {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
}

.avail-badge.partial {
  background: rgba(255, 181, 107, 0.2);
  color: #ffb56b;
  border: 1px solid #ffb56b;
}

.avail-badge.none {
  background: rgba(255, 74, 74, 0.2);
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
}

.avail-badge.overbooked {
  background: rgba(239, 68, 68, 0.22);
  color: #ef4444;
  border: 2px solid #ef4444;
  font-weight: 700;
}

.rented-info {
  color: var(--text-secondary);
}

/* Day Detail Modal Sections */
.day-detail-section {
  margin-bottom: 24px;
}

.day-inventory-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-inventory-summary::-webkit-details-marker {
  display: none;
}

.day-inventory-summary::after {
  content: "▼";
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.day-inventory-details[open] .day-inventory-summary::after {
  transform: rotate(180deg);
}

.day-inventory-content {
  margin-top: 16px;
}

.day-section-header {
  color: var(--accent-blue);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-blue);
  font-size: 1.1rem;
}

.day-detail-category {
  color: var(--text-secondary);
  margin: 12px 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.day-detail-category-summary {
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg-tertiary);
  border-bottom: 1px solid transparent;
}

.day-detail-category-summary::-webkit-details-marker {
  display: none;
}

.day-detail-category-summary::after {
  content: "▼";
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: 10px;
  transition: transform 0.2s ease;
}

.day-detail-group-details[open] .day-detail-category-summary {
  border-bottom-color: var(--border);
}

.day-detail-group-details[open] .day-detail-category-summary::after {
  transform: rotate(180deg);
}

.day-detail-category-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: normal;
  text-transform: none;
}

.day-detail-group-items {
  padding: 0 14px 6px;
}

.day-detail-group-items .day-detail-row:last-child {
  border-bottom: 0;
}

.events-section {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.event-detail-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

.event-detail-card.canceled-event {
  border-color: rgba(255, 91, 91, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 91, 91, 0.28);
}

.event-detail-card.picked-up-past {
  border-color: var(--pickup-indicator-color, #facc15);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.25);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pickup-indicator-color, #facc15) 30%, transparent);
}

.event-detail-card .picked-up-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pickup-indicator-color, #facc15);
  color: #111;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 1;
}

.event-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.event-detail-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.event-edit-btn {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.google-badge {
  font-size: 0.75rem;
  padding: 4px 8px;
  background: rgba(66, 133, 244, 0.2);
  color: #4285f4;
  border-radius: 4px;
  font-weight: 500;
}

.event-detail-card.google-event {
  border-left: 3px solid #4285f4;
}

/* Collapsible event cards (multi-event days) */
.event-collapsible {
  width: 100%;
}

.event-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

.event-collapsible > summary::-webkit-details-marker {
  display: none;
}

.event-collapsible > summary::before {
  content: "\25B6";
  font-size: 0.7rem;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.event-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.event-collapsible-name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.event-collapsible-address {
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-collapsible > summary .event-edit-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.event-collapsible > summary .google-badge {
  margin-left: auto;
  flex-shrink: 0;
}

.event-collapsible .event-detail-info {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.event-detail-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.event-detail-info p {
  margin: 6px 0;
}

.event-detail-info strong {
  color: var(--text-primary);
}

.event-detail-info a {
  color: var(--accent-blue);
}

.event-detail-info a:hover {
  color: var(--accent-blue-dark);
}

.event-detail-items {
  margin-top: 10px;
}

.event-detail-items ul {
  margin: 6px 0 0 20px;
  padding: 0;
}

.event-detail-items li {
  margin: 4px 0;
}

.event-item-note {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.event-detail-description {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.event-detail-description pre {
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  padding: 10px;
  border-radius: 6px;
}

/* Event Totals */
.event-detail-totals {
  margin: 12px 0;
}

.event-totals-list {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
}

.event-totals-list .totals-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.9rem;
}

.event-totals-list .deposit-paid-row {
  align-items: center;
}

.event-totals-list .deposit-paid-note {
  align-items: flex-start;
  gap: 10px;
  justify-content: flex-start;
}

.event-totals-list .deposit-paid-note-text {
  flex: 1;
  white-space: pre-wrap;
  text-align: right;
}

.deposit-paid-input {
  width: 110px;
  padding: 4px 6px;
  text-align: right;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.event-totals-list .grand-total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 600;
  color: var(--accent-green);
}

.event-totals-list .deposit-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.deposit-paid-check {
  color: var(--accent-green);
  font-weight: 700;
}

.event-totals-list .amount-remaining {
  font-weight: 600;
  color: var(--accent-blue);
}

.event-totals-list .deposit-toggle-row {
  justify-content: flex-start;
}

.deposit-paid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.deposit-paid-toggle input {
  accent-color: var(--accent-green);
}

/* Event Documents */
.event-documents-section {
  margin: 12px 0;
}

.event-documents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.event-documents-summary {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.event-documents-hub {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
}

.event-documents-hub > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.event-documents-hub > summary::-webkit-details-marker {
  display: none;
}

.event-documents-hub > summary::after {
  content: "▾";
  color: var(--text-secondary);
  transition: transform 0.15s ease;
}

.event-documents-hub[open] > summary::after {
  transform: rotate(180deg);
}

.event-documents-body {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
}

.event-documents-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 10px;
}

.event-documents-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.event-documents-group-label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}

.event-documents-group-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.event-documents-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.document-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.document-link:hover {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.document-link svg {
  flex-shrink: 0;
}

.event-document-muted {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.event-document-muted.error {
  color: var(--accent-red);
}

.event-payment-modal-content {
  width: min(560px, 92vw);
}

.event-payment-modal-subtitle {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.event-payment-modal-copy {
  margin: 18px 0 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.event-payment-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.event-payment-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.deposit-paid-helper {
  align-items: flex-start;
}

.deposit-paid-helper > span:first-child {
  min-width: 0;
}

.deposit-paid-helper .deposit-paid-note-text {
  text-align: left;
}

.event-layout-doc-list {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.event-upload-doc-list {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.event-upload-doc-card {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  background: var(--bg-card);
}

.event-upload-doc-name {
  color: var(--text-primary);
  font-weight: 600;
  word-break: break-word;
}

.event-upload-doc-meta {
  color: var(--text-secondary);
  font-size: 0.78rem;
  margin-top: 2px;
}

.event-upload-doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event-layout-doc-card {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  text-decoration: none;
  background: var(--bg-card);
}

.event-layout-doc-card:hover {
  border-color: var(--accent-blue);
  background: rgba(37, 99, 235, 0.07);
}

.event-layout-doc-card[aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
}

.event-layout-doc-name {
  color: var(--text-primary);
  font-weight: 600;
}

.event-layout-doc-meta {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

/* Contract Signing Section */
.contract-signing-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.event-documents-contracts {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.contract-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent-blue);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.contract-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

.contract-send-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.contract-status-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contract-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.contract-badge.signed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.contract-badge.pending {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.contract-signer {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.contract-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.contract-action-btn:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.contract-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contract-action-btn.resend:hover {
  background: var(--accent-blue);
}

.contract-action-btn.copy:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.contract-action-btn.view:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.contract-action-btn.download:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

a.contract-action-btn {
  text-decoration: none;
}

.contract-no-email {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Contracts List (multi-contract display) */
.contracts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contract-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.contract-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contract-template-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.contract-item-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.contract-item-actions {
  display: flex;
  gap: 6px;
}

.contract-action-btn.small {
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* Spinner for loading states */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mapping Analysis Section (per event) */
.mapping-analysis-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.mapping-analysis-summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--accent-orange);
  font-weight: 500;
  padding: 4px 0;
}

.mapping-analysis-summary:hover {
  color: var(--accent-blue);
}

.mapping-analysis-content {
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 8px;
  font-size: 0.85rem;
}

.mapping-analysis-loading,
.mapping-analysis-empty,
.mapping-analysis-error {
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

.mapping-analysis-error {
  color: var(--accent-red);
}

.analysis-text-section {
  margin-bottom: 12px;
}

.analysis-text-preview {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: pre-wrap;
  max-height: 100px;
  overflow-y: auto;
  color: var(--text-secondary);
}

.analysis-matches-section,
.analysis-parsed-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.analysis-matches-list,
.analysis-parsed-list {
  margin: 8px 0 0 0;
  padding-left: 16px;
  list-style: none;
}

.analysis-match-item,
.analysis-parsed-list li {
  margin: 6px 0;
  line-height: 1.5;
}

.analysis-match-source {
  color: var(--accent-green);
  font-weight: 500;
}

.analysis-match-target {
  color: var(--accent-blue);
}

.analysis-match-count {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.analysis-expands {
  display: block;
  margin-left: 12px;
  font-size: 0.8rem;
  color: var(--accent-purple, #9b59b6);
}

.analysis-parsed-count {
  font-weight: 600;
  color: var(--accent-blue);
}

.analysis-composite-tag {
  font-size: 0.75rem;
  background: var(--accent-purple, #9b59b6);
  color: white;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.analysis-no-matches,
.analysis-no-parsed {
  color: var(--text-secondary);
  font-style: italic;
  margin: 8px 0 0;
}

/* Inventory Mapping Analysis (in Inventory Available section) */
.inventory-mapping-analysis {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.inventory-analysis-summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--accent-blue);
  font-weight: 500;
  padding: 4px 0;
}

.inventory-analysis-summary:hover {
  color: var(--accent-green);
}

.inventory-analysis-content {
  margin-top: 10px;
  font-size: 0.85rem;
}

.weekend-note {
  background: rgba(241, 196, 15, 0.15);
  border: 1px solid var(--accent-orange);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.inventory-analysis-event {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.inventory-analysis-event-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.inventory-analysis-event-title .google-tag {
  font-size: 0.7rem;
  background: var(--accent-blue);
  color: white;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
  margin-left: 6px;
}

.inventory-analysis-event-title .weekend-spread-tag {
  font-size: 0.7rem;
  background: rgba(241, 196, 15, 0.18);
  border: 1px solid var(--accent-orange);
  color: var(--text-primary);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
  margin-left: 6px;
  white-space: nowrap;
}

.inventory-analysis-matches {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}

.inventory-analysis-matches li {
  margin: 4px 0;
  line-height: 1.4;
  font-size: 0.8rem;
}

.inventory-analysis-no-text,
.inventory-analysis-no-matches {
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
  font-size: 0.8rem;
}

.no-events-message {
  color: var(--text-secondary);
  text-align: center;
  padding: 20px;
}

/* Calendar styling for days with rentals */
.fc .fc-daygrid-day {
  cursor: pointer;
  transition: background 0.15s ease;
}

.fc .fc-daygrid-day:hover {
  background: rgba(74, 158, 255, 0.1);
}

.fc .fc-daygrid-event {
  white-space: normal;
}

.fc-event.availability-event {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  padding: 6px 8px;
}

.fc-event.availability-event.has-events {
  border-left: 4px solid var(--accent-blue) !important;
  background: rgba(74, 158, 255, 0.1) !important;
}

.availability-card {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
}

.event-counts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.event-count {
  font-weight: 500;
  text-align: center;
}

.event-count.no-events {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.event-count.has-events {
  color: var(--accent-blue);
  font-weight: 600;
}

.event-count.canceled-events {
  color: var(--accent-red);
  font-weight: 600;
}

.event-count.setup-events {
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.7rem;
}

.event-count.takedown-events {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.7rem;
}

.event-count.picked-up-events {
  color: var(--pickup-indicator-color, #facc15);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}

/* ── Booking calendar rows (classic theme) ─────────────────────────────────
   Light days render labeled rows; busy days render a count summary that opens
   the existing day-detail surface.                                             */

.fc .fc-daygrid-event.booking-day-detail,
.fc .fc-daygrid-event.booking-day-summary,
.fc .fc-daygrid-event.booking-span {
  min-height: unset;
  border: none !important;
  border-radius: 8px;
  padding: 0;
  margin: 1px 3px;
  cursor: pointer;
  box-shadow: none;
  background: transparent !important;
}

.fc .fc-daygrid-event.booking-day-detail .fc-event-main,
.fc .fc-daygrid-event.booking-day-summary .fc-event-main,
.fc .fc-daygrid-event.booking-span .fc-event-main {
  padding: 0;
  overflow: hidden;
}

.booking-summary-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-blue);
  color: var(--text-primary);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow: hidden;
}

.booking-summary-pill__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.booking-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-blue);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow: hidden;
}

.booking-pill__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text-primary);
}

.booking-pill__time {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.66rem;
}

.booking-pill__check {
  flex: 0 0 auto;
  color: var(--pickup-indicator-color, #facc15);
  font-weight: 700;
}

/* Week view lists every booking, so closing one out is a row action there. */
.booking-pill__pickup {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.booking-pill__pickup svg {
  width: 11px;
  height: 11px;
}

.booking-pill__pickup:hover {
  background: var(--pickup-indicator-color, #facc15);
  border-color: var(--pickup-indicator-color, #facc15);
  color: #10131a;
}

.booking-pill__pickup:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.booking-pill__pickup[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.fc .booking-span--canceled .booking-pill {
  border-left-color: var(--accent-red, #ef4444);
  opacity: 0.75;
}

.fc .booking-span--canceled .booking-pill__label {
  text-decoration: line-through;
  color: var(--text-secondary);
  font-weight: 500;
}

.fc .booking-span--picked-up .booking-pill {
  border-left-color: var(--pickup-indicator-color, #facc15);
}

/* Per-day logistics summary — setup/takedown/canceled as plain words */
.cal-day-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 1px 3px 3px;
}

.cal-day-summary__tag {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}

.cal-day-summary__tag--setup {
  color: var(--accent-orange, #f59e0b);
}

.cal-day-summary__tag--takedown {
  color: #94a3b8;
}

.cal-day-summary__tag--canceled {
  color: var(--accent-red, #ef4444);
}

/* "N more" overflow control */
.fc .fc-daygrid-more-link {
  display: inline-block;
  margin: 1px 3px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--accent-blue);
  font-size: 0.66rem;
  font-weight: 700;
}

.fc .fc-daygrid-more-link:hover {
  background: var(--bg-secondary);
}

/* ── Week grid ───────────────────────────────────────────────────────────
   One row of seven days has room to spell everything out, so week view lists
   every booking rather than collapsing to a count or an overflow link. The day
   cell carries its own height so a week with nothing booked still reads as a
   full row of roomy, roughly square cells.                                  */

#calendar.cal-view-week {
  min-height: 0;
}

#calendar.cal-view-week .fc .fc-daygrid-day-frame {
  min-height: 190px;
}

#calendar.cal-view-week .fc .fc-daygrid-day-events {
  margin-bottom: 4px;
}

/* ── Legacy day chips (classic theme) ──────────────────────────────────── */

.fc .fc-daygrid-day-top {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
}

.cal-day-chip-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  padding-right: 4px;
  padding-bottom: 1px;
}

.cal-day-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 99px;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.cal-day-chip--booked {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-blue, #4a9eff);
}

.cal-day-chip--setup {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.cal-day-chip--takedown {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

.cal-day-chip--canceled {
  background: rgba(239, 68, 68, 0.18);
  color: var(--accent-red, #ef4444);
}

.cal-day-chip--picked-up {
  background: rgba(250, 204, 21, 0.22);
  background: color-mix(in srgb, var(--pickup-indicator-color, #facc15) 24%, transparent);
  color: var(--pickup-indicator-color, #b45309);
}

/* ── Commander due-date markers (classic theme) ─────────────────────────────
   Violet clipboard pill, distinct from booking bars; deep-links to Commander.
   Auto-generated automation items are excluded server-side.                   */
.fc .fc-daygrid-event.commander-due,
.fc .fc-daygrid-event.commander-due:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1px 3px !important;
}

.commander-due-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 7px 2px 5px;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.4);
  white-space: nowrap;
  overflow: hidden;
}

.commander-due-chip__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.commander-due-chip__icon svg {
  width: 11px;
  height: 11px;
  display: block;
}

.commander-due-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commander-due--task .commander-due-chip {
  background: rgba(124, 58, 237, 0.08);
  border-style: dashed;
}

.commander-due--overdue .commander-due-chip {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.4);
}

/* Pay-day pills — green dollar chips, distinct from bookings and Commander pills. */
.fc .fc-daygrid-event.payday-marker,
.fc .fc-daygrid-event.payday-marker:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1px 3px !important;
}

.payday-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 7px 2px 5px;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.45);
  white-space: nowrap;
  overflow: hidden;
}

.payday-chip__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.payday-chip__icon svg {
  width: 11px;
  height: 11px;
  display: block;
}

.payday-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* My Pay Stub modal body */
.paystub-view-body .paystub-view-muted {
  color: var(--text-secondary, #888);
  font-size: 0.9rem;
  margin: 0;
}

.paystub-view-period {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paystub-view-payday {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #888);
}

.paystub-view-summary {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-color, #2a2d35);
  border-radius: 10px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

.paystub-view-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color, #2a2d35);
  font-size: 0.88rem;
  color: var(--text-primary, #fff);
}

.paystub-view-row:last-child {
  border-bottom: none;
}

.paystub-view-row span:first-child {
  color: var(--text-secondary, #888);
}

.paystub-view-total span {
  font-weight: 700;
}

.paystub-view-total span:last-child {
  color: #22c55e;
  font-size: 1rem;
}

.paystub-view-heading {
  margin: 0 0 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #888);
}

.paystub-view-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.paystub-view-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.paystub-view-table th,
.paystub-view-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color, #2a2d35);
  white-space: nowrap;
}

.paystub-view-table th {
  color: var(--text-secondary, #888);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.paystub-view-num {
  text-align: right !important;
}

.calendar-overlay-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 6px 2px 8px;
}

.cal-overlay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  user-select: none;
}

.cal-overlay-toggle input {
  cursor: pointer;
}

.cal-overlay-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

.cal-overlay-swatch--commander {
  background: rgba(124, 58, 237, 0.25);
  border: 1px solid rgba(124, 58, 237, 0.55);
}

.event-phases-toggle {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--border-color, #d4d4d8);
  border-radius: 6px;
  background: var(--bg-secondary, transparent);
}
.event-phases-toggle > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text-primary);
}
.event-phase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 700px) {
  .event-phase-grid { grid-template-columns: 1fr; }
}
.event-phase-fieldset {
  border: 1px solid var(--border-color, #d4d4d8);
  border-radius: 6px;
  padding: 8px 10px;
}
.event-phase-fieldset legend {
  font-weight: 600;
  padding: 0 6px;
}
.event-phases-toggle .phase-hint {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin: 4px 0 0;
}
.event-phases-toggle .phase-skip-weekend {
  background: none;
  border: 1px solid var(--border-color, #d4d4d8);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.75rem;
  cursor: pointer;
  margin-left: 4px;
}
/* Single-day / date-range mode switch */
.phase-mode-switch {
  display: inline-flex;
  margin-top: 10px;
  border: 1px solid var(--border-color, #d4d4d8);
  border-radius: 6px;
  overflow: hidden;
}
.phase-mode-btn {
  background: none;
  border: none;
  padding: 4px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
}
.phase-mode-btn + .phase-mode-btn {
  border-left: 1px solid var(--border-color, #d4d4d8);
}
.phase-mode-btn.is-active {
  background: var(--accent-color, #2563eb);
  color: #fff;
}
.phase-mode-forced-note {
  font-size: 0.78rem;
  color: var(--accent-color, #2563eb);
  margin: 6px 0 0;
}
.event-phases-toggle.phase-mode-single .phase-field-end { display: none; }
.event-phases-toggle.phase-mode-single .phase-hint-range { display: none; }
.event-phases-toggle.phase-mode-range .phase-hint-single { display: none; }
.event-phase-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.event-phase-badge.phase-setup {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.event-phase-badge.phase-takedown {
  background: rgba(107, 114, 128, 0.15);
  color: #4b5563;
}

@media (max-width: 900px) {
  .day-detail-stats {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
}


/* FullCalendar Dark Theme */
.fc {
  color: var(--text-primary);
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--border);
}

.fc-theme-standard .fc-scrollgrid {
  border-color: var(--border);
}

.fc-col-header-cell {
  background: var(--bg-secondary);
  color: var(--accent-blue);
  font-weight: 600;
}

.fc-daygrid-day {
  background: var(--bg-card);
}

.fc-day-today {
  background: rgba(74, 158, 255, 0.1) !important;
}

.fc-button {
  background: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: white !important;
}

.fc-button:hover {
  background: var(--accent-blue-dark) !important;
  border-color: var(--accent-blue-dark) !important;
}

.fc-button:disabled {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  opacity: 0.5;
}

.fc-toolbar-title {
  color: var(--text-primary) !important;
}

.fc-daygrid-day-number {
  color: var(--text-primary);
}

.fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: var(--accent-blue);
  font-weight: 700;
}

@media (max-width: 700px) {
  .page {
    padding: 24px 16px 48px;
  }

  .calendar-panel {
    padding: 8px;
    overflow-x: auto;
  }

  .calendar-search-input {
    padding: 8px 32px 8px 34px;
    font-size: 0.85rem;
  }

  .calendar-search-results {
    max-height: 300px;
  }

  .calendar-actions {
    justify-content: stretch;
  }

  .inventory-trigger {
    width: 100%;
  }

  .inventory-inline-content {
    padding: 18px;
  }

  .modal-content {
    width: min(95vw, 560px);
    padding: 18px;
    max-height: 95vh;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .fc .fc-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1rem;
  }

  .fc .fc-button {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .fc .fc-daygrid-day {
    min-height: 64px;
  }

  /* Week is the first view button on phones, so its cells stay tappable-tall
     even though seven columns are narrow here. */
  #calendar.cal-view-week .fc .fc-daygrid-day-frame {
    min-height: 104px;
  }

  .fc .fc-daygrid-day-number {
    font-size: 0.75rem;
  }

  .fc-event.availability-event:not(.has-events) {
    display: none;
  }

  .fc-event.availability-event {
    padding: 4px 6px;
  }

  .availability-card {
    font-size: 0.7rem;
    gap: 4px;
    line-height: 1.2;
    padding: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .event-counts {
    gap: 4px;
  }

  .availability-row {
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 520px) {
  .platform-name {
    display: none;
  }

  .availability-card {
    font-size: 0.7rem;
  }

  .event-counts {
    gap: 3px;
  }

  .availability-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .availability-value {
    font-size: 0.75rem;
  }

  .modal-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .inventory-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .fc .fc-daygrid-day {
    min-height: 48px;
  }

  .fc .fc-daygrid-day-frame {
    padding: 2px;
  }

  .fc .fc-event {
    font-size: 0.7rem;
    padding: 2px 4px;
  }
}

/* Event Modal Styles */
#event-modal > .modal-content {
  width: min(900px, 95vw);
}

.event-modal-form {
  display: grid;
  gap: 20px;
}

.event-form-section {
  display: grid;
  gap: 12px;
}

.event-form-section h4 {
  color: var(--accent-blue);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.event-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.event-form-row.full-width {
  grid-template-columns: 1fr;
}

.event-form-group {
  display: grid;
  gap: 6px;
}

.event-form-group label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.event-form-group input,
.event-form-group textarea,
.event-form-group select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
}

.event-form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.event-form-group input:focus,
.event-form-group textarea:focus,
.event-form-group select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Customer lookup */
.customer-lookup-wrapper {
  position: relative;
}

.customer-lookup-results {
  position: absolute;
  z-index: 1200;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.customer-lookup-results[hidden] {
  display: none;
}

.customer-lookup-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.customer-lookup-option:last-child {
  border-bottom: 0;
}

.customer-lookup-option:hover,
.customer-lookup-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.customer-lookup-option span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-lookup-state {
  padding: 12px;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.customer-lookup-state.is-error {
  color: var(--danger, #dc3545);
}

/* Address Autocomplete */
.address-autocomplete-wrapper {
  position: relative;
}

.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--accent-blue);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.address-suggestion-item {
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.address-suggestion-item:last-child {
  border-bottom: none;
}

.address-suggestion-item:hover,
.address-suggestion-item.selected {
  background: var(--accent-blue);
  color: white;
}

.address-suggestion-item .suggestion-main {
  font-weight: 500;
  margin-bottom: 2px;
}

.address-suggestion-item .suggestion-secondary {
  font-size: 0.85em;
  color: var(--text-secondary);
}

.address-suggestion-item:hover .suggestion-secondary,
.address-suggestion-item.selected .suggestion-secondary {
  color: rgba(255, 255, 255, 0.8);
}

.address-loading {
  padding: 12px 14px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}

.event-items-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.event-items-category {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.event-items-category-header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--accent-blue);
  font-weight: 600;
}

.event-items-category-header::-webkit-details-marker {
  display: none;
}

.event-items-category-header::after {
  content: "▼";
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.event-items-category[open] .event-items-category-header::after {
  transform: rotate(180deg);
}

.event-items-category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  padding: 12px;
}

.event-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.event-item-row input[type="number"] {
  width: 70px;
  padding: 6px 8px;
  text-align: center;
  flex-shrink: 0;
}

.event-item-name {
  color: var(--text-primary);
  font-weight: 500;
}

.event-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.event-modal-danger-actions,
.event-modal-primary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.event-modal-primary-actions {
  justify-content: flex-end;
  margin-left: auto;
}

@media (max-width: 720px) {
  .event-modal-actions {
    align-items: stretch;
  }

  .event-modal-danger-actions,
  .event-modal-primary-actions {
    width: 100%;
  }

  .event-modal-primary-actions {
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* Event Builder Totals Bar */
.evt-totals-bar {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.evt-items-section .quote-categories-container {
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.weekend-summary {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.weekend-summary h5 {
  color: var(--accent-blue);
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.weekend-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  font-size: 0.8rem;
}

.weekend-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.weekend-summary-item:last-child {
  border-bottom: none;
}

.weekend-summary-label {
  color: var(--text-secondary);
}

.weekend-summary-value {
  color: var(--accent-blue);
  font-weight: 600;
}

/* Inventory Modal Styles */
.inventory-modal-content {
  width: min(600px, 95vw);
}

.inventory-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.inventory-tab {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.inventory-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.inventory-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.inventory-tab.active:hover {
  background: var(--accent-blue-dark);
}

.inventory-tab-content[hidden] {
  display: none;
}

.inventory-search {
  margin-bottom: 16px;
}

.inventory-search input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.inventory-search input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.inventory-search input::placeholder {
  color: var(--text-secondary);
}

.inventory-list-container {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.inventory-list-container::-webkit-scrollbar {
  width: 6px;
}

.inventory-list-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.inventory-list-container::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.inventory-list-container::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

.inventory-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.inventory-empty-state p {
  margin: 0;
  font-size: 1rem;
}

.inventory-group {
  margin-bottom: 20px;
}

.inventory-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.inventory-group-header h4 {
  margin: 0;
  color: var(--accent-blue);
  font-size: 1rem;
}

.inventory-group-count {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.inventory-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}

.inventory-item-card:hover {
  border-color: var(--accent-blue);
}

.inventory-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inventory-item-name {
  font-weight: 600;
  color: var(--text-primary);
}

.inventory-item-quantity {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.inventory-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inventory-edit-hint {
  margin: 10px 0 14px;
  font-size: 0.9rem;
}

.inventory-quick-input {
  width: 70px;
  padding: 8px 10px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.inventory-quick-input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.inventory-edit-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent-blue);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.inventory-edit-btn:hover {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
  transform: none;
  box-shadow: none;
}

.inventory-edit-btn svg {
  width: 16px;
  height: 16px;
}

.inventory-edit-btn--details {
  width: auto;
  padding: 0 12px;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Add Item Form */
.add-item-form {
  display: grid;
  gap: 16px;
}

.add-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Edit Item Modal */
.edit-item-modal-content {
  width: min(450px, 95vw);
}

.edit-item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.edit-item-right-actions {
  display: flex;
  gap: 12px;
}

/* Internal item details / loan sections */
.item-internal-section {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted, rgba(0,0,0,0.02));
}
.item-internal-section > summary {
  cursor: pointer;
  font-weight: 600;
  outline: none;
}
.item-internal-note {
  margin: 6px 0 10px;
  font-size: 0.8rem;
}
.item-loan-preview {
  margin: 8px 0 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface, rgba(0,0,0,0.04));
  font-size: 0.88rem;
}
.item-loan-doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.edit-item-loan-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.inventory-item-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.72rem;
  background: var(--surface, rgba(0,0,0,0.06));
}
.inventory-item-badge-loan {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.inventory-item-badge-internal {
  background: rgba(107, 114, 128, 0.16);
  color: #374151;
}

@media (max-width: 520px) {
  .inventory-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .inventory-item-actions {
    width: 100%;
    justify-content: space-between;
  }

  .inventory-quick-input {
    flex: 1;
    max-width: 100px;
  }

  .edit-item-actions {
    flex-direction: column;
    gap: 12px;
  }

  .edit-item-right-actions {
    width: 100%;
    justify-content: flex-end;
  }

  #delete-item-btn {
    width: 100%;
  }
}

/* Mappings Modal Styles */
.mappings-modal-content {
  width: min(700px, 95vw);
}

.mappings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.mappings-tab {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.mappings-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.mappings-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.mappings-tab.active:hover {
  background: var(--accent-blue-dark);
}

.mappings-tab-content[hidden] {
  display: none;
}

.mappings-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.mappings-search {
  flex: 1;
  min-width: 200px;
}

.mappings-search input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.mappings-search input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.mappings-search input::placeholder {
  color: var(--text-secondary);
}

.mappings-bulk-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mappings-select-all-label {
  font-size: 0.85rem;
  white-space: nowrap;
  margin-right: 4px;
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.btn-small:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-success {
  background: var(--accent-green);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: var(--accent-green-dark);
}

.btn-warning {
  background: var(--accent-orange);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: var(--accent-orange-dark);
}

.btn-accent {
  background: var(--accent-blue);
  color: white;
}

.btn-accent:hover:not(:disabled) {
  background: var(--accent-blue-dark);
}

.mappings-apply-status {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mappings-apply-status.is-success {
  color: var(--accent-green);
}

.mappings-apply-status.is-error {
  color: var(--accent-red);
}

.mappings-list-container {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.mappings-list-container::-webkit-scrollbar {
  width: 6px;
}

.mappings-list-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.mappings-list-container::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.mappings-list-container::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

.mapping-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}

.mapping-item-card:hover {
  border-color: var(--accent-blue);
}

.mapping-item-card.disabled {
  opacity: 0.6;
}

.mapping-checkbox {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.mapping-item-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mapping-eq-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.mapping-source {
  font-weight: 600;
  color: var(--text-primary);
}

.mapping-equals {
  color: var(--text-secondary);
}

.mapping-target {
  font-weight: 600;
  color: var(--accent-blue);
}

.mapping-meta {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.mapping-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

@media (max-width: 520px) {
  .mapping-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mapping-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================
   QUOTES STYLES - REDESIGNED
   ============================================ */

.header-buttons {
  display: flex;
  gap: 12px;
}

/* Quotes Modal */
.quotes-modal-content {
  width: min(900px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}

.quotes-modal-content>.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 10;
}

.quotes-tabs {
  display: flex;
  gap: 8px;
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.quotes-tab {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s;
}

.quotes-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.quotes-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

/* Quote Builder Redesigned Layout */
.quote-builder-redesigned {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.quote-section {
  border-bottom: 1px solid var(--border);
}

.quote-section:last-of-type {
  border-bottom: none;
}

.quote-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-secondary);
  cursor: default;
}

.quote-section-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quote-section-body {
  padding: 16px 24px;
}

/* Customer Section */
.quote-customer-section .quote-section-body {
  padding-top: 12px;
  padding-bottom: 20px;
}

.quote-customer-reviews {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 35%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-blue) 7%, var(--bg-secondary));
}

.quote-customer-reviews-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.quote-customer-reviews-heading strong {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.quote-customer-reviews-heading span,
.quote-customer-review-meta,
.quote-customer-review-empty {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.quote-customer-reviews-list {
  display: grid;
  gap: 8px;
}

.quote-customer-review-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
}

.quote-customer-review-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-primary);
  font-size: 0.84rem;
}

.quote-customer-review-notes {
  margin: 7px 0 0;
  color: var(--text-primary);
  font-size: 0.86rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .quote-customer-reviews-heading,
  .quote-customer-review-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Items Section - Collapsible Categories */
.quote-items-section .quote-section-header {
  gap: 16px;
}

.quote-items-section .quote-items-search {
  flex: 1;
  max-width: 300px;
}

.quote-items-section .quote-items-search input {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.quote-items-section .quote-items-search input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.quote-categories-container {
  display: grid;
  gap: 10px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Category Accordion */
.quote-category-accordion {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Drag and Drop Styles */
.quote-category-accordion.draggable-source {
  opacity: 0.4;
  border: 2px dashed var(--accent-blue);
  background: var(--bg-card);
}

.quote-category-accordion.drag-over {
  border-top: 3px solid var(--accent-blue);
  margin-top: 4px;
}

.quote-category-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}

.quote-category-header[draggable="true"] {
  cursor: grab;
}

.quote-category-header[draggable="true"]:active {
  cursor: grabbing;
}

.quote-category-header:hover {
  background: rgba(74, 158, 255, 0.1);
}

.quote-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.quote-category-title .category-icon {
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.quote-category-title-text {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.quote-category-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
}

.category-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.category-selected {
  font-size: 0.8rem;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.category-chevron {
  color: var(--text-secondary);
  transition: transform 0.2s;
  font-size: 0.9rem;
}

.quote-category-accordion.expanded .category-chevron {
  transform: rotate(180deg);
}

.quote-category-items {
  display: none;
  padding: 12px 14px 14px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  gap: 10px;
}

.quote-category-accordion.expanded .quote-category-items {
  display: flex;
  flex-direction: column;
}

.override-tax-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
}

/* Item Cards */
.quote-item-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "stock qty";
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  min-width: 0;
}

.quote-item-card:hover {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.05);
}

.quote-item-card.selected {
  background: rgba(74, 158, 255, 0.15);
  border-color: var(--accent-blue);
}

.quote-item-card.no-price {
  opacity: 0.5;
  cursor: not-allowed;
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "stock"
    "price";
}

.quote-item-card .quote-item-name {
  grid-area: name;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.94rem;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote-item-card .quote-item-price {
  grid-area: price;
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
}

.quote-item-card.no-price .quote-item-price {
  color: var(--accent-red);
  font-size: 0.75rem;
  text-align: left;
}

.quote-item-stock-info {
  grid-area: stock;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.quote-item-card .quote-item-stock {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.quote-item-card .quote-item-stock.has-warning {
  cursor: help;
}

/* Quantity Controls in Item Card */
.quote-item-qty-controls {
  grid-area: qty;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}

.qty-btn:hover {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
  transform: none;
  box-shadow: none;
}

.qty-input {
  width: 56px;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.qty-input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Selected Items Section */
.quote-selected-section .quote-section-header .selected-count {
  font-size: 0.85rem;
  color: var(--accent-blue);
  font-weight: 600;
}

.quote-selected-items {
  max-height: calc(25vh - 50px);
  min-height: 80px;
  overflow-y: auto;
}

.quote-selected-items .empty-message {
  color: var(--text-secondary);
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}

.quote-selected-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 6px;
}

.quote-selected-row:last-child {
  margin-bottom: 0;
}

.quote-selected-package {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(74, 158, 255, 0.05));
  border: 1px solid rgba(74, 158, 255, 0.3);
}

.quote-package-contents {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 4px 12px 10px;
  margin-top: -6px;
  margin-bottom: 6px;
  line-height: 1.4;
}

.package-badge {
  display: inline-block;
  background: var(--accent-blue);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
}

.selected-item-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
}

.selected-item-qty {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.selected-item-total {
  font-weight: 700;
  color: var(--accent-blue);
  min-width: 80px;
  text-align: right;
}

.remove-item-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(255, 74, 74, 0.15);
  color: var(--accent-red);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}

.remove-item-btn:hover {
  background: var(--accent-red);
  color: white;
  transform: none;
  box-shadow: none;
}

/* Removing a whole package is a bigger, rarer action than dropping a single
   item, so it gets a worded control rather than a bare ×. */
.remove-package-btn-labeled {
  border: 1px solid rgba(255, 74, 74, 0.45);
  background: rgba(255, 74, 74, 0.14);
  color: var(--accent-red);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  white-space: nowrap;
  transition: all 0.15s;
}

.remove-package-btn-labeled:hover {
  background: var(--accent-red);
  color: white;
  transform: none;
  box-shadow: none;
}

/* Notes Section */
.quote-notes-section .quote-section-body {
  padding-top: 0;
}

.quote-notes-section textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.quote-notes-section textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Small button (used for add custom item etc.) */
.small-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.small-btn:hover {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

/* Delivery fee row with calc button */
.delivery-fee-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.delivery-fee-row input[type="number"] {
  flex: 1;
  min-width: 0;
}
.delivery-fee-row .small-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  white-space: nowrap;
}
.delivery-fee-suggestion {
  display: block;
  margin-top: 4px;
  color: var(--accent-blue);
  cursor: pointer;
  font-size: 0.78rem;
}
.delivery-fee-suggestion:hover {
  text-decoration: underline;
}

/* Custom Items Section */
.custom-item-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.custom-item-row input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
}
.custom-item-row .custom-item-name { flex: 2; min-width: 100px; }
.custom-item-row .custom-item-price { width: 80px; }
.custom-item-row .custom-item-qty { width: 55px; }
.custom-item-row .custom-item-total {
  width: 80px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: right;
}
.custom-item-row .custom-item-remove {
  background: none;
  border: none;
  color: var(--accent-red, #f44336);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 2px 6px;
  line-height: 1;
}
.custom-item-row .custom-item-remove:hover { opacity: 0.7; }

/* Quote Footer - Pricing & Actions */
.quote-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  border-top: 2px solid var(--accent-blue);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Totals Header - Mobile Toggle */
.quote-totals-header {
  display: none;
}

.toggle-totals-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(74, 158, 255, 0.05));
  border: 1px solid var(--accent-blue);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-primary);
}

.totals-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.totals-summary-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.totals-summary-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.toggle-icon {
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.quote-totals-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.quote-footer-expanded {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-footer-expanded.collapsed {
  display: none;
}

.quote-totals-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.quote-total-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.quote-total-item .total-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quote-total-item .total-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.quote-total-item.total-final .total-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.quote-total-item.total-deposit .total-value {
  color: #f59e0b;
}

.quote-actions-bar {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.quote-actions-bar button {
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* Saved Quotes */
.saved-quotes-search {
  padding: 0 24px;
  margin-bottom: 16px;
}

.saved-quotes-search input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.saved-quotes-search input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.saved-quotes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px 24px;
}

.saved-quote-response-section {
  display: grid;
  gap: 12px;
}

.saved-quote-response-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.saved-quote-response-header h4 {
  margin: 0;
}

.saved-quote-response-meta {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.saved-quote-card {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.saved-quote-card.needs-response {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
}

.saved-quote-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  padding-right: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  position: relative;
  box-shadow: none;
}

.saved-quote-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
  transform: none;
}

.saved-quote-toggle-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.saved-quote-toggle-summary {
  flex-shrink: 0;
  min-width: max-content;
  display: grid;
  justify-items: end;
  gap: 4px;
}

.saved-quote-toggle-total {
  font-weight: 700;
  color: var(--accent-blue);
  font-size: 1rem;
}

.saved-quote-toggle-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.saved-quote-toggle::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 18px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.saved-quote-toggle.expanded::after {
  transform: translateY(-50%) rotate(180deg);
}

.saved-quote-details {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.saved-quote-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.saved-quote-header-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.saved-quote-header-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.saved-quote-id {
  opacity: 0.72;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.saved-quote-customer {
  display: block;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text-primary);
}

.saved-quote-business {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.saved-quote-contact {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.saved-quote-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.saved-quote-booked-tag {
  background: #16a34a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saved-quote-expired-tag {
  background: #b45309;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saved-quote-card.is-expired {
  opacity: 0.86;
}

/* Open quotes get the same year-group chrome as booked ones, so the stack of
   years reads as one control column top to bottom. */
.saved-quote-year-groups {
  display: grid;
  gap: 12px;
}

.saved-expired-quotes .saved-booked-toggle-title {
  color: #f59e0b;
}

.saved-quote-version-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  color: var(--accent-blue);
  font-size: 0.7rem;
  font-weight: 700;
}

.quote-version-history-content {
  width: min(620px, 94vw);
  max-height: min(720px, 88vh);
  overflow: auto;
}

.quote-version-history-heading,
.quote-version-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.quote-version-history-heading h3,
.quote-version-history-heading p {
  margin: 0 0 6px;
}

.quote-version-history-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.quote-version-history-row {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.18);
}

.quote-version-history-row.current {
  border-color: var(--accent-blue);
}

.saved-quote-response-tag {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saved-quote-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.saved-quote-summary-card {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.14);
}

.saved-quote-summary-label {
  color: var(--text-secondary);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.saved-quote-total {
  font-weight: 700;
  color: var(--accent-blue);
  font-size: 1.12rem;
}

.saved-quote-event {
  font-size: 0.96rem;
  color: var(--text-primary);
}

.saved-quote-response-message {
  margin: 0;
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
}

.saved-quote-email-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.email-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.email-status-sent {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.email-status-pending {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.email-status-delivered {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.email-status-read {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.email-status-failed {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.saved-quote-items-panel {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.12);
  padding: 14px;
}

.saved-quote-items-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.saved-quote-items-header strong {
  font-size: 0.96rem;
}

.saved-quote-items-meta {
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.saved-quote-line-items {
  display: grid;
  gap: 10px;
}

.saved-quote-line-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.saved-quote-line-item-category-request {
  border: 2px solid #8b5cf6;
  background: rgba(139, 92, 246, 0.14);
}

.saved-quote-line-item-category-request {
  border: 2px solid #8b5cf6;
  background: rgba(139, 92, 246, 0.14);
}

.saved-quote-line-item-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.saved-quote-line-item-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.saved-quote-line-item-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
  font-size: 0.82rem;
  font-weight: 700;
}

.saved-quote-line-item-label {
  color: var(--text-primary);
  font-size: 0.95rem;
}

.saved-quote-line-item-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.saved-quote-line-item-detail {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-line;
}

.saved-quote-line-item-total {
  flex-shrink: 0;
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 700;
}

.saved-quote-line-item-empty {
  padding: 6px 0;
}

.saved-quote-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.theme-light .saved-quote-summary-card,
.theme-light .saved-quote-items-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
}

.theme-light .saved-quote-line-item {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(15, 23, 42, 0.06);
}

.theme-light .saved-quote-line-item-badge {
  background: rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
  .saved-quote-toggle,
  .saved-quote-header,
  .saved-quote-line-item,
  .saved-quote-items-header {
    flex-direction: column;
  }

  .saved-quote-toggle {
    align-items: flex-start;
    padding-right: 18px;
  }

  .saved-quote-toggle-summary {
    justify-items: start;
    min-width: 0;
  }

  .saved-quote-toggle::after {
    top: 20px;
    right: 18px;
    transform: none;
  }

  .saved-quote-toggle.expanded::after {
    transform: rotate(180deg);
  }

  .saved-quote-date,
  .saved-quote-line-item-total {
    white-space: normal;
  }
}

.saved-booked-quotes {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 12px;
}

.saved-booked-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 650;
}

.saved-booked-toggle-heading,
.saved-booked-toggle-summary,
.saved-booked-year-heading,
.saved-booked-year-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saved-booked-toggle-heading,
.saved-booked-year-heading {
  min-width: 0;
}

.saved-booked-toggle-title,
.saved-booked-year-label {
  font-weight: 700;
}

.saved-booked-toggle-count,
.saved-booked-year-count {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.saved-booked-toggle-total,
.saved-booked-year-total {
  font-weight: 700;
  color: var(--accent-blue);
}

.saved-booked-toggle:hover {
  border-color: var(--accent-blue);
}

.saved-booked-toggle::after {
  content: "▼";
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.saved-booked-toggle.expanded::after {
  transform: rotate(180deg);
}

.saved-booked-toggle-meta {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-right: 8px;
}

.saved-booked-quotes-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.saved-booked-year-group {
  display: grid;
  gap: 10px;
}

.saved-booked-year-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 650;
}

.saved-booked-year-toggle:hover {
  border-color: var(--accent-blue);
}

.saved-booked-year-toggle::after {
  content: "▼";
  font-size: 0.7rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.saved-booked-year-toggle.expanded::after {
  transform: rotate(180deg);
}

.saved-booked-year-list {
  display: grid;
  gap: 12px;
  padding: 0 0 4px 16px;
  border-left: 1px solid var(--border);
}

.saved-quotes-empty-state {
  padding: 10px 4px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .quote-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .quote-items-section .quote-items-search {
    max-width: 100%;
    width: 100%;
  }

  .quote-category-header {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 8px;
  }

  .quote-category-title {
    font-size: 0.9rem;
  }

  .quote-category-badge {
    justify-self: start;
    justify-content: flex-start;
  }

  .quote-item-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "stock"
      "price"
      "qty";
    align-items: flex-start;
    row-gap: 6px;
  }

  .quote-item-card .quote-item-price {
    text-align: left;
  }

  .quote-item-qty-controls {
    justify-content: flex-start;
    width: 100%;
  }

  .quote-totals-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .quote-total-item {
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
    flex-direction: column;
    text-align: center;
  }

  .quote-actions-bar {
    flex-direction: column;
  }

  .quote-actions-bar button {
    width: 100%;
  }

  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }

  .header-buttons {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .menu-panel {
    right: 0;
    transform: translateY(120px);
    width: min(320px, 95vw);
  }

  .favorites-bar {
    margin-bottom: 12px;
  }

  .header-buttons::-webkit-scrollbar {
    height: 4px;
  }

  .header-buttons::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }

  .header-buttons::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
  }

  .header-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .quotes-tabs {
    flex-wrap: wrap;
  }
}


@media (max-width: 768px) {
  #quotes-modal {
    padding: 0;
  }

  .quotes-modal-content {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .tent-squaring-modal-content {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .quotes-modal-content>.modal-header {
    padding: 16px;
  }

  .tent-squaring-modal-header,
  .tent-squaring-body {
    padding: 18px;
  }

  .tent-squaring-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .tent-squaring-unit-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .tent-squaring-unit-btn {
    flex: 1;
  }

  .tent-squaring-input-panel,
  .tent-squaring-result-card {
    padding: 18px;
  }

  .quotes-tabs {
    padding: 0 16px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .quotes-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .quote-section-header {
    padding: 12px 16px;
  }

  .quote-section-body {
    padding: 12px 16px;
  }

  .quote-categories-container {
    max-height: none;
  }

  .quote-selected-items {
    max-height: none;
  }

  .quote-footer {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top-width: 1px;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.12);
    gap: 12px;
  }

  .quote-totals-header {
    display: block;
  }

  .quote-footer-expanded.collapsed {
    display: none;
  }

  .quote-totals-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .quote-total-item {
    background: var(--bg-secondary);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .quote-total-item .total-label {
    font-size: 0.7rem;
    margin-bottom: 4px;
  }

  .quote-total-item .total-value {
    font-size: 1rem;
  }

  .quote-total-item.total-final {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(74, 158, 255, 0.05));
    border: 1px solid var(--accent-blue);
  }

  .quote-total-item.total-final .total-value {
    font-size: 1.3rem;
  }

  .quote-total-item.total-deposit {
    grid-column: span 2;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
  }

  .quote-actions-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saved-quote-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .saved-quote-details {
    flex-direction: column;
    gap: 6px;
  }

  .saved-quote-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saved-quote-actions button {
    width: 100%;
  }

  .saved-booked-toggle,
  .saved-booked-year-toggle {
    align-items: flex-start;
    gap: 10px;
  }

  .saved-booked-toggle-heading,
  .saved-booked-toggle-summary,
  .saved-booked-year-heading,
  .saved-booked-year-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .saved-booked-year-list {
    padding-left: 12px;
  }
}

@media (max-width: 480px) {
  .quote-item-card {
    padding: 10px;
  }

  .quote-item-card .quote-item-name {
    font-size: 0.85rem;
  }

  .saved-quotes-list,
  .saved-quotes-search {
    padding-left: 16px;
    padding-right: 16px;
  }
}


@media (max-width: 480px) {
  .quote-actions-bar {
    grid-template-columns: 1fr;
  }

  .saved-quote-actions {
    grid-template-columns: 1fr;
  }

  .quote-selected-row {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .selected-item-total {
    text-align: left;
    min-width: 0;
  }

  .remove-item-btn {
    justify-self: end;
  }
}

/* ============================================
   USER MANAGEMENT STYLES
   ============================================ */

.users-modal-content {
  width: min(600px, 95vw);
}

.users-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.users-tab {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.users-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.users-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.users-tab-content[hidden] {
  display: none;
}

.users-list-container {
  max-height: 500px;
  overflow-y: auto;
}

.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
}

.user-card:hover {
  border-color: var(--accent-blue);
}

.user-card.inactive {
  opacity: 0.6;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-role-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.user-role-badge.admin {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-blue);
}

.user-role-badge.employee {
  background: rgba(180, 180, 180, 0.2);
  color: var(--text-secondary);
}

.user-email {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.user-wage {
  font-size: 0.85rem;
  color: #22c55e;
}

.user-inactive-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 74, 74, 0.2);
  color: var(--accent-red);
  margin-left: 8px;
}

.user-actions {
  display: flex;
  gap: 8px;
}

.user-edit-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
}

/* Edit User Modal */
.edit-user-modal-content {
  width: min(500px, 95vw);
}

/* User Address Section */
.user-address-section {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.user-address-section summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text-secondary);
}

.user-address-section[open] summary {
  margin-bottom: 12px;
}

.address-help-text {
  font-size: 0.85em;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  font-style: italic;
}

/* Permissions Section */
.permissions-section {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.permissions-header {
  display: block;
  font-weight: 600;
  color: var(--accent-blue);
  margin-bottom: 12px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.permissions-grid .checkbox-label {
  padding: 8px 10px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.permissions-grid .checkbox-label:hover {
  border-color: var(--accent-blue);
}

.permissions-grid .checkbox-label input:checked+span {
  color: var(--accent-blue);
  font-weight: 500;
}

.edit-user-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Reset Password Modal */
.reset-password-modal-content {
  width: min(400px, 95vw);
}

/* Add User Form */
.add-user-form {
  display: grid;
  gap: 16px;
}

.add-user-form select {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
}

.add-user-form select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* ============================================
   ADMIN TIME CLOCK STYLES
   ============================================ */

.timeclock-modal-content {
  width: min(500px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
}

.timeclock-status-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.timeclock-status {
  font-size: 1rem;
}

.timeclock-status .status-clocked-in {
  color: var(--accent-green);
  font-weight: 600;
}

.timeclock-status .status-clocked-out {
  color: var(--text-secondary);
}

.timeclock-punch-btn {
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}

.timeclock-punch-btn:active {
  transform: scale(0.97);
}

.timeclock-punch-btn.clock-in {
  background: var(--accent-green);
  color: white;
}

.timeclock-punch-btn.clock-in:hover {
  background: var(--accent-green-dark);
}

.timeclock-punch-btn.clock-out {
  background: var(--accent-red);
  color: white;
}

.timeclock-punch-btn.clock-out:hover {
  background: var(--accent-red-dark);
}

.timeclock-punch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.timeclock-session-info {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.timeclock-session-detail {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.session-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.session-value {
  font-weight: 500;
  font-size: 0.9rem;
}

.timeclock-clock-out-notes {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.timeclock-today-section {
  padding-top: 16px;
}

.timeclock-today-section h4 {
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.timeclock-entries-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeclock-entry-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.85rem;
}

.timeclock-entry-times {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-secondary);
}

.timeclock-entry-hours {
  font-weight: 600;
  color: var(--text-primary);
}

.timeclock-entry-notes {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
}

.timeclock-today-total {
  margin-top: 10px;
  text-align: right;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-blue);
}

@media (max-width: 600px) {
  .timeclock-status-section {
    flex-direction: column;
    align-items: stretch;
  }

  .timeclock-actions {
    width: 100%;
  }

  .timeclock-punch-btn {
    width: 100%;
  }

  .timeclock-session-detail,
  .timeclock-entry-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .timeclock-entry-times {
    flex-wrap: wrap;
  }

  .timeclock-today-total {
    text-align: left;
  }
}

/* ============================================
   TIMESHEETS STYLES
   ============================================ */

.timesheets-modal-content {
  width: min(900px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
}

.timesheets-filters {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.ts-period-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ts-period-btn {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #333);
  background: transparent;
  color: var(--text-secondary, #aaa);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.ts-period-btn:hover {
  border-color: var(--accent, #6ea8fe);
  color: var(--text, #e8e8e8);
}

.ts-period-btn.active {
  background: var(--accent, #6ea8fe);
  border-color: var(--accent, #6ea8fe);
  color: #fff;
}

.ts-period-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ts-period-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #aaa);
  margin-bottom: 8px;
}

.timesheets-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.ts-pdf-option-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary, #888);
  cursor: pointer;
  user-select: none;
  justify-content: flex-end;
}

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

.timesheet-summary-card {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.timesheet-summary-card .employee-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.timesheet-summary-card .summary-stats {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}

.timesheet-summary-card .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timesheet-summary-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.timesheet-summary-card .stat-value {
  font-weight: 700;
  color: var(--accent-blue);
}

.timesheet-summary-card .stat-value.pay {
  color: #22c55e;
}

.timesheets-entries {
  max-height: 400px;
  overflow-y: auto;
}

.timesheet-entry-card {
  display: grid;
  grid-template-columns: 140px 1fr 140px 100px 80px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.timesheet-entry-card:hover {
  border-color: var(--accent-blue);
}

.entry-employee {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.entry-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entry-datetime {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
}

.entry-times {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-label {
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.time-separator {
  color: var(--accent-blue);
  font-weight: bold;
}

.entry-hours-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.hours-value {
  font-weight: 700;
  color: var(--accent-blue);
  font-size: 1rem;
}

.wage-rate {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.entry-pay-display {
  font-weight: 700;
  color: #22c55e;
  text-align: right;
  font-size: 1rem;
}

.entry-edit-btn {
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* Edit Time Entry Modal */
.edit-time-entry-modal-content,
.add-time-entry-modal-content {
  width: min(500px, 95vw);
}

.edit-entry-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.edit-entry-actions>div {
  display: flex;
  gap: 12px;
}

@media (max-width: 900px) {
  .timesheet-entry-card {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .entry-employee {
    grid-column: 1 / -1;
  }

  .entry-edit-btn {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
}

@media (max-width: 600px) {
  .timesheet-entry-card {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .entry-employee {
    grid-column: 1 / -1;
  }

  .entry-details {
    grid-column: 1 / -1;
  }

  .entry-hours-display {
    align-items: flex-start;
  }

  .entry-edit-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .user-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .user-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================
   EVENT ASSIGNMENT STYLES
   ============================================ */

.event-assignment-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.assignment-header {
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.assigned-employees-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.no-assigned {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
}

.assigned-employee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 20px;
  font-size: 0.85rem;
  color: #4ade80;
}

.remove-assignment-btn {
  background: transparent;
  border: none;
  color: #4ade80;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.remove-assignment-btn:hover {
  opacity: 1;
  color: var(--accent-red);
}

.add-assignment-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.assignment-employee-select {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.assignment-employee-select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.assignment-phase-select {
  min-width: 110px;
  max-width: 150px;
  padding: 5px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.78rem;
  cursor: pointer;
}

.assignment-phase-select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.assign-btn {
  padding: 8px 16px;
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.assign-btn:hover:not(:disabled) {
  background: var(--accent-blue-dark);
}

.assign-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   CUSTOMERS MODAL STYLES
   ============================================ */

.customers-modal-content {
  width: 95%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
}

.customers-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.customers-toolbar input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.customers-toolbar input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.customers-merge-status {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.customers-list-container {
  max-height: 60vh;
  overflow-y: auto;
}

.customer-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  align-items: center;
}

.customer-card.merge-mode {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
}

.customer-card.merge-mode.selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.25);
  background: rgba(74, 158, 255, 0.08);
}

.customer-card.merge-mode .customer-actions {
  display: none;
}

.customer-merge-selector {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}

.customer-merge-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.customer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.customer-contact {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.customer-business {
  font-size: 0.82rem;
  color: var(--accent-blue);
}

.customer-contact a {
  color: var(--accent-blue);
  text-decoration: none;
}

.customer-contact a:hover {
  text-decoration: underline;
}

.customer-address {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.customer-last-job {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.customer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.customer-actions button {
  padding: 8px 12px;
  font-size: 0.85rem;
}

.no-customers {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

/* ============================================
   NOTES MODAL STYLES
   ============================================ */

.notes-modal-content {
  width: min(1040px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notes-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.notes-header-actions {
  display: flex;
  gap: 8px;
}

/* Two-column shell: folder sidebar + main pane. Collapses to single column on narrow screens. */
.notes-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.notes-folder-tree {
  border-right: 1px solid var(--border);
  background: var(--bg-primary, var(--bg-secondary));
  overflow-y: auto;
  padding: 12px 0;
  min-height: 300px;
}

.notes-folder-loading {
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.notes-folder-node {
  padding: 6px 12px 6px 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
}

.notes-folder-node:hover {
  background: var(--bg-secondary);
}

.notes-folder-node.active {
  background: var(--bg-secondary);
  border-left-color: var(--accent-blue);
  font-weight: 600;
}

.notes-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.notes-compose {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.notes-md-hint {
  font-size: 0.75rem;
  margin-left: 8px;
}

.notes-compose textarea {
  min-height: 70px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
}

.notes-compose textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.notes-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.notes-compose-actions select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.notes-list {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

.notes-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 20px 0;
}

.note-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-card.pinned {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue) inset;
}

.note-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.note-card-header .note-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.note-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.note-folder-tag {
  background: var(--bg-card, var(--bg-primary));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
}

.note-content {
  font-size: 0.94rem;
}

/* Rendered markdown output */
.note-rendered {
  color: var(--text-primary);
  line-height: 1.55;
}

.note-rendered h1,
.note-rendered h2,
.note-rendered h3,
.note-rendered h4 {
  margin: 0.8em 0 0.4em;
  line-height: 1.25;
}

.note-rendered h1 { font-size: 1.4rem; }
.note-rendered h2 { font-size: 1.2rem; }
.note-rendered h3 { font-size: 1.05rem; }

.note-rendered p {
  margin: 0.5em 0;
}

.note-rendered ul,
.note-rendered ol {
  padding-left: 1.5em;
  margin: 0.4em 0;
}

.note-rendered li {
  margin: 0.2em 0;
}

.note-rendered code {
  background: var(--bg-card, var(--bg-primary));
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.note-rendered pre {
  background: var(--bg-card, var(--bg-primary));
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0.6em 0;
}

.note-rendered pre code {
  background: none;
  padding: 0;
}

.note-rendered blockquote {
  border-left: 3px solid var(--border);
  color: var(--text-secondary);
  margin: 0.6em 0;
  padding: 0.1em 0.9em;
}

.note-rendered a {
  color: var(--accent-blue);
  text-decoration: underline;
}

.note-rendered table {
  border-collapse: collapse;
  margin: 0.6em 0;
}

.note-rendered th,
.note-rendered td {
  border: 1px solid var(--border);
  padding: 4px 8px;
}

.note-rendered-fallback {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

.note-edit-input {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.note-edit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.note-folder-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
}

.note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .notes-shell {
    grid-template-columns: 1fr;
  }
  .notes-folder-tree {
    border-right: none;
    border-bottom: 1px solid var(--border);
    min-height: auto;
    max-height: 160px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
  }
  .notes-folder-node {
    padding: 4px 10px !important;
    border-left: none !important;
    border-radius: 999px;
    background: var(--bg-secondary);
    font-size: 0.8rem;
  }
  .notes-folder-node.active {
    background: var(--accent-blue);
    color: #fff;
  }
}

/* ============================================
   TENT SQUARING MODAL
   ============================================ */

.tent-squaring-modal-content {
  width: min(980px, 96vw);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.tent-squaring-modal-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.tent-squaring-heading {
  display: grid;
  gap: 6px;
}

.tent-squaring-heading .muted {
  margin: 0;
}

.tent-squaring-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tent-squaring-unit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.tent-squaring-unit-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tent-squaring-unit-btn:hover {
  color: var(--text-primary);
}

.tent-squaring-unit-btn.is-active {
  background: var(--accent-blue);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 71, 255, 0.18);
}

.tent-squaring-body {
  padding: 28px;
  display: grid;
  gap: 22px;
}

.tent-squaring-input-panel {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(74, 158, 255, 0.08), rgba(74, 158, 255, 0.02));
}

.tent-squaring-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.tent-squaring-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tent-squaring-unit-inline {
  display: inline-block;
  white-space: nowrap;
}

.tent-squaring-tooltip {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
}

.tent-squaring-helper-text {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.tent-squaring-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.tent-squaring-result-card {
  min-height: 170px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}

.tent-squaring-result-card-primary {
  border-color: rgba(74, 158, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(74, 158, 255, 0.08);
}

.tent-squaring-result-label {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tent-squaring-result-value {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.08;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.tent-squaring-result-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ============================================
   THEME SETTINGS
   ============================================ */

.theme-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.theme-settings .muted {
  margin: 0;
}

.theme-section {
  padding: 0;
}

.theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
}

.theme-option.is-active {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px var(--accent-blue);
}

.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.swatch-blue {
  background: #4a9eff;
}

.swatch-red {
  background: #ff4a4a;
}

.swatch-orange {
  background: #f59e0b;
}

.swatch-green {
  background: #22c55e;
}

.swatch-purple {
  background: #a855f7;
}

/* Customer Detail Modal */
.customer-detail-modal-content {
  width: 95%;
  max-width: 600px;
}

.customer-detail-body {
  padding: 20px;
}

.customer-detail-body h4 {
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.customer-detail-info {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 16px;
}

.customer-detail-info p {
  margin: 6px 0;
}

.customer-detail-info a {
  color: var(--accent-blue);
  text-decoration: none;
}

.customer-detail-info a:hover {
  text-decoration: underline;
}

.customer-events-list {
  max-height: 400px;
  overflow-y: auto;
}

.customer-event-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.customer-event-clickable {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.customer-event-clickable:hover {
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-secondary));
}

.customer-event-detail-body {
  padding: 8px 0;
}

.customer-event-detail-body p {
  margin: 6px 0;
}

.customer-event-detail-body .event-detail-items,
.customer-event-detail-body .event-detail-totals,
.customer-event-detail-body .event-detail-description {
  margin-top: 12px;
}

.customer-event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.customer-event-title {
  font-weight: 600;
}

.customer-event-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.customer-event-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.customer-event-status.picked-up {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.customer-event-status.pending {
  background: rgba(255, 167, 38, 0.15);
  color: #ffa726;
}

.customer-event-status.canceled {
  background: rgba(255, 91, 91, 0.14);
  color: #ff8a8a;
}

.customer-review-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.customer-review-section h5 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.review-rating {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.review-rating-item {
  font-size: 0.85rem;
}

.review-rating-item .label {
  color: var(--text-secondary);
}

.review-rating-item .value {
  font-weight: 500;
}

.review-rating-item .value.excellent {
  color: #22c55e;
}

.review-rating-item .value.good {
  color: #4ade80;
}

.review-rating-item .value.average {
  color: #fbbf24;
}

.review-rating-item .value.below-average {
  color: #fb923c;
}

.review-rating-item .value.poor {
  color: #ef4444;
}

.review-rating-item .value.damaged {
  color: #ef4444;
}

.review-rating-item .value.fair {
  color: #fbbf24;
}

.review-notes {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 6px;
  font-style: italic;
}

.no-events {
  text-align: center;
  padding: 30px;
  color: var(--text-secondary);
}

/* Email Modal Styles */
.customer-email-modal-content,
.broadcast-email-modal-content,
.paystub-modal-content,
.quote-email-modal-content {
  width: 95%;
  max-width: 500px;
}

.quote-email-verification-banner {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--text-primary);
}

.quote-email-verification-banner span {
  color: var(--text-secondary);
  line-height: 1.45;
}

.customer-email-modal-content textarea,
.broadcast-email-modal-content textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
}

/* User card email display */
.user-email {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.user-email a {
  color: var(--accent-blue);
  text-decoration: none;
}

.user-email a:hover {
  text-decoration: underline;
}

/* Timesheets actions responsive */
.timesheets-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .customer-card {
    grid-template-columns: 1fr;
  }

  .customer-card.merge-mode {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .customer-actions {
    justify-content: flex-end;
  }

  .timesheets-actions button {
    font-size: 0.8rem;
    padding: 8px 12px;
  }
}

/* ============================================
   PACKAGES MODAL STYLES
   ============================================ */

.packages-modal-content {
  width: 95%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
}

.packages-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.packages-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.packages-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.packages-list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.package-card.inactive {
  opacity: 0.6;
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.package-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.package-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-blue);
}

.package-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 12px 0;
}

.package-meta {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.package-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.package-status.active {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-blue);
}

.package-status.inactive {
  background: rgba(255, 74, 74, 0.2);
  color: var(--accent-red);
}

.package-actions {
  display: flex;
  gap: 8px;
}

.package-library-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 14px 0 20px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 28%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 12%, var(--bg-secondary)), var(--bg-secondary));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.package-library-intro h3,
.package-library-intro p { margin: 0; }
.package-library-intro h3 { margin-top: 3px; font-size: 1.05rem; text-wrap: balance; }
.package-library-intro > div > p:last-child { margin-top: 6px; color: var(--text-secondary); font-size: 0.86rem; text-wrap: pretty; }
.package-library-eyebrow { color: var(--accent-blue); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.package-library-format { display: grid; min-width: 52px; height: 52px; place-items: center; border-radius: 12px; background: var(--accent-blue); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-blue) 34%, transparent); }

.packages-list-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 16px; }
.package-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: 0; border-radius: 16px; background: var(--bg-secondary); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13); opacity: 1; transition-property: transform, border-color, box-shadow; transition-duration: 150ms; }
.package-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border)); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); }
.package-card.inactive { opacity: 1; }
.package-card.inactive .package-card-body { opacity: 0.7; }
.package-card-accent { height: 3px; background: linear-gradient(90deg, var(--accent-blue), #8b5cf6); }
.package-card-body { flex: 1; padding: 18px 18px 14px; }
.package-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.package-card-type { color: var(--accent-blue); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.package-header { align-items: flex-start; gap: 16px; }
.package-header h4 { font-size: 1.08rem; line-height: 1.25; text-wrap: balance; }
.package-price { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.package-stored-name { margin: 4px 0 0; color: var(--text-muted); font-size: 0.7rem; }
.package-description { min-height: 2.7em; margin: 10px 0 14px; line-height: 1.45; text-wrap: pretty; }
.package-description--empty { opacity: 0.64; font-style: italic; }
.package-meta { align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.package-meta-count, .package-public-tag, .package-partner-tag { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--border) 44%, transparent); font-size: 0.72rem; }
.package-public-tag { color: var(--text-secondary); }
.package-preview-list { display: grid; gap: 7px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); list-style: none; }
.package-preview-list li { display: flex; gap: 8px; color: var(--text-secondary); font-size: 0.82rem; }
.package-preview-qty { min-width: 32px; color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.package-preview-more, .package-preview-empty { margin: 9px 0 0; color: var(--text-muted); font-size: 0.76rem; }
.package-actions { align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-secondary) 84%, #000); }
.package-action-buttons { display: flex; align-items: center; gap: 8px; }
.package-action-buttons button { min-height: 40px; }
.package-export-btn { display: inline-flex; align-items: center; gap: 7px; color: #fff; background: var(--accent-blue); border-color: transparent; font-weight: 700; }
.package-export-btn:hover { filter: brightness(1.08); }
.package-export-btn:active { transform: scale(0.96); }
.package-export-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.package-export-toggle { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; cursor: pointer; color: var(--text-secondary); font-size: 0.78rem; user-select: none; }
.package-export-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.package-export-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--border); transition-property: background-color; transition-duration: 150ms; }
.package-export-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition-property: transform; transition-duration: 150ms; }
.package-export-toggle input:checked + .package-export-switch { background: var(--accent-blue); }
.package-export-toggle input:checked + .package-export-switch::after { transform: translateX(14px); }
.package-export-toggle input:focus-visible + .package-export-switch { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.package-empty-state { grid-column: 1 / -1; padding: 54px 24px; border: 1px dashed var(--border); border-radius: 16px; text-align: center; }
.package-empty-state h4, .package-empty-state p { margin: 0; }
.package-empty-state p { margin-top: 7px; color: var(--text-secondary); }
.package-empty-icon { display: grid; width: 44px; height: 44px; margin: 0 auto 12px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent-blue) 18%, transparent); color: var(--accent-blue); font-size: 1.5rem; }

@media (max-width: 620px) {
  .package-library-format { display: none; }
  .package-actions { align-items: stretch; flex-direction: column; }
  .package-action-buttons { width: 100%; }
  .package-action-buttons button { flex: 1; }
}

.package-items-category {
  margin-bottom: 16px;
}

.package-items-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.package-items-category strong {
  color: var(--text-secondary);
}

.package-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.package-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.package-option-input {
  width: 70px;
  padding: 4px 6px;
  text-align: center;
}

.package-option-help {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.package-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 8px 12px;
  border-radius: 8px;
}

.package-item-name {
  flex: 1;
  font-size: 0.9rem;
}

.package-item-row input {
  width: 60px;
  padding: 4px 8px;
  text-align: center;
}

.edit-package-modal-content {
  width: 95%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Package sub-tabs (inside inventory modal packages tab) */
.packages-sub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.packages-sub-tab {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.packages-sub-tab:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.packages-sub-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.packages-sub-content {
  /* Display handled by hidden attribute */
}

/* Quote builder - Packages section */
.quote-packages-section {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.03);
}

.quote-packages-section .quote-category-header {
  background: rgba(74, 158, 255, 0.08);
}

.quote-packages-items {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

.quote-packages-section.expanded .quote-packages-items {
  display: flex;
}

.quote-package-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s;
}

.quote-package-card:hover {
  border-color: var(--accent-blue);
}

.quote-package-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-package-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.quote-package-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.quote-package-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.quote-package-price {
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent-blue);
}

.add-package-btn {
  padding: 6px 14px;
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
}

.add-package-btn:hover {
  background: var(--accent-blue-hover);
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .quote-package-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "info price"
      "button button";
    align-items: start;
    row-gap: 10px;
  }

  .quote-package-info {
    grid-area: info;
    min-width: 0;
  }

  .quote-package-price {
    grid-area: price;
    text-align: right;
  }

  .add-package-btn {
    grid-area: button;
    width: 100%;
  }
}

/* ============================================
   BUILD KITS STYLES
   ============================================ */

.buildkits-sub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.buildkits-sub-tab {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.buildkits-sub-tab:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.buildkits-sub-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.buildkits-list-container,
.components-list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.buildkit-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.buildkit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.buildkit-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.buildkit-title h4 {
  margin: 0;
  font-size: 1.1rem;
}

.buildkit-price {
  font-size: 0.95rem;
  color: var(--accent-blue);
  font-weight: 500;
}

.buildkit-availability {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.buildkit-availability.in-stock {
  background: rgba(74, 222, 128, 0.2);
  color: var(--success);
}

.buildkit-availability.out-of-stock {
  background: rgba(255, 74, 74, 0.2);
  color: var(--accent-red);
}

.buildkit-components {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.components-label {
  font-weight: 500;
  color: var(--text-primary);
}

.buildkit-limiting {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 8px;
}

.buildkit-actions {
  display: flex;
  gap: 8px;
}

/* Components list */
.component-category {
  margin-bottom: 16px;
}

.component-category h4 {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.component-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.component-name {
  flex: 1;
  font-weight: 500;
}

.component-qty-input {
  width: 70px;
  padding: 6px 10px;
  text-align: center;
}

.component-delete {
  padding: 4px 8px !important;
  font-size: 1rem !important;
}

/* Add component inline form */
.components-add-inline {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.components-add-inline h4 {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
}

.component-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.component-form-row input[name="category"] {
  flex: 1;
}

.component-form-row input[name="name"] {
  flex: 1;
}

.component-form-row input[name="total"] {
  width: 70px;
}

/* Build kit components form (for add/edit) */
.buildkit-components-category {
  margin-bottom: 16px;
}

.buildkit-components-category strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.buildkit-components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.buildkit-component-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 8px 12px;
  border-radius: 8px;
}

.buildkit-component-name {
  flex: 1;
  font-size: 0.9rem;
}

.buildkit-component-stock {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.buildkit-component-row input {
  width: 55px;
  padding: 4px 8px;
  text-align: center;
}

.edit-buildkit-modal-content {
  width: 95%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Quote builder - composite items styling */
.quote-item-card.composite-item {
  border-left: 3px solid var(--accent-blue);
}

.quote-item-stock-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-item-components {
  font-size: 0.7rem;
  color: var(--text-muted);
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ============================================
   DELETE CONFIRMATION MODAL STYLES
   ============================================ */

.delete-confirm-modal-content {
  width: 95%;
  max-width: 400px;
}

.delete-confirm-body {
  padding: 20px 0;
}

.delete-confirm-body p {
  margin: 0 0 12px 0;
}

.warning-text {
  background: rgba(255, 74, 74, 0.1);
  border: 1px solid var(--accent-red);
  border-radius: 8px;
  padding: 12px;
  color: var(--accent-red);
  font-size: 0.9rem;
}

.delete-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ============================================
   QUOTE NOTES SECTION IMPROVEMENTS
   ============================================ */

.quote-notes-section .event-form-group {
  margin-bottom: 16px;
}

.quote-notes-section textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

.quote-notes-section label {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  color: var(--text-secondary);
}

/* ============================================
   ITEM NOTES FOR QUOTE BUILDER
   ============================================ */

.quote-item-notes-row {
  padding: 0 12px 10px;
  margin-bottom: 6px;
  background: var(--bg-secondary);
  border-radius: 0 0 8px 8px;
}

.quote-item-notes-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.quote-item-notes-row.required-notes .quote-item-notes-input {
  border-color: var(--accent-blue);
}

.quote-item-notes-input:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2);
}

.quote-item-notes-input::placeholder {
  color: var(--text-secondary);
}

.requires-notes-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

.inline-item-notes {
  flex: 1 1 120px;
  min-width: 100px;
  max-width: 220px;
  padding: 6px 8px !important;
  font-size: 0.8rem !important;
  border-color: var(--accent-blue) !important;
}

.quote-selected-row.has-notes {
  align-items: center;
  flex-wrap: nowrap;
}

.quote-selected-row.has-notes .selected-item-name {
  flex: 1 1 auto;
  max-width: none;
}

.quote-selected-row.has-notes .inline-item-notes {
  order: 0;
  flex: 0 1 260px;
  min-width: 180px;
  max-width: 300px;
  margin-top: 0;
}

@media (max-width: 768px) {
  .quote-selected-row.has-notes {
    flex-wrap: wrap;
  }

  .quote-selected-row.has-notes .inline-item-notes {
    flex: 1 0 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 6px;
  }
}

/* ============================================
   PACKAGE OPTIONS IN QUOTE BUILDER
   ============================================ */

.quote-package-options {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0 12px;
}

.quote-package-option-group+.quote-package-option-group {
  margin-top: 10px;
}

.quote-package-option-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.quote-package-option-choices {
  display: grid;
  gap: 6px;
}

.quote-package-option-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.quote-package-option-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}

.quote-package-option-qty input {
  width: 70px;
  padding: 4px 6px;
  text-align: center;
}

.quote-package-option-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.quote-package-option-meta,
.quote-package-option-empty,
.quote-package-option-single {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ============================================
   ANALYTICS DASHBOARD
   ============================================ */

.analytics-modal-content {
  max-width: 1000px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}

.analytics-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 0;
}

.analytics-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
}

.analytics-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.analytics-section-header h4 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.analytics-controls select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.analytics-controls select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

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

.analytics-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
}

.analytics-card-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.analytics-card-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-green);
}

.analytics-card-value--compact {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.analytics-chart-container {
  height: 300px;
  position: relative;
}

.analytics-items-table {
  margin-top: 24px;
  max-height: 400px;
  overflow-y: auto;
}

.analytics-items-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.analytics-items-table th,
.analytics-items-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.analytics-items-table th {
  background: var(--bg-card);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
}

.analytics-items-table td {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.analytics-subtext {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.analytics-items-table tr:hover td {
  background: var(--bg-card);
}

/* Loans & Depreciation progress bars */
.loan-progress-bar {
  width: 100%;
  max-width: 160px;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.loan-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 0.3s ease;
}

.analytics-card-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.analytics-items-table td:nth-child(2),
.analytics-items-table td:nth-child(3),
.analytics-items-table th:nth-child(2),
.analytics-items-table th:nth-child(3) {
  text-align: center;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent-blue);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 10px;
}

.analytics-items-table tr:nth-child(1) .rank-badge {
  background: linear-gradient(135deg, #FFD700, #FFA500);
}

.analytics-items-table tr:nth-child(2) .rank-badge {
  background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
}

.analytics-items-table tr:nth-child(3) .rank-badge {
  background: linear-gradient(135deg, #CD7F32, #8B4513);
}

/* Analytics scrollbar */
.analytics-items-table::-webkit-scrollbar {
  width: 6px;
}

.analytics-items-table::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.analytics-items-table::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.analytics-items-table::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* Analytics Tabs */
.analytics-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  padding: 0 24px;
}

.analytics-tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.analytics-tab:hover {
  color: var(--text-primary);
}

.analytics-tab.active {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
}

.analytics-tab-content {
  display: none;
}

.analytics-tab-content.active {
  display: block;
}

/* Analytics Controls Layout */
.analytics-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.analytics-report-buttons {
  display: flex;
  gap: 6px;
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--accent-blue);
  background: transparent;
  color: var(--accent-blue);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.btn-small:hover {
  background: var(--accent-blue);
  color: white;
}

.analytics-inline-note {
  margin: 0 0 16px;
}

/* Clickable item rows */
.analytics-items-table tr[data-item-name] {
  cursor: pointer;
}

.analytics-items-table tr[data-item-name]:hover td {
  background: var(--bg-card);
}

/* Item Events Sub-Panel */
.analytics-item-events-panel {
  border-left: 3px solid var(--accent-blue);
}

/* Comparison Year Picker */
.analytics-comparison-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.analytics-comparison-picker-content {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  min-width: 280px;
}

.analytics-comparison-picker-content h4 {
  margin: 0 0 16px;
  color: var(--text-primary);
}

#comparison-year-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

#comparison-year-checkboxes label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.95rem;
}

.analytics-comparison-picker-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Date Range Inputs */
.analytics-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-date-range span {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.analytics-date-range input[type="date"] {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.analytics-date-range input[type="date"]:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Clickable employee/event rows */
#employee-analytics-table tbody tr,
#employee-assigned-events-table tbody tr,
#item-events-table tbody tr,
#customer-analytics-table tbody tr,
#customer-events-analytics-table tbody tr,
#mileage-analytics-table tbody tr {
  cursor: pointer;
}

#employee-analytics-table tbody tr:hover td,
#employee-assigned-events-table tbody tr:hover td,
#item-events-table tbody tr:hover td,
#customer-analytics-table tbody tr:hover td,
#customer-events-analytics-table tbody tr:hover td,
#mileage-analytics-table tbody tr:hover td {
  background: var(--bg-card);
}

@media (max-width: 768px) {
  .analytics-modal-content {
    width: 100%;
    max-width: none;
    border-radius: 0;
    max-height: 100vh;
  }

  .analytics-section {
    padding: 16px;
  }

  .analytics-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .analytics-summary-cards {
    grid-template-columns: 1fr;
  }

  .analytics-card-value {
    font-size: 1.4rem;
  }

  .analytics-chart-container {
    height: 250px;
  }

  .analytics-tabs {
    padding: 0 16px;
    overflow-x: auto;
  }

  .analytics-tab {
    padding: 10px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .analytics-controls {
    width: 100%;
  }

  .analytics-controls select {
    max-width: 100%;
  }

  .analytics-report-buttons {
    flex-wrap: wrap;
    width: 100%;
  }

  .analytics-items-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .analytics-date-range {
    flex-wrap: wrap;
  }

  .analytics-date-range input[type="date"] {
    width: 100%;
  }
}

/* ============================================
   SETTINGS MODAL
   ============================================ */

.settings-modal-content {
  max-width: 800px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}

.settings-container {
  padding: 20px;
}

.settings-search {
  margin-bottom: 20px;
}

.settings-search input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.settings-search input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.settings-section-card {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.settings-section-card h4 {
  margin: 0 0 14px;
}

.settings-inline-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.payments-settings-grid {
  align-items: start;
}

.payments-settings-grid .event-form-group {
  min-width: 0;
}

.settings-input-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.settings-input-actions-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}

.settings-input-actions input {
  min-width: 0;
}

.settings-input-actions button {
  white-space: nowrap;
}

.payments-settings-actions {
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.payments-settings-status {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.settings-search-hit {
  border-color: rgba(74, 158, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2) inset;
}

.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.settings-tab {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.settings-tab.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.settings-tab-content {
  display: none;
}

.settings-tab-content.active {
  display: block;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.settings-actions button.primary {
  background: var(--accent-blue);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-actions button.primary:hover {
  transform: translateY(-1px);
  background: var(--accent-blue-dark);
  box-shadow: 0 4px 12px var(--accent-glow);
}

.form-help {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.contract-editor-info {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.contract-editor-info p {
  margin: 0 0 8px 0;
}

.contract-editor-info ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.contract-editor-info code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  color: var(--accent-blue);
}

#setting-contract-terms {
  width: 100%;
  min-height: 400px;
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.contract-preview-panel {
  margin-top: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.contract-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.contract-preview-header h4 {
  margin: 0;
}

.contract-preview-content {
  padding: 24px;
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.7;
}

.contract-preview-content h3 {
  margin-top: 0;
  color: var(--accent-blue);
}

.contract-preview-content h4 {
  margin-top: 20px;
  margin-bottom: 8px;
}

.contract-preview-content ul {
  padding-left: 24px;
}

/* Settings save notification */
.settings-save-notification {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}

.settings-save-notification.success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.settings-save-notification.error {
  background: rgba(255, 74, 74, 0.15);
  border: 1px solid rgba(255, 74, 74, 0.3);
  color: #ff4a4a;
}

.settings-save-notification.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.settings-footer-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 650;
}

.settings-footer-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.updates-settings {
  display: grid;
  gap: 16px;
}

.updates-hero h4 {
  margin: 0;
}

.updates-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.updates-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.updates-card-title {
  font-weight: 850;
  letter-spacing: -0.01em;
}

.updates-card-body {
  margin-top: 12px;
  line-height: 1.7;
  color: var(--text-primary);
}

.updates-card-body ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.updates-card-body li {
  margin: 6px 0;
}

.updates-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.update-notice-modal-content {
  max-width: 720px;
  width: 95vw;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.update-notice-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.update-notice-meta {
  font-weight: 650;
}

.update-notice-html {
  margin-top: 12px;
  line-height: 1.75;
}

.update-notice-html ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.update-notice-html li {
  margin: 6px 0;
}

.update-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.06);
}

.update-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -18px;
  border-radius: 2px;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg);
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  animation-fill-mode: both;
}

@keyframes confettiFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) rotate(0deg);
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-drift), 420px, 0) rotate(var(--confetti-rot));
  }
}

@media (max-width: 768px) {
  .settings-modal-content {
    width: 100%;
    max-width: none;
    border-radius: 0;
    max-height: 100vh;
  }

  .settings-tabs {
    flex-wrap: wrap;
  }

  .settings-tab {
    flex: 1;
    min-width: 120px;
    text-align: center;
  }

  .settings-input-actions,
  .settings-input-actions-compact {
    grid-template-columns: 1fr;
  }

  .settings-input-actions button,
  .settings-input-actions-compact button {
    width: 100%;
  }

  .payments-settings-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .payments-settings-actions button {
    width: 100%;
  }

  .payments-settings-status {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   PICKUP & REVIEW STYLES
   ============================================ */

/* Pickup Section in Event Details */
.pickup-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pickup-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.pickup-status.pending {
  background: rgba(255, 167, 38, 0.15);
  color: #ffa726;
}

.pickup-status.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.pickup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.pickup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

.pickup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.pickup-btn.undo {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.pickup-btn.undo:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
  box-shadow: none;
}

/* Review Modal */
.review-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.review-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn 0.2s ease;
}

.review-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.review-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.review-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.review-modal-close:hover {
  color: var(--text-primary);
}

.review-modal-body {
  padding: 24px;
}

.review-section {
  margin-bottom: 24px;
}

.review-section h4 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.rating-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rating-btn {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.rating-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.rating-btn.selected {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.rating-btn.selected.good {
  background: #22c55e;
  border-color: #22c55e;
}

.rating-btn.selected.fair {
  background: #ffa726;
  border-color: #ffa726;
}

.rating-btn.selected.poor {
  background: #ef4444;
  border-color: #ef4444;
}

.review-textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 80px;
}

.review-textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.review-modal-footer {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.review-skip-btn {
  padding: 10px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}

.review-skip-btn:hover {
  color: var(--text-primary);
}

.review-submit-btn {
  padding: 10px 24px;
  background: var(--accent-blue);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
}

.review-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

.review-skip-btn:disabled,
.review-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 520px) {
  .review-modal-footer {
    flex-direction: column-reverse;
  }

  .review-skip-btn,
  .review-submit-btn {
    width: 100%;
  }
}

/* ============================================
   CONTRACT TEMPLATES MANAGEMENT
   ============================================ */

.contract-templates-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.contract-templates-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.contract-templates-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contract-template-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.contract-template-card:hover {
  border-color: var(--accent-blue);
  background: var(--bg-card);
}

.contract-template-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contract-template-name {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.contract-template-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.template-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.template-badge.default {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-blue);
}

.template-badge.inactive {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}

.template-editor-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.template-editor-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.template-mappings-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.template-mappings-actions button.small {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.template-mappings-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-secondary);
}

.template-mapping-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.template-mapping-item:last-child {
  border-bottom: none;
}

.template-mapping-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.template-mapping-item label {
  flex: 1;
  cursor: pointer;
  font-size: 0.9rem;
}

.template-mapping-item .mapping-target {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

#template-content {
  width: 100%;
  min-height: 300px;
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.no-templates-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.no-templates-message p {
  margin: 0 0 16px;
}

.contract-templates-info {
  margin-bottom: 10px;
}

.contract-send-btn.sent {
  background: var(--accent-green);
  cursor: default;
}

/* Onboarding Wizard (v2 — 6 step guided flow) */
body.onboarding-open {
  overflow: hidden;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
  backdrop-filter: blur(0px);
  animation: onboardingBackdropIn .25s ease forwards;
}

@keyframes onboardingBackdropIn {
  to { background: rgba(10, 12, 18, 0.86); backdrop-filter: blur(8px); }
}

.onboarding-overlay[hidden] {
  display: none;
}

.onboarding-overlay.is-closing {
  animation: onboardingBackdropOut .25s ease forwards;
}

@keyframes onboardingBackdropOut {
  to { background: rgba(10, 12, 18, 0); backdrop-filter: blur(0px); opacity: 0; }
}

.onboarding-card {
  width: min(960px, 96vw);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  animation: onboardingCardIn .4s cubic-bezier(0.21, 1.02, 0.73, 1) .08s forwards;
}

@keyframes onboardingCardIn {
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Progress bar */
.onboarding-progress {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  flex-shrink: 0;
}

.onboarding-progress-fill {
  height: 100%;
  background: var(--accent-blue);
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

.onboarding-card-inner {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 28px;
  flex: 1;
}

/* Header */
.onboarding-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.onboarding-heading h2 {
  margin: 0 0 4px;
}

/* Cosmo host — avatar + aura + equalizer wave. The image is 2000×2000, so
   these rules MUST constrain it; without them Cosmo's head fills the screen. */
.onboarding-host {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.onboarding-cosmo {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-cosmo-avatar {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--accent-blue);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 16px var(--accent-glow);
}

.onboarding-cosmo-aura {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  opacity: 0.9;
  animation: onboardingCosmoAura 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes onboardingCosmoAura {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 0.9; }
}

.onboarding-cosmo-wave {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  padding: 2px 5px;
  border-radius: 8px;
  background: var(--bg-elevated, #1a1d24);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.onboarding-cosmo-wave i {
  display: block;
  width: 2px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent-blue);
  animation: onboardingCosmoWave 1s ease-in-out infinite;
}

.onboarding-cosmo-wave i:nth-child(2) { animation-delay: 0.15s; }
.onboarding-cosmo-wave i:nth-child(3) { animation-delay: 0.3s; }
.onboarding-cosmo-wave i:nth-child(4) { animation-delay: 0.45s; }
.onboarding-cosmo-wave i:nth-child(5) { animation-delay: 0.6s; }

@keyframes onboardingCosmoWave {
  0%, 100% { height: 3px; opacity: 0.6; }
  50% { height: 10px; opacity: 1; }
}

.onboarding-cosmo-tag {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, var(--text-secondary));
}

.onboarding-cosmo-tag strong {
  color: var(--accent-blue);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-cosmo-aura,
  .onboarding-cosmo-wave i {
    animation: none;
  }
}

.onboarding-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.onboarding-header-right .ghost {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

.onboarding-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.onboarding-subtitle {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

/* Step dots */
.onboarding-steps {
  display: flex;
  gap: 8px;
}

.onboarding-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.onboarding-step-dot.is-active {
  background: var(--accent-blue);
  box-shadow: 0 0 10px rgba(74, 158, 255, 0.6);
  transform: scale(1.15);
}

.onboarding-step-dot.is-complete {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Step transitions */
.onboarding-body {
  position: relative;
}

.onboarding-body h3 {
  margin: 0 0 8px;
}

.onboarding-step {
  animation: onboardingSlideIn .35s ease forwards;
}

.onboarding-step.slide-out-left {
  animation: onboardingSlideOutLeft .25s ease forwards;
}

.onboarding-step.slide-out-right {
  animation: onboardingSlideOutRight .25s ease forwards;
}

@keyframes onboardingSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes onboardingSlideInReverse {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes onboardingSlideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-40px); }
}

@keyframes onboardingSlideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

.onboarding-step.slide-in-reverse {
  animation: onboardingSlideInReverse .35s ease forwards;
}

/* Plan badge */
.onboarding-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.onboarding-plan-badge.plan-pro {
  background: rgba(168, 85, 247, 0.18);
  color: #a855f7;
}

.onboarding-plan-badge.plan-trial {
  background: rgba(234, 179, 8, 0.18);
  color: #eab308;
  animation: onboardingTrialGlow 2s ease-in-out infinite;
}

@keyframes onboardingTrialGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(234, 179, 8, 0.2); }
  50% { box-shadow: 0 0 18px rgba(234, 179, 8, 0.45); }
}

/* Welcome step bullets */
.onboarding-welcome-bullets {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.onboarding-welcome-bullet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: #0f1320;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: onboardingBulletIn .4s ease forwards;
}

.onboarding-welcome-bullet:nth-child(1) { animation-delay: .1s; }
.onboarding-welcome-bullet:nth-child(2) { animation-delay: .18s; }
.onboarding-welcome-bullet:nth-child(3) { animation-delay: .26s; }
.onboarding-welcome-bullet:nth-child(4) { animation-delay: .34s; }

@keyframes onboardingBulletIn {
  to { opacity: 1; transform: translateY(0); }
}

.onboarding-welcome-bullet-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: rgba(74, 158, 255, 0.12);
}

.onboarding-welcome-bullet-text {
  font-weight: 600;
  font-size: 0.92rem;
}

/* Industry selection grid */
.onboarding-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.onboarding-industry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  border: 2px solid var(--border);
  background: #111521;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: onboardingBulletIn .4s ease forwards;
}
.onboarding-industry-card:nth-child(1) { animation-delay: .05s; }
.onboarding-industry-card:nth-child(2) { animation-delay: .1s; }
.onboarding-industry-card:nth-child(3) { animation-delay: .15s; }
.onboarding-industry-card:nth-child(4) { animation-delay: .2s; }
.onboarding-industry-card:nth-child(5) { animation-delay: .25s; }
.onboarding-industry-card:nth-child(6) { animation-delay: .3s; }

.onboarding-industry-card:hover {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.04);
}

.onboarding-industry-card:active {
  transform: scale(0.97);
}

.onboarding-industry-card.is-selected {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.08);
  box-shadow: 0 0 16px rgba(74, 158, 255, 0.15);
}

.onboarding-industry-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.onboarding-industry-label {
  font-weight: 600;
  font-size: 0.92rem;
}

.onboarding-industry-desc {
  line-height: 1.3;
  font-size: 0.78rem;
}

@media (max-width: 600px) {
  .onboarding-industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Business profile layout */
.onboarding-profile-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 18px;
}

.onboarding-form-side {
  min-width: 0;
}

.onboarding-preview-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onboarding-preview-label {
  margin: 0;
}

.onboarding-preview-card {
  border: 1px solid var(--border);
  background: #111521;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 0 20px rgba(74, 158, 255, 0.06);
  transition: all 0.3s ease;
}

.onboarding-preview-card-mini {
  padding: 12px;
}

.onboarding-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.onboarding-preview-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
}

.onboarding-preview-name {
  font-weight: 700;
  font-size: 1rem;
}

.onboarding-preview-details {
  display: grid;
  gap: 2px;
}

.onboarding-preview-detail {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.onboarding-preview-detail:empty {
  display: none;
}

.onboarding-preview-divider {
  border-top: 1px solid var(--border);
  margin: 10px 0;
}

.onboarding-preview-sample {
  margin: 0;
}

/* Logo drop */
.onboarding-logo-drop {
  margin-top: 8px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.onboarding-logo-drop:hover,
.onboarding-logo-drop.is-dragover {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.05);
}

.onboarding-logo-drop.has-image {
  border-style: solid;
  border-color: var(--border);
  height: auto;
  min-height: 80px;
}

.onboarding-logo-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.onboarding-logo-drop-content svg {
  opacity: 0.5;
}

.onboarding-logo-drop-content .link {
  background: none;
  border: none;
  color: var(--accent-blue);
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}

.onboarding-logo-preview-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.onboarding-logo-preview-wrap img {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
  border-radius: 6px;
}

/* Pricing step */
.onboarding-pricing-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 18px;
}

.onboarding-security-card {
  max-width: 560px;
}

.onboarding-security-card .onboarding-form {
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 20px;
}

.onboarding-password-status.is-success {
  color: #22c55e;
}

.onboarding-password-status.is-error {
  color: #f87171;
}

.onboarding-pricing-form {
  display: grid;
  gap: 16px;
}

.onboarding-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.onboarding-toggle-row label {
  font-weight: 600;
}

.onboarding-pricing-example {
  border: 1px solid var(--border);
  background: #111521;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(74, 158, 255, 0.06);
}

.onboarding-pricing-example h4 {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.onboarding-pricing-example-title {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.onboarding-pricing-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.92rem;
}

.onboarding-pricing-row.is-total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 1rem;
}

.onboarding-pricing-row.is-deposit {
  color: var(--accent-blue);
  font-weight: 600;
}

.onboarding-helper-text {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Inventory step */
.onboarding-inventory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.onboarding-inventory-choice {
  border: 2px solid var(--border);
  background: #111521;
  padding: 20px;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-inventory-choice:hover {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.04);
}

.onboarding-inventory-choice:active {
  transform: scale(0.98);
}

.onboarding-inventory-choice.is-active {
  border-color: var(--accent-blue);
  box-shadow: 0 0 16px rgba(74, 158, 255, 0.15);
}

.onboarding-inventory-choice h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.onboarding-inventory-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(74, 158, 255, 0.15);
  color: var(--accent-blue);
  margin-top: 12px;
}

.onboarding-inventory-panel {
  margin-top: 16px;
}

.onboarding-template-preview {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 10px;
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
}

.onboarding-template-category {
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.onboarding-template-category:first-child {
  margin-top: 0;
}

.onboarding-template-item {
  color: var(--text-secondary);
  padding-left: 10px;
}

.onboarding-template-status {
  margin-top: 8px;
  font-size: 0.85rem;
}

/* Team step */
.onboarding-team-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 18px;
}

.onboarding-team-existing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: #0f1320;
  border-radius: 12px;
  margin-bottom: 12px;
}

.onboarding-team-existing .role-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  text-transform: capitalize;
}

.onboarding-user-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.onboarding-user-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.onboarding-user-form input,
.onboarding-user-form select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #151924;
  color: var(--text-primary);
  font: inherit;
}

.onboarding-user-form input:focus,
.onboarding-user-form select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.onboarding-pw-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.onboarding-pw-row input {
  flex: 1;
  margin-top: 0;
  font-family: monospace;
  font-size: 0.85rem;
}

.onboarding-pw-row button {
  white-space: nowrap;
}

.onboarding-user-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  max-height: 180px;
  overflow-y: auto;
}

.onboarding-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0f1320;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  opacity: 0;
  animation: onboardingBulletIn .3s ease forwards;
}

.onboarding-user-row .role-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(74, 158, 255, 0.18);
  color: var(--accent-blue);
  text-transform: capitalize;
}

.onboarding-user-row .username {
  color: var(--text-muted);
  margin-left: auto;
  font-family: monospace;
  font-size: 0.8rem;
}

/* Completion step */
.onboarding-done {
  text-align: center;
  padding: 20px;
}

.onboarding-done-checkmark {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
}

.onboarding-done-checkmark circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: onboardingCheckCircle .6s ease-in-out forwards;
}

.onboarding-done-checkmark path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: onboardingCheckPath .4s ease-in-out .4s forwards;
}

@keyframes onboardingCheckCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes onboardingCheckPath {
  to { stroke-dashoffset: 0; }
}

.onboarding-done-confetti {
  position: relative;
  height: 0;
}

.onboarding-summary {
  display: grid;
  gap: 6px;
  margin: 20px auto 0;
  max-width: 400px;
  text-align: left;
}

.onboarding-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0f1320;
  border: 1px solid var(--border);
  font-size: 0.88rem;
  opacity: 0;
  transform: translateY(6px);
  animation: onboardingBulletIn .35s ease forwards;
}

.onboarding-summary-row:nth-child(1) { animation-delay: .15s; }
.onboarding-summary-row:nth-child(2) { animation-delay: .25s; }
.onboarding-summary-row:nth-child(3) { animation-delay: .35s; }
.onboarding-summary-row:nth-child(4) { animation-delay: .45s; }

.onboarding-summary-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.onboarding-summary-icon.done { color: #22c55e; }
.onboarding-summary-icon.skip { color: #f97316; }

.onboarding-summary-link {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--accent-blue);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}

.onboarding-summary-link:hover {
  text-decoration: underline;
}

.onboarding-plan-features {
  margin: 24px auto 0;
  max-width: 400px;
  text-align: left;
  border: 1px solid var(--border);
  background: #111521;
  border-radius: 14px;
  padding: 16px 20px;
}

.onboarding-plan-features h4 {
  margin: 0 0 10px;
  font-size: 0.85rem;
}

.onboarding-plan-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.onboarding-plan-features li {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.onboarding-plan-features li::before {
  content: "✓ ";
  color: #22c55e;
}

.onboarding-upgrade-hint {
  margin: 16px auto 0;
  max-width: 400px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.onboarding-upgrade-hint a {
  color: var(--accent-blue);
  text-decoration: none;
}

/* Form elements */
.onboarding-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.onboarding-form-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.onboarding-form label,
.onboarding-form input,
.onboarding-form textarea {
  display: block;
  width: 100%;
}

.onboarding-form input {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #151924;
  color: var(--text-primary);
}

.onboarding-form input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Actions */
.onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.onboarding-actions-left,
.onboarding-actions-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.onboarding-actions-right {
  margin-left: auto;
}

.onboarding-actions .primary,
.onboarding-actions .ghost {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s;
}

.onboarding-actions .primary {
  background: var(--accent-blue);
  color: #fff;
}

.onboarding-actions .primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow, rgba(74,158,255,0.3));
}

.onboarding-actions .primary:active {
  transform: scale(0.97);
}

.onboarding-actions .ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.onboarding-actions .ghost:hover {
  transform: translateY(-1px);
}

.onboarding-actions .ghost:active {
  transform: scale(0.97);
}

.onboarding-actions button:disabled,
.onboarding-header-right button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.onboarding-actions button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Error */
.onboarding-error {
  margin-top: 14px;
  color: #ff7b7b;
}

/* Pill badges */
.onboarding-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.onboarding-pill.is-ok {
  background: rgba(74, 158, 255, 0.18);
  color: var(--accent-blue);
}

.onboarding-pill.is-bad {
  background: rgba(255, 123, 123, 0.18);
  color: #ff7b7b;
}

/* Item form */
.onboarding-item-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.onboarding-item-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.onboarding-item-form input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #151924;
  color: var(--text-primary);
  font: inherit;
}

.onboarding-item-form input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.onboarding-item-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.onboarding-items-added {
  max-height: 150px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.onboarding-items-added-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f1320;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  opacity: 0;
  animation: onboardingBulletIn .3s ease forwards;
}

.onboarding-items-added-row .item-qty {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 0.78rem;
}

/* Stats (legacy compat) */
.onboarding-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.onboarding-stat {
  border: 1px solid var(--border);
  background: #0f1320;
  padding: 14px 16px;
  border-radius: 14px;
}

.onboarding-stat-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.onboarding-stat-value {
  margin: 8px 0 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.onboarding-stat-sub {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 700px) {
  .onboarding-header {
    flex-direction: column;
  }

  .onboarding-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .onboarding-profile-layout,
  .onboarding-pricing-layout,
  .onboarding-team-layout,
  .onboarding-inventory-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-card {
    width: 100%;
    border-radius: 16px;
  }

  .onboarding-cosmo {
    width: 48px;
    height: 48px;
  }

  .onboarding-cosmo-avatar {
    width: 44px;
    height: 44px;
  }
}

/* Suggested Templates — onboarding step 5 zones */
.onboarding-inventory-live {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.onboarding-templates-zone,
.onboarding-templates-more,
.onboarding-quickadd,
.onboarding-inv-progress {
  margin-top: 18px;
}

.onboarding-zone-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.onboarding-template-primary,
.onboarding-alt-templates {
  display: grid;
  gap: 12px;
}

.onboarding-alt-templates {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.onboarding-template-card {
  position: relative;
  border: 2px solid var(--border);
  background: #111521;
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.onboarding-template-card:hover,
.onboarding-template-card:focus-visible {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.04);
  outline: none;
}

.onboarding-template-card.is-recommended {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.08);
}

.onboarding-template-card.is-selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 18px rgba(74, 158, 255, 0.2);
}

.onboarding-template-card .tpl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.onboarding-template-card h4 {
  margin: 0;
  font-size: 1rem;
}

.onboarding-template-card .tpl-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.onboarding-template-card .tpl-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.onboarding-template-card .tpl-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.onboarding-template-card .tpl-chip {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.onboarding-template-card .tpl-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.onboarding-template-card .tpl-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #22c55e;
  color: white;
  font-size: 0.78rem;
  transform: scale(0);
  transition: transform 0.2s ease-out;
}

.onboarding-template-card.is-imported .tpl-check {
  transform: scale(1);
}

.onboarding-pricing-hint {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(74, 158, 255, 0.08);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.onboarding-import-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-import-card h4 {
  margin: 0;
  font-size: 0.95rem;
}

.onboarding-import-card textarea {
  width: 100%;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  background: #0b0f18;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  resize: vertical;
  min-height: 72px;
}

.onboarding-import-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.onboarding-import-preview {
  background: #0b0f18;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-size: 0.82rem;
}

.onboarding-import-preview table {
  width: 100%;
  border-collapse: collapse;
}

.onboarding-import-preview th,
.onboarding-import-preview td {
  padding: 4px 8px;
  text-align: left;
  font-weight: 500;
}

.onboarding-import-preview th {
  color: var(--text-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.onboarding-import-preview td {
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.onboarding-import-status {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

.onboarding-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.onboarding-category-pill {
  appearance: none;
  background: rgba(74, 158, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(74, 158, 255, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.onboarding-category-pill:hover,
.onboarding-category-pill:focus-visible {
  background: rgba(74, 158, 255, 0.18);
  border-color: var(--accent-blue);
  outline: none;
}

.onboarding-category-pill .pill-check {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  font-size: 0.75rem;
  color: #22c55e;
}

.onboarding-category-pill.is-recently-used .pill-check {
  opacity: 1;
  transform: scale(1);
}

.onboarding-inv-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboarding-inv-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: var(--text-secondary);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.onboarding-inv-status-chip .chip-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.onboarding-inv-status-chip.is-complete {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
}

.onboarding-inv-status-chip.is-complete .chip-icon {
  background: #22c55e;
}

.onboarding-inv-status-chip.is-complete .chip-icon::after {
  content: "\2713";
  color: white;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-template-card,
  .onboarding-template-card .tpl-check,
  .onboarding-category-pill,
  .onboarding-category-pill .pill-check,
  .onboarding-inv-status-chip {
    transition: none !important;
  }
}

/* Dashboard deferred-inventory banner */
.onboarding-defer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.08);
  color: var(--text-primary);
}

.onboarding-defer-banner p {
  margin: 0;
  font-size: 0.9rem;
}

.onboarding-defer-banner .defer-actions {
  display: flex;
  gap: 8px;
}

/* Dashboard post-inventory nudge card (legacy — replaced by goals panel) */
.onboarding-nudge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(74, 158, 255, 0.3);
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.1), rgba(52, 211, 153, 0.06));
  color: var(--text-primary);
}

.onboarding-nudge-card .nudge-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

.onboarding-nudge-card .nudge-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.onboarding-nudge-card h4 {
  margin: 0;
  font-size: 1rem;
}

.onboarding-nudge-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.onboarding-nudge-card .nudge-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Goal-based onboarding panel — compact classic companion */
.onboarding-goals-panel {
  margin: 10px 0 14px;
  min-width: 0;
}

.onboarding-goals-card {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: var(--bg-card, rgba(15, 23, 42, 0.55));
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.14);
  overflow: hidden;
}

.onboarding-goals-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent-blue, #4a9eff);
}

.onboarding-goals-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.onboarding-goals-eyebrow {
  margin: 0 0 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue, #4a9eff);
}

.onboarding-goals-title,
.onboarding-goals-header h3,
.onboarding-goals-detail h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
}

.onboarding-goals-sub,
.onboarding-goals-detail p,
.onboarding-goal-milestone-detail,
.onboarding-goals-progress-label,
.onboarding-goals-locked-reason {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

.onboarding-goal-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-goal-choice {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.28);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.onboarding-goal-choice:hover {
  border-color: rgba(74, 158, 255, 0.55);
}

.onboarding-goal-choice:active {
  transform: scale(0.98);
}

.onboarding-goal-choice:focus-visible {
  outline: 2px solid var(--accent-blue, #4a9eff);
  outline-offset: 2px;
}

.onboarding-goal-choice.is-selected {
  border-color: rgba(74, 158, 255, 0.9);
  background: rgba(74, 158, 255, 0.12);
}

.onboarding-goal-choice.is-locked {
  opacity: 0.55;
}

.onboarding-goal-choice-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue, #4a9eff);
  background: rgba(74, 158, 255, 0.12);
}

.onboarding-goal-choice-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.onboarding-goal-choice-title {
  font-weight: 700;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.onboarding-goal-choice-status {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.onboarding-goal-choice.is-complete .onboarding-goal-choice-status,
.onboarding-goal-choice-check {
  color: #34d399;
}

.onboarding-goals-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.onboarding-goals-detail-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}

.onboarding-goals-progress {
  min-width: 110px;
  max-width: 140px;
}

.onboarding-goals-progress-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.onboarding-goals-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.onboarding-goals-progress-label {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.onboarding-goal-milestones {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.onboarding-goal-milestone {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  align-items: start;
}

.onboarding-goal-milestone-mark {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 163, 184, 0.45);
}

.onboarding-goal-milestone.is-done .onboarding-goal-milestone-mark {
  border-color: #34d399;
  background: #34d399;
  box-shadow: inset 0 0 0 2px var(--bg-card, #0f172a);
}

.onboarding-goal-milestone-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.onboarding-goals-actions,
.onboarding-goals-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.onboarding-goals-actions {
  margin-top: 12px;
}

.onboarding-goals-entry {
  margin: 6px 0 10px;
}

.onboarding-goals-entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(74, 158, 255, 0.35);
  background: rgba(74, 158, 255, 0.08);
  color: var(--text-primary);
  cursor: pointer;
}

.onboarding-goals-entry-btn:focus-visible {
  outline: 2px solid var(--accent-blue, #4a9eff);
  outline-offset: 2px;
}

.onboarding-goals-entry-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue, #4a9eff);
  background: rgba(74, 158, 255, 0.12);
}

.onboarding-goals-entry-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.onboarding-goals-entry-label {
  font-weight: 700;
  font-size: 0.84rem;
}

.onboarding-goals-entry-hint {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.onboarding-goals-entry-chevron {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.onboarding-goals-card.is-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}

.onboarding-goals-loading-bar {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(74, 158, 255, 0.25);
  border-top-color: #4a9eff;
  animation: onboarding-goals-spin 0.7s linear infinite;
}

.onboarding-goals-loading-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

@keyframes onboarding-goals-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  .onboarding-goal-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .onboarding-goals-header,
  .onboarding-goals-detail-head {
    flex-direction: column;
  }

  .onboarding-goal-choices {
    grid-template-columns: 1fr;
  }

  .onboarding-goals-actions > button {
    flex: 1 1 auto;
    min-height: 40px;
  }
}

/* Guided subflow zone — build-kit, package builder, recurring plan, fleet unit */
.onboarding-guided-flow {
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(74, 158, 255, 0.3);
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.06), rgba(52, 211, 153, 0.04));
}

.onboarding-guided-flow .gf-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin: 0 0 6px;
}

.onboarding-guided-flow h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.onboarding-guided-flow .gf-body {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
}

.onboarding-guided-flow .gf-helper {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-style: italic;
}

.onboarding-guided-flow .gf-stage-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

.onboarding-guided-flow .gf-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 0.74rem;
}

.onboarding-guided-flow .gf-stage-pill.is-active {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.12);
}

.onboarding-guided-flow .gf-stage-pill.is-complete {
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}

.onboarding-guided-flow .gf-stage-pill .stage-num {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
}

.onboarding-guided-flow .gf-stage-pill.is-complete .stage-num::after {
  content: "\2713";
  color: #fff;
}

.onboarding-guided-flow .gf-stage-pill.is-complete .stage-num {
  background: #22c55e;
  color: #fff;
}

.onboarding-guided-flow .gf-stage-pill.is-complete .stage-num-text {
  display: none;
}

.onboarding-guided-flow .gf-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.onboarding-guided-flow .gf-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(92px, 0.6fr) auto auto auto;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.onboarding-guided-flow .gf-row.is-saved {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.06);
}

.onboarding-guided-flow .gf-row input[type="text"],
.onboarding-guided-flow .gf-row input[type="number"] {
  width: 100%;
  background: #0b0f18;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.84rem;
}

.onboarding-guided-flow .gf-row .gf-row-helper {
  color: var(--text-secondary);
  white-space: nowrap;
}

.onboarding-guided-flow .gf-row .gf-row-check {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: transparent;
  transition: background 0.2s, color 0.2s;
}

.onboarding-guided-flow .gf-row.is-saved .gf-row-check {
  background: #22c55e;
  color: #fff;
}

.onboarding-guided-flow .gf-row .gf-row-remove {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 6px;
}

.onboarding-guided-flow .gf-row .gf-row-remove:hover,
.onboarding-guided-flow .gf-row .gf-row-remove:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  outline: none;
}

.onboarding-guided-flow .gf-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.onboarding-guided-flow .gf-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.onboarding-guided-flow .gf-meta label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.onboarding-guided-flow .gf-meta input,
.onboarding-guided-flow .gf-meta select {
  background: #0b0f18;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.86rem;
}

.onboarding-guided-flow .gf-pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.onboarding-guided-flow .gf-pick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
}

.onboarding-guided-flow .gf-pick-pill[aria-pressed="true"] {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.16);
  color: var(--accent-blue);
}

.onboarding-guided-flow .gf-pick-pill .pick-check {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.15s, transform 0.15s;
  font-size: 0.74rem;
  color: #22c55e;
}

.onboarding-guided-flow .gf-pick-pill[aria-pressed="true"] .pick-check {
  opacity: 1;
  transform: scale(1);
  color: var(--accent-blue);
}

.onboarding-guided-flow .gf-status {
  margin: 8px 0 0;
  font-size: 0.84rem;
  min-height: 1.1em;
}

.onboarding-guided-flow .gf-status.is-success {
  color: #34d399;
}

.onboarding-guided-flow .gf-status.is-error {
  color: #f87171;
}

.onboarding-guided-flow .gf-completion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.onboarding-guided-flow .gf-completion ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

/* Build-kit subflow — generic, question-led builder */
.onboarding-guided-flow .gf-bk-section {
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.onboarding-guided-flow .gf-bk-section-label {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.onboarding-guided-flow .gf-bk-parent-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
}

.onboarding-guided-flow .gf-bk-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.onboarding-guided-flow .gf-bk-cell-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.onboarding-guided-flow .gf-bk-parent-grid input,
.onboarding-guided-flow .gf-bk-row input {
  background: #0b0f18;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.86rem;
  min-width: 0;
  width: 100%;
}

.onboarding-guided-flow .gf-bk-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.onboarding-guided-flow .gf-bk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(78px, 0.7fr) minmax(78px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.onboarding-guided-flow .gf-bk-row-remove {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 2px 8px;
  border-radius: 6px;
  align-self: end;
}

.onboarding-guided-flow .gf-bk-row-remove:hover,
.onboarding-guided-flow .gf-bk-row-remove:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  outline: none;
}

.onboarding-guided-flow .gf-bk-row-actions {
  margin-top: 4px;
}

.onboarding-guided-flow .gf-bk-chips-wrap {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(74, 158, 255, 0.06);
  border: 1px dashed rgba(74, 158, 255, 0.3);
}

.onboarding-guided-flow .gf-bk-chips-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.onboarding-guided-flow .gf-bk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.onboarding-guided-flow .gf-bk-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
}

.onboarding-guided-flow .gf-bk-chip:hover,
.onboarding-guided-flow .gf-bk-chip:focus-visible {
  border-color: var(--accent-blue);
  background: rgba(74, 158, 255, 0.12);
  outline: none;
}

.onboarding-guided-flow .gf-bk-chip-name {
  font-weight: 600;
}

.onboarding-guided-flow .gf-bk-chip-meta {
  font-size: 0.7rem;
}

.onboarding-guided-flow .gf-bk-saved-summary {
  margin: 0 0 10px;
}

.onboarding-guided-flow .gf-bk-saved-list {
  margin: 6px 0 12px;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

@media (max-width: 720px) {
  .onboarding-guided-flow .gf-bk-parent-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .onboarding-guided-flow .gf-bk-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "name name name"
      "cat cat cat"
      "perkit onhand remove";
  }
  .onboarding-guided-flow .gf-bk-row .gf-bk-cell-name { grid-area: name; }
  .onboarding-guided-flow .gf-bk-row .gf-bk-cell-category { grid-area: cat; }
  .onboarding-guided-flow .gf-bk-row .gf-bk-cell-num:nth-of-type(3) { grid-area: perkit; }
  .onboarding-guided-flow .gf-bk-row .gf-bk-cell-num:nth-of-type(4) { grid-area: onhand; }
  .onboarding-guided-flow .gf-bk-row .gf-bk-row-remove { grid-area: remove; align-self: end; }
}

@media (max-width: 720px) {
  .onboarding-guided-flow .gf-row {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 92px) auto auto;
    grid-template-areas:
      "name name name name"
      "qty helper check remove";
  }
  .onboarding-guided-flow .gf-row input[type="text"] {
    grid-area: name;
  }
  .onboarding-guided-flow .gf-row input[type="number"] {
    grid-area: qty;
  }
  .onboarding-guided-flow .gf-row .gf-row-helper {
    grid-area: helper;
  }
  .onboarding-guided-flow .gf-row .gf-row-check {
    grid-area: check;
    justify-self: end;
  }
  .onboarding-guided-flow .gf-row .gf-row-remove {
    grid-area: remove;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-guided-flow .gf-row,
  .onboarding-guided-flow .gf-row .gf-row-check,
  .onboarding-guided-flow .gf-pick-pill,
  .onboarding-guided-flow .gf-pick-pill .pick-check,
  .onboarding-guided-flow .gf-stage-pill {
    transition: none !important;
  }
}

/* ============================================
   POS Onboarding Wizard (steps 6 + 7 — POS-only)
   ============================================ */
.onboarding-step-dot-pos {
  background: linear-gradient(180deg, rgba(74,158,255,0.25), rgba(74,158,255,0.45));
}

.onboarding-pos-waiver-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 18px;
}

.onboarding-pos-waiver-form {
  display: grid;
  gap: 14px;
}

.onboarding-pos-waiver-form textarea,
.onboarding-pos-waiver-form input[type="text"],
.onboarding-pos-waiver-form input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #151924;
  color: var(--text-primary);
  font: inherit;
  resize: vertical;
}

.onboarding-pos-waiver-form textarea {
  min-height: 200px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  line-height: 1.5;
}

.onboarding-pos-waiver-form textarea:focus,
.onboarding-pos-waiver-form input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.onboarding-pos-waiver-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.onboarding-pos-waiver-link {
  margin: 4px 0 0;
  font-size: 0.85rem;
  padding: 10px 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 10px;
  color: #34d399;
  word-break: break-all;
}

.onboarding-pos-waiver-link a {
  color: inherit;
  text-decoration: underline;
}

.onboarding-pos-waiver-side {
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 18px 18px 14px;
  align-self: start;
}

.onboarding-pos-waiver-side .onboarding-preview-label {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.onboarding-pos-waiver-steps {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.onboarding-pos-waiver-steps code {
  background: rgba(74, 158, 255, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.82rem;
}

.onboarding-pos-hardware-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 18px;
}

.onboarding-pos-hardware-col {
  display: grid;
  gap: 16px;
  align-content: start;
}

.onboarding-pos-section {
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.onboarding-pos-section h4 {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.onboarding-pos-section label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.onboarding-pos-section input[type="text"],
.onboarding-pos-section input[type="number"],
.onboarding-pos-section textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #151924;
  color: var(--text-primary);
  font: inherit;
}

.onboarding-pos-section input:focus,
.onboarding-pos-section textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.onboarding-pos-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.onboarding-pos-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #151924;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.onboarding-pos-method:hover {
  border-color: var(--accent-blue);
}

.onboarding-pos-method input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent-blue);
}

.onboarding-pos-section .onboarding-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.onboarding-pos-section .onboarding-toggle-row span {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.onboarding-pos-section code {
  background: rgba(74, 158, 255, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.82rem;
}

@media (max-width: 820px) {
  .onboarding-pos-waiver-grid,
  .onboarding-pos-hardware-layout {
    grid-template-columns: 1fr;
  }
  .onboarding-pos-method-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   OVERBOOKED BADGE & AVAILABILITY STYLES
   ============================================ */

.overbooked-badge {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* A package already booked on the event being edited — its card offers Remove
   instead of Add, so it needs to read as "already chosen" at a glance. */
.quote-package-card.package-on-event {
  border-left: 3px solid var(--accent-green);
  background: rgba(34, 197, 94, 0.08);
}

.package-on-event-badge {
  display: inline-block;
  background: rgba(34, 197, 94, 0.2);
  color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.45);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.quote-item-card.overbooked,
.quote-package-card.overbooked {
  border-left: 3px solid #ef4444;
}

.overbooked-stock {
  color: #ef4444 !important;
  font-weight: 600;
}

/* A Build Kit whose components are fully committed on the chosen date. This
   is amber rather than red: nothing is oversold yet, but quoting it would
   promise something the warehouse can't assemble that day. */
.quote-item-card.kit-depleted {
  border-left: 3px solid #f59e0b;
}

.kit-depleted-badge {
  display: inline-block;
  background: #f59e0b;
  color: #1a1a1a;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.kit-depleted-stock {
  color: #f59e0b !important;
  font-weight: 600;
}

.quote-package-card .overbooked-stock {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.quote-package-stock-warning {
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 600;
  margin: -4px 0 6px 0;
  overflow-wrap: anywhere;
}

/* ============================================
   PER-ITEM PRICE OVERRIDE STYLES
   ============================================ */

.selected-item-total.editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--text-secondary, #888);
  transition: color 0.15s;
}

.selected-item-total.editable:hover {
  color: var(--accent, #3b82f6);
}

.selected-item-total.price-overridden {
  color: #f59e0b;
  font-weight: 600;
  border-bottom-color: #f59e0b;
}

.price-override-input {
  width: 80px;
  padding: 2px 4px;
  font-size: 0.85rem;
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 4px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #fff);
  text-align: right;
  outline: none;
}

.price-override-input:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* ============================================
   EMOJI EDIT INPUT
   ============================================ */

.emoji-edit-input {
  width: 40px;
  padding: 2px;
  font-size: 1.1rem;
  text-align: center;
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 4px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #fff);
  outline: none;
}

.emoji-edit-input:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.category-icon[data-category] {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Event Modal Tabs ────────────────────────────────────────────────────────── */
.event-modal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.event-modal-tab {
  padding: 8px 18px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.event-modal-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.event-modal-tab.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.event-modal-tab.active:hover {
  background: var(--accent-blue-dark);
}

.event-modal-tab-content[hidden] {
  display: none;
}

/* ── Document Upload & List ──────────────────────────────────────────────────── */
.document-upload-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  transition: border-color 0.2s, background 0.2s;
}

.document-upload-dropzone.dragover {
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.05);
}

.document-upload-dropzone p {
  margin: 0 0 4px;
  color: var(--text-secondary);
}

.document-upload-dropzone small {
  color: var(--text-secondary);
  opacity: 0.7;
}

.dropzone-browse {
  color: var(--accent-blue);
  cursor: pointer;
  text-decoration: underline;
}

.dropzone-category {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dropzone-category label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.dropzone-category select {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.event-modal-doc-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

.event-modal-doc-tools-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-modal-doc-tools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-modal-doc-send-status {
  min-height: 1.25rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.document-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.document-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.document-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.document-item-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-item-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.document-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.document-item-actions .small-btn {
  font-size: 0.78rem;
  padding: 4px 10px;
}

.document-item-actions a.small-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ── Document Viewer & Editor Modals ─────────────────────────────────────────── */
.document-viewer-content,
.document-editor-content {
  max-width: 900px;
  width: 95vw;
  max-height: 85vh;
}

.document-viewer-body,
.document-editor-body {
  padding: 16px 0;
  overflow: auto;
  max-height: calc(85vh - 80px);
}

.document-editor-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.document-editor-content .modal-header > div {
  display: flex;
  gap: 8px;
}

.documents-hub-modal-content {
  width: min(1320px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.documents-hub-subtitle {
  margin: 4px 0 0;
}

.documents-hub-shell {
  padding: 0 24px 24px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.documents-hub-usage-card,
.documents-hub-results-panel,
.documents-hub-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
  padding: 18px;
}

.documents-hub-usage-header,
.documents-hub-section-header,
.documents-hub-toolbar,
.documents-hub-event-actions,
.documents-hub-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.documents-hub-plan-badge,
.documents-hub-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.documents-hub-plan-badge {
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent-blue);
}

.documents-hub-badge.system {
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent-blue);
}

.documents-hub-badge.legacy {
  background: rgba(249, 115, 22, 0.12);
  color: var(--accent-orange, #f97316);
}

.documents-hub-usage-bar {
  margin-top: 14px;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border);
}

.documents-hub-usage-fill {
  height: 100%;
  width: 0;
  background: var(--accent-blue);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.documents-hub-usage-fill.warning {
  background: #f59e0b;
}

.documents-hub-usage-fill.danger {
  background: #ef4444;
}

.documents-hub-warning {
  margin-top: 12px;
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.documents-hub-warning.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.documents-hub-toolbar {
  align-items: flex-start;
  flex-wrap: wrap;
}

.documents-hub-search-wrap {
  flex: 1 1 280px;
}

.documents-hub-search-wrap input,
.documents-hub-toolbar-controls select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.documents-hub-toolbar-controls {
  display: flex;
  flex: 2 1 760px;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.documents-hub-view-toggle {
  display: inline-flex;
  gap: 6px;
}

.documents-hub-write-note {
  width: 100%;
}

.documents-hub-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.documents-hub-crumb {
  border: none;
  background: none;
  color: var(--accent-blue);
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}

.documents-hub-crumb[disabled] {
  color: var(--text-primary);
  cursor: default;
}

.documents-hub-crumb-sep {
  color: var(--text-secondary);
}

.documents-hub-results {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.documents-hub-results.grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.documents-hub-results.list {
  grid-template-columns: 1fr;
}

.documents-hub-entry,
.documents-hub-recent-item,
.documents-hub-linked-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-primary);
  padding: 14px;
  display: grid;
  gap: 12px;
  align-items: center;
}

.documents-hub-entry {
  grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: pointer;
}

.documents-hub-entry:hover,
.documents-hub-recent-item:hover,
.documents-hub-linked-row:hover {
  border-color: rgba(37, 99, 235, 0.4);
}

.documents-hub-entry-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--bg-secondary);
}

.documents-hub-entry-body,
.documents-hub-recent-text,
.documents-hub-linked-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.documents-hub-entry-title,
.documents-hub-recent-name,
.documents-hub-event-summary-title {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-hub-entry-meta,
.documents-hub-event-summary-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.documents-hub-entry-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.documents-hub-entry-actions .danger {
  color: #ef4444;
}

.documents-hub-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 16px;
}

.documents-hub-recent-list,
.documents-hub-event-docs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.documents-hub-recent-item,
.documents-hub-linked-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.documents-hub-linked-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.documents-hub-event-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-primary);
  overflow: hidden;
}

.documents-hub-event-group summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.documents-hub-event-group summary::-webkit-details-marker {
  display: none;
}

.documents-hub-event-group-body {
  border-top: 1px solid var(--border);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.documents-hub-preview-fallback {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.documents-hub-text-preview {
  white-space: pre-wrap;
  max-height: 70vh;
  overflow: auto;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.documents-hub-editor-modal-content {
  width: min(1180px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.documents-hub-editor-modal-content.is-fullscreen {
  width: min(1400px, 99vw);
  max-height: 97vh;
}

.documents-hub-editor-notice {
  margin: 0 24px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.documents-hub-editor-body {
  padding: 16px 24px 24px;
  overflow: auto;
  max-height: calc(92vh - 120px);
}

.documents-hub-markdown-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.documents-hub-markdown-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.documents-hub-textarea {
  width: 100%;
  min-height: 540px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 14px;
  resize: vertical;
  font-family: "Courier New", monospace;
}

.documents-hub-markdown-preview {
  min-height: 540px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 18px;
  overflow: auto;
}

.documents-hub-markdown-preview h1,
.documents-hub-markdown-preview h2,
.documents-hub-markdown-preview h3,
.documents-hub-markdown-preview h4,
.documents-hub-markdown-preview h5,
.documents-hub-markdown-preview h6 {
  margin: 0 0 12px;
}

.documents-hub-markdown-preview p,
.documents-hub-markdown-preview ul,
.documents-hub-markdown-preview ol,
.documents-hub-markdown-preview pre {
  margin: 0 0 12px;
}

.documents-hub-markdown-preview code {
  font-family: "Courier New", monospace;
  background: rgba(148, 163, 184, 0.14);
  padding: 2px 6px;
  border-radius: 8px;
}

.documents-hub-markdown-preview pre {
  background: var(--bg-secondary);
  padding: 12px;
  border-radius: 12px;
  overflow: auto;
}

.documents-hub-markdown-preview pre code {
  background: none;
  padding: 0;
}

.documents-hub-markdown-preview a {
  color: var(--accent-blue);
}

.documents-hub-editor-status.error {
  color: #ef4444;
}

.documents-hub-editor-status.success {
  color: #22c55e;
}

.documents-hub-share-modal-content {
  width: min(980px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.documents-hub-share-grid {
  padding: 0 24px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
  overflow: auto;
}

.documents-hub-share-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.documents-hub-share-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.documents-hub-share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.documents-hub-share-link-row input,
.documents-hub-share-panel input,
.documents-hub-share-panel textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
}

.documents-hub-share-panel textarea {
  resize: vertical;
  min-height: 132px;
}

.documents-hub-share-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
}

.documents-hub-share-status,
.documents-hub-share-email-meta {
  line-height: 1.5;
}

.documents-hub-share-status.success,
.documents-hub-share-email-meta.success {
  color: #22c55e;
}

.documents-hub-share-status.error,
.documents-hub-share-email-meta.error {
  color: #ef4444;
}

.documents-hub-share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 600px) {
  .saved-quote-response-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .document-item {
    flex-wrap: wrap;
  }

  .document-item-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .event-modal-doc-tools-actions {
    flex-direction: column;
  }

  .documents-hub-shell {
    padding: 0 16px 16px;
  }

  .documents-hub-toolbar,
  .documents-hub-toolbar-controls,
  .documents-hub-usage-header,
  .documents-hub-section-header,
  .documents-hub-editor-actions,
  .documents-hub-entry,
  .documents-hub-recent-item,
  .documents-hub-linked-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .documents-hub-secondary-grid,
  .documents-hub-markdown-body,
  .documents-hub-share-grid {
    grid-template-columns: 1fr;
  }

  .documents-hub-entry-actions,
  .documents-hub-event-actions {
    justify-content: flex-start;
  }

  .documents-hub-share-link-row {
    grid-template-columns: 1fr;
  }

  .documents-hub-markdown-preview {
    min-height: 280px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   UI POLISH — Toast Notifications, Confirm Dialog, Modal Animations
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Toast Notification System ─────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 36px));
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: toastSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transform-origin: top right;
}

.toast::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  animation: toastProgress var(--toast-duration, 3.5s) linear forwards;
  border-radius: 0 0 14px 14px;
}

.toast-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.toast-message {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  white-space: pre-line;
}

.toast-dismiss {
  flex-shrink: 0;
  opacity: 0;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
  transition: opacity 0.2s ease;
  color: inherit;
  background: none;
  border: none;
  line-height: 1;
}

.toast:hover .toast-dismiss {
  opacity: 0.7;
}

.toast-dismiss:hover {
  opacity: 1 !important;
}

.toast-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.92), rgba(22, 163, 74, 0.92));
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.toast-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.92), rgba(220, 38, 38, 0.92));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.toast-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.92), rgba(217, 119, 6, 0.92));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.toast-info {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.92), rgba(59, 130, 246, 0.92));
  border: 1px solid rgba(74, 158, 255, 0.3);
}

.toast.toast-exiting {
  animation: toastSlideOut 0.28s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(40px) scale(0.92);
  }
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ── Custom Confirmation Dialog ────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 100000;
  padding: 24px;
  animation: confirmOverlayIn 0.2s ease forwards;
}

.confirm-overlay.confirm-exiting {
  animation: confirmOverlayOut 0.18s ease forwards;
}

.confirm-dialog {
  background: var(--bg-card, #1f1f1f);
  border: 1px solid var(--border, #333);
  border-radius: 18px;
  padding: 28px;
  max-width: min(440px, 90vw);
  width: 100%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: confirmDialogIn 0.25s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.confirm-overlay.confirm-exiting .confirm-dialog {
  animation: confirmDialogOut 0.18s ease forwards;
}

.confirm-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 10px;
}

.confirm-message {
  font-size: 0.95rem;
  color: var(--text-secondary, #b0b0b0);
  line-height: 1.55;
  margin: 0 0 24px;
  white-space: pre-line;
}

/* Opt-in row inside a confirm dialog (e.g. "also email the deposit request"). */
.confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  background: var(--bg-secondary, #1a1a1a);
  cursor: pointer;
}

.confirm-checkbox input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--accent-blue, #4a9eff);
}

.confirm-checkbox-text {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary, #fff);
  line-height: 1.45;
}

.confirm-checkbox-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary, #b0b0b0);
  line-height: 1.45;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-actions button {
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.confirm-actions button:hover {
  transform: translateY(-1px);
}

.confirm-actions button:active {
  transform: translateY(0) scale(0.97);
}

.confirm-cancel-btn {
  background: var(--bg-secondary, #1a1a1a);
  color: var(--text-secondary, #b0b0b0);
  border: 1px solid var(--border, #333) !important;
}

.confirm-cancel-btn:hover {
  background: var(--bg-tertiary, #141414);
}

.confirm-ok-btn {
  background: var(--accent-blue, #4a9eff);
  color: #fff;
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.confirm-ok-btn:hover {
  box-shadow: 0 6px 16px rgba(74, 158, 255, 0.4);
}

.confirm-danger-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.confirm-danger-btn:hover {
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

@keyframes confirmOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes confirmOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes confirmDialogIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes confirmDialogOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(6px);
  }
}

/* ── Modal Entrance / Exit Animations ──────────────────────────────────────── */
.modal:not([hidden]) {
  animation: modalOverlayIn 0.25s ease forwards;
}

.modal:not([hidden]) > .modal-content {
  animation: modalContentIn 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.modal.modal-closing {
  display: grid !important;
  animation: modalOverlayOut 0.2s ease forwards;
}

.modal.modal-closing > .modal-content {
  animation: modalContentOut 0.2s ease forwards;
}

@keyframes modalOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalContentIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalContentOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
}

/* ── Button Micro-Interactions ─────────────────────────────────────────────── */
button:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
  transition: transform 0.08s ease;
}

/* Success flash for buttons after action completes */
@keyframes btnSuccessFlash {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.btn-success-flash {
  animation: btnSuccessFlash 0.6s ease;
}

/* ── Smooth Tab Transitions ────────────────────────────────────────────────── */
.inventory-tab,
.quotes-tab,
.analytics-tab,
.settings-tab,
.timesheets-tab,
.customers-tab {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Form Element Transitions ──────────────────────────────────────────────── */
input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}

/* ── List / Card Entrance Animations ───────────────────────────────────────── */
@keyframes listItemIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Status Chip Transitions ───────────────────────────────────────────────── */
.event-status, .quote-status-chip, .contract-status-chip {
  transition: background 0.2s ease, color 0.2s ease;
}

/* ── Mobile Adjustments for Toasts ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .toast {
    font-size: 0.85rem;
    padding: 12px 14px;
  }

  .confirm-dialog {
    padding: 22px;
    border-radius: 16px;
  }
}

/* ── Wiki Guide Audio Button ───────────────────────────────────────────────── */

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.wiki-audio-btn {
  flex-shrink: 0;
  padding: 4px 6px;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wiki-audio-btn:hover {
  opacity: 1;
}

.wiki-audio-btn.wiki-audio-playing {
  opacity: 1;
  color: var(--accent, #0ea5e9);
}

.tab-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* ── Reduced Motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.toast-exiting,
  .confirm-overlay,
  .confirm-dialog,
  .confirm-overlay.confirm-exiting .confirm-dialog,
  .modal:not([hidden]),
  .modal:not([hidden]) > .modal-content,
  .modal.modal-closing,
  .modal.modal-closing > .modal-content {
    animation-duration: 0.01ms !important;
  }

  .toast::after {
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Tenant hibernation wake overlay (see docs/tenant-sleep.md)
   ========================================================================== */

.wake-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  font-family: system-ui, -apple-system, sans-serif;
}

.wake-overlay.is-visible {
  display: flex;
}

.wake-overlay-card {
  background: #14161b;
  color: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 440px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wake-overlay-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #ff8c4a;
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: wake-overlay-spin 0.9s linear infinite;
}

@keyframes wake-overlay-spin {
  to { transform: rotate(360deg); }
}

.wake-overlay-title {
  font-size: 1.3rem;
  margin: 0 0 8px;
  color: #ff8c4a;
  font-weight: 600;
}

.wake-overlay-msg {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #c8c8cc;
  margin: 0;
}

.wake-overlay-retry {
  margin-top: 20px;
  background: #ff8c4a;
  color: #14161b;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.wake-overlay-retry:hover {
  background: #ffa066;
}

/* ── Mileage Tracking ────────────────────────────────────── */
.mileage-info-note {
  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
  border-left: 3px solid var(--warning, #f59e0b);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--text-muted, #888);
  line-height: 1.5;
}

.mileage-asset-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.mileage-asset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.mileage-asset-type {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
}

.mileage-hint {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  margin: 4px 0 0;
}

.mileage-conflict-msg {
  color: var(--danger, #ef4444);
  font-size: 0.875rem;
  margin: 0;
}

.mileage-total-preview {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary, #3b82f6);
  margin: 6px 0 0;
}

.mileage-end-summary {
  background: var(--bg-subtle, rgba(0,0,0,0.04));
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mileage-trip-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Recording-method picker (classic theme) */
.mileage-method-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}
@media (min-width: 520px) {
  .mileage-method-picker {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.mileage-method-card {
  text-align: left;
  background: var(--bg-subtle, rgba(0,0,0,0.04));
  border: 1px solid var(--border-color, #d4d4d8);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: inherit;
  transition: border-color 120ms, background 120ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mileage-method-card:hover {
  border-color: color-mix(in srgb, var(--primary, #3b82f6) 40%, var(--border-color, #d4d4d8));
}
.mileage-method-card.is-active {
  border-color: var(--primary, #3b82f6);
  background: color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
}
.mileage-method-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.mileage-method-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  line-height: 1.35;
}

/* Per-asset × year breakdown table on the global Mileage analytics tab */
#mileage-by-asset-year-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
#mileage-by-asset-year-table th,
#mileage-by-asset-year-table td {
  text-align: right;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
#mileage-by-asset-year-table th:first-child,
#mileage-by-asset-year-table td:first-child {
  text-align: left;
}
#mileage-by-asset-year-table thead th {
  font-weight: 600;
  color: var(--text-muted, #888);
}

/* ── Apex loading animation ─────────────────────────────────────────────────
   The one busy indicator for panel, overlay and inline waits. The artwork is a
   Lottie composition mounted by apex-loader.js; everything here is the box it
   sits in, plus the ring that shows for the moment before the player arrives
   (and forever, if it never does — see apex-loader.js). */
.apex-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.apex-loader-inline {
  width: 30px;
  height: 30px;
  margin-left: 6px;
}

.apex-loader-panel {
  width: 88px;
  height: 88px;
}

.apex-loader-overlay {
  width: 132px;
  height: 132px;
}

/* Unprefixed: the stage is injected into adopted spinners on pages that never
   load this file's scope (login, reset-password). */
.apex-loader-stage {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.apex-loader-stage svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Pre-player fallback. Removed by apex-loader.js the instant the animation is
   actually running, so the two never overlap. */
.apex-loader:not([data-apex-loader-ready])::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: #ff8c4a;
  animation: apex-loader-spin 0.9s linear infinite;
}

@keyframes apex-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .apex-loader:not([data-apex-loader-ready])::before {
    animation: apex-loader-fade 1.4s ease-in-out infinite;
  }
}

@keyframes apex-loader-fade {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ── Google Calendar data-source choice ─────────────────────────────────────
   Shown once on first connect, and editable afterwards. The prompt banner is
   what makes the first-connect question feel like a question rather than a
   setting the owner has to go looking for. */
.google-import-mode {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.google-import-mode-prompt {
  margin: -16px -16px 14px;
  padding: 10px 16px;
  border-radius: 10px 10px 0 0;
  background: var(--accent, #6c5ce7);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.google-import-mode-intro {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.google-import-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}
.google-import-option:hover { background: rgba(255, 255, 255, 0.04); }
.google-import-option input { margin-top: 4px; flex: none; }
.google-import-option strong { display: block; font-size: 0.92rem; }
.google-import-option small {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.45;
}
.google-import-note {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-style: italic;
}
.google-import-mode-status { display: block; margin-top: 8px; font-size: 0.85rem; }

/* ── Layout Flythrough Player ────────────────────────────────────────────────── */
.layout-animation-content {
  width: 94vw;
  max-width: 1280px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.layout-animation-heading h3 {
  margin: 0;
}

.layout-animation-subtitle {
  margin: 4px 0 0;
  color: var(--muted, #94a3b8);
  font-size: 0.85rem;
}

.layout-animation-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  border-radius: 14px;
  background: #04101d;
}

.layout-animation-stage img {
  max-width: 100%;
  max-height: calc(94vh - 250px);
  width: auto;
  border-radius: 10px;
  image-rendering: auto;
}

.layout-animation-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.layout-animation-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  flex: 1 1 420px;
  margin: 0;
}

.layout-animation-facts dt {
  color: var(--muted, #94a3b8);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.layout-animation-facts dd {
  margin: 3px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.layout-animation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layout-animation-actions a.small-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (max-width: 640px) {
  .layout-animation-stage img { max-height: 46vh; }
}

/* ---------------------------------------------------------------------------
   Partner ("middle-man") package pricing — classic theme.
   Mirrors the calops-ui rules; see apps/core/public/calops-ui/calops.css.
   --------------------------------------------------------------------------- */
.middleman-banner {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
  font-size: 0.82rem;
  line-height: 1.4;
}
.middleman-banner[hidden] { display: none; }
.middleman-banner.warning {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.partner-scope-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.partner-package-badge {
  display: inline-block;
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.quote-package-card.partner-package,
.package-card.partner-package {
  border-left: 3px solid #38bdf8;
}

.package-partner-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  font-size: 0.65rem;
  font-weight: 600;
}
.package-partner-tag.orphaned {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.package-stored-name {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}

.inventory-qr-settings {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-tertiary);
}

.inventory-qr-settings-copy > strong { font-size: 1rem; }
.inventory-qr-settings-copy p { margin: 6px 0 12px; }
.inventory-qr-toggle { margin: 0; }
.inventory-qr-tools { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.inventory-qr-preview { width: 150px; height: 150px; padding: 6px; border-radius: 10px; background: #fff; }
.inventory-qr-print-controls { display: grid; gap: 10px; flex: 1; }
.inventory-qr-print-controls label { margin: 0; }
.inventory-qr-print-controls input { width: 96px; }
.inventory-item-badge-qr { color: #22c55e; border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .12); }

@media (max-width: 640px) {
  .inventory-qr-tools { align-items: stretch; flex-direction: column; }
  .inventory-qr-preview { align-self: center; }
}