/* ============================================================
   ConvertX – Custom Theme (Convertio-inspired, Light + Dark)
   CI-Farben via :root in base.html gesetzt.
   ============================================================ */

/* ── Light mode tokens ─────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --page-bg:           #f5f5f7;
  --card-bg:           #ffffff;
  --card-border:       #e5e7eb;
  --card-shadow:       0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.05);
  --connector-color:   #9ca3af;
  --drop-bg:           #fafafa;
  --drop-border:       #d1d5db;
  --drop-hover-bg:     rgba(0,0,0,.015);
  --file-list-bg:      #ffffff;
  --file-item-hover:   #eff6ff;
  --file-item-border:  #f3f4f6;
  --info-bg:           #eff6ff;
  --info-border:       #bfdbfe;
  --info-name-color:   var(--color-primary);
  --text-sub:          #6b7280;
  --tab-border:        #d1d5db;
  --save-bg:           #f9fafb;
  --save-border:       #e5e7eb;
  --ctx-hover:         #f3f4f6;
  --ctx-danger-hover:  rgba(220,53,69,.07);
}

/* ── Dark mode tokens ──────────────────────────────────────── */
[data-bs-theme="dark"] {
  --page-bg:           #111827;
  --card-bg:           #1f2937;
  --card-border:       #374151;
  --card-shadow:       0 1px 3px rgba(0,0,0,.4), 0 4px 20px rgba(0,0,0,.3);
  --connector-color:   #4b5563;
  --drop-bg:           #111827;
  --drop-border:       #374151;
  --drop-hover-bg:     rgba(255,255,255,.03);
  --file-list-bg:      #111827;
  --file-item-hover:   #374151;
  --file-item-border:  #1f2937;
  --info-bg:           rgba(0,158,224,.1);
  --info-border:       rgba(0,158,224,.28);
  --info-name-color:   #60c8f0;
  --text-sub:          #9ca3af;
  --tab-border:        #374151;
  --save-bg:           #111827;
  --save-border:       #374151;
  --ctx-hover:         #374151;
  --ctx-danger-hover:  rgba(220,53,69,.12);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background: var(--page-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}

/* ── Utility ───────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Navbar ────────────────────────────────────────────────── */
.app-navbar {
  background: var(--color-primary);
  height: 54px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.14);
  position: sticky;
  top: 0;
  z-index: 200;
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.navbar-brand-link {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
}
.header-logo    { height: 26px; }
.header-company { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
.header-appname { font-size: 10px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .07em; }
.navbar-right   { display: flex; align-items: center; gap: .65rem; }
.header-user    { display: flex; align-items: center; gap: .45rem; }
.header-avatar  {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.38);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.header-username {
  font-size: 13px; color: rgba(255,255,255,.88);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-toggle {
  width: 32px; height: 28px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 6px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
  transition: background .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,.22); }

/* ── Layout ────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  padding: 2.5rem 1rem 3rem;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.app-footer {
  text-align: center;
  padding: .65rem 1rem;
  font-size: 11px;
  color: var(--text-sub);
  border-top: 1px solid var(--card-border);
  background: var(--card-bg);
}

/* ── Converter wrapper ─────────────────────────────────────── */
.converter-wrapper {
  display: flex;
  flex-direction: column;
}

/* ── Step card ─────────────────────────────────────────────── */
.step-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  box-shadow: var(--card-shadow);
  transition: background .2s, border-color .2s;
}

.step-label {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.35rem;
}
.step-badge {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.step-title {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}

/* Step connector arrow */
.step-connector {
  text-align: center;
  font-size: 1.4rem;
  color: var(--connector-color);
  padding: .6rem 0;
  line-height: 1;
  user-select: none;
}

/* ── Source tabs (pill buttons) ────────────────────────────── */
.source-tabs {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.source-tab {
  padding: .32rem .95rem;
  border-radius: 20px;
  border: 1.5px solid var(--tab-border);
  background: transparent;
  color: var(--text-sub);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family);
  transition: border-color .14s, color .14s, background .14s;
}
.source-tab:hover:not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.source-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* ── Tab panels ────────────────────────────────────────────── */
.tab-panel.hidden { display: none !important; }

/* ── Drop zone ─────────────────────────────────────────────── */
.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed var(--drop-border);
  border-radius: 10px;
  padding: 2.5rem 1rem;
  cursor: pointer;
  background: var(--drop-bg);
  text-align: center;
  user-select: none;
  min-height: 165px;
  width: 100%;
  transition: border-color .18s, background .18s;
}
.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--color-primary);
  background: var(--drop-hover-bg);
}
.drop-icon { font-size: 2.5rem; margin-bottom: .6rem; line-height: 1; }
.drop-hint { font-size: 12px; color: var(--text-sub); margin: .2rem 0 0; }
.link-accent { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── File info bar ─────────────────────────────────────────── */
.file-info {
  display: flex; align-items: center; gap: .5rem;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 7px; padding: .5rem .85rem; font-size: 13px;
}
.file-info.hidden { display: none !important; }
.file-info-name {
  font-weight: 600; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--info-name-color);
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  font-size: 12px; background: transparent; padding: 0; margin: 0;
}
.crumb {
  cursor: pointer; color: var(--color-primary);
  padding: .15rem .35rem; border-radius: 3px;
  transition: background .1s;
}
.crumb:hover { background: var(--file-item-hover); }
.crumb:not(.active)::after { content: " /"; color: var(--connector-color); margin-left: .15rem; }
.crumb.active { color: var(--bs-body-color, #212529); cursor: default; font-weight: 600; }
.crumb.active::after { display: none; }
.crumb.active:hover { background: none; }
.back-link {
  cursor: pointer; color: var(--color-primary); font-size: 12px; font-weight: 600;
  padding: .15rem .35rem; border-radius: 3px; transition: background .1s;
}
.back-link:hover { background: var(--file-item-hover); }

/* ── File list ─────────────────────────────────────────────── */
.file-list {
  border: 1px solid var(--card-border); border-radius: 8px;
  overflow-y: auto; max-height: 290px;
  background: var(--file-list-bg);
}
.file-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem; font-size: 13px;
  cursor: pointer; border-bottom: 1px solid var(--file-item-border);
  transition: background .1s, padding-left .1s;
  position: relative;
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: var(--file-item-hover); padding-left: 1.1rem; }
.file-item.selected {
  background: var(--file-item-hover);
  border-left: 3px solid var(--color-primary);
  padding-left: .65rem;
}
.file-icon { font-size: .9rem; flex-shrink: 0; width: 20px; text-align: center; line-height: 1; }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item:hover .file-name { font-weight: 500; }
.file-size { font-size: 11px; color: var(--text-sub); flex-shrink: 0; }
.loading-hint { padding: 1.5rem; color: var(--text-sub); font-size: 13px; text-align: center; }

/* ── Library chooser ───────────────────────────────────────── */
.library-list { display: flex; flex-direction: column; gap: .4rem; }
.library-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border: 1px solid var(--card-border);
  border-radius: 8px; cursor: pointer; font-size: 13px;
  background: var(--file-list-bg);
  transition: background .12s, border-color .15s;
}
.library-item:hover { background: var(--file-item-hover); border-color: var(--color-primary); }
.lib-name { font-weight: 600; font-size: 13px; }
.lib-site { font-size: 11px; color: var(--text-sub); }

