/* ===================================================================
   Albtal Arena OS – Design System v2
   "Rustic Modern" – naturverbunden, warm, modern, mobil-first
   =================================================================== */

:root{
  /* Naturpalette – abgeleitet aus der Design-Vorlage */
  --forest-deep:#3B4D22;    /* Sidebar, Header, aktive Elemente */
  --forest:#355E3B;         /* Buttons, Überschriften */
  --moss:#6B8E23;           /* Akzente, Icons, Badges */
  --wood:#6A4A2B;           /* Sekundär, Rahmen */
  --wood-dark:#4A2F1D;      /* Sidebar-Logo-Bereich */
  --sand:#D8C7A1;           /* Hintergründe, Tags */
  --cream:#F7F1E4;          /* Text auf dunklem Grund */
  --nature-white:#FAF8F2;   /* Standard-Hintergrund */
  --bg:#F4F6F8;             /* Hauptinhalt-Hintergrund (modernes Grau) */
  --section:#F2EBDD;        /* Zwischensektionen */
  --campfire:#D97B2D;       /* CTA, wichtige Aktionen */
  --campfire-dark:#C46A22;

  /* Text */
  --ink:#2C3E50;            /* Überschriften, Haupttext */
  --muted:#7F8C8D;          /* Sekundärtext, Metadaten */
  --line:#E8E4DC;           /* Trennlinien */

  /* Shadows – weich, modern */
  --shadow:0 4px 24px rgba(59,77,34,.08);
  --shadow-sm:0 2px 8px rgba(0,0,0,.04);
  --shadow-hover:0 8px 32px rgba(59,77,34,.14);

  /* Radien */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:24px;

  /* Spacing */
  --sp:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Inter',sans-serif;font-weight:700;color:var(--ink);letter-spacing:-.01em}
h1{font-size:1.6rem;line-height:1.2}
h2{font-size:1.2rem}
h3{font-size:1rem}
a{color:var(--forest);text-decoration:none;transition:color .2s}
a:hover{color:var(--moss)}

/* ================================================================
   LAYOUT: Sidebar + Content (Desktop) / Drawer (Mobil)
   ================================================================ */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:260px;
  background:var(--forest-deep);
  color:var(--cream);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:100;
  transition:transform .3s ease;
}

.sidebar-header{
  background:var(--wood-dark);
  background-image:
    radial-gradient(circle at 85% -10%, rgba(107,142,35,.25), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 34 L14 12 L24 26 L34 6 L46 26 L58 14 L70 30 L82 10 L94 28 L106 16 L120 32' fill='none' stroke='%23F7F1E4' stroke-opacity='0.07' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat,repeat-x;
  background-position:top right,bottom;
  padding:18px 24px;
  display:flex;
  align-items:center;
  gap:12px;
}
.sidebar-header .logo-mark{
  width:34px;height:34px;
  border-radius:var(--r-sm);
  object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
  flex-shrink:0;
}
.sidebar-header .logo-word{
  font-size:1.05rem;
  font-weight:700;
  color:var(--cream);
  letter-spacing:-.01em;
  line-height:1.15;
}

.nav{flex:1;padding:16px 0;overflow-y:auto}
.nav-section{padding:8px 24px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(247,241,228,.4);font-weight:600}
.nav a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 24px;
  color:rgba(247,241,228,.75);
  font-weight:500;
  font-size:.92rem;
  border-left:3px solid transparent;
  transition:all .2s;
}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{
  background:rgba(107,142,35,.18);
  border-left-color:var(--moss);
  color:#fff;
  font-weight:600;
}
.nav .ico{display:inline-flex;width:22px;flex-shrink:0;justify-content:center}
.icon{width:19px;height:19px;flex-shrink:0}

.sidebar-footer{
  padding:16px 24px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:12px;
}
.sidebar-footer .avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--moss);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;font-size:.9rem;
  flex-shrink:0;
}
.sidebar-footer .info{flex:1;min-width:0}
.sidebar-footer .info .name{font-size:.88rem;color:var(--cream);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer .info .role{font-size:.75rem;color:rgba(247,241,228,.5)}
.sidebar-footer .logout{
  color:rgba(247,241,228,.5);
  font-size:1.1rem;
  padding:4px;
  transition:color .2s;
}
.sidebar-footer .logout:hover{color:#fff}

/* Mobile overlay */
.overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.4);
  z-index:99;
  opacity:0;
  transition:opacity .3s;
}
.overlay.show{display:block;opacity:1}

