/* Additions for the connected Mini App: Telegram theming, the bottom sheet
   picker and the controls the prototype did not have. The prototype's own
   layout in style.css is left untouched. */

:root {
  --tg-secondary-bg: #f3f4f6;
  --tg-hint: #7b8794;
}

/* --- dark theme --------------------------------------------------------- */
/* Telegram hands the page its own text colour, so every surface the prototype
   painted white has to be repainted with it. A light card left behind under
   white text is unreadable, which is worse than ignoring the theme entirely. */

html[data-theme='dark'] {
  color-scheme: dark;
  /* The prototype's tokens, restated dark. Everything that already reads a
     token follows automatically; the rules below are for the literal colours
     style.css writes out by hand. */
  --surface: #1e2b38;
  --line: #2c3b4a;
  --muted: #92a3b3;
}

html[data-theme='dark'] body {
  background: var(--tg-bg, #17212b);
  color: var(--tg-text, #f5f5f5);
}

html[data-theme='dark'] dialog,
html[data-theme='dark'] .sheet-panel {
  background: var(--surface);
  color: var(--tg-text, #f5f5f5);
}

html[data-theme='dark'] .muted,
html[data-theme='dark'] .price-note,
html[data-theme='dark'] .date-note {
  color: var(--tg-hint, #9aa7b4);
}

/* Accent as text needs more light than accent as a background. */
html[data-theme='dark'] .category-tabs button.active,
html[data-theme='dark'] .move-link,
html[data-theme='dark'] .model-button:hover {
  color: #4fc9b3;
}

html[data-theme='dark'] .specs {
  color: #a2b2c0;
}

html[data-theme='dark'] .empty h2 {
  color: #e7eef4;
}

html[data-theme='dark'] .positive {
  color: #45c8ab;
}

html[data-theme='dark'] .price.negative,
html[data-theme='dark'] .form-error {
  color: #e58b7e;
}

/* Inputs and buttons the prototype painted white. */
html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] .secondary {
  border-color: #3b4b5c;
}

html[data-theme='dark'] .search input,
html[data-theme='dark'] .secondary,
html[data-theme='dark'] .location-filters button,
html[data-theme='dark'] .bulk {
  background: var(--surface);
}

html[data-theme='dark'] .form-grid input,
html[data-theme='dark'] .form-grid select {
  color: var(--tg-text, #f5f5f5);
}

html[data-theme='dark'] .secondary:hover,
html[data-theme='dark'] .icon-button:hover,
html[data-theme='dark'] nav button:hover,
html[data-theme='dark'] .chip {
  background: #27374a;
}

html[data-theme='dark'] .chip {
  border-color: #3b4b5c;
}

/* The bottom navigation is fixed and opaque, so it has to be repainted too. */
html[data-theme='dark'] aside nav {
  background: var(--surface);
}

html[data-theme='dark'] nav button.active,
html[data-theme='dark'] .location-filters button.active,
html[data-theme='dark'] .destination:has(input:checked) {
  background: #17463c;
  border-color: #2e7d6c;
  color: #63d4bb;
}

html[data-theme='dark'] .item.selected {
  background: #1b3a33;
}

html[data-theme='dark'] .bar-track {
  background: #2a3846;
}

html[data-theme='dark'] .sheet-grip {
  background: #3b4b5c;
}

html[data-theme='dark'] .badge {
  background: #27374a;
  color: #a3b4c3;
}

html[data-theme='dark'] .badge.ukraine {
  color: #6fd1a8;
  background: #1a3a2d;
}

html[data-theme='dark'] .badge.germany {
  color: #8fb6e8;
  background: #1d2f45;
}

html[data-theme='dark'] .badge.in_transit,
html[data-theme='dark'] .badge.reserved {
  color: #dcb95c;
  background: #383120;
}

/* Fields that open the picker look like inputs but never focus a keyboard. */
input[data-field] {
  cursor: pointer;
  background: transparent;
}

input[data-field]:not(:placeholder-shown) {
  font-weight: 600;
}

.sheets-state {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  color: var(--tg-hint, #7b8794);
}

.sheets-state.pending::before {
  content: '• ';
  color: #c98a12;
}

.id-note {
  opacity: .55;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.detail-actions button {
  flex: 1 1 44%;
  min-height: 44px;
}

.toast.warn {
  background: #8a2c21;
}

/* --- bottom sheet ------------------------------------------------------ */

dialog.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

dialog.sheet::backdrop {
  background: rgba(12, 18, 24, .45);
}

.sheet-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Sized against the Telegram viewport so the keyboard cannot cover it. */
  max-height: min(78vh, calc(var(--tg-viewport, 100vh) - 48px));
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(12, 18, 24, .18);
}

.sheet-grip {
  width: 38px;
  height: 4px;
  margin: 2px auto 4px;
  border-radius: 2px;
  background: #d6dbe1;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet-title {
  margin: 0;
  font-size: 17px;
}

.sheet-search input {
  width: 100%;
  min-height: 44px;
  /* 16px keeps iOS from zooming the page when the field takes focus. */
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid var(--line, #dcdfe3);
  border-radius: 12px;
}

.sheet-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--line, #dcdfe3);
  border-radius: 999px;
  background: var(--tg-secondary-bg, #f3f4f6);
}

.sheet-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.sheet-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 4px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line, #eceef1);
}

.sheet-option-value {
  font-size: 15px;
  font-weight: 600;
}

.sheet-option-hint {
  grid-column: 1;
  font-size: 12px;
  color: var(--tg-hint, #7b8794);
  overflow-wrap: anywhere;
}

.sheet-option-count {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 11px;
  color: var(--tg-hint, #7b8794);
}

.sheet-empty {
  margin: 18px 4px;
  font-size: 13px;
  color: var(--tg-hint, #7b8794);
}

.sheet-custom {
  min-height: 46px;
}

body.sheet-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  /* The bottom navigation is fixed, so dialogs must clear it. */
  dialog {
    margin-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .detail-actions button {
    flex: 1 1 100%;
  }
}

.price.negative {
  color: #a33f32;
}

.metric strong {
  white-space: nowrap;
}

/* --- touch targets ----------------------------------------------------- */
/* The prototype's compact sizes are fine with a mouse; on a phone every
   primary control needs a 44px tap area. */

@media (max-width: 700px) {
  header .primary,
  .toolbar button,
  .search input,
  .location-filters button,
  .category-tabs button,
  .bulk button,
  .dialog-actions button,
  nav button {
    min-height: 44px;
  }

  .model-button {
    /* The title is the row's main target, so it gets the height around it. */
    padding: 12px 0;
    margin: -12px 0 -6px;
  }

  .move-link {
    padding: 8px 0;
    margin: -4px 0;
    min-height: 44px;
  }

  .icon-button {
    min-width: 44px;
    min-height: 44px;
  }
}