/** some css for page filters **/
.page-filter-form-inline {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* De labels op deze velden zijn verborgen, dus het form-item is puur de
   input. De flex 'gap' hierboven regelt de ruimte tussen de velden al -
   Claro's eigen margin-block zou daarbovenop een dubbele, wisselende
   sprong geven zodra de rij op kleinere schermen naar twee lijnen omslaat. */
.page-filter-form-inline .form-item,
.page-filter-form-inline .form-actions {
  margin-block: 0;
}

.inline-wrapper {
  display: inline-block;
}

.inline-input {
  min-width: 200px;
  max-width: 300px !important;
}

.inline-button {
  margin-top: 0;
}

/** some css for inline fields in forms **/
.form--inline-row {
  display:block
}

@media screen and (min-width: 1200px) {
  .form--inline-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  .form--inline-row .form-item {
    margin-block: 5px;
  }
}

/** some css for two column form layout **/
.two-column-form-layout {
  display: block;
}

@media screen and (min-width: 1200px) {
  .two-column-form-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
}

.two-field-row > .form-item,
.two-field-row > .js-form-item {
  width: 100%;
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .two-field-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }

  .two-field-row > .form-item,
  .two-field-row > .js-form-item {
    flex: 1 1 0;
    /* Zonder margin-top:0 telt zowel de margin-bottom van het vorige veld
       als de eigen margin-top van dit veld mee: de flex-context van
       .two-field-row voorkomt dat die twee marges in elkaar overvloeien,
       wat dubbele witruimte geeft (bv. tussen Customer en Delivery). */
    margin-block: 0;
  }

  .two-field-row .form-select,
  .two-field-row .form-text,
  .two-field-row .form-tel {
    width: 100% !important;
  }
}

.order-item-card {
  border-left: 4px solid #4a8ce0;
  background-color: #fcfcfc;
  margin-bottom: 1.5rem;
}

.order-item-layout-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
}

.order-item-remove-button,
.invoice-item-remove-button {
  display: block;
  margin-left: auto;
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  .order-item-layout-container {
    display: block;
  }
}

