.odf-frontend{max-width:1600px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.odf-label{font-size:12px;color:#555;margin-right:6px;white-space:nowrap}

/* v1.0.3 – frontend layout (match requested UI) */
.odf-page-title{font-size:26px;font-weight:700;text-align:center;margin:18px 0 14px;color:#111827}

.odf-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:10px 0 12px;flex-wrap:wrap}
.odf-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.odf-print-controls{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.odf-print-controls .odf-field{display:flex;flex-direction:column;gap:6px}
.odf-print-controls label{font-size:13px;color:#444}
.odf-print-controls input[type="date"]{height:42px;min-width:260px;border:1px solid #d6d6d6;border-radius:10px;padding:0 12px;font-size:14px;background:#fff}

/* Buttons like screenshot */
.odf-btn{border:1px solid #cfcfcf;border-radius:14px;padding:12px 18px;background:#fff;cursor:pointer;font-size:15px;line-height:1}
.odf-btn:hover{background:#f7f7f7}
.odf-btn:disabled{opacity:.5;cursor:not-allowed}
.odf-btn-print{padding:12px 22px;border-radius:16px}

/* Ensure the paper header grid NEVER shows on frontend */
.odf-frontend .odf-header-grid{display:none !important}

.odf-toolbar{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:18px 0 12px}
.odf-left,.odf-right{display:flex;align-items:center;gap:10px}
.odf-right{justify-content:flex-end;flex-wrap:wrap}

.odf-form-select{min-width:260px;padding:10px 12px;border:1px solid #d0d0d0;border-radius:10px;background:#fff}

.odf-titlebar{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;border:1px solid #e2e2e2;border-radius:12px;background:#fff;min-width:320px}
.odf-title-icon{width:65px;height:65px;object-fit:contain}
.odf-title-text{font-size:22px;font-weight:650;color:#1f2937;white-space:nowrap}

.odf-status{font-size:12px;color:#2b6c2f}
.odf-readonly{font-size:12px;color:#a33}


/* Sheet header (screen) — match print grid layout */
.odf-sheet{background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:14px;}
.odf-header-grid{display:grid;grid-template-columns: 1.1fr 1fr 1fr 1fr 0.9fr;border:1px solid #000;margin:8px 0 12px}
.odf-hcell{border-right:1px solid #000;min-height:60px;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden}
.odf-hcell:last-child{border-right:0}
.odf-h-title-inner{display:flex;align-items:center;justify-content:center;gap:10px}
.odf-h-title-text{font-size:20px;font-weight:700;text-align:center}
.odf-h-company-text{font-size:14px;font-weight:700;line-height:1.15;text-align:center}
.odf-h-logo{display:flex;align-items:center;justify-content:center;padding:2px 4px}
img.odf-logo{height:34px;max-height:34px;width:auto;max-width:100%;object-fit:contain;display:block}

/* Table */
.odf-table-wrap{border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;background:#fff}
.odf-table{width:100%;border-collapse:collapse;table-layout:fixed}
.odf-table th,.odf-table td{border:1px solid #d9d9d9;vertical-align:middle}
.odf-table th{background:#f2f2f2;padding:8px 6px;text-align:center;position:relative}
/* Center-middle header content like the paper form */
.odf-th-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.15;font-size:12px;word-break:normal;white-space:normal;min-height:72px}
.odf-th-line{width:100%;text-align:center}
.odf-qcp{color:#666;font-weight:700}
.odf-ccp{color:#444;font-weight:700}

.odf-table td{padding:6px;background:#fff}
.odf-cell{width:100%;box-sizing:border-box;border:1px solid #d6d6d6;border-radius:8px;padding:8px 8px;font-size:13px}
.odf-cell:disabled{background:#fafafa}

.odf-row-handle{cursor:grab;font-size:16px;user-select:none}
.odf-del{border:none;background:transparent;font-size:18px;cursor:pointer}

/* Desktop: no horizontal scroll, always fit columns */
@media (min-width: 901px){
  .odf-table-wrap{overflow:visible}
}

/* Mobile/tablet: touch drag scroll */
@media (max-width: 900px){
  .odf-toolbar{grid-template-columns:1fr;}
  .odf-titlebar{min-width:0}
  .odf-right{justify-content:flex-start}
  /* Keep column widths readable (do NOT shrink to fit); allow horizontal scroll */
  .odf-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  .odf-table{table-layout:auto;width:max-content;min-width:1200px}
  .odf-table th{min-width:110px}
  .odf-th-inner{min-height:60px}
}

.odf-help{font-size:12px;color:#555;margin:8px 0 22px}
.odf-help ul{margin:10px 0 0 18px}

/* Column resizer */
.odf-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize}


/*
  Blocksy (and some themes) apply flex rules to header cells on desktop.
  Using flex-direction alone may be overridden. Force a true vertical "table" layout
  so Doc details ALWAYS stack vertically on desktop + mobile + print.
*/
.odf-h-doc{display:table !important;width:100% !important;border-collapse:collapse !important;padding:0 !important}
.odf-h-doc .odf-docrow{display:table-row !important;border-bottom:1px solid #000 !important;font-size:11px !important}
.odf-h-doc .odf-docrow:last-child{border-bottom:0 !important}
.odf-h-doc .odf-doclabel{display:table-cell !important;width:45% !important;padding:3px 6px !important;border-right:1px solid #000 !important;vertical-align:top !important;white-space:nowrap !important}
.odf-h-doc .odf-docvalue{display:table-cell !important;width:55% !important;padding:3px 6px !important;text-align:right !important;vertical-align:top !important}



/* v1.2.6: prevent form selector truncation */
.odf-toolbar{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;}
.odf-toolbar .odf-left{justify-self:start;min-width:280px;}
.odf-toolbar .odf-center{justify-self:center;}
.odf-toolbar .odf-right{justify-self:end;min-width:280px;}
.odf-left select.odf-form-select{width:100%;max-width:520px;min-width:280px;}
@media (max-width: 900px){.odf-toolbar{display:flex;flex-direction:column;align-items:stretch;}.odf-toolbar .odf-left,.odf-toolbar .odf-right{min-width:unset;}}


/* v1.2.7: fix form selector text clipping */
.odf-toolbar{overflow:visible;}
.odf-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:320px;}
.odf-left label{white-space:nowrap;}
select.odf-form-select{flex:1 1 360px;min-width:360px;max-width:520px;width:auto;padding-right:42px;}
@media (max-width: 520px){select.odf-form-select{min-width:240px;flex-basis:240px;}}


/* v1.2.8: constrain header logos to their cells */
.odf-h-logo{display:flex;align-items:center;justify-content:center;}
.odf-h-logo img.odf-logo{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto;}


/* v1.2.9: fix select text clipping (Blocksy/mobile) */
.odf-wrap select.odf-form-select{box-sizing:border-box !important;height:auto !important;min-height:44px !important;line-height:1.25 !important;padding:10px 44px 10px 14px !important;display:block !important;}
.odf-wrap select.odf-form-select:focus{outline:none;}
.odf-wrap .odf-left{align-items:flex-start;}


/* v1.3.0: hard-fix native select text clipping on some browsers/themes */
.odf-wrap select.odf-form-select{
  font-size:16px !important;
  height:48px !important;
  min-height:48px !important;
  line-height:48px !important;
  padding:0 44px 0 14px !important;
  vertical-align:middle !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}
.odf-wrap select.odf-form-select option{font-size:16px !important;line-height:1.2 !important;}


/* v1.3.1: custom dropdown to avoid native select baseline clipping */
.odf-form-dd{position:relative;max-width:520px;min-width:240px;}
.odf-dd-btn{width:100%;min-height:48px;border:1px solid #cfd3d8;border-radius:10px;background:#fff;padding:10px 44px 10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.odf-dd-label{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.odf-dd-caret{width:10px;height:10px;border-right:2px solid #555;border-bottom:2px solid #555;transform:rotate(45deg);margin-left:auto;}
.odf-form-dd.is-open .odf-dd-caret{transform:rotate(-135deg);}
.odf-dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #cfd3d8;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:6px 0;margin:0;list-style:none;max-height:260px;overflow:auto;display:none;z-index:9999;}
.odf-form-dd.is-open .odf-dd-list{display:block;}
.odf-dd-opt{padding:10px 14px;font-size:15px;line-height:1.2;cursor:pointer;}
.odf-dd-opt:hover,.odf-dd-opt.is-active{background:#f3f5f7;}
.odf-form-dd input.odf-form-select{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}


/* v1.3.5: ensure form dropdown clickable above table */
.odf-form-dd{z-index:10000;}
.odf-dd-btn{cursor:pointer;pointer-events:auto;}
.odf-dd-list{pointer-events:auto;}


/* v1.4.0 – force header logos to fit inside column */
.odf-header-logo img,
.odf-print-header img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

@media print {
    .odf-header-logo img,
    .odf-print-header img {
        max-height: 40px;
    }
}


/* v1.4.1 – screen: header logo cells fixed height to avoid overflow */
.odf-header .odf-hcell.logo,
.odf-header .odf-hcell.logo2{
  height: 54px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  padding: 2px 4px;
}
.odf-header .odf-hcell.logo img,
.odf-header .odf-hcell.logo2 img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
}


/* v1.4.2 – screen header logos slightly smaller */
.odf-header img.odf-logo{
  height: 34px;
  max-height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}


/* v1.4.3 – screen: keep header logos inside their columns */
.odf-frontend .odf-header-grid .odf-h-logo{
  height: 54px;
  overflow: hidden;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.odf-frontend .odf-header-grid .odf-h-logo img.odf-logo{
  height: 34px;
  max-height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.odf-frontend .odf-header-grid .odf-h-logo-nougatlimar img.odf-logo{
  height: 32px;
  max-height: 32px;
}


/* v1.4.4 – screen: ensure header logo cells stretch so grid borders stay continuous */
.odf-frontend .odf-header-grid .odf-h-logo{
  height: auto;
  min-height: 60px;
  align-self: stretch;
  overflow: hidden;
}


/* checknote cell */
.odf-cn{display:flex;align-items:center;gap:6px}
.odf-cn select{font-size:12px;padding:2px 4px}
.odf-cn input.odf-cn-note{width:100%}
.odf-cn .odf-cn-check{width:18px;height:18px}