/* ============================================================
   SSB Teilnehmerbereich – Frontend Styles v0.1.0 (Phase 1)
   ============================================================ */
:root {
  --ssb-blue:       #0D5CA8;
  --ssb-blue-dark:  #093E73;
  --ssb-blue-light: #DCEAF7;
  --ssb-gold:       #C9962C;
  --ssb-green:      #1A7A2E;
  --ssb-green-bg:   #D5F5E3;
  --ssb-red:        #A93226;
  --ssb-red-bg:     #FADBD8;
  --ssb-grey:       #F4F6F7;
  --ssb-border:     #D5DBDB;
  --ssb-text:       #1C2833;
  --ssb-muted:      #717D7E;
  --ssb-radius:     8px;
  --ssb-shadow:     0 2px 8px rgba(0,0,0,.10);
}

.ssb-tb-app { font-family: 'Poppins', Arial, sans-serif; font-size: 15px; color: var(--ssb-text); max-width: 960px; }
.ssb-tb-loading { text-align:center; padding:3rem; color:var(--ssb-muted); }
.ssb-tb-spinner { display:inline-block; width:36px; height:36px; border:4px solid var(--ssb-blue-light); border-top-color:var(--ssb-blue); border-radius:50%; animation:ssb-tb-spin .8s linear infinite; margin-bottom:.5rem; }
@keyframes ssb-tb-spin { to { transform:rotate(360deg); } }

