/* ════════════════════════════════════════════════════════════════
   shared-ui.css — Tovaglia Shared UI Primitives
   Buttons · Toggles · Badges · Swatches · Segmented Controls
   Used across: index.html, hub.html, produkte.html, dashboard.html,
                cards.html, board.html, board-editor.html
   Loaded standalone — does NOT depend on ui.css.
   ──────────────────────────────────────────────────────────────── */

/* ── Design Tokens (Dark default) ── */
:root {
  --sui-bg:            #141210;
  --sui-surface:       #1B1917;
  --sui-border:        rgba(244,239,232,0.08);
  --sui-border-strong: rgba(244,239,232,0.16);
  --sui-hover:         rgba(244,239,232,0.04);
  --sui-hover-strong:  rgba(244,239,232,0.06);
  --sui-accent:        #7A1F2E;
  --sui-accent-bright: #9E2A3C;
  --sui-accent-dim:    rgba(122,31,46,0.45);
  --sui-text:          #F0EBE3;
  --sui-text2:         #B5ADA3;
  --sui-text3:         #7A7268;
  --sui-text-ghost:    rgba(244,239,232,0.22);
  --sui-danger:        #C44A4A;
  --sui-radius:        8px;
  --sui-radius-pill:   100px;
  --sui-easing:        cubic-bezier(.23,1,.32,1);
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  font-family: 'DM Sans','Jost',sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.22s var(--sui-easing);
  border-radius: var(--sui-radius);
  white-space: nowrap; position: relative;
  text-decoration: none;
}
.btn svg { width: 12px; height: 12px; }

.btn-ghost {
  background: transparent;
  color: var(--sui-text2);
  border-color: var(--sui-border);
}
.btn-ghost:hover {
  background: var(--sui-hover);
  color: var(--sui-text);
  border-color: var(--sui-border-strong);
}

.btn-primary {
  background: var(--sui-accent);
  color: #F4EFE8;
  border-color: rgba(244,239,232,0.08);
  box-shadow: 0 2px 12px rgba(122,31,46,0.25);
}
.btn-primary:hover {
  background: var(--sui-accent-bright);
  border-color: rgba(244,239,232,0.12);
  box-shadow: 0 6px 20px rgba(122,31,46,0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(122,31,46,0.3); }

.btn-dim {
  background: transparent; border: none;
  color: var(--sui-text-ghost);
  font-size: 10px; letter-spacing: 0.16em; padding: 8px 10px;
  text-transform: uppercase; font-weight: 500;
  border-radius: var(--sui-radius); cursor: pointer;
  font-family: 'DM Sans','Jost',sans-serif;
  transition: color 0.22s;
}
.btn-dim:hover { color: rgba(244,239,232,0.5); }

.btn-danger {
  background: transparent; color: var(--sui-danger);
  border: 1px solid transparent;
  padding: 5px 9px; font-size: 11px;
  border-radius: var(--sui-radius);
  font-family: inherit; cursor: pointer;
  transition: all 0.22s;
}
.btn-danger:hover { background: rgba(196,74,74,0.08); border-color: rgba(196,74,74,0.2); }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; color: var(--sui-text3);
  border: 1px solid var(--sui-border); border-radius: var(--sui-radius);
  font-size: 12px; cursor: pointer;
  font-family: inherit;
  transition: all 0.22s;
}
.btn-icon:hover { color: var(--sui-text); background: var(--sui-hover); border-color: var(--sui-border-strong); }
.btn-icon:disabled { opacity: 0.28; cursor: default; }
.btn-icon:disabled:hover { background: transparent; color: var(--sui-text3); border-color: var(--sui-border); }
.btn-icon svg { width: 13px; height: 13px; display: block; }

.btn.btn-icon-only {
  width: 30px; height: 30px; padding: 0;
  font-size: 14px; letter-spacing: 0; gap: 0;
  justify-content: center;
}
.btn.btn-icon-only:disabled { opacity: 0.28; cursor: default; }

.home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--sui-radius);
  background: var(--sui-accent); color: #F4EFE8;
  text-decoration: none; border: 1px solid rgba(244,239,232,0.06);
  transition: all 0.22s;
}
.home-btn:hover { background: var(--sui-accent-bright); }
.home-btn svg { width: 13px; height: 13px; display: block; }

.btn-add, .btn-add-variant {
  background: transparent; color: var(--sui-text3);
  border: 1px dashed rgba(244,239,232,0.14);
  width: 100%; justify-content: center;
  padding: 12px; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  border-radius: var(--sui-radius); margin-top: 8px;
  font-family: 'DM Sans','Jost',sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 0.22s;
}
.btn-add:hover, .btn-add-variant:hover {
  background: rgba(122,31,46,0.05);
  border-color: var(--sui-accent-dim);
  color: var(--sui-accent);
}

/* Small icon button (tables, inline actions) */
.btn-icon-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; color: var(--sui-text3);
  border: 1px solid transparent; border-radius: 6px;
  font-size: 11px; cursor: pointer; font-family: inherit;
  transition: all 0.18s;
}
.btn-icon-sm:hover { color: var(--sui-text); background: var(--sui-hover-strong); border-color: var(--sui-border); }
.btn-icon-sm.danger:hover { color: var(--sui-danger); border-color: rgba(196,74,74,0.3); }

.btn-danger-sm {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--sui-danger);
  border: 1px solid rgba(196,74,74,0.22); border-radius: 6px;
  cursor: pointer; font-family: inherit;
  transition: all 0.18s;
}
.btn-danger-sm:hover { background: rgba(196,74,74,0.08); border-color: var(--sui-danger); }