/* ── Bootstrap overrides ───────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:              var(--color-primary);
  --bs-btn-border-color:    var(--color-primary);
  --bs-btn-hover-bg:        var(--color-secondary);
  --bs-btn-hover-border-color: var(--color-secondary);
  --bs-btn-active-bg:       var(--color-secondary);
  --bs-btn-active-border-color: var(--color-secondary);
  --bs-btn-disabled-bg:     var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color:           var(--color-primary);
  --bs-btn-border-color:    var(--color-primary);
  --bs-btn-hover-bg:        var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg:       var(--color-secondary);
  --bs-btn-active-border-color: var(--color-secondary);
}
.btn-convert { letter-spacing: .01em; }
.progress-bar { background-color: var(--color-primary); }

/* ── Save section ──────────────────────────────────────────── */
.save-section {
  background: var(--save-bg);
  border: 1px solid var(--save-border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
}
.save-label {
  font-size: 11px; font-weight: 700; color: var(--text-sub);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .65rem;
}
.save-status { font-size: 12px; color: #198754; font-weight: 600; }
.save-status.error { color: #dc3545; }

/* ── File menu button ──────────────────────────────────────── */
.file-menu-btn {
  margin-left: auto; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--text-sub); padding: .1rem .3rem;
  line-height: 1; display: none; border-radius: 3px;
}
.file-item:hover .file-menu-btn,
.file-item.ctx-open .file-menu-btn { display: inline-block; }
.file-menu-btn:hover { background: var(--file-item-border); }

/* ── Context menu ──────────────────────────────────────────── */
.ctx-menu {
  position: fixed; z-index: 2000;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2);
  min-width: 175px; padding: .3rem 0; font-size: 13px;
}
.ctx-menu.hidden { display: none !important; }
.ctx-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .45rem 1rem; background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--font-family); font-size: inherit;
  color: var(--bs-body-color, #212529);
  transition: background .1s; font-weight: 500;
}
.ctx-item:hover { background: var(--ctx-hover); }
.ctx-danger { color: #dc3545; }
.ctx-danger:hover { background: var(--ctx-danger-hover); }
.ctx-sep { border: none; border-top: 1px solid var(--card-border); margin: .25rem 0; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0,0,0,.48);
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none !important; }
.modal-box {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.28);
  width: min(520px, 96vw); display: flex; flex-direction: column;
  max-height: 84vh; overflow: hidden;
  border-top: 3px solid var(--color-primary);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--card-border);
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--card-border);
  flex-shrink: 0; flex-wrap: wrap; background: var(--save-bg);
}
.btn-icon {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--text-sub); padding: .3rem .4rem; border-radius: 3px; line-height: 1;
}
.btn-icon:hover { background: var(--ctx-hover); }

