/* HARD DÉCO — PWA V2-RC1.5.30 */

:root {
  color-scheme: light;
  --pwa-system-bar-bg: #ffffff;
  --pwa-system-bar-text: #0f172a;
}

:root.dark {
  color-scheme: dark;
  --pwa-system-bar-bg: #0b1220;
  --pwa-system-bar-text: #e7ecf3;
}

/* La surface racine est aussi celle utilisée derrière les barres système
   lorsque la PWA fonctionne en affichage bord à bord. */
:root[data-pwa-theme="light"],
:root[data-pwa-theme="light"] body {
  background-color: #ffffff;
}

:root[data-pwa-theme="dark"],
:root[data-pwa-theme="dark"] body {
  background-color: #0b1220;
}

@media (max-width: 900px) {
  body[data-pwa-theme="light"] .header.app-shell {
    background: color-mix(in srgb, var(--pwa-system-bar-bg) 96%, transparent);
    color: var(--pwa-system-bar-text);
  }

  body[data-pwa-theme="dark"] .header.app-shell {
    background: color-mix(in srgb, var(--pwa-system-bar-bg) 96%, transparent);
    color: var(--pwa-system-bar-text);
  }

  /* Dernière couche chargée : l'icône et la saisie ne peuvent plus être
     rapprochées par les anciens styles de la page d'accueil. */
  #main-content .home-command .home-search .searchbar {
    position: relative;
    display: block;
    padding: 0;
  }

  #main-content .home-command .home-search .searchbar > .lucide {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    width: 18px;
    height: 18px;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }

  #main-content .home-command .home-search #searchBar {
    width: 100%;
    padding: 11px 42px 11px 50px;
  }
}

.pwa-dialog[hidden],
.pwa-update-bar[hidden] { display: none !important; }

body.pwa-dialog-open { overflow: hidden; }

.pwa-dialog {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.pwa-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #020617 64%, transparent);
  backdrop-filter: blur(5px);
}

.pwa-dialog-panel {
  position: relative;
  width: min(460px, 100%);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 72px rgba(2, 6, 23, .24);
}

.pwa-dialog-logo { width: 64px; height: 64px; border-radius: 15px; object-fit: cover; }
.pwa-dialog-eyebrow { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .06em; }
.pwa-dialog h2 { margin: 5px 36px 8px 0; font-size: 23px; line-height: 1.2; }
.pwa-dialog p { margin: 0; color: var(--muted); line-height: 1.5; }
.pwa-dialog-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text); cursor:pointer; }
.pwa-dialog-close .lucide { width: 19px; height: 19px; }
.pwa-install-steps { grid-column: 1 / -1; margin: 0; padding: 16px 18px 16px 38px; border-radius: 12px; background: var(--hover); color: var(--text); line-height: 1.55; }
.pwa-install-steps li + li { margin-top: 6px; }
.pwa-dialog-actions { grid-column: 1 / -1; display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }

.pwa-update-bar {
  position: fixed;
  z-index: 2100;
  right: 20px;
  bottom: 20px;
  width: min(510px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 55px rgba(2, 6, 23, .2);
}

.pwa-update-bar > div { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.pwa-update-bar strong { font-size:14px; }
.pwa-update-bar span { color:var(--muted); font-size:12px; }
.pwa-update-bar .iconbtn { flex:0 0 38px; width:38px; height:38px; }

@media (max-width: 900px) {
  .pwa-update-bar { bottom: calc(var(--app-mobile-nav-h, 68px) + env(safe-area-inset-bottom, 0px) + 12px); }
}

@media (max-width: 520px) {
  .pwa-dialog { padding: 14px; align-items:end; }
  .pwa-dialog-panel { grid-template-columns: 52px minmax(0,1fr); gap:14px; padding:22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius:18px 18px 14px 14px; }
  .pwa-dialog-logo { width:52px; height:52px; border-radius:12px; }
  .pwa-dialog h2 { font-size:20px; }
  .pwa-dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
  .pwa-dialog-actions .btn { width:100%; }
  .pwa-update-bar { right:12px; width:calc(100vw - 24px); align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-dialog-backdrop { backdrop-filter:none; }
}