/* Undo/Redo cluster */
.undo-redo-group {
  display: inline-flex; gap: 2px; padding: 2px;
  background: rgba(244,239,232,0.025);
  border: 1px solid var(--sui-border);
  border-radius: 10px;
}
.undo-redo-group .btn { border: none; border-radius: 7px; width: 26px; height: 26px; padding: 0; gap: 0; justify-content: center; }
.undo-redo-group .btn:hover { background: var(--sui-hover-strong); border: none; }
.undo-redo-group .btn:disabled { opacity: 0.28; cursor: default; background: transparent; color: var(--sui-text3); }

/* ════════════════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════════════════ */
.plan-badge {
  font-family: 'DM Sans','Jost',sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: var(--sui-radius-pill); display: inline-block;
  border: 1px solid var(--sui-border);
}
.plan-badge--free     { background: rgba(244,239,232,0.04); color: var(--sui-text3); }
.plan-badge--pro      { background: rgba(122,31,46,0.10);   color: var(--sui-accent); border-color: var(--sui-accent-dim); }
.plan-badge--business { background: rgba(122,31,46,0.14);   color: var(--sui-accent); border-color: var(--sui-accent-dim); }

/* ════════════════════════════════════════════════════════════════
   TOGGLE SWITCH (e.g. print modal, settings)
════════════════════════════════════════════════════════════════ */
.toggle, .sui-toggle {
  position: relative; width: 36px; height: 20px; flex-shrink: 0;
  display: inline-block;
}
.toggle input, .sui-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track, .sui-toggle-track {
  position: absolute; inset: 0;
  background: rgba(244,239,232,0.08);
  border-radius: 10px; cursor: pointer;
  transition: background 0.2s;
}
.toggle input:checked + .toggle-track,
.sui-toggle input:checked + .sui-toggle-track {
  background: var(--sui-accent);
}
.toggle-thumb, .sui-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff;
  border-radius: 50%; transition: transform 0.2s;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle input:checked ~ .toggle-thumb,
.sui-toggle input:checked ~ .sui-toggle-thumb {
  transform: translateX(16px);
}

/* ════════════════════════════════════════════════════════════════
   SEGMENTED CONTROL (Dark/Light, template switch, etc.)
════════════════════════════════════════════════════════════════ */
.seg {
  display: inline-flex; padding: 3px;
  background: rgba(244,239,232,0.03);
  border: 1px solid var(--sui-border);
  border-radius: var(--sui-radius-pill);
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: none; background: transparent;
  border-radius: var(--sui-radius-pill); cursor: pointer;
  font-family: 'DM Sans','Jost',sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sui-text3);
  transition: all 0.22s;
}
.seg-btn:hover { color: var(--sui-text2); }
.seg-btn.active {
  background: var(--sui-text);
  color: #1A1816;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.seg-btn .seg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.7; flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   COLOR SWATCH
════════════════════════════════════════════════════════════════ */
.sui-swatch, .header-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(244,239,232,0.14);
  cursor: pointer; outline: none; flex-shrink: 0;
  transition: transform 0.22s, box-shadow 0.22s;
}
.sui-swatch:hover, .header-swatch:hover { transform: scale(1.14); }
.sui-swatch.active, .header-swatch.active {
  box-shadow: 0 0 0 2px var(--sui-surface), 0 0 0 3px var(--sui-accent);
}

/* ════════════════════════════════════════════════════════════════
   DIVIDER
════════════════════════════════════════════════════════════════ */
.header-divider {
  width: 1px; height: 20px;
  background: var(--sui-border);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
════════════════════════════════════════════════════════════════ */
[data-ui-theme="light"] {
  --sui-bg:            #F4EFE8;
  --sui-surface:       #FFFFFF;
  --sui-border:        rgba(26,24,22,0.12);
  --sui-border-strong: rgba(26,24,22,0.25);
  --sui-hover:         rgba(26,24,22,0.04);
  --sui-hover-strong:  rgba(26,24,22,0.06);
  --sui-text:          #1A1816;
  --sui-text2:         #4A4540;
  --sui-text3:         #8A8278;
  --sui-text-ghost:    rgba(26,24,22,0.35);
  --sui-danger:        #B03030;
}

[data-ui-theme="light"] .btn-primary {
  background: var(--sui-accent);
  border-color: rgba(122,31,46,0.4);
  color: #F4EFE8;
  box-shadow: 0 2px 10px rgba(122,31,46,0.2);
}
[data-ui-theme="light"] .btn-primary:hover {
  background: var(--sui-accent-bright);
  box-shadow: 0 6px 20px rgba(122,31,46,0.28);
}
[data-ui-theme="light"] .home-btn { border-color: rgba(122,31,46,0.3); }
[data-ui-theme="light"] .toggle-thumb,
[data-ui-theme="light"] .sui-toggle-thumb { background: #FFFFFF; box-shadow: 0 1px 3px rgba(26,24,22,0.2); }
[data-ui-theme="light"] .toggle-track,
[data-ui-theme="light"] .sui-toggle-track { background: rgba(26,24,22,0.12); }
[data-ui-theme="light"] .seg-btn.active {
  background: #1A1816; color: #F4EFE8;
  box-shadow: 0 2px 6px rgba(26,24,22,0.18);
}
[data-ui-theme="light"] .plan-badge--free { background: rgba(26,24,22,0.04); }
[data-ui-theme="light"] .plan-badge--pro,
[data-ui-theme="light"] .plan-badge--business {
  background: rgba(122,31,46,0.08);
  border-color: rgba(122,31,46,0.25);
}
[data-ui-theme="light"] .sui-swatch.active,
[data-ui-theme="light"] .header-swatch.active {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--sui-accent);
}