/* =========================
   Design Tokens
========================= */
:root{
  --c-bg:#f4f6f8;
  --c-text:#333;
  --c-brand:#005f99;
  --c-brand-dark:#004070;
  --c-danger:#990000;
  --c-danger-dark:#a03a3a;
  --c-border:#cfd8e3;
  --c-muted:#555;
  --radius:10px;
  --shadow:0 4px 12px rgba(0,0,0,.06);
}

/* =========================
   Reset / Base
========================= */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.5;
  display:flex;
  flex-direction:column;
}

/* =========================
   Header
========================= */
header{
  background:var(--c-brand);
  color:#fff;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1000;
}
header .brand{
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  text-decoration:none;
}

/* =========================
   Nav
========================= */
nav{display:flex;align-items:center}
nav ul{list-style:none;display:flex;gap:20px}
nav ul li a{color:#fff;text-decoration:none;font-weight:600}
nav ul li a:hover{text-decoration:underline}

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  border:0;background:transparent;
}
.menu-toggle span{
  display:block;width:26px;height:3px;background:#fff;border-radius:2px;
}

/* =========================
   Layout
========================= */
main{
  padding:10px;
  width:95%;
  max-width:1100px;
  margin:0 auto;
  flex:1;
}
h2{color:var(--c-brand);margin-bottom:12px;font-size:22px}
h3{color:var(--c-brand);margin-bottom:8px;font-size:20px}

/* =========================
   Card / Form
========================= */
.card{
  background:#fff;border-radius:var(--radius);padding:12px;
  box-shadow:var(--shadow);margin-top:8px;word-wrap:break-word;
}
.card p{margin:4px 0}

form{
  background:#fff;border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow);max-width:420px;width:100%;margin:28px auto;
}

input[type="text"],input[type="email"],input[type="password"],
textarea,select,input[type="search"]{
  width:100%;padding:12px;margin:8px 0 18px;
  border:1px solid var(--c-border);border-radius:8px;background:#fff;font-size:16px;
}

form.inline-form,
.inline-form{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
  width:auto !important;
  border-radius:0 !important;
  display:inline !important;
}


/* =========================
   Buttons
========================= */
button,.btn{
  display:inline-block;background:var(--c-brand);color:#fff;border:0;border-radius:8px;
  padding:10px 14px;cursor:pointer;font-weight:600;text-decoration:none;
  min-width: 100px;
}
button:hover,.btn:hover{background:var(--c-brand-dark)}

.btn-exit,.card-btn-exit{
  display:inline-block;background:var(--c-danger);color:#fff;border:0;border-radius:8px;
  padding:6px 10px;cursor:pointer;font-weight:600;text-decoration:none;
  min-width: 100px;
}
.btn-exit:hover,.card-btn-exit:hover{background:var(--c-danger-dark)}

