/* --------------------------------------------
   GLOBAL FONTS
-------------------------------------------- */
body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.brand-heading,
h1, .page-title {
  font-family: "rl-aqva", sans-serif;
  font-weight: 900;
}

h2, h3 {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 20px;
}

/* Material Icons */
.material-symbols-rounded {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  font-size: 20px;
  line-height: 1;
}

.button{
    text-decoration: none;
}

/* --------------------------------------------
   PUBLIC LANDING PAGE
-------------------------------------------- */
:root {
  --pn-ink: #090909;
  --pn-muted: #5f665f;
  --pn-soft: #f3f5f1;
  --pn-line: #dfe5da;
  --pn-lime: #9BFA6D;
  --pn-lime-dark: #76d54d;
}

.navbar-brand {
  letter-spacing: 0;
}

.landing-hero,
.landing-section {
  background: #fff;
}

.landing-hero {
  padding: 56px 0 40px;
}

.landing-hero__grid,
.landing-split,
.landing-dark-grid,
.landing-cta__inner {
  display: grid;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.landing-hero__grid {
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
}

.landing-kicker {
  color: var(--pn-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 18px;
}

.landing-hero h1,
.landing-section h2,
.landing-cta h2 {
  color: var(--pn-ink);
  font-family: "Inter", sans-serif;
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
  margin-bottom: 24px;
}

.landing-section h2,
.landing-cta h2 {
  font-size: clamp(34px, 4.4vw, 56px);
}

.landing-lead,
.landing-split__copy p,
.landing-value-grid p,
.landing-steps p,
.landing-proof span {
  color: var(--pn-muted);
  font-size: 17px;
  line-height: 1.58;
}

.landing-lead {
  max-width: 620px;
  margin-bottom: 28px;
}

.landing-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  max-width: 660px;
  margin-bottom: 16px;
}

.landing-search .form-control {
  min-height: 58px;
  border: 1px solid var(--pn-line);
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
}

.landing-search .form-control:focus {
  border-color: var(--pn-ink);
  box-shadow: 0 0 0 0.2rem rgba(155, 250, 109, 0.28);
}

.landing-actions,
.landing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-hero__media img,
.landing-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-hero__media {
  min-height: 520px;
  overflow: hidden;
  background: var(--pn-soft);
}

.landing-hero__media img {
  min-height: 520px;
}

.landing-proof {
  padding: 26px 0;
  background: var(--pn-soft);
  border-block: 1px solid var(--pn-line);
}

.landing-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.landing-proof strong,
.landing-proof span {
  display: block;
}

.landing-proof strong {
  color: var(--pn-ink);
  font-size: 18px;
  margin-bottom: 3px;
}

.landing-proof span {
  font-size: 14px;
}

.landing-section {
  padding: clamp(64px, 8vw, 112px) 0;
}

.landing-section--split {
  overflow: hidden;
}

.landing-split {
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
}

.landing-split--reverse {
  grid-template-columns: minmax(320px, 0.94fr) minmax(0, 1.06fr);
}

.landing-split--reverse .landing-split__media {
  order: 2;
}

.landing-split__media {
  min-height: 500px;
  background: var(--pn-soft);
  overflow: hidden;
}

.landing-split__copy {
  max-width: 560px;
}

.landing-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 28px;
  padding: 0;
  list-style: none;
}

.landing-list li {
  position: relative;
  padding-left: 30px;
  color: var(--pn-ink);
  font-size: 16px;
  line-height: 1.5;
}

.landing-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--pn-lime);
}

.landing-link {
  color: var(--pn-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  text-decoration: none;
}

.landing-link:hover {
  color: #356d21;
}

.landing-section--dark {
  background: var(--pn-ink);
}

.landing-section--dark .landing-kicker,
.landing-section--dark p {
  color: rgba(255, 255, 255, 0.68);
}

.landing-section--dark h2,
.landing-section--dark h3 {
  color: #fff;
}

.landing-dark-grid {
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.landing-steps article {
  background: var(--pn-ink);
  padding: 30px;
}

.landing-steps span {
  align-items: center;
  background: var(--pn-lime);
  color: var(--pn-ink);
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  margin-bottom: 44px;
  width: 34px;
}

.landing-steps h3,
.landing-value-grid h3 {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 12px;
}

.landing-section--value {
  background: var(--pn-soft);
}

.landing-value__header {
  max-width: 760px;
  margin-bottom: 42px;
}

.landing-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--pn-line);
}

.landing-value-grid article {
  background: var(--pn-soft);
  min-height: 260px;
  padding: 28px;
}

.landing-value-grid i {
  color: var(--pn-ink);
  display: inline-block;
  font-size: 28px;
  margin-bottom: 36px;
}

.landing-cta {
  background: var(--pn-ink);
  color: #fff;
  padding: clamp(56px, 7vw, 88px) 0;
}

.landing-cta__inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.landing-cta .landing-kicker,
.landing-cta h2 {
  color: #fff;
}

.landing-cta h2 {
  margin-bottom: 0;
  max-width: 760px;
}

.btn-accent {
  background: var(--pn-lime) !important;
  border: none !important;
  color: #000 !important;
  border-radius: 999px !important;
  font-weight: 800;
}

.btn-accent:hover {
  background: var(--pn-lime-dark) !important;
  color: #000 !important;
}

@media (max-width: 991.98px) {
  .landing-hero__grid,
  .landing-split,
  .landing-split--reverse,
  .landing-dark-grid,
  .landing-cta__inner {
    grid-template-columns: 1fr;
  }

  .landing-split--reverse .landing-split__media {
    order: 0;
  }

  .landing-hero__media,
  .landing-split__media {
    min-height: 380px;
  }

  .landing-hero__media img,
  .landing-split__media img {
    min-height: 380px;
  }

  .landing-proof__grid,
  .landing-steps,
  .landing-value-grid {
    grid-template-columns: 1fr;
  }

  .landing-cta__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .landing-hero {
    padding-top: 36px;
  }

  .landing-search {
    grid-template-columns: 1fr;
  }

  .landing-actions .btn,
  .landing-search .btn,
  .landing-cta__actions .btn {
    width: 100%;
  }

  .landing-hero__media,
  .landing-split__media {
    min-height: 300px;
  }

  .landing-hero__media img,
  .landing-split__media img {
    min-height: 300px;
  }
}

/* Primary action buttons */
.btn-primary,
.btn-success,
.btn-primary:focus,
.btn-success:focus {
    background-color: #9BFA6D !important;
    border: none;
    color: #000000 !important;
    border-radius: 999px !important;
    font-weight: 600;
}

/* Hover state */
.btn-primary:hover,
.btn-success:hover {
    background-color: #83d85a !important;
    border-color: #83d85a !important;
    color: #000000 !important;
}

.btn-outline-secondary{
    border-radius: 999px !important;
    padding: 10px !important;
    background-color: white !important;
    border: none;
    color: #000000 !important;
    font-weight: 600;
}


/* --------------------------------------------
   SIDEBAR WRAPPER FIXES
-------------------------------------------- */

/* REMOVE width from .sidebar wrapper (Bootstrap’s wrapper) */
.sidebar {
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* --------------------------------------------
   REAL SIDEBAR
-------------------------------------------- */
.app-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 260px;
  background: #EDF0EC;
  border-right: 1px solid rgba(16, 24, 40, 0.06);
  padding: 16px 12px;
  z-index: 1020;
  transition: width 0.25s ease-in-out;
}

.app-sidebar .sidebar-inner {
  height: 100%;
}

/* Collapsed width (desktop) */
.app-sidebar.is-collapsed {
  width: 76px;
}

/* --------------------------------------------
   HEADER / LOGO
-------------------------------------------- */
.sidebar-header {
  padding: 4px 8px 16px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
}

.sidebar-logo-img {
  height: 22px;
  width: auto;
}

.app-sidebar.is-collapsed .sidebar-logo {
  display: none !important;
}

/* --------------------------------------------
   COLLAPSE BUTTON
-------------------------------------------- */
.sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle:hover {
  background: #DBDBDB;
}

/* When collapsed, switch icon text (JS also updates text) */
.app-sidebar.is-collapsed .sidebar-toggle-icon {
  content: "left_panel_open";
}

/* --------------------------------------------
   SECTION LABELS
-------------------------------------------- */
.sidebar-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 12px 8px 6px;
  color: #000;
}

.sidebar-section-label--nested {
  margin: 12px 8px 6px;
}

/* Keep visible even when collapsed */
.app-sidebar.is-collapsed .sidebar-section-label {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}

/* --------------------------------------------
   NAV LINKS
-------------------------------------------- */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 2px 4px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #111827;
  transition: 0.15s ease;
}

.sidebar-link:hover {
  background: #DBDBDB;
}

.sidebar-link.active {
  background: #9BFA6D;
  color: #020617;
}

.sidebar-link.active .material-symbols-rounded {
  color: #020617;
}

/* collapsed mode: icons only */
.app-sidebar.is-collapsed .sidebar-link {
  justify-content: center;
}

.app-sidebar.is-collapsed .sidebar-link-label {
  display: none;
}

/* --------------------------------------------
   CONTENT SHIFT
-------------------------------------------- */
.app-shell-with-sidebar {
  margin-left: 260px;
  transition: margin-left 0.25s ease-in-out;
}

/* When the sidebar is collapsed (class is toggled in JS) */
.app-shell-with-sidebar.sidebar-collapsed {
  margin-left: 76px;
}

