/* ============================================================
   KinHub - Design System (dark, flat, calm)
   ============================================================ */

:root{
  /* surfaces — warm anthracite, low saturation */
  --bg:        #101113;
  --surface-1: #16181b;   /* cards */
  --surface-2: #1c1f23;   /* raised / inputs */
  --surface-3: #23272c;   /* hover / pressed */

  /* hairlines & text */
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.13);
  --text:      rgba(255,255,255,.92);
  --text-2:    rgba(255,255,255,.60);
  --text-3:    rgba(255,255,255,.40);

  /* accent (system) */
  --accent:        #2fbd7e;
  --accent-weak:   rgba(47,189,126,.14);
  --accent-line:   rgba(47,189,126,.40);
  --accent-hover:  #38c98a;
  --on-accent:     #08130d;

  /* member colors — same L/C, varied hue */
  --m-david:   #5b8fe0;
  --m-philip:  #c98ae0;
  --m-eltern:  #e0b25b;

  /* radius (lightly rounded) */
  --r-card: 16px;
  --r-btn:  12px;
  --r-pill: 999px;

  /* density */
  --pad: 20px;
  --gap: 16px;

  --header-h: 76px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button{ font-family: inherit; color: inherit; }
a{ color: inherit; text-decoration: none; }

/* nicer scrollbars in the scroll region */
.kc-scroll{ scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.kc-scroll::-webkit-scrollbar{ width: 10px; height: 10px; }
.kc-scroll::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
.kc-scroll::-webkit-scrollbar-track{ background: transparent; }

/* ---------- App shell ---------- */
.kc-app{
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 220px),
    var(--bg);
}

