/* === UI Patch v1 ===
   Goal: cleaner layout, fix duplicate bars (header/footer/userbar), better table/forms/buttons.
   This file is designed as a drop-in replacement for public/assets/css/style.css
*/

/* Base reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #1f2937;
  background: #f8fafc;
  line-height: 1.5;
}

/* Layout */
.container { width: min(1200px, 94%); margin: 0 auto; padding: 16px; }
.header, header.site-header {
  position: sticky; top: 0; z-index: 10;
  background: #ffffffcc; backdrop-filter: blur(6px);
  border-bottom: 1px solid #e5e7eb;
}
.header .container, header.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: #0f172a; }
.brand img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
nav.main { display: flex; gap: 10px; flex-wrap: wrap; }
nav.main a, .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  border: 1px solid #e5e7eb; background: #fff; color: #0f172a;
  cursor: pointer; transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
nav.main a:hover, .btn:hover { box-shadow: 0 1px 2px rgba(0,0,0,.05); transform: translateY(-1px); }
.btn.primary { background: #0ea5e9; color: #fff; border-color: #0284c7; }
.btn.success { background: #22c55e; color: #fff; border-color: #16a34a; }
.btn.warn { background: #f59e0b; color: #fff; border-color: #d97706; }
.btn.danger { background: #ef4444; color: #fff; border-color: #dc2626; }

/* User bar (who is logged in) */
.userbar, .user-info {
  display: flex; align-items: center; gap: 12px; font-size: 14px;
  padding: 8px 12px; background: #f1f5f9; border: 1px solid #e5e7eb; border-radius: 10px;
}

/* Hide duplicates of header/footer/userbar if rendered twice */
.site-header ~ .site-header { display: none !important; }
.site-footer ~ .site-footer { display: none !important; }
.userbar ~ .userbar { display: none !important; }
.user-info ~ .user-info { display: none !important; }

/* Footer */
footer.site-footer {
  margin-top: 24px; padding: 16px 0; color: #64748b;
  border-top: 1px solid #e5e7eb; background: #fff;
}
footer.site-footer .container { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }

/* Headings */
h1,h2,h3 { color: #0f172a; margin: 0 0 12px; }
h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; }

/* Forms */
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 14px; color: #111827; }
input[type="text"], input[type="date"], input[type="email"], input[type="password"], select, textarea {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; background: #fff; color: #111827;
}
textarea { min-height: 110px; resize: vertical; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0 6px; }
details > summary { cursor: pointer; padding: 6px 0; color: #0ea5e9; font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #e2e8f0; color: #0f172a; }
.badge.success { background: #dcfce7; color: #065f46; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.danger { background: #fee2e2; color: #991b1b; }

/* Tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
thead th {
  position: sticky; top: 0; background: #f8fafc; color: #0f172a;
  text-align: left; font-weight: 700; padding: 10px; border-bottom: 1px solid #e5e7eb;
}
tbody td { padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: none; }

/* Stars for priority A/B/C */
td.starA::before, .starA::before { content: "★★★"; }
td.starB::before, .starB::before { content: "★★☆"; }
td.starC::before, .starC::before { content: "★☆☆"; }
td[class^="star"]::before, .starA::before, .starB::before, .starC::before { letter-spacing: 1px; color: #f59e0b; }

/* Cards & sections */
section.card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin: 16px 0;
  box-shadow: 0 1px 1px rgba(0,0,0,.02);
}

/* Upload areas */
.dropzone {
  border: 2px dashed #cbd5e1; border-radius: 12px; padding: 16px; background: #f8fafc; color: #64748b;
}

/* Gallery thumbs */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 8px; }
.gallery img { width: 100%; height: 100px; object-fit: cover; border-radius: 10px; border: 1px solid #e5e7eb; }

/* Utility */
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

/* Ensure modals (plugins) render above */
.modal, .dialog, .plugin-modal { position: fixed; inset: 0; display: none; z-index: 9998; }
.modal.open, .dialog.open, .plugin-modal.open { display: grid; place-items: center; background: rgba(15,23,42,.4); z-index: 9999; }
.modal .panel, .dialog .panel, .plugin-modal .panel { background:#fff; border-radius:12px; border:1px solid #e5e7eb; padding:16px; width:min(700px,94%); }

/* Hide duplicate footers/info if template accidentally outputs twice */
footer + footer { display: none !important; }
header + header { display: none !important; }


/* === UI Patch v2 (2025-08-15) === */

/* Fixed header and top menu */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;gap:12px;align-items:center;padding:8px 16px;background:#ffffff;border-bottom:1px solid #e5e7eb}
.site-header .site-title{font-weight:700}
.site-header .userbox{margin-left:auto;opacity:.75}

/* Global main container offset so content isn't hidden behind fixed header */
main.container{padding-top:64px}

/* Toolbar as button group */
.toolbar, .main-menu{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.main-menu{margin:8px 0}

/* Buttons */
.btn, .toolbar a, .main-menu a, button, input[type=submit]{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #d1d5db;border-radius:10px;padding:8px 12px;
  background:#f9fafb;cursor:pointer;text-decoration:none;color:inherit;
}
.btn:hover, .toolbar a:hover, .main-menu a:hover, button:hover{background:#f3f4f6}

/* Narrow auth forms */
body.container.narrow main.container, body.container.narrow .auth-box{max-width:420px;width:30vw;min-width:320px}
body.container.narrow input[type=email], body.container.narrow input[type=password], body.container.narrow input[type=text]{width:100%}

/* Wide editor forms */
main.container.wide form, .wide .form-wide{max-width:90vw}

/* View header with right-aligned actions */
.view-head{display:flex;align-items:center;gap:12px}
.view-head .actions{margin-left:auto;display:flex;gap:8px}

/* One-line Q&A layout */
.qa-line{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.qa-line .q{text-align:left;font-weight:600}
.qa-line .a{text-align:right}

/* Simple modal gallery */
.modal.gallery .content{max-width:min(90vw,1000px)}
.modal.gallery img{width:100%;height:auto;display:block}

/* Hide legacy plugin menu under table */
.plugin-menu-table{display:none !important}


/* PATCH: 90vw main */
main.container{max-width:90vw;margin:0 auto}


/* WIDTH-90 PATCH */
main.container{max-width:90vw;margin:0 auto}
/* Disabled button & success state for answers */
button[disabled], .btn[disabled]{opacity:.7;cursor:not-allowed}
.btn.success, button.success{background:#d1fae5;border-color:#10b981}
.btn.success:hover{background:#a7f3d0}


/* LAYOUT FIXES */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { flex: 0 0 auto; }
main.container { flex: 1 0 auto; }
.site-footer { flex: 0 0 auto; margin-top: 16px; }

/* COMPACT HEADER PATCH */
.site-header{padding:4px 12px}
.main-menu{margin:0;padding:4px 0;gap:6px}
main.container{padding-top:72px}
h1,h2,h3{margin-top:8px}
table{width:100%}
/* Enforce 90% width */
main.container{width:90vw;max-width:90vw;margin:0 auto}
/* Footer line */
.site-footer{border-top:1px solid #e5e7eb;padding:6px 12px}


/* GLOBAL BUTTON UNIFY */
.btn, .toolbar a, .main-menu a, button, input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;border-radius:10px;border:1px solid #d1d5db;
  background:#f9fafb;color:#111827;text-decoration:none;cursor:pointer;
  line-height:1.2; font-weight:500;
}
.btn:hover, .toolbar a:hover, .main-menu a:hover, button:hover, input[type=submit]:hover{background:#f3f4f6}
.btn.primary, button.primary, input[type=submit].primary{background:#e0f2fe;border-color:#38bdf8}
.btn.primary:hover{background:#bae6fd}
.btn.danger, button.danger, input[type=submit].danger{background:#fee2e2;border-color:#ef4444}
.btn.danger:hover{background:#fecaca}
button[disabled], .btn[disabled]{opacity:.65;cursor:not-allowed}

/* TOP SPACING TUNE */
main.container{padding-top:60px}
label > select.prio{max-width:140px}
label > input.small{max-width:240px}


/* === Q&A table-like styling (matches Aufgaben table look) === */
.qa-enhanced { margin-top: 10px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.qa-enhanced .qa-header, .qa-enhanced .qa-row {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  gap: 0;
  align-items: stretch;
}
.qa-enhanced .qa-header { background: #f8fafc; font-weight: 700; border-bottom: 1px solid #e5e7eb; }
.qa-enhanced .qa-cell { padding: 10px; border-bottom: 1px solid #eef2f7; display:flex; align-items:center; justify-content: flex-start; }
.qa-enhanced .qa-cell.center { justify-content: center; }
.qa-enhanced .qa-row:last-child .qa-cell { border-bottom: none; }
.qa-enhanced .qa-btn { width: 100%; text-transform: uppercase; }
.qa-enhanced .qa-btn.selected.ja { border: 2px solid #10b981; }
.qa-enhanced .qa-btn.selected.nein { border: 2px solid #ef4444; }
.qa-enhanced .qa-btn[disabled] { pointer-events: none; opacity: 1; } /* keep visual weight like Aufgaben table */

/* Minor tweak for matrix table wrapper */
.table.matrix { margin-top: 10px; }

/* Q&A – tła jak w tabeli Aufgaben */
.qa-enhanced{
  background: #fff;                 /* białe tło wierszy */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.qa-enhanced .qa-header{
  background: #f8fafc;              /* szare tło nagłówka (jak thead) */
  border-bottom: 1px solid #e5e7eb;
}

.qa-enhanced .qa-row .qa-cell{
  background: #fff;                 /* białe komórki (jak tbody) */
  border-bottom: 1px solid #f1f5f9; /* delikatna linia jak w Aufgaben */
}

.qa-enhanced .qa-row:last-child .qa-cell{
  border-bottom: none;
}

.qa-enhanced .qa-row:hover .qa-cell{
  background: #f8fafc;              /* hover jak w tabeli Aufgaben */
}



/* Modal robustness: show inner .dialog when parent .modal is open */
.modal.open .dialog { display: grid; place-items: center; }
.modal .dialog .panel { background:#fff; border-radius:12px; padding:16px; width:min(700px,94%); box-shadow:0 10px 30px rgba(0,0,0,.15); }

/* --- Patch 2025-08-16: Unified modal header (Aufgaben-style) --- */
.modal .panel .modal-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.modal .panel .modal-title{margin:0;font-size:1.1rem;font-weight:600;}
.modal [data-modal-close].btn{line-height:1.6;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc;}
.modal .content{max-height:70vh;overflow:auto;}

/* === PATCH 2025-08-16: reduce header gap & form-table styles === */
main.container{ padding-top:12px !important; }
.view-head{ margin-top: 0 !important; }

/* Ensure form tables render nicely */
table.form-table{ width:100%; border-collapse:collapse; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
table.form-table th, table.form-table td{ padding:10px; border-bottom:1px solid #eef2f7; vertical-align:top; }
table.form-table th{ width:230px; text-align:left; font-weight:600; background:#f8fafc; color:#0f172a; }
table.form-table tr:last-child th, table.form-table tr:last-child td{ border-bottom:none; }
table.form-table input[type=text], table.form-table input[type=email], table.form-table select, table.form-table textarea{ width:100%; }

/* Small icon-style add button next to Aufgabenliste */
.icon-btn{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; }

/* Ensure form-table visible even if generic table is hidden earlier */
table.form-table{ display: table !important; }

/* === PATCH r2 (icons & section-head alignment) === */
.section-head{display:flex;align-items:center;gap:8px;margin-top:8px;margin-bottom:8px;}
.section-head > .icon-btn{margin-left:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Make icon-only buttons compact */
.icon-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;}

.view-head .actions a.btn, .view-head .actions button.btn{display:inline-flex;align-items:center;gap:6px;}
/* ensure buttons don't jump due to icon-only */
.view-head .actions a.btn svg, .view-head .actions button.btn svg{display:block;}

/* === PATCH r3: precise alignment for header + icons === */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;}
.section-head h3{margin:0;}
.section-head .icon-btn{margin-left:auto;}
/* Icon-only buttons should have no text flow issues */
.icon-btn svg{display:block;}
/* In actions bar, remove extra gaps if text nodes are gone */
.view-head .actions{display:flex;gap:8px;align-items:center;}



/* --- Department status dots (Home table) --- */
.th-dept { text-align: center; white-space: nowrap; width: 32px; }
.td-dept { text-align: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #000; vertical-align: middle; }
.dot.inarbeit { background: #facc15; border-color: #000; }     /* gelb + schwarze Kontur */
.dot.offen { background: #9ca3af; border-color: #374151; }     /* grau */
.dot.wartend { background: #fb923c; border-color: #7c2d12; }   /* orange */
.dot.genehmigt { background: #93c5fd; border-color: #1e3a8a; } /* blau */
.dot.umgesetzt { background: #86efac; border-color: #065f46; } /* grün */
.dot.abgelehnt { background: #fca5a5; border-color: #7f1d1d; } /* rot */
.dot.inaktiv { background: #e5e7eb; border-color: #9ca3af; }   /* hellgrau */


/* Clickable dot links */
.dot-link { display: inline-block; padding: 6px; line-height: 0; }
.dot-link:focus { outline: 2px solid #94a3b8; outline-offset: 2px; border-radius: 6px; }

.form-row{margin:8px 0}
.form-row label{display:block;font-weight:600}
.form-row input,.form-row select,.form-row textarea{width:100%}


/* Secondary button style */
.btn.secondary{background:#f1f5f9;border:1px solid #cbd5e1;color:#0f172a}
.btn.secondary:hover{background:#e2e8f0}


/* === Patch 2025-08-16: task dot colors + Stammdaten widths === */
.dot.in_bearbeitung { background: #facc15; border-color: #000; }
.dot.erledigt { background: #86efac; border-color: #065f46; }
.dot.zurueckgezogen { background: #fca5a5; border-color: #7f1d1d; }
.stammdaten th { width: 15%; text-align: left; } .stammdaten td { width: 85%; }


/* === PATCH 2025-08-16: compact button size for filters === */
.btn.sm{ padding:4px 8px; line-height:1.2; height:auto; font-size:0.95rem; }

/* Compact select for Kostenstelle on /problems */
.kst-select{max-height:160px; overflow:auto;}


/* /problems add form layout: focus on Beschreibung */
.problem-form{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.problem-form .main label{display:block;width:100%}
.problem-form textarea{min-height:140px}
.problem-form .side{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.problem-form .side select{max-width:220px}
.problem-form .side .btn{width:100%}


/* Detaillierte Änderungsliste */
.dchange-table { width:100%; border-collapse: collapse; margin-top:8px; }
.dchange-table th, .dchange-table td { border:1px solid #ddd; padding:6px 8px; vertical-align: top; }
.dchange-table thead th { background:#f3f4f6; }
.stand-editor { display:flex; gap:16px; align-items:flex-start; }
.stand-editor .stand-col { flex:1; min-width: 320px; }
.stand-editor table { width:100%; border-collapse: collapse; margin-bottom:6px; }
.stand-editor th, .stand-editor td { border:1px solid #ddd; padding:4px; }
.form-grid label { display:block; margin:6px 0; }
.type-block fieldset { border:1px solid #ddd; padding:8px; margin:8px 0; }


/* Detaillierte Änderungsliste – Modal layout fixes v2 */
.modal .panel { max-width: 980px; width: 95%; margin: 5vh auto; box-sizing: border-box; }
.uf-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:8px; align-items:start; }
#universal-fields[hidden] { display:none !important; }
#dchange-form .form-grid label { display:block; margin:6px 0; }
#dchange-form input[type="text"], #dchange-form input[type="number"], #dchange-form select { width:100%; }


/* Detaillierte Änderungsliste – 11 Feld Modal */
.modal .panel { max-width: 840px; width: 95%; margin: 5vh auto; box-sizing: border-box; }
#universal-fields[hidden] { display:none !important; }
.uf-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.uf-grid label { display:block; }
#dchange-form input[type="text"], #dchange-form input[type="number"], #dchange-form select { width: 100%; }


/* Detaillierte Änderungsliste – 11-field modal with two rows */
.modal .panel { max-width: 860px; width: 95%; margin: 5vh auto; box-sizing: border-box; }
#universal-fields[hidden] { display:none !important; }
.row-fields { 
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  align-items: start;
}
.row-fields .uf { display:block; }
#dchange-form input[type="text"], 
#dchange-form input[type="number"], 
#dchange-form select { width: 100%; }


/* Ensure individual fields start hidden; JS will show needed ones */
.row-fields .uf { display: none; }


/* Modal vertical layout with Menge+Einheit inline */
.row-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.row-fields .line.pair {
  display: flex;
  gap: 10px;
  align-items: end;
}
.row-fields .line.pair .uf { 
  display: none; /* start hidden, JS toggles to block */
  flex: 1 1 0;
}
/* base hidden state for all fields */
.row-fields .uf { display: none; }
.row-fields .uf input[type="text"],
.row-fields .uf input[type="number"],
.row-fields .uf select { width: 100%; }


/* === Harmonize number inputs (Menge) with text fields in the Detailed Changes modal === */
.dc-grid input[type="text"],
.dc-grid input[type="number"],
.dc-grid select {
  width: 100%;
  font: inherit;
  box-sizing: border-box;
}

/* Remove native number field quirks and match text input look */
.dc-grid input[type="number"] {
  appearance: none;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  text-align: left;          /* keep alignment like text inputs */
  height: 34px;              /* match text input height (adjust if your theme differs) */
  padding: 6px 10px;         /* match text input padding */
  border: 1px solid #ccc;    /* match text input border */
  border-radius: 4px;        /* match text input radius */
  background: #fff;          /* match text input background */
  line-height: 1.2;
}

/* Hide spinners in WebKit/Blink */
.dc-grid input[type="number"]::-webkit-outer-spin-button,
.dc-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Uniformize number inputs to text style */
input[type=number]{
  appearance:textfield;
  -moz-appearance:textfield;
  -webkit-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}


/* Detailed changes table: fixed widths + alignment */
.table-dc thead tr:last-child th:nth-child(4),
.table-dc tbody td:nth-child(4),
.table-dc thead tr:last-child th:nth-child(9),
.table-dc tbody td:nth-child(9) {
  text-align: right;
}
.table-dc thead tr:last-child th:nth-child(5),
.table-dc tbody td:nth-child(5),
.table-dc thead tr:last-child th:nth-child(10),
.table-dc tbody td:nth-child(10) {
  text-align: left;
}


/* === Admin UI consistency (v14) === */
input[type="text"], input[type="email"], input[type="number"], input[type="password"], select {
  height: 38px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
}
select { min-height: 38px; }
input[type="text"], input[type="email"], input[type="number"], input[type="password"] { min-height: 38px; }
.btn { min-height: 38px; }
label.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* === Admin UI consistency (v17) === */
input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
  height: 38px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 20px;
}
.btn { min-height: 38px; line-height: 20px; }


/* === Fragen mapping full-width selects (v20) === */
table.fragen-map select { width: 100%; display: block; }
table.fragen-map select + select { margin-top: 6px; }