/* =====================================================================
   EG Tools · gemeinsame Huelle (Seitenleiste, Kopfzeile, Grundlook)
   Wird von allen Tool-Seiten nach ihren eigenen Stilen geladen.
   Funktionen der Seiten bleiben unberuehrt – hier aendert sich nur die Optik.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');

body.egs{
  --egs-side:232px; --egs-bg:#f7f5f1; --egs-ink:#1f1d1a; --egs-ink2:#4a4540; --egs-muted:#8a827a;
  --egs-line:#e9e4dc; --egs-line2:#ddd6cb; --egs-gold:#C0863A; --egs-gold-soft:#f6efe3;
  background:var(--egs-bg)!important;
  padding-left:calc(var(--egs-side) + 28px)!important; padding-right:28px!important; padding-top:0!important;
  overflow-x:clip!important; overflow-y:visible!important;
  font-family:'Poppins',system-ui,sans-serif;
}
html:has(body.egs){ overflow-x:clip!important; }
/* Inhalte nutzen die volle Bildschirmbreite (Seiten begrenzen sich sonst auf 920–1600 px) */
body.egs .wrap, body.egs .eg-wrap, body.egs .home-wrap{ max-width:none!important; width:auto!important; margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important; }

/* ---------- Seitenleiste ---------- */
.egs-side{position:fixed;left:0;top:0;bottom:0;width:var(--egs-side);background:#1f1d1a;color:#e9e4dc;padding:20px 14px;display:flex;flex-direction:column;gap:2px;z-index:900;overflow-y:auto;font:14px/1.45 'Poppins',system-ui,sans-serif}
.egs-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:6px 10px 18px;text-decoration:none}
.egs-brand img{width:132px;height:auto;display:block}
.egs-brand span{font-size:11px;color:var(--egs-gold);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.egs-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a827a;padding:14px 10px 6px}
.egs-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#cfc8bd;font-size:13.5px;text-decoration:none;border:0;background:none;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.egs-nav:hover{background:#2b2824;color:#fff}
.egs-nav.on{background:#34302b;color:#fff}
.egs-nav .ic{width:18px;text-align:center;opacity:.9;flex:none}
.egs-nav .tag{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#1f1d1a;background:var(--egs-gold);border-radius:999px;padding:1px 7px}
.egs-foot{margin-top:auto;padding-top:12px;border-top:1px solid #34302b;display:flex;flex-direction:column;gap:2px}
.egs-foot .egs-nav{font-size:12.5px;padding:7px 10px;color:#a9a196}
.egs-user{font-size:11.5px;color:#8a827a;padding:4px 10px 8px;word-break:break-all}
.egs-admin{display:none!important}
body.egs-is-admin .egs-admin{display:flex!important}
body.egs-is-admin .egs-h.egs-admin{display:block!important}

/* ---------- Kopfzeile: vorhandene eg-appbar im neuen Look ---------- */
body.egs .eg-appbar{
  position:sticky!important; top:0!important; z-index:800!important;
  left:auto!important; right:auto!important; width:auto!important;
  margin:0 0 22px!important; padding:14px 0!important; border-radius:0!important;
  background:rgba(247,245,241,.94)!important; -webkit-backdrop-filter:blur(8px)!important; backdrop-filter:blur(8px)!important;
  border-bottom:1px solid var(--egs-line)!important; box-shadow:none!important;
}
body.egs .eg-appbar .back, body.egs .eg-appbar .logo, body.egs .eg-appbar img.logo{display:none!important}
body.egs .eg-appbar .name{font-family:'Libre Baskerville',Georgia,serif!important;font-size:19px!important;font-weight:400!important;color:var(--egs-ink)!important;letter-spacing:0!important}
body.egs .eg-appbar .logout{display:none!important}          /* Abmelden steht in der Seitenleiste */
body.egs .eg-appbar .user, body.egs .eg-appbar #userChip{font-size:12px!important;color:var(--egs-muted)!important}

/* ---------- Ladebalken (Shopify-Abruf) ---------- */
.egs-progress{position:fixed;left:var(--egs-side,0px);right:0;top:0;height:4px;background:rgba(192,134,58,.15);z-index:950;opacity:0;transition:opacity .25s;pointer-events:none}
.egs-progress.on{opacity:1}
.egs-progress i{display:block;height:100%;width:0;background:var(--egs-gold,#C0863A);transition:width .6s ease}
.egs-progress.indet i{width:30%!important;animation:egsIndet 1.2s ease-in-out infinite}
@keyframes egsIndet{0%{margin-left:-30%}100%{margin-left:100%}}
.egs-pbar{display:inline-flex;align-items:center;gap:10px;vertical-align:middle}
.egs-pbar .tr{width:180px;height:8px;border-radius:999px;background:#ece6dc;overflow:hidden}
.egs-pbar .tr i{display:block;height:100%;width:0;background:var(--egs-gold,#C0863A);border-radius:999px;transition:width .6s ease}
.egs-pbar b{font-variant-numeric:tabular-nums;min-width:38px}

/* ---------- Grundbausteine angleichen ---------- */
body.egs .card{border-color:var(--egs-line)!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(31,29,26,.04)}
body.egs .summary-chip{border-color:var(--egs-line)!important;border-radius:12px!important}
body.egs .btn-primary, body.egs .btn-add, body.egs .btn-save, body.egs .btn-login{background:var(--egs-ink)!important;border-color:var(--egs-ink)!important;color:#fff!important;border-radius:9px!important}
body.egs .btn-primary:hover, body.egs .btn-add:hover, body.egs .btn-save:hover, body.egs .btn-login:hover{background:#000!important}
body.egs .btn-ghost, body.egs .btn-remove, body.egs .btn-order{border-color:var(--egs-line2)!important;border-radius:9px!important;color:var(--egs-ink)!important}
body.egs input[type=text], body.egs input[type=number], body.egs input[type=search], body.egs input[type=email], body.egs input[type=date], body.egs select, body.egs textarea{border-color:var(--egs-line2);border-radius:9px}
body.egs .modal{border-radius:16px!important}

/* ---------- Startseite (Tool-Uebersicht) ---------- */
body.egs.home .home-userbar, body.egs.home .home-head .logo{display:none!important}
body.egs.home .home-wrap{max-width:none!important;margin:0!important;padding:28px 0 60px!important}
body.egs.home .home-head{margin:0 0 24px!important;padding:0!important;border:0!important}
body.egs.home .home-head h1{font-family:'Libre Baskerville',Georgia,serif!important;font-weight:400!important;font-size:26px!important;color:var(--egs-ink)!important}
body.egs.home .home-head p{color:var(--egs-muted)!important}
body.egs.home .tool-grid{gap:14px!important}
body.egs.home .tool-card{background:#fff!important;border:1px solid var(--egs-line)!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(31,29,26,.04)!important;transition:.12s}
body.egs.home .tool-card:hover{border-color:var(--egs-ink)!important;transform:translateY(-1px)}
body.egs.home .tool-icon{background:var(--egs-gold-soft)!important;border-radius:10px!important}

/* ---------- Login / Passwort (ohne Seitenleiste) ---------- */
body.egs-plain{background:var(--egs-bg)!important}
body.egs-plain .login-card{border:1px solid var(--egs-line)!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(31,29,26,.06)!important}
body.egs-plain .btn-login{background:#1f1d1a!important;border-radius:9px!important}
body.egs-plain .btn-login:hover{background:#000!important}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:820px){
  body.egs{--egs-side:0px; padding-left:16px!important; padding-right:16px!important}
  .egs-side{position:static;width:auto;flex-direction:row;flex-wrap:wrap;padding:10px;margin:0 -16px 12px}
  .egs-side .egs-h,.egs-side .egs-foot,.egs-brand{display:none!important}
  .egs-nav{width:auto}
}
@media print{ .egs-side{display:none!important} body.egs{padding-left:0!important} body.egs .eg-appbar{position:static!important} }