/* ================================================================
   components.css — shared component styles for all orgs
   Load order: style.min.css → components.css → [org].css
   ================================================================ */

/* ================================================================
   GLOBAL UTILITY / APP SHELL (from styles.html)
   ================================================================ */

:root {
  --cart-text-dark: #2c3e50;
  --cart-text-muted: #6c757d;
  --cart-bg-light: #f8f9fa;
  --cart-success: #0f8448;
  --cart-danger: #dc3545;
}

.bararea {
  width: 100%;
  border: 3px solid #E6E6E6;
  border-radius: 30px;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.import-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 2em;
  height: 2em;
  border: 1px solid #000;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

.import-checkbox:checked::after {
  content: "✔";
  color: var(--org-primary);
  font-size: 1.6em;
  position: absolute;
  top: -0.2em;
  left: 0.2em;
}

.linkarea {
  width: 100%;
  height: 80px;
  border: none;
}

.linkarea input {
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
}

.linkarea input:focus {
  outline: none;
}

.linkarea .spinner {
  display: none;
  margin-top: 50%;
}

.linkarea.uploading {
  background: none;
}

.no-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.btn-outline-highlight, .btn-outline.btn-highlight {
  --tblr-btn-color: var(--org-primary);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--org-primary);
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-hover-bg: var(--org-primary);
  --tblr-btn-active-color: var(--org-primary);
  --tblr-btn-active-bg: var(--org-primary);
  --tblr-btn-active-border-color: var(--org-primary);
  --tblr-btn-disabled-color: var(--org-primary);
  --tblr-btn-disabled-border-color: var(--org-primary);
}

.upload-area {
  background: white;
  border: 2px dashed var(--org-primary);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1rem;
  transition: background-color 0.3s;
}

.upload-area:hover {
  background-color: var(--org-primary-light);
}

.upload-title {
  color: var(--org-primary);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.upload-description {
  color: #666;
  font-size: 14px;
}

.divider {
  text-align: center;
  color: #999;
  margin: 1.5rem 0;
  position: relative;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: #e0e0e0;
}

.divider::before { left: 0; }
.divider::after { right: 0; }

.file-select-btn {
  background: white;
  border: 2px solid var(--org-primary);
  color: var(--org-primary);
  padding: 0.8rem 2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.3s;
}

.file-select-btn:hover {
  background: var(--org-primary);
  color: white;
}

.file-input-hidden { display: none; }

.info-box {
  margin: 0 auto;
  background: var(--org-primary-light);
  border-left: 4px solid var(--org-primary);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
}

.info-icon {
  color: var(--org-primary);
  font-size: 24px;
  flex-shrink: 0;
}

.info-content h4 {
  color: #333;
  font-size: 16px;
  margin-bottom: 0.5rem;
}

.info-content p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 18px;
  color: #333;
}

.modal-body { padding: 1.5rem; }

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}

.btn {
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover { background: #5a6268; }

.faq-section { margin: 0 auto; }

.faq-header {
  background: white;
  border: 2px solid #e6e6e6;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.faq-header:hover {
  border-color: var(--org-primary);
  box-shadow: 0 4px 12px var(--org-shadow-sm);
}

.faq-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: left;
  gap: 1rem;
}

.faq-title i {
  color: var(--org-primary);
  font-size: 24px;
}

.faq-toggle {
  color: var(--org-primary);
  font-size: 24px;
  transition: transform 0.3s;
}

.faq-toggle.active { transform: rotate(180deg); }

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-content.active {
  max-height: 2000px;
  transition: max-height 0.5s ease-in;
}

.faq-items {
  background: white;
  border: 2px solid #e6e6e6;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 2rem;
  margin-top: -10px;
}

.faq-items-top {
  background: white;
  border: 2px solid #e6e6e6;
  border-radius: 12px;
  padding: 2rem;
  margin-top: -10px;
}

.faq-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e6e6e6;
}

