/* MyLiveGym — μπάρα εγκατάστασης PWA (D-027).
 *
 * Ξεχωριστό αρχείο, ΕΚΤΟΣ του Tailwind source: δεν χρειάζεται build (bash mlg/tools/build-css.sh)
 * και δεν αγγίζει το app.src.css. Φορτώνεται ΜΕΤΑ το app.css ώστε να βλέπει τα ίδια tokens
 * (--color-surface, --color-ink, --color-muted, --color-line, --gradient-brand), που αλλάζουν
 * μόνα τους στο σκοτεινό θέμα μέσω [data-theme="dark"] (docs/25-DARK-MODE.md).
 *
 * Η θέση της μπάρας: ακριβώς ΠΑΝΩ από το κάτω μενού (το ύψος του μετριέται στο pwa.js και
 * γράφεται στο --mlg-pwa-bottom), ώστε να μην κρύβει ποτέ τα 5 tabs.
 */
@layer components {
  .mlg-pwa-bar {
    position: fixed;
    z-index: 45;
    left: 10px;
    right: 10px;
    bottom: calc(var(--mlg-pwa-bottom, 0px) + env(safe-area-inset-bottom, 0px));
    margin: 0 auto 10px;
    max-width: 560px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon text  close"
      "act  act   act";
    align-items: center;
    gap: 10px 12px;

    padding: 12px 12px 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--color-line, #e6e8ec);
    background: var(--color-surface, #fff);
    color: var(--color-ink, #1f2430);
    box-shadow: 0 8px 30px rgb(16 24 40 / .18), 0 2px 6px rgb(16 24 40 / .08);

    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
  }
  .mlg-pwa-bar[hidden] { display: none !important; }
  .mlg-pwa-bar.is-open { transform: none; opacity: 1; }

  [data-theme="dark"] .mlg-pwa-bar { box-shadow: 0 8px 30px rgb(0 0 0 / .6), 0 2px 6px rgb(0 0 0 / .4); }

  .mlg-pwa-icon {
    grid-area: icon;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: block;
    flex: none;
  }
  .mlg-pwa-text { grid-area: text; min-width: 0; }
  .mlg-pwa-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -.01em;
  }
  .mlg-pwa-sub {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--color-muted, #6b7280);
  }
  .mlg-pwa-sub svg { width: 14px; height: 14px; vertical-align: -3px; margin: 0 1px; }

  .mlg-pwa-actions {
    grid-area: act;
    display: flex;
    gap: 8px;
  }
  .mlg-pwa-btn,
  .mlg-pwa-later {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease, background-color .15s ease;
  }
  .mlg-pwa-btn {
    border: 0;
    color: #fff;
    background-image: var(--gradient-brand, linear-gradient(135deg, #f35f16, #fcb126));
    box-shadow: 0 4px 12px rgb(243 95 22 / .3);
  }
  .mlg-pwa-btn:hover { filter: brightness(1.05); }
  .mlg-pwa-btn:active { transform: scale(.985); }
  .mlg-pwa-later {
    border: 1px solid var(--color-line, #e6e8ec);
    background: transparent;
    color: var(--color-muted, #6b7280);
  }
  .mlg-pwa-later:hover { background: var(--color-canvas, #f6f7f9); }

  .mlg-pwa-close {
    grid-area: close;
    align-self: start;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted, #6b7280);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .mlg-pwa-close:hover { background: var(--color-canvas, #f6f7f9); color: var(--color-ink, #1f2430); }

  /* Από ~560px και πάνω όλα σε μία γραμμή */
  @media (min-width: 560px) {
    .mlg-pwa-bar {
      grid-template-columns: auto 1fr auto auto;
      grid-template-areas: "icon text act close";
      max-width: 680px;
    }
    .mlg-pwa-actions { flex: none; }
    .mlg-pwa-btn, .mlg-pwa-later { flex: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mlg-pwa-bar { transition: opacity .01s linear; transform: none; }
  }
}