/* ==========================================================================
   Onmaro Aura · Komponenten
   Präfix .o-  ·  Zustände über Klassen (.is-on, .is-active) oder ARIA
   Klar und ruhig: neutrale Flächen, die Farbe der App für Auswahl und Aktionen.
   Die Aurora-Farben gehören nur dem Onmaro-Logo.
   ========================================================================== */

/* ---- Basis --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font: var(--o-body); color: var(--o-text); background: var(--o-canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
body.o-aura::before { content: none; }
::selection { background: color-mix(in srgb, var(--o-accent) 32%, transparent); }
a { color: var(--o-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--o-focus); border-radius: var(--o-r-s); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--o-surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--o-text-4); }
::-webkit-scrollbar-track { background: transparent; }

/* Textrollen */
.o-display { font: var(--o-display); letter-spacing: var(--o-track-display); }
.o-title-1 { font: var(--o-title-1); letter-spacing: var(--o-track-title); }
.o-title-2 { font: var(--o-title-2); letter-spacing: var(--o-track-title); }
.o-title-3 { font: var(--o-title-3); letter-spacing: -.01em; }
.o-headline { font: var(--o-headline); }
.o-callout { font: var(--o-callout); }
.o-subhead { font: var(--o-subhead); }
.o-footnote { font: var(--o-footnote); color: var(--o-text-3); }
.o-caption { font: var(--o-caption); letter-spacing: var(--o-track-caption); color: var(--o-text-3); }
.o-num { font-variant-numeric: tabular-nums; }
.o-muted { color: var(--o-text-3); }
.o-grad-text, .o-accent-text { color: var(--o-accent); }
.o-aurora-text { background: var(--o-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.o-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Glyphen */
svg.o-g { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.o-g.s { width: 15px; height: 15px; } svg.o-g.l { width: 22px; height: 22px; }
svg.o-g .fill { fill: currentColor; stroke: none; }

/* ---- Knöpfe -------------------------------------------------------------- */
.o-btn {
  --h: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 13px;
  border-radius: var(--o-r-s); border: 0; background: var(--o-surface-2); color: var(--o-text);
  font: 550 13px/1 var(--o-font-text); cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none;
  transition: background var(--o-dur-2), color var(--o-dur-2), opacity var(--o-dur-2), transform var(--o-dur-1);
}
.o-btn:hover { background: var(--o-surface-3); text-decoration: none; }
.o-btn:active { transform: scale(.97); filter: brightness(.94); }
.o-btn:disabled, .o-btn[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.o-btn.primary { color: var(--o-on-accent); background: var(--o-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 4px 14px color-mix(in srgb, var(--o-accent) 28%, transparent); }
.o-btn.primary:hover { background: color-mix(in srgb, var(--o-accent) 88%, #fff); }
.o-btn.brand { color: var(--o-on-accent); background: var(--o-accent); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 4px 14px color-mix(in srgb, var(--o-accent) 28%, transparent); }
.o-btn.ghost { background: transparent; }
.o-btn.ghost:hover { background: var(--o-surface-2); }
.o-btn.danger { color: var(--o-critical); }
.o-btn.danger:hover { background: var(--o-critical-bg); }
.o-btn.icon { width: var(--h); padding: 0; }
.o-btn.s { --h: 26px; padding: 0 9px; font-size: 12.5px; border-radius: 6px; gap: 5px; }
.o-btn.s.icon { padding: 0; }
.o-btn.l { --h: 44px; padding: 0 22px; font-size: 15px; font-weight: 600; border-radius: var(--o-r-m); }
.o-btn .o-kbd { margin-left: 4px; }

/* ---- Felder -------------------------------------------------------------- */
.o-field, .o-select {
  height: 34px; padding: 0 11px; border-radius: var(--o-r-s); border: 1px solid var(--o-line-strong);
  background: var(--o-surface); color: var(--o-text); font: var(--o-callout); outline: none;
  transition: box-shadow var(--o-dur-2), background var(--o-dur-2);
}
.o-field::placeholder { color: var(--o-text-3); }
.o-field:focus, .o-select:focus { box-shadow: var(--o-focus); background: var(--o-raised); }
textarea.o-field { height: auto; padding: 8px 10px; resize: vertical; min-height: 90px; line-height: 1.5; }
.o-select { appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398989D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 14px; }
.o-select option { background: var(--o-raised); color: var(--o-text); }
/* Suchfeld wie in macOS: gefüllt, ohne Rahmen */
.o-search { position: relative; display: flex; align-items: center; }
.o-search svg.o-g { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--o-text-3); pointer-events: none; }
.o-search .o-field { padding-left: 30px; width: 100%; border: 0; background: var(--o-surface-2); }
.o-search .o-field:focus { background: var(--o-surface-2); }
.o-search .o-kbd { position: absolute; right: 7px; }

/* ---- Auswahl: Checkbox, Schalter, Segmente ------------------------------- */
.o-check { appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 4px; border: .5px solid var(--o-line-strong); background: var(--o-surface-2);
  box-shadow: 0 .5px 1px rgba(0, 0, 0, .12); cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0; transition: background var(--o-dur-2); }
.o-check:checked, .o-check:indeterminate { background: var(--o-accent); border-color: transparent; }
.o-check:checked::after { content: ""; width: 8px; height: 4.5px; border: 2px solid var(--o-on-accent); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.o-check:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--o-on-accent); border-radius: 2px; }

.o-switch { appearance: none; width: 38px; height: 22px; margin: 0; border-radius: 99px; background: var(--o-surface-3); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background var(--o-dur-3) var(--o-ease); }
.o-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: transform var(--o-dur-3) var(--o-ease-spring); }
.o-switch:checked { background: var(--o-accent); }
.o-switch:checked::after { transform: translateX(16px); }

.o-seg { display: inline-flex; padding: 2px; gap: 0; border-radius: 8px; background: var(--o-surface-2); }
.o-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
  color: var(--o-text-2); font: 500 12px var(--o-font-text); cursor: pointer; white-space: nowrap; transition: color var(--o-dur-2), background var(--o-dur-2); }
.o-seg button:hover { color: var(--o-text); }
.o-seg button.is-on { background: var(--o-raised); color: var(--o-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .o-seg button.is-on { background: #5A5A5F; }
.o-seg.full { display: flex; } .o-seg.full button { flex: 1; }

/* ---- Chips, Pillen, Badges, Kbd ------------------------------------------ */
.o-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px; border: 0;
  background: var(--o-surface-2); color: var(--o-text-2); font: 500 12.5px var(--o-font-text); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--o-dur-2), color var(--o-dur-2); }
.o-chip:hover { background: var(--o-surface-3); color: var(--o-text); text-decoration: none; }
.o-chip:active { filter: brightness(.94); }
.o-chip.is-on { background: var(--o-accent); color: var(--o-on-accent); }
.o-chip.is-on .o-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.o-chip .n { color: var(--o-text-3); font-size: 12px; font-variant-numeric: tabular-nums; } .o-chip.is-on .n { color: inherit; opacity: .75; }
.o-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--o-surface-2); color: var(--o-text-2);
  font: 500 11.5px var(--o-font-text); white-space: nowrap; }
.o-pill svg.o-g { width: 12px; height: 12px; }
.o-pill.positive { background: var(--o-positive-bg); color: var(--o-positive); } .o-pill.caution { background: var(--o-caution-bg); color: var(--o-caution); }
.o-pill.critical { background: var(--o-critical-bg); color: var(--o-critical); } .o-pill.accent { background: var(--o-accent-soft); color: var(--o-accent-ink); }
.o-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; font: 600 11px var(--o-font-text);
  font-variant-numeric: tabular-nums; background: var(--o-surface-3); color: var(--o-text-2); }
.o-badge.hot { background: var(--o-critical); color: #fff; }
.o-badge.accent { background: var(--o-accent); color: var(--o-on-accent); }
.o-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; border: 0;
  background: var(--o-surface-2); color: var(--o-text-3); font: 500 11px var(--o-font-text); }
.o-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---- Avatar (Monogramm wie in Kontakte) ---------------------------------- */
.o-avatar { --s: 36px; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font: 600 calc(var(--s) * .4)/1 var(--o-font-rounded); letter-spacing: 0; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #A9A9AE, #88888D); color: #fff; }
:root[data-theme="dark"] .o-avatar { background: linear-gradient(180deg, #8E8E93, #6E6E73); }
:root .o-avatar.me, :root[data-theme] .o-avatar.me { background: linear-gradient(180deg, color-mix(in srgb, var(--o-accent) 75%, #fff), var(--o-accent)); color: #fff; box-shadow: none; }

/* ---- Karten, Flächen ----------------------------------------------------- */
.o-card { background: var(--o-card); border-radius: var(--o-r-l); padding: var(--o-5); box-shadow: var(--o-shadow-1); }
:root[data-theme="light"] .o-card { box-shadow: 0 0 0 1px var(--o-line), 0 1px 2px rgba(20, 16, 60, .04); }
.o-card.hover { transition: background var(--o-dur-2), box-shadow var(--o-dur-3); cursor: pointer; }
.o-card.hover:hover { box-shadow: var(--o-shadow-2); }
.o-glass { background: var(--o-glass); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }
.o-divider { height: 1px; background: var(--o-line); border: 0; margin: var(--o-3) 0; }
.o-stat .o-caption { display: flex; align-items: center; gap: 6px; }
.o-stat .v { font: 700 28px/1.1 var(--o-font-display); letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.o-stat .f { font: var(--o-footnote); color: var(--o-text-3); margin-top: 4px; }
.o-empty { display: grid; place-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--o-text-3); font: var(--o-callout); }
.o-empty .art { width: 56px; height: 56px; display: grid; place-items: center; color: var(--o-text-4); }
.o-empty .art svg.o-g { width: 40px; height: 40px; stroke-width: 1.3; }
.o-empty b { font: var(--o-title-3); color: var(--o-text); }

/* ---- Navigation (Seitenleiste wie Musik/Notizen) ------------------------- */
.o-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 9px; border: 0; border-radius: var(--o-r-s); background: none;
  color: var(--o-text); font: 400 13.5px var(--o-font-text); cursor: pointer; text-align: left; text-decoration: none; position: relative;
  transition: background var(--o-dur-2); }
.o-nav-item:hover { background: var(--o-surface); color: var(--o-text); text-decoration: none; }
.o-nav-item svg.o-g { color: var(--o-accent); width: 17px; height: 17px; }
.o-nav-item.is-active { background: var(--o-surface-3); color: var(--o-text); font-weight: 500; }
.o-nav-item.is-active svg.o-g { color: var(--o-accent); }
.o-nav-item .end { margin-left: auto; font: 400 12.5px var(--o-font-text); color: var(--o-text-3); font-variant-numeric: tabular-nums; }
.o-nav-label { font: 600 11px var(--o-font-text); color: var(--o-text-3); padding: 14px 9px 4px; }

/* ---- Menü (Popover) ------------------------------------------------------ */
.o-menu { position: fixed; z-index: 300; min-width: 220px; max-width: 320px; padding: 6px; border-radius: var(--o-r-m); background: var(--o-overlay);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--o-shadow-3); animation: o-menu-in var(--o-dur-2) var(--o-ease); transform-origin: var(--origin, top left); }
.o-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
  color: var(--o-text); font: 400 13px var(--o-font-text); cursor: default; text-align: left; }
.o-menu button:hover, .o-menu button.is-focus { background: var(--o-accent); color: var(--o-on-accent); }
.o-menu button:hover svg.o-g, .o-menu button.is-focus svg.o-g { color: var(--o-on-accent); }
.o-menu button svg.o-g { color: var(--o-text-2); width: 15px; height: 15px; }
.o-menu button .hint { margin-left: auto; color: var(--o-text-3); font-size: 12px; }
.o-menu button:hover .hint, .o-menu button.is-focus .hint { color: inherit; opacity: .8; }
.o-menu button.danger { color: var(--o-critical); }
.o-menu button.danger:hover { background: var(--o-critical); color: #fff; }
.o-menu hr { border: 0; height: 1px; background: var(--o-line-strong); margin: 5px 9px; }
.o-menu .title { padding: 6px 10px 3px; font: 600 11px var(--o-font-text); color: var(--o-text-3); }

/* ---- Tooltip (CSS) ------------------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 200; pointer-events: none;
  padding: 3px 7px; border-radius: 5px; background: var(--o-raised); color: var(--o-text-2); box-shadow: var(--o-shadow-3); font: 400 11.5px/1.3 var(--o-font-text); white-space: nowrap;
  animation: o-tip-in var(--o-dur-2) var(--o-ease) .6s both; }
[data-tip-pos="bottom"]:hover::after { bottom: auto; top: calc(100% + 6px); }

/* ---- Dialog & Sheet ------------------------------------------------------ */
.o-dialog { border: 0; padding: 0; border-radius: var(--o-r-xl); background: var(--o-raised); color: var(--o-text); box-shadow: var(--o-shadow-4);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; }
.o-dialog::backdrop { background: var(--o-scrim); }
.o-dialog[open] { animation: o-dialog-in var(--o-dur-3) var(--o-ease); }
.o-dialog .body { padding: 22px 22px 6px; }
.o-dialog .body h3 { font: var(--o-title-2); letter-spacing: var(--o-track-title); margin: 0 0 6px; }
.o-dialog .actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; }
.o-note { padding: 10px 12px; border-radius: var(--o-r-m); font: var(--o-callout); margin: 10px 0; display: flex; gap: 10px; align-items: flex-start; }
.o-note.positive { background: var(--o-positive-bg); } .o-note.critical { background: var(--o-critical-bg); } .o-note.caution { background: var(--o-caution-bg); }
.o-note.info { background: var(--o-info-bg); } .o-note.accent { background: var(--o-accent-soft); }

/* ---- Toast (HUD) --------------------------------------------------------- */
.o-toasts { position: fixed; z-index: 400; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; pointer-events: none; }
.o-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 5px 5px 14px; border-radius: 12px;
  background: var(--o-overlay); color: var(--o-text); box-shadow: var(--o-shadow-3); font: 500 13px var(--o-font-text); max-width: calc(100vw - 32px);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  animation: o-toast-in var(--o-dur-4) var(--o-ease-spring); }
.o-toast svg.o-g { color: var(--o-accent); }
.o-toast.is-out { animation: o-toast-out var(--o-dur-3) var(--o-ease-exit) forwards; }
.o-toast .msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 440px; padding-right: 6px; }
.o-toast button { border: 0; height: 30px; padding: 0 11px; border-radius: 8px; background: var(--o-surface-2); color: var(--o-accent-ink);
  font: 600 13px var(--o-font-text); cursor: pointer; white-space: nowrap; transition: background var(--o-dur-2); }
.o-toast button:hover { background: var(--o-surface-3); }
.o-toast .ring { width: 20px; height: 20px; flex-shrink: 0; color: var(--o-accent); }
.o-toast .ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 50.3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

/* ---- Fortschritt --------------------------------------------------------- */
.o-progress { height: 5px; border-radius: 3px; background: var(--o-surface-3); overflow: hidden; }
.o-progress > i { display: block; height: 100%; border-radius: 3px; background: var(--o-accent); transition: width var(--o-dur-4) var(--o-ease); }
.o-progress.indeterminate > i { width: 35% !important; animation: o-indeterminate 1.1s var(--o-ease) infinite; }
.o-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--o-surface-3); border-top-color: var(--o-text-2); animation: o-spin .8s linear infinite; flex-shrink: 0; }
.o-skeleton { border-radius: 5px; background: linear-gradient(90deg, var(--o-surface-2), var(--o-surface), var(--o-surface-2)); background-size: 200% 100%; animation: o-shimmer 1.3s infinite; }

