/*
 * Component styles. One section per macro in templates/components/; class names follow
 * block__element--modifier so a component never styles another component's markup.
 */

/* -- logo -------------------------------------------------------------------- */
/* Inline SVG filled with currentColor: white on the graphite sidebar, ink elsewhere. */

.logo{display:block;flex-shrink:0;height:auto}
.logo--wordmark{width:166px;aspect-ratio:1189/273}
.logo--mark{width:37px;aspect-ratio:348/273}

/* -- icon -------------------------------------------------------------------- */

.icon{width:20px;height:20px;flex-shrink:0}
.icon--sm{width:16px;height:16px}
.icon--lg{width:24px;height:24px}

/* -- button ------------------------------------------------------------------ */

.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:40px;padding:var(--space-2-5) 15px;
  border:1px solid var(--color-line);border-radius:var(--radius-md);
  background:var(--color-surface);color:var(--color-text);
  font-size:var(--text-control);line-height:var(--line-control);font-weight:var(--weight-medium);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast);
}
.button:hover{background:var(--color-surface-hover);border-color:var(--color-line-hover)}
.button--primary{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
.button--primary:hover{background:var(--color-ink-hover);border-color:var(--color-ink-hover)}
.button--ghost{border-color:transparent;background:transparent;color:var(--color-text-muted)}
.button--ghost:hover{background:var(--color-surface-hover);border-color:transparent;color:var(--color-text)}
.button--danger{color:var(--tone-negative-text);border-color:var(--tone-negative-line)}
.button--danger:hover{background:var(--tone-negative-bg);border-color:var(--tone-negative-line)}
.button--sm{min-height:32px;padding:var(--space-1-5) var(--space-2-5);font-size:var(--text-xs)}
.button--block{display:flex;width:100%}
.button--icon-only{padding:var(--space-2);min-width:40px}
.button:disabled,.button[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
.button .icon{width:18px;height:18px}
.button__label{overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
  .button{min-height:var(--touch-target)}
  .button--sm{min-height:36px}
}

/* -- field ------------------------------------------------------------------- */

.field{display:grid;gap:7px;min-width:0;align-content:start}
.field__label{font-size:var(--text-xs);color:#777d85;font-weight:var(--weight-medium)}
.field__required{color:var(--tone-negative-text);margin-left:2px}
.field__control{
  width:100%;min-width:0;padding:11px 13px;
  border:1px solid var(--color-line-strong);border-radius:var(--radius-md);
  background:var(--color-surface);color:inherit;
  font-size:var(--text-control);line-height:var(--line-control);
}
.field__control::placeholder{color:var(--color-placeholder);opacity:1}
.field__control:hover{border-color:var(--color-line-hover)}
.field__control:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}
textarea.field__control{min-height:95px;resize:vertical}
select.field__control{
  appearance:none;padding-right:38px;cursor:pointer;
  background:var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368717d' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;
}
.field__hint{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5}
.field__errors{margin:0;padding:0;list-style:none;font-size:var(--text-xs);line-height:1.5;color:var(--tone-negative-text)}
.field--invalid .field__control{border-color:var(--tone-negative-text)}
.field--full{grid-column:1/-1}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start}

@media (max-width:900px){
  .formgrid{grid-template-columns:1fr}
  .field--full{grid-column:auto}
  /* 16px stops iOS Safari from zooming into a focused control. */
  .field__control{font-size:16px}
}

/* -- card -------------------------------------------------------------------- */

.card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);overflow:hidden}
.card--interactive{transition:border-color var(--duration-fast),box-shadow var(--duration-fast),transform var(--duration-fast)}
.card--interactive:hover{border-color:#bfc3c9;box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);padding:var(--space-6) var(--space-6) 0}
.card__title{font-size:var(--text-card);line-height:var(--line-snug);overflow-wrap:anywhere}
.card__subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}
.card__body{flex:1;padding:var(--space-6);min-width:0;overflow-wrap:anywhere}
.card__head+.card__body{padding-top:var(--space-4)}