/* Content area */
.content{
  flex:1;
  margin-left:260px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Top bar (mobile: hamburger + title) */
.topbar{
  background:#fff;
  padding:16px 28px;
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.topbar .hamburger{
  display:none;
  font-size:1.4rem;
  background:none;border:none;cursor:pointer;
  color:var(--forest-deep);
  padding:4px;
}
.topbar .title{font-size:1.15rem;font-weight:700;color:var(--ink);white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .who{color:var(--muted);font-size:.85rem;white-space:nowrap}

.topbar .search{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  margin-left:24px;
  flex:1;max-width:340px;
  color:var(--muted);
}
.topbar .search .search-ico{display:flex;flex-shrink:0}
.topbar .search .icon{width:16px;height:16px}
.topbar .search input{
  border:none;background:none;outline:none;
  font-family:inherit;font-size:.86rem;color:var(--ink);width:100%;
}
.topbar .search input::placeholder{color:var(--muted)}
.topbar .search input:disabled{cursor:not-allowed}

.topbar .bell{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  border:none;background:var(--bg);
  color:var(--forest-deep);
  cursor:pointer;
  transition:background .2s;
  flex-shrink:0;
}
.topbar .bell:hover{background:var(--section)}
.topbar .bell .icon{width:19px;height:19px}
.topbar .bell-badge{
  position:absolute;top:-2px;right:-2px;
  background:var(--campfire);color:#fff;
  font-size:.66rem;font-weight:700;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}

.main{flex:1;padding:28px;max-width:1280px;width:100%}

/* ================================================================
   HERO (Dashboard)
   ================================================================ */
.hero{
  background:linear-gradient(135deg,var(--forest-deep),var(--forest));
  border-radius:var(--r-lg);
  padding:36px 32px;
  color:var(--cream);
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='140' viewBox='0 0 400 140'%3E%3Cpath d='M0 120 L40 50 L70 90 L110 20 L150 90 L190 45 L230 100 L270 35 L310 95 L350 55 L400 110 L400 140 L0 140 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right -20px bottom -10px;
  background-size:70% auto;
  pointer-events:none;
}
.hero h1,.hero p,.hero .greeting{position:relative}
.hero .title-row{display:flex;align-items:center;gap:12px;position:relative}
.hero .title-row .icon{width:26px;height:26px;flex-shrink:0}
.hero h1{color:#fff;font-size:1.8rem;margin-bottom:6px}
.hero p{color:rgba(247,241,228,.8);font-size:1rem}
.hero .greeting{font-size:.85rem;color:rgba(247,241,228,.5);margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em}

/* ================================================================
   KPI CARDS
   ================================================================ */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:28px;
}
.kpi-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:22px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi-card .kpi-icon{
  width:40px;height:40px;
  border-radius:12px;
  background:var(--section);
  color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.kpi-card .kpi-icon .icon{width:20px;height:20px}
.kpi-card.alert .kpi-icon{background:rgba(217,123,45,.14);color:var(--campfire-dark)}
.kpi-card .kpi-num{font-size:2rem;font-weight:700;color:var(--forest-deep);line-height:1}
.kpi-card .kpi-label{color:var(--muted);font-size:.82rem;margin-top:4px}

/* ================================================================
   CARDS (universell)
   ================================================================ */
.card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--shadow-sm);
  margin-bottom:20px;
}
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.card-header h2{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.card-header .link{font-size:.85rem;color:var(--moss);font-weight:600}

/* ================================================================
   LISTS (statt Tabellen – modern, mobil-freundlich)
   ================================================================ */
.list{display:flex;flex-direction:column;gap:2px}
.list-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .15s;
  text-decoration:none;color:inherit;
}
.list-item:hover{background:var(--section)}
.list-item .li-icon{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--section);color:var(--forest)}
.list-item .li-icon .icon{width:16px;height:16px}
.list-item .li-body{flex:1;min-width:0}
.list-item .li-title{font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .li-meta{font-size:.8rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.li-inline-ico{display:inline-flex;align-items:center;gap:4px}
.li-inline-ico .icon{width:13px;height:13px}
.list-item .li-badge{flex-shrink:0}
.list-item .li-arrow{color:var(--muted);font-size:.9rem;flex-shrink:0}

/* ================================================================
   BADGES / STATUS
   ================================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:600;
  white-space:nowrap;
}
.b-backlog{background:#E8E2D4;color:var(--wood)}
.b-todo{background:#D6E2C8;color:var(--forest)}
.b-in_progress{background:#F3D9BD;color:var(--campfire-dark)}
.b-done{background:var(--moss);color:#fff}
.b-collected{background:#E8E2D4;color:var(--wood)}
.b-rejected{background:#E0CFC0;color:var(--muted)}
.chip-action{background:var(--campfire);color:#fff;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center}
.chip-action:has(.icon){padding:5px}
.chip-action .icon{width:13px;height:13px}
.tag{display:inline-block;background:var(--section);color:var(--wood);padding:2px 10px;border-radius:999px;font-size:.76rem}

/* ================================================================
   FILTERS
   ================================================================ */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;
}
.filters select,.filters input{
  padding:10px 14px;
  border-radius:var(--r-sm);
  border:1.5px solid var(--line);
  background:#fff;
  font-family:inherit;font-size:.88rem;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s;
}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--moss)}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--forest);
  color:#fff;
  padding:12px 22px;
  border-radius:var(--r-sm);
  border:none;
  font-weight:600;
  font-family:inherit;
  font-size:.92rem;
  cursor:pointer;
  transition:all .2s;
}
.btn:hover{background:var(--forest-deep);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.cta{background:var(--campfire)}
.btn.cta:hover{background:var(--campfire-dark)}
.btn.ghost{background:transparent;border:1.5px solid var(--forest);color:var(--forest)}
.btn.ghost:hover{background:var(--forest);color:#fff}
.btn.sm{padding:8px 16px;font-size:.85rem}
.btn.block{width:100%;justify-content:center}
.btn .icon{width:16px;height:16px}

/* ================================================================
   FORMS
   ================================================================ */
form.edit{display:grid;gap:18px;max-width:640px}
.form-group label{display:block;font-weight:600;color:var(--wood);font-size:.85rem;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{
  width:100%;
  padding:12px 16px;
  border-radius:var(--r-sm);
  border:1.5px solid var(--line);
  font-family:inherit;
  font-size:.92rem;
  background:#fff;
  color:var(--ink);
  transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--moss)
}
.form-group textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ================================================================
   MISC
   ================================================================ */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.88rem;margin-bottom:16px}
.back .icon{width:15px;height:15px}
.back:hover{color:var(--forest)}
.muted{color:var(--muted)}
.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.empty .ico{display:flex;justify-content:center;margin-bottom:10px;opacity:.5}
.empty .ico .icon{width:32px;height:32px}
.pre{white-space:pre-wrap;background:#fff;padding:20px;border-radius:var(--r);box-shadow:var(--shadow-sm);line-height:1.7;font-size:.9rem}
.section-gap{margin-top:32px}

/* ================================================================
   LOGIN (moderner Look)
   ================================================================ */
.login-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background:linear-gradient(135deg,var(--forest-deep) 0%,var(--wood-dark) 100%);
  padding:20px;
}
.login-card{
  background:#fff;
  padding:44px 36px;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-hover);
  text-align:center;
  max-width:400px;
  width:100%;
}
.login-card .logo-img{max-width:220px;width:100%;height:auto;margin:0 auto 8px;display:block}
.login-card .title{font-size:1.3rem;font-weight:700;color:var(--forest-deep);margin-bottom:4px}
.login-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:28px}

/* ================================================================
   RESPONSIVE – Mobil
   ================================================================ */
@media(max-width:768px){
  .sidebar{
    transform:translateX(-100%);
    box-shadow:var(--shadow-hover);
  }
  .sidebar.open{transform:translateX(0)}
  .content{margin-left:0}
  .topbar .hamburger{display:block}
  .main{padding:16px}
  .hero{padding:24px 20px;border-radius:var(--r)}
  .hero h1{font-size:1.4rem}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi-card{padding:16px}
  .kpi-card .kpi-num{font-size:1.5rem}
  .card{padding:18px;border-radius:var(--r)}
  .form-row{grid-template-columns:1fr;gap:0}
  .topbar .who{display:none}
  .topbar .title{font-size:1rem}
  .topbar .search{display:none}
  .list-item{padding:12px}
  .list-item .li-meta{font-size:.75rem}
}

@media(max-width:420px){
  .kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .main{padding:12px}
  .hero{padding:20px 16px}
  .hero h1{font-size:1.2rem}
}

/* Scrollbar */
.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}