/* ── Folder picker ─────────────────────────────────────────── */
.picker-lib-row {
  display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem;
  border-bottom: 1px solid var(--card-border); font-size: 13px; flex-shrink: 0;
  background: var(--save-bg);
}
.picker-lib-row.hidden { display: none !important; }
.picker-lib-row label { flex-shrink: 0; font-weight: 700; font-size: 11px; color: var(--text-sub); text-transform: uppercase; letter-spacing: .05em; }
.picker-lib-row .form-select { flex: 1; }
.picker-breadcrumb { padding: .45rem 1rem; border-bottom: 1px solid var(--card-border); flex-shrink: 0; min-height: 2rem; }
.picker-list { flex: 1; overflow-y: auto; max-height: 300px; }
.picker-list .file-item { cursor: default; border-radius: 0; }
.picker-list .file-item:not(.picker-file-dim) { cursor: pointer; }
.picker-file-dim { opacity: .3; pointer-events: none; }
.picker-hint { font-size: 12px; color: var(--text-sub); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* ── Login ─────────────────────────────────────────────────── */
.login-wrapper {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 140px);
}
.login-card { max-width: 380px; width: 100%; text-align: center; }
.login-logo { height: 56px; object-fit: contain; margin: 0 auto 1.25rem; display: block; }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: .3rem; letter-spacing: -.02em; }
.login-subtitle { font-size: 13px; color: var(--text-sub); margin-bottom: 2rem; }
.login-footer { font-size: 11px; color: var(--text-sub); margin-top: 1.75rem; margin-bottom: 0; }