/* Tokens + reset/typografie/[hidden] komen uit css/shared/tokens.css en css/shared/base.css (zie includes/header.php ) — niet hier dupliceren. */ body { display: flex; flex-direction: column; min-height: 100vh; } .page { flex: 1; } /* ── NAV ─────────────────────────────────────── */ .nav-wrap { position: sticky; top: 0; z-index: 100; background: var(--teal); border-bottom: 1px solid var(--sand-line); color:white; } .nav-inner { /* max-width: 1100px; */ margin: 0 auto; padding: 0.875rem 1.25rem; display: flex; align-items: center; justify-content: space-between; } /* ── AUDIOMAP-CONTEXT (balk onder de nav, op breedte van de content) ── */ .project-bar { background: var(--sand); border-bottom: 1px solid var(--sand-line); } .project-bar-inner { max-width: 1100px; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.625rem; } @media (min-width: 700px) { .project-bar-inner { padding-left: 2rem; padding-right: 2rem; } } .project-bar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .project-badge { background: var(--teal-tint); color: var(--teal-deep); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px; white-space: nowrap; } .btn-nav { display: inline-block; font-size: 0.8rem; font-weight: 600; font-family: inherit; padding: 0.85rem; border-radius: var(--radius); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-nav-solid { background: var(--teal); color: #fff; border: 1px solid var(--teal); } .btn-nav-solid:hover { background: var(--teal-deep); border-color: var(--teal-deep); } .btn-nav-ghost { background: transparent; color: var(--teal-deep); border: 1px solid var(--sand-line); } .btn-nav-ghost:hover { background: var(--teal-tint); border-color: var(--teal); } .btn-nav-tint { background: var(--teal-tint); color: var(--teal-deep); border: 1px solid var(--teal); } .btn-nav-tint:hover { background: var(--teal); color: #fff; } .nav-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; -webkit-tap-highlight-color: transparent; } .nav-logo-img { width: 50px; height: 50px; border-radius: 6px; } .nav-logo:hover { color: var(--teal); } /* Hamburger — visible on mobile */ .nav-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 4px; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav dropdown */ .nav-links { display: none; list-style: none; align-items: center; gap: 2rem; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--sand-line); padding: 0.5rem 1.25rem 1rem; z-index: 99; } .nav-links.open li { border-top: 1px solid var(--sand-line); } .nav-links a { text-decoration: none; color: var(--ink-soft); font-size: 0.875rem; font-weight: 500; transition: color 0.15s; display: block; padding: 0.75rem 0; } .nav-links.open a { color: var(--ink); } .nav-links a:hover { /* color: var(--teal); */ color: white; } /* Switch to full nav on desktop */ @media (min-width: 700px) { .nav-inner { padding: 1rem 2rem; } .nav-hamburger { display: none; } .nav-links { display: flex; position: static; border: none; padding: 0; background: none; flex-direction: row; gap: 2rem; } .nav-links li { border: none; } .nav-links a { padding: 0; /* color: var(--ink-soft); */ color: var(--sand-line); } } /* ── ACT AS CUSTOMER (pil links van het logo tijdens impersonatie) ── */ .nav-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .customer-pill { display: flex; align-items: center; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.14); flex-shrink: 1; min-width: 0; } .customer-pill-exit { padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.15s; } .customer-pill-exit:hover { background: rgba(255, 255, 255, 0.34); } .customer-pill-name { padding: 0.5rem 1.1rem; color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 699px) { .customer-pill-name { display: none; } } /* ── BUTTONS ─────────────────────────────────── */ .btn-primary { background: var(--teal); color: #fff; border: none; border-radius: var(--radius); padding: 0.65rem 1.4rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s; white-space: nowrap; } .btn-primary:hover { background: var(--teal-deep); } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-danger { background: #fff; color: #b83232; border: 1px solid #b83232; border-radius: var(--radius); padding: 0.65rem 1.4rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s, transform 0.1s; white-space: nowrap; } .btn-danger:hover { background: #b83232; color: #fff; } .btn-danger:active { transform: scale(0.98); } .btn-full { width: 100%; padding: 0.875rem; font-size: 0.95rem; } .btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 0.65rem 1.4rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s; white-space: nowrap; } .btn-secondary:hover { background: var(--sand); } .btn-secondary:active { transform: scale(0.98); } /* ── FORMS ───────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .form-group label { font-size: 0.825rem; font-weight: 600; color: var(--ink); } .form-group input, .form-group select { border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 0.625rem 0.875rem; font-size: 0.925rem; font-family: inherit; color: var(--ink); background: #fff; outline: none; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; } .form-group select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%234A5B5D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; } .form-group input:focus, .form-group select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); } .combo { position: relative; } .combo-list { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 20; margin: 0; padding: 0.25rem; list-style: none; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid var(--sand-line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(28, 43, 45, 0.12); } .combo-list li { padding: 0.5rem 0.75rem; border-radius: calc(var(--radius) - 6px); cursor: pointer; font-size: 0.9rem; color: var(--ink); } .combo-list li.is-active, .combo-list li:hover { background: var(--teal-tint); } .combo-list li.combo-empty { cursor: default; color: var(--ink-soft); } .combo-list li.combo-empty:hover { background: none; } .form-status { font-size: 0.875rem; margin-bottom: 0.75rem; min-height: 1.25em; } .form-status.error { color: #b83232; font-weight: 500; } /* ── PAGE HEADER + DATA TABLE (customers) ─────── */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .page-header h1 { font-size: 1.4rem; } .page-narrow { max-width: 640px; margin: 0 auto; padding: 2rem 1.25rem; } .page-narrow .auth-card { max-width: none; } @media (min-width: 700px) { .page-narrow { max-width: 80vw; } } .page-wide { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem; } .data-table-wrap { overflow-x: auto; border: 1px solid var(--sand-line); border-radius: var(--radius); background: var(--bg); } table.data-table { border-collapse: collapse; width: 100%; min-width: 480px; } .data-table th, .data-table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--sand-line); text-align: left; font-size: 0.9rem; } .data-table thead th { background: var(--teal-tint); color: var(--teal-deep); font-size: 0.8rem; font-weight: 600; white-space: nowrap; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table td input[type="email"], .data-table td select { border: 1px solid var(--sand-line); border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.85rem; font-family: inherit; width: 100%; min-width: 160px; } /* ── AUTH (login / verify) ──────────────────── */ .auth-wrap { min-height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .auth-card { background: var(--bg); border: 1px solid var(--sand-line); border-radius: calc(var(--radius) * 1.5); padding: 2rem; max-width: 420px; width: 100%; } @media (min-width: 480px) { .auth-card { padding: 2.5rem; } } .auth-logo { width: 64px; height: 64px; border-radius: var(--radius); margin-bottom: 1rem; } .auth-card h1 { font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: 0.35rem; letter-spacing: -0.02em; } .auth-card .intro { color: var(--ink-soft); font-size: 0.875rem; margin-bottom: 1.75rem; } /* ── DASHBOARD CARDS ─────────────────────────── */ .messagepack-search { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .messagepack-search input { max-width: 320px; } .card-grid { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .stat-card { background: var(--bg); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 1.5rem; text-decoration: none; } .stat-card-bottom-actions { display: flex; flex-direction: column; align-items: flex-start; } .stat-card-bottom-actions .settings-list, .stat-card-bottom-actions .settings-empty { align-self: stretch; } /* ── BACK-TO-PROJECT BADGE (routes/media/settings) ──────────── */ .back-badge-wrap { max-width: 1100px; margin: 1.5rem auto 0; padding: 0 1.5rem; } .back-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--teal-deep); text-decoration: none; } .back-badge:hover { color: var(--teal); } .stat-card .stat-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; } .stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--teal); letter-spacing: -0.03em; } .stat-card.settings-card { grid-column: 1 / -1; } .stat-card-edit { margin-top: auto; padding-top: 0.75rem; } .stat-card .project-bar-actions { margin-top: auto; padding-top: 0.75rem; } .settings-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; margin-bottom: 1rem; } .settings-list li { font-size: 0.9rem; color: var(--ink-soft); } .settings-empty { color: var(--ink-soft); font-size: 0.9rem; font-style: italic; } /* ── ROUTES ──────────────────────────────────── */ .route-card { display: flex; flex-direction: column; gap: 0.75rem; } .route-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--ink-soft); } .route-number { font-weight: 600; } .route-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); text-decoration: none; } .route-title:hover { color: var(--teal); } .route-badge-custom { align-self: flex-start; font-size: 0.7rem; font-weight: 600; color: var(--teal-deep); background: var(--teal-tint); border-radius: 999px; padding: 0.15rem 0.55rem; } .route-move { display: flex; gap: 0.5rem; margin-top: auto; } .route-move-btn { border: 1px solid var(--sand-line); background: #fff; border-radius: var(--radius); padding: 0.35rem 0.6rem; cursor: pointer; font-size: 0.75rem; color: var(--ink-soft); font-family: inherit; } .route-move-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); } .route-move-btn:disabled { opacity: 0.35; cursor: not-allowed; } .route-card-add { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; color: var(--teal); font-weight: 600; border-style: dashed; min-height: 100px; } .route-card-add:hover { background: var(--teal-tint); } .route-add-icon { font-size: 1.5rem; line-height: 1; } /* ── POI UPLOAD ──────────────────────────────── */ .form-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .form-header h1 { font-size: 1.35rem; font-weight: 700; } .save-status { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); } .dropzone { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--sand-line); border-radius: var(--radius); padding: 1.5rem; color: var(--teal); font-weight: 600; cursor: pointer; } .dropzone:hover, .dropzone.is-dragover { background: var(--teal-tint); } .poi-upload-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .poi-upload-row { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 0.6rem 0.75rem; } .poi-upload-name { flex: 1; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .poi-code-input { width: 4.5rem; border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 0.5rem 0.6rem; font-size: 0.875rem; font-family: inherit; } .poi-title-input { flex: 1.5; border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 0.5rem 0.6rem; font-size: 0.875rem; font-family: inherit; } .poi-code-input:focus, .poi-title-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); outline: none; } .poi-delete-btn { background: #fff; color: #b83232; border: 1px solid #b83232; border-radius: var(--radius); padding: 0.4rem 0.7rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .poi-delete-btn:hover { background: #b83232; color: #fff; } .poi-delete-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ── MEDIA GRID ──────────────────────────────── */ .media-page { max-width: 1300px; margin: 0 auto; padding: 2.5rem 1.5rem 6rem; } .media-page h1 { margin-bottom: 0.25rem; } .media-hint { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.75rem; } .media-empty { color: var(--ink-soft); font-size: 0.9rem; } .media-grid-wrap { overflow-x: auto; border: 1px solid var(--sand-line); border-radius: var(--radius); background: var(--bg); } table.media-grid { border-collapse: collapse; width: 100%; min-width: 760px; } .media-grid th, .media-grid td { border: 1px solid var(--sand-line); padding: 0; } .media-grid thead th { background: var(--teal-tint); padding: 0.75rem 0.9rem; text-align: left; font-size: 0.85rem; font-weight: 600; color: var(--teal-deep); white-space: nowrap; } .media-grid .col-head { display: flex; align-items: center; gap: 0.5rem; } .media-grid th.poi-head { width: 90px; } .media-grid tbody th { background: var(--sand); text-align: left; padding: 0.6rem 0.9rem; white-space: nowrap; } .media-grid .row-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .media-grid .poi-number { color: var(--teal-deep); } .media-grid .cell { position: relative; min-width: 170px; height: 62px; vertical-align: middle; cursor: pointer; transition: background-color 0.12s ease; } .media-grid .cell:hover { background: var(--teal-tint); } .media-grid .cell.is-selected { background: #FCE9B4; box-shadow: inset 0 0 0 2px #C99A2E; } .media-grid .cell.is-empty { cursor: default; } .media-grid .cell.is-empty:hover { background: none; } .media-grid .cell.drag-over-ok { background: #CFE6DB; box-shadow: inset 0 0 0 2px var(--teal); } .media-grid .cell.drag-over-no { background: #F3DAD6; box-shadow: inset 0 0 0 2px #B5453A; } .media-grid .cell-content { display: flex; align-items: center; gap: 0.5rem; height: 100%; padding: 0.5rem 2.1rem 0.5rem 0.9rem; } .media-grid .cell-play { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--sand-line); border-radius: 50%; background: #fff; color: var(--teal-deep); font-size: 0.6rem; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .media-grid .cell-play:hover { border-color: var(--teal); } .media-grid .cell-play.is-playing { background: var(--teal); border-color: var(--teal); color: #fff; } .media-grid .cell-thumb { flex-shrink: 0; width: 24px; height: 32px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--sand-line); } .media-grid .cell-drag-handle { color: var(--ink-soft); font-size: 0.9rem; line-height: 1; cursor: grab; user-select: none; flex-shrink: 0; } .media-grid .cell-title { font-size: 0.875rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-grid .cell-empty-label { display: block; padding: 0.5rem 0.9rem; font-size: 0.8rem; font-style: italic; color: var(--ink-soft); } .media-grid .cell-delete { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: none; border-radius: 50%; background: var(--bg); color: var(--ink-soft); box-shadow: 0 0 0 1px var(--sand-line); font-size: 0.75rem; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; } .media-grid .cell:hover .cell-delete { display: flex; } .media-grid .cell-delete:hover { background: var(--teal); color: #fff; box-shadow: 0 0 0 1px var(--teal); } .media-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; } /* ── MEDIA GRID: selectiebalk & toast ─────────── */ .selection-bar { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 12px); background: var(--teal-deep); color: #fff; border-radius: var(--radius); padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; font-size: 0.875rem; z-index: 200; } .selection-bar.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .selection-bar button { border: none; border-radius: 8px; padding: 0.4rem 0.85rem; font-size: 0.8rem; cursor: pointer; } .selection-bar .btn-edit { background: var(--teal); color: #fff; } .selection-bar .btn-edit:disabled { opacity: 0.6; cursor: not-allowed; } .selection-bar .btn-clear { background: transparent; color: #fff; text-decoration: underline; } .toast { position: fixed; left: 50%; top: 1.25rem; transform: translate(-50%, -12px); background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.85rem; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 200; } .toast.visible { opacity: 1; transform: translate(-50%, 0); } /* ── MEDIA GRID: settings modal ────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 300; } .modal-overlay.visible { opacity: 1; pointer-events: auto; } .modal-overlay .modal { background: var(--bg); border-radius: var(--radius); padding: 1.75rem; width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); } .modal-overlay .modal.modal-wide { max-width: 900px; } .modal-overlay .modal h2 { margin: 0 0 0.5rem; } .modal-hint { color: var(--ink-soft); font-size: 0.875rem; margin-bottom: 1rem; } .settings-file-list { list-style: none; margin: 0 0 1.25rem; padding: 0; border: 1px solid var(--sand-line); border-radius: var(--radius); max-height: 180px; overflow-y: auto; } .settings-file-list li { padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--ink); } .settings-file-list li + li { border-top: 1px solid var(--sand-line); } .settings-mixed-hint { color: var(--ink-soft); font-size: 0.8rem; margin: 0.75rem 0 0; } .settings-fields { margin-bottom: 0.5rem; } .settings-fields .form-group { margin-bottom: 1rem; } .settings-section { margin-bottom: 1.75rem; } .settings-section h3 { font-size: 1.05rem; margin: 0 0 0.9rem; } .settings-row { display: flex; flex-wrap: wrap; gap: 1.25rem; } .settings-row > .form-group, .settings-row > label { flex: 1; min-width: 180px; } .settings-row-3 { display: flex; flex-wrap: wrap; gap: 1.25rem; } .settings-row-3 > .form-group { flex: 1; min-width: 160px; } .settings-columns { display: flex; flex-direction: column; gap: 0; } .settings-automation-box { border: 1px solid var(--sand-line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-top: 0.5rem; } @media (min-width: 720px) { .settings-columns { flex-direction: row; gap: 2.5rem; } .settings-col-left { flex: 1.6; min-width: 0; } .settings-col-right { flex: 1; min-width: 0; } } .settings-checkbox-grid { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; } @media (min-width: 420px) { .settings-checkbox-grid { grid-template-columns: 1fr 1fr; } } /* ── rond, aangevinkt checkbox-uiterlijk (i.p.v. standaard vierkant) ── */ .settings-checkbox-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; } .settings-checkbox-row label, .settings-check-inline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink); cursor: pointer; } .settings-check-inline { white-space: nowrap; color: var(--ink-soft); font-size: 0.85rem; } .field-label-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; } .field-label-row label { margin: 0; } .settings-checkbox-row input[type="checkbox"], .settings-check-inline input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .settings-check-circle { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--sand-line); background: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s; } .settings-check-circle::after { content: ''; font-size: 0.65rem; line-height: 1; color: #fff; } input[type="checkbox"]:checked + .settings-check-circle { background: var(--teal); border-color: var(--teal); } input[type="checkbox"]:checked + .settings-check-circle::after { content: '✓'; } input[type="checkbox"]:indeterminate + .settings-check-circle { border-color: var(--teal); } input[type="checkbox"]:indeterminate + .settings-check-circle::after { content: '–'; color: var(--teal); } /* ── help-knopje + popover ─────────────────────── */ .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sand-line); background: #fff; color: var(--ink-soft); font-size: 0.65rem; line-height: 1; cursor: pointer; padding: 0; vertical-align: middle; } .help-btn:hover { border-color: var(--teal); color: var(--teal-deep); } .help-popover { position: fixed; z-index: 400; max-width: 260px; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 0.75rem 0.9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 0.8rem; } .help-popover-title { font-weight: 600; margin-bottom: 0.25rem; } .help-popover-body { color: rgba(255, 255, 255, 0.85); } .settings-inline-row { display: flex; align-items: center; gap: 0.75rem; } .settings-inline-row input[type="number"] { flex: 1; min-width: 0; } .settings-volume-row { display: flex; align-items: center; gap: 0.75rem; } .settings-volume-row input[type="number"] { flex: 1; min-width: 0; } .settings-image-row { display: flex; align-items: center; gap: 0.75rem; } .settings-title-row { display: flex; align-items: center; gap: 0.75rem; } .settings-title-row input[type="text"] { flex: 1; min-width: 0; } .settings-title-row .btn-secondary { padding: 0.35rem 0.85rem; font-size: 0.85rem; line-height: 1; white-space: nowrap; } .settings-image-preview { width: 36px; height: 48px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--sand-line); flex-shrink: 0; } .crop-container { width: 100%; height: 420px; background: var(--ink); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; } .crop-container img { display: block; max-width: 100%; } .crop-zoom-controls { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; } .crop-zoom-controls .btn-secondary { padding: 0.35rem 0.85rem; font-size: 1rem; line-height: 1; } .settings-field-hint { display: block; color: var(--ink-soft); font-size: 0.78rem; margin-top: 0.3rem; } .settings-slider-row { display: flex; align-items: center; gap: 0.75rem; } .settings-radio-row { display: flex; flex-wrap: wrap; gap: 1.5rem; } .settings-slider-row input[type="range"] { flex: 1; min-width: 0; } .settings-slider-value { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.85rem; } .settings-subsection { margin-bottom: 1.5rem; } .settings-subsection:last-child { margin-bottom: 0; } .settings-subsection h3 { font-size: 0.95rem; margin: 0 0 0.75rem; color: var(--ink-soft); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* ── MESSAGEPACKS ────────────────────────────── */ .page-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .form-status.success { color: var(--teal-deep); font-weight: 500; } .csv-upload-form { display: none; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; } .csv-upload-form.open { display: flex; } .csv-upload-form .form-group { margin-bottom: 0; } .messagepack-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; } .messagepack-flag { font-size: 2.5rem; line-height: 1; } /* SVG-vlagicoon i.p.v. emoji-tekst — schaalt mee met de font-size van de omliggende klasse (bv. .messagepack-flag, .csv-preview-flag), zodat bestaande maten blijven werken. */ .flag-icon { width: 1.3em; height: auto; aspect-ratio: 4 / 3; vertical-align: -0.15em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .messagepack-name { font-weight: 700; color: var(--ink); } .messagepack-iso { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-soft); } .messagepack-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; } /* ── CSV IMPORT PREVIEW ──────────────────────── */ .csv-preview-row { border: 1px solid var(--sand-line); border-left-width: 4px; border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; } .csv-preview-new { border-left-color: var(--teal); } .csv-preview-update { border-left-color: #b8860b; } .csv-preview-unchanged { border-left-color: var(--sand-line); opacity: 0.7; } .csv-preview-head { display: flex; align-items: center; gap: 0.6rem; } .csv-preview-flag { font-size: 1.4rem; line-height: 1; } .csv-preview-badge { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); } .csv-preview-diff { margin-top: 0.75rem; } .csv-preview-diff td em { color: var(--ink-soft); font-style: italic; } .csv-preview-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; } .import-progress-bar { width: 100%; height: 10px; border-radius: 999px; background: var(--sand-line); overflow: hidden; } .import-progress-bar-fill { height: 100%; width: 0; background: var(--teal); transition: width 0.2s ease; } /* ── FOOTER ──────────────────────────────────── */ /* ── MANUAL / HANDLEIDING ────────────────────── */ .manual-body { background: var(--sand); } .manual-banner { position: sticky; top: 0; z-index: 50; background: var(--teal-deep); color: #fff; } .manual-banner-inner { max-width: 900px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.9rem; } .manual-banner-logo { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; } .manual-banner-titles { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .manual-banner-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand); opacity: 0.75; } .manual-banner-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .manual-page { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 2.5rem; } .manual-page + .manual-page { border-top: 1px dashed var(--sand-line); } .manual-page h1 { font-size: 1.5rem; color: var(--teal-deep); margin-bottom: 1rem; letter-spacing: -0.02em; } .manual-page h2 { font-size: 1.15rem; color: var(--teal-deep); margin: 1.75rem 0 1rem; letter-spacing: -0.01em; } .manual-card { background: #fff; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(28, 43, 45, 0.08); padding: 1.5rem; } .manual-card + .manual-card { margin-top: 1.25rem; } .manual-lede { color: var(--ink-soft); } .manual-lede + .manual-lede { margin-top: 0.75rem; } .manual-figure { margin-top: 1.25rem; text-align: center; } .manual-figure img { max-width: 100%; background: #fff; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(28, 43, 45, 0.12); padding: 0.75rem; } .manual-figure figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-soft); } .manual-steps { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .manual-step { display: flex; gap: 0.9rem; } .manual-step-badge { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--teal-tint); color: var(--teal-deep); font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .manual-step-body p + p { margin-top: 0.4rem; } .manual-key { display: inline-block; font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; font-size: 0.85em; background: var(--teal-tint); color: var(--teal-deep); border-radius: 4px; padding: 0.05em 0.4em; } .manual-tag { font-weight: 700; } .manual-tag-red { color: #B5453A; } .manual-tag-green { color: #2F6B4A; } .manual-note { border-left: 3px solid var(--teal); background: var(--teal-tint); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.9rem 1.1rem; font-size: 0.9rem; color: var(--ink-soft); } .manual-note + .manual-note { margin-top: 0.75rem; } .manual-signoff { margin-top: 2rem; display: flex; gap: 2.5rem; font-size: 0.85rem; color: var(--ink-soft); } .manual-signoff span { border-bottom: 1px solid var(--sand-line); padding-bottom: 0.2rem; min-width: 160px; display: inline-block; } @media print { .manual-banner { position: static; } .manual-page { padding: 1.5rem 0.5rem; break-after: page; } .manual-page + .manual-page { border-top: none; } .manual-card, .manual-figure img { box-shadow: none; border: 1px solid var(--sand-line); } } /* ── FOOTER ──────────────────────────────────── */ .site-footer { text-align: center; padding: 1rem; font-size: 0.8rem; color: var(--ink-soft); border-top: 1px solid var(--sand-line); }