/* Standaardstijl voor kleine schermen (mobile-first) */
.total-table {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Stijl voor schermen breder dan 768px (tablets en desktops) */
@media (min-width: 1200px) {
  .total-table {
    width: 50%;
  }
}


/* order page */
/* Grid layout for categories */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Card styling for each category button */
.category-card-button {
  height: 100%;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- DEFINITIEVE RESPONSIVE CSS --- */
.product-content-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.product-image-column {
  flex-shrink: 0;
  width: 200px;
}
.product-text-column {
  flex: 1 1 50%;
  min-width: 0;
}
.product-variants-column {
  flex: 1 1 40%;
  min-width: 0;
  border-left: 1px solid #ddd;
  padding-left: 24px;
}

/* Media Query voor schermen kleiner dan 768px (tablets/mobiel) */
@media (max-width: 768px) {
  .product-content-layout {
    /* Stapel de kolommen verticaal i.p.v. naast elkaar */
    flex-direction: column;
  }
  .product-variants-column {
    /* Verwijder de verticale scheidingslijn op mobiel */
    border-left: none;
    padding-left: 0;
    width: 100%; /* Zorg dat de kolom de volledige breedte inneemt */
  }
}

.total-items-container {
  padding: 15px;
  background-color: #eef7ff; /* Lichte achtergrondkleur */
  border-left: 5px solid #007bff; /* Accent aan de zijkant */
  border-radius: 4px;
  font-size: 1.2em;
  transition: background-color 0.3s ease; /* Vloeiende overgang voor de kleur */
}

/* Stijl voor de inhoud */
.total-items-content strong {
  color: #0056b3;
}

/* Voeg een icoon toe (bijv. via een icon font library zoals Font Awesome) */
.icon-cart::before {
  content: '\f07a'; /* Voorbeeld van Font Awesome winkelwagen-icoon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
}


/* Zorg dat de blokken netjes naast elkaar staan op desktop */
.help-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 20px;
}

.help-grid-container .admin-item {
  background: #ffffff;
  padding: 1.5rem;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.help-grid-container .admin-item__title {
  margin-top: 0;
  color: #222330;
}

.help-grid-container .admin-item__description {
  margin-bottom: 1.5rem;
  flex-grow: 1;
}


/* dashboard: 3 zones (KPI / acties / inzichten) */
.dashboard-zone {
  padding: 1.5rem 1.5rem 2rem;
  margin-bottom: 1.75rem;
  border: 1px solid #d3d8de;
  border-left: 5px solid #d3d8de;
  border-radius: 4px;
  /* Sluit de zone rond zijn inhoud, zodat marges van kind-elementen (Claro
     geeft tabellen en knoppen een margin-bottom) niet buiten de achtergrond
     kunnen ontsnappen. */
  display: flow-root;
}

/* Elke zone een eigen achtergrond, zodat de rol meteen duidelijk is. */
.dashboard-zone--kpi {
  background-color: #eef4fa;
  border-left-color: var(--shiva-blue, hsl(207, 91%, 26%));
}

/* Amber: hier moet effectief iets gebeuren. */
.dashboard-zone--actions {
  background-color: #fdf6e8;
  border-left-color: var(--shiva-gold, hsl(41, 55%, 71%));
}

.dashboard-zone--insights {
  background-color: #f1f5f2;
  border-left-color: hsl(150, 30%, 42%);
}

.dashboard-zone__title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #55606e;
}

.dashboard-zone__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  /* Bewust géén align-items: start. De standaard 'stretch' maakt alle kaarten
     in een rij even hoog; in combinatie met height:100% op de kaart zou de
     kaart net buiten de achtergrond van de zone vallen. */
}

/* Actietabellen zijn breed (kolommen plus actieknoppen) en krijgen daarom de
   volle breedte in plaats van in smalle kolommen geperst te worden. */
.dashboard-zone--actions .dashboard-zone__grid {
  grid-template-columns: 1fr;
}

.dashboard-zone--insights .dashboard-zone__grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.dashboard-card {
  background: #ffffff;
  border: 1px solid #d3d8de;
  border-radius: 4px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  /* Een grid-item mag standaard niet smaller worden dan zijn inhoud. Zonder
     min-width duwt een brede actietabel de kaart voorbij de zonebreedte. */
  min-width: 0;
}

.dashboard-card table {
  width: 100%;
}

/* Past een brede actietabel echt niet, dan scrollt hij binnen de kaart in
   plaats van de kaart buiten de achtergrond te duwen. */
.dashboard-action {
  overflow-x: auto;
}

.dashboard-card h2,
.dashboard-card__title {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  color: #222330;
}

.dashboard-card__meta {
  font-size: 0.875rem;
  color: #55606e;
  margin-top: 0.35rem;
}

.dashboard-card__link,
.dashboard-kpi__link {
  font-size: 0.875rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* KPI-tegels */
.dashboard-kpi__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #55606e;
  margin-bottom: 0.35rem;
}

.dashboard-kpi__value-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-kpi__value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #222330;
}

.dashboard-kpi__delta {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}

.dashboard-kpi__delta--up {
  color: hsl(150, 60%, 24%);
  background-color: hsl(150, 55%, 92%);
}

.dashboard-kpi__delta--down {
  color: hsl(0, 60%, 34%);
  background-color: hsl(0, 65%, 95%);
}

.dashboard-kpi__sub {
  font-size: 0.875rem;
  color: #55606e;
  margin-top: 0.35rem;
}

