/* --------------------  GLOBAL  -------------------- */
 /* * {
     box-sizing: border-box;
 }

 html {
     margin: 0;
     padding: 0;
     height: 100%;
     font-family: 'Poppins', sans-serif;
 }

 */
 /* body {
      background: #fff;
     
      display: flex;
      flex-direction: column;
    } */

 /* --------------------  GLOBAL  -------------------- */
 /* --------------------  GLOBAL  -------------------- */
 /* --------------------  GLOBAL  -------------------- */
 /* --------------------  GLOBAL  -------------------- */
 * {
     box-sizing: border-box;
 }

 html,
 body {
     margin: 0;
     padding: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     color: #333;
 }

 :root {
     --primary-color: #007bff;
     --secondary-color: #e9ecef;
     --text-color: #333;
     --light-gray: #f8f9fa;
     --border-radius-lg: 12px;
     --tab-bg-active: var(--primary-color);
     --tab-text-active: #fff;
     --tab-text-inactive: #555;
     --app-bar-bg: #fff;
     --info-pill-bg: #e9ecef;
 }

 body {
     background-color: var(--secondary-color);
     display: flex;
     flex-direction: column;
 }

 /* -------------------- UNIFIED APP BAR -------------------- */
 .header {
     background: var(--primary-color);
     padding: 10px 30px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
 }

 .logo-container {
     padding: 10px 0;
 }

 .logo {
     font-size: 24px;
     font-weight: 700;
     margin: 0;
     color: #fff;
 }

 /* floating toolbar */
 .floating-toolbar {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 1000;
     background: var(--app-bar-bg);
     padding: 10px 20px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     overflow: visible;
     /* laat je overige UI toe om uit te steken */
 }

 .toolbar-ribbon-wrap {
     position: absolute;
     inset: 0;
     /* vult exact de floating-toolbar */
     overflow: hidden;
     /* alles buiten de toolbar-rand wordt afgesneden */
     pointer-events: none;
     /* blokkeert geen clicks op elementen eronder */
     z-index: 0;
     /* onder de content houden */
 }

 /* Zorg dat normale toolbar-content boven de ribbon ligt */
 .floating-toolbar>*:not(.toolbar-ribbon-wrap) {
     position: relative;
     z-index: 1;
 }

 .toolbar-top-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 }

 .header-left {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 20px;
     width: 100%;
 }

 .article-info-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     width: 100%;
 }

 .info-pill {
     background-color: var(--info-pill-bg);
     border-radius: 20px;
     padding: 6px 12px;
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     font-weight: 500;
     color: #555;
     transition: transform 0.2s ease-in-out;
 }

 .info-pill:hover {
     transform: translateY(-2px);
 }

 .info-label {
     font-weight: 600;
     color: #333;
 }

 .info-value {
     color: var(--text-color);
 }

 /* -------------------- TABS -------------------- */
 .tab-bar-container {
     display: flex;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
 }

 .tab-bar {
     display: flex;
     flex-wrap: nowrap;
     gap: 4px;
     background: transparent;
     overflow-x: auto;
     max-width: none;
     justify-content: center;
 }

 .tab-button {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border: none;
     background: transparent;
     color: var(--tab-text-inactive);
     padding: 10px 12px;
     border-radius: var(--border-radius-lg);
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     flex-grow: 0;
     text-align: center;
     font-size: 12px;
     white-space: nowrap;
 }

 .tab-button span {
     margin-top: 4px;
     font-weight: 600;
 }

 .tab-button svg {
     width: 22px;
     height: 22px;
     stroke: var(--tab-text-inactive);
     transition: all 0.2s ease-in-out;
 }

 .tab-button:hover {
     background: rgba(0, 0, 0, 0.05);
 }

 .tab-button.active {
     background: var(--primary-color);
     color: var(--tab-text-active);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     transform: translateY(-2px);
 }

 .tab-button.active svg {
     stroke: var(--tab-text-active);
 }

 .tab-button.active span {
     font-weight: 700;
 }

 /* Close button */
 .close-button {
     background-color: #dc3545;
     color: white;
     border: none;
     border-radius: 20px;
     padding: 8px 16px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s ease-in-out;
     margin-left: 20px;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .close-button:hover {
     background-color: #c82333;
 }

 .close-button .material-icons {
     font-size: 18px;
 }

 /* -------------------- CONTENT -------------------- */
 .status-bar {
     text-align: center;
     font-size: 15px;
     font-weight: 600;
     color: #888;
     margin: 15px 0;
 }

 .content {
     padding: 20px;
     flex-grow: 1;
 }

 .tab-content {
     display: none;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 8px;
     background-color: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     margin: 20px 0;
 }

 .tab-content.active {
     display: block;
 }


 /* --------------------  TABS  -------------------- */


 #left-panel {
     flex: 2 1 0;
     /* 2/3 width                   */
     display: flex;
     flex-direction: column;
     padding: 20px;
     gap: 20px;
     border-right: 2px solid #f0f0f0;
 }

 #canvas {
     width: 100%;
     border: 2px solid #4CAF50;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     background: #fff;
 }

 #controls {
     display: flex;
     gap: 20px;
     width: 100%;
     justify-content: center;
 }

 button {
     background-color: #4CAF50;
     border: none;
     border-radius: 8px;
     padding: 12px 24px;
     color: white;
     font-size: 16px;
     cursor: pointer;
     transition: background 0.3s;
 }

 button:hover {
     background-color: #45a049;
 }

 button:disabled {
     background-color: #ccc;
     cursor: not-allowed;
 }

 button:disabled:hover {
     background-color: #ccc;
 }

 #right-panel {
     flex: 1 1 0;
     /* 1/3 width                   */
     display: flex;
     flex-direction: column;
     padding: 20px;
     gap: 20px;
     background: #fafafa;
 }

 h1,
 h2 {
     margin: 10px 0;
     color: #333;
 }

 #actionLog {
     margin-top: 20px;
 }

 .actionItem {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #ffffff;
     padding: 10px 15px;
     margin-bottom: 10px;
     border-radius: 8px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     font-size: 14px;
     color: #333;
 }

 .actionItem span {
     flex: 1;
     margin-right: 10px;
     word-break: break-word;
 }

 .undo-button {
     background: #ff6666;
     border: none;
     border-radius: 6px;
     padding: 6px 12px;
     font-size: 14px;
     color: white;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .undo-button:hover {
     background: #e60000;
 }

 /* ✅ Popup base style */
 .popup {
     display: none;
     /* hide by default */
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(255, 255, 255, 0.95);
     border-radius: 16px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
     padding: 30px;
     z-index: 9999;
 }

 /* ✅ Show popup */
 .popup.show {
     display: block;
 }

 /* ✅ Hide popup */


 .popup-row {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 #popup canvas,
 #stuiklassenPopup canvas {
     background: #f0f0f0;
     border-radius: 12px;
     margin-bottom: 20px;
 }

 .popup-buttons {
     display: flex;
     gap: 20px;
     justify-content: center;
     margin-top: 20px;
 }

 .popup-buttons button {
     background: #2196F3;
 }

 .popup-buttons button:hover {
     background: #1976D2;
 }

 #commentBox,
 #stuiklassenCommentBox {
     margin-top: 10px;
     padding: 10px;
     background: #f9f9f9;
     border: 1px solid #ddd;
     border-radius: 8px;
     min-height: 60px;
     font-size: 14px;
     color: #555;
 }

 #cutDistance,
 #mergeDistance {
     width: 100%;
     padding: 8px;
     border-radius: 6px;
     border: 1px solid #ccc;
     font-size: 16px;
 }





 .standard-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 .standard-actions {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 #standardCanvas {
     background: #f0f0f0;
     border-radius: 8px;
     border: 1px solid #ccc;
 }

 #comboSelect {
     padding: 8px;
     border-radius: 6px;
     border: 1px solid #ccc;
     width: 120px;
 }

 /* #newAutoButton,
    #addButton,
    #newSectionButton {
      background-color: #4CAF50;
      color: white;
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s;
    }

    #newAutoButton:hover,
    #addButton:hover,
    #newSectionButton:hover {
      background-color: #45a049;
    } */

 .section-input-wrapper {
     position: absolute;
 }

 #statsBox,
 #actionsBox,
 #finalSection {
     width: 100%;
     background: #fff;
     padding: 16px;
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 }

 #finalSection {
     display: flex;
     flex-direction: column;
     /* stacked */
     gap: 20px;
 }

 #actionsBox>h2 {
     margin-top: 0;
 }

 /* #finishButton {
      margin-top: 20px;
      padding: 12px 24px;
      font-size: 16px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    } */



 .final-column {
     width: 100%;
     border: 1px solid #000;
     border-radius: 8px;
     padding: 16px;
 }

 .final-column h3 {
     margin-top: 0;
     text-align: center;
 }

 .hidden {
     display: none;
 }

 #top-panels-container {
     display: flex;
     gap: 16px;
     width: 100%;
 }

 #top-panels-container h2,
 #top-panels-container p {
     font-size: 12px;
     margin: 2px 0;
 }

 #top-panels-container>div {

     border: 2px solid #333;
     border-radius: 8px;
     padding: 12px;
     background-color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 #standard-panel,
 #standard-specs-box {
     flex: 1 1 0;
     /* 50% each inside left‑panel */
     border: 2px solid #333;
     border-radius: 8px;
     padding: 12px;
     background: #fff;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .tab-container {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
 }



 /* body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-color);
      background-color: var(--light-gray);
    } */

 /* .header {
      background: #fff;
      border-bottom: 3px solid var(--primary-color);
      padding: 10px 30px 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    } */

 /* .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 15px;
    }

    .logo {
      font-size: 26px;
      font-weight: 700;
      margin: 0;
    }

    .article-info-box {
      display: flex;
      gap: 40px;
      font-size: 14px;
    }

    .article-info-box p {
      margin: 2px 0;
    }

    .tab-bar {
      display: flex;
      background: var(--secondary-color);
      border-radius: var(--border-radius-lg);
      padding: 8px;
      gap: 6px;
      width: fit-content;
      margin: 0 auto;
    }

    .tab-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      color: var(--text-color);
      padding: 10px 15px;
      border-radius: var(--border-radius-lg);
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      flex-grow: 1;
      text-align: center;
      font-size: 14px;
      white-space: nowrap;
    }

    .tab-button span {
      margin-top: 4px;
      font-weight: 600;
    }

    .tab-button svg {
      width: 24px;
      height: 24px;
      transition: all 0.2s ease-in-out;
    }

    .tab-button:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    .tab-button.active {
      background: var(--tab-bg-active);
      color: var(--tab-text-active);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .tab-button.active svg {
      stroke: var(--tab-text-active);
    }

    .tab-button.active span {
      font-weight: 700;
    } */



 #priceTab {

     flex-direction: column;
     align-items: center;
     width: 100%;
     gap: 20px;
     padding: 20px 40px;
 }

 #price-tab-header,
 #price-tab-form,
 #price-tab-form-footer,
 #priceOverviewContainer {
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
 }

 select {
     appearance: none;
     /* Hides native arrow in most browsers */
     -webkit-appearance: none;
     -moz-appearance: none;

     background-color: #fff;
     border: 1px solid #ccc;
     padding: 10px 14px;
     border-radius: 6px;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     color: #333;
     cursor: pointer;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     transition: all 0.2s ease-in-out;
 }

 select:focus {
     border-color: #4CAF50;
     box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
     outline: none;
 }

 #lengte {
     padding: 10px 14px;
     border-radius: 6px;
     border: 1px solid #ccc;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     color: #333;
     width: 180px;
     /* Or whatever matches your layout */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     transition: all 0.2s ease-in-out;
 }

 #lengte:focus {
     border-color: #4CAF50;
     box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
     outline: none;
 }

 #hoogte {
     padding: 10px 14px;
     border-radius: 6px;
     border: 1px solid #ccc;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     color: #333;
     width: 180px;
     /* Or whatever matches your layout */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     transition: all 0.2s ease-in-out;
 }

 #hoogte:focus {
     border-color: #4CAF50;
     box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
     outline: none;
 }

 #aantalM2M {
     padding: 10px 14px;
     border-radius: 6px;
     border: 1px solid #ccc;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     color: #333;
     width: 180px;
     /* Or whatever matches your layout */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     transition: all 0.2s ease-in-out;
 }

 #aantalM2M:focus {
     border-color: #4CAF50;
     box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
     outline: none;
 }

 .delete-btn {
     background-color: #ff4d4d;
     color: white;
     border: none;
     border-radius: 4px;
     padding: 6px 10px;
     cursor: pointer;
     font-size: 14px;
 }

 .delete-btn:hover {
     background-color: #e60000;
 }

 #priceForm {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 20px;
     align-items: start;
 }

 .form-group {
     border: 1px solid #ccc;
     border-radius: 8px;
     padding: 16px;
     margin-bottom: 20px;
     background: #fff;
 }

 .form-group legend {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 10px;
     padding: 0 6px;
 }

 .group-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 16px;
 }

 .group-grid>div {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .group-grid label {
     display: inline-block;
     width: 100%;
     /* Ensures it doesn’t restrict input field width */
     margin-bottom: 4px;
     font-weight: 500;
 }



 /* #savePriceCalculationButton,
    #saveAndClosePriceCalculationButton {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
    }

    #savePriceCalculationButton:hover,
    #saveAndClosePriceCalculationButton:hover {
      background-color: #45a049;
    } */

 /* generic pill‑size buttons for table controls */
 .ctrl-btn {
     font-size: 12px;
     /* ↓ a lot smaller                   */
     padding: 2px 4px;
     /* just a little breathing room      */
     border: none;
     background: #eee;
     border-radius: 4px;
     cursor: pointer;
     margin: 0 1px;
 }

 .ctrl-btn:hover {
     background: #ddd;
 }

 /* stuiklassen tab */
 #stuiklassenTab {

     flex-direction: column;
     align-items: center;
     /* centres children horizontally   */
     gap: 12px;
     /* space between title / switch / view */

 }

 .stuik-section {
     border: 1px solid #4caf50;
     border-radius: 4px;
     margin: 1em 0;
     padding: 10px;
     background: #fafff8;
 }

 .stuik-title {
     font-weight: bold;
     margin-bottom: 6px;
 }

 /* .stuik-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .stuik-controls.klaar-done {
      background: #d4fcd4;
    }

    .stuik-controls input {
      width: 50px;
      text-align: center;
    }

    .stuik-controls .pm button,
    .stuik-controls .all {
      padding: 4px 8px;
      font-size: 14px;
    } */

 #stuikCanvasOverlay {
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
     /* alles doorklikbaar behalve child buttons */
     width: 100%;
     height: 100%;
 }

 .stuik-control-box {
     position: absolute;
     background: white;
     border: 1px solid #aaa;
     border-radius: 4px;
     padding: 4px 6px;
     font-size: 14px;
     pointer-events: auto;
     /* zodat knoppen wel klikken */
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .stuik-control-box input {
     width: 40px;
     text-align: center;
 }

 .stuik-control-box .pm button,
 .stuik-control-box .all {
     padding: 2px 6px;
 }




 /* --- fancy little TWO-WAY toggle ------------------------------ */
 #zagenTab {

     flex-direction: column;
     align-items: center;
     /* centres children horizontally   */
     gap: 28px;
     /* space between title / switch / view */
 }

 /* make the H-tag look like the others */

 .zaag-toggle {
     --pill-bg: #f0f0f0;
     --pill-selected: #007bff;
     --pill-size: 52px;
     --pill-font: 18px;
     display: inline-flex;
     border-radius: 9999px;
     background: var(--pill-bg);
     padding: 6px;
     gap: 4px;
 }

 .zaag-toggle input {
     display: none;
 }

 /* hide native radios   */
 .zaag-toggle label {
     flex: 1 1 0;
     display: flex;
     align-items: center;
     justify-content: center;
     height: var(--pill-size);
     min-width: 140px;
     padding: 0 16px;
     border-radius: 9999px;
     font-weight: 600;
     font-size: var(--pill-font);
     cursor: pointer;
     user-select: none;
     color: #555;
     transition: background .15s, color .15s;
 }

 .zaag-toggle input:checked+label {
     background: var(--pill-selected);
     color: #fff;
 }

 /* put a little air below the switch */
 .zaag-wrapper {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-bottom: 10px;
 }

 /* ==========  MO / SO tables  ========== */
 .zaag-view {
     max-width: 1100px;
     /* grow from 100 % ⇒ 1100 px (or pick your own)     */
     width: 100%;
     font-size: 16px;
     /* table text ↑                                     */
 }

 .zaag-view table {
     width: 100%;
     border-collapse: collapse;
     font-family: 'Poppins', sans-serif;
     border: 2px solid #333;
     /* same as priceTable */
     box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
 }

 .zaag-view th,
 .zaag-view td {
     padding: 14px 18px;
     border: 1px solid #ccc;
     text-align: center;
     font-size: 14px;
 }

 .zaag-view th {
     background: #e3f2fd;
     /* light blue – same header tint */
     font-weight: 600;
 }

 .zaag-wrapper.center {
     width: 100%;
     max-width: 1200px;
     /* wrapper width                                    */
 }

 .zaag-view-info {
     font: 500 14px/1.3 'Poppins', sans-serif;
     text-align: center;
     color: #333;
 }

 .zaagTbl,
 .stuikTbl {
     border-collapse: collapse;
     /* laat interne borders NIET samensmelten   */
     border-spacing: 0;
     /* geen extra ruimte tussen cellen           */
 }

 .stuikTbl input.aantalKlaar,
 .stuikTbl input.aantalStuik {
     width: 6ch;
     /* 6 keer de breedte van het cijfer ‘0’ */
     min-width: 60px;
     /* in px als fallback */
     font-family: inherit;
     text-align: center;
 }

 /* algemene knop-look in de zaag-stuklijst */
 .zaagTbl button,
 .stuikTbl button {
     background: #e3f2fd;
     /*   ← geen groen vlak meer   */
     /* border: 1px solid #888; */
     border-radius: 4px;
     padding: 2px 6px;
     font-size: 1rem;
     /* behoud emoji-grootte      */
     cursor: pointer;
     transition: background 0.15s;
 }

 .zaagTbl button:hover,
 .stuikTbl button:hover {
     background: #eee;
     /* subtiele hover-tint       */
 }

 /* verticale verdeling van print- en verbruik-knoppen */
 .btn-stack {
     display: flex;
     flex-direction: column;
     /* boven-onder */
     align-items: center;
     gap: 6px;
     /* gelijke afstand */
 }

 .zaag-toolbar {
     margin-bottom: .75rem;
     display: flex;
     gap: .5rem;
     justify-content: center;
 }

 .toolBtn {
     background: #4CAF50;
     border: none;
     border-radius: 8px;
     padding: 8px 16px;
     color: #fff;
     font-size: 15px;
     cursor: pointer;
 }

 .toolBtn:hover {
     background: #45a049;
 }

 .klaar-cell {
     display: grid;
     /* 3 kolommen naast elkaar             */
     grid-template-columns: 1fr 32px 48px;
     /* ① input ② ± ③ ALL                */
     height: 100%;
     /* vul de volledige tabelcel           */
     width: 100%;
     padding: 0;
     /* alle binnen-marge weghalen          */
     overflow: hidden;
     /* niks kan ‘uitsteken’                */
 }

 .klaar-cell>* {
     /* ALLE directe kinderen …             */
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     /* borders tellen mee in de maat       */
     border: 1px solid #ccc;
     /* dun randje voor visuele scheiding   */
     margin: 0;
     /* geen extra ruimte                   */
 }

 /* inputveld: neemt alle hoogte & krimpt netjes mee                        */
 .klaar-cell input.aantalKlaar {
     text-align: center;
     border: none;
     /* rand komt al via de regel hierboven */
     outline: none;
     font-size: 0.9rem;


 }

 /* ±-knoppen onder elkaar                                                  */
 .klaar-cell .pm {
     display: flex;
     flex-direction: column;
 }

 .klaar-cell .pm button {
     flex: 1 1 50%;
     /* elk de helft van de kolomhoogte     */
     padding: 0;
     /* knop vult de hele ruimte            */
 }

 /* ALL-knop rechts                                                         */
 .klaar-cell .all {
     font-weight: 600;
     padding: 0;
 }

 .klaar-done {
     background: #d4edda;
     /* licht-groen  */
     color: #155724;
     /* donkere tekst */
     font-weight: 600;
 }

 .zaagTbl td.klaar-col {
     padding: 0;
 }

 .zaagTbl td:has(> .klaar-cell) {
     padding: 0;
 }

 #zaagViewSO {
     overflow-x: auto;
 }

 .zaagTbl td,
 .zaagTbl th {
     text-align: center;
     vertical-align: middle;
 }

 /* totals-rij duidelijk onderscheiden */
 .dim-total td {
     background: #f0f8ff;
     /* lichte blauwe tint */
     font-weight: 600;
 }

 .dim-total td.totAantal,
 .dim-total td.klaarTotal {
     background: #dbe8ff;
     /* net iets donkerder */
 }



 /* 2️⃣  ALLE directe kinderen krijgen 100 % breedte/hoogte    */
 .klaar-cell>* {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     padding: 0;
     /* haal extra ruimte weg */
     border: 1px solid #ccc;
     /* optische afscheiding  */
 }

 /* 3️⃣  input iets compacter & gecentreerd                   */
 .klaar-cell input.aantalKlaar {
     font-size: .9rem;
     text-align: center;
     border: none;
     /* border al via stap 2  */
     outline: none;
 }

 /* 4️⃣  plus/min wrapper verticaal splitsen                   */
 .klaar-cell .pm {
     display: flex;
     flex-direction: column;
 }

 .klaar-cell .pm button {
     flex: 1 1 50%;
     /* elke knop 50 % hoogte */
 }

 .plus,
 .min,
 .all {
     color: black;
     /* ← forces the glyphs/text to be black   */
     /* optional resets, in case other styles overwrite them */
     fill: currentColor;
     /* if the glyphs were SVG icons           */
 }

 .stuikTbl th,
 .stuikTbl td {
     text-align: center;
     vertical-align: middle;
     padding: 4px;
     border: 1px solid #ccc;
 }

 .stuikTbl .klaar-cell {
     white-space: nowrap;
 }

 .klaar-done {
     background: #d4ffd4;
 }

 /* klaar == aantal → groen */
 .pm button {
     width: 24px;
     height: 24px;
 }

 .zaag-view {
     display: none;
 }

 .zaag-view.active {
     display: block;
 }

 /* toast.css */

 /* put this in your toast.css (or wherever you defined .toast) */

 .toast {
     position: fixed;
     bottom: 2rem;
     /* middle of screen vertically */
     left: 50%;
     /* middle of screen horizontally */
     transform: translateX(-50%) scale(0.9);

     /* make it bigger */
     min-width: 300px;
     max-width: 80%;
     padding: 1.5rem 2rem;
     font-size: 1.25rem;

     background: #4caf50;
     color: white;
     border-radius: 0.5rem;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);

     opacity: 0;
     transition:
         opacity 0.3s ease,
         transform 0.3s ease;
     pointer-events: none;
     z-index: 1000;
 }

 .toast.show {
     opacity: 1;
     /* pop up to full size */
     transform: translateX(-50%) scale(1);
 }

 /* herbruik de toast-styling voor een vaste comment-box */
 .comment-field {
     position: relative;
     width: 100%;
     /* kun je aanpassen naar static/absolute */
     margin: 1rem auto;
     max-width: 600px;
     background: #fff;
     color: #fff;
     padding: 1rem;
     border-radius: 0.5rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     font-family: sans-serif;
     box-sizing: border-box;
 }

 .comment-field h3 {
     margin-top: 0;
     margin-bottom: 0.5rem;
     font-size: 1.1rem;
     font-weight: 600;
 }

 .comment-field textarea {
     width: 100%;
     height: 8rem;
     resize: vertical;
     padding: 0.5rem;
     border: none;
     border-radius: 0.25rem;
     font-size: 1rem;
     box-sizing: border-box;
     outline: none;
     background: #f9f9f9;
     color: #333;
 }

 /* 
    .comment-field button {
      margin-top: 0.5rem;
      padding: 0.5rem 1rem;
      background: #28a745;
      border: none;
      border-radius: 0.25rem;
      color: #fff;
      font-weight: 600;
      cursor: pointer;
    }

    .comment-field button:hover {
      background: #218838;
    } */

 /* optioneel: textarea focus-ring */
 .comment-field textarea:focus {
     box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.5);
 }

 #autoGenerateMaatwerk {
     display: flex;
     flex-direction: row;
     align-items: center;
     /* vertically center if they differ in height */
     gap: 8px;
     /* space between the buttons */
     /* optionally add padding/margin as you like */
 }

 /**
      * Catalog products/variants
      */


 .catalog {
     --border: #e5e7eb;
     --muted: #6b7280;
     --bg: #f8fafc;
     --bg2: #ffffff;
     --pri: #4f46e5;
     font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
     color: #111827;
     background: var(--bg);
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
 }

 .catalog-container {
     width: 100%;
     /* neemt 100% van de parent */
     margin: 0;
     /* geen auto margins meer */
     padding: 16px;
     /* nog wel wat ruimte binnenin */
     box-sizing: border-box;
 }

 .catalog-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 12px;
 }

 .catalog-title {
     margin: 0;
     font-size: 22px;
 }

 /* layout: search → filters → table */
 .catalog-block {
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 12px;
     margin-bottom: 12px;
 }

 .catalog-input,
 .catalog-select {
     width: 100%;
     padding: 8px 10px;
     border-radius: 10px;
     border: 1px solid var(--border);
     outline: none;
 }

 .catalog-input:focus,
 .catalog-select:focus {
     box-shadow: 0 0 0 2px rgba(79, 70, 229, .25);
     border-color: var(--pri);
 }

 .catalog-label {
     font-size: 12px;
     font-weight: 600;
     color: var(--muted);
     margin-bottom: 6px;
     display: block;
 }

 .catalog-filters {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
 }

 @media (max-width: 960px) {
     .catalog-filters {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 560px) {
     .catalog-filters {
         grid-template-columns: 1fr;
     }
 }

 .catalog-tableWrap {
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: 14px;
 }

 .catalog-tableScroll {
     max-height: 70vh;
     overflow: auto;
 }

 .catalog-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     font-size: 14px;
 }

 /* Tabel: centreer standaard alles; samenvatting is expliciet links */
 .catalog-table th,
 .catalog-table td {
     text-align: center;
     vertical-align: middle;
 }

 .catalog-left {
     text-align: left !important;
 }

 .catalog-table thead th {
     position: sticky;
     top: 0;
     background: #f3f4f6;
     text-transform: uppercase;
     font-size: 12px;
     color: var(--muted);
     padding: 10px;
     border-bottom: 1px solid var(--border);
 }

 .catalog-table tbody td {
     padding: 10px;
     border-bottom: 1px solid var(--border);
 }

 .catalog-table tbody tr {
     transition: background-color .12s ease, box-shadow .12s ease;
 }

 .catalog-table tbody tr:nth-child(even) {
     background: #fafafa;
 }

 .catalog-table tbody tr:hover {
     background: rgba(79, 70, 229, .08);
     box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .25);
     cursor: pointer;
 }

 .catalog-right {
     text-align: right;
 }

 .catalog-btn {
     border: 1px solid var(--border);
     background: #007bff;
     color: #fff;
     font-weight: 600;
     padding: 4px 8px;
     border-radius: 8px;
     font-size: 12px;
     cursor: pointer;
 }

 .catalog-btn:hover {
     background: #0077c1;
 }

 .catalog-btn-ghost {
     background: #0077c1;
 }

 /* .catalog-clear {
      border: 1px solid var(--border);
      padding: 4px 8px;
      border-radius: 8px;
      background: #fff;
      font-size: 12px;
      cursor: pointer;
    } */

 .catalog-muted {
     color: var(--muted);
     font-size: 12px;
 }

 /* Toast */
 /* Host neemt de hele viewport en centreert de toast */
 .catalog-toastHost {
     position: fixed;
     inset: auto 16px 16px auto;
     display: flex;
     flex-direction: column;
     gap: 8px;
     z-index: 9999;
 }

 /* Toast zelf */
 /* Toast zelf */
 .catalog-toast {
     --bg: #374151;
     /* default (info fallback) */
     --fg: #fff;
     --btn-bg: transparent;
     --btn-fg: var(--fg);
     --btn-br: rgba(255, 255, 255, .7);
     --btn-bg-hover: rgba(255, 255, 255, .12);

     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;

     min-width: 280px;
     max-width: 520px;
     padding: 12px 12px 12px 16px;
     border-radius: 12px;

     background: var(--bg);
     color: var(--fg);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
     transition: opacity .15s ease, transform .15s ease;
 }

 .catalog-toast-msg {
     line-height: 1.3;
 }

 .catalog-toast-actions {
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 /* Variantkleuren */
 /* Variants met merk-kleuren */
 .catalog-toast--success {
     --bg: #16a34a;
     /* green-600 */
 }

 .catalog-toast--info {
     --bg: #2563eb;
     /* blue-600 */
 }

 .catalog-toast--warning {
     --bg: #dc2626;
     /* red-600 */
 }

 .catalog-toast--error {
     --bg: #b91c1c;
     /* red-700 */
 }

 /* Actie- & sluitknoppen */
 .catalog-toast-action {
     appearance: none;
     border: 1px solid var(--btn-br);
     background: var(--btn-bg);
     color: var(--btn-fg);
     padding: 6px 12px;
     border-radius: 999px;
     font-weight: 600;
     cursor: pointer;
 }

 .catalog-toast-action:hover,
 .catalog-toast-action:focus-visible {
     background: var(--btn-bg-hover);
 }

 .catalog-toast-close {
     appearance: none;
     border: 0;
     background: transparent;
     color: var(--fg);
     font-size: 18px;
     line-height: 1;
     padding: 2px 6px;
     border-radius: 6px;
     cursor: pointer;
 }

 .catalog-toast-close:hover,
 .catalog-toast-close:focus-visible {
     background: rgba(255, 255, 255, .12);
 }

 .catalog-inputSm {
     width: 100%;
     max-width: 100%;
     padding: 6px 8px;
     border-radius: 8px;
     border: 1px solid var(--border);
     text-align: center;
 }


 .catalog-inputSm:focus {
     outline: none;
     box-shadow: 0 0 0 2px rgba(79, 70, 229, .25);
     border-color: var(--pri);
 }

 /* Samenvatting style (2 regels) */
 .catalog-sum {
     line-height: 1.25;
 }

 .catalog-sum-top {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     align-items: center;
     margin-bottom: 4px;
 }

 .catalog-sum-bottom {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     align-items: center;
 }

 .catalog-ctrlBtn {
     border: 1px solid var(--border);
     background: #fff;
     padding: 3px 6px;
     border-radius: 6px;
     cursor: pointer;
 }

 .catalog-ctrlBtn:hover {
     background: #f3f4f6;
 }

 .catalog-chip {
     display: inline-block;
     padding: 2px 6px;
     border: 1px solid var(--border);
     border-radius: 999px;
     background: #fff;
     font-size: 12px;
     line-height: 1.2;
 }

 .catalog-chip-strong {
     font-weight: 700;
     border-color: #c7d2fe;
     background: #eef2ff;
     color: #3730a3;
 }

 /* kleurdotje voor Kleur */
 .catalog-dot {
     width: 10px;
     height: 10px;
     border-radius: 999px;
     display: inline-block;
     border: 1px solid rgba(0, 0, 0, .12);
     margin-right: 4px;
 }

 .catalog-section {
     border: 1px solid var(--border);
     border-radius: 14px;
     margin-bottom: 20px;
     padding: 16px;
 }

 .catalog-section.catalog-source {
     background: #ffffff;
     /* wit */
 }

 .catalog-section.catalog-selection {
     background: #f9fafb;
     /* lichtgrijs (of #eef2ff voor lichtblauw) */
 }

 .catalog-pager {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 12px;
     border-top: 1px solid var(--border);
     background: #fff;
     border-radius: 0 0 14px 14px;
 }

 .catalog-pager-left {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .catalog-pager-right {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .catalog-clear[disabled] {
     opacity: .5;
     cursor: not-allowed;
 }

 .catalog-formRow {
     display: flex;
     align-items: flex-start;
     /* labels bovenaan gelijk */
     gap: 24px;
     /* ruimte tussen de velden */
     flex-wrap: wrap;
     margin: 20px 0;
     /* lucht boven en onder */
 }

 /* Standaard veld neemt netjes ruimte in; min-breedte voorkomt te smal */
 .catalog-field {
     flex: 1 1 220px;
     /* velden rekken netjes uit */
     display: flex;
     flex-direction: column;
     gap: 6px;
     /* label vs input spacing */
 }

 /* Checkbox “kaartje” in dezelfde stijl als inputs/selects */
 .catalog-check {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 9px 12px;
     border: 1px solid var(--border);
     border-radius: 10px;
     background: #fff;
     line-height: 1.2;
     cursor: pointer;
     user-select: none;
 }

 /* Zorg dat de checkbox visueel op lijn zit met de andere velden */
 .catalog-field--checkbox {
     flex: 0 1 auto;
     /* breedte volgt inhoud */
 }

 .catalog-field label {
     font-weight: 600;
     font-size: 14px;
     margin-bottom: 4px;
 }

 /* Consistente checkbox-afmeting */
 .catalog-field input,
 .catalog-field select {
     min-height: 42px;
     /* consistente hoogte */
     padding: 8px 12px;
 }

 /* Checkbox in lijn met de andere velden */
 .catalog-field--checkbox {
     flex: 0 1 auto;
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 26px;
     /* zodat checkbox naast inputvelden uitlijnt */
     padding: 10px 14px;
     border: 1px solid var(--border);
     border-radius: 10px;
     background: #fff;
 }

 /* Final/BOM/BOL – zelfde look & feel als catalogus */
 .catalog-twoCol {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 @media (max-width: 900px) {
     .catalog-twoCol {
         grid-template-columns: 1fr;
     }
 }



 /* optioneel: compacte rijen voor tabellen in deze sectie */
 #finalSection .catalog-table th,
 #finalSection .catalog-table td {
     padding: 8px 10px;
     font-size: 13px;
 }

 #bomAddBar {
     display: none !important;
 }

 /* als de kaart in edit-modus staat → add-bar tonen */
 #bomCard.is-editing #bomAddBar {
     display: flex !important;
     /* of grid, maar past bij .catalog-formRow */
 }

 #bomCard.is-editing {
     box-shadow: 0 0 0 2px rgba(79, 70, 229, .25);
     border-color: var(--pri, #4f46e5);
 }

 /* Acties-kolom standaard verbergen */
 .bom-actions-col,
 .bom-actions-cell {
     display: none;
 }

 /* In edit-modus (class op #bomCard) tonen we de acties-kolom */
 #bomCard.is-editing .bom-actions-col,
 #bomCard.is-editing .bom-actions-cell {
     display: table-cell;
 }

 /* Klein, net inputje voor qty */
 .bom-qty {
     width: 7ch;
     min-width: 72px;
     text-align: center;
 }

 /* Delete-knop */
 .bom-del {
     border: 1px solid var(--border, #e5e7eb);
     background: #fff;
     padding: 4px 8px;
     border-radius: 8px;
     cursor: pointer;
 }

 .bom-del:hover {
     background: #f3f4f6;
 }

 /* BOL: add-bar en acties alleen tonen in edit-modus */
 #bolAddBar {
     display: none !important;
 }

 #bolCard.is-editing #bolAddBar {
     display: flex !important;
 }

 .bol-actions-col,
 .bol-actions-cell {
     display: none;
 }

 #bolCard.is-editing .bol-actions-col,
 #bolCard.is-editing .bol-actions-cell {
     display: table-cell;
 }

 /* compacte inputs */
 .bol-time {
     width: 9ch;
     min-width: 80px;
     text-align: center;
 }

 .bol-op {
     min-width: 140px;
 }

 /* delete-knop */
 .bol-del {
     border: 1px solid var(--border, #e5e7eb);
     background: #fff;
     padding: 4px 8px;
     border-radius: 8px;
     cursor: pointer;
 }

 .bol-del:hover {
     background: #f3f4f6;
 }

 /* optioneel: visuele state in edit-modus */
 #bolCard.is-editing {
     box-shadow: 0 0 0 2px rgba(79, 70, 229, .25);
     border-color: var(--pri, #4f46e5);
 }

 .catalog-btn-lg {
     font-size: 16px;
     /* vergelijkbaar met h2 grootte */
     padding: 10px 20px;
     border-radius: 10px;
 }

 .catalog-btn-lg:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

 /* mode switch button – matches catalog look, clearly primary */
 .catalog-switchBtn {
     border: 1px solid var(--border, #e5e7eb);
     background: #eef2ff;
     color: #3730a3;
     font-weight: 600;
     padding: 6px 10px;
     border-radius: 10px;
     font-size: 12px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .catalog-switchBtn:hover {
     background: #e0e7ff;
 }

 .catalog-switchBtn .muted {
     font-weight: 500;
     color: var(--muted, #6b7280);
 }

 /* small helper layout for the time/metric editors */
 .bol-editor {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .bol-editor label {
     font-size: 12px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .bol-editor .lbl {
     min-width: 120px;
 }

 /* Edit-knoppen net zoals andere knoppen */
 /* #cjZaagEditBtn,
    #bomEditBtn,
    #bolEditBtn,
    #cjBomEditBtn,
    #cjBolEditBtn {
      font-size: 14px;
      padding: 6px 14px;
      border-radius: 8px;
      background: var(--pri, #4f46e5);
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background .2s ease;
    }

    #cjZaagEditBtn:hover,
    #bomEditBtn:hover,
    #bolEditBtn:hover,
    #cjBomEditBtn:hover,
    #cjBolEditBtn:hover {
      background: #4338ca;
      
    } */

 #cjZaagEditBtn:disabled,
 #bomEditBtn:disabled,
 #bolEditBtn:disabled,
 #cjBomEditBtn:disabled,
 #cjBolEditBtn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }



 /* toggle voor meters/acties vs tijd */
 .catalog-pillToggle {
     display: inline-flex;
     gap: 6px;
     background: #fff;
     border: 1px solid var(--border, #e5e7eb);
     border-radius: 999px;
     padding: 4px;
 }

 .catalog-pillToggle .pill {
     border: none;
     background: transparent;
     border-radius: 999px;
     padding: 6px 14px;
     font-weight: 600;
     cursor: pointer;
     color: var(--muted, #374151);
     transition: background .2s ease, color .2s ease;
 }

 .catalog-pillToggle .pill:hover {
     background: #f3f4f6;
 }

 .catalog-pillToggle .pill.active {
     background: var(--primary-color);
     /* jouw primaire kleur */
     color: #fff;
     /* witte tekst */
 }


 /* zelfde primaire knoplijn als elders */
 #cjSection .catalog-btn,
 #cjSection .catalog-clear {
     cursor: pointer;
 }

 /* duidelijk “edit” state zoals in overzicht */
 #cjBomCard.is-editing,
 #cjBolCard.is-editing {
     box-shadow: 0 0 0 2px rgba(79, 70, 229, .25);
     border-color: var(--pri, #4f46e5);
 }

 /* actie-knoppen in tabellen: zelfde look */
 .cj-ctrl {
     border: 1px solid var(--border);
     background: #fff;
     padding: 3px 6px;
     border-radius: 6px;
     cursor: pointer;
 }

 .cj-ctrl:hover {
     background: #f3f4f6;
 }

 /* 1) Center de hele customJSON sectie */
 #cjSection {
     width: 100%;
     max-width: 1000px;
     /* gelijk aan catalogus */
     margin: 0 auto;
     /* center */
 }

 /* 2) Zelfde editor look als je Overzicht (bol-editor, switchBtn, labels) */
 #cjSection .bol-editor {
     display: grid;
     gap: 8px;
 }

 #cjSection .bol-editor .lbl {
     display: block;
     font-size: 12px;
     font-weight: 600;
     color: var(--muted, #6b7280);
     margin-bottom: 4px;
 }

 #cjSection .catalog-switchBtn {
     border: 1px solid var(--border, #e5e7eb);
     background: #fff;
     padding: 6px 10px;
     border-radius: 8px;
     cursor: pointer;
     font-size: 12px;
 }

 #cjSection .catalog-switchBtn:hover {
     background: #f3f4f6;
 }

 /* standaard: nooit zichtbaar */
 #cjBomAddBar,
 #cjBolAddBar {
     display: none !important;
 }

 /* alleen zichtbaar als de card in edit-modus staat */
 #cjBomCard.is-editing #cjBomAddBar,
 #cjBolCard.is-editing #cjBolAddBar {
     display: flex !important;
 }

 #drawingTab {

     flex-direction: column;
     align-items: center;
     padding: 20px;
 }

 .pdf-title {
     text-align: center;
     font-size: 32px;
     margin-bottom: 20px;
 }

 .iframe-wrapper {
     width: 100%;
     display: flex;
     justify-content: center;
 }

 #iframe,
 #pdf-iframe {
     width: 100%;
     max-width: 1600px;
     height: 105vh;
     /* bijna volledige schermhoogte */
     border: none;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
 }

 #cjBolAddMode .pill.is-disabled {
     opacity: .5;
     pointer-events: none;
 }

 #bolAddMode .pill.is-disabled {
     opacity: .5;
     pointer-events: none;
 }

 /* Zaaglijst: compacte numerieke kolommen */
 .catalog-table th.num,
 .catalog-table td.num {
     text-align: right;
     white-space: nowrap;
 }

 #cjZaagAddBar .catalog-input {
     text-align: right;
 }

 /* Acties-kolom consistent met BOM/BOL */
 .cj-zaag-actions-col,
 #cjZaagList .cj-ctrl {
     text-align: right;
 }

 /* Klein icoon-knopje zoals elders */
 #cjZaagList .cj-zaag-del {
     background: transparent;
     border: 0;
     cursor: pointer;
     font-size: 16px;
     line-height: 1;
     padding: 4px 6px;
 }

 /* ===== Zaaglijst – side pickers super compact ===== */

 /* Add-bar zichtbaar in edit (laat staan) */
 #cjZaagAddBar {
     display: none
 }

 #cjZaagCard.is-editing #cjZaagAddBar {
     display: flex;
     gap: 10px;
     align-items: flex-end
 }

 /* Basismatrix rond het vierkantje */
 .sidesSelect {
     --box: 16px;
     /* kleiner vierkantje */
     --sel-w: 44px;
     /* smallere select */
     --gap: 2px;
     display: grid;
     grid-template-areas:
         ".    top    ."
         "left box   right"
         ".   bottom .";
     grid-template-columns: 1fr var(--box) 1fr;
     grid-template-rows: auto var(--box) auto;
     gap: var(--gap);
     align-items: center;
     justify-items: center;
     min-width: 86px;
     /* compacter dan 92px */
 }

 .sidesSelect .sq {
     grid-area: box;
     width: var(--box);
     height: var(--box);
     border: 2px solid #111827;
     border-radius: 4px;
     background: #fff;
 }

 /* Kleine, strakke selects */
 .sidesSelect .sideSel {
     width: var(--sel-w);
     padding: 1px 3px;
     font-size: 11px;
     /* kleiner font */
     line-height: 1.1;
     margin: 0;
     /* geen extra ruimte */
 }

 /* Posities */
 .sidesSelect .top {
     grid-area: top
 }

 .sidesSelect .right {
     grid-area: right
 }

 .sidesSelect .bottom {
     grid-area: bottom
 }

 .sidesSelect .left {
     grid-area: left
 }

 /* Add-bar side picker nog iets strakker */
 #cjZaagAddSides.sidesSelect {
     --box: 14px;
     --sel-w: 40px;
     --gap: 1px;
     min-width: 78px;
 }

 /* ===== Tabel-kolommen smaller zodat alles op één rij past ===== */
 #cjZaagList th,
 #cjZaagList td {
     white-space: nowrap;
     vertical-align: middle
 }

 /* Lengte/Hoogte smal en rechts uitlijnen */
 #cjZaagList th:nth-child(2),
 #cjZaagList td:nth-child(2),
 #cjZaagList th:nth-child(3),
 #cjZaagList td:nth-child(3) {
     width: 72px;
     text-align: right;
 }

 /* Zijden kolom: nog compacter, minimale padding */
 #cjZaagList th:nth-child(4),
 #cjZaagList td:nth-child(4) {
     width: 100px;
     text-align: center;
     padding: 0 4px;
 }

 /* Aantal smal en rechts */
 #cjZaagList th:nth-child(5),
 #cjZaagList td:nth-child(5) {
     width: 64px;
     text-align: right;
 }

 #bolList td:nth-child(3),
 #bolList td:nth-child(4),
 #bolList th:nth-child(3),
 #bolList th:nth-child(4),
 #cjBolList td:nth-child(3),
 #cjBolList td:nth-child(4),
 #cjBolList th:nth-child(3),
 #cjBolList th:nth-child(4) {
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
 }

 #bolList input.catalog-inputSm,
 #cjBolList input.catalog-inputSm {
     text-align: center;
 }



 /* Kleine inline inputs in tabel */
 .catalog-inputSm {
     width: 72px;
     padding: 2px 4px;
     font-size: 12px;
     line-height: 1.2;
 }

 /* Totale kost sectie */

 /* Highlight style for summary section */
 .catalog-section--highlight {
     background: #eef2ff;
     /* indigo-50, zachte blauwachtige tint */
     border: 2px solid #c7d2fe;
     /* indigo-200 rand */
     border-radius: 12px;
     padding: 16px;
 }

 /* Extra nadruk op het bedrag */
 #totalCostPerPanel {
     font-size: 20px;
     font-weight: 700;
     color: #1e3a8a;
     /* indigo-900 */
 }

 /* Layout: twee kolommen op brede schermen */
 .cnc-grid {
     display: block;
 }

 /* lucht tussen de cards */
 .cnc-grid>.catalog-card,
 .cnc-grid>.cnc-summary {
     margin-bottom: 16px;
     /* gelijk aan je catalog spacing */
 }


 @media (min-width: 1100px) {
     .cnc-grid {
         grid-template-columns: 1fr 1fr 360px;
         /* toevoegen | overzicht | summary rechts */
         align-items: start;
     }
 }

 /* Cards */
 /* .catalog-card {
     background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     padding: 12px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
 } */
 .catalog-card {
     background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
     padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin: 30px 0;
 }

 /* Samenvattingskaart (sticky) */
 .cnc-summary {
     position: static;
     top: auto;
 }

 .cnc-summary .summary-header {
     background: #eef2ff;
     /* subtiel indigo */
     padding: 10px 14px;
     border-bottom: 1px solid #e5e7eb;
 }

 .cnc-summary .summary-title {
     margin: 0;
     font-size: 12px;
     font-weight: 600;
     color: #1e1b4b;
 }

 .cnc-summary .summary-body {
     padding: 12px 14px;
     display: grid;
     gap: 8px;
 }

 .cnc-summary .summary-row {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
 }

 .cnc-summary .summary-label {
     color: #374151;
 }

 .cnc-summary .summary-footer {
     padding: 8px 14px 12px;
 }


 /* optioneel: kolommen wat sturen */
 #cncList td:nth-child(1) {
     width: 80px;
 }

 #cncList td:nth-child(3) {
     width: 180px;
 }

 /* Prijsoptie */
 #cncList td:nth-child(4) {
     width: 160px;
 }

 /* Vaste prijs (€) */
 #cncList td:nth-child(5) {
     width: 160px;
 }

 /* Extra lucht tussen secties binnen cards */
 #cncAddBar .catalog-field {
     margin-bottom: 0;
 }


 #canvasTab.active,
 #zagenTab.active,
 #stuiklassenTab.active {
     display: flex;
 }

 .bol-actions-cell button {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 14px;
     margin: 0 2px;
 }

 .bol-actions-cell button:hover {
     color: #007bff;
 }

 .status-ribbon {
     position: absolute;
     top: 22px;
     /* iets lager → tekst niet meer afgesneden */
     left: -40px;
     width: 190px;
     /* iets ruimer voor lange woorden */
     line-height: 32px;
     /* hoogte ribbon */
     text-align: center;
     transform: rotate(-45deg);
     font-weight: 700;
     font-size: 13px;
     letter-spacing: .08em;
     color: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
     pointer-events: none;
     z-index: 2;
 }


 /* Statuskleuren (volgens jouw wens: concept = groen, bevestigd/closed = rood) */
 .status-ribbon.concept {
     background: #16a34a;
 }

 /* groen */
 .status-ribbon.bevestigd,
 .status-ribbon.closed {
     background: #dc2626;
 }

 .maatwerk-message {
     background: rgba(255, 255, 255, 0.95);
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 12px 20px;
     margin-bottom: 10px;
     font-size: 14px;
     font-weight: 600;
     color: #333;
     text-align: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .maatwerk-message:hover {
     background: #f8f9fa;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .hidden {
     display: none !important;
 }

 /* Zorg dat alle actieknoppen op één lijn staan */
 .actions-flex {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 8px;
     /* ruimte tussen 2PC, 4PC en 🗑️ */
 }

 .pc-options {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 /* Checkboxlabels iets compacter */
 .pc-options label {
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 13px;
     white-space: nowrap;
 }

 /* Knop blijft klein en mooi uitgelijnd */
 .catalog-ctrlBtn.del {
     font-size: 16px;
     padding: 2px 6px;
     line-height: 1;
 }

 .catalog-subtotal {
     background: #fff;
     border-radius: 8px;
     padding: 12px 16px;
     margin-bottom: 8px;
     box-shadow: inset 0 0 0 1px #e0e0e0;
 }

 .catalog-subline {
     display: flex;
     justify-content: space-between;
     padding: 2px 0;
     font-size: 14px;
     color: #555;
 }

 .catalog-totalLine {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #f9fbff;
     border-radius: 8px;
     padding: 12px 16px;
     box-shadow: inset 0 0 0 1px #dbe4ff;
 }

 .catalog-totalText {
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .catalog-totalValue {
     font-size: 18px;
     font-weight: 700;
     color: #002b80;
 }

 .catalog-btnGroup {
     display: flex;
     gap: 8px;
 }

 .catalog-input.catalog-textarea {
     width: 100%;
     min-height: 100px;
     font-size: 14px;
     line-height: 1.4;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     padding: 8px 10px;
     resize: vertical;
     color: #111;
     background: #fff;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

 .catalog-input.catalog-textarea:focus {
     outline: none;
     border-color: #3b82f6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
 }

 .catalog-hint {
     font-size: 12px;
     color: var(--muted);
     align-self: flex-end;
 }

 /* ─── Collapsible styling ───────────────────────────── */

 .collapsible {
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
     background: #fff;
     margin: 30px 0;
     overflow: hidden;
 }

 .collapsible-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #f9fafb;
     padding: 12px 16px;
     cursor: pointer;
     user-select: none;
 }

 .collapsible-header:hover {
     background: #f3f4f6;
 }

 /* .collapsible-btn {
     background: none;
     border: none;
     color: var(--muted);
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 4px;
     cursor: pointer;
 } */

 .collapsible-icon {
     transition: transform 0.25s ease;
 }

 .collapsible-content {
     padding: 0 16px 16px;
     max-height: 3000px;
     overflow: hidden;
     transition: max-height 0.35s ease, opacity 0.25s ease;
     opacity: 1;
 }

 .collapsible.closed .collapsible-content {
     max-height: 0;
     opacity: 0;
     padding-bottom: 0;
 }

 .collapsible.closed .collapsible-icon {
     transform: rotate(-90deg);
 }

 /* ─── Totale afmetingen rij ───────────────────────────── */
 .total-dimensions-row td {
     background: #fff;
     /* zelfde als andere rijen */
     border-top: 1px solid #e5e7eb;
     /* lichte lijn zoals rest */
     padding: 6px 8px;
     vertical-align: middle;
 }

 .total-dimensions-row input {
     /* width: 90%; */
     text-align: center;
     border: 1px solid #d1d5db;
     border-radius: 6px;
     /* padding: 4px 6px;
     font-size: 13px; */
     background: #f9fafb;
 }

 .total-dimensions-row input:focus {
     outline: 2px solid #2563eb;
     background: #fff;
 }









 /* rood */












 /* Inputs/selects hebben je bestaande look & feel:
   .catalog-input, .catalog-select, .catalog-label bestaan al in je CSS */