/* --------------------------------------------
   MOBILE RULES
-------------------------------------------- */
@media (max-width: 991.98px) {

  /* Hide the desktop sidebar wrapper entirely */
  .sidebar {
    display: none !important;
    width: 0 !important;
  }

  /* Main shell should take full width on mobile */
  .app-shell-with-sidebar {
    margin-left: 0;
  }

  /* Sidebar when used inside the offcanvas (mobile menu) */
  .offcanvas .app-sidebar {
    position: static;
    width: 100% !important;
    max-width: none;
    border-right: none;
  }

  /* Hide collapse toggle on mobile */
  .sidebar-toggle {
    display: none !important;
  }
}

/* --------------------------------------------
   TOPBAR
-------------------------------------------- */

.topbar {
  z-index: 1030; /* above sidebar */
}

/* Icon buttons (bell + avatar) */
.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.topbar-icon-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* Notification dot */
.notification-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22C55E;
  border: 2px solid #FFFFFF;
}

/* Avatar initials */
.topbar-avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #111827;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

/* Hide Bootstrap's default dropdown caret on the avatar button */
.topbar-icon-btn.dropdown-toggle::after {
  display: none;
}

/* Inventory cards */
.inventory-card {
  background-color: #ECEFEC;      /* 1. Background */
  border: 1px solid #E0E0E0;      /* 2. Stroke */
  border-radius: 16px;
}

.card-body {
  background-color: #ECEFEC;      /* 1. Background */
  border: 1px solid #E0E0E0;      /* 2. Stroke */
  border-radius: 16px;
}

/* Card titles: Inter Black */
.inventory-section-title {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;               /* Inter Black */
  font-size: 1.5rem;
}

/* Search bar styling so it feels like a pill field */
.inventory-search .input-group-text {
  border-radius: 999px 0 0 999px;
}

.inventory-search .form-control {
  border-radius: 0 999px 999px 0;
  background-color: #F5F7F5;
}

.inventory-search .form-control:focus {
  box-shadow: none;
}

/* Empty state image sizing */
.inventory-empty-illustration {
  max-width: 140px;
  height: auto;
}

/* Optional: softer badge look */
.inventory-status-pill {
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
}

/* Page title on form pages */
.page-title {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
}

/* Card styling matches inventory */
.inventory-card {
  background-color: #ECEFEC;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
}

/* Section title inside card */
.inventory-section-title {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: 1rem;
}

/* Custom model dropdown */
.model-select-display {
  cursor: pointer;
}

.model-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  z-index: 1050;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.model-search-input:focus {
  outline: none;
  box-shadow: none;
}

/* Quote request list layout */
.quote-request-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.business-request-search {
  position: relative;
}

.business-request-search__field {
  position: relative;
}

.business-request-search__icon {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 2;
  color: #6b7280;
  transform: translateY(-50%);
  pointer-events: none;
}

.business-request-search__input {
  padding-left: 44px;
}

.business-request-search__results {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.business-request-search__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #eeeeee;
  background: #ffffff;
  text-align: left;
}

.business-request-search__item:last-child {
  border-bottom: 0;
}

.business-request-search__item:hover,
.business-request-search__item:focus {
  background: #f6f8f5;
  outline: none;
}

.business-request-search__title {
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

.business-request-search__meta,
.business-request-search__empty {
  font-size: 0.88rem;
  color: #6b7280;
}

.business-request-search__empty {
  padding: 14px;
}

@media (min-width: 768px) {
  body:has(#business-requests-page) {
    overflow: hidden;
  }

  .app-shell-with-sidebar:has(#business-requests-page) {
    height: 100dvh;
    min-height: 0 !important;
    overflow: hidden;
  }

  .content:has(#business-requests-page) {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #business-requests-page {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #business-requests-page .business-requests-layout {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #business-requests-page .business-requests-sidebar,
  #business-requests-page .business-requests-sidebar__inner,
  #business-requests-page .business-requests-detail {
    height: 100%;
    min-height: 0;
  }

  #business-requests-page .business-requests-sidebar__inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #business-requests-page .quote-request-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
  }

  #business-requests-page .business-requests-detail {
    display: flex;
  }

  #business-requests-page .quote-chat-shell {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
  }

  #business-requests-page .quote-chat {
    min-height: 0;
  }
}

/* Base card */
.quote-request-card {
  border-radius: 24px;
  padding: 1rem 1.4rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover state */
.quote-request-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* Active / selected card – bright green */
.quote-request-card--active {
  background: #b9ff65;   /* match your green */
  border-color: #b9ff65;
  box-shadow: 0 0 0 2px rgba(185, 255, 101, 0.7);
}

/* Title + price */
.quote-request-card__title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.quote-request-card__price {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.quote-request-card__unread-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: #8df35f;
  box-shadow: 0 0 0 3px rgba(141, 243, 95, 0.22);
}

/* Status pill */
.quote-request-card__status-pill {
  padding: 0.15rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f3f4f6;
  color: #111827;
}

/* Different status colours if you want them */
.status-pill--pending {
  background: #ffffff;
}

.status-pill--in-progress {
  background: #e5e7eb;
}

.status-pill--sold {
  background: #22c55e;
  color: #ffffff;
}

.status-pill--unavailable {
  background: #f97373;
  color: #ffffff;
}

/* In the active (green) card, keep the pill white */
.quote-request-card--active .quote-request-card__status-pill {
  background: #ffffff;
  color: #111827;
}

/* Container track */
.quote-filter-toggle {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  padding: 4px;
  width: 100%;
}

/* Items: equal width */
.quote-filter-toggle__item {
  flex: 1;                              /* <-- equal spacing */
  text-align: center;                   /* center text horizontally */
  padding: 0.45rem 0;                   /* vertical padding only */
  border-radius: 999px;
  text-decoration: none;
  color: #4b5563;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

/* Active pill */
.quote-filter-toggle__item--active {
  background: #b9ff65;
  color: #000;
  font-weight: 700;
}

/* Hover for inactive */
.quote-filter-toggle__item:not(.quote-filter-toggle__item--active):hover {
  color: #111827;
}

/* Card overall */
#business-requests-page .card {
  border-radius: 24px;
}

/* === HEADER === */
.quote-chat-container {
  height: 100%;
}

.quote-chat-header {
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.quote-chat-title {
  font-weight: 700;
}

.quote-chat-price {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

/* Status pill + save button */
.quote-chat-status-form {
  white-space: nowrap;
}

.quote-chat-status-select {
  border-radius: 999px;
  border-color: #d1d5db;
  padding-inline: 1.75rem;
  font-size: 0.85rem;
  height: 32px;
}

.quote-chat-status-select:focus {
  box-shadow: none;
}

.quote-chat-status-save {
  border-radius: 10px;
  font-size: 0.8rem;
  padding-inline: 0.9rem;
}

.quote-chat-kebab {
  border-radius: 10px;
}

/* === CHAT BODY === */
.quote-chat-body {
  background: #eef2ee;          /* light grey/green canvas */
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  min-height: 260px;
}

/* Message rows */
.quote-chat-message-row {
  margin-bottom: 0.9rem;
  position: relative;
}

.quote-chat-message__sender {
  color: #6b7280;
  margin-bottom: 0.2rem;
}

/* Bubbles */
.quote-chat-message__bubble {
  border-radius: 16px;
  padding: 0.55rem 0.8rem;
  max-width: 70vw;
  font-size: 0.9rem;
  position: relative;
  overflow: visible;
}

/* Incoming (user) */
.quote-chat-message--in .quote-chat-message__bubble {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* Outgoing (business) */
.quote-chat-message--out .quote-chat-message__bubble {
  background: #6b7f73;          /* your green/grey */
  color: #ffffff;
}

.quote-chat-message--out .quote-chat-message__time {
  color: rgba(255, 255, 255, 0.85);
}

/* Time inside bubble */
.quote-chat-message__time {
  margin-top: 0.2rem;
  text-align: right;
  font-size: 0.75rem;
  color: #6b7280;
}

.quote-chat-message__actions {
  position: absolute;
  top: 6px;
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  z-index: 3;
}

.quote-chat-message--in .quote-chat-message__actions {
  right: -72px;
}

.quote-chat-message--out .quote-chat-message__actions {
  left: -72px;
}

.quote-chat-message-row:hover .quote-chat-message__actions,
.quote-chat-message:hover .quote-chat-message__actions,
.quote-chat-message:focus-within .quote-chat-message__actions,
.quote-chat-message__actions:hover {
  opacity: 1;
  pointer-events: auto;
}

.quote-chat-message__action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pn-border-soft, #e5e7eb);
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  padding: 0;
}

.quote-chat-message__action:hover,
.quote-chat-message__action:focus {
  background: var(--pn-surface-hover, #f3f4f6);
  color: #111827;
  outline: none;
}

.quote-chat-message__action .material-symbols-rounded {
  font-size: 18px;
}

.quote-chat-reaction-menu {
  position: absolute;
  top: -42px;
  left: 0;
  display: inline-flex;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--pn-border-soft, #e5e7eb);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.quote-chat-message--out .quote-chat-reaction-menu {
  left: auto;
  right: 0;
}

.quote-chat-reaction-menu[hidden] {
  display: none;
}

.quote-chat-reaction-menu button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
}

.quote-chat-reaction-menu button:hover,
.quote-chat-reaction-menu button:focus {
  background: rgba(17, 24, 39, 0.07);
  outline: none;
}

.quote-chat-message__reply-quote {
  width: 100%;
  display: grid;
  gap: 2px;
  margin-bottom: 7px;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid #2563eb;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #374151;
  text-align: left;
}

.quote-chat-message--out .quote-chat-message__reply-quote {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

.quote-chat-message__reply-quote strong {
  color: #2563eb;
  font-size: 0.82rem;
  line-height: 1.15;
}

.quote-chat-message--out .quote-chat-message__reply-quote strong {
  color: #b9d7ff;
}

.quote-chat-message__reply-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
}

.quote-chat-message__reactions {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.quote-chat-message__reactions:empty {
  display: none;
}

.quote-chat-message__reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #ffffff;
  font-size: 14px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}

.quote-chat-message__reaction--pending {
  opacity: 0.64;
  transform: scale(0.96);
}

.quote-chat-message--highlight .quote-chat-message__bubble {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.quote-chat-message__attachments {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}

.quote-chat-message__attachments:empty {
  display: none;
}

.quote-chat-message__image-link {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.08);
  cursor: zoom-in;
}

.quote-chat-message__image {
  display: block;
  width: min(280px, 58vw);
  max-height: 260px;
  object-fit: cover;
}

.quote-chat-message__file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(280px, 58vw);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.08);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.quote-chat-message__file span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-chat-message__file .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 20px;
}

.quote-chat-message__image-link--pending,
.quote-chat-message__file--pending {
  pointer-events: none;
}

.quote-image-viewer[hidden] {
  display: none;
}

.quote-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.quote-image-viewer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5, 10, 18, 0.82);
  cursor: zoom-out;
}

