/* ══════════════════════════════════════════════════════
   FANGBUCH · SFC Ellerstadt 1984 e.V.
   style.css
   ══════════════════════════════════════════════════════ */

:root {
  --bg:        #0c1520;
  --bg-deep:   #070e18;
  --bg-card:   #111d2b;
  --bg-nav:    #091510;
  --bg-header: #071a0f;
  --border:    rgba(255,255,255,0.06);
  --green:     #2d7a4f;
  --green-l:   #7aab8a;
  --green-d:   #1a5c3a;
  --green-g:   linear-gradient(135deg,#2d7a4f,#1a5c3a);
  --gold:      #e8d5a3;
  --gold-m:    #c8b88a;
  --t1:        #e8d5a3;
  --t2:        #7a9a7a;
  --t3:        #5a7a5a;
  --t4:        #3a5a3a;
  --admin:     #e8c84a;
  --danger:    #c0392b;
  --serif:     'Lora', Georgia, serif;
  --sans:      'DM Sans', system-ui, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:var(--sans); background:var(--bg); color:var(--t1); }
body { overflow-x:hidden; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--t4); border-radius:3px; }

/* ── Layout ── */
#app { min-height:100vh; display:flex; flex-direction:column; }
.page { display:none; flex:1; flex-direction:column; animation:fadeIn .25s ease; }
.page.active { display:flex; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Login ── */
#login-page {
  background: radial-gradient(ellipse at 30% 20%, rgba(45,122,79,.18) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(13,33,55,.8) 0%, transparent 60%),
              linear-gradient(160deg, #070e18 0%, #0d1e14 50%, #071a0f 100%);
  align-items:center; justify-content:center; min-height:100vh; padding:24px;
}
.login-card {
  width:100%; max-width:420px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:36px;
  backdrop-filter:blur(20px);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.login-hero { text-align:center; margin-bottom:36px; }
.login-hero .fish { font-size:56px; display:block; margin-bottom:12px; animation:bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.login-hero h1 { font-family:var(--serif); font-size:30px; color:var(--gold); letter-spacing:2px; margin-bottom:4px; }
.login-hero p  { font-size:11px; color:var(--green-l); letter-spacing:3px; text-transform:uppercase; }

/* ── Main Layout ── */
#main-page { flex-direction:row; height:100vh; overflow:hidden; }

/* ── Sidebar ── */
.sidebar {
  width:240px; background:var(--bg-header); border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0;
  padding:24px 0; transition:width .3s ease;
}
.sidebar-logo { padding:0 24px 28px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.sidebar-logo .fish { font-size:28px; }
.sidebar-logo h1 { font-family:var(--serif); font-size:20px; color:var(--gold); letter-spacing:1px; margin-top:6px; }
.sidebar-logo p  { font-size:10px; color:var(--t3); letter-spacing:2px; text-transform:uppercase; margin-top:2px; }
.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 24px; cursor:pointer; color:var(--t3);
  font-size:14px; font-weight:500;
  transition:all .2s; position:relative; margin:1px 0;
  text-decoration:none;
}
.nav-item:hover { color:var(--t2); background:rgba(255,255,255,.03); }
.nav-item.active { color:var(--green-l); background:rgba(45,122,79,.12); }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--green); border-radius:0 3px 3px 0;
}
.nav-item .icon { font-size:18px; width:22px; text-align:center; }
.nav-bottom { margin-top:auto; padding:16px 24px; border-top:1px solid var(--border); }
.user-chip {
  display:flex; align-items:center; gap:10px; padding:10px;
  background:rgba(255,255,255,.04); border-radius:var(--r-md);
  cursor:pointer; transition:background .2s;
}
.user-chip:hover { background:rgba(255,255,255,.07); }
.avatar {
  width:34px; height:34px; border-radius:50%; background:var(--green-g);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; flex-shrink:0;
}
.user-info { flex:1; min-width:0; }
.user-name { font-size:13px; color:var(--t1); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:1px; }
.badge-admin { background:rgba(232,200,74,.15); color:var(--admin); font-size:9px; padding:2px 7px; border-radius:20px; letter-spacing:1px; flex-shrink:0; }

/* ── Main Content ── */
.main-content { flex:1; overflow-y:auto; display:flex; flex-direction:column; min-width:0; }

/* ── Views ── */
.view { display:none; flex:1; flex-direction:column; animation:fadeIn .2s ease; }
.view.active { display:flex; }
.view-header {
  padding:28px 36px 20px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(7,26,15,.6) 0%, transparent 100%);
  flex-shrink:0;
}
.view-header h2 { font-family:var(--serif); font-size:24px; color:var(--gold); margin-bottom:4px; }
.view-header p  { font-size:13px; color:var(--t3); }
.view-body { padding:28px 36px; flex:1; }

