/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Manrope, self-hosted (bin/vendor-manrope) — no fonts.googleapis.com at render
   time: a CDN in the critical path is a third-party dependency for every page and
   a CSP hole we don't need. Latin 700/800 only; that's all we set. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/manrope-latin-700-normal-777aa521.woff2") format("woff2");
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/manrope-latin-800-normal-6de3e350.woff2") format("woff2");
}

/* The brand's numeral voice. `.plan-data-amount` is the consumer TMA's name for it
   (plan sizes like "5 GB"); `.num-display` is the same treatment for admin stat
   values. Numerals and headline figures only — never body text. */
.plan-data-amount,
.num-display {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
}

/* === Shared design tokens ==================================================
   The web panel and the Mini App's admin pages keep their own layout paradigms
   (desktop tables vs touch cards) but should not disagree about what "critical"
   or "the accent" looks like. Status hues are the web panel's Tailwind values,
   named once here so the Mini App stops carrying a second, iOS-flavoured set. */
:root {
  --brand-lime: #e7fc60;
  --status-good: #4ade80;      /* green-400  */
  --status-warn: #facc15;      /* yellow-400 */
  --status-attention: #fb923c; /* orange-400 */
  --status-bad: #f87171;       /* red-400    */
  --status-info: #c084fc;      /* purple-400 */
  --status-muted: #9ca3af;     /* gray-400   */
  --status-link: #60a5fa;      /* blue-400 — the web panel's 'custom link' badge */
}

/* --- Mini App ADMIN accent -------------------------------------------------
   Lime as a BACKGROUND with black ink — never lime text, which is unreadable on
   the light Telegram theme's white. Surfaces and body copy stay on the tg-theme
   variables so live theme switching keeps working. */
.tma-admin-accent,
.tma-button.tma-admin-accent {
  background-color: var(--brand-lime);
  color: #000;
}

/* A tinted chip: lime enough to belong, text still theme-driven so it reads in
   both light and dark. */
.tma-admin-chip {
  background-color: color-mix(in srgb, var(--brand-lime) 20%, transparent);
  color: var(--tg-theme-text-color, #000);
}

/* --- Mini App admin form controls -----------------------------------------
   `.tma-input` was referenced by every admin form field and defined nowhere, so
   those forms rendered as raw browser controls. Built off the theme vars: bg-color
   (a step up from the section-bg card it sits on), a hint-derived border, and a
   lime focus ring to match the accent. */
.tma-input {
  background-color: var(--tg-theme-bg-color, #ffffff);
  color: var(--tg-theme-text-color, #000000);
  border: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #999999) 35%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.35;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tma-input::placeholder {
  color: var(--tg-theme-hint-color, #999999);
}

.tma-input:focus {
  outline: none;
  border-color: var(--brand-lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-lime) 35%, transparent);
}

/* --- Mini App admin switch ------------------------------------------------
   One toggle shape for every admin boolean. The checked track is lime with a black
   knob (same contrast logic as the accent); unchecked is a hint-colour track with a
   white knob. Rails' check_box emits its hidden "0" field BEFORE the checkbox, so
   the checkbox is still the track's immediate previous sibling. */
.tma-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.tma-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tma-switch-track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--tg-theme-hint-color, #999999) 40%, transparent);
  transition: background-color 0.2s ease;
  position: relative;
}

.tma-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: #ffffff;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.tma-switch input:checked + .tma-switch-track {
  background-color: var(--brand-lime);
}

.tma-switch input:checked + .tma-switch-track::after {
  transform: translateX(20px);
  background-color: #000000;
}

.tma-switch input:focus-visible + .tma-switch-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-lime) 35%, transparent);
}

/* Scrollbar hiding utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Home: "Used ticket" card for previous eSIMs */
.tma-card-dashed {
  background-color: var(--tg-theme-section-bg-color, #f5f5f5);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
  border: 1.5px dashed var(--tg-theme-hint-color);
  opacity: 0.7;
}

body.tma-dark .tma-card-dashed {
  background-color: var(--tg-theme-secondary-bg-color);
}

/* Home: Popular destinations horizontal scroll */
.destination-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.destination-scroll::-webkit-scrollbar {
  display: none;
}

.destination-card {
  flex: 0 0 auto;
  width: 110px;
  scroll-snap-align: start;
  background-color: var(--tg-theme-section-bg-color, #f5f5f5);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

.destination-card:active {
  transform: scale(0.96);
}

body.tma-dark .destination-card {
  background-color: var(--tg-theme-secondary-bg-color);
}

/* Home: Side-by-side action buttons */
.esim-actions {
  display: flex;
  gap: 8px;
}

.esim-actions .tma-button,
.esim-actions .tma-button-secondary {
  flex: 1;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
}

/* Home: Ticket card (boarding pass) */
.ticket-card {
  position: relative;
  overflow: visible;
}

/* Ticket perforation: notch circles use page bg (auto light/dark via layout var) */
.ticket-notch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tma-page-bg);
  flex-shrink: 0;
}

/* Home: Data progress bar */
.esim-progress-track {
  height: 8px;
  border-radius: 9999px;
  background: var(--tg-theme-secondary-bg-color);
  overflow: hidden;
}

body.tma-dark .esim-progress-track {
  background: color-mix(in srgb, var(--tg-theme-hint-color) 20%, transparent);
}

.esim-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.6s ease-out;
}