.quote-image-viewer__stage {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
}

.quote-image-viewer__image {
  display: block;
  max-width: min(1100px, 94vw);
  max-height: 86vh;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  background: #111827;
}

.quote-image-viewer__close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.quote-image-viewer__close:hover,
.quote-image-viewer__close:focus {
  background: #f3f4f6;
  outline: none;
}

.quote-image-viewer__close .material-symbols-rounded {
  font-size: 22px;
}

.quote-image-viewer-open {
  overflow: hidden;
}

/* === INPUT AREA === */
/* OUTER BOX – matches structure */
.quote-chat-shell {
  background: #ECEFEC;
  border: 1px solid #E0E0E0;
  border-radius: 24px;
  padding: 0;
  /* key bit: give it a viewport-based height */
  height: calc(100vh - 200px);  /* adjust 160px if you need more/less above */
  display: flex;
}

/* Main chat layout */
.quote-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.quote-chat-loading {
  width: 100%;
  min-height: 100%;
  background: #ECEFEC;
  border-radius: 24px;
}

.quote-chat-loading__content {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.quote-chat-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(17, 17, 17, 0.12);
  border-top-color: var(--pn-green);
  border-radius: 50%;
  animation: quoteChatSpin 0.8s linear infinite;
}

.quote-chat-load-error {
  margin: 18px;
  padding: 14px 16px;
  color: #842029;
  background: #fff1f0;
  border: 1px solid #f3c7c3;
  border-radius: 8px;
}

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

/* HEADER (white inside box) */
.quote-chat__header {
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.quote-chat-title {
  font-weight: 700;
}

.quote-chat-price {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.quote-chat-status-select {
  border-radius: 999px;
  border-color: #d1d5db;
  padding-inline: 1.4rem;
  font-size: 0.85rem;
  height: 32px;
}

.quote-chat-status-select:focus {
  box-shadow: none;
}

/* Kebab */
.quote-chat-kebab {
  border-radius: 10px;
}

/* CHAT BODY (grey area in middle) */
.quote-chat__body {
  background: #ECEFEC;
  padding: 20px 20px 14px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}



.quote-chat-message-row {
  margin-bottom: 0.9rem;
}

.quote-chat__body .quote-chat-message-row:last-child {
  margin-bottom: 0;
}

[data-optimistic-status]:empty {
  display: none;
}

.quote-chat-message__sender {
  color: #6b7280;
  margin-bottom: 0.2rem;
}

.quote-chat-message__bubble {
  border-radius: 16px;
  padding: 0.55rem 0.8rem;
  max-width: 70vw;
  font-size: 0.9rem;
  position: relative;
  overflow: visible;
}

/* Incoming (user) */
.quote-chat-message--in .quote-chat-message__bubble {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* Outgoing (business) */
.quote-chat-message--out .quote-chat-message__bubble {
  background: #6b7f73;   /* your greenish bubble */
  color: #ffffff;
}

.quote-chat-message--out .quote-chat-message__time {
  color: rgba(255, 255, 255, 0.85);
}

/* Time text */
.quote-chat-message__time {
  margin-top: 0.2rem;
  text-align: right;
  font-size: 0.75rem;
  color: #6b7280;
}

/* INPUT SECTION (white bar at bottom inside box) */
.quote-chat__input {
  background: #ffffff;
  border-radius: 0 0 24px 24px;
  padding: 12px 20px 16px;
  flex-shrink: 0;         /* never shrink the input */
}

.quote-chat-reply-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-left: 3px solid #2563eb;
  border-radius: 8px;
  background: var(--pn-surface-soft, #f3f4f6);
  color: #374151;
}

.quote-chat-reply-preview[hidden] {
  display: none;
}

.quote-chat-reply-preview > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1;
}

.quote-chat-reply-preview strong {
  color: #2563eb;
  font-size: 0.84rem;
  line-height: 1.1;
}

.quote-chat-reply-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.quote-chat-reply-preview button {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  padding: 0;
}

.quote-chat-reply-preview button:hover,
.quote-chat-reply-preview button:focus {
  background: rgba(17, 24, 39, 0.07);
  color: #111827;
  outline: none;
}

.quote-chat-reply-preview .material-symbols-rounded {
  font-size: 18px;
}

.pn-chat-input-control,
.quote-chat-input-group {
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  overflow: visible;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.pn-chat-input-control__field,
.quote-chat-input-field {
  min-width: 0;
  flex: 1;
  height: 46px;
  border: none;
  padding: 0 14px;
  background: transparent;
  box-shadow: none;
}

.pn-chat-attach {
  position: relative;
  flex: 0 0 auto;
}

.pn-chat-attach__toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #111827;
}

.pn-chat-attach__toggle:hover,
.pn-chat-attach__toggle:focus {
  background: rgba(17, 24, 39, 0.06);
  outline: none;
}

.pn-chat-attach__toggle .material-symbols-rounded {
  font-size: 22px;
}

.pn-chat-attach__menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: 168px;
  padding: 6px;
  border: 1px solid var(--pn-border-soft, #e5e7eb);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.pn-chat-attach__menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 9px 10px;
  color: #111827;
  text-align: left;
}

.pn-chat-attach__menu button > span:last-child {
  display: grid;
  gap: 1px;
  line-height: 1.15;
}

.pn-chat-attach__menu button small {
  color: #6b7280;
  font-size: 0.72rem;
}

.pn-chat-attach__menu button:hover,
.pn-chat-attach__menu button:focus {
  background: rgba(17, 24, 39, 0.06);
  outline: none;
}

.pn-chat-attach__menu .material-symbols-rounded {
  font-size: 20px;
}

.pn-chat-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pn-chat-attach-preview__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.06);
  color: #374151;
  font-size: 0.8rem;
}

.pn-chat-attach-preview__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-chat-attach-preview__thumb {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(17, 24, 39, 0.09);
}

.pn-chat-attach-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-chat-attach-preview__thumb .material-symbols-rounded {
  font-size: 18px;
}

.pn-chat-attach-preview__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #2563eb;
  transition: width 140ms ease;
}

.pn-chat-attach-preview__item--done .pn-chat-attach-preview__progress {
  opacity: 0;
}

.pn-chat-attach-preview__item--error {
  color: #991b1b;
  background: #fee2e2;
}

.pn-chat-attach-preview__status {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 0.72rem;
}

.pn-chat-attach-preview__remove {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  padding: 0;
}

.pn-chat-attach-preview__remove:hover,
.pn-chat-attach-preview__remove:focus {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  outline: none;
}

.pn-chat-attach-preview__remove .material-symbols-rounded {
  font-size: 17px;
}

.pn-chat-attach__error {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 6px);
  z-index: 21;
  max-width: min(320px, 82vw);
  padding: 6px 9px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  box-shadow: 0 10px 24px rgba(153, 27, 27, 0.12);
  font-size: 0.78rem;
  line-height: 1.25;
}

.pn-chat-input-control__field:focus,
.quote-chat-input-field:focus {
  outline: none;
  box-shadow: none;
}

/* Send button – no background, just icon */
.pn-chat-input-control__button,
.quote-chat-input-send {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
}

.pn-chat-input-control__button span,
.quote-chat-input-send span {
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
  color: #111827;
}

.pn-chat-input-control__button:focus,
.pn-chat-input-control__button:hover,
.quote-chat-input-send:focus,
.quote-chat-input-send:hover {
  box-shadow: none;
}

.quote-chat-send-spinner {
  width: 18px;
  height: 18px;
  display: inline-block;
  border: 2px solid rgba(17, 24, 39, 0.18);
  border-top-color: #111827;
  border-radius: 50%;
  animation: quoteChatSpin 0.75s linear infinite;
}

.btn-primary .quote-chat-send-spinner {
  border-color: rgba(255, 255, 255, 0.34);
  border-top-color: #ffffff;
}