@media (max-width:900px){
  .card__head{padding:var(--space-4) var(--space-4) 0}
  .card__body{padding:var(--space-4)}
}

/* -- badge / status_badge ---------------------------------------------------- */

.badge{
  display:inline-flex;align-items:center;gap:var(--space-1-5);max-width:100%;
  padding:3px 9px;border:1px solid transparent;border-radius:var(--radius-sm);
  background:var(--tone-neutral-bg);color:var(--tone-neutral-text);
  font-size:var(--text-xs);line-height:1.5;font-weight:var(--weight-medium);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
}
.badge--neutral{background:var(--tone-neutral-bg);color:var(--tone-neutral-text)}
.badge--progress{background:var(--tone-progress-bg);color:var(--tone-progress-text);border-color:var(--tone-progress-line)}
.badge--positive{background:var(--tone-positive-bg);color:var(--tone-positive-text)}
.badge--attention{background:var(--tone-attention-bg);color:var(--tone-attention-text);border-color:var(--tone-attention-line)}
.badge--negative{background:var(--tone-negative-bg);color:var(--tone-negative-text);border-color:var(--tone-negative-line)}
.badge--muted{background:var(--tone-muted-bg);color:var(--tone-muted-text)}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge__text{overflow:hidden;text-overflow:ellipsis}

/* -- money ------------------------------------------------------------------- */

.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.money--price{font-size:var(--price-size);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-price)}
.money--empty{color:var(--color-text-subtle)}

/* -- data_table -------------------------------------------------------------- */

.table-scroll{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.data-table caption{text-align:left;font-weight:var(--weight-semibold);font-size:var(--heading-md);padding-bottom:var(--space-3)}
.data-table th{text-align:left;font-weight:var(--weight-medium);color:#758293;font-size:var(--text-sm);padding:var(--space-3) var(--space-4) var(--space-3) 0;border-bottom:1px solid var(--color-line);white-space:nowrap}
.data-table td{padding:15px var(--space-4) 15px 0;border-bottom:1px solid var(--color-line);vertical-align:top;overflow-wrap:anywhere}
.data-table tr:last-child td{border-bottom:0}
.data-table .is-date{white-space:nowrap}
.data-table .is-numeric{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table th:last-child,.data-table td:last-child{padding-right:0}
.data-table__empty td{padding:0}
.data-table--wide{min-width:600px}

/* -- empty_state ------------------------------------------------------------- */

.empty-state{padding:var(--space-12) var(--space-6);border:1px dashed #dfe3e9;border-radius:var(--radius-md);text-align:center;color:#768494;overflow-wrap:anywhere}
.empty-state__icon{display:grid;place-items:center;margin:0 auto var(--space-2-5);color:#a2abb8}
.empty-state__icon .icon{width:33px;height:33px}
.empty-state__title{color:#333c48;font-size:18px}
.empty-state__text{font-size:var(--text-control);line-height:1.7;max-width:480px;margin:var(--space-3) auto 0}
.empty-state__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2);margin-top:18px}
.empty-state--compact{padding:var(--space-5);border:0}

@media (max-width:900px){
  .empty-state{padding:34px 17px}
}

/* -- modal ------------------------------------------------------------------- */
/* Native <dialog>: focus trap, Esc and inert background come from the browser. */

.modal{
  width:100%;max-width:720px;max-height:90vh;padding:var(--space-7);
  border:0;border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);
  box-shadow:var(--shadow-modal);overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;
}
.modal--sm{max-width:460px}
.modal::backdrop{background:var(--color-overlay);backdrop-filter:blur(3px)}
.modal__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.modal__close{flex-shrink:0}
.modal__foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-2-5);margin-top:var(--space-6);align-items:center}

@media (max-width:900px){
  .modal{
    padding:var(--space-5);
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .modal__foot{align-items:stretch}
  .modal__foot>.button{flex:1 1 auto}
}

/* -- toast ------------------------------------------------------------------- */

.toasts{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);z-index:var(--z-toast);display:grid;gap:var(--space-2);justify-items:center;width:max-content;max-width:min(90vw,520px);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-3);padding:13px var(--space-4) 13px 22px;border-radius:var(--space-2-5);background:#1b1e23;color:#fff;font-size:var(--text-sm);line-height:1.5;box-shadow:var(--shadow-popover);pointer-events:auto;overflow-wrap:anywhere}
.toast--negative{background:var(--tone-negative-text)}
.toast__close{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:#c9ccd0}
.toast__close:hover{background:#ffffff1a;color:#fff}
.toast__close .icon{width:16px;height:16px}

@media (max-width:900px){
  .toasts{bottom:calc(var(--mobile-nav-height) + 16px + env(safe-area-inset-bottom))}
}

/* -- htmx -------------------------------------------------------------------- */
/* Replaces the inline indicator styles htmx would inject (disabled in base.html). */

.htmx-indicator{opacity:0;transition:opacity 200ms ease-in}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* -- Checkbox ------------------------------------------------------------- */
.check{display:flex;gap:var(--space-2-5);align-items:flex-start}
.check__control{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--color-ink)}
.check__label{display:grid;gap:var(--space-0-5);font-size:var(--text-control);line-height:var(--line-control);color:var(--color-text-strong);cursor:pointer}
.check__hint{font-size:var(--text-xs);color:var(--color-text-muted)}

/* -- Form errors ---------------------------------------------------------- */
.form-errors{border-radius:var(--radius-md);background:var(--tone-negative-bg);color:var(--tone-negative-text);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);line-height:1.5}
.form-errors__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-1)}