/* Mini-lijngrafiek: vaste hoogte, want een canvas heeft er zelf geen. */
.dashboard-sparkline {
  position: relative;
  height: 160px;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .dashboard-zone {
    padding: 1rem 1rem 1.5rem;
  }

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

/** Omzet en resultaat (rapporten) **/

/* De datumvelden hangen aan periode 'Aangepast', dus ze verschijnen en
   verdwijnen. Zonder uitlijnen op de onderkant springt de hele filterrij dan. */
.statistics-filter {
  align-items: flex-end;
}

.statistics-filter__reset {
  padding-bottom: 0.5rem;
}

.statistics-summary {
  font-size: 0.875rem;
  color: #55606e;
  margin-bottom: 0.75rem;
}

.statistics-hint {
  font-size: 0.875rem;
  color: hsl(37, 70%, 25%);
  background-color: hsl(45, 90%, 94%);
  border-left: 4px solid hsl(37, 80%, 45%);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

/* Een canvas heeft geen eigen hoogte; zonder deze wrapper groeit hij bij elke
   resize mee met zichzelf. */
.statistics-chart {
  position: relative;
  height: 360px;
  max-width: 960px;
  margin-bottom: 1.5rem;
}

/* Omzet - Aankopen = Brutowinst, als één leesbare regel. */
.statistics-formula {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 960px;
  margin-bottom: 1.5rem;
}

.statistics-formula__item {
  background: #ffffff;
  border: 1px solid #d3d8de;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  min-width: 160px;
}

.statistics-formula__item--result {
  border-color: #0969da;
}

.statistics-formula__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #55606e;
}

.statistics-formula__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222330;
}

.statistics-formula__meta,
.statistics-formula__comparison {
  font-size: 0.875rem;
  color: #55606e;
}

.statistics-formula__operator {
  font-size: 1.5rem;
  color: #55606e;
}

.statistics-formula__comparison {
  flex-basis: 100%;
}

.statistics-table {
  max-width: 960px;
}

.statistics-table__number {
  text-align: right;
  white-space: nowrap;
}

.statistics-table tfoot {
  font-weight: 700;
}

.statistics-financial-years {
  max-width: 960px;
  margin-top: 1.5rem;
}

/* Cirkeldiagram: legende staat rechts, dus wat breder dan hoog. */
.statistics-chart--share {
  height: 320px;
  max-width: 720px;
}

/* De tags die in de grafiek hierboven staan. */
.statistics-table__selected {
  font-weight: 700;
}

/* Multiselect van tags: hoger dan een gewone select, dus niet op één lijn. */
.statistics-filter select[multiple] {
  min-width: 200px;
  max-width: 300px;
}

/* ==========================================================
   Onboarding: de checklist die een nieuwe klant afwerkt
   ========================================================== */

/* Rood-ish, want dit blokkeert facturatie: duidelijk anders dan de amberen
   actiezone, die enkel dagelijks werk aankondigt. */
.dashboard-zone--onboarding {
  background-color: #fdeeec;
  border-left-color: hsl(4, 62%, 48%);
}

.dashboard-zone--onboarding .dashboard-zone__grid {
  grid-template-columns: 1fr;
}

.dashboard-onboarding h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  color: #222330;
}

.dashboard-onboarding .button {
  align-self: flex-start;
}

.onboarding-group {
  margin-bottom: 2rem;
}

/* Vaste, smalle statuskolom: het icoon hoort niet mee te schalen met de
   omschrijvingen ernaast. */
.onboarding-table__status {
  width: 3rem;
  text-align: center;
}

.onboarding-status--done {
  color: hsl(150, 55%, 35%);
}

.onboarding-status--open {
  color: #8c96a3;
}

/* Afgewerkte stappen blijven staan (je moet ze later kunnen aanpassen) maar
   treden op de achtergrond. */
.onboarding-step--done {
  opacity: 0.65;
}

.onboarding-step__description {
  color: #55606e;
  font-size: 0.9rem;
  margin-top: 0.15rem;
}

.onboarding-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.onboarding-badge--required {
  background-color: hsl(4, 62%, 48%);
  color: #ffffff;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 640px;
  margin-bottom: 2rem;
}

.onboarding-progress__track {
  flex: 1;
  height: 0.6rem;
  background-color: #e3e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.onboarding-progress__fill {
  height: 100%;
  background-color: hsl(150, 55%, 35%);
}

.onboarding-progress__label {
  color: #55606e;
  font-size: 0.9rem;
  white-space: nowrap;
}