:root{--blue:#1257b8;--blue2:#082f72;--yellow:#f5c400;--bg:#f3f6fb;--card:#fff;--text:#172033;--muted:#6b7687;--line:#e1e7f0;--green:#128447;--red:#cf3545;--orange:#d78312}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eaf3ff,#fff8dc)}.login-card{width:min(430px,92vw);background:#fff;border-radius:24px;padding:36px;box-shadow:0 22px 70px #163d7520;text-align:center;border-top:5px solid var(--blue)}.login-card h1{margin:15px 0 4px;font-size:24px}.login-card p{color:var(--muted);margin:0 0 24px}.login-card input{width:100%;padding:13px;margin:6px 0;border:1px solid #d6dfeb;border-radius:10px}.login-card small{display:block;color:var(--muted);margin-top:12px}.brand-mark{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),#398ef0);color:#fff;font-weight:900;margin:auto}.brand-mark.small{width:42px;height:42px;font-size:12px;border-radius:12px;margin:0}.app{display:flex;min-height:100vh}.sidebar{width:260px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:17px 13px;display:flex;flex-direction:column;z-index:5}.side-brand{display:flex;gap:10px;align-items:center;padding:4px 5px 17px;border-bottom:1px solid var(--line)}.side-brand b{font-size:14px;display:block}.side-brand span{font-size:11px;color:var(--muted)}nav{padding-top:12px;overflow:auto}nav button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:11px 12px;border-radius:10px;color:#465266;margin:2px 0}nav button:hover,nav button.active{background:#eaf3ff;color:var(--blue);font-weight:800}.logout{margin-top:auto;border:0;background:#fff0f1;color:var(--red);padding:11px;border-radius:10px}.main{margin-left:260px;width:calc(100% - 260px)}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:4}.topbar b{display:block}.topbar span{font-size:12px;color:var(--muted)}.top-actions{display:flex;gap:8px}.btn{border:1px solid var(--line);background:#fff;padding:9px 13px;border-radius:9px;color:#344154}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.success{background:var(--green);border-color:var(--green);color:#fff}.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.warn{background:#fff4d6;border-color:#efd17a;color:#805900}.full{width:100%}.filebtn{cursor:pointer}.filebtn input{display:none}#content{padding:25px}.page-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:19px}.page-title h2{margin:0;font-size:23px}.page-title p{margin:5px 0 0;color:var(--muted);font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.grid{display:grid;gap:15px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.two{grid-template-columns:1.45fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}.metric .label{font-size:12px;color:var(--muted)}.metric .value{font-size:27px;font-weight:900;margin-top:6px}.metric .hint{font-size:11px;color:var(--muted);margin-top:3px}.panel h3{margin:0 0 14px;font-size:16px}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.formgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:10px 11px;border:1px solid #d7e0eb;border-radius:9px;background:#fff}.field textarea{min-height:82px;resize:vertical}.checkrow{display:flex;align-items:center;gap:8px;padding:10px 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}th{background:#fafbfd;color:var(--muted);font-weight:700}.right{text-align:right}.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.paid{background:#e8f7ee;color:#147d3d}.due{background:#fff2df;color:#a86600}.neutral{background:#eef2f7;color:#5b6676}.searchbar{display:flex;gap:9px;margin-bottom:13px;flex-wrap:wrap}.searchbar input,.searchbar select{padding:10px;border:1px solid #d7e0eb;border-radius:9px}.summary{display:flex;justify-content:space-between;gap:10px;padding:7px 0}.bill-total{display:flex;justify-content:flex-end;margin-top:14px}.bill-total-box{min-width:310px}.bill-total-box div{display:flex;justify-content:space-between;padding:5px}.bill-total-box .grand{font-size:20px;font-weight:900;border-top:1px solid var(--line);margin-top:5px;padding-top:10px}.modal{position:fixed;inset:0;background:#07101f88;display:grid;place-items:center;z-index:20;padding:20px}.modal-box{background:#fff;border-radius:16px;width:min(760px,96vw);max-height:92vh;overflow:auto;padding:23px;position:relative}.close{position:absolute;right:12px;top:10px;border:0;background:#f2f5f9;border-radius:50%;width:30px;height:30px;font-size:20px}.notice{padding:12px 14px;border-radius:10px;background:#edf5ff;color:#18539d;font-size:13px;margin-bottom:14px}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.check{border:1px solid var(--line);padding:9px;border-radius:9px;font-size:12px}.check input{margin-right:6px}.empty{text-align:center;padding:30px;color:var(--muted)}#toast{position:fixed;right:20px;bottom:20px;background:#17202d;color:#fff;padding:11px 15px;border-radius:9px;opacity:0;transform:translateY(10px);transition:.2s;z-index:30}.qr-preview{width:150px;height:150px;border:1px solid #dbe3ee;padding:5px;background:#fff;border-radius:8px}.invoice-preview{background:#fff;border:1px solid #dce4ef;border-radius:12px;padding:12px}.letterhead-note{background:#fff9df;border:1px solid #eed98a;padding:10px;border-radius:9px;font-size:12px}.print-select{display:flex;gap:10px;flex-wrap:wrap}.print-select label{border:1px solid var(--line);padding:12px;border-radius:10px;cursor:pointer}.print-select input{margin-right:7px}.muted{color:var(--muted);font-size:12px}.nowrap{white-space:nowrap}.badge{font-size:11px;padding:3px 7px;border-radius:5px;background:#eef5ff;color:#18539d}.stats-line{display:flex;gap:10px;flex-wrap:wrap}.stat-chip{padding:9px 12px;background:#f7f9fc;border:1px solid var(--line);border-radius:9px;font-size:12px}
@media(max-width:1050px){.cards{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.three,.formgrid.three,.module-grid{grid-template-columns:1fr 1fr}.sidebar{width:220px}.main{margin-left:220px;width:calc(100% - 220px)}}@media(max-width:700px){.sidebar{position:static;width:100%;height:auto}.app{display:block}.main{margin-left:0;width:100%}.sidebar nav{display:grid;grid-template-columns:1fr 1fr}.logout{margin-top:10px}.topbar{position:static}.cards,.three,.formgrid,.formgrid.three,.module-grid{grid-template-columns:1fr}.top-actions{display:none}#content{padding:15px}}
@media print{body{background:#fff}.sidebar,.topbar,#toast,.no-print{display:none!important}.main{margin:0;width:100%}#content{padding:0}.print-sheet{display:block!important}.screen-only{display:none!important}}

/* PJSK branded application shell */
.app-letterhead{position:sticky;top:0;z-index:8;height:116px;background:#fff;border-bottom:4px solid #0b4b9e;box-shadow:0 5px 20px rgba(16,57,110,.12);overflow:hidden}
.app-letterhead>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.header-actions{position:absolute;right:18px;bottom:12px;display:flex;gap:8px;padding:6px;border-radius:12px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:0 5px 16px rgba(0,0,0,.12)}
.header-btn{border-color:#d3dfef!important;background:#fff!important;color:#0b4b9e!important;font-weight:800;box-shadow:0 2px 8px rgba(11,75,158,.08)}
.header-btn:hover{background:#f1f7ff!important;transform:translateY(-1px)}
.side-brand{min-height:72px;align-items:center!important;background:linear-gradient(135deg,#f8fbff,#fff);border:1px solid #dce7f4;border-radius:14px;padding:8px!important;box-shadow:0 4px 14px rgba(16,57,110,.06)}
.side-logo{width:54px;height:54px;object-fit:contain;flex:0 0 54px;border-radius:12px}
.side-brand b{color:#0b3f86!important;font-size:13px!important;line-height:1.2}.side-brand span{color:#5b6d84!important;margin-top:3px;display:block}
.sidebar{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)!important}
nav button{transition:.18s ease;position:relative;font-weight:600}nav button:hover,nav button.active{box-shadow:0 4px 12px rgba(18,87,184,.10);transform:translateX(2px)}
#content{background:linear-gradient(180deg,#f6faff 0,#f3f6fb 260px)}
.page-title h2{color:#0b3f86}.card,.panel{box-shadow:0 5px 20px rgba(26,70,120,.06);border-color:#dbe6f2}.card:hover,.panel:hover{box-shadow:0 8px 26px rgba(26,70,120,.10)}
.login-wrap{background:radial-gradient(circle at top,#fff 0,#eef6ff 42%,#f7f9fc 100%)}
.login-card{overflow:hidden;padding:18px 30px 30px}.login-card:before{content:"";display:block;height:92px;margin:-18px -30px 18px;background:url('letterhead_header.png') center/cover no-repeat;border-bottom:3px solid #0b4b9e}.login-card .brand-mark{display:none}
@media(max-width:900px){.app-letterhead{height:92px}.header-actions{bottom:6px;right:8px;transform:scale(.86);transform-origin:right bottom}.side-logo{width:46px;height:46px;flex-basis:46px}}
@media(max-width:700px){.app-letterhead{position:static;height:82px}.app-letterhead>img{object-fit:cover}.header-actions{position:absolute;bottom:4px;right:4px}.header-btn{padding:6px 8px;font-size:11px}.side-brand{margin-bottom:4px}}
/* Refined PJSK application header */
.app-letterhead{position:sticky;top:0;z-index:8;height:154px;background:#fff;border-bottom:0;box-shadow:0 4px 16px rgba(16,57,110,.10);overflow:hidden;padding:0}
.app-letterhead>img{display:block;width:100%;height:100%;object-fit:fill;object-position:center center}
.app-toolbar{height:48px;background:rgba(255,255,255,.97);border-bottom:1px solid #dbe6f2;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:154px;z-index:7;box-shadow:0 3px 12px rgba(16,57,110,.06)}
.app-toolbar-title{display:flex;align-items:center;gap:9px;color:#0b3f86}
.app-toolbar-title b{display:block;font-size:13px;line-height:1.1}
.app-toolbar-title small{display:block;color:#718096;font-size:10px;margin-top:2px}
.toolbar-dot{width:8px;height:8px;border-radius:50%;background:#f5c400;box-shadow:0 0 0 4px #fff4bf}
.app-toolbar .header-actions{position:static;display:flex;gap:7px;padding:0;background:transparent;backdrop-filter:none;box-shadow:none}
.app-toolbar .header-btn{padding:7px 11px;border-radius:8px;font-size:12px}
@media(max-width:900px){.app-letterhead{height:128px}.app-toolbar{top:128px}.app-toolbar{height:44px;padding:0 10px}.app-toolbar-title b{font-size:12px}.app-toolbar-title small{font-size:9px}.app-toolbar .header-btn{padding:6px 8px;font-size:11px}}
@media(max-width:700px){.app-letterhead{position:static;height:auto}.app-letterhead>img{height:auto;width:100%;object-fit:contain}.app-toolbar{position:static;height:44px}.app-toolbar-title{display:none}.app-toolbar{justify-content:flex-end}}

/* ===== PJSK clean HD UI refinement ===== */
/* Hide native side-nav scrollbar while preserving mouse-wheel/touch scrolling. */
.sidebar nav{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;scroll-behavior:smooth}
.sidebar nav::-webkit-scrollbar{width:0;height:0;display:none}
.sidebar nav::-webkit-scrollbar-thumb,.sidebar nav::-webkit-scrollbar-track{background:transparent}

/* Cleaner fixed application shell */
.sidebar{width:248px;padding:16px 12px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;border-right:1px solid #dfe8f3;box-shadow:4px 0 18px rgba(25,62,105,.055)}
.main{margin-left:248px;width:calc(100% - 248px);min-width:0}
.side-brand{min-height:68px;border-radius:15px;padding:8px!important;box-shadow:0 5px 16px rgba(16,57,110,.055);margin-bottom:4px}
.side-logo{width:50px;height:50px;flex-basis:50px;border-radius:12px}
.sidebar nav{padding-top:10px}
.sidebar nav button{padding:10px 11px;border-radius:11px;margin:2px 0;color:#4d5a6d;font-size:13px;letter-spacing:.05px}
.sidebar nav button:hover{background:#f0f6ff;color:#1257b8;transform:none;box-shadow:none}
.sidebar nav button.active{background:linear-gradient(90deg,#e9f3ff,#f5f9ff);color:#0b4b9e;box-shadow:inset 3px 0 0 #1257b8,0 4px 12px rgba(18,87,184,.07);transform:none}
.logout{margin-top:auto;border:1px solid #f1d8dc;background:#fff7f8;color:#c53d4c;font-weight:700}

/* Preserve the letterhead proportions; never stretch it vertically. */
.app-letterhead{position:sticky;top:0;z-index:8;height:128px;padding:0;background:#fff;overflow:hidden;border-bottom:1px solid #cfdceb;box-shadow:0 4px 18px rgba(16,57,110,.10)}
.app-letterhead>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.app-toolbar{height:42px;top:128px;padding:0 16px;background:rgba(255,255,255,.96);border-bottom:1px solid #e0e8f2;box-shadow:0 3px 10px rgba(16,57,110,.045);backdrop-filter:blur(8px)}
.app-toolbar-title b{font-size:12px}.app-toolbar-title small{font-size:9px}
.app-toolbar .header-actions{gap:6px}
.app-toolbar .header-btn{padding:6px 10px;border-radius:8px;font-size:11px}

/* Cleaner, sharper page surface */
#content{padding:22px;background:linear-gradient(180deg,#f8fbff 0,#f3f6fb 320px);min-height:calc(100vh - 170px)}
.page-title{margin-bottom:16px}.page-title h2{font-size:22px;letter-spacing:-.2px}.page-title p{font-size:12px}
.card,.panel{border-radius:15px;border-color:#e0e8f2;box-shadow:0 5px 18px rgba(24,63,108,.055);transition:box-shadow .18s ease,transform .18s ease}
.card:hover,.panel:hover{box-shadow:0 8px 24px rgba(24,63,108,.085)}
.metric .value{font-size:25px}
th{background:#f7faff;color:#59677a}
.btn{border-radius:9px;box-shadow:0 2px 7px rgba(25,62,105,.04)}
.btn.primary{box-shadow:0 5px 14px rgba(18,87,184,.18)}

@media(max-width:1050px){.sidebar{width:220px}.main{margin-left:220px;width:calc(100% - 220px)}.app-letterhead{height:112px}.app-toolbar{top:112px}}
@media(max-width:700px){.sidebar{width:100%;box-shadow:none}.main{margin-left:0;width:100%}.app-letterhead{position:static;height:88px}.app-letterhead>img{object-fit:cover;object-position:center top}.app-toolbar{position:static}.sidebar nav{max-height:none}}

/* FINAL HEADER PROPORTION FIX: preserve the original PJSK letterhead ratio */
.app-letterhead{
  position:sticky;
  top:0;
  z-index:8;
  width:100%;
  /* Home/app header reduced by about 1.5 cm while keeping the full branded image visible. */
  height:calc((100vw - 260px) * 225 / 1024 - 82px) !important;
  min-height:130px !important;
  max-height:165px !important;
  background:#fff;
  overflow:hidden;
  padding:0 !important;
  border-bottom:3px solid #0b4b9e;
  box-shadow:0 3px 14px rgba(16,57,110,.10);
}
.app-letterhead>img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none;
  object-fit:fill !important;
  object-position:center center !important;
}
.app-toolbar{
  position:relative !important;
  top:auto !important;
  height:46px !important;
  min-height:46px;
  background:#fff;
  border-bottom:1px solid #e1e7f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  box-shadow:0 2px 8px rgba(16,57,110,.04);
}
.app-toolbar-title{display:none !important}
.app-toolbar .header-actions{
  margin-left:auto;
  position:static !important;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.app-toolbar .header-btn{padding:6px 10px;border-radius:8px;font-size:11px}

/* Keep the navigation scrollbar invisible while preserving wheel/touch scrolling. */
.sidebar nav{
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sidebar nav::-webkit-scrollbar{width:0;height:0;display:none}

@media(max-width:1050px){
  .app-letterhead{height:calc((100vw - 220px) * 225 / 1024 - 82px) !important;min-height:115px !important;max-height:155px !important}
}
@media(max-width:700px){
  .app-letterhead{position:static;height:88px !important;min-height:88px !important;max-height:88px !important}
  .app-letterhead>img{width:100% !important;height:100% !important;object-fit:fill !important}
  .app-toolbar{height:42px !important;min-height:42px}
}