.tool-btn,.card-btn{
  display:inline-block;background:var(--c-brand);color:#fff;border:0;border-radius:8px;
  padding:6px 10px;margin:2px 2px 2px 0;cursor:pointer;font-weight:600;
  text-decoration:none;text-align:center;transition:background .2s
}
.tool-btn:hover,.card-btn:hover{background:#2280b9}

.tool-buttons{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}

/* Tiny circular remove button */
.btn-remove{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1;border:0;border-radius:50%;
  background:var(--c-danger);color:#fff;cursor:pointer;font-weight:700;font-size:16px;
  -webkit-appearance:none;appearance:none;
}
.btn-remove:hover{background:#a83a3a}
.btn-remove:active{transform:scale(.98)}
.btn-remove:focus-visible{outline:2px solid #333;outline-offset:2px}

/* danger tool button (red) */
.tool-btn-exit{
  display:inline-block;background:var(--c-danger);color:#fff;border:0;border-radius:8px;
  padding:6px 10px;cursor:pointer;font-weight:600;text-decoration:none;text-align:center;
  transition:background .2s;
}
.tool-btn-exit:hover{background:var(--c-danger-dark)}

/* Small round reorder buttons with chevrons */
.btn-move{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:var(--c-brand); color:#fff;
  cursor:pointer; margin-left:6px;
  font-size:16px; line-height:1; font-weight:700;  /* visible arrows */
}
.btn-move:hover{ background:var(--c-brand-dark); }

/* keep them on the right edge */
.member-row .reorder{
  margin-left:auto; display:flex; gap:8px; padding-right:20px;
}
.btn-move:hover{background:var(--c-brand-dark)}
.btn-move:active { transform: scale(0.95); }

/* status dots */
.status-dot{
  width:14px;height:14px;border-radius:50%;
  display:inline-block;vertical-align:middle;
  border:2px solid #cfd8e3;background:transparent;
  margin-right:4px;   /* smaller gap = "1 space" look */
}
.status-dot.done{ background:#16a34a;border-color:#16a34a; }
.status-dot.open{ background:transparent;border-color:#cfd8e3; }

/* round + button (for “eintragen”) */
.btn-circle{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none; font-weight:800; line-height:1;
  background:var(--c-brand); color:#fff; margin-left:12px;
}
.btn-circle:hover{ background:var(--c-brand-dark); }
.btn-circle--blue{ background:var(--c-brand); color:#fff; }
.btn-circle--blue:hover{ background:var(--c-brand-dark); }
.btn-circle--red{ background:var(--c-danger); color:#fff; }
.btn-circle--red:hover{ background:var(--c-danger-dark); }

/* right-aligned action cluster */
.row-actions{ margin-left:auto; display:flex; gap:8px; padding-right:20px; }

/* keep inline forms tiny */
.inline-form{ background:transparent!important; box-shadow:none!important; padding:0!important; margin:0!important; display:inline!important; }



/* =========================
   Utility
========================= */
.hidden{display:none}
.error{color:#c62828;text-align:center;margin-top:8px}

/* Alerts */
.alerts{max-width:640px;margin:8px auto}
.alert{padding:.6rem .8rem;border-radius:.5rem;margin:.4rem 0}
.alert.success{background:#e7f7ec;border:1px solid #b7e3c3}
.alert.error{background:#fdeaea;border:1px solid #f3c2c2}

/* CSV boxes */
.csv-errors{background:#ffe6e6;border:1px solid #f00;padding:10px;margin-top:10px}
.csv-errors ul{margin:0;padding-left:20px}
.csv-success{background:#e6ffe6;border:1px solid #0a0;padding:10px;margin-top:10px}

/* Footer */
footer{
  background:var(--c-brand);color:#fff;text-align:center;
  padding:12px 16px;margin-top:auto;
}

/* =========================
   Members / Lists / Actions
========================= */
.member-list{list-style:none;margin:0;padding:0}
.member-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:8px 20px;border-bottom:1px solid #e9eef3;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.member-row:last-child{border-bottom:0}
.member-name{flex:1;font-weight:600}
.member-name small{font-weight:400;opacity:.75;margin-left:6px}
.member-actions{display:flex;gap:8px} /* up/down/remove cluster on the right */
.drag-ghost{opacity:.6}
.reorder button{margin-left:6px;font-size:.9rem}

/* Matches (buttons aligned right) */
.match-list li {
  display:flex;
  align-items:center;
  justify-content:flex-start;  /* keep dot + text together */
  gap:6px;                     /* just a tiny gap */
  padding:2px 0;
  padding-right:20px;          /* keeps the + button off the edge */
}

.match-list .status-dot { flex:0 0 auto; margin:0; }
.match-list .match-label { flex:1; } /* text takes remaining space */

/* Search */
.search-card{padding:.9rem}
.search-wrap{position:relative}
.search-wrap input[type="search"]{
  width:100%;height:44px;padding:0 44px 0 42px;border:1px solid #d2d6dc;border-radius:12px;
  font-size:16px;-webkit-appearance:none;appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    no-repeat 12px 50% / 18px 18px;
}
.search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:0;border-radius:10px;background:#b91c1c;color:#fff;
  font-size:20px;line-height:1;cursor:pointer;display:none;
}
.match-count{margin-top:.4rem;text-align:right;font-size:.92rem;opacity:.7}
.search-field{min-height:20px}

/* =========================
   Responsive
========================= */
@media (max-width:768px){
  header{flex-direction:column;align-items:flex-start;padding:10px 12px}
  header .brand{margin-bottom:8px;font-size:1.1rem;color:#fff;text-decoration:none}

  .menu-toggle{display:flex}
  nav ul{
    display:none;flex-direction:column;gap:10px;position:absolute;right:12px;top:56px;
    background:var(--c-brand);padding:12px;border-radius:8px;min-width:220px;box-shadow:0 8px 20px rgba(0,0,0,.15);z-index:1001
  }
  nav ul.show{display:flex}
  nav ul.show li a{display:block;padding:10px 0;font-size:16px}

  form{max-width:100%;margin:20px auto;padding:15px}
  .card{font-size:15px;padding:10px}
  .card p{font-size:14px}

  .tool-buttons{flex-direction:column;gap:8px}
  .tool-btn,.tool-btn-exit,.card-btn,.card-btn-exit,button,.btn,.btn-exit{
    width:100%;font-size:15px;padding:10px 12px
  }

  h2,h3{font-size:18px}

  .card-btn,.card-btn-exit{
    width:auto;min-width:100px;font-size:16px;padding:8px 12px
  }
  .card p{font-size:16px}
}

@media (max-width:480px){
  main{width:96%;padding:8px}
  .card{padding:8px}
}