/* =========================================================================
   ServiceHub — Einheitlicher Detail-Drawer (Slide-over) für alle Listen
   Handoff "Servicehub.zip": .drawer/.scrim (theme.css) + .dh/.db/.df/.dgrid/
   .dfield/.postbl/.timeline (app.css), exakt das openOrderDrawer()-Muster.
   ──────────────────────────────────────────────────────────────────────────
   Scoping: alles unter .sh-redesign (Tokens) + shx-Präfix für die Drawer-Chrome,
   damit nichts mit bestehenden App-Klassen (.drawer/.scrim/.dh …) kollidiert.
   Self-contained: Tokens hier dupliziert (gleiche Werte wie theme.css) → der
   Drawer funktioniert auch ohne das Dashboard-CSS. Light + Dark via [data-theme].
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- Tokens (Light) ---------- */
.sh-redesign{
  --accent:#E73D25; --accent-700:#C5331E; --accent-600:#D6371F;
  --accent-soft:#FCEDE7; --accent-line:rgba(231,61,37,.22);
  --honey:#D99A2B; --honey-soft:#FBF0DA;
  --ok:#16A34A; --ok-soft:#E9F8EF;
  --warn:#C7791A; --warn-soft:#FBF1E0;
  --info:#2F6BD6; --info-soft:#EAF1FC;
  --violet:#7C5BD6; --violet-soft:#F0ECFB;
  --bg:#FAF6F2; --surface:#FFFFFF; --surf-2:#F6F1EB; --surf-3:#EFE8E0;
  --ink:#231C17; --text:#463D35; --text-2:#6B6157; --muted:#9A8F84;
  --border:#EEE5DC; --border-2:#E3D9CE; --field:#F6F1EB;
  --font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --r-xs:7px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(120,80,50,.06);
  --sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --sh-lg:0 18px 44px rgba(120,80,50,.14);
  --sh-accent:0 5px 14px rgba(231,61,37,.28);
  --ring:0 0 0 3px var(--accent-soft);
  --tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .sh-redesign{
  --accent:#F2543B; --accent-700:#E0432B; --accent-600:#EC4A30;
  --accent-soft:rgba(242,84,59,.16); --accent-line:rgba(242,84,59,.30);
  --honey:#E6AE4A; --honey-soft:rgba(230,174,74,.16);
  --ok:#3Bc07a; --ok-soft:rgba(59,192,122,.15);
  --warn:#E5A33C; --warn-soft:rgba(229,163,60,.15);
  --info:#5C8FE8; --info-soft:rgba(92,143,232,.16);
  --violet:#9D82E6; --violet-soft:rgba(157,130,230,.16);
  --bg:#15120F; --surface:#1E1A16; --surf-2:#241F1A; --surf-3:#2C2620;
  --ink:#F6F1EC; --text:#E2D8CE; --text-2:#B3A99E; --muted:#8C8175;
  --border:#2E2822; --border-2:#3A332B; --field:#241F1A;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --sh-lg:0 18px 44px rgba(0,0,0,.5);
  --ring:0 0 0 3px var(--accent-soft);
}

/* ---------- Buttons (theme.css), scoped ---------- */
.sh-redesign .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:none;cursor:pointer;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:600;font-size:13.5px;transition:var(--tr);white-space:nowrap}
.sh-redesign .btn svg{width:16px;height:16px}
.sh-redesign .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-accent)}
.sh-redesign .btn-primary:hover{background:var(--accent-700);transform:translateY(-1px)}
.sh-redesign .btn-ghost{background:var(--surface);border:1px solid var(--border-2);color:var(--text)}
.sh-redesign .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ---------- Badges (theme.css), scoped ---------- */
.sh-redesign .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;white-space:nowrap}
.sh-redesign .badge i{width:6px;height:6px;border-radius:50%}
.sh-redesign .b-neutral{background:var(--surf-2);color:var(--text-2)} .sh-redesign .b-neutral i{background:var(--muted)}
.sh-redesign .b-info{background:var(--info-soft);color:var(--info)} .sh-redesign .b-info i{background:var(--info)}
.sh-redesign .b-ok{background:var(--ok-soft);color:var(--ok)} .sh-redesign .b-ok i{background:var(--ok)}
.sh-redesign .b-warn{background:var(--warn-soft);color:var(--warn)} .sh-redesign .b-warn i{background:var(--warn)}
.sh-redesign .b-violet{background:var(--violet-soft);color:var(--violet)} .sh-redesign .b-violet i{background:var(--violet)}
.sh-redesign .b-accent{background:var(--accent-soft);color:var(--accent)} .sh-redesign .b-accent i{background:var(--accent)}