/* Auth */
.ssb-tb-auth { background:#fff; border:1px solid var(--ssb-border); border-radius:var(--ssb-radius); padding:2.5rem; max-width:420px; margin:0 auto; box-shadow:var(--ssb-shadow); }
.ssb-tb-auth h2 { color:var(--ssb-blue-dark); margin:0 0 .3rem; font-size:1.3rem; }
.ssb-tb-turnstile-widget { margin-top:1rem; }
.ssb-tb-auth .ssb-tb-sub { color:var(--ssb-muted); font-size:.88rem; margin:0 0 1.3rem; }
.ssb-tb-auth label { display:block; font-weight:bold; margin:.8rem 0 .3rem; color:var(--ssb-blue-dark); font-size:.9rem; }
.ssb-tb-auth input[type=email], .ssb-tb-auth input[type=password], .ssb-tb-auth input[type=text], .ssb-tb-auth textarea { width:100%; padding:.6rem .8rem; border:1px solid var(--ssb-border); border-radius:6px; font-size:1rem; box-sizing:border-box; font-family:inherit; resize:vertical; }
.ssb-tb-auth input:focus, .ssb-tb-auth textarea:focus { border-color:var(--ssb-blue); outline:none; box-shadow:0 0 0 2px var(--ssb-blue-light); }

.ssb-tb-tabs { display:flex; border-bottom:2px solid var(--ssb-border); margin:1rem 0 1.2rem; }
.ssb-tb-tab { padding:.5rem 1rem; cursor:pointer; font-weight:bold; color:var(--ssb-muted); border-bottom:3px solid transparent; margin-bottom:-2px; font-size:.85rem; }
.ssb-tb-tab.active, .ssb-tb-tab:hover { color:var(--ssb-blue); border-bottom-color:var(--ssb-blue); }

.ssb-tb-btn { display:inline-block; padding:.6rem 1.2rem; border-radius:6px; font-size:.92rem; font-weight:bold; cursor:pointer; border:none; margin-top:1.1rem; transition:opacity .15s; }
.ssb-tb-btn:hover { opacity:.85; }
.ssb-tb-btn-primary { background:var(--ssb-blue); color:#fff; width:100%; }
.ssb-tb-btn-secondary { background:#fff; color:var(--ssb-blue); border:1px solid var(--ssb-blue); width:100%; }

.ssb-tb-error { color:var(--ssb-red); background:var(--ssb-red-bg); border-radius:5px; padding:.5rem .8rem; font-size:.88rem; margin-top:.8rem; display:none; }
.ssb-tb-success { color:var(--ssb-green); background:var(--ssb-green-bg); border-radius:5px; padding:.5rem .8rem; font-size:.88rem; margin-top:.8rem; display:none; }

/* Dashboard */
.ssb-tb-dash-header { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg, var(--ssb-blue-dark), var(--ssb-blue)); color:#fff; padding:1rem 1.5rem; border-radius:var(--ssb-radius); margin-bottom:1.5rem; font-weight:bold; }
.ssb-tb-header-actions { display:flex; align-items:center; gap:.6rem; }
.ssb-tb-dash-header .ssb-tb-logout, .ssb-tb-dash-header .ssb-tb-account-btn { background:none; border:1px solid rgba(255,255,255,.5); color:#fff; border-radius:20px; padding:.3rem .9rem; font-size:.82rem; cursor:pointer; font-weight:bold; }
.ssb-tb-dash-header .ssb-tb-logout:hover, .ssb-tb-dash-header .ssb-tb-account-btn:hover { background:rgba(255,255,255,.15); }
.ssb-tb-dash-header .ssb-tb-header-link { background:none; border:none; color:#fff; font-size:.82rem; text-decoration:underline; opacity:.9; cursor:pointer; padding:0; }
.ssb-tb-dash-header .ssb-tb-header-link:hover { opacity:1; }

.ssb-tb-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.ssb-tb-tile { display:block; background:#fff; border:1px solid var(--ssb-border); border-radius:var(--ssb-radius); padding:1.2rem; text-decoration:none; color:var(--ssb-text); box-shadow:var(--ssb-shadow); cursor:pointer; transition:transform .1s; }
.ssb-tb-tile:hover { transform:translateY(-2px); }
.ssb-tb-tile-icon { width:40px; height:40px; margin-bottom:.6rem; }
.ssb-tb-tile-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.ssb-tb-tile-title { font-weight:bold; font-size:1.05rem; color:var(--ssb-blue-dark); }
.ssb-tb-tile-sub { color:var(--ssb-muted); font-size:.85rem; margin-top:.15rem; }
.ssb-tb-tile-status { margin-top:.7rem; font-size:.8rem; font-weight:bold; display:inline-block; padding:.2rem .6rem; border-radius:20px; }
.ssb-tb-tile-note { margin-top:.5rem; font-size:.8rem; color:var(--ssb-muted); }

.ssb-tb-tile-progress { margin-top:.7rem; }
.ssb-tb-tile-progress-bar { width:100%; height:6px; background:var(--ssb-grey); border-radius:4px; overflow:hidden; }
.ssb-tb-tile-progress-fill { height:100%; background:var(--ssb-blue); border-radius:4px; transition:width .3s; }
.ssb-tb-tile-progress-label { font-size:.74rem; color:var(--ssb-muted); margin-top:.3rem; }
.ssb-tb-tile-deadline { font-size:.74rem; color:var(--ssb-gold); margin-top:.1rem; font-weight:bold; }
.ssb-tb-tile-rejected { font-size:.74rem; color:var(--ssb-red); margin-top:.2rem; font-weight:bold; }

.ssb-tb-tile-active .ssb-tb-tile-status { background:var(--ssb-green-bg); color:var(--ssb-green); }
.ssb-tb-tile-pending { opacity:.75; cursor:default; }
.ssb-tb-tile-pending .ssb-tb-tile-status { background:var(--ssb-grey); color:var(--ssb-muted); }
.ssb-tb-tile-pending .ssb-tb-tile-icon img { filter:grayscale(70%); }
.ssb-tb-tile-rejected { opacity:.75; cursor:default; }
.ssb-tb-tile-rejected .ssb-tb-tile-status { background:var(--ssb-red-bg); color:var(--ssb-red); }
.ssb-tb-tile-rejected .ssb-tb-tile-icon img { filter:grayscale(90%); }
.ssb-tb-tile-reglement .ssb-tb-tile-status { background:#FDEBD0; color:var(--ssb-gold); }

.ssb-tb-tile-not_registered { cursor:default; border-style:dashed; background:var(--ssb-grey); }
.ssb-tb-tile-not_registered .ssb-tb-tile-icon img { filter:grayscale(85%); opacity:.6; }
.ssb-tb-tile-not_registered .ssb-tb-tile-status { background:transparent; color:var(--ssb-muted); padding:0; }
.ssb-tb-tile-signup-btn { display:inline-block; margin-top:.7rem; background:var(--ssb-blue); color:#fff; text-decoration:none; font-size:.82rem; font-weight:bold; padding:.4rem .9rem; border-radius:20px; }
.ssb-tb-tile-signup-btn:hover { opacity:.85; }

/* Modal (AGB / Reglement) */
.ssb-tb-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:9999; padding:1rem; }
.ssb-tb-modal { background:#fff; border-radius:var(--ssb-radius); padding:2rem; max-width:520px; width:100%; max-height:80vh; overflow-y:auto; box-shadow:var(--ssb-shadow); }
.ssb-tb-modal h3 { margin:0 0 .8rem; color:var(--ssb-blue-dark); }
.ssb-tb-modal label { display:block; font-weight:bold; margin:.8rem 0 .3rem; color:var(--ssb-blue-dark); font-size:.9rem; }
.ssb-tb-modal input[type=email], .ssb-tb-modal input[type=password], .ssb-tb-modal input[type=text] { width:100%; padding:.6rem .8rem; border:1px solid var(--ssb-border); border-radius:6px; font-size:1rem; box-sizing:border-box; }
.ssb-tb-modal input:focus { border-color:var(--ssb-blue); outline:none; box-shadow:0 0 0 2px var(--ssb-blue-light); }
.ssb-tb-modal input:disabled { background:var(--ssb-grey); color:var(--ssb-muted); }
.ssb-tb-modal-version { color:var(--ssb-muted); font-size:.85rem; margin:-.5rem 0 .8rem; }
.ssb-tb-modal-text { font-size:.92rem; line-height:1.5; margin-bottom:1rem; }
.ssb-tb-agb-links { list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ssb-tb-agb-links a { display:block; background:var(--ssb-blue-light); color:var(--ssb-blue-dark); text-decoration:none; font-weight:bold; font-size:.88rem; padding:.5rem .8rem; border-radius:6px; }
.ssb-tb-agb-links a:hover { background:var(--ssb-blue); color:#fff; }
.ssb-tb-checkline { display:flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:normal !important; margin:1rem 0 0 !important; }
.ssb-tb-checkline input { width:auto !important; }
.ssb-tb-btn:disabled { opacity:.4; cursor:not-allowed; }
.ssb-tb-modal .ssb-tb-btn-primary:disabled { opacity:.5; cursor:not-allowed; }

@media (max-width: 820px) {
  .ssb-tb-tiles { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ssb-tb-auth { padding:1.5rem; }
  .ssb-tb-tiles { grid-template-columns:1fr; }
}

/* Show-Bereich: Dokumente */
.ssb-tb-doc-cat { color:var(--ssb-blue-dark); font-size:1rem; margin:1.5rem 0 .6rem; }
.ssb-tb-doc-list { display:flex; flex-direction:column; gap:.6rem; }
.ssb-tb-doc-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fff; border:1px solid var(--ssb-border); border-radius:8px; padding:.8rem 1rem; text-decoration:none; color:var(--ssb-text); box-shadow:var(--ssb-shadow); }
.ssb-tb-doc-item:hover { border-color:var(--ssb-blue); }
.ssb-tb-doc-title { font-weight:bold; color:var(--ssb-blue-dark); }
.ssb-tb-doc-desc { font-size:.82rem; color:var(--ssb-muted); margin-top:.15rem; }
.ssb-tb-doc-action { font-size:.8rem; font-weight:bold; color:var(--ssb-blue); white-space:nowrap; }

.ssb-tb-tt-note { color:var(--ssb-muted); font-size:.85rem; margin-bottom:.8rem; }
.ssb-tb-tt-legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--ssb-muted); margin-bottom:1rem; }
.ssb-tb-tt-legend span { display:flex; align-items:center; gap:.35rem; }
.ssb-tb-tt-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.ssb-tb-tt-dot-free { background:var(--ssb-green); }
.ssb-tb-tt-dot-mine { background:var(--ssb-blue); }
.ssb-tb-tt-dot-taken { background:var(--ssb-red); }
.ssb-tb-tt-dot-blocked { background:var(--ssb-muted); }
.ssb-tb-tt-gate { background:#FDEBD0; color:#8a5a00; border-radius:8px; padding:.8rem 1rem; font-size:.88rem; margin-bottom:1rem; }

.ssb-tb-tt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:.8rem; margin-bottom:1.5rem; }
.ssb-tb-tt-card { background:#fff; border:1px solid var(--ssb-border); border-radius:8px; padding:.9rem .8rem; text-align:center; box-shadow:var(--ssb-shadow); }
.ssb-tb-tt-time { font-weight:bold; font-size:1.1rem; color:var(--ssb-blue-dark); }
.ssb-tb-tt-label { font-size:.78rem; color:var(--ssb-muted); margin-top:.1rem; }
.ssb-tb-tt-status { font-size:.78rem; font-weight:bold; margin:.5rem 0; color:var(--ssb-green); }
.ssb-tb-tt-card .ssb-tb-btn { margin-top:0; padding:.4rem .8rem; font-size:.8rem; }
.ssb-tb-tt-mine-pending { border-color:var(--ssb-blue); background:var(--ssb-blue-light); }
.ssb-tb-tt-mine-pending .ssb-tb-tt-status { color:var(--ssb-blue); }
.ssb-tb-tt-mine-confirmed { border-color:var(--ssb-green); background:var(--ssb-green-bg); }
.ssb-tb-tt-mine-confirmed .ssb-tb-tt-status { color:var(--ssb-green); }
.ssb-tb-tt-taken { border-color:var(--ssb-red); background:var(--ssb-red-bg); }
.ssb-tb-tt-taken .ssb-tb-tt-status { color:var(--ssb-red); }
.ssb-tb-tt-blocked { opacity:.6; }
.ssb-tb-tt-blocked .ssb-tb-tt-status { color:var(--ssb-muted); }

/* Einreichungen */
.ssb-tb-sub-list { display:flex; flex-direction:column; gap:.9rem; }
.ssb-tb-sub-field { background:#fff; border:1px solid var(--ssb-border); border-radius:8px; padding:1rem; box-shadow:var(--ssb-shadow); }
.ssb-tb-sub-field-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.ssb-tb-sub-field-body { margin-top:.6rem; }
.ssb-tb-sub-field-body input[type=text], .ssb-tb-sub-field-body input[type=url], .ssb-tb-sub-field-body textarea { width:100%; padding:.5rem .7rem; border:1px solid var(--ssb-border); border-radius:6px; font-size:.92rem; box-sizing:border-box; font-family:inherit; }
.ssb-tb-sub-field-body .ssb-tb-btn { margin-top:.6rem; padding:.4rem .9rem; font-size:.82rem; }
.ssb-tb-sub-field-body input[type=file] { display:block; margin:.4rem 0; font-size:.85rem; }
.ssb-tb-badge-submitted, .ssb-tb-badge-open, .ssb-tb-badge-optional, .ssb-tb-badge-approved, .ssb-tb-badge-rejected { display:inline-block; font-size:.72rem; padding:.1rem .55rem; border-radius:10px; font-weight:bold; }
.ssb-tb-badge-submitted { background:#FDEBD0; color:#8a5a00; }
.ssb-tb-badge-approved { background:var(--ssb-green-bg); color:var(--ssb-green); }
.ssb-tb-badge-rejected { background:var(--ssb-red-bg); color:var(--ssb-red); }
.ssb-tb-badge-open { background:var(--ssb-red-bg); color:var(--ssb-red); }
.ssb-tb-badge-optional { background:var(--ssb-grey); color:var(--ssb-muted); }
.ssb-tb-sub-rejectnote { background:var(--ssb-red-bg); color:var(--ssb-red); border-radius:6px; padding:.5rem .8rem; font-size:.85rem; margin-top:.4rem; }

/* Q&A */
.ssb-tb-qna-ask { background:#fff; border:1px solid var(--ssb-border); border-radius:8px; padding:1rem; box-shadow:var(--ssb-shadow); }
.ssb-tb-qna-ask select, .ssb-tb-qna-ask textarea { width:100%; padding:.5rem .7rem; border:1px solid var(--ssb-border); border-radius:6px; font-size:.92rem; box-sizing:border-box; font-family:inherit; }
.ssb-tb-qna-list { display:flex; flex-direction:column; gap:.8rem; }
.ssb-tb-qna-item { background:#fff; border:1px solid var(--ssb-border); border-radius:8px; padding:.9rem 1rem; box-shadow:var(--ssb-shadow); }
.ssb-tb-qna-important { border-color:var(--ssb-gold); background:#FFFBF0; }
.ssb-tb-qna-q { font-size:.92rem; margin-bottom:.4rem; }
.ssb-tb-qna-a { font-size:.9rem; color:var(--ssb-text); background:var(--ssb-blue-light); border-radius:6px; padding:.6rem .8rem; }

/* Duftliste (oils) */
.ssb-tb-oils-rows { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.ssb-tb-oils-row { display:flex; gap:.5rem; }
.ssb-tb-oils-row select { flex:0 0 110px; padding:.5rem; border:1px solid var(--ssb-border); border-radius:6px; }
.ssb-tb-oils-row input { flex:1; padding:.5rem .7rem; border:1px solid var(--ssb-border); border-radius:6px; box-sizing:border-box; }

/* Sonderwünsche (special_requests) */
.ssb-tb-special-rows { display:flex; flex-direction:column; gap:.8rem; margin-bottom:.6rem; }
.ssb-tb-special-row { border:1px solid var(--ssb-border); border-radius:8px; padding:.8rem; }
.ssb-tb-special-row label { display:block; font-weight:bold; margin:.5rem 0 .25rem; color:var(--ssb-blue-dark); font-size:.85rem; }
.ssb-tb-special-row label:first-child { margin-top:0; }
.ssb-tb-special-row textarea { width:100%; padding:.5rem .7rem; border:1px solid var(--ssb-border); border-radius:6px; box-sizing:border-box; font-family:inherit; }
.ssb-tb-special-row input[type=file] { display:block; margin:.3rem 0; }
.ssb-tb-special-remove { margin-top:.5rem; padding:.3rem .8rem; font-size:.78rem; }