/* ═══════════════════════════════════════════════════════════
   LS Widerrufsbutton – Design System
   Dark-Neumorphism + Bootstrap 5.3 Override
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens: Dark (Standard) ──────────────────── */
:root {
  --nm-bg:           #0b0f16;
  --nm-surface:      #0f1622;
  --nm-surface-2:    #0c131f;
  --nm-text:         #e9eef7;
  --nm-muted:        #9aa6bb;
  --nm-accent:       #6aa9ff;

  --nm-shadow-dark:  rgba(0,0,0,.65);
  --nm-shadow-light: rgba(255,255,255,.06);
  --nm-border:       rgba(255,255,255,.08);

  --nm-danger:       #ef4444;
  --nm-success:      #22c55e;
}

/* ── 2. Design Tokens: Light ─────────────────────────────── */
[data-theme="light"] {
  --nm-bg:           #e0e5ec;
  --nm-surface:      #e0e5ec;
  --nm-surface-2:    #d3d8e2;
  --nm-text:         #2d3a4a;
  --nm-muted:        #718096;
  --nm-accent:       #4d9de0;

  --nm-shadow-dark:  rgba(163,177,198,.60);
  --nm-shadow-light: rgba(255,255,255,.92);
  --nm-border:       rgba(163,177,198,.20);
}

/* ── 3. Base ─────────────────────────────────────────────── */
html {
  transition: background-color .25s ease, color .25s ease;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--nm-bg);
  color: var(--nm-text);
  min-height: 100vh;
}

a { color: var(--nm-accent); }
a:hover { opacity: .85; text-decoration: none; }

/* ── 4. Theme-Switch Transitions ─────────────────────────── */
body,
.nm-card,
.nm-inset,
.nm-btn,
.form-control,
.form-select,
.nm-sidebar,
.nm-topbar {
  transition: background .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}

/* ═══════════════════════════════════════════════════════════
   KOMPONENTEN
   ═══════════════════════════════════════════════════════════ */

/* ── nm-card: Raised Card ────────────────────────────────── */
.nm-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--nm-border);
  border-radius: 18px;
  box-shadow:
     10px  10px 24px var(--nm-shadow-dark),
    -8px  -8px  18px var(--nm-shadow-light);
}

[data-theme="light"] .nm-card {
  background: var(--nm-bg);
}

/* ── nm-inset: Eingedrückte Fläche ───────────────────────── */
.nm-inset {
  background: var(--nm-surface-2);
  border: 1px solid var(--nm-border);
  border-radius: 16px;
  box-shadow:
    inset  10px  10px 18px var(--nm-shadow-dark),
    inset  -8px  -8px 14px var(--nm-shadow-light);
}

/* ── nm-btn: Basis-Button ────────────────────────────────── */
.nm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--nm-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow:
     10px  10px 24px var(--nm-shadow-dark),
    -8px  -8px  18px var(--nm-shadow-light);
  color: var(--nm-text) !important;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.5;
}

.nm-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  color: var(--nm-text) !important;
}

.nm-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 4px  4px 10px var(--nm-shadow-dark),
    inset -3px -3px 8px var(--nm-shadow-light) !important;
}

.nm-btn:disabled { opacity: .45; cursor: not-allowed; }

[data-theme="light"] .nm-btn {
  background: var(--nm-bg) !important;
}