.add-car-submit__content,
.add-car-submit__loading {
  align-items: center;
  gap: 6px;
}

.add-car-submit__content:not(.d-none),
.add-car-submit__loading:not(.d-none) {
  display: inline-flex;
}

.quote-chat-message--pending {
  opacity: 0.72;
}

.quote-chat-message--failed {
  opacity: 1;
}

.quote-chat-message--failed [data-optimistic-status] {
  color: #b42318 !important;
  font-weight: 600;
}
/* Top summary cards */
.bd-card {
  background: #ECEFEC;                /* soft light grey */
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Big metric number */
.bd-metric {
  font-size: 2rem;
  font-weight: 700;
}

/* Lime primary pill (Add / View in table) */
.bd-primary-btn,
.bd-primary-pill {
  background: #b9ff65;
  border-radius: 999px;
  border: none;
  color: #000000;
  font-weight: 600;
  padding-inline: 1.4rem;
  padding-block: 0.35rem;
  font-size: 0.85rem;
}

.bd-primary-pill {
  padding-inline: 1.1rem;
}

/* Outline pill (View detail) */
.bd-pill-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  font-weight: 500;
  padding-inline: 1.1rem;
  padding-block: 0.3rem;
  font-size: 0.8rem;
}

.bd-pill-btn:hover,
.bd-primary-btn:hover,
.bd-primary-pill:hover {
  opacity: 0.95;
}

/* Latest requests panel */
.bd-panel {
  background: #ECEFEC;                /* soft light grey */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0; /* important so it hugs the column */
}


/* Empty state area */
.bd-empty {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Table styling */
.bd-table {
  font-size: 0.85rem;
}

.bd-table thead tr {
  background: #eef1f0;
}

.bd-table th {
  border-color: #e5e7eb;
  font-weight: 600;
}

.bd-table td {
  border-color: #e5e7eb;
}

/* Status pill inside table */
.bd-status-pill {
  display: inline-block;
  padding: 0.15rem 0.9rem;
  border-radius: 999px;
  background: #e5e7eb;
  font-size: 0.75rem;
  color: #374151;
}

.bd-card-empty img{
    max-width: 140px;
}
.bd-empty img{
    max-width: 140px;
}

/* Card title – Inter Black */
.bd-card-title {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;            /* Inter Black */
  font-size: 1rem;
}

/* Metric – RL Aqva big number */
.bd-metric {
  font-family: "RL Aqva", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.4rem;           /* bump up to match design */
  line-height: 1.1;
  font-weight: 400;
}

/* Caption under metric – Inter Bold */
.bd-metric-caption {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;            /* bold */
  font-size: 0.9rem;
  color: #555;                 /* slightly darker than muted */
}

/* Card header layout */
.bd-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Latest requests – part name + message */
.bd-part-name {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;           /* bold line for part name */
}

.bd-part-message-snippet {
  font-size: 0.8rem;
  color: #6b7280;             /* muted grey */
  margin-top: 2px;
}

/* Mobile menu icon button – no border, no background */
.topbar-menu-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

.topbar-menu-toggle:focus {
  outline: none;
  box-shadow: none;
}

/* Mobile logo sizing */
.topbar-mobile-logo {
  height: 24px;  /* adjust to taste, e.g. 28px */
  width: auto;
  display: block;
}

/* Make offcanvas match sidebar background */
.app-offcanvas {
  /* use the same colour as your sidebar */
  background-color: #f3f5f2; /* adjust to your actual sidebar bg */
}
.offcanvas-body {
    background-color: #f3f5f2 !important;
}

.app-offcanvas .offcanvas-body {
  padding: 0;
}

/* Mobile close button in sidebar header */
.sidebar-close-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sidebar-close-btn:focus {
  outline: none;
  box-shadow: none;
}


/* Make the avatar circle the whole clickable button */
.topbar-account-btn {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;           /* no extra padding if you just want the circle */
  cursor: pointer;
}

.topbar-account-btn:focus {
  outline: none;
  box-shadow: none;
}

/* Hide Bootstrap caret, but keep dropdown behaviour */
.topbar-account-btn.dropdown-toggle::after {
  display: none !important;
}

/* Avatar circle */
.topbar-avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}


/* Location pill */
.topbar-location {
  border-radius: 999px;
  background: #F3F4F6;
  transition: background-color 0.15s ease;
  padding: 4px 10px;
  font-size: 13px;
  color: #111827;
  text-decoration: none !important;
}


.topbar-location-icon {
  font-size: 18px;
}
/* Ensure the text inside also never becomes underlined */
.topbar-location-text {
    text-decoration: none !important;
}

.topbar-location:hover {
  background: #E1E4E0; /* darker than base */
}

/* Keep text clean (just in case) */
.topbar-location,
.topbar-location:link,
.topbar-location:visited,
.topbar-location:hover,
.topbar-location:active {
  text-decoration: none;
}
/* Notifications count badge */
.notif-count-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  font-weight:700;
  line-height:1;

  background: var(--pn-green, #19B37A); /* fallback if variable not set */
  color:#fff;
  border:2px solid #fff; /* makes it look crisp on white topbar */
}

.notifications-popover-wrap {
  position: relative;
}

.notifications-popover {
  position: absolute;
  top: calc(100% + 14px);
  right: -10px;
  z-index: 1100;
  width: min(430px, calc(100vw - 24px));
  border: 1px solid var(--pn-border-soft);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
  color: var(--pn-text);
}

.notifications-popover__arrow {
  position: absolute;
  top: -11px;
  right: 22px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-left: 1px solid var(--pn-border-soft);
  border-top: 1px solid var(--pn-border-soft);
  transform: rotate(45deg);
}

.notifications-popover__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--pn-border-soft);
  background: #ffffff;
  border-radius: 8px 8px 0 0;
}

.notifications-popover__header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

.notifications-popover__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pn-text);
}

.notifications-popover__close:hover {
  background: var(--pn-surface-hover);
}

.notifications-popover__body {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 0 0 8px 8px;
}

.notifications-popover__items {
  max-height: min(420px, calc(100vh - 220px));
  overflow-y: auto;
}

.notifications-popover__item {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--pn-border-soft);
  color: var(--pn-text);
  text-decoration: none;
}

.notifications-popover__item:hover {
  background: var(--pn-surface-hover);
}

.notifications-popover__item-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.notifications-popover__item-main strong,
.notifications-popover__item-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notifications-popover__item-main strong {
  font-size: 15px;
  font-weight: 750;
}

.notifications-popover__item-main span,
.notifications-popover__item-main small {
  color: var(--pn-muted);
  font-size: 13px;
}

.notifications-popover__loading,
.notifications-popover__empty {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  color: var(--pn-muted);
}

.notifications-popover__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(17, 24, 39, 0.14);
  border-top-color: var(--pn-green);
  border-radius: 50%;
  animation: quoteChatSpin 0.75s linear infinite;
}

.notifications-popover__all {
  display: block;
  padding: 14px 24px;
  color: var(--pn-text);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-top: 1px solid var(--pn-border-soft);
}

.notifications-popover__all:hover {
  background: var(--pn-surface-hover);
}

/* ===== Partnest Auth (Sign up / Sign in) ===== */

.pn-auth{
  min-height: calc(100vh - 40px);
  padding: 40px 16px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.pn-auth-header{
  max-width: 720px;
}

.pn-auth-title{
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}

.pn-auth-sub{
  font-size: 14px;
  color: #666;
}

.pn-auth-sub a{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pn-auth-card{
  width: 100%;
  max-width: 720px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Top toggle bar */
.pn-role-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border-bottom: 1px solid #ececec;
}

.pn-role-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  background: #fff;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.15s ease, background 0.15s ease;
}

.pn-role-btn:active{
  transform: translateY(1px);
}

.pn-role-btn.is-active{
  background: #a6ff4d; /* punchy Partnest green like your mock */
  border-color: #a6ff4d;
}

.pn-role-icn{
  font-size: 20px;
}

/* Body */
.pn-auth-body{
  background: #eef2ee; /* soft grey-green panel like your mock */
  padding: 26px 22px 28px;
}

.pn-google-btn{
  height: 52px;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: #111;
  font-weight: 700;
}

.pn-google-g{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pn-google-g img{
  width: 22px;
  height: 22px;
  display: block;
}

.pn-divider{
  position: relative;
  margin: 18px 0 16px;
  text-align: center;
  color: #666;
  font-weight: 600;
  font-size: 13px;
}

.pn-divider:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:#e0e0e0;
}

.pn-divider span{
  position: relative;
  background: #eef2ee;
  padding: 0 12px;
}

.pn-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pn-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pn-label{
  font-size: 13px;
  font-weight: 800;
  color: #111;
}

.pn-input{
  height: 52px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 0 16px;
  background: #fff;
  outline: none;
}

.pn-input:focus{
  border-color: #111;
}

.pn-primary-btn{
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: #a6ff4d;
  color: #111;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
}

.pn-primary-btn:active{
  transform: translateY(1px);
}

.pn-error{
  font-size: 12px;
  color: #c0392b;
}

/* Footer */
.pn-auth-footer{
  font-size: 12px;
  color: #666;
  max-width: 720px;
}

.pn-auth-footer a{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 520px){
  .pn-auth-title{ font-size: 34px; }
  .pn-auth-body{ padding: 20px 16px 22px; }
}
.pn-step-head{ margin-bottom: 10px; }
.pn-step-title{
  font-weight: 900;
  font-size: 22px;
  color: #111;
}
.pn-step-sub{
  font-size: 13px;
  color: #666;
  line-height: 1.35;
  margin-top: 6px;
}

/* === PartNest “Auth / Card” UI (reusable) === */
.pn-auth-wrap{
  min-height: 100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 48px 16px;
  background:#f8fafc;
}

.pn-auth-brand{
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.pn-auth-logo{
  height: 34px;
  width:auto;
}

.pn-card{
  width: 100%;
  max-width: 720px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(17,24,39,0.06);
  margin-top: 56px;
}

.pn-card-head{ margin-bottom: 16px; }

.pn-h1{
  margin:0 0 6px 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color:#111827;
}

.pn-h2{
  margin:0 0 6px 0;
  font-size: 18px;
  font-weight: 800;
  color:#111827;
}

.pn-sub{
  margin:0;
  color:#6b7280;
  font-size: 14px;
}

.pn-sub-sm{
  margin: 0 0 12px 0;
  color:#6b7280;
  font-size: 13px;
}

.pn-divider{
  height:1px;
  background:#eef2f7;
  margin: 18px 0;
}

.pn-form{ display:block; }

.pn-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pn-span-2{ grid-column: 1 / -1; }

@media (max-width: 640px){
  .pn-grid-2{ grid-template-columns: 1fr; }
}

.pn-field{ display:block; }

.pn-label{
  display:block;
  font-size: 13px;
  color:#374151;
  font-weight: 700;
  margin-bottom: 6px;
}

.pn-req{ color:#ef4444; }

.pn-input{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background:#fff;
  color:#111827;
  outline:none;
}

.pn-input:focus{
  border-color:#16a34a;
  box-shadow: 0 0 0 4px rgba(22,163,74,0.15);
}

.pn-hint{
  margin-top: 8px;
  font-size: 12px;
  color:#6b7280;
}

.pn-address-row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.pn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 800;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}

.pn-btn-outline{
  border-color:#e5e7eb;
  background:#fff;
  color:#111827;
  white-space:nowrap;
}

.pn-btn-outline:hover{
  background:#f9fafb;
}

.pn-btn-primary{
  background:#16a34a;
  color:#fff;
}

.pn-btn-primary:hover{
  background:#11833b;
}

.pn-btn-full{
  width:100%;
  margin-top: 14px;
}

.pn-lookup-result{
  margin-top: 12px;
}

.pn-lookup-card{
  border:1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  background:#fff;
}

.pn-lookup-map{
  width: 180px;
  min-width: 180px;
  height: 110px;
  border-radius: 12px;
  overflow:hidden;
  background:#f3f4f6;
  border:1px solid #eef2f7;
}

.pn-lookup-map img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pn-lookup-meta{ flex:1; }

.pn-lookup-address{
  font-weight: 800;
  color:#111827;
  margin-bottom: 6px;
  font-size: 14px;
}

.pn-lookup-actions{
  margin-top: 10px;
}

.pn-logo-row{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

@media (max-width: 640px){
  .pn-logo-row{ flex-direction: column; }
}

.pn-logo-preview{
  width: 160px;
  height: 160px;
  border-radius: 16px;
  border:1px solid #e5e7eb;
  overflow:hidden;
  background:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pn-logo-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pn-logo-placeholder{
  text-align:center;
  color:#9ca3af;
}

.pn-logo-placeholder .material-symbols-rounded{
  font-size: 34px;
  display:block;
}

.pn-logo-placeholder-text{
  font-size: 12px;
  font-weight: 700;
}

.pn-logo-upload{ flex:1; }

/* Alerts */
.pn-alert{
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 12px 0;
}

.pn-alert-success{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.pn-alert-error{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.pn-alert-warning{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; }

.pn-auth-wrap{
    padding: 48px 16px 64px;
  }
  .pn-auth-inner{
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  .pn-brand{
    font-weight: 800;
    font-size: 28px;
    letter-spacing: .2px;
    margin-bottom: 18px;
  }

  /* Headings */
  .pn-page-head{ margin-bottom: 18px; }
  .pn-h1{
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #111827;
  }
  .pn-subtitle{
    margin: 0;
    color: #6b7280;
    font-size: 14px;
  }

  .space-up{
    margin-bottom: 20px !important;
    margin-top: -6px !important;
  }

  /* Card */
  .pn-card{
    text-align: left;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(17,24,39,.06);
    overflow: hidden;
    margin-top: 18px;
  }
  .pn-card-section{
    padding: 22px 22px;
  }
  .pn-divider{
    height: 1px;
    background: #eef2f7;
  }

  .pn-h2{
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 10px;
    color: #111827;
  }
  .pn-help{
    margin: -6px 0 12px;
    color: #6b7280;
    font-size: 13px;
  }

  /* Fields */
  .pn-field{ text-align: left; }
  .pn-label{
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
  }
  .pn-required{ color: #ef4444; }

  .pn-input{
    width: 100%;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: 12px 12px;
    font-size: 14px;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
  }
  .pn-input:focus{
    border-color: #c7d2fe;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
  }

  .pn-grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Address row */
  .pn-address-row{
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 10px;
    align-items: center;
  }

  /* Lookup result block */
  .pn-lookup .confirm-block{
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: center;
  }
  .pn-lookup img{
    width: 140px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
  }
  .pn-lookup .pn-lookup-meta{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pn-lookup .pn-lookup-title{
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 0;
  }

  /* Confirmed pill */
  .pn-confirmed{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
  }
  .pn-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #10b981;
    display: inline-block;
  }

  /* Buttons */
  .pn-btn{
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    user-select: none;
  }
  .pn-btn-light{
    background: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
  }
  .pn-btn-light:hover{
    background: #f9fafb;
  }
  .pn-btn-primary{
    background: #16a34a;
    color: #ffffff;
  }
  .pn-btn-primary:hover{
    background: #11833b;
  }
  .pn-btn-block{
    width: 100%;
    padding: 12px 16px;
  }

  /* Logo row */
  .pn-logo-row{
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 14px;
    align-items: start;
  }
  .pn-logo-preview{
    width: 180px;
    height: 180px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .pn-logo-preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pn-logo-empty{
    color: #6b7280;
    font-size: 12px;
    text-align: center;
    padding: 10px;
  }
  .pn-logo-empty-title{
    font-weight: 700;
    margin-top: 6px;
  }

  .pn-footnote{
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
  }

  /* Responsive */
  @media (max-width: 640px){
    .pn-grid-2{ grid-template-columns: 1fr; }
    .pn-address-row{ grid-template-columns: 1fr; }
    .pn-logo-row{ grid-template-columns: 1fr; }
  .pn-logo-preview{ width: 100%; height: 180px; }
  .pn-lookup .confirm-block{ grid-template-columns: 1fr; }
  .pn-lookup img{ width: 100%; height: 160px; }
  }


 /* ---- Page layout ---- */
.pn-page{
  background: transparent; /* no page background */
}

.pn-container{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto; /* center */
}

/* ---- Header ---- */
.pn-header{
  margin: 18px auto 16px;
}

.pn-h1{
  font-family: "RL Aqva", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 8px;
  color: #0f172a;
  text-align: center;
}

.pn-sub{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  text-align: center;
}

@media (max-width: 576px){
  .pn-h1{ font-size: 34px; }
}

/* ---- Card ---- */
.pn-card{
  background: #ECEFEC;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  box-shadow: none;
  padding: 22px;
}

.pn-card-sm{
  max-width: 520px;
  margin: 0 auto;
}

/* ---- Typography inside card ---- */
.pn-h2{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 14px;
  color: #0f172a;
}

.pn-divider{
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  margin: 18px 0;
}

/* ---- Form ---- */
.pn-label{
  display: block;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #0f172a;
}

.pn-req{ color: #ef4444; }

.pn-input{
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  padding: 12px 12px !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #ffffff !important;
}

.pn-input:focus{
  border-color: rgba(15, 23, 42, 0.25) !important;
  box-shadow: none !important;
}

.pn-help{
  color: #6b7280;
  font-size: 12px;
}

/* Address row */
.pn-address-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 576px){
  .pn-address-row{ grid-template-columns: 1fr; }
}

/* Buttons */
.pn-btn{
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.pn-btn-outline{
  background: transparent !important;
  border: 2px solid #0f172a !important;
  color: #0f172a !important;
}

.pn-btn-outline:hover{
  background: #0f172a !important;
  color: #ffffff !important;
}

.pn-btn-primary{
  background: #9BFA6D !important;
  border: 1px solid #9BFA6D !important;
  color: #0f172a !important;
}

.pn-btn-primary:hover{
  filter: brightness(0.96);
}

/* Confirm card */
.pn-confirm-card{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px){
  .pn-confirm-card{
    grid-template-columns: 1fr;
  }
}

.pn-confirm-map img{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  display: block;
}

.pn-confirm-title{
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.pn-confirm-address{
  color: #0f172a;
}

.pn-confirm-actions{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

/* Logo */
.pn-logo-grid{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 768px){
  .pn-logo-grid{ grid-template-columns: 1fr; }
}

.pn-logo-preview{
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pn-logo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-logo-empty{
  color: #94a3b8;
  font-weight: 700;
}

/* Actions */
.pn-actions{
  margin-top: 18px;
}

/* Alerts */
.pn-alert{
  border-radius: 10px;
}

/* Animation classes */
.fade-out {
  animation: fadeOut 0.4s ease forwards;
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.slide-up {
  animation: slideUp 0.5s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search form in results state */
.results-search-form {
  max-width: 640px;
  margin: 0 auto;
}

/* Smooth transitions for all interactive elements */
.search-copilot input {
  transition: all 0.3s ease;
}

.search-copilot input:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.sticky-top {
  border-bottom: none !important;
}

/* --------------------------------------------
   PERPLEXITY-INSPIRED APP SKIN
   Warm neutral shell, quiet left rail, low contrast
   surfaces, centered content, green primary actions.
-------------------------------------------- */
:root {
  --pn-green: #9BFA6D;
  --pn-green-hover: #83d85a;
  --pn-page: #fbfaf8;
  --pn-sidebar: rgba(39, 26, 0, 0.035);
  --pn-surface: #ffffff;
  --pn-surface-soft: rgba(39, 26, 0, 0.035);
  --pn-surface-hover: rgba(39, 26, 0, 0.055);
  --pn-border: rgba(39, 26, 0, 0.11);
  --pn-border-soft: rgba(39, 26, 0, 0.07);
  --pn-text: rgb(39, 37, 30);
  --pn-muted: rgba(39, 37, 30, 0.65);
  --pn-faint: rgba(39, 37, 30, 0.5);
  --pn-radius-sm: 6px;
  --pn-radius: 12px;
  --pn-radius-lg: 16px;
  --pn-content: 920px;
}

html,
body {
  min-height: 100%;
  background: var(--pn-page) !important;
}

body {
  color: var(--pn-text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

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

a:hover {
  color: var(--pn-text);
}

.text-secondary,
.text-muted,
.small {
  color: var(--pn-muted) !important;
}

h1,
.brand-heading,
.page-title,
.pn-h1 {
  color: var(--pn-text) !important;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

h1.fw-bold,
.display-1.fw-bold,
.display-2.fw-bold,
.display-3.fw-bold,
.display-4.fw-bold,
.display-5.fw-bold,
.display-6.fw-bold {
  font-weight: 500 !important;
}

h2,
h3,
h4,
h5,
h6,
.pn-h2,
.bd-card-title,
.inventory-section-title {
  color: var(--pn-text) !important;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.material-symbols-rounded {
  color: currentColor;
  font-variation-settings:
    "FILL" 0,
    "wght" 350,
    "GRAD" 0,
    "opsz" 24;
}

.app-sidebar {
  width: 200px;
  background: var(--pn-sidebar);
  border-right: 1px solid var(--pn-border-soft);
  padding: 8px;
  height: 100vh;
}

.app-sidebar .sidebar-inner {
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.app-sidebar.is-collapsed {
  width: 56px;
}

.sidebar-header {
  min-height: 48px;
  padding: 0;
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  justify-content: center;
  border-radius: var(--pn-radius);
}

.sidebar-logo:hover,
.sidebar-toggle:hover,
.sidebar-close-btn:hover,
.topbar-menu-toggle:hover,
.topbar-icon-btn:hover,
.topbar-account-btn:hover {
  background: var(--pn-surface-hover);
}

.sidebar-logo-img {
  max-width: 112px;
  height: 22px;
}

.sidebar-toggle,
.sidebar-close-btn,
.topbar-menu-toggle,
.topbar-icon-btn,
.topbar-account-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--pn-radius);
  color: var(--pn-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-toggle:hover,
.sidebar-close-btn:hover,
.topbar-menu-toggle:hover,
.topbar-icon-btn:hover,
.topbar-account-btn:hover {
  color: var(--pn-text);
}

.sidebar-nav {
  padding-top: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 10px;
}

.sidebar-section {
  margin-top: 0 !important;
  padding-block: 1px;
}

.sidebar-section + .sidebar-section {
  margin-top: 14px !important;
}

.sidebar-section-label {
  margin: 10px 12px 6px;
  color: var(--pn-faint);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.sidebar-link {
  min-height: 40px;
  gap: 8px;
  margin: 1px 0;
  padding: 8px 10px;
  border-radius: var(--pn-radius);
  color: var(--pn-muted);
  font-size: 14px;
  font-weight: 400;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-link .material-symbols-rounded {
  width: 24px;
  min-width: 24px;
  text-align: center;
  font-size: 21px;
}

.sidebar-link:hover {
  background: var(--pn-surface-hover);
  color: var(--pn-text);
}

.sidebar-link.active {
  background: var(--pn-green);
  color: #111111;
  font-weight: 500;
}

.sidebar-link.active .material-symbols-rounded {
  color: #111111;
}

.app-sidebar.is-collapsed .sidebar-section-label {
  display: none;
}

.app-sidebar.is-collapsed .sidebar-link {
  justify-content: center;
  padding-inline: 8px;
}

.sidebar-searches {
  margin: 4px 0 0 32px;
  display: grid;
  gap: 2px;
}

.sidebar-searches--previous {
  margin: 8px 0 0 22px;
}

.sidebar-search-new,
.sidebar-search-item {
  min-height: 34px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--pn-radius);
}

.sidebar-search-new {
  grid-template-columns: 20px 1fr;
  padding: 6px 8px;
  color: var(--pn-muted);
  font-size: 13px;
  text-decoration: none;
}

.sidebar-search-new .material-symbols-rounded {
  font-size: 18px;
}

.sidebar-search-item > a {
  min-width: 0;
  display: grid;
  padding: 6px 4px 6px 8px;
  color: var(--pn-muted);
  text-decoration: none;
}

.sidebar-search-title {
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-search-date,
.sidebar-search-empty {
  color: var(--pn-faint);
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-search-empty {
  margin: 4px 8px;
}

.sidebar-search-menu {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  color: var(--pn-faint);
  background: transparent;
}

.sidebar-search-menu .material-symbols-rounded {
  font-size: 18px;
}

.sidebar-search-new:hover,
.sidebar-search-item:hover,
.sidebar-search-item.active {
  background: var(--pn-surface-hover);
  color: var(--pn-text);
}

.sidebar-search-item.active .sidebar-search-title {
  font-weight: 500;
}

.sidebar-search-menu:hover {
  color: var(--pn-text);
  background: rgba(17, 17, 17, 0.06);
}

.sidebar-search-dropdown {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 80;
  min-width: 132px;
  padding: 4px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.sidebar-search-menu-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--pn-text);
  background: transparent;
  font-size: 13px;
  text-align: left;
}

.sidebar-search-menu-item .material-symbols-rounded {
  font-size: 18px;
}

.sidebar-search-menu-item:hover {
  background: var(--pn-surface-hover);
}

.sidebar-search-menu-item-danger {
  color: #b42318;
}

.sidebar-search-menu-item-danger:hover {
  background: #fff1f0;
}

.app-sidebar.is-collapsed .sidebar-searches {
  display: none;
}

.sidebar-profile-dock {
  position: relative;
  flex: 0 0 auto;
  padding-top: 8px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.sidebar-profile-button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 8px;
  background: #ffffff;
  color: var(--pn-text);
  text-align: left;
}

.sidebar-profile-button:hover,
.sidebar-profile-button[aria-expanded="true"] {
  background: var(--pn-surface-hover);
}

.sidebar-profile-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-profile-main {
  min-width: 0;
  display: grid;
}

.sidebar-profile-name {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-subtitle,
.sidebar-profile-menu small {
  color: var(--pn-faint);
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-profile-chevron {
  color: var(--pn-muted);
  font-size: 19px;
}

.sidebar-profile-menu {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: calc(100% + 8px);
  z-index: 120;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.sidebar-profile-menu__header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  gap: 8px;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.sidebar-profile-menu__header strong,
.sidebar-profile-menu__header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-menu__items,
.sidebar-profile-logout {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px;
}

.sidebar-profile-logout {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.sidebar-profile-menu__item {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  background: transparent;
  color: var(--pn-text);
  font-size: 13px;
  text-decoration: none;
  text-align: left;
}

.sidebar-profile-menu__item:hover {
  background: var(--pn-surface-hover);
}

.sidebar-profile-menu__item .material-symbols-rounded {
  width: 20px;
  font-size: 19px;
}

.sidebar-profile-menu__item--button {
  width: 100%;
}

.app-sidebar.is-collapsed .sidebar-profile-button {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-inline: 6px;
}

.app-sidebar.is-collapsed .sidebar-profile-main,
.app-sidebar.is-collapsed .sidebar-profile-chevron {
  display: none;
}

.app-sidebar.is-collapsed .sidebar-profile-menu {
  left: 0;
  right: auto;
  width: 240px;
}

.app-shell-with-sidebar {
  margin-left: 200px;
  background: var(--pn-page);
}

.app-shell-with-sidebar.sidebar-collapsed {
  margin-left: 56px;
}

.content {
  width: 100%;
  max-width: calc(var(--pn-content) + 48px);
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.pn-shell-page-heading {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.pn-shell-page-heading span,
.pn-shell-card-skeleton span,
.pn-shell-card-skeleton strong,
.pn-shell-card-skeleton em,
.pn-shell-skeleton-row span,
.pn-search-skeleton-input,
.pn-search-skeleton-chips span {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 8px;
  background: #e7ece5;
}

.pn-shell-page-heading span:first-child {
  width: 190px;
  height: 28px;
}

.pn-shell-page-heading span:last-child {
  width: min(420px, 70%);
  height: 16px;
}

.pn-dashboard-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.pn-shell-card-skeleton,
.pn-shell-table-skeleton {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e1e6df;
  border-radius: 8px;
  background: #ffffff;
}

.pn-shell-card-skeleton {
  min-height: 150px;
}

.pn-shell-card-skeleton span {
  width: 55%;
  height: 16px;
}

.pn-shell-card-skeleton strong {
  width: 34%;
  height: 34px;
}

.pn-shell-card-skeleton em {
  width: 74%;
  height: 14px;
}

.pn-shell-skeleton-row {
  display: grid;
  grid-template-columns: .8fr 1.2fr 1fr .7fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #edf0ec;
}

.pn-shell-skeleton-row:last-child {
  border-bottom: 0;
}

.pn-shell-skeleton-row span {
  height: 16px;
}

.pn-search-results-skeleton {
  display: grid;
  gap: 12px;
}

.pn-search-skeleton-page {
  min-height: calc(100vh - 140px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
}

.pn-search-skeleton-input {
  width: min(720px, 88vw);
  height: 58px;
  border-radius: 18px;
}

.pn-search-skeleton-chips {
  display: flex;
  gap: 10px;
}

.pn-search-skeleton-chips span {
  width: 110px;
  height: 34px;
  border-radius: 999px;
}

.pn-shell-page-heading span::after,
.pn-shell-card-skeleton span::after,
.pn-shell-card-skeleton strong::after,
.pn-shell-card-skeleton em::after,
.pn-shell-skeleton-row span::after,
.pn-search-skeleton-input::after,
.pn-search-skeleton-chips span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: pnSkeletonSweep 1.1s infinite;
}

.topbar {
  background: var(--pn-page) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.topbar .container-fluid {
  max-width: none;
  margin-inline: 0;
  padding-inline: 24px;
}

.topbar-mobile-logo {
  height: 22px;
}

.topbar-location {
  min-height: 36px;
  border: 1px solid var(--pn-border-soft);
  border-radius: var(--pn-radius);
  background: var(--pn-surface-soft);
  color: var(--pn-muted);
  font-size: 14px;
  font-weight: 400;
}

.topbar-location:hover {
  background: var(--pn-surface-hover);
  color: var(--pn-text);
}

.topbar-avatar-initials {
  width: 32px;
  height: 32px;
  background: var(--pn-text);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}

.notif-count-badge,
.notification-dot {
  background: var(--pn-green) !important;
  border-color: var(--pn-page) !important;
  color: #111111;
}

.navbar {
  background: var(--pn-page) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.navbar .container,
footer .container,
main > .container,
.section-pad > .container,
.section-pad-sm > .container,
.pn-container,
.pn-auth-header,
.pn-auth-card,
.pn-auth-footer,
.results-search-form {
  max-width: var(--pn-content);
}

.navbar-brand {
  color: var(--pn-text) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.nav-link {
  color: var(--pn-muted) !important;
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--pn-radius-sm);
}

.nav-link:hover,
.nav-link.active {
  color: var(--pn-text) !important;
  background: var(--pn-surface-hover);
}

.card,
.pn-card,
.inventory-card,
.card-body,
.bd-card,
.bd-panel,
.quote-chat-shell,
.quote-request-card,
.pn-auth-card,
.dropdown-menu,
.modal-content,
.toast,
.pn-lookup-card,
.pn-confirm-card,
.pn-logo-preview,
.border.rounded,
.rounded.border,
.p-4.border.rounded {
  background: var(--pn-surface) !important;
  border: 1px solid var(--pn-border-soft) !important;
  border-radius: var(--pn-radius) !important;
  box-shadow: none !important;
  color: var(--pn-text);
}

.card-body {
  border: 0 !important;
}

.toast.pn-app-toast {
  width: auto;
  min-width: 300px;
  max-width: min(420px, calc(100vw - 32px));
  background: #ffffff !important;
  border: 1px solid var(--pn-border-soft) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
  overflow: hidden;
}

.toast.pn-app-toast-success {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.toast.pn-app-toast .pn-app-toast-body {
  color: inherit !important;
  font-size: 14px;
  font-weight: 600;
}

.bg-light,
.pn-auth-body,
.quote-chat-body,
.quote-chat__body,
.app-offcanvas,
.offcanvas-body,
.bd-table thead tr,
.img-placeholder,
.pn-lookup .confirm-block {
  background: var(--pn-surface-soft) !important;
}

.border,
.border-top,
.border-bottom,
.dropdown-divider,
.quote-chat-header,
.quote-chat-input-group,
.pn-chat-input-control,
.pn-divider,
.form-control,
.form-select,
.pn-input,
.input-group-text,
.btn-outline-secondary,
.bd-pill-btn,
.quote-filter-toggle,
.quote-chat-status-select {
  border-color: var(--pn-border-soft) !important;
}

.form-control,
.form-select,
.pn-input,
.input-group-text,
.quote-chat-input-group,
.pn-chat-input-control,
.model-select-display {
  border-radius: var(--pn-radius) !important;
  background-color: var(--pn-surface) !important;
  color: var(--pn-text) !important;
  box-shadow: none !important;
}

.form-control::placeholder,
.pn-input::placeholder,
.pn-chat-input-control__field::placeholder,
.quote-chat-input-field::placeholder {
  color: var(--pn-faint);
}

.form-control:focus,
.form-select:focus,
.pn-input:focus,
.pn-chat-input-control__field:focus,
.quote-chat-input-field:focus,
.model-search-input:focus {
  border-color: var(--pn-border) !important;
  box-shadow: 0 0 0 3px rgba(39, 26, 0, 0.055) !important;
}

.btn,
.pn-btn,
.bd-primary-btn,
.bd-primary-pill,
.bd-pill-btn,
.quote-filter-toggle__item,
.quote-chat-status-save,
.quote-chat-kebab,
.pn-role-btn,
.pn-google-btn,
.pn-primary-btn {
  border-radius: var(--pn-radius) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-accent,
.btn-primary:focus,
.btn-success:focus,
.pn-btn-primary,
.pn-primary-btn,
.bd-primary-btn,
.bd-primary-pill,
.quote-filter-toggle__item--active,
.quote-request-card--active,
.pn-role-btn.is-active {
  background: var(--pn-green) !important;
  border-color: var(--pn-green) !important;
  color: #111111 !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-accent:hover,
.pn-btn-primary:hover,
.pn-primary-btn:hover,
.bd-primary-btn:hover,
.bd-primary-pill:hover {
  background: var(--pn-green-hover) !important;
  border-color: var(--pn-green-hover) !important;
  color: #111111 !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn-outline-secondary,
.pn-btn-outline,
.pn-btn-light,
.bd-pill-btn,
.pn-google-btn,
.quote-filter-toggle {
  background: var(--pn-surface) !important;
  color: var(--pn-text) !important;
  border: 1px solid var(--pn-border-soft) !important;
}

.btn-outline-secondary:hover,
.pn-btn-outline:hover,
.pn-btn-light:hover,
.bd-pill-btn:hover,
.pn-google-btn:hover,
.quote-filter-toggle__item:not(.quote-filter-toggle__item--active):hover {
  background: var(--pn-surface-hover) !important;
  color: var(--pn-text) !important;
}

.badge {
  border-radius: var(--pn-radius-sm);
  font-weight: 500;
  letter-spacing: 0;
}

.table {
  color: var(--pn-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--pn-border-soft);
}

.table th {
  color: var(--pn-muted);
  font-weight: 500;
}

.quote-request-card:hover {
  border-color: var(--pn-border) !important;
  box-shadow: none !important;
}

.quote-chat__header,
.quote-chat__input {
  background: var(--pn-surface) !important;
}

.quote-chat-message--in .quote-chat-message__bubble {
  box-shadow: none !important;
  border: 1px solid var(--pn-border-soft);
}

.quote-chat-message--out .quote-chat-message__bubble {
  background: var(--pn-text);
}

.hero {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
}

.section-pad {
  padding: 56px 0;
}

.section-pad-sm {
  padding: 32px 0;
}

footer {
  background: var(--pn-page);
  border-color: var(--pn-border-soft) !important;
}

@media (max-width: 991.98px) {
  .app-shell-with-sidebar,
  .app-shell-with-sidebar.sidebar-collapsed {
    margin-left: 0;
  }

  .content {
    padding: 28px 16px 56px;
  }

  .offcanvas .app-sidebar {
    background: var(--pn-sidebar);
    padding: 8px;
  }

  .topbar .container-fluid {
    padding-inline: 16px;
  }
}

/* --------------------------------------------
   PERPLEXITY SKIN FIXUPS
   Fix logo clipping, mobile offcanvas stacking,
   nav label sizing, search centering, and public
   action button sizing.
-------------------------------------------- */
.sidebar-logo {
  width: auto;
  min-width: 0;
  max-width: 128px;
  height: 40px;
  justify-content: flex-start;
  overflow: visible;
  padding-inline: 0;
}

.sidebar-logo-img {
  display: block;
  width: auto;
  max-width: 128px;
  height: 24px;
  object-fit: contain;
}

.app-sidebar.is-collapsed .sidebar-logo {
  display: none !important;
}

.sidebar-section-label {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin: 1px 0;
  padding: 8px 12px;
  color: var(--pn-muted);
  font-size: 14px;
  line-height: 20px;
}

.app-offcanvas {
  z-index: 1065;
}

.offcanvas-backdrop {
  z-index: 1055;
}

.offcanvas .app-sidebar {
  z-index: 1;
}

body.offcanvas-backdrop,
body.modal-open {
  overflow: hidden;
}

.content:has(#searchPage) {
  max-width: none;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
}

#searchPage {
  width: 100%;
}

#searchPage #welcomeSection {
  min-height: calc(100vh - 56px) !important;
  padding-top: 24px;
  padding-bottom: 48px;
}

#searchPage #resultsSection {
  width: 100%;
  max-width: var(--pn-content);
  margin-inline: auto;
}

body:not(.app) .navbar .btn,
body:not(.app) .btn-accent,
body:not(.app) .btn-primary,
body:not(.app) .btn-success,
body:not(.app) .pn-primary-btn,
body:not(.app) .pn-btn-primary {
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px !important;
  border-radius: var(--pn-radius) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

body:not(.app) .btn-lg,
body:not(.app) .btn-sm {
  min-height: 40px;
  padding: 0 16px !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

body:not(.app) .pn-primary-btn {
  width: 100%;
}

body:not(.app) .btn-link {
  min-height: auto;
  padding: 0 !important;
}

.content:has(.quote-requests-page),
.content:has(.quote-request-detail-page) {
  max-width: none;
  padding: 32px clamp(18px, 3vw, 44px) 56px;
}

.quote-requests-page,
.quote-request-detail-page {
  width: 100%;
}

.quote-requests-page__header,
.quote-request-detail-page__topbar {
  margin-bottom: 18px;
}

.quote-requests-page__search {
  max-width: none;
}

.quote-requests-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.quote-requests-toolbar .business-request-search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.quote-requests-toolbar .quote-filter-toggle {
  flex: 0 1 280px;
  width: auto;
  min-width: 180px;
  margin: 0;
}

.quote-requests-toolbar .quote-filter-toggle__item {
  min-width: auto;
  padding-inline: 14px;
  white-space: nowrap;
}

.quote-requests-table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e1e6df;
  border-radius: 8px;
  background: #ffffff;
}

.quote-requests-table-wrap.is-loading {
  min-height: 360px;
}

.quote-requests-table {
  min-width: 1040px;
  font-size: 0.88rem;
}

.quote-requests-table thead th {
  padding: 14px 16px;
  color: #647067;
  background: #f4f6f3;
  border-bottom: 1px solid #e1e6df;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-requests-table tbody td {
  padding: 15px 16px;
  border-color: #edf0ec;
}

.quote-requests-table__row {
  cursor: pointer;
}

.quote-requests-table__row:hover {
  background: #f8faf7;
}

.quote-requests-table__title,
.quote-requests-table__strong {
  color: #111827;
  font-weight: 800;
}

.quote-requests-table__title {
  text-decoration: none;
}

.quote-requests-table__title:hover {
  color: #2563eb;
}

.quote-requests-table__date {
  color: #111827;
  font-weight: 750;
}

.quote-requests-table__muted,
.quote-requests-table__message {
  color: #64748b;
}

.quote-requests-table__message {
  max-width: 260px;
}

.quote-requests-open-btn,
.quote-request-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8ded5;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
}

.quote-requests-open-btn span,
.quote-request-icon-btn span {
  font-size: 20px;
}

.quote-requests-open-btn:hover,
.quote-request-icon-btn:hover {
  background: #f4f6f3;
  border-color: #c7d1c2;
}

.quote-request-icon-btn--danger {
  color: #b42318;
}

.quote-requests-empty {
  padding: 28px 18px;
  color: #64748b;
  text-align: center;
}

.quote-requests-table-wrap.is-loading .quote-requests-table {
  opacity: 0.18;
}

.quote-requests-table-skeleton {
  position: absolute;
  inset: 48px 0 0;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0;
  background: #ffffff;
}

.quote-requests-skeleton-row {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.4fr 1.1fr 1.5fr;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #edf0ec;
}

.quote-requests-skeleton-row span {
  position: relative;
  overflow: hidden;
  height: 18px;
  border-radius: 8px;
  background: #e7ece5;
}

.quote-requests-skeleton-row span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: pnSkeletonSweep 1.1s infinite;
}

.quote-requests-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.quote-requests-pagination__summary {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 700;
}

.quote-requests-pagination__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.quote-requests-pagination__btn {
  min-width: 36px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #d8ded5;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.quote-requests-pagination__btn:hover {
  background: #f4f6f3;
  border-color: #c7d1c2;
}

.quote-requests-pagination__btn.is-active {
  background: #b9ff65;
  border-color: #a8f052;
}

.quote-requests-pagination__btn.is-disabled {
  pointer-events: none;
  color: #94a3b8;
  background: #f8faf7;
}

.quote-request-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-weight: 700;
  text-decoration: none;
}

.quote-request-back-link span {
  font-size: 20px;
}

.quote-request-detail-header {
  display: grid;
  gap: 18px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid #e1e6df;
  border-radius: 8px;
  background: #ffffff;
}

.quote-request-detail-header__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.quote-request-detail-header__eyebrow {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-request-detail-header__title {
  color: #111827;
  font-size: 1.35rem;
  font-weight: 900;
}

.quote-request-detail-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: #64748b;
  font-size: 0.9rem;
}

.quote-request-detail-header__price {
  min-width: 150px;
  text-align: right;
}

.quote-request-detail-header__price strong,
.quote-request-detail-header__price span {
  display: block;
}

.quote-request-detail-header__price strong {
  color: #111827;
  font-size: 1.05rem;
}

.quote-request-detail-header__price span {
  color: #64748b;
  font-size: 0.78rem;
}

.quote-request-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.quote-request-detail-actions form {
  margin: 0;
}

.quote-request-detail-add-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  background: #b9ff65;
  color: #111827;
  font-weight: 800;
}

.quote-request-detail-add-btn:hover {
  background: #a8f052;
}

.quote-chat-detail-shell {
  min-width: 0;
}

.quote-request-detail-page .quote-chat-shell {
  height: calc(100vh - 190px);
  min-height: 520px;
}

.quote-request-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.quote-request-detail-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid #e1e6df;
  border-radius: 8px;
  background: #ffffff;
}

.quote-request-detail-fields {
  display: grid;
  gap: 12px;
}

.quote-request-detail-field {
  display: grid;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2ef;
}

.quote-request-detail-field:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.quote-request-detail-field span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quote-request-detail-field strong {
  color: #111827;
  font-size: 0.94rem;
  font-weight: 800;
}

.quote-request-detail-field em,
.quote-request-detail-field p {
  margin: 0;
  color: #64748b;
  font-size: 0.84rem;
  font-style: normal;
}

.quote-detail-panel-skeleton {
  gap: 14px;
}

.sidebar-search-skeleton {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
}

.sidebar-search-skeleton span {
  position: relative;
  overflow: hidden;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
}

.sidebar-search-skeleton span:first-child {
  width: 78%;
}

.sidebar-search-skeleton span:last-child {
  width: 42%;
}

.quote-detail-skeleton-line,
.quote-chat-skeleton__body span,
.quote-chat-skeleton__input {
  position: relative;
  overflow: hidden;
  display: block;
  height: 16px;
  border-radius: 8px;
  background: #e7ece5;
}

.quote-detail-skeleton-line::after,
.quote-chat-skeleton__body span::after,
.quote-chat-skeleton__input::after,
.sidebar-search-skeleton span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: pnSkeletonSweep 1.1s infinite;
}

.quote-detail-skeleton-line--short {
  width: 45%;
}

.quote-detail-skeleton-line--title {
  width: 72%;
  height: 24px;
}

.quote-chat-shell--loading {
  overflow: hidden;
}

.quote-chat-skeleton {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  min-height: 100%;
}

.quote-chat-skeleton__header {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 24px 24px 0 0;
  background: #ffffff;
}

.quote-chat-skeleton__body {
  display: grid;
  align-content: end;
  gap: 14px;
  padding: 20px;
  background: #ECEFEC;
}

.quote-chat-skeleton__body span {
  height: 36px;
  max-width: 66%;
}

.quote-chat-skeleton__body span:nth-child(even) {
  justify-self: end;
  width: 58%;
}

.quote-chat-skeleton__body span:nth-child(odd) {
  width: 64%;
}

.quote-chat-skeleton__input {
  height: 42px;
  margin: 14px 20px 16px;
  background: #e7ece5;
}

@keyframes pnSkeletonSweep {
  to { transform: translateX(100%); }
}

@media (max-width: 720px) {
  .content:has(.quote-requests-page),
  .content:has(.quote-request-detail-page) {
    padding: 22px 12px 40px;
  }

  .quote-requests-toolbar,
  .quote-request-detail-layout,
  .quote-request-detail-header__main {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quote-requests-toolbar .business-request-search {
    min-width: 0;
  }

  .quote-requests-skeleton-row {
    grid-template-columns: 1fr 1fr;
  }

  .quote-requests-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .quote-requests-pagination__controls {
    justify-content: flex-start;
  }

  .quote-request-detail-header__price {
    text-align: left;
  }

  .quote-request-detail-actions {
    align-items: stretch;
  }

  .pn-dashboard-skeleton-grid {
    grid-template-columns: 1fr;
  }

  .pn-shell-skeleton-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991.98px) {
  .offcanvas.app-offcanvas {
    width: min(400px, 86vw);
  }

  .offcanvas .app-sidebar {
    width: 100% !important;
  }

  .offcanvas .sidebar-logo {
    max-width: 150px;
  }

  .offcanvas .sidebar-logo-img {
    max-width: 150px;
  }
}