:root{
  --cp-accent:#167500;
  --cp-accent2:#33a02c;

  --cp-bg:#f7f7fb;
  --cp-bg2:#eef3f0;
  --cp-card:#ffffff;
  --cp-card-soft:#f8fafc;
  --cp-border: rgba(17,24,39,.08);

  --cp-text:#111827;
  --cp-text-soft:#5b6472;
  --cp-shadow:
    0 10px 24px rgba(17,24,39,.06),
    0 2px 6px rgba(17,24,39,.04);
}

:root[data-theme="dark"]{
  --cp-bg:#0f1720;
  --cp-bg2:#16212b;
  --cp-card:#18232d;
  --cp-card-soft:#1d2a35;
  --cp-border: rgba(255,255,255,.09);

  --cp-text:#edf2f7;
  --cp-text-soft:#a8b3bf;
  --cp-shadow:
    0 12px 28px rgba(0,0,0,.28),
    0 2px 8px rgba(0,0,0,.22);
}

/* ========= GLOBAL ========= */

body{
  color: var(--cp-text);
  background:
    radial-gradient(1200px 520px at 50% -120px,
      rgba(22,117,0,.14) 0%,
      rgba(22,117,0,.07) 35%,
      rgba(22,117,0,0) 70%),
    linear-gradient(180deg, var(--cp-bg2) 0%, var(--cp-bg) 420px);
  background-attachment: fixed;
  min-height: 100vh;
}

.container,
.row,
.card,
.table,
.form-control,
.form-select,
.btn,
.navbar,
.dropdown-menu,
.modal-content {
  transition:
    background-color .20s ease,
    color .20s ease,
    border-color .20s ease,
    box-shadow .20s ease,
    opacity .20s ease;
}

/* KEIN HOVER-GEHÜPFE */
.cp-card,
.btn,
.cp-theme-toggle,
.card,
button,
a.btn {
  transform: none !important;
}

/* ========= NAVBAR ========= */