/* ---------- Header (fixed) ---------- */
.kc-header{
  height: var(--header-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  background: rgba(16,17,19,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.kc-brand{ display:flex; align-items:center; gap:13px; flex: 0 0 auto; }
.kc-logo{
  width: var(--logo-size, 44px); height: var(--logo-size, 44px);
  border-radius: calc(var(--logo-size, 44px) * .295);
  box-shadow: 0 6px 16px rgba(70,55,35,.14);
}
svg.kc-logo{ display: block; color: var(--accent); }
div.kc-logo{
  display: grid; place-items: center;
  color: var(--on-accent); background: var(--accent);
  font-weight: 700; font-size: 17px; letter-spacing: 0;
}
.kc-brand-name{ font-weight: 650; font-size: 17px; line-height: 1.1; letter-spacing:0; }
.kc-brand-sub{ font-size: 12.5px; color: var(--text-2); margin-top: 2px; }

.kc-nav{ display:flex; gap: 6px; margin-left: 10px; min-width:0; }
.kc-nav-item{
  height: 44px; padding: 0 18px;
  display:flex; align-items:center; gap:9px;
  border: none; background: transparent;
  color: var(--text-2); font-size: 15px; font-weight: 550;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background .14s, color .14s;
  text-decoration:none;
  white-space:nowrap;
}
.kc-nav-item:hover{ background: var(--surface-2); color: var(--text); }
.kc-nav-item.is-active{ background: var(--surface-2); color: var(--text); }
.kc-nav-item.is-active svg{ color: var(--accent); }

/* Badge (neue Nachrichten) */
.kc-badge{
  display:inline-grid; place-items:center;
  min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 11.5px; font-weight: 700; line-height: 1;
}

.kc-header-right{ margin-left:auto; display:flex; align-items:center; gap: 12px; flex: 0 0 auto; }

.kc-clock{ text-align:right; line-height:1.15; }
.kc-clock-time{ font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kc-clock-date{ font-size: 12px; color: var(--text-2); }

.kc-chip{
  height: 44px; padding: 0 16px;
  display:inline-flex; align-items:center; gap:9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--text); font-weight: 550; font-size: 14.5px;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.kc-chip:hover{ background: var(--surface-2); }

.kc-iconbtn{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  text-decoration:none;
}
.kc-iconbtn:hover{ background: var(--surface-2); color: var(--text); }
.kc-iconbtn.is-active{ background: var(--surface-2); color: var(--accent); border-color: var(--accent-line); }

/* ---------- Main scroll region ---------- */
.kc-main{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.kc-page{
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

/* page intro */
.kc-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 24px; flex-wrap: wrap; }
.kc-greeting{ font-size: 28px; font-weight: 680; letter-spacing: 0; }
.kc-greeting-sub{ color: var(--text-2); font-size: 15px; margin-top: 6px; }

/* ---------- Card ---------- */
.kc-card{
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.kc-card-pad{ padding: var(--pad); }
.kc-card-title{ font-size: 16px; font-weight: 620; letter-spacing:0; }
.kc-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.kc-eyebrow{ font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Buttons ---------- */
.kc-btn{
  height: 52px; padding: 0 22px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background .14s, border-color .14s, transform .04s;
}
.kc-btn:hover{ background: var(--surface-3); }
.kc-btn:active{ transform: translateY(1px); }

.kc-btn-primary{
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 650;
}
.kc-btn-primary:hover{ background: var(--accent-hover); }

.kc-btn-ghost{ background: transparent; border-color: var(--line-2); color: var(--text-2); }
.kc-btn-ghost:hover{ background: var(--surface-2); color: var(--text); }

.kc-btn-danger{ background: transparent; border-color: rgba(224,91,91,.4); color: #e08a8a; }
.kc-btn-danger:hover{ background: rgba(224,91,91,.12); }

/* ---------- Mitglied dots & pills ---------- */
.kc-dot{ width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.kc-mpill{
  height: 36px; padding: 0 14px 0 11px;
  display:inline-flex; align-items:center; gap:9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  font-size: 14px; font-weight: 550; color: var(--text-2);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, opacity .14s;
}
.kc-mpill:hover{ background: var(--surface-2); }
.kc-mpill.is-on{ color: var(--text); background: var(--surface-2); }
.kc-mpill.is-off{ opacity: .42; }

/* ---------- Category pill ---------- */
.kc-cat{
  display:inline-flex; align-items:center; gap:7px;
  height: 28px; padding: 0 12px 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 550; color: var(--text-2);
}

/* ---------- generic helpers ---------- */
.kc-muted{ color: var(--text-2); }
.kc-tnum{ font-variant-numeric: tabular-nums; }
.kc-row{ display:flex; align-items:center; }
.kc-grow{ flex: 1 1 auto; }
.kc-flashes{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.kc-flash{
  padding:12px 14px;
  border-radius:var(--r-btn);
  border:1px solid var(--line-2);
  background:var(--surface-2);
  color:var(--text);
  font-size:14px;
  font-weight:600;
}
.kc-flash-success{ border-color:var(--accent-line); background:var(--accent-weak); }
.kc-flash-error{ border-color:rgba(224,91,91,.4); background:rgba(224,91,91,.10); color:#e08a8a; }

.knock-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(8,9,10,.64);
  backdrop-filter:blur(8px);
}
.knock-dialog{
  width:min(420px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:30px 28px 26px;
  border-radius:18px;
  border:1px solid var(--accent-line);
  background:var(--surface-1);
  box-shadow:0 24px 80px rgba(0,0,0,.42), 0 0 0 8px var(--accent-weak);
  text-align:center;
  animation:knockPulse 1.4s ease-in-out infinite;
}
.knock-avatar{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:rgba(10,12,14,.84);
  font-size:28px;
  font-weight:750;
}
.knock-title{ font-size:26px; font-weight:720; letter-spacing:0; }
.knock-text{ color:var(--text-2); font-size:15px; line-height:1.45; }
.knock-reason{
  width:100%;
  padding:13px 14px;
  border-radius:var(--r-btn);
  border:1px solid var(--accent-line);
  background:var(--accent-weak);
  color:var(--text);
  font-size:18px;
  font-weight:720;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.knock-actions{ display:flex; gap:10px; width:100%; }
.knock-actions .kc-btn{ flex:1; height:48px; }
@keyframes knockPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.025); }
}

@media (max-width: 980px){
  .kc-header{ gap: 12px; padding: 0 14px; }
  .kc-nav{ overflow-x:auto; scrollbar-width:none; }
  .kc-nav::-webkit-scrollbar{ display:none; }
  .kc-nav-item{ padding: 0 13px; }
  .kc-clock{ display:none; }
}

@media (max-width: 720px){
  :root{ --header-h: 132px; }
  .kc-header{
    height:auto;
    min-height: var(--header-h);
    flex-wrap:wrap;
    align-content:center;
    row-gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .kc-brand-name{ max-width: 124px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .kc-brand-sub{ max-width: 124px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .kc-user-chip{ display:none; }
  .kc-header-right{ gap:8px; }
  .kc-iconbtn{ width:40px; height:40px; }
  .kc-nav{
    order:3;
    width:100%;
    margin-left:0;
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .kc-nav-item span{ display:none; }
  .kc-nav-item{ width:auto; height:40px; justify-content:center; padding:0; }
}