/* ops.css (Demo placeholder)
   If you have your original ops.css, replace this file for full styling.
*/
:root { color-scheme: dark; }
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b1020;color:#e8eefc;}
a{color:inherit}
button,input,select{font:inherit}
.container{max-width:1200px;margin:0 auto;padding:16px;}
/* basic buttons used in your UI */
.btn{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.12);color:inherit;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.12)}
.btn-primary{background:rgba(83,155,245,.25);border-color:rgba(83,155,245,.25)}
.btn-ghost{background:transparent}
.tiny{font-size:12px;opacity:.9}
dialog{border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#0c1430;color:#e8eefc;box-shadow:0 20px 70px rgba(0,0,0,.55)}
/* ===== Select Dropdown (Options) blue/transparent ===== */

/* Dropdown-Liste / Optionen: viele Browser unterstützen das */
select option,
select optgroup {
  background: rgba(15, 23, 42, 0.96) !important;  /* dunkles blau */
  color: rgba(226, 232, 240, 0.96) !important;
}

/* Hover/Selected (wenn Browser es erlaubt) */
select option:checked {
  background: rgba(29, 78, 216, 0.45) !important;
  color: rgba(255,255,255,.12) !important;
}

/* Manche Browser nutzen diese Pseudoklasse */
select option:hover {
  background: rgba(29, 78, 216, 0.35) !important;
}

/* iOS/Safari Hinweis:
   native Dropdown-UI ist kaum stylbar.
   Dafür: besser ein eigenes Custom-Select (JS) – wenn du willst, baue ich das später.
*/
/* ===== DEMO Watermark Overlay ===== */
body::after{
  content: "DEMO";
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: clamp(64px, 12vw, 160px);
  font-weight: 900;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,.12);
  transform: rotate(-12deg);
  z-index: 0;
}

.app-header,
.app-main,
dialog,
.modal,
#lagerverwaltung,
.card{
  position: relative;
  z-index: 1; /* damit UI über Wasserzeichen liegt */
}
/* ===== Header bigger typography ===== */
.header-title-main{ font-size: 18px !important; }
.header-title-sub{ font-size: 12.5px !important; opacity: .85; }

.header-pill{
  font-size: 13.5px !important;
  padding: 6px 12px !important;
}
:root{
  --bg: #070b14;
  --surface: rgba(18, 28, 55, .55);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.06);
}

.card{
  background: var(--surface);
  border: 1px solid var(--stroke2);
  border-top-color: var(--stroke);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);

  /* iOS-typisch: mehrere Shadows + kleines Innenhighlight */
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 10px 30px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.25);
}
.card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(1200px 400px at 20% 0%,
    rgba(120,180,255,.18), transparent 60%);
  opacity:.8;
}
.card{ position:relative; overflow:hidden; }
.btn{
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.btn:active{
  transform: translateY(0px) scale(.98);
}
:focus-visible{
  outline: 2px solid rgba(120,180,255,.75);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference){
  .stat-appear{
    animation: pop .35s cubic-bezier(.2, .9, .2, 1);
  }
  @keyframes pop{
    from{ transform: translateY(6px); opacity:0; }
    to{ transform: translateY(0); opacity:1; }
  }
}
.app-bg{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(60,120,255,.18), transparent 60%),
    radial-gradient(800px 520px at 85% 20%, rgba(140,80,255,.14), transparent 55%),
    linear-gradient(180deg, #070b14, #050713);
}
/* Globales X oben rechts für alle <dialog class="dialog"> */
dialog.dialog{
  position: relative;
}

dialog.dialog .dlg-x{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);

  cursor: pointer;
  z-index: 5;
}

dialog.dialog .dlg-x:hover{ background: rgba(255,255,255,.10); }
dialog.dialog .dlg-x:active{ transform: scale(.98); }
/* =========================================
   iOS / iPhone-like Buttons (Glass Pills)
   Paste at END of ops.css
   ========================================= */

:root{
  --ios-radius: 14px;
  --ios-pill: 999px;

  --ios-text: rgba(226,232,240,.94);
  --ios-muted: rgba(148,163,184,.85);

  --ios-bg: rgba(255,255,255,.06);
  --ios-bg-hover: rgba(255,255,255,.09);
  --ios-border: rgba(255,255,255,.14);

  --ios-accent: rgba(56,189,248,.90);
  --ios-accent-bg: rgba(56,189,248,.18);

  --ios-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 10px 24px rgba(0,0,0,.35);
}

/* Base */
.btn{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  min-height: 40px;

  border-radius: var(--ios-pill);
  border: 1px solid var(--ios-border);

  color: var(--ios-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: var(--ios-shadow);

  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);

  transition:
    transform .12s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.btn:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.btn:active{
  transform: translateY(0) scale(.98);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 6px 16px rgba(0,0,0,.32);
}

.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(56,189,248,.18),
    var(--ios-shadow);
  border-color: rgba(56,189,248,.45);
}

/* Variants */
.btn-ghost{
  background: rgba(255,255,255,.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 10px 22px rgba(0,0,0,.25);
}

.btn-primary{
  border-color: rgba(56,189,248,.35);
  background:
    radial-gradient(120% 180% at 20% 0%,
      rgba(56,189,248,.28), transparent 55%),
    linear-gradient(180deg,
      rgba(56,189,248,.22),
      rgba(2,6,23,.10));
}

.btn-primary:hover{
  border-color: rgba(56,189,248,.50);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 30px rgba(0,0,0,.40),
    0 0 0 1px rgba(56,189,248,.10);
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}
/* ===== Dropdown-Pfeil für ALLE Selects (auch ohne .select-wrapper) ===== */
:where(dialog.dialog, #lagerverwaltung) select:not([multiple]):not([size]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  padding-right: 44px !important;           /* Platz für Pfeil */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23E2E8F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;

  cursor: pointer;
}

/* Optional: beim Hover etwas deutlicher */
:where(dialog.dialog, #lagerverwaltung) select:not([multiple]):not([size]):hover {
  border-color: rgba(226,232,240,.28);
}
/* ===== Dialog-Felder: iPhone-Glas + keine "Überlappungs"-Optik ===== */
dialog.dialog .card input:not([type="checkbox"]):not([type="radio"]),
dialog.dialog .card select,
dialog.dialog .card textarea{
  /* Glasig (grau-blau) statt grau */
  background: rgba(15, 23, 42, 0.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.92) !important;

  /* Damit Text sicher "im Feld" sitzt */
  padding: 10px 12px !important;
  min-height: 40px !important;
  line-height: 20px !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

dialog.dialog .card textarea{
  min-height: 70px !important;
}

/* Labels etwas klarer (optional, sicher) */
dialog.dialog .card label{
  display:block;
  margin: 0 0 6px;
  color: rgba(226,232,240,0.88);
}