/* ── Cards ── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; transition:border-color .2s; }
.card:hover { border-color:rgba(255,255,255,.1); }
.card-clickable { cursor:pointer; }
.card-clickable:hover { background:#152030; transform:translateY(-1px); transition:all .2s; }

/* ── Stat Grid ── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; }
.stat-icon  { font-size:24px; margin-bottom:10px; }
.stat-value { font-size:28px; font-weight:700; color:#fff; font-family:var(--sans); line-height:1; }
.stat-label { font-size:11px; color:var(--t3); margin-top:4px; text-transform:uppercase; letter-spacing:1px; }

/* ── Table ── */
.table-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead th {
  padding:13px 18px; text-align:left; font-size:10px; font-weight:600;
  color:var(--t3); text-transform:uppercase; letter-spacing:1.5px;
  background:rgba(0,0,0,.2); border-bottom:1px solid var(--border);
}
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; cursor:pointer; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,.03); }
tbody td { padding:14px 18px; font-size:14px; color:var(--t1); }
.td-fish   { font-family:var(--serif); font-weight:600; }
.td-weight { color:var(--green-l); font-weight:700; }
.td-meta   { color:var(--t3); font-size:12px; }
.td-badge  { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:3px 8px; border-radius:20px; }
.badge-cr   { background:rgba(122,171,138,.15); color:var(--green-l); }
.badge-kept { background:rgba(255,255,255,.06); color:var(--t3); }