.cp-nav{
  background:
    linear-gradient(90deg, #125f00 0%, var(--cp-accent) 45%, #0b3d0b 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.cp-brand{
  letter-spacing: .01em;
}

.cp-logo-wrap{
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.cp-logo{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  font-size: 1.1rem;
}

.cp-brand-title{
  color:#fff;
  font-weight:800;
}

.cp-brand-subtitle{
  font-size:.7rem;
  color:rgba(255,255,255,.8);
}

.cp-theme-toggle{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: .35rem .65rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cp-theme-toggle:hover{
  background: rgba(255,255,255,.20);
  color: #fff;
  border-color: rgba(255,255,255,.24);
}

.theme-icon-dark{
  display: none;
}

:root[data-theme="dark"] .theme-icon-light{
  display: none;
}
:root[data-theme="dark"] .theme-icon-dark{
  display: inline;
}

/* ========= CARDS ========= */

.cp-card{
  border-radius: 1.1rem;
  border: 1px solid var(--cp-border);
  background: var(--cp-card);
  box-shadow: var(--cp-shadow);
  color: var(--cp-text);
}

.cp-muted{
  color: var(--cp-text-soft);
}

.cp-userpill{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}

/* ========= BUTTONS ========= */

.btn{
  box-shadow: none;
}

/* Schwarze Buttons */
.btn-dark{
  background:#111827;
  border-color:#111827;
  color:#fff;
  box-shadow: 0 6px 16px rgba(17,24,39,.16);
}

.btn-dark:hover,
.btn-dark:focus{
  background:#1f2937;
  border-color:#1f2937;
  color:#fff;
  box-shadow: 0 8px 18px rgba(17,24,39,.20);
}

.btn-dark:active{
  background:#0f172a !important;
  border-color:#0f172a !important;
  color:#fff !important;
}

:root[data-theme="dark"] .btn-dark{
  background:#0f141b;
  border-color:#0f141b;
  color:#f8fafc;
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

:root[data-theme="dark"] .btn-dark:hover,
:root[data-theme="dark"] .btn-dark:focus{
  background:#25303b;
  border-color:#25303b;
  color:#fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.32);
}

:root[data-theme="dark"] .btn-dark:active{
  background:#10161d !important;
  border-color:#10161d !important;
  color:#fff !important;
}

/* Outline Buttons allgemein */
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-primary{
  background: transparent;
}

/* Light mode */
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  background:#6b7280;
  border-color:#6b7280;
  color:#fff;
}

.btn-outline-success:hover,
.btn-outline-success:focus{
  background:#198754;
  border-color:#198754;
  color:#fff;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus{
  background:#dc3545;
  border-color:#dc3545;
  color:#fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}

/* Dark mode: Outline Buttons endlich sichtbar */
:root[data-theme="dark"] .btn-outline-dark{
  color:#eef4fb;
  border-color:rgba(255,255,255,.24);
  background: rgba(255,255,255,.02);
}

:root[data-theme="dark"] .btn-outline-dark:hover,
:root[data-theme="dark"] .btn-outline-dark:focus{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.34);
  color:#ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-secondary{
  color:#dbe4ee;
  border-color:rgba(255,255,255,.20);
  background: rgba(255,255,255,.02);
}

:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-secondary:focus{
  background: rgba(148,163,184,.16);
  border-color: rgba(148,163,184,.34);
  color:#ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-success{
  color:#c9f7cf;
  border-color:rgba(51,160,44,.55);
  background: rgba(51,160,44,.05);
}

:root[data-theme="dark"] .btn-outline-success:hover,
:root[data-theme="dark"] .btn-outline-success:focus{
  background: rgba(51,160,44,.20);
  border-color: rgba(51,160,44,.72);
  color:#effff1;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-danger{
  color:#ffd2d2;
  border-color:rgba(239,68,68,.55);
  background: rgba(239,68,68,.05);
}

:root[data-theme="dark"] .btn-outline-danger:hover,
:root[data-theme="dark"] .btn-outline-danger:focus{
  background: rgba(239,68,68,.20);
  border-color: rgba(239,68,68,.72);
  color:#fff0f0;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-primary{
  color:#cfe2ff;
  border-color:rgba(13,110,253,.58);
  background: rgba(13,110,253,.06);
}

:root[data-theme="dark"] .btn-outline-primary:hover,
:root[data-theme="dark"] .btn-outline-primary:focus{
  background: rgba(13,110,253,.20);
  border-color: rgba(13,110,253,.78);
  color:#f4f8ff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* Kleine Buttons in Tabellen besser lesbar */
:root[data-theme="dark"] .btn-sm{
  font-weight: 500;
}

/* ========= FORM ========= */

.form-control,
.form-select{
  background: var(--cp-card);
  color: var(--cp-text);
  border-color: var(--cp-border);
}

.form-control::placeholder{
  color: var(--cp-text-soft);
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(22,117,0,.45);
  box-shadow: 0 0 0 .25rem rgba(22,117,0,.12);
}

:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] .small,
:root[data-theme="dark"] .text-muted{
  color: var(--cp-text-soft) !important;
}

:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label{
  color:#e5edf5;
}

/* ========= TABLE ========= */

.table{
  color: var(--cp-text);
}

.table > :not(caption) > * > *{
  background: transparent;
  color: inherit;
  border-bottom-color: var(--cp-border);
}

:root[data-theme="dark"] .table thead th{
  color: #d9e1ea;
}

:root[data-theme="dark"] .table-responsive{
  border-radius: 14px;
}

/* ========= HERO ========= */

.cp-hero{
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid var(--cp-border);
  background:
    linear-gradient(135deg, rgba(22,117,0,.16), rgba(22,117,0,.05)),
    var(--cp-card);
  box-shadow: var(--cp-shadow);
  color: var(--cp-text);
}

:root[data-theme="dark"] .cp-hero{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.05), transparent 25%),
    linear-gradient(135deg, rgba(22,117,0,.18), rgba(22,117,0,.05)),
    #16212b;
}

.cp-hero::after{
  content:"";
  position:absolute;
  inset:auto -30px -30px auto;
  width:180px;
  height:180px;
  background: radial-gradient(circle, rgba(22,117,0,.12) 0%, rgba(22,117,0,0) 70%);
  pointer-events:none;
}

/* ========= KPI ========= */

.cp-kpi{
  color: var(--cp-text);
}

.cp-kpi .display-6{
  color: var(--cp-text);
  font-weight:800;
}

.cp-kpi .h6{
  color: var(--cp-text-soft);
}

.cp-kpi::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--cp-accent2), var(--cp-accent));
}

