/* ================================================================
   AURUM UI · Components
   Buttons, Cards, Forms, Table, Progress, List, Accordion,
   Tabs, Pagination, Alerts, Badges, Chips, Utilities.
   Benötigt: aurum-variables.css + aurum-base.css
================================================================ */

/* ═══════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.55rem 1.2rem;
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 0.82rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all 0.18s cubic-bezier(.16,1,.3,1);
      text-decoration: none;
      white-space: nowrap;
      letter-spacing: 0.02em;
    }
    .btn-sm { padding: 0.32rem 0.85rem; font-size: 0.74rem; }
    .btn-lg { padding: 0.75rem 1.8rem; font-size: 0.92rem; }

    /* Solid weiß */
    .btn-solid {
      background: var(--w);
      color: var(--pdd);
      box-shadow: var(--shadow-sm);
    }
    .btn-solid:hover {
      background: var(--pl);
      color: var(--pdd);
      box-shadow: var(--shadow), 0 0 24px var(--p);
      transform: translateY(-2px);
    }
    .btn-solid:active { transform: translateY(0); }

    /* Glas */
    .btn-glass {
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      color: var(--w);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow-sm);
    }
    .btn-glass:hover {
      background: var(--glass-hover);
      border-color: var(--w50);
      transform: translateY(-1px);
    }

    /* Ghost */
    .btn-ghost {
      background: transparent;
      color: var(--w70);
      border: 1px solid var(--w30);
    }
    .btn-ghost:hover { background: var(--w10); color: var(--w); border-color: var(--w50); }

    /* ═══════════════════════════════════════
       CHIPS & BADGES
    ═══════════════════════════════════════ */
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.2rem 0.7rem;
      border-radius: 999px;
      font-size: 0.71rem;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .chip-solid  { background: var(--w); color: var(--pdd); }
    .chip-glass  {
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      color: var(--w);
      border: 1px solid var(--glass-border);
    }
    .chip-ghost  { background: var(--w10); color: var(--w70); border: 1px solid var(--w30); }

    .badge {
      display: inline-block;
      padding: 0.1rem 0.45rem;
      border-radius: 5px;
      font-size: 0.63rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .badge-solid { background: var(--w); color: var(--pdd); }
    .badge-glass {
      background: var(--w18);
      color: var(--w);
      border: 1px solid var(--w30);
    }

    /* ═══════════════════════════════════════
       CARDS
    ═══════════════════════════════════════ */
    .card {
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: transform 0.2s cubic-bezier(.16,1,.3,1), box-shadow 0.2s;
    }
    .card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg), var(--glow);
    }
    .card-head {
      padding: 0.75rem 1.1rem;
      border-bottom: 1px solid var(--w18);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-head-title {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--w70);
    }
    .card-body { padding: 1.1rem; }
    .card-foot {
      padding: 0.65rem 1.1rem;
      border-top: 1px solid var(--w10);
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      background: var(--w06);
    }

    /* Stat-Karte */
    .stat-card {
      padding: 1.2rem;
      border-radius: var(--r-lg);
      position: relative;
      overflow: hidden;
    }
    .stat-card::after {
      content: '';
      position: absolute;
      top: -30%;
      right: -20%;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, var(--w18) 0%, transparent 70%);
      pointer-events: none;
    }
    .stat-value {
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 300;
      color: var(--w);
      line-height: 1;
    }
    .stat-label {
      font-size: 0.72rem;
      color: var(--w60);
      margin-top: 0.3rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .stat-delta {
      font-size: 0.72rem;
      margin-top: 0.5rem;
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
    }
    .delta-up { color: rgba(180,255,180,0.9); }
    .delta-dn { color: rgba(255,180,180,0.9); }

    /* Infokarte mit weißem Balken */
    .info-card {
      border-left: 2px solid var(--w70);
      border-radius: 0 var(--r-md) var(--r-md) 0;
      padding: 0.85rem 1rem;
    }

    /* ═══════════════════════════════════════
       FORMS
    ═══════════════════════════════════════ */
    .form-grp { margin-bottom: 1rem; }
    .form-lbl {
      display: block;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--w60);
      margin-bottom: 0.4rem;
    }
    .form-ctrl,
    .form-sel {
      width: 100%;
      padding: 0.55rem 0.9rem;
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      border: 1px solid var(--glass-border);
      border-radius: var(--r-md);
      color: var(--w);
      font-family: var(--font-body);
      font-size: 0.84rem;
      outline: none;
      transition: all 0.18s;
      box-shadow: var(--shadow-sm);
      appearance: none;
    }
    .form-ctrl::placeholder { color: var(--w50); }
    .form-ctrl:focus, .form-sel:focus {
      border-color: var(--w70);
      background: var(--glass-hover);
      box-shadow: var(--shadow-sm), 0 0 0 3px var(--w18);
    }
    .form-sel option { background: hsl(var(--h),55%,32%); color: #fff; }

    /* Floating Label */
    .form-float {
      position: relative;
      margin-bottom: 1rem;
    }
    .form-float input {
      width: 100%;
      padding: 1.1rem 0.9rem 0.35rem;
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      border: 1px solid var(--glass-border);
      border-radius: var(--r-md);
      color: var(--w);
      font-family: var(--font-body);
      font-size: 0.88rem;
      outline: none;
      transition: all 0.18s;
    }
    .form-float label {
      position: absolute;
      top: 0.65rem;
      left: 0.9rem;
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--w50);
      transition: all 0.18s;
      pointer-events: none;
    }
    .form-float input:focus { border-color: var(--w70); background: var(--glass-hover); }
    .form-float input:focus + label,
    .form-float input:not(:placeholder-shown) + label {
      top: 0.28rem;
      font-size: 0.6rem;
      color: var(--w70);
    }

    /* Toggle */
    .toggle-wrap { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; margin-bottom: 0.5rem; }
    .toggle {
      width: 38px; height: 22px;
      background: var(--w30);
      border-radius: 999px;
      position: relative;
      transition: background 0.18s;
      border: 1px solid var(--w18);
      cursor: pointer;
    }
    .toggle::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 16px; height: 16px;
      background: var(--w);
      border-radius: 50%;
      transition: transform 0.18s cubic-bezier(.16,1,.3,1);
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .toggle.on { background: var(--w70); }
    .toggle.on::after { transform: translateX(16px); }
    .toggle-lbl { font-size: 0.82rem; color: var(--w70); }

    /* Checkbox */
    .chk { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; margin-bottom: 0.45rem; }
    .chk input[type="checkbox"] {
      appearance: none;
      width: 18px; height: 18px;
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      border: 1.5px solid var(--glass-border);
      border-radius: 5px;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s;
    }
    .chk input:checked {
      background: var(--w);
      border-color: var(--w);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23c47a1e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 65%;
      background-repeat: no-repeat;
      background-position: center;
    }
    .chk span { font-size: 0.83rem; color: var(--w70); }

    /* Range */
    input[type="range"] {
      width: 100%; appearance: none;
      height: 3px;
      background: linear-gradient(to right, var(--w70) 0%, var(--w70) var(--val, 65%), var(--w30) var(--val, 65%));
      border-radius: 2px; outline: none; cursor: pointer;
    }
    input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 16px; height: 16px;
      background: var(--w);
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 3px var(--w30);
      transition: box-shadow 0.15s;
    }
    input[type="range"]::-webkit-slider-thumb:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 5px var(--w30);
    }

    /* ═══════════════════════════════════════
       TABLE
    ═══════════════════════════════════════ */
    .table-wrap {
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: var(--glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
    }
    table { width: 100%; border-collapse: collapse; }
    th {
      padding: 0.65rem 1rem;
      background: var(--w10);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--w60);
      border-bottom: 1px solid var(--w18);
      text-align: left;
    }
    td {
      padding: 0.65rem 1rem;
      font-size: 0.84rem;
      color: var(--w80);
      border-bottom: 1px solid var(--w10);
    }
    tr:last-child td { border-bottom: none; }
    tbody tr { transition: background 0.12s; }
    tbody tr:hover td { background: var(--w06); color: var(--w); }

    /* ═══════════════════════════════════════
       PROGRESS
    ═══════════════════════════════════════ */
    .prog-wrap { margin-bottom: 1rem; }
    .prog-top { display: flex; justify-content: space-between; margin-bottom: 0.3rem; }
    .prog-name { font-size: 0.76rem; color: var(--w70); }
    .prog-val  { font-size: 0.76rem; color: var(--w50); font-feature-settings: 'tnum'; }
    .prog {
      height: 5px;
      background: var(--w18);
      border-radius: 999px;
      overflow: hidden;
    }
    .prog-bar {
      height: 100%;
      background: linear-gradient(to right, var(--w70), var(--w));
      border-radius: 999px;
      transition: width 0.6s cubic-bezier(.16,1,.3,1);
      box-shadow: 0 0 8px var(--w30);
    }

    /* ═══════════════════════════════════════
       LIST GROUP
    ═══════════════════════════════════════ */
    .list {
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: var(--glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
    }
    .list-item {
      padding: 0.7rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--w10);
      font-size: 0.84rem;
      color: var(--w70);
      cursor: pointer;
      transition: all 0.12s;
    }
    .list-item:last-child { border-bottom: none; }
    .list-item:hover { background: var(--w06); color: var(--w); padding-left: 1.3rem; }
    .list-item.active {
      background: var(--w);
      color: var(--pdd);
      font-weight: 600;
    }
    .list-item.active:hover { padding-left: 1rem; }

    /* ═══════════════════════════════════════
       ACCORDION
    ═══════════════════════════════════════ */
    .acc {
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: var(--glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
    }
    .acc-item + .acc-item { border-top: 1px solid var(--w10); }
    .acc-btn {
      width: 100%;
      background: none;
      border: none;
      padding: 0.8rem 1rem;
      text-align: left;
      color: var(--w80);
      font-family: var(--font-body);
      font-size: 0.84rem;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.15s;
      letter-spacing: 0.01em;
    }
    .acc-btn:hover { background: var(--w06); color: var(--w); }
    .acc-btn.on { background: var(--w10); color: var(--w); }
    .acc-icon {
      font-style: normal;
      font-size: 0.65rem;
      opacity: 0.6;
      transition: transform 0.2s cubic-bezier(.16,1,.3,1);
    }
    .acc-btn.on .acc-icon { transform: rotate(180deg); }
    .acc-body {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.28s cubic-bezier(.16,1,.3,1), padding 0.28s;
      padding: 0 1rem;
      background: var(--w06);
    }
    .acc-body.on { max-height: 160px; padding: 0.75rem 1rem; }
    .acc-body p { font-size: 0.83rem; color: var(--w60); line-height: 1.6; }

    /* ═══════════════════════════════════════
       TABS
    ═══════════════════════════════════════ */
    .tabs-wrap { }
    .tab-bar {
      display: flex;
      gap: 0.15rem;
      padding: 0.3rem;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      border: 1px solid var(--glass-border);
      border-bottom: none;
    }
    .tab-btn {
      padding: 0.38rem 1rem;
      border-radius: var(--r-md);
      background: none;
      border: none;
      color: var(--w50);
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.18s cubic-bezier(.16,1,.3,1);
      letter-spacing: 0.02em;
    }
    .tab-btn:hover { color: var(--w); background: var(--w10); }
    .tab-btn.on {
      background: var(--w);
      color: var(--pdd);
      font-weight: 600;
      box-shadow: var(--shadow-sm);
    }
    .tab-pane-wrap {
      padding: 1rem;
      border-radius: 0 0 var(--r-lg) var(--r-lg);
      background: var(--glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      font-size: 0.84rem;
      color: var(--w70);
    }
    .tab-pane { display: none; }
    .tab-pane.on { display: block; animation: fadeIn 0.2s ease; }

    /* ═══════════════════════════════════════
       PAGINATION
    ═══════════════════════════════════════ */
    .pages { display: flex; gap: 0.3rem; }
    .page-btn {
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--r-sm);
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      border: 1px solid var(--glass-border);
      color: var(--w70);
      font-size: 0.8rem;
      font-family: var(--font-body);
      cursor: pointer;
      transition: all 0.15s;
    }
    .page-btn:hover { background: var(--glass-hover); color: var(--w); border-color: var(--w50); }
    .page-btn.on { background: var(--w); color: var(--pdd); font-weight: 700; border-color: var(--w); box-shadow: var(--shadow-sm); }
    .page-btn:disabled { opacity: 0.3; cursor: default; }

    /* ═══════════════════════════════════════
       ALERT / TOAST
    ═══════════════════════════════════════ */
    .alert {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      padding: 0.85rem 1rem;
      border-radius: var(--r-md);
      font-size: 0.83rem;
      color: var(--w80);
      background: var(--glass);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
      border: 1px solid var(--glass-border);
      border-left: 3px solid var(--w70);
      box-shadow: var(--shadow-sm);
    }
    .alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
    .alert strong { color: var(--w); display: block; margin-bottom: 0.15rem; font-size: 0.84rem; }

    /* ═══════════════════════════════════════
       GRID HELPER
    ═══════════════════════════════════════ */
    .grid { display: grid; gap: 1rem; }
    .g2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .g3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .g4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .g-2-1 { grid-template-columns: 2fr 1fr; }
    @media (max-width: 600px) {
      .g-2-1 { grid-template-columns: 1fr; }
      .g2, .g3 { grid-template-columns: 1fr; }
    }
    .flex { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
    .mb { margin-bottom: 2rem; }
    .mb-sm { margin-bottom: 1.2rem; }

    /* ═══════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════ */
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 var(--w50); }
      50%       { box-shadow: 0 0 0 5px transparent; }
    }

    .anim { animation: fadeUp 0.5s cubic-bezier(.16,1,.3,1) both; }
    .d1  { animation-delay: 0.05s; }
    .d2  { animation-delay: 0.10s; }
    .d3  { animation-delay: 0.15s; }
    .d4  { animation-delay: 0.20s; }
    .d5  { animation-delay: 0.25s; }
    .d6  { animation-delay: 0.30s; }
    .d7  { animation-delay: 0.35s; }
    .d8  { animation-delay: 0.40s; }

    ::selection { background: var(--w30); color: var(--w); }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--w30); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--w50); }
  
    /* ── Theme Dot Colors ────────────────────────────────────── */
    .td-amber  { background: hsl(38,  58%, 52%); }
    .td-copper { background: hsl(20,  60%, 48%); }
    .td-forest { background: hsl(148, 42%, 36%); }
    .td-slate  { background: hsl(215, 40%, 44%); }
    .td-rose   { background: hsl(345, 48%, 48%); }
    .td-choco  { background: hsl(24,  41%, 36%); }
    .td-night  { background: hsl(225, 37%, 35%); }

    /* ── Utility Classes ─────────────────────────────────────── */
    .card-text    { font-size: 0.83rem; color: var(--w70); line-height: 1.6; }
    .card-text-sm { font-size: 0.80rem; color: var(--w60); line-height: 1.6; }
    .card-title   { font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; color: var(--w); margin-bottom: 0.4rem; }
    .card-strong  { font-size: 0.84rem; display: block; margin-bottom: 0.4rem; color: var(--w); }
    .card-actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .flex-sm      { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
    .row-between  { display: flex; justify-content: space-between; align-items: center; }
    .text-muted   { color: var(--w50); }
    .text-white   { color: var(--w); }
    .mt-sm        { margin-top: 0.5rem; }
    .mt-md        { margin-top: 0.75rem; }
    .overflow-auto{ overflow: auto; }
    .resize-v     { resize: vertical; }
    .chip-xs      { font-size: 0.65rem; }
    .page-ellipsis{ width: auto; padding: 0 0.75rem; }
    .alert-title  { color: var(--w); display: block; margin-bottom: 0.15rem; font-size: 0.84rem; font-weight: 600; }
    .code-inline { background: var(--w10); padding: 0 4px; border-radius: 3px; font-family: monospace; font-size: 0.85em; }