/**
 * Profile Modal Styles
 * Extracted from index.html for drop-in use on multiple pages.
 *
 * Loaded by: index.html, pages/recap/index.html, (future: badge, fund, dabei)
 * Companion JS: public/js/components/profile-modal-mount.js + public/js/events-beta-profile.js
 */

/* ====== PROFILE PANEL ====== */
.panel-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.3); z-index: 200;
}
.panel-overlay.active { display: block; }
.profile-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 100%;
  background: var(--bg); z-index: 201;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
.profile-panel * { max-width: 100%; }
.profile-panel a, .profile-panel .panel-value { word-break: break-word; overflow-wrap: anywhere; }
.profile-panel.active { transform: translateX(0); }

.panel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 28px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-m); flex: 1;
}
.panel-header-btn {
  background: none; border: none; padding: 10px;
  color: var(--text-m); cursor: pointer; transition: color 0.15s;
  display: flex; align-items: center; margin: -10px;
}
.panel-header-btn:hover { color: var(--dark); }
.panel-header-btn svg { width: 18px; height: 18px; }
.panel-header-btn:last-child { font-size: 22px; margin-left: 4px; }
.panel-back { font-size: 18px; margin-right: 4px; }

.panel-pbar { height: 3px; background: var(--border); width: 100%; flex-shrink: 0; }
.panel-pbar-fill { height: 100%; background: var(--mint); transition: width 0.4s; min-width: 0; }
.panel-body { padding: 28px; flex: 1; }
.panel-section { margin-bottom: 16px; }
.panel-section:last-child { margin-bottom: 0; }
.panel-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dark); margin-bottom: 6px;
  opacity: 0.45;
}
.panel-field-label {
  font-size: 10px; font-weight: 400; color: var(--text-m);
  margin-bottom: 2px; letter-spacing: 0.01em;
}

.panel-value {
  font-size: 15px; font-weight: 500; color: var(--dark); line-height: 1.5;
  cursor: pointer; padding: 2px 0;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.panel-value.compact {
  font-size: 13px;
}
.panel-value.body {
  font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--text-s);
}
.panel-value:hover { border-color: var(--border-s); }
.panel-value.empty {
  color: var(--text-m); font-style: italic; font-weight: 400; font-size: 13px;
}
.panel-value.readonly { cursor: default; border-bottom: none; }
.panel-value.readonly:hover { border-color: transparent; }

.panel-input {
  width: 100%; padding: 6px 0; border: none; border-bottom: 1.5px solid var(--mint);
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--dark);
  background: transparent; outline: none;
}
.panel-select {
  width: 100%; padding: 6px 0; border: none; border-bottom: 1.5px solid var(--mint);
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--dark);
  background: transparent; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.panel-select-list { outline: none; }
.panel-select-option {
  padding: 8px 2px; font-size: 14px; font-weight: 500; color: var(--text-s);
  cursor: pointer; border-bottom: 1px solid var(--border); transition: color 0.1s;
}
.panel-select-option:last-child { border-bottom: none; }
.panel-select-option:hover { color: var(--dark); }
.panel-select-option.active { color: var(--mint-text); font-weight: 600; }
.panel-textarea {
  width: 100%; padding: 6px 0; border: none; border-bottom: 1.5px solid var(--mint);
  font-family: inherit; font-size: 13px; color: var(--dark);
  background: transparent; outline: none; resize: vertical; min-height: 60px;
}

