:root{--auth-bg:url('/assets/backgrounds/6c37bc541dbe4735af55a54584d2889c.jpg?v=1773442764');}
:root{
  --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --text: #111;
  --muted: #666;
  --border: #ddd;
  --border2: #eee;
  --blue: #0b5fff;
  --green: #16a34a;
  --green2: #0f7a35;
  --yellow: #facc15;
  --yellow2: #ca8a04;
}

html, body{ height: 100%; }
body{
  font-family: var(--font);
  font-size: 13px; /* content -1px; keep page titles large */
  color: var(--text);
  margin: 24px;
  overflow-x: hidden; /* avoid accidental horizontal scrollbars */
}

/* Full-bleed layout for onboarding/login pages (avoid white frame on mobile) */
body.fullbleed{ margin: 0; overflow-x: hidden; }
body.fullbleed .page-wrap{ padding: 24px; }
@media (max-width: 520px){
  body.fullbleed .page-wrap{ padding: 14px; }
}

/* Mobile: make viewer launch buttons full width */
@media (max-width: 520px){
  a.btn.task-viewer{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* Full-bleed background helper (register/login share same background style) */
body.bg-full{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Auth pages (DJI-like: full background + centered card) */
.auth-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 24px 12px;
  box-sizing: border-box;
  overflow-x: hidden;

  /* softer + lighter overlay than before */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.35)),
    var(--auth-bg, none);
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
}

/* Horizontal scroll helper for wide tables on mobile */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table{ min-width: 720px; }

