/* ═══════════════════════════════════════════════════════════════════════════
   Geocaching Toolkit – Public Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─────────────────────────────────────────────── */
.gct-theme-dark {
  --gct-bg:         #1a1f2e;
  --gct-bg2:        #242938;
  --gct-bg3:        #2f3547;
  --gct-border:     #3a4257;
  --gct-text:       #e8eaf0;
  --gct-text2:      #9ba5b4;
  --gct-primary:    #52b788;
  --gct-primary-d:  #2d6a4f;
  --gct-accent:     #40916c;
  --gct-danger:     #e05252;
  --gct-warn:       #e0a050;
  --gct-success:    #52c87b;
  --gct-radius:     10px;
  --gct-shadow:     0 4px 20px rgba(0,0,0,.4);
  --gct-font:       'Segoe UI', system-ui, sans-serif;
}

.gct-theme-light {
  --gct-bg:         #f4f7f4;
  --gct-bg2:        #ffffff;
  --gct-bg3:        #eaf3ec;
  --gct-border:     #c8ddc8;
  --gct-text:       #1a2e1a;
  --gct-text2:      #4a6a4a;
  --gct-primary:    #2d6a4f;
  --gct-primary-d:  #1b4332;
  --gct-accent:     #40916c;
  --gct-danger:     #c0392b;
  --gct-warn:       #d97f28;
  --gct-success:    #27ae60;
  --gct-radius:     10px;
  --gct-shadow:     0 2px 12px rgba(0,0,0,.12);
  --gct-font:       'Segoe UI', system-ui, sans-serif;
}

/* ─── Wrapper ────────────────────────────────────────────────────────────── */
.gct-wrap {
  font-family: var(--gct-font);
  color: var(--gct-text);
  background: var(--gct-bg);
  border-radius: var(--gct-radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
  box-shadow: var(--gct-shadow);
}

/* ─── Card ───────────────────────────────────────────────────────────────── */
.gct-card {
  background: var(--gct-bg2);
  border: 1px solid var(--gct-border);
  border-radius: var(--gct-radius);
  padding: 1.5rem;
}

.gct-card-title {
  margin: 0 0 1.2rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gct-text);
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 2px solid var(--gct-primary);
  padding-bottom: .6rem;
}

.gct-icon { font-size: 1.3em; }

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.gct-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--gct-border);
  padding-bottom: .5rem;
}

.gct-tab-btn {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  color: var(--gct-text2);
  padding: .4rem .9rem;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  transition: all .2s;
}

.gct-tab-btn:hover,
.gct-tab-btn.active {
  background: var(--gct-primary);
  color: #fff;
  border-color: var(--gct-primary);
}

.gct-tab-content { display: none; }
.gct-tab-content.active { display: block; }

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.gct-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .9rem;
  margin-bottom: 1rem;
}

.gct-form-group { display: flex; flex-direction: column; gap: .35rem; }

.gct-form-group label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gct-text2);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gct-form-group input,
.gct-form-group select,
.gct-form-group textarea,
.gct-search-bar input,
.gct-filters input,
.gct-filters select {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 6px;
  color: var(--gct-text);
  font-family: var(--gct-font);
  font-size: .9rem;
  padding: .55rem .8rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}

.gct-form-group input:focus,
.gct-form-group select:focus,
.gct-form-group textarea:focus,
.gct-search-bar input:focus {
  outline: none;
  border-color: var(--gct-primary);
  box-shadow: 0 0 0 3px rgba(82,183,136,.2);
}

.gct-textarea {
  resize: vertical;
  min-height: 90px;
  width: 100%;
  box-sizing: border-box;
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 6px;
  color: var(--gct-text);
  font-family: 'Courier New', monospace;
  font-size: .9rem;
  padding: .55rem .8rem;
}

/* ─── Search Bar ─────────────────────────────────────────────────────────── */
.gct-search-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: .8rem;
  flex-wrap: wrap;
}

.gct-search-bar input { flex: 1; min-width: 200px; }

