/* ============================================================
   Enshrouded Skill-Planer – Styles (ausgelagert 09.10.2026)
   Alles unter .esp gekapselt, Farben/Schrift kommen aus main.css,
   damit der Planer aussieht wie der Rest von banrado.
   ============================================================ */
.esp{
  --text-dim:color-mix(in srgb,var(--text) 65%,transparent);
  --border-hover:color-mix(in srgb,var(--accent) 35%,transparent);
  --esp-error:#e07060;
  --blue:#378ADD;
  --radius-sm:6px;
  font-size:14px;line-height:1.6;
}

/* Tabler Icons 2.47.0 (MIT, siehe icons/LICENSE.txt) als CSS-Maske:
   Farbe kommt aus currentColor, keine Webfont/CDN noetig */
.esp .ti{display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:-.125em;flex-shrink:0}
.esp .ti-arrows-shuffle{--i:url(icons/arrows-shuffle.svg)}
.esp .ti-bow-arrow{--i:url(icons/bow-arrow.svg)}
.esp .ti-cloud-upload{--i:url(icons/cloud-upload.svg)}
.esp .ti-copy{--i:url(icons/copy.svg)}
.esp .ti-download{--i:url(icons/download.svg)}
.esp .ti-eye-off{--i:url(icons/eye-off.svg)}
.esp .ti-flame{--i:url(icons/flame.svg)}
.esp .ti-heart{--i:url(icons/heart.svg)}
.esp .ti-heart-plus{--i:url(icons/heart-plus.svg)}
.esp .ti-home{--i:url(icons/home.svg)}
.esp .ti-layout-grid{--i:url(icons/layout-grid.svg)}
.esp .ti-leaf{--i:url(icons/leaf.svg)}
.esp .ti-list{--i:url(icons/list.svg)}
.esp .ti-loader-2{--i:url(icons/loader-2.svg)}
.esp .ti-military-award{--i:url(icons/military-award.svg)}
.esp .ti-refresh{--i:url(icons/refresh.svg)}
.esp .ti-run{--i:url(icons/run.svg)}
.esp .ti-share{--i:url(icons/share.svg)}
.esp .ti-shield{--i:url(icons/shield.svg)}
.esp .ti-sparkles{--i:url(icons/sparkles.svg)}
.esp .ti-star{--i:url(icons/star.svg)}
.esp .ti-sword{--i:url(icons/sword.svg)}
.esp .ti-template{--i:url(icons/template.svg)}
.esp .ti-users{--i:url(icons/users.svg)}
.esp .ti-wand{--i:url(icons/wand.svg)}