.auth-center{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-card{
  width: 100%;
  max-width: 460px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  padding: 22px 30px;
  backdrop-filter: blur(6px);
  font-size: 13px;
}
.auth-card input,
.auth-card select{ font-size: 13px; width: 100%; min-width: 0; box-sizing: border-box; }
.auth-card .muted{ font-size: 12px; }

.auth-card .brand{
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.auth-card h1{ margin: 0 0 12px; font-size: 18px; }

.auth-card .muted{ color: rgba(0,0,0,0.55); }

a{ color: var(--blue); text-decoration: none; }

h1{ margin: 0 0 12px; font-size: 18px; }

.card{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin: 12px 0;
}

.row{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Page header (shared) */
.page-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom: 12px; }
.page-title{ margin: 0 0 4px; }
.page-subtitle{ margin: 0; }

/* Task progress bar (same visual as upload progress) */
.task-progress-wrap{ margin-top: 8px; }
.progress-line{ width:100%; height: 10px; border: 1px solid var(--border2); border-radius: 999px; overflow:hidden; background:#f6f7fb; }
.progress-line > span{ display:block; height:100%; background: var(--blue); width: 0%; }
.progress-line.warn > span{ background: var(--yellow2); }
.progress-line.bad > span{ background: #d90429; }

.task-divider td{ padding:0 !important; border-bottom:none !important; }
.task-divider .line{ height:1px; background: var(--border2); width:100%; }

/* Status mini badges */
.status-badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid rgba(0,0,0,0.08); }
.status-badge.queued{ background:#f2f2f2; color:#555; border-color:#ddd; }

/* Pastel category badges for outputs table */
.status-badge.badge-pointcloud{ background:#e9f2ff; color:#1f4f8a; border-color:#cfe1ff; }
.status-badge.badge-model{ background:#f0ecff; color:#4b2d86; border-color:#ddd2ff; }
.status-badge.badge-raster{ background:#e9fff3; color:#1f6b3b; border-color:#c6f5d7; }
.status-badge.badge-plans{ background:#fff6e5; color:#7a4b00; border-color:#ffe2b5; }
.status-badge.badge-reports{ background:#ffeef4; color:#7a1f45; border-color:#ffc7da; }
.status-badge.badge-pv{ background:#e9fffd; color:#0b5a57; border-color:#bff2ee; }
.status-badge.running{ background:#e7fff0; color:#0b6b2b; border-color:#b8f0cc; }
.status-badge.failed{ background:#ffecec; color:#8a1a1a; border-color:#ffb8b8; }
.status-badge.completed{ background:#eef6ff; color:#0b5fff; border-color:#cfe1ff; }

@media (max-width: 520px){
  /* Task status block: keep only main badge + progress bar on mobile */
  .task-status-line .status-meta{ display:none; }
  .task-stage-line{ display:none; }

  /* Hide preflight quality details on mobile */
  details.preflight-details{ display:none; }

  /* Outputs table: hide Kategorie + Grösse columns on phones */
  table.outputs-table th:nth-child(1),
  table.outputs-table td:nth-child(1),
  table.outputs-table th:nth-child(3),
  table.outputs-table td:nth-child(3){
    display:none;
  }
}

.cols{ display:flex; gap:16px; align-items:flex-start; }
.col-left{ flex: 1 1 420px; min-width: 340px; }
.col-right{ flex: 1 1 420px; min-width: 340px; }
@media (max-width: 920px){
  .cols{ flex-direction: column; }
  .col-left, .col-right{ min-width: 0; }
}

input{ padding: 10px; border-radius: 8px; border: 1px solid #bbb; min-width: 260px; }
input[type=file]{ padding: 10px; }

select{ padding: 10px; border-radius: 10px; border: 1px solid #bbb; min-width: 260px; font-size: 12px; background: #f6f7fb; }
.select-big{ padding: 12px 12px; border-radius: 12px; border: 1px solid #cfd6e4; background: #f6f7fb; font-weight: 700; }

/* Full-width forms (e.g., register) */
.form-full input,
.form-full select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

button,
.btn{
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-size: 12px;
  line-height: 1.1;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

button.primary,
.btn.primary{
  background: var(--green);
  border-color: var(--green2);
  color: #fff;
}

/* Danger (fire red) */
button.danger,
.btn.danger{
  background: #d90429;
  border-color: #a9031f;
  color: #fff;
}
button.danger:hover,
.btn.danger:hover{ filter: brightness(0.96); }

button.primary:disabled,
.btn.primary:disabled{
  background: #cfd6e4;
  border-color: #cfd6e4;
  color: rgba(0,0,0,0.45);
  cursor: not-allowed;
  box-shadow: none;
}

button.warning,
.btn.warning{
  background: var(--yellow);
  border-color: var(--yellow2);
  color: #111;
}

code{ background: #f4f4f4; padding: 2px 6px; border-radius: 6px; }

.muted{ color: var(--muted); font-size: 11px; }

.site-footer{
  margin-top: 18px;
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  text-align: center;
}
.site-footer a{ color: inherit; text-decoration: underline; }

.alert{
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  border: 1px solid rgba(0,0,0,0.08);
}
.alert.error{
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}
.alert.success{
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #14532d;
}

/* Tables: unified style everywhere */
.tasks,
.plan-table,
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed; /* calmer, aligned columns */
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
}

/* Plan tables: consistent column widths (7 columns) */
.plan-table th:nth-child(1), .plan-table td:nth-child(1){ width: 24%; }
.plan-table th:nth-child(2), .plan-table td:nth-child(2){ width: 14%; }
.plan-table th:nth-child(3), .plan-table td:nth-child(3){ width: 12%; }
.plan-table th:nth-child(4), .plan-table td:nth-child(4){ width: 10%; }
.plan-table th:nth-child(5), .plan-table td:nth-child(5){ width: 14%; }
.plan-table th:nth-child(6), .plan-table td:nth-child(6){ width: 10%; }
.plan-table th:nth-child(7), .plan-table td:nth-child(7){ width: 16%; }

.plan-table td{ word-wrap: break-word; }

.tasks th,
.tasks td,
.plan-table th,
.plan-table td,
.table th,
.table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border2);
  text-align: left;
  vertical-align: top;
}
.tasks thead th,
.plan-table thead th,
.table thead th{
  background: #f6f7fb;
  font-weight: 700;
  font-size: 11px;
  color: #333;
}
.tasks tbody tr:nth-child(2n),
.plan-table tbody tr:nth-child(2n),
.table tbody tr:nth-child(2n){
  background: #fbfbfd;
}
.tasks tbody tr:last-child td,
.plan-table tbody tr:last-child td,
.table tbody tr:last-child td{ border-bottom: none; }
.tasks .highlight,
.plan-table .highlight,
.table .highlight{ background: #eef6ff; }

.btn.secondary{ background: #fff; color: #111; }
/* Keep .small for compatibility, but don't change sizing (uniform buttons) */
.btn.small{ padding: 8px 12px; font-size: 12px; }


.upload-progress{ max-width: 420px; }
.upload-progress progress{ width: 100%; max-width: 360px; height: 12px; }
.upload-progress #uploadPct{ margin-left: 8px; }
@media (max-width: 520px){ .upload-progress{ max-width: 100%; } .upload-progress progress{ max-width: 100%; } }


.subcard{
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #fafafa;
}

/* Collapsible cards (details/summary) */
details.subcard > summary{ list-style:none; }
details.subcard > summary::-webkit-details-marker{ display:none; }
details.subcard > summary::after{ content:'▾'; float:right; opacity:0.6; }
details.subcard[open] > summary::after{ content:'▴'; }

.inline-buttons{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }


.table-scroll{ overflow-x: auto; max-width: 100%; }

.outputs-lines{ display:flex; flex-direction:column; gap:6px; }
.outputs-lines .inline-buttons{ gap:6px; }


.outputs-task{
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin: 10px 0;
  background: #fff;
}
.outputs-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.outputs-head code{ font-size: 12px; }

.page-footer{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border2);
}

/* Tabs: avoid display:none for iOS file inputs (Safari can break file picker) */
.tab-hidden{
  visibility: hidden;
  position: absolute;
  left: -99999px;
  top: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

pre.log-tail{
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: #fafafa;
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
  max-height: 260px;
  overflow: auto;
}

.pill{display:inline-block; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; border:1px solid rgba(0,0,0,.08)}
.pill-good{background:#e7fff0; color:#0b6b2b; border-color:#b8f0cc}
.pill-ok{background:#e7fff0; color:#0b6b2b; border-color:#b8f0cc}
.pill-warn{background:#fff6e5; color:#8a5a00; border-color:#ffe0a6}
.pill-bad{background:#ffecec; color:#8a1a1a; border-color:#ffb8b8}
.pill-muted{background:#f2f2f2; color:#555; border-color:#ddd}

/* Admin dashboard status bars (reuse <progress> but colorize by class) */
progress.bar-ok { accent-color: #2ea44f; }
progress.bar-warn { accent-color: #f59e0b; }
progress.bar-bad { accent-color: #dc2626; }

/* Project tabs (CSS-only panels; highlight handled by tiny JS for layout flexibility) */
.tab-radio{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tab-panes .tab-pane{ display: none; }
#tab_overview:checked ~ .tab-panes #pane_overview{ display: block; }
#tab_insights:checked ~ .tab-panes #pane_insights{ display: block; }
#tab_deliverables:checked ~ .tab-panes #pane_deliverables{ display: block; }
#tab_history:checked ~ .tab-panes #pane_history{ display: block; }

/* Tab buttons (make them pop a bit) */
.tabbar label.btn{ font-weight: 900; letter-spacing: 0.01em; }

/* Active tab = inverted standard button (white bg, dark text) */
.tabbar label.tab-active{
  background: #fff;
  color: #111;
  border-color: #111;
}