/* ---- Tabellen ------------------------------------------------------------ */
.o-table { width: 100%; border-collapse: collapse; }
.o-table th { text-align: left; font: 600 11.5px var(--o-font-text); color: var(--o-text-3); padding: 6px 10px; border-bottom: 1px solid var(--o-line); white-space: nowrap; }
.o-table td { padding: 9px 10px; border-bottom: 1px solid var(--o-line); vertical-align: middle; }
.o-table tbody tr { transition: background var(--o-dur-2); }
.o-table tbody tr:hover { background: var(--o-surface); }
.o-table tbody tr:last-child td { border-bottom: 0; }
.o-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Bewegung ------------------------------------------------------------ */
.o-enter { animation: o-enter var(--o-dur-3) var(--o-ease) both; }
.o-stagger > * { animation: o-fade var(--o-dur-3) var(--o-ease) both; animation-delay: calc(var(--i, 0) * 12ms); }
.o-stagger.is-settled > * { animation: none; }
@keyframes o-enter { from { opacity: 0; transform: translateY(4px); } }
@keyframes o-fade { from { opacity: 0; } }
@keyframes o-pop { 0% { transform: scale(.8); } 100% { transform: scale(1); } }
@keyframes o-menu-in { from { opacity: 0; transform: scale(.98); } }
@keyframes o-tip-in { from { opacity: 0; } }
@keyframes o-dialog-in { from { opacity: 0; transform: scale(.97); } }
@keyframes o-toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes o-toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes o-spin { to { transform: rotate(360deg); } }
@keyframes o-shimmer { to { background-position: -200% 0; } }
@keyframes o-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes o-pulse { 50% { opacity: .45; } }
@keyframes o-bounce { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } 70% { transform: scale(.95); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }