/* ============================================================
   components.css — wiederverwendbare UI-Bausteine, die von
   mehreren Modulen genutzt werden: Badges, Chips, Tabellen,
   Karten-Grundform, Dialoge/Overlays, Toasts, globale Suche,
   Kanban, Bereichs-Punkte. Setzt auf app.css auf.
   ============================================================ */

.search-results{display:none;position:absolute;top:44px;left:0;right:0;max-height:420px;overflow-y:auto;
                  background:var(--white);border:1px solid var(--gray-200);border-radius:4px;
                  box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:60}
.search-results.open{display:block}
.gsr-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--gray-100);cursor:pointer}
.gsr-item:last-child{border-bottom:0}
.gsr-item:hover{background:var(--gray-100)}
.gsr-badge{font-size:11px;font-weight:600;color:var(--gray-700);background:var(--gray-100);border-radius:3px;padding:2px 6px;white-space:nowrap}
.gsr-title{flex:1;font-size:14px;color:var(--gray-900)}
.gsr-sub{font-size:12px;color:var(--gray-500)}
.gsr-empty{padding:16px;font-size:13px;color:var(--gray-500)}
#toast-container{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{background:var(--gray-900);color:#fff;padding:10px 16px;border-radius:4px;font-size:13px;font-weight:500;
         box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:0;transform:translateY(8px);
         transition:opacity .2s ease,transform .2s ease;max-width:320px}
.toast.show{opacity:1;transform:translateY(0)}
.list li.clickable{cursor:pointer}
.list li.clickable:hover{background:var(--gray-100)}
.chip{height:32px;padding:0 var(--s3);border-radius:16px;border:1px solid var(--gray-300);background:var(--white);
        color:var(--gray-700);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.chip.active{background:var(--primary-100);border-color:var(--primary-600);color:var(--primary-700);font-weight:600}
.chip.value::after{content:"×";color:var(--gray-500);margin-left:2px}
.select{height:36px;padding:0 var(--s3);border:1px solid var(--gray-300);border-radius:4px;background:var(--white);
          color:var(--gray-700);font-size:13px;display:inline-flex;align-items:center;gap:var(--s2)}
.select::after{content:"▾";color:var(--gray-500);font-size:11px}
.badge{height:20px;display:inline-flex;align-items:center;padding:0 8px;border-radius:4px;font-size:12px;font-weight:600}
.badge.neutral{background:var(--gray-100);color:var(--gray-700)}
.badge.outline{background:var(--olive-100);border:1px solid transparent;color:var(--olive-700)}
.badge.info{background:var(--info-fill);color:var(--info-text)}
.badge.success{background:var(--success-fill);color:var(--success-text)}
.badge.warning{background:var(--warning-fill);color:var(--warning-text)}
.badge.error{background:var(--terracotta-fill);color:var(--terracotta-text)}
.badge.ki{background:transparent;border:1px dashed var(--gray-400);color:var(--gray-500)}
.berdot{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.berdot::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--b,var(--gray-400))}
/* Tabellen */
.table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--gray-200);border-radius:6px;overflow:hidden}
.table th{font-size:12px;font-weight:600;color:var(--gray-700);background:var(--sage-50);text-align:left;
            padding:0 var(--s3);height:40px;border-bottom:1px solid var(--gray-300);white-space:nowrap}
.table td{padding:var(--s3);border-bottom:1px solid var(--gray-200);vertical-align:middle;font-size:14px}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--sage-50)}
.table td.num,.table th.num{text-align:right;font-family:var(--mono)}
.table .title{font-weight:600}
.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:var(--s5);
        box-shadow:0 1px 3px rgba(20,24,28,.05);border-left:3px solid transparent;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.card:hover{border-color:var(--gray-300);box-shadow:0 6px 20px rgba(20,24,28,.09);transform:translateY(-2px)}
.card h3{margin:0 0 var(--s2);font-size:16px;font-weight:600}
.card p{margin:0 0 var(--s4);color:var(--gray-700)}
.card .meta{font-size:12px;color:var(--gray-500);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
/* Bereichsfarbe als Seitenlinie (nutzt die bereits vorhandenen .berdot-Klassen im Karteninhalt) */
.card:has(.ber-baustoffe){border-left-color:var(--ber-baustoffe)}
.card:has(.ber-baumaerkte){border-left-color:var(--ber-baumaerkte)}
.card:has(.ber-garden){border-left-color:var(--ber-garden)}
/* Gefährdete/überfällige Karten (z. B. Projekte) deutlicher hervorheben */
.card:has(.badge.error){border-left-color:var(--terracotta-text);box-shadow:0 1px 3px rgba(138,58,29,.12)}
.card:has(.badge.warning):not(:has(.badge.error)){border-left-color:var(--warning-text)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--gray-200)}
.list li:last-child{border-bottom:0}
.list .when{font-family:var(--mono);font-size:12px;color:var(--gray-500);min-width:56px}
.searchbox{height:36px;border:1px solid var(--gray-300);border-radius:4px;display:flex;align-items:center;padding:0 10px;gap:8px;background:var(--white);color:var(--gray-500)}
.searchbox input{border:0;outline:0;font-size:14px;background:transparent;color:var(--gray-900);width:200px}
.fsel{height:36px;padding:0 10px;border:1px solid var(--gray-300);border-radius:4px;background:var(--white);color:var(--gray-700);font-size:13px;font-family:var(--sans)}
.iconbtn{height:28px;padding:0 8px;border:1px solid var(--gray-300);border-radius:4px;background:var(--white);color:var(--slate-700);font-size:12px}
.iconbtn:hover{background:var(--gray-100)}
.iconbtn.danger{color:var(--error-text);border-color:var(--error-fill)}
/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.kcol{background:var(--sage-50);border:1px solid var(--gray-200);border-top:3px solid var(--mod-aufgaben);border-radius:6px;padding:12px;min-height:120px}
.kcol > h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--sage-700);display:flex;justify-content:space-between}
.kcard{background:var(--white);border:1px solid var(--gray-200);border-radius:6px;padding:12px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(20,24,28,.04);transition:box-shadow .12s ease,border-color .12s ease}
.kcard:hover{border-color:var(--mod-aufgaben);box-shadow:0 3px 10px rgba(20,24,28,.1)}
.kcard.overdue{border-left:3px solid var(--terracotta-text)}
.kcard .t{font-weight:600;margin-bottom:6px}
.kcard .m{font-size:12px;color:var(--gray-500);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kcard .kdesc{font-size:12px;color:var(--gray-500);line-height:1.4;margin-bottom:8px;overflow-wrap:break-word}
.kcard[draggable="true"]{cursor:grab}
.kcard.dragging{opacity:.4}
.kcol.dragover{background:var(--mod-aufgaben-fill);outline:2px dashed var(--mod-aufgaben);outline-offset:-2px}
/* Modal / Dialog */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:48px 16px}
.overlay.open{display:flex}
.modal{background:var(--white);border-radius:4px;width:640px;max-width:100%}
.modal .mhead{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--gray-200)}
.modal .mhead h2{margin:0;font-size:16px;font-weight:600}
.modal .mhead .x{border:0;background:transparent;font-size:18px;color:var(--gray-500);cursor:pointer}
.modal .mbody{padding:24px;max-height:68vh;overflow:auto}
.modal .mfoot{height:64px;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 24px;border-top:1px solid var(--gray-200)}
.modal .mfoot .left{margin-right:auto}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-size:12px;font-weight:600;color:var(--gray-700)}
.field label .opt{color:var(--gray-500);font-weight:400}
.field input,.field select,.field textarea{height:36px;border:1px solid var(--gray-300);border-radius:6px;padding:0 10px;font-size:14px;font-family:var(--sans);color:var(--gray-900);background:var(--white);transition:border-color .12s ease,box-shadow .12s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-100)}
.field textarea{height:auto;min-height:72px;padding:8px 10px;resize:vertical}
.field .err{color:var(--error-text);font-size:12px}
.card.idea{cursor:pointer}
.card.trend{cursor:pointer}
.card.trend.hot{border-left:3px solid var(--error-text)}
.card .cardact{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;border-top:1px solid var(--gray-200);padding-top:12px}
.card .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.statline{display:flex;flex-direction:column;gap:8px}
.statline .row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--gray-200);padding-bottom:6px}
.statline .row:last-child{border-bottom:0}
.statline .n{font-family:var(--mono);font-weight:600}