/* Love Your Beauty – hidden lead dashboard (mini CRM). All selectors are prefixed with .lyb-a / .lyb-admin. */

/* Fast repeated taps on the logo must not trigger double-tap zoom on phones */
.header .logo { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

html.lyb-admin-open, html.lyb-admin-open body { overflow: hidden; }

.lyb-admin {
  --a-gold: var(--gold, #B8915F);
  --a-gold-dark: var(--gold-dark, #8C6A36);
  --a-gold-light: var(--gold-light, #F3DAAA);
  --a-ink: var(--ink-2, #0B0B0B);
  --a-text: var(--ink, #141414);
  --a-muted: var(--muted, #6E655B);
  --a-cream: var(--cream, #FBF8F3);
  --a-cream-2: var(--cream-2, #F4ECDF);
  --a-line: rgba(20, 20, 20, .1);
  --a-r: var(--r, 20px);
  --a-r-lg: var(--r-lg, 28px);
  --a-sans: var(--sans, "Jost", system-ui, -apple-system, sans-serif);
  --a-serif: var(--serif, "Bodoni Moda", "Didot", serif);
  --a-gold-grad: linear-gradient(135deg, #F3DAAA 0%, #C9A06A 45%, #8C6A36 100%);

  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--a-sans); font-size: 16px; line-height: 1.5; color: var(--a-text);
  text-align: left;
}
.lyb-admin[hidden], .lyb-admin [hidden] { display: none !important; }
.lyb-admin *, .lyb-admin *::before, .lyb-admin *::after { box-sizing: border-box; }
.lyb-admin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* zero-specificity resets so component classes below always win */
:where(.lyb-admin) :where(h2, h3, p) { margin: 0; }
:where(.lyb-admin) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.lyb-admin :focus-visible { outline: 2px solid var(--a-gold); outline-offset: 2px; }

.lyb-a-scrim {
  position: absolute; inset: 0; background: rgba(11, 11, 11, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.lyb-a-panel { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lyb-a-panel > * { pointer-events: auto; }
.lyb-admin.is-in .lyb-a-scrim { opacity: 1; }

.lyb-a-eyebrow { font-size: .72rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--a-gold); }

/* ---------- Buttons ---------- */
.lyb-a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .8em 1.4em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; letter-spacing: .02em; cursor: pointer; transition: transform .15s, box-shadow .2s, opacity .2s;
}
.lyb-a-btn:disabled { opacity: .6; cursor: progress; }
.lyb-a-btn--block { width: 100%; }
.lyb-a-btn--gold { background: var(--a-gold-grad); color: var(--a-ink); box-shadow: 0 12px 30px -14px rgba(184, 145, 95, .9); }
.lyb-a-btn--gold:not(:disabled):hover { transform: translateY(-1px); }
.lyb-a-btn--dark { background: var(--a-ink); color: #fff; }

.lyb-a-x {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.lyb-a-x--light { color: rgba(255, 255, 255, .7); }
.lyb-a-x--light:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Login ---------- */
.lyb-a-login {
  position: relative; width: min(420px, calc(100% - 32px));
  padding: 44px 32px 32px; border-radius: var(--a-r-lg);
  background: radial-gradient(120% 80% at 50% 0%, #1d1912 0%, var(--a-ink) 60%);
  color: #F5EDE0; text-align: center;
  border: 1px solid rgba(243, 218, 170, .18);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.lyb-admin.is-in .lyb-a-login { transform: none; opacity: 1; }
.lyb-a-login__icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px;
  border-radius: 50%; border: 1px solid rgba(243, 218, 170, .35); color: var(--a-gold-light);
}
.lyb-a-login__icon svg { width: 24px; height: 24px; }
.lyb-a-login__title { margin-top: 8px; font-family: var(--a-serif); font-weight: 400; font-size: 2rem; line-height: 1.1; color: #fff; }
.lyb-a-login__title:focus { outline: none; }
.lyb-a-login__sub { margin-top: 8px; color: rgba(245, 237, 224, .65); font-size: .95rem; }
.lyb-a-login__form { margin-top: 26px; text-align: left; }
.lyb-a-label { display: block; margin-bottom: 6px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 237, 224, .7); }
.lyb-a-pwwrap { position: relative; }
.lyb-a-pwwrap input {
  width: 100%; height: 52px; padding: 0 54px 0 18px; border-radius: 14px;
  border: 1px solid rgba(243, 218, 170, .25); background: rgba(255, 255, 255, .06); color: #fff;
  font-size: 16px; letter-spacing: .04em; transition: border-color .2s, background .2s;
}
.lyb-a-pwwrap input:focus { outline: none; border-color: var(--a-gold); background: rgba(255, 255, 255, .09); }
.lyb-a-pwtoggle {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: rgba(245, 237, 224, .7); cursor: pointer;
}
.lyb-a-pwtoggle:hover { color: #fff; }
.lyb-a-login__msg { min-height: 1.5em; margin: 10px 0 14px; font-size: .9rem; color: #F2B8A0; }

/* ---------- Dashboard ---------- */
.lyb-a-dash {
  position: relative; display: flex; flex-direction: column;
  width: min(1120px, calc(100% - 48px)); height: min(860px, calc(100% - 48px));
  background: var(--a-cream); border-radius: var(--a-r-lg); overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6);
  transform: translateY(14px); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.lyb-admin.is-in .lyb-a-dash { transform: none; opacity: 1; }

.lyb-a-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px 18px 28px; background: var(--a-ink); color: #fff;
  border-bottom: 1px solid rgba(243, 218, 170, .2);
}
.lyb-a-top__brand { min-width: 0; }
.lyb-a-top .lyb-a-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyb-a-top__title { font-family: var(--a-serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: #fff; }
.lyb-a-top__title:focus { outline: none; }
.lyb-a-top__actions { display: flex; align-items: center; gap: 6px; }
.lyb-a-icobtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid rgba(243, 218, 170, .22);
  border-radius: 999px; background: transparent; color: var(--a-gold-light); cursor: pointer; transition: background .2s, color .2s;
}
.lyb-a-icobtn:hover { background: rgba(243, 218, 170, .1); color: #fff; }
.lyb-a-icobtn--label { padding: 0 14px 0 12px; font-size: .85rem; letter-spacing: .1em; }
.lyb-a-icobtn.is-spin svg { animation: lybSpin .8s linear infinite; }
@keyframes lybSpin { to { transform: rotate(360deg); } }

.lyb-a-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 22px 28px 40px; }

.lyb-a-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.lyb-a-stat {
  position: relative; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--a-line);
  overflow: hidden;
}
.lyb-a-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--s, var(--a-gold)); }
.lyb-a-stat b { display: block; font-family: var(--a-serif); font-weight: 500; font-size: 1.9rem; line-height: 1; }
.lyb-a-stat span { display: block; margin-top: 6px; font-size: .78rem; letter-spacing: .06em; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyb-a-stat--total { background: var(--a-ink); border-color: var(--a-ink); color: #fff; }
.lyb-a-stat--total::before { background: var(--a-gold-grad); }
.lyb-a-stat--total span { color: var(--a-gold-light); }

/* status colours */
.lyb-admin [data-status="neu"] { --s: #B8915F; --s-bg: #F6EBD8; }
.lyb-admin [data-status="kontaktiert"] { --s: #4A6FA5; --s-bg: #E4ECF6; }
.lyb-admin [data-status="termin"] { --s: #8A5BA8; --s-bg: #EFE5F5; }
.lyb-admin [data-status="kunde"] { --s: #2E8B57; --s-bg: #E0F1E7; }
.lyb-admin [data-status="kein_interesse"] { --s: #8C857D; --s-bg: #EDEAE6; }

.lyb-a-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 16px; }
.lyb-a-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.lyb-a-chips::-webkit-scrollbar { display: none; }
.lyb-a-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 40px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--a-line);
  background: #fff; font-size: .9rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.lyb-a-chip:hover { border-color: var(--a-gold); }
.lyb-a-chip__n { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--s-bg, var(--a-cream-2)); color: var(--s, var(--a-text)); font-size: .78rem; font-weight: 500; text-align: center; }
.lyb-a-chip.is-active { background: var(--a-ink); border-color: var(--a-ink); color: #fff; }
.lyb-a-chip.is-active .lyb-a-chip__n { background: var(--a-gold-grad); color: var(--a-ink); }

.lyb-a-search {
  position: relative; display: flex; align-items: center; flex: 0 1 280px; min-width: 200px;
  height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--a-line); background: #fff; color: var(--a-muted);
}
.lyb-a-search:focus-within { border-color: var(--a-gold); }
.lyb-a-search > span { display: flex; }
.lyb-a-search__input { flex: 1; min-width: 0; height: 100%; margin-left: 8px; border: 0; background: transparent; font-size: 16px; color: var(--a-text); }
.lyb-a-search__input:focus { outline: none; }

.lyb-a-list { display: grid; gap: 10px; }
.lyb-a-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px;
  padding: 18px 18px 18px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--a-line);
  box-shadow: 0 10px 30px -26px rgba(60, 44, 20, .5);
}
.lyb-a-card::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--s); }
.lyb-a-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lyb-a-card__name { font-size: 1.15rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.lyb-a-flag { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 7px 3px 4px; border-radius: 6px; background: var(--a-cream-2); font-size: .7rem; font-weight: 600; letter-spacing: .08em; }
.lyb-admin .lyb-a-flag svg { width: 18px; height: 12px; border-radius: 2px; stroke: none; stroke-width: 0; }
.lyb-admin .lyb-a-flag svg path[stroke] { stroke-linecap: butt; }
.lyb-a-card__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; font-size: .88rem; color: var(--a-muted); }
.lyb-a-card__rel { font-size: .78rem; color: var(--a-gold-dark); }
.lyb-a-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lyb-a-tag { display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: var(--a-cream); border: 1px solid var(--a-line); font-size: .92rem; font-weight: 500; line-height: 1.2; }
.lyb-a-tag small { font-size: .68rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); }
.lyb-a-tag--yes { border-color: rgba(184, 145, 95, .45); background: #FBF3E6; }

.lyb-a-card__side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lyb-a-card__row { display: flex; gap: 8px; }
.lyb-a-select {
  flex: 1; min-width: 0; height: 44px; padding: 0 38px 0 14px; border-radius: 12px;
  border: 1px solid var(--s); background-color: var(--s-bg); color: var(--a-text); font-size: 16px; font-weight: 500; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.lyb-a-del {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--a-line); background: #fff; color: var(--a-muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.lyb-a-del:hover { color: #B3261E; border-color: rgba(179, 38, 30, .4); background: #FDF1EF; }
.lyb-a-notewrap { position: relative; }
.lyb-a-note {
  display: block; width: 100%; min-height: 64px; padding: 10px 12px 22px; border-radius: 12px; resize: vertical;
  border: 1px solid var(--a-line); background: var(--a-cream); font-size: 16px; line-height: 1.4; transition: border-color .2s, background .2s;
}
.lyb-a-note:focus { outline: none; border-color: var(--a-gold); background: #fff; }
.lyb-a-saved { position: absolute; right: 10px; bottom: 6px; font-size: .72rem; color: var(--a-muted); pointer-events: none; }
.lyb-a-saved.is-ok { color: #2E8B57; }
.lyb-a-saved.is-error { color: #B3261E; }

.lyb-a-empty { display: grid; justify-items: center; gap: 14px; padding: 56px 20px; border-radius: 18px; border: 1px dashed rgba(184, 145, 95, .45); text-align: center; color: var(--a-muted); }
.lyb-a-empty p { max-width: 36ch; }

.lyb-a-toast {
  position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px; background: var(--a-ink); color: #fff;
  font-size: .92rem; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s;
}
.lyb-a-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.lyb-a-toast.is-error { background: #8E1F18; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .lyb-a-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lyb-a-card { grid-template-columns: 1fr; gap: 14px; }
  .lyb-a-tools { flex-direction: column; align-items: stretch; }
  .lyb-a-search { flex-basis: auto; }
}

/* ---------- Phone: full screen ---------- */
@media (max-width: 640px) {
  .lyb-a-dash { width: 100%; height: 100%; border-radius: 0; }
  .lyb-a-top { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 16px; }
  .lyb-a-top__title { font-size: 1.5rem; }
  .lyb-a-eyebrow { font-size: .62rem; letter-spacing: .22em; }
  .lyb-a-top__actions { gap: 4px; }
  .lyb-a-icobtn { min-width: 40px; height: 40px; padding: 0 8px; }
  .lyb-a-icobtn--label span { display: none; }
  .lyb-a-body { padding: 16px 14px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .lyb-a-stats { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; gap: 8px; scroll-snap-type: x proximity; }
  .lyb-a-stats::-webkit-scrollbar { display: none; }
  .lyb-a-stat { flex: 0 0 auto; min-width: 104px; padding: 12px 14px; scroll-snap-align: start; }
  .lyb-a-stat b { font-size: 1.6rem; }
  .lyb-a-tools { margin: 16px 0 12px; gap: 10px; }
  .lyb-a-chips { margin: 0 -14px; padding: 2px 14px; }
  .lyb-a-card { padding: 16px 14px 14px 18px; border-radius: 16px; }
  .lyb-a-login { padding: 40px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lyb-admin *, .lyb-admin *::before, .lyb-admin *::after { transition: none !important; animation: none !important; }
}