/* Datei: assets/css/einkauf.css */
/* =============== Variablen & Basisfarben =============== */
:root {
  --ph-blue: #003c88;
  --ph-blue-600: #0b274d;
  --ph-pill: #eaf2ff;
  --ph-pill-strong: #d6e5fb;
  --ph-border: #b4c8e0;
  --ph-bg: #f7faff;
  --ph-danger: #9b1c1c;
  --ph-ok: #0f7b0f;
}

/* =============== Global / Mobile first =============== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ph-blue-600);
  background: var(--ph-bg);
}

/* sämtliche Form-Controls: UA-Styles killen (gegen weißen „Glow“ im Darkmode) */
input, button, textarea {
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  box-shadow: none !important;
  outline: none;
  border-radius: 0; /* Basis, wir setzen später speziellere Radien */
}

/* =============== Header/Footer =============== */
.ph-header, .ph-footer { padding: 12px 14px; }
.ph-header h1 {
  font-size: 1.25rem;
  margin: 0 0 8px 0;
  font-weight: 700;
}
.ph-header .btn { display: inline-flex; align-items: center; gap: .4rem; }

/* =============== Buttons =============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: #e3eefe;
  color: var(--ph-blue);
  border: 1px solid var(--ph-border);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}
.btn:hover, .btn:focus { background: #cdddf0; border-color: #a7bfdc; }

.btn-icon {
  padding: 10px 12px;
  border-radius: 12px;
  min-width: 44px; min-height: 44px;
}

/* Farbakzente */
.btn-clear { background: #eef5ff; }
.btn-add   { background: var(--ph-blue); color: #fff; border: none; }
.btn-delete{ background: #feecec; color: #7c1010; border-color: #f3c2c2; }
.btn-toggle{ background: #eef8ee; color: #0e5f0e; border-color: #cfe6cf; }
.btn-add:hover { background: #002b66; }

/* =============== Liste / Sektion =============== */
main.list { padding: 10px 12px 70px; }
.list-head {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.list-head h2 { font-size: 1.1rem; margin: 0; font-weight: 800; }

/* =============== Einträge =============== */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  background: var(--ph-pill);
  border: 1px solid var(--ph-border);
  border-radius: 14px;
  padding: 10px;
}
.item .text { font-size: 1rem; line-height: 1.3; word-break: break-word; }
.item.erledigt .text { text-decoration: line-through; opacity: .6; }
.item .actions { display: flex; gap: 6px; }
.items .empty {
  text-align: center; padding: 14px;
  background: #ffffffaa;
  border: 1px dashed var(--ph-border);
  border-radius: 14px;
  color: #54657c;
}

/* =============== Add-Form =============== */
.add-form {
  position: sticky; bottom: 10px;
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px;
  background: linear-gradient(180deg, #f7faff00, #f7faff 40%, #f7faff 100%);
  padding-top: 8px;
}

/* Eingabefeld – explizit ohne Glow/UA-Shadow */
.input-text {
  flex: 1;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ph-border);
  border-radius: 14px;
  font-size: 1rem;
  background: #fff;         /* kontrolliert, keine Autodunklung */
  color: #111;
  box-shadow: none !important;
  outline: none;
  transition: border .2s, box-shadow .2s;
  color-scheme: light;      /* verhindert weißes UA-Inset im Darkmode */
}
.input-text:focus {
  border-color: var(--ph-blue);
  box-shadow: 0 0 0 3px rgba(0,60,136,0.2);
}

/* Plus-Button – groß & rund, ohne Shadow */
.btn-add {
  min-width: 48px; min-height: 48px;
  font-size: 1.4rem; font-weight: 800;
  border-radius: 14px;
  box-shadow: none !important;
  color-scheme: light;      /* gleiche Behandlung wie Input */
}

/* =============== Inline-Formulare =============== */
.inline-form { margin: 0; }
.inline-form .btn { font-weight: 700; }

/* =============== Footer =============== */
.ph-footer { text-align: center; color: #5c6f89; font-size: .9rem; }

/* =============== Tablet/Desktop =============== */
@media (min-width: 720px) {
  .ph-header, .ph-footer { padding: 16px 22px; }
  main.list { padding: 16px 22px 80px; }
  .ph-header h1 { font-size: 1.5rem; }
  .list-head h2 { font-size: 1.25rem; }
  .items { gap: 10px; }
  .item { padding: 12px; }
}

/* =============== Dark Mode =============== */
@media (prefers-color-scheme: dark) {
  :root {
    --ph-blue: #8fbaff;
    --ph-blue-600: #d7e6ff;
    --ph-pill: #0e223e;
    --ph-pill-strong: #1a2d4b;
    --ph-border: #2d4a74;
    --ph-bg: #0a172b;
  }
  body { background: var(--ph-bg); color: var(--ph-blue-600); }

  /* Buttons dunkel, aber ohne UA-Shadow */
  .btn { background: #152845; color: #cfe0ff; border-color: #2d4a74; }
  .btn:hover { background: #1b3154; }

  /* „Keine Einträge“-Karte */
  .items .empty { background: #0f213b; border-color: #2d4a74; color: #9cb6dc; }

  /* Sticky-Gradient unten nicht aufhellen */
  .add-form {
    background: linear-gradient(180deg, #0a172b00, #0a172b 40%, #0a172b 100%);
  }

  /* Form Controls: weiterhin ohne UA-Glow, alles von uns gesteuert */
  .input-text {
    background: #0f213b; color: #eaf2ff; border-color: #2d4a74;
    box-shadow: none !important;
    color-scheme: light;    /* wichtig gegen Chrome/Safari Auto-Dark-Inset */
  }
  .input-text:focus { box-shadow: 0 0 0 3px rgba(143,186,255,0.25); }
  .btn-add { background: #295ea6; }
  .btn-add:hover { background: #1c4276; }
}

/* =============== WebKit Autofill (gegen weiße Fläche) =============== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111;
  box-shadow: 0 0 0 1000px #fff inset !important; /* überschreibt weißes UA-Inset */
  transition: background-color 9999s ease-out 0s;  /* verhindert Blinken */
}
@media (prefers-color-scheme: dark) {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: #eaf2ff;
    box-shadow: 0 0 0 1000px #0f213b inset !important;
  }
}

      .suggest-wrap{ position: relative; }
      .suggest-list{
        position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
        background: #fff; border: 1px solid #b4c8e0; border-radius: 10px;
        box-shadow: 0 10px 24px rgba(0,0,0,.08);
        max-height: 260px; overflow: auto; padding: 6px; margin: 0; list-style: none;
      }
      .suggest-list li{
        padding: 10px 12px; border-radius: 8px; cursor: pointer;
        display: flex; align-items: center; gap: .5rem;
      }
      .suggest-list li:hover, .suggest-list li.is-active{ background: #eef5ff; }
      .suggest-list .match{ font-weight: 700; color: #003c88; }
      @media (prefers-color-scheme: dark){
        .suggest-list{ background:#0f213b; border-color:#2d4a74; box-shadow:none; }
        .suggest-list li{ color:#d7e6ff; }
        .suggest-list li:hover, .suggest-list li.is-active{ background:#1a2d4b; }
      }