.gct-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.gct-filters select,
.gct-filters input { flex: 1; min-width: 120px; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.gct-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  font-family: var(--gct-font);
  transition: all .2s;
  text-decoration: none;
  white-space: nowrap;
}

.gct-btn-primary {
  background: var(--gct-primary);
  color: #fff;
}
.gct-btn-primary:hover { background: var(--gct-primary-d); transform: translateY(-1px); }

.gct-btn-secondary {
  background: var(--gct-bg3);
  color: var(--gct-primary);
  border: 1px solid var(--gct-primary);
}
.gct-btn-secondary:hover { background: var(--gct-primary); color: #fff; }

.gct-btn-ghost {
  background: transparent;
  color: var(--gct-text2);
  border: 1px solid var(--gct-border);
}
.gct-btn-ghost:hover { border-color: var(--gct-primary); color: var(--gct-primary); }

.gct-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .8rem 0;
}

/* ─── Result Box ─────────────────────────────────────────────────────────── */
.gct-result-box {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 8px;
  padding: 1rem;
  margin-top: .8rem;
  font-family: 'Courier New', monospace;
  font-size: .9rem;
  word-break: break-all;
  position: relative;
  min-height: 2.5rem;
}

.gct-result-box:empty { display: none; }

.gct-copy-float {
  position: absolute;
  top: .4rem;
  right: .4rem;
  background: var(--gct-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: .25rem .6rem;
  font-size: .75rem;
  cursor: pointer;
}

/* ─── Hint ───────────────────────────────────────────────────────────────── */
.gct-hint {
  font-size: .82rem;
  color: var(--gct-text2);
  margin: .25rem 0 .6rem;
}

/* ─── Results List ───────────────────────────────────────────────────────── */
.gct-results-list { margin-top: .8rem; }

.gct-cache-item {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: .6rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color .2s;
}

.gct-cache-item:hover { border-color: var(--gct-primary); }

.gct-cache-type-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.gct-cache-info { flex: 1; }
.gct-cache-name { font-weight: 700; font-size: 1rem; color: var(--gct-text); }
.gct-cache-meta { font-size: .8rem; color: var(--gct-text2); margin-top: .25rem; }

.gct-diff-badge {
  display: inline-block;
  background: var(--gct-primary-d);
  color: #fff;
  border-radius: 4px;
  padding: .1rem .45rem;
  font-size: .75rem;
  font-weight: 700;
  margin-right: .3rem;
}

/* ─── Stats Grid ─────────────────────────────────────────────────────────── */
.gct-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .8rem;
  margin-top: .8rem;
}

.gct-stat-box {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.gct-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gct-primary);
  line-height: 1;
}

.gct-stat-label {
  font-size: .75rem;
  color: var(--gct-text2);
  margin-top: .3rem;
}

/* ─── Badge / Cacher-Ausweis ─────────────────────────────────────────────── */
.gct-badge-preview {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.gct-badge-preview canvas,
.gct-badge-preview img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: var(--gct-shadow);
}

/* ─── Morse Chart ────────────────────────────────────────────────────────── */
.gct-morse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .4rem;
  margin-top: .6rem;
}

.gct-morse-item {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 5px;
  padding: .3rem .5rem;
  text-align: center;
  font-size: .8rem;
}

.gct-morse-item strong { color: var(--gct-primary); }

/* ─── Multi-Cache Var Rows ───────────────────────────────────────────────── */
.gct-var-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}

.gct-var-row input { width: auto; }
.mc-var-name { width: 50px !important; text-align: center; font-weight: 700; }
.mc-var-val  { width: 120px !important; }

/* ─── Letter Values Table ────────────────────────────────────────────────── */
.gct-lv-table {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

.gct-lv-cell {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 5px;
  padding: .3rem .5rem;
  text-align: center;
  font-family: 'Courier New', monospace;
  min-width: 40px;
}

.gct-lv-char { font-weight: 700; font-size: 1.1rem; color: var(--gct-primary); display: block; }
.gct-lv-val  { font-size: .85rem; color: var(--gct-text2); }

.gct-lv-sum {
  margin-top: .8rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gct-primary);
}

