:root{
  --bg: #0d1321;
  --panel: rgba(11,18,32,.78);
  --border: #1f2937;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --focus: rgba(148,163,184,.22);
}

@font-face{
  font-family: "AbeeZee";
  src: url("../fonts/arimo/abeezee-v23-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body.login-body,
body.dashboard-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items: stretch;
  color:var(--text);
  font-family: "AbeeZee", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  overflow-x:hidden;
  overflow-y:auto;
  padding-bottom:72px; /* Platzhalter für fixierten Footer */
}

/* Background */
.wallpaper{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(120,119,198,.14), transparent),
    radial-gradient(1200px 600px at 80% 70%, rgba(255,84,54,.10), transparent),
    linear-gradient(120deg, #0b0f1a 0%, #111827 100%);
  z-index:0;
}

/* === LOGIN === */
.login-wrap{
  position:relative; z-index:1;
  flex:1;
  display:grid; place-items:center; padding:24px;
}

.login-card{
  width: min(360px, 92vw);
  display:grid; justify-items:center; gap:14px;
  padding: 26px 20px 18px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}

.avatar{
  width:140px; height:140px; border-radius:999px;
  border:4px solid #fff; overflow:hidden; display:grid; place-items:center;
  background:#0f172a; box-shadow:0 10px 28px rgba(0,0,0,.45);
  margin-top:-70px;
}
.avatar img{ width:132px; height:132px; display:block; }

.login-title{
  margin: 6px 0 6px;
  font-size:26px; font-weight:800; letter-spacing:.2px; text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.login-form{ width:100%; display:grid; gap:10px; }

.input{
  width:100%;
  padding:.75rem .95rem;
  border-radius:10px;
  border:1px solid #273043;
  background:#0f172a; color:var(--text);
  outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.input:focus{
  border-color:#39465e;
  box-shadow:0 0 0 3px var(--focus);
}

.btn-login{
  width:100%;
  padding:.85rem 1rem;
  border-radius:10px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  color:#0b1020 !important;
  border:1px solid #273043 !important;
  font-weight:800; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
  margin-top:4px;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.btn-login:hover{ filter: brightness(1.05); box-shadow:0 8px 18px rgba(0,0,0,.26); }
.btn-login:active{ transform:translateY(0); box-shadow:none; }

.login-footer{
  margin-top:4px;
  display:flex; gap:10px; align-items:center; justify-content:center;
  font-size:12px; color:var(--muted);
}
.login-footer .legal{ color:#e5e7eb; text-decoration:underline; }
.login-footer .legal:hover{ opacity:.85; }

/* === DASHBOARD === */
.dashboard-content{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  text-align:center;
  flex:1;
  padding: 32px 18px;
}

.dashboard-content h1{
  font-size:2.2rem;
  font-weight:800;
  color:#ffffff;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  margin-bottom:0.5rem;
}

.dashboard-content p{
  color:#cbd5e1;
  font-size:1rem;
}

.dashboard-content a{
  color:#93c5fd;
  text-decoration:none;
}
.dashboard-content a:hover{
  text-decoration:underline;
}

footer{
  position:fixed;
  left:0; right:0; bottom:0;
  text-align:center;
  padding:14px 12px;
  font-size:14px;
  color:#9ca3af;
  z-index:2;
  background: rgba(15,23,42,.92);
  border-top:1px solid rgba(148,163,184,.15);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
footer .footer-left{
  display:inline-flex;
  gap:12px;
}
footer .footer-left a{
  color:#ffffff;
  text-decoration:none;
}
footer .footer-left a:hover{
  color:#ffffff;
  text-decoration:none;
}
footer .footer-center{
  color:#e5e7eb;
}
footer .footer-version{
  font-size:12px;
  color:#9ca3af;
}

/* === NAVBAR (Dashboard) === */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(15,23,42,.75);         /* Glass */
  border-bottom: 1px solid rgba(148,163,184,.15);
  backdrop-filter: blur(8px);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #e5e7eb;
  text-decoration: none;
  white-space: nowrap;
}

.nav-brand img {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  border-radius: 6px;
}

.nav-spacer { flex: 1; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item{
  position:relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  background: transparent;
}

.nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  border-color: rgba(148,163,184,.18);
}

.nav-link.active, .nav-link[aria-current="page"] {
  background: #0f172a;
  color: #e5e7eb;
  border-color: #273043;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.nav-parent{
  cursor:pointer;
}
.nav-parent .chevron{
  font-size:11px;
  opacity:0.7;
}

.nav-dropdown{
  display:none;
  position:absolute;
  left:0; top: 110%;
  min-width: 220px;
  padding: 10px;
  background: rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.20);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  flex-direction:column;
  gap:6px;
  z-index:12;
}
.nav-dropdown .nav-link{
  width:100%;
  justify-content:flex-start;
  height:auto;
  padding:8px 10px;
}
.nav-dropdown.show,
.nav-item.open .nav-dropdown{
  display:flex;
}
.nav-link.disabled{
  color:#6b7280;
  cursor:default;
  pointer-events:none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-logout {
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: #e11d48;
  color: #fff;
  border: 1px solid #be123c;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: 8px;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn-logout:hover { background:#be123c; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.btn-logout:active { transform: translateY(0); }

/* User badge on right */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  color: #e5e7eb;
  font-weight: 700;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(148,163,184,.25);
  width: 38px;
  height: 34px;
  border-radius: 8px;
  color: #e5e7eb;
  place-items: center;
}

/* Responsive: under 920px - collapse links */
@media (max-width: 920px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: absolute;
    left: 0; right: 0; top: 56px;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: rgba(15,23,42,.95);
    border-bottom: 1px solid rgba(148,163,184,.15);
    backdrop-filter: blur(8px);
  }
  .nav-links.show { display: flex; }
  .nav-item { width:100%; }
  .nav-link { width: 100%; justify-content: center; }
  .nav-dropdown{
    position:static;
    width:100%;
    box-shadow:none;
    border-radius:8px;
    padding:6px 8px;
  }
}

/* === PAGE + STATS === */
.page{
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 18px 32px;
}
.protokoll-page .page{
  max-width: none;
  width: 100%;
}
.protokoll-page .form-card{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 10px;
}
.page-header{
  margin-bottom: 6px;
}
.eyebrow{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.page-lead{
  color: #cbd5e1;
  margin: 6px 0 0;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 6px;
}
.stat-card{
  background: rgba(15,23,42,.82);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 16px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.03);
}
.stat-label{
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1px;
}
.stat-value{
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 6px;
}
.stat-sub{
  color: #cbd5e1;
  margin-top: 4px;
  font-size: 13px;
}
.stats-section{
  background: rgba(15,23,42,.86);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
.stats-section h2{
  margin: 0;
  font-size: 18px;
}
.section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.section-note{
  color: var(--muted);
  font-size: 13px;
}
.empty-state{
  color: var(--muted);
  margin: 4px 0;
}
.bar-row{
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 6px 0;
}
.bar-label{
  font-weight: 700;
  color: #e5e7eb;
}
.bar{
  position: relative;
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
}
.bar-value{
  font-weight: 800;
}
.stats-columns{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.list-rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.list-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.10);
  border-radius: 10px;
}
.list-label{
  font-weight: 700;
  color: #e5e7eb;
}
.list-sub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.list-value{
  font-weight: 800;
}
.chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  border: 1px solid transparent;
}
.badge-open{
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.4);
  color: #bfdbfe;
}
.badge-in_progress{
  background: rgba(251,191,36,.16);
  border-color: rgba(251,191,36,.42);
  color: #facc15;
}
.badge-closed{
  background: rgba(74,222,128,.16);
  border-color: rgba(74,222,128,.42);
  color: #bbf7d0;
}
.badge-high{
  background: rgba(248,113,113,.18);
  border-color: rgba(248,113,113,.40);
  color: #fecdd3;
}
.badge-normal{
  background: rgba(94,234,212,.16);
  border-color: rgba(94,234,212,.40);
  color: #99f6e4;
}
.badge-low{
  background: rgba(125,211,252,.16);
  border-color: rgba(125,211,252,.40);
  color: #bae6fd;
}
.recent-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recent-item{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 12px;
}
.recent-title{
  font-weight: 800;
  color: #ffffff;
}
.recent-meta{
  color: var(--muted);
  font-size: 13px;
}
.recent-tags{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* === WEBHOOKS === */
.webhook-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1200px;
}
.webhook-card{
  background: rgba(15,23,42,.88);
  border: 1px solid #273043;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03);
}
.hook-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.hook-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.icon-red{ background: linear-gradient(135deg, #ef4444, #b91c1c); }
.icon-green{ background: linear-gradient(135deg, #22c55e, #15803d); }
.icon-blue{ background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.icon-purple{ background: linear-gradient(135deg, #a855f7, #7c3aed); }
.icon-indigo{ background: linear-gradient(135deg, #6366f1, #4338ca); }
.icon-rose{ background: linear-gradient(135deg, #fb7185, #be123c); }
.icon-teal{ background: linear-gradient(135deg, #14b8a6, #0f766e); }
.hook-title{
  font-weight: 800;
  color: #e5e7eb;
}
.hook-slug{
  color: var(--muted);
  font-size: 12px;
}
.hook-label{
  display:block;
  font-weight: 700;
  color: #cbd5e1;
  font-size: 12px;
  margin: 6px 0 4px;
}
.hook-input{
  width: 100%;
  background: rgba(15,23,42,.95);
}
.hook-helper{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.hook-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.hook-actions .btn-login{
  width: auto;
  padding: 0.75rem 1.2rem;
}

/* === EMBED PLACEHOLDERS === */
.embed-card{
  max-width: 1200px;
}
.embed-title{
  font-weight: 800;
  color: #e5e7eb;
  font-size: 16px;
}
.embed-sub{
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 10px;
}
.placeholder-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.placeholder-chip{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 12px;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ph-key{
  font-weight: 800;
  color: #e5e7eb;
}
.ph-label{
  font-weight: 700;
  color: #cbd5e1;
  margin-top: 2px;
}
.ph-desc{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.embed-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1200px;
}
.embed-row{
  background: rgba(15,23,42,.9);
  border: 1px solid #273043;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.embed-left{
  display: flex;
  align-items: center;
  gap: 10px;
}
.embed-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 800;
}
.embed-label{
  font-weight: 800;
  color: #e5e7eb;
}
.embed-slug{
  font-size: 12px;
  color: var(--muted);
}
.embed-right{
  color: var(--muted);
  font-weight: 700;
}

/* === PLAYERS PAGE === */
.player-hero{
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.hero-icon{
  width:48px; height:48px;
  border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #4338ca, #6d28d9);
  color:#fff; font-size:20px; font-weight:800;
  box-shadow: 0 12px 24px rgba(109,40,217,.35);
}
.player-wrap{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}
.player-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap:20px;
  justify-items: stretch;
}
.player-tile{
  background: rgba(15,23,42,.9);
  border:1px solid #273043;
  border-radius:16px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.player-tile .tile-icon{
  width:36px; height:36px;
  border-radius:10px;
  display:grid; place-items:center;
  color:#fff; font-weight:800;
  background: rgba(255,255,255,.12);
}
.player-tile .tile-label{
  font-weight:700;
  color:#cbd5e1;
  letter-spacing:.2px;
}
.player-tile .tile-value{
  font-size:26px;
  font-weight:800;
  color:#fff;
}
.player-tile.green .tile-icon{ background: linear-gradient(135deg,#22c55e,#15803d); }
.player-tile.blue .tile-icon{ background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.player-tile.orange .tile-icon{ background: linear-gradient(135deg,#f97316,#c2410c); }

.page-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.btn-login.btn-primary{
  width:auto;
  min-width:0;
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  color:#0b1020 !important;
  border-color: #273043 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.btn-login.btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

.btn-login.btn-danger{
  background:#b91c1c !important;
  color:#fff !important;
  border-color:#7f1d1d !important;
}
.btn-login.btn-danger:hover{
  filter: brightness(1.05);
}

.search-card{
  max-width: 1100px;
  padding: 0;
  overflow: hidden;
  width: 100%;
  border-radius:16px;
}
.player-search .search-top{
  padding: 16px 18px 12px;
  background: linear-gradient(135deg, rgba(67,56,202,.85), rgba(46,41,78,.8));
  color:#e5e7eb;
  font-weight:800;
}
.player-search .search-header{
  margin:0;
}
.player-search .search-body{
  background: rgba(26,33,48,.95);
  border-top: 1px solid rgba(124,58,237,.25);
  padding: 18px 18px 16px;
}

.absence-page .search-card{
  margin-top: 6px;
}
.absence-search .search-top{
  padding: 16px 18px 12px;
  background: linear-gradient(135deg, rgba(79,70,229,.88), rgba(59,130,246,.80));
  color:#e5e7eb;
  font-weight:800;
}
.absence-search .search-header{
  margin:0;
}
.absence-search .search-body{
  background: rgba(19,26,40,.95);
  border-top: 1px solid rgba(79,70,229,.28);
  padding: 18px 18px 16px;
}
.absence-search .search-input-inline{
  display: flex;
  align-items: center;
  gap: 10px;
}
.absence-search .search-input-inline .search-icon{
  position: static;
  transform: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(99,102,241,.32);
  color: #c7d2fe;
}
.absence-search .search-input-inline .search-wide{
  padding-left: .95rem;
}
.absence-new{
  text-decoration:none;
}
.absence-empty-card{
  margin-top: 18px;
  width: 100%;
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 18px;
  background: rgba(19,26,40,.95);
  border: 1px solid #273043;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.03);
}
.absence-empty-icon{
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  color: #c7d2fe;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(99,102,241,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.absence-alert{
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.9);
  color: #e5e7eb;
  font-weight: 700;
}
.absence-alert.success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
}
.absence-alert.error{
  border-color: rgba(248,113,113,.35);
  background: rgba(248,113,113,.14);
  color: #fecdd3;
}
.absence-list{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.absence-card{
  padding: 16px;
  background: rgba(15,23,42,.88);
  border:1px solid rgba(148,163,184,.16);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.absence-card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.absence-dates{
  font-weight:800;
  color:#e5e7eb;
  letter-spacing:.2px;
}
.absence-chip{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(79,70,229,.16);
  color:#c7d2fe;
  border:1px solid rgba(79,70,229,.35);
  font-weight:700;
}
.absence-reason{
  margin-top:10px;
}
.absence-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color: var(--muted);
  font-weight:800;
  margin-bottom:4px;
}
.absence-reason-text{
  color:#e5e7eb;
  font-weight:700;
}
.absence-meta{
  margin-top:8px;
  color: var(--muted);
  font-size:12px;
}
.player-results{
  margin-top: 14px;
  border-top: 1px solid #273043;
  padding-top: 14px;
}
.search-input-wrap{
  position: relative;
  margin-bottom:12px;
}
.search-icon{
  position:absolute;
  left:12px; top:50%;
  transform: translateY(-50%);
  color:#9ca3af;
}
.search-wide{
  width:100%;
  padding-left:38px;
  background: rgba(255,255,255,.04);
  border-color: #273043;
}
.search-filters{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.filter-label{
  color:#cbd5e1;
  font-weight:700;
}
.filter-btn{
  padding:9px 14px;
  border-radius:10px;
  background: rgba(15,23,42,.9);
  border:1px solid #273043;
  color:#e5e7eb;
  cursor: not-allowed;
}
.players-empty{
  margin-top:6px;
  width:100%;
  min-height: 180px;
  display:grid;
  place-items:center;
  text-align:center;
  gap:8px;
  padding: 28px 12px;
  background: rgba(26,33,48,.95);
  border:1px solid #273043;
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.empty-icon{
  font-size:32px;
}
.empty-title{
  font-weight:800;
  color:#e5e7eb;
}
.empty-sub{
  color: var(--muted);
}
/* === TABLE (Items Page) === */
.table-container {
  position: relative;
  z-index: 1;
  padding: 24px;
  overflow-x: auto;
  max-height: calc(100vh - 120px);
}
.player-list-card .table-container{
  padding: 0;
}
.player-list-card table{
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(15, 23, 42, .85);
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 10px;
  color: #e5e7eb;
  font-size: 14px;
}

thead {
  position: sticky;
  top: 0;
  background: rgba(30, 41, 59, .95);
  backdrop-filter: blur(4px);
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .15);
  text-align: left;
  white-space: nowrap;
}

th {
  font-weight: 700;
  color: #93c5fd;
}

tr:hover {
  background: rgba(255,255,255,.05);
}

.desc {
  max-width: 400px;
  white-space: normal;
}

.img-cell img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

.table-container table {
  box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}

tr.saving { background: rgba(147,197,253,.08); }
tr.saved  { background: rgba(134,239,172,.10); transition: background .6s ease; }
tr.error  { background: rgba(248,113,113,.12); }

.form-card{
  background: rgba(15,23,42,.82);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 14px;
  padding: 18px 18px 14px;
  margin: 0 auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  max-width: 820px;
}

.form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 16px;
  margin-top: 10px;
}
.form-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label{
  font-weight: 700;
  color: #cbd5e1;
  font-size: 13px;
}
.record-grid{
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px 14px;
}
.field-static{
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  border: 1px solid #273043;
  background: #0f172a;
  color: var(--text);
  font-weight: 600;
}
.span-2{
  grid-column: span 2;
}
.span-3,
.full-row{
  grid-column: 1 / -1;
}
@media (max-width: 900px){
  .record-grid{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
.full-row{
  grid-column: 1 / -1;
}
.actions.actions-split{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.actions.actions-split .btn-login{
  width: 100%;
  justify-content: center;
}
.input,
.select,
.textarea{
  width: 100%;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  border: 1px solid #273043;
  background: #141c2f;
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.input[type="textarea"],
textarea.input{
  resize: vertical;
}
.select,
.textarea{ appearance: none; }
.textarea{
  min-height: 120px;
  resize: vertical;
}
.input:focus,
.select:focus,
.textarea:focus{
  border-color:#39465e;
  box-shadow:0 0 0 3px var(--focus);
}
.helper{
  font-size: 12px;
  color: var(--muted);
}
.actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

/* Team page filters */
.team-filter-card{
  margin-bottom: 14px;
}
.team-filter-grid{
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr);
  align-items: end;
}
.team-filter-grid > *{
  min-width: 0;
}
.team-filter-actions{
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.team-filter-actions .btn-login{
  width: 100%;
  min-width: 0;
  margin-top: 0;
  text-decoration: none;
  text-align: center;
}
.team-filter-btn{
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 1rem;
}
.team-filter-reset{
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  color: #e5e7eb !important;
  border-color: #475569 !important;
}
.team-filter-reset:hover{
  filter: brightness(1.08);
}
@media (max-width: 1180px){
  .team-filter-grid{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}
@media (max-width: 620px){
  .team-filter-grid{
    grid-template-columns: 1fr;
  }
  .team-filter-actions{
    grid-template-columns: 1fr;
  }
}

/* Search bar (records list) */
.search-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 8px 10px;
  max-width: 720px;
  background: rgba(15,23,42,.82);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}
.search-input{
  flex: 1;
  min-width: 200px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #273043;
  background: #0f172a;
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.search-input:focus{
  border-color:#39465e;
  box-shadow:0 0 0 3px var(--focus);
}
.search-btn{
  width: auto;
  min-width: 96px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #273043;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #0b1020;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.search-btn:hover{
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
}
.search-btn:active{
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width: 600px){
  .search-bar{
    flex-direction: column;
    align-items: stretch;
  }
  .search-btn{
    width: 100%;
  }
}

/* Page headings */
.page h1{
  text-align: center;
}

/* === ATTACHMENTS === */
.attachment-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.attachment-grid.small{
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.attachment-card{
  background: rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.attachment-card:hover{
  transform: translateY(-2px);
  border-color: rgba(148,163,184,.32);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.attachment-card img{
  width:100%;
  height:120px;
  object-fit: cover;
  display:block;
  background:#0f172a;
}
.attachment-file{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:120px;
  background: #0f172a;
  color:#cbd5e1;
  font-weight:700;
}
.attachment-icon{
  font-size:26px;
}
.attachment-meta{
  padding:10px 12px;
}
.attachment-title{
  font-weight:700;
  color:#e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachment-sub{
  color: var(--muted);
  font-size: 12px;
  margin-top:4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.75);
  display: grid;
  place-items: center;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 20;
}
.lightbox.show{
  opacity:1;
  pointer-events:auto;
}
.lightbox-inner{
  position: relative;
  background:#0f172a;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  padding:14px;
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.lightbox-inner img{
  max-width: min(720px, 80vw);
  max-height: 70vh;
  display:block;
  border-radius:10px;
}
.lightbox-caption{
  margin-top:8px;
  color:#e5e7eb;
  font-weight:700;
  text-align:center;
}
.lightbox-close{
  position:absolute;
  top:8px; right:8px;
  background: rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.24);
  color:#e5e7eb;
  border-radius:8px;
  width:32px; height:32px;
  cursor:pointer;
}