/* =====================================================
   ICF-CY PWA – app.css
   iOS-native Design System
   ===================================================== */

/* ---- Design Tokens ---- */
:root {
  --bg:          #F2F2F7;
  --surface:     #FFFFFF;
  --surface-2:   #F9F9FB;
  --sep:         rgba(60,60,67,.12);
  --sep-opaque:  #C6C6C8;
  --label:       #000000;
  --label-2:     rgba(60,60,67,.6);
  --label-3:     rgba(60,60,67,.3);
  --tint:        #007AFF;
  --orange:      #FF9500;
  --green:       #34C759;
  --red:         #FF3B30;

  /* Komponenten */
  --c-b: #5856D6;
  --c-s: #AF52DE;
  --c-d: #007AFF;
  --c-e: #34C759;

  /* Abstände & Radien */
  --radius-card: 10px;
  --radius-icon: 7px;

  /* Safe Areas */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #000000;
    --surface:    #1C1C1E;
    --surface-2:  #2C2C2E;
    --sep:        rgba(84,84,88,.6);
    --sep-opaque: #38383A;
    --label:      #FFFFFF;
    --label-2:    rgba(235,235,245,.6);
    --label-3:    rgba(235,235,245,.3);
    --tint:       #0A84FF;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.41;
  letter-spacing: -.022em;
  background: var(--bg);
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font-family: inherit; }

/* ---- App Shell ---- */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.stack-host {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ---- Loading ---- */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--label-2);
  font-size: 17px;
  gap: 12px;
}
.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--label-3);
  border-top-color: var(--tint);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Navigation Bar ---- */
.nav {
  position: relative;
  background: rgba(249,249,251,.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--sep);
  z-index: 50;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
  .nav { background: rgba(28,28,30,.88); }
}
.nav-bar {
  display: flex;
  align-items: center;
  padding: 0 8px;
  min-height: 44px;
  padding-top: var(--sat);
}
.nav-back {
  display: flex; align-items: center;
  color: var(--tint);
  background: none; border: none;
  font: inherit; font-size: 17px;
  padding: 8px;
  cursor: pointer;
  min-width: 70px;
  letter-spacing: -.022em;
}
.nav-back svg { width: 12px; height: 21px; margin-right: 5px; }
.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(calc(var(--sat) / 2));
  top: 50%;
  font-size: 17px; font-weight: 600;
  letter-spacing: -.43px;
  pointer-events: none;
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden; text-overflow: ellipsis;
  font-family: "SF Mono", "Menlo", monospace;
}
.nav-right { margin-left: auto; display: flex; }
.nav-btn {
  background: none; border: none;
  color: var(--tint);
  padding: 8px 10px;
  cursor: pointer;
}
.nav-btn svg { width: 22px; height: 22px; display: block; }

/* Large Title variant */
.nav.large {
  background: var(--bg);
  border-bottom: none;
}
.nav.large .nav-bar { min-height: 0; padding-bottom: 0; }
.large-title {
  padding: 4px 16px 8px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .37px;
}

/* ---- Scrollable Content ---- */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
.pad-bottom { padding-bottom: max(32px, var(--sab)); }

/* ---- Search Bar ---- */
.search-wrap { padding: 0 16px 8px; background: var(--bg); }
.search {
  display: flex; align-items: center;
  background: rgba(118,118,128,.12);
  border-radius: 10px;
  padding: 7px 8px;
  gap: 6px;
}
.search-icon { width: 14px; height: 14px; color: var(--label-2); flex-shrink: 0; }
.search input {
  flex: 1; background: none; border: none; outline: none;
  font: inherit; font-size: 17px;
  color: var(--label);
  min-width: 0;
}
.search input::placeholder { color: var(--label-2); }
.search-clear {
  display: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--label-3);
  align-items: center; justify-content: center;
  border: none; cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.search-clear.visible { display: flex; }
.search-clear svg { width: 9px; height: 9px; color: var(--surface); }

/* ---- Section Headers / Footers ---- */
.section-header {
  padding: 24px 16px 6px;
  font-size: 13px;
  color: var(--label-2);
  text-transform: uppercase;
  letter-spacing: -.08px;
}
.section-footer {
  padding: 8px 16px 0;
  font-size: 13px;
  color: var(--label-2);
  line-height: 1.38;
  letter-spacing: -.08px;
}