/* ─── Coord Results ──────────────────────────────────────────────────────── */
.gct-coord-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 0;
  border-bottom: 1px solid var(--gct-border);
  font-family: 'Courier New', monospace;
  font-size: .9rem;
}

.gct-coord-label { color: var(--gct-text2); font-size: .8rem; }

/* ─── Loading Spinner ────────────────────────────────────────────────────── */
.gct-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--gct-text2);
  font-size: .9rem;
  padding: .8rem 0;
}

.gct-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--gct-border);
  border-top-color: var(--gct-primary);
  border-radius: 50%;
  animation: gct-spin .7s linear infinite;
}

@keyframes gct-spin { to { transform: rotate(360deg); } }

/* ─── Error / Success ────────────────────────────────────────────────────── */
.gct-error {
  background: rgba(224,82,82,.12);
  border: 1px solid var(--gct-danger);
  border-radius: 7px;
  padding: .7rem 1rem;
  color: var(--gct-danger);
  font-size: .9rem;
  margin-top: .6rem;
}

.gct-success {
  background: rgba(82,200,123,.1);
  border: 1px solid var(--gct-success);
  border-radius: 7px;
  padding: .7rem 1rem;
  color: var(--gct-success);
  font-size: .9rem;
  margin-top: .6rem;
}

/* ─── Trackable Card ─────────────────────────────────────────────────────── */
.gct-tb-card {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 8px;
  padding: 1.2rem;
  margin-top: .8rem;
}

.gct-tb-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gct-tb-icon { font-size: 2.5rem; }
.gct-tb-title { font-weight: 700; font-size: 1.1rem; }
.gct-tb-code  { font-size: .85rem; color: var(--gct-text2); font-family: monospace; }

/* ─── Log Entries ────────────────────────────────────────────────────────── */
.gct-log-item {
  display: flex;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--gct-border);
  font-size: .88rem;
}

.gct-log-type { font-size: 1.3rem; flex-shrink: 0; }
.gct-log-meta { color: var(--gct-text2); font-size: .78rem; }
.gct-log-text { margin-top: .2rem; }

/* ─── Details Collapse ───────────────────────────────────────────────────── */
details { margin-top: .8rem; }
details summary {
  cursor: pointer;
  color: var(--gct-primary);
  font-size: .88rem;
  font-weight: 600;
  user-select: none;
  padding: .4rem 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .gct-form-grid { grid-template-columns: 1fr; }
  .gct-tabs      { gap: .25rem; }
  .gct-tab-btn   { font-size: .78rem; padding: .35rem .65rem; }
  .gct-stats-grid{ grid-template-columns: repeat(2,1fr); }
  .gct-btn-row   { flex-direction: column; }
  .gct-btn       { justify-content: center; }
}

/* ─── GC-Code Lookup spezifisch ─────────────────────────────────────────── */
.gct-lookup-grid { margin-top: .4rem; }

.gct-lookup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 0;
  border-bottom: 1px solid var(--gct-border);
  font-size: .88rem;
  gap: 1rem;
}

.gct-lookup-row:last-child { border-bottom: none; }
.gct-lookup-row .gct-coord-label { flex-shrink: 0; min-width: 160px; }

/* Verlauf Tags */
.gct-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .3rem;
}

.gct-history-tag {
  background: var(--gct-bg3);
  border: 1px solid var(--gct-border);
  border-radius: 20px;
  color: var(--gct-primary);
  font-family: monospace;
  font-size: .82rem;
  font-weight: 700;
  padding: .25rem .7rem;
  cursor: pointer;
  transition: all .2s;
}

.gct-history-tag:hover {
  background: var(--gct-primary);
  color: #fff;
  border-color: var(--gct-primary);
}

/* Dark-Theme Override – alle Wrap-Elemente forcieren */
.gct-wrap,
.gct-wrap * {
  box-sizing: border-box;
}