/* Webapp (admin + materiaal) — Tuinwerken Wout-groen, in een lichte en een donkere stand. De stand staat op ; 'systeem' volgt de computer. */ :root{ color-scheme:light; --page:#fbfdfc; --surface:#f2f7f4; --card:#ffffff; --hairline:#e0e9e4; --ink:#26332d; --ink-display:#122019; --ink-muted:#6b7f75; --accent:#1f6b4e; --accent-dark:#174f3a; --accent-faded:#e6f3ec; --accent-ink:#ffffff; --danger:#b3372c; --danger-faded:#faeceb; --danger-line:#f0cdc9; --warn:#8a6d1f; --warn-faded:#fbf4de; --warn-line:#eadfb9; --ok:#1f6b4e; --sidebar:#0d2b22; --sidebar-ink:#dcefe5; --sidebar-dim:#b9d4c8; --sidebar-mark:#164434; --input:#ffffff; --schaduw:0 1px 2px rgba(18,32,25,.04); --radius:12px; --radius-sm:8px; } /* Donker: expliciet gekozen, óf systeemstand op een donkere computer. */ @media (prefers-color-scheme: dark){ :root:not([data-thema="licht"]){ color-scheme:dark; --page:#0e1512; --surface:#18211d; --card:#151e1a; --hairline:#28352e; --ink:#dde8e2; --ink-display:#f1f7f4; --ink-muted:#92a79d; --accent:#4fb389; --accent-dark:#6ecba0; --accent-faded:#143026; --accent-ink:#062018; --danger:#ff8f83; --danger-faded:#2f1815; --danger-line:#5a2b25; --warn:#e9c46a; --warn-faded:#2e2712; --warn-line:#584a20; --ok:#6ecba0; --sidebar:#0a1310; --sidebar-ink:#d9ebe2; --sidebar-dim:#9fbcb0; --sidebar-mark:#16352a; --input:#111a16; --schaduw:0 1px 2px rgba(0,0,0,.35); } } :root[data-thema="donker"]{ color-scheme:dark; --page:#0e1512; --surface:#18211d; --card:#151e1a; --hairline:#28352e; --ink:#dde8e2; --ink-display:#f1f7f4; --ink-muted:#92a79d; --accent:#4fb389; --accent-dark:#6ecba0; --accent-faded:#143026; --accent-ink:#062018; --danger:#ff8f83; --danger-faded:#2f1815; --danger-line:#5a2b25; --warn:#e9c46a; --warn-faded:#2e2712; --warn-line:#584a20; --ok:#6ecba0; --sidebar:#0a1310; --sidebar-ink:#d9ebe2; --sidebar-dim:#9fbcb0; --sidebar-mark:#16352a; --input:#111a16; --schaduw:0 1px 2px rgba(0,0,0,.35); } *{box-sizing:border-box;} html{font-size:16px;-webkit-font-smoothing:antialiased;} body{ margin:0;background:var(--page);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:.95rem;line-height:1.55; } h1{font-size:1.55rem;letter-spacing:-0.02em;color:var(--ink-display);margin:0 0 .2rem;} h2{font-size:1.05rem;color:var(--ink-display);margin:1.6rem 0 .7rem;} h3{font-size:.95rem;color:var(--ink-display);margin:0 0 .5rem;} h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);margin:.6rem 0 .3rem;} a{color:var(--accent);text-decoration:none;} a:hover{color:var(--accent-dark);} p{margin:.3rem 0;} .muted{color:var(--ink-muted);} .small{font-size:.83rem;} .center{text-align:center;} .nowrap{flex-wrap:nowrap;} .error{color:var(--danger);background:var(--danger-faded);border:1px solid var(--danger-line);padding:.6rem .9rem;border-radius:var(--radius-sm);margin-bottom:1rem;} /* Shell */ .shell{display:flex;min-height:100vh;} .sidebar{ width:230px;flex-shrink:0;background:var(--sidebar);color:var(--sidebar-ink); display:flex;flex-direction:column;padding:1.1rem .8rem;position:sticky;top:0;height:100vh; } .brand{display:flex;align-items:center;gap:.6rem;padding:.2rem .5rem 1rem;font-weight:700;font-size:.92rem;line-height:1.2;} .brand small{display:block;font-weight:400;font-size:.72rem;color:var(--sidebar-dim);} .mark{width:34px;height:34px;border-radius:9px;background:var(--sidebar-mark);color:#c9f2da;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;} .mark.lg{width:48px;height:48px;font-size:1.3rem;border-radius:12px;margin:0 auto;} .sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1;} .sidebar nav a{ display:flex;align-items:center;gap:.6rem;color:var(--sidebar-dim);padding:.6rem .6rem; border-radius:var(--radius-sm);font-size:.92rem;font-weight:500; } .sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff;} .sidebar nav a.active{background:var(--accent);color:var(--accent-ink);} .sidebar .ic{width:1.2rem;text-align:center;opacity:.9;} .sidebar .pill{margin-left:auto;background:#ff8a80;color:#3a0f0a;font-size:.7rem;font-weight:700;border-radius:99px;padding:.05rem .45rem;} .sidebar .pill[hidden]{display:none;} .logout-form{border-top:1px solid rgba(255,255,255,.12);padding-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;} .me{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--sidebar-ink);} .main{flex:1;padding:1.6rem 2rem 4rem;max-width:1200px;} /* Thema-kiezer */ .thema-kiezer{display:flex;gap:2px;background:rgba(255,255,255,.07);border-radius:var(--radius-sm);padding:3px;margin:.6rem 0;} .thema-kiezer button{ flex:1;border:none;background:none;color:var(--sidebar-dim);font:inherit;font-size:.72rem;font-weight:600; padding:.35rem .2rem;border-radius:6px;cursor:pointer;white-space:nowrap; } .thema-kiezer button:hover{color:#fff;} .thema-kiezer button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;} @media (max-width:900px){ .shell{flex-direction:column;} .sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;} .sidebar nav{flex-direction:row;flex-wrap:wrap;} .thema-kiezer{width:auto;} .main{padding:1rem;} .cols{flex-direction:column;} } /* Koppen & layout */ .page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap;} .crumb{font-size:.8rem;color:var(--ink-muted);margin:0 0 .3rem;} .cols{display:flex;gap:2rem;align-items:flex-start;} .col{flex:1;min-width:0;} .row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;} .row.between{justify-content:space-between;} .inline{display:inline;} .opslaan-rij{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap;} .opslaan-rij select{width:auto;min-width:11rem;} /* Knoppen */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; border:none;border-radius:var(--radius-sm);padding:.55rem 1rem;font-size:.88rem;font-weight:600; cursor:pointer;font-family:inherit;text-decoration:none; } .btn.primary{background:var(--accent);color:var(--accent-ink);} .btn.primary:hover{background:var(--accent-dark);color:var(--accent-ink);} .btn.ghost{background:var(--surface);color:var(--ink-display);border:1px solid var(--hairline);} .btn.ghost:hover{background:var(--hairline);color:var(--ink-display);} .btn.danger{color:var(--danger);} .btn.small{padding:.3rem .7rem;font-size:.8rem;} .btn.block{width:100%;} button.x{background:none;border:none;color:var(--ink-muted);cursor:pointer;font-size:.9rem;padding:.2rem .4rem;} button.x:hover{color:var(--danger);} /* Cards & stats */ .card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:.9rem 1rem;margin-bottom:.7rem;display:block;box-shadow:var(--schaduw);} .callout{background:var(--warn-faded);border-color:var(--warn-line);} .stat-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem;} .stat{flex:1;min-width:130px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:.8rem 1rem;text-align:center;color:var(--ink);} .stat b{display:block;font-size:1.4rem;color:var(--accent);} .stat span{font-size:.78rem;color:var(--ink-muted);} /* Badges */ .badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.15rem .55rem;border-radius:99px;background:var(--surface);color:var(--ink-muted);border:1px solid var(--hairline);white-space:nowrap;} .badge.danger{background:var(--danger-faded);color:var(--danger);border-color:var(--danger-line);} .badge.ok{background:var(--accent-faded);color:var(--accent);border-color:var(--accent);} .badge.new{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);} .badge.warn-badge{background:var(--warn-faded);color:var(--warn);border-color:var(--warn-line);margin-left:.4rem;} .badge.st-bezig,.badge.mat-ok{background:var(--accent-faded);color:var(--accent);border-color:var(--accent);} .badge.st-gepauzeerd,.badge.mat-in_herstelling{background:var(--warn-faded);color:var(--warn);border-color:var(--warn-line);} .badge.mat-defect{background:var(--danger-faded);color:var(--danger);border-color:var(--danger-line);} .badge.st-klaar{background:var(--surface);color:var(--ink-muted);} .badge.st-gepland{background:var(--surface);} /* Jobkaarten */ .job-card{display:block;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:.75rem .9rem;margin-bottom:.6rem;color:var(--ink);} .job-card:hover{border-color:var(--accent);color:var(--ink);} .job-card.bezig{border-left:4px solid var(--accent);} .job-card.klaar{opacity:.65;} .jc-type{font-weight:700;color:var(--ink-display);margin:.15rem 0;} .avatars{display:inline-flex;} .avatar{width:28px;height:28px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;border:2px solid var(--card);} .avatar.sm{width:26px;height:26px;} .avatars .avatar{margin-left:-6px;} .avatars .avatar:first-child{margin-left:0;} /* Kanban */ .kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;align-items:start;} @media (max-width:1300px){.kanban{grid-template-columns:repeat(3,1fr);}} @media (max-width:1000px){.kanban{grid-template-columns:1fr 1fr;}} .kanban-col{background:var(--surface);border-radius:var(--radius);padding:.7rem;} .kanban-col h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);margin:.1rem .2rem .6rem;} .kanban-drop{min-height:3rem;display:flex;flex-direction:column;gap:.5rem;border-radius:var(--radius-sm);} .kanban-drop.over{outline:2px dashed var(--accent);outline-offset:2px;} .kanban-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.6rem .7rem;cursor:grab;} .kanban-card.dragging{opacity:.5;} .kanban-card .value{color:var(--accent);font-weight:700;} /* Week planning */ .week{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;align-items:start;margin-bottom:1.4rem;} @media (max-width:1000px){.week{grid-template-columns:repeat(2,1fr);}} .day{background:var(--surface);border-radius:var(--radius);padding:.6rem;min-height:8rem;} .day.today{outline:2px solid var(--accent);} .day h3{font-size:.8rem;text-transform:capitalize;color:var(--ink-muted);margin:.1rem .2rem .5rem;} .add-slot{ display:block;width:100%;text-align:center;color:var(--ink-muted);background:none;font:inherit;font-size:.8rem;font-weight:600; border:1.5px dashed var(--hairline);border-radius:var(--radius-sm);padding:.45rem .2rem;cursor:pointer; } .add-slot:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-faded);} /* Tabellen */ .table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem;} .table th{background:var(--surface);text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);padding:.55rem .8rem;} .table td{padding:.5rem .8rem;border-top:1px solid var(--hairline);vertical-align:middle;} .table tr.totaal td{background:var(--accent-faded);} .table tr.warn-row td{background:var(--danger-faded);} .table tr.low-row td{background:var(--warn-faded);} .table tr.klikbaar:hover td{background:var(--accent-faded);} .card.warn-row{background:var(--danger-faded);} .card.low-row{background:var(--warn-faded);} .mat-naam{font-weight:700;font-size:.95rem;} .opmerking-cel form{width:100%;} /* Formulieren */ label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-display);} input,select,textarea{ width:100%;font-family:inherit;font-size:.9rem;color:var(--ink); background:var(--input);border:1px solid var(--hairline);border-radius:var(--radius-sm); padding:.5rem .65rem;margin-top:.25rem; } input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);} .grid-form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:end;} .grid-form .span2{grid-column:span 2;} .grid-form button{justify-self:start;} .form-card{padding:1rem;} .snel-toevoegen{padding:.6rem .8rem;margin-bottom:.5rem;} .snel-toevoegen summary{font-size:.85rem;} .form-card summary{cursor:pointer;font-weight:700;color:var(--accent);font-size:1rem;padding:.2rem 0;} .form-card form{margin-top:.9rem;} fieldset{border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.6rem .8rem;background:var(--card);} legend{font-size:.85rem;font-weight:700;padding:0 .3rem;color:var(--ink-display);} .werker-picks{display:flex;gap:1rem;flex-wrap:wrap;} .pick{display:flex;align-items:center;gap:.4rem;font-weight:500;cursor:pointer;padding:.25rem .1rem;} .pick input{width:auto;margin:0;transform:scale(1.15);} .regel-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;} .regel-form input,.regel-form select{width:auto;margin:0;} .regel-form input[name=description]{flex:1;min-width:10rem;} /* Klant zoeken (combobox) */ .combo{position:relative;} .combo-list{ list-style:none;margin:.2rem 0 0;padding:.25rem;position:absolute;z-index:20;left:0;right:0; background:var(--card);border:1px solid var(--accent);border-radius:var(--radius-sm); max-height:15rem;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.18); } .combo-list li{padding:.5rem .6rem;border-radius:6px;cursor:pointer;font-size:.9rem;} .combo-list li:hover,.combo-list li.actief{background:var(--accent-faded);color:var(--ink-display);} .combo-list li small{display:block;color:var(--ink-muted);font-size:.75rem;} .combo-list[hidden]{display:none;} .chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem;} .chips .chip{ background:var(--surface);border:1px solid var(--hairline);border-radius:99px; padding:.25rem .7rem;font-size:.8rem;cursor:pointer;font-family:inherit;color:var(--ink); } .chips .chip:hover,.chips .chip.actief{border-color:var(--accent);background:var(--accent-faded);color:var(--ink-display);} .chips .chip-label{font-size:.78rem;color:var(--ink-muted);align-self:center;} /* Materiaal aanvinken */ .mat-picks{max-height:16rem;overflow:auto;margin-top:.5rem;border-top:1px solid var(--hairline);padding-top:.4rem;} .mat-groep h4{margin:.5rem 0 .2rem;} .mat-pick{border-radius:6px;padding:.3rem .4rem;} .mat-pick:hover{background:var(--surface);} .mat-pick.defect span{color:var(--danger);} .mat-pick[hidden]{display:none;} .mat-groep[hidden]{display:none;} /* Taken, todos, meldingen, notities */ .task-line{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.45rem .7rem;margin-bottom:.4rem;} .task-line.done span{color:var(--ink-muted);text-decoration:line-through;} .todo-row{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.5rem .7rem;margin-bottom:.4rem;} .todo-row.done span{color:var(--ink-muted);text-decoration:line-through;} .check{width:22px;height:22px;border-radius:6px;border:2px solid var(--ink-muted);background:var(--card);cursor:pointer;flex-shrink:0;margin:0;padding:0;} .check:hover{border-color:var(--accent);} .check.checked{background:var(--accent);border-color:var(--accent);position:relative;} .check.checked::after{content:"✓";color:var(--accent-ink);font-size:.8rem;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .melding p,.notitie p{margin:.4rem 0;} .melding.behandeld{opacity:.72;} .melding.nieuw{border-left:4px solid var(--accent);} .melding .mi{font-size:1rem;} .melding-acties{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.5rem;} .melding-acties select{width:auto;min-width:10rem;margin:0;} .melding-foto{max-width:200px;border-radius:var(--radius-sm);display:block;margin:.4rem 0;border:1px solid var(--hairline);} a.card{color:var(--ink);} a.card:hover{border-color:var(--accent);} /* Historiek materiaalprofiel */ .hist{padding:.3rem 1rem;} .hist-line{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--hairline);} .hist-line:last-child{border-bottom:none;} .hist-ic{flex-shrink:0;width:1.4rem;text-align:center;} .hist-top{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;} /* Foto's, laadlijst, facturatie */ .photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;} .photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--hairline);} .laadlijst{padding:.4rem .9rem;} .laad-item{display:flex;justify-content:space-between;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--hairline);font-size:.87rem;} .laad-item:last-child{border-bottom:none;} .laad-item.essentieel span:first-child::before{content:"● ";color:var(--accent);} .laad-item.aanvullend span:first-child::before{content:"○ ";color:var(--ink-muted);} .fact-card{padding:1.1rem 1.2rem;} .fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:.6rem 0;} @media (max-width:800px){.fact-grid{grid-template-columns:1fr;}} /* Login */ .login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,#0d2b22,#174f3a);} .login-card{background:var(--card);border-radius:16px;padding:2.2rem 2rem;width:min(92vw,380px);box-shadow:0 25px 60px rgba(0,0,0,.35);} .login-card h1{text-align:center;margin:.8rem 0 .1rem;} .login-card .muted{text-align:center;margin-bottom:1.2rem;} .login-card label{margin-top:.9rem;} .login-card .btn{margin-top:1.3rem;} /* ---- V3: sub-tabbladen binnen Materiaal (Alles / Machines / Voertuigen / …) ---- */ .subtabs{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1.1rem;border-bottom:1px solid var(--hairline);padding-bottom:.55rem;} .subtabs a{padding:.4rem .85rem;border-radius:99px;font-size:.86rem;font-weight:600; color:var(--ink-muted);border:1px solid transparent;} .subtabs a:hover{background:var(--surface);color:var(--ink-display);} .subtabs a.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);} /* ---- V3: extra jobstatussen + jobbord ---- */ .badge.st-in_te_plannen{background:var(--warn-faded);color:var(--warn);border-color:var(--warn-line);} .badge.st-gefactureerd{background:var(--accent-faded);color:var(--accent);border-color:var(--accent);} #kanban-melding{background:var(--danger-faded);color:var(--danger);border:1px solid var(--danger-line); border-radius:var(--radius-sm);padding:.6rem .9rem;margin-bottom:.9rem;font-size:.88rem;font-weight:600;} .kanban-card .kc-datum{font-weight:700;} .kanban-card .kc-geen-datum{color:var(--warn);font-weight:700;} /* ---- V3: aantal-veldje bij verbruiksgoed in een sjabloon ---- */ .mat-pick .qty{margin-left:auto;} .mat-pick{display:flex;align-items:center;gap:.5rem;} /* ---- V3 stap 4: dubbelboeking ---- */ .conflict-kaart{border:1px solid var(--danger-line);background:var(--danger-faded);color:var(--danger);} .conflict-kaart a{color:var(--danger);text-decoration:underline;} .conflict-lijst{margin:.5rem 0 .4rem;padding-left:1.1rem;} .conflict-lijst li{margin-bottom:.5rem;} .conflict-kaart .muted{color:var(--danger);opacity:.8;} .job-card.heeft-conflict,.kanban-card.heeft-conflict{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger);} .kanban-card.heeft-conflict .badge.danger{margin-bottom:.35rem;} /* ---- V3 stap 9: afgewerkte job als volwaardige melding ---- */ .melding-details{margin:.5rem 0;} .md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.6rem 1rem;margin-bottom:.6rem;} .md-notities{border-left:3px solid var(--hairline);padding-left:.7rem;margin:.4rem 0;} .md-notities p{margin:.2rem 0;} .foto-rij{display:flex;flex-wrap:wrap;gap:.5rem;} .gearchiveerd{margin:0;max-width:14rem;} .gearchiveerd figcaption{margin-top:.25rem;line-height:1.3;} .gearchiveerd code{word-break:break-all;font-size:.72rem;} /* ---- V3 stap 8b: foto-archief ---- */ .klein-blok{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm); padding:.8rem 1rem;font-size:.78rem;line-height:1.5;overflow-x:auto;white-space:pre;} #archVoortgang .error{color:var(--danger);font-weight:600;}