/* =========================================================
   app.css — Clean & Simple UI (max font-weight: 400)
   Für Templates: case_list, case_detail, case_create, login,
   case_trash + alle partials.
   ========================================================= */

/* -----------------------------
   Tokens
----------------------------- */
:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #111827;   /* slate-900-ish */
  --muted: #6b7280;  /* slate-500-ish */
  --line: #e5e7eb;   /* slate-200-ish */

  --brand: #2563eb;  /* blue-600 */
  --brand-weak: rgba(37,99,235,.10);

  --danger: #dc2626; /* red-600 */
  --danger-weak: rgba(220,38,38,.10);

  --success: #16a34a; /* green-600 */
  --success-weak: rgba(22,163,74,.10);

  --radius: 10px;
  --tap: 40px;

  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* -----------------------------
   Reset / Base
----------------------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}

img{ max-width: 100%; height: auto; }
a{
  color: var(--brand);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

h1, h2, h3{
  margin: 0 0 var(--s-2);
  font-weight: 400; /* <= 400 */
  line-height: 1.25;
}
h1{ font-size: 20px; }
h2{ font-size: 18px; }
h3{ font-size: 16px; }

p{ margin: 0 0 var(--s-2); }
hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-4) 0;
}

.muted{ color: var(--muted); }
.prewrap{ white-space: pre-wrap; }

/* -----------------------------
   Utility classes
----------------------------- */
.u-flex-1{ flex: 1; }
.u-m-0{ margin: 0; }
.u-mt-6{ margin-top: 6px; }
.u-mt-8{ margin-top: 8px; }
.u-mt-10{ margin-top: 10px; }
.u-mt-12{ margin-top: 12px; }
.u-mt-14{ margin-top: 14px; }
.u-mb-8{ margin: 0 0 8px; }
.u-mb-12{ margin-bottom: 12px; }
.u-inline-form{ display: inline; }
.u-inline-check{
  display: flex;
  gap: 8px;
  align-items: center;
}
.login-card{
  max-width: 520px;
  margin: 60px auto;
}

/* -----------------------------
   Layout
----------------------------- */
.container{
  width: min(1100px, calc(100% - 32px));
  margin: 24px auto;
  padding-bottom: 100px;
}

.topbar{
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.topbar .brand{
  display: grid;
  gap: 4px;
}
.topbar .sub{
  color: var(--muted);
  font-size: 13px;
}

.actions{
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.actions.inline{ gap: 8px; }

.row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 760px){
  .topbar{ flex-direction: column; align-items: stretch; }
  .row{ grid-template-columns: 1fr; }
}

.sep{
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-4) 0;
}

/* -----------------------------
   Cards / Sections / Blocks
----------------------------- */
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.card.compact{
  padding: var(--s-3);
  border-radius: 8px;
}

.section{
  background: transparent;
}
.section-head{
  margin-bottom: var(--s-2);
}
.section-title{
  margin: 0;
}
.section-body{
  margin-top: var(--s-2);
}

.block{
  padding: 0;
}
.block-title{
  margin: 0 0 var(--s-2);
  font-weight: 400;
}

/* Key-value row used in meta section */
.kv{
  display: flex;
  gap: 10px 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* -----------------------------
   Sidebar Layout + Tabs (Case Detail)
----------------------------- */
.side-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-4);
  align-items: start;
  margin-top: var(--s-4);
}
@media (max-width: 780px){
  .side-layout{ grid-template-columns: 1fr; }
}

.sidebar{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3);
  background: var(--panel);
}

.side-nav{
  display: grid;
  gap: 6px;
}

.side-link{
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.side-link:hover{
  background: rgba(0,0,0,.03);
  text-decoration: none;
}
.side-link.is-active{
  background: var(--brand-weak);
  color: var(--brand);
}

.side-link-danger{
  color: var(--danger);
}
.side-link-danger.is-active{
  background: var(--danger-weak);
  color: var(--danger);
}

.side-sep{
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}

main.content{
  min-width: 0;
}

/* Panels: default hidden, only .is-active visible */
main.content > section.section{ display: none; }
main.content > section.section.is-active{ display: block; }

/* -----------------------------
   Buttons
----------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tap);
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 400; /* <= 400 */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover{ background: rgba(0,0,0,.03); text-decoration: none; }

.btn.primary{
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
}
.btn.primary:hover{ background: var(--brand-weak); }

.btn.danger{
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}
.btn.danger:hover{ background: var(--danger-weak); }

.btn.link,
.btn-link{
  border: 0;
  background: transparent;
  padding: 0;
  height: auto;
  color: var(--brand);
  cursor: pointer;
}
.btn.link:hover,
.btn-link:hover{ text-decoration: underline; }

/* -----------------------------
   Badges / Pills / Markers
----------------------------- */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
}
.badge.gray{
  color: var(--muted);
}

.count-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

/* Step marker dot */
.marker{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--line);
  margin-right: 8px;
  vertical-align: middle;
}
.marker.empty{ background: transparent; }
.marker.partial{ background: rgba(0,0,0,.10); }
.marker.filled{ background: var(--brand); border-color: var(--brand); }
.marker.editing{ background: var(--brand-weak); border-color: var(--brand); }

/* -----------------------------
   Forms (clean + no duplicates)
----------------------------- */
form{ margin: 0; }
.form{ display: grid; gap: var(--s-3); }

label{
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

/* Base controls */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea{
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 400; /* <= 400 */
  outline: none;
}

/* Placeholder (subtle) */
input::placeholder,
textarea::placeholder{
  color: #9ca3af; /* slate-400 */
}

/* Focus (simple, no glow) */
input:focus,
select:focus,
textarea:focus{
  border-color: var(--brand);
}

/* Textarea */
textarea{
  min-height: 100px;
  resize: vertical;
}

/* Prominent search field (kept clean) */
input[type="search"],
input#q_grid{
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
}