/* Feste Farben der Vorlagen-Icons (frueher style-Attribute) */
.esp .build-preset .ti-sword{color:#D85A30}
.esp .build-preset .ti-wand,.esp .build-preset .ti-eye-off{color:#7F77DD}
.esp .build-preset .ti-bow-arrow{color:#1D9E75}
.esp .build-preset .ti-heart-plus{color:#E24B4A}
.esp .build-preset .ti-arrows-shuffle{color:#BA7517}

/* Ehemalige Inline-Styles aus dem HTML */
.esp-body{padding-top:20px}
.esp-actions{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.esp-spacer{flex:1}
.esp-loaded{font-size:12px;color:var(--text);display:none;gap:4px}
.esp-loaded span{color:var(--heading);font-weight:500}
.esp #tab-vorlagen,.esp #tab-community{display:none}
.esp .modal h3 .ti{color:var(--accent)}
.esp-modal-actions{display:flex;gap:8px;margin-top:4px}
.esp .share-result p{font-size:12px;color:var(--text);margin-bottom:6px}
.esp-share-row{display:flex;gap:8px;align-items:center}
.esp-share-row .btn{flex-shrink:0}

/* Kopfbereich */
.esp .hero{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px 20px;}
.esp .hero h1{font-family:var(--font);font-size:clamp(24px,4vw,36px);font-weight:700;margin-bottom:6px;}
.esp .hero h1 span{color:var(--accent);}
.esp .hero p{color:var(--text);font-size:14px;max-width:600px;}

/* Punkte-Dashboard */
.esp .pts-dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:20px 0;}
.esp .pts-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-align:center;}
.esp .pts-card .lbl{font-size:11px;color:var(--text);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}
.esp .pts-card .val{font-family:var(--font);font-size:28px;font-weight:700;color:var(--heading);}
.esp .pts-card.ok .val{color:var(--green);}
.esp .pts-card.warn .val{color:#f59e0b;}
.esp .pts-card.danger .val{color:var(--red);}

/* Slider-Controls */
.esp .controls{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;}
.esp .controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.esp .ctrl-group label{font-size:12px;color:var(--text);display:flex;justify-content:space-between;margin-bottom:6px;}
.esp .ctrl-group label span{font-weight:500;color:var(--heading);}
.esp input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;}

/* Progress */
.esp .progress-wrap{margin-top:12px;}
.esp .progress-track{background:var(--surface2);border-radius:4px;height:6px;overflow:hidden;}
.esp .progress-fill{height:100%;border-radius:4px;background:var(--green);transition:width 0.3s,background 0.3s;}
.esp .progress-fill.mid{background:#f59e0b;}
.esp .progress-fill.full{background:var(--red);}
.esp .progress-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-top:4px;}

/* Tabs */
.esp .tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.esp .tab{padding:7px 16px;border-radius:var(--radius-sm);border:0.5px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:13px;font-family:var(--font);transition:all 0.15s;}
.esp .tab:hover{border-color:var(--border-hover);color:var(--heading);}
.esp .tab.active{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--heading);font-weight:500;}

/* Archetypen Grid */
.esp .arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.esp .arch-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px;transition:border-color 0.15s;}
.esp .arch-card:hover{border-color:var(--border-hover);}
.esp .arch-card.has-skills{border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
.esp .arch-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.esp .arch-icon{width:36px;height:36px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.esp .arch-name{font-family:var(--font);font-size:16px;font-weight:700;}
.esp .arch-type{font-size:11px;color:var(--text);}
.esp .arch-pts{font-size:11px;color:var(--text-dim);margin-bottom:8px;}

/* Skills */
.esp .skill-list{display:flex;flex-direction:column;gap:4px;}
.esp .skill-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--radius-sm);border:0.5px solid var(--border);background:var(--surface2);cursor:pointer;transition:all 0.12s;}
.esp .skill-row:hover{border-color:var(--border-hover);}
.esp .skill-row.active{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.esp .skill-check{width:16px;height:16px;border-radius:3px;border:1px solid var(--border-hover);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;}
.esp .skill-row.active .skill-check{background:var(--accent);border-color:var(--accent);color:#fff;}
.esp .skill-name{flex:1;font-size:12px;color:var(--heading);}
.esp .skill-row.active .skill-name{color:var(--heading);}
.esp .skill-cost{font-size:11px;color:var(--text-dim);white-space:nowrap;}
.esp .skill-row.active .skill-cost{color:var(--heading);}
.esp .skill-desc{font-size:11px;color:var(--text);margin-top:2px;display:none;}
.esp .skill-row.active .skill-desc{display:block;}

/* Rank-Counter für Skills mit max_rank > 1 */
.esp .rank-btns{display:flex;align-items:center;gap:3px;}
.esp .rank-btn{width:18px;height:18px;border-radius:3px;border:0.5px solid var(--border-hover);background:transparent;color:var(--text);cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;}
.esp .rank-btn:hover{background:var(--surface);color:var(--heading);}
.esp .rank-val{font-size:11px;min-width:16px;text-align:center;color:var(--text);}

/* Build Vorlagen */
.esp .build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.esp .build-preset{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:all 0.15s;text-align:left;}
.esp .build-preset:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--surface2);}
.esp .build-preset .bp-name{font-family:var(--font);font-size:16px;font-weight:700;margin-bottom:4px;}
.esp .build-preset .bp-desc{font-size:12px;color:var(--text);}

/* Community Builds */
.esp .community-list{display:flex;flex-direction:column;gap:10px;}
.esp .community-build{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.esp .cb-info{flex:1;min-width:200px;}
.esp .cb-name{font-family:var(--font);font-size:16px;font-weight:700;margin-bottom:2px;}
.esp .cb-meta{font-size:11px;color:var(--text);}
.esp .cb-actions{display:flex;gap:8px;}
.esp .btn{display:inline-flex;align-items:center;gap:6px;font-weight:500;line-height:1.4;padding:7px 14px;border-radius:var(--radius-sm);border:0.5px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:13px;font-family:var(--font);transition:all 0.15s;}
.esp .btn:hover{border-color:var(--border-hover);color:var(--heading);}
.esp .btn.primary{border-color:var(--accent);color:var(--accent);}
.esp .btn.primary:hover{background:var(--accent);color:#fff;}
.esp .btn.like{gap:5px;}
.esp .btn.like.liked{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent);}

/* Build speichern Modal */
.esp .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:100;display:none;align-items:center;justify-content:center;}
.esp .modal-backdrop.open{display:flex;}
.esp .modal{background:var(--surface);border:0.5px solid var(--border-hover);border-radius:var(--radius);padding:24px;width:100%;max-width:480px;margin:16px;}
.esp .modal h3{font-family:var(--font);font-size:20px;font-weight:700;margin-bottom:16px;}
.esp .form-group{margin-bottom:12px;}
.esp .form-group label{font-size:12px;color:var(--text);display:block;margin-bottom:5px;}
.esp .form-group input,.esp .form-group textarea,.esp .form-group select{
  width:100%;background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius-sm);
  color:var(--heading);padding:8px 10px;font-size:13px;font-family:var(--font);
}
.esp .form-group textarea{resize:vertical;min-height:70px;}
.esp .form-group input:focus,.esp .form-group textarea:focus,.esp .form-group select:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 50%,transparent);}
.esp .share-result{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-top:12px;display:none;}
.esp .share-url{font-size:12px;font-family:monospace;color:var(--text);word-break:break-all;}

/* Loading */
.esp .loading{text-align:center;padding:40px;color:var(--text);}
.esp .loading .ti{font-size:32px;display:block;margin:0 auto 8px;animation:esp-spin 1s linear infinite;}
@keyframes esp-spin{to{transform:rotate(360deg);}}

/* Responsive */
@media(max-width:600px){
  .esp .arch-grid{grid-template-columns:1fr;}
  .esp .pts-dashboard{grid-template-columns:repeat(2,1fr);}
}

/* Ehemalige Inline-Styles aus planner.js (09.10.2026) */
.esp .skill-main{flex:1}
.esp .esp-msg{color:var(--text);padding:20px}
.esp .esp-msg-error{color:var(--esp-error)}
.esp .cb-desc{font-size:12px;color:var(--text);margin-top:4px}