.cp-kpi.is-warn::before{ background: linear-gradient(180deg, #f59e0b, #d97706); }
.cp-kpi.is-danger::before{ background: linear-gradient(180deg, #ef4444, #b91c1c); }
.cp-kpi.is-info::before{ background: linear-gradient(180deg, #3b82f6, #1d4ed8); }

.cp-table-title{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-weight:800;
}

.cp-table-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--cp-accent2), var(--cp-accent));
  box-shadow: 0 0 0 4px rgba(22,117,0,.08);
}

/* ========= CHAOS LEVEL ========= */

.cp-chaos-alert{
  border-radius: 1rem;
  box-shadow: var(--cp-shadow);
}

.cp-chaos-alert .cp-chaos-title,
.cp-chaos-alert .cp-chaos-text,
.cp-chaos-alert .cp-chaos-side,
.cp-chaos-alert .cp-chaos-value{
  color: inherit;
}

.cp-chaos-alert.is-calm{
  background:#eaf7ec;
  color:#1e5e2a;
}

.cp-chaos-alert.is-medium{
  background:#fff6dd;
  color:#7a5600;
}

.cp-chaos-alert.is-chaos{
  background:#fdeaea;
  color:#8f1d1d;
}

:root[data-theme="dark"] .cp-chaos-alert.is-calm{
  background:rgba(25,135,84,.18);
  color:#d5f5df;
}

:root[data-theme="dark"] .cp-chaos-alert.is-medium{
  background:rgba(245,158,11,.18);
  color:#ffefc2;
}

:root[data-theme="dark"] .cp-chaos-alert.is-chaos{
  background:rgba(239,68,68,.18);
  color:#ffd7d7;
}

/* ========= DROPDOWN ========= */

:root[data-theme="dark"] .dropdown-menu{
  background:#16212b;
  color:var(--cp-text);
}

:root[data-theme="dark"] .dropdown-item{
  color:var(--cp-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus{
  background:rgba(255,255,255,.06);
}

/* ========= BADGES ========= */

.badge.cp-badge{
  font-size:.82rem;
  padding:.45em .65em;
  border-radius:999px;
}

.cp-freq-daily{ background:#0d6efd; }
.cp-freq-weekly{ background:#198754; }
.cp-freq-monthly{ background:#f2c94c; color:#111; }
.cp-freq-semiannual{ background:#6f42c1; }
.cp-freq-annual{ background:#dc3545; }
.cp-freq-once{ background:#475569; }

/* ========= SUGGEST ========= */

.cp-suggest{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 12px;
  margin-top: .35rem;
  background: var(--cp-card);
}

.cp-suggest .dropdown-item{
  padding: .65rem .9rem;
}

.cp-suggest .dropdown-item.active,
.cp-suggest .dropdown-item:active{
  background: rgba(22,117,0,.12);
  color: #111;
}

.cp-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(22,117,0,.45);
  flex: 0 0 auto;
}

/* ========= AUTH / ALERT / MODAL ========= */

.cp-auth-note{
  color: var(--cp-text-soft);
}

:root[data-theme="dark"] .bg-light{
  background-color: var(--cp-card-soft) !important;
}

:root[data-theme="dark"] .alert-light{
  background: var(--cp-card-soft);
  border-color: var(--cp-border);
  color: var(--cp-text);
}

:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .alert-warning,
:root[data-theme="dark"] .alert-success,
:root[data-theme="dark"] .alert-danger{
  color: var(--cp-text);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .modal-content{
  color: var(--cp-text);
}

@media (max-width: 991.98px){
  .cp-brand-subtitle{
    display:none;
  }
}