:root{--bg:#f5f7fb;--surface:#fff;--text:#172033;--muted:#6b7280;--line:#e7eaf0;--primary:#4f46e5;--primary2:#6366f1;--sidebar:#111827;--sidebar2:#1f2937;--success:#16a34a;--danger:#dc2626;--shadow:0 10px 30px rgba(15,23,42,.07)}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);font-size:14px}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{width:250px;position:fixed;inset:0 auto 0 0;background:linear-gradient(180deg,var(--sidebar),#0b1220);color:#fff;display:flex;flex-direction:column;z-index:20}.brand{height:72px;padding:0 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);font-weight:800;color:#fff;box-shadow:0 8px 22px rgba(99,102,241,.35)}.brand-mark.small{width:36px;height:36px;border-radius:10px;font-size:12px}.brand strong{display:block;font-size:15px}.brand small{display:block;color:#9ca3af;margin-top:2px}.nav{padding:20px 12px;overflow:auto}.nav-label{font-size:10px;letter-spacing:.12em;color:#6b7280;font-weight:700;padding:10px 10px 7px}.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:#cbd5e1;margin:2px 0;font-weight:500}.nav-item span{width:20px;text-align:center;color:#94a3b8}.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}.nav-item.active{background:linear-gradient(90deg,rgba(99,102,241,.95),rgba(99,102,241,.72));color:#fff;box-shadow:0 7px 18px rgba(79,70,229,.22)}.nav-item.active span{color:#fff}.sidebar-bottom{margin-top:auto;padding:15px;border-top:1px solid rgba(255,255,255,.08)}.user-mini{display:flex;align-items:center;gap:10px;margin-bottom:10px}.avatar,.top-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#6366f1;color:#fff;font-weight:700}.user-mini strong{display:block;font-size:12px}.user-mini small{display:block;color:#94a3b8;text-transform:capitalize;margin-top:2px}.logout{display:block;text-align:center;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#cbd5e1;font-size:12px}.logout:hover{background:rgba(255,255,255,.06);color:#fff}.main{margin-left:250px;min-width:0;width:calc(100% - 250px)}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:10}.breadcrumb{font-size:11px;color:#9ca3af;margin-bottom:4px}.topbar h1{font-size:21px;margin:0;font-weight:700}.top-actions{display:flex;align-items:center;gap:12px}.date-chip{background:#f8fafc;border:1px solid var(--line);padding:8px 12px;border-radius:8px;color:#4b5563;font-size:12px}.content{padding:28px 30px}.welcome{background:linear-gradient(135deg,#4338ca,#6366f1 60%,#7c3aed);color:#fff;border-radius:16px;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.eyebrow{font-size:10px;letter-spacing:.13em;font-weight:800;opacity:.8}.welcome h2{font-size:23px;margin:7px 0}.welcome p{margin:0;color:#e0e7ff}.welcome-mark{font-size:48px;font-weight:900;opacity:.15}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.stat,.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.stat{padding:18px;display:flex;gap:13px;align-items:center}.stat-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800}.purple{background:#ede9fe;color:#6d28d9}.blue{background:#dbeafe;color:#2563eb}.green{background:#dcfce7;color:#16a34a}.orange{background:#ffedd5;color:#ea580c}.stat small{display:block;color:var(--muted);font-size:11px}.stat strong{display:block;font-size:22px;margin-top:3px}.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.panel{overflow:hidden}.panel-head{padding:19px 20px;border-bottom:1px solid var(--line)}.panel-head h3{margin:0;font-size:15px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.workflow{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:8px}.workflow div{text-align:center}.workflow b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#4f46e5;margin:auto}.workflow span{display:block;font-size:11px;color:#6b7280;margin-top:7px}.workflow i{color:#cbd5e1}.quick{padding:20px;display:grid;gap:10px}.quick a{padding:12px 14px;border:1px solid var(--line);border-radius:9px;color:#374151;background:#fafafa}.quick a:hover{border-color:#c7d2fe;background:#eef2ff;color:#4338ca}.page-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.muted{color:var(--muted);margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:10px 15px;font-weight:600;cursor:pointer;font-size:13px}.btn.primary{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 7px 15px rgba(79,70,229,.2)}.btn.secondary{background:#fff;border:1px solid var(--line);color:#4b5563}.btn.full{width:100%;margin-top:8px}.alert{padding:11px 13px;border-radius:9px;margin:12px 0;font-size:13px}.alert.success{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0}.alert.danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#6b7280;background:#fafafa}td{font-size:13px}tr:last-child td{border-bottom:0}.company-cell{display:flex;align-items:center;gap:10px}.company-logo{width:36px;height:36px;border-radius:9px;background:#eef2ff;color:#4f46e5;display:grid;place-items:center;font-weight:800}.company-cell strong{display:block}.company-cell small{display:block;color:#9ca3af;margin-top:2px}.code-pill{background:#f1f5f9;padding:5px 8px;border-radius:6px;font-size:11px;font-weight:700;color:#475569}.status{display:inline-block;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:capitalize}.status.active{background:#dcfce7;color:#166534}.status.inactive{background:#f1f5f9;color:#64748b}.action{color:#4f46e5;font-size:12px;font-weight:600;margin-right:8px}.danger-text{color:#dc2626}.form-panel{padding:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid>div.full-row{grid-column:1/-1}label{display:block;font-size:12px;font-weight:650;margin-bottom:7px;color:#374151}input,select,textarea{width:100%;border:1px solid #dfe3ea;border-radius:8px;padding:10px 11px;background:#fff;color:#111827;outline:none}input:focus,select:focus,textarea:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.12)}textarea{min-height:90px;resize:vertical}.form-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.login-page{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#eef2ff);display:grid;place-items:center;padding:28px}.login-shell{width:min(940px,100%);min-height:570px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;box-shadow:0 24px 70px rgba(15,23,42,.12)}.login-brand{position:relative;overflow:hidden;padding:52px;background:linear-gradient(145deg,#312e81,#4f46e5 55%,#7c3aed);color:#fff;display:flex;flex-direction:column;justify-content:center}.login-brand .brand-mark{margin-bottom:24px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);box-shadow:none}.login-brand h1{font-size:32px;line-height:1.12;margin:0 0 10px}.login-brand p{color:#e0e7ff;margin:0;font-size:14px}.login-art{position:absolute;width:330px;height:330px;right:-100px;bottom:-120px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.login-art:before,.login-art:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}.login-art:before{inset:35px}.login-art:after{inset:75px}.login-card{padding:55px 48px;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:27px;margin:8px 0}.login-card .muted{font-size:13px;margin-bottom:18px}.login-card label{margin-top:11px}.login-hint{font-size:11px;color:#9ca3af;margin-top:16px;text-align:center}.login-card form{display:block}.login-card .eyebrow{color:#6366f1;opacity:1}.login-card input{height:44px}.login-card .alert{margin-bottom:6px}@media(max-width:900px){.sidebar{width:220px}.main{margin-left:220px;width:calc(100% - 220px)}.stats{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-brand{min-height:260px;padding:35px}.login-card{padding:38px}}@media(max-width:650px){.sidebar{position:relative;width:100%;height:auto}.app-shell{display:block}.main{margin:0;width:100%}.nav,.sidebar-bottom{display:none}.topbar{padding:0 16px}.content{padding:18px 16px}.stats{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid>div.full-row{grid-column:auto}.login-page{padding:12px}.login-brand{min-height:210px}.login-brand h1{font-size:25px}.login-card{padding:30px 24px}}


/* ===== LPJ Management Pages UI Repair ===== */
.page-content{
  padding:28px 30px 48px;
  max-width:1600px;
  margin:0 auto;
}
.page-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.page-toolbar h2{
  margin:4px 0 6px;
  font-size:22px;
  line-height:1.25;
  color:var(--text);
}
.page-toolbar .muted{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.page-toolbar .eyebrow{
  margin-bottom:3px;
}
.table-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.table-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.table-head>div{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.table-head strong{
  font-size:15px;
  color:var(--text);
}
.table-head span{
  font-size:11px;
  color:#98a1b2;
}
.table-card .table-wrap{
  overflow-x:auto;
}
.table-card table{
  width:100%;
  border-collapse:collapse;
}
.table-card th,
.table-card td{
  padding:13px 15px;
  vertical-align:middle;
}
.table-card th{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#7b8495;
  background:#fafbfc;
  white-space:nowrap;
}
.table-card td{
  font-size:12px;
  color:#263047;
}
.table-card tbody tr{
  transition:background .15s ease;
}
.table-card tbody tr:hover{
  background:#fafbff;
}
.table-card td strong{
  font-weight:700;
}
.table-card td small{
  display:block;
  color:#98a1b2;
  font-size:11px;
  line-height:1.35;
  margin-top:3px;
}
.code-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:5px 8px;
  border-radius:7px;
  background:#f0edff;
  color:#5b5ce2;
  font-size:10px;
  font-weight:800;
  letter-spacing:.35px;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.status-pill.active{
  background:#ecfdf3;
  color:#047857;
}
.status-pill.inactive{
  background:#f3f4f6;
  color:#6b7280;
}
.empty-state{
  text-align:center!important;
  color:#98a1b2!important;
  padding:32px!important;
}
.btn.small{
  padding:7px 10px;
  border-radius:8px;
  font-size:11px;
  background:#f7f8fb;
  border:1px solid var(--line);
  color:#4b5563;
  box-shadow:none;
}
.btn.small:hover{
  background:#f0edff;
  color:var(--primary);
  border-color:#ddd9ff;
}
.btn.danger-outline{
  color:#dc2626!important;
  background:#fff!important;
  border-color:#fecaca!important;
}
.btn.danger-outline:hover{
  background:#fff1f2!important;
  border-color:#fca5a5!important;
}
.actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.page-content .btn.primary{
  white-space:nowrap;
}

/* Company list */
.company-cell{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:240px;
}
.company-logo{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:9px;
  background:#eef2ff;
  color:#4f46e5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-weight:800;
}
.company-logo img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.company-cell strong{
  display:block;
  white-space:normal;
  line-height:1.3;
}
.company-cell small{
  display:block;
  color:#9ca3af;
  margin-top:2px;
}
.code-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:7px;
  background:#f1f5f9;
  color:#475569;
  font-size:10px;
  font-weight:800;
}
.status{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.status.active{
  background:#dcfce7;
  color:#166534;
}
.status.inactive{
  background:#f1f5f9;
  color:#64748b;
}
.action{
  color:#4f46e5;
  font-size:11px;
  font-weight:700;
  margin-right:10px;
}
.danger-text{color:#dc2626}

/* Companies table */
.content>.panel table th:first-child{min-width:280px}
.content>.panel table th:nth-child(2){width:90px}
.content>.panel table th:nth-child(3){min-width:240px}
.content>.panel table th:nth-child(4){min-width:170px}
.content>.panel table th:nth-child(5){width:110px}
.content>.panel table th:nth-child(6){width:150px}

/* Requesters */
.page-content .table-card table th:nth-child(1){min-width:260px}
.page-content .table-card table th:nth-child(2){min-width:140px}
.page-content .table-card table th:nth-child(3){min-width:240px}
.page-content .table-card table th:nth-child(4){width:110px}
.page-content .table-card table th:nth-child(5){width:110px}
.page-content .table-card table th:nth-child(6){width:120px}
.page-content .table-card td{
  white-space:nowrap;
}

/* Document types */
.page-content .table-card table th:nth-child(1){width:100px}
.page-content .table-card table th:nth-child(2){min-width:300px}
.page-content .table-card table th:nth-child(3){width:150px}
.page-content .table-card table th:nth-child(4){width:120px}
.page-content .table-card table th:nth-child(5){width:190px}

/* Documents list */
.documents-table{
  min-width:1050px;
}
.documents-table th,
.documents-table td{
  white-space:nowrap;
}
.documents-table th:nth-child(1){min-width:190px}
.documents-table th:nth-child(2){width:110px}
.documents-table th:nth-child(3){min-width:180px}
.documents-table th:nth-child(4){width:100px}
.documents-table th:nth-child(5){min-width:180px}
.documents-table th:nth-child(6){width:90px}
.documents-table .action-col{min-width:300px}

/* Document numbers */
.numbering-note{
  font-size:11px;
  color:#98a1b2;
  margin-top:6px;
}
.filter-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:18px 20px;
  margin-bottom:18px;
}
.filter-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 180px auto;
  gap:14px;
  align-items:end;
}
.filter-grid .field label{
  display:block;
  font-size:12px;
  font-weight:700;
  margin:0 0 7px;
}
.filter-grid select,
.filter-grid input{
  width:100%;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  background:#fff;
  color:var(--text);
}
.filter-actions{
  display:flex;
  gap:8px;
}
.filter-actions .btn{height:40px}
.stats-3{grid-template-columns:repeat(3,1fr)}
.next-number{
  display:inline-flex;
  padding:5px 8px;
  border-radius:7px;
  background:#ecfdf3;
  color:#047857;
  font-weight:800;
  font-size:11px;
}
.number-preview{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  background:#f7f8fb;
  border:1px solid var(--line);
  padding:5px 7px;
  border-radius:7px;
  color:#374151;
}
.logs-card{margin-top:18px}

/* Company detail */
.company-detail-hero{
  padding:22px;
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 320px;
  gap:20px;
  align-items:center;
}
.detail-logo{
  width:80px;
  height:80px;
  border-radius:14px;
  background:#f1f3ff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.detail-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.detail-company-main h2{
  margin:5px 0 8px;
  font-size:21px;
}
.detail-company-main p{
  margin:10px 0 0;
  color:#667085;
  font-size:12px;
  line-height:1.6;
}
.detail-meta{
  display:flex;
  align-items:center;
  gap:8px;
}
.detail-contact{
  display:grid;
  gap:12px;
}
.detail-contact small{
  display:block;
  color:#98a1b2;
  font-size:10px;
  margin-bottom:3px;
}
.detail-contact strong{
  display:block;
  font-size:12px;
  word-break:break-word;
}
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.detail-body{padding:18px}
.detail-panel-head{display:flex;align-items:center;justify-content:space-between}
.detail-panel-head>div{min-width:0}
.count-badge{
  min-width:28px;height:28px;padding:0 8px;border-radius:8px;
  background:#f0edff;color:#5b5ce2;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:800;
}
.inline-form-card{
  padding:16px;
  background:#fafbff;
  border:1px solid var(--line);
  border-radius:11px;
  margin-bottom:16px;
}
.compact-grid{gap:12px 16px}
.checkbox-row{margin-top:2px}
.checkbox-row label{display:flex!important;align-items:center;gap:8px}
.checkbox-row input{width:auto!important}
.signature-thumb{
  width:80px;height:32px;object-fit:contain;
  border:1px solid var(--line);border-radius:5px;background:#fff;
}
.table-sub{
  display:block;
  color:#98a1b2;
  font-size:10px;
  margin-top:3px;
}

/* General responsive repair */
@media(max-width:1100px){
  .filter-grid{grid-template-columns:1fr 180px}
  .filter-actions{grid-column:1/-1}
  .detail-grid{grid-template-columns:1fr}
  .company-detail-hero{grid-template-columns:80px minmax(0,1fr)}
  .detail-contact{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .page-content{padding:22px 20px 40px}
  .page-toolbar{align-items:flex-start}
  .table-card .table-wrap{overflow-x:auto}
  .stats-3{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .page-content{padding:18px 14px 30px}
  .page-toolbar{flex-direction:column;gap:12px}
  .page-toolbar>.btn{width:100%;justify-content:center}
  .filter-grid{grid-template-columns:1fr}
  .filter-actions{grid-column:auto}
  .filter-actions .btn{flex:1}
  .stats-3{grid-template-columns:1fr}
  .company-detail-hero{grid-template-columns:1fr}
  .detail-contact{grid-column:auto;grid-template-columns:1fr}
}