/* -- Tabs ----------------------------------------------------------------- */
.tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--color-line);margin:0 0 var(--space-6);overflow-x:auto;scrollbar-width:thin}
.tabs__tab{padding:var(--space-3) 0;font-size:var(--text-control);line-height:1.5;color:var(--color-text-subtle);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs__tab:hover{color:var(--color-text-strong)}
.tabs__tab[aria-current="page"]{color:var(--color-text-strong);border-bottom-color:var(--color-ink);font-weight:var(--weight-medium)}

/* -- Team list ------------------------------------------------------------ */
.team-list{list-style:none;margin:0;padding:0;display:grid}
.team-list__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--color-line)}
.team-list__row:first-child{border-top:0}
.team-list__who{display:grid;gap:var(--space-0-5);flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.team-list__actions{display:flex;align-items:end;gap:var(--space-2)}
.team-list__actions .field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sidebar__logout{width:100%;border:0;background:none;font:inherit;cursor:pointer;text-align:left}

/* -- Catalog ---------------------------------------------------------------- */
.catalog{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--space-6);align-items:start}
.catalog__filters{position:sticky;top:calc(var(--topbar-height) + var(--space-4))}
.catalog__count{margin:0 0 var(--space-3)}
.catalog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-4)}
.pager{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-6)}
@media (max-width:899px){.catalog{grid-template-columns:1fr}.catalog__filters{position:static}}

/* -- Offer card ------------------------------------------------------------- */
.offer-card{padding:var(--space-4);gap:var(--space-2)}
.offer-card__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}
.offer-card__name{font-size:var(--text-card);line-height:var(--line-snug);margin:0;font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.offer-card__link{color:inherit;text-decoration:none}
.offer-card__link::after{content:"";position:absolute;inset:0}
.offer-card__codes,.offer-card__terms{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted)}
.offer-card__price{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.offer-card__vat{font-size:var(--text-xs);color:var(--color-text-muted)}
.offer-card__actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.offer-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-4)}
.offer-detail__description{white-space:pre-line;font-size:var(--text-control);line-height:var(--line-body);margin:var(--space-3) 0 0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0;font-size:var(--text-control)}
.facts dt{color:var(--color-text-muted)}
.facts dd{margin:0;overflow-wrap:anywhere}