/* ---- Grouped Table ---- */
.group {
  background: var(--surface);
  margin: 0 16px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.row {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 11px 16px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  gap: 12px;
  border: none; width: 100%; text-align: left;
  color: var(--label);
  font: inherit;
  transition: background-color .12s;
}
.row:active { background: rgba(0,0,0,.04); }
@media (prefers-color-scheme: dark) { .row:active { background: rgba(255,255,255,.06); } }
.row + .row::before {
  content: '';
  position: absolute;
  left: 16px; right: 0; top: 0;
  height: .5px;
  background: var(--sep);
}
.row.row-static { cursor: default; }

.row-icon {
  height: 29px;
  min-width: 29px;
  padding: 0 4px;
  border-radius: var(--radius-icon);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: white;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: -.3px;
  font-family: "SF Mono", "Menlo", monospace;
}
.row-icon.emoji { font-size: 17px; font-family: inherit; }

.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title {
  font-size: 17px; line-height: 1.29; letter-spacing: -.43px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.row-subtitle {
  font-size: 13px;
  color: var(--label-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -.08px;
}
.row-chevron { color: var(--label-3); width: 7px; height: 12px; flex-shrink: 0; }

/* ---- Detail View ---- */
.detail-header { padding: 24px 16px 16px; background: var(--bg); }
.detail-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  padding: 3px 10px;
  border-radius: 6px;
  color: white;
  margin-bottom: 12px;
}
.detail-code {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 13px;
  color: var(--label-2);
  margin-bottom: 5px;
  letter-spacing: .5px;
}
.detail-title {
  font-size: 26px; font-weight: 700;
  letter-spacing: .36px; line-height: 1.14;
}

.detail-section { margin: 20px 16px 0; }
.detail-section-title {
  font-size: 13px; color: var(--label-2);
  text-transform: uppercase; letter-spacing: -.08px;
  padding: 0 0 6px 0;
}
.detail-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  font-size: 15px; line-height: 1.47;
  letter-spacing: -.24px;
}
.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li {
  padding: 8px 16px 8px 30px;
  position: relative;
  font-size: 15px; line-height: 1.4;
}
.detail-list li + li { border-top: .5px solid var(--sep); }
.detail-list li::before { content: '•'; position: absolute; left: 16px; color: var(--tint); }

/* ---- Qualifier Picker ---- */
.qualifier-wrap {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px;
}
.qualifier-code {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 24px; font-weight: 600;
  text-align: center;
  padding: 10px 0 4px;
  color: var(--tint);
  letter-spacing: 1px;
}
.qualifier-segments {
  display: flex;
  background: rgba(118,118,128,.12);
  border-radius: 9px;
  padding: 2px;
  margin: 10px 0;
}
.qualifier-segments button {
  flex: 1;
  background: transparent; border: none;
  padding: 7px 0;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--label);
  cursor: pointer;
  border-radius: 7px;
  transition: background-color .2s;
}
.qualifier-segments button.active {
  background: var(--surface);
  box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.04);
  font-weight: 600;
}
.qualifier-label {
  text-align: center;
  font-size: 13px; color: var(--label-2);
  letter-spacing: -.08px;
  min-height: 18px;
}

/* ---- Action Bar ---- */
.action-bar { display: flex; gap: 10px; padding: 16px; }
.action-btn {
  flex: 1;
  background: var(--surface); border: none;
  border-radius: var(--radius-card);
  padding: 12px;
  font: inherit; font-size: 15px;
  color: var(--tint);
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  font-weight: 500;
}
.action-btn svg { width: 22px; height: 22px; }
.action-btn.fav-active { color: var(--orange); }
.action-btn.copied { color: var(--green); }

/* ---- Breadcrumb ---- */
.crumb {
  padding: 10px 16px 0;
  font-size: 12px; color: var(--label-2);
  letter-spacing: -.08px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb-sep { margin: 0 4px; color: var(--label-3); }

/* ---- Tab Bar ---- */
.tabbar {
  background: rgba(249,249,251,.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--sep);
  display: flex;
  padding-bottom: var(--sab);
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark) { .tabbar { background: rgba(28,28,30,.88); } }
.tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 0 2px;
  background: none; border: none;
  color: var(--label-2);
  font-size: 10px; font-family: inherit;
  letter-spacing: .08px;
  cursor: pointer;
  gap: 3px;
}
.tab.active { color: var(--tint); }
.tab svg { width: 25px; height: 25px; }

/* ---- Empty States ---- */
.empty {
  padding: 80px 32px 32px;
  text-align: center;
  color: var(--label-2);
}
.empty-icon { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--label-3); }
.empty-title {
  font-size: 20px; font-weight: 600;
  color: var(--label);
  margin-bottom: 6px; letter-spacing: .38px;
}
.empty-body { font-size: 15px; line-height: 1.4; letter-spacing: -.24px; }

/* ---- Info Note ---- */
.info-note {
  margin: 12px 16px 0;
  padding: 10px 14px;
  background: rgba(0,122,255,.08);
  border-radius: 8px;
  font-size: 13px; color: var(--label-2);
  line-height: 1.45; letter-spacing: -.08px;
}
.info-note strong { color: var(--label); font-weight: 600; }

/* ---- Update Banner ---- */
.update-banner {
  display: none;
  position: fixed;
  bottom: calc(var(--sab) + 50px + 10px);
  left: 16px; right: 16px;
  background: var(--tint);
  color: white;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  display: none;
  align-items: center; gap: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  z-index: 200;
  cursor: pointer;
}
.update-banner.visible { display: flex; }
.update-banner-text { flex: 1; font-weight: 500; }
.update-banner-btn {
  background: rgba(255,255,255,.25);
  border: none; border-radius: 8px;
  color: white; font: inherit;
  font-size: 14px; font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}

/* ---- About / Info ---- */
.about-hero { text-align: center; padding: 40px 24px 24px; }
.about-icon {
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--c-b), var(--c-d));
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 26px; font-weight: 800; letter-spacing: -1px;
  box-shadow: 0 8px 24px rgba(88,86,214,.3);
}
.about-name { font-size: 22px; font-weight: 700; letter-spacing: .35px; }
.about-version { color: var(--label-2); font-size: 15px; margin-top: 4px; }

/* ---- Search Highlight ---- */
mark {
  background: rgba(255,204,0,.45);
  color: inherit;
  padding: 0 2px; border-radius: 2px;
}
@media (prefers-color-scheme: dark) { mark { background: rgba(255,204,0,.28); } }

/* ---- Page transitions ---- */
.view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  will-change: transform;
}
.view.slide-in  { animation: slideIn  .32s cubic-bezier(.32,.72,0,1) both; }
.view.slide-out { animation: slideOut .28s cubic-bezier(.32,.72,0,1) both; }
@keyframes slideIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOut { from { transform: translateX(0); opacity:1; } to { transform: translateX(-28%); opacity:.6; } }