.panel-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.panel-tag {
  font-size: 12px; font-weight: 500; color: var(--mint-text, #2e9e6e);
  padding: 4px 8px; min-height: 24px; border-radius: 5px;
  background: rgba(94,217,166,0.1); border: none;
  cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 3px;
}
.panel-tag:hover { background: rgba(94,217,166,0.18); }
.panel-tag-x {
  font-size: 10px; color: var(--mint-text, #2e9e6e); opacity: 0.5; font-weight: 700;
  cursor: pointer; margin-left: 1px;
  background: none; border: none; font-family: inherit;
  padding: 1px;
}
.panel-tag-x:hover { opacity: 1; }
.panel-tag-add {
  font-size: 12px; color: var(--text-m); padding: 4px 8px; min-height: 24px;
  border: 1px dashed var(--border-s); border-radius: 5px;
  cursor: pointer; transition: all 0.15s;
  background: none; font-family: inherit;
}
.panel-tag-add:hover { background: rgba(94,217,166,0.06); border-color: var(--mint); }
.panel-tag-input {
  font-size: 12px; padding: 4px 8px; border: 1px solid var(--mint);
  border-radius: 5px; outline: none; font-family: inherit;
  min-width: 80px; background: transparent;
}
.panel-divider { height: 1px; background: var(--border); margin: 18px 0 6px; }

.skill-autocomplete { position: relative; }
.skill-ac-input {
  width: 100%; padding: 8px 0; border: none; border-bottom: 1.5px solid var(--border-s);
  font-family: inherit; font-size: 13px; color: var(--dark);
  background: transparent; outline: none; transition: border-color 0.15s;
}
.skill-ac-input:focus { border-color: var(--mint); }
.skill-ac-input::placeholder { color: var(--text-m); }
.skill-ac-counter {
  position: absolute; right: 0; top: 9px;
  font-size: 11px; font-weight: 600; color: var(--text-m);
}
.skill-ac-counter.warn { color: #DC2626; }
.skill-ac-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid var(--border-s); border-top: none;
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 10; max-height: 210px; overflow-y: auto;
  role: listbox;
}
.skill-ac-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--dark);
  transition: background 0.1s;
}
.skill-ac-option:hover, .skill-ac-option.active { background: var(--mint-bg); }
.skill-ac-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.skill-ac-hint {
  font-size: 11px; color: var(--text-m); padding: 8px 10px;
}
.skill-selected-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }

.panel-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.panel-check {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; border-radius: 6px; min-height: 32px;
  font-size: 13px; color: var(--text-s); cursor: pointer;
  background: var(--mint-bg, #FAFCFB); border: 1px solid transparent;
  transition: all 0.15s;
}
.panel-check input { display: none; }
.panel-check-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border-s); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.panel-check.checked .panel-check-box {
  background: var(--mint); border-color: var(--mint);
}
.panel-check.checked .panel-check-box::after {
  content: '\2713'; font-size: 10px; color: #fff; font-weight: 700;
}
.panel-check.checked { color: var(--dark); font-weight: 500; background: rgba(94,217,166,0.08); border-color: var(--mint); }

.panel-event-count {
  font-size: 32px; font-weight: 800; color: var(--dark);
  font-family: 'Montserrat', sans-serif; line-height: 1;
}
.panel-event-label {
  font-size: 12px; color: var(--text-m); margin-top: 4px;
}

.panel-progress { padding-top: 20px; border-top: 1px solid var(--border); }
.panel-progress-bar {
  height: 2px; background: var(--border); border-radius: 1px;
  margin-top: 8px; overflow: hidden;
}
.panel-progress-fill {
  height: 100%; background: var(--mint); border-radius: 1px;
  transition: width 0.5s;
}
.panel-progress-text { font-size: 11px; color: var(--text-m); margin-top: 6px; }

.panel-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.panel-toggle-row:last-child { border-bottom: none; }
.panel-toggle-label { font-size: 13px; color: var(--dark); font-weight: 500; }
.panel-toggle-sub { font-size: 10px; color: var(--text-m); margin-top: 3px; line-height: 1.4; }
.panel-toggle {
  position: relative; width: 36px; height: 20px;
  background: var(--border-s); border-radius: 10px;
  cursor: pointer; transition: background 0.2s; flex-shrink: 0;
  border: none; padding: 0;
}
.panel-toggle.on { background: var(--mint); }
.panel-toggle-dot {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  pointer-events: none;
}
.panel-toggle.on .panel-toggle-dot { transform: translateX(16px); }