/* ── Filters ── */
.filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.filter-chip {
  padding:6px 14px; border-radius:20px; font-size:13px; cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--t2); border:1px solid transparent;
  transition:all .15s; font-family:var(--sans);
}
.filter-chip:hover { border-color:var(--t4); }
.filter-chip.active { background:var(--green); color:#fff; }
.search-input {
  flex:1; min-width:200px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:8px 14px; color:var(--t1); font-size:14px;
  outline:none; font-family:var(--sans); transition:border-color .2s;
}
.search-input:focus { border-color:var(--green); }
.search-input::placeholder { color:var(--t4); }

/* ── Section Headers ── */
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.section-title  { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:2px; font-weight:600; }
.section-action { font-size:13px; color:var(--green-l); cursor:pointer; font-weight:500; }
.section-action:hover { color:#fff; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:var(--r-md); font-size:14px;
  font-weight:600; cursor:pointer; border:none; font-family:var(--sans);
  transition:all .2s; text-decoration:none;
}
.btn-primary   { background:var(--green-g); color:#fff; }
.btn-primary:hover { filter:brightness(1.15); transform:translateY(-1px); }
.btn-secondary { background:rgba(255,255,255,.07); color:var(--t2); }
.btn-secondary:hover { background:rgba(255,255,255,.11); }
.btn-danger    { background:rgba(192,57,43,.12); color:var(--danger); border:1px solid rgba(192,57,43,.2); }
.btn-danger:hover { background:rgba(192,57,43,.22); }
.btn-sm { padding:7px 14px; font-size:12px; }

/* ── Forms ── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:1px; margin-bottom:7px; font-weight:600; }
.form-input, .form-select, .form-textarea {
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:var(--r-md); padding:11px 14px; color:var(--t1);
  font-size:14px; outline:none; font-family:var(--sans); transition:border-color .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--green); background:rgba(255,255,255,.08); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--t4); }
.form-select { cursor:pointer; }
.form-select option { background:#0d1e14; }
.form-textarea { resize:vertical; min-height:80px; }
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.toggle-wrap  { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.toggle-label { font-size:14px; color:var(--t1); }
.toggle { width:44px; height:26px; background:rgba(255,255,255,.1); border-radius:13px; position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle.on { background:var(--green); }
.toggle::after { content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.toggle.on::after { transform:translateX(18px); }
.form-error { color:var(--danger); font-size:12px; margin-top:6px; }

/* ── Modal ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:100; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
.modal { background:#0e1d2b; border:1px solid var(--border); border-radius:var(--r-xl); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 32px 80px rgba(0,0,0,.7); }
.modal-header { padding:24px 28px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }
.modal-title  { font-family:var(--serif); font-size:20px; color:var(--gold); }
.modal-close  { background:none; border:none; color:var(--t3); font-size:22px; cursor:pointer; line-height:1; padding:2px 6px; border-radius:6px; }
.modal-close:hover { color:var(--t1); background:rgba(255,255,255,.06); }
.modal-body   { padding:24px 28px; }
.modal-footer { padding:16px 28px 24px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--border); }

/* ── Detail Panel ── */
.detail-panel { position:fixed; right:0; top:0; bottom:0; width:480px; background:#0a1520; border-left:1px solid var(--border); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:50; overflow-y:auto; display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,.5); pointer-events:none; }
.detail-panel.open { transform:none; pointer-events:auto; }
.detail-hero  { padding:40px 28px 28px; text-align:center; background:linear-gradient(180deg, rgba(45,122,79,.08) 0%, transparent 100%); border-bottom:1px solid var(--border); }
.detail-fish-icon { font-size:56px; margin-bottom:12px; }
.detail-fish-name { font-family:var(--serif); font-size:28px; color:var(--gold); }
.detail-fish-sub  { font-size:15px; color:var(--green-l); margin-top:4px; }
.detail-by        { font-size:12px; color:var(--t3); margin-top:8px; }
.detail-grid      { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:24px 28px; }
.detail-item      { background:var(--bg-card); border-radius:var(--r-md); padding:14px; border:1px solid var(--border); }
.detail-item-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:5px; }
.detail-item-value { font-size:14px; color:var(--t1); }
.detail-notes     { padding:0 28px 24px; }
.detail-actions   { padding:16px 28px 28px; border-top:1px solid var(--border); display:flex; gap:10px; margin-top:auto; }

/* ── Bar Chart ── */
.fish-bar-row  { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fish-bar-row:last-child { margin-bottom:0; }
.fish-bar-name  { font-size:13px; color:var(--t1); width:80px; flex-shrink:0; }
.fish-bar-track { flex:1; background:rgba(255,255,255,.06); border-radius:3px; height:6px; overflow:hidden; }
.fish-bar-fill  { height:100%; background:var(--green-g); border-radius:3px; transition:width .6s ease; }
.fish-bar-count { font-size:12px; color:var(--green-l); width:18px; text-align:right; font-weight:600; }

/* ── Admin Rows ── */
.member-row  { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.member-row:last-child { border-bottom:none; }
.member-avatar  { width:42px; height:42px; border-radius:50%; background:var(--green-g); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; flex-shrink:0; }
.member-info    { flex:1; min-width:0; }
.member-name    { font-size:14px; color:var(--t1); font-weight:600; display:flex; align-items:center; gap:8px; }
.member-meta    { font-size:12px; color:var(--t3); margin-top:2px; }
.member-actions { display:flex; gap:6px; }
.inactive-row   { opacity:.45; }
.water-row      { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.water-row:last-child { border-bottom:none; }

/* ── Layout-Helfer ── */
.grid-2col { display:grid; grid-template-columns:1fr 1fr; }
.view-header-split { display:flex; justify-content:space-between; align-items:flex-start; }

/* ── Mobile Nav ── */
.mobile-nav { display:none; background:var(--bg-nav); border-top:1px solid var(--border); padding:8px 0 16px; flex-shrink:0; }
.mobile-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; cursor:pointer; color:var(--t4); font-size:10px; font-family:var(--sans); transition:color .15s; background:none; border:none; }
.mobile-nav-item.active { color:var(--green-l); }
.mobile-nav-item .icon  { font-size:20px; }

/* ── Responsive 900px ── */
@media(max-width:900px) {
  .sidebar { width:200px; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .view-body { padding:20px; }
  .view-header { padding:20px; }
}

/* ── Responsive 680px (Smartphone) ── */
@media(max-width:680px) {
  .sidebar { display:none; }
  #main-page { flex-direction:column; }
  .mobile-nav {
    display:flex !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Grids auf eine Spalte */
  .grid-2col { grid-template-columns:1fr; }
  .stat-grid  { grid-template-columns:1fr 1fr; }
  .form-row, .form-grid-3 { grid-template-columns:1fr; }

  /* Fangbuch-Header: Titel + Button stapeln */
  .view-header-split { flex-direction:column; gap:10px; }
  .view-header-split button { width:100%; justify-content:center; }

  /* Stat-Karten kompakter */
  .stat-value { font-size:22px; }
  .stat-card  { padding:14px; }

  /* Detail-Panel Vollbild */
  .detail-panel { width:100%; }

  /* Tabelle: unwichtige Spalten ausblenden */
  table th:nth-child(3), table td:nth-child(3),
  table th:nth-child(5), table td:nth-child(5),
  table th:nth-child(6), table td:nth-child(6) { display:none; }

  /* Toast über der Nav-Bar */
  .toast { bottom:auto; top:16px; right:12px; left:12px; text-align:center; }
}

/* ── Toast ── */
.toast { position:fixed; bottom:24px; right:24px; z-index:200; background:#1a3326; border:1px solid rgba(45,122,79,.4); color:var(--green-l); padding:12px 20px; border-radius:var(--r-md); font-size:14px; box-shadow:0 8px 32px rgba(0,0,0,.4); transform:translateY(60px); opacity:0; transition:all .3s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.toast.show { transform:none; opacity:1; pointer-events:auto; }

/* ── Misc ── */
.count-badge { font-size:11px; color:var(--t3); font-weight:400; font-family:var(--sans); }
.spinner { width:20px; height:20px; border:2px solid rgba(255,255,255,.1); border-top-color:var(--green-l); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay { display:flex; align-items:center; justify-content:center; padding:60px; gap:12px; color:var(--t3); font-size:14px; }