:root {
  color-scheme: light;
  --primary:#6d28d9;
  --secondary:#ec4899;
  --bg:#f8f7ff;
  --card:#ffffff;
  --text:#1f1b2d;
  --muted:#4b5563;
  --border:#e4e4ef;
  --input-border:#d4d4d8;
  --surface:#f8fafc;
  --chart-axis:#9ca3af;
  --chart-grid:#e5e7eb;
  --chart-text:#6b7280;
  --shadow:0 10px 30px rgba(76,29,149,.12);
  --page-gradient:linear-gradient(135deg,#ede9fe 0%,#fce7f3 40%,#ecfeff 100%);
  --header-gradient:linear-gradient(120deg,var(--primary),var(--secondary));
  --kaart-bg:#fffdf8;
  --image-bg:#fff;
}

:root.dark {
  color-scheme: dark;
  --primary:#7c3aed;
  --secondary:#db2777;
  --bg:#0f1020;
  --card:#19172a;
  --text:#f5f3ff;
  --muted:#c4b5fd;
  --border:#3a3157;
  --input-border:#5b5277;
  --surface:#111827;
  --chart-axis:#a1a1aa;
  --chart-grid:#374151;
  --chart-text:#d4d4d8;
  --shadow:0 14px 34px rgba(0,0,0,.36);
  --page-gradient:linear-gradient(135deg,#111827 0%,#211638 48%,#06202c 100%);
  --header-gradient:linear-gradient(120deg,#5b21b6,#be185d);
  --kaart-bg:#221d2a;
  --image-bg:#f8fafc;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Arial, sans-serif; color:var(--text); background:var(--page-gradient); min-height:100vh; transition: background-color .2s ease, color .2s ease; }
.container { width:100%; max-width: 1100px; margin: 0 auto; padding: 24px; min-width:0; }
.card { background:var(--card); border:1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius:16px; box-shadow:var(--shadow); padding:20px; margin-bottom:16px; min-width:0; }
.header { background: var(--header-gradient); color:#fff; border-radius:20px; padding:22px; margin-bottom:20px; box-shadow:var(--shadow); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.header-title { display:flex; align-items:center; gap:12px; min-width:0; }
.header-title h1 { margin:0; }
.temperature-history-title { font-size:1.75rem; line-height:1.2; }
.header-growth-icon { width:44px; height:44px; object-fit:contain; flex:0 0 auto; border-radius:0; }
.btn { display:inline-block; padding:10px 14px; border-radius:10px; background:var(--primary); color:#fff; text-decoration:none; border:none; cursor:pointer; }
.btn.secondary { background:#0ea5e9; }

.theme-toggle { position:fixed; right:18px; bottom:18px; z-index:900; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid color-mix(in srgb, var(--border) 85%, transparent); background:color-mix(in srgb, var(--card) 88%, transparent); color:var(--text); box-shadow:var(--shadow); cursor:pointer; font-weight:700; backdrop-filter:blur(10px); }
.theme-toggle:hover { transform:translateY(-1px); }
.theme-toggle:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset:3px; }
.theme-toggle-icon { line-height:1; }

.btn:hover { filter:brightness(1.06); }
a { color:color-mix(in srgb, var(--primary) 82%, var(--text)); }
:root.dark a.btn { color:#fff; }
:root.dark img:not(.kaart-image):not(.header-growth-icon) { filter:brightness(.92); }
:root.dark .lightbox img { filter:none; }
:root.dark .error-text { color:#fca5a5; }
:root.dark .ql-toolbar.ql-snow,
:root.dark .ql-container.ql-snow { border-color:var(--border); }
:root.dark .ql-toolbar.ql-snow .ql-stroke { stroke:var(--text); }
:root.dark .ql-toolbar.ql-snow .ql-fill { fill:var(--text); }
:root.dark .ql-toolbar.ql-snow .ql-picker { color:var(--text); }
:root.dark .ql-editor,
:root.dark #editor { background:var(--surface) !important; color:var(--text); }
:root.dark table.dataTable,
:root.dark div.dt-container,
:root.dark div.dt-container .dt-input { color:var(--text); }
:root.dark div.dt-container .dt-input { background:var(--card); border-color:var(--input-border); }
:root.dark table.dataTable > thead > tr > th,
:root.dark table.dataTable > tbody > tr > td { border-color:var(--border); }
:root.dark table.dataTable.display > tbody > tr > .sorting_1,
:root.dark table.dataTable.order-column > tbody tr > .sorting_1 { box-shadow:inset 0 0 0 9999px rgba(255,255,255,.03); }
.home-history-actions { display:flex; flex-wrap:wrap; gap:8px; }
input, textarea { width:100%; padding:10px; border:1px solid var(--input-border); border-radius:10px; margin-bottom:10px; background:var(--card); color:var(--text); }
label { font-weight:600; display:block; margin-top:8px; margin-bottom:4px; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--border); padding:10px; text-align:left; }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns: 1.2fr 1fr; }
.profile-summary { grid-template-columns: minmax(0,300px) 1fr; align-items:start; }
.profile-photo { width:100%; max-width:300px; }
.profile-info { margin:0; padding-left:16px; }
.thumb-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); margin-bottom:12px; }
.thumb-item { position:relative; }
.thumb-item img { width:100%; height:100px; object-fit:cover; border-radius:12px; }
.thumb-item.is-removed img { opacity:.3; filter:grayscale(1); }
.thumb-remove { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,.7); color:#fff; cursor:pointer; font-size:18px; line-height:1; }
.photo-collage { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.photo-collage img { width:100%; aspect-ratio:1/1; object-fit:cover; cursor:pointer; border-radius:10px; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:1000; }
.lightbox.active { display:flex; }
.lightbox img { max-width:min(90vw,1000px); max-height:80vh; border-radius:12px; }
.lightbox-btn { position:fixed; top:50%; transform:translateY(-50%); border:none; background:rgba(255,255,255,.25); color:#fff; font-size:28px; width:44px; height:44px; border-radius:999px; cursor:pointer; }
.lightbox-prev { left:20px; }
.lightbox-next { right:20px; }
.lightbox-close { position:fixed; top:20px; right:20px; transform:none; }

.mt-10 { margin-top: 10px; }
.ml-16 { margin-left: 16px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.ml-8 { margin-left: 8px; }
.error-text { color:#b91c1c; font-weight:700; }

.grid-three-compact { grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; margin-top:10px; }
.grid-two-compact { grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px; }
.chart-heading { margin: 0 0 8px; }
.chart-heading.mt-16 { margin-top: 16px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin:0 0 8px; color:var(--muted); font-size:13px; }
.chart-legend-item { display:inline-flex; align-items:center; gap:6px; }
.chart-legend-swatch { width:12px; height:12px; border-radius:999px; display:inline-block; flex:0 0 auto; }
.melkvoeding-chart-card { max-width:100%; overflow:hidden; }
.chart-wrap { display:block; width:100%; max-width:100%; padding:10px 0; }
.line-chart { display:block; max-width:none; background:var(--surface); border:1px solid var(--border); border-left:0; border-radius:0 8px 8px 0; color:var(--text); flex:0 0 auto; }
.line-chart-shell { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:stretch; width:100%; max-width:100%; min-width:0; overflow:hidden; padding-bottom:6px; }
.line-chart-scroll { min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.line-chart-y-axis { position:relative; z-index:2; width:56px; min-width:56px; max-width:56px; height:240px; background:var(--surface); border:1px solid var(--border); border-right:0; border-radius:8px 0 0 8px; color:var(--chart-text); font-size:11px; overflow:hidden; }
.line-chart-y-axis-line { position:absolute; right:0; top:var(--line-chart-axis-top, 20px); height:var(--line-chart-axis-height, 192px); border-right:1px solid var(--chart-axis); }
.line-chart-y-tick { position:absolute; right:8px; transform:translateY(-50%); white-space:nowrap; }

.melkvoeding-radio-options { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.melkvoeding-radio-options label { display:flex; align-items:center; gap:6px; margin:0; font-weight:600; }
.melkvoeding-radio-options input[type="radio"] { width:auto; margin:0; flex:0 0 auto; }

.melkvoeding-table { width: 100%; min-width: max-content; font-size: 12px; }
.melkvoeding-table-wrap { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.melkvoeding-table th,
.melkvoeding-table td { padding: 8px 6px; white-space: nowrap; }
.melkvoeding-table th { font-size: 12px; }
.melkvoeding-actions { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.melkvoeding-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; min-width:32px; padding:0; font-size:14px; line-height:1; aspect-ratio:1/1; }
.table-label-mobile,
.table-date-mobile,
.table-rate-mobile { display:none; }

#melkvoeding-history-table { font-size: 12px; width:100% !important; min-width:max-content; }
#melkvoeding-history-table th, #melkvoeding-history-table td { white-space: nowrap; }
table#melkvoeding-history-table.dataTable { width: 100% !important; min-width:max-content; margin: 0 !important; table-layout: auto; }
table#melkvoeding-history-table.dataTable th,
table#melkvoeding-history-table.dataTable td { box-sizing: border-box; }
div.dt-container div.dt-layout-row { margin: 0; }
div.dt-container .dt-layout-cell { padding: 0; }
div.dt-container .dt-scroll-body { overflow-x: auto !important; }

#melkvoeding-history-table th,
#melkvoeding-history-table td { padding: 8px 6px; }
#melkvoeding-history-table th { font-size: 12px; padding: 6px 5px; }
.melkvoeding-actions form { margin: 0; }

.chart-bar-wrapper { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:stretch; column-gap:8px; width:100%; max-width:100%; min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px; }
.chart-plot-scroll { min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.chart-y-axis { width:44px; min-width:44px; max-width:44px; height:180px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; font-size:12px; color:var(--muted); padding-right:6px; border-right:1px solid var(--border); background:var(--surface); z-index:1; flex-shrink:0; }
.chart-bars-container { display:flex; gap:0; align-items:flex-end; padding-left:2px; width:max-content; min-width:100%; }
.chart-bar-item { display:flex; flex:0 0 var(--chart-point-width, 72px); flex-direction:column; align-items:center; }
.chart-bar-stack { height:180px; display:flex; align-items:flex-end; gap:3px; }
.chart-label { display:flex; flex-direction:column; align-items:center; gap:1px; font-size:12px; line-height:1.1; margin-top:4px; white-space:nowrap; }
.chart-bar { width:var(--chart-bar-width, 24px); }
.chart-bar-links { background:#3b82f6; }
.chart-bar-rechts { background:#f59e0b; }
.chart-bar-totaal { background:#16a34a; }

@media (max-width: 800px) { .grid.two { grid-template-columns: 1fr; } .profile-manage-actions { grid-column:1; justify-self:start; } }
@media (max-width: 900px), (pointer: coarse) {
  .melkvoeding-table-wrap { overflow-x: auto; }
  .melkvoeding-table { font-size: 9px; table-layout: auto; }
  .melkvoeding-table th,
  .melkvoeding-table td {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.15;
    padding: 2px 1px;
  }
  .melkvoeding-table th { font-size: 9px; }
  .table-label-desktop,
  .table-date-desktop { display:none; }
  .table-label-mobile,
  .table-rate-mobile { display:inline; }
  .table-rate-desktop { display:none; }
  .table-date-mobile { display:inline-flex; flex-direction:column; align-items:center; gap:1px; }
}
@media (max-width: 640px) {
  #melkvoeding-history-table { font-size: 9px; table-layout: auto; width: 100% !important; }
  table#melkvoeding-history-table.dataTable { table-layout: auto !important; width: 100% !important; }
  #melkvoeding-history-table th:nth-child(1), #melkvoeding-history-table td:nth-child(1) { width: 12%; }
  #melkvoeding-history-table th:nth-child(2), #melkvoeding-history-table td:nth-child(2),
  #melkvoeding-history-table th:nth-child(3), #melkvoeding-history-table td:nth-child(3),
  #melkvoeding-history-table th:nth-child(4), #melkvoeding-history-table td:nth-child(4),
  #melkvoeding-history-table th:nth-child(7), #melkvoeding-history-table td:nth-child(7),
  #melkvoeding-history-table th:nth-child(8), #melkvoeding-history-table td:nth-child(8),
  #melkvoeding-history-table th:nth-child(9), #melkvoeding-history-table td:nth-child(9) { width: 7%; }
  #melkvoeding-history-table th:nth-child(5), #melkvoeding-history-table td:nth-child(5),
  #melkvoeding-history-table th:nth-child(6), #melkvoeding-history-table td:nth-child(6) { width: 8%; }
  #melkvoeding-history-table th:nth-child(10), #melkvoeding-history-table td:nth-child(10) { width: 30%; }
  #melkvoeding-history-table th, #melkvoeding-history-table td {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.15;
    padding: 2px 1px;
  }
  #melkvoeding-history-table thead th { font-size: 9px; }
  #melkvoeding-history-table thead th,
  #melkvoeding-history-table tbody td { max-width: none; }
  #melkvoeding-history-table thead th.dt-orderable-asc,
  #melkvoeding-history-table thead th.dt-orderable-desc { padding-right: 6px; }
  #melkvoeding-history-table .dt-column-title { white-space: nowrap; }
  #melkvoeding-history-table .dt-column-order { opacity: .6; transform: scale(.85); transform-origin: left center; }
  .melkvoeding-actions { gap: 6px; justify-content: center; flex-wrap: nowrap; min-width: 0; }
  .melkvoeding-icon-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; font-size: 14px; border-radius: 8px; }
  .chart-label { font-size: 9px; }
  .chart-y-axis { font-size: 9px; }
  div.dt-container .dt-column-order { margin-left: 1px; }
}
img { max-width:100%; border-radius:12px; }

.profile-manage-actions { grid-column:2; justify-self:end; align-self:end; }

.geboortekaart-card { width: 100%; margin: 0; padding: 20px 24px; background: var(--kaart-bg); }
.kaart-viewer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 500px; background: var(--kaart-bg); border-radius: 14px; overflow: hidden; padding: 12px; perspective: 1800px; transform-style: preserve-3d; }
.kaart-image { width: 100%; height: 100%; min-height: 476px; object-fit: contain; background: var(--image-bg); border-radius: 14px; transform-origin: center center; backface-visibility: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kaart-controls { display:flex; justify-content:space-between; margin-top:12px; }
.kaart-nav { border:none; width:48px; height:48px; border-radius:999px; background:var(--primary); color:#fff; font-size:28px; cursor:pointer; }
.kaart-nav:disabled { opacity: .55; cursor: default; }

.kaart-viewer.flip-next .kaart-image:last-child { animation: flipbookTurnRight .68s cubic-bezier(.35,.01,.2,1); transform-origin: left center; }
.kaart-viewer.flip-next .kaart-image:first-child { animation: flipbookSettleLeft .68s ease-out; }
.kaart-viewer.flip-prev .kaart-image:first-child { animation: flipbookTurnLeft .68s cubic-bezier(.35,.01,.2,1); transform-origin: right center; }
.kaart-viewer.flip-prev .kaart-image:last-child { animation: flipbookSettleRight .68s ease-out; }

@keyframes flipbookTurnRight {
  0% { transform: rotateY(0deg) translateX(0); filter: brightness(1); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
  45% { transform: rotateY(-78deg) translateX(-4px); filter: brightness(.78); box-shadow: 8px 10px 28px rgba(0,0,0,.22); }
  100% { transform: rotateY(0deg) translateX(0); filter: brightness(1); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
}

@keyframes flipbookTurnLeft {
  0% { transform: rotateY(0deg) translateX(0); filter: brightness(1); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
  45% { transform: rotateY(78deg) translateX(4px); filter: brightness(.78); box-shadow: -8px 10px 28px rgba(0,0,0,.22); }
  100% { transform: rotateY(0deg) translateX(0); filter: brightness(1); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
}

@keyframes flipbookSettleLeft {
  0% { transform: scale(.995); filter: brightness(.92); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes flipbookSettleRight {
  0% { transform: scale(.995); filter: brightness(.92); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 700px) {
  .geboortekaart-card { padding: 12px; }
  .kaart-viewer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; min-height: clamp(220px, 62vw, 360px); padding: 6px; perspective: none; transform-style: flat; }
  .kaart-image { min-height: clamp(208px, 58vw, 348px); border-radius: 10px; }
  .kaart-viewer.flip-next .kaart-image:last-child,
  .kaart-viewer.flip-next .kaart-image:first-child,
  .kaart-viewer.flip-prev .kaart-image:first-child,
  .kaart-viewer.flip-prev .kaart-image:last-child { animation: none; transform: none; }
}
.melkvoeding-column-visibility { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; color:var(--text); }
.melkvoeding-column-toggle { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:13px; font-weight:600; color:var(--muted); }
.melkvoeding-column-toggle input[type="checkbox"] { width:auto; margin:0; }

.melkvoeding-column-panel { margin-bottom:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.melkvoeding-column-panel summary { cursor:pointer; font-weight:700; padding:10px 12px; color:var(--text); }
.melkvoeding-column-panel summary:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset:-3px; }
.melkvoeding-column-panel .melkvoeding-column-visibility { padding:0 12px 12px; margin-bottom:0; }

@media (max-width: 640px) {
  .melkvoeding-moments-card { padding: 12px 8px; overflow: hidden; }
  .melkvoeding-moments-card .melkvoeding-table-wrap,
  .melkvoeding-moments-card div.dt-container,
  .melkvoeding-moments-card .dt-layout-row,
  .melkvoeding-moments-card .dt-layout-cell,
  .melkvoeding-moments-card .dt-scroll,
  .melkvoeding-moments-card .dt-scroll-body { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden !important; }
  #melkvoeding-history-table,
  table#melkvoeding-history-table.dataTable { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; font-size: 8px; }
  #melkvoeding-history-table th,
  #melkvoeding-history-table td { padding: 2px 1px; overflow: hidden; text-overflow: clip; }
  #melkvoeding-history-table th:nth-child(1), #melkvoeding-history-table td:nth-child(1) { width: 16%; }
  #melkvoeding-history-table th:nth-child(9), #melkvoeding-history-table td:nth-child(9) { width: 22%; }
  #melkvoeding-history-table .melkvoeding-actions form { display:flex; width: 24px; height: 24px; flex:0 0 24px; }
  #melkvoeding-history-table .melkvoeding-icon-btn { width: 24px; height: 24px; min-width: 24px; flex:0 0 24px; padding: 0; font-size: 11px; line-height: 1; border-radius: 7px; }
  #melkvoeding-history-table .melkvoeding-actions { gap: 3px; }
  .melkvoeding-column-panel summary { padding: 9px 10px; font-size: 13px; }
  .melkvoeding-column-toggle { flex: 1 1 46%; font-size: 12px; }
}

/* Shared history table DataTables sizing mirrors the kolfmomenten table. */
table.melkvoeding-table.dataTable { width:100% !important; min-width:max-content; margin:0 !important; table-layout:auto; font-size:12px; }
table.melkvoeding-table.dataTable th,
table.melkvoeding-table.dataTable td { box-sizing:border-box; white-space:nowrap; padding:8px 6px; }
table.melkvoeding-table.dataTable th { font-size:12px; padding:6px 5px; }
@media (max-width: 640px) {
  table.melkvoeding-table.dataTable { width:100% !important; min-width:0 !important; max-width:100% !important; table-layout:fixed !important; font-size:8px; }
  table.melkvoeding-table.dataTable th,
  table.melkvoeding-table.dataTable td { padding:2px 1px; overflow:hidden; text-overflow:clip; }
  table.melkvoeding-table.dataTable thead th { font-size:8px; }
  table.melkvoeding-table.dataTable .melkvoeding-actions form { display:flex; width:24px; height:24px; flex:0 0 24px; }
  table.melkvoeding-table.dataTable .melkvoeding-icon-btn { width:24px; height:24px; min-width:24px; flex:0 0 24px; padding:0; font-size:11px; line-height:1; border-radius:7px; }
  table.melkvoeding-table.dataTable .melkvoeding-actions { gap:3px; justify-content:center; }
}