/* ---------- Slide-over mechanics (.scrim/.drawer aus theme.css) ---------- */
.shx-scrim{position:fixed;inset:0;background:rgba(35,25,18,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:var(--tr);z-index:99990}
.shx-scrim.is-open{opacity:1;pointer-events:auto}
.shx-drawer{position:fixed;top:0;right:0;height:100vh;width:480px;max-width:94vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--sh-lg);transform:translateX(102%);transition:.32s cubic-bezier(.2,.7,.3,1);z-index:99991;display:flex;flex-direction:column;font-family:var(--font-body);color:var(--text)}
.shx-drawer.is-open{transform:none}
.shx-drawer *{box-sizing:border-box}
.shx-drawer h2,.shx-drawer p{margin:0}
.shx-drawer svg{display:block}

/* ---------- Drawer head (.dh) ---------- */
.shx-dh{padding:20px 22px 16px;border-bottom:1px solid var(--border)}
.shx-dh-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.shx-dh-num{font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
.shx-dh-x{margin-left:auto;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:var(--tr)}
.shx-dh-x:hover{background:var(--surf-2);color:var(--ink)}
.shx-dh-x svg{width:16px;height:16px}
.shx-dh-title{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:12px;letter-spacing:-.01em}

/* ---------- Drawer body (.db) ---------- */
.shx-db{flex:1;overflow-y:auto;padding:20px 22px}
.shx-dsec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.shx-dsec.mt{margin-top:24px}
.shx-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:26px}
.shx-dfield label{font-size:11.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.shx-dfield label svg{width:13px;height:13px}
.shx-dfield .v{font-size:13.5px;font-weight:500;color:var(--ink);word-break:break-word}
.shx-dfield.span2{grid-column:1/-1}

/* ---------- mini positions table (.postbl) ---------- */
.shx-postbl{width:100%;border-collapse:collapse;margin-bottom:10px}
.shx-postbl th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:6px 8px;font-weight:700}
.shx-postbl td{padding:8px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text);vertical-align:top}
.shx-postbl .r{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.shx-postbl tfoot td{border-top:2px solid var(--border-2);font-weight:700;color:var(--ink)}

/* ---------- amount summary rows ---------- */
.shx-sums{display:flex;flex-direction:column;gap:7px;margin:4px 0 6px;padding:14px 16px;background:var(--surf-2);border-radius:var(--r-md)}
.shx-sums .row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-2)}
.shx-sums .row .v{font-family:var(--font-mono);color:var(--ink);font-weight:600}
.shx-sums .row.big{padding-top:8px;border-top:1px solid var(--border-2);margin-top:2px}
.shx-sums .row.big .l{font-weight:700;color:var(--ink);font-size:14px}
.shx-sums .row.big .v{font-size:15px;color:var(--accent)}
.shx-sums .row.due .v{color:var(--accent)}

/* ---------- timeline (.timeline/.tl) ---------- */
.shx-timeline{position:relative;padding-left:8px;margin-bottom:4px}
.shx-tl{position:relative;padding:0 0 18px 24px;border-left:2px solid var(--border)}
.shx-tl:last-child{border-left-color:transparent;padding-bottom:0}
.shx-tl::before{content:"";position:absolute;left:-7px;top:1px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--border-2)}
.shx-tl.done::before{background:var(--ok);border-color:var(--ok)}
.shx-tl.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.shx-tl .w{font-size:11.5px;color:var(--muted);font-weight:600}
.shx-tl .t{font-size:13px;color:var(--ink);font-weight:500;margin-top:1px}

/* ---------- footer (.df) ---------- */
.shx-df{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px}
.shx-df .btn{flex:1}

/* ---------- loading / empty / error ---------- */
.shx-loading,.shx-empty{padding:40px 22px;text-align:center;color:var(--muted);font-size:13px}
.shx-spin{width:22px;height:22px;border:2.5px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;margin:0 auto 12px;animation:shx-rot .8s linear infinite}
@keyframes shx-rot{to{transform:rotate(360deg)}}

/* ---------- Mobile: Bottom-Sheet ---------- */
@media(max-width:640px){
  .shx-drawer{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;height:88vh;border-left:none;border-top:1px solid var(--border);border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(102%)}
  .shx-drawer.is-open{transform:none}
  .shx-drawer::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:var(--r-pill);background:var(--border-2)}
  .shx-dh{padding-top:24px}
  .shx-dgrid{grid-template-columns:1fr}
}