/* -- Requests for quotes ---------------------------------------------------- */
.rfq-list{display:grid;gap:var(--space-3)}
.rfq-row{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4)}
.rfq-row__main{display:grid;gap:var(--space-1);min-width:0}
.rfq-row__title{margin:0;font-size:var(--text-card);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.rfq-row__meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted)}
.rfq-line{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-4);display:grid;gap:var(--space-2)}
.rfq-line__actions{display:flex;justify-content:flex-end}
.rfq-recipients{display:grid;gap:var(--space-2);max-height:280px;overflow:auto;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-3)}

/* -- Quote editor ----------------------------------------------------------- */
.quote-lines{display:grid;gap:var(--space-3)}
.quote-line{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);gap:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-4)}
.quote-line__ask{display:grid;gap:var(--space-1);align-content:start;overflow-wrap:anywhere}
.quote-line__answer{display:grid;gap:var(--space-2)}
.quote-line__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)}
.quote-line__sum{font-size:var(--text-control);text-align:right}
.quote-line.is-unavailable .quote-line__fields,.quote-line.is-unavailable .quote-line__sum{opacity:.45}
.quote-total{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);flex-wrap:wrap}
@media (max-width:899px){.quote-line{grid-template-columns:1fr}}

/* -- Quote comparison matrix ---------------------------------------------- */
.matrix-wrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.matrix{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--text-control)}
.matrix th,.matrix td{padding:var(--space-3);border-bottom:1px solid var(--color-line);vertical-align:top;text-align:left}
.matrix thead th{background:var(--color-surface-muted);font-weight:var(--weight-medium)}
.matrix tbody th,.matrix tfoot th{position:sticky;left:0;background:var(--color-surface);min-width:200px;font-weight:var(--weight-medium)}
.matrix__supplier{display:table-cell}
.matrix__supplier>*{display:block;margin-bottom:var(--space-1)}
.matrix__price{display:block;font-weight:var(--weight-semibold)}
.matrix__note{display:block;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--weight-regular)}
.matrix__pick{margin-top:var(--space-2)}
.matrix__qty{margin-top:var(--space-2);max-width:110px}
.matrix tr.is-over [data-row-status]{color:var(--tone-negative-text)}

/* Catalog filters fold on phones; on wider screens the toggle is hidden. */
.catalog__more{display:grid;gap:var(--space-4)}
.catalog__toggle{display:none}
@media (max-width:899px){
  .catalog__toggle{display:inline-flex;justify-self:start}
  .catalog__more:not(.is-open) .catalog__more-body{display:none}
}

/* -- Top bar bell ------------------------------------------------------------- */
.topbar__bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--touch-target);height:var(--touch-target);color:var(--color-text-strong);border-radius:var(--radius-md)}
.topbar__bell:hover{background:var(--color-surface-hover)}
.topbar__count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-surface);font-size:var(--text-2xs);line-height:18px;text-align:center;font-weight:var(--weight-semibold)}

/* -- Chat ------------------------------------------------------------------ */
.chat{padding:var(--space-4);gap:var(--space-4)}
.chat__feed{display:grid;gap:var(--space-3);max-height:60vh;overflow-y:auto}
.chat__message{max-width:min(560px,85%);justify-self:start;display:grid;gap:var(--space-1)}
.chat__message--mine{justify-self:end;text-align:right}
.chat__meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.chat__body{white-space:pre-line;overflow-wrap:anywhere;background:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--space-2-5) var(--space-3);font-size:var(--text-control);text-align:left}
.chat__message--mine .chat__body{background:var(--color-ink);color:var(--color-surface)}
.chat__form{display:grid;gap:var(--space-2);grid-template-columns:1fr auto;align-items:end}
@media (max-width:899px){.chat__form{grid-template-columns:1fr}}
.notifications{padding:0 var(--space-4)}
.notifications__unread b{font-weight:var(--weight-bold)}
.notifications__unread::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-ink);flex:none}