.faq-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.faq-question {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.faq-answer {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.sub-faq-items { margin-top: 1.5rem; }

.sub-faq-item {
  margin-bottom: 1rem;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
}

.sub-faq-item:last-child { margin-bottom: 0; }

.sub-faq-header {
  padding: 1rem 1.2rem;
  background: #f8f9fa;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.sub-faq-header:hover { background: #e9ecef; }

.sub-card-header {
  padding: 1rem 1.2rem;
  background: #f8f9fa;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.sub-faq-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.sub-faq-title i {
  color: var(--org-primary);
  font-size: 18px;
}

.sub-faq-toggle {
  color: var(--org-primary);
  font-size: 16px;
  transition: transform 0.3s;
}

.sub-faq-toggle.active { transform: rotate(180deg); }

.sub-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.sub-faq-content.active {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

.sub-faq-answer {
  padding: 1.2rem;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  background: white;
}

.btn-primary-custom {
  background: var(--org-primary-gradient);
  text-decoration: none;
  color: white;
  padding: 1rem 3rem;
  border-radius: 12px;
  border: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px var(--org-shadow-md);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.3s ease;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus {
  background: var(--org-primary-gradient);
  color: white;
  text-decoration: none;
}

#footer-panel {
  position: absolute;
  bottom: 100%;
  width: 100%;
  z-index: 2;
  background-color: #2C2C2C;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 #2C2C2C;
}

#footer-panel::-webkit-scrollbar { width: 8px; }
#footer-panel::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .search-bar { flex-direction: column; }
  .action-icons { flex-wrap: wrap; }
  .qr-section { flex-direction: column; }
}

/* ================================================================
   NAVBAR REDESIGN (from menu.html)
   ================================================================ */

.navbar-redesign {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-redesign .navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.navbar-redesign .navbar-brand-redesign {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-redesign .navbar-logo-full {
  height: 38px;
  width: auto;
  transition: transform 0.3s ease;
}

.navbar-redesign .navbar-brand-redesign:hover .navbar-logo-full {
  transform: scale(1.03);
}

.navbar-redesign .nav-menu-redesign {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 16px;
  padding: 0;
  list-style: none;
  flex: 1;
}

.navbar-redesign .nav-menu-item {
  background: transparent;
  border: none;
  color: #6c757d;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.navbar-redesign .nav-menu-item:hover {
  background: var(--org-primary-light);
  color: var(--org-primary);
}

.navbar-redesign .nav-menu-item.active {
  color: var(--org-primary);
  background: var(--org-primary-light);
}

.navbar-redesign .nav-menu-item--cart { font-weight: 600; }
.navbar-redesign .nav-menu-item i { font-size: 1rem; }

.navbar-redesign .navbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.navbar-redesign .btn-login-redesign {
  background: var(--org-primary);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.navbar-redesign .btn-login-redesign:hover {
  background: var(--org-primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--org-shadow-lg);
}

.navbar-redesign .btn-logout-redesign {
  background: #f8f9fa;
  color: #6c757d;
}

.navbar-redesign .btn-logout-redesign:hover {
  background: #e9ecef;
  color: #2c3e50;
  box-shadow: none;
}

.navbar-redesign .menu-toggle-redesign {
  display: none;
  background: #f8f9fa;
  border: none;
  color: #2c3e50;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.navbar-redesign .menu-toggle-redesign:hover {
  background: var(--org-primary);
  color: white;
}

.navbar-redesign .mobile-menu-redesign {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  flex-direction: column;
  gap: 8px;
  z-index: 1029;
}

.navbar-redesign .mobile-menu-redesign.show { display: flex; }

.navbar-redesign .mobile-menu-redesign .nav-menu-item {
  width: 100%;
  justify-content: flex-start;
  padding: 14px 20px;
  border-radius: 10px;
}

.navbar-redesign .mobile-menu-redesign .mobile-divider {
  height: 1px;
  background: #e9ecef;
  margin: 8px 0;
}

.navbar-redesign .profile-dropdown { position: relative; }

.navbar-redesign .profile-btn-redesign {
  background: #f8f9fa;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  color: #2c3e50;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-redesign .profile-btn-redesign:hover {
  background: #e9ecef;
  color: var(--org-primary);
}

.navbar-redesign .profile-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  padding: 8px;
  z-index: 1040;
}

.navbar-redesign .profile-dropdown.show .profile-dropdown-menu { display: block; }

.navbar-redesign .profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #2c3e50;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.navbar-redesign .profile-dropdown-item:hover {
  background: #f8f9fa;
  color: var(--org-primary);
}

.navbar-redesign .profile-dropdown-item i {
  width: 20px;
  text-align: center;
  color: #6c757d;
}

.navbar-redesign .profile-dropdown-item:hover i { color: var(--org-primary); }

.navbar-redesign .profile-dropdown-divider {
  height: 1px;
  background: #e9ecef;
  margin: 8px 0;
}

.navbar-redesign .lang-toggle-redesign {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 0 10px;
  height: 46px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s ease;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar-redesign .lang-toggle-redesign:hover { background: #e9ecef; }
.navbar-redesign .lang-toggle-redesign .lang-active {
  color: var(--org-primary);
  font-weight: 700;
}
.navbar-redesign .lang-toggle-redesign .lang-sep { color: #dee2e6; }

.navbar-redesign .theme-toggle-redesign {
  background: #f8f9fa;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  color: #2c3e50;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-redesign .theme-toggle-redesign:hover { background: #e9ecef; color: var(--org-primary); }

@media (max-width: 992px) {
  .navbar-redesign .nav-menu-redesign { display: none; }
  .navbar-redesign .menu-toggle-redesign { display: block; }
  .navbar-redesign .navbar-actions { gap: 8px; }
  .navbar-redesign .profile-dropdown { display: none; }
}

@media (max-width: 576px) {
  .navbar-redesign { padding: 0.5rem 0.75rem; }
  .navbar-redesign .navbar-container { gap: 10px; }
  .navbar-redesign .navbar-logo-full { height: 32px; }
  .navbar-redesign .cart-btn-redesign,
  .navbar-redesign .menu-toggle-redesign,
  .navbar-redesign .theme-toggle-redesign {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    border-radius: 8px;
  }
  .navbar-redesign .btn-login-redesign {
    padding: 8px 14px;
    font-size: 0.85rem;
    border-radius: 8px;
  }
  .navbar-redesign .cart-badge-redesign {
    min-width: 18px;
    height: 18px;
    font-size: 0.65rem;
    top: -5px;
    right: -5px;
  }
  .navbar-redesign .navbar-actions { gap: 6px; }
}

@media (max-width: 380px) {
  .navbar-redesign { padding: 0.4rem 0.5rem; }
  .navbar-redesign .navbar-logo-full { height: 28px; }
  .navbar-redesign .cart-btn-redesign,
  .navbar-redesign .menu-toggle-redesign,
  .navbar-redesign .theme-toggle-redesign {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .navbar-redesign .btn-login-redesign {
    padding: 7px 12px;
    font-size: 0.8rem;
  }
  .navbar-redesign .navbar-actions { gap: 4px; }
  .navbar-redesign .lang-toggle-redesign {
    padding: 0 7px;
    height: 36px;
    font-size: 0.75rem;
  }
}

/* ================================================================
   FOOTER (from footer/footer.html)
   ================================================================ */

.footer-redesign {
  background: #2c3e50;
  padding: 0.75rem 0;
  margin-top: auto;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.3s ease;
}

.footer-links a:hover { color: var(--org-primary); }

.footer-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social:hover {
  background: var(--org-primary);
  color: white;
}

.footer-social i { font-size: 0.85rem; }

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  .footer-links {
    justify-content: center;
    gap: 0.75rem 1rem;
  }
  .footer-right { gap: 0.75rem; }
}

/* ================================================================
   B2B BANNER LOGO (from b2b_banner.html)
   ================================================================ */

.b2b-logo-desktop { display: inline-block; }
.b2b-logo-mobile { display: none; }

@media (max-width: 576px) {
  .b2b-logo-desktop { display: none; }
  .b2b-logo-mobile { display: inline-block; max-width: 90%; height: auto; }
}

/* ================================================================
   SEARCH BOX / DRAG-DROP (from item_dragdrop.html)
   ================================================================ */

.search-container-redesign {
  max-width: 900px;
  margin: 0 auto 2rem;
}

.search-box-redesign {
  background: white;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.search-box-redesign.focused {
  box-shadow: 0 15px 50px var(--org-shadow);
  transform: translateY(-2px);
}

.search-main-redesign {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 280px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
}

.search-icon-redesign {
  font-size: 1.2rem;
  color: #adb5bd;
  padding: 0 12px;
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.search-box-redesign.focused .search-icon-redesign { color: var(--org-primary); }

.search-input-redesign {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  padding: 14px 8px;
  outline: none;
  color: #2c3e50;
  min-width: 150px;
}

.search-input-redesign::placeholder { color: #adb5bd; }

.search-btn-wrapper { flex-shrink: 0; }

.secondary-actions-redesign {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.action-btn-redesign {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: none;
  background: #f8f9fa;
  color: var(--org-primary);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  text-decoration: none !important;
}

.action-btn-redesign:hover,
.action-btn-redesign:focus,
.action-btn-redesign:active {
  background: var(--org-primary);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--org-shadow-md);
  text-decoration: none !important;
}

.action-btn-redesign.active {
  background: var(--org-primary);
  color: white;
  text-decoration: none !important;
}

.action-btn-redesign--labeled {
  width: auto;
  padding: 0 16px;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Shimmer sweep on the "AI Mode" launcher button -- fires once on page load,
   then again every 10s (sweep occupies the first ~18% of the 10s cycle, then
   parks off-box for the rest), sped up to a continuous loop on hover. Same
   gradient-sweep technique as .aimode-thinking-sweep (aimode chat CSS below),
   applied via a ::after overlay since this button has no brand-mark SVG to
   mask. border-radius:inherit (not overflow:hidden on the button) keeps the
   sweep's corners rounded without clipping the existing hover box-shadow. */
#toggleAiMode { position: relative; }
#toggleAiMode::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(255,255,255,.9) 46%,
    #ffffff 50%,
    rgba(255,255,255,.9) 54%,
    transparent 70%);
  background-size: 200% 100%;
  background-position: 140% 0;
  animation: aimode-btn-shimmer 10s ease-in-out infinite;
}
#toggleAiMode:hover::after { animation: aimode-btn-shimmer-hover 1.3s ease-in-out infinite; }
@keyframes aimode-btn-shimmer {
  0%   { background-position: 140% 0; }
  18%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}
@keyframes aimode-btn-shimmer-hover {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #toggleAiMode::after { animation: none; }
}

.btn-search-redesign {
  background: var(--org-primary);
  color: white;
  text-decoration: none !important;
}

.btn-search-redesign:hover,
.btn-search-redesign:focus,
.btn-search-redesign:active {
  background: var(--org-primary-dark);
  color: white;
  text-decoration: none !important;
  transform: scale(1.05);
}

.collapse-redesign { margin-top: 1rem; }

.collapse-section-redesign {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.upload-area-redesign {
  border: 3px dashed var(--org-primary);
  border-radius: 16px;
  padding: 2rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.upload-area-redesign:hover {
  background: linear-gradient(135deg, var(--org-primary-light) 0%, #f8f9fa 100%);
  border-color: var(--org-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--org-shadow-sm);
}

.upload-area-redesign i {
  font-size: 3rem;
  color: var(--org-primary);
  margin-bottom: 1rem;
  display: block;
}

.upload-area-redesign .upload-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.upload-area-redesign .upload-description {
  color: #6c757d;
  font-size: 0.95rem;
  margin: 0;
}

.divider-redesign {
  color: #adb5bd;
  font-size: 0.9rem;
  position: relative;
  margin: 1.5rem 0;
}

.divider-redesign::before,
.divider-redesign::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #dee2e6;
}

.divider-redesign::before { left: 0; }
.divider-redesign::after { right: 0; }

.file-select-btn-redesign {
  background: var(--org-primary-gradient);
  color: white;
  border: none;
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px var(--org-shadow-md);
}

.file-select-btn-redesign:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--org-shadow-lg);
  color: white;
}

.file-select-btn-redesign i { font-size: 1.1rem; }

.qr-section-redesign {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.qr-code-redesign img {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.qr-info-redesign {
  flex: 1;
  min-width: 280px;
}

.info-box-redesign {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-align: left;
  background: #f8f9fa;
  padding: 1.25rem;
  border-radius: 12px;
  border-left: 4px solid var(--org-primary);
}

.info-icon-redesign {
  color: var(--org-primary);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.info-content-redesign h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.info-content-redesign p {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .search-container-redesign { padding: 0 0.5rem; }
  .search-box-redesign {
    padding: 12px;
    gap: 12px;
    flex-direction: column;
  }
  .search-main-redesign {
    width: 100%;
    min-width: unset;
    order: 1;
  }
  .secondary-actions-redesign {
    width: 100%;
    justify-content: center;
    order: 2;
  }
  .action-btn-redesign { width: 48px; height: 48px; }
  .collapse-section-redesign { padding: 1.5rem; }
  .qr-section-redesign { flex-direction: column; gap: 1.5rem; }
  .qr-info-redesign { min-width: unset; width: 100%; }
}

@media (max-width: 480px) {
  .search-box-redesign { padding: 10px; gap: 10px; border-radius: 12px; }
  .search-main-redesign { padding: 2px; border-radius: 10px; }
  .search-input-redesign { font-size: 0.95rem; padding: 12px 6px; }
  .search-input-redesign::placeholder { font-size: 0.9rem; }
  .search-icon-redesign { padding: 0 8px; font-size: 1rem; }
  .action-btn-redesign { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 10px; }
  .btn-search-redesign { width: 44px; height: 44px; }
  .collapse-section-redesign { padding: 1rem; }
  .upload-area-redesign { padding: 1.5rem 1rem; }
  .upload-area-redesign i { font-size: 2.5rem; }
  .file-select-btn-redesign { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
  .qr-code-redesign img { width: 150px; height: 150px; }
}

/* ================================================================
   SHOPPING CART (from main/shopping_cart.html)
   ================================================================ */

.cart-redesign {
  max-width: 1200px;
  margin: 0 auto;
}

.cart-tabs-redesign {
  background: white;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}

.cart-tabs-redesign .nav {
  padding: 14px 14px 0 14px;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: none;
}

.cart-tabs-redesign .nav-link {
  border: none;
  background: var(--cart-bg-light);
  color: var(--cart-text-muted);
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  position: relative;
}

.cart-tabs-redesign .nav-link:hover {
  background: #e9ecef;
  color: #495057;
}

.cart-tabs-redesign .nav-link.active {
  background: white;
  color: var(--cart-primary);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.04);
}

.cart-tabs-redesign .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cart-primary);
  border-radius: 3px 3px 0 0;
}

.cart-tabs-redesign .nav-link.summary-tab { font-weight: 600; }

.cart-tab-content {
  background: white;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 20px;
}

.cart-product-card {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cart-product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.cart-product-image-wrap {
  position: relative;
  background: var(--cart-bg-light);
  min-height: 200px;
  overflow: hidden;
}

.cart-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 260px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.cart-product-card:hover .cart-product-image { transform: scale(1.03); }

.cart-category-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(108, 117, 125, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cart-source-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cart-primary);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cart-source-badge a { color: var(--cart-primary); text-decoration: none; }
.cart-source-badge a:hover { text-decoration: underline; }

.cart-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--cart-bg-light);
  color: var(--cart-text-muted);
}

.cart-image-placeholder i { font-size: 4rem; opacity: 0.3; }

.cart-product-details { padding: 20px; }

.cart-product-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cart-text-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}

.cart-product-desc {
  color: var(--cart-text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-tech-data-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cart-primary);
  font-size: 0.85rem;
  margin-bottom: 16px;
  cursor: pointer;
  text-decoration: none;
}

.cart-tech-data-link:hover { text-decoration: underline; }

.cart-price-section { margin-bottom: 16px; }

.cart-price-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 14px;
}

.cart-price-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cart-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.cart-price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cart-price-item { text-align: center; }

.cart-price-item-label {
  font-size: 0.7rem;
  color: var(--cart-text-muted);
  margin-bottom: 2px;
}

.cart-price-item-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cart-text-dark);
}

.cart-price-item-value.highlight {
  color: var(--cart-primary);
  font-size: 1.05rem;
}

.cart-quantity-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}

.cart-quantity-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--cart-bg-light);
  color: var(--cart-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-quantity-btn:hover {
  background: var(--cart-primary);
  color: white;
}

.cart-quantity-value {
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
}

.cart-ai-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
}

.cart-ai-status.positive { background: #d1f4e0; color: var(--cart-success); }
.cart-ai-status.negative { background: #fee2e2; color: var(--cart-danger); }

.cart-ai-score { font-size: 0.8rem; margin-left: 8px; opacity: 0.8; }

.cart-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cart-status-row .cart-ai-status,
.cart-status-row .cart-merkmale-btn {
  height: 40px;
  box-sizing: border-box;
}

.cart-merkmale-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid var(--cart-primary);
  background: white;
  color: var(--cart-primary);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-merkmale-btn:hover { background: var(--cart-primary); color: white; }

.cart-merkmale-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: var(--cart-primary);
  color: white;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

.cart-merkmale-btn:hover .cart-merkmale-count {
  background: white;
  color: var(--cart-primary);
}

.cart-product-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.cart-action-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.cart-btn-map { background: var(--cart-bg-light); color: var(--cart-primary); flex: 0 0 auto; padding: 10px 12px; }
.cart-btn-map:hover { background: var(--cart-primary); color: white; }
.cart-btn-edit { background: var(--cart-bg-light); color: var(--cart-primary); }
.cart-btn-edit:hover { background: var(--cart-primary); color: white; }
.cart-btn-delete { background: var(--cart-bg-light); color: var(--cart-danger); }
.cart-btn-delete:hover { background: var(--cart-danger); color: white; }

.cart-summary-table-wrap { overflow-x: auto; }

.cart-summary-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.cart-summary-table thead th {
  background: var(--cart-bg-light);
  font-weight: 600;
  color: var(--cart-text-dark);
  padding: 12px;
  font-size: 0.85rem;
  border-bottom: 2px solid #dee2e6;
  white-space: nowrap;
}

.cart-summary-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
  font-size: 0.9rem;
}

.cart-summary-table tbody tr:hover { background: var(--cart-bg-light); }

.cart-summary-table .total-row {
  background: #e7f3ff;
  font-weight: 700;
}

.cart-summary-table .total-row td { border-bottom: none; }

.cart-summary-cards { display: none; }

.cart-summary-card {
  background: var(--cart-bg-light);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.cart-summary-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.cart-summary-card-pos { font-weight: 700; color: var(--cart-primary); font-size: 0.9rem; }
.cart-summary-card-status { font-size: 1.1rem; }

.cart-summary-card-title {
  font-weight: 600;
  color: var(--cart-text-dark);
  font-size: 0.95rem;
  margin-bottom: 8px;
  line-height: 1.4;
}

.cart-summary-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--cart-text-muted);
  margin-bottom: 10px;
}

.cart-summary-card-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #dee2e6;
}

.cart-summary-card-price { text-align: center; }

.cart-summary-card-price-label {
  font-size: 0.7rem;
  color: var(--cart-text-muted);
  margin-bottom: 2px;
}

.cart-summary-card-price-value {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cart-text-dark);
}

.cart-summary-total-card {
  background: linear-gradient(135deg, var(--cart-primary) 0%, var(--cart-primary-dark) 100%);
  border-radius: 10px;
  padding: 16px;
  color: white;
}

.cart-summary-total-card .cart-summary-card-prices { border-top-color: rgba(255,255,255,0.2); }
.cart-summary-total-card .cart-summary-card-price-label { color: rgba(255,255,255,0.7); }
.cart-summary-total-card .cart-summary-card-price-value { color: white; font-size: 1rem; }

.cart-cta-section {
  background: linear-gradient(135deg, var(--cart-primary), var(--cart-primary-dark));
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  color: white;
  margin-top: 24px;
}

.cart-cta-section h3 { margin-bottom: 10px; font-size: 1.3rem; }
.cart-cta-section p { margin-bottom: 20px; opacity: 0.9; font-size: 0.95rem; }

.cart-cta-btn {
  background: white;
  color: var(--cart-primary);
  border: none;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.cart-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
  color: var(--cart-primary);
}

.cart-summary-title-link,
.cart-summary-pos-link {
  color: var(--cart-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.cart-summary-title-link:hover,
.cart-summary-pos-link:hover {
  color: var(--cart-primary-dark);
  text-decoration: underline;
}

.cart-summary-card-title.cart-summary-title-link { color: var(--cart-text-dark); }
.cart-summary-card-title.cart-summary-title-link:hover { color: var(--cart-primary); }
.cart-summary-card-pos.cart-summary-pos-link { cursor: pointer; }
.cart-summary-card-pos.cart-summary-pos-link:hover { text-decoration: underline; }

.cart-monthly-rate-section { margin-bottom: 16px; }

.cart-monthly-rate-card {
  background: linear-gradient(135deg, var(--cart-primary) 0%, var(--cart-primary-dark) 100%);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-monthly-rate-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
}

.cart-monthly-rate-pending { font-size: 1rem; font-weight: 500; opacity: 0.85; }
.cart-monthly-rate-label { font-size: 0.78rem; color: rgba(255,255,255,0.82); margin-top: 3px; }
.cart-monthly-rate-icon { font-size: 1.6rem; color: rgba(255,255,255,0.35); }

.cart-summary-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.cart-item-wrap {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.cart-item-wrap:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }

.cart-product-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 12px;
  background: white;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cart-product-row:hover { background: #fafafa; }

.cart-product-row__thumb {
  width: 90px;
  height: 72px;
  border-radius: 7px;
  background: #f8f9fa;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.cart-product-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-product-row__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 1.5rem;
}

.cart-row-source {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(255,255,255,0.92);
  color: var(--cart-primary);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.68rem;
}

.cart-product-row__details { overflow: hidden; min-width: 0; padding-right: 28px; }

.cart-product-row__title {
  font-weight: 600;
  color: var(--cart-text-dark);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  display: block;
  transition: color 0.15s;
}

.cart-product-row__title:hover { color: var(--cart-primary); text-decoration: none; }
.cart-product-row__qty { color: #888; font-weight: 500; font-size: 0.82rem; }

.cart-product-row__meta-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 3px;
  min-width: 0;
}

.cart-product-row__meta {
  font-size: 0.85rem;
  color: var(--cart-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.cart-product-row__badges { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }

.cart-product-row__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.cart-product-row__badge--success { background: #d1f4e0; color: #0f8448; }
.cart-product-row__badge--muted { background: #f0f0f0; color: #666; }
.cart-product-row__badge--info { background: var(--org-primary-light); color: var(--org-primary); }

.cart-product-row__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 86px;
}

.cart-row-rate { font-size: 1.1rem; font-weight: 700; color: var(--cart-primary); line-height: 1.2; }
.cart-row-gross { font-size: 1rem; font-weight: 700; color: var(--cart-text-dark); line-height: 1.2; }
.cart-row-rate-label { font-size: 0.68rem; color: var(--cart-text-muted); text-align: right; }

.cart-row-actions { display: flex; gap: 2px; margin-top: 6px; justify-content: flex-end; }

.cart-row-action-btn {
  background: none;
  border: none;
  color: var(--cart-primary);
  padding: 3px 4px;
  cursor: pointer;
  transition: opacity 0.2s;
  font-size: 0.85rem;
  text-decoration: none;
  line-height: 1;
}

.cart-row-action-btn:hover,
.cart-row-action-btn:focus {
  opacity: 0.7;
  outline: none;
  text-decoration: none;
  color: var(--cart-primary);
}

.cart-row-delete-btn {
  background: none;
  border: none;
  color: #adb5bd;
  padding: 3px 4px;
  cursor: pointer;
  transition: color 0.2s;
  font-size: 0.85rem;
  line-height: 1;
}

.cart-row-delete-btn:hover,
.cart-row-delete-btn:focus {
  color: var(--cart-danger);
  outline: none;
}

.cart-section-head { margin-bottom: 16px; }
.cart-section-title { font-size: 1.25rem; font-weight: 700; color: var(--cart-text-dark); margin-bottom: 3px; }
.cart-section-sub { font-size: 0.9rem; color: var(--cart-text-muted); margin: 0; }

.cart-summary-sidebar {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  position: sticky;
  top: 80px;
}

.cart-summary-sidebar__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cart-text-dark);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
}

.cart-summary-sidebar__rows { margin-bottom: 16px; }

.cart-summary-sidebar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.84rem;
}

.cart-summary-sidebar__row span:first-child { color: var(--cart-text-muted); }
.cart-summary-sidebar__row span:last-child { font-weight: 500; color: var(--cart-text-dark); }
.cart-param-select {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--cart-text-dark, #1a1a2e);
  background: #f8f9fa;
  cursor: pointer;
  outline: none;
}
.cart-param-select:focus { border-color: var(--cart-primary, #4A9DBD); box-shadow: 0 0 0 2px rgba(74,157,189,0.15); }

.cart-summary-sidebar__total {
  background: linear-gradient(135deg, var(--cart-primary) 0%, var(--cart-primary-dark) 100%);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

.cart-summary-sidebar__total-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.cart-summary-sidebar__total-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin-bottom: 3px;
  line-height: 1.2;
}

.cart-summary-sidebar__total-per { font-size: 0.72rem; color: rgba(255,255,255,0.68); }

.cart-summary-sidebar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  color: var(--cart-primary);
  border: 1px solid var(--cart-primary);
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.cart-summary-sidebar__cta:hover {
  background: var(--cart-primary);
  color: white;
  text-decoration: none;
  box-shadow: 0 8px 32px var(--org-shadow), 0 0 0 4px var(--org-primary-light), 0 0 40px var(--org-shadow);
  transform: translateY(-2px);
}

.cart-row-gross-inline { font-size: 0.8rem; color: var(--cart-text-muted); white-space: nowrap; flex-shrink: 0; }
.cart-row-gross-inline strong { color: var(--cart-text-dark); font-weight: 600; }

.cart-merkmale-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--cart-primary);
  background: white;
  color: var(--cart-primary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.6;
}

.cart-merkmale-btn-sm:hover { background: var(--cart-primary); color: white; }

.cart-product-expand {
  display: none;
  border-top: 2px solid var(--cart-primary);
  padding: 16px 20px;
  background: #f0f6fa;
}

.cart-product-expand.open { display: block; }

.cart-expand-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: stretch;
}

.cart-expand-img { display: flex; flex-direction: column; }

.cart-expand-img__photo {
  width: 100%;
  flex: 1;
  min-height: 80px;
  border-radius: 8px;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}

.cart-expand-img__photo:hover { opacity: 0.9; }

#cartImgZoom {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(4px);
}

#cartImgZoom img {
  max-width: 82vw;
  max-height: 82vh;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  object-fit: contain;
}

#cartImgZoomClose {
  position: fixed;
  top: 18px;
  right: 22px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 10000;
}

#cartImgZoomClose:hover { background: rgba(255,255,255,0.3); }

.cart-expand-img .cart-image-placeholder {
  min-height: 120px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.cart-product-expand .cart-product-desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

@media (max-width: 991px) {
  .cart-price-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cart-summary-grid { grid-template-columns: 1fr; }
  .cart-summary-sidebar { position: static; }
}

@media (max-width: 768px) {
  .cart-tabs-redesign .nav { padding: 10px 10px 0 10px; }
  .cart-tabs-redesign .nav-link { padding: 8px 12px; font-size: 0.8rem; }
  .cart-tab-content { padding: 14px; }
  .cart-product-details { padding: 16px; }
  .cart-product-title { font-size: 1rem; }
  .cart-product-actions { flex-wrap: wrap; }
  .cart-action-btn { flex: 1 1 calc(50% - 4px); font-size: 0.85rem; padding: 10px 10px; }
  .cart-btn-map { flex: 0 0 auto; }
  .cart-status-row { justify-content: center; }
  .cart-ai-status { font-size: 0.8rem; padding: 6px 10px; }
  .cart-merkmale-btn { font-size: 0.8rem; padding: 6px 10px; }
  .cart-summary-table-wrap { display: none; }
  .cart-summary-cards { display: block; }
  .cart-cta-section { padding: 22px 16px; }
  .cart-cta-section h3 { font-size: 1.15rem; }
  .cart-cta-btn { width: 100%; justify-content: center; padding: 12px 20px; }
  .cart-expand-grid { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  .cart-product-row { grid-template-columns: 64px 1fr auto; }
  .cart-product-row__thumb { width: 64px; height: 54px; }
}

@media (max-width: 480px) {
  .cart-tabs-redesign .nav-link { padding: 7px 10px; font-size: 0.75rem; }
  .cart-price-item-value { font-size: 0.85rem; }
  .cart-price-item-value.highlight { font-size: 0.95rem; }
}

/* ================================================================
   HOURGLASS MODAL (from main/modal_hourglass.html)
   ================================================================ */

.hourglass-modal-redesign {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

.hourglass-header-redesign {
  background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%) !important;
  color: white !important;
  border-bottom: none !important;
  padding: 1.25rem 1.5rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hourglass-header-redesign .modal-title { color: white !important; font-weight: 600; font-size: 1.1rem; }

.header-spinner-redesign { width: 28px; height: 28px; }

.spinner-ring {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spinRing 1s linear infinite;
}

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

.hourglass-body-redesign {
  padding: 2.5rem 2rem !important;
  text-align: center;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.hourglass-icon-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
}

.hourglass-icon-bg {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.hourglass-icon {
  font-size: 2rem;
  color: white;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.hourglass-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: var(--org-shadow-md);
  border-radius: 50%;
  animation: pulseRing 1.5s ease-out infinite;
  z-index: 1;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

.hourglass-progress-section { margin-bottom: 1.5rem; }

.hourglass-progress-bar {
  height: 8px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.hourglass-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--org-primary) 0%, var(--org-primary) 50%, var(--org-primary) 100%);
  background-size: 200% 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
  animation: progressShimmer 1.5s ease-in-out infinite;
}

@keyframes progressShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.hourglass-progress-text { font-size: 1.5rem; font-weight: 700; color: var(--org-primary); }

.hourglass-status {
  color: #6c757d;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.status-dots span { animation: dotBlink 1.4s infinite; opacity: 0; }
.status-dots span:nth-child(1) { animation-delay: 0s; }
.status-dots span:nth-child(2) { animation-delay: 0.2s; }
.status-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBlink { 0%, 20% { opacity: 0; } 40%, 100% { opacity: 1; } }

.hourglass-footer-redesign {
  border-top: 1px solid #e9ecef !important;
  padding: 1rem 1.5rem !important;
  background: white;
  justify-content: center !important;
}

.hourglass-cancel-btn {
  background: #6c757d !important;
  color: white !important;
  border: none !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.hourglass-cancel-btn:hover { background: #5a6268 !important; transform: translateY(-1px); }

@media (max-width: 576px) {
  #hourglass_popup .modal-dialog {
    margin: 1rem auto !important;
    max-width: calc(100% - 2rem) !important;
    width: calc(100% - 2rem) !important;
  }
  #hourglass_popup .modal-content { margin: 0 auto !important; }
  .hourglass-body-redesign { padding: 2rem 1.5rem !important; }
  .hourglass-header-redesign .modal-title { font-size: 1rem; }
}

/* ================================================================
   TECHNICAL DATA MODAL (from main/modal_technical_data.html)
   ================================================================ */

.tech-modal-redesign {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

.tech-modal-header {
  background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%) !important;
  color: white !important;
  border-bottom: none !important;
  padding: 1.25rem 1.5rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tech-modal-header .modal-title { color: white !important; font-weight: 600; font-size: 1.1rem; }
.tech-modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.8; }
.tech-modal-header .btn-close:hover { opacity: 1; }

.tech-modal-body { max-height: 60vh; overflow-y: auto; padding: 0 !important; }
.tech-data-table { margin: 0; }
.tech-data-table tbody tr { border-bottom: 1px solid #e9ecef; }
.tech-data-table tbody tr:last-child { border-bottom: none; }
.tech-data-table th { background: #f8f9fa; color: #2c3e50; font-weight: 600; padding: 12px 16px; width: 40%; vertical-align: middle; }
.tech-data-table td { padding: 12px 16px; color: #495057; vertical-align: middle; }

.tech-modal-footer {
  border-top: 1px solid #e9ecef !important;
  padding: 1rem 1.5rem !important;
  background: white;
  justify-content: center !important;
}

.tech-modal-close-btn {
  background: #6c757d !important;
  color: white !important;
  border: none !important;
  padding: 0.6rem 2rem !important;
  border-radius: 8px !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tech-modal-close-btn:hover { background: #5a6268 !important; color: white !important; }

@media (max-width: 576px) {
  [id^="techModal"] .modal-dialog,
  #technical_data_popup .modal-dialog {
    margin: 1rem auto !important;
    max-width: calc(100% - 2rem) !important;
    width: calc(100% - 2rem) !important;
  }
  [id^="techModal"] .modal-content,
  #technical_data_popup .modal-content { margin: 0 auto !important; }
  .tech-modal-header { padding: 1rem 1.25rem !important; }
  .tech-modal-header .modal-title { font-size: 1rem; }
  .tech-data-table th,
  .tech-data-table td { padding: 10px 14px; font-size: 0.9rem; }
  .tech-data-table th { width: 45%; }
}

/* ================================================================
   GOOGLE MAP MODAL (from main/modal_googlemap.html)
   ================================================================ */

.map-modal-redesign {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

.map-modal-header {
  background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%) !important;
  color: white !important;
  border-bottom: none !important;
  padding: 1.25rem 1.5rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-modal-header .modal-title { color: white !important; font-weight: 600; font-size: 1.1rem; }
.map-modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.8; }
.map-modal-header .btn-close:hover { opacity: 1; }
.map-modal-body { overflow: hidden; }
[id^="mapModal"] .modal-dialog { max-width: 700px; }

@media (max-width: 576px) {
  [id^="mapModal"] .modal-dialog {
    margin: 1rem auto !important;
    max-width: calc(100% - 2rem) !important;
    width: calc(100% - 2rem) !important;
  }
  [id^="mapModal"] .modal-content { margin: 0 auto !important; }
  .map-modal-header { padding: 1rem 1.25rem !important; }
  .map-modal-header .modal-title { font-size: 1rem; }
  [id^="mapModal"] iframe { height: 300px !important; }
}

/* ================================================================
   FAQ PAGE (from footer/faq.html)
   ================================================================ */

.faq-page { max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; }
.faq-page-header { text-align: center; margin-bottom: 40px; }
.faq-page-header h1 { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }
.faq-page-header h1 span { color: var(--org-primary); }
.faq-page-header p { font-size: 1.15rem; color: #6c757d; margin: 0; }

.faq-search { max-width: 500px; margin: 0 auto 30px; position: relative; }
.faq-search input {
  width: 100%;
  padding: 14px 20px 14px 50px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
}
.faq-search input:focus { outline: none; border-color: var(--org-primary); box-shadow: 0 0 0 4px var(--org-shadow-sm); }
.faq-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #adb5bd; font-size: 1rem; }

.faq-categories { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 35px; }
.faq-cat-btn {
  background: #f8f9fa;
  border: none;
  color: #2c3e50;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.faq-cat-btn:hover { background: #e9ecef; color: var(--org-primary); }
.faq-cat-btn.active { background: var(--org-primary); color: white; }

.faq-list { display: flex; flex-direction: column; gap: 15px; }
.faq-item {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #eef0f2;
  transition: all 0.3s ease;
}
.faq-item:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 25px;
  cursor: pointer;
  gap: 15px;
}
.faq-q-content { display: flex; align-items: center; gap: 15px; flex: 1; }
.faq-q-icon {
  width: 45px; height: 45px; min-width: 45px;
  background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 15px var(--org-shadow-md);
}
.faq-q-icon i { color: white; font-size: 1.1rem; }
.faq-q-text { font-weight: 600; color: #2c3e50; font-size: 1.05rem; line-height: 1.4; }
.faq-toggle { color: var(--org-primary); font-size: 1rem; transition: transform 0.3s ease; width: 20px; text-align: center; }
.faq-item.active .faq-toggle { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height: 300px; }
.faq-a-content { padding: 0 25px 25px 85px; color: #6c757d; line-height: 1.8; font-size: 1rem; }

.faq-cta {
  background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%);
  border-radius: 20px;
  padding: 45px 35px;
  text-align: center;
  margin-top: 50px;
  box-shadow: 0 15px 50px var(--org-shadow-md);
}
.faq-cta h2 { color: white; font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.faq-cta p { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; margin-bottom: 25px; }
.faq-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; color: var(--org-primary);
  padding: 14px 30px; border-radius: 12px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.faq-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); color: var(--org-primary-dark); }

@media (max-width: 768px) {
  .faq-page-header h1 { font-size: 2rem; }
  .faq-question { padding: 18px 20px; }
  .faq-q-icon { width: 40px; height: 40px; min-width: 40px; }
  .faq-q-text { font-size: 1rem; }
  .faq-a-content { padding: 0 20px 20px 20px; }
  .faq-cta { padding: 35px 25px; }
}
@media (max-width: 480px) {
  .faq-page { padding: 15px 0 40px; }
  .faq-page-header h1 { font-size: 1.75rem; }
  .faq-categories { gap: 8px; }
  .faq-cat-btn { padding: 8px 16px; font-size: 0.85rem; }
  .faq-q-content { gap: 12px; }
  .faq-q-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; }
  .faq-q-icon i { font-size: 0.95rem; }
}

/* ================================================================
   COOKIE POLICY PAGE (from footer/cookies.html)
   ================================================================ */

.cookie-page { max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; }
.cookie-header { text-align: center; margin-bottom: 50px; }
.cookie-header h1 { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }
.cookie-header h1 span { color: var(--org-primary); }
.cookie-header p { font-size: 1.15rem; color: #6c757d; max-width: 700px; margin: 0 auto; }
.cookie-content { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.cookie-highlight { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); color: white; border-radius: 15px; padding: 25px 30px; margin-bottom: 35px; box-shadow: 0 10px 40px var(--org-shadow-md); display: flex; align-items: flex-start; gap: 15px; }
.cookie-highlight i { font-size: 1.5rem; margin-top: 3px; }
.cookie-highlight-content h3 { color: white; font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.cookie-highlight-content p { color: rgba(255,255,255,0.95); font-size: 1rem; line-height: 1.6; margin: 0; }
.cookie-section { margin-bottom: 35px; }
.cookie-section:last-child { margin-bottom: 0; }
.cookie-section h2 { font-size: 1.3rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.cookie-section h2 i { color: var(--org-primary); font-size: 1.1rem; }
.cookie-section p { font-size: 1.02rem; line-height: 1.8; color: #2c3e50; margin-bottom: 12px; }
.cookie-section p:last-child { margin-bottom: 0; }
.cookie-types { display: grid; gap: 20px; margin-top: 20px; }
.cookie-type { background: #f8f9fa; border-radius: 12px; padding: 25px; border-left: 4px solid var(--org-primary); }
.cookie-type h3 { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.cookie-type h3 i { color: var(--org-primary); }
.cookie-type p { font-size: 0.98rem; color: #6c757d; margin-bottom: 12px; line-height: 1.7; }
.cookie-type ul { margin: 10px 0 0; padding-left: 20px; }
.cookie-type ul li { font-size: 0.95rem; color: #6c757d; margin-bottom: 6px; line-height: 1.6; }
.cookie-type ul li::marker { color: var(--org-primary); }
.cookie-type .badge { display: inline-block; background: var(--org-primary); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-left: 10px; }
.cookie-type .badge.optional { background: #6c757d; }
.cookie-info { background: #f8f9fa; border-left: 4px solid var(--org-primary); border-radius: 8px; padding: 15px 20px; margin: 20px 0; }
.cookie-info p { margin: 0; font-size: 0.98rem; line-height: 1.7; }
.cookie-info a { color: var(--org-primary); text-decoration: none; }
.cookie-info a:hover { text-decoration: underline; }
.cookie-cta { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); border-radius: 15px; padding: 30px; text-align: center; margin-top: 40px; box-shadow: 0 10px 40px var(--org-shadow-md); }
.cookie-cta h3 { color: white; font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.cookie-cta p { color: rgba(255,255,255,0.9); font-size: 1rem; margin-bottom: 0; }
.cookie-cta a { color: white; text-decoration: underline; }
.cookie-cta a:hover { text-decoration: none; }
.cookie-updated { text-align: center; color: #6c757d; font-size: 0.95rem; margin-top: 35px; padding-top: 25px; border-top: 2px solid #f8f9fa; }
@media (max-width: 768px) {
  .cookie-header h1 { font-size: 2rem; }
  .cookie-content { padding: 30px 25px; }
  .cookie-highlight { flex-direction: column; gap: 10px; }
  .cookie-type { padding: 20px; }
}
@media (max-width: 480px) {
  .cookie-page { padding: 15px 0 40px; }
  .cookie-header h1 { font-size: 1.75rem; }
  .cookie-content { padding: 25px 20px; }
}

/* ================================================================
   AGB PAGE (from footer/agb.html)
   ================================================================ */

.agb-page { max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; }
.agb-header { text-align: center; margin-bottom: 50px; }
.agb-header h1 { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }
.agb-header p { font-size: 1.15rem; color: #6c757d; max-width: 700px; margin: 0 auto; }
.agb-content { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.agb-highlight { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); color: white; border-radius: 15px; padding: 25px 30px; margin-bottom: 35px; box-shadow: 0 10px 40px var(--org-shadow-md); display: flex; align-items: flex-start; gap: 15px; }
.agb-highlight i { font-size: 1.5rem; margin-top: 3px; }
.agb-highlight-content h3 { color: white; font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.agb-highlight-content p { color: rgba(255,255,255,0.95); font-size: 1rem; line-height: 1.6; margin: 0; }
.agb-section { margin-bottom: 35px; }
.agb-section:last-of-type { margin-bottom: 0; }
.agb-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.agb-section-number { background: var(--org-primary); color: white; width: 36px; height: 36px; min-width: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; }
.agb-section-header h2 { font-size: 1.25rem; font-weight: 600; color: #2c3e50; margin: 0; }
.agb-section p { font-size: 1.02rem; line-height: 1.8; color: #2c3e50; margin-bottom: 12px; padding-left: 48px; }
.agb-section p:last-child { margin-bottom: 0; }
.agb-section ul { margin: 12px 0; padding-left: 72px; }
.agb-section ul li { font-size: 1.02rem; line-height: 1.8; color: #2c3e50; margin-bottom: 8px; }
.agb-section ul li::marker { color: var(--org-primary); }
.agb-info { background: #f8f9fa; border-left: 4px solid var(--org-primary); border-radius: 8px; padding: 15px 20px; margin: 15px 0 15px 48px; }
.agb-info p { margin: 0; padding-left: 0; font-size: 0.98rem; line-height: 1.7; color: #2c3e50; }
.agb-info strong { color: var(--org-primary); }
.agb-updated { text-align: center; color: #6c757d; font-size: 0.95rem; margin-top: 40px; padding-top: 30px; border-top: 2px solid #f8f9fa; }
@media (max-width: 768px) {
  .agb-header h1 { font-size: 2rem; }
  .agb-content { padding: 30px 25px; }
  .agb-section p, .agb-section ul { padding-left: 0; }
  .agb-section ul { padding-left: 24px; }
  .agb-info { margin-left: 0; }
  .agb-highlight { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .agb-page { padding: 15px 0 40px; }
  .agb-header h1 { font-size: 1.75rem; }
  .agb-content { padding: 25px 20px; }
  .agb-section-number { width: 32px; height: 32px; min-width: 32px; font-size: 0.9rem; }
  .agb-section-header h2 { font-size: 1.1rem; }
}

/* ================================================================
   PRIVACY PAGE (from footer/data_privacy.html)
   ================================================================ */

.privacy-page { max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; }
.privacy-header { text-align: center; margin-bottom: 50px; }
.privacy-header h1 { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }
.privacy-header h1 span { color: var(--org-primary); }
.privacy-header p { font-size: 1.15rem; color: #6c757d; max-width: 700px; margin: 0 auto; }
.privacy-content { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.privacy-highlight { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); color: white; border-radius: 15px; padding: 30px; margin-bottom: 35px; box-shadow: 0 10px 40px var(--org-shadow-md); }
.privacy-highlight h2 { color: white; font-size: 1.4rem; margin-bottom: 15px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.privacy-highlight h2 i { font-size: 1.3rem; }
.privacy-highlight p { color: rgba(255,255,255,0.95); font-size: 1.02rem; line-height: 1.7; margin-bottom: 10px; }
.privacy-highlight p:last-child { margin-bottom: 0; }
.privacy-section { margin-bottom: 35px; }
.privacy-section:last-child { margin-bottom: 0; }
.privacy-section h2 { font-size: 1.3rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.privacy-section h2 i { color: var(--org-primary); font-size: 1.1rem; }
.privacy-section h3 { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-top: 20px; margin-bottom: 10px; }
.privacy-section p { font-size: 1.02rem; line-height: 1.8; color: #2c3e50; margin-bottom: 12px; }
.privacy-section p:last-child { margin-bottom: 0; }
.privacy-section ul { margin: 12px 0; padding-left: 24px; }
.privacy-section ul li { font-size: 1rem; line-height: 1.8; color: #2c3e50; margin-bottom: 8px; }
.privacy-section ul li::marker { color: var(--org-primary); }
.privacy-section a { color: var(--org-primary); text-decoration: none; }
.privacy-section a:hover { text-decoration: underline; }
.privacy-info { background: #f8f9fa; border-left: 4px solid var(--org-primary); border-radius: 8px; padding: 15px 20px; margin: 20px 0; }
.privacy-info p { margin: 0; font-size: 0.98rem; line-height: 1.7; }
.privacy-info strong { color: var(--org-primary); }
.rights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
.right-item { background: #f8f9fa; border-radius: 10px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 12px; }
.right-item i { color: var(--org-primary); font-size: 1.1rem; margin-top: 2px; }
.right-item div h4 { font-size: 1rem; font-weight: 600; color: #2c3e50; margin-bottom: 4px; }
.right-item div p { font-size: 0.9rem; color: #6c757d; margin: 0; line-height: 1.5; }
.privacy-cta { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); border-radius: 15px; padding: 30px; text-align: center; margin-top: 40px; box-shadow: 0 10px 40px var(--org-shadow-md); }
.privacy-cta h3 { color: white; font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.privacy-cta p { color: rgba(255,255,255,0.9); font-size: 1rem; margin-bottom: 20px; }
.privacy-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: white; color: var(--org-primary); padding: 12px 25px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.3s ease; }
.privacy-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); color: var(--org-primary-dark); }
.privacy-updated { text-align: center; color: #6c757d; font-size: 0.95rem; margin-top: 35px; padding-top: 25px; border-top: 2px solid #f8f9fa; }
@media (max-width: 768px) {
  .privacy-header h1 { font-size: 2rem; }
  .privacy-content { padding: 30px 25px; }
  .privacy-highlight { padding: 25px; }
  .rights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .privacy-page { padding: 15px 0 40px; }
  .privacy-header h1 { font-size: 1.75rem; }
  .privacy-content { padding: 25px 20px; }
  .privacy-highlight { padding: 20px; }
}

/* ================================================================
   IMPRESSUM PAGE (from footer/impressum.html)
   ================================================================ */

.impressum-page { max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; }
.impressum-header { text-align: center; margin-bottom: 50px; }
.impressum-header h1 { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }
.impressum-header p { font-size: 1.15rem; color: #6c757d; }
.impressum-content { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.impressum-company { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); color: white; border-radius: 15px; padding: 30px; margin-bottom: 35px; box-shadow: 0 10px 40px var(--org-shadow-md); }
.impressum-company h2 { color: white; font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.impressum-company h2 i { font-size: 1.4rem; }
.impressum-company p { color: rgba(255,255,255,0.95); font-size: 1.05rem; margin-bottom: 6px; line-height: 1.6; }
.impressum-company p:last-child { margin-bottom: 0; }
.impressum-section { margin-bottom: 30px; }
.impressum-section:last-child { margin-bottom: 0; }
.impressum-section h2 { font-size: 1.25rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.impressum-section h2 i { color: var(--org-primary); font-size: 1.1rem; }
.impressum-section p { font-size: 1.02rem; line-height: 1.8; color: #2c3e50; margin-bottom: 8px; }
.impressum-section p:last-child { margin-bottom: 0; }
.impressum-section strong { color: #2c3e50; font-weight: 600; }
.impressum-section a { color: var(--org-primary); text-decoration: none; transition: all 0.3s ease; }
.impressum-section a:hover { color: var(--org-primary-dark); text-decoration: underline; }
.contact-grid { margin-top: 12px; }
.contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.contact-item i { color: var(--org-primary); font-size: 1rem; width: 20px; text-align: center; }
.contact-item a { color: #2c3e50; text-decoration: none; }
.contact-item a:hover { color: var(--org-primary); }
.impressum-info { background: #f8f9fa; border-left: 4px solid var(--org-primary); border-radius: 8px; padding: 15px 20px; margin: 15px 0; }
.impressum-info p { margin: 0; font-size: 0.98rem; line-height: 1.7; }
.impressum-info strong { color: var(--org-primary); }
@media (max-width: 768px) {
  .impressum-header h1 { font-size: 2rem; }
  .impressum-content { padding: 30px 25px; }
  .impressum-company { padding: 25px; }
  .impressum-company h2 { font-size: 1.3rem; }
  .impressum-section h2 { font-size: 1.15rem; }
}
@media (max-width: 480px) {
  .impressum-page { padding: 15px 0 40px; }
  .impressum-header h1 { font-size: 1.75rem; }
  .impressum-content { padding: 25px 20px; }
  .impressum-company { padding: 20px; }
}

/* ================================================================
   ABOUT PAGE (from footer/about.html)
   ================================================================ */

.about-page { max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; }
.about-header { text-align: center; margin-bottom: 50px; }
.about-header h1 { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }
.about-header h1 span { color: var(--org-primary); }
.about-header p { font-size: 1.15rem; color: #6c757d; max-width: 700px; margin: 0 auto; }
.about-section { background: white; border-radius: 20px; padding: 40px; margin-bottom: 30px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.about-section h2 { font-size: 1.6rem; font-weight: 700; color: #2c3e50; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.about-section h2 i { color: var(--org-primary); font-size: 1.4rem; }
.about-section h3 { font-size: 1.3rem; font-weight: 600; color: #2c3e50; margin-top: 25px; margin-bottom: 12px; }
.about-section p { font-size: 1.05rem; line-height: 1.8; color: #2c3e50; margin-bottom: 15px; }
.about-highlight { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); color: white; border-radius: 15px; padding: 30px; margin: 25px 0; box-shadow: 0 10px 40px var(--org-shadow-md); }
.about-highlight h3 { color: white; font-size: 1.4rem; margin-top: 0; margin-bottom: 12px; }
.about-highlight p { color: rgba(255,255,255,0.95); font-size: 1.05rem; margin-bottom: 0; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
.value-card { background: #f8f9fa; border-radius: 15px; padding: 30px; text-align: center; transition: all 0.3s ease; border: 2px solid transparent; }
.value-card:hover { transform: translateY(-5px); border-color: var(--org-primary); box-shadow: 0 10px 30px var(--org-shadow-sm); }
.value-card i { font-size: 2.5rem; color: var(--org-primary); margin-bottom: 15px; }
.value-card h4 { font-size: 1.2rem; font-weight: 600; color: #2c3e50; margin-bottom: 10px; }
.value-card p { font-size: 0.95rem; color: #6c757d; line-height: 1.6; margin-bottom: 0; }
.timeline { position: relative; padding: 30px 0; margin-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--org-primary); }
.timeline-item { position: relative; padding-left: 40px; margin-bottom: 35px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 5px; width: 15px; height: 15px; background: var(--org-primary); border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 8px var(--org-shadow-lg); }
.timeline-date { font-size: 1.3rem; font-weight: 700; color: var(--org-primary); margin-bottom: 5px; }
.timeline-item h4 { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 8px; }
.timeline-item p { font-size: 1rem; color: #6c757d; margin-bottom: 0; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 30px; }
.team-member { background: #f8f9fa; border-radius: 15px; padding: 30px; text-align: center; }
.team-avatar { width: 80px; height: 80px; background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 1.8rem; font-weight: 700; color: white; }
.team-member h4 { font-size: 1.15rem; font-weight: 600; color: #2c3e50; margin-bottom: 5px; }
.team-member .role { font-size: 0.9rem; color: var(--org-primary); font-weight: 500; margin-bottom: 12px; }
.team-member p { font-size: 0.95rem; color: #6c757d; line-height: 1.6; margin-bottom: 0; }
.about-cta { background: linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%); border-radius: 20px; padding: 45px 35px; text-align: center; margin-top: 40px; box-shadow: 0 15px 50px var(--org-shadow-md); }
.about-cta h2 { color: white; font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; justify-content: center; }
.about-cta p { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 25px; }
.about-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: white; color: var(--org-primary); padding: 14px 30px; border-radius: 12px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.about-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); color: var(--org-primary-dark); }
@media (max-width: 768px) {
  .about-header h1 { font-size: 2rem; }
  .about-section { padding: 30px 25px; }
  .about-section h2 { font-size: 1.4rem; }
  .values-grid, .team-grid { grid-template-columns: 1fr; }
  .timeline { margin-left: 10px; }
  .about-cta { padding: 35px 25px; }
}
@media (max-width: 480px) {
  .about-page { padding: 15px 0 40px; }
  .about-header h1 { font-size: 1.75rem; }
  .about-section { padding: 25px 20px; }
  .value-card, .team-member { padding: 25px 20px; }
}

/* ── Journey FAQ (shared: b2blease + econocom) ── */
.b2bl-journey-section { margin: -2rem 0 3rem; }
.b2bl-journey-head { margin-bottom: 1.5rem; }
.b2bl-journey-title { font-size: 1.4rem; font-weight: 700; color: #2c3e50; margin-bottom: 0.4rem; }
.b2bl-journey-sub { color: #6c757d; font-size: 0.95rem; margin: 0; }
.b2bl-journey-hint { color: #adb5bd; font-size: 0.88rem; }
.b2bl-journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.b2bl-journey-step { display: flex; flex-direction: column; align-items: stretch; background: white; border: 2px solid #e9ecef; border-radius: 14px; padding: 10px 18px 20px; text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; position: relative; overflow: hidden; }
.b2bl-journey-step:hover, .b2bl-journey-step.is-active { border-color: var(--org-primary, #4A9DBD); box-shadow: 0 4px 20px rgba(74,157,189,0.18); transform: translateY(-2px); }
.b2bl-journey-step.is-dimmed { opacity: 0.55; transform: none; }
.b2bl-step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.b2bl-step-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #f0f7fb; color: var(--org-primary, #4A9DBD); border-radius: 50%; font-weight: 700; font-size: 1rem; transition: background 0.2s, color 0.2s; }
.b2bl-journey-step:hover .b2bl-step-num, .b2bl-journey-step.is-active .b2bl-step-num { background: var(--org-primary, #4A9DBD); color: white; }
.b2bl-step-icon { font-size: 1.8rem; color: #ced4da; transition: color 0.2s; }
.b2bl-journey-step:hover .b2bl-step-icon, .b2bl-journey-step.is-active .b2bl-step-icon { color: var(--org-shadow, rgba(74,157,189,0.30)); }
.b2bl-step-title { flex: 1; font-weight: 700; color: #2c3e50; font-size: 1rem; margin: 0; line-height: 1.3; }
.b2bl-step-body { font-size: 0.85rem; color: #6c757d; line-height: 1.5; margin: 0; }
.b2bl-step-chev { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #adb5bd; font-size: 0.75rem; opacity: 0; transition: opacity 0.2s; }
.b2bl-journey-step:hover .b2bl-step-chev, .b2bl-journey-step.is-active .b2bl-step-chev { opacity: 1; color: var(--org-primary, #4A9DBD); }
.b2bl-journey-detail { background: white; border: 1px solid #e9ecef; border-radius: 14px; margin-top: 10px; overflow: hidden; max-height: 0; transition: max-height 0.35s ease, opacity 0.25s ease; opacity: 0; }
.b2bl-journey-detail.is-open { max-height: 500px; opacity: 1; }
.b2bl-journey-detail-inner { padding: 22px 24px; }
.b2bl-journey-detail-head { margin-bottom: 18px; }
.b2bl-detail-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--org-primary-light, #EFF8FB); color: var(--org-primary, #4A9DBD); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 0.9rem; margin-right: 10px; vertical-align: middle; }
.b2bl-detail-intro { display: inline; font-size: 0.9rem; color: #495057; line-height: 1.55; }
.b2bl-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.b2bl-substep { display: flex; gap: 10px; align-items: flex-start; animation: substepIn 0.2s ease both; }
@keyframes substepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.b2bl-substep__icon { width: 34px; height: 34px; border-radius: 8px; background: var(--org-primary-light, #EFF8FB); color: var(--org-primary, #4A9DBD); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; }
.b2bl-substep__title { font-weight: 600; font-size: 0.85rem; color: #2c3e50; margin-bottom: 3px; }
.b2bl-substep__body { font-size: 0.8rem; color: #6c757d; line-height: 1.45; margin: 0; }
@media (max-width: 991px) { .b2bl-journey-grid { grid-template-columns: repeat(2, 1fr); } .b2bl-detail-grid { grid-template-columns: repeat(2, 1fr); } .b2bl-journey-detail.is-open { max-height: 900px; } }
@media (max-width: 576px) { .b2bl-journey-grid { grid-template-columns: 1fr; } .b2bl-detail-grid { grid-template-columns: 1fr 1fr; } .b2bl-journey-detail.is-open { max-height: 1200px; } }

/* ── Chat widget (Bearbeitungsverlauf) ── */
.chat-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #e9ecef; color: #6c757d; transition: background 0.2s, color 0.2s; }
.chat-pill--unread { background: #dc3545; color: #fff; }

.chat-widget { display: flex; flex-direction: column; padding: 12px 4px 0; }
.chat-messages { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.chat-empty { text-align: center; color: #adb5bd; font-size: 0.85rem; padding: 20px 0; }

.chat-msg { display: flex; flex-direction: column; max-width: 72%; }
.chat-msg--own   { align-self: flex-end;   align-items: flex-end; }
.chat-msg--other { align-self: flex-start; align-items: flex-start; }
.chat-msg__meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.chat-msg__name { font-size: 0.75rem; font-weight: 600; color: #6c757d; }
.chat-msg__time { font-size: 0.7rem; color: #adb5bd; }
.chat-msg__text { padding: 8px 13px; border-radius: 14px; font-size: 0.85rem; line-height: 1.45; word-break: break-word; }
.chat-msg--own   .chat-msg__text { background: var(--org-primary, #4A9DBD); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg--other .chat-msg__text { background: #f1f3f5; color: #212529; border-bottom-left-radius: 4px; }
.chat-msg--ai    .chat-msg__text { background: #e8f4f8; }
.chat-msg__attachment { font-size: 0.8rem; margin-top: 4px; padding: 4px 9px; background: rgba(0,0,0,0.06); border-radius: 6px; color: inherit; text-decoration: none; }
.chat-msg__attachment:hover { text-decoration: underline; }

.chat-form { border-top: 1px solid #e9ecef; padding-top: 10px; margin-top: 4px; }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-textarea-wrap { flex: 1; position: relative; display: flex; align-items: flex-end; }
.chat-textarea { flex: 1; resize: none; border: 1px solid #dee2e6; border-radius: 12px; padding: 8px 36px 8px 12px; font-size: 0.85rem; line-height: 1.4; outline: none; width: 100%; }
.chat-textarea:focus { border-color: var(--org-primary, #4A9DBD); box-shadow: 0 0 0 2px var(--org-shadow-sm, rgba(74,157,189,0.15)); }
.chat-attach-label { position: absolute; right: 8px; bottom: 9px; cursor: pointer; color: #adb5bd; }
.chat-attach-label:hover { color: var(--org-primary, #4A9DBD); }
.chat-file-input { display: none; }
.chat-send-btn { background: var(--org-primary, #4A9DBD); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.chat-send-btn:hover { background: var(--org-primary-dark, #3A8DAD); }
.chat-attach-preview { display: none; font-size: 0.8rem; color: #495057; padding: 4px 8px; background: #f8f9fa; border-radius: 6px; margin-top: 6px; align-items: center; gap: 6px; }
.chat-attach-remove { border: none; background: none; color: #6c757d; font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; }
.chat-send-error { display: none; font-size: 0.8rem; color: #dc3545; padding: 4px 8px; margin-top: 4px; }

/* =========================================================================
   Request card redesign — b2b.lease design system
   ========================================================================= */

/* Design tokens (mapped to org theming) */
:root {
  --b2bl-primary:           var(--org-primary, #4A9DBD);
  --b2bl-primary-dark:      var(--org-primary-dark, #3A8DAD);
  --b2bl-primary-soft:      var(--org-primary-light, #e7f3ff);
  --b2bl-gradient-primary:  linear-gradient(135deg, var(--org-primary, #4A9DBD) 0%, var(--org-primary-dark, #3A8DAD) 100%);
  --b2bl-shadow-primary:    0 4px 16px rgba(74,157,189,.30);
  --b2bl-shadow-primary-lg: 0 6px 20px rgba(74,157,189,.40);
  --b2bl-success:           #0f8448;
  --b2bl-success-soft:      #d1f4e0;
  --b2bl-text:              #2c3e50;
  --b2bl-text-muted:        #6c757d;
  --b2bl-text-soft:         #adb5bd;
  --b2bl-border:            #e9ecef;
  --b2bl-border-strong:     #dee2e6;
  --b2bl-bg-elevated:       #ffffff;
  --b2bl-bg-muted:          #f8f9fa;
  --b2bl-radius-sm:         8px;
  --b2bl-radius-md:         10px;
  --b2bl-radius-lg:         12px;
  --b2bl-radius-pill:       999px;
  --b2bl-shadow-sm:         0 2px 8px rgba(0,0,0,.06);
  --b2bl-ease:              cubic-bezier(.4, 0, .2, 1);
  --b2bl-dur-fast:          .2s;
  --b2bl-dur-base:          .3s;
  --b2bl-font-mono:         ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Convenience alias — same value as primary-dark */
  --b2bl-primary-hover:     var(--b2bl-primary-dark);
  /* Semantic colour tokens */
  --b2bl-info-soft:         #e7f5f9;
  --b2bl-danger:            #dc3545;
  --b2bl-danger-soft:       #fee2e2;
  --b2bl-warning:           #f59f00;
  /* Extra radius step */
  --b2bl-radius-xs:         6px;
  /* Typography scale */
  --b2bl-text-xs:           .75rem;
  --b2bl-text-sm:           .85rem;
  --b2bl-text-base:         .95rem;
  --b2bl-text-md:           1rem;
  --b2bl-text-lg:           1.1rem;
  --b2bl-text-xl:           1.3rem;
  --b2bl-text-2xl:          1.5rem;
}

/* Breadcrumb */
.crumbs { display: flex; align-items: center; gap: 0.5rem; font-size: .85rem; color: #6c757d; }
.crumbs a { color: #6c757d; text-decoration: none; }
.crumbs a:hover { color: var(--b2bl-primary); }
.crumbs .sep { opacity: .5; }
.crumbs .current { color: #2c3e50; font-weight: 500; }

/* Request card */
.req-card { background: #fff; border-radius: var(--b2bl-radius-lg); border: 1px solid var(--b2bl-border); overflow: hidden; }

/* ── Unified request header (rh-*) ───────────────────────────────────────── */
.rh-card {
  background: var(--b2bl-bg-elevated, #fff);
  border: 1px solid var(--b2bl-border, #e9ecef);
  border-radius: var(--b2bl-radius-lg, 12px);
  box-shadow: var(--b2bl-shadow-sm, 0 2px 8px rgba(0,0,0,.06));
  padding: 20px 24px;
}
/* Inside a list card: flat, just a bottom separator */
.req-card > .rh-card { box-shadow: none; border: none; border-radius: 0; border-bottom: 1px solid var(--b2bl-border); }
/* Clickable list cards restore full card styling */
.req-card--link > .rh-card { box-shadow: var(--b2bl-shadow-sm, 0 2px 8px rgba(0,0,0,.06)); border: 1px solid var(--b2bl-border, #e9ecef); border-radius: var(--b2bl-radius-lg, 12px); border-bottom: none; }
.rh-split {
  background: #fef3c7; border-left: 4px solid #f59e0b;
  padding: 8px 14px; border-radius: var(--b2bl-radius-xs, 6px);
  font-size: var(--b2bl-text-sm, .85rem); color: #92400e;
  margin-bottom: 14px;
}
.rh-card--split { opacity: .7; }
.rh-card--split .rh-status-col,
.rh-card--split .rh-actions { opacity: 1; pointer-events: all; }
.rh-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.rh-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--b2bl-radius-sm, 8px);
  background: var(--b2bl-primary-soft); color: var(--b2bl-primary);
  display: grid; place-items: center; font-size: 1.2rem;
}
.rh-title-group { flex: 1; min-width: 0; }
.rh-title { font-size: var(--b2bl-text-xl, 1.3rem); font-weight: 700; margin: 0 0 4px; line-height: 1.25; color: var(--b2bl-text, #2c3e50); }
.rh-sub { display: flex; align-items: center; gap: 6px; font-size: var(--b2bl-text-xs, .75rem); color: var(--b2bl-text-muted, #6c757d); flex-wrap: wrap; }
.rh-sub code { font-family: var(--b2bl-font-mono, monospace); background: var(--b2bl-bg-muted, #f8f9fa); padding: 1px 6px; border-radius: 4px; font-size: inherit; color: var(--b2bl-text, #2c3e50); }
.rh-sub-dot { opacity: .4; }
.req-card--link .rh-top { margin-bottom: 0; }
.rh-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.rh-status-row  { display: flex; align-items: center; gap: 8px; }
.rh-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--b2bl-bg-muted, #f8f9fa);
  border: 1px solid var(--b2bl-border, #e9ecef);
  border-radius: var(--b2bl-radius-pill, 999px);
  font-size: var(--b2bl-text-xs, .75rem); color: var(--b2bl-text-muted, #6c757d); white-space: nowrap;
}
.rh-pill i { opacity: .7; }
.rh-pill strong { color: var(--b2bl-text, #2c3e50); font-weight: 600; }
.rh-sep { width: 1px; height: 20px; flex-shrink: 0; background: var(--b2bl-border-strong, #dee2e6); margin: 0 4px; }
.rh-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rh-ki-col { margin-left: auto; }
@media (max-width: 640px) {
  .rh-card { padding: 14px 16px; }
  .rh-top { gap: 10px; }
  .rh-title { font-size: var(--b2bl-text-lg, 1.1rem); }
}

/* Legacy req-head — kept for backward compat, no longer used for new designs */
.req-head { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--b2bl-border); background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); }
.req-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.req-head__title { display: flex; align-items: center; gap: 0.75rem; }
.req-head__icon { width: 44px; height: 44px; border-radius: var(--b2bl-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--b2bl-primary-soft); color: var(--b2bl-primary); font-size: 1.1rem; flex-shrink: 0; }
.req-head h1 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #2c3e50; }
.req-sub { font-size: .8rem; color: #6c757d; margin-top: 2px; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.req-sub code { font-family: var(--b2bl-font-mono); font-size: 0.76rem; background: #f1f3f5; padding: 1px 6px; border-radius: 4px; color: #2c3e50; }
.req-head__actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.req-head__status { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }

/* Status pill */
.status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: var(--b2bl-radius-pill); font-size: .75rem; font-weight: 600; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.status-pill--new { background: var(--b2bl-primary-soft); color: var(--b2bl-primary); }
.status-pill--review { background: #fff4e0; color: #b8740b; }
.status-pill--success { background: var(--b2bl-success-soft); color: var(--b2bl-success); }
.status-pill--neutral { background: #f1f3f5; color: #6c757d; border: 1px solid var(--b2bl-border); }

/* KV chips */
.kv { display: inline-flex; align-items: center; gap: 0.4rem; font-size: .75rem; color: #6c757d; padding: 0.25rem 0.6rem; background: #f8f9fa; border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-pill); }
.kv b { color: #2c3e50; font-weight: 600; }
.kv i { font-size: .7em; }

/* Buttons (rq- prefix avoids Bootstrap conflict) */
.rq-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.875rem; border-radius: var(--b2bl-radius-sm); font-size: .85rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: all var(--b2bl-dur-fast) var(--b2bl-ease); white-space: nowrap; text-decoration: none; line-height: 1.2; box-sizing: border-box; }
button.rq-btn { appearance: none; }
.rq-btn--ghost { background: transparent; color: #2c3e50; border-color: var(--b2bl-border-strong); }
.rq-btn--ghost:hover { background: #f8f9fa; }
.rq-btn--outline { background: white; color: var(--b2bl-primary); border-color: var(--b2bl-primary); }
.rq-btn--outline:hover { background: var(--b2bl-primary); color: white; }
.rq-btn--primary { background: var(--b2bl-gradient-primary); color: white; box-shadow: var(--b2bl-shadow-primary); }
.rq-btn--primary:hover { box-shadow: var(--b2bl-shadow-primary-lg); transform: translateY(-1px); }
.rq-btn--sm { padding: 0.35rem 0.65rem; font-size: .78rem; }
.rq-btn:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }
.rq-btn--outline:disabled { background: #f3f4f6; color: #9ca3af; border-color: #d1d5db; opacity: 1; }
.chat__readonly-note { padding: 10px 16px; background: #fef3c7; border-top: 1px solid #fde68a; font-size: 13px; color: #92400e; text-align: center; }
.icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--b2bl-radius-sm); background: white; border: 1px solid var(--b2bl-border-strong); color: #6c757d; cursor: pointer; transition: all var(--b2bl-dur-fast) var(--b2bl-ease); }
.icon-btn:hover { background: #f8f9fa; color: #2c3e50; }
.edit-btn { width: 36px; height: 36px; border-radius: var(--b2bl-radius-sm); border: 1px solid var(--b2bl-border-strong); background: #fff; color: var(--b2bl-text-muted); cursor: pointer; display: inline-grid; place-items: center; font-size: .9rem; transition: all var(--b2bl-dur-fast) var(--b2bl-ease); }
.edit-btn:hover { background: var(--b2bl-primary); color: #fff; border-color: var(--b2bl-primary); }

/* Body & sections */
.req-body { padding: 1.25rem 1.5rem; }
.section + .section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--b2bl-border); }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.section__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: #2c3e50; margin: 0; }
.section__title i { color: var(--b2bl-primary); }
.section__count { font-size: .75rem; color: #6c757d; background: #f8f9fa; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--b2bl-border); font-weight: 600; }

/* Position cards */
.pos { border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-lg); background: white; overflow: hidden; transition: border-color var(--b2bl-dur-fast) var(--b2bl-ease); }
.pos + .pos { margin-top: 0.5rem; }
.pos:hover { border-color: var(--b2bl-border-strong); }
.pos--open { box-shadow: var(--b2bl-shadow-sm); border-color: var(--b2bl-border-strong); }
.pos__row { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 0.875rem; padding: 0.875rem 1rem; align-items: center; text-align: left; width: 100%; background: transparent; border: none; cursor: pointer; transition: background var(--b2bl-dur-fast) var(--b2bl-ease); }
.pos__row:hover { background: #f8f9fa; }
.pos__thumb { width: 60px; height: 60px; border-radius: var(--b2bl-radius-md); background: #f1f3f5; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 1.4rem; flex-shrink: 0; }
.pos__thumb--generic { background: linear-gradient(135deg, #f1f3f5, #e9ecef); }
.pos__main { min-width: 0; }
.pos__num { font-size: .72rem; color: #6c757d; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.pos__title { font-size: .95rem; font-weight: 600; color: #2c3e50; margin: 2px 0 4px; line-height: 1.3; }
.pos__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: .72rem; color: #6c757d; }
.pos__chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; background: #f8f9fa; border: 1px solid var(--b2bl-border); }
.pos__chip i { font-size: .7em; opacity: .7; }
.pos__price { text-align: right; }
.pos__price-amount { font-size: .95rem; font-weight: 700; color: #2c3e50; white-space: nowrap; }
.pos__price-meta { font-size: .72rem; color: #6c757d; }
.pos__chevron { color: #6c757d; transition: transform var(--b2bl-dur-fast) var(--b2bl-ease); font-size: .85rem; }
.pos--open .pos__chevron { transform: rotate(180deg); color: var(--b2bl-primary); }
.pos__body { display: none; padding: 0.875rem 1rem 1rem 5.25rem; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; border-top: 1px solid var(--b2bl-border); }
.pos--open .pos__body { display: grid; }
.pos__desc { font-size: .85rem; line-height: 1.55; color: #2c3e50; margin: 0 0 0.75rem; }
.pos__vendor { padding: 0.6rem 0.75rem; background: #f8f9fa; border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-sm); display: flex; gap: 0.5rem; align-items: flex-start; font-size: .78rem; line-height: 1.4; }
.pos__vendor i { color: var(--b2bl-primary); margin-top: 2px; }
.pos__vendor b { color: #2c3e50; font-weight: 600; }
.pos__vendor .vendor-addr { color: #6c757d; }

/* Specs */
.specs__head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--b2bl-border); border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-sm); overflow: hidden; }
.spec { background: white; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 1px; }
.spec__k { font-size: .68rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.spec__v { font-size: .85rem; color: #2c3e50; font-weight: 500; }

/* Totals strip */
.totals { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-lg); overflow: hidden; margin-top: 0.875rem; background: white; }
.totals__cell { padding: 0.75rem 1rem; border-right: 1px solid var(--b2bl-border); display: flex; flex-direction: column; gap: 3px; }
.totals__cell:last-child { border-right: none; }
.totals__cell--total { background: var(--b2bl-gradient-primary); }
.totals__cell--total .totals__k { color: rgba(255,255,255,.85); }
.totals__cell--total .totals__v { color: white; }
.totals__k { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: #6c757d; }
.totals__v { font-size: .95rem; font-weight: 700; color: #2c3e50; }
.totals__v--big { font-size: 1.05rem; }

/* Conditions grid */
.cond { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.cond__cell { border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-sm); padding: 0.65rem 0.75rem; background: white; display: flex; flex-direction: column; gap: 3px; }
.cond__cell--highlight { background: var(--b2bl-primary-soft); border-color: transparent; }
.cond__k { font-size: .68rem; text-transform: uppercase; font-weight: 600; color: #6c757d; letter-spacing: .04em; }
.cond__v { font-size: .95rem; font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 0.4rem; }
.cond__cell--highlight .cond__v { color: var(--b2bl-primary); }

/* Note block */
.note { background: #f8f9fa; border-left: 3px solid var(--b2bl-primary); border-radius: var(--b2bl-radius-sm); padding: 0.65rem 0.875rem; font-size: .85rem; color: #2c3e50; white-space: pre-wrap; }
.note__author { font-size: .75rem; color: #6c757d; margin-top: 4px; }

/* Note accordion (details/summary) */
.note-accordion { border: none; background: none; }
.note-accordion__summary { display: flex; align-items: center; gap: .5rem; cursor: pointer;
                            list-style: none; padding: .2rem 0 .5rem; user-select: none; }
.note-accordion__summary::-webkit-details-marker { display: none; }
.note-accordion__summary::marker { display: none; }
.note-accordion__preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                             white-space: nowrap; font-size: .78rem; color: #9ca3af; }
.note-accordion[open] .note-accordion__preview { display: none; }
.note-accordion__chevron { font-size: .75rem; color: #9ca3af; flex-shrink: 0;
                            transition: transform .2s; }
.note-accordion[open] .note-accordion__chevron { transform: rotate(180deg); }

/* Attachments accordion (separate from note-accordion to avoid interference) */
.att-accordion { border: none; background: none; }
.att-accordion__summary { display: flex; align-items: center; gap: .5rem; cursor: pointer;
                           list-style: none; padding: .2rem 0 .5rem; user-select: none; }
.att-accordion__summary::-webkit-details-marker { display: none; }
.att-accordion__summary::marker { display: none; }
.att-accordion__preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                            white-space: nowrap; font-size: .78rem; color: #9ca3af; }
.att-accordion[open] .att-accordion__preview { display: none; }
.att-accordion__chevron { font-size: .75rem; color: #9ca3af; flex-shrink: 0; transition: transform .2s; }
.att-accordion[open] .att-accordion__chevron { transform: rotate(180deg); }
/* .attach-list has display:flex which overrides the browser UA display:none for closed <details> — must force it explicitly */
details:not([open]) .attach-list { display: none; }

/* Notes + Attachments two-column layout */
.notes-attachments-row { display: flex; gap: 1.25rem; align-items: flex-start; }
.notes-col { flex: 0 0 calc(50% - 0.625rem); min-width: 0; }
.attachments-col { flex: 0 0 calc(50% - 0.625rem); min-width: 0; border-left: 1px solid var(--b2bl-border); padding-left: 1.25rem; }
.attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.attach-list__item { display: block; }
.attach-list__link { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.6rem; border-radius: var(--b2bl-radius-sm); text-decoration: none; color: inherit; background: #f8f9fa; border: 1px solid var(--b2bl-border); transition: background .15s; }
.attach-list__link:hover { background: #e9ecef; text-decoration: none; color: inherit; }
.attach__sub { font-size: .72rem; color: #6c757d; margin-top: 2px; }

/* Emoji picker */
.emoji-picker { position: absolute; bottom: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius); box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: .4rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; z-index: 200; width: 236px; }
.emoji-picker__btn { background: none; border: none; padding: 3px; font-size: 1.25rem; line-height: 1; border-radius: 4px; cursor: pointer; text-align: center; }
.emoji-picker__btn:hover { background: var(--b2bl-bg-soft, #f0f4f7); }

/* Share warning modal */
.share-warn-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity .2s; }
.share-warn-overlay--in { opacity: 1; }
.share-warn-box { background: #fff; border-radius: var(--b2bl-radius); padding: 1.75rem; max-width: 420px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,.22); }
.share-warn-icon { font-size: 1.75rem; color: #d97706; margin-bottom: .75rem; }
.share-warn-box h4 { margin: 0 0 .65rem; font-size: 1rem; color: #1a3a5c; }
.share-warn-box p { font-size: .875rem; color: #4a5568; margin: 0 0 1.25rem; line-height: 1.55; }
.share-warn-btns { display: flex; gap: .5rem; justify-content: flex-end; }

/* TODO list */
.todo-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.todo-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: var(--b2bl-radius-sm); background: #f8f9fa; border: 1px solid var(--b2bl-border); transition: background .15s; }
.todo-item--done { opacity: .6; }
.todo-item--done .todo-text { text-decoration: line-through; color: #6c757d; }
.todo-check { background: none; border: none; padding: 0; cursor: pointer; color: #adb5bd; font-size: 1rem; line-height: 1; flex-shrink: 0; transition: color .15s; }
.todo-check:hover { color: var(--b2bl-primary); }
.todo-item--done .todo-check { color: #28a745; }
.todo-text { flex: 1; font-size: .875rem; color: #2c3e50; }
.todo-meta { font-size: .7rem; color: #adb5bd; white-space: nowrap; }
.todo-delete { background: none; border: none; padding: 0; cursor: pointer; color: #adb5bd; font-size: .8rem; opacity: 0; transition: opacity .15s, color .15s; flex-shrink: 0; }
.todo-item:hover .todo-delete { opacity: 1; }
.todo-delete:hover { color: #dc3545; }
.todo-empty { font-size: .85rem; color: #adb5bd; padding: 0.25rem 0; }
.todo-add-form { display: flex; gap: 0.5rem; }
.todo-add-input { flex: 1; font-size: .875rem; border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-sm); padding: 0.35rem 0.6rem; outline: none; }
.todo-add-input:focus { border-color: var(--b2bl-primary); }
.todo-add-btn { background: var(--b2bl-primary); color: white; border: none; border-radius: var(--b2bl-radius-sm); padding: 0.35rem 0.75rem; cursor: pointer; font-size: .9rem; }
.todo-add-btn:hover { opacity: .88; }

/* Footer */
.req-foot { padding: 0.75rem 1.5rem; background: #f8f9fa; border-top: 1px solid var(--b2bl-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: .85rem; color: #6c757d; }
.req-foot__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.req-foot__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---- Redesigned chat widget ---- */
.section--chat .chat { box-shadow: none; border-radius: var(--b2bl-radius-lg); background: #f8f9fa; }
.chat { display: flex; flex-direction: column; border: 1px solid var(--b2bl-border); border-radius: var(--b2bl-radius-lg); overflow: hidden; }
.chat__head { padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--b2bl-border); background: white; }
.chat__avatar-stack { display: flex; position: relative; flex-shrink: 0; }
.chat__avatar { width: 34px; height: 34px; border-radius: 999px; border: 2px solid white; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; color: white; }
.chat__avatar-stack .chat__avatar + .chat__avatar { margin-left: -10px; }
.chat__head-text { flex: 1; min-width: 0; }
.chat__head-title { font-weight: 700; font-size: .95rem; color: #2c3e50; display: flex; align-items: center; gap: 0.5rem; }
.chat__head-sub { font-size: .75rem; color: #6c757d; display: flex; align-items: center; gap: 0.4rem; margin-top: 1px; }
.chat__head-actions { display: flex; gap: 0.25rem; }
.live-dot { width: 7px; height: 7px; background: #0f8448; border-radius: 999px; display: inline-block; animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(.85); } }

.req-chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #dee2e6; color: #6c757d; font-size: .68rem; font-weight: 700; }
.req-chat-badge--unread { background: #dc3545; color: white; }

.chat__body { flex: 1; min-height: 240px; max-height: 368px; overflow-y: auto; padding: 1rem 1rem 0.5rem; background: radial-gradient(circle at 25% 30%, rgba(74,157,189,0.04) 0%, transparent 50%), #f5f7f8; background-attachment: local; display: flex; flex-direction: column; gap: 2px; }
.chat__body::-webkit-scrollbar { width: 6px; }
.chat__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 4px; }

.daysep { align-self: center; background: rgba(255,255,255,.9); border: 1px solid var(--b2bl-border); border-radius: 999px; padding: 2px 12px; font-size: .7rem; font-weight: 600; color: #6c757d; margin: 0.5rem 0; }
.sysmsg { align-self: center; background: rgba(255,255,255,.7); border: 1px dashed var(--b2bl-border-strong); border-radius: 999px; padding: 3px 12px; font-size: .7rem; color: #6c757d; margin: 3px 0; display: inline-flex; align-items: center; gap: 5px; }

.bubble-row { display: flex; gap: 0.5rem; margin-top: 2px; }
.bubble-row--own { justify-content: flex-end; }
.bubble-row--internal { opacity: .88; }
.bubble-row.is-group-start { margin-top: 0.5rem; }
.bubble-row__avatar { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .7rem; color: white; flex-shrink: 0; align-self: flex-end; margin-bottom: 3px; }
.bubble-row__avatar--hidden { visibility: hidden; }

.bubble { max-width: 68%; min-width: 60px; padding: 7px 11px 5px; border-radius: 14px; background: white; font-size: .85rem; line-height: 1.4; color: #2c3e50; box-shadow: 0 1px 1.5px rgba(0,0,0,.08); word-wrap: break-word; }
.bubble--own { background: #dcf2ec; }
.bubble--ai { background: linear-gradient(180deg,#fff 0%,#f6fbfd 100%); border: 1px solid #d9ecf3; }
.bubble--internal { background: #f3f0ca; border: 1px dashed #d97706; }
.bubble--tail { border-bottom-left-radius: 4px; }
.bubble--own.bubble--tail { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.bubble__author { font-size: .7rem; font-weight: 700; color: var(--b2bl-primary); margin-bottom: 2px; }
.bubble__author--ai { color: #6c4cb0; }
.bubble__author--partner { color: #b8740b; }
.bubble__author--internal { color: #a06000; }
.bubble__text { white-space: pre-wrap; display: block; user-select: text; -webkit-user-select: text; }
.bubble--ai .bubble__text, .bubble--internal .bubble__text { white-space: normal; }
.chat-bq { border-left: 3px solid #dee2e6; padding: .25rem .75rem; color: #6c757d; margin: .35rem 0; background: rgba(0,0,0,.03); border-radius: 0 4px 4px 0; font-style: italic; }
.chat-table { width: 100%; border-collapse: collapse; font-size: .85em; margin: .4rem 0; }
.chat-table th { background: rgba(0,0,0,.06); font-weight: 600; border: 1px solid #dee2e6; }
.chat-table td { border: 1px solid #dee2e6; }
.bubble__meta { display: inline-flex; align-items: center; gap: 3px; font-size: .62rem; color: #6c757d; float: right; margin: 5px 0 -2px 8px; line-height: 1; }
.bubble--own .bubble__meta { color: rgba(44,62,80,.55); }
.tick { font-size: .75rem; }
.tick--sent { color: #adb5bd; }
.tick--delivered { color: var(--b2bl-primary); }
.tick--read { color: var(--b2bl-primary); }

.attach { display: flex; gap: 0.5rem; padding: 0.5rem 0.6rem; background: rgba(0,0,0,.04); border-radius: 10px; margin-bottom: 5px; align-items: center; text-decoration: none; color: inherit; transition: background var(--b2bl-dur-fast) var(--b2bl-ease); }
.attach:hover { background: rgba(0,0,0,.07); }
.bubble--own .attach { background: rgba(255,255,255,.5); }
.attach__icon { width: 34px; height: 34px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--b2bl-primary); color: white; flex-shrink: 0; font-size: .9rem; }
.attach__icon--pdf { background: #dc3545; }
.attach__name { font-size: .82rem; font-weight: 600; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* Composer */
.composer { border-top: 1px solid var(--b2bl-border); background: white; padding: 0.5rem 0.65rem 0.4rem; }
.composer__row { display: flex; align-items: flex-end; gap: 0.4rem; }
.composer__btn { width: 36px; height: 36px; border-radius: 999px; background: #f8f9fa; border: none; color: #6c757d; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all var(--b2bl-dur-fast) var(--b2bl-ease); }
.composer__btn:hover { background: var(--b2bl-primary-soft); color: var(--b2bl-primary); }
.composer__input { position: relative; flex: 1; display: flex; align-items: flex-end; background: #f8f9fa; border-radius: 20px; padding: 5px 6px 5px 14px; border: 1px solid transparent; transition: border-color var(--b2bl-dur-fast) var(--b2bl-ease); }
.composer__input:focus-within { border-color: var(--b2bl-primary); background: white; }
.composer__textarea { flex: 1; border: none; resize: none; background: transparent; outline: none; font-size: .85rem; line-height: 1.4; padding: 5px 0; max-height: 110px; min-height: 22px; color: #2c3e50; font-family: inherit; }
.composer__textarea::placeholder { color: #adb5bd; }
.composer__inline-btn { width: 28px; height: 28px; border-radius: 999px; border: none; background: transparent; color: #6c757d; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.composer__inline-btn:hover { color: var(--b2bl-primary); }
.composer__send { width: 40px; height: 40px; border-radius: 999px; background: var(--b2bl-gradient-primary); color: white; border: none; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--b2bl-shadow-primary); cursor: pointer; transition: all var(--b2bl-dur-fast) var(--b2bl-ease); }
.composer__send:hover { box-shadow: var(--b2bl-shadow-primary-lg); transform: translateY(-1px); }
.composer__send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.composer__attach-preview { display: none; font-size: .78rem; color: #495057; padding: 3px 8px; background: #f8f9fa; border-radius: 6px; margin-top: 5px; align-items: center; gap: 5px; }
.composer__attach-remove { border: none; background: none; color: #6c757d; font-size: .95rem; cursor: pointer; padding: 0; line-height: 1; }
.composer__reply-bar { display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; background: #f0f9ff; border-left: 3px solid var(--b2bl-primary, #3091ab); border-radius: 6px; margin-bottom: 6px; }
.composer__reply-body { flex: 1; min-width: 0; }
.composer__reply-name { display: block; font-size: .7rem; font-weight: 700; color: var(--b2bl-primary, #3091ab); margin-bottom: 1px; }
.composer__reply-text { display: block; font-size: .75rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer__reply-cancel { border: none; background: none; color: #9ca3af; cursor: pointer; padding: 2px 4px; line-height: 1; flex-shrink: 0; }
.composer__reply-cancel:hover { color: #374151; }
.bubble__reply-btn { display: none; border: none; background: none; cursor: pointer; color: #adb5bd; font-size: .7rem; padding: 0 4px 0 0; vertical-align: middle; line-height: 1; }
.bubble__reply-btn:hover { color: var(--b2bl-primary, #3091ab); }
.bubble-row:hover .bubble__reply-btn { display: inline; }
.composer__bottom-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: .5rem; }
.composer__hints { font-size: .67rem; color: #adb5bd; }
.composer__hints kbd { font-family: var(--b2bl-font-mono); background: #f8f9fa; border: 1px solid var(--b2bl-border); padding: 0 4px; border-radius: 3px; font-size: .6rem; }
.composer__escalate { display: flex; align-items: center; gap: .5rem; cursor: pointer; flex-shrink: 0; }
.composer__escalate-text { font-size: .72rem; color: #adb5bd; white-space: nowrap; transition: color .15s; }
.composer__escalate-text:first-of-type { color: #3b82f6; font-weight: 600; }
.composer__escalate-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.composer__escalate-switch input { display: none; }
.composer__escalate-track { position: absolute; inset: 0; background: #93c5fd; border-radius: 999px; transition: background .2s; }
.composer__escalate-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.composer__escalate-switch input:checked + .composer__escalate-track { background: #f59e0b; }
.composer__escalate-switch input:checked + .composer__escalate-track::after { transform: translateX(16px); }
.composer__escalate:has(input:checked) .composer__escalate-text:first-of-type { color: #adb5bd; font-weight: normal; }
.composer__escalate:has(input:checked) .composer__escalate-text:last-child { color: #b45309; font-weight: 600; }

/* Avatar colors */
.avatar--you { background: linear-gradient(135deg, #4A9DBD, #3A8DAD); }
.avatar--ai { background: linear-gradient(135deg, #8b7ec8, #6c4cb0); }
.avatar--partner { background: linear-gradient(135deg, #f5b042, #b8740b); }
.avatar--internal { background: linear-gradient(135deg, #f0c040, #c07800); font-size: .75rem; }

/* Chat empty state */
.chat-empty { align-self: center; color: #6c757d; font-size: .85rem; padding: 2rem 1rem; text-align: center; }

/* Responsive */
@media (max-width: 768px) {
  .pos__body { grid-template-columns: 1fr; padding-left: 1rem; }
  .totals, .cond { grid-template-columns: repeat(2, 1fr); }
  .totals__cell:nth-child(2) { border-right: none; }
  .totals__cell:nth-child(1), .totals__cell:nth-child(2) { border-bottom: 1px solid var(--b2bl-border); }
  .req-head, .req-body { padding-left: 1rem; padding-right: 1rem; }
}

/* ── View toolbar (breadcrumb row + toggle) ── */
.view-toolbar { display: flex; align-items: center; justify-content: space-between; }
.view-btns { display: flex; gap: 3px; background: #f0f4f8; border-radius: 8px; padding: 3px; }
.view-btn { background: transparent; border: none; border-radius: 6px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: #6b7280; cursor: pointer; transition: background .15s, color .15s; font-size: .9rem; }
.view-btn:hover { background: #e2e8f0; color: #374151; }
.view-btn.is-active { background: #fff; color: var(--b2bl-primary, #4A9DBD); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ── List-mode chevron (hidden in expanded mode) ── */
.req-card__list-toggle { display: none; margin-left: 8px; color: #9ca3af; font-size: .8rem; transition: transform .2s; pointer-events: none; }

/* ── List view ── */
#req-list .req-card { background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; }
#req-list.view--list .req-card { margin-bottom: 6px !important; }
#req-list.view--list .req-body { display: none; }
#req-list.view--list .req-foot { display: none; }
#req-list.view--list .req-head { cursor: pointer; user-select: none; }
#req-list.view--list .rh-card  { cursor: pointer; user-select: none; }
#req-list.view--list .req-card__list-toggle { display: inline-block; }
#req-list.view--list .req-card--open .req-body { display: block; }
#req-list.view--list .req-card--open .req-foot { display: block; }
.rh-expand-icon { display: none; color: #9ca3af; font-size: .85rem; transition: transform .2s; pointer-events: none; }
#req-list.view--list .rh-expand-icon { display: inline-block; }
#req-list.view--list .req-card--open .rh-expand-icon { transform: rotate(180deg); color: var(--b2bl-primary); }

/* ══════════════════════════════════════════════════════════
   Leasing Workbench
   ══════════════════════════════════════════════════════════ */

.wb-header { }
.wb-title { font-size: 1.5rem; font-weight: 700; color: #1f2937; margin: 0 0 .25rem; }
.wb-sub   { font-size: .875rem; color: #6b7280; margin: 0; }

/* Tabs */
.wb-tabs .nav-link { font-weight: 500; color: #6b7280; padding: .5rem 1rem; }
.wb-tabs .nav-link.active { color: var(--b2bl-primary, #3091ab); border-bottom-color: var(--b2bl-primary, #3091ab); }
.wb-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e5e7eb; color: #374151;
  border-radius: 10px; font-size: .7rem; font-weight: 700;
  padding: 0 6px; min-width: 18px; height: 18px; margin-left: 6px;
}
.wb-tabs .nav-link.active .wb-tab-badge { background: var(--b2bl-primary, #3091ab); color: #fff; }

/* Table */
.wb-table-wrap { overflow-x: auto; }
.wb-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.wb-table thead th {
  padding: .35rem .9rem; text-align: left; font-weight: 600;
  color: #6b7280; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.wb-table tbody td { padding: .35rem .9rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.wb-row { transition: background .12s; }
.wb-table tbody .wb-row:nth-child(even) { background: #eef2f7; }
.wb-row:not(.wb-row--no-click) { cursor: pointer; }
.wb-table tbody .wb-row:not(.wb-row--no-click):hover { background: #e8f4f8; }
.wb-id   { font-size: .78rem; color: #6b7280; font-family: monospace; }
.wb-title-cell { font-weight: 500; max-width: 260px; }
.wb-sub-cell   { font-size: .75rem; color: #9ca3af; }
.wb-amount     { font-weight: 600; white-space: nowrap; }
.wb-link       { color: var(--b2bl-primary, #3091ab); text-decoration: none; font-size: .78rem; font-family: monospace; }
.wb-link:hover { text-decoration: underline; }
.wb-empty { padding: 2rem; text-align: center; color: #9ca3af; font-size: .9rem; }

/* Status pills */
.wb-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--b2bl-radius-pill);
  font-size: var(--b2bl-text-sm, .85rem); font-weight: 600; white-space: nowrap;
}
.wb-status-pill::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; background: currentColor; opacity: .8;
}
.wb-status-pill--created  { background: #e0f2fe; color: #0369a1; }
.wb-status-pill--broker   { background: #fef9c3; color: #854d0e; }
.wb-status-pill--finance-pending { background: #e0f2fe; color: #0369a1; opacity: .75; }
.wb-status-pill--finance  { background: var(--b2bl-primary-soft); color: var(--b2bl-primary); }
.wb-status-pill--offers   { background: #d1fae5; color: #065f46; }
.wb-status-pill--offers::before   { background: #10b981; }
.wb-status-pill--split    { background: #f3f4f6; color: #4b5563; }
.wb-status-pill--rejected { background: #fee2e2; color: #991b1b; }
.wb-status-pill--deleted  { background: #f3f4f6; color: #6b7280; }
.wb-status-pill--approve  { background: #d1fae5; color: #065f46; }
.wb-status-pill--approve::before  { background: #10b981; }
.wb-status-pill--decline  { background: #fee2e2; color: #991b1b; }
.wb-status-pill--decline::before  { background: #ef4444; }
.wb-status-pill--escalate { background: #fef3c7; color: #92400e; }
.wb-status-pill--escalate::before { background: #f59e0b; }
.wb-status-pill--rfi      { background: #dbeafe; color: #1e40af; }
.wb-status-pill--rfi::before      { background: #3b82f6; }
/* brand-color variant for customer/workbench header pill */
.wb-status-pill--primary { background: var(--b2bl-primary-soft); color: var(--b2bl-primary); }
/* legacy aliases */
.wb-status-pill--offersreceived,
.wb-status-pill--offerreceived { background: #ede9fe; color: #5b21b6; }
.wb-status-pill--accepted      { background: #d1fae5; color: #065f46; }
.wb-status-pill--completed     { background: #e0f2fe; color: #0369a1; }

/* Message pills (workbench rows) */
.workbench-pill {
  display: none; align-items: center; justify-content: center;
  border-radius: 10px; font-size: .72rem; font-weight: 700;
  padding: 1px 7px; min-width: 20px;
}
.workbench-pill--total { background: var(--b2bl-primary, #3091ab); color: #fff; }
.workbench-pill--open  { background: #dc3545; color: #fff; }
.workbench-pill--blue  { background: var(--b2bl-primary, #3091ab); color: #fff; }
.workbench-pill--red   { background: #dc3545; color: #fff; }

.wb-todo-badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.wb-todo-badge--open { background: #fee2e2; color: #b91c1c; }
.wb-todo-badge--done { background: #d1fae5; color: #065f46; }
.wb-todo-badge--none { color: #9ca3af; font-size: .8rem; }

/* Staff nav item */
.nav-menu-item--staff { border-left: 2px solid var(--b2bl-primary, #3091ab); padding-left: .75rem !important; }

/* Staff chat: mode selector */
.composer__mode-row {
  display: flex; gap: .4rem; padding: .4rem .5rem .2rem;
  border-bottom: 1px solid #e5e7eb;
}
.composer__mode-btn {
  appearance: none; border: 1.5px solid #d1d5db; background: #f9fafb;
  border-radius: 6px; padding: .25rem .65rem; font-size: .78rem; font-weight: 500;
  color: #6b7280; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.composer__mode-btn:hover { border-color: var(--b2bl-primary, #3091ab); color: var(--b2bl-primary, #3091ab); }
.composer__mode-btn--active {
  border-color: var(--b2bl-primary, #3091ab); background: var(--b2bl-primary, #3091ab);
  color: #fff;
}
.composer__mode-btn--ai.composer__mode-btn--active { border-color: #6366f1; background: #6366f1; }
.composer__mode-btn--ai-public.composer__mode-btn--active { border-color: #059669; background: #059669; }
.composer__mode-btn--coach { border-color: #c4b5fd; color: #7c3aed; }
.composer__mode-btn--coach.composer__mode-btn--active { border-color: #7c3aed; background: #7c3aed; color: #fff; }

.bubble--coach { background: #f5f3ff; border: 1px solid #c4b5fd; }
.bubble--coach .bubble__author { color: #7c3aed; font-size: .72rem; font-weight: 600; margin-bottom: .2rem; }

.wb-tab-badge--coach { background: #7c3aed; color: #fff; }

.coach-header { padding: .75rem 0 1rem; }
.coach-desc { font-size: .875rem; color: #6b7280; margin: 0; }

.coach-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.coach-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem;
              background: #f9f5ff; border: 1px solid #e9d5ff; border-radius: .5rem; }
.coach-item__body { flex: 1; min-width: 0; }
.coach-item__text { display: block; font-size: .9rem; color: #1f2937; }
.coach-item__meta { display: block; font-size: .72rem; color: #9ca3af; margin-top: .2rem; }
.coach-item__actions { display: flex; gap: .25rem; flex-shrink: 0; }
.coach-item__delete,
.coach-item__edit { flex-shrink: 0; background: none; border: none; color: #9ca3af; cursor: pointer;
                    padding: .25rem .4rem; border-radius: .25rem; line-height: 1; }
.coach-item__delete:hover { background: #fde8e8; color: #b91c1c; }
.coach-item__edit:hover { background: #ede9fe; color: #7c3aed; }
.coach-item--editing .coach-item__text,
.coach-item--editing .coach-item__meta { display: none; }
.coach-item__edit-area { display: none; width: 100%; font-size: .9rem; border: 1px solid #c4b5fd;
                          border-radius: .35rem; padding: .4rem .6rem; resize: vertical; min-height: 3rem;
                          font-family: inherit; color: #1f2937; background: #fff; margin-top: .4rem; }
.coach-item--editing .coach-item__edit-area { display: block; }
.coach-item__edit-area:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 2px #ede9fe; }
.coach-item__edit-btns { display: none; gap: .4rem; margin-top: .4rem; }
.coach-item--editing .coach-item__edit-btns { display: flex; }
.coach-item__save { font-size: .8rem; padding: .25rem .7rem; border-radius: .3rem; border: none; cursor: pointer;
                    background: #7c3aed; color: #fff; font-weight: 600; }
.coach-item__save:hover { background: #6d28d9; }
.coach-item__cancel { font-size: .8rem; padding: .25rem .7rem; border-radius: .3rem; border: 1px solid #d1d5db;
                      cursor: pointer; background: #fff; color: #6b7280; }
.coach-item__cancel:hover { background: #f3f4f6; }
.coach-empty { color: #9ca3af; font-size: .875rem; padding: 1rem 0; }

.composer__tone-group {
  display: flex; align-items: center; gap: .35rem;
  margin-left: auto;
  transition: opacity .15s;
}
.composer__tone-group--disabled {
  opacity: .35;
  pointer-events: none;
}
.composer__tone-label {
  font-size: .72rem; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem;
}
.composer__tone-btn {
  appearance: none; border: 1.5px solid #e5e7eb; background: #f9fafb;
  border-radius: 20px; padding: .15rem .6rem; font-size: .75rem; font-weight: 500;
  color: #6b7280; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.composer__tone-btn:hover { border-color: #059669; color: #059669; }
.composer__tone-btn--active { border-color: #059669; background: #059669; color: #fff; }

/* Staff bubbles */
.bubble--staff { background: #ede9fe; }
.bubble-row__avatar.avatar--staff {
  background: #6366f1; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}
.bubble__author--staff { color: #4338ca; font-size: .72rem; font-weight: 600; margin-bottom: .15rem; }

/* Own-internal (staff's own internal message) */
.bubble--own-internal { background: #fef3c7 !important; }
.bubble__author--internal-own { color: #92400e; font-size: .72rem; font-weight: 600; margin-bottom: .15rem; }
#req-list.view--list .req-card--open .req-card__list-toggle { transform: rotate(180deg); color: var(--b2bl-primary, #4A9DBD); }


/* =============================================================
   Document history timeline overlay
   ============================================================= */
.tl-overlay {
  position: fixed; inset: 0;
  background: rgba(15,25,35,.42);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: grid;
  place-items: start center;
  padding: 56px 20px 32px;
  overflow-y: auto;
  animation: tl-fade .18s ease;
}
@keyframes tl-fade { from { opacity: 0; } to { opacity: 1; } }

.tl-popup {
  width: 100%; max-width: 760px;
  max-height: calc(90vh - 56px);
  background: var(--b2bl-bg-elevated, #fff);
  border-radius: var(--b2bl-radius-xl, 1rem);
  box-shadow: 0 30px 80px rgba(15,25,35,.28), 0 8px 24px rgba(15,25,35,.10);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: tl-pop .24s ease;
}
@keyframes tl-pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tl-popup__head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--b2bl-border, #e5e7eb);
}
.tl-head__main { flex: 1; min-width: 0; }
.tl-head__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600;
  color: var(--b2bl-primary, #4A9DBD);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px;
}
.tl-head__title {
  font-size: 1.2rem; font-weight: 700;
  color: var(--b2bl-text, #111827);
  margin: 0 0 8px; line-height: 1.3;
}
.tl-head__meta {
  display: flex; align-items: center; gap: 12px;
  font-size: .85rem; flex-wrap: wrap;
}
.tl-head__id { color: var(--b2bl-text-muted, #6b7280); }
.tl-head__id strong {
  color: var(--b2bl-text, #111827);
  font-family: var(--b2bl-font-mono, monospace);
  font-weight: 600; font-size: .82rem; margin-left: 2px;
}
.tl-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem; font-weight: 600;
}
.tl-status .fa-circle { font-size: 6px; }
.tl-status--success { background: var(--b2bl-success-soft, #d1fae5); color: var(--b2bl-success, #059669); }
.tl-status--info    { background: var(--b2bl-info-soft, #e0f2fe); color: var(--b2bl-primary, #4A9DBD); }

.tl-close {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: var(--b2bl-radius-md, .5rem);
  border: 1px solid var(--b2bl-border, #e5e7eb);
  background: var(--b2bl-bg-muted, #f9fafb);
  color: var(--b2bl-text-muted, #6b7280);
  cursor: pointer; display: grid; place-items: center; font-size: 1rem;
  transition: all .15s ease;
}
.tl-close:hover { background: #fee2e2; border-color: #fee2e2; color: #dc2626; }

.tl-summary {
  display: flex; align-items: stretch;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--b2bl-bg-muted, #f9fafb) 0%, #fff 100%);
  border-bottom: 1px solid var(--b2bl-border, #e5e7eb);
  gap: 4px;
}
.tl-summary__item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px 8px;
}
.tl-summary__label {
  font-size: .7rem; font-weight: 600;
  color: var(--b2bl-text-muted, #6b7280);
  text-transform: uppercase; letter-spacing: .04em;
}
.tl-summary__value {
  font-size: .85rem; font-weight: 600;
  color: var(--b2bl-text, #111827);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-summary__divider { width: 1px; background: var(--b2bl-border, #e5e7eb); margin: 4px 0; }

.tl-filters {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--b2bl-border, #e5e7eb);
}
.tl-filters__group {
  display: flex; gap: 4px;
  background: var(--b2bl-bg-muted, #f9fafb);
  padding: 4px; border-radius: var(--b2bl-radius-md, .5rem);
}
.tl-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 0;
  background: transparent;
  border-radius: var(--b2bl-radius-sm, .35rem);
  font-size: .85rem; font-weight: 500;
  color: var(--b2bl-text-muted, #6b7280);
  cursor: pointer; transition: all .15s ease; font-family: inherit;
}
.tl-filter:hover { color: var(--b2bl-text, #111827); }
.tl-filter.is-active {
  background: #fff; color: var(--b2bl-text, #111827);
  box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600;
}
.tl-filter__count {
  padding: 1px 7px; border-radius: 999px;
  background: var(--b2bl-border, #e5e7eb);
  color: var(--b2bl-text-muted, #6b7280);
  font-size: 11px; font-weight: 600;
}
.tl-filter.is-active .tl-filter__count {
  background: var(--b2bl-primary-soft, #e0f2fe);
  color: var(--b2bl-primary, #4A9DBD);
}

.tl-body {
  flex: 1; overflow-y: auto;
  padding: 8px 24px 24px;
}
.tl-body::-webkit-scrollbar { width: 8px; }
.tl-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
.tl-body::-webkit-scrollbar-track { background: transparent; }

.tl-groups { list-style: none; margin: 0; padding: 0; }
.tl-group { margin-top: 20px; }
.tl-group:first-child { margin-top: 8px; }
.tl-group__label {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 4px 12px 4px 8px;
  background: var(--b2bl-bg-muted, #f9fafb);
  border-radius: 999px;
  margin-left: 22px; margin-bottom: 6px;
}
.tl-group__weekday {
  font-size: .7rem; font-weight: 700;
  color: var(--b2bl-primary, #4A9DBD);
  text-transform: uppercase; letter-spacing: .06em;
}
.tl-group__date { font-size: .72rem; font-weight: 600; color: var(--b2bl-text-muted, #6b7280); }
.tl-group__events { list-style: none; margin: 0; padding: 0; }

.tl-event {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px; padding: 6px 0;
}
.tl-rail {
  position: relative; display: flex;
  flex-direction: column; align-items: center;
}
.tl-node {
  position: relative; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--b2bl-border, #e5e7eb);
  color: var(--b2bl-text-muted, #6b7280);
  font-size: .9rem; flex-shrink: 0;
  transition: transform .15s ease;
}
.tl-line {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; bottom: -10px; width: 2px;
  background: var(--b2bl-border, #e5e7eb); z-index: 1;
}

.tl-tone-brand    .tl-node { background: var(--b2bl-gradient-brand, linear-gradient(135deg,#30a7b2,#3091ab)); border-color: transparent; color: #fff; box-shadow: 0 4px 10px rgba(48,145,171,.32); }
.tl-tone-primary  .tl-node { background: var(--b2bl-primary-soft, #e0f2fe); border-color: var(--b2bl-primary-soft, #e0f2fe); color: var(--b2bl-primary, #4A9DBD); }
.tl-tone-neutral  .tl-node { background: var(--b2bl-bg-muted, #f9fafb); border-color: var(--b2bl-border, #e5e7eb); color: var(--b2bl-text-muted, #6b7280); }
.tl-tone-warning  .tl-node { background: #fff4d6; border-color: #fff4d6; color: #946200; }
.tl-tone-success  .tl-node { background: var(--b2bl-success-soft, #d1fae5); border-color: var(--b2bl-success-soft, #d1fae5); color: var(--b2bl-success, #059669); }
.tl-tone-success-strong .tl-node { background: var(--b2bl-success, #059669); border-color: var(--b2bl-success, #059669); color: #fff; box-shadow: 0 4px 14px rgba(15,132,72,.32); }

.tl-event.is-current .tl-node { transform: scale(1.08); box-shadow: 0 0 0 6px var(--b2bl-success-soft, #d1fae5), 0 4px 14px rgba(15,132,72,.32); }

.tl-card {
  background: #fff;
  border: 1px solid var(--b2bl-border, #e5e7eb);
  border-radius: var(--b2bl-radius-lg, .75rem);
  padding: 12px 14px; margin-bottom: 10px;
  transition: all .15s ease;
}
.tl-card:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.tl-event.is-current .tl-card {
  border-color: var(--b2bl-success, #059669);
  background: linear-gradient(180deg, #f0fbf5 0%, #fff 100%);
  box-shadow: 0 4px 14px rgba(15,132,72,.10);
}
.tl-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tl-card__title { font-size: .9rem; font-weight: 600; color: var(--b2bl-text, #111827); margin: 0; line-height: 1.35; }
.tl-card__time { flex-shrink: 0; font-size: .72rem; font-weight: 600; color: var(--b2bl-text-muted, #6b7280); font-variant-numeric: tabular-nums; font-family: var(--b2bl-font-mono, monospace); }
.tl-card__body { font-size: .82rem; color: var(--b2bl-text-muted, #6b7280); margin: 4px 0 0; line-height: 1.5; }
.tl-card__foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.tl-actor { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--b2bl-text-muted, #6b7280); font-weight: 500; }
.tl-actor i { width: 14px; text-align: center; }
.tl-current-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--b2bl-success, #059669); color: #fff;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

.tl-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tl-att {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--b2bl-radius-sm, .35rem);
  background: var(--b2bl-bg-muted, #f9fafb);
  border: 1px solid var(--b2bl-border, #e5e7eb);
  color: var(--b2bl-text, #111827);
  font-size: .72rem; font-weight: 500;
  max-width: 100%;
}
.tl-att i { color: var(--b2bl-primary, #4A9DBD); font-size: .82rem; }
.tl-att__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.tl-att__size { color: var(--b2bl-text-muted, #6b7280); }

.tl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tl-chip {
  display: inline-flex; padding: 3px 9px;
  border-radius: var(--b2bl-radius-xs, .2rem);
  background: var(--b2bl-primary-soft, #e0f2fe);
  color: var(--b2bl-primary, #4A9DBD);
  font-size: .72rem; font-weight: 600;
}

.tl-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--b2bl-border, #e5e7eb);
  background: var(--b2bl-bg-muted, #f9fafb);
}
.tl-foot__spacer { flex: 1; }
.tl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 0;
  border-radius: var(--b2bl-radius-sm, .35rem);
  font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease; font-family: inherit;
  text-decoration: none;
}
.tl-btn--ghost { background: #fff; border: 1px solid #d1d5db; color: var(--b2bl-text, #111827); }
.tl-btn--ghost:hover { border-color: var(--b2bl-primary, #4A9DBD); color: var(--b2bl-primary, #4A9DBD); }
.tl-btn--primary {
  background: var(--b2bl-gradient-primary, linear-gradient(135deg,#30a7b2,#3091ab));
  color: #fff; box-shadow: 0 4px 12px rgba(74,157,189,.35);
}
.tl-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(74,157,189,.45); }

.tl-empty { text-align: center; padding: 48px 20px; color: var(--b2bl-text-muted, #6b7280); }
.tl-empty i { font-size: 2.4rem; color: #9ca3af; display: block; margin-bottom: 12px; }
.tl-empty p { font-size: .85rem; margin: 0; }

/* ================================================================
   TAB STRIP — shared by all detail views (FWF + workbench + customer)
   FWF re-defines these inline to stay identical; customer/workbench
   rely solely on this sheet.
   ================================================================ */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--b2bl-border); margin-bottom: 24px; }
.tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; cursor: pointer;
  border: none; background: transparent; font-family: inherit;
  color: var(--b2bl-text-muted); font-weight: 500; font-size: var(--b2bl-text-base, .875rem);
  border-radius: var(--b2bl-radius-sm) var(--b2bl-radius-sm) 0 0;
  position: relative; transition: all var(--b2bl-dur-fast) var(--b2bl-ease);
}
.tab:hover { color: var(--b2bl-text); background: var(--b2bl-bg-muted); }
.tab.is-active { color: var(--b2bl-primary); font-weight: 600; }
.tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--b2bl-primary); border-radius: 3px 3px 0 0;
}
.tab .count {
  background: var(--b2bl-bg-muted); color: var(--b2bl-text-muted); min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: var(--b2bl-radius-pill); font-size: var(--b2bl-text-xs, .72rem); font-weight: 700;
  display: inline-grid; place-items: center;
}
.tab.is-active .count { background: var(--b2bl-primary); color: #fff; }
.tab.tab--highlight:not(.is-active) {
  background: var(--b2bl-info-soft); color: var(--b2bl-primary); font-weight: 600;
}
.tab.tab--highlight:not(.is-active):hover { background: var(--b2bl-primary); color: #fff; }
.tab.tab--highlight:not(.is-active) .count { background: var(--b2bl-primary); color: #fff; }

/* Tab panels: visible by default, hidden when sibling tab is active */
.tab-panel { display: block; }

/* .req-tabs wraps the tab nav + panels for customer list and workbench;
   allows scoped tab switching without touching FWF's own tab JS. */
.req-tabs { }
.req-tabs .tabs { margin-top: 0; }
.req-body.req-tabs { padding: 0; }

/* ================================================================
   SECTION CARDS — Übersicht body cards (avoids Bootstrap .card clash)
   ================================================================ */

.sec-card {
  background: var(--b2bl-bg-elevated); border: 1px solid var(--b2bl-border);
  border-radius: var(--b2bl-radius-lg); box-shadow: var(--b2bl-shadow-sm);
  margin-bottom: 20px; overflow: hidden;
}
.sec-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--b2bl-border);
}
.sec-card__head .ic {
  width: 34px; height: 34px; border-radius: var(--b2bl-radius-md);
  background: var(--b2bl-info-soft); color: var(--b2bl-primary);
  display: inline-grid; place-items: center; font-size: .95rem; flex: none;
}
.sec-card__head h2 { margin: 0; font-size: var(--b2bl-text-lg, 1rem); font-weight: 600; color: var(--b2bl-text); }
.sec-card__head .sub { color: var(--b2bl-text-muted); font-weight: 400; font-size: var(--b2bl-text-sm, .85rem); }
.sec-card__head .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sec-card__body { padding: 22px; }
.sec-card__body.flush { padding: 0; }
/* Totals strip flush inside the card — no gap between positions and totals row */
.sec-card__body.flush .totals {
  border-radius: 0; border-left: none; border-right: none; border-bottom: none;
  margin-top: 0; border-top: 2px solid var(--b2bl-border);
}
/* Kundendaten flex row — stretch makes both cards the same height */
.sec-kundendaten-row { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; margin-bottom: 20px; }
.sec-kundendaten-row > .sec-card { flex: 1; min-width: 280px; margin-bottom: 0; }

/* ================================================================
   DATA LAYOUTS — definition lists and splits used in Kundendaten
   ================================================================ */

.dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: baseline; }
.dl dt { color: var(--b2bl-text-muted); font-size: var(--b2bl-text-sm, .85rem); white-space: nowrap; }
.dl dd { margin: 0; font-weight: 500; font-size: var(--b2bl-text-sm, .85rem); }
.kunden-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fwf-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .825rem; }
.fwf-kv dt { color: var(--b2bl-text-muted); font-weight: 500; white-space: nowrap; }
.fwf-kv dd { color: var(--b2bl-text); margin: 0; }
.fwf-map-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 6px 12px; border-radius: var(--b2bl-radius-sm);
  border: 1px solid var(--b2bl-border-strong); background: #fff; color: var(--b2bl-text-muted);
  font-size: var(--b2bl-text-sm, .85rem); font-weight: 500; cursor: pointer; text-decoration: none;
  transition: all var(--b2bl-dur-fast) var(--b2bl-ease);
}
.fwf-map-btn:hover { border-color: var(--b2bl-primary); color: var(--b2bl-primary); }

@media (max-width: 640px) {
  .kunden-split { grid-template-columns: 1fr; }
  .sec-kundendaten-row { flex-direction: column; }
  .sec-kundendaten-row > .sec-card { min-width: 0; }
}

/* ================================================================
   ANHÄNGE / FILE LIST — shared attachment display (all three views)
   ================================================================ */

.iconbtn {
  width:34px;height:34px;border-radius:var(--b2bl-radius-sm);
  border:1px solid var(--b2bl-border-strong);background:#fff;color:var(--b2bl-text-muted);
  display:inline-grid;place-items:center;cursor:pointer;font-size:.85rem;
  transition:all var(--b2bl-dur-fast) var(--b2bl-ease);text-decoration:none;
}
.iconbtn:hover { background:var(--b2bl-primary);color:#fff;border-color:var(--b2bl-primary); }

.pill { display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--b2bl-radius-pill);font-size:var(--b2bl-text-xs);font-weight:700; }
.pill-ok   { background:var(--b2bl-success-soft);color:var(--b2bl-success); }
.pill-bad  { background:var(--b2bl-danger-soft); color:var(--b2bl-danger); }
.pill-warn { background:#fff4e0;color:var(--b2bl-warning); }
.pill-info { background:var(--b2bl-info-soft);color:var(--b2bl-primary); }

.docs { width:100%;border-collapse:collapse;table-layout:fixed; }
.docs col.req { width:46%; }
.docs thead th {
  text-align:left;font-size:var(--b2bl-text-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--b2bl-text-muted);padding:14px 22px;
  background:var(--b2bl-bg-muted);border-bottom:1px solid var(--b2bl-border);
}
.docs tbody tr { border-bottom:1px solid var(--b2bl-border); }
.docs tbody tr:hover { background:#fbfdfe; }
.docs td { padding:14px 22px;vertical-align:top; }
.docs td.req { border-right:1px solid var(--b2bl-border); }
.req .name { font-weight:600;font-size:var(--b2bl-text-sm); }
.req .hint { color:var(--b2bl-text-muted);font-size:var(--b2bl-text-xs);margin-top:3px;line-height:1.45; }

.upload { display:flex;align-items:center;gap:10px; }
.upload + .upload { margin-top:10px;padding-top:10px;border-top:1px dashed var(--b2bl-border); }
.file-ic { width:32px;height:32px;border-radius:var(--b2bl-radius-sm);flex:none;display:inline-grid;place-items:center;font-size:.9rem; }
.file-ic.pdf { background:var(--b2bl-info-soft);color:var(--b2bl-primary); }
.file-ic.img { background:var(--b2bl-info-soft);color:var(--b2bl-primary); }
.file-ic.generic { background:var(--b2bl-bg-muted);color:var(--b2bl-text-muted); }
.upload .meta { flex:1;min-width:0; }
.upload .fname { font-weight:500;font-size:var(--b2bl-text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.upload .when { color:var(--b2bl-text-muted);font-size:var(--b2bl-text-xs);margin-top:2px;font-family:var(--b2bl-font-mono); }
.upload .acts { display:flex;align-items:center;gap:6px;flex:none; }

@media (max-width:640px) {
  .docs col.req { width:auto; }
  .docs td.req { border-right:none;border-bottom:1px dashed var(--b2bl-border); }
}

/* ================================================================
   FWF — KI-Analyse, Angebote panel, shared overlays
   (classes with fwf- / step / checks / ab- prefixes — no Bootstrap conflicts)
   ================================================================ */

/* ── KI-Analyse step blocks ──────────────────────────────────────────────── */
.toolbar { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--b2bl-border); }
.toolbar .right { margin-left:auto;display:flex;align-items:center;gap:10px; }
.step { padding:20px 22px; }
.step + .step { border-top:1px solid var(--b2bl-border); }
.step__title { display:flex;align-items:center;gap:10px;margin:0 0 12px; }
.step__num { width:26px;height:26px;border-radius:var(--b2bl-radius-xs);flex:none;background:var(--b2bl-gradient-primary);color:#fff;display:inline-grid;place-items:center;font-size:var(--b2bl-text-xs);font-weight:700; }
.step__title h3 { margin:0;font-size:var(--b2bl-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--b2bl-text-muted); }
.step__body { font-size:var(--b2bl-text-sm);white-space:pre-wrap;overflow-wrap:break-word;line-height:1.6;color:var(--b2bl-text); }
.checks { list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:1px; }
.checks li { display:flex;align-items:flex-start;gap:12px;padding:5px 14px;border-radius:var(--b2bl-radius-sm);background:transparent;transition:background var(--b2bl-dur-fast) var(--b2bl-ease); }
.checks li:hover { background:rgba(0,0,0,.03); }
.checks .mark { flex:none;margin-top:1px;font-size:.95rem;background:none;padding:0; }
.checks .mark.ok { color:var(--b2bl-success); }
.checks .mark.bad { color:var(--b2bl-danger); }
.checks .code { font-family:var(--b2bl-font-mono);font-size:.78rem;color:var(--b2bl-text-soft);flex:none;min-width:38px;padding-top:1px; }
.checks .desc { flex:1;font-size:var(--b2bl-text-base); }
.checks .res { flex:none;font-weight:700;font-size:var(--b2bl-text-sm); }
.checks .res.ok { color:var(--b2bl-success); }
.checks .res.bad { color:var(--b2bl-danger); }
.run-meta { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--b2bl-border);font-size:var(--b2bl-text-sm);color:var(--b2bl-text-muted);font-family:var(--b2bl-font-mono); }

/* ── FWF shared components ───────────────────────────────────────────────── */
.fwf-section { background:var(--b2bl-bg-elevated);border:1px solid var(--b2bl-border);border-radius:var(--b2bl-radius-md);margin-bottom:16px;overflow:hidden; }
.fwf-section__head { display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--b2bl-border);font-weight:600;font-size:.875rem; }
.fwf-section__head i { color:var(--b2bl-primary);width:16px;text-align:center; }
.fwf-section__body { padding:18px; }
.fwf-act-btn { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--b2bl-border-strong);border-radius:var(--b2bl-radius-sm);background:#fff;color:var(--b2bl-primary);font-size:.78rem;font-weight:600;cursor:pointer;transition:background var(--b2bl-dur-fast),border-color var(--b2bl-dur-fast); }
.fwf-act-btn:hover { background:var(--b2bl-primary-soft);border-color:var(--b2bl-primary); }
.fwf-expand-btn { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;border-radius:4px;background:var(--b2bl-primary);color:#fff;font-size:.65rem;cursor:pointer;margin-left:6px;transition:transform .2s,background var(--b2bl-dur-fast);vertical-align:middle; }
.fwf-expand-btn:hover { background:var(--b2bl-primary-hover); }
.fwf-expand-btn.is-open { transform:rotate(180deg); }
.fwf-ai-block { background:var(--b2bl-bg);border-radius:8px;padding:14px 16px;margin-top:4px; }
.fwf-ai-block p { margin:0 0 6px;font-size:.875rem; }
.fwf-ai-block p:last-child { margin-bottom:0; }
.fwf-ai-label { font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--b2bl-text-muted);margin-bottom:4px; }
.fwf-table { width:100%;border-collapse:collapse;font-size:.85rem; }
.fwf-table th { padding:8px 12px;background:var(--b2bl-bg);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--b2bl-text-muted);border-bottom:1px solid var(--b2bl-border);text-align:left; }
.fwf-table td { padding:10px 12px;border-bottom:1px solid var(--b2bl-border);vertical-align:top; }
.fwf-table tr:last-child td { border-bottom:none; }

/* ── Angebote panel ──────────────────────────────────────────────────────── */
#panel-angebote .card__body { padding:18px 24px 22px; }
#panel-angebote .sec-head { display:flex;align-items:center;gap:12px;padding:16px 24px; }
#panel-angebote .sec-icon { width:40px;height:40px;border-radius:var(--b2bl-radius-lg);flex:none;display:grid;place-items:center;font-size:1.05rem;background:var(--b2bl-info-soft);color:var(--b2bl-primary); }
#panel-angebote .sec-num { width:24px;height:24px;border-radius:50%;flex:none;background:var(--b2bl-primary);color:#fff;font-size:var(--b2bl-text-sm);font-weight:700;display:grid;place-items:center; }
#panel-angebote .sec-title { font-size:var(--b2bl-text-xl);font-weight:700;margin:0;letter-spacing:-.01em; }
#panel-angebote .sec-divider { height:1px;background:var(--b2bl-border); }
#panel-angebote .intro { color:var(--b2bl-text-muted);font-size:var(--b2bl-text-base);line-height:1.55;margin:0 0 18px; }
#panel-angebote .intro strong { color:var(--b2bl-text);font-weight:600; }
#panel-angebote .eyebrow { display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--b2bl-text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--b2bl-text-muted);margin:0 0 12px; }
#panel-angebote .eyebrow > i { color:var(--b2bl-primary); }
#panel-angebote .ki-badge { display:inline-flex;align-items:center;gap:5px;text-transform:none;letter-spacing:0;font-weight:600;font-size:11px;color:var(--b2bl-primary);background:var(--b2bl-info-soft);padding:3px 9px;border-radius:var(--b2bl-radius-pill);white-space:nowrap; }
#panel-angebote .eyebrow .ki-badge { margin-left:auto; }
#panel-angebote .work { display:grid;grid-template-columns:1.18fr min-content 0.9fr;gap:12px;margin-top:18px; }
#panel-angebote .work .col { padding:18px;min-width:0;background:var(--b2bl-bg-muted);border:1px solid var(--b2bl-border);border-radius:var(--b2bl-radius-md); }
@media (max-width:940px) { #panel-angebote .work { grid-template-columns:1fr 1fr; } #panel-angebote .work .col:nth-child(3) { grid-column:1/-1; } }
@media (max-width:620px) { #panel-angebote .work { grid-template-columns:1fr; } }
#panel-angebote .fld { display:block;margin-bottom:14px; }
#panel-angebote .fld.last,#panel-angebote .fld:last-child { margin-bottom:0; }
#panel-angebote .lbl { display:block;font-size:12px;font-weight:600;color:var(--b2bl-text-muted);margin-bottom:6px; }
#panel-angebote .inp,#panel-angebote .ta { width:100%;border:1.5px solid var(--b2bl-border-strong);border-radius:var(--b2bl-radius-sm);background:#fff;color:var(--b2bl-text);font-size:var(--b2bl-text-base);font-family:inherit;padding:0 13px;height:44px;outline:none;transition:border-color var(--b2bl-dur-fast) var(--b2bl-ease),box-shadow var(--b2bl-dur-fast) var(--b2bl-ease); }
#panel-angebote .ta { height:auto;min-height:150px;padding:11px 13px;line-height:1.55;resize:vertical; }
#panel-angebote .inp:focus,#panel-angebote .ta:focus { border-color:var(--b2bl-primary);box-shadow:0 0 0 3px var(--b2bl-info-soft); }
#panel-angebote .drop { border:2px dashed #87c7d9;background:var(--b2bl-info-soft);border-radius:var(--b2bl-radius-lg);padding:26px 16px;text-align:center;cursor:pointer;transition:border-color var(--b2bl-dur-fast) var(--b2bl-ease),background var(--b2bl-dur-fast) var(--b2bl-ease); }
#panel-angebote .drop:hover,#panel-angebote .drop.drag-over { border-color:var(--b2bl-primary);background:#d5ecf4; }
#panel-angebote .drop-ic { font-size:1.5rem;color:var(--b2bl-primary);margin-bottom:8px; }
#panel-angebote .drop-t { font-size:var(--b2bl-text-base);color:var(--b2bl-text-muted);font-weight:500; }
#panel-angebote .drop-t b { color:var(--b2bl-primary);font-weight:600; }
#panel-angebote #offer-selected-name { margin-top:6px;font-size:var(--b2bl-text-xs);color:var(--b2bl-text-muted); }
#panel-angebote .add-row { display:flex;gap:10px;align-items:flex-end;margin-top:14px; }
#panel-angebote .add-row .fld { flex:1;margin-bottom:0; }
#panel-angebote .btn-add { flex:none;height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:var(--b2bl-radius-sm);background:var(--b2bl-primary);color:#fff;border:none;font-weight:600;font-size:var(--b2bl-text-sm);font-family:inherit;cursor:pointer;box-shadow:var(--b2bl-shadow-primary);transition:background var(--b2bl-dur-fast) var(--b2bl-ease),transform var(--b2bl-dur-fast) var(--b2bl-ease);white-space:nowrap; }
#panel-angebote .btn-add:hover { background:var(--b2bl-primary-hover);transform:translateY(-1px); }
#panel-angebote .btn-add:disabled { opacity:.6;cursor:not-allowed;transform:none; }
#panel-angebote .doc-list { display:flex;flex-direction:column;gap:8px;margin-top:0; }
#panel-angebote .ab-doc { display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--b2bl-radius-md);background:var(--b2bl-bg-muted);border:1px solid var(--b2bl-border); }
#panel-angebote .ab-doc .fi { color:var(--b2bl-danger);font-size:1.25rem;flex:none; }
#panel-angebote .ab-doc .doc-meta { min-width:0;flex:1; }
#panel-angebote .ab-doc .nm { font-size:var(--b2bl-text-base);font-weight:600;color:var(--b2bl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#panel-angebote .ab-doc .fn { font-size:var(--b2bl-text-xs);color:var(--b2bl-text-muted); }
#panel-angebote .ab-doc .rm { background:none;border:none;cursor:pointer;color:var(--b2bl-text-soft);font-size:1rem;padding:6px;border-radius:var(--b2bl-radius-sm);flex:none;transition:color var(--b2bl-dur-fast) var(--b2bl-ease),background var(--b2bl-dur-fast) var(--b2bl-ease); }
#panel-angebote .ab-doc .rm:hover { color:var(--b2bl-danger);background:var(--b2bl-danger-soft); }
#panel-angebote .doc-empty { font-size:var(--b2bl-text-sm);color:var(--b2bl-text-soft);padding:8px 2px; }
#panel-angebote .kond { display:flex;flex-direction:column;gap:11px; }
#panel-angebote .krow { display:flex;align-items:center;gap:12px; }
#panel-angebote .krow .kl { width:80px;flex:none;font-size:var(--b2bl-text-base);color:var(--b2bl-text-muted); }
#panel-angebote .krow .kc { height:40px;border:1.5px solid var(--b2bl-border-strong);border-radius:var(--b2bl-radius-sm);padding:0 11px;font-size:var(--b2bl-text-base);color:var(--b2bl-text);background:#fff;outline:none;font-family:inherit;width:92px;transition:border-color var(--b2bl-dur-fast) var(--b2bl-ease),box-shadow var(--b2bl-dur-fast) var(--b2bl-ease); }
#panel-angebote .krow select.kc { width:150px;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px; }
#panel-angebote .krow .selwrap { position:relative; }
#panel-angebote .krow .selwrap .chev { position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--b2bl-text-muted);font-size:.75rem; }
#panel-angebote .krow .kc:focus { border-color:var(--b2bl-primary);box-shadow:0 0 0 3px var(--b2bl-info-soft); }
#panel-angebote .krow .ku { font-size:var(--b2bl-text-base);color:var(--b2bl-text-muted); }
#panel-angebote .caution { display:flex;align-items:flex-start;gap:13px;background:#fffbec;border:1px solid #fde68a;border-radius:var(--b2bl-radius-lg);padding:14px 18px;margin-bottom:18px; }
#panel-angebote .caution > i { color:var(--b2bl-warning);font-size:1.15rem;margin-top:2px;flex:none; }
#panel-angebote .caution .ct { font-size:var(--b2bl-text-base);line-height:1.5;color:var(--b2bl-text); }
#panel-angebote .submit-row { display:flex;align-items:center;gap:18px;flex-wrap:wrap; }
#panel-angebote .btn-submit { display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:var(--b2bl-radius-sm);background:var(--b2bl-primary);color:#fff;border:none;font-size:var(--b2bl-text-md);font-weight:600;cursor:pointer;font-family:inherit;box-shadow:var(--b2bl-shadow-primary);transition:background var(--b2bl-dur-fast) var(--b2bl-ease),transform var(--b2bl-dur-fast) var(--b2bl-ease),box-shadow var(--b2bl-dur-fast) var(--b2bl-ease); }
#panel-angebote .btn-submit:hover:not(:disabled) { background:var(--b2bl-primary-hover);transform:translateY(-2px);box-shadow:var(--b2bl-shadow-primary-lg); }
#panel-angebote .btn-submit:disabled { opacity:.5;cursor:not-allowed;box-shadow:none; }
#panel-angebote .submit-hint { font-size:var(--b2bl-text-sm);color:var(--b2bl-text-muted); }
#panel-angebote .olist { display:flex;flex-direction:column; }
#panel-angebote .orow { display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:15px 0;border-top:1px solid var(--b2bl-border); }
#panel-angebote .orow:first-child { border-top:none; }
#panel-angebote .otitle { font-size:var(--b2bl-text-md);font-weight:600;color:var(--b2bl-text); }
#panel-angebote .ometa { font-size:var(--b2bl-text-sm);color:var(--b2bl-text-muted);margin-top:3px;display:flex;align-items:center;gap:14px; }
#panel-angebote .ometa i { margin-right:4px;color:var(--b2bl-text-soft); }
#panel-angebote .ab-status { display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--b2bl-radius-pill);font-size:var(--b2bl-text-sm);font-weight:600;white-space:nowrap; }
#panel-angebote .ab-status.sent { background:var(--b2bl-success-soft);color:var(--b2bl-success); }
#panel-angebote .ab-dl-group { display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end; }
#panel-angebote .ab-dl { display:inline-flex;align-items:center;gap:7px;text-decoration:none;padding:7px 13px;border-radius:var(--b2bl-radius-sm);border:1px solid var(--b2bl-border-strong);background:#fff;font-size:var(--b2bl-text-sm);font-weight:500;color:var(--b2bl-text);transition:all var(--b2bl-dur-fast) var(--b2bl-ease); }
#panel-angebote .ab-dl:hover { border-color:var(--b2bl-primary);color:var(--b2bl-primary);background:var(--b2bl-info-soft); }
#panel-angebote .ab-dl .pdf-ic { color:var(--b2bl-danger);font-size:.9rem; }
#panel-angebote .ab-dl:hover .pdf-ic { color:var(--b2bl-primary); }
@media (max-width:760px) { #panel-angebote .orow { grid-template-columns:1fr;gap:10px; } #panel-angebote .ab-dl-group { justify-content:flex-start; } }
#panel-angebote input[type="checkbox"], #panel-angebote input[type="radio"] { accent-color:var(--b2bl-primary); }

/* ── Offer read-only panel (.offer-ro-panel) – workbench & customer views ── */
.offer-ro-panel .eyebrow { display:flex;align-items:center;gap:8px;font-size:var(--b2bl-text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--b2bl-text-muted);margin:0 0 12px; }
.offer-ro-panel .eyebrow > i { color:var(--b2bl-primary); }
.offer-ro-panel .work { display:flex;gap:12px;margin-top:0;flex-wrap:wrap; }
.offer-ro-panel .work .col { padding:18px;background:var(--b2bl-bg-muted);border:1px solid var(--b2bl-border);border-radius:var(--b2bl-radius-md); }
.offer-ro-panel .work .col--kond { flex:0 0 auto;width:fit-content;min-width:0; }
.offer-ro-panel .work .col--zusatz { flex:1;min-width:160px; }
.offer-ro-panel .work .col--dok { flex:2;min-width:260px; }
.offer-ro-panel .kond { display:flex;flex-direction:column;gap:10px; }
.offer-ro-panel .krow { display:flex;align-items:center;gap:10px; }
.offer-ro-panel .krow .kl { width:82px;flex:none;font-size:var(--b2bl-text-base);color:var(--b2bl-text-muted); }
.offer-ro-panel .krow .kv { font-size:var(--b2bl-text-base);font-weight:600;color:var(--b2bl-text);background:none;border:none;border-radius:0;padding:0; }
.offer-ro-panel .krow .kv--rate { color:#fff; }
.offer-ro-panel .krow .ku { font-size:var(--b2bl-text-base);color:var(--b2bl-text-muted); }
.offer-ro-panel .krow .ku--rate { color:rgba(255,255,255,.85);font-weight:600; }
.offer-ro-panel .krow.krow--rate-pill { align-items:center;margin-top:4px; }
.offer-ro-panel .krow.krow--rate-pill .kl--pill { color:var(--b2bl-text-muted);font-size:var(--b2bl-text-base);width:82px;flex:none; }
.offer-ro-panel .rate-pill { display:inline-flex;align-items:baseline;gap:5px;background:var(--b2bl-primary);color:#fff;padding:5px 14px 5px 12px;border-radius:999px;line-height:1.2; }
.offer-ro-panel .fld { margin-bottom:12px; }
.offer-ro-panel .fld:last-child { margin-bottom:0; }
.offer-ro-panel .col--kond .kond + .fld { margin-top:24px; }
.offer-ro-panel .lbl { display:block;font-size:12px;font-weight:600;color:var(--b2bl-text-muted);margin-bottom:4px; }
.offer-ro-panel .ro-val { font-size:var(--b2bl-text-base);color:var(--b2bl-text);line-height:1.5; }
.offer-ro-panel .doc-list { display:flex;flex-direction:column;gap:8px; }
.offer-ro-panel .ab-doc { display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--b2bl-radius-md);background:#fff;border:1px solid var(--b2bl-border); }
.offer-ro-panel .ab-doc .fi { color:var(--b2bl-danger);font-size:1.25rem;flex:none; }
.offer-ro-panel .ab-doc .doc-meta { min-width:0;flex:1; }
.offer-ro-panel .ab-doc .nm { font-size:var(--b2bl-text-base);font-weight:600;color:var(--b2bl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.offer-ro-panel .ab-doc .fn { font-size:var(--b2bl-text-xs);color:var(--b2bl-text-muted); }
.offer-ro-panel .ab-doc input[type="radio"],.offer-ro-panel .ab-doc input[type="checkbox"] { accent-color:var(--b2bl-primary); }
.ro-check { pointer-events:none;accent-color:var(--b2bl-primary);opacity:0.55; }
.ro-check:checked { opacity:1; }
.offer-ro-panel .doc-empty { font-size:var(--b2bl-text-sm);color:var(--b2bl-text-soft);padding:8px 2px; }
.offer-ro-panel .doc-hd { display:flex;align-items:center;gap:12px;padding:2px 14px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--b2bl-text-muted); }

/* ── Shared overlay / modal / toast (ab- prefix, used by FWF confirm dialogs) */
.ab-overlay { position:fixed;inset:0;z-index:2000;background:rgba(20,30,40,.45);display:grid;place-items:center;padding:24px;animation:abFade .2s cubic-bezier(.4,0,.2,1) both; }
.ab-modal { background:#fff;border-radius:var(--b2bl-radius-xl);box-shadow:0 10px 40px rgba(0,0,0,.15);max-width:460px;width:100%;padding:28px;text-align:center;animation:abPop .3s cubic-bezier(.4,0,.2,1) both; }
.ab-modal .ab-mi { width:60px;height:60px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:1.5rem;background:#fffbec;color:var(--b2bl-warning); }
.ab-modal h3 { margin:0 0 8px;font-size:var(--b2bl-text-xl);font-weight:700; }
.ab-modal p { margin:0 0 22px;color:var(--b2bl-text-muted);font-size:var(--b2bl-text-base);line-height:1.55; }
.ab-modal .ab-acts { display:flex;gap:12px; }
.ab-modal .ab-acts button { flex:1;padding:12px;border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-base);font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all .2s;font-family:inherit; }
.ab-modal .ab-cancel { background:#fff;border-color:var(--b2bl-border-strong);color:var(--b2bl-text-muted); }
.ab-modal .ab-cancel:hover { border-color:var(--b2bl-medium-grey);color:var(--b2bl-text); }
.ab-modal .ab-confirm-btn { background:var(--b2bl-success);color:#fff;border-color:var(--b2bl-success); }
.ab-modal .ab-confirm-btn:hover { background:#0a6e3c; }
@keyframes abFade { from { opacity:0; } to { opacity:1; } }
@keyframes abPop { from { opacity:0;transform:translateY(10px) scale(.98); } to { opacity:1;transform:none; } }
.ab-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:2100;display:flex;align-items:center;gap:10px;padding:13px 20px;background:var(--b2bl-text);color:#fff;border-radius:var(--b2bl-radius-md);box-shadow:0 10px 40px rgba(0,0,0,.15);font-size:var(--b2bl-text-base);font-weight:500;white-space:nowrap;animation:abToastIn .3s cubic-bezier(.4,0,.2,1) both; }
.ab-toast i { color:#5fd699; }
@keyframes abToastIn { from { opacity:0;transform:translate(-50%,12px); } to { opacity:1;transform:translate(-50%,0); } }

/* ── AI Mode theme tokens (light default + dark override). Scoped to .aimode-*
   only -- the rest of the site has no dark design yet, so these must not leak
   into shared --b2bl-* tokens. Toggled via [data-theme] on <html>, set by
   menu.html's theme toggle (localStorage "b2bl-theme"). ── */
:root {
  /* Canvas vs. surface: the wireframe keeps these distinct (var(--b2bl-bg), a light
     grey, behind var(--b2bl-bg-elevated) white cards/sidebar/cart panel) -- dark
     theme below already does this (#16191c vs #1d2124); light theme previously set
     both to #ffffff, flattening the middle column into the same white as the
     sidebar/cart panel it's meant to sit visually behind. */
  --aimode-bg:            var(--b2bl-bg-muted, #f8f9fa);
  --aimode-bg-sidebar:    #ffffff;
  --aimode-bg-elevated:   #ffffff;
  --aimode-bg-hover:      var(--b2bl-bg-muted, #f8f9fa);
  --aimode-border:        var(--b2bl-border, #e9ecef);
  --aimode-border-strong: var(--b2bl-border-strong, #dee2e6);
  --aimode-text:          var(--b2bl-text, #2c3e50);
  --aimode-text-muted:    var(--b2bl-text-muted, #6c757d);
  --aimode-text-soft:     var(--b2bl-text-soft, #adb5bd);
  --aimode-shadow:        rgba(0,0,0,.06);
  --aimode-shadow-strong: rgba(0,0,0,.09);
  --aimode-error-bg:      #fdecea;
  --aimode-error-text:    #a12622;
  --aimode-msg-user-bg:   var(--b2bl-info-soft, #e7f5f9);
  --aimode-icon-well-bg:  var(--b2bl-info-soft, #e7f5f9);
  --aimode-warn-border:   #f5e3c0;
  --aimode-warn-bg:       #fffaf0;
  --aimode-warn-icon-bg:  #fdf0d8;
  --aimode-warn-icon:     #c07f06;
  --aimode-warn-badge-bg: #fdf0d8;
  --aimode-warn-badge-text: #96620a;
}
:root[data-theme="dark"] {
  --aimode-bg:            #16191c;
  --aimode-bg-sidebar:    #101315;
  --aimode-bg-elevated:   #1d2124;
  --aimode-bg-hover:      #24292d;
  --aimode-border:        #24292d;
  --aimode-border-strong: #2f363b;
  --aimode-text:          #e8eaed;
  --aimode-text-muted:    #aab3b9;
  --aimode-text-soft:     #6d777e;
  --aimode-shadow:        rgba(0,0,0,.4);
  --aimode-shadow-strong: rgba(0,0,0,.55);
  --aimode-error-bg:      rgba(255,107,107,.12);
  --aimode-error-text:    #ff8787;
  --aimode-msg-user-bg:   #262b2f;
  --aimode-icon-well-bg:  #24292d;
  --aimode-warn-border:   rgba(245,159,0,.35);
  --aimode-warn-bg:       rgba(245,159,0,.08);
  --aimode-warn-icon-bg:  rgba(245,159,0,.16);
  --aimode-warn-icon:     #f0b24a;
  --aimode-warn-badge-bg: rgba(245,159,0,.16);
  --aimode-warn-badge-text: #f0b24a;
}

/* ── AI Mode (D5.2): three-column /chat shell mounted by frontend/src/main.tsx */
.aimode-page-container { height:100%;padding:0 !important; }
.aimode-root { height:100%; }
.aimode-layout { position:relative;display:grid;grid-template-columns:var(--aimode-sidebar-w,260px) 1fr var(--aimode-cart-w,480px);height:100%;background:var(--aimode-bg);transition:grid-template-columns .18s ease; }
.aimode-layout--cart-collapsed { grid-template-columns:var(--aimode-sidebar-w,260px) 1fr 44px; }
/* Column resize: no easing while dragging so the columns track the pointer. */
.aimode-layout--resizing { transition:none;cursor:col-resize;user-select:none; }
.aimode-resize-handle { position:absolute;top:0;bottom:0;width:8px;margin-left:-4px;z-index:20;cursor:col-resize;touch-action:none; }
.aimode-resize-handle::after { content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:transparent;transition:background .12s ease; }
.aimode-resize-handle:hover::after,.aimode-layout--resizing .aimode-resize-handle:active::after { background:var(--org-primary); }
/* Row split between an opened chain item's detail panel and the project list below it
   (App.tsx: embedPage stacked above the project section when both are open). No
   explicit --aimode-embed-row-h yet (never dragged this session) falls back to an
   equal 1fr/1fr split -- same look as before this resizer existed. */
.aimode-layout--embed-stacked { grid-template-rows:var(--aimode-embed-row-h, 1fr) 1fr; }
.aimode-resize-handle--horizontal { left:var(--aimode-sidebar-w,260px);right:0;top:0;bottom:auto;width:auto;height:8px;margin-left:0;margin-top:-4px;cursor:row-resize; }
.aimode-resize-handle--horizontal::after { top:3px;bottom:auto;left:0;right:0;height:2px;width:auto; }
/* grid-row:1/-1 pins the sidebar to full container height regardless of how many
   row tracks .aimode-layout currently has -- without this, the embed-stacked two-row
   split above (row-resize between an opened chain item and the project list) auto-places
   the sidebar into row 1 only, shrinking its rendered height as that handle is dragged.
   The sidebar must never be affected by that resizer, only the middle/cart columns. */
.aimode-sidebar { grid-row:1 / -1;background:var(--aimode-bg-sidebar);border-right:1px solid var(--aimode-border);overflow:hidden;padding:16px 12px;display:flex;flex-direction:column;gap:8px; }

/* Org brand mark, rendered by React at the top of the sidebar's own flow
   (directly above New Chat) -- server-rendered markup (org.logo_template /
   the inline SVG fallback), passed through as trusted HTML via
   bootstrap.org_logo_html since it's org-config-controlled, not user input. */
.aimode-sidebar-brand { display:flex;align-items:center;padding:2px 2px 10px; }
.aimode-sidebar-brand .navbar-logo-full { height:28.6px; }
/* b2blease's inline-SVG logo has two fills scoped by its own embedded
   <style> (org_logo.html): .b2bl-dark (the "b2b" wordmark, near-black) and
   .b2bl-blue (".lease", brand blue). .b2bl-dark reads fine on menu.html's
   always-light navbar but disappears against the sidebar's near-black dark
   background -- swap it to white there. .b2bl-blue is left as-is in both
   themes. Scoped to the sidebar brand mark only, not global, since dark mode
   doesn't currently change any other page's chrome (see menu.html's
   toggleTheme comment). */
:root[data-theme="dark"] .aimode-sidebar-brand .b2bl-dark { fill:#ffffff; }
.aimode-new-thread-btn { display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--aimode-border-strong);background:transparent;color:var(--aimode-text);font-weight:500;font-size:14px;cursor:pointer;text-align:left;margin-bottom:14px; }
.aimode-new-thread-btn i { color:var(--org-primary); }
.aimode-new-thread-btn:hover { background:var(--org-primary);color:#fff; }
.aimode-sidebar-login-btn { margin-top:auto;margin-bottom:0; }

/* Sidebar user menu (bottom, opens upwards) */
.aimode-user-menu { position:relative;flex:none;padding-top:10px;border-top:1px solid var(--aimode-border); }
.aimode-user-menu-trigger { width:100%;display:flex;align-items:center;gap:10px;padding:8px;border:none;border-radius:10px;background:transparent;color:var(--aimode-text);font-size:13px;text-align:left;cursor:pointer; }
.aimode-user-menu-trigger:hover { background:var(--aimode-bg-hover); }
.aimode-user-menu-trigger > i { flex:none;font-size:11px;color:var(--aimode-text-muted); }
.aimode-user-menu-avatar { flex:none;width:28px;height:28px;border-radius:50%;background:var(--org-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600; }
.aimode-user-menu-label { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500; }
.aimode-user-menu-popup { position:absolute;left:0;right:0;bottom:calc(100% - 2px);margin-bottom:8px;padding:6px;border:1px solid var(--aimode-border-strong);border-radius:12px;background:var(--aimode-bg-elevated);box-shadow:0 8px 28px var(--aimode-shadow-strong);z-index:20; }
.aimode-user-menu-header { padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--aimode-border);font-size:12px;color:var(--aimode-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-user-menu-item { width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:var(--aimode-text);font-size:13px;text-align:left;text-decoration:none;cursor:pointer; }
.aimode-user-menu-item:hover { background:var(--aimode-bg-hover);color:var(--aimode-text); }
.aimode-user-menu-item i { flex:none;width:16px;color:var(--aimode-text-muted); }
:root[data-theme="dark"] .aimode-user-menu-popup { background:#2a3036;border-color:#465058;box-shadow:0 -6px 28px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04); }
:root[data-theme="dark"] .aimode-user-menu-header { border-bottom-color:#465058;color:#c3cbd0; }
:root[data-theme="dark"] .aimode-user-menu-item:hover { background:#38414a; }
:root[data-theme="dark"] .aimode-user-menu-trigger[aria-expanded="true"] { background:#24292d; }

/* Embedded classic page: replaces the chat and cart columns, which stay mounted (hidden) so chat state survives */
.aimode-layout--embed > .aimode-thread, .aimode-layout--embed > .aimode-artifact-panel { display:none; }
.aimode-embed-panel { grid-column:2 / -1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--aimode-bg); }
.aimode-embed-header { flex:none;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--aimode-border-strong);background:var(--aimode-bg-elevated); }
.aimode-embed-title { font-size:15px;font-weight:600;color:var(--aimode-text); }
.aimode-embed-close { width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:var(--aimode-text-muted);cursor:pointer; }
.aimode-embed-close:hover { background:var(--aimode-bg-hover);color:var(--aimode-text); }
.aimode-embed-frame { flex:1;min-height:0;width:100%;border:0;background:var(--aimode-bg); }

/* An open project: replaces the chat column only (not the cart column, unlike the plain
   classic-page embed above) -- ProjectCart takes over the cart column instead of the
   normal per-thread cart, so the normal chat/artifact-panel are hidden the same way, but
   the classic-page embed panel (if also open, stacked on top -- App.tsx's embedStacked)
   is confined to the middle column rather than spanning into the cart column too. */
.aimode-layout--project > .aimode-thread, .aimode-layout--project > .aimode-artifact-panel { display:none; }
.aimode-layout--project .aimode-embed-panel { grid-column:2; }
/* position:relative is required, not decorative -- .aimode-embed-loading (the
   loading spinner shown while projectDetailLoading, see App.tsx) is position:absolute
   and without a positioned ancestor here it escapes all the way up to .aimode-layout
   (position:relative, the whole page grid), covering the sidebar too instead of just
   this panel -- same fix .aimode-embed-panel already has, further down this file. */
.aimode-project-panel { position:relative;grid-column:2;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--aimode-bg); }

/* Project detail view: reuses .aimode-embed-header (see App.tsx's render block) for its
   chrome, with its own body -- a scrollable list of thread->request->offer(/Vertrag)
   chain rows instead of an <iframe>. */
.aimode-project-detail { flex:1;min-height:0;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px; }
.aimode-project-detail-description-card { border:1px solid var(--aimode-border-strong);border-radius:var(--b2bl-radius-sm);background:var(--aimode-bg-elevated);padding:12px 16px; }
.aimode-project-detail-description-title { margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft); }
.aimode-project-detail-description { margin:0;font-size:var(--b2bl-text-sm);color:var(--aimode-text-muted);white-space:pre-wrap; }

/* Dual progress bars below the chain grid -- value share (net total) on top, item-count
   share below, same fixed financed/financeable/outstanding color scheme both times.
   Styled after the workbench's .wb-tasks__bar (a slim rounded track), just three
   segments instead of one fill. */
.aimode-project-progress { display:flex;flex-direction:column;gap:10px; }
.aimode-project-progress-title { margin:0;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft); }
.aimode-project-progress-row { display:flex;align-items:center;gap:10px; }
.aimode-project-progress-bar { flex:1;display:flex;height:14px;border-radius:6px;overflow:hidden;background:var(--b2bl-border); }
.aimode-project-progress-seg { height:100%; }
.aimode-project-progress-seg--financed { background:var(--org-primary); }
.aimode-project-progress-seg--financeable { background:#E0A458; }
.aimode-project-progress-seg--outstanding { background:#8D5C5C; }
/* Undecided -- items still sitting in a chat, not yet submitted as a request. */
.aimode-project-progress-seg--in_chat { background:#b5b8bf; }
/* Fixed width (not flex:none sized to content) so both rows' .aimode-project-progress-bar
   -- flex:1 in the same row -- end up the same rendered length: without this, the two
   rows' differently-long label text ("62% finanziert von 12.345,00 EUR" vs "3 von 5
   Artikeln finanziert") would each eat a different amount of the row's remaining space,
   making the bars visibly different lengths even though both are flex:1. */
.aimode-project-progress-label { flex:none;width:230px;text-align:right;font-size:13.5px;font-weight:600;color:var(--aimode-text-muted);font-variant-numeric:tabular-nums; }

/* Cash-Flow Simulation -- ProjectDetail.tsx:CashflowSimulation, below the two progress
   bars. One table per bucket, same financed/financeable/outstanding/in_chat grouping
   and blue/yellow/red/grey coloring as ProjectCart.tsx's card frames, here drawn as a
   table grid frame instead of per-item borders. */
.aimode-cashflow { display:flex;flex-direction:column;gap:16px;margin-top:4px; }
.aimode-cashflow-section-title { margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft); }
.aimode-cashflow-table { width:100%;border-collapse:collapse;font-size:12.5px; }
.aimode-cashflow-table th { text-align:left;padding:6px 10px;font-size:11px;font-weight:600;color:var(--aimode-text-muted);background:var(--aimode-bg-elevated);border-bottom:1px solid var(--aimode-border-strong); }
.aimode-cashflow-table td { padding:6px 10px;border-bottom:1px solid var(--aimode-border);color:var(--aimode-text); }
.aimode-cashflow-table tr:last-child td { border-bottom:none; }
.aimode-cashflow-cell-title { font-weight:500; }
.aimode-cashflow-date-input { font:inherit;padding:3px 6px;border:1px solid var(--aimode-border-strong);border-radius:6px;background:var(--aimode-bg-elevated);color:var(--aimode-text); }
/* outstanding/in_chat: no LC-confirmed offer yet, rate/duration come from the
   estimated-rate engine instead of a real offer (see types.ts:AiModeCashflowRow) --
   muted/italic so the whole row reads as unconfirmed, on top of the per-figure
   asterisk (.aimode-cashflow-estimated-mark) on the specific estimated cells. */
.aimode-cashflow-row--estimated td { font-style:italic;color:var(--aimode-text-muted); }
.aimode-cashflow-estimated-mark { margin-left:1px;font-style:normal; }
.aimode-cashflow-legend { margin:0;font-size:11px;color:var(--aimode-text-soft); }
.aimode-cashflow-section--financed .aimode-cashflow-table { border:1px solid var(--org-primary); }
.aimode-cashflow-section--financeable .aimode-cashflow-table { border:1px solid #E0A458; }
.aimode-cashflow-section--outstanding .aimode-cashflow-table { border:1px solid #8D5C5C; }
.aimode-cashflow-section--in_chat .aimode-cashflow-table { border:1px solid #b5b8bf; }

/* Monthly Projection chart -- ProjectDetail.tsx:MonthlyProjectionChart, a plain SVG
   stacked bar chart (no charting library in this project) below the cash-flow tables.
   Recalculated client-side on every start-date edit in any table above (see
   CashflowSimulation's lifted overrides state), so it always reflects the tables'
   current start dates, never just the server's defaults. */
.aimode-cashflow-chart-wrap { display:flex;flex-direction:column;gap:8px;margin-top:4px; }
.aimode-cashflow-chart-caption { margin:0;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft); }
.aimode-cashflow-chart { max-width:100%;overflow-x:auto; }
.aimode-cashflow-chart-gridline { stroke:var(--aimode-border);stroke-width:1; }
.aimode-cashflow-chart-axis-label { font-size:9px;fill:var(--aimode-text-muted); }
.aimode-cashflow-chart-axis-unit { font-size:9px;font-weight:600;fill:var(--aimode-text-soft); }
.aimode-cashflow-chart-legend { display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--aimode-text-muted); }
.aimode-cashflow-chart-legend-item { display:inline-flex;align-items:center;gap:6px; }
.aimode-cashflow-chart-legend-swatch { width:11px;height:11px;border-radius:3px;display:inline-block; }

/* ProjectCart.tsx -- project-specific cart panel (right column while a project is
   open). Display-only, no edit/delete/drag affordances anywhere in here. Item rows
   reuse App.tsx's .aimode-cart-item* markup (see ProjectCart.tsx's import of
   CartItemMedia/sourceLabel/LeasingBadge) so a cart item looks identical to the
   chat artifact panel's own cart -- only the draggable/edit/delete affordances are
   dropped, via the --readonly modifier below. */
.aimode-project-cart { display:flex;flex-direction:column;gap:20px;overflow-y:auto; }
/* "Statusbericht erstellen" -- a plain button in the middle pane's own title bar
   (.aimode-embed-header), directly left of the shopping-cart toggle button
   (ProjectCart.tsx:StatusReportButton reuses .aimode-embed-back's own look).
   Disabled until CashflowSimulation has computed at least one report payload --
   there's nothing to send before that first render pass runs. */
.aimode-status-report-btn:disabled { opacity:.5;cursor:default; }
.aimode-status-report-btn:disabled:hover { background:transparent; }
.aimode-project-cart-section-title { margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft); }
.aimode-project-cart-group { margin-bottom:1px; }
.aimode-project-cart-group-title { font-size:12px;font-weight:600;color:var(--aimode-text-muted);margin-bottom:2px; }
/* Overrides the chat panel's .aimode-cart-items edge-to-edge negative margin (sized
   for that panel's own 16px side padding) back to a plain block list here, since
   ProjectCart.tsx's items sit nested inside a group, not flush against the
   project-cart panel's own edges; also drops the drag cursor -- these rows aren't
   draggable. Tighter gap/padding than the chat panel's own cart list -- this is a
   dense read-only summary, not an editable list, so it doesn't need as much
   breathing room per row. */
.aimode-cart-items--readonly { margin:0;padding:0;overflow-y:visible;flex:none;background:transparent;gap:1px; }
.aimode-cart-items--readonly .aimode-cart-item { cursor:default;padding:3px 6px;box-shadow:none; }
.aimode-cart-items--readonly .aimode-cart-item-media { width:36px;height:36px;border-radius:6px; }
.aimode-cart-items--readonly .aimode-cart-item-body { gap:1px; }
/* Per-bucket colored card frame instead of the leasing-score green/yellow --
   bucketKey is which of the four sections the item belongs to (financed/
   financeable/outstanding/in_chat), not the item's own leasing-score status,
   so the frame communicates "where is this in the financing flow", and the
   badge below is neutralized so it doesn't also compete with its own color. */
.aimode-project-cart-section--financed .aimode-cart-item { border-color:var(--org-primary); }
.aimode-project-cart-section--financeable .aimode-cart-item { border-color:#E0A458; }
.aimode-project-cart-section--outstanding .aimode-cart-item { border-color:#8D5C5C; }
.aimode-project-cart-section--in_chat .aimode-cart-item { border-color:#b5b8bf; }
.aimode-project-cart .aimode-leasing-badge--ok,
.aimode-project-cart .aimode-leasing-badge--unverified { background:var(--aimode-bg-hover);color:var(--aimode-text-muted); }
/* Smaller counterpart to .aimode-cart-summary-card -- originally a plain neutral
   card, since superseded by a solid per-bucket color matching that section's own
   card-frame color (.aimode-project-cart-section--* .aimode-cart-item above), so
   the totals line reads as "this section's own summary" at a glance. */
.aimode-project-cart-bucket-totals { display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 10px;border-radius:var(--b2bl-radius-sm);background:var(--aimode-bg-elevated);font-size:12.5px;font-weight:600;color:var(--aimode-text); }
.aimode-project-cart-section--financed .aimode-project-cart-bucket-totals { background:var(--org-primary);color:#fff; }
.aimode-project-cart-section--financeable .aimode-project-cart-bucket-totals { background:#E0A458;color:#fff; }
.aimode-project-cart-section--outstanding .aimode-project-cart-bucket-totals { background:#8D5C5C;color:#fff; }
.aimode-project-cart-section--in_chat .aimode-project-cart-bucket-totals { background:#b5b8bf;color:#fff; }
/* Grand total across all three buckets, at the very end of the panel -- same
   neutral treatment as the per-bucket totals above, just visually anchored last. */
.aimode-project-cart-overall-totals { display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-top:2px solid var(--aimode-border-strong);font-size:13.5px;font-weight:700;color:var(--aimode-text); }

/* 4-column grid: Chat / Anfrage / Angebot / Vertrag headers, one row per chain --
   ProjectDetail.tsx's COLUMNS/CHAIN_FIELD_BY_STAGE decide which of a chain's stages
   lands in which column, dotted lines mark the grid; a small arrow inside each
   filled cell (aimode-chain-cell-main) still shows the flow from the previous
   present stage, per the grid lines. */
.aimode-chain-grid { display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));border-top:1px dotted var(--aimode-border-strong);border-left:1px dotted var(--aimode-border-strong); }
.aimode-chain-header { padding:8px 12px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft);background:var(--aimode-bg-elevated);border-right:1px dotted var(--aimode-border-strong);border-bottom:1px dotted var(--aimode-border-strong); }
.aimode-chain-cell { padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:56px;border-right:1px dotted var(--aimode-border-strong);border-bottom:1px dotted var(--aimode-border-strong); }
.aimode-chain-cell-main { display:flex;align-items:center;gap:8px; }
.aimode-chain-arrow { color:var(--aimode-text-soft);font-size:12px;flex:none; }
.aimode-chain-box { display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--aimode-border-strong);border-radius:var(--b2bl-radius-sm);background:var(--aimode-bg-elevated);color:var(--aimode-text);cursor:pointer;font-size:var(--b2bl-text-sm);max-width:100%;min-width:0; }
.aimode-chain-box:hover { background:var(--aimode-bg-hover);border-color:var(--org-primary); }
.aimode-chain-box i { flex:none;color:var(--org-primary); }
.aimode-chain-box-title { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-chain-box--contract i { color:var(--b2bl-success,#2e8b57); }
/* Muted red (same token as .aimode-offer-status--declined/--rejected) rather than the
   full-strength danger red -- these are just "other offers", not an error state. */
.aimode-chain-more-badge { flex:none;width:24px;height:24px;border-radius:999px;border:none;background:#c27a7a;color:#fff;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.aimode-chain-more-badge:hover { filter:brightness(1.1); }
.aimode-chain-more-offers { display:flex;flex-direction:column;gap:6px; }
.aimode-chain-more-offers .aimode-chain-box i { color:#c27a7a; }
/* "Zugeordnete Vorgänge" section header, above the chain grid -- same pencil-toggle
   pattern as elsewhere (.aimode-cart-item-action), just active-state highlighted while
   the red remove-x buttons below are showing. */
.aimode-project-detail-section-header { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.aimode-project-detail-section-title { margin:0;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft); }
.aimode-cart-item-action--active { background:var(--aimode-bg-hover);color:var(--org-primary); }
/* Wraps a chain box so its edit-mode remove-x can be absolutely positioned at the
   corner without affecting the box's own layout/width. */
.aimode-chain-box-wrap { position:relative;display:inline-flex;max-width:100%;min-width:0; }
.aimode-chain-box-remove {
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:999px;
  border:1px solid #fff;background:var(--b2bl-danger,#c0392b);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;
  padding:0;line-height:1;
}
.aimode-chain-box-remove:hover { filter:brightness(1.1); }
.aimode-thread-list-items { display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto; }
.aimode-thread-list { display:flex;flex-direction:column;flex:1;min-height:0;gap:8px; }
.aimode-thread-list-group-label { padding:14px 10px 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aimode-text-soft); }
.aimode-thread-list-item { border-radius:var(--b2bl-radius-sm);display:flex;align-items:center;gap:2px; }
.aimode-moving-cart-item .aimode-thread-list-item:not(.aimode-thread-list-item--current), .aimode-thread-list-item--move-mode { outline:1px dashed var(--org-primary);outline-offset:-1px;background:rgba(74,157,189,.08); }
.aimode-thread-list-item--drop-target { outline:3px solid var(--org-primary) !important;outline-offset:-3px;background:rgba(74,157,189,.40) !important;box-shadow:0 0 0 3px rgba(74,157,189,.35),inset 0 0 0 1px var(--org-primary) !important;position:relative;z-index:1; }
.aimode-thread-list-item--drop-target .aimode-thread-list-item-trigger { color:var(--aimode-text);font-weight:600; }
/* Currently open thread: bold title so it stands out in the sidebar list. */
.aimode-thread-list-item.aimode-thread-list-item--current .aimode-thread-list-item-trigger { font-weight:700;background:rgba(74,157,189,.10); }
.aimode-thread-list-item-trigger { display:block;flex:1;min-width:0;padding:10px 12px;border:none;background:transparent;text-align:left;border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-sm);color:var(--aimode-text);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-thread-list-item-trigger:hover,.aimode-thread-list-item-trigger[data-active] { background:var(--aimode-bg-hover); }
/* Actions stay hidden until hover/focus (ChatGPT-style) rather than
   permanently visible like the cart item ones -- the thread list is dense
   and always visible in the sidebar, so permanent icons would be noisy. */
.aimode-thread-list-item-actions { position:relative;display:flex;gap:2px;flex:none;padding-right:6px;opacity:0;transition:opacity .12s ease; }
/* Keep the row's actions (and its open dropdown) visible while the menu is
   open, even though the pointer has moved off the row into the popover. */
.aimode-thread-list-item-actions:has(.aimode-thread-list-item-menu) { opacity:1; }
.aimode-thread-list-item:hover .aimode-thread-list-item-actions,
.aimode-thread-list-item:focus-within .aimode-thread-list-item-actions { opacity:1; }
.aimode-thread-list-item-rename-input { flex:1;min-width:0;padding:9px 11px;border:1px solid var(--org-primary);border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-sm);color:var(--aimode-text);background:var(--aimode-bg);font-family:inherit; }
/* Chat row's 3-dot dropdown (rename / add to project / delete) -- positioned
   relative to .aimode-thread-list-item-actions (the ref div wrapping the
   trigger button), a plain absolute popover rather than a portal since the
   sidebar list itself doesn't scroll horizontally. */
.aimode-thread-list-item-menu { position:absolute;top:100%;right:6px;z-index:20;min-width:190px;background:var(--aimode-bg-elevated);border:1px solid var(--aimode-border);border-radius:var(--b2bl-radius-sm);box-shadow:0 8px 24px var(--aimode-shadow-strong);padding:6px;display:flex;flex-direction:column;gap:1px; }
.aimode-thread-list-item-menu-item { display:flex;align-items:center;gap:9px;padding:8px 10px;border:none;background:transparent;border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-sm);color:var(--aimode-text);cursor:pointer;text-align:left;font-family:inherit; }
.aimode-thread-list-item-menu-item:hover { background:var(--aimode-bg-hover); }
.aimode-thread-list-item-menu-item i { width:14px;text-align:center;color:var(--aimode-text-soft); }
.aimode-thread-list-item-menu-item--danger { color:var(--b2bl-danger); }
.aimode-thread-list-item-menu-item--danger i { color:var(--b2bl-danger); }
.aimode-submenu-chevron { width:auto !important;margin-left:auto;font-size:11px; }
.aimode-thread { display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--aimode-border); }
.aimode-thread-root { display:flex;flex-direction:column;flex:1;min-height:0;background:var(--aimode-bg); }
/* max-width is a calc, not a fixed px value: the visible left/right gutter here
   is (column_width - max_width)/2, so a flat px number only shrinks the gutter
   by a fixed amount and barely registers on a wide monitor where column_width
   is much bigger than 768px. calc(66.6667% + 256px) solves for the max-width
   that makes that gutter exactly a third of what plain 768px gave, at any
   column width -- not a guessed constant. */
.aimode-thread-viewport { flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:28px;padding:32px 8px 12px;max-width:calc(66.6667% + 256px);margin:0 auto;width:100%; }
.aimode-message { font-size:15px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word; }
/* Values (max-width/border-radius/padding/colors) taken verbatim from
   "AI Chat Mode.dc.html" in AI Chat Mode Wireframes-handoff.zip -- a neutral
   tinted "tail" bubble (sharp bottom-right corner), not a brand-color fill;
   --aimode-msg-user-bg is the wireframe's --b2bl-info-soft (light) /
   #262b2f (dark), see the --aimode-* token blocks above. */
.aimode-message--user { align-self:flex-end;max-width:78%;padding:13px 16px;border-radius:16px 16px 4px 16px;background:var(--aimode-msg-user-bg);color:var(--aimode-text); }
.aimode-message--assistant { align-self:stretch;max-width:100%;color:var(--aimode-text);display:flex;gap:14px; }
/* mark-slot's contents come from org_mark_html (currently always b2blease's
   icon SVG -- see partials/org_mark.html's org.mark_template hook, unused
   for now); this wrapper is what's actually laid out and sized. */
.aimode-message-mark-slot { flex:none;width:26px;height:26px;margin-top:2px; }
.aimode-message-mark-slot svg,
.aimode-message-mark-slot > span { display:block;width:100%;height:100%; }
.aimode-message-mark-slot .aimode-thinking { display:block;width:100%;height:100%;margin:0;vertical-align:baseline; }
.aimode-message-body { flex:1;min-width:0;display:flex;flex-direction:column;gap:14px; }
/* Thinking indicator -- replaces assistant-ui's default trailing " ●" cursor
   (see App.tsx's AiModeMessageText/ThinkingMark) while a text part is running
   and no tokens have arrived yet. Handoff: "AI Chat Mode bb wait logo.zip" ->
   handoff/thinking-indicator.md ("KI denkt nach", Variante 2c) -- a CSS
   mask-image shimmer over the org brand mark rather than a GIF/Lottie, so it
   stays vector-sharp, has true transparency, follows the org's brand color and
   respects prefers-reduced-motion. Both .aimode-thinking-base and .aimode-
   thinking-sweep mask the *same* data URI (set inline, per-org, from
   bootstrap.org_mark_html -- see ThinkingMark) with identical mask-size/
   -position/-repeat, so they shimmer correctly for every org without a
   hardcoded b2blease-only asset, and (crucially) can never drift apart --
   a real inline <svg> and a CSS mask-image scale a viewBox-only SVG via two
   different algorithms, which is what caused the base mark and the sweep to
   misalign when the base layer used to render an actual <svg> instead of a
   second mask. */
.aimode-thinking { position:relative;display:inline-block;width:20px;height:20px;margin-left:.3em;vertical-align:-4px; }
.aimode-thinking-base,
.aimode-thinking-sweep {
  position:absolute;inset:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.aimode-thinking-base { background:var(--org-primary, #3091ab);opacity:.28; }
.aimode-thinking-sweep {
  background:linear-gradient(100deg,
    transparent 30%,
    var(--org-primary, #3091ab) 46%,
    #ffffff 50%,
    var(--org-primary, #3091ab) 54%,
    transparent 70%);
  background-size:260% 100%;
  background-position:140% 0;
  animation:b2bl-thinking-sweep 1.6s ease-in-out infinite;
}
@keyframes b2bl-thinking-sweep {
  0%   { background-position:140% 0; }
  100% { background-position:-40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aimode-thinking-sweep { animation:none;background-position:50% 0; }
}
.aimode-message-error { display:flex;align-items:flex-start;gap:8px;margin-top:6px;border:1px solid var(--aimode-error-text);padding:8px 12px;border-radius:var(--b2bl-radius-sm);background:var(--aimode-error-bg);color:var(--aimode-error-text);font-size:var(--b2bl-text-sm);line-height:1.4; }
.aimode-message-error-icon { flex:none;margin-top:2px;font-size:1.05em;color:var(--aimode-error-text); }
.aimode-progress-indicator { margin-top:6px;color:var(--aimode-text-muted);font-size:var(--b2bl-text-sm);font-style:italic; }
/* D5.4/D5.5: suggestion pills -- shared look, two placements (empty-state block, post-message chips) */
.aimode-suggestion-chip { padding:8px 14px;border-radius:999px;border:1.5px solid var(--org-primary);background:var(--aimode-bg-elevated);color:var(--org-primary);font-size:var(--b2bl-text-sm);font-weight:500;cursor:pointer;white-space:nowrap; }
.aimode-suggestion-chip:hover { background:var(--org-primary);color:#fff; }
/* Styled per the wireframe handoff's "Neuer Chat -- Leerzustand" spec (org
   mark, tagline, description, then the suggestion chips below). */
.aimode-empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;align-self:center;max-width:640px;margin:auto;padding:24px;text-align:center; }
.aimode-empty-state-logo img,.aimode-empty-state-logo svg { height:51px;width:auto; } /* 34px * 1.5, per explicit request */
:root[data-theme="dark"] .aimode-empty-state-logo .b2bl-dark { fill:#ffffff; }
.aimode-empty-state-tagline { font-size:30px;font-weight:300;color:var(--aimode-text); }
.aimode-empty-state-tagline-strong { font-weight:600; }
.aimode-empty-state-tagline-accent { color:var(--org-primary); }
.aimode-empty-state-description { margin:0;font-size:17px;color:var(--aimode-text-muted);max-width:500px;line-height:1.55; }
.aimode-empty-state-chips { display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:640px; }
.aimode-empty-state-chips .aimode-suggestion-chip { font-size:15px;padding:9px 16px; }
.aimode-suggestions { align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;max-width:80%; }
.aimode-login-prompt-btn { display:inline-flex;width:auto;margin-top:10px;margin-bottom:0; }
.aimode-composer-footer { position:sticky;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0,var(--aimode-bg) 24px);padding:12px 8px 20px;max-width:calc(66.6667% + 256px);margin:0 auto;width:100%; }
.aimode-composer-row { display:flex;align-items:stretch;gap:12px; }
.aimode-composer-row > .aimode-composer { flex:1 1 0;min-width:0; }
.aimode-photo-pair { position:relative;flex:0 0 calc(25% - 12px);min-width:140px;max-width:200px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1.5px solid var(--aimode-border-strong);border-radius:20px;background:var(--aimode-bg-elevated);box-shadow:0 2px 10px var(--aimode-shadow);color:var(--aimode-text-muted);font-size:var(--b2bl-text-sm);text-align:center; }
.aimode-photo-pair img { width:100%;height:auto;border-radius:8px;background:#fff; }
.aimode-photo-pair-close { position:absolute;top:4px;right:8px;border:none;background:none;color:var(--aimode-text-muted);cursor:pointer;font-size:16px;line-height:1;padding:0; }
.aimode-photo-pair-close:hover { color:var(--org-primary); }
.aimode-composer { position:relative;display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--aimode-border-strong);border-radius:20px;padding:14px 14px 10px;background:var(--aimode-bg-elevated);box-shadow:0 2px 10px var(--aimode-shadow); }
.aimode-composer:focus-within { border-color:var(--org-primary);box-shadow:0 2px 12px var(--aimode-shadow-strong); }
.aimode-composer-input { width:100%;border:none;outline:none;resize:none;font-family:inherit;font-size:var(--b2bl-text-base);overflow-y:auto;background:transparent;color:var(--aimode-text); }
.aimode-composer-toolbar { display:flex;align-items:center;gap:4px; }
.aimode-composer-spacer { flex:1; }
.aimode-composer-classic-link { border:none;background:none;padding:0 8px;color:var(--aimode-text-muted);opacity:0.6;font-size:0.75rem;cursor:pointer; }
.aimode-composer-classic-link:hover { color:var(--org-primary);opacity:1;text-decoration:underline; }
.aimode-composer-send { display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--b2bl-radius-sm);border:none;background:var(--b2bl-gradient-primary, var(--org-primary));color:#fff;font-weight:600;cursor:pointer; }
.aimode-composer-send:disabled { opacity:.5;cursor:not-allowed; }
/* Drag-and-drop file target: thicker dashed border + soft blue tint, per spec. */
.aimode-composer--drag-over { border:3px dashed #3b82f6;background:rgba(59,130,246,.08); }
.aimode-composer-drop-overlay { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:18px;background:rgba(59,130,246,.06);color:#3b82f6;font-weight:600;font-size:var(--b2bl-text-base);pointer-events:none;z-index:1; }
.aimode-composer-drop-overlay i { font-size:28px; }
/* D5.6: composer toolbar icon buttons + pending-attachment chip */
.aimode-attachment-input { display:none; }
.aimode-toolbar-btn { width:34px;height:34px;flex:0 0 auto;border-radius:8px;border:none;background:transparent;color:var(--aimode-text-muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.aimode-toolbar-btn:hover { background:var(--aimode-bg-hover);color:var(--org-primary); }
.aimode-toolbar-btn:disabled { opacity:.5;cursor:not-allowed; }
.aimode-attachment-chip { display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--aimode-bg-hover);color:var(--aimode-text);font-size:var(--b2bl-text-sm);max-width:200px;overflow:hidden; }
.aimode-attachment-chip > span:first-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-attachment-chip-remove { border:none;background:none;color:var(--aimode-text-muted);cursor:pointer;font-size:14px;line-height:1;padding:0; }
.aimode-attachment-chip-remove:hover { color:var(--org-primary); }
.aimode-attachment-error { color:var(--aimode-error-text);font-size:var(--b2bl-text-sm); }
.aimode-artifact-panel { position:relative;border-left:1px solid var(--aimode-border);background:var(--aimode-bg-sidebar);overflow:hidden;padding:20px 16px;display:flex;flex-direction:column; }
.aimode-artifact-panel--collapsed { overflow:hidden;padding:16px 0 0; }
.aimode-artifact-collapse-btn { position:absolute;top:16px;right:10px;width:24px;height:24px;flex:none;border-radius:6px;border:1px solid var(--aimode-border-strong);background:var(--aimode-bg-elevated);color:var(--aimode-text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;padding:0; }
.aimode-artifact-collapse-btn:hover { border-color:var(--org-primary);color:var(--org-primary); }

/* Project cart panel: visually the same chrome as .aimode-artifact-panel (it replaces
   that column while a project is open), but a separate class -- kept implemented
   independently from the normal per-thread cart per explicit instruction, and so the
   .aimode-layout--embed/--project hide rules (which target .aimode-artifact-panel by
   class) never accidentally hide this one too. grid-column/row are explicit rather than
   relying on auto-placement, matching the sidebar's own grid-row:1/-1 fix above --
   this panel must stay full height regardless of the embed-stacked row split, which
   only concerns the middle column. */
.aimode-project-cart-panel { grid-column:3;grid-row:1 / -1;position:relative;border-left:1px solid var(--aimode-border);background:var(--aimode-bg-sidebar);overflow:hidden;padding:20px 16px;display:flex;flex-direction:column; }
.aimode-project-cart-panel--collapsed { overflow:hidden;padding:16px 0 0; }
/* Styled per the wireframe handoff's "Warenkorb-Leiste -- leer" spec, minus
   its "Oder Datei hierher ziehen" dropzone (explicitly excluded). */
.aimode-artifact-empty { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center; }
.aimode-artifact-empty i { font-size:34px;color:var(--aimode-border-strong); }
.aimode-artifact-empty-title { font-size:14px;font-weight:600;color:var(--aimode-text); }
.aimode-artifact-empty-description { margin:0;font-size:13px;color:var(--aimode-text-muted);line-height:1.55;max-width:280px; }
/* D5.3: cart artifact -- the only implemented ai_mode_artifact.type in V1.
   A flex column filling the panel's height, with .aimode-cart-items as the
   sole scrolling region (flex:1;min-height:0;overflow-y:auto) so the summary
   card/disclaimer/CTA below it always stay in view instead of scrolling off
   with a long item list. */
.aimode-cart-artifact { display:flex;flex-direction:column;flex:1;min-height:0; }
.aimode-cart-artifact-title { flex:none;font-size:var(--b2bl-text-base);font-weight:600;margin:0;color:var(--aimode-text); }
/* Header row hosting the cart title and (only when the cart spans more than
   one currency) the currency display-toggle -- see CartArtifact's
   currencies/activeCurrency state in App.tsx. */
.aimode-cart-header-row { flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px; }
.aimode-cart-header-actions { display:flex;align-items:center;gap:8px;margin-right:26px; }
.aimode-cart-undo-btn { display:inline-flex;align-items:center;gap:5px;border:1px solid var(--aimode-border-strong);background:var(--aimode-bg-elevated);color:var(--aimode-text-muted);font-size:11.5px;font-weight:600;padding:4px 8px;border-radius:6px;cursor:pointer;line-height:1; }
.aimode-cart-undo-btn:hover:not(:disabled) { border-color:var(--org-primary);color:var(--org-primary); }
.aimode-cart-undo-btn:disabled { opacity:.45;cursor:not-allowed; }
.aimode-currency-toggle { display:flex;gap:4px;flex:none; }
.aimode-currency-toggle-btn { border:1px solid var(--aimode-border-strong);background:var(--aimode-bg-elevated);color:var(--aimode-text-muted);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:6px;cursor:pointer;line-height:1; }
.aimode-currency-toggle-btn:hover { border-color:var(--b2bl-primary); }
.aimode-currency-toggle-btn.active { background:var(--b2bl-primary);border-color:var(--b2bl-primary);color:#fff; }
/* Wireframe's cart panel is two-tone: the aside itself (header row above, summary
   card/CTA below) stays on --b2bl-bg-elevated (white), but the scrollable item-list
   band is explicitly var(--b2bl-bg) (grey canvas) -- negative side margins cancel
   .aimode-artifact-panel's 16px side padding so the grey band bleeds edge-to-edge
   like the wireframe's, with its own padding restoring the same visual inset. */
.aimode-cart-items { list-style:none;margin:0 -16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto;background:var(--aimode-bg); }
.aimode-cart-item { display:flex;align-items:flex-start;gap:12px;padding:10px 12px;background:var(--aimode-bg-elevated);border:1px solid var(--aimode-border);border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-sm);box-shadow:0 2px 8px var(--aimode-shadow); }
.aimode-cart-item--move { border-color:var(--org-primary) !important;box-shadow:0 0 0 2px rgba(74,157,189,.28) !important;background:rgba(74,157,189,.10) !important;cursor:grab; }
.aimode-cart-item { cursor:grab; }
/* Insertion line shown in the gap while a card is dragged over the cart list. */
.aimode-cart-item--drop-before { box-shadow:0 -6px 0 -1px var(--org-primary) !important; }
.aimode-cart-item--drop-after { box-shadow:0 6px 0 -1px var(--org-primary) !important; }
.aimode-cart-item:active { cursor:grabbing; }
/* Same pale-amber "look closer at this one" card treatment as .aimode-import-card--warn,
   applied to the persistent cart-panel row -- not just the in-chat card and badge. */
.aimode-cart-item--warn { border-color:var(--aimode-warn-border);background:var(--aimode-warn-bg); }
.aimode-cart-item-media { width:75px;height:75px;flex:none;border-radius:8px;overflow:hidden;background:var(--aimode-bg-hover);display:flex;align-items:center;justify-content:center;position:relative; }
.aimode-cart-item-media img { width:100%;height:100%;object-fit:cover;display:block; }
.aimode-cart-item-media--icon { color:var(--aimode-text-soft);font-size:18px; }
.aimode-cart-item-media--icon.aimode-cart-item-media--warn { background:var(--aimode-warn-icon-bg);color:var(--aimode-warn-icon); }
/* Hover-preview lightbox, portalled to document.body so it isn't clipped by
   the cart panel's own overflow. pointer-events:none throughout so the
   overlay never itself becomes a hover target -- it exists purely as a
   function of the thumbnail's own mouseenter/mouseleave, closing the instant
   the cursor leaves the thumbnail with no dead zone to fall through. */
.aimode-cart-item-preview-overlay { position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:4000;pointer-events:none; }
.aimode-cart-item-preview-image { max-width:85vw;max-height:85vh;object-fit:contain;border-radius:var(--b2bl-radius-sm);box-shadow:0 20px 60px rgba(0,0,0,.5); }
.aimode-cart-item-body { flex:1;min-width:0;display:flex;flex-direction:column;gap:4px; }
.aimode-cart-item-row { display:flex;align-items:baseline;justify-content:space-between;gap:8px; }
.aimode-cart-item-row--sub { font-size:12.5px; }
.aimode-cart-item-title { font-weight:500;color:var(--aimode-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-cart-item-qty { color:var(--aimode-text-muted);flex:none; }
/* Wraps the (optional) original-currency badge + the displayed amount so both
   sit on one baseline at the right of the sub-row, same as the plain amount
   used to before multi-currency support existed. */
.aimode-cart-item-price-group { display:flex;align-items:baseline;gap:6px;flex:none; }
.aimode-cart-item-price { color:var(--aimode-text);flex:none; }
.aimode-cart-item-original-currency { flex:none;color:var(--aimode-text); }
.aimode-cart-item-source { color:var(--aimode-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-cart-item-tags { display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:2px; }

/* Category pill + leasing-score badge -- shared between the cart panel
   (.aimode-cart-item-tags) and the in-chat import cards below. Colors match
   the wireframe's rgba(15,132,72,.18)/#4ad294 (ok) and rgba(245,159,0,.16)/
   #f0b24a (unverified) treatment via the b2bl success/warning tokens. */
.aimode-tag { display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;background:var(--aimode-bg-hover);color:var(--aimode-text-muted);font-size:11.5px;font-weight:600; }
.aimode-leasing-badge { display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;font-size:11.5px;font-weight:600; }
.aimode-leasing-badge--ok { background:var(--b2bl-success-soft, rgba(15,132,72,.18));color:var(--b2bl-success, #0f8448); }
.aimode-leasing-badge--unverified { background:var(--aimode-warn-badge-bg);color:var(--aimode-warn-badge-text); }

/* In-chat imported-item cards -- rendered under the last assistant message
   (see ImportedItemsCard in App.tsx), matching the wireframe's chat-bubble
   item rows 1:1: 40px source icon/thumbnail, title/source stack, badge right. */
.aimode-import-cards { display:flex;flex-direction:column;gap:8px; }
.aimode-import-card { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--aimode-text-soft);border-radius:12px;background:var(--aimode-bg-elevated);box-shadow:0 2px 8px var(--aimode-shadow); }
/* Contrast runs opposite directions per theme: on the light bg, a darker-than-border
   grey (text-soft) reads as more visible; on the dark bg, that same relatively dark
   grey barely lifts off the background, so the dark theme needs a lighter tone instead
   (text-muted) to actually gain visibility rather than losing it. */
:root[data-theme="dark"] .aimode-import-card { border-color: var(--aimode-text-muted); }
/* Same pale-amber "look closer at this one" card treatment as .aimode-cart-item--warn --
   overrides the border/background above whenever either flag applies (see the warn
   variable definitions in the theme-token block). */
.aimode-import-card--warn { border-color:var(--aimode-warn-border);background:var(--aimode-warn-bg); }
:root[data-theme="dark"] .aimode-import-card--warn { border-color: var(--aimode-warn-border); }
.aimode-import-card-media { width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:var(--aimode-icon-well-bg);display:flex;align-items:center;justify-content:center;color:var(--b2bl-primary);font-size:17px; }
/* Same amber as .aimode-leasing-badge--unverified -- unverified leasing status
   or an item priced in a currency other than the cart's own both flag "look
   closer at this one" the same way. */
.aimode-import-card-media--warn { background:var(--aimode-warn-icon-bg);color:var(--aimode-warn-icon); }
.aimode-import-card-info { flex:1;min-width:0;display:flex;flex-direction:column; }
.aimode-import-card-title { font-size:14px;font-weight:600;color:var(--aimode-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-import-card-source { font-size:12.5px;color:var(--aimode-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-handoff-card { align-items:flex-start; }
.aimode-handoff-card-media { color:var(--b2bl-primary); }
.aimode-handoff-card-request { white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35; }
.aimode-gdpr-card { align-items:center; }
.aimode-gdpr-card-media { color:var(--b2bl-primary); }
.aimode-gdpr-download { flex:none;padding:7px 10px;border:1px solid var(--b2bl-primary);border-radius:7px;color:var(--b2bl-primary);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap; }
.aimode-gdpr-download:hover { background:var(--b2bl-primary);color:#fff;text-decoration:none; }
/* Gradient summary card -- verbatim port of the wireframe's cart-summary sidebar
   (variant 1b): border-radius/padding/gradient/box-shadow all match the mockup's
   inline styles 1:1, using this codebase's --b2bl-primary/--b2bl-primary-hover
   tokens (org-color-driven) in place of the mockup's hardcoded --b2bl-primary refs. */
.aimode-cart-summary-card { flex:none;border-radius:12px;background:linear-gradient(135deg,var(--b2bl-primary) 0%,var(--b2bl-primary-hover) 100%);padding:14px 16px;color:#fff;box-shadow:0 4px 16px rgba(74,157,189,.3);margin-top:14px; }
.aimode-cart-summary-card-row { display:flex;justify-content:space-between;font-size:12.5px;opacity:.85; }
.aimode-cart-summary-card-row--rate { align-items:baseline;margin-top:8px; }
.aimode-cart-summary-card-row--rate span:first-child { font-size:13px;opacity:.9; }
.aimode-cart-summary-card-row--rate span:last-child { font-size:22px;font-weight:700; }
.aimode-cart-rate-disclaimer { flex:none;margin:8px 0 0;font-size:11px;line-height:1.4;color:var(--aimode-text-muted); }
/* Mixed-currency notice -- shown above the "Weiter zur Finanzierungsanfrage"
   CTA whenever CartArtifact's isMixedCurrency is true (App.tsx). Same warning
   palette as .aimode-leasing-badge--unverified's #f0b24a accent, kept as body
   text (not the badge's pill shape) since this is a sentence, not a label. */
.aimode-cart-split-info { flex:none;display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:10px 12px;border-radius:8px;background:rgba(48,145,171,.10);border:1px solid rgba(48,145,171,.30);color:var(--aimode-text);font-size:12px;line-height:1.4; }
.aimode-cart-split-info i { flex:none;margin-top:1px;color:var(--org-primary); }

.aimode-chat-header { flex:none;height:56px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--aimode-border-strong);background:var(--aimode-bg-elevated); }
.aimode-chat-header-title { font-size:15px;font-weight:600;color:var(--aimode-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.aimode-chat-header-badge { display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--aimode-border-strong);border-radius:6px;font-size:12px;color:var(--aimode-text-muted);flex:none; }
.aimode-chat-header-badge i { color:var(--b2bl-primary); }
.aimode-chat-header-spacer { flex:1; }
.aimode-chat-header-theme-btn { width:36px;height:36px;flex:none;border-radius:10px;border:1px solid var(--aimode-border-strong);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--aimode-text);cursor:pointer; }
.aimode-chat-header-theme-btn:hover { border-color:var(--b2bl-primary);color:var(--b2bl-primary); }
.aimode-chat-header-cart-btn { position:relative;width:36px;height:36px;flex:none;border-radius:10px;border:1px solid var(--aimode-border-strong);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--aimode-text);cursor:pointer;font:inherit; }
.aimode-chat-header-cart-btn:hover { border-color:var(--b2bl-primary);color:var(--b2bl-primary); }
.aimode-chat-header-cart-badge { position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:999px;background:var(--b2bl-primary);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px; }
/* Project cart toggle's pill -- highest-severity-wins color (ProjectCart.tsx:projectCartBadge):
   green when only financed items exist, yellow once financeable items also exist, red
   once outstanding (unoffered) items also exist. */
.aimode-chat-header-cart-badge--green { background:#2e8b57; }
.aimode-chat-header-cart-badge--yellow { background:#E0A458; }
.aimode-chat-header-cart-badge--red { background:#8D5C5C; }

.aimode-cart-updated-chip { display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--aimode-border);border-radius:8px;background:var(--aimode-bg-elevated);font-size:13px;color:var(--aimode-text-muted);font:inherit;cursor:pointer;box-shadow:0 2px 8px var(--aimode-shadow); }
.aimode-cart-updated-chip:hover { border-color:var(--b2bl-primary); }
.aimode-cart-updated-chip i { color:var(--b2bl-primary); }

.aimode-cart-cta { flex:none;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--b2bl-radius-sm);border:1.5px solid var(--b2bl-primary);background:var(--aimode-bg-elevated);font-size:14px;font-weight:600;color:var(--aimode-text);cursor:pointer;width:100%; }
.aimode-cart-cta i { color:var(--b2bl-primary); }
.aimode-cart-cta:hover { border-color:var(--b2bl-primary); }
.aimode-cart-locked-note { flex:none;display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;padding:10px 12px;border-radius:8px;background:rgba(128,128,128,.10);border:1px solid rgba(128,128,128,.25);color:var(--aimode-text-muted, #888);font-size:12px;line-height:1.4; }
.aimode-cart-locked-note i { flex:none;margin-top:1px; }
@media (max-width:991px) { .aimode-resize-handle { display:none; } .aimode-layout { grid-template-columns:1fr;grid-template-rows:auto 1fr; } .aimode-sidebar { flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--b2bl-border); } .aimode-artifact-panel { display:none; } }

/* ── D-edit/D-delete: per-item action icons + their two modals. Reuses the
   .ab-overlay/.ab-modal pattern's abFade/abPop keyframes (see above) but every
   surface color comes from the --aimode-* token set so light/dark both work. ── */
.aimode-cart-item-tags-spacer { flex:1; }
.aimode-cart-item-action { width:24px;height:24px;flex:none;border:none;border-radius:6px;background:transparent;color:var(--aimode-text-soft);display:flex;align-items:center;justify-content:center;font-size:12.5px;cursor:pointer; }
.aimode-cart-item-action:hover { background:var(--aimode-bg-hover);color:var(--aimode-text); }
.aimode-cart-item-action--danger:hover { color:var(--b2bl-danger); }

.aimode-modal-overlay { position:fixed;inset:0;z-index:2000;background:rgba(10,16,22,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;animation:abFade .2s cubic-bezier(.4,0,.2,1) both; }
.aimode-modal { background:var(--aimode-bg-elevated);color:var(--aimode-text);border-radius:var(--b2bl-radius-xl);box-shadow:0 10px 40px var(--aimode-shadow-strong);width:100%;animation:abPop .3s cubic-bezier(.4,0,.2,1) both; }
.aimode-modal--confirm { max-width:420px;padding:28px;text-align:center; }
.aimode-modal-confirm-icon { width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:1.4rem;background:var(--aimode-error-bg);color:var(--aimode-error-text); }
.aimode-modal--confirm h3 { margin:0 0 8px;font-size:var(--b2bl-text-xl);font-weight:700; }
.aimode-modal--confirm p { margin:0 0 8px;color:var(--aimode-text-muted);font-size:var(--b2bl-text-base);line-height:1.5; }
.aimode-modal-confirm-actions { display:flex;gap:12px;margin-top:18px; }
.aimode-modal-confirm-actions .aimode-btn { flex:1; }

/* Two-level flex chain, not a percentage height: the modal itself is the flex
   column (max-height clamps it to 88vh once content overflows) and the <form>
   -- its only real child, wrapping header/body/footer -- is a flex:1 item so it
   fills exactly that clamped height. `form { height:100% }` doesn't work here
   since percentage heights only resolve against an ancestor with an explicit
   (non-auto) height, and .aimode-modal--edit only ever has max-height. */
.aimode-modal--edit { max-width:1180px;max-height:88vh;min-height:0;overflow:hidden;display:flex;flex-direction:column; }
.aimode-modal--edit form { display:flex;flex-direction:column;flex:1;min-height:0; }
.aimode-modal-header { flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--aimode-border); }
.aimode-modal-title { display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600; }
.aimode-modal-title i { color:var(--b2bl-primary); }
.aimode-modal-close { border:none;background:transparent;color:var(--aimode-text-muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px; }
.aimode-modal-close:hover { color:var(--aimode-text); }
.aimode-modal-body { flex:1;min-height:0;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:18px;text-align:left; }
.aimode-modal-footer { flex:none;display:flex;justify-content:flex-end;gap:12px;padding:16px 22px;border-top:1px solid var(--aimode-border); }

/* Mirrors the classic CartItemEditView form's two-column layout (product/seller/
   contact fields left, image + price right) -- collapses to one column under
   720px since the modal itself can shrink below a comfortable two-column width
   on narrow viewports. */
/* True grid (not a pair of independent flex columns) so row 2 (Verkäufer /
   Preis) shares one row track and starts at the same line regardless of how
   tall row 1 (Produkt / Bilder) ends up on either side. */
.aimode-modal-columns {
  display:grid;
  grid-template-columns:3fr 2fr;
  grid-template-areas:
    "produkt    bilder"
    "verkaeufer preis"
    "kontakt    ."
    "technisch  .";
  gap:18px 24px;
  align-items:start;
}
.aimode-modal-columns > .aimode-form-group { min-width:0; }
.aimode-cell-produkt    { grid-area:produkt; }
.aimode-cell-verkaeufer { grid-area:verkaeufer; }
.aimode-cell-kontakt    { grid-area:kontakt; }
.aimode-cell-technisch  { grid-area:technisch; }
.aimode-cell-bilder     { grid-area:bilder; }
.aimode-cell-preis      { grid-area:preis; }
@media (max-width:720px) {
  .aimode-modal-columns {
    grid-template-columns:1fr;
    grid-template-areas:
      "produkt"
      "verkaeufer"
      "kontakt"
      "technisch"
      "bilder"
      "preis";
  }
}

.aimode-form-group-label { display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--aimode-text-muted);margin-bottom:10px; }
.aimode-form-group-label i { color:var(--b2bl-primary);width:13px;text-align:center; }
.aimode-form-row { display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px; }
.aimode-form-row:last-child { margin-bottom:0; }
.aimode-field { display:flex;flex-direction:column;gap:5px;flex:1 1 140px;min-width:0;font-size:12.5px;color:var(--aimode-text-muted); }
.aimode-field--grow { flex-grow:2;flex-basis:220px; }
.aimode-field input,.aimode-field select,.aimode-field textarea { font-family:inherit;font-size:var(--b2bl-text-sm);color:var(--aimode-text);background:var(--aimode-bg);border:1.5px solid var(--aimode-border-strong);border-radius:var(--b2bl-radius-sm);padding:8px 10px;resize:vertical; }
.aimode-field input:focus,.aimode-field select:focus,.aimode-field textarea:focus { outline:none;border-color:var(--b2bl-primary); }

.aimode-tech-data-list { display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:var(--b2bl-text-sm); }
.aimode-tech-data-list dt { color:var(--aimode-text-muted);font-weight:500; }
.aimode-tech-data-list dd { margin:0;color:var(--aimode-text); }
.aimode-tech-data-empty { margin:0;color:var(--aimode-text-muted);font-size:var(--b2bl-text-sm);font-style:italic; }

/* Native React reimplementation of utils/misc.py:get_picture_carousel()'s
   Bootstrap-JS carousel + "Dieses Bild als Hauptbild verwenden" radio -- same
   concept (prev/next, dot indicators shown only when >1 image, a control to
   pick the main image), but driven by React state instead of Bootstrap's JS
   plugin since AI Mode's stack has no Bootstrap JS loaded. */
.aimode-carousel { display:flex;flex-direction:column;gap:10px; }
.aimode-carousel-viewport { position:relative;border-radius:var(--b2bl-radius-sm);overflow:hidden;background:var(--aimode-bg);border:1px solid var(--aimode-border); }
.aimode-carousel-image { display:block;width:100%;height:220px;object-fit:contain;background:var(--aimode-bg); }
.aimode-carousel-nav { position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:var(--aimode-shadow-strong);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.aimode-carousel-nav--prev { left:8px; }
.aimode-carousel-nav--next { right:8px; }
.aimode-carousel-dots { display:flex;justify-content:center;gap:6px; }
.aimode-carousel-dot { width:8px;height:8px;padding:0;border-radius:50%;border:none;background:var(--aimode-border-strong);cursor:pointer; }
.aimode-carousel-dot--active { background:var(--b2bl-primary); }
.aimode-carousel-mainpick { display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--aimode-text-muted);cursor:pointer; }
.aimode-carousel-mainpick input:disabled { cursor:default; }

/* Shown in place of the image when there's none to show, or when the one
   there is fails to load (aimode-carousel-image's onError) -- same footprint
   as the real image so the surrounding carousel chrome doesn't jump. */
.aimode-carousel-placeholder { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:220px;color:var(--aimode-text-soft);background:var(--aimode-bg);border-radius:var(--b2bl-radius-sm); }
.aimode-carousel-placeholder i { font-size:32px; }
.aimode-carousel-placeholder span { font-size:12.5px; }

.aimode-price-box { display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--b2bl-radius-sm);background:var(--aimode-bg);border:1px solid var(--aimode-border); }
/* .aimode-field's flex:1 1 140px is meant for horizontal growth inside a
   .aimode-form-row; the standalone Menge field is a direct child of this
   column-direction container instead, where flex-grow instead pulls it
   downward and pushes Zwischensumme away -- pin it to content height. */
.aimode-price-box > .aimode-field { flex:0 0 auto; }
.aimode-price-box-total { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding-top:10px;border-top:1px solid var(--aimode-border); }
.aimode-price-box-total dt { font-size:11.5px;color:var(--aimode-text-muted); }
.aimode-price-box-total dd { margin:0;font-size:15px;font-weight:700;color:var(--aimode-text); }

.aimode-modal-error { margin:0;padding:9px 12px;border-radius:var(--b2bl-radius-sm);background:var(--aimode-error-bg);color:var(--aimode-error-text);font-size:var(--b2bl-text-sm); }

/* Projekte feature: "assign to project" flyout menu (AssignToProject.tsx).
   Anchored to the trigger via inline top/left (position:fixed so it isn't
   clipped by the sidebar's own overflow:auto, and can overlay the middle
   pane when it opens to the right of a narrow sidebar row) -- deliberately
   not a modal: no backdrop, no centered overlay, closes on outside click. */
.aimode-assign-menu { position:fixed;z-index:2010;min-width:220px;max-width:280px;max-height:320px;overflow-y:auto;background:var(--aimode-bg-elevated);border:1px solid var(--aimode-border);border-radius:var(--b2bl-radius-sm);box-shadow:0 8px 28px var(--aimode-shadow-strong);padding:6px;display:flex;flex-direction:column;gap:1px; }
.aimode-assign-menu-item { display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;border:none;border-radius:var(--b2bl-radius-sm);background:transparent;color:var(--aimode-text);font-size:var(--b2bl-text-sm);cursor:pointer;font-family:inherit; }
.aimode-assign-menu-item:hover:not(:disabled) { background:var(--aimode-bg-hover); }
.aimode-assign-menu-item:disabled { opacity:.6;cursor:default; }
.aimode-assign-menu-item i { width:14px;text-align:center;color:var(--aimode-text-soft); }
.aimode-assign-menu-separator { height:1px;margin:5px 4px;background:var(--aimode-border); }
.aimode-assign-menu-create-row { display:flex;gap:6px;padding:2px; }
.aimode-assign-menu-create-row input { flex:1;min-width:0;padding:8px 10px;border:1px solid var(--aimode-border-strong);border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-sm);color:var(--aimode-text);background:var(--aimode-bg);font-family:inherit; }
.aimode-assign-menu-create-row button { flex:none;width:32px;border:1.5px solid var(--b2bl-primary);border-radius:var(--b2bl-radius-sm);background:var(--b2bl-primary);color:#fff;cursor:pointer; }
.aimode-assign-menu-create-row button:disabled { opacity:.6;cursor:default; }
.aimode-assign-menu-confirm { display:flex;flex-direction:column;gap:10px;padding:6px;font-size:var(--b2bl-text-sm);color:var(--aimode-text); }
.aimode-assign-menu-confirm p { margin:0; }
.aimode-assign-menu-confirm-actions { display:flex;justify-content:flex-end;gap:8px; }
.aimode-assign-menu-busy { display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:var(--b2bl-text-sm);color:var(--aimode-text-soft); }
.aimode-assign-related-check { display:flex;align-items:center;gap:9px;font-size:var(--b2bl-text-sm);color:var(--aimode-text);cursor:pointer; }

/* Projekte section: "+ Neu" popup (name + description) and the inert project
   row title (no cursor:pointer -- unlike .aimode-thread-list-item-trigger,
   these rows don't do anything yet, per user decision). */
.aimode-modal--newproject { max-width:420px; }
.aimode-modal--newproject input[type="text"],
.aimode-modal--newproject textarea { width:100%;padding:9px 11px;border:1px solid var(--aimode-border-strong);border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-sm);color:var(--aimode-text);background:var(--aimode-bg);font-family:inherit;resize:vertical; }
.aimode-project-row-title { display:block;flex:1;min-width:0;padding:10px 12px;font-size:var(--b2bl-text-sm);color:var(--aimode-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

.aimode-btn { padding:11px 18px;border-radius:var(--b2bl-radius-sm);font-size:var(--b2bl-text-base);font-weight:600;cursor:pointer;border:1.5px solid transparent;font-family:inherit; }
.aimode-btn:disabled { opacity:.6;cursor:default; }
.aimode-btn--ghost { background:transparent;border-color:var(--aimode-border-strong);color:var(--aimode-text-muted); }
.aimode-btn--ghost:hover:not(:disabled) { border-color:var(--aimode-text-soft);color:var(--aimode-text); }
.aimode-btn--primary { background:var(--b2bl-primary);border-color:var(--b2bl-primary);color:#fff; }
.aimode-btn--danger { background:var(--b2bl-danger);border-color:var(--b2bl-danger);color:#fff; }

/* Classic pages shown inside AI Mode's embed frame (ui/embed.py) follow the AI Mode dark theme.
   Baseline only -- extend as further classic pages are embedded. */
:root[data-theme="dark"] body.b2bl-embed { background:#16191c !important;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed h1, :root[data-theme="dark"] body.b2bl-embed h2, :root[data-theme="dark"] body.b2bl-embed h3, :root[data-theme="dark"] body.b2bl-embed label { color:#e8eaed !important; }
:root[data-theme="dark"] body.b2bl-embed .form-control, :root[data-theme="dark"] body.b2bl-embed .form-select { background:#1d2124;border-color:#2f363b;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .prof-card { background:#1d2124 !important;border-color:#2f363b !important; }

/* Embedded classic pages: dark-mode field/tab colours (profile.html hardcodes light values inline) */
:root[data-theme="dark"] body.b2bl-embed .prof-field { background:#1d2124 !important;border-color:#3a434a !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-field.is-locked { background:#181b1e !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-field input,
:root[data-theme="dark"] body.b2bl-embed .prof-field select,
:root[data-theme="dark"] body.b2bl-embed .prof-field textarea { color:#e8eaed !important;background:transparent !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-field.is-locked input,
:root[data-theme="dark"] body.b2bl-embed .prof-field.is-locked select { color:#9aa3ab !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-field select option { background:#1d2124;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .prof-field > label,
:root[data-theme="dark"] body.b2bl-embed .prof-hint { color:#9aa3ab !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-tabs { background:#181b1e !important;border-bottom-color:#2f363b !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-tab { color:#9aa3ab; }
:root[data-theme="dark"] body.b2bl-embed .prof-tab:hover { color:#e8eaed;background:rgba(255,255,255,.06); }
:root[data-theme="dark"] body.b2bl-embed .prof-tab.is-active { background:#1d2124 !important;color:var(--org-primary,#4A9DBD); }
:root[data-theme="dark"] body.b2bl-embed .prof-check-row { background:#232a2f !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-check-row .desc { color:#9aa3ab; }

/* Embedded classic pages: compact action buttons, Cancel as outline */
body.b2bl-embed .prof-btn-save,
body.b2bl-embed .prof-btn-cancel { padding:7px 16px;font-size:.85rem;border-radius:6px;gap:6px; }
body.b2bl-embed .prof-btn-save { box-shadow:none; }
body.b2bl-embed .prof-btn-save:hover { transform:none; }
body.b2bl-embed .prof-btn-cancel { background:transparent !important;color:var(--org-primary,#4A9DBD);border:1.5px solid var(--org-primary,#4A9DBD); }
body.b2bl-embed .prof-btn-cancel:hover { background:color-mix(in srgb, var(--org-primary,#4A9DBD) 12%, transparent) !important; }

/* Embedded profile: Dokumente drop zone, list rows and section rules in dark mode */
:root[data-theme="dark"] body.b2bl-embed #prof-doc-dropzone { background:#1d2124 !important;border-color:#3a434a !important; }
:root[data-theme="dark"] body.b2bl-embed #prof-doc-dropzone:hover { background:#232a2f !important; }
:root[data-theme="dark"] body.b2bl-embed #prof-doc-dropzone i,
:root[data-theme="dark"] body.b2bl-embed #prof-doc-dropzone span { color:var(--org-primary,#4A9DBD) !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-doc-upload-wrap { border-top-color:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed .prof-doc-upload-wrap h6 { color:#9aa3ab !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-doc-item { background:transparent !important;border-color:#2f363b !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-doc-item:hover { background:#232a2f !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-doc-name { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .prof-doc-btn { background:transparent !important;color:#9aa3ab !important;border-color:#3a434a !important; }
:root[data-theme="dark"] body.b2bl-embed .prof-doc-btn:hover { background:#2a3036 !important;color:#e8eaed !important; }

/* AI Mode sidebar: legal link line under the user menu / login button */
.aimode-legal-links { flex:none;display:flex;flex-wrap:wrap;gap:2px 10px;padding:4px 8px 0;margin-bottom:-8px;font-size:11px; }
.aimode-legal-links a { color:var(--aimode-text-muted);opacity:.75;text-decoration:none; }
.aimode-legal-links a:hover { opacity:1;text-decoration:underline; }

/* Embed panel header: labelled back button, centred title, close on the right */
.aimode-embed-header { gap:12px; }
.aimode-embed-back { flex:none;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--aimode-border-strong);border-radius:8px;background:transparent;color:var(--aimode-text);font-size:13px;cursor:pointer; }
.aimode-embed-back:hover { background:var(--aimode-bg-hover); }
.aimode-embed-title { flex:1;text-align:center; }
.aimode-embed-close { flex:none; }

/* Embedded legal pages (Impressum, AGB, Datenschutz, Cookies): dark mode.
   Their light cards/boxes and grey text are hardcoded in the rules above. */
:root[data-theme="dark"] body.b2bl-embed :is(.impressum-content,.agb-content,.privacy-content,.cookie-content) { background:#1d2124;box-shadow:none;border:1px solid #2f363b; }
:root[data-theme="dark"] body.b2bl-embed :is(.impressum-info,.agb-info,.privacy-info,.cookie-info,.cookie-type,.right-item) { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed :is(.impressum-header,.agb-header,.privacy-header,.cookie-header) h1 { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed :is(.impressum-header,.agb-header,.privacy-header,.cookie-header) p { color:#9aa3ab; }
:root[data-theme="dark"] body.b2bl-embed :is(.impressum-section,.agb-section,.privacy-section,.cookie-section) :is(h2,h3,p,li,strong) { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed :is(.cookie-type,.right-item) :is(p,li) { color:#b4bcc3; }
:root[data-theme="dark"] body.b2bl-embed :is(.cookie-type h3,.right-item h4) { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed :is(.agb-info p,.privacy-info p,.cookie-info p,.impressum-info p) { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .contact-item a { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .contact-item a:hover { color:var(--org-primary); }
:root[data-theme="dark"] body.b2bl-embed :is(.agb-updated,.privacy-updated,.cookie-updated) { color:#9aa3ab;border-top-color:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed .cookie-type .badge.optional { background:#4a545c; }

/* Embedded FAQ (and the "coming soon" placeholder other orgs show instead): dark mode */
:root[data-theme="dark"] body.b2bl-embed .faq-page-header h1 { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .faq-page-header p,
:root[data-theme="dark"] body.b2bl-embed .text-muted { color:#9aa3ab !important; }
:root[data-theme="dark"] body.b2bl-embed .faq-search input { background:#1d2124;border-color:#3a434a;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .faq-search input::placeholder { color:#7d868e; }
:root[data-theme="dark"] body.b2bl-embed .faq-cat-btn { background:#232a2f;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .faq-cat-btn:hover { background:#2a3036; }
:root[data-theme="dark"] body.b2bl-embed .faq-cat-btn.active { background:var(--org-primary);color:#fff; }
:root[data-theme="dark"] body.b2bl-embed .faq-item { background:#1d2124;border-color:#2f363b;box-shadow:none; }
:root[data-theme="dark"] body.b2bl-embed .faq-item:hover { box-shadow:none;transform:none;background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed .faq-q-text { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .faq-a-content { color:#b4bcc3; }

/* Sidebar accordion: Chats / Anfragen / Angebote / Verträge always in this order, one open */
.aimode-accordion { flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;margin-bottom:8px; }
.aimode-acc-section { display:flex;flex-direction:column;gap:6px;min-height:0;flex:0 1 auto;transition:flex-grow .5s ease; }
.aimode-acc-section--open { flex-grow:1; }
.aimode-acc-body { flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden;opacity:0;transition:opacity .35s ease; }
.aimode-acc-section--open > .aimode-acc-body { opacity:1;transition-delay:.15s; }
.aimode-acc-body > .aimode-thread-list, .aimode-acc-body > .aimode-thread-list-items { flex:1;min-height:0;margin-bottom:0; }
.aimode-sidebar-nav-item.aimode-new-thread-btn { margin-bottom:0;padding:8px 12px;font-size:13px;flex:none; }
.aimode-sidebar-nav-item > i { flex:none;width:18px;text-align:center; }
.aimode-sidebar-nav-item:hover i { color:#fff; }
.aimode-sidebar-nav-label { flex:1;min-width:0; }
.aimode-nav-pill { flex:none;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--org-primary);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center; }
.aimode-sidebar-nav-item:hover .aimode-nav-pill { background:#fff;color:var(--org-primary); }
/* "Neu" is an <a>: no underline on hover, and keep its icon/text visible on the filled hover state */
.aimode-new-thread-btn, .aimode-new-thread-btn:hover, .aimode-new-thread-btn:focus { text-decoration:none; }
.aimode-new-thread-btn:hover, .aimode-new-thread-btn:hover i { color:#fff; }

.aimode-sidebar-nav-item--active.aimode-new-thread-btn { background:color-mix(in srgb, var(--org-primary) 12%, transparent);border-color:var(--org-primary); }
.aimode-sidebar-empty { padding:10px 12px;font-size:var(--b2bl-text-sm);color:var(--aimode-text-muted); }

/* While Chats is open its own header is redundant ("Neu" + the thread list say it): fold it away */
.aimode-acc-section--chats > .aimode-sidebar-nav-item.aimode-new-thread-btn { max-height:44px;overflow:hidden;transition:max-height .5s ease,opacity .35s ease,padding .5s ease,margin .5s ease,border-width .5s ease; }
.aimode-acc-section--chats.aimode-acc-section--open > .aimode-sidebar-nav-item.aimode-new-thread-btn { max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-top:-6px;border-width:0;pointer-events:none; }

/* ── Embedded request detail (AI Mode only): dark theme ──────────────────────────
   The classic request page styles itself from --b2bl-* tokens, so the embed re-points the
   tokens; only colours the page hardcodes (#fff, #f8f9fa, #2c3e50, #6c757d) need own rules. */
:root[data-theme="dark"] body.b2bl-embed {
  --b2bl-text:#e8eaed; --b2bl-text-muted:#9aa3ab; --b2bl-text-soft:#6d777e;
  --b2bl-border:#2f363b; --b2bl-border-strong:#3a434a;
  --b2bl-bg-elevated:#1d2124; --b2bl-bg-muted:#232a2f;
  --b2bl-primary-soft:rgba(255,255,255,.08); --b2bl-info-soft:rgba(255,255,255,.08);
  --b2bl-success-soft:rgba(47,179,68,.18); --b2bl-danger-soft:rgba(255,107,107,.16);
  --b2bl-shadow-sm:none;
}
/* the page's own breadcrumb would leave the frame; the panel header already names the request */
body.b2bl-embed .view-toolbar { display:none; }
body.b2bl-embed .container-xl { max-width:none; }
:root[data-theme="dark"] body.b2bl-embed :is(.rh-title,.pos__title,.pos__price-amount,.pos__desc,.pos__vendor b,.spec__v,.totals__v,.cond__v,.kv b,.rh-sub code,.req-head h1) { color:#e8eaed !important; }
:root[data-theme="dark"] body.b2bl-embed :is(.pos__num,.pos__chips,.pos__price-meta,.pos__chevron,.pos__thumb,.spec__k,.totals__k,.cond__k,.specs__head,.vendor-addr,.req-sub) { color:#9aa3ab !important; }
:root[data-theme="dark"] body.b2bl-embed :is(.pos,.spec,.totals,.cond__cell,.pos__vendor,.pos__chip,.iconbtn,.rh-sub code,.offer-ro-panel .ab-doc) { background:#232a2f !important;border-color:#2f363b !important; }
:root[data-theme="dark"] body.b2bl-embed .pos { background:#1d2124 !important; }
:root[data-theme="dark"] body.b2bl-embed .pos__row:hover, :root[data-theme="dark"] body.b2bl-embed .docs tbody tr:hover { background:#232a2f !important; }
:root[data-theme="dark"] body.b2bl-embed .pos__thumb, :root[data-theme="dark"] body.b2bl-embed .pos__thumb--generic { background:#181b1e !important; }
:root[data-theme="dark"] body.b2bl-embed .specs { background:#2f363b; border-color:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed .cond__cell--highlight { background:rgba(255,255,255,.06) !important; }
:root[data-theme="dark"] body.b2bl-embed .cond__cell--highlight .cond__v { color:var(--b2bl-primary) !important; }
:root[data-theme="dark"] body.b2bl-embed .iconbtn { color:#b4bcc3; }
:root[data-theme="dark"] body.b2bl-embed .iconbtn:hover { background:var(--b2bl-primary) !important;color:#fff;border-color:var(--b2bl-primary) !important; }
:root[data-theme="dark"] body.b2bl-embed .rq-btn--outline { background:transparent; }
:root[data-theme="dark"] body.b2bl-embed .rq-btn--outline:hover { background:var(--b2bl-primary); }
:root[data-theme="dark"] body.b2bl-embed .rq-btn--outline:disabled, :root[data-theme="dark"] body.b2bl-embed .rq-btn[style*="#f3f4f6"] { background:#232a2f !important;color:#6d777e !important;border-color:#2f363b !important; }
:root[data-theme="dark"] body.b2bl-embed .rq-btn--ghost { color:#e8eaed;border-color:#3a434a; }
:root[data-theme="dark"] body.b2bl-embed .rq-btn--ghost:hover { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed .tab:hover { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed .offer-ro-panel .work .col { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed [style*="#6c757d"] { color:#9aa3ab !important; }
:root[data-theme="dark"] body.b2bl-embed [style*="#adb5bd"] { color:#6d777e !important; }
/* status pills: keep the hue, swap the pastel fill for a translucent one */
:root[data-theme="dark"] body.b2bl-embed .wb-status-pill--created, :root[data-theme="dark"] body.b2bl-embed .wb-status-pill--finance-pending, :root[data-theme="dark"] body.b2bl-embed .wb-status-pill--completed { background:rgba(56,189,248,.16);color:#7dd3fc; }
:root[data-theme="dark"] body.b2bl-embed .wb-status-pill--broker { background:rgba(250,204,21,.16);color:#fde047; }
:root[data-theme="dark"] body.b2bl-embed :is(.wb-status-pill--offers,.wb-status-pill--approve,.wb-status-pill--accepted) { background:rgba(16,185,129,.18);color:#6ee7b7; }
:root[data-theme="dark"] body.b2bl-embed :is(.wb-status-pill--rejected,.wb-status-pill--decline) { background:rgba(248,113,113,.16);color:#fca5a5; }
:root[data-theme="dark"] body.b2bl-embed :is(.wb-status-pill--split,.wb-status-pill--deleted) { background:rgba(255,255,255,.08);color:#b4bcc3; }
:root[data-theme="dark"] body.b2bl-embed .wb-status-pill--offerreceived { background:rgba(167,139,250,.18);color:#c4b5fd; }
/* modals opened from the page (upload, map, history) */
:root[data-theme="dark"] body.b2bl-embed .modal-content { background:#1d2124;color:#e8eaed;border-color:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed .modal-header, :root[data-theme="dark"] body.b2bl-embed .modal-footer { border-color:#2f363b; }
/* chat widget on the Nachrichten tab */
:root[data-theme="dark"] body.b2bl-embed .chat__head { background:#1d2124; }
:root[data-theme="dark"] body.b2bl-embed .chat__body { background:#181b1e; }
:root[data-theme="dark"] body.b2bl-embed :is(.chat__head-title,.attach__name) { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed :is(.chat__head-sub,.bubble__meta,.attach__sub,.chat-empty) { color:#9aa3ab; }
:root[data-theme="dark"] body.b2bl-embed .bubble { background:#262b2f;color:#e8eaed;box-shadow:none; }
:root[data-theme="dark"] body.b2bl-embed .bubble--own { background:rgba(255,255,255,.1); }
:root[data-theme="dark"] body.b2bl-embed .bubble--ai { background:#232a2f;border-color:#3a434a; }
:root[data-theme="dark"] body.b2bl-embed .bubble--internal, :root[data-theme="dark"] body.b2bl-embed .bubble--own-internal { background:rgba(245,159,0,.12) !important; }
:root[data-theme="dark"] body.b2bl-embed .attach-list__link { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed .chat-textarea { background:#181b1e;border-color:#3a434a;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .chat-form { border-color:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed .chat__readonly-note { background:rgba(245,159,0,.1);border-color:#2f363b;color:#f0b24a; }
/* Dokumentenverlauf popup in the embedded request page: flat summary row, values in brand colour */
body.b2bl-embed .tl-summary { background:transparent; }
body.b2bl-embed .tl-summary__value { color:var(--b2bl-primary); }
:root[data-theme="dark"] body.b2bl-embed .tl-filter.is-active { background:#2f363b;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .tl-filters__group { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed .tl-card { background:#232a2f;border-color:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed .tl-card:hover { border-color:#3a434a; }
:root[data-theme="dark"] body.b2bl-embed :is(.tl-att,.tl-btn--ghost) { background:#232a2f;border-color:#3a434a;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed :is(.tl-head__title,.tl-head__id strong,.tl-card__title) { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .tl-body::-webkit-scrollbar-thumb { background:#3a434a; }
:root[data-theme="dark"] body.b2bl-embed .tl-card { background:#232a2f !important; }
:root[data-theme="dark"] body.b2bl-embed .tl-event.is-current .tl-card { background:rgba(16,185,129,.1) !important;border-color:var(--b2bl-success,#059669) !important;box-shadow:none; }
body.b2bl-embed .tl-btn--ghost { background:transparent !important;border:1px solid var(--b2bl-primary) !important;color:var(--b2bl-primary) !important; }
body.b2bl-embed .tl-btn--ghost:hover { background:var(--b2bl-primary) !important;color:#fff !important; }
/* "Per E-Mail teilen" warning popup (built by components.js:mailtoShare) */
:root[data-theme="dark"] body.b2bl-embed .share-warn-box { background:#1d2124;border:1px solid #2f363b; }
:root[data-theme="dark"] body.b2bl-embed .share-warn-box h4 { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .share-warn-box p { color:#b4bcc3; }
:root[data-theme="dark"] body.b2bl-embed .share-warn-box p strong { color:#e8eaed; }
/* chat composer (message bar) on the Nachrichten tab */
:root[data-theme="dark"] body.b2bl-embed .composer { background:#1d2124;border-color:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed :is(.composer__btn,.composer__input,.composer__attach-preview,.composer__hints kbd) { background:#232a2f;color:#b4bcc3; }
:root[data-theme="dark"] body.b2bl-embed .composer__hints kbd { border-color:#3a434a; }
:root[data-theme="dark"] body.b2bl-embed .composer__input:focus-within { background:#181b1e; }
:root[data-theme="dark"] body.b2bl-embed .composer__btn:hover, :root[data-theme="dark"] body.b2bl-embed .composer__inline-btn:hover { color:var(--b2bl-primary); }
:root[data-theme="dark"] body.b2bl-embed .composer__textarea { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .composer__textarea::placeholder { color:#6d777e; }
:root[data-theme="dark"] body.b2bl-embed :is(.composer__inline-btn,.composer__attach-remove) { color:#9aa3ab; }
:root[data-theme="dark"] body.b2bl-embed :is(.composer__hints,.composer__escalate-text) { color:#7d878e; }
:root[data-theme="dark"] body.b2bl-embed .composer__reply-bar { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed .composer__reply-text { color:#9aa3ab; }
:root[data-theme="dark"] body.b2bl-embed .emoji-picker { background:#232a2f;border-color:#3a434a; }
:root[data-theme="dark"] body.b2bl-embed .emoji-picker__btn:hover { background:#2f363b; }
:root[data-theme="dark"] body.b2bl-embed .chat { border-color:#2f363b; }

/* Offer status icon in the sidebar Angebote list (deliberately muted) */
.aimode-offer-status { flex:none;margin:0 10px 0 4px;align-self:center;font-size:.8rem;opacity:.7; }
.aimode-offer-status--accepted { color:#5fa77a; }
.aimode-offer-status--declined { color:#c27a7a; }
.aimode-offer-status--received { color:#c9ae63; }
.aimode-offer-status--info { color:#c9ae63; }
.aimode-offer-status--open { color:var(--b2bl-primary); }
.aimode-offer-status--split { color:#8a9299; }
.aimode-offer-status--rejected { color:#c27a7a; }
/* Assign-to-project icon button, sidebar Anfragen/Angebote/Verträge rows --
   same hidden-until-hover treatment as the chat row's own actions. */
.aimode-sidebar-assign-btn { opacity:0;transition:opacity .12s ease; }
.aimode-thread-list-item:hover .aimode-sidebar-assign-btn,
.aimode-thread-list-item:focus-within .aimode-sidebar-assign-btn { opacity:1; }

/* Embed (AI Mode): offer-accept page and the "offer accepted" banner */
body.b2bl-embed .shadow-lg.bg-body { box-shadow:none !important;margin-top:0 !important; }
.offer-accepted-banner__paper { padding-top:10px;border-top:1px solid rgba(22,163,74,.3); }
:root[data-theme="dark"] body.b2bl-embed .shadow-lg.bg-body { background:transparent !important; }
:root[data-theme="dark"] body.b2bl-embed .card { background:#1d2124;border-color:#2f363b;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .card .card { background:#232a2f; }
:root[data-theme="dark"] body.b2bl-embed .info-box { background:#232a2f;border-color:#2f363b;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .info-box h4 { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .hr-text { color:#9aa3ab; }
:root[data-theme="dark"] body.b2bl-embed .page-title { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .form-check-label,
:root[data-theme="dark"] body.b2bl-embed .text-muted { color:#b4bcc3 !important; }
:root[data-theme="dark"] body.b2bl-embed .form-check-input:not(:checked) { background-color:#232a2f;border-color:#3a434a; }
:root[data-theme="dark"] body.b2bl-embed .btn-secondary { background:#232a2f;border-color:#3a434a;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .btn-outline-primary { color:var(--b2bl-primary);border-color:var(--b2bl-primary);background:transparent; }
:root[data-theme="dark"] body.b2bl-embed .btn-outline-primary:hover { background:var(--b2bl-primary);color:#fff; }
:root[data-theme="dark"] body.b2bl-embed .alert-success { background:rgba(22,163,74,.14);border-color:rgba(22,163,74,.35);color:#b7e4c7; }
:root[data-theme="dark"] body.b2bl-embed .alert-danger { background:rgba(220,38,38,.14);border-color:rgba(220,38,38,.35);color:#f1b5b5; }
:root[data-theme="dark"] body.b2bl-embed .alert-warning { background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.3);color:#ecd79a; }
:root[data-theme="dark"] body.b2bl-embed .alert-success .alert-heading { color:#d7f2e0; }

/* Embed dark: modal header/footer bars (e.g. the AI document check dialogs) */
:root[data-theme="dark"] body.b2bl-embed .modal-header,
:root[data-theme="dark"] body.b2bl-embed .modal-footer { background:#1d2124 !important;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .modal-title { color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .modal-body { background:#1d2124;color:#e8eaed; }
:root[data-theme="dark"] body.b2bl-embed .modal .btn-close { filter:invert(1) grayscale(1) brightness(1.6); }

/* Embed dark: validation errors on the accept page (Django's "error" tag renders as .alert-error) */
:root[data-theme="dark"] body.b2bl-embed .alert-danger,
:root[data-theme="dark"] body.b2bl-embed .alert-error,
:root[data-theme="dark"] body.b2bl-embed #accept-error { background:rgba(220,38,38,.14) !important;border-color:rgba(220,38,38,.35) !important;color:#f1b5b5 !important; }
:root[data-theme="dark"] body.b2bl-embed .alert-danger *,
:root[data-theme="dark"] body.b2bl-embed .alert-error * { color:inherit; }

/* Spinner over the embedded page while it loads */
.aimode-embed-panel { position:relative; }
.aimode-embed-loading { position:absolute;inset:56px 0 0 0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--aimode-bg);color:var(--b2bl-primary);font-size:2rem;pointer-events:none; }

/* Embed: request header pill matches the AI Mode sidebar icon colours (in progress = brand blue). */
body.b2bl-embed :is(.wb-status-pill--created,.wb-status-pill--broker,.wb-status-pill--finance-pending,.wb-status-pill--finance,.wb-status-pill--offers) { background:var(--b2bl-primary-soft);color:var(--b2bl-primary);opacity:1; }
body.b2bl-embed .wb-status-pill--offers::before { background:currentColor; }
:root[data-theme="dark"] body.b2bl-embed :is(.wb-status-pill--created,.wb-status-pill--broker,.wb-status-pill--finance-pending,.wb-status-pill--finance,.wb-status-pill--offers) { background:color-mix(in srgb,var(--b2bl-primary) 18%,transparent);color:var(--b2bl-primary); }
.wb-status-pill--info { background:#fef9c3;color:#854d0e; }
body.b2bl-embed .wb-status-pill--info { background:#fef9c3;color:#854d0e; }
:root[data-theme="dark"] body.b2bl-embed .wb-status-pill--info { background:rgba(201,174,99,.16);color:#d9c27a; }

/* Nachrichten tab while a leasing company is waiting for more information. */
.tab.tab--info { color:#a07f1c; font-weight:600; }
.tab.tab--info:not(.is-active) { background:#fef9c3; }
.tab.tab--info.is-active::after { background:#c9ae63; }
.tab.tab--info:not(.is-active) .count { background:#c9ae63; color:#fff; }
:root[data-theme="dark"] body.b2bl-embed .tab.tab--info { color:#d9c27a; }
:root[data-theme="dark"] body.b2bl-embed .tab.tab--info:not(.is-active) { background:rgba(201,174,99,.16); }

/* Embed dark: "Zusätzliche Dokumente bereitstellen" dialog (inline-styled white in the partial). */
:root[data-theme="dark"] body.b2bl-embed .doc-upload-dialog { background:#1d2124 !important;color:#e8eaed;border:1px solid #2f363b; }
:root[data-theme="dark"] body.b2bl-embed .doc-upload-dialog :is(p,th,td) { color:#e8eaed !important; }
:root[data-theme="dark"] body.b2bl-embed .doc-upload-dialog p { color:#9aa3ab !important; }
:root[data-theme="dark"] body.b2bl-embed .doc-upload-dialog :is(thead tr,tbody tr,div[style*="border-top"]) { border-color:#2f363b !important; }
:root[data-theme="dark"] body.b2bl-embed .doc-row-drop { background:rgba(255,255,255,.04);border-color:var(--b2bl-primary); }
:root[data-theme="dark"] body.b2bl-embed .doc-row-drop.is-filled { background:rgba(16,185,129,.14);border-color:#5fa77a; }
:root[data-theme="dark"] body.b2bl-embed .doc-row-drop.is-filled :is(.drop-icon,.drop-label) { color:#6ee7b7; }
:root[data-theme="dark"] body.b2bl-embed .doc-upload-error { background:rgba(248,113,113,.16) !important;color:#fca5a5 !important; }
:root[data-theme="dark"] body.b2bl-embed .doc-upload-dialog .rq-btn--ghost { background:transparent;color:#e8eaed;border-color:#3a434a; }

/* Split (inactive) requests read greyer than live ones. */
.aimode-thread-list-item.aimode-thread-list-item--inactive .aimode-thread-list-item-trigger { color:#8a9299; }

/* Composer dictation button (browser speech recognition). */
.aimode-dictate { flex:none;width:34px;height:34px;margin-right:6px;border:none;border-radius:50%;background:transparent;color:var(--aimode-text-muted);cursor:pointer; }
.aimode-dictate:hover { background:var(--aimode-bg-hover);color:var(--org-primary); }
.aimode-dictate--listening { background:rgba(194,122,122,.18);color:#c27a7a;animation:aimode-dictate-pulse 1.4s ease-in-out infinite; }
@keyframes aimode-dictate-pulse { 50% { box-shadow:0 0 0 6px rgba(194,122,122,.12); } }

/* Voice read-out toggle left of Senden (browser speech synthesis; off by default). */
.aimode-voice-toggle { flex:none;width:34px;height:34px;margin-right:6px;border:none;border-radius:50%;background:transparent;color:var(--aimode-text-muted);cursor:pointer; }
.aimode-voice-toggle:hover { background:var(--aimode-bg-hover);color:var(--org-primary); }
.aimode-voice-toggle--on { color:var(--org-primary);background:rgba(74,157,189,.14); }

/* ── Contract key figures and payment-schedule charts (templates/contract/_schedule_charts.html) ── */
.contract-charts { display:grid; gap:1.25rem; margin:1rem 0 1.5rem; }
.contract-kpis { display:flex; flex-wrap:wrap; gap:.6rem; }
.contract-kpi { flex:1 1 150px; border:1px solid currentColor; border-color:rgba(128,128,128,.3); border-radius:8px; padding:.6rem .75rem; display:flex; flex-direction:column; gap:.1rem; }
.contract-kpi span { font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; opacity:.65; }
.contract-kpi strong { font-size:1.15rem; font-weight:700; }
.contract-kpi small { font-size:.72rem; opacity:.65; }
.contract-kpi--main { border-color:var(--org-primary); }
.contract-kpi--main strong { color:var(--org-primary); }
.contract-chart h4 { font-size:.95rem; margin:0 0 .6rem; }
.contract-chart svg { width:100%; height:auto; display:block; }
.contract-split { display:flex; height:1.6rem; border-radius:6px; overflow:hidden; }
.contract-split-part.cc-down_payment, .cc-key.cc-down_payment { background:#7a8794; }
.contract-split-part.cc-principal, .cc-key.cc-principal { background:var(--org-primary); }
.contract-split-part.cc-interest, .cc-key.cc-interest { background:#e0a458; }
.contract-split-part.cc-residual, .cc-key.cc-residual { background:#3aa17e; }
.contract-chart svg .cc-principal { fill:var(--org-primary); }
.contract-chart svg .cc-interest { fill:#e0a458; }
.contract-chart svg .cc-owed { fill:#3aa17e; }
.contract-chart svg .cc-down_payment { fill:#7a8794; }
.contract-plot { margin-left:7.5rem; }
.contract-plot-box { position:relative; }
.contract-plot svg { display:block; width:100%; }
.contract-plot-y { position:absolute; right:100%; transform:translateY(-50%); padding-right:.5rem; text-align:right; white-space:nowrap; font-size:.72rem; line-height:1.2; opacity:.85; }
.contract-plot-y--above { transform:translateY(-100%); }
.contract-plot-y strong { display:block; font-size:.8rem; }
.contract-plot-x { position:relative; height:1.2rem; margin-top:.25rem; font-size:.8rem; }
.contract-plot-x span { position:absolute; white-space:nowrap; }
.contract-plot-start { left:0; }
.contract-plot-end { right:0; }
.contract-plot-month { transform:translateX(-50%); opacity:.7; }
@media (max-width:560px) { .contract-plot-month { display:none; } }
.contract-chart svg .cc-future { fill-opacity:.65; }
.cc-key.cc-interest.cc-future { background:rgba(224,164,88,.65); }
.cc-key.cc-owed { background:#3aa17e; }
.contract-chart svg .cc-residual { stroke:#1f6f52; stroke-width:2; }
.cc-key.cc-start { background:#7a8794; }
.cc-key.cc-residual-key { background:#1f6f52; height:.2rem; }
.contract-chart .cc-axis { stroke:currentColor; stroke-opacity:.35; }
.contract-chart-legend { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; margin:.5rem 0 0; padding:0; font-size:.8rem; }
.contract-chart-legend .cc-key { display:inline-block; width:.8rem; height:.8rem; margin-right:.35rem; vertical-align:-1px; border-radius:2px; }

/* ── D5.7: conversational Finanzierungsanfrage cards, rendered inside AI Mode chat
   messages (FinancingRequestFlow.tsx) via App.tsx's AiModeMessageText fn_card branch.
   Ported from templates/main/request_details.html's own inline <style> block (classic
   mode's /add_request/ page, which this flow's cards deliberately mirror "roughly" per
   spec) rather than shared verbatim, since that template's block used its own
   light-only --fn-* token set (#fff backgrounds, literal hex text colors) which would
   look broken in this app's dark theme. Same class names (.fn-card, .fn-input, etc.)
   so the two surfaces stay visually recognizable as the same design, but --fn-*
   here resolves through the existing --aimode-* / --b2bl-* tokens so light/dark and
   both orgs' brand colors apply automatically -- see the --aimode-* token block
   above (search "AI Mode (D5.2)") for what each of those already resolves to. Rail/
   summary-sidebar classes (.fn-layout, .fn-rail, .fn-summary*) are NOT ported: the
   chat flow's own final step is a SummaryCard message, not a sticky side rail. ── */
.aimode-fn-flow {
  --fn-primary:          var(--b2bl-primary);
  --fn-primary-soft:     var(--aimode-icon-well-bg);
  --fn-success:          #22c55e;
  --fn-success-soft:     #dcfce7;
  --fn-text:             var(--aimode-text);
  --fn-text-muted:       var(--aimode-text-muted);
  --fn-text-soft:        var(--aimode-text-soft);
  --fn-border:           var(--aimode-border);
  --fn-border-strong:    var(--aimode-border-strong);
  --fn-bg:               var(--aimode-bg-elevated);
  --fn-bg-muted:         var(--aimode-bg-hover);
  --fn-info-soft:        var(--aimode-icon-well-bg);
  --fn-gradient:         var(--b2bl-gradient-primary);
  --fn-shadow-sm:        0 1px 3px var(--aimode-shadow);
  --fn-shadow-md:        0 4px 16px var(--aimode-shadow-strong);
  --fn-shadow-primary:   var(--b2bl-shadow-primary);
  --fn-radius-sm:        8px;
  --fn-radius-md:        12px;
  --fn-radius-lg:        16px;
  --fn-dur:              .18s;
  --fn-ease:             cubic-bezier(.4,0,.2,1);
  max-width: 100%;
}

/* D5.7: the ~1s gap between a step's intro finishing typing and its card actually
   appearing (chatModelAdapter.ts:runScriptedCardReply) -- same shimmer "BB" mark the
   message avatar shows while genuinely thinking, just larger and centered in the
   card's own place so it reads as "the next card is coming", not stray avatar chrome. */
.aimode-fn-flow-pending { display:flex;align-items:center;justify-content:center;padding:20px 22px;margin-bottom:4px; }
.aimode-fn-flow-pending .aimode-thinking { width:28px;height:28px;margin-left:0; }

.fn-card {
  background: var(--fn-bg);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-lg);
  box-shadow: var(--fn-shadow-sm);
  padding: 20px 22px;
  margin-bottom: 4px;
}
.fn-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fn-card__titles { display: flex; flex-direction: column; gap: 2px; }
.fn-card__title  { font-size: 1.05rem; font-weight: 600; color: var(--fn-text); margin: 0; }
.fn-card__hint   { font-size: .875rem; color: var(--fn-text-muted); margin: 0; }

.fn-input {
  width: 100%;
  border: 1.5px solid var(--fn-border-strong);
  border-radius: var(--fn-radius-sm);
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--fn-text);
  background: var(--fn-bg);
  transition: border-color var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease);
  outline: none;
  font-family: inherit;
}
.fn-input::placeholder { color: var(--fn-text-soft); }
.fn-input:focus { border-color: var(--fn-primary); box-shadow: 0 0 0 3px rgba(74,157,189,.15); }
textarea.fn-input { resize: vertical; min-height: 96px; line-height: 1.55; }
.fn-input--date { width: 210px; }

.fn-field-label { display: block; font-size: .875rem; font-weight: 600; color: var(--fn-text); margin: 0 0 7px; }
.fn-req { color: var(--fn-primary); margin-left: 2px; }

.fn-notice {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--fn-info-soft);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.fn-notice__icon  { color: var(--fn-primary); font-size: 1.05rem; margin-top: 1px; flex-shrink: 0; }
.fn-notice__text  { font-size: .875rem; color: var(--fn-text); line-height: 1.5; margin: 0; }
.fn-notice__text strong { font-weight: 700; }

.fn-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fn-model {
  position: relative; text-align: left;
  display: flex; gap: 14px; align-items: flex-start;
  border: 1.5px solid var(--fn-border-strong);
  border-radius: var(--fn-radius-lg);
  background: var(--fn-bg); padding: 18px;
  cursor: pointer;
  transition: border-color var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease), transform var(--fn-dur) var(--fn-ease);
  user-select: none;
}
.fn-model:hover:not(.fn-model--disabled):not(.fn-model--active) { border-color: var(--fn-primary); transform: translateY(-2px); box-shadow: var(--fn-shadow-md); }
.fn-model--active { border-color: var(--fn-primary); background: var(--fn-info-soft); box-shadow: 0 0 0 1px var(--fn-primary) inset; }
.fn-model--disabled { opacity: .55; cursor: not-allowed; background: var(--fn-bg-muted); }
.fn-model__radio {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--fn-border-strong);
  display: grid; place-items: center;
  transition: border-color var(--fn-dur) var(--fn-ease);
}
.fn-model--active .fn-model__radio { border-color: var(--fn-primary); }
.fn-model--active .fn-model__radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--fn-primary); }
.fn-model__body  { display: flex; flex-direction: column; gap: 3px; }
.fn-model__name  { font-size: 1rem; font-weight: 700; color: var(--fn-text); }
.fn-model--active .fn-model__name { color: var(--fn-primary); }
.fn-model__desc  { font-size: .875rem; color: var(--fn-text-muted); line-height: 1.45; }
.fn-model__tag {
  position: absolute; top: 12px; right: 12px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 4px;
}
.fn-model__tag--na  { background: var(--fn-bg-muted); color: var(--fn-text-soft); border: 1px solid var(--fn-border-strong); }
.fn-model__tag--ok  { background: var(--fn-bg-muted); color: var(--fn-text-muted); border: 1px solid var(--fn-border); }
.fn-model__tag--rec { background: var(--fn-success-soft); color: var(--fn-success); }

.fn-seg { display: flex; flex-wrap: wrap; gap: 10px; }
.fn-seg__opt {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--fn-border-strong);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-bg); padding: 11px 16px;
  cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--fn-text);
  transition: border-color var(--fn-dur) var(--fn-ease), color var(--fn-dur) var(--fn-ease), background var(--fn-dur) var(--fn-ease);
}
.fn-seg__opt:hover { border-color: var(--fn-primary); }
.fn-seg__opt--active { border-color: var(--fn-primary); background: var(--fn-info-soft); color: var(--fn-primary); font-weight: 600; }
.fn-seg__dot {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--fn-border-strong);
  display: grid; place-items: center;
  transition: border-color var(--fn-dur) var(--fn-ease);
}
.fn-seg__opt--active .fn-seg__dot { border-color: var(--fn-primary); }
.fn-seg__opt--active .fn-seg__dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--fn-primary); }
.fn-date-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.fn-date-row .fn-field-label { margin: 0; white-space: nowrap; }

.fn-pos-table { border: 1px solid var(--fn-border); border-radius: var(--fn-radius-md); overflow: hidden; }
/* Pos. | thumbnail | Artikel | Zusatzangabe -- thumbnail is its own column (not
   inline above the title) so it lines up as a clean grid across rows. */
.fn-pos-row { display: grid; grid-template-columns: 64px 80px 1fr 210px; gap: 16px; padding: 16px 18px; align-items: center; }
.fn-pos-row + .fn-pos-row { border-top: 1px solid var(--fn-border); }
.fn-pos-row--head { background: var(--fn-bg-muted); padding: 11px 18px; }
.fn-pos-row--head span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fn-text-muted); }
.fn-pos-num   { font-weight: 700; color: var(--fn-primary); font-variant-numeric: tabular-nums; }
.fn-pos-media { display: flex; align-items: center; justify-content: center; }
.fn-pos-media .aimode-cart-item-media { width: 72px; height: 72px; border-radius: 8px; }
.fn-pos-title { font-size: .95rem; font-weight: 600; color: var(--fn-text); line-height: 1.4; }
.fn-pos-cat   { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .875rem; color: var(--fn-text-muted); }
.fn-pos-cat i { color: var(--fn-primary); }
.fn-pos-extra { display: flex; flex-direction: column; gap: 6px; }
.fn-pos-extra .fn-field-label { font-size: .75rem; margin: 0; color: var(--fn-text-muted); }
/* Mandatory additional-info field, still empty -- highlighted so it's obvious which
   rows still block the "Weiter" button in allFilled (FinancingRequestFlow.tsx). Border
   + soft background on the input itself, not just the label's existing "*" marker. */
.fn-pos-extra--missing .fn-unit-input { border-color: var(--fn-primary); background: var(--fn-info-soft); }
.fn-pos-extra--missing .fn-unit { background: var(--fn-info-soft); }
.fn-unit-input {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--fn-border-strong);
  border-radius: var(--fn-radius-sm);
  overflow: hidden;
  transition: border-color var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease);
}
.fn-unit-input:focus-within { border-color: var(--fn-primary); box-shadow: 0 0 0 3px rgba(74,157,189,.15); }
.fn-unit-input input {
  border: none; outline: none; padding: 10px 12px;
  font-size: .95rem; width: 100%; min-width: 0; background: var(--fn-bg); color: var(--fn-text);
  text-align: right; font-variant-numeric: tabular-nums; font-family: inherit;
}
.fn-unit {
  display: grid; place-items: center; padding: 0 12px;
  background: var(--fn-bg-muted);
  border-left: 1px solid var(--fn-border-strong);
  font-size: .875rem; color: var(--fn-text-muted); white-space: nowrap;
}

.fn-cond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fn-cond-grid .fn-span-2 { grid-column: 1 / -1; }
.fn-dur-field.d-none { display: none !important; }

.fn-percent-input {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--fn-border-strong);
  border-radius: var(--fn-radius-sm);
  overflow: hidden; max-width: 160px;
  transition: border-color var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease);
}
.fn-percent-input:focus-within { border-color: var(--fn-primary); box-shadow: 0 0 0 3px rgba(74,157,189,.15); }
.fn-percent-input input {
  border: none; outline: none; padding: 11px 14px;
  font-size: 1rem; width: 100%; min-width: 0; background: var(--fn-bg); color: var(--fn-text);
  text-align: right; font-variant-numeric: tabular-nums; font-family: inherit;
}

.fn-slider { width: 100%; margin-top: 14px; accent-color: var(--fn-primary); height: 4px; }
.fn-slider-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--fn-text-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }

.fn-select-wrap { position: relative; }
.fn-select-wrap select {
  width: 100%; appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--fn-border-strong);
  border-radius: var(--fn-radius-sm);
  padding: 12px 40px 12px 14px;
  font-size: 1rem; color: var(--fn-text); background: var(--fn-bg);
  cursor: pointer; outline: none; font-family: inherit;
  transition: border-color var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease);
}
.fn-select-wrap select:focus { border-color: var(--fn-primary); box-shadow: 0 0 0 3px rgba(74,157,189,.15); }
.fn-select-wrap i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--fn-text-muted); pointer-events: none; font-size: .8rem; }
.fn-dur-field { margin-bottom: 0; }
.fn-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 2px rgba(220,53,69,.15) !important; }

.fn-chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fn-chip {
  flex: 1; min-width: 110px;
  border: 1.5px solid var(--fn-border-strong);
  border-radius: var(--fn-radius-sm);
  background: var(--fn-bg); padding: 12px 14px;
  cursor: pointer; text-align: center;
  font-size: .875rem; font-weight: 600; color: var(--fn-text);
  transition: border-color var(--fn-dur) var(--fn-ease), background var(--fn-dur) var(--fn-ease), color var(--fn-dur) var(--fn-ease);
  user-select: none;
}
.fn-chip:hover { border-color: var(--fn-primary); }
.fn-chip--active { border-color: var(--fn-primary); background: var(--fn-primary); color: #fff; box-shadow: var(--fn-shadow-primary); }
.fn-chip i { display: block; font-size: 1.1rem; margin-bottom: 6px; color: var(--fn-primary); }
.fn-chip--active i { color: #fff; }

.fn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--fn-radius-sm);
  font-size: .95rem; font-weight: 600; cursor: pointer; border: none;
  transition: transform var(--fn-dur) var(--fn-ease), box-shadow var(--fn-dur) var(--fn-ease);
  font-family: inherit;
}
.fn-btn--primary { background: var(--fn-gradient); color: #fff; box-shadow: var(--fn-shadow-primary); }
.fn-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,157,189,.45); }
.fn-btn--primary:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: var(--fn-shadow-primary); }
.fn-btn--ghost { background: var(--fn-bg); color: var(--fn-text); border: 1.5px solid var(--fn-border-strong); }
.fn-btn--ghost:hover { border-color: var(--fn-primary); color: var(--fn-primary); }
.fn-btn--muted { background: transparent; color: var(--fn-text-muted); border: none; padding: 12px 8px; font-weight: 500; }
.fn-btn--muted:hover { color: var(--fn-text); text-decoration: underline; }
.fn-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.fn-locked-note { flex-basis: 100%; display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(128,128,128,.10); border: 1px solid rgba(128,128,128,.25); color: var(--fn-text-muted); font-size: 12px; line-height: 1.4; text-align: left; }
.fn-locked-note i { flex: none; margin-top: 1px; }

.fn-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fn-border); }
.fn-sum-row:last-child { border-bottom: none; }
.fn-sum-row__label { font-size: .875rem; color: var(--fn-text-muted); }
.fn-sum-row__val   { font-size: .95rem; font-weight: 600; color: var(--fn-text); text-align: right; font-variant-numeric: tabular-nums; }
.fn-sum-row__val--primary { color: var(--fn-primary); }
/* request_description ("Weitere Angaben"), shown as a plain description line below the
   Optimiert-auf row rather than another label/value pair -- it's free text, not a fact. */
.fn-sum-desc { margin: 10px 0 0; font-size: .875rem; color: var(--fn-text-muted); line-height: 1.5; white-space: pre-wrap; }

@media (max-width: 600px) {
  .fn-model-grid, .fn-cond-grid { grid-template-columns: 1fr; }
  .fn-pos-row { grid-template-columns: 1fr; }
  .fn-card { padding: 16px 16px; }
}
.contract-chart-note { font-size:.75rem; opacity:.65; margin:0; }