.panel-badge-section {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.panel-badge-section > div { flex: 1; min-width: 0; }
.panel-badge-icon {
  width: 56px; height: auto; flex-shrink: 0;
  color: var(--text-m); opacity: 0.4;
}

.panel-meta { font-size: 12px; color: var(--text-m); padding: 6px 0; line-height: 1.5; }

.panel-fund-options {
  display: flex; gap: 0; margin-top: 6px;
  border: 1px solid var(--border-s); border-radius: 6px; overflow: hidden;
}
.panel-fund-opt {
  flex: 1; padding: 7px 4px; text-align: center;
  font-size: 11px; font-weight: 500; color: var(--text-s);
  cursor: pointer; transition: all 0.15s;
  border: none; border-right: 1px solid var(--border-s);
  background: none; font-family: inherit;
}
.panel-fund-opt:last-child { border-right: none; }
.panel-fund-opt:hover { background: var(--mint-bg); }
.panel-fund-opt.active {
  background: var(--dark); color: #fff; font-weight: 600;
}
.panel-fund-link {
  display: inline-block; margin-top: 10px;
  font-size: 11px; font-weight: 600; color: var(--mint-text);
  text-decoration: underline; text-underline-offset: 2px;
}
.panel-fund-link:hover { text-decoration-thickness: 2px; }

.panel-danger {
  display: block; width: auto; padding: 0;
  margin-top: 32px; background: none; border: none;
  font-family: inherit; font-size: 11px; font-weight: 500;
  color: var(--text-m); cursor: pointer; transition: color 0.15s;
}
.panel-danger:hover { color: #DC2626; }

/* Crew Pipeline */
.crew-banner{padding:10px 0 12px;border-bottom:1px solid var(--border);margin-bottom:16px;position:relative}
.crew-banner-close{position:absolute;top:8px;right:0;background:none;border:none;font-size:18px;color:var(--text-m);cursor:pointer;padding:4px;line-height:1;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.crew-banner-close:hover{background:rgba(0,0,0,0.05)}
.crew-banner-text{font-size:12px;color:var(--text-s);padding-right:24px}
.crew-banner-cta{font-size:11px;color:var(--mint-text);font-weight:600;cursor:pointer;margin-top:6px;display:inline-block;background:none;border:none;padding:0;font-family:inherit}
.crew-merged{display:flex;align-items:baseline;justify-content:space-between;padding:8px 0 12px}
.crew-count{font-size:24px;font-weight:800;font-family:'Montserrat',sans-serif;color:var(--dark);line-height:1}
.crew-count-label{font-size:12px;color:var(--text-m);margin-left:6px}
.crew-level{display:flex;align-items:center;gap:5px}
.crew-dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}
.crew-level-name{font-size:12px;font-weight:500;color:var(--text-s)}
.crew-toggle{font-size:10px;color:var(--text-m);cursor:pointer;background:none;border:none;padding:0;font-family:inherit;margin-top:2px}
.crew-checklist{padding:4px 0 8px}
.crew-item{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px}
.crew-item-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.crew-item-dot.done{background:var(--mint)}
.crew-item-dot.done::after{content:'\2713';font-size:9px;color:#fff;font-weight:700}
.crew-item-dot.todo{border:2px solid #bbb}
.crew-item.done .crew-item-text{color:var(--text-m)}
.crew-item.todo .crew-item-text{color:var(--text-s)}
.crew-next{font-size:11px;color:var(--text-m);margin-top:6px}
.crew-pending{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:4px}
.crew-pending-dot{width:5px;height:5px;border-radius:50%;background:var(--mint);animation:crewPulse 2.5s ease-in-out infinite}
.crew-pending-text{font-size:11px;color:var(--text-m)}
@keyframes crewPulse{0%,100%{opacity:1}50%{opacity:.3}}
.crew-event-form .panel-label{margin-top:12px}
.crew-event-form .panel-label:first-child{margin-top:0}
.crew-event-form textarea{width:100%;padding:8px 6px;border:none;border-bottom:1px solid var(--border);font-family:inherit;font-size:13px;resize:vertical;min-height:60px;outline:none}
.crew-event-form textarea:focus{border-color:var(--mint)}
.crew-event-form select{width:100%;padding:6px 0;border:none;border-bottom:1px solid var(--border);font-family:inherit;font-size:13px;background:transparent;outline:none}
.crew-event-form .crew-radio{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.crew-event-form .crew-radio label{font-size:12px;color:var(--text-s);display:flex;align-items:center;gap:6px;cursor:pointer}
.crew-event-form .crew-confirm{font-size:11px;color:var(--text-s);display:flex;align-items:flex-start;gap:6px;margin-top:16px;line-height:1.4}
.crew-event-form .crew-confirm input{margin-top:2px;flex-shrink:0}
.crew-submit{margin-top:12px;padding:8px 16px;background:var(--mint);color:#000;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;width:100%;transition:background 0.2s}
.crew-submit:hover{background:var(--mint-hover)}
.crew-submit:disabled{opacity:0.4;cursor:not-allowed}
.crew-form-msg{font-size:11px;margin-top:8px;text-align:center}

@media (max-width: 640px) {
  .profile-panel { width: 100%; }
}