:root { font-family: Inter, Segoe UI, Arial, sans-serif; color: #1f2937; background: #f3f5f4; }
* { box-sizing: border-box; }
body { margin: 0; background: #f3f5f4; }
a { color: inherit; }
.topbar { height: 68px; padding: 0 24px; display:flex; align-items:center; justify-content:space-between; background:#173f35; color:white; }
.topbar strong { font-size: 1.15rem; }
.topbar .subtitle { margin-left:12px; opacity:.75; font-size:.9rem; }
.topbar nav { display:flex; gap:18px; }
.topbar nav a { color:white; text-decoration:none; opacity:.9; }
.main-content { min-height: calc(100vh - 68px); }
.collection-page { display:grid; grid-template-columns:minmax(430px, 44%) 1fr; min-height:calc(100vh - 68px); }
.list-panel { background:white; border-right:1px solid #dfe5e2; padding:22px; min-width:0; }
.detail-panel { padding:26px 30px; overflow:auto; }
.panel-header h1, .detail-toolbar h2, .public-object h1 { margin:0; }
.muted { color:#6b7280; margin-top:5px; }
.filters { display:grid; grid-template-columns:1fr 190px auto; gap:9px; margin:20px 0 8px; }
.form-control,.form-select { width:100%; border:1px solid #cbd5d1; border-radius:7px; padding:9px 10px; font:inherit; background:white; }
.textarea { min-height:95px; resize:vertical; }
.btn { border:0; border-radius:7px; padding:9px 13px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.btn-primary { background:#216a57; color:white; }
.btn-secondary { background:#e5ece9; color:#173f35; }
.result-info { color:#6b7280; font-size:.85rem; margin:10px 2px; }
.object-list { border-top:1px solid #e5e7eb; max-height:calc(100vh - 210px); overflow:auto; }
.object-row { width:100%; display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; padding:12px 8px; background:white; border:0; border-bottom:1px solid #edf0ef; text-align:left; cursor:pointer; }
.object-row:hover,.object-row.selected { background:#edf6f2; }
.object-number { font-weight:700; color:#216a57; }
.object-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.object-main strong,.object-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.object-main span { color:#6b7280; font-size:.86rem; }
.status-pill { border-radius:999px; padding:5px 8px; background:#edf1ef; font-size:.78rem; white-space:nowrap; }
.empty-state,.empty-detail { padding:35px 12px; color:#6b7280; text-align:center; }
.detail-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:#648078; margin-bottom:6px; font-weight:700; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:20px; align-items:start; }
.detail-photo { width:100%; max-height:430px; object-fit:contain; background:white; border-radius:10px; border:1px solid #dfe5e2; }
.photo-placeholder { min-height:260px; border:1px dashed #b7c3bf; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:10px; color:#6b7280; background:white; }
.qr-card { background:white; border:1px solid #dfe5e2; border-radius:10px; padding:12px; text-align:center; }
.qr-card img { width:145px; max-width:100%; }
.qr-card small { display:block; word-break:break-all; color:#6b7280; margin-top:7px; }
.info-sections { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.info-card { background:white; border:1px solid #dfe5e2; border-radius:10px; padding:16px 18px; }
.info-card h3 { margin:0 0 12px; color:#173f35; }
.info-card h4 { margin-bottom:6px; }
.wide-card { grid-column:1 / -1; }
dl { display:grid; grid-template-columns:145px 1fr; gap:8px 12px; margin:0; }
dt { color:#66756f; font-weight:600; } dd { margin:0; white-space:pre-line; }
.edit-actions { display:flex; gap:8px; margin:16px 0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; background:white; padding:18px; border:1px solid #dfe5e2; border-radius:10px; }
.form-grid label { display:flex; flex-direction:column; gap:5px; color:#46534f; font-size:.88rem; font-weight:600; }
.form-grid .wide { grid-column:1/-1; }
.checkbox-label { flex-direction:row!important; align-items:center; }
.narrow-page { max-width:850px; margin:0 auto; padding:34px 24px; }
.message { margin-top:18px; padding:15px; border-radius:8px; }
.message.success { background:#e7f5ee; border:1px solid #9fd0bc; }
.message.error { background:#fff0ef; border:1px solid #e0aaa6; }
.public-object { max-width:1050px; margin:0 auto; padding:40px 24px 70px; }
.public-heading { margin-bottom:20px; }
.public-heading .lead { font-size:1.2rem; color:#5c6d67; }
.public-photo { width:100%; max-height:620px; object-fit:contain; background:white; border:1px solid #dfe5e2; border-radius:12px; }
.public-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:28px; margin-top:28px; }
.public-grid section { background:white; border:1px solid #dfe5e2; border-radius:10px; padding:20px; }
.public-grid h2 { color:#173f35; margin-top:0; }
.label-page { padding:30px; }
.label-card { width:90mm; border:1px solid #222; background:white; padding:5mm; }
.label-brand { font-size:12pt; font-weight:700; border-bottom:1px solid #ccc; padding-bottom:3mm; margin-bottom:3mm; }
.label-content { display:grid; grid-template-columns:32mm 1fr; gap:4mm; align-items:center; }
.label-content img { width:32mm; height:32mm; }
.label-content strong { display:block; font-size:14pt; margin-bottom:2mm; }
.label-content small { display:block; margin-top:2mm; }
@media (max-width: 1000px) {
  .collection-page { grid-template-columns:1fr; }
  .list-panel { border-right:0; border-bottom:1px solid #dfe5e2; }
  .object-list { max-height:480px; }
  .filters { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .topbar { height:auto; min-height:68px; gap:12px; flex-direction:column; align-items:flex-start; padding:14px 18px; }
  .collection-page { min-height:auto; }
  .detail-panel { padding:20px 16px; }
  .detail-grid,.info-sections,.public-grid,.form-grid { grid-template-columns:1fr; }
  .qr-card { max-width:190px; }
  .wide-card,.form-grid .wide { grid-column:auto; }
  .detail-toolbar { flex-direction:column; }
}
@media print {
  .topbar,.no-print { display:none!important; }
  .main-content { min-height:auto; }
  .label-page { padding:0; }
  .label-card { border:0; }
}

/* Excel-import voortgang */
.import-actions { display:flex; gap:10px; align-items:center; margin-top:18px; }
.import-progress-card { margin-top:18px; padding:16px; border:1px solid #d6e1dd; border-radius:10px; background:#f8fbfa; }
.import-progress-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:9px; }
.import-progress-track { width:100%; height:18px; background:#e3ebe8; border-radius:999px; overflow:hidden; }
.import-progress-bar { height:100%; background:#216a57; transition:width .15s ease; }
.import-progress-detail { display:flex; justify-content:space-between; gap:18px; margin-top:8px; font-size:.9rem; color:#52635e; }

/* Login */
.login-page { min-height:calc(100vh - 68px); display:flex; align-items:center; justify-content:center; padding:30px 18px; }
.login-card { width:min(430px,100%); background:white; border:1px solid #dfe5e2; border-radius:14px; padding:28px; box-shadow:0 12px 35px rgba(23,63,53,.08); }
.login-card h1 { margin:4px 0 6px; }
.login-form { display:grid; gap:14px; margin-top:22px; }
.login-form label { display:grid; gap:6px; font-weight:600; color:#46534f; }
.login-button { margin-top:4px; width:100%; }

/* Dozen */
.boxes-page { display:grid; grid-template-columns:minmax(390px,42%) 1fr; min-height:calc(100vh - 68px); }
.boxes-list-panel { background:white; border-right:1px solid #dfe5e2; padding:22px; }
.box-edit-panel { padding:26px 30px; }
.box-list { border-top:1px solid #e5e7eb; margin-top:18px; max-height:calc(100vh - 180px); overflow:auto; }
.box-row { width:100%; display:flex; justify-content:space-between; gap:18px; align-items:center; text-align:left; border:0; border-bottom:1px solid #edf0ef; background:white; padding:13px 9px; cursor:pointer; }
.box-row:hover,.box-row.selected { background:#edf6f2; }
.box-row > div:first-child { display:flex; flex-direction:column; gap:3px; }
.box-row span { color:#6b7280; font-size:.86rem; }
.box-count { color:#216a57; font-size:.82rem; white-space:nowrap; }
.box-contents { margin-top:20px; }
.box-object-link { display:block; padding:7px 0; border-bottom:1px solid #edf0ef; color:#216a57; text-decoration:none; }
.box-object-link:hover { text-decoration:underline; }
@media (max-width:900px) { .boxes-page { grid-template-columns:1fr; } .boxes-list-panel { border-right:0; border-bottom:1px solid #dfe5e2; } .box-list { max-height:420px; } }

/* Objectdetail vanuit dozenbeheer */
.object-detail-page { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
.object-detail-grid { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(340px,1fr) minmax(340px,1fr); gap: 1rem; align-items: start; }
.detail-page-photo { display:block; width:100%; max-height:520px; object-fit:contain; border-radius:8px; }
.wide-card { grid-column:1/-1; }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }
@media (max-width:1000px){.object-detail-grid{grid-template-columns:1fr}.wide-card{grid-column:auto}}


/* Publieke collectie: bewust zonder beheer-navigatie */
.public-shell { min-height: 100vh; display: flex; flex-direction: column; background: #f6f4ef; }
.public-topbar { background: #ffffff; border-bottom: 1px solid #dedbd2; padding: 1rem clamp(1rem, 4vw, 3rem); }
.public-brand { display: flex; flex-direction: column; gap: .1rem; }
.public-brand strong { font-size: 1.15rem; }
.public-brand span { color: #6b6b67; font-size: .92rem; }
.public-main { flex: 1; }
.public-footer { padding: 1rem clamp(1rem, 4vw, 3rem); border-top: 1px solid #dedbd2; color: #6b6b67; font-size: .86rem; background: #fff; }

.file-upload-label { display:flex; flex-direction:column; gap:7px; margin-top:18px; font-weight:600; }
.file-upload-label input[type=file] { display:block; width:100%; padding:10px; border:1px solid #cbd8d4; border-radius:8px; background:#fff; font-weight:400; }

/* Mobiele opbergfunctie via de bestaande publieke QR-code */
.packing-card { margin-top:20px; background:#fff; border:2px solid #216a57; border-radius:12px; padding:18px 20px; }
.packing-card h2 { margin:0 0 5px; color:#173f35; }
.packing-card p { margin:0 0 12px; color:#5c6d67; }
.packing-actions { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:12px; align-items:end; }
.packing-actions label { display:grid; gap:6px; font-weight:700; color:#46534f; }
.packing-save { min-height:44px; }
.packing-current { margin-top:12px; padding-top:10px; border-top:1px solid #e4e9e7; color:#52635e; }
.box-row-meta { display:flex; align-items:center; gap:10px; }
@media (max-width:700px) {
  .public-object { padding:22px 14px 50px; }
  .packing-actions { grid-template-columns:1fr; }
  .packing-save { width:100%; min-height:48px; }
  .packing-card { padding:16px; }
  .box-row-meta { align-items:flex-end; flex-direction:column; gap:5px; }
}


/* Publieke scanpagina: foto bewust zichtbaar als laatste objectcontrole voor medewerker. */
.public-photo-check {
    margin: 18px 0 20px;
    padding: 14px;
    background: #fff;
    border: 1px solid #dfe5e2;
    border-radius: 12px;
}
.public-photo-check .public-photo {
    display: block;
    margin-top: 8px;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    background: #fff;
    border: 0;
}