/* Primary */
.nm-btn-primary {
  background: linear-gradient(160deg, #1d4ed8, #1e40af) !important;
  border-color: rgba(106,169,255,.35) !important;
  color: #e9eef7 !important;
}

.nm-btn-primary:hover:not(:disabled) { color: #fff !important; }

[data-theme="light"] .nm-btn-primary {
  background: linear-gradient(160deg, #4d9de0, #3a8fd4) !important;
}

/* Danger */
.nm-btn-danger {
  background: linear-gradient(160deg, #991b1b, #7f1d1d) !important;
  border-color: rgba(220,38,38,.35) !important;
  color: #fca5a5 !important;
}

.nm-btn-danger:hover:not(:disabled) { color: #fecaca !important; }

[data-theme="light"] .nm-btn-danger {
  background: linear-gradient(160deg, #9e5252, #8a3e3e) !important;
}

/* Full-width variant */
.nm-btn-block { width: 100%; }

/* ── Inputs: Bootstrap form-control / form-select ────────── */
.form-control,
.form-select {
  background: var(--nm-surface-2) !important;
  color: var(--nm-text) !important;
  border: 1px solid var(--nm-border) !important;
  border-radius: 14px !important;
  box-shadow:
    inset  10px  10px 18px var(--nm-shadow-dark),
    inset  -8px  -8px 14px var(--nm-shadow-light) !important;
}

.form-control::placeholder { color: var(--nm-muted) !important; opacity: .7; }
.form-select option         { background: var(--nm-surface); color: var(--nm-text); }

.form-control:focus,
.form-select:focus {
  color: var(--nm-text) !important;
  background: var(--nm-surface-2) !important;
  border-color: rgba(106,169,255,.45) !important;
  box-shadow:
    inset  10px  10px 18px var(--nm-shadow-dark),
    inset  -8px  -8px 14px var(--nm-shadow-light),
    0 0 0 3px rgba(106,169,255,.18) !important;
  outline: none;
}

/* ── nm-label ─────────────────────────────────────────────── */
.nm-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-muted);
  margin-bottom: .5rem;
}

/* ── nm-pill ──────────────────────────────────────────────── */
.nm-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nm-border);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nm-muted);
}

.nm-pill-accent  { color: var(--nm-accent); border-color: rgba(106,169,255,.35); background: rgba(106,169,255,.08); }
.nm-pill-success { color: #86efac;          border-color: rgba(34,197,94,.35);   background: rgba(34,197,94,.08);  }
.nm-pill-danger  { color: #fca5a5;          border-color: rgba(239,68,68,.35);   background: rgba(239,68,68,.08);  }
.nm-pill-muted   { color: var(--nm-muted);  border-color: var(--nm-border);      background: rgba(255,255,255,.03);}
.nm-pill-warning { color: #fcd34d;          border-color: rgba(245,158,11,.35);  background: rgba(245,158,11,.08); }

/* ── nm-alert ─────────────────────────────────────────────── */
.nm-alert {
  border-radius: 14px;
  border: 1px solid;
  padding: .9rem 1.1rem;
  font-size: .875rem;
}

.nm-alert-success { background: rgba(34,197,94,.09);   border-color: rgba(34,197,94,.30);   color: #86efac; }
.nm-alert-danger  { background: rgba(239,68,68,.09);   border-color: rgba(239,68,68,.30);   color: #fca5a5; }
.nm-alert-warning { background: rgba(245,158,11,.09);  border-color: rgba(245,158,11,.30);  color: #fcd34d; }
.nm-alert-info    { background: rgba(106,169,255,.09); border-color: rgba(106,169,255,.30); color: #93c5fd; }

/* ── nm-hr ────────────────────────────────────────────────── */
.nm-hr { border: none; border-top: 1px solid var(--nm-border); margin: 1.25rem 0; }

/* ── Tabellen ─────────────────────────────────────────────── */
.table {
  --bs-table-bg:           var(--nm-surface-2);
  --bs-table-color:        var(--nm-text);
  --bs-table-border-color: var(--nm-border);
  --bs-table-hover-bg:     rgba(106,169,255,.06);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0;
}

.table thead > tr > th {
  color: var(--nm-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,255,255,.03);
  padding: .65rem 1rem;
  border-bottom-color: var(--nm-border) !important;
}

.table > :not(caption) > * > * {
  padding: .75rem 1rem;
  border-bottom-color: var(--nm-border) !important;
}

/* ── nm-fab: Floating Action Button ──────────────────────── */
.nm-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nm-accent);
  color: #fff;
  font-size: 1.6rem;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(106,169,255,.45), 0 2px 8px rgba(0,0,0,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}

.nm-fab:hover  { transform: scale(1.1); background: #89bcff; color: #fff; }
.nm-fab:active { transform: scale(.96); }

/* ── st-orb: Leuchtender Branding-Kreis ──────────────────── */
.st-orb {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, #93c5fd 25%, #6aa9ff 60%, #1e3a6e 100%);
  box-shadow: 0 0 18px rgba(106,169,255,.45);
}

/* ── st-dropzone ──────────────────────────────────────────── */
.st-dropzone {
  background: var(--nm-surface-2);
  border-radius: 18px;
  border: 1px solid var(--nm-border);
  box-shadow:
    inset 10px 10px 18px var(--nm-shadow-dark),
    inset -8px -8px 14px var(--nm-shadow-light);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.st-dropzone.st-hover {
  border-color: rgba(106,169,255,.45);
  box-shadow:
    inset 10px 10px 18px var(--nm-shadow-dark),
    inset -8px -8px 14px var(--nm-shadow-light),
    0 0 24px rgba(106,169,255,.20);
}

/* ── st-progress ──────────────────────────────────────────── */
.st-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--nm-surface-2);
  box-shadow:
    inset 4px 4px 8px var(--nm-shadow-dark),
    inset -3px -3px 6px var(--nm-shadow-light);
  overflow: hidden;
}

.st-progress .progress-bar {
  background: linear-gradient(90deg, #4a87e8, #6aa9ff);
  border-radius: 999px;
  background-image: linear-gradient(
    45deg, rgba(255,255,255,.10) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.10) 75%, transparent 75%, transparent
  );
  background-size: 1rem 1rem;
  animation: st-stripe 1s linear infinite;
}

@keyframes st-stripe {
  from { background-position: 1rem 0; }
  to   { background-position: 0 0; }
}

/* ── Theme-Toggle Icons ───────────────────────────────────── */
.nm-theme-icon-sun  { display: block; }
.nm-theme-icon-moon { display: none; }

[data-theme="light"] .nm-theme-icon-sun  { display: none; }
[data-theme="light"] .nm-theme-icon-moon { display: block; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* ── App Shell ────────────────────────────────────────────── */
.nm-app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--nm-bg);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.nm-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--nm-surface);
  border-right: 1px solid var(--nm-border);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px var(--nm-shadow-dark);
}

.nm-sidebar-logo {
  padding: 1.4rem 1.25rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid var(--nm-border);
}

.nm-sidebar-logo-text {
  font-weight: 700;
  font-size: .9rem;
  color: var(--nm-text);
  line-height: 1.3;
}

.nm-sidebar-logo-text span { color: var(--nm-accent); }

.nm-sidebar-workspace {
  padding: .65rem 1.25rem;
  font-size: .7rem;
  color: var(--nm-muted);
  border-bottom: 1px solid var(--nm-border);
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-sidebar-nav {
  padding: .75rem 0;
  flex: 1;
}

.nm-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.25rem;
  font-size: .875rem;
  color: var(--nm-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 12px 12px 0;
  margin-right: .75rem;
  transition: all .15s ease;
}

.nm-sidebar-nav a:hover {
  color: var(--nm-text);
  background: rgba(106,169,255,.06);
  text-decoration: none;
}

.nm-sidebar-nav a.active {
  color: var(--nm-accent);
  background: rgba(106,169,255,.10);
  border-left-color: var(--nm-accent);
}

.nm-sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--nm-border);
}

.nm-sidebar-footer .nm-user-email {
  font-size: .76rem;
  color: var(--nm-muted);
  margin-bottom: .65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Main Content ─────────────────────────────────────────── */
.nm-main {
  flex: 1;
  padding: 2rem;
  overflow-x: hidden;
  min-width: 0;
}

/* ── Page Header ──────────────────────────────────────────── */
.nm-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nm-text);
  margin-bottom: .2rem;
}

.nm-page-subtitle {
  font-size: .82rem;
  color: var(--nm-muted);
}

/* ── Auth Page ────────────────────────────────────────────── */
.nm-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nm-bg);
  padding: 1.5rem;
}

.nm-auth-card {
  width: 100%;
  max-width: 420px;
}

.nm-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin-bottom: 1.75rem;
}

.nm-auth-logo-text {
  font-weight: 700;
  font-size: 1rem;
  color: var(--nm-text);
}

.nm-auth-logo-text span { color: var(--nm-accent); }

.nm-auth-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nm-text);
  margin-bottom: .2rem;
}

.nm-auth-subtitle {
  font-size: .8rem;
  color: var(--nm-muted);
  margin-bottom: 1.5rem;
}

.nm-auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: .82rem;
  color: var(--nm-muted);
}

/* ── Utilities ────────────────────────────────────────────── */
.nm-text-muted   { color: var(--nm-muted)  !important; }
.nm-text-accent  { color: var(--nm-accent) !important; }
.nm-text-danger  { color: #fca5a5          !important; }
.nm-text-success { color: #86efac          !important; }