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

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

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

.pf-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}
.pf-title-icon{width:65px;height:65px;object-fit:contain}
.pf-title-text{font-size:22px;font-weight:650;color:#1f2937;white-space:nowrap}

.pf-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 10px}
.pf-actions-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-status{font-size:12px;color:#2b6c2f}
.pf-readonly{font-size:12px;color:#a33}

.pf-btn{border:1px solid #cfcfcf;border-radius:10px;padding:10px 14px;background:#fff;cursor:pointer}
.pf-btn:disabled{opacity:.5;cursor:not-allowed}

/* Table */
.pf-table-wrap{border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;background:#fff}
.pf-table{width:100%;border-collapse:collapse;table-layout:fixed}
.pf-table th,.pf-table td{border:1px solid #d9d9d9;vertical-align:middle}
.pf-table th{background:#f2f2f2;padding:8px 6px;text-align:center;position:relative}
/* Center-middle header content like the paper form */
.pf-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}
.pf-th-line{width:100%;text-align:center}
.pf-qcp{color:#666;font-weight:700}
.pf-ccp{color:#444;font-weight:700}

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

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

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

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

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

/* Column resizer */
.pf-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.
*/
.pf-h-doc{display:table !important;width:100% !important;border-collapse:collapse !important;padding:0 !important}
.pf-h-doc .pf-docrow{display:table-row !important;border-bottom:1px solid #000 !important;font-size:11px !important}
.pf-h-doc .pf-docrow:last-child{border-bottom:0 !important}
.pf-h-doc .pf-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}
.pf-h-doc .pf-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 */
.pf-toolbar{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;}
.pf-toolbar .pf-left{justify-self:start;min-width:280px;}
.pf-toolbar .pf-center{justify-self:center;}
.pf-toolbar .pf-right{justify-self:end;min-width:280px;}
.pf-left select.pf-form-select{width:100%;max-width:520px;min-width:280px;}
@media (max-width: 900px){.pf-toolbar{display:flex;flex-direction:column;align-items:stretch;}.pf-toolbar .pf-left,.pf-toolbar .pf-right{min-width:unset;}}


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


/* v1.2.8: constrain header logos to their cells */
.pf-h-logo{display:flex;align-items:center;justify-content:center;}
.pf-h-logo img.pf-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) */
.pf-wrap select.pf-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;}
.pf-wrap select.pf-form-select:focus{outline:none;}
.pf-wrap .pf-left{align-items:flex-start;}


/* v1.3.0: hard-fix native select text clipping on some browsers/themes */
.pf-wrap select.pf-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;
}
.pf-wrap select.pf-form-select option{font-size:16px !important;line-height:1.2 !important;}


/* v1.3.1: custom dropdown to avoid native select baseline clipping */
.pf-form-dd{position:relative;max-width:520px;min-width:240px;}
.pf-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;}
.pf-dd-label{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pf-dd-caret{width:10px;height:10px;border-right:2px solid #555;border-bottom:2px solid #555;transform:rotate(45deg);margin-left:auto;}
.pf-form-dd.is-open .pf-dd-caret{transform:rotate(-135deg);}
.pf-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;}
.pf-form-dd.is-open .pf-dd-list{display:block;}
.pf-dd-opt{padding:10px 14px;font-size:15px;line-height:1.2;cursor:pointer;}
.pf-dd-opt:hover,.pf-dd-opt.is-active{background:#f3f5f7;}
.pf-form-dd input.pf-form-select{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}


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


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

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


/* v1.4.1 – screen: header logo cells fixed height to avoid overflow */
.pf-header .pf-hcell.logo,
.pf-header .pf-hcell.logo2{
  height: 54px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  padding: 2px 4px;
}
.pf-header .pf-hcell.logo img,
.pf-header .pf-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 */
.pf-header img.pf-logo{
  height: 34px;
  max-height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}


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


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