/* Mimo Atelier — reusable UI contracts */
* { box-sizing: border-box; }

html {
  color-scheme: dark;
  font-family: var(--mimo-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

.mimo-button,
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mimo-space-2);
  min-height: 54px;
  padding: 0 var(--mimo-space-5);
  overflow: hidden;
  border: 1px solid rgba(244, 238, 231, .18);
  border-radius: var(--mimo-radius-control);
  color: var(--mimo-ink);
  background: linear-gradient(135deg, var(--mimo-clay), var(--mimo-terracotta));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--mimo-shadow-accent);
  font-weight: 650;
  letter-spacing: -.012em;
  text-decoration: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  transition: transform 340ms var(--mimo-ease-spring), filter var(--mimo-fast), box-shadow var(--mimo-medium) var(--mimo-ease-out);
}

.mimo-button::after,
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120px circle at var(--glass-x, 78%) var(--glass-y, 0%), rgba(255,255,255,.26), transparent 62%);
  opacity: .68;
}

.mimo-button:active,
.btn:active { transform: scale(.955); transition-duration: 90ms; }
.mimo-button:hover,
.btn:hover { filter: brightness(1.06); }

.mimo-button--secondary,
.btn.secondary,
.btn.bluebtn {
  color: var(--mimo-ivory);
  border-color: var(--mimo-ivory-12);
  background: linear-gradient(145deg, var(--mimo-ivory-08), var(--mimo-ivory-04));
  box-shadow: inset 0 1px 0 var(--mimo-ivory-12);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.mimo-button--danger,
.btn.danger {
  color: var(--mimo-danger);
  border-color: rgba(231,121,112,.24);
  background: rgba(231,121,112,.08);
  box-shadow: none;
}

.mimo-chip,
.chip,
.pill,
.status-chip,
.ticket-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--mimo-terracotta-28);
  border-radius: var(--mimo-radius-pill);
  color: var(--mimo-clay);
  background: var(--mimo-terracotta-10);
  font-family: var(--mimo-font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
}

.mimo-card {
  position: relative;
  overflow: hidden;
  padding: var(--mimo-space-5);
  border: 1px solid var(--mimo-ivory-12);
  border-radius: var(--mimo-radius-card);
  background: linear-gradient(145deg, var(--mimo-ivory-08), var(--mimo-ivory-04)), var(--mimo-ink-64);
  box-shadow: inset 0 1px 0 var(--mimo-ivory-12), var(--mimo-shadow-card);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
}

.mimo-card--accent {
  border-color: var(--mimo-terracotta-28);
  background: radial-gradient(circle at 92% 4%, var(--mimo-terracotta-28), transparent 40%), linear-gradient(145deg, var(--mimo-ivory-08), var(--mimo-ivory-04)), var(--mimo-ink-64);
}

.mimo-row,
.plan-row,
.device-row,
.operation-row,
.op-row,
.legal-row,
.location-pill {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: var(--mimo-space-3);
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--mimo-ivory-08);
  border-radius: var(--mimo-radius-control);
  color: var(--mimo-ivory);
  background: var(--mimo-ivory-04);
  transition: border-color var(--mimo-fast), background var(--mimo-fast), transform 340ms var(--mimo-ease-spring);
}

button.mimo-row,
button.plan-row,
button.location-pill { width: 100%; text-align: left; cursor: pointer; }
button.mimo-row:active,
button.plan-row:active,
button.location-pill:active { transform: scale(.975); transition-duration: 90ms; }

.mimo-row.is-selected,
.plan-row.active,
.plan-row.majority,
.location-pill.active {
  border-color: var(--mimo-terracotta-28);
  background: var(--mimo-terracotta-10);
}

.mimo-field,
.amount-field input,
.ticket-form textarea,
.topup-select-field select {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  outline: none;
  border: 1px solid var(--mimo-ivory-12);
  border-radius: var(--mimo-radius-control);
  color: var(--mimo-ivory);
  background: rgba(9,8,7,.52);
  box-shadow: inset 0 1px 0 var(--mimo-ivory-08);
  transition: border-color var(--mimo-fast), box-shadow var(--mimo-fast), transform var(--mimo-fast);
}

.ticket-form textarea { min-height: 132px; padding-block: 15px; resize: vertical; }
.mimo-field:focus,
.amount-field input:focus,
.ticket-form textarea:focus,
.topup-select-field select:focus {
  border-color: rgba(224,154,125,.55);
  box-shadow: 0 0 0 4px var(--mimo-terracotta-10), inset 0 1px 0 var(--mimo-ivory-08);
  transform: translateY(-1px);
}

.mimo-switch,
.toggle {
  position: relative;
  width: 50px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--mimo-ivory-12);
  border-radius: var(--mimo-radius-pill);
  background: var(--mimo-ivory-08);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
  transition: background var(--mimo-medium), border-color var(--mimo-medium);
}

.mimo-switch::after,
.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mimo-ivory);
  box-shadow: 0 4px 12px rgba(0,0,0,.34), inset 0 1px 0 #fff;
  transition: transform 380ms var(--mimo-ease-spring);
}

.mimo-switch.is-on,
.toggle.on { border-color: var(--mimo-terracotta-28); background: var(--mimo-terracotta); }
.mimo-switch.is-on::after,
.toggle.on::after { transform: translateX(20px); }

.mimo-dock {
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--mimo-ivory-12);
  border-radius: 24px;
  background: rgba(18,16,15,.72);
  box-shadow: inset 0 1px 0 var(--mimo-ivory-12), var(--mimo-shadow-float);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}

.mimo-dock__item {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 18px;
  color: var(--mimo-stone);
  background: transparent;
  cursor: pointer;
  transition: color var(--mimo-fast), transform 360ms var(--mimo-ease-spring), background var(--mimo-medium);
}

.mimo-dock__item.is-active { color: var(--mimo-ink); background: linear-gradient(145deg,var(--mimo-clay),var(--mimo-terracotta)); }
.mimo-dock__item:active { transform: scale(.88); transition-duration: 80ms; }

.mimo-sheet {
  padding: var(--mimo-space-5);
  border: 1px solid var(--mimo-ivory-12);
  border-radius: var(--mimo-radius-card) var(--mimo-radius-card) 0 0;
  background: rgba(18,16,15,.88);
  box-shadow: var(--mimo-shadow-float), inset 0 1px 0 var(--mimo-ivory-18);
  -webkit-backdrop-filter: blur(40px) saturate(165%);
  backdrop-filter: blur(40px) saturate(165%);
}

.mimo-sheet__grabber { width: 38px; height: 4px; margin: 0 auto 20px; border-radius: 9px; background: var(--mimo-ivory-18); }

:focus-visible { outline: 2px solid var(--mimo-clay); outline-offset: 3px; }

@media (hover: none) {
  .mimo-button:hover,
  .btn:hover { filter: none; }
}