/* Field blocks */
.field-block{ min-width: 0; }
.article-name-field{ grid-column: 1 / -1; }

.field-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

/* Inline edit link */
.edit-link{
  color: var(--brand);
  font-size: 13px;
  text-decoration: none;
}
.edit-link:hover{ text-decoration: underline; }

/* Read mode */
.field-view{
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,.015);
}
.field-value{ color: var(--text); }

/* Actions under fields */
.field-actions{
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Errors */
.errors,
.field-errors{
  border: 1px solid rgba(220,38,38,.35);
  background: var(--danger-weak);
  border-radius: 8px;
  padding: 10px;
  color: var(--danger);
  font-size: 13px;
}
.field-errors{ margin-top: 8px; }

/* Checkbox line */
.check{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
}
.check input{
  width: 16px;
  height: 16px;
}


/* -----------------------------
   Tables
----------------------------- */
.table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table th,
.table td{
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-weight: 400; /* keep <= 400 */
}
.table th{
  color: var(--muted);
  font-size: 13px;
}
.table tr:last-child td{ border-bottom: 0; }

/* Responsive table using data-label */
@media (max-width: 720px){
  .table thead{ display: none; }
  .table, .table tbody, .table tr, .table td{ display: block; width: 100%; }
  .table tr{
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }
  .table td{
    border: 0;
    padding: 6px 0;
  }
  .table td[data-label]::before{
    content: attr(data-label) ": ";
    color: var(--muted);
    font-size: 13px;
  }
}

/* -----------------------------
   Summary (ascii-summary)
----------------------------- */
.ascii-summary{
  padding: var(--s-4);
}

/* Banner: ruhig, linksbündig, monospace */
.ascii-banner{
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,.015);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: 400;
  white-space: pre;
  overflow: auto;
}

/* Tabelle: Excel-like zebra, linksbündig */
.ascii-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: var(--s-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden; /* keeps zebra inside rounded border */
}

.ascii-table th,
.ascii-table td{
  text-align: left;          /* wichtig: linksbündig */
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;          /* <= 400 */
}

/* linke Spalte (Keys) */
.ascii-table th{
  width: 260px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(0,0,0,.01);
}

/* Zebra wie Excel */
.ascii-table tbody tr:nth-child(even) th,
.ascii-table tbody tr:nth-child(even) td{
  background: rgba(0,0,0,.025);  /* hellgrau */
}

/* letzte Zeile ohne extra Linie */
.ascii-table tbody tr:last-child th,
.ascii-table tbody tr:last-child td{
  border-bottom: 0;
}

/* Werte normal, nicht zentriert */
.ascii-value{
  color: var(--text);
  font-weight: 400;
  word-break: break-word;
}

/* Copy textarea: nicht im Layout sichtbar, aber sauber */
.ascii-copy{
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Mobile: Key-Spalte schmaler */
@media (max-width: 720px){
  .ascii-table th{ width: 160px; }
}


/* -----------------------------
   Toolbars
----------------------------- */
.toolbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.toolbar .actions{ margin-left: auto; }

@media (max-width: 720px){
  .toolbar{ flex-direction: column; align-items: stretch; }
  .toolbar .actions{ margin-left: 0; }
}

/* -----------------------------
   Toast / Flash / Saved
----------------------------- */
.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: min(360px, calc(100% - 32px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  display: none; /* shown by JS if you use it */
}

.flash{
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: var(--s-3);
  font-size: 13px;
}
.flash.success{
  border-color: rgba(22,163,74,.35);
  background: var(--success-weak);
  color: var(--success);
}

.saved{
  border: 1px solid rgba(22,163,74,.35);
  background: var(--success-weak);
  color: var(--success);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: var(--s-3);
  font-size: 13px;
}

/* -----------------------------
   Contact Card
----------------------------- */
.contact-card{ padding: var(--s-4); }

.contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-3);
}
@media (max-width: 760px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-item .label{
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}
.contact-item .value{
  color: var(--text);
}

.contact-actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

/* -----------------------------
   Value rows (inline display mode)
----------------------------- */
.value-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.value-row:last-child{ border-bottom: 0; }

/* -----------------------------
   Details (Steps)
----------------------------- */
.plain-details{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--panel);
  margin: var(--s-3) 0;
}
.plain-summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.plain-summary::-webkit-details-marker{ display: none; }

.plain-details[open] .plain-summary{
  background: rgba(0,0,0,.015);
}

.details-body{
  padding: 12px;
}

/* -----------------------------
   Reminders
----------------------------- */
.reminder-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.reminder-item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel);
}

.reminder-item.due{
  border-color: rgba(220,38,38,.35);
  background: var(--danger-weak);
}

.reminder-main{
  display: grid;
  gap: 6px;
}

.reminder-title{
  font-weight: 400;
}

.reminder-msg{
  color: var(--muted);
  font-size: 13px;
}

/* -----------------------------
   Case List: Board / Status Grid
----------------------------- */
.status-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 980px){
  .status-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .status-grid{ grid-template-columns: 1fr; }
}

.status-box{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--s-3);
}

.status-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.status-body{ margin-top: 10px; }
.status-foot{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.mini-list{
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}
.mini-list li{ margin: 6px 0; }

/* -----------------------------
   Small utilities (optional)
----------------------------- */
.mt-3{ margin-top: 12px; }
.grow{ flex: 1; }

/* -----------------------------
   Karten-Titel (Lieferant / Kunde / Auslieferung)
----------------------------- */
.card > h3{
  font-weight: 500;
  color: #2E4F20;
}