/* atendgo/public/design/components.css */

/* Componenten van ComGo. Laad dit bestand na tokens.css. */
/* Alle kleuren, lettergroottes, afstanden en radii komen uit tokens.css. */

/* Basis */

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: 1.4;
}

.cg-btn:focus-visible,
.cg-choice:focus-visible,
.cg-stepper__btn:focus-visible,
.cg-field__control:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Kbd: sneltoets naast een actie */

.cg-kbd {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--ground);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-13);
  line-height: 20px;
  font-weight: 400;
}

/* Button */

.cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cg-btn:hover {
  background: var(--ground);
}

.cg-btn--sm {
  min-height: var(--control-sm);
  border-radius: var(--radius-sm);
}

.cg-btn--lg {
  min-height: var(--control-lg);
  padding: 0 var(--space-6);
  font-size: var(--text-18);
  font-weight: 700;
}

.cg-btn--block {
  width: 100%;
}

.cg-btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.cg-btn--primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.cg-btn--action {
  width: 100%;
  min-height: var(--control-xl);
  border-radius: var(--radius-lg);
  font-size: var(--text-22);
}

.cg-btn--danger {
  color: var(--danger);
}

.cg-btn--icon {
  width: var(--control-sm);
  min-height: var(--control-sm);
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
}

.cg-btn--icon:hover {
  background: var(--ground);
  color: var(--ink);
}

.cg-btn--icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.cg-btn:disabled,
.cg-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Field: label met invoerveld */

.cg-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cg-field__label {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 20px;
  font-weight: 600;
}

.cg-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  height: var(--control-lg);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cg-field--scan .cg-field__control {
  border: 2px solid var(--accent);
}

.cg-field__icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--ink);
}

.cg-field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-18);
}

.cg-field__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Een veld dat de browser zelf invult, houdt de kleuren van het veld: geen gekleurd blok in het vak. Er wordt niets over
   het veld geschilderd (een schaduw over het hele veld bedekte de rand van het vak); de achtergrond van de browser komt
   pas na een overgang die nooit afloopt, dus blijft het vak zelf zichtbaar. */
.cg-field__input:-webkit-autofill,
.cg-field__input:-webkit-autofill:hover,
.cg-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}

.cg-field__input:autofill {
  background: transparent;
}

/* Card */

.cg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.cg-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.cg-card__title {
  margin: 0;
  font-size: var(--text-18);
  line-height: 24px;
  font-weight: 700;
}

.cg-card__meta {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 20px;
}

.cg-card__body {
  padding: var(--space-4) var(--space-5);
}

/* Stepper: aantal verhogen en verlagen */

.cg-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cg-stepper__btn {
  box-sizing: border-box;
  width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-20);
  line-height: 1;
  cursor: pointer;
}

.cg-stepper__btn:hover {
  background: var(--ground);
}

.cg-stepper__value {
  min-width: var(--space-10);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-18);
  line-height: 24px;
  font-weight: 600;
}

/* Item: regel in de verkooplijst */

.cg-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 96px 112px auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.cg-item:last-child {
  border-bottom: 0;
}

.cg-item__name {
  display: block;
  font-size: var(--text-17);
  line-height: 24px;
  font-weight: 600;
}

.cg-item__variant {
  display: block;
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 20px;
}

.cg-item__unit {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-16);
  line-height: 24px;
  text-align: right;
}

.cg-item__total {
  font-family: var(--font-mono);
  font-size: var(--text-18);
  line-height: 24px;
  font-weight: 600;
  text-align: right;
}

/* Choice: keuzetegel, bijvoorbeeld de betaalwijze */

.cg-choice-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-3);
}

.cg-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  box-sizing: border-box;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: 20px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.cg-choice:hover {
  background: var(--ground);
}

.cg-choice[aria-pressed="true"] {
  padding: calc(var(--space-3) - 1px);
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}

.cg-choice__hint {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-13);
  line-height: 20px;
  font-weight: 400;
}

/* Summary: subtotaal, korting en totaal */

.cg-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cg-summary__row,
.cg-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.cg-summary__label {
  color: var(--muted);
}

.cg-summary__value {
  font-family: var(--font-mono);
  font-size: var(--text-16);
  line-height: 24px;
}

.cg-summary__total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.cg-summary__total-label {
  font-size: var(--text-18);
  line-height: 24px;
  font-weight: 700;
}

.cg-summary__total-value {
  font-family: var(--font-mono);
  font-size: var(--text-44);
  line-height: 1.1;
  font-weight: 700;
}

/* Status: toestand met stip en woord */

.cg-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-14);
  line-height: 20px;
}

.cg-status__dot {
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
  background: var(--positive);
}

/* AppBar: kopbalk van het kassascherm */

.cg-appbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.cg-appbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cg-appbar__logo {
  flex: none;
  box-sizing: border-box;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.cg-appbar__logo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: var(--text-13);
}

.cg-appbar__store {
  display: block;
  font-size: var(--text-17);
  line-height: 24px;
  font-weight: 700;
}

.cg-appbar__till {
  display: block;
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 20px;
}

.cg-appbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 20px;
}

.cg-appbar__meta .cg-status {
  color: var(--ink);
}