:root{--navy:#101a2e;--blue:#0788c9;--ink:#14233d;--muted:#71809a;--bg:#f0f5fa;--line:#dce5f0;--green:#079669}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}.topbar{height:68px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1240px)/2));gap:20px;position:sticky;top:0;z-index:5;box-shadow:0 4px 18px #101a2e20}.brand{font-size:18px;font-weight:800;color:#45c3ff}.brand small{font-size:11px;color:#9baec6;font-weight:500}.topnav{display:flex;gap:8px;align-items:center}.topnav a,.pill{padding:9px 13px;border-radius:10px;color:#c3cede}.topnav a.active,.btn.primary{background:var(--blue);color:white}.wrap{max-width:none;width:100%;margin:24px 0;padding:0 24px}.hero{padding:22px 26px;background:linear-gradient(110deg,#176b91,#41469b);border-radius:17px;color:white;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:0 5px 14px #173b6320}.hero h2{margin:0 0 5px;font-size:18px}.hero p{margin:0;color:#d5e8ff}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin:20px 0 24px;overflow:auto}.tabs a{padding:12px 16px;color:#526783;white-space:nowrap;border-bottom:2px solid transparent}.tabs a.active{color:var(--blue);border-color:var(--blue);font-weight:700}.card{background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 4px #19324b05;margin-bottom:18px}.card-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.card-head h2,.card-head h3{margin:0}.card-body{padding:22px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stat{padding:20px}.stat strong{display:block;font-size:28px;margin-top:8px}.muted{color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);font-weight:650;cursor:pointer}.btn:hover{filter:brightness(.98)}.btn.primary{border-color:var(--blue)}.btn.success{background:var(--green);border-color:var(--green);color:white}.btn.danger{color:#b42318}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-weight:650;font-size:12px;color:#425571}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cbd8e8;border-radius:10px;background:white;color:var(--ink);font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #0788c91a}textarea{min-height:100px;resize:vertical}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:600px}th,td{text-align:left;padding:13px 16px;border-bottom:1px solid #edf1f6}th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#687b96;background:#f8fafc}.badge{display:inline-block;padding:4px 9px;border-radius:99px;background:#eaf5ff;color:#0879b3;font-size:11px;font-weight:700}.empty{padding:36px;text-align:center;color:var(--muted)}.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px}.side{padding:14px}.side a{display:block;padding:10px;border-radius:8px;color:#536782}.side a.active,.side a:hover{background:#eaf5ff;color:#0879b3}.builder{display:grid;grid-template-columns:225px minmax(0,1fr) 265px;min-height:520px}.builder>div{padding:18px;border-right:1px solid var(--line)}.builder>div:last-child{border-right:0}.component{display:flex;justify-content:space-between;padding:10px;margin:7px 0;border:1px solid var(--line);border-radius:8px;cursor:pointer}.canvas{background:#f7f9fc}.canvas-form{background:white;border:1px solid var(--line);border-radius:12px;padding:20px;min-height:300px}.component-field{padding:14px;border:1px solid #d5e0ed;border-radius:9px;margin:12px 0;background:#fff;cursor:pointer}.component-field.selected{border-color:var(--blue);box-shadow:0 0 0 2px #0788c91a}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(140deg,#101a2e,#244e80)}.login-card{width:min(430px,100%);background:white;padding:30px;border-radius:18px;box-shadow:0 25px 80px #0003}.notice{padding:12px 14px;background:#fff4e5;border:1px solid #ffdda8;border-radius:10px;margin-bottom:16px}.footer{padding:30px;text-align:center;color:#8190a5;font-size:12px}@media(max-width:900px){.topbar{padding:12px 18px;height:auto;flex-wrap:wrap}.topnav{overflow:auto;width:100%}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.builder{grid-template-columns:1fr}.builder>div{border-right:0;border-bottom:1px solid var(--line)}.layout{grid-template-columns:1fr}}@media(max-width:600px){.grid,.form-grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.wrap{padding:0 12px;margin:14px 0}.card-body{padding:16px}}
.pagination-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 4px;color:var(--muted);font-size:13px}
.pagination-controls .pagination-left,.pagination-controls .pagination-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pagination-controls select{width:auto;min-width:84px;padding:6px 9px;border-radius:8px}
.pagination-controls button{padding:6px 10px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--ink)}
.pagination-controls button:disabled{opacity:.4;cursor:not-allowed}
.result-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
@media(max-width:900px){.wrap{padding:0 16px}}

