.professional-portal #quotes-section { color: var(--portal-ink); }
.portal-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.quotes-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.quotes-heading-copy h1 { margin: 0 0 7px; color: var(--portal-navy); font: 700 clamp(1.65rem, 2.4vw, 2.2rem)/1.18 "Manrope", sans-serif; }
.quotes-heading-copy p { margin: 0; color: var(--portal-muted); font-size: .9rem; }
.quotes-summary-grid { width: min(560px, 52%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quotes-summary-card { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 21px; border: 1px solid var(--portal-line); border-radius: 8px; background: var(--portal-white); box-shadow: 0 5px 18px rgba(16,28,44,.035); }
.quotes-summary-card div { min-width: 0; display: flex; flex-direction: column; }
.quotes-summary-card div > span { color: var(--portal-muted); font: 700 .72rem/1.3 "Manrope", sans-serif; text-transform: uppercase; }
.quotes-summary-card strong { min-height: 31px; margin-top: 6px; overflow-wrap: anywhere; color: var(--portal-navy); font: 800 1.55rem/1.2 "Manrope", sans-serif; }
.quotes-summary-card small { margin-top: 3px; color: #7a8696; font-size: .7rem; }
.quotes-summary-card > .material-icons { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; background: var(--portal-mint); color: var(--portal-teal-dark); font-size: 23px; }
.quotes-summary-card.is-loading strong, .quotes-filter-tabs.is-loading .quotes-filter-count { color: transparent; border-radius: 4px; background: linear-gradient(100deg, #edf1f2 30%, #f8f9f9 45%, #edf1f2 60%); background-size: 300% 100%; animation: quotes-shimmer 1.25s infinite; }

.quotes-filter-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 17px; padding: 3px 2px; scrollbar-width: thin; }
.quotes-filter-tabs button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; margin: 0; padding: 0 13px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #526174; cursor: pointer; font: 700 .77rem/1 "Manrope", sans-serif; }
.quotes-filter-tabs button:hover { background: #edf3f2; color: var(--portal-teal-dark); }
.quotes-filter-tabs button.is-active { border-color: #bce6de; background: var(--portal-mint); color: var(--portal-teal-dark); }
.quotes-filter-count { min-width: 20px; padding: 3px 6px; border-radius: 10px; background: #e8ecef; color: #4d5968; text-align: center; font-size: .65rem; }
.quotes-filter-tabs button.is-active .quotes-filter-count { background: var(--portal-white); color: var(--portal-teal-dark); }

.quotes-table-card { overflow: hidden; border: 1px solid var(--portal-line); border-radius: 8px; background: var(--portal-white); box-shadow: 0 5px 20px rgba(16,28,44,.035); }
.quotes-table-scroll { width: 100%; overflow-x: auto; }
.quotes-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: auto; }
.quotes-table th { height: 46px; padding: 0 14px; border-bottom: 1px solid var(--portal-line); background: #f8faf9; color: #657287; text-align: left; font: 700 .68rem/1.2 "Manrope", sans-serif; text-transform: uppercase; }
.quotes-table td { height: 76px; padding: 11px 14px; border-bottom: 1px solid #edf0f2; color: #344155; font-size: .76rem; vertical-align: middle; }
.quotes-table tbody tr:last-child td { border-bottom: 0; }
.quotes-table tbody tr:hover { background: #fbfdfc; }
.quotes-table td > strong, .quotes-quote-cell strong { display: block; color: var(--portal-navy); font: 700 .77rem/1.3 "Manrope", sans-serif; }
.quotes-table td > span, .quotes-quote-cell span { display: block; max-width: 190px; margin-top: 3px; overflow: hidden; color: var(--portal-muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.quotes-quote-cell { min-width: 185px; display: flex; align-items: center; gap: 11px; }
.quotes-row-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e8f6f3; color: var(--portal-teal-dark); }
.quotes-row-icon img { width: 100%; height: 100%; object-fit: cover; }
.quotes-row-icon .material-icons { font-size: 18px; }
.quotes-amount { color: var(--portal-navy) !important; font: 800 .82rem/1.3 "Manrope", sans-serif !important; white-space: nowrap; }
.quotes-status { display: inline-flex !important; width: fit-content; align-items: center; margin: 0 !important; padding: 5px 9px; border-radius: 12px; font: 800 .63rem/1 "Manrope", sans-serif !important; white-space: nowrap; }
.quotes-status.is-pending { background: #fff2cc; color: #8a6100; }
.quotes-status.is-approved { background: #e4f5ed; color: #116b4c; }
.quotes-status.is-rejected { background: #feeceb; color: #a9362d; }
.quotes-status.is-completed { background: #e8eef8; color: #34598c; }
.quotes-row-actions { min-width: 124px; display: flex; align-items: center; gap: 7px; }
.quotes-secondary-button, .quotes-primary-button, .quotes-completed-button, .quotes-page-button { min-height: 33px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0 11px; border: 1px solid #d4dce0; border-radius: 5px; background: var(--portal-white); color: #354356; cursor: pointer; font: 700 .67rem/1 "Manrope", sans-serif; white-space: nowrap; }
.quotes-secondary-button:hover, .quotes-page-button:hover:not(:disabled) { border-color: #82cfc2; color: var(--portal-teal-dark); }
.quotes-primary-button { border-color: var(--portal-teal-dark); background: var(--portal-teal-dark); color: var(--portal-white); }
.quotes-primary-button:hover { background: #06695f; }
.quotes-completed-button { border-color: #cddce9; background: #eff4f8; color: #45698c; cursor: default; }
.quotes-completed-button .material-icons { font-size: 15px; }
.quotes-row-skeleton { height: 38px; border-radius: 5px; background: linear-gradient(100deg, #edf1f2 30%, #f8f9f9 45%, #edf1f2 60%); background-size: 300% 100%; animation: quotes-shimmer 1.25s infinite; }
.quotes-table.is-empty { display: none; }
.quotes-mobile-list { display: none; }

.quotes-pagination { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 15px; border-top: 1px solid var(--portal-line); color: var(--portal-muted); font-size: .7rem; }
.quotes-pagination[hidden] { display: none; }
.quotes-page-controls { display: flex; align-items: center; gap: 5px; }
.quotes-page-button { min-width: 32px; height: 32px; min-height: 32px; padding: 0 8px; }
.quotes-page-button.is-active { border-color: var(--portal-teal-dark); background: var(--portal-teal-dark); color: white; }
.quotes-page-button:disabled { opacity: .45; cursor: not-allowed; }

.quotes-empty-state { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px; text-align: center; }
.quotes-empty-state > .material-icons { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #edf5f3; color: var(--portal-teal-dark); font-size: 25px; }
.quotes-empty-state h2 { margin: 15px 0 6px; color: var(--portal-navy); font: 700 1rem/1.3 "Manrope", sans-serif; }
.quotes-empty-state p { max-width: 420px; margin: 0 0 17px; color: var(--portal-muted); font-size: .78rem; line-height: 1.6; }
.quotes-empty-state.is-error > .material-icons { background: #fff0ee; color: #ad3f36; }
.quotes-how-card { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 18px 20px; border: 1px solid #c9e8e2; border-radius: 8px; background: #eef9f7; }
.quotes-how-card > .material-icons { color: var(--portal-teal-dark); font-size: 23px; }
.quotes-how-card h2 { margin: 0 0 4px; color: var(--portal-navy); font: 700 .8rem/1.3 "Manrope", sans-serif; }
.quotes-how-card p { margin: 0; color: #526174; font-size: .73rem; line-height: 1.55; }

.quotes-modal-open { overflow: hidden; }
.quotes-modal-backdrop { position: fixed; z-index: 2500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,18,30,.62); }
.quotes-completion-modal { position: relative; width: min(460px, 100%); padding: 34px 31px 27px; border-radius: 8px; background: var(--portal-white); box-shadow: 0 24px 70px rgba(0,0,0,.25); text-align: center; }
.quotes-modal-close { position: absolute; top: 13px; right: 13px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #657287; cursor: pointer; }
.quotes-modal-close:hover { background: #edf1f2; }
.quotes-modal-close .material-icons { font-size: 20px; }
.quotes-modal-icon { width: 55px; height: 55px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; background: #ddf5ee; color: var(--portal-teal-dark); }
.quotes-modal-icon .material-icons { font-size: 28px; }
.quotes-completion-modal h2 { margin: 0 0 10px; color: var(--portal-navy); font: 700 1.2rem/1.3 "Manrope", sans-serif; }
.quotes-completion-modal > p { margin: 0; color: var(--portal-muted); font-size: .78rem; line-height: 1.65; }
.quotes-modal-error { min-height: 20px; padding-top: 9px; color: #a9362d !important; font-weight: 700; }
.quotes-modal-actions { display: flex; justify-content: center; gap: 9px; margin-top: 17px; }
.quotes-modal-actions button { min-height: 39px; padding-inline: 17px; }
.quotes-toast { position: fixed; z-index: 2600; right: 22px; bottom: 22px; width: min(340px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border: 1px solid #b9e4d9; border-radius: 7px; background: white; box-shadow: 0 14px 42px rgba(16,28,44,.18); }
.quotes-toast > .material-icons { color: var(--portal-teal-dark); }
.quotes-toast strong, .quotes-toast span { display: block; }
.quotes-toast strong { color: var(--portal-navy); font: 700 .78rem/1.3 "Manrope", sans-serif; }
.quotes-toast span { margin-top: 2px; color: var(--portal-muted); font-size: .7rem; }

@keyframes quotes-shimmer { to { background-position-x: -300%; } }

@media (max-width: 1180px) {
  .quotes-page-header { align-items: flex-start; flex-direction: column; }
  .quotes-summary-grid { width: 100%; max-width: 620px; }
}

@media (max-width: 760px) {
  .quotes-page-header { gap: 20px; margin-bottom: 20px; }
  .quotes-summary-card { min-height: 105px; padding: 16px; }
  .quotes-summary-card strong { font-size: 1.3rem; }
  .quotes-table-scroll { display: none; }
  .quotes-mobile-list { display: block; }
  .quotes-mobile-card { padding: 17px; border-bottom: 1px solid var(--portal-line); }
  .quotes-mobile-card:last-child { border-bottom: 0; }
  .quotes-mobile-header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .quotes-mobile-header > div { min-width: 0; }
  .quotes-mobile-header strong, .quotes-mobile-header div > span { display: block; }
  .quotes-mobile-header strong { color: var(--portal-navy); font: 700 .78rem/1.3 "Manrope", sans-serif; }
  .quotes-mobile-header div > span { margin-top: 2px; overflow: hidden; color: var(--portal-muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
  .quotes-mobile-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 17px 0 14px; }
  .quotes-mobile-details div { min-width: 0; }
  .quotes-mobile-details dt { color: #7a8696; font-size: .63rem; text-transform: uppercase; }
  .quotes-mobile-details dd { margin: 3px 0 0; overflow-wrap: anywhere; color: #354356; font-size: .75rem; }
  .quotes-mobile-amount { display: block; margin-bottom: 13px; color: var(--portal-navy); font: 800 1rem/1.3 "Manrope", sans-serif; }
  .quotes-row-actions { width: 100%; }
  .quotes-row-actions button { flex: 1; min-height: 38px; }
  .quotes-pagination { align-items: flex-start; flex-direction: column; }
  .quotes-page-controls { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .quotes-how-card { margin-top: 14px; }
}

@media (max-width: 480px) {
  .quotes-summary-grid { grid-template-columns: 1fr; }
  .quotes-filter-tabs { max-width: 100%; }
  .quotes-mobile-card { padding: 15px; }
  .quotes-mobile-header { grid-template-columns: 34px minmax(0, 1fr); }
  .quotes-mobile-header > .quotes-status { grid-column: 2; }
  .quotes-mobile-details { grid-template-columns: 1fr; gap: 9px; }
  .quotes-modal-actions { flex-direction: column-reverse; }
  .quotes-modal-actions button { width: 100%; }
  .quotes-completion-modal { padding: 31px 20px 21px; }
}