/* Signature Builder and print layout */
.signature-input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;width:100%}
.signature-preview-grid{display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px;width:100%;overflow:visible}
.signature-input-card,.signature-preview-card{border:1px solid #d8e2f0;border-radius:10px;padding:12px;background:#fff;min-width:0}
.signature-input-card label{display:block;font-size:12px;margin:10px 0 5px}
.signature-preview-card{flex:1 1 0;text-align:center;break-inside:avoid;page-break-inside:avoid;overflow-wrap:anywhere}
.signature-preview-card .signature-qr{margin:8px auto;min-height:72px;display:flex;align-items:center;justify-content:center}
.signature-preview-card .signature-qr img{object-fit:contain;max-width:72px;width:72px;height:72px}
.signature-qr-empty{font-size:9px;color:#64748b;line-height:1.25;max-width:90px}
.signature-space{height:42px;border-bottom:1px solid #64748b;margin:8px 0}
.signature-preview-card small{display:block;color:#64748b;margin-top:6px}
@media(max-width:700px){.signature-preview-grid{flex-wrap:wrap}.signature-preview-card{flex:1 1 140px}}
@media print{.signature-preview-grid{display:flex;flex-wrap:nowrap;gap:8px}.signature-preview-card{flex:1 1 0;padding:8px;border-color:#cbd5e1}.signature-preview-card .signature-qr img{width:62px;height:62px}.signature-preview-card .signature-qr{min-height:62px}.signature-space{height:32px}}

/* Signature input layout compatibility fix */
.signature-input-grid{display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px;width:100%;overflow:visible}
.signature-input-card{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.signature-input-card select,.signature-input-card input{width:100%;min-width:0}
@media(max-width:700px){.signature-input-grid{flex-wrap:wrap}.signature-input-card{flex:1 1 220px}}

/* PaperlessCMS clean Master Data dropdown */
.topbar{position:sticky;top:0;z-index:3000;overflow:visible;isolation:isolate}
.topnav{overflow:visible;position:static}
.nav-dropdown{position:relative;display:flex;align-items:center;flex:0 0 auto}
.nav-dropdown-toggle{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;white-space:nowrap;cursor:pointer}
.nav-dropdown-toggle:hover,.nav-dropdown-toggle.active{background:#0788c9;color:#fff}
.nav-caret{font-size:11px;transition:transform .15s ease}
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
.nav-dropdown-menu[hidden]{display:none!important}
.nav-dropdown-menu:not([hidden]){position:absolute;top:calc(100% + 9px);left:0;width:320px;max-width:calc(100vw - 24px);padding:8px;background:#fff;border:1px solid #dce5f0;border-radius:13px;box-shadow:0 16px 38px rgba(16,26,46,.2);z-index:99999;display:grid;gap:5px}
.nav-dropdown-menu:not([hidden]):before{content:"";position:absolute;top:-6px;left:26px;width:11px;height:11px;background:#fff;border-left:1px solid #dce5f0;border-top:1px solid #dce5f0;transform:rotate(45deg)}
.nav-dropdown-item{position:relative;display:flex;align-items:center;gap:11px;padding:12px;border-radius:9px;color:#14233d;text-decoration:none;white-space:normal;min-width:0}
.nav-dropdown-item:hover,.nav-dropdown-item.current{background:#eef8ff;color:#075f99}
.nav-dropdown-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:#e8f4ff;color:#087fc1;font-size:17px}
.nav-dropdown-item strong{display:block;font-size:13px;line-height:1.35;color:#14233d}
.nav-dropdown-item small{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:#71809a}
.topbar-user{white-space:nowrap;font-size:12px}
@media(max-width:900px){.topbar{overflow:visible}.topnav{overflow:visible;flex-wrap:wrap}.nav-dropdown-menu:not([hidden]){position:fixed;top:76px;left:12px;width:min(320px,calc(100vw - 24px));max-width:none}}
@media(max-width:600px){.topbar-user{margin-left:auto}.nav-dropdown-menu:not([hidden]){top:112px}}

/* FINAL dropdown repair: prevent submenu text leaking into navbar */
.topbar{position:sticky!important;top:0!important;z-index:5000!important;overflow:visible!important;isolation:isolate!important}
.topnav{display:flex!important;align-items:center!important;overflow:visible!important;position:static!important}
#masterDataNav{position:relative!important;display:flex!important;align-items:center!important;flex:0 0 auto!important;overflow:visible!important}
#masterDataToggle{appearance:none!important;border:0!important;cursor:pointer!important;font:inherit!important;font-size:13px!important;font-weight:600!important;color:#d8e2f0!important;background:transparent!important;padding:10px 12px!important;border-radius:9px!important;white-space:nowrap!important}
#masterDataToggle:hover,#masterDataToggle[aria-expanded="true"]{background:#0788c9!important;color:#fff!important}
#masterDataMenu[hidden]{display:none!important;visibility:hidden!important}
#masterDataMenu[style*="display: none"]{display:none!important;visibility:hidden!important}
#masterDataMenu:not([hidden]){position:absolute!important;top:calc(100% + 8px)!important;left:0!important;right:auto!important;bottom:auto!important;transform:none!important;width:330px!important;max-width:calc(100vw - 24px)!important;box-sizing:border-box!important;padding:9px!important;margin:0!important;background:#fff!important;color:#14233d!important;border:1px solid #dce5f0!important;border-radius:13px!important;box-shadow:0 16px 38px rgba(16,26,46,.24)!important;z-index:99999!important;display:grid!important;grid-template-columns:1fr!important;gap:5px!important;white-space:normal!important}
#masterDataMenu:before{content:""!important;position:absolute!important;top:-6px!important;left:25px!important;width:10px!important;height:10px!important;background:#fff!important;border-top:1px solid #dce5f0!important;border-left:1px solid #dce5f0!important;transform:rotate(45deg)!important}
#masterDataMenu .nav-dropdown-item{position:relative!important;display:flex!important;align-items:center!important;gap:10px!important;padding:12px!important;margin:0!important;width:auto!important;box-sizing:border-box!important;white-space:normal!important;text-decoration:none!important;border-radius:9px!important;color:#14233d!important;background:#fff!important}
#masterDataMenu .nav-dropdown-item:hover,#masterDataMenu .nav-dropdown-item.current{background:#eef8ff!important;color:#075f99!important}
#masterDataMenu .nav-dropdown-item>span:last-child{display:block!important;flex:1 1 auto!important;min-width:0!important}
#masterDataMenu .nav-dropdown-item strong{display:block!important;font-size:13px!important;line-height:1.4!important;color:#14233d!important}
#masterDataMenu .nav-dropdown-item small{display:block!important;margin-top:4px!important;font-size:11px!important;line-height:1.45!important;color:#71809a!important}
@media(max-width:900px){#masterDataMenu:not([hidden]){position:fixed!important;top:76px!important;left:12px!important;right:auto!important;width:min(330px,calc(100vw - 24px))!important}}