:root{--ph-bg:#f8fafc;--ph-side:#0f172a;--ph-side2:#111827;--ph-text:#0f172a;--ph-muted:#64748b;--ph-border:#e2e8f0;--ph-blue:#2563eb;--ph-blue2:#dbeafe;--ph-red:#dc2626;--ph-amber:#d97706;--ph-green:#16a34a;--ph-card:#fff;--ph-shadow:0 16px 40px rgba(15,23,42,.08)}
#pertihub-root,.pertihub-root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ph-text);background:var(--ph-bg);min-height:82vh;margin:-10px 0 0 0}.ph-app{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:82vh;background:var(--ph-bg);border:1px solid var(--ph-border);border-radius:22px;overflow:hidden;box-shadow:var(--ph-shadow)}
.ph-sidebar{background:linear-gradient(180deg,var(--ph-side),var(--ph-side2));color:#e5e7eb;display:flex;flex-direction:column;min-height:82vh}.ph-brand{height:76px;display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid rgba(255,255,255,.08)}.ph-brand img{width:40px;height:40px;border-radius:12px;background:#fff;object-fit:contain}.ph-brand strong{display:block;color:#fff;font-size:18px;letter-spacing:.4px}.ph-brand small{color:#94a3b8;font-size:12px}.ph-sidebar nav{padding:14px 10px;overflow:auto;flex:1}.ph-nav-title{font-size:11px;text-transform:uppercase;color:#94a3b8;letter-spacing:.12em;margin:18px 12px 8px}.ph-nav-item{display:flex;align-items:center;gap:11px;margin:4px 0;padding:11px 12px;color:#d1d5db;text-decoration:none;border-radius:12px;transition:.16s}.ph-nav-item span{width:24px;text-align:center}.ph-nav-item b{font-size:14px}.ph-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}.ph-nav-item.active{background:#fff;color:#0f172a;box-shadow:0 10px 24px rgba(0,0,0,.16)}.ph-user{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:14px;border-top:1px solid rgba(255,255,255,.08)}.ph-avatar{width:40px;height:40px;border-radius:14px;background:#2563eb;color:#fff;display:grid;place-items:center;font-weight:900}.ph-user b{display:block;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ph-user small{display:block;color:#94a3b8;font-size:11px}.ph-user button{border:0;border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.ph-main{min-width:0;display:flex;flex-direction:column}.ph-topbar{height:76px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--ph-border);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;position:sticky;top:0;z-index:5}.ph-topbar h1{margin:0;font-size:22px;font-weight:850}.ph-topbar p{margin:2px 0 0;color:var(--ph-muted);font-size:12px}.ph-top-actions{display:flex;gap:10px;align-items:center}.ph-top-actions input,.ph-filter{border:1px solid var(--ph-border);background:#fff;border-radius:12px;padding:10px 13px;min-width:260px;outline:none}.ph-content{padding:22px;min-width:0}.ph-btn{border:1px solid var(--ph-border);background:#fff;color:#0f172a;border-radius:12px;padding:10px 14px;font-weight:750;cursor:pointer;transition:.14s}.ph-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}.ph-btn.primary{background:var(--ph-blue);color:#fff;border-color:var(--ph-blue)}.ph-btn.ghost{background:#f8fafc}.ph-panel{background:#fff;border:1px solid var(--ph-border);border-radius:18px;box-shadow:var(--ph-shadow);overflow:hidden}.ph-toolbar{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--ph-border);align-items:center}.ph-toolbar .ph-filter{flex:1}.ph-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.ph-kpi{background:#fff;border:1px solid var(--ph-border);border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(15,23,42,.05)}.ph-kpi small{display:block;color:var(--ph-muted);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.08em}.ph-kpi strong{display:block;font-size:26px;font-weight:900;margin-top:7px}.ph-kpi span{display:block;color:var(--ph-muted);font-size:12px;margin-top:3px}.ph-dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.ph-dash-card{background:#fff;border:1px solid var(--ph-border);border-radius:20px;padding:22px;min-height:128px;text-decoration:none;color:var(--ph-text);box-shadow:var(--ph-shadow);transition:.16s;display:flex;flex-direction:column;justify-content:space-between}.ph-dash-card:hover{transform:translateY(-3px);border-color:#bfdbfe}.ph-dash-card span{font-size:28px}.ph-dash-card b{font-size:16px}.ph-dash-card small{color:var(--ph-muted)}
.ph-table-wrap{overflow:auto}.ph-table{width:100%;border-collapse:separate;border-spacing:0}.ph-table th{position:sticky;top:0;background:#f8fafc;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:12px;border-bottom:1px solid var(--ph-border)}.ph-table td{padding:13px 12px;border-bottom:1px solid #f1f5f9;vertical-align:top;font-size:14px}.ph-table td small{display:block;color:var(--ph-muted);font-size:12px;margin-top:3px}.ph-click-row{cursor:pointer}.ph-click-row:hover{background:#eff6ff}.ph-badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:850}.ph-badge.blue{background:#dbeafe;color:#1d4ed8}.ph-badge.amber{background:#fef3c7;color:#b45309}.ph-badge.red{background:#fee2e2;color:#b91c1c}.ph-badge.green{background:#dcfce7;color:#15803d}
.ph-login{min-height:82vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#dbeafe,transparent 36%),linear-gradient(135deg,#f8fafc,#eef6ff)}.ph-login-card{width:min(980px,94vw);display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border:1px solid var(--ph-border);border-radius:26px;box-shadow:var(--ph-shadow);overflow:hidden}.ph-login-hero{background:linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);color:#fff;padding:46px;display:flex;flex-direction:column;justify-content:center}.ph-login-hero img{width:120px;background:#fff;border-radius:28px;padding:10px;margin-bottom:24px}.ph-login-hero h1{font-size:38px;margin:0}.ph-login-hero p{opacity:.86}.ph-login form{padding:46px;display:flex;flex-direction:column;gap:12px;justify-content:center}.ph-login label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--ph-muted)}.ph-login input,.ph-form input,.ph-form textarea,.ph-form select{border:1px solid var(--ph-border);border-radius:14px;padding:13px;font-size:15px;outline:none;background:#fff}.ph-form{display:flex;flex-direction:column;gap:10px}.ph-muted{color:var(--ph-muted);font-size:12px;margin-top:-4px}.ph-form textarea{min-height:140px}.ph-error,.ph-error-card{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:14px;padding:12px}.ph-error-card{margin:14px}.ph-empty{background:#fff;border:1px dashed #cbd5e1;border-radius:18px;text-align:center;padding:38px;color:var(--ph-muted)}
.ph-skeleton-wrap{display:grid;gap:12px}.ph-skeleton{height:58px;border-radius:16px;background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f8fafc);background-size:220% 100%;animation:phShimmer 1.2s infinite}@keyframes phShimmer{to{background-position:-220% 0}}
.ph-chat-layout{display:grid;grid-template-columns:260px minmax(0,1fr);height:calc(82vh - 120px);background:#fff;border:1px solid var(--ph-border);border-radius:20px;overflow:hidden;box-shadow:var(--ph-shadow)}.ph-chat-rooms{border-right:1px solid var(--ph-border);background:#f8fafc;padding:16px}.ph-chat-rooms h3{margin:4px 0 14px}.ph-room{width:100%;display:block;text-align:left;border:0;background:transparent;border-radius:12px;padding:11px 12px;font-weight:800;color:#334155;cursor:pointer}.ph-room.active,.ph-room:hover{background:#e0ecff;color:#1d4ed8}.ph-chat-main{display:flex;min-width:0;flex-direction:column}.ph-chat-head{height:62px;border-bottom:1px solid var(--ph-border);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.ph-chat-head small{display:block;color:var(--ph-muted)}.ph-chat-feed{flex:1;overflow:auto;padding:18px;background:#fbfdff}.ph-bubble{max-width:72%;background:#fff;border:1px solid var(--ph-border);border-radius:18px 18px 18px 6px;padding:10px 12px;margin:0 0 12px;box-shadow:0 6px 16px rgba(15,23,42,.05)}.ph-bubble.mine{margin-left:auto;background:#eaf2ff;border-color:#bfdbfe;border-radius:18px 18px 6px 18px}.ph-bubble b{font-size:13px}.ph-bubble small{margin-left:8px;color:var(--ph-muted);font-size:11px}.ph-bubble p{margin:6px 0;white-space:pre-wrap}.ph-chat-images{display:flex;flex-wrap:wrap;gap:8px}.ph-chat-images img{width:140px;max-height:120px;object-fit:cover;border-radius:12px}.ph-chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:12px;border-top:1px solid var(--ph-border);background:#fff}.ph-chat-form input[type=text],.ph-chat-form input:not([type]){border:1px solid var(--ph-border);border-radius:14px;padding:12px}
.ph-ann-layout{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(82vh - 120px);background:#fff;border:1px solid var(--ph-border);border-radius:20px;overflow:hidden;box-shadow:var(--ph-shadow)}.ph-ann-list{border-right:1px solid var(--ph-border);overflow:auto;background:#f8fafc}.ph-ann-item{width:100%;border:0;border-bottom:1px solid var(--ph-border);background:transparent;text-align:left;padding:15px;cursor:pointer}.ph-ann-item.active,.ph-ann-item:hover{background:#fff}.ph-ann-item b{display:block}.ph-ann-item small{color:var(--ph-muted)}.ph-ann-detail{overflow:auto;padding:30px}.ph-ann-detail h2{font-size:30px;margin:0 0 8px}.ph-meta{color:var(--ph-muted);font-weight:700;margin-bottom:18px}.ph-ann-img{max-width:720px;width:100%;border-radius:18px;margin:12px 0;box-shadow:var(--ph-shadow)}.ph-ann-detail p{font-size:16px;line-height:1.7;white-space:pre-wrap}.ph-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ph-detail-list div{background:#f8fafc;border:1px solid var(--ph-border);border-radius:14px;padding:11px}.ph-detail-list small{display:block;color:var(--ph-muted);font-size:11px;text-transform:uppercase}.ph-detail-list b{display:block;margin-top:4px;word-break:break-word}.ph-lines{padding-left:20px}.ph-submit-box{margin-top:16px;display:flex;gap:10px;align-items:center}
.ph-drawer-wrap{position:fixed;inset:0;z-index:99999;display:flex;justify-content:flex-end}.ph-drawer-back{position:absolute;inset:0;background:rgba(15,23,42,.38);backdrop-filter:blur(2px)}.ph-drawer{position:relative;width:min(720px,94vw);height:100%;background:#fff;box-shadow:-18px 0 50px rgba(15,23,42,.22);display:flex;flex-direction:column}.ph-drawer header{height:70px;border-bottom:1px solid var(--ph-border);display:flex;align-items:center;justify-content:space-between;padding:0 20px}.ph-drawer header h2{margin:0;font-size:20px}.ph-drawer header button{border:0;background:#f1f5f9;border-radius:12px;font-size:28px;width:42px;height:42px;cursor:pointer}.ph-drawer-body{padding:18px;overflow:auto}.ph-mobile-menu{display:none}#ph-mobile-menu{display:none}
@media(max-width:1100px){.ph-app{grid-template-columns:1fr}.ph-sidebar{position:fixed;inset:0 auto 0 0;width:300px;z-index:30;transform:translateX(-105%);transition:.2s}.ph-sidebar.open{transform:none}#ph-mobile-menu{display:inline-flex}.ph-top-actions input{display:none}.ph-content{padding:14px}.ph-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-chat-layout,.ph-ann-layout{grid-template-columns:1fr;height:auto}.ph-chat-rooms,.ph-ann-list{display:flex;gap:8px;overflow:auto;border-right:0;border-bottom:1px solid var(--ph-border)}.ph-room,.ph-ann-item{min-width:140px}.ph-login-card{grid-template-columns:1fr}.ph-login-hero{padding:26px}.ph-login form{padding:26px}.ph-detail-list{grid-template-columns:1fr}}
@media(max-width:640px){.ph-kpi-grid,.ph-dashboard-grid{grid-template-columns:1fr}.ph-topbar{padding:0 12px}.ph-topbar h1{font-size:18px}.ph-chat-form{grid-template-columns:1fr}.ph-bubble{max-width:92%}.ph-table th,.ph-table td{font-size:12px;padding:10px}.ph-app{border-radius:0;border-left:0;border-right:0}.ph-content{padding:10px}}

/* ===== PERTIHUB ERP WEB V3.1 ENTERPRISE REFINEMENT ===== */
#pertihub-root .ph-app{min-height:calc(100vh - 120px)!important;max-width:none!important;width:100%!important;border-radius:18px!important;}
#pertihub-root .ph-sidebar{min-height:calc(100vh - 120px)!important;}
#pertihub-root .ph-topbar{height:68px!important;padding:0 22px!important;align-items:center!important;}
#pertihub-root .ph-topbar .ph-page-title h1,#pertihub-root .ph-topbar h1{font-size:28px!important;line-height:1.05!important;font-weight:850!important;letter-spacing:-.035em!important;margin:0!important;color:#071526!important;}
#pertihub-root .ph-topbar .ph-page-title p,#pertihub-root .ph-topbar p{font-size:12px!important;margin:4px 0 0!important;color:#64748b!important;}
#pertihub-root .ph-brand{height:68px!important;padding:14px 18px!important;}
#pertihub-root .ph-brand strong{font-size:16px!important}.ph-brand small{font-size:11px!important}
#pertihub-root .ph-content{padding:18px 20px!important;}
#pertihub-root .ph-kpi-grid{gap:12px!important;margin-bottom:16px!important;}
#pertihub-root .ph-kpi{padding:14px 16px!important;border-radius:16px!important;}
#pertihub-root .ph-kpi strong{font-size:22px!important;margin-top:5px!important;line-height:1.15!important;}
#pertihub-root .ph-kpi small{font-size:10.5px!important;}
#pertihub-root .ph-dashboard-head{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:14px;margin-bottom:16px;align-items:stretch;}
#pertihub-root .ph-profile-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--ph-border);border-radius:18px;padding:16px;box-shadow:0 10px 24px rgba(15,23,42,.05)}
#pertihub-root .ph-profile-avatar{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#1d4ed8,#38bdf8);display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;flex:0 0 auto}
#pertihub-root .ph-profile-card h2{font-size:22px!important;line-height:1.12!important;margin:0 0 4px!important;letter-spacing:-.025em!important;color:#071526!important;}
#pertihub-root .ph-profile-card p{margin:0!important;color:#334155!important;font-weight:750!important;font-size:13px!important;}
#pertihub-root .ph-profile-card small{display:block;margin-top:5px;color:#64748b;font-size:12px;}
#pertihub-root .ph-dashboard-grid{grid-template-columns:repeat(4,minmax(190px,1fr))!important;}
#pertihub-root .ph-dash-card{min-height:105px!important;padding:18px!important;border-radius:18px!important;}
#pertihub-root .ph-dash-card span{font-size:24px!important}.ph-dash-card b{font-size:15px!important}

/* Tree / folder UX */
#pertihub-root .ph-tree-panel{overflow:auto;max-height:calc(100vh - 255px);}
#pertihub-root .ph-tree{padding:8px 12px 18px;background:#fff;}
#pertihub-root .ph-tree-node{border-bottom:1px solid #f1f5f9;}
#pertihub-root .ph-tree-node>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:10px 8px;border-radius:10px;font-size:13px;color:#0f172a;}
#pertihub-root .ph-tree-node>summary::-webkit-details-marker{display:none}
#pertihub-root .ph-tree-node>summary:hover{background:#f8fafc}
#pertihub-root .ph-tree-node[open]>summary .ph-folder{transform:rotate(90deg)}
#pertihub-root .ph-folder{display:inline-flex;transition:.15s;color:#2563eb;font-size:12px;}
#pertihub-root .ph-tree-node summary b{font-weight:850;}
#pertihub-root .ph-tree-node summary em{margin-left:auto;background:#eef2ff;color:#1d4ed8;border-radius:999px;padding:3px 8px;font-style:normal;font-weight:850;font-size:11px;}
#pertihub-root .ph-tree-children{padding-left:20px;border-left:1px dashed #dbeafe;margin-left:14px;}
#pertihub-root .ph-tree-item{width:100%;border:1px solid #e2e8f0;background:#fff;border-radius:14px;margin:7px 0;padding:10px 12px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;cursor:pointer;transition:.14s;color:#0f172a;}
#pertihub-root .ph-tree-item:hover{border-color:#93c5fd;background:#f8fbff;box-shadow:0 8px 20px rgba(37,99,235,.08);transform:translateY(-1px)}
#pertihub-root .ph-tree-item .ph-doc{width:34px;height:34px;border-radius:12px;background:#eff6ff;color:#1d4ed8;display:grid;place-items:center;font-size:11px;font-weight:900;}
#pertihub-root .ph-tree-item b{display:block;font-size:13.5px;line-height:1.25;white-space:normal;word-break:break-word;}
#pertihub-root .ph-tree-item small{display:block;color:#64748b;font-size:11.5px;margin-top:3px;}
#pertihub-root .ph-note{margin-top:14px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:14px;padding:12px;font-size:13px;}
#pertihub-root .ph-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#pertihub-root .ph-detail-grid div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:11px;}
#pertihub-root .ph-detail-grid small{display:block;color:#64748b;text-transform:uppercase;font-weight:850;font-size:10.5px;letter-spacing:.05em;}
#pertihub-root .ph-detail-grid b{display:block;margin-top:4px;word-break:break-word;}
#pertihub-root .ph-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ph-photo-grid img,#pertihub-root .ph-proof-img{width:100%;border-radius:16px;border:1px solid #e2e8f0;background:#f8fafc;object-fit:contain;max-height:440px;}

/* Chat enterprise */
#pertihub-root .ph-chat-layout{height:calc(100vh - 190px)!important;min-height:560px!important;grid-template-columns:280px minmax(0,1fr)!important;}
#pertihub-root .ph-chat-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#pertihub-root .ph-chat-side-head h3{margin:0!important;font-size:18px!important}.ph-mini-btn{border:0;background:#dbeafe;color:#1d4ed8;border-radius:10px;width:32px;height:32px;font-weight:900;cursor:pointer}
#pertihub-root .ph-room{display:grid!important;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;}
#pertihub-root .ph-room small{font-size:11px;color:#64748b;font-weight:650;}
#pertihub-root .ph-chat-main{min-height:0!important;}
#pertihub-root .ph-chat-feed{min-height:0!important;overflow-y:auto!important;padding-bottom:16px!important;}
#pertihub-root .ph-chat-form{grid-template-columns:44px minmax(0,1fr) 96px!important;position:sticky!important;bottom:0!important;z-index:3!important;}
#pertihub-root .ph-chat-form input#chat-text{border:1px solid var(--ph-border);border-radius:14px;padding:12px;outline:none;width:100%;}
#pertihub-root .ph-attach{display:grid;place-items:center;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;cursor:pointer;font-size:18px;}
#pertihub-root .ph-attach input{display:none}
#pertihub-root .ph-bubble-meta{display:flex;gap:8px;align-items:center;}

/* Announcement */
#pertihub-root .ph-ann-layout{height:calc(100vh - 190px)!important;min-height:560px!important;grid-template-columns:380px minmax(0,1fr)!important;}
#pertihub-root .ph-ann-scroll{overflow:auto;height:calc(100% - 66px);}
#pertihub-root .ph-toolbar.compact{padding:12px!important}.ph-toolbar.compact .ph-btn{padding:8px 12px!important}
#pertihub-root .ph-ann-item{display:block;min-height:82px;}
#pertihub-root .ph-ann-item b{font-size:14px;line-height:1.25;margin-bottom:4px;}
#pertihub-root .ph-ann-item small,#pertihub-root .ph-ann-item em{display:block;color:#64748b;font-size:12px;font-style:normal;margin-top:2px;}
#pertihub-root .ph-ann-detail h2{font-size:26px!important;line-height:1.15!important;letter-spacing:-.025em!important;}

@media(max-width:1200px){#pertihub-root .ph-dashboard-head{grid-template-columns:1fr}#pertihub-root .ph-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){#pertihub-root .ph-topbar .ph-page-title h1,#pertihub-root .ph-topbar h1{font-size:20px!important}#pertihub-root .ph-detail-grid{grid-template-columns:1fr}#pertihub-root .ph-tree-panel{max-height:none}#pertihub-root .ph-chat-layout,#pertihub-root .ph-ann-layout{height:auto!important;min-height:0!important;grid-template-columns:1fr!important}#pertihub-root .ph-chat-form{grid-template-columns:44px 1fr!important}#pertihub-root .ph-chat-form button{grid-column:1/-1}#pertihub-root .ph-tree-item{grid-template-columns:32px minmax(0,1fr)}#pertihub-root .ph-tree-item .ph-badge{grid-column:2}}

/* ===== V3.2 Tracking SO APK-like detail + Dashboard cleanup ===== */
#pertihub-root .ph-dashboard-head.compact{grid-template-columns:1fr!important;margin-bottom:16px!important}
#pertihub-root .ph-profile-card.full{max-width:720px;background:linear-gradient(135deg,#ffffff,#f8fbff)}
#pertihub-root .ph-login-hero h1{color:#f8fafc!important;text-shadow:0 2px 12px rgba(0,0,0,.18)}
#pertihub-root .ph-login-hero p{color:rgba(255,255,255,.92)!important}
#pertihub-root .ph-login-hero{background:linear-gradient(135deg,#1e3a8a,#2563eb 58%,#38bdf8)!important}
#pertihub-root .ph-so-detail-apk{display:flex;flex-direction:column;gap:16px;color:#0f172a}
#pertihub-root .ph-so-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:linear-gradient(135deg,#eff6ff,#ffffff);border:1px solid #bfdbfe;border-radius:18px;padding:16px}
#pertihub-root .ph-so-hero small{display:block;color:#2563eb;text-transform:uppercase;font-weight:900;letter-spacing:.08em;font-size:11px}
#pertihub-root .ph-so-hero h2{font-size:22px!important;margin:4px 0!important;line-height:1.15!important;color:#071526!important}
#pertihub-root .ph-so-hero p{margin:0!important;color:#475569;font-weight:750}
#pertihub-root .ph-so-section{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px;box-shadow:0 12px 28px rgba(15,23,42,.04)}
#pertihub-root .ph-so-section h3{font-size:16px!important;margin:0 0 14px!important;color:#0f172a!important;letter-spacing:-.01em!important}
#pertihub-root .ph-so-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#pertihub-root .ph-step{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:flex-start;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:11px;min-height:62px}
#pertihub-root .ph-step-dot{width:30px;height:30px;border-radius:999px;background:#e2e8f0;color:#64748b;display:grid;place-items:center;font-weight:900;font-size:13px}
#pertihub-root .ph-step.done{border-color:#bfdbfe;background:#f8fbff}.ph-step.done .ph-step-dot{background:#2563eb;color:#fff}
#pertihub-root .ph-step.current{border-color:#86efac;background:#f0fdf4}.ph-step.current .ph-step-dot{background:#16a34a;color:#fff}
#pertihub-root .ph-step b{display:block;font-size:13px;line-height:1.2}.ph-step small{display:block;margin-top:4px;color:#64748b;font-size:11.5px;line-height:1.3}
#pertihub-root .ph-so-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#pertihub-root .ph-so-info-grid div{border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:11px;min-width:0}
#pertihub-root .ph-so-info-grid small{display:block;text-transform:uppercase;color:#64748b;font-size:10px;font-weight:900;letter-spacing:.06em}.ph-so-info-grid b{display:block;margin-top:4px;word-break:break-word;font-size:13.5px}
#pertihub-root .ph-so-items{display:flex;flex-direction:column;gap:9px}
#pertihub-root .ph-so-product{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:11px}
#pertihub-root .ph-prod-icon{width:40px;height:40px;border-radius:14px;background:#dbeafe;display:grid;place-items:center}.ph-prod-main b{display:block;font-size:14px;line-height:1.25}.ph-prod-main small{display:block;color:#2563eb;font-weight:850;margin-top:3px}.ph-prod-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.ph-prod-meta span{background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:4px 8px;font-size:11.5px;color:#334155;font-weight:750}.ph-prod-main p{font-size:12px;color:#64748b;line-height:1.45}
#pertihub-root .ph-map-card{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;text-decoration:none;color:#0f172a;border:1px solid #bfdbfe;background:#eff6ff;border-radius:16px;padding:12px;margin-bottom:12px}.ph-map-card b{display:block}.ph-map-card small{display:block;color:#475569;margin-top:3px}.ph-map-card span{background:#2563eb;color:#fff;border-radius:999px;padding:7px 10px;font-weight:900;font-size:12px}
#pertihub-root .ph-photo-grid.apk-like{grid-template-columns:repeat(3,minmax(0,1fr))}.ph-photo-grid figure{margin:0}.ph-photo-grid figcaption{text-align:center;font-size:12px;color:#475569;font-weight:800;margin-top:6px}.ph-photo-grid.apk-like img{height:190px;object-fit:contain;background:#f8fafc}
@media(max-width:900px){#pertihub-root .ph-so-timeline,#pertihub-root .ph-so-info-grid{grid-template-columns:1fr}#pertihub-root .ph-photo-grid.apk-like{grid-template-columns:1fr}.ph-map-card{grid-template-columns:36px 1fr}.ph-map-card span{grid-column:2}}

/* ===== V3.3 Exact APK-like Tracking SO detail ===== */
#pertihub-root .ph-drawer{max-width:min(760px,96vw)!important;background:#eaf5ff!important;}
#pertihub-root .ph-drawer-body{background:#eaf5ff!important;padding:0!important;}
#pertihub-root .ph-drawer-head{display:none!important;}
#pertihub-root .apk-track-page{background:#eaf5ff;color:#0b315f;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100%;padding:12px 12px 24px;display:flex;flex-direction:column;gap:12px;}
#pertihub-root .apk-track-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:linear-gradient(135deg,#0759b8,#2684f6);border:1px solid #9bd7ff;border-radius:22px;padding:10px 12px;box-shadow:0 10px 22px rgba(37,99,235,.18);color:#fff;}
#pertihub-root .apk-track-header b{font-size:18px;font-weight:950;display:block;line-height:1.1;color:#fff!important;}
#pertihub-root .apk-track-header small{display:inline-block;margin-top:4px;background:rgba(255,255,255,.24);border-radius:999px;padding:3px 8px;color:#fff;font-size:10px;font-weight:850;}
#pertihub-root .apk-back{border:0;background:#fff;color:#093966;border-radius:14px;padding:11px 12px;font-weight:950;box-shadow:0 4px 12px rgba(0,0,0,.08);cursor:pointer;}
#pertihub-root .apk-refresh{border:0;background:#ff7070;color:#fff;border-radius:999px;width:48px;height:48px;font-size:22px;font-weight:950;cursor:pointer;}
#pertihub-root .apk-card{background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid #b9e0ff;border-radius:20px;padding:16px;box-shadow:0 6px 18px rgba(15,23,42,.04);overflow:hidden;}
#pertihub-root .apk-card h3{margin:0 0 12px!important;font-size:20px!important;line-height:1.15!important;color:#073763!important;font-weight:950!important;letter-spacing:-.02em!important;}
#pertihub-root .apk-summary-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:flex-start;background:transparent;border:0;box-shadow:none;padding:4px 0 0;}
#pertihub-root .apk-summary-icon{width:46px;height:46px;border-radius:16px;background:#c9efff;display:grid;place-items:center;font-size:22px;}
#pertihub-root .apk-summary-main h2{font-size:19px!important;margin:8px 0 12px!important;color:#073763!important;font-weight:950!important;word-break:break-word;}
#pertihub-root .apk-customer-card{background:linear-gradient(180deg,#fff,#f7fbff);border:1px solid #c8e3ff;border-radius:20px;padding:14px 16px;}
#pertihub-root .apk-customer-card h3{font-size:18px!important;margin-bottom:6px!important;}
#pertihub-root .apk-customer-card p{margin:8px 0 0!important;color:#5d7290;font-size:13px;line-height:1.45;}
#pertihub-root .apk-section-title{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
#pertihub-root .apk-section-title>span{font-size:22px;color:#0d6fd3;line-height:1;}
#pertihub-root .apk-section-title h3{margin:0!important;font-size:19px!important;}
#pertihub-root .apk-section-title small{display:block;color:#5b7899;font-size:12px;font-weight:750;margin-top:2px;}
#pertihub-root .apk-timeline{position:relative;margin-top:8px;padding-left:4px;}
#pertihub-root .apk-time-row{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding-bottom:18px;}
#pertihub-root .apk-time-row:before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:#b8e7ce;}
#pertihub-root .apk-time-row:last-child:before{display:none;}
#pertihub-root .apk-time-dot{width:22px;height:22px;border-radius:999px;background:#e2e8f0;border:2px solid #cbd5e1;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:950;z-index:1;margin-top:1px;}
#pertihub-root .apk-time-row.done .apk-time-dot{background:#c5f2dc;border-color:#80d4a6;color:#079647;}
#pertihub-root .apk-time-body b{display:block;font-size:13px;line-height:1.25;color:#063763;font-weight:950;}
#pertihub-root .apk-time-body p{margin:2px 0 0!important;color:#0759b8;font-size:11.5px;line-height:1.25;font-weight:800;}
#pertihub-root .apk-time-body small{display:block;color:#456989;font-size:12px;margin-top:2px;line-height:1.25;}
#pertihub-root .apk-info-list{display:flex;flex-direction:column;gap:4px;}
#pertihub-root .apk-info-row{display:grid;grid-template-columns:135px minmax(0,1fr);gap:10px;align-items:start;background:rgba(255,255,255,.55);border-radius:12px;padding:7px 10px;}
#pertihub-root .apk-info-row>div{font-size:11px;text-transform:uppercase;color:#5b7899;font-weight:900;line-height:1.15;}
#pertihub-root .apk-info-row strong{font-size:13px;color:#103e6b;font-weight:850;line-height:1.25;word-break:break-word;}
#pertihub-root .apk-info-list.mini .apk-info-row{grid-template-columns:120px minmax(0,1fr);padding:3px 0;background:transparent;border-radius:0;}
#pertihub-root .apk-barang-card details{display:block;}
#pertihub-root .apk-barang-card summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;cursor:pointer;margin-bottom:10px;}
#pertihub-root .apk-barang-card summary::-webkit-details-marker{display:none;}
#pertihub-root .apk-barang-card summary h3{margin:0!important;}
#pertihub-root .apk-barang-card summary small{display:block;color:#5b7899;font-size:12px;margin-top:2px;}
#pertihub-root .apk-barang-card summary span{font-size:20px;color:#0b5fc0;font-weight:950;}
#pertihub-root .apk-barang-list{display:flex;flex-direction:column;gap:14px;}
#pertihub-root .apk-barang-item>b{display:block;margin-bottom:4px;color:#0a3767;font-size:14px;}
#pertihub-root .apk-photo-card h3{font-size:13px!important;text-transform:uppercase;margin-bottom:10px!important;}
#pertihub-root .apk-photo-card img{width:100%;max-height:none;object-fit:contain;border-radius:16px;border:1px solid #c7e4ff;background:#f8fafc;display:block;}
#pertihub-root .apk-location-card .apk-info-list{margin-bottom:12px;}
#pertihub-root .apk-map-link{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;text-decoration:none;color:#103e6b;background:#fff;border:1px solid #d8eafd;border-radius:16px;padding:12px;margin-bottom:10px;}
#pertihub-root .apk-map-link>span{font-size:25px;color:#126cd0;}
#pertihub-root .apk-map-link b{display:block;font-size:14px;color:#0b3764;}
#pertihub-root .apk-map-link small{display:block;color:#5b7899;font-size:12px;margin-top:2px;}
#pertihub-root .apk-map-link em{font-style:normal;color:#5f7790;font-size:20px;}
#pertihub-root .apk-map-frame{width:100%;height:260px;border:1px solid #c7e4ff;border-radius:16px;background:#eef7ff;display:block;}
@media(min-width:1100px){#pertihub-root .ph-drawer{max-width:760px!important}}
@media(max-width:720px){#pertihub-root .apk-track-page{padding:8px 8px 16px}#pertihub-root .apk-info-row{grid-template-columns:102px minmax(0,1fr)}#pertihub-root .apk-info-list.mini .apk-info-row{grid-template-columns:104px minmax(0,1fr)}#pertihub-root .apk-card{padding:12px;border-radius:18px}#pertihub-root .apk-map-frame{height:210px}}

/* ===== V3.4 Enterprise Tracking Detail Override ===== */
#pertihub-root .ph-login-hero h1{color:#ffffff!important;text-shadow:0 2px 8px rgba(0,0,0,.18);}
#pertihub-root .ph-drawer{max-width:min(980px,96vw)!important;background:#f8fafc!important;border-left:1px solid #e2e8f0!important;box-shadow:-28px 0 60px rgba(15,23,42,.16)!important;}
#pertihub-root .ph-drawer header{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:18px 22px!important;background:#ffffff!important;border-bottom:1px solid #e2e8f0!important;position:sticky!important;top:0!important;z-index:5!important;}
#pertihub-root .ph-drawer header h2{font-size:18px!important;font-weight:850!important;letter-spacing:-.02em!important;margin:0!important;color:#0f172a!important;}
#pertihub-root .ph-drawer header button{width:38px;height:38px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;color:#0f172a;font-size:22px;font-weight:800;cursor:pointer;}
#pertihub-root .ph-drawer-body{background:#f8fafc!important;padding:18px!important;}
#pertihub-root .ph-enter-detail{display:flex;flex-direction:column;gap:16px;color:#0f172a;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;}
#pertihub-root .ph-so-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid #dbe4ef;border-radius:20px;padding:20px;box-shadow:0 12px 30px rgba(15,23,42,.06);}
#pertihub-root .ph-so-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:#2563eb;margin-bottom:8px;}
#pertihub-root .ph-so-hero h2{margin:0!important;font-size:28px!important;line-height:1.1!important;letter-spacing:-.04em!important;color:#0f172a!important;font-weight:900!important;}
#pertihub-root .ph-so-hero p{margin:8px 0 0!important;color:#475569!important;font-size:15px!important;font-weight:700!important;}
#pertihub-root .ph-so-hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:320px;text-align:right;}
#pertihub-root .ph-so-hero-right small{color:#64748b;font-size:12.5px;line-height:1.45;font-weight:650;}
#pertihub-root .ph-enter-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 10px 28px rgba(15,23,42,.05);padding:18px;}
#pertihub-root .ph-enter-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;border-bottom:1px solid #eef2f7;padding-bottom:14px;}
#pertihub-root .ph-enter-card-head h3{margin:0!important;font-size:17px!important;line-height:1.2!important;color:#0f172a!important;font-weight:900!important;letter-spacing:-.02em!important;}
#pertihub-root .ph-enter-card-head p{margin:4px 0 0!important;color:#64748b!important;font-size:12.5px!important;line-height:1.45!important;}
#pertihub-root .ph-enter-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#pertihub-root .ph-enter-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;min-height:86px;}
#pertihub-root .ph-enter-step.done{border-color:#bbf7d0;background:#f0fdf4;}
#pertihub-root .ph-enter-step-dot{width:30px;height:30px;border-radius:12px;background:#e2e8f0;color:#64748b;display:grid;place-items:center;font-size:12px;font-weight:900;}
#pertihub-root .ph-enter-step.done .ph-enter-step-dot{background:#16a34a;color:white;}
#pertihub-root .ph-enter-step-text b{display:block;color:#0f172a;font-size:13px;line-height:1.2;font-weight:850;}
#pertihub-root .ph-enter-step-text span{display:block;color:#475569;font-size:12px;line-height:1.35;margin-top:4px;font-weight:600;}
#pertihub-root .ph-enter-step-text small{display:block;color:#2563eb;font-size:11.5px;margin-top:6px;font-weight:800;}
#pertihub-root .ph-enter-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#pertihub-root .ph-enter-info-grid.one{grid-template-columns:1fr;}
#pertihub-root .ph-enter-info{border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:11px 12px;min-width:0;}
#pertihub-root .ph-enter-info small{display:block;text-transform:uppercase;letter-spacing:.06em;color:#64748b;font-size:10px;font-weight:900;margin-bottom:5px;}
#pertihub-root .ph-enter-info b{display:block;color:#0f172a;font-size:13px;line-height:1.35;font-weight:780;word-break:break-word;}
#pertihub-root .ph-enter-item-list{display:flex;flex-direction:column;gap:10px;}
#pertihub-root .ph-enter-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;padding:13px;}
#pertihub-root .ph-enter-item-no{width:36px;height:36px;border-radius:12px;background:#e0edff;color:#2563eb;display:grid;place-items:center;font-weight:900;}
#pertihub-root .ph-enter-item h4{margin:0!important;color:#0f172a!important;font-size:14px!important;line-height:1.3!important;font-weight:900!important;}
#pertihub-root .ph-enter-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
#pertihub-root .ph-enter-meta span{border:1px solid #e2e8f0;background:#ffffff;border-radius:999px;padding:5px 9px;color:#475569;font-size:11.5px;font-weight:650;}
#pertihub-root .ph-enter-meta b{color:#0f172a;font-weight:850;}
#pertihub-root .ph-enter-item p{margin:9px 0 0!important;color:#64748b;font-size:12px;line-height:1.45;}
#pertihub-root .ph-enter-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
#pertihub-root .ph-enter-photo-grid figure{margin:0;border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;overflow:hidden;}
#pertihub-root .ph-enter-photo-grid img{width:100%;height:260px;object-fit:contain;background:#f8fafc;display:block;}
#pertihub-root .ph-enter-photo-grid figcaption{padding:10px 12px;border-top:1px solid #e2e8f0;color:#475569;font-size:12px;font-weight:800;background:#fff;}
#pertihub-root .ph-enter-map{width:100%;height:320px;border:1px solid #e2e8f0;border-radius:16px;background:#f1f5f9;margin-top:12px;display:block;}
#pertihub-root .apk-track-page,#pertihub-root .apk-card,#pertihub-root .apk-track-header{all:unset;}
@media(max-width:960px){#pertihub-root .ph-enter-timeline,#pertihub-root .ph-enter-info-grid,#pertihub-root .ph-enter-photo-grid{grid-template-columns:1fr}#pertihub-root .ph-so-hero{grid-template-columns:1fr}#pertihub-root .ph-so-hero-right{align-items:flex-start;text-align:left;max-width:none}#pertihub-root .ph-enter-photo-grid img{height:340px}}
@media(max-width:640px){#pertihub-root .ph-drawer-body{padding:12px!important}#pertihub-root .ph-so-hero h2{font-size:22px!important}#pertihub-root .ph-enter-card{padding:14px;border-radius:16px}#pertihub-root .ph-enter-map{height:240px}}

/* ===== V3.5 ENTERPRISE DRAWER FORCE REPLACE ===== */
#pertihub-root .ph-drawer-wrap{position:fixed!important;inset:0!important;z-index:999999!important;display:grid!important;grid-template-columns:1fr auto!important;background:rgba(15,23,42,.38)!important;backdrop-filter:blur(3px)!important;}
#pertihub-root .ph-drawer-back{grid-column:1/2!important;grid-row:1!important;}
#pertihub-root .ph-drawer.enterprise-drawer,#pertihub-root .ph-drawer{grid-column:2/3!important;grid-row:1!important;width:min(1080px,74vw)!important;max-width:none!important;height:100vh!important;background:#f8fafc!important;color:#0f172a!important;border-left:1px solid #e2e8f0!important;border-radius:0!important;box-shadow:-24px 0 60px rgba(15,23,42,.20)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;}
#pertihub-root .ph-drawer.enterprise-drawer>header,#pertihub-root .ph-drawer>header{height:70px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 24px!important;border-bottom:1px solid #e2e8f0!important;background:rgba(255,255,255,.94)!important;position:sticky!important;top:0!important;z-index:5!important;}
#pertihub-root .ph-drawer.enterprise-drawer>header h2,#pertihub-root .ph-drawer>header h2{margin:0!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;color:#0f172a!important;font-size:19px!important;line-height:1.2!important;font-weight:850!important;letter-spacing:-.02em!important;}
#pertihub-root .ph-drawer.enterprise-drawer>header button,#pertihub-root .ph-drawer>header button{width:42px!important;height:42px!important;border:1px solid #e2e8f0!important;border-radius:14px!important;background:#fff!important;color:#0f172a!important;font-size:24px!important;line-height:1!important;font-weight:800!important;cursor:pointer!important;display:grid!important;place-items:center!important;}
#pertihub-root .ph-drawer-body{flex:1!important;overflow:auto!important;padding:22px!important;background:#f8fafc!important;}
#pertihub-root .ph-enter-detail{display:flex!important;flex-direction:column!important;gap:18px!important;color:#0f172a!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;}
#pertihub-root .ph-so-hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:18px!important;align-items:start!important;background:linear-gradient(135deg,#ffffff,#f8fbff)!important;border:1px solid #e2e8f0!important;border-radius:22px!important;padding:22px!important;box-shadow:0 14px 36px rgba(15,23,42,.06)!important;}
#pertihub-root .ph-so-kicker{display:inline-flex!important;width:max-content!important;text-transform:uppercase!important;letter-spacing:.09em!important;color:#2563eb!important;font-size:11px!important;font-weight:950!important;background:#eff6ff!important;border:1px solid #dbeafe!important;border-radius:999px!important;padding:5px 9px!important;margin-bottom:10px!important;}
#pertihub-root .ph-so-hero h2{margin:0!important;color:#0f172a!important;font-size:30px!important;line-height:1.05!important;font-weight:950!important;letter-spacing:-.045em!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;word-break:break-word!important;}
#pertihub-root .ph-so-hero p{margin:9px 0 0!important;color:#475569!important;font-size:15px!important;font-weight:750!important;line-height:1.35!important;}
#pertihub-root .ph-so-hero-right{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:8px!important;text-align:right!important;max-width:360px!important;}
#pertihub-root .ph-so-hero-right small{color:#64748b!important;font-size:12.5px!important;line-height:1.45!important;font-weight:650!important;}
#pertihub-root .ph-enter-card{background:#ffffff!important;border:1px solid #e2e8f0!important;border-radius:22px!important;box-shadow:0 14px 36px rgba(15,23,42,.055)!important;padding:20px!important;overflow:hidden!important;}
#pertihub-root .ph-enter-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;margin:0 0 18px!important;padding:0 0 16px!important;border-bottom:1px solid #eef2f7!important;}
#pertihub-root .ph-enter-card-head h3{margin:0!important;color:#0f172a!important;font-size:18px!important;line-height:1.15!important;font-weight:900!important;letter-spacing:-.025em!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;}
#pertihub-root .ph-enter-card-head p{margin:5px 0 0!important;color:#64748b!important;font-size:12.5px!important;line-height:1.45!important;font-weight:600!important;}
#pertihub-root .ph-enter-timeline{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
#pertihub-root .ph-enter-step{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;padding:14px!important;border:1px solid #e2e8f0!important;background:#f8fafc!important;border-radius:18px!important;min-height:96px!important;}
#pertihub-root .ph-enter-step.done{border-color:#bbf7d0!important;background:#f0fdf4!important;}
#pertihub-root .ph-enter-step-dot{width:34px!important;height:34px!important;border-radius:13px!important;background:#e2e8f0!important;color:#64748b!important;display:grid!important;place-items:center!important;font-size:12px!important;font-weight:950!important;}
#pertihub-root .ph-enter-step.done .ph-enter-step-dot{background:#16a34a!important;color:#fff!important;}
#pertihub-root .ph-enter-step-text b{display:block!important;margin:0!important;color:#0f172a!important;font-size:13.5px!important;line-height:1.25!important;font-weight:900!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;}
#pertihub-root .ph-enter-step-text span{display:block!important;color:#475569!important;font-size:12.3px!important;line-height:1.4!important;margin-top:5px!important;font-weight:650!important;}
#pertihub-root .ph-enter-step-text small{display:block!important;color:#2563eb!important;font-size:11.5px!important;margin-top:7px!important;font-weight:850!important;}
#pertihub-root .ph-enter-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
#pertihub-root .ph-enter-info-grid.one{grid-template-columns:1fr!important;}
#pertihub-root .ph-enter-info{border:1px solid #e2e8f0!important;background:#f8fafc!important;border-radius:16px!important;padding:13px 14px!important;min-width:0!important;}
#pertihub-root .ph-enter-info small{display:block!important;text-transform:uppercase!important;letter-spacing:.07em!important;color:#64748b!important;font-size:10px!important;font-weight:950!important;margin:0 0 6px!important;}
#pertihub-root .ph-enter-info b{display:block!important;color:#0f172a!important;font-size:13.2px!important;line-height:1.38!important;font-weight:780!important;word-break:break-word!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;}
#pertihub-root .ph-enter-item-list{display:flex!important;flex-direction:column!important;gap:12px!important;}
#pertihub-root .ph-enter-item{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:13px!important;border:1px solid #e2e8f0!important;background:#f8fafc!important;border-radius:18px!important;padding:14px!important;}
#pertihub-root .ph-enter-item-no{width:38px!important;height:38px!important;border-radius:14px!important;background:#e0edff!important;color:#2563eb!important;display:grid!important;place-items:center!important;font-weight:950!important;}
#pertihub-root .ph-enter-item h4{margin:0!important;color:#0f172a!important;font-size:14.5px!important;line-height:1.3!important;font-weight:900!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;}
#pertihub-root .ph-enter-meta{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-top:10px!important;}
#pertihub-root .ph-enter-meta span{border:1px solid #e2e8f0!important;background:#fff!important;border-radius:999px!important;padding:5px 9px!important;color:#475569!important;font-size:11.5px!important;font-weight:700!important;}
#pertihub-root .ph-enter-meta b{color:#0f172a!important;font-weight:900!important;}
#pertihub-root .ph-enter-item p{margin:10px 0 0!important;color:#64748b!important;font-size:12.3px!important;line-height:1.45!important;}
#pertihub-root .ph-enter-photo-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;}
#pertihub-root .ph-enter-photo-grid figure{margin:0!important;border:1px solid #e2e8f0!important;background:#f8fafc!important;border-radius:18px!important;overflow:hidden!important;}
#pertihub-root .ph-enter-photo-grid img{width:100%!important;height:260px!important;object-fit:contain!important;background:#f8fafc!important;display:block!important;}
#pertihub-root .ph-enter-photo-grid figcaption{padding:10px 12px!important;border-top:1px solid #e2e8f0!important;color:#475569!important;font-size:12px!important;font-weight:850!important;background:#fff!important;}
#pertihub-root .ph-enter-map{width:100%!important;height:330px!important;border:1px solid #e2e8f0!important;border-radius:18px!important;background:#f1f5f9!important;margin-top:14px!important;display:block!important;}
@media(max-width:980px){#pertihub-root .ph-drawer.enterprise-drawer,#pertihub-root .ph-drawer{width:96vw!important}#pertihub-root .ph-enter-timeline,#pertihub-root .ph-enter-info-grid,#pertihub-root .ph-enter-photo-grid{grid-template-columns:1fr!important}#pertihub-root .ph-so-hero{grid-template-columns:1fr!important}#pertihub-root .ph-so-hero-right{align-items:flex-start!important;text-align:left!important;max-width:none!important}}

.ph-cache-note{margin:0 0 12px;padding:10px 14px;border:1px solid #bfdbfe;background:#eff6ff;color:#1e40af;border-radius:14px;font-size:12px;font-weight:800}.ph-cache-note.in-chat{margin:10px 14px 0}

/* ===== V3.7 ENTERPRISE DETAIL REFINEMENT ===== */
#pertihub-root .ph-drawer.enterprise-drawer,#pertihub-root .ph-drawer{
  width:min(1200px,72vw)!important;
}
#pertihub-root .ph-enter-detail{gap:18px!important;}
#pertihub-root .ph-enter-timeline{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  position:relative!important;
  padding:2px 0 2px 0!important;
}
#pertihub-root .ph-enter-step{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
  position:relative!important;
  min-height:auto!important;
  padding:0 0 22px 0!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
}
#pertihub-root .ph-enter-step:not(:last-child)::before{
  content:""!important;
  position:absolute!important;
  left:17px!important;
  top:38px!important;
  bottom:0!important;
  width:2px!important;
  background:#dbeafe!important;
  border-radius:99px!important;
}
#pertihub-root .ph-enter-step.done:not(:last-child)::before{background:#bbf7d0!important;}
#pertihub-root .ph-enter-step-dot{
  width:36px!important;
  height:36px!important;
  border-radius:999px!important;
  background:#e2e8f0!important;
  color:#64748b!important;
  display:grid!important;
  place-items:center!important;
  font-size:13px!important;
  font-weight:950!important;
  z-index:1!important;
  box-shadow:0 0 0 6px #fff!important;
}
#pertihub-root .ph-enter-step.done .ph-enter-step-dot{background:#16a34a!important;color:#fff!important;}
#pertihub-root .ph-enter-step-text{
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  border-radius:16px!important;
  padding:14px 16px!important;
  box-shadow:0 10px 26px rgba(15,23,42,.045)!important;
}
#pertihub-root .ph-enter-step.done .ph-enter-step-text{
  border-color:#bbf7d0!important;
  background:linear-gradient(135deg,#f0fdf4,#ffffff)!important;
}
#pertihub-root .ph-enter-step-text b{
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}
#pertihub-root .ph-enter-step-text span{
  font-size:12.8px!important;
  line-height:1.55!important;
  margin-top:6px!important;
  color:#475569!important;
}
#pertihub-root .ph-enter-step-text small{
  display:inline-flex!important;
  width:max-content!important;
  margin-top:9px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  border:1px solid #dbeafe!important;
  color:#1d4ed8!important;
  font-weight:850!important;
}
#pertihub-root .ph-enter-info-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#pertihub-root .ph-enter-info{
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  box-shadow:0 8px 20px rgba(15,23,42,.035)!important;
}
#pertihub-root .ph-enter-item-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
#pertihub-root .ph-enter-item{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  min-height:180px!important;
  background:#fff!important;
}
#pertihub-root .ph-enter-item-no{
  width:32px!important;
  height:32px!important;
  border-radius:11px!important;
}
#pertihub-root .ph-enter-meta span{border-radius:10px!important;}
#pertihub-root .ph-enter-photo-grid img{height:220px!important;object-fit:cover!important;cursor:zoom-in!important;}
#pertihub-root .ph-enter-map{height:220px!important;}
#pertihub-root .ph-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;}
@media(max-width:1180px){
  #pertihub-root .ph-enter-item-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:980px){
  #pertihub-root .ph-drawer.enterprise-drawer,#pertihub-root .ph-drawer{width:96vw!important;min-width:0!important;}
  #pertihub-root .ph-enter-item-list,#pertihub-root .ph-enter-info-grid,#pertihub-root .ph-enter-photo-grid{grid-template-columns:1fr!important;}
}


/* V3.8 Enterprise Items Table */
#pertihub-root .ph-items-section{overflow:hidden!important;}
#pertihub-root .ph-items-head{align-items:center!important;}
#pertihub-root .ph-items-actions{display:flex;gap:8px;align-items:center;}
#pertihub-root .ph-items-table-wrap{width:100%;overflow:auto;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.035);}
#pertihub-root .ph-items-table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;}
#pertihub-root .ph-items-table th{position:sticky;top:0;z-index:1;background:#f8fafc;color:#64748b;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:950;padding:12px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap;}
#pertihub-root .ph-items-table td{padding:13px 12px;border-bottom:1px solid #edf2f7;color:#0f172a;font-size:12.5px;line-height:1.35;font-weight:720;vertical-align:top;background:#fff;}
#pertihub-root .ph-items-table tbody tr:hover td{background:#f8fbff;}
#pertihub-root .ph-items-table tbody tr:last-child td{border-bottom:0;}
#pertihub-root .ph-item-no-cell{width:54px;}
#pertihub-root .ph-item-no-cell span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#e0edff;color:#2563eb;font-weight:950;}
#pertihub-root .ph-item-code{font-weight:950;color:#1d4ed8;white-space:nowrap;}
#pertihub-root .ph-item-name{min-width:260px;max-width:420px;}
#pertihub-root .ph-item-name b{display:block;font-size:13.5px;font-weight:950;line-height:1.3;color:#0f172a;}
#pertihub-root .ph-item-name small{display:block;margin-top:4px;color:#64748b;font-size:11.5px;font-weight:650;}
#pertihub-root .ph-item-qty,#pertihub-root .ph-item-price,#pertihub-root .ph-item-gate{white-space:nowrap;font-weight:950;}
#pertihub-root .ph-item-price{font-variant-numeric:tabular-nums;}
#pertihub-root .ph-soft-chip{display:inline-flex;align-items:center;border:1px solid #bfdbfe;background:#eff6ff;color:#1e40af;border-radius:999px;padding:5px 9px;font-size:11.5px;font-weight:900;white-space:nowrap;}
#pertihub-root .ph-item-location{max-width:250px;color:#334155;font-weight:720;word-break:break-word;}
#pertihub-root .ph-items-mobile-list{display:none;}
#pertihub-root .ph-enter-item-list{display:none!important;}
@media(max-width:760px){
  #pertihub-root .ph-items-table-wrap{display:none;}
  #pertihub-root .ph-items-actions{display:none;}
  #pertihub-root .ph-items-mobile-list{display:grid;grid-template-columns:1fr;gap:10px;}
  #pertihub-root .ph-mobile-item-card{border:1px solid #e2e8f0;background:#fff;border-radius:16px;padding:13px;box-shadow:0 8px 22px rgba(15,23,42,.035);}
  #pertihub-root .ph-mobile-item-top{display:flex;gap:9px;align-items:center;margin-bottom:8px;}
  #pertihub-root .ph-mobile-item-top span{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:#e0edff;color:#2563eb;font-weight:950;}
  #pertihub-root .ph-mobile-item-top b{color:#1d4ed8;font-size:12px;}
  #pertihub-root .ph-mobile-item-card h4{margin:0 0 10px!important;color:#0f172a!important;font-size:14px!important;line-height:1.25!important;font-weight:950!important;}
  #pertihub-root .ph-mobile-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px;}
  #pertihub-root .ph-mobile-item-grid div{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:8px;}
  #pertihub-root .ph-mobile-item-grid small{display:block;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:900;margin-bottom:3px;}
  #pertihub-root .ph-mobile-item-grid b{display:block;color:#0f172a;font-size:12px;font-weight:950;}
  #pertihub-root .ph-mobile-item-card p{margin:7px 0 0;color:#475569;font-size:12px;line-height:1.4;font-weight:650;}
}

/* V3.9 Validasi Screenshot Paste Uploader */
#pertihub-root .ph-validate-card{margin-top:22px;border:1px solid #dbe7f5;background:linear-gradient(180deg,#ffffff,#f8fbff);border-radius:18px;padding:18px;box-shadow:0 14px 34px rgba(15,23,42,.045)}
#pertihub-root .ph-validate-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
#pertihub-root .ph-validate-head h3{margin:0!important;color:#0f172a!important;font-size:18px!important;line-height:1.2!important;font-weight:950!important}
#pertihub-root .ph-validate-head p{margin:6px 0 0!important;color:#64748b!important;font-size:13px!important;line-height:1.45!important;font-weight:650!important}
#pertihub-root .ph-hidden-file{display:none!important}
#pertihub-root .ph-paste-zone{display:flex;gap:14px;align-items:center;border:1.5px dashed #93c5fd;background:#eff6ff;border-radius:18px;padding:18px;outline:none;cursor:pointer;transition:.16s ease;margin-bottom:12px}
#pertihub-root .ph-paste-zone:hover,#pertihub-root .ph-paste-zone:focus,#pertihub-root .ph-paste-zone.drag{border-color:#2563eb;background:#dbeafe;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
#pertihub-root .ph-paste-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:#2563eb;color:#fff;font-size:20px;font-weight:950;flex:0 0 auto}
#pertihub-root .ph-paste-zone b{display:block;color:#0f172a;font-size:14px;font-weight:950;margin-bottom:3px}
#pertihub-root .ph-paste-zone small{display:block;color:#475569;font-size:12px;font-weight:650;line-height:1.35}
#pertihub-root .ph-upload-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
#pertihub-root .ph-btn.ghost{background:#f8fafc!important;color:#334155!important;border:1px solid #dbe7f5!important}
#pertihub-root .ph-upload-preview{border:1px solid #e2e8f0;background:#fff;border-radius:16px;min-height:64px;padding:14px;color:#64748b;font-size:13px;font-weight:650;overflow:hidden}
#pertihub-root .ph-upload-preview.empty{display:grid;place-items:center;text-align:center;background:#f8fafc;border-style:dashed}
#pertihub-root .ph-upload-preview img{display:block;max-width:100%;max-height:420px;object-fit:contain;border-radius:14px;margin-top:12px;background:#f8fafc;border:1px solid #e2e8f0}
#pertihub-root .ph-preview-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
#pertihub-root .ph-preview-meta b,#pertihub-root .ph-preview-file b{color:#0f172a;font-size:13px;font-weight:950}
#pertihub-root .ph-preview-meta small,#pertihub-root .ph-preview-file small{color:#64748b;font-size:12px;font-weight:650}
@media(max-width:760px){#pertihub-root .ph-validate-head{flex-direction:column}#pertihub-root .ph-upload-actions .ph-btn{width:100%}}

/* V4.0 Validasi success dialog + finance action polish */
.ph-success-dialog-wrap{position:fixed;inset:0;z-index:1000002;display:flex;align-items:center;justify-content:center;padding:24px;font-family:inherit}
.ph-success-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.38);backdrop-filter:blur(7px)}
.ph-success-dialog{position:relative;width:min(560px,calc(100vw - 36px));border-radius:24px;background:#fff;border:1px solid #dbe7f5;box-shadow:0 30px 90px rgba(15,23,42,.22);padding:28px;animation:phPop .18s ease-out;color:#0f172a}
@keyframes phPop{from{transform:translateY(10px) scale(.98);opacity:.3}to{transform:none;opacity:1}}
.ph-success-icon{width:58px;height:58px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#16a34a,#22c55e);color:white;font-size:32px;font-weight:900;margin-bottom:14px;box-shadow:0 12px 28px rgba(22,163,74,.28)}
.ph-success-dialog h2{margin:0 0 6px;font-size:24px;line-height:1.15;font-weight:900;letter-spacing:-.02em}
.ph-success-dialog p{margin:0 0 18px;color:#64748b;font-weight:700}
.ph-success-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0;padding:14px;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0}
.ph-success-summary div{border-radius:14px;background:white;border:1px solid #e5edf7;padding:12px;min-width:0}
.ph-success-summary small{display:block;text-transform:uppercase;font-size:10px;letter-spacing:.06em;color:#64748b;font-weight:900;margin-bottom:5px}
.ph-success-summary b{display:block;font-size:13px;font-weight:900;line-height:1.25;overflow-wrap:anywhere}
.ph-success-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.ph-upload-actions{align-items:center;flex-wrap:wrap}
#val-refresh{margin-left:auto}
@media(max-width:720px){.ph-success-summary{grid-template-columns:1fr}.ph-success-actions{flex-direction:column}.ph-success-actions .ph-btn{width:100%}#val-refresh{margin-left:0}}

/* ===== V4.1 Announcement Center Enterprise ===== */
#pertihub-root .ph-ann-center{display:flex;flex-direction:column;gap:16px;min-height:calc(100vh - 150px)}
#pertihub-root .ph-ann-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid #dbeafe;border-radius:22px;padding:20px 22px;box-shadow:0 14px 32px rgba(15,23,42,.055)}
#pertihub-root .ph-ann-hero h2{margin:10px 0 4px!important;font-size:24px!important;line-height:1.1!important;letter-spacing:-.03em!important;color:#0f172a!important}
#pertihub-root .ph-ann-hero p{margin:0;color:#64748b;font-size:13px;line-height:1.45}
#pertihub-root .ph-ann-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#pertihub-root .ph-ann-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;letter-spacing:.02em;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8}
#pertihub-root .ph-ann-chip.customer{border-color:#bbf7d0;background:#f0fdf4;color:#047857}
#pertihub-root .ph-ann-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#pertihub-root .ph-ann-stat{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:14px 16px;box-shadow:0 10px 22px rgba(15,23,42,.045);min-width:0}
#pertihub-root .ph-ann-stat small{display:block;color:#64748b;text-transform:uppercase;font-size:10.5px;font-weight:900;letter-spacing:.08em}
#pertihub-root .ph-ann-stat strong{display:block;font-size:22px;line-height:1.12;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a}
#pertihub-root .ph-ann-stat span{display:block;color:#64748b;font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pertihub-root .ph-ann-workspace{display:grid!important;grid-template-columns:390px minmax(0,1fr)!important;height:calc(100vh - 340px)!important;min-height:560px!important;background:#fff;border:1px solid #e2e8f0;border-radius:22px;overflow:hidden;box-shadow:0 16px 38px rgba(15,23,42,.06)}
#pertihub-root .ph-ann-list-pane{background:#f8fafc;border-right:1px solid #e2e8f0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#pertihub-root .ph-ann-pane-head{padding:16px;border-bottom:1px solid #e2e8f0;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px}
#pertihub-root .ph-ann-pane-head b{font-size:14px;color:#0f172a}.ph-ann-pane-head small{color:#64748b;font-weight:800}
#pertihub-root .ph-ann-scroll{height:auto!important;flex:1;overflow:auto;padding:10px}
#pertihub-root .ph-ann-card{width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:16px;padding:14px;margin:0 0 8px;cursor:pointer;color:#0f172a;transition:.16s;display:block;position:relative}
#pertihub-root .ph-ann-card:hover{background:#fff;border-color:#dbeafe;box-shadow:0 10px 24px rgba(37,99,235,.08);transform:translateY(-1px)}
#pertihub-root .ph-ann-card.active{background:#edf4ff;border-color:#bfdbfe;box-shadow:inset 4px 0 0 #2563eb,0 10px 24px rgba(37,99,235,.06)}
#pertihub-root .ph-ann-center.customer .ph-ann-card.active{background:#f0fdf4;border-color:#bbf7d0;box-shadow:inset 4px 0 0 #10b981,0 10px 24px rgba(16,185,129,.07)}
#pertihub-root .ph-ann-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#pertihub-root .ph-ann-card-top span{width:30px;height:30px;border-radius:12px;background:#dbeafe;display:grid;place-items:center}.ph-ann-center.customer .ph-ann-card-top span{background:#dcfce7}
#pertihub-root .ph-ann-card-top em{font-style:normal;font-size:10px;font-weight:950;border-radius:999px;background:#fee2e2;color:#dc2626;padding:4px 7px;letter-spacing:.06em}
#pertihub-root .ph-ann-card b{display:block;font-size:14px;line-height:1.28;margin-bottom:8px;letter-spacing:-.01em}
#pertihub-root .ph-ann-card small{display:block;color:#64748b;font-size:11.5px;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pertihub-root .ph-ann-card p{margin:10px 0 0;color:#475569;font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#pertihub-root .ph-ann-article-pane{overflow:auto;background:#fff;padding:0!important}
#pertihub-root .ph-ann-article{max-width:900px;margin:0 auto;padding:34px 42px 80px;color:#0f172a}
#pertihub-root .ph-ann-article-head{border-bottom:1px solid #e2e8f0;padding-bottom:22px;margin-bottom:24px}
#pertihub-root .ph-ann-article h2{font-size:34px!important;line-height:1.12!important;margin:14px 0 14px!important;letter-spacing:-.04em!important;color:#0f172a!important}
#pertihub-root .ph-ann-meta{display:flex;gap:10px;flex-wrap:wrap;color:#64748b;font-weight:800;font-size:13px}
#pertihub-root .ph-ann-meta span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:7px 10px}
#pertihub-root .ph-ann-gallery{margin:0 0 26px}.ph-ann-gallery img{width:100%;max-height:480px;object-fit:contain;border:1px solid #e2e8f0;background:#f8fafc;border-radius:18px;box-shadow:0 14px 34px rgba(15,23,42,.06)}
#pertihub-root .ph-ann-body{font-size:16px;line-height:1.78;color:#0f172a;white-space:normal}.ph-ann-body p{margin:0 0 16px!important;white-space:pre-wrap}.ph-ann-body .muted{color:#64748b}
#pertihub-root .ph-ann-form textarea{min-height:220px;resize:vertical}.ph-form-actions{display:flex;justify-content:flex-end;margin-top:14px}
@media(max-width:1100px){#pertihub-root .ph-ann-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#pertihub-root .ph-ann-workspace{grid-template-columns:1fr!important;height:auto!important;min-height:0!important}#pertihub-root .ph-ann-list-pane{border-right:0;border-bottom:1px solid #e2e8f0;max-height:360px}#pertihub-root .ph-ann-article{padding:24px 22px 50px}#pertihub-root .ph-ann-article h2{font-size:26px!important}}
@media(max-width:640px){#pertihub-root .ph-ann-hero{flex-direction:column;padding:16px}#pertihub-root .ph-ann-actions{width:100%;justify-content:stretch}#pertihub-root .ph-ann-actions .ph-btn{flex:1}#pertihub-root .ph-ann-stats{grid-template-columns:1fr}#pertihub-root .ph-ann-article{padding:20px 16px 42px}#pertihub-root .ph-ann-card{min-width:0!important}}

/* V4.3 Announcement Composer Preview */
.ph-upload-zone{
  margin-top:6px;
  border:1px dashed #cbd5e1;
  background:#f8fafc;
  border-radius:16px;
  padding:14px;
  transition:.18s ease;
}
.ph-upload-zone.drag,
.ph-upload-zone.has-file{
  border-color:#2563eb;
  background:#eff6ff;
}
.ph-upload-zone input[type="file"]{
  width:100%;
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
}
.ph-upload-hint{
  margin:9px 2px 0;
  font-size:12px;
  color:#64748b;
  font-weight:700;
}
.ph-upload-preview{margin-top:12px;}
.ph-preview-card{
  border:1px solid #dbeafe;
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 16px 36px rgba(15,23,42,.08);
}
.ph-preview-card.image .ph-preview-frame{
  background:linear-gradient(135deg,#f8fafc,#eef6ff);
  border:1px solid #e2e8f0;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  max-height:340px;
}
.ph-preview-card.image img{
  width:100%;
  max-height:340px;
  object-fit:contain;
  display:block;
}
.ph-preview-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
}
.ph-preview-info b{
  display:block;
  color:#0f172a;
  font-size:13px;
  line-height:1.25;
  word-break:break-word;
}
.ph-preview-info span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  margin-top:2px;
}
.ph-file-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eff6ff;
  font-size:24px;
}
.ph-preview-card.file{
  display:flex;
  align-items:center;
  gap:14px;
}
.ph-preview-card.file .ph-preview-info{margin-top:0;flex:1;}
.ph-btn.danger{
  background:#fee2e2!important;
  color:#b91c1c!important;
  border-color:#fecaca!important;
}
.ph-btn.small{
  padding:8px 12px!important;
  border-radius:11px!important;
  font-size:12px!important;
}
@media(max-width:760px){
  .ph-preview-info{align-items:flex-start;flex-direction:column;}
  .ph-preview-card.file{align-items:flex-start;}
}

/* V4.4 Clean Announcement Inbox */
#pertihub-root .ph-ann-list-pane{background:#ffffff!important;}
#pertihub-root .ph-ann-pane-head{height:58px;padding:14px 16px!important;background:#fff!important;}
#pertihub-root .ph-ann-scroll{padding:0!important;background:#fff!important;}
#pertihub-root .ph-ann-card.ph-ann-clean{
  border:0!important;
  border-bottom:1px solid #e5eaf2!important;
  border-radius:0!important;
  margin:0!important;
  padding:15px 17px!important;
  background:#fff!important;
  box-shadow:none!important;
  transform:none!important;
  min-height:auto!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean:hover{
  background:#f8fbff!important;
  border-color:#e5eaf2!important;
  box-shadow:none!important;
  transform:none!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean.active{
  background:#f3f7ff!important;
  border-left:4px solid #2563eb!important;
  padding-left:13px!important;
  box-shadow:none!important;
}
#pertihub-root .ph-ann-center.customer .ph-ann-card.ph-ann-clean.active{
  background:#f0fdf4!important;
  border-left-color:#10b981!important;
  box-shadow:none!important;
}
#pertihub-root .ph-ann-clean-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;margin-bottom:5px;}
#pertihub-root .ph-ann-card.ph-ann-clean b{
  font-size:13.5px!important;
  line-height:1.34!important;
  margin:0!important;
  color:#0f172a!important;
  letter-spacing:-.01em!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean em{
  font-style:normal!important;
  font-size:9.5px!important;
  font-weight:950!important;
  line-height:1!important;
  border-radius:999px!important;
  background:#eef2ff!important;
  color:#2563eb!important;
  padding:5px 7px!important;
  letter-spacing:.06em!important;
  white-space:nowrap!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean:first-child em{background:#dcfce7!important;color:#15803d!important;}
#pertihub-root .ph-ann-clean-meta{
  color:#64748b!important;
  font-size:11.5px!important;
  line-height:1.25!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  margin-bottom:7px!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean p{
  margin:0!important;
  color:#475569!important;
  font-size:12.2px!important;
  line-height:1.45!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
@media(max-width:640px){
  #pertihub-root .ph-ann-card.ph-ann-clean{padding:14px 15px!important;}
  #pertihub-root .ph-ann-card.ph-ann-clean.active{padding-left:11px!important;}
}

/* V4.5 Clean title-only announcement list + paste screenshot composer */
#pertihub-root .ph-ann-card.ph-ann-clean{
  padding:14px 16px!important;
  min-height:62px!important;
}
#pertihub-root .ph-ann-clean-head,
#pertihub-root .ph-ann-card.ph-ann-clean em,
#pertihub-root .ph-ann-card.ph-ann-clean p{
  display:none!important;
}
#pertihub-root .ph-ann-clean-title{
  font-size:13.8px!important;
  font-weight:900!important;
  line-height:1.35!important;
  color:#0f172a!important;
  letter-spacing:-.01em!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  margin:0 0 6px 0!important;
}
#pertihub-root .ph-ann-clean-meta{
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:800!important;
  margin:0!important;
  text-transform:none!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean.active{
  background:#eef4ff!important;
  border-left:3px solid #2563eb!important;
  padding-left:13px!important;
}
#pertihub-root .ph-ann-center.customer .ph-ann-card.ph-ann-clean.active{
  background:#ecfdf5!important;
  border-left-color:#10b981!important;
}
#pertihub-root .ph-upload-zone{
  position:relative!important;
  cursor:pointer!important;
}
#pertihub-root .ph-upload-zone.drag{
  border-color:#2563eb!important;
  background:#eff6ff!important;
}
#pertihub-root .ph-upload-hint{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:800!important;
  padding:10px 0!important;
}
#pertihub-root .ph-upload-hint b{
  color:#0f172a!important;
  font-size:14px!important;
}
#pertihub-root .ph-upload-hint span{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:700!important;
}
#pertihub-root .ph-upload-zone.has-file .ph-upload-hint{
  display:none!important;
}

/* =========================================================
   PERTIHUB ERP V4.6 - Standard Typography System
   Goal: calmer, cleaner enterprise reading. Reduce over-bold UI.
   ========================================================= */
#pertihub-root,
#pertihub-root *{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#pertihub-root{
  --ph-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ph-fw-regular: 400;
  --ph-fw-medium: 500;
  --ph-fw-semibold: 600;
  --ph-fw-bold: 700;
  font-family:var(--ph-font-body)!important;
  font-size:14px;
  line-height:1.55;
  color:#0f172a;
}

/* Global text rhythm */
#pertihub-root p,
#pertihub-root td,
#pertihub-root li,
#pertihub-root input,
#pertihub-root textarea,
#pertihub-root button{
  font-weight:var(--ph-fw-medium)!important;
  letter-spacing:0!important;
}

/* Page title */
#pertihub-root .ph-topbar h1,
#pertihub-root .ph-page-title h1{
  font-size:24px!important;
  line-height:1.18!important;
  font-weight:var(--ph-fw-bold)!important;
  letter-spacing:-.025em!important;
  color:#0f172a!important;
}
#pertihub-root .ph-topbar p,
#pertihub-root .ph-page-title p{
  font-size:12.5px!important;
  line-height:1.35!important;
  font-weight:var(--ph-fw-medium)!important;
  color:#64748b!important;
}

/* Sidebar: readable but not heavy */
#pertihub-root .ph-brand strong{
  font-size:16px!important;
  font-weight:var(--ph-fw-bold)!important;
  letter-spacing:.01em!important;
}
#pertihub-root .ph-nav-title{
  font-size:10.5px!important;
  font-weight:var(--ph-fw-semibold)!important;
  letter-spacing:.13em!important;
}
#pertihub-root .ph-nav-item b,
#pertihub-root .ph-user b{
  font-size:13.25px!important;
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-user small,
#pertihub-root .ph-brand small{
  font-weight:var(--ph-fw-medium)!important;
}

/* KPI cards */
#pertihub-root .ph-kpi small{
  font-size:10.5px!important;
  font-weight:var(--ph-fw-semibold)!important;
  letter-spacing:.08em!important;
}
#pertihub-root .ph-kpi strong{
  font-size:22px!important;
  font-weight:var(--ph-fw-bold)!important;
  letter-spacing:-.02em!important;
}
#pertihub-root .ph-kpi span{
  font-weight:var(--ph-fw-medium)!important;
}

/* Buttons and badges */
#pertihub-root .ph-btn,
#pertihub-root .ph-badge,
#pertihub-root .ph-status-pill,
#pertihub-root .ph-mini-btn{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-badge{
  font-size:11.5px!important;
}

/* Tables */
#pertihub-root .ph-table th{
  font-size:11px!important;
  font-weight:var(--ph-fw-semibold)!important;
  letter-spacing:.06em!important;
}
#pertihub-root .ph-table td{
  font-size:13.25px!important;
  font-weight:var(--ph-fw-medium)!important;
  line-height:1.45!important;
}
#pertihub-root .ph-table td b,
#pertihub-root .ph-table td strong{
  font-weight:var(--ph-fw-semibold)!important;
}

/* Tree navigation */
#pertihub-root .ph-tree-node>summary{
  font-size:13px!important;
  font-weight:var(--ph-fw-medium)!important;
}
#pertihub-root .ph-tree-node summary b{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-tree-node summary em{
  font-weight:var(--ph-fw-semibold)!important;
  font-size:10.5px!important;
}
#pertihub-root .ph-tree-item b{
  font-size:13.25px!important;
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-tree-item small{
  font-weight:var(--ph-fw-medium)!important;
}
#pertihub-root .ph-tree-item .ph-doc{
  font-weight:var(--ph-fw-semibold)!important;
}

/* Drawer title and detail text */
#pertihub-root .ph-drawer header h2{
  font-size:17px!important;
  font-weight:var(--ph-fw-bold)!important;
  letter-spacing:-.015em!important;
}
#pertihub-root .ph-enter-card-head h3,
#pertihub-root .ph-so-section h3{
  font-size:16px!important;
  font-weight:var(--ph-fw-bold)!important;
  letter-spacing:-.015em!important;
}
#pertihub-root .ph-so-hero h2{
  font-size:25px!important;
  font-weight:var(--ph-fw-bold)!important;
  letter-spacing:-.03em!important;
}
#pertihub-root .ph-so-hero p,
#pertihub-root .ph-so-hero-right small{
  font-weight:var(--ph-fw-medium)!important;
}
#pertihub-root .ph-so-kicker{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-so-info-grid small,
#pertihub-root .ph-detail-grid small{
  font-weight:var(--ph-fw-semibold)!important;
  letter-spacing:.055em!important;
}
#pertihub-root .ph-so-info-grid b,
#pertihub-root .ph-detail-grid b{
  font-weight:var(--ph-fw-semibold)!important;
}

/* Timeline */
#pertihub-root .ph-step-dot,
#pertihub-root .ph-time-dot,
#pertihub-root .apk-time-dot{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-step b,
#pertihub-root .ph-time-title,
#pertihub-root .apk-time-body b{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-step small,
#pertihub-root .apk-time-body small{
  font-weight:var(--ph-fw-medium)!important;
}

/* Items / product detail */
#pertihub-root .ph-prod-main b,
#pertihub-root .ph-items-table td b,
#pertihub-root .ph-items-table td strong{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-prod-meta span,
#pertihub-root .ph-chip{
  font-weight:var(--ph-fw-medium)!important;
}

/* Announcement Center */
#pertihub-root .ph-ann-head h3,
#pertihub-root .ph-ann-list h3{
  font-size:15px!important;
  font-weight:var(--ph-fw-bold)!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean b,
#pertihub-root .ph-ann-item b,
#pertihub-root .ph-ann-title{
  font-size:13.5px!important;
  line-height:1.34!important;
  font-weight:var(--ph-fw-semibold)!important;
  letter-spacing:0!important;
}
#pertihub-root .ph-ann-user,
#pertihub-root .ph-ann-item small,
#pertihub-root .ph-ann-item em{
  font-size:12px!important;
  font-weight:var(--ph-fw-medium)!important;
}
#pertihub-root .ph-ann-card.ph-ann-clean em{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-ann-detail h2{
  font-size:25px!important;
  font-weight:var(--ph-fw-bold)!important;
  line-height:1.22!important;
  letter-spacing:-.02em!important;
}
#pertihub-root .ph-meta{
  font-weight:var(--ph-fw-medium)!important;
}
#pertihub-root .ph-ann-detail p{
  font-size:15px!important;
  line-height:1.72!important;
  font-weight:var(--ph-fw-regular)!important;
  color:#1e293b!important;
}

/* Chat */
#pertihub-root .ph-room{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-bubble b{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root .ph-bubble p{
  font-weight:var(--ph-fw-regular)!important;
  line-height:1.55!important;
}

/* Forms */
#pertihub-root .ph-login label,
#pertihub-root .ph-form label{
  font-weight:var(--ph-fw-semibold)!important;
}
#pertihub-root input::placeholder,
#pertihub-root textarea::placeholder{
  color:#94a3b8!important;
  font-weight:var(--ph-fw-regular)!important;
}

@media(max-width:720px){
  #pertihub-root .ph-topbar h1,
  #pertihub-root .ph-page-title h1{font-size:20px!important;}
  #pertihub-root .ph-so-hero h2{font-size:22px!important;}
  #pertihub-root .ph-ann-detail h2{font-size:21px!important;}
}

/* ============================================================
   PERTIHUB V4.8 PAYMENT SUPABASE — APK PARITY
   ============================================================ */
#pertihub-root .ph-payment-panel{padding:12px!important;background:#fff;border:1px solid #dbeafe;border-radius:22px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
#pertihub-root .ph-pay-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px}
#pertihub-root .ph-pay-kpi{border:1px solid #e2e8f0;border-radius:18px;padding:12px 14px;background:#fff;min-height:74px;display:flex;flex-direction:column;justify-content:center}
#pertihub-root .ph-pay-kpi small{font-size:11px;font-weight:800;color:#64748b}.ph-pay-kpi strong{font-size:24px;line-height:1;font-weight:950;margin-top:5px;color:#0f172a}
#pertihub-root .ph-pay-kpi.red{background:#fff7f7;border-color:#fecaca}#pertihub-root .ph-pay-kpi.red strong{color:#dc2626}
#pertihub-root .ph-pay-kpi.orange{background:#fff9f2;border-color:#fed7aa}#pertihub-root .ph-pay-kpi.orange strong{color:#ea6a00}
#pertihub-root .ph-pay-kpi.green{background:#f5fbf3;border-color:#bbdfb3}#pertihub-root .ph-pay-kpi.green strong{color:#15803d}
#pertihub-root .ph-pay-total{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;margin:0 0 10px;border-radius:20px;background:#eff6ff;border:1px solid #bfdbfe}
#pertihub-root .ph-pay-total.orange{background:#fff7ed;border-color:#fed7aa}#pertihub-root .ph-pay-total small{display:block;color:#64748b;font-size:11px;font-weight:800}#pertihub-root .ph-pay-total strong{display:block;color:#1565c0;font-size:23px;font-weight:950;margin-top:3px}#pertihub-root .ph-pay-total.orange strong{color:#ea6a00}
#pertihub-root .ph-icon-btn{width:42px;height:42px;border:1px solid #bfdbfe;border-radius:14px;background:#fff;color:#1565c0;font-size:23px;font-weight:900;cursor:pointer}
#pertihub-root .ph-pay-search{height:48px;border:1px solid #cbd5e1;border-radius:16px;background:#fff;display:flex;align-items:center;padding:0 12px;gap:8px;margin-bottom:10px}.ph-pay-search>span{font-size:23px;color:#64748b;line-height:1}.ph-pay-search input{flex:1;min-width:0;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;font-size:13px;color:#0f172a;padding:0!important}
#pertihub-root .ph-pay-hierarchy{display:flex;flex-direction:column;gap:5px}
#pertihub-root .ph-pay-group{border:0;margin:0}.ph-pay-group>summary{list-style:none;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:7px;cursor:pointer;border:1px solid;border-radius:14px;padding:10px 12px}.ph-pay-group>summary::-webkit-details-marker{display:none}.ph-pay-group>summary .ph-group-arrow{font-size:22px;font-weight:900;line-height:1}.ph-pay-group[open]>summary .ph-group-arrow{transform:rotate(90deg)}
#pertihub-root .ph-pay-group>summary b{display:block;font-size:12px;font-weight:950;line-height:1.2;color:#0f172a}.ph-pay-group>summary small{display:block;margin-top:2px;font-size:9px;color:#64748b;font-weight:750}.ph-pay-group>summary strong{font-size:11px;font-weight:950;white-space:nowrap}
#pertihub-root .ph-pay-group.status.request>summary{background:#ffe9e9;border-color:#fecaca}.ph-pay-group.date.request>summary{background:#fff1f1;border-color:#fecaca}.ph-pay-group.customer.request>summary{background:#fff8f8;border-color:#fecaca}.ph-pay-group.request>summary strong,.ph-pay-group.request>summary .ph-group-arrow,.ph-pay-group.status.request>summary b{color:#dc2626!important}
#pertihub-root .ph-pay-group.status.received>summary{background:#ffedda;border-color:#fed7aa}.ph-pay-group.date.received>summary{background:#fff5e9;border-color:#fed7aa}.ph-pay-group.customer.received>summary{background:#fffaf4;border-color:#fed7aa}.ph-pay-group.received>summary strong,.ph-pay-group.received>summary .ph-group-arrow,.ph-pay-group.status.received>summary b{color:#ea6a00!important}
#pertihub-root .ph-pay-group.status.success>summary{background:#e4f5df;border-color:#bbdfb3}.ph-pay-group.date.success>summary{background:#eef8ea;border-color:#bbdfb3}.ph-pay-group.customer.success>summary{background:#f7fcf5;border-color:#bbdfb3}.ph-pay-group.success>summary strong,.ph-pay-group.success>summary .ph-group-arrow,.ph-pay-group.status.success>summary b{color:#15803d!important}
#pertihub-root .ph-pay-group.neutral>summary{background:#eff6ff;border-color:#bfdbfe}.ph-pay-group.neutral>summary strong,.ph-pay-group.neutral>summary .ph-group-arrow{color:#1565c0}
#pertihub-root .ph-pay-group-children{padding:5px 0 0 14px}.ph-pay-group.date>.ph-pay-group-children{padding-left:16px}.ph-pay-items{padding:5px 0 2px 16px}
#pertihub-root .ph-pay-row{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;border:1px solid #dbeafe;background:#fff;border-radius:18px;padding:11px 12px;margin:5px 0;cursor:pointer;transition:.14s}.ph-pay-row:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.08)}.ph-pay-row.request{border-color:#fecaca}.ph-pay-row.received{border-color:#fed7aa}.ph-pay-row.success{border-color:#bbdfb3}
#pertihub-root .ph-pay-icon{width:40px;height:40px;border-radius:13px;background:#eff6ff;display:grid;place-items:center;font-size:19px}.ph-pay-row.received .ph-pay-icon{background:#fff5e9}.ph-pay-row.success .ph-pay-icon{background:#eef8ea}.ph-pay-row.request .ph-pay-icon{background:#fff1f1}
#pertihub-root .ph-pay-main{min-width:0}.ph-pay-main>b{display:block;color:#1565c0;font-size:11.5px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ph-pay-main>strong{display:block;color:#0f172a;font-size:12.5px;font-weight:950;margin-top:2px;white-space:normal}.ph-pay-main>small{display:block;color:#64748b;font-size:9.5px;font-weight:750;margin-top:2px}.ph-pay-main>em{display:block;color:#0f172a;font-style:normal;font-size:13px;font-weight:950;margin-top:4px}
#pertihub-root .ph-pay-side{display:flex;min-width:96px;flex-direction:column;align-items:flex-end;gap:4px}.ph-pay-side small{color:#64748b;font-size:9px}.ph-pay-side>span{font-size:24px;color:#64748b;line-height:1}
#pertihub-root .ph-payment-detail{display:flex;flex-direction:column;gap:12px}.ph-detail-status{padding:12px 14px;border-radius:16px;border:1px solid}.ph-detail-status small{display:block;font-size:9px;font-weight:800;color:#64748b}.ph-detail-status b{display:block;margin-top:3px;font-size:13px;font-weight:950}.ph-detail-status.request{background:#ffe9e9;border-color:#fecaca}.ph-detail-status.request b{color:#dc2626}.ph-detail-status.received{background:#ffedda;border-color:#fed7aa}.ph-detail-status.received b{color:#ea6a00}.ph-detail-status.success{background:#e4f5df;border-color:#bbdfb3}.ph-detail-status.success b{color:#15803d}.ph-detail-status.neutral{background:#eff6ff;border-color:#bfdbfe}.ph-detail-status.neutral b{color:#1565c0}
#pertihub-root .ph-receipt-card{background:#fff;border:1px solid #dbeafe;border-radius:18px;padding:14px}.ph-receipt-card h3{margin:0;color:#0f172a;font-size:14px;font-weight:950}.ph-receipt-card p{margin:4px 0 10px;color:#64748b;font-size:10px;font-weight:650}.ph-private-image{min-height:120px;display:grid;place-items:center}.ph-image-loading,.ph-image-error{padding:18px;text-align:center;color:#64748b;font-size:12px;font-weight:700}.ph-image-error{color:#dc2626}
#pertihub-root .ph-proof-img{width:100%;max-height:560px;object-fit:contain;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0;cursor:zoom-in}
#pertihub-root .ph-validate-card{border:1px solid #bfdbfe;border-radius:20px;background:#fff;padding:16px}.ph-validate-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.ph-validate-head h3{margin:0;color:#0f172a;font-size:15px;font-weight:950}.ph-validate-head p{margin:4px 0 0;color:#64748b;font-size:11px;max-width:600px}.ph-soft-chip{background:#fff5e9;color:#ea6a00;border:1px solid #fed7aa;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900}.ph-field-label{display:block;margin:12px 0 6px;color:#0f172a;font-size:11px;font-weight:850}.ph-textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:14px;padding:10px 12px;font:inherit;resize:vertical;background:#fff}.ph-btn.success{background:#15803d!important;border-color:#15803d!important;color:#fff!important}
.ph-image-modal{position:fixed;inset:0;z-index:1000001;display:grid;place-items:center}.ph-image-modal-back{position:absolute;inset:0;background:rgba(2,6,23,.86);backdrop-filter:blur(4px)}.ph-image-modal-body{position:relative;z-index:2;width:min(94vw,1100px);height:min(92vh,900px);display:grid;place-items:center;overflow:auto}.ph-image-modal-body img{max-width:none;max-height:none;width:auto;height:auto;min-width:min(88vw,900px);object-fit:contain;cursor:zoom-in}.ph-image-modal-close{position:fixed;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:14px;background:#fff;color:#0f172a;font-size:28px;font-weight:900;cursor:pointer;z-index:3}
@media(max-width:720px){#pertihub-root .ph-pay-kpis{gap:7px}.ph-pay-kpi{padding:10px!important;min-height:66px!important}.ph-pay-kpi strong{font-size:20px!important}#pertihub-root .ph-payment-panel{padding:8px!important}.ph-pay-group-children{padding-left:7px!important}.ph-pay-group.date>.ph-pay-group-children{padding-left:7px!important}.ph-pay-items{padding-left:7px!important}.ph-pay-row{grid-template-columns:38px minmax(0,1fr)!important;padding:10px!important}.ph-pay-side{grid-column:2;min-width:0;flex-direction:row!important;align-items:center!important;justify-content:space-between}.ph-pay-side>span{display:none}.ph-pay-icon{width:34px!important;height:34px!important}.ph-upload-actions{display:grid!important;grid-template-columns:1fr 1fr}.ph-image-modal-body img{min-width:92vw}}

/* Payment Unique ID V4.8.1 */
.ph-pay-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ph-pay-title-line>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-pay-unique{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#e8f4ff;color:#1565c0;font-size:10px;font-weight:800;letter-spacing:.35px;line-height:1.2;white-space:nowrap}


/* Payment Detail Readability V4.8.2 */
#pertihub-root .ph-payment-detail-grid{grid-template-columns:1fr!important;gap:8px}
#pertihub-root .ph-payment-detail-grid>div{padding:12px 14px;border-radius:14px}
#pertihub-root .ph-payment-detail-grid small{font-size:10px}
#pertihub-root .ph-payment-detail-grid b{font-size:13px;line-height:1.35;margin-top:3px}
#pertihub-root .ph-detail-unique-hero{padding:15px 16px;border-radius:18px;background:linear-gradient(135deg,#e8f4ff 0%,#f4f9ff 100%);border:1px solid #93c5fd;box-shadow:0 7px 20px rgba(21,101,192,.08)}
#pertihub-root .ph-detail-unique-hero small{display:block;color:#64748b;font-size:9.5px;font-weight:900;letter-spacing:.08em}
#pertihub-root .ph-detail-unique-hero strong{display:block;margin-top:4px;color:#0b63ce;font-size:28px;line-height:1.05;font-weight:950;letter-spacing:.14em}
#pertihub-root .ph-detail-unique-hero span{display:block;margin-top:6px;color:#64748b;font-size:10px;font-weight:700}
@media(max-width:720px){#pertihub-root .ph-detail-unique-hero strong{font-size:24px}}

/* ============================================================
   PERTIHUB V4.8.7 — PAYMENT CHANNEL SEPARATION
   Transfer vs By Salesman; daftar Transfer grouped by account.
   ============================================================ */
#pertihub-root .ph-pay-channel-stack{display:flex;flex-direction:column;gap:14px}
#pertihub-root .ph-pay-channel-card{border:1px solid #dbeafe;border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 9px 28px rgba(15,23,42,.05)}
#pertihub-root .ph-pay-channel-card.transfer{border-color:#bfdbfe}
#pertihub-root .ph-pay-channel-card.salesman{border-color:#d8e5db}
#pertihub-root .ph-pay-channel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 16px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#f5faff 0%,#fff 100%)}
#pertihub-root .ph-pay-channel-card.salesman .ph-pay-channel-head{background:linear-gradient(135deg,#f6fbf5 0%,#fff 100%)}
#pertihub-root .ph-pay-channel-head small{display:block;color:#64748b;font-size:9px;font-weight:900;letter-spacing:.09em}
#pertihub-root .ph-pay-channel-head h3{margin:3px 0 0;color:#0f172a;font-size:15px;line-height:1.2;font-weight:950}
#pertihub-root .ph-pay-channel-head p{margin:3px 0 0;color:#64748b;font-size:10px;font-weight:750}
#pertihub-root .ph-pay-channel-head>strong{white-space:nowrap;color:#1565c0;font-size:16px;font-weight:950}
#pertihub-root .ph-pay-channel-card.salesman .ph-pay-channel-head>strong{color:#15803d}
#pertihub-root .ph-pay-channel-body{padding:10px}
#pertihub-root .ph-pay-account-group{margin:0 0 7px;border:0}
#pertihub-root .ph-pay-account-group>summary{list-style:none;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px 12px;border:1px solid #bfdbfe;border-radius:17px;background:#f8fbff;cursor:pointer}
#pertihub-root .ph-pay-account-group.salesman>summary{border-color:#cce8cf;background:#f7fcf6}
#pertihub-root .ph-pay-account-group>summary::-webkit-details-marker{display:none}
#pertihub-root .ph-pay-account-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#e8f4ff;font-size:17px}
#pertihub-root .ph-pay-account-group.salesman .ph-pay-account-icon{background:#eaf7e9}
#pertihub-root .ph-pay-account-group>summary b{display:block;color:#0f172a;font-size:12px;font-weight:950;line-height:1.25}
#pertihub-root .ph-pay-account-group>summary small{display:block;margin-top:2px;color:#64748b;font-size:9px;font-weight:750}
#pertihub-root .ph-pay-account-group>summary strong{color:#1565c0;font-size:11px;font-weight:950;white-space:nowrap}
#pertihub-root .ph-pay-account-group.salesman>summary strong{color:#15803d}
#pertihub-root .ph-pay-account-children{padding:7px 0 0 12px}
#pertihub-root .ph-pay-method-meta{color:#0b63ce!important;font-weight:850!important;margin-top:3px!important}
@media(max-width:720px){
  #pertihub-root .ph-pay-channel-head{padding:12px;gap:8px}
  #pertihub-root .ph-pay-channel-head h3{font-size:13px}
  #pertihub-root .ph-pay-channel-head>strong{font-size:13px}
  #pertihub-root .ph-pay-channel-body{padding:7px}
  #pertihub-root .ph-pay-account-group>summary{grid-template-columns:32px minmax(0,1fr);padding:9px}
  #pertihub-root .ph-pay-account-group>summary strong{grid-column:2}
  #pertihub-root .ph-pay-account-icon{width:30px;height:30px}
  #pertihub-root .ph-pay-account-children{padding-left:6px}
}

/* =========================================================
   V4.9.0 — Absensi / Callplan / User / Reporting
   ========================================================= */
.ph-abs-page{display:flex;flex-direction:column;gap:14px}.ph-abs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:#fff;border:1px solid #dbeafe;border-radius:20px;padding:16px 18px;box-shadow:0 5px 20px rgba(15,55,95,.05)}.ph-abs-head h2{margin:0;color:#0b2f5b;font-size:20px}.ph-abs-head p{margin:4px 0 0;color:#64748b;font-size:12px;font-weight:600}.ph-abs-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.ph-abs-controls select,.ph-callplan-toolbar input{min-height:40px;border:1px solid #bfdbfe;border-radius:12px;padding:0 12px;background:#fff;color:#0b2f5b;font-weight:700}.ph-abs-split{display:grid;grid-template-columns:245px minmax(0,1fr);gap:14px;align-items:start}.ph-abs-left{background:#fff;border:1px solid #dbeafe;border-radius:18px;padding:10px;position:sticky;top:12px;max-height:75vh;overflow:auto}.ph-abs-left-title{display:flex;justify-content:space-between;color:#64748b;font-size:11px;font-weight:800;padding:6px 8px 10px}.ph-abs-sales{width:100%;border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:#334155}.ph-abs-sales:hover{background:#f0f7ff}.ph-abs-sales.active{background:#e7f2ff;color:#0b5fc6;box-shadow:inset 3px 0 0 #1677d2}.ph-abs-sales span{font-weight:800}.ph-abs-sales small{font-size:10px;color:#64748b}.ph-abs-right{display:flex;flex-direction:column;gap:9px}.ph-abs-right-head{display:flex;justify-content:space-between;align-items:center;padding:4px 3px}.ph-abs-right-head small{color:#64748b;font-size:9px;font-weight:800}.ph-abs-right-head h3{margin:2px 0;color:#0b2f5b}.ph-abs-right-head strong{color:#1565c0}.ph-abs-visit{background:#fff;border:1px solid #dbeafe;border-radius:18px;padding:14px;box-shadow:0 3px 12px rgba(15,55,95,.04)}.ph-abs-visit-top{display:flex;justify-content:space-between;gap:12px}.ph-abs-visit-top h3{margin:2px 0;color:#0b2f5b;font-size:15px}.ph-abs-visit-top p,.ph-abs-visit-top small{margin:0;color:#64748b;font-size:10px}.ph-abs-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.ph-abs-meta span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:5px 8px;color:#64748b;font-size:10px}.ph-abs-meta b{color:#0b2f5b}.ph-abs-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.ph-abs-detail-grid>div{background:#f8fbff;border-radius:12px;padding:9px}.ph-abs-detail-grid small{display:block;color:#64748b;font-size:9px}.ph-abs-detail-grid b{color:#0b2f5b;font-size:11px}.ph-abs-actions{display:flex;gap:8px;margin-top:10px}.ph-btn.success{background:#16a34a;color:#fff}.ph-btn.danger{background:#dc2626;color:#fff}.ph-file-btn{position:relative;overflow:hidden}.ph-file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.ph-callplan-toolbar{margin-bottom:10px}.ph-callplan-toolbar input{width:min(520px,100%)}.ph-cp-row,.ph-user-list-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:9px 11px;margin:5px 0}.ph-cp-row b{color:#1565c0;min-width:90px}.ph-cp-row span{flex:1;color:#0b2f5b;font-weight:700}.ph-cp-row small,.ph-user-list-row small{color:#64748b}.ph-user-list-row>div{display:flex;flex-direction:column}.ph-user-list-row>div:last-child{align-items:flex-end}.ph-sheet-wrap{overflow:auto;border:1px solid #94a3b8;background:#fff;margin-bottom:16px}.ph-sheet{border-collapse:collapse;width:max-content;min-width:100%;font-size:11px}.ph-sheet th,.ph-sheet td{border:1px solid #222;padding:5px 7px;text-align:center;white-space:nowrap}.ph-sheet thead th,.ph-sheet tr.grand th,.ph-sheet tr.grand td{background:#0878bd;color:#fff;font-weight:800}.ph-sheet tbody th{text-align:left;background:#fff;color:#111}.ph-sheet td.total{font-weight:800}.ph-sheet.result thead th{background:#37699a}.ph-sheet.result tr.grand th,.ph-sheet.result tr.grand td{background:#0878bd}.ph-sheet.result td.target{background:#e8f4e8}.ph-report-legend{position:static;display:grid;grid-template-columns:110px minmax(170px,220px);width:max-content;max-width:100%;margin:10px 0 16px auto;font-size:10px;border:1px solid #cbd5e1;background:#fff}.ph-report-legend b{grid-column:1/3;padding:5px 8px;background:#f8fafc}.ph-report-legend span{grid-column:2;padding:5px 8px;font-weight:800;border-left:1px solid #cbd5e1}.ph-report-legend span::before{content:'';display:block;position:absolute}.ph-report-legend span{position:relative}.ph-report-legend span.sick,.ph-report-legend span.permit,.ph-report-legend span.leave,.ph-report-legend span.nokel,.ph-report-legend span.collective{grid-column:2}.ph-report-legend span.sick::after,.ph-report-legend span.permit::after,.ph-report-legend span.leave::after,.ph-report-legend span.nokel::after,.ph-report-legend span.collective::after{content:'';position:absolute;left:-110px;top:0;width:110px;height:100%;border-right:1px solid #cbd5e1}.ph-report-legend .sick{background:#f00}.ph-report-legend .permit{background:#ff0}.ph-report-legend .leave{background:#05a8e8}.ph-report-legend .nokel{background:#8ad14b}.ph-report-legend .collective{background:#f4ddcd}.ph-attendance-report,.ph-result-report{position:relative;background:white;padding:18px;border:1px solid #d7dee8;box-shadow:0 3px 15px rgba(0,0,0,.04)}.ph-result-lower{display:flex;gap:110px;align-items:flex-start;margin-top:18px}.ph-small-sheet{border-collapse:collapse;min-width:205px;font-size:11px}.ph-small-sheet th,.ph-small-sheet td{border:1px solid #94a3b8;padding:5px 8px}.ph-small-sheet th{background:#37699a;color:#fff}.ph-small-sheet tr.grand td{background:#37699a;color:#fff;font-weight:800}.ph-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:28px 5% 4px;text-align:center;min-height:105px}.ph-signatures div{display:flex;flex-direction:column;justify-content:space-between}.ph-signatures small{color:#111}.ph-signatures b{font-size:11px;color:#111}.ph-empty-mini{padding:10px;color:#64748b;font-size:11px}
@media(max-width:900px){.ph-abs-split{grid-template-columns:1fr}.ph-abs-left{position:static;display:flex;overflow-x:auto;max-height:none}.ph-abs-sales{min-width:150px}.ph-abs-head{flex-direction:column}.ph-report-legend{position:static;margin:10px 0}.ph-result-lower{gap:16px;flex-wrap:wrap}.ph-signatures{grid-template-columns:1fr;gap:25px}.ph-abs-detail-grid{grid-template-columns:1fr}}
@media print{.ph-sidebar,.ph-topbar,.ph-abs-controls{display:none!important}.ph-main,.ph-content{padding:0!important;margin:0!important}.ph-attendance-report,.ph-result-report{border:0;box-shadow:none}.ph-sheet{font-size:9px}.ph-sheet th,.ph-sheet td{padding:3px}.ph-signatures{page-break-inside:avoid}}


/* =========================================================
   V4.9.3 — Sales Calendar / PeopleHub holiday + approved leave
   ========================================================= */
#pertihub-root .ph-calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
#pertihub-root .ph-calendar-main,#pertihub-root .ph-calendar-side section{background:#fff;border:1px solid #dbeafe;border-radius:20px;padding:13px;box-shadow:0 5px 18px rgba(15,55,95,.04)}
#pertihub-root .ph-calendar-week,#pertihub-root .ph-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
#pertihub-root .ph-calendar-week{margin-bottom:7px}#pertihub-root .ph-calendar-week b{text-align:center;color:#64748b;font-size:9px;letter-spacing:.06em}
#pertihub-root .ph-cal-cell{min-height:120px;border:1px solid #dbeafe;border-radius:14px;background:#fff;padding:8px;text-align:left;overflow:hidden}
#pertihub-root .ph-cal-cell.blank{border:0;background:transparent}.ph-cal-cell.sunday{background:#f8fafc}.ph-cal-cell.holiday{background:#fff7ed;border-color:#fed7aa}
#pertihub-root .ph-cal-num{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}#pertihub-root .ph-cal-num b{font-size:16px;color:#0b2f5b}#pertihub-root .ph-cal-num small{font-size:8px;color:#94a3b8;font-weight:800}
#pertihub-root .ph-cal-holiday{background:#ffedd5;color:#c2410c;border-radius:8px;padding:5px 6px;font-size:9px;font-weight:900;margin-bottom:4px}
#pertihub-root .ph-cal-leave{display:flex;justify-content:space-between;gap:5px;border-radius:7px;padding:4px 5px;font-size:8px;margin-top:3px;font-weight:800}
#pertihub-root .ph-cal-leave.sick,.ph-cal-side-row.sick{background:#fee2e2;color:#b91c1c}.ph-cal-leave.permit,.ph-cal-side-row.permit{background:#fef9c3;color:#854d0e}.ph-cal-leave.leave,.ph-cal-side-row.leave{background:#e0f2fe;color:#0369a1}.ph-cal-leave.nokel,.ph-cal-side-row.nokel{background:#dcfce7;color:#166534}
#pertihub-root .ph-cal-more{font-size:8px;color:#64748b;margin-top:4px;font-weight:800}
#pertihub-root .ph-calendar-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}.ph-calendar-side h3{margin:0 0 9px;color:#0b2f5b;font-size:13px}.ph-calendar-side p{color:#64748b;font-size:10px}
#pertihub-root .ph-cal-side-row{display:flex;flex-direction:column;gap:2px;border-radius:10px;padding:8px;margin-bottom:6px;background:#f8fafc}.ph-cal-side-row.holiday{background:#fff7ed;color:#9a3412}.ph-cal-side-row b{font-size:10px}.ph-cal-side-row span,.ph-cal-side-row small{font-size:9px}
#pertihub-root .ph-sheet.attendance td.sick{background:#f00;color:#fff}.ph-sheet.attendance td.permit{background:#ff0}.ph-sheet.attendance td.leave{background:#05a8e8;color:#fff}.ph-sheet.attendance td.nokel{background:#8ad14b}.ph-sheet.attendance td.collective,.ph-sheet.attendance th.collective{background:#f4ddcd!important;color:#111!important}
#pertihub-root .ph-result-note{margin:9px 0 12px;padding:9px 11px;border-radius:10px;background:#eff6ff;color:#1e3a8a;font-size:10px;font-weight:700}
@media(max-width:1000px){#pertihub-root .ph-calendar-layout{grid-template-columns:1fr}#pertihub-root .ph-calendar-side{position:static}.ph-cal-cell{min-height:100px}}
@media(max-width:720px){#pertihub-root .ph-calendar-main{overflow:auto}#pertihub-root .ph-calendar-week,#pertihub-root .ph-calendar-grid{min-width:760px}}

.ph-report-legend .sick::after{background:#f00}.ph-report-legend .permit::after{background:#ff0}.ph-report-legend .leave::after{background:#05a8e8}.ph-report-legend .nokel::after{background:#8ad14b}.ph-report-legend .collective::after{background:#f4ddcd}

/* V4.9.5 List Absensi hierarchy + master detail */
.ph-abs-master-detail{display:grid;grid-template-columns:280px 390px minmax(420px,1fr);gap:14px;align-items:start}.ph-abs-tree,.ph-abs-visit-list,.ph-abs-inspector{background:#fff;border:1px solid #dbeafe;border-radius:20px;padding:12px;box-shadow:0 5px 20px rgba(15,55,95,.05)}.ph-abs-tree{position:sticky;top:12px;max-height:76vh;overflow:auto}.ph-abs-inspector{position:sticky;top:12px;max-height:76vh;overflow:auto}.ph-abs-tree-level{border:1px solid #e2e8f0;border-radius:14px;margin:6px 0;background:#fff;overflow:hidden}.ph-abs-tree-level>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:9px 10px;cursor:pointer;background:#f8fbff}.ph-abs-tree-level>summary::-webkit-details-marker{display:none}.ph-abs-tree-level>summary>div{display:flex;flex-direction:column;flex:1;min-width:0}.ph-abs-tree-level>summary small{font-size:8px;color:#64748b;font-weight:800}.ph-abs-tree-level>summary b{font-size:11px;color:#0b2f5b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ph-abs-tree-level>summary strong{font-size:10px;color:#1565c0}.ph-abs-tree-level.month>summary{background:linear-gradient(135deg,#0b5fc6,#2f80ed);color:#fff}.ph-abs-tree-level.month>summary small,.ph-abs-tree-level.month>summary b,.ph-abs-tree-level.month>summary strong{color:#fff}.ph-abs-tree-children{padding:5px 6px 7px}.ph-abs-tree-level.status>summary{background:#fff}.ph-abs-tree-sales{width:100%;border:0;background:transparent;border-radius:10px;padding:8px 9px;display:flex;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;color:#334155}.ph-abs-tree-sales:hover{background:#f0f7ff}.ph-abs-tree-sales.active{background:#e7f2ff;color:#0b5fc6;box-shadow:inset 3px 0 0 #1677d2}.ph-abs-tree-sales span{font-weight:800;font-size:11px}.ph-abs-tree-sales small{font-size:9px;color:#64748b}.ph-abs-visit-list{display:flex;flex-direction:column;gap:8px;max-height:76vh;overflow:auto}.ph-abs-list-row{border:1px solid #e2e8f0;border-radius:15px;padding:11px;display:flex;justify-content:space-between;gap:10px;background:#fff}.ph-abs-list-row.active{border-color:#60a5fa;background:#f5faff;box-shadow:0 0 0 2px rgba(59,130,246,.08)}.ph-abs-list-row h4{margin:3px 0;color:#0b2f5b;font-size:12px}.ph-abs-list-row p,.ph-abs-list-row small{margin:0;color:#64748b;font-size:9.5px}.ph-abs-list-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.ph-abs-detail-btn{padding:6px 10px!important;min-height:auto!important;font-size:9.5px!important}.ph-abs-inspector-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}.ph-abs-inspector-head small{font-size:8px;color:#64748b;font-weight:800}.ph-abs-inspector-head h3{margin:2px 0;color:#0b2f5b}.ph-abs-inspector-head p{margin:0;color:#64748b;font-size:10px}.ph-abs-all-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.ph-abs-field{background:#f8fbff;border:1px solid #e8f0f8;border-radius:12px;padding:8px;min-width:0}.ph-abs-field small{display:block;color:#64748b;font-size:8px;font-weight:800;margin-bottom:3px}.ph-abs-field b{display:block;color:#0b2f5b;font-size:10px;word-break:break-word}.ph-abs-photo{display:block;margin-top:10px;border:1px solid #dbeafe;border-radius:14px;overflow:hidden;text-decoration:none;background:#f8fafc}.ph-abs-photo img{width:100%;max-height:280px;object-fit:contain;display:block;background:#fff}.ph-abs-photo span{display:block;padding:7px 9px;font-size:9px;color:#1565c0;font-weight:800}.ph-abs-detail-actions{display:flex;gap:8px;position:sticky;bottom:-12px;background:#fff;padding:12px 0 2px;margin-top:10px}.ph-abs-detail-actions .ph-btn{flex:1}.ph-abs-detail-empty{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#64748b}.ph-abs-detail-empty span{font-size:28px;color:#60a5fa}.ph-abs-detail-empty b{color:#0b2f5b;margin:6px 0}.ph-abs-detail-empty p{max-width:260px;font-size:10px}
@media(max-width:1250px){.ph-abs-master-detail{grid-template-columns:260px minmax(330px,1fr)}.ph-abs-inspector{grid-column:1/-1;position:static;max-height:none}.ph-abs-tree{position:static}}
@media(max-width:780px){.ph-abs-master-detail{grid-template-columns:1fr}.ph-abs-tree,.ph-abs-visit-list,.ph-abs-inspector{position:static;max-height:none}.ph-abs-all-fields{grid-template-columns:1fr}}

/* V4.9.8 Callplan Excel-like table */
.ph-cp-excel-toolbar{display:grid;grid-template-columns:minmax(280px,1.5fr) repeat(3,minmax(150px,.55fr)) auto auto;gap:9px;align-items:center;margin:0 0 12px;background:#fff;border:1px solid #dbeafe;border-radius:16px;padding:10px;position:sticky;top:0;z-index:12;box-shadow:0 4px 16px rgba(15,55,95,.05)}
.ph-cp-searchbox{display:flex;align-items:center;gap:7px;border:1px solid #bfdbfe;border-radius:11px;padding:0 10px;background:#fff;min-height:39px}.ph-cp-searchbox span{color:#64748b;font-size:18px}.ph-cp-searchbox input{border:0;outline:0;width:100%;background:transparent;color:#0b2f5b;font-weight:700}.ph-cp-excel-toolbar select{min-height:39px;border:1px solid #bfdbfe;border-radius:11px;padding:0 10px;background:#fff;color:#0b2f5b;font-weight:700}.ph-cp-count{display:flex;align-items:center;gap:4px;padding:7px 10px;border-radius:10px;background:#eff6ff;color:#1565c0;white-space:nowrap}.ph-cp-count b{font-size:13px}.ph-cp-count span{font-size:10px;font-weight:800}
.ph-cp-excel-shell{background:#fff;border:1px solid #cbd5e1;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(15,55,95,.05)}.ph-cp-table-wrap{overflow:auto;max-height:calc(100vh - 255px)}.ph-cp-excel-table{border-collapse:separate;border-spacing:0;width:100%;min-width:1180px;font-size:11px;color:#0f172a}.ph-cp-excel-table thead th{position:sticky;top:0;z-index:5;background:#0b71b9;color:#fff;border-right:1px solid rgba(255,255,255,.24);border-bottom:1px solid #07558d;padding:9px 10px;text-align:left;white-space:nowrap;font-size:10px;letter-spacing:.02em}.ph-cp-excel-table tbody td{border-right:1px solid #d9e2ec;border-bottom:1px solid #d9e2ec;padding:7px 10px;background:#fff;white-space:nowrap;vertical-align:middle}.ph-cp-excel-table tbody tr:nth-child(even) td{background:#f8fbff}.ph-cp-excel-table tbody tr:hover td{background:#eaf4ff}.ph-cp-excel-table th.rownum,.ph-cp-excel-table td.rownum{position:sticky;left:0;z-index:4;width:44px;min-width:44px;text-align:center;background:#f1f5f9;color:#64748b;font-weight:800;border-right:1px solid #cbd5e1}.ph-cp-excel-table thead th.rownum{z-index:8;background:#075f9d;color:#fff}.ph-cp-excel-table td.code b{color:#075fb6}.ph-cp-excel-table td.code-bnm{color:#475569}.ph-cp-excel-table td.sales{font-weight:800;color:#0b2f5b}.ph-cp-excel-table td.customer{font-weight:700;min-width:240px;white-space:normal}.ph-cp-excel-table td.center{text-align:center}.ph-cp-day-chip,.ph-cp-spv-chip{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:9.5px;font-weight:800}.ph-cp-day-chip{background:#eef7ff;color:#0b66b2;border:1px solid #c7e3fb}.ph-cp-spv-chip{background:#f3f0ff;color:#5b21b6;border:1px solid #ddd6fe}
@media(max-width:1100px){.ph-cp-excel-toolbar{grid-template-columns:1fr 1fr 1fr}.ph-cp-searchbox{grid-column:1/-1}.ph-cp-count{justify-content:center}}@media(max-width:700px){.ph-cp-excel-toolbar{grid-template-columns:1fr 1fr}.ph-cp-excel-toolbar select{min-width:0}.ph-cp-count{grid-column:1/-1}.ph-cp-table-wrap{max-height:none}}


/* =========================================================
   V4.9.9 — HITUNG ABSENSI COMPACT LEGEND + LEGACY PRINT
   ========================================================= */
.ph-abs-head h2{
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.01em;
}
.ph-attendance-report{
  padding:14px;
}
.ph-report-legend-inline{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  width:100%;
  margin:8px 0 12px;
  border:1px solid #9ca3af;
  background:#fff;
  overflow:hidden;
  font-size:9px;
  line-height:1;
}
.ph-report-legend-inline b,
.ph-report-legend-inline span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:5px 10px;
  border-right:1px solid #9ca3af;
  font-weight:800;
  color:#000;
  white-space:nowrap;
}
.ph-report-legend-inline b{
  background:#fff;
  min-width:92px;
}
.ph-report-legend-inline span{
  flex:1 1 0;
}
.ph-report-legend-inline span:last-child{border-right:0}
.ph-report-legend-inline .sick{background:#ff0000}
.ph-report-legend-inline .permit{background:#ffff00}
.ph-report-legend-inline .leave{background:#05a8e8}
.ph-report-legend-inline .nokel{background:#8ad14b}
.ph-report-legend-inline .collective{background:#f4ddcd}

.ph-report-generated{
  margin-top:10px;
  padding-top:7px;
  border-top:1px solid #d1d5db;
  color:#475569;
  font-size:9px;
  font-weight:700;
  text-align:right;
}

/* report cell colors match legacy legend */
.ph-sheet.attendance td.sick{background:#ff0000!important;color:#000!important}
.ph-sheet.attendance td.permit{background:#ffff00!important;color:#000!important}
.ph-sheet.attendance td.leave{background:#05a8e8!important;color:#000!important}
.ph-sheet.attendance td.nokel{background:#8ad14b!important;color:#000!important}
.ph-sheet.attendance td.collective,
.ph-sheet.attendance th.collective{background:#f4ddcd!important;color:#000!important}

@media print{
  @page{
    size:A4 landscape;
    margin:6mm;
  }

  html,body{
    width:100%;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }

  body,
  body *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }

  .ph-sidebar,
  .ph-topbar,
  .ph-abs-controls{
    display:none!important;
  }

  .ph-shell,
  .ph-main,
  .ph-content,
  .ph-abs-page{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    gap:4px!important;
  }

  .ph-abs-head{
    display:block!important;
    border:0!important;
    box-shadow:none!important;
    padding:0 0 4px!important;
    margin:0!important;
    border-radius:0!important;
  }

  .ph-abs-head h2{
    font-size:13px!important;
    line-height:1.15!important;
    margin:0!important;
    text-align:center!important;
    color:#000!important;
  }

  .ph-abs-head p{
    margin:2px 0 0!important;
    text-align:center!important;
    color:#000!important;
    font-size:8px!important;
  }

  .ph-attendance-report{
    width:100%!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
    margin:0!important;
  }

  .ph-sheet-wrap{
    width:100%!important;
    overflow:visible!important;
    border:0!important;
    margin:0 0 3mm!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .ph-sheet{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
    font-size:6.6px!important;
  }

  .ph-sheet th,
  .ph-sheet td{
    padding:2px 1px!important;
    line-height:1.05!important;
    height:auto!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  .ph-sheet th:first-child,
  .ph-sheet td:first-child{
    width:8%!important;
  }

  .ph-report-legend-inline{
    margin:1.5mm 0 2mm!important;
    font-size:6.8px!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .ph-report-legend-inline b,
  .ph-report-legend-inline span{
    min-height:15px!important;
    padding:2px 4px!important;
  }

  .ph-report-legend-inline b{min-width:70px!important}

  .ph-signatures{
    grid-template-columns:repeat(3,1fr)!important;
    gap:20mm!important;
    margin:3mm 5% 0!important;
    min-height:25mm!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .ph-signatures small{
    font-size:6.8px!important;
    line-height:1.15!important;
  }

  .ph-signatures b{
    font-size:7px!important;
  }

  .ph-report-generated{
    margin-top:1.5mm!important;
    padding-top:1mm!important;
    font-size:6.5px!important;
    color:#000!important;
    break-inside:avoid!important;
  }
}


/* =========================================================
   V5.0.0 — HITUNG ABSENSI PRINT READABILITY / ONE PAGE
   Larger readable typography while preserving A4 landscape fit.
   ========================================================= */
@media print{
  @page{
    size:A4 landscape;
    margin:3.5mm;
  }

  .ph-abs-head{
    padding:0 0 2mm!important;
  }
  .ph-abs-head h2{
    font-size:13pt!important;
    line-height:1.08!important;
    font-weight:800!important;
  }
  .ph-abs-head p{
    margin-top:1mm!important;
    font-size:8.5pt!important;
    font-weight:700!important;
  }

  .ph-attendance-report{
    width:100%!important;
    padding:0!important;
  }

  .ph-sheet-wrap{
    margin:0 0 2mm!important;
  }

  .ph-sheet{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    font-size:9.2pt!important;
  }

  .ph-sheet th,
  .ph-sheet td{
    padding:1.25mm .45mm!important;
    line-height:1.05!important;
    font-size:9.2pt!important;
    font-weight:600!important;
    white-space:nowrap!important;
  }

  .ph-sheet th{
    font-size:8.8pt!important;
    font-weight:800!important;
  }

  .ph-sheet th:first-child,
  .ph-sheet td:first-child{
    width:8.5%!important;
    font-size:9.5pt!important;
    font-weight:800!important;
  }

  .ph-report-legend-inline{
    margin:1mm 0 1.5mm!important;
    font-size:8.5pt!important;
  }
  .ph-report-legend-inline b,
  .ph-report-legend-inline span{
    min-height:5.5mm!important;
    padding:.8mm 1.5mm!important;
    font-size:8.5pt!important;
    font-weight:800!important;
  }

  .ph-signatures{
    gap:12mm!important;
    margin:2mm 4% 0!important;
    min-height:18mm!important;
  }
  .ph-signatures small{
    font-size:8.5pt!important;
    line-height:1.08!important;
  }
  .ph-signatures b{
    font-size:9pt!important;
    font-weight:800!important;
  }

  .ph-report-generated{
    margin-top:1mm!important;
    padding-top:.8mm!important;
    font-size:7.8pt!important;
    font-weight:700!important;
  }

  /* Keep the whole report together and use page width aggressively. */
  .ph-abs-page,
  .ph-attendance-report,
  .ph-sheet-wrap,
  .ph-report-legend-inline,
  .ph-signatures,
  .ph-report-generated{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
}


/* =========================================================
   V5.0.1 — HITUNG ABSENSI PRINT POLISH
   Comfortable font, table separation, footer-style signatures.
   ========================================================= */
@media print{
  @page{
    size:A4 landscape;
    margin:4mm;
  }

  html, body{
    font-family:Arial, Calibri, "Segoe UI", sans-serif!important;
  }

  .ph-abs-page,
  .ph-attendance-report,
  .ph-sheet,
  .ph-sheet th,
  .ph-sheet td,
  .ph-report-legend-inline,
  .ph-signatures,
  .ph-report-generated{
    font-family:Arial, Calibri, "Segoe UI", sans-serif!important;
  }

  /* Keep the report balanced within one landscape sheet. */
  .ph-abs-head h2{
    font-size:13pt!important;
    line-height:1.12!important;
    letter-spacing:0!important;
  }

  .ph-abs-head p{
    font-size:8.7pt!important;
    line-height:1.15!important;
  }

  .ph-attendance-report{
    position:relative!important;
    min-height:181mm!important;
    padding-bottom:35mm!important;
    box-sizing:border-box!important;
  }

  .ph-sheet{
    font-size:9.35pt!important;
  }

  .ph-sheet th,
  .ph-sheet td{
    font-size:9.35pt!important;
    line-height:1.16!important;
    padding:1.15mm .42mm!important;
    font-weight:600!important;
  }

  .ph-sheet th{
    font-size:8.9pt!important;
    font-weight:800!important;
  }

  .ph-sheet th:first-child,
  .ph-sheet td:first-child{
    font-size:9.55pt!important;
  }

  /* Small breathing room between first-half and second-half tables. */
  .ph-sheet-wrap{
    margin-bottom:0!important;
  }

  .ph-sheet-wrap + .ph-sheet-wrap{
    margin-top:3.2mm!important;
  }

  /* Compact but readable one-row legend. */
  .ph-report-legend-inline{
    margin:2.2mm 0 0!important;
    font-size:8.5pt!important;
  }

  .ph-report-legend-inline b,
  .ph-report-legend-inline span{
    min-height:5.4mm!important;
    line-height:1.1!important;
    padding:.75mm 1.3mm!important;
  }

  /* Signature block behaves like a document footer. */
  .ph-signatures{
    position:absolute!important;
    left:3.5%!important;
    right:3.5%!important;
    bottom:8.5mm!important;
    margin:0!important;
    min-height:24mm!important;
    gap:22mm!important;
    align-items:stretch!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .ph-signatures div{
    min-height:24mm!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    padding:0 2mm!important;
  }

  .ph-signatures small{
    font-size:8.7pt!important;
    line-height:1.22!important;
    font-weight:500!important;
  }

  .ph-signatures b{
    font-size:9.2pt!important;
    line-height:1.15!important;
    font-weight:700!important;
    margin-top:8mm!important;
  }

  .ph-report-generated{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:1.5mm!important;
    margin:0!important;
    padding-top:1mm!important;
    border-top:1px solid #bfc7d1!important;
    font-size:7.8pt!important;
    line-height:1.15!important;
    text-align:right!important;
  }
}


/* =========================================================
   V5.0.7 — STABLE PRINT RECOVERY
   Base: V5.0.1 print rules (known good Hitung baseline).
   Only screen geometry + Hasil compact Hari Aktif are added.
   ========================================================= */

/* SCREEN ONLY */
@media screen {
  #pertihub-root .ph-abs-page{gap:10px!important}
  #pertihub-root .ph-abs-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:10px 14px!important;
  }
  #pertihub-root .ph-abs-head h2{
    margin:0!important;
    font-family:Arial,Calibri,"Segoe UI",sans-serif!important;
    font-size:20px!important;
    line-height:1.16!important;
    letter-spacing:0!important;
  }
  #pertihub-root .ph-abs-head p{
    margin:3px 0 0!important;
    font-size:10px!important;
    line-height:1.1!important;
  }
  #pertihub-root .ph-abs-controls,
  #pertihub-root .ph-report-screen-controls{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    width:auto!important;
    white-space:nowrap!important;
  }
  #pertihub-root .ph-report-screen-controls select,
  #pertihub-root .ph-report-screen-controls button{
    width:auto!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }
  #pertihub-root .ph-attendance-report,
  #pertihub-root .ph-result-report{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  #pertihub-root .ph-sheet-wrap{width:100%!important;max-width:100%!important;overflow:visible!important}
  #pertihub-root .ph-sheet{width:100%!important;min-width:0!important;table-layout:fixed!important}
}

/* PRINT: controls are never part of the printable layout. */
@media print {
  [data-print-hide="true"],
  .ph-report-screen-controls,
  .ph-abs-controls{
    display:none!important;
  }

  /* Hasil only: make Hari Aktif numeric column compact. */
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child{
    width:56mm!important;
    min-width:56mm!important;
    max-width:56mm!important;
    table-layout:fixed!important;
  }
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child th:first-child,
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child td:first-child{width:72%!important}
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child th:last-child,
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child td:last-child{
    width:28%!important;
    text-align:center!important;
    padding-left:.8mm!important;
    padding-right:.8mm!important;
  }
}


/* =========================================================
   V5.0.8 — WRAPPED REPORT TEXT + SEARCHABLE PRINT PATH
   ========================================================= */

/* Allow report labels to wrap instead of clipping/forcing one line. */
#pertihub-root .ph-sheet th,
#pertihub-root .ph-sheet td,
#pertihub-root .ph-small-sheet th,
#pertihub-root .ph-small-sheet td{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}

/* Important labels may use two lines naturally. */
#pertihub-root .ph-sheet .grand th,
#pertihub-root .ph-sheet th[rowspan],
#pertihub-root .ph-sheet.attendance th:last-child,
#pertihub-root .ph-sheet.result th{
  white-space:normal!important;
  line-height:1.15!important;
}

@media print{
  /* Printable content remains real DOM text; no canvas/image conversion. */
  .ph-sheet th,
  .ph-sheet td,
  .ph-small-sheet th,
  .ph-small-sheet td,
  .ph-report-legend-inline b,
  .ph-report-legend-inline span,
  .ph-signatures small,
  .ph-signatures b,
  .ph-report-generated{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Date headers remain compact, but can wrap if printer metrics require it. */
  .ph-sheet.attendance thead tr:nth-child(2) th{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.08!important;
  }

  /* GRAND TOTAL can wrap to two lines rather than get cut. */
  .ph-sheet.attendance th:last-child[rowspan],
  .ph-sheet .grand th,
  .ph-sheet.result th{
    white-space:normal!important;
    overflow-wrap:normal!important;
  }
}


/* =========================================================
   V5.0.9 — HASIL ABSENSI FOOTER SIGNATURE FIX
   Keep signature block away from result tables and pin it
   to the bottom footer zone of the printed page.
   ========================================================= */
@media print {
  .ph-result-report{
    position:relative!important;
    min-height:181mm!important;
    padding-bottom:34mm!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* Keep all report tables in normal document flow. */
  .ph-result-report .ph-sheet-wrap,
  .ph-result-report .ph-result-lower{
    position:relative!important;
    z-index:1!important;
  }

  /* Reserve clear white space before footer so signatures
     can never overlap the lower summary tables. */
  .ph-result-report .ph-result-lower{
    margin-bottom:8mm!important;
  }

  /* Footer-style signatures for HASIL only. */
  .ph-result-report .ph-signatures{
    position:absolute!important;
    left:4%!important;
    right:4%!important;
    bottom:9mm!important;
    margin:0!important;
    padding:0!important;
    min-height:22mm!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18mm!important;
    align-items:stretch!important;
    z-index:2!important;
    background:#fff!important;
  }

  .ph-result-report .ph-signatures div{
    min-height:22mm!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    padding:0 2mm!important;
  }

  .ph-result-report .ph-signatures small{
    font-size:8.4pt!important;
    line-height:1.18!important;
    font-weight:500!important;
  }

  .ph-result-report .ph-signatures b{
    margin-top:7mm!important;
    font-size:8.9pt!important;
    line-height:1.15!important;
    font-weight:700!important;
  }

  /* Generated-by footer sits below signatures, not inside table area. */
  .ph-result-report .ph-report-generated{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:1.5mm!important;
    margin:0!important;
    padding-top:1mm!important;
    border-top:1px solid #bfc7d1!important;
    font-size:7.5pt!important;
    line-height:1.12!important;
    text-align:right!important;
    background:#fff!important;
    z-index:3!important;
  }
}


/* =========================================================
   V5.1.0 — HASIL FOOTER SPACE + NO BLANK PRINT TAB
   Hitung print is LOCKED and intentionally unchanged.
   ========================================================= */
@media print{
  /* Hasil only: reserve a deeper footer zone. */
  .ph-result-report{
    position:relative!important;
    min-height:181mm!important;
    padding-bottom:42mm!important;
    box-sizing:border-box!important;
  }

  .ph-result-report .ph-result-lower{
    margin-bottom:12mm!important;
  }

  .ph-result-report .ph-signatures{
    position:absolute!important;
    left:4%!important;
    right:4%!important;
    bottom:10mm!important;
    min-height:29mm!important;
    gap:20mm!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    background:#fff!important;
  }

  .ph-result-report .ph-signatures div{
    min-height:29mm!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    padding:0 3mm!important;
  }

  .ph-result-report .ph-signatures small{
    font-size:8.5pt!important;
    line-height:1.2!important;
  }

  .ph-result-report .ph-signatures b{
    margin-top:11mm!important;
    font-size:9pt!important;
    line-height:1.15!important;
  }

  .ph-result-report .ph-report-generated{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:1.5mm!important;
    margin:0!important;
    padding-top:1mm!important;
    border-top:1px solid #bfc7d1!important;
    font-size:7.5pt!important;
    line-height:1.12!important;
    background:#fff!important;
  }
}


/* =========================================================
   V5.1.1 — HASIL LOWER TABLE PROPORTION POLISH
   HITUNG ABSENSI remains LOCKED / untouched.
   Goal: lower summary tables use balanced, content-driven
   proportions instead of oversized empty numeric columns.
   ========================================================= */

/* Web */
@media screen {
  #pertihub-root .ph-result-report .ph-result-lower{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:28px!important;
  }

  /* Hari Aktif Perusahaan */
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:first-child{
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
    table-layout:fixed!important;
  }
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:first-child th:first-child,
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:first-child td:first-child{
    width:68%!important;
  }
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:first-child th:last-child,
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:first-child td:last-child{
    width:32%!important;
    text-align:center!important;
  }

  /* Target Absen / Izin */
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2){
    width:330px!important;
    min-width:330px!important;
    max-width:330px!important;
    table-layout:fixed!important;
  }
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) th:nth-child(1),
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) td:nth-child(1){
    width:46%!important;
  }
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) th:nth-child(2),
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) td:nth-child(2){
    width:36%!important;
    text-align:center!important;
  }
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) th:nth-child(3),
  #pertihub-root .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) td:nth-child(3){
    width:18%!important;
    text-align:center!important;
  }
}

/* Print / searchable PDF */
@media print {
  .ph-result-report .ph-result-lower{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:10mm!important;
  }

  .ph-result-report .ph-result-lower .ph-small-sheet:first-child{
    width:58mm!important;
    min-width:58mm!important;
    max-width:58mm!important;
    table-layout:fixed!important;
  }
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child th:first-child,
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child td:first-child{
    width:68%!important;
  }
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child th:last-child,
  .ph-result-report .ph-result-lower .ph-small-sheet:first-child td:last-child{
    width:32%!important;
    text-align:center!important;
    padding-left:1mm!important;
    padding-right:1mm!important;
  }

  .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2){
    width:64mm!important;
    min-width:64mm!important;
    max-width:64mm!important;
    table-layout:fixed!important;
  }
  .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) th:nth-child(1),
  .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) td:nth-child(1){
    width:46%!important;
  }
  .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) th:nth-child(2),
  .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) td:nth-child(2){
    width:36%!important;
    text-align:center!important;
  }
  .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) th:nth-child(3),
  .ph-result-report .ph-result-lower .ph-small-sheet:nth-child(2) td:nth-child(3){
    width:18%!important;
    text-align:center!important;
  }
}


/* =========================================================
   V5.1.2 — PREMIUM KALENDER SALES • FIT TO PAGE / NO SCROLL
   Hitung & Hasil are LOCKED and untouched.
   ========================================================= */
@media screen and (min-width:1001px){
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 78px)!important;
    min-height:620px;
    gap:10px!important;
    overflow:hidden!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head{
    flex:0 0 auto;
    padding:10px 14px!important;
    border-radius:16px!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head h2{
    font-size:18px!important;
    line-height:1.15!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head p{
    font-size:9px!important;
    margin-top:2px!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-controls{
    flex-wrap:nowrap!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-controls select{
    min-height:34px!important;
    height:34px!important;
    padding:0 10px!important;
    border-radius:11px!important;
    font-size:10px!important;
  }

  #pertihub-root .ph-calendar-fit-shell{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }

  #pertihub-root .ph-calendar-layout{
    height:100%;
    min-height:0;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:12px!important;
    align-items:stretch!important;
  }

  #pertihub-root .ph-calendar-main{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    padding:10px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  #pertihub-root .ph-cal-month-title{
    text-align:center;
    font-size:16px;
    line-height:1;
    font-weight:900;
    color:#0b2f5b;
    padding:2px 0 8px;
  }

  #pertihub-root .ph-calendar-week{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:0!important;
    margin:0!important;
    border:1px solid #d7e5f5;
    border-bottom:0;
    border-radius:12px 12px 0 0;
    overflow:hidden;
    background:#092c61;
  }

  #pertihub-root .ph-calendar-week b{
    min-height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff!important;
    font-size:9px!important;
    letter-spacing:.04em!important;
    border-right:1px solid rgba(255,255,255,.12);
  }

  #pertihub-root .ph-calendar-week b.sat{
    background:#0c5bb3;
    color:#cfe9ff!important;
  }

  #pertihub-root .ph-calendar-week b.sun{
    background:#0a3068;
    color:#ff8484!important;
  }

  #pertihub-root .ph-calendar-grid{
    min-height:0;
    height:100%;
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-template-rows:repeat(6,minmax(0,1fr))!important;
    gap:0!important;
    border-left:1px solid #d7e5f5;
    border-top:1px solid #d7e5f5;
    border-radius:0 0 12px 12px;
    overflow:hidden;
    background:#fff;
  }

  #pertihub-root .ph-cal-cell{
    min-height:0!important;
    height:auto!important;
    border:0!important;
    border-right:1px solid #d7e5f5!important;
    border-bottom:1px solid #d7e5f5!important;
    border-radius:0!important;
    padding:7px!important;
    background:#fff;
    position:relative;
    overflow:hidden!important;
    transition:background .15s ease,box-shadow .15s ease;
  }

  #pertihub-root .ph-cal-cell:hover{
    background:#f8fbff;
    box-shadow:inset 0 0 0 2px rgba(21,101,192,.08);
  }

  #pertihub-root .ph-cal-cell.blank{
    background:#fbfdff!important;
  }

  #pertihub-root .ph-cal-cell.saturday{
    background:#f8fbff;
  }

  #pertihub-root .ph-cal-cell.sunday{
    background:#fffafa;
  }

  #pertihub-root .ph-cal-cell.holiday{
    background:#fff8ee!important;
  }

  #pertihub-root .ph-cal-num{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:5px;
    margin:0 0 5px!important;
  }

  #pertihub-root .ph-cal-num b{
    font-size:14px!important;
    line-height:1!important;
    color:#081f43!important;
  }

  #pertihub-root .ph-cal-cell.saturday .ph-cal-num b{
    color:#0b5fc6!important;
  }

  #pertihub-root .ph-cal-cell.sunday .ph-cal-num b{
    color:#d92d20!important;
  }

  #pertihub-root .ph-cal-day-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    min-height:18px;
    padding:2px 7px;
    border-radius:999px;
    font-size:7px;
    line-height:1;
    font-weight:900;
    background:#f1f5f9;
    color:#64748b;
  }

  #pertihub-root .ph-cal-day-pill.sat{
    background:#e8f3ff;
    color:#1565c0;
  }

  #pertihub-root .ph-cal-day-pill.sun{
    background:#fff0f1;
    color:#dc2626;
  }

  #pertihub-root .ph-cal-holiday{
    display:inline-flex;
    max-width:100%;
    padding:4px 7px!important;
    border-radius:999px!important;
    background:#ffe9e6!important;
    color:#d92d20!important;
    font-size:7.5px!important;
    line-height:1.05!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:0 0 3px!important;
  }

  #pertihub-root .ph-cal-leave{
    padding:3px 5px!important;
    font-size:7px!important;
    line-height:1.05!important;
    margin-top:2px!important;
  }

  #pertihub-root .ph-cal-leave b,
  #pertihub-root .ph-cal-leave span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #pertihub-root .ph-cal-more{
    font-size:7px!important;
    line-height:1!important;
    margin-top:2px!important;
  }

  #pertihub-root .ph-cal-status-dot{
    position:absolute;
    left:50%;
    bottom:7px;
    transform:translateX(-50%);
    width:7px;
    height:7px;
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(255,255,255,.75);
  }

  #pertihub-root .ph-cal-status-dot.active{background:#7bdc9d}
  #pertihub-root .ph-cal-status-dot.sat{background:#72bdf8}
  #pertihub-root .ph-cal-status-dot.sun{background:#ff9da2}
  #pertihub-root .ph-cal-status-dot.inactive{background:#cbd5e1}

  #pertihub-root .ph-calendar-side{
    position:static!important;
    min-height:0;
    height:100%;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:9px!important;
    overflow:hidden!important;
  }

  #pertihub-root .ph-calendar-side section{
    padding:10px!important;
    border-radius:16px!important;
    box-shadow:0 3px 12px rgba(15,55,95,.035)!important;
  }

  #pertihub-root .ph-cal-side-card{
    min-height:0;
    overflow:hidden;
  }

  #pertihub-root .ph-cal-side-title{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:7px;
  }

  #pertihub-root .ph-cal-side-title h3{
    margin:0!important;
    font-size:13px!important;
    color:#0b2f5b!important;
  }

  #pertihub-root .ph-cal-side-icon{
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#eaf4ff;
    font-size:13px;
  }

  #pertihub-root .ph-cal-side-icon.ok{
    background:#eafbf0;
    color:#16a34a;
    font-weight:900;
  }

  #pertihub-root .ph-cal-side-scroll{
    max-height:88px;
    overflow:auto;
    scrollbar-width:thin;
  }

  #pertihub-root .ph-cal-side-scroll.leaves{
    height:100%;
    max-height:none;
  }

  #pertihub-root .ph-cal-side-row{
    padding:6px 8px!important;
    margin-bottom:4px!important;
    border-radius:9px!important;
  }

  #pertihub-root .ph-cal-side-row b{font-size:9px!important}
  #pertihub-root .ph-cal-side-row span,
  #pertihub-root .ph-cal-side-row small{font-size:8px!important}

  #pertihub-root .ph-cal-side-card.compact{
    padding-bottom:9px!important;
  }

  #pertihub-root .ph-cal-legend{
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
  }

  #pertihub-root .ph-cal-legend span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#334155;
    font-size:8px;
    font-weight:700;
  }

  #pertihub-root .ph-cal-legend i{
    width:8px;
    height:8px;
    border-radius:50%;
    flex:0 0 auto;
  }

  #pertihub-root .ph-cal-legend i.active{background:#7bdc9d}
  #pertihub-root .ph-cal-legend i.sat{background:#72bdf8}
  #pertihub-root .ph-cal-legend i.sun{background:#ff9da2}
  #pertihub-root .ph-cal-legend i.holiday{background:#ff9b4a}
  #pertihub-root .ph-cal-legend i.leave{background:#9566d6}

  #pertihub-root .ph-cal-side-card.info{
    background:#f1f7ff!important;
    border-color:#cae1ff!important;
  }

  #pertihub-root .ph-cal-side-card.info p{
    margin:0!important;
    font-size:8px!important;
    line-height:1.35!important;
    color:#37506d!important;
  }
}

/* Smaller desktop/laptop screens: keep no-scroll behavior by compressing further. */
@media screen and (min-width:1001px) and (max-height:760px){
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 66px)!important;
  }
  #pertihub-root .ph-cal-month-title{
    font-size:14px;
    padding-bottom:5px;
  }
  #pertihub-root .ph-calendar-week b{min-height:25px}
  #pertihub-root .ph-cal-cell{padding:5px!important}
  #pertihub-root .ph-cal-num b{font-size:12px!important}
  #pertihub-root .ph-cal-day-pill{
    min-height:15px;
    min-width:34px;
    font-size:6.5px;
  }
  #pertihub-root .ph-cal-status-dot{
    bottom:4px;
    width:6px;
    height:6px;
  }
  #pertihub-root .ph-calendar-side{
    gap:6px!important;
  }
  #pertihub-root .ph-calendar-side section{
    padding:7px!important;
  }
  #pertihub-root .ph-cal-side-title{
    margin-bottom:4px;
  }
  #pertihub-root .ph-cal-side-title h3{font-size:11px!important}
  #pertihub-root .ph-cal-side-scroll{max-height:58px}
  #pertihub-root .ph-cal-legend{gap:3px}
  #pertihub-root .ph-cal-legend span{font-size:7px}
  #pertihub-root .ph-cal-side-card.info p{font-size:7px!important}
}


/* =========================================================
   V5.1.3 — CALENDAR SIMPLE / HIGH-READABILITY
   Reference: classic month-grid calendar with strong numbers,
   neutral weekdays, and clearly shaded weekends.
   Hitung & Hasil remain LOCKED.
   ========================================================= */
@media screen and (min-width:1001px){

  #pertihub-root .ph-calendar-main{
    padding:10px!important;
    background:#fff!important;
  }

  #pertihub-root .ph-cal-month-title{
    font-family:Arial,Calibri,"Segoe UI",sans-serif!important;
    font-size:22px!important;
    font-weight:900!important;
    line-height:1!important;
    color:#0b1f3a!important;
    padding:4px 0 10px!important;
  }

  #pertihub-root .ph-calendar-week{
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    gap:3px!important;
    overflow:visible!important;
  }

  #pertihub-root .ph-calendar-week b{
    min-height:31px!important;
    border:0!important;
    border-radius:0!important;
    background:#1f2937!important;
    color:#fff!important;
    font-family:Arial,Calibri,"Segoe UI",sans-serif!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
  }

  #pertihub-root .ph-calendar-week b.sat,
  #pertihub-root .ph-calendar-week b.sun{
    background:#ef4444!important;
    color:#fff!important;
  }

  #pertihub-root .ph-calendar-grid{
    border:0!important;
    border-radius:0!important;
    gap:3px!important;
    background:#fff!important;
    overflow:visible!important;
  }

  #pertihub-root .ph-cal-cell{
    border:0!important;
    border-radius:0!important;
    background:#eef1f4!important;
    padding:8px 9px!important;
    box-shadow:none!important;
    transition:none!important;
  }

  #pertihub-root .ph-cal-cell:hover{
    background:#e8edf2!important;
    box-shadow:none!important;
  }

  #pertihub-root .ph-cal-cell.blank{
    background:#f8fafc!important;
    opacity:.55;
  }

  #pertihub-root .ph-cal-cell.saturday,
  #pertihub-root .ph-cal-cell.sunday{
    background:#ffd7dc!important;
  }

  #pertihub-root .ph-cal-cell.holiday{
    background:#fff0cf!important;
  }

  #pertihub-root .ph-cal-num{
    display:block!important;
    margin:0!important;
  }

  #pertihub-root .ph-cal-num b{
    display:block!important;
    font-family:Arial,Calibri,"Segoe UI",sans-serif!important;
    font-size:20px!important;
    font-weight:800!important;
    line-height:1!important;
    color:#111827!important;
    text-align:right!important;
    margin:0!important;
  }

  #pertihub-root .ph-cal-cell.saturday .ph-cal-num b,
  #pertihub-root .ph-cal-cell.sunday .ph-cal-num b{
    color:#dc2626!important;
  }

  /* Hide secondary day badge so the date number becomes the main point of interest. */
  #pertihub-root .ph-cal-day-pill{
    display:none!important;
  }

  /* Event tags remain but are more compact and lower-priority than date number. */
  #pertihub-root .ph-cal-holiday{
    display:block!important;
    max-width:100%!important;
    margin:8px 0 0!important;
    padding:4px 6px!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#c2410c!important;
    border:1px solid rgba(194,65,12,.18)!important;
    font-size:8px!important;
    font-weight:800!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #pertihub-root .ph-cal-leave{
    margin-top:4px!important;
    padding:4px 6px!important;
    border-radius:5px!important;
    background:#fff!important;
    border:1px solid #d8e2ef!important;
    font-size:7.5px!important;
    line-height:1.15!important;
  }

  #pertihub-root .ph-cal-leave b,
  #pertihub-root .ph-cal-leave span{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #pertihub-root .ph-cal-more{
    font-size:7.5px!important;
    margin-top:3px!important;
  }

  /* Remove decorative dots: clearer, simpler calendar like reference. */
  #pertihub-root .ph-cal-status-dot{
    display:none!important;
  }
}

/* Laptop compact mode: keep date numbers readable. */
@media screen and (min-width:1001px) and (max-height:760px){
  #pertihub-root .ph-cal-month-title{
    font-size:19px!important;
    padding-bottom:7px!important;
  }

  #pertihub-root .ph-calendar-week b{
    min-height:26px!important;
    font-size:9px!important;
  }

  #pertihub-root .ph-cal-cell{
    padding:6px 7px!important;
  }

  #pertihub-root .ph-cal-num b{
    font-size:17px!important;
  }

  #pertihub-root .ph-cal-holiday{
    margin-top:5px!important;
    padding:3px 5px!important;
    font-size:7px!important;
  }

  #pertihub-root .ph-cal-leave{
    padding:3px 5px!important;
    font-size:6.8px!important;
  }
}


/* =========================================================
   V5.1.4 — SATURDAY IS ACTIVE WORKDAY
   Sunday remains the weekly non-active day.
   ========================================================= */
@media screen and (min-width:1001px){
  /* Saturday header = normal working-day header. */
  #pertihub-root .ph-calendar-week b.sat{
    background:#1f2937!important;
    color:#fff!important;
  }

  /* Only Sunday uses weekend red treatment. */
  #pertihub-root .ph-calendar-week b.sun{
    background:#ef4444!important;
    color:#fff!important;
  }

  /* Saturday cell = normal active workday. */
  #pertihub-root .ph-cal-cell.saturday{
    background:#eef1f4!important;
  }

  #pertihub-root .ph-cal-cell.saturday .ph-cal-num b{
    color:#111827!important;
  }

  /* Sunday remains visually non-active. */
  #pertihub-root .ph-cal-cell.sunday{
    background:#ffd7dc!important;
  }

  #pertihub-root .ph-cal-cell.sunday .ph-cal-num b{
    color:#dc2626!important;
  }
}


/* =========================================================
   V5.1.5 — CALENDAR READABILITY + DEFAULT ALL SPV
   Premium typography; no-scroll desktop remains preserved.
   ========================================================= */
@media screen and (min-width:1001px){
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head h2{
    font-size:20px!important;
    font-weight:850!important;
    letter-spacing:-.015em!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head p{
    font-size:11px!important;
    line-height:1.35!important;
    color:#64748b!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-controls select{
    font-size:11px!important;
    font-weight:750!important;
  }

  #pertihub-root .ph-cal-month-title{
    font-size:24px!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
  }

  #pertihub-root .ph-calendar-week b{
    font-size:11px!important;
    font-weight:900!important;
  }

  #pertihub-root .ph-cal-num b{
    font-size:22px!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
  }

  #pertihub-root .ph-cal-holiday{
    font-size:9px!important;
    line-height:1.25!important;
    font-weight:800!important;
  }

  #pertihub-root .ph-cal-leave{
    font-size:8.5px!important;
    line-height:1.25!important;
  }

  #pertihub-root .ph-cal-more{
    font-size:8px!important;
  }

  #pertihub-root .ph-cal-side-title h3{
    font-size:15px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }

  #pertihub-root .ph-cal-side-row b{
    font-size:10px!important;
    line-height:1.3!important;
  }

  #pertihub-root .ph-cal-side-row span,
  #pertihub-root .ph-cal-side-row small{
    font-size:9px!important;
    line-height:1.3!important;
  }

  #pertihub-root .ph-cal-legend span{
    font-size:9px!important;
    line-height:1.25!important;
    font-weight:700!important;
  }

  #pertihub-root .ph-cal-side-card.info p{
    font-size:9px!important;
    line-height:1.45!important;
  }
}

/* Preserve readability while still fitting common laptop heights. */
@media screen and (min-width:1001px) and (max-height:760px){
  #pertihub-root .ph-cal-month-title{font-size:20px!important}
  #pertihub-root .ph-calendar-week b{font-size:10px!important}
  #pertihub-root .ph-cal-num b{font-size:18px!important}
  #pertihub-root .ph-cal-side-title h3{font-size:12px!important}
  #pertihub-root .ph-cal-side-row b{font-size:8.5px!important}
  #pertihub-root .ph-cal-side-row span,
  #pertihub-root .ph-cal-side-row small{font-size:7.8px!important}
  #pertihub-root .ph-cal-legend span{font-size:7.8px!important}
  #pertihub-root .ph-cal-side-card.info p{font-size:7.8px!important}
}


/* =========================================================
   V5.1.6 — FORCE CALENDAR ALL-SPV + READABLE TYPOGRAPHY
   Critical values duplicated with high-specificity selectors
   to avoid WordPress/theme overrides.
   ========================================================= */
@media screen and (min-width:1001px){
  html body #pertihub-root .ph-calendar-main .ph-cal-month-title{
    font-size:24px!important;
    font-weight:900!important;
    line-height:1.05!important;
  }

  html body #pertihub-root .ph-calendar-grid .ph-cal-cell .ph-cal-num b{
    font-size:22px!important;
    font-weight:800!important;
    line-height:1!important;
  }

  html body #pertihub-root .ph-calendar-week b{
    font-size:11px!important;
    font-weight:900!important;
  }

  html body #pertihub-root .ph-cal-side-title h3{
    font-size:15px!important;
    font-weight:900!important;
  }

  html body #pertihub-root .ph-cal-side-row b{
    font-size:10px!important;
  }

  html body #pertihub-root .ph-cal-side-row span,
  html body #pertihub-root .ph-cal-side-row small,
  html body #pertihub-root .ph-cal-legend span,
  html body #pertihub-root .ph-cal-side-card.info p{
    font-size:9px!important;
  }
}


/* V5.1.7 — Calendar sales-scope note */
#pertihub-root .ph-cal-scope-note{
  margin:-2px 0 7px;
  color:#64748b;
  font-size:8.5px;
  line-height:1.25;
  font-weight:700;
}


/* =========================================================
   V5.1.8 — CALLPLAN DUPLICATE HEADER REMOVED
   Keep only the application's main page title.
   ========================================================= */
#pertihub-root .ph-callplan-page.compact{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 14px 14px;
}

#pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  padding:0;
}

#pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-btn,
#pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-file-btn{
  min-height:38px;
  height:38px;
  padding:0 14px;
  border-radius:11px;
  font-size:11px;
  font-weight:800;
  margin:0;
}

#pertihub-root .ph-callplan-page.compact .ph-cp-excel-toolbar{
  margin-top:0!important;
}

#pertihub-root .ph-callplan-page.compact .ph-cp-excel-shell{
  margin-top:0!important;
}

@media(max-width:900px){
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}


/* =========================================================
   V5.1.9 — CALLPLAN ACTIONS MOVE TO TOP HEADER ROW
   Export / Sample / Import sit beside the page title,
   before global Search / Refresh.
   ========================================================= */
@media screen and (min-width:1100px){
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
    position:fixed!important;
    top:10px!important;
    right:365px!important;
    z-index:120!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
  }

  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-btn,
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-file-btn{
    min-height:38px!important;
    height:38px!important;
    padding:0 13px!important;
    margin:0!important;
    border-radius:10px!important;
    font-size:10.5px!important;
    font-weight:800!important;
    box-shadow:none!important;
  }

  /* Remove the vertical space previously reserved for the action row. */
  #pertihub-root .ph-callplan-page.compact{
    padding-top:10px!important;
  }
}

/* Medium desktop: keep them in one row without colliding with search. */
@media screen and (min-width:1100px) and (max-width:1450px){
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
    right:330px!important;
  }
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-btn,
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-file-btn{
    padding:0 10px!important;
    font-size:10px!important;
  }
}

/* Smaller widths: return to normal flow safely. */
@media screen and (max-width:1099px){
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
    position:static!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:7px!important;
    margin:0 0 2px!important;
  }
}


/* =========================================================
   V5.2.0 — CALLPLAN TOPBAR ALIGNMENT FIX
   Align Export / Sample / Import with Search / Refresh row.
   ========================================================= */
@media screen and (min-width:1100px){
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
    position:fixed!important;
    top:10px!important;
    right:405px!important;
    height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    z-index:120!important;
    margin:0!important;
    padding:0!important;
  }

  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-btn,
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-file-btn{
    height:40px!important;
    min-height:40px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 14px!important;
    margin:0!important;
    border-radius:11px!important;
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:800!important;
  }
}

/* Match the global topbar controls' vertical center on common desktop widths. */
@media screen and (min-width:1100px) and (max-width:1450px){
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
    right:385px!important;
    top:10px!important;
  }

  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-btn,
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar .ph-file-btn{
    height:40px!important;
    min-height:40px!important;
    padding:0 12px!important;
    font-size:10px!important;
  }
}

/* Smaller screens: safe normal-flow fallback. */
@media screen and (max-width:1099px){
  #pertihub-root .ph-callplan-page.compact .ph-cp-actionbar{
    position:static!important;
    height:auto!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:7px!important;
    margin:0 0 2px!important;
  }
}


/* =========================================================
   V5.2.1 — CALLPLAN ACTIONS REAL TOPBAR MOUNT
   No fixed positioning. Buttons are physically moved into
   the same flex row as Search / Refresh.
   ========================================================= */
#pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar{
  position:static!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  bottom:auto!important;
  z-index:auto!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin:0 10px 0 auto!important;
  padding:0!important;
  background:transparent!important;
  flex:0 0 auto!important;
}

#pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar .ph-btn,
#pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar .ph-file-btn{
  position:static!important;
  height:40px!important;
  min-height:40px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0 13px!important;
  border-radius:11px!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}

/* Ensure topbar title keeps left space and global Search/Refresh stays at right. */
#pertihub-root .ph-topbar .ph-page-title{
  flex:1 1 auto!important;
  min-width:0!important;
}

#pertihub-root .ph-topbar .ph-top-actions{
  flex:0 0 auto!important;
}

/* Once actionbar is mounted into topbar, no empty action-row space remains in content. */
#pertihub-root .ph-callplan-page.compact{
  padding-top:10px!important;
}

/* Medium widths: compact buttons without changing vertical alignment. */
@media screen and (min-width:1100px) and (max-width:1450px){
  #pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar{
    gap:6px!important;
    margin-right:8px!important;
  }
  #pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar .ph-btn,
  #pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar .ph-file-btn{
    padding:0 10px!important;
    font-size:10px!important;
  }
}

/* Small screens: if mounted, allow wrapping rather than clipping. */
@media screen and (max-width:1099px){
  #pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar{
    display:none!important;
  }
  #pertihub-root .ph-callplan-page .ph-cp-actionbar:not(.mounted-topbar){
    display:flex!important;
  }
}


/* =========================================================
   V5.2.2 — CALLPLAN ACTIONS INSIDE TOP-ACTIONS FLEX
   Export / Sample / Import now share the exact same parent
   and alignment context as Search / Refresh.
   ========================================================= */
#pertihub-root .ph-top-actions .ph-callplan-top-actions-marker{
  display:contents!important;
}

#pertihub-root .ph-top-actions .ph-callplan-top-actions-marker .ph-btn,
#pertihub-root .ph-top-actions .ph-callplan-top-actions-marker .ph-file-btn{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  margin:0!important;
  height:40px!important;
  min-height:40px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 13px!important;
  border-radius:11px!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
}

/* Global Search / Refresh remain in exactly the same row and height context. */
#pertihub-root .ph-top-actions{
  align-items:center!important;
  flex-wrap:nowrap!important;
}

/* Old mounted wrapper is no longer used. */
#pertihub-root .ph-topbar .ph-cp-actionbar.mounted-topbar{
  display:none!important;
}

@media screen and (max-width:1250px){
  #pertihub-root .ph-top-actions .ph-callplan-top-actions-marker .ph-btn,
  #pertihub-root .ph-top-actions .ph-callplan-top-actions-marker .ph-file-btn{
    padding:0 9px!important;
    font-size:9.5px!important;
  }
}


/* V5.2.3 — List Absensi Approval-First */
#pertihub-root .ph-abs-approval-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding:11px 14px;border:1px solid #dbeafe;border-radius:16px;background:#fff}
#pertihub-root .ph-abs-approval-summary.has-pending{border-color:#f5d28a;background:linear-gradient(135deg,#fffdf7,#fff8e7)}
#pertihub-root .ph-abs-approval-summary.clear{background:#f7fcf8;border-color:#cdeed7}
#pertihub-root .ph-abs-approval-summary>div{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:8px}
#pertihub-root .ph-abs-approval-summary small{grid-column:1/-1;color:#64748b;font-size:8px;font-weight:900;letter-spacing:.06em}
#pertihub-root .ph-abs-approval-summary b{color:#0b2f5b;font-size:24px;line-height:1}
#pertihub-root .ph-abs-approval-summary span{color:#64748b;font-size:10px;font-weight:700}
#pertihub-root .ph-abs-done{color:#16a34a!important;font-weight:900!important}
#pertihub-root .ph-abs-master-detail{grid-template-columns:250px minmax(350px,.9fr) minmax(430px,1.2fr);gap:12px}
#pertihub-root .ph-abs-tree,#pertihub-root .ph-abs-visit-list,#pertihub-root .ph-abs-inspector{border-radius:16px;padding:10px}
#pertihub-root .ph-abs-tree-sales.pending{background:#fffaf0}
#pertihub-root .ph-abs-tree-sales.pending:hover{background:#fff4d9}
#pertihub-root .ph-abs-tree-sales.pending.active{background:#fff0c2;color:#9a5a00;box-shadow:inset 3px 0 0 #f59e0b}
#pertihub-root .ph-abs-visit-list{gap:7px}
#pertihub-root .ph-abs-right-head{position:sticky;top:-10px;z-index:3;background:#fff;padding:8px 4px 10px;border-bottom:1px solid #edf2f7;margin-bottom:2px}
#pertihub-root .ph-abs-list-row{padding:9px 10px;align-items:center}
#pertihub-root .ph-abs-list-row.pending{border-color:#f2d18a;background:#fffdf8}
#pertihub-root .ph-abs-list-row.pending.active{border-color:#f59e0b;background:#fff9e9;box-shadow:0 0 0 2px rgba(245,158,11,.08)}
#pertihub-root .ph-abs-row-main{appearance:none;border:0;background:transparent;padding:0;margin:0;min-width:0;flex:1 1 auto;text-align:left;cursor:pointer;color:inherit}
#pertihub-root .ph-abs-row-main h4{font-size:13px;line-height:1.25;margin:3px 0}
#pertihub-root .ph-abs-row-main p,#pertihub-root .ph-abs-row-main small{font-size:9px}
#pertihub-root .ph-abs-list-side{min-width:112px;gap:5px}
#pertihub-root .ph-abs-inline-actions{display:flex;width:100%;gap:5px}
#pertihub-root .ph-abs-inline-actions .ph-btn{flex:1 1 0;min-height:30px!important;height:30px!important;padding:0 7px!important;border-radius:9px!important;font-size:8.5px!important;font-weight:900!important}
#pertihub-root .ph-abs-detail-btn.detail-mini{min-height:27px!important;height:27px!important;padding:0 9px!important;font-size:8.5px!important}
#pertihub-root .ph-abs-inspector{padding-bottom:74px}
#pertihub-root .ph-abs-keyfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:9px}
#pertihub-root .ph-abs-keyfacts>div{padding:8px;border:1px solid #e6eef7;border-radius:10px;background:#f8fbff;min-width:0}
#pertihub-root .ph-abs-keyfacts small{display:block;color:#64748b;font-size:7.5px;font-weight:900;margin-bottom:3px}
#pertihub-root .ph-abs-keyfacts b{display:block;color:#0b2f5b;font-size:9.5px;line-height:1.25;word-break:break-word}
#pertihub-root .ph-abs-photo img{max-height:220px}
#pertihub-root .ph-abs-detail-actions.approval-first{position:sticky;bottom:-10px;z-index:6;display:grid;grid-template-columns:1.35fr .8fr;gap:8px;margin:10px -2px 0;padding:10px 2px 2px;background:linear-gradient(to top,#fff 78%,rgba(255,255,255,.92))}
#pertihub-root .ph-abs-detail-actions.approval-first .ph-btn{min-height:42px!important;font-size:10px!important;font-weight:900!important}
#pertihub-root .ph-abs-more-fields{margin-top:10px;border-top:1px solid #edf2f7}
#pertihub-root .ph-abs-more-fields>summary{cursor:pointer;padding:10px 2px 4px;color:#1565c0;font-size:9px;font-weight:900}
#pertihub-root .ph-abs-more-fields .ph-abs-all-fields{margin-top:6px}
@media(max-width:1250px){#pertihub-root .ph-abs-master-detail{grid-template-columns:240px minmax(330px,1fr)}}


/* =========================================================
   V5.2.4 — LIST ABSENSI TRUE THREE-LANE APPROVAL UX
   Lane 1 SPV → Lane 2 salesman/visits → Lane 3 detail + JB
   ========================================================= */
#pertihub-root .ph-abs-master-detail.three-lane{
  display:grid!important;
  grid-template-columns:240px minmax(330px,.85fr) minmax(520px,1.45fr)!important;
  gap:12px!important;
  align-items:stretch!important;
  height:calc(100vh - 250px);
  min-height:540px;
}
#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-tree,
#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-sales-lane,
#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-inspector{
  min-height:0;
  height:100%;
  border:1px solid #d9e8f8;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-sizing:border-box;
}
#pertihub-root .ph-abs-spv-nav{
  height:100%;
  display:flex;
  flex-direction:column;
}
#pertihub-root .ph-abs-month-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 8px;
  padding:12px;
  background:linear-gradient(135deg,#1667d9,#2782ee);
  color:#fff;
}
#pertihub-root .ph-abs-month-card small{grid-column:1/-1;font-size:7.5px;font-weight:900;opacity:.82}
#pertihub-root .ph-abs-month-card b{font-size:11px}
#pertihub-root .ph-abs-month-card strong{font-size:11px}
#pertihub-root .ph-abs-spv-list{padding:8px;overflow:auto;min-height:0}
#pertihub-root .ph-abs-spv-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:11px 10px;
  margin-bottom:7px;
  border:1px solid #dce8f5;
  border-radius:12px;
  background:#f9fbfe;
  color:#12375e;
  text-align:left;
  cursor:pointer;
}
#pertihub-root .ph-abs-spv-btn:hover{background:#f1f7ff;border-color:#b9d8fa}
#pertihub-root .ph-abs-spv-btn.active{background:#eaf4ff;border-color:#64a9f7;box-shadow:inset 3px 0 0 #1976d2}
#pertihub-root .ph-abs-spv-btn small{display:block;font-size:7px;font-weight:900;color:#7890aa}
#pertihub-root .ph-abs-spv-btn b{display:block;font-size:10.5px;margin:2px 0}
#pertihub-root .ph-abs-spv-btn span{display:block;font-size:7.5px;color:#6a819a}
#pertihub-root .ph-abs-spv-metrics{text-align:right}
#pertihub-root .ph-abs-spv-metrics strong{display:block;font-size:11px;color:#1766c9}
#pertihub-root .ph-abs-spv-metrics em{display:block;margin-top:3px;font-style:normal;font-size:7px;font-weight:900;color:#b26700;background:#fff3cd;padding:2px 5px;border-radius:999px}

#pertihub-root .ph-abs-sales-lane{display:flex;flex-direction:column;padding:10px}
#pertihub-root .ph-abs-lane-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:2px 3px 10px;border-bottom:1px solid #edf2f7}
#pertihub-root .ph-abs-lane-head small{display:block;font-size:7.5px;font-weight:900;color:#6f8297}
#pertihub-root .ph-abs-lane-head h3{margin:2px 0 0;font-size:15px;color:#0b2f5b}
#pertihub-root .ph-abs-lane-head>strong{font-size:9px;color:#1766c9}
#pertihub-root .ph-abs-sales-scroll{flex:1;min-height:0;overflow:auto;padding:8px 2px 4px}
#pertihub-root .ph-abs-sales-group-label{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:7px 4px 5px;background:#fff}
#pertihub-root .ph-abs-sales-group-label span{font-size:9px;font-weight:900;color:#173f6b}
#pertihub-root .ph-abs-sales-group-label small{font-size:7px;color:#7b8fa5}
#pertihub-root .ph-abs-sales-visit{
  width:100%;
  display:flex;
  gap:9px;
  align-items:center;
  padding:9px;
  margin-bottom:6px;
  border:1px solid #dce8f5;
  border-radius:12px;
  background:#fff;
  color:#102f50;
  text-align:left;
  cursor:pointer;
}
#pertihub-root .ph-abs-sales-visit:hover{border-color:#94c6fb;background:#f8fbff}
#pertihub-root .ph-abs-sales-visit.active{border-color:#2984ee;background:#f2f8ff;box-shadow:0 0 0 2px rgba(41,132,238,.08)}
#pertihub-root .ph-abs-sales-visit.pending{border-color:#f1cf86;background:#fffdf8}
#pertihub-root .ph-abs-sales-avatar{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#eaf4ff;color:#1266c5;font-size:10px;font-weight:900}
#pertihub-root .ph-abs-sales-visit-main{min-width:0;flex:1}
#pertihub-root .ph-abs-sales-visit-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
#pertihub-root .ph-abs-sales-visit-top>b{font-size:9px}
#pertihub-root .ph-abs-sales-visit-main>strong{display:block;margin:4px 0 2px;font-size:10.5px;line-height:1.2;white-space:normal}
#pertihub-root .ph-abs-sales-visit-main>span{display:block;font-size:7.5px;color:#71859b}

#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-inspector{overflow:auto;padding:10px}
#pertihub-root .ph-abs-detail-view{display:flex;flex-direction:column;gap:10px}
#pertihub-root .ph-abs-media-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#pertihub-root .ph-abs-media-card{min-width:0;border:1px solid #dce8f5;border-radius:12px;background:#f9fbfe;overflow:hidden}
#pertihub-root .ph-abs-media-title{padding:7px 9px;border-bottom:1px solid #e6eef7;background:#fff;color:#294d73;font-size:8px;font-weight:900}
#pertihub-root .ph-abs-photo.premium{display:block;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;overflow:hidden}
#pertihub-root .ph-abs-photo.premium img{display:block;width:100%;height:175px;object-fit:cover;max-height:none!important}
#pertihub-root .ph-abs-photo.premium span{display:block;padding:6px 8px;font-size:7.5px;font-weight:900;color:#1469ca;background:#fff}
#pertihub-root .ph-abs-osm iframe{display:block;width:100%;height:175px;border:0;background:#eef3f7}
#pertihub-root .ph-abs-osm a{display:block;padding:6px 8px;background:#fff;font-size:7.5px;font-weight:900;color:#1469ca;text-decoration:none}
#pertihub-root .ph-abs-media-empty{height:205px;display:flex;align-items:center;justify-content:center;color:#8b9bae;font-size:8px}

#pertihub-root .ph-abs-visit-info,#pertihub-root .ph-abs-jb-card{border:1px solid #dce8f5;border-radius:12px;background:#fff;padding:10px}
#pertihub-root .ph-abs-section-title{margin-bottom:8px}
#pertihub-root .ph-abs-section-title span{font-size:10px;font-weight:900;color:#0b2f5b}
#pertihub-root .ph-abs-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#pertihub-root .ph-abs-detail-field{padding:8px;border-radius:9px;background:#f6f9fc;border:1px solid #e5edf6;min-width:0}
#pertihub-root .ph-abs-detail-field.wide{grid-column:1/-1}
#pertihub-root .ph-abs-detail-field small{display:block;margin-bottom:3px;font-size:7px;font-weight:900;color:#71869c}
#pertihub-root .ph-abs-detail-field b{display:block;font-size:9px;line-height:1.25;color:#102f50;white-space:normal;word-break:break-word}
#pertihub-root .ph-abs-decision-bar{display:grid;grid-template-columns:1.3fr .8fr;gap:8px;margin-top:9px}
#pertihub-root .ph-abs-decision-bar .ph-btn{min-height:42px!important;font-size:10px!important;font-weight:900!important}

#pertihub-root .ph-abs-jb-card{background:linear-gradient(135deg,#fbfdff,#f6faff)}
#pertihub-root .ph-abs-jb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#pertihub-root .ph-abs-jb-head small{display:block;font-size:7px;font-weight:900;color:#6d8299}
#pertihub-root .ph-abs-jb-head h4{margin:2px 0 0;font-size:11px;color:#0b2f5b}
#pertihub-root .ph-abs-jb-pill{padding:5px 9px;border-radius:999px;font-size:8px;font-weight:900}
#pertihub-root .ph-abs-jb-pill.yes{background:#dcfce7;color:#15803d}
#pertihub-root .ph-abs-jb-pill.no{background:#f1f5f9;color:#64748b}
#pertihub-root .ph-abs-jb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#pertihub-root .ph-abs-jb-grid>div{padding:8px;border-radius:9px;background:#fff;border:1px solid #e5edf6}
#pertihub-root .ph-abs-jb-grid>.wide{grid-column:1/-1}
#pertihub-root .ph-abs-jb-grid small{display:block;margin-bottom:3px;font-size:7px;font-weight:900;color:#71869c}
#pertihub-root .ph-abs-jb-grid b{display:block;font-size:9px;line-height:1.25;color:#102f50;white-space:normal;word-break:break-word}

@media(max-width:1250px){
  #pertihub-root .ph-abs-master-detail.three-lane{grid-template-columns:220px 330px minmax(460px,1fr)!important}
}


/* =========================================================
   V5.2.6 — COLLAPSED SALESMAN + REAL PHOTO HYDRATION
   ========================================================= */
#pertihub-root .ph-abs-sales-group{
  margin-bottom:7px;
  border:1px solid #dce8f5;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
#pertihub-root .ph-abs-sales-group>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  cursor:pointer;
  background:#f9fbfe;
}
#pertihub-root .ph-abs-sales-group>summary::-webkit-details-marker{display:none}
#pertihub-root .ph-abs-sales-group>summary>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}
#pertihub-root .ph-abs-sales-avatar.compact{width:31px;height:31px;flex:0 0 31px;border-radius:9px;font-size:9px}
#pertihub-root .ph-abs-sales-group>summary b{display:block;font-size:10px;color:#12375e}
#pertihub-root .ph-abs-sales-group>summary small{display:block;margin-top:2px;font-size:7.5px;color:#7a8ea4}
#pertihub-root .ph-abs-sales-group-meta{display:flex;align-items:center;gap:6px}
#pertihub-root .ph-abs-sales-group-meta em{font-style:normal;font-size:7px;font-weight:900;color:#a86200;background:#fff3cd;padding:3px 6px;border-radius:999px}
#pertihub-root .ph-abs-sales-group-meta span{font-size:11px;color:#6d8299;transition:transform .15s ease}
#pertihub-root .ph-abs-sales-group[open] .ph-abs-sales-group-meta span{transform:rotate(180deg)}
#pertihub-root .ph-abs-sales-group-visits{padding:7px;border-top:1px solid #e8eef5;background:#fff}
#pertihub-root .ph-abs-sales-group-visits .ph-abs-sales-visit:last-child{margin-bottom:0}

#pertihub-root .ph-abs-photo-stage{position:relative;background:#f4f8fc;min-height:205px}
#pertihub-root .ph-abs-photo-stage img{display:block;width:100%;height:175px;object-fit:cover;background:#edf2f7}
#pertihub-root .ph-abs-photo-stage .ph-abs-media-empty{height:175px;min-height:175px}
#pertihub-root .ph-abs-photo-open{display:block;padding:6px 8px;background:#fff;border-top:1px solid #e5edf6;color:#1469ca;font-size:7.5px;font-weight:900;text-decoration:none}

/* V5.2.7 list absensi UX */
#pertihub-root .ph-abs-page-clean{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px}
#pertihub-root .ph-abs-compact-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
#pertihub-root .ph-abs-compact-pending{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 9px;border:1px solid #dce8f5;border-radius:11px;background:#fff;color:#526a84;font-size:8px;font-weight:800}
#pertihub-root .ph-abs-compact-pending.has-pending{background:#fffaf0;border-color:#f3d18a;color:#8b5700}
#pertihub-root .ph-abs-compact-pending.clear{background:#f4fbf6;border-color:#caead4;color:#278046}
#pertihub-root .ph-abs-compact-pending b{color:#0b2f5b;font-size:13px}
#pertihub-root .ph-abs-compact-dot{width:7px;height:7px;border-radius:50%;background:#f59e0b}
#pertihub-root .ph-abs-compact-pending.clear .ph-abs-compact-dot{background:#22c55e}
#pertihub-root .ph-abs-compact-pending .ph-btn{min-height:25px!important;height:25px!important;padding:0 8px!important;border-radius:8px!important;font-size:7.5px!important;margin-left:3px}
#pertihub-root .ph-abs-compact-controls{display:flex;align-items:center;gap:7px}
#pertihub-root .ph-abs-compact-controls select,#pertihub-root .ph-abs-compact-controls .ph-btn{min-height:34px!important;height:34px!important;margin:0!important}
#pertihub-root .ph-abs-status-group{margin-bottom:8px;border:1px solid #dce8f5;border-radius:12px;overflow:hidden;background:#fff}
#pertihub-root .ph-abs-status-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;cursor:pointer;background:#f7faff;border-bottom:1px solid #e8eef5}
#pertihub-root .ph-abs-status-group>summary::-webkit-details-marker{display:none}
#pertihub-root .ph-abs-status-group.pending>summary{background:#fff9ec}
#pertihub-root .ph-abs-status-group>summary>strong{font-size:8px;color:#52708d}
#pertihub-root .ph-abs-status-sales{padding:7px}
#pertihub-root .ph-abs-inspector-head.store-first h3{font-size:18px!important;line-height:1.15!important;margin:3px 0 4px!important;color:#082e5c!important}
#pertihub-root .ph-abs-inspector-head.store-first small{font-size:7px!important;color:#7b8fa5!important}
#pertihub-root .ph-abs-inspector-head.store-first p{font-size:8px!important;color:#607993!important}
#pertihub-root .ph-abs-media-grid{grid-template-columns:1fr 1fr!important;align-items:start!important}
#pertihub-root .ph-abs-media-card{height:190px!important;min-height:190px!important;max-height:190px!important;display:flex;flex-direction:column}
#pertihub-root .ph-abs-media-title{flex:0 0 auto}
#pertihub-root .ph-abs-photo-stage,#pertihub-root .ph-abs-osm{flex:1 1 auto;min-height:0!important;height:auto!important;overflow:hidden;background:#eef3f7}
#pertihub-root .ph-abs-photo-stage img,#pertihub-root .ph-abs-osm iframe{width:100%!important;height:138px!important;max-height:138px!important;object-fit:cover}
#pertihub-root .ph-abs-photo-stage .ph-abs-media-empty{height:138px!important;min-height:138px!important}
#pertihub-root .ph-abs-photo-open,#pertihub-root .ph-abs-osm a{height:26px!important;min-height:26px!important;box-sizing:border-box;display:flex!important;align-items:center;padding:0 8px!important}
#pertihub-root #ph-abs-photo-img{cursor:zoom-in}
.ph-abs-photo-lightbox{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;background:rgba(4,14,28,.92);backdrop-filter:blur(4px)}
.ph-abs-photo-lightbox-bar{height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff}
.ph-abs-photo-lightbox-bar button{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;cursor:pointer}
.ph-abs-photo-lightbox-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.ph-abs-photo-lightbox-stage img{max-width:95vw;max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,.4)}
#pertihub-root .ph-abs-master-detail.three-lane{height:calc(100vh - 160px)!important;min-height:570px!important}


/* =========================================================
   V5.2.9 — LIST ABSENSI FINAL UX
   Compact single header • adjustable columns •
   Status > Sales > Hari > Tanggal > Kunjungan
   ========================================================= */

/* Topbar: title + pending + month/export + search/refresh, one row */
#pertihub-root .ph-top-actions .ph-abs-topbar-marker{display:contents!important}
#pertihub-root .ph-top-actions .ph-abs-compact-pending{
  flex:0 0 auto!important;
  min-height:36px!important;height:36px!important;
  padding:0 9px!important;margin:0!important;
}
#pertihub-root .ph-top-actions .ph-abs-compact-controls{
  display:flex!important;align-items:center!important;gap:7px!important;
  flex:0 0 auto!important;
}
#pertihub-root .ph-top-actions .ph-abs-compact-controls select,
#pertihub-root .ph-top-actions .ph-abs-compact-controls .ph-btn{
  height:40px!important;min-height:40px!important;margin:0!important;
  padding:0 12px!important;border-radius:11px!important;
  font-size:10px!important;
}
#pertihub-root .ph-abs-page-clean{padding-top:8px!important}

/* Adjustable true 3-lane grid */
#pertihub-root .ph-abs-master-detail.three-lane{
  --abs-left:240px;
  --abs-mid:360px;
  display:grid!important;
  grid-template-columns:var(--abs-left) 6px var(--abs-mid) 6px minmax(420px,1fr)!important;
  gap:0!important;
  height:calc(100vh - 88px)!important;
  min-height:590px!important;
  align-items:stretch!important;
}
#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-tree,
#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-sales-lane,
#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-inspector{
  margin:0 4px!important;
}
#pertihub-root .ph-abs-resizer{
  position:relative;
  cursor:col-resize;
  background:transparent;
  touch-action:none;
}
#pertihub-root .ph-abs-resizer::after{
  content:"";
  position:absolute;
  top:8px;bottom:8px;left:2px;
  width:2px;border-radius:999px;
  background:#d8e5f2;
  transition:background .15s,width .15s;
}
#pertihub-root .ph-abs-resizer:hover::after{
  width:3px;background:#4e9cf2;
}

/* Hierarchy day/date */
#pertihub-root .ph-abs-day-group,
#pertihub-root .ph-abs-date-group{
  margin-top:5px;
  border:1px solid #e5edf6;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
}
#pertihub-root .ph-abs-day-group>summary,
#pertihub-root .ph-abs-date-group>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
}
#pertihub-root .ph-abs-day-group>summary::-webkit-details-marker,
#pertihub-root .ph-abs-date-group>summary::-webkit-details-marker{display:none}
#pertihub-root .ph-abs-day-group>summary{
  padding:7px 8px;
  background:#f1f7ff;
  color:#185d9f;
  font-size:8px;
  font-weight:900;
}
#pertihub-root .ph-abs-date-group>summary{
  padding:6px 8px;
  background:#fafcff;
  color:#435f7b;
  font-size:7.5px;
  font-weight:850;
}
#pertihub-root .ph-abs-day-group>summary strong,
#pertihub-root .ph-abs-date-group>summary strong{
  font-size:7px;
  color:#71869b;
}
#pertihub-root .ph-abs-day-dates{padding:5px}
#pertihub-root .ph-abs-date-visits{padding:5px;border-top:1px solid #edf2f7}

/* Compact media canvas further */
#pertihub-root .ph-abs-media-card{
  height:168px!important;
  min-height:168px!important;
  max-height:168px!important;
}
#pertihub-root .ph-abs-photo-stage img,
#pertihub-root .ph-abs-osm iframe{
  height:116px!important;
  max-height:116px!important;
}
#pertihub-root .ph-abs-photo-stage .ph-abs-media-empty{
  height:116px!important;
  min-height:116px!important;
}
#pertihub-root .ph-abs-photo-open,
#pertihub-root .ph-abs-osm a{
  height:25px!important;min-height:25px!important;
}

/* Small desktop fallback */
@media(max-width:1250px){
  #pertihub-root .ph-abs-master-detail.three-lane{
    --abs-left:205px;
    --abs-mid:300px;
    grid-template-columns:var(--abs-left) 5px var(--abs-mid) 5px minmax(390px,1fr)!important;
  }
  #pertihub-root .ph-top-actions .ph-abs-compact-pending span:not(.ph-abs-compact-dot){display:none}
}


/* =========================================================
   V5.3.0 — QUICK APPROVE / REJECT IN HEADER
   Selected pending visit can be decided from topbar.
   ========================================================= */
#pertihub-root .ph-top-actions .ph-abs-topbar-decision{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
}
#pertihub-root .ph-top-actions .ph-abs-topbar-decision .ph-btn{
  height:36px!important;
  min-height:36px!important;
  padding:0 11px!important;
  margin:0!important;
  border-radius:10px!important;
  font-size:8.5px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
#pertihub-root .ph-top-actions .ph-abs-topbar-decision .ph-btn.success{
  box-shadow:0 2px 6px rgba(22,163,74,.12);
}
#pertihub-root .ph-top-actions .ph-abs-topbar-decision .ph-btn.danger{
  box-shadow:0 2px 6px rgba(220,38,38,.10);
}

/* Keep header compact on medium screens. */
@media(max-width:1380px){
  #pertihub-root .ph-top-actions .ph-abs-topbar-decision .ph-btn{
    padding:0 8px!important;
    font-size:8px!important;
  }
}
@media(max-width:1180px){
  #pertihub-root .ph-top-actions .ph-abs-topbar-decision{
    display:none!important;
  }
}


/* =========================================================
   V5.3.1 — DETAIL CARD HEADER QUICK DECISION
   Approval controls belong to selected visit header, not page header.
   ========================================================= */
#pertihub-root .ph-abs-inspector-head.store-first{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
}
#pertihub-root .ph-abs-store-head-main{
  flex:1 1 auto;
  min-width:0;
}
#pertihub-root .ph-abs-store-head-actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
#pertihub-root .ph-abs-header-decision{
  display:flex;
  align-items:center;
  gap:5px;
}
#pertihub-root .ph-abs-header-decision .ph-btn{
  height:30px!important;
  min-height:30px!important;
  padding:0 9px!important;
  margin:0!important;
  border-radius:8px!important;
  font-size:7.5px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

/* Old page-header quick decision no longer used. */
#pertihub-root .ph-top-actions .ph-abs-topbar-decision{
  display:none!important;
}


/* =========================================================
   V5.3.2 — MIDDLE DATE READABILITY + EDIT APPROVAL
   ========================================================= */
#pertihub-root .ph-abs-date-group>summary{
  min-height:36px!important;
  padding:7px 10px!important;
  background:#fff!important;
  border-radius:8px!important;
}
#pertihub-root .ph-abs-date-group>summary span{
  font-size:11.5px!important;
  line-height:1.15!important;
  font-weight:900!important;
  color:#173f6b!important;
  letter-spacing:-.01em!important;
}
#pertihub-root .ph-abs-date-group>summary strong{
  min-width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#edf5ff;
  color:#1766c9!important;
  font-size:8.5px!important;
  font-weight:900!important;
}
#pertihub-root .ph-abs-day-group>summary{
  min-height:34px!important;
  padding:7px 10px!important;
}
#pertihub-root .ph-abs-day-group>summary span{
  font-size:10px!important;
  font-weight:900!important;
}
#pertihub-root .ph-abs-day-group>summary strong{
  font-size:8.5px!important;
}

/* Header decision buttons remain readable when editing an existing decision. */
#pertihub-root .ph-abs-header-decision .ph-btn{
  min-width:92px;
  padding-left:10px!important;
  padding-right:10px!important;
}


/* =========================================================
   V5.3.3 — CALLPLAN MONTH-AWARE VIEW
   ========================================================= */
#pertihub-root .ph-top-actions .ph-callplan-top-actions-marker .ph-cp-month-select{
  height:40px!important;
  min-height:40px!important;
  min-width:132px;
  padding:0 10px!important;
  border:1px solid #cfe0f3;
  border-radius:11px;
  background:#fff;
  color:#102f50;
  font-size:10px;
  font-weight:800;
}


/* =========================================================
   V5.3.4 — CALLPLAN IMPORT PICKER CLEANUP
   Native file input is fully hidden; only Import CSV button is visible.
   ========================================================= */
#pertihub-root #ph-cp-import{
  display:none!important;
  width:0!important;
  height:0!important;
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
#pertihub-root #ph-cp-import-btn{
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 14px!important;
  border-radius:11px!important;
  font-size:10px!important;
  font-weight:900!important;
}


/* =========================================================
   V5.3.5 — CALLPLAN TOPBAR DUPLICATE GUARD
   ========================================================= */
#pertihub-root .ph-topbar .ph-top-actions > .ph-callplan-top-actions-marker{
  display:contents!important;
}
/* Transitional hard guard: only the last Callplan marker may render. */
#pertihub-root .ph-topbar .ph-top-actions > .ph-callplan-top-actions-marker:not(:last-of-type){
  display:none!important;
}


/* =========================================================
   V5.3.6 — USER / SALESMAN INFORMATIVE TABLE
   ========================================================= */
#pertihub-root .ph-user-head-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
#pertihub-root .ph-user-count{
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:7px 10px;
  border:1px solid #dce8f5;
  border-radius:10px;
  background:#f8fbff;
}
#pertihub-root .ph-user-count b{font-size:13px;color:#0b2f5b}
#pertihub-root .ph-user-count span{font-size:8px;font-weight:800;color:#6b8198}

#pertihub-root .ph-user-table-shell{
  border:1px solid #d8e6f4;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
#pertihub-root .ph-user-table-wrap{
  overflow:auto;
  max-height:calc(100vh - 190px);
}
#pertihub-root .ph-user-table{
  width:100%;
  min-width:1180px;
  border-collapse:separate;
  border-spacing:0;
  font-size:9px;
}
#pertihub-root .ph-user-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  padding:10px 9px;
  background:#1378b8;
  color:#fff;
  font-size:8px;
  font-weight:900;
  text-align:left;
  white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.16);
}
#pertihub-root .ph-user-table tbody td{
  padding:9px;
  border-bottom:1px solid #e4edf6;
  border-right:1px solid #e4edf6;
  vertical-align:middle;
  color:#173b61;
  background:#fff;
}
#pertihub-root .ph-user-table tbody tr:nth-child(even) td{background:#f8fbfe}
#pertihub-root .ph-user-table tbody tr:hover td{background:#eef7ff}
#pertihub-root .ph-user-table .rownum,
#pertihub-root .ph-user-table .center{text-align:center}
#pertihub-root .ph-user-table td.name b,
#pertihub-root .ph-user-table td.login b{
  display:block;
  font-size:9.5px;
  color:#082e5c;
  line-height:1.25;
}
#pertihub-root .ph-user-table td.name small,
#pertihub-root .ph-user-table td.login small{
  display:block;
  margin-top:2px;
  font-size:7.5px;
  color:#7a8fa5;
}
#pertihub-root .ph-user-group{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
}
#pertihub-root .ph-user-group.official{background:#e8f3ff;color:#1766c9}
#pertihub-root .ph-user-group.customer{background:#f4ecff;color:#7342bd}

#pertihub-root .ph-user-table th.action,
#pertihub-root .ph-user-table td.action{
  position:sticky;
  right:0;
  z-index:2;
  background:#fff;
  min-width:178px;
}
#pertihub-root .ph-user-table thead th.action{
  z-index:4;
  background:#1378b8;
}
#pertihub-root .ph-user-table tbody tr:nth-child(even) td.action{background:#f8fbfe}
#pertihub-root .ph-user-table tbody tr:hover td.action{background:#eef7ff}

#pertihub-root .ph-user-actions{
  display:flex;
  align-items:center;
  gap:5px;
}
#pertihub-root .ph-user-actions .ph-btn{
  height:29px!important;
  min-height:29px!important;
  padding:0 8px!important;
  margin:0!important;
  border-radius:8px!important;
  font-size:7.5px!important;
  font-weight:900!important;
  white-space:nowrap;
}
#pertihub-root .ph-user-actions .ph-btn:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}


/* =========================================================
   V5.3.7 — USER TABLE READABILITY + DETAIL DEVICE MODAL
   ========================================================= */
#pertihub-root .ph-user-page-clean{
  padding:10px 14px 14px;
}
#pertihub-root .ph-user-table-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
#pertihub-root .ph-user-table-topline>div{
  display:flex;align-items:baseline;gap:5px;
}
#pertihub-root .ph-user-table-topline b{
  font-size:15px;color:#0b2f5b;
}
#pertihub-root .ph-user-table-topline span,
#pertihub-root .ph-user-table-topline small{
  font-size:9px;font-weight:800;color:#6c8298;
}
#pertihub-root .ph-user-table{
  font-size:10px!important;
}
#pertihub-root .ph-user-table thead th{
  padding:10px 9px!important;
  font-size:9px!important;
  line-height:1.15!important;
}
#pertihub-root .ph-user-table tbody td{
  padding:10px 9px!important;
  font-size:10px!important;
  line-height:1.3!important;
}
#pertihub-root .ph-user-table td.name b,
#pertihub-root .ph-user-table td.login b{
  font-size:10.5px!important;
  line-height:1.3!important;
}
#pertihub-root .ph-user-table td.name small,
#pertihub-root .ph-user-table td.login small{
  margin-top:3px!important;
  font-size:8px!important;
  line-height:1.25!important;
}
#pertihub-root .ph-user-group{
  font-size:7.5px!important;
  padding:4px 7px!important;
}
#pertihub-root .ph-user-actions{
  gap:4px!important;
}
#pertihub-root .ph-user-actions .ph-btn{
  height:31px!important;
  min-height:31px!important;
  padding:0 8px!important;
  font-size:8px!important;
}
#pertihub-root .ph-user-table th.action,
#pertihub-root .ph-user-table td.action{
  min-width:205px!important;
}

/* Detail drawer/modal */
.ph-user-detail-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  justify-content:flex-end;
  background:rgba(5,18,34,.34);
  backdrop-filter:blur(2px);
}
.ph-user-detail-panel{
  width:min(760px,92vw);
  height:100vh;
  display:flex;
  flex-direction:column;
  background:#f7faff;
  box-shadow:-18px 0 48px rgba(11,47,91,.18);
}
.ph-user-detail-head{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 14px;
  background:#fff;
  border-bottom:1px solid #dce8f5;
}
.ph-user-detail-head small{
  display:block;
  font-size:8px;
  font-weight:900;
  color:#6f849a;
  letter-spacing:.06em;
}
.ph-user-detail-head h3{
  margin:3px 0;
  font-size:21px;
  line-height:1.15;
  color:#082e5c;
}
.ph-user-detail-head p{
  margin:0;
  font-size:10px;
  color:#698097;
}
.ph-user-detail-close{
  width:36px;height:36px;
  border:1px solid #dce8f5;
  border-radius:10px;
  background:#fff;
  color:#4f6780;
  font-size:24px;
  cursor:pointer;
}
.ph-user-detail-body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:14px 16px 28px;
}
.ph-user-detail-body section{
  margin-bottom:12px;
  padding:12px;
  border:1px solid #dce8f5;
  border-radius:14px;
  background:#fff;
}
.ph-user-detail-body section>h4,
.ph-user-section-head h4{
  margin:0 0 10px;
  font-size:12px;
  color:#0b2f5b;
}
.ph-user-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ph-user-section-head span{
  font-size:8px;
  font-weight:900;
  color:#1766c9;
  background:#eef6ff;
  padding:4px 7px;
  border-radius:999px;
}
.ph-user-detail-grid,
.ph-device-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.ph-user-detail-field{
  min-width:0;
  padding:9px;
  border:1px solid #e5edf6;
  border-radius:10px;
  background:#f8fbfe;
}
.ph-user-detail-field small{
  display:block;
  margin-bottom:3px;
  font-size:7.5px;
  font-weight:900;
  color:#75899e;
}
.ph-user-detail-field b{
  display:block;
  font-size:9.5px;
  line-height:1.35;
  color:#12385f;
  word-break:break-word;
}
.ph-device-card{
  margin-top:8px;
  border:1px solid #dce8f5;
  border-radius:12px;
  overflow:hidden;
}
.ph-device-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  background:#f1f7ff;
}
.ph-device-card-head small{
  display:block;
  font-size:7px;
  font-weight:900;
  color:#7890aa;
}
.ph-device-card-head h4{
  margin:2px 0 0;
  font-size:11px;
  color:#0b2f5b;
}
.ph-device-grid{
  padding:9px;
}
.ph-session-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ph-session-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
  gap:6px;
  padding:8px;
  border:1px solid #e5edf6;
  border-radius:10px;
  background:#f9fbfe;
}
.ph-session-row>div{
  min-width:0;
}
.ph-session-row small{
  display:block;
  margin-bottom:2px;
  font-size:7px;
  font-weight:900;
  color:#7b8fa4;
}
.ph-session-row b{
  display:block;
  font-size:8px;
  line-height:1.3;
  color:#173b61;
  word-break:break-word;
}
.ph-user-detail-empty{
  padding:18px;
  text-align:center;
  color:#8295a8;
  font-size:9px;
}
@media(max-width:850px){
  .ph-user-detail-grid,.ph-device-grid{grid-template-columns:1fr}
  .ph-session-row{grid-template-columns:1fr 1fr}
}


/* =========================================================
   V5.3.8 — USER SERVER PAGINATION + OFFICIAL/PELANGGAN FILTER
   ========================================================= */
#pertihub-root .ph-user-summary{
  display:flex!important;
  align-items:baseline!important;
  gap:6px!important;
}
#pertihub-root .ph-user-summary small{
  margin-left:4px;
  font-size:8px!important;
  color:#7b8fa5!important;
}
#pertihub-root .ph-user-filterbar{
  display:flex;
  align-items:center;
  gap:7px;
}
#pertihub-root .ph-user-filterbar select{
  height:36px;
  min-height:36px;
  min-width:150px;
  padding:0 10px;
  border:1px solid #cfe0f3;
  border-radius:10px;
  background:#fff;
  color:#12385f;
  font-size:9px;
  font-weight:850;
}
#pertihub-root .ph-user-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 2px 0;
}
#pertihub-root .ph-user-pagination>div:first-child{
  display:flex;
  align-items:baseline;
  gap:5px;
  color:#6b8198;
}
#pertihub-root .ph-user-pagination span{
  font-size:8px;
  font-weight:800;
}
#pertihub-root .ph-user-pagination b{
  font-size:10px;
  color:#0b2f5b;
}
#pertihub-root .ph-user-page-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
#pertihub-root .ph-user-page-actions .ph-btn{
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:9px!important;
  font-size:8px!important;
  font-weight:900!important;
}
#pertihub-root .ph-user-page-actions .ph-btn:disabled{
  opacity:.4!important;
  cursor:not-allowed!important;
}


/* =========================================================
   V5.4.0 — PROFESSIONAL APPROVAL DIALOG
   Replaces browser confirm / alert / prompt on List Absensi.
   ========================================================= */
.ph-pro-dialog{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(8,24,43,.42);
  backdrop-filter:blur(3px);
}
.ph-pro-dialog-card{
  width:min(460px,calc(100vw - 32px));
  border:1px solid rgba(211,225,239,.95);
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 70px rgba(8,35,66,.22);
  overflow:hidden;
  animation:phDialogIn .14s ease-out;
}
@keyframes phDialogIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}
.ph-pro-dialog-icon{
  width:42px;
  height:42px;
  margin:18px 18px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  font-size:20px;
  font-weight:950;
}
.ph-pro-dialog-icon.info{background:#eaf4ff;color:#1766c9}
.ph-pro-dialog-icon.success{background:#e8f8ee;color:#15803d}
.ph-pro-dialog-icon.warning{background:#fff4d7;color:#a65d00}
.ph-pro-dialog-icon.error{background:#ffe9e9;color:#c62828}
.ph-pro-dialog-content{
  padding:12px 18px 16px;
}
.ph-pro-dialog-content h3{
  margin:0 0 7px;
  color:#0b2f5b;
  font-size:17px;
  line-height:1.2;
  font-weight:900;
}
.ph-pro-dialog-content p{
  margin:0;
  color:#60788f;
  font-size:10.5px;
  line-height:1.55;
  font-weight:600;
}
.ph-pro-dialog-field{
  display:block;
  margin-top:14px;
}
.ph-pro-dialog-field span{
  display:block;
  margin-bottom:6px;
  color:#385673;
  font-size:9px;
  font-weight:900;
}
.ph-pro-dialog-field textarea{
  width:100%;
  resize:vertical;
  min-height:78px;
  box-sizing:border-box;
  padding:10px 11px;
  border:1px solid #cfddec;
  border-radius:11px;
  background:#fbfdff;
  color:#14385e;
  outline:none;
  font:inherit;
  font-size:10px;
  line-height:1.45;
}
.ph-pro-dialog-field textarea:focus{
  border-color:#4f9df3;
  box-shadow:0 0 0 3px rgba(79,157,243,.11);
}
.ph-pro-dialog-field.error textarea{
  border-color:#e65353;
  box-shadow:0 0 0 3px rgba(230,83,83,.09);
}
.ph-pro-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:12px 18px 16px;
  border-top:1px solid #edf2f7;
  background:#fbfdff;
}
.ph-pro-dialog-actions .ph-btn{
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0 15px!important;
  border-radius:10px!important;
  font-size:9px!important;
  font-weight:900!important;
}


/* =========================================================
   V5.4.1 — LIST ABSENSI HUMAN-READABLE TYPOGRAPHY
   Increase practical readability without bloating the layout.
   ========================================================= */

/* Page/topbar controls */
#pertihub-root .ph-topbar .ph-page-title h1,
#pertihub-root .ph-topbar h1{
  font-size:25px!important;
  line-height:1.12!important;
  letter-spacing:-.02em!important;
}
#pertihub-root .ph-topbar .ph-page-title p,
#pertihub-root .ph-topbar p{
  font-size:11px!important;
  line-height:1.3!important;
}
#pertihub-root .ph-top-actions input,
#pertihub-root .ph-top-actions select,
#pertihub-root .ph-top-actions .ph-btn{
  font-size:11px!important;
}

/* Compact pending info */
#pertihub-root .ph-abs-compact-pending{
  font-size:10px!important;
}
#pertihub-root .ph-abs-compact-pending b{
  font-size:15px!important;
}
#pertihub-root .ph-abs-compact-pending .ph-btn{
  font-size:9px!important;
}

/* Lane 1: month + SPV cards */
#pertihub-root .ph-abs-month-card small{
  font-size:9px!important;
}
#pertihub-root .ph-abs-month-card b,
#pertihub-root .ph-abs-month-card strong{
  font-size:13px!important;
}
#pertihub-root .ph-abs-spv-btn small{
  font-size:8.5px!important;
}
#pertihub-root .ph-abs-spv-btn b{
  font-size:12px!important;
  line-height:1.25!important;
}
#pertihub-root .ph-abs-spv-btn span{
  font-size:9px!important;
}
#pertihub-root .ph-abs-spv-metrics strong{
  font-size:12px!important;
}
#pertihub-root .ph-abs-spv-metrics em{
  font-size:8px!important;
}

/* Lane 2 header */
#pertihub-root .ph-abs-lane-head small{
  font-size:9px!important;
}
#pertihub-root .ph-abs-lane-head h3{
  font-size:17px!important;
  line-height:1.2!important;
}
#pertihub-root .ph-abs-lane-head>strong{
  font-size:10.5px!important;
}

/* Status hierarchy */
#pertihub-root .ph-abs-status-group>summary>strong{
  font-size:10px!important;
}
#pertihub-root .ph-badge{
  font-size:10px!important;
  line-height:1!important;
  padding:7px 10px!important;
}

/* Salesman hierarchy */
#pertihub-root .ph-abs-sales-group>summary{
  padding:11px 12px!important;
}
#pertihub-root .ph-abs-sales-group>summary b{
  font-size:12px!important;
  line-height:1.2!important;
}
#pertihub-root .ph-abs-sales-group>summary small{
  font-size:9px!important;
  line-height:1.25!important;
}
#pertihub-root .ph-abs-sales-avatar.compact{
  font-size:10px!important;
}

/* Day/date hierarchy */
#pertihub-root .ph-abs-day-group>summary{
  min-height:38px!important;
}
#pertihub-root .ph-abs-day-group>summary span{
  font-size:11.5px!important;
}
#pertihub-root .ph-abs-day-group>summary strong{
  font-size:10px!important;
}
#pertihub-root .ph-abs-date-group>summary{
  min-height:40px!important;
  padding:8px 11px!important;
}
#pertihub-root .ph-abs-date-group>summary span{
  font-size:13px!important;
  line-height:1.2!important;
}
#pertihub-root .ph-abs-date-group>summary strong{
  font-size:10px!important;
}

/* Individual visit cards */
#pertihub-root .ph-abs-sales-visit{
  padding:10px 11px!important;
}
#pertihub-root .ph-abs-sales-visit-main>strong{
  font-size:12px!important;
  line-height:1.3!important;
}
#pertihub-root .ph-abs-sales-visit-main>span{
  margin-top:3px!important;
  font-size:9.5px!important;
  line-height:1.3!important;
}

/* Lane 3: store-first header */
#pertihub-root .ph-abs-inspector-head.store-first small{
  font-size:9px!important;
}
#pertihub-root .ph-abs-inspector-head.store-first h3{
  font-size:20px!important;
  line-height:1.18!important;
}
#pertihub-root .ph-abs-inspector-head.store-first p{
  font-size:10px!important;
  line-height:1.35!important;
}

/* Header approve/reject */
#pertihub-root .ph-abs-header-decision .ph-btn{
  height:34px!important;
  min-height:34px!important;
  font-size:9.5px!important;
  padding:0 11px!important;
}

/* Photo / Map labels */
#pertihub-root .ph-abs-media-title{
  font-size:9.5px!important;
  line-height:1.25!important;
}
#pertihub-root .ph-abs-photo-open,
#pertihub-root .ph-abs-osm a{
  font-size:9px!important;
  font-weight:900!important;
}

/* Detail Visit */
#pertihub-root .ph-abs-section-title span{
  font-size:12px!important;
}
#pertihub-root .ph-abs-detail-field{
  padding:10px!important;
}
#pertihub-root .ph-abs-detail-field small{
  font-size:8.5px!important;
  line-height:1.25!important;
}
#pertihub-root .ph-abs-detail-field b{
  font-size:10.5px!important;
  line-height:1.35!important;
}

/* Janji Bayar */
#pertihub-root .ph-abs-jb-head small{
  font-size:8.5px!important;
}
#pertihub-root .ph-abs-jb-head h4{
  font-size:12px!important;
}
#pertihub-root .ph-abs-jb-pill{
  font-size:9px!important;
}
#pertihub-root .ph-abs-jb-grid small{
  font-size:8.5px!important;
}
#pertihub-root .ph-abs-jb-grid b{
  font-size:10.5px!important;
  line-height:1.35!important;
}

/* Keep dense layout usable after font enlargement */
#pertihub-root .ph-abs-master-detail.three-lane{
  min-height:600px!important;
}
#pertihub-root .ph-abs-sales-scroll,
#pertihub-root .ph-abs-inspector,
#pertihub-root .ph-abs-spv-list{
  scrollbar-width:thin;
}

/* Medium desktops: readable but still fit three columns */
@media(max-width:1366px){
  #pertihub-root .ph-abs-spv-btn b{font-size:11.5px!important}
  #pertihub-root .ph-abs-sales-group>summary b{font-size:11.5px!important}
  #pertihub-root .ph-abs-date-group>summary span{font-size:12.5px!important}
  #pertihub-root .ph-abs-sales-visit-main>strong{font-size:11.5px!important}
  #pertihub-root .ph-abs-inspector-head.store-first h3{font-size:19px!important}
  #pertihub-root .ph-abs-detail-field b{font-size:10px!important}
}


/* =========================================================
   V5.4.2 — MANUAL ABSENSI ADMIN PAGE
   ========================================================= */
#pertihub-root .ph-manual-page{padding:12px 16px 24px;max-width:1180px;margin:0 auto}
#pertihub-root .ph-manual-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;margin-bottom:12px;border:1px solid #d8e7f6;border-radius:16px;background:linear-gradient(135deg,#fff,#f5f9ff)}
#pertihub-root .ph-manual-intro>div{display:flex;align-items:center;gap:12px}
#pertihub-root .ph-manual-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#eaf4ff;font-size:20px}
#pertihub-root .ph-manual-intro h2{margin:0 0 4px;font-size:20px;color:#082e5c}
#pertihub-root .ph-manual-intro p{margin:0;max-width:690px;font-size:10.5px;line-height:1.5;color:#617a91}
#pertihub-root .ph-manual-audit-badge{padding:7px 10px;border-radius:999px;background:#fff4d7;color:#9d5a00;font-size:8.5px;font-weight:900;white-space:nowrap}
#pertihub-root .ph-manual-grid{display:flex;flex-direction:column;gap:10px}
#pertihub-root .ph-manual-card{padding:14px;border:1px solid #dbe8f5;border-radius:15px;background:#fff}
#pertihub-root .ph-manual-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
#pertihub-root .ph-manual-section-head b{font-size:12.5px;color:#0b2f5b}
#pertihub-root .ph-manual-section-head span{font-size:8px;font-weight:900;color:#6c8298}
#pertihub-root .ph-manual-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#pertihub-root .ph-manual-form-grid label,#pertihub-root .ph-man-reason{display:flex;flex-direction:column;gap:5px;min-width:0}
#pertihub-root .ph-manual-form-grid label.wide{grid-column:1/-1}
#pertihub-root .ph-manual-form-grid label>span,#pertihub-root .ph-man-reason>span{font-size:9px;font-weight:900;color:#3e5d7b}
#pertihub-root .ph-manual-form-grid input,#pertihub-root .ph-manual-form-grid select,#pertihub-root .ph-manual-form-grid textarea,#pertihub-root .ph-man-reason textarea{width:100%;box-sizing:border-box;border:1px solid #cfdeed;border-radius:10px;background:#fbfdff;color:#14385e;padding:10px 11px;font-size:10.5px;line-height:1.4;outline:none}
#pertihub-root .ph-manual-form-grid input,#pertihub-root .ph-manual-form-grid select{height:40px}
#pertihub-root .ph-manual-form-grid input:focus,#pertihub-root .ph-manual-form-grid select:focus,#pertihub-root .ph-manual-form-grid textarea:focus,#pertihub-root .ph-man-reason textarea:focus{border-color:#5aa2ef;box-shadow:0 0 0 3px rgba(90,162,239,.10)}
#pertihub-root .ph-manual-form-grid input[readonly]{background:#f2f6fa;color:#59738d}
#pertihub-root .ph-manual-photo-zone{border:1.5px dashed #b9d4ef;border-radius:13px;background:#f8fbff;min-height:150px;display:flex;align-items:center;justify-content:center;padding:12px}
#pertihub-root #ph-man-photo-empty{text-align:center;max-width:440px}
#pertihub-root #ph-man-photo-empty strong{display:block;font-size:13px;color:#0b2f5b}
#pertihub-root #ph-man-photo-empty p{margin:6px 0 10px;font-size:9.5px;line-height:1.5;color:#6b8197}
#pertihub-root #ph-man-photo-preview{width:100%;align-items:center;gap:12px}
#pertihub-root #ph-man-photo-preview img{width:180px;height:120px;object-fit:cover;border-radius:11px;border:1px solid #d6e4f2}
#pertihub-root #ph-man-photo-preview>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
#pertihub-root #ph-man-photo-preview b{font-size:10.5px;color:#173b61}
#pertihub-root #ph-man-photo-preview span{font-size:9px;color:#71869b}
#pertihub-root .ph-man-reason{margin-top:12px}
#pertihub-root .ph-man-reason small{font-size:8.5px;color:#768ba0}
#pertihub-root .ph-man-submitbar{position:sticky;bottom:8px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #cfe0f1;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 8px 28px rgba(15,54,90,.12);backdrop-filter:blur(6px)}
#pertihub-root .ph-man-submitbar b{display:block;font-size:10px;color:#0b2f5b}
#pertihub-root .ph-man-submitbar span{display:block;margin-top:2px;font-size:8.5px;color:#71869b}
#pertihub-root .ph-man-submitbar .ph-btn{height:40px!important;min-height:40px!important;padding:0 18px!important;font-size:9.5px!important;font-weight:900!important}
#pertihub-root .ph-manual-denied{margin:70px auto;text-align:center;max-width:420px}
#pertihub-root .ph-manual-denied>div{font-size:34px}
#pertihub-root .ph-manual-denied h3{font-size:18px;color:#0b2f5b}
#pertihub-root .ph-manual-denied p{font-size:10px;line-height:1.5;color:#71869b}
@media(max-width:800px){#pertihub-root .ph-manual-form-grid{grid-template-columns:1fr}#pertihub-root .ph-manual-form-grid label.wide{grid-column:auto}#pertihub-root .ph-manual-intro{align-items:flex-start;flex-direction:column}#pertihub-root .ph-man-submitbar{align-items:stretch;flex-direction:column}}


/* =========================================================
   V5.4.3 — DAFTAR PEMBAYARAN MONTH FILTER + READABLE TYPE
   ========================================================= */
#pertihub-root .ph-pay-toolbar-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin:0 0 10px;
}
#pertihub-root .ph-pay-month-control{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:0 0 auto;
}
#pertihub-root .ph-pay-month-control label{
  font-size:9px;
  font-weight:700;
  color:#58718a;
}
#pertihub-root .ph-pay-month-control select{
  height:40px;
  min-width:165px;
  padding:0 11px;
  border:1px solid #cfdfee;
  border-radius:10px;
  background:#fff;
  color:#173b61;
  font-size:11px;
  font-weight:600;
}
#pertihub-root .ph-pay-toolbar-row .ph-pay-search{
  flex:1 1 auto;
  margin:0!important;
}
#pertihub-root .ph-pay-toolbar-row .ph-pay-search input{
  height:40px!important;
  font-size:11px!important;
  font-weight:400!important;
}

/* Human-readable payment hierarchy: reduce excessive boldness */
#pertihub-root .ph-pay-group summary div>b,
#pertihub-root .ph-pay-account-group summary div>b{
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:650!important;
  letter-spacing:0!important;
}
#pertihub-root .ph-pay-group summary div>small,
#pertihub-root .ph-pay-account-group summary div>small{
  font-size:9.5px!important;
  line-height:1.35!important;
  font-weight:400!important;
}
#pertihub-root .ph-pay-group summary>strong,
#pertihub-root .ph-pay-account-group summary>strong{
  font-size:11.5px!important;
  line-height:1.3!important;
  font-weight:700!important;
}
#pertihub-root .ph-pay-channel-head small{
  font-size:9px!important;
  font-weight:600!important;
  letter-spacing:.04em!important;
}
#pertihub-root .ph-pay-channel-head h3{
  font-size:15px!important;
  line-height:1.3!important;
  font-weight:650!important;
}
#pertihub-root .ph-pay-channel-head p{
  font-size:10px!important;
  line-height:1.35!important;
  font-weight:400!important;
}
#pertihub-root .ph-pay-channel-head>strong{
  font-size:15px!important;
  font-weight:700!important;
}
#pertihub-root .ph-pay-title-line b{
  font-size:11.5px!important;
  line-height:1.3!important;
  font-weight:650!important;
}
#pertihub-root .ph-pay-main>strong{
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:600!important;
}
#pertihub-root .ph-pay-main small,
#pertihub-root .ph-pay-side small,
#pertihub-root .ph-pay-method-meta{
  font-size:9.5px!important;
  line-height:1.4!important;
  font-weight:400!important;
}
#pertihub-root .ph-pay-main em{
  font-size:11.5px!important;
  font-style:normal!important;
  font-weight:700!important;
}
#pertihub-root .ph-pay-kpi small,
#pertihub-root .ph-pay-total small{
  font-size:9.5px!important;
  font-weight:500!important;
}
#pertihub-root .ph-pay-kpi strong{
  font-size:16px!important;
  font-weight:700!important;
}
#pertihub-root .ph-pay-total strong{
  font-size:17px!important;
  font-weight:700!important;
}


/* =========================================================
   V5.4.4 — PAYMENT PAGES COMPACT VERTICAL HEADER
   Daftar Pembayaran + Validasi Pembayaran
   ========================================================= */

/* page top area */
#pertihub-root:has(.ph-payment-panel) .ph-page-head{
  min-height:54px!important;
  padding:7px 18px!important;
}
#pertihub-root:has(.ph-payment-panel) .ph-page-head h1{
  font-size:23px!important;
  line-height:1.05!important;
  margin:0 0 3px!important;
}
#pertihub-root:has(.ph-payment-panel) .ph-page-head p{
  font-size:10px!important;
  line-height:1.15!important;
  margin:0!important;
}

/* Daftar: month + search become one compact horizontal control row */
#pertihub-root .ph-pay-toolbar-row{
  display:grid!important;
  grid-template-columns:165px minmax(260px,1fr)!important;
  align-items:end!important;
  gap:9px!important;
  margin:0 0 8px!important;
}
#pertihub-root .ph-pay-month-control{
  gap:3px!important;
}
#pertihub-root .ph-pay-month-control label{
  font-size:9px!important;
  line-height:1!important;
}
#pertihub-root .ph-pay-month-control select,
#pertihub-root .ph-pay-toolbar-row .ph-pay-search input{
  height:36px!important;
}
#pertihub-root .ph-pay-toolbar-row .ph-pay-search{
  min-height:36px!important;
}

/* Validasi: search also compact */
#pertihub-root .ph-pay-search{
  margin:0 0 8px!important;
  min-height:36px!important;
}
#pertihub-root .ph-pay-search input{
  height:36px!important;
  font-size:10.5px!important;
}

/* KPI cards no longer consume a large row */
#pertihub-root .ph-pay-kpis{
  display:flex!important;
  gap:8px!important;
  margin:0 0 8px!important;
}
#pertihub-root .ph-pay-kpi{
  min-height:50px!important;
  padding:8px 14px!important;
  border-radius:12px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
#pertihub-root .ph-pay-kpi small{
  font-size:9.5px!important;
  line-height:1.15!important;
}
#pertihub-root .ph-pay-kpi strong{
  font-size:15px!important;
  line-height:1!important;
}

/* Total bar compact */
#pertihub-root .ph-pay-total{
  min-height:54px!important;
  padding:8px 14px!important;
  margin:0 0 8px!important;
  border-radius:12px!important;
}
#pertihub-root .ph-pay-total>div{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
#pertihub-root .ph-pay-total small{
  margin:0!important;
  font-size:9.5px!important;
}
#pertihub-root .ph-pay-total strong{
  font-size:15px!important;
  line-height:1.1!important;
}
#pertihub-root .ph-pay-total .ph-icon-btn{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
}

/* hierarchy begins sooner */
#pertihub-root .ph-payment-panel{
  padding:10px!important;
  border-radius:14px!important;
}
#pertihub-root .ph-pay-group,
#pertihub-root .ph-pay-account-group{
  margin-bottom:7px!important;
}
#pertihub-root .ph-pay-group>summary,
#pertihub-root .ph-pay-account-group>summary{
  min-height:44px!important;
  padding:8px 12px!important;
}

/* Validasi has only 2 KPI: don't stretch them awkwardly across full page */
#pertihub-root .ph-pay-kpis:has(.ph-pay-kpi:nth-child(2):last-child) .ph-pay-kpi{
  flex:1 1 0!important;
  max-width:none!important;
}

@media (max-width:760px){
  #pertihub-root .ph-pay-toolbar-row{
    grid-template-columns:1fr!important;
  }
  #pertihub-root .ph-pay-month-control select{
    width:100%!important;
  }
  #pertihub-root .ph-pay-kpis{
    flex-wrap:wrap!important;
  }
  #pertihub-root .ph-pay-kpi{
    flex:1 1 120px!important;
  }
  #pertihub-root .ph-pay-total>div{
    display:block!important;
  }
}


/* =========================================================
   V5.4.5 — PAYMENT SINGLE-ROW HEADER
   Daftar + Validasi use one compact horizontal header row.
   ========================================================= */
#pertihub-root .ph-pay-header-compact{
  display:grid!important;
  grid-template-columns:auto auto minmax(270px,1fr) minmax(320px,1.5fr)!important;
  align-items:end!important;
  gap:8px!important;
  margin:0 0 10px!important;
}
#pertihub-root .ph-pay-header-compact.validation{
  grid-template-columns:auto minmax(280px,.9fr) minmax(360px,1.4fr)!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-month-control.compact{
  width:165px!important;
  min-width:165px!important;
  gap:4px!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-month-control.compact label{
  font-size:9px!important;
  font-weight:600!important;
  line-height:1!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-month-control.compact select{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  font-size:11px!important;
  font-weight:600!important;
  border-radius:10px!important;
}

#pertihub-root .ph-pay-header-compact .ph-pay-kpis.compact-row{
  display:flex!important;
  align-items:stretch!important;
  gap:6px!important;
  margin:0!important;
  min-width:max-content;
}
#pertihub-root .ph-pay-header-compact .ph-pay-kpi.compact{
  min-width:118px!important;
  width:auto!important;
  min-height:42px!important;
  height:42px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-kpi.compact small{
  font-size:9.5px!important;
  line-height:1!important;
  font-weight:500!important;
  white-space:nowrap!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-kpi.compact strong{
  font-size:16px!important;
  line-height:1!important;
  font-weight:700!important;
}

#pertihub-root .ph-pay-header-compact .ph-pay-total.compact{
  min-width:0!important;
  min-height:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0 9px 0 14px!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-total.compact>div{
  min-width:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:12px!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-total.compact small{
  font-size:9.5px!important;
  line-height:1!important;
  font-weight:500!important;
  white-space:nowrap!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-total.compact strong{
  font-size:16px!important;
  line-height:1!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-total.compact .ph-icon-btn{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  border-radius:9px!important;
}

#pertihub-root .ph-pay-header-compact .ph-pay-search.compact{
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  border-radius:12px!important;
}
#pertihub-root .ph-pay-header-compact .ph-pay-search.compact input{
  height:42px!important;
  min-height:42px!important;
  font-size:10.5px!important;
}

/* Let transaction hierarchy start immediately after the compact row */
#pertihub-root .ph-pay-header-compact + .ph-payment-panel{
  margin-top:0!important;
}

/* Preserve comfortable desktop proportions */
@media(max-width:1450px){
  #pertihub-root .ph-pay-header-compact{
    grid-template-columns:150px auto minmax(250px,.9fr) minmax(300px,1.25fr)!important;
  }
  #pertihub-root .ph-pay-header-compact .ph-pay-month-control.compact{
    width:150px!important;min-width:150px!important;
  }
  #pertihub-root .ph-pay-header-compact .ph-pay-kpi.compact{
    min-width:100px!important;padding:0 10px!important;
  }
  #pertihub-root .ph-pay-header-compact.validation{
    grid-template-columns:auto minmax(260px,.9fr) minmax(330px,1.3fr)!important;
  }
}
@media(max-width:1050px){
  #pertihub-root .ph-pay-header-compact,
  #pertihub-root .ph-pay-header-compact.validation{
    grid-template-columns:1fr 1fr!important;
  }
  #pertihub-root .ph-pay-header-compact .ph-pay-month-control.compact{
    width:100%!important;min-width:0!important;
  }
  #pertihub-root .ph-pay-header-compact .ph-pay-kpis.compact-row,
  #pertihub-root .ph-pay-header-compact .ph-pay-total.compact,
  #pertihub-root .ph-pay-header-compact .ph-pay-search.compact{
    min-width:0!important;
  }
}
@media(max-width:680px){
  #pertihub-root .ph-pay-header-compact,
  #pertihub-root .ph-pay-header-compact.validation{
    grid-template-columns:1fr!important;
  }
  #pertihub-root .ph-pay-header-compact .ph-pay-kpis.compact-row{
    min-width:0!important;
  }
  #pertihub-root .ph-pay-header-compact .ph-pay-kpi.compact{
    flex:1 1 0!important;min-width:0!important;
  }
}


/* =========================================================
   V5.4.6 — REPORT PEMBAYARAN PELANGGAN
   Bulan > Tanggal > Metode > Kas/Bank/Salesman > Faktur
   ========================================================= */
#pertihub-root .ph-pay-report-page{
  padding:12px 16px 20px;
}
#pertihub-root .ph-pay-report-head{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
#pertihub-root .ph-pay-report-summary{
  display:flex;
  gap:7px;
  flex:1 1 auto;
}
#pertihub-root .ph-pay-report-summary>div{
  min-width:130px;
  padding:8px 11px;
  border:1px solid #d8e6f4;
  border-radius:10px;
  background:#f8fbff;
}
#pertihub-root .ph-pay-report-summary small{
  display:block;
  font-size:8.5px;
  font-weight:500;
  color:#6d8298;
}
#pertihub-root .ph-pay-report-summary strong{
  display:block;
  margin-top:3px;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  color:#0b5fb8;
}
#pertihub-root .ph-pay-report-search{
  flex:0 1 360px;
  display:flex;
  align-items:center;
  gap:7px;
  height:44px;
  padding:0 11px;
  border:1px solid #d3e1ef;
  border-radius:11px;
  background:#fff;
}
#pertihub-root .ph-pay-report-search span{
  font-size:17px;color:#53718f;
}
#pertihub-root .ph-pay-report-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#173b61;
  font-size:10.5px;
}
#pertihub-root .ph-pay-report-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#pertihub-root .ph-pay-report-month,
#pertihub-root .ph-pay-report-date,
#pertihub-root .ph-pay-report-method-group,
#pertihub-root .ph-pay-report-account{
  overflow:hidden;
  border:1px solid #d9e6f3;
  border-radius:10px;
  background:#fff;
}
#pertihub-root .ph-pay-report-month>summary,
#pertihub-root .ph-pay-report-date>summary,
#pertihub-root .ph-pay-report-method-group>summary,
#pertihub-root .ph-pay-report-account>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
#pertihub-root .ph-pay-report-month>summary::-webkit-details-marker,
#pertihub-root .ph-pay-report-date>summary::-webkit-details-marker,
#pertihub-root .ph-pay-report-method-group>summary::-webkit-details-marker,
#pertihub-root .ph-pay-report-account>summary::-webkit-details-marker{display:none}

#pertihub-root .ph-pay-report-month>summary{
  min-height:48px;
  padding:8px 13px;
  background:#eaf4ff;
}
#pertihub-root .ph-pay-report-month>summary>div,
#pertihub-root .ph-pay-report-date>summary>div:first-child,
#pertihub-root .ph-pay-report-account-main{
  display:flex;align-items:center;gap:9px;min-width:0;
}
#pertihub-root .ph-pay-report-month-icon{
  width:27px;height:27px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:#d5eaff;color:#1266c5;font-size:12px;
}
#pertihub-root .ph-pay-report-month summary b{
  display:block;font-size:12px;font-weight:700;color:#0b3e73;
}
#pertihub-root .ph-pay-report-month summary small{
  display:block;margin-top:2px;font-size:8.5px;font-weight:400;color:#6d8297;
}
#pertihub-root .ph-pay-report-month>summary>strong{
  font-size:13px;font-weight:700;color:#0b5fb8;white-space:nowrap;
}
#pertihub-root .ph-pay-report-month-children{
  padding:8px;background:#f8fbfe;
}

#pertihub-root .ph-pay-report-date{
  margin-bottom:6px;
}
#pertihub-root .ph-pay-report-date:last-child{margin-bottom:0}
#pertihub-root .ph-pay-report-date>summary{
  min-height:43px;padding:7px 11px;background:#fff;
}
#pertihub-root .ph-pay-report-date-icon{
  font-size:15px;
}
#pertihub-root .ph-pay-report-date summary b{
  display:block;font-size:11.5px;font-weight:650;color:#173f68;
}
#pertihub-root .ph-pay-report-date summary small{
  display:block;margin-top:2px;font-size:8.5px;font-weight:400;color:#71869a;
}
#pertihub-root .ph-pay-report-date>summary>strong{
  font-size:11.5px;font-weight:700;color:#1766c9;white-space:nowrap;
}
#pertihub-root .ph-pay-report-date-children{
  padding:7px;border-top:1px solid #e5edf5;background:#fbfdff;
}

#pertihub-root .ph-pay-report-method-group{
  margin-bottom:6px;
}
#pertihub-root .ph-pay-report-method-group:last-child{margin-bottom:0}
#pertihub-root .ph-pay-report-method-group>summary{
  min-height:39px;padding:6px 10px;
}
#pertihub-root .ph-pay-report-method-group.transfer>summary{background:#eef7ff}
#pertihub-root .ph-pay-report-method-group.cash>summary{background:#f2fbf5}
#pertihub-root .ph-pay-report-method-group.giro>summary{background:#fff8ee}
#pertihub-root .ph-pay-report-method-group>summary>div{
  display:flex;align-items:center;gap:7px;
}
#pertihub-root .ph-pay-report-method-group summary b{
  font-size:10px;font-weight:700;color:#244968;
}
#pertihub-root .ph-pay-report-method-group summary small{
  font-size:8px;font-weight:400;color:#71869a;
}
#pertihub-root .ph-pay-report-method-group>summary>strong{
  font-size:10.5px;font-weight:700;color:#1766c9;
}
#pertihub-root .ph-pay-report-method-children{
  padding:6px;border-top:1px solid #e4edf6;
}

#pertihub-root .ph-pay-report-account{
  margin-bottom:5px;
}
#pertihub-root .ph-pay-report-account:last-child{margin-bottom:0}
#pertihub-root .ph-pay-report-account>summary{
  min-height:42px;padding:7px 10px;background:#fff;
}
#pertihub-root .ph-pay-report-account-icon{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:#eef4fa;font-size:13px;
}
#pertihub-root .ph-pay-report-account summary b{
  display:block;font-size:10.5px;font-weight:600;color:#173b61;
}
#pertihub-root .ph-pay-report-account summary small{
  display:block;margin-top:2px;font-size:8px;font-weight:400;color:#71869a;
}
#pertihub-root .ph-pay-report-account>summary>strong{
  font-size:11px;font-weight:700;color:#0b5fb8;white-space:nowrap;
}

/* Excel-like leaf table */
#pertihub-root .ph-pay-report-table-wrap{
  overflow:auto;
  border-top:1px solid #dce7f2;
}
#pertihub-root .ph-pay-report-table{
  width:100%;
  min-width:1050px;
  border-collapse:separate;
  border-spacing:0;
  font-size:8.5px;
}
#pertihub-root .ph-pay-report-table th{
  position:sticky;top:0;z-index:2;
  padding:6px 8px;
  border-right:1px solid rgba(255,255,255,.18);
  background:#147ab8;
  color:#fff;
  text-align:left;
  font-size:7.5px;
  font-weight:700;
  white-space:nowrap;
}
#pertihub-root .ph-pay-report-table td{
  padding:6px 8px;
  border-right:1px solid #dfe9f3;
  border-bottom:1px solid #dfe9f3;
  background:#fff;
  color:#173b61;
  line-height:1.25;
  font-size:8.5px;
}
#pertihub-root .ph-pay-report-table tr:nth-child(even) td{background:#f7faff}
#pertihub-root .ph-pay-report-table td.num{text-align:center;color:#71869a}
#pertihub-root .ph-pay-report-table td.code,
#pertihub-root .ph-pay-report-table td.invoice{font-weight:650;color:#075faa}
#pertihub-root .ph-pay-report-table td.customer{font-weight:550}
#pertihub-root .ph-pay-report-table td.money{
  text-align:right;font-size:9px;font-weight:700;color:#0b5fb8;white-space:nowrap;
}
#pertihub-root .ph-pay-report-method{
  display:inline-flex;padding:3px 7px;border-radius:999px;font-size:7.5px;font-weight:700;
}
#pertihub-root .ph-pay-report-method.transfer{background:#e5f2ff;color:#0969c3}
#pertihub-root .ph-pay-report-method.cash{background:#e8f8ed;color:#16803d}
#pertihub-root .ph-pay-report-method.giro{background:#fff0d9;color:#a65a00}

@media(max-width:1000px){
  #pertihub-root .ph-pay-report-head{flex-direction:column}
  #pertihub-root .ph-pay-report-summary{flex-wrap:wrap}
  #pertihub-root .ph-pay-report-summary>div{flex:1 1 140px}
  #pertihub-root .ph-pay-report-search{flex:0 0 auto;width:auto}
}

/* =========================================================
   PERTIHUB VISUAL THEME V1 — SOFT OFFICE / EYE COMFORT
   Additive global theme. Functional/layout logic untouched.
   ========================================================= */
:root{
  --ph-bg:#F4F6F8;
  --ph-card:#FCFCFB;
  --ph-surface:#F7F8FA;
  --ph-text:#172033;
  --ph-muted:#5F6B7A;
  --ph-border:#D8E0E8;
  --ph-blue:#2563EB;
  --ph-blue2:#EAF2FF;
  --ph-red:#C53B3B;
  --ph-amber:#B86A12;
  --ph-green:#168A45;
  --ph-shadow:0 6px 20px rgba(23,32,51,.055);
}

/* Main canvas: avoid pure-white glare */
#pertihub-root,.pertihub-root,.ph-app,.ph-main,.ph-content{
  background:var(--ph-bg);
  color:var(--ph-text);
}
#pertihub-root,.pertihub-root{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:14px;
  line-height:1.45;
}

/* Header remains light, but no harsh white */
.ph-topbar{
  background:rgba(252,252,251,.96);
  border-color:var(--ph-border);
}
.ph-topbar h1{color:var(--ph-text);font-weight:700;letter-spacing:-.025em}
.ph-topbar p{color:var(--ph-muted);font-size:13px}

/* Common surfaces */
.ph-panel,.ph-kpi,.ph-dash-card,
.ph-profile-card,.ph-toolbar,
[class*="card"],[class*="panel"]{
  border-color:var(--ph-border);
}
.ph-panel,.ph-kpi,.ph-dash-card{background:var(--ph-card)}
.ph-kpi,.ph-dash-card,.ph-panel{box-shadow:var(--ph-shadow)}

/* Inputs / controls: calm contrast and readable */
.ph-top-actions input,.ph-filter,.ph-btn,
input,select,textarea,button{
  font-family:inherit;
}
.ph-top-actions input,.ph-filter,
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  color:var(--ph-text);
  background:#FCFCFB;
  border-color:var(--ph-border);
  font-size:14px;
}
input::placeholder,textarea::placeholder{color:#8491A3;opacity:1}
.ph-btn{
  background:#FCFCFB;
  color:var(--ph-text);
  border-color:var(--ph-border);
  font-size:14px;
  font-weight:600;
}
.ph-btn.ghost{background:var(--ph-surface)}
.ph-btn.primary{background:var(--ph-blue);color:#fff;border-color:var(--ph-blue)}

/* Typography hierarchy: readable without over-bold */
.ph-content small,.ph-panel small,.ph-kpi small{line-height:1.4}
.ph-kpi small{font-size:12px;font-weight:600;letter-spacing:.035em}
.ph-kpi strong{font-weight:700;color:var(--ph-text)}
table,th,td{line-height:1.45}
th{font-weight:650}
td{font-weight:450}

/* Semantic states: softer fills, strong readable text */
.ph-badge.green{background:#E8F6ED!important;color:#116B36!important;border-color:#BFE5CC!important}
.ph-badge.amber{background:#FFF3D6!important;color:#8A4D08!important;border-color:#F1D49A!important}
.ph-badge.red{background:#FDECEC!important;color:#A62F2F!important;border-color:#F1C5C5!important}
.ph-badge.blue{background:#EAF2FF!important;color:#1D56B3!important;border-color:#C8DAF8!important}

/* Reduce visual noise from repeated blue outlines */
.ph-content :where(.ph-panel,.ph-kpi,.ph-dash-card){
  border-width:1px;
}

/* Comfortable selection/focus, still accessible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.22);
  outline-offset:2px;
}
.ph-nav-item.active{
  background:#F7F8FA;
  color:#172033;
}

/* Long-work-session comfort */
@media (min-width:900px){
  .ph-content{color:#172033}
  .ph-content p,.ph-content td,.ph-content input,.ph-content select,.ph-content textarea{
    font-size:max(13px, .84rem);
  }
}



/* =========================================================
   V5.4.9 — MODERN COMPACT CALENDAR
   Simple, calm, modern, no vertical page scroll on desktop.
   Keeps Soft Office / Eye Comfort V1.
   ========================================================= */
@media screen and (min-width:1001px){

  /* Use available viewport efficiently */
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 70px)!important;
    min-height:580px!important;
    gap:8px!important;
    overflow:hidden!important;
  }

  /* Compact secondary calendar header */
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head{
    min-height:54px!important;
    padding:8px 12px!important;
    border-radius:13px!important;
    background:#FCFCFB!important;
    border:1px solid #D8E0E8!important;
    box-shadow:none!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head h2{
    margin:0!important;
    font-size:17px!important;
    line-height:1.15!important;
    font-weight:700!important;
    letter-spacing:-.015em!important;
    color:#172033!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head p{
    margin:2px 0 0!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    font-weight:400!important;
    color:#687587!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-controls{
    gap:7px!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-controls select{
    height:34px!important;
    min-height:34px!important;
    padding:0 9px!important;
    border:1px solid #D8E0E8!important;
    border-radius:9px!important;
    background:#F9FAFB!important;
    color:#273449!important;
    font-size:10px!important;
    font-weight:600!important;
  }

  #pertihub-root .ph-calendar-layout{
    grid-template-columns:minmax(0,1fr) 278px!important;
    gap:9px!important;
  }

  /* Main calendar becomes a clean single surface */
  #pertihub-root .ph-calendar-main{
    padding:9px!important;
    border:1px solid #D8E0E8!important;
    border-radius:14px!important;
    background:#FCFCFB!important;
    box-shadow:0 3px 14px rgba(23,32,51,.035)!important;
  }
  #pertihub-root .ph-cal-month-title{
    padding:1px 0 7px!important;
    font-size:18px!important;
    line-height:1.1!important;
    font-weight:700!important;
    letter-spacing:-.02em!important;
    color:#172033!important;
  }

  /* Week header: modern charcoal rather than saturated navy */
  #pertihub-root .ph-calendar-week{
    border-color:#D4DCE5!important;
    border-radius:9px 9px 0 0!important;
    background:#283342!important;
  }
  #pertihub-root .ph-calendar-week b{
    min-height:27px!important;
    background:#283342!important;
    color:#F7F8FA!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    font-size:9px!important;
    font-weight:650!important;
    letter-spacing:.035em!important;
  }
  #pertihub-root .ph-calendar-week b.sat{
    background:#283342!important;
    color:#CFE2F5!important;
  }
  #pertihub-root .ph-calendar-week b.sun{
    background:#B64B4B!important;
    color:#FFF7F7!important;
  }

  /* Calendar cells: less visual noise and calmer contrast */
  #pertihub-root .ph-calendar-grid{
    border-color:#D8E0E8!important;
    background:#F7F8FA!important;
    border-radius:0 0 9px 9px!important;
  }
  #pertihub-root .ph-cal-cell{
    padding:6px 7px!important;
    background:#F8F9FA!important;
    border-color:#E0E5EB!important;
    transition:background .12s ease,box-shadow .12s ease!important;
  }
  #pertihub-root .ph-cal-cell:hover{
    background:#F1F5F9!important;
    box-shadow:inset 0 0 0 1px #BFD2E5!important;
  }
  #pertihub-root .ph-cal-cell.blank{
    background:#F4F6F8!important;
  }
  #pertihub-root .ph-cal-cell.saturday{
    background:#F6F8FA!important;
  }
  #pertihub-root .ph-cal-cell.sunday{
    background:#FBEFEF!important;
  }
  #pertihub-root .ph-cal-cell.holiday{
    background:#FFF3DE!important;
  }

  /* Day number is clear, but no longer oversized */
  #pertihub-root .ph-cal-num{
    margin:0 0 4px!important;
  }
  #pertihub-root .ph-cal-num b,
  #pertihub-root .ph-cal-num b[style]{
    font-size:17px!important;
    line-height:1!important;
    font-weight:700!important;
    color:#172033!important;
  }
  #pertihub-root .ph-cal-cell.saturday .ph-cal-num b{
    color:#365E82!important;
  }
  #pertihub-root .ph-cal-cell.sunday .ph-cal-num b{
    color:#B93434!important;
  }

  /* Day pill inside each cell is redundant because weekday header already exists */
  #pertihub-root .ph-cal-day-pill{
    display:none!important;
  }

  /* Events become compact chips */
  #pertihub-root .ph-cal-holiday{
    padding:3px 6px!important;
    margin:1px 0 2px!important;
    border-radius:6px!important;
    background:#FFE6C5!important;
    color:#9A4C0D!important;
    font-size:8px!important;
    line-height:1.15!important;
    font-weight:650!important;
  }
  #pertihub-root .ph-cal-leave{
    min-height:20px!important;
    padding:3px 5px!important;
    margin-top:2px!important;
    border:1px solid rgba(0,0,0,.035)!important;
    border-radius:6px!important;
    font-size:8px!important;
    line-height:1.15!important;
    font-weight:600!important;
  }
  #pertihub-root .ph-cal-more{
    font-size:7.5px!important;
    font-weight:500!important;
    color:#667587!important;
  }
  #pertihub-root .ph-cal-status-dot{
    width:6px!important;
    height:6px!important;
    bottom:5px!important;
    box-shadow:none!important;
  }

  /* Modern compact information rail */
  #pertihub-root .ph-calendar-side{
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:7px!important;
  }
  #pertihub-root .ph-calendar-side section{
    padding:9px!important;
    border:1px solid #D8E0E8!important;
    border-radius:12px!important;
    background:#FCFCFB!important;
    box-shadow:none!important;
  }
  #pertihub-root .ph-cal-side-title{
    gap:6px!important;
    margin-bottom:5px!important;
  }
  #pertihub-root .ph-cal-side-title h3{
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:700!important;
    color:#273449!important;
  }
  #pertihub-root .ph-cal-side-icon{
    width:23px!important;
    height:23px!important;
    border-radius:7px!important;
    font-size:11px!important;
  }
  #pertihub-root .ph-cal-scope-note{
    font-size:8px!important;
    line-height:1.25!important;
    color:#738094!important;
    margin-bottom:5px!important;
  }
  #pertihub-root .ph-cal-side-scroll{
    max-height:66px!important;
  }
  #pertihub-root .ph-cal-side-scroll.leaves{
    height:100%!important;
    max-height:none!important;
  }
  #pertihub-root .ph-cal-side-row{
    padding:6px 7px!important;
    margin-bottom:4px!important;
    border-radius:7px!important;
    background:#F6F8FA!important;
  }
  #pertihub-root .ph-cal-side-row b{
    font-size:9px!important;
    line-height:1.25!important;
    font-weight:650!important;
  }
  #pertihub-root .ph-cal-side-row span,
  #pertihub-root .ph-cal-side-row small{
    font-size:8px!important;
    line-height:1.25!important;
    font-weight:400!important;
  }

  /* Legend becomes compact 2-column reference */
  #pertihub-root .ph-cal-legend{
    grid-template-columns:1fr 1fr!important;
    gap:4px 7px!important;
  }
  #pertihub-root .ph-cal-legend span{
    gap:5px!important;
    font-size:7.8px!important;
    line-height:1.2!important;
    font-weight:500!important;
    color:#5F6B7A!important;
  }
  #pertihub-root .ph-cal-legend i{
    width:7px!important;
    height:7px!important;
  }

  /* Information card is explanatory duplicate; hide on desktop to keep no-scroll */
  #pertihub-root .ph-cal-side-card.info{
    display:none!important;
  }
}

/* Short laptop screens: preserve readability while guaranteeing fit */
@media screen and (min-width:1001px) and (max-height:720px){
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 62px)!important;
    min-height:540px!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head{
    min-height:48px!important;
    padding:6px 10px!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head h2{
    font-size:15px!important;
  }
  #pertihub-root .ph-cal-month-title{
    font-size:16px!important;
    padding-bottom:5px!important;
  }
  #pertihub-root .ph-calendar-week b{min-height:24px!important}
  #pertihub-root .ph-cal-num b,
  #pertihub-root .ph-cal-num b[style]{font-size:15px!important}
  #pertihub-root .ph-calendar-main{padding:7px!important}
  #pertihub-root .ph-cal-cell{padding:5px 6px!important}
}


/* =========================================================
   V5.5.0 — MINIMAL CALENDAR CARD
   Inspired by compact desk-calendar visual:
   large month number, month/year label, slim weekday strip,
   clean white card, dense readable dates.
   ========================================================= */
@media screen and (min-width:1001px){

  /* Keep viewport fit / no page scroll */
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 68px)!important;
    min-height:560px!important;
    gap:7px!important;
    overflow:hidden!important;
  }

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head{
    min-height:50px!important;
    padding:7px 11px!important;
    border-radius:12px!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head h2{
    font-size:16px!important;
    font-weight:700!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head p{
    font-size:9px!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-controls select{
    height:32px!important;
    min-height:32px!important;
    font-size:9.5px!important;
    border-radius:9px!important;
  }

  #pertihub-root .ph-calendar-layout{
    grid-template-columns:minmax(0,1fr) 270px!important;
    gap:9px!important;
  }

  /* Single clean card */
  #pertihub-root .ph-calendar-main{
    position:relative!important;
    padding:10px 12px 12px!important;
    border:0!important;
    border-radius:22px!important;
    background:#FCFCFB!important;
    box-shadow:0 10px 28px rgba(31,41,55,.09)!important;
    overflow:hidden!important;
  }

  /* Month title becomes compact desk-calendar header */
  #pertihub-root .ph-cal-month-title{
    position:relative!important;
    min-height:54px!important;
    padding:0 6px 7px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    text-align:right!important;
    font-size:0!important;
    border-bottom:0!important;
  }
  #pertihub-root .ph-cal-month-title::before{
    content:attr(data-month-no);
  }

  /* Fallback month-number visual using first part of title text area */
  #pertihub-root .ph-cal-month-title::after{
    content:'';
  }

  /* Since title text is "Agustus 2026", style it as month/year block */
  #pertihub-root .ph-cal-month-title{
    color:#F45A5A!important;
    font-weight:700!important;
  }
  #pertihub-root .ph-cal-month-title::first-line{
    font-size:16px;
  }

  /* large left month index badge injected visually via CSS counter-like accent */
  #pertihub-root .ph-calendar-main::before{
    content:'';
    position:absolute;
    top:13px;
    left:18px;
    width:36px;
    height:36px;
    border-radius:12px;
    background:#FFF1F1;
  }
  #pertihub-root .ph-calendar-main::after{
    content:'';
    position:absolute;
    top:21px;
    left:29px;
    width:14px;
    height:14px;
    border:3px solid #F45A5A;
    border-radius:50%;
    box-sizing:border-box;
  }

  /* weekday bar like reference */
  #pertihub-root .ph-calendar-week{
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#F45A5A!important;
  }
  #pertihub-root .ph-calendar-week b,
  #pertihub-root .ph-calendar-week b.sat,
  #pertihub-root .ph-calendar-week b.sun{
    min-height:25px!important;
    background:#F45A5A!important;
    color:#fff!important;
    border:0!important;
    font-size:8.5px!important;
    font-weight:600!important;
    letter-spacing:.02em!important;
  }

  /* dense simple grid */
  #pertihub-root .ph-calendar-grid{
    border:0!important;
    border-radius:0!important;
    background:#FCFCFB!important;
    gap:0!important;
  }
  #pertihub-root .ph-cal-cell{
    padding:5px 7px!important;
    border:0!important;
    border-bottom:1px solid #EEF1F4!important;
    border-right:1px solid #EEF1F4!important;
    background:#FCFCFB!important;
    min-height:0!important;
  }
  #pertihub-root .ph-cal-cell:hover{
    background:#F7F8FA!important;
    box-shadow:none!important;
  }
  #pertihub-root .ph-cal-cell.blank{
    background:#FAFBFC!important;
  }
  #pertihub-root .ph-cal-cell.saturday{
    background:#FCFCFB!important;
  }
  #pertihub-root .ph-cal-cell.sunday{
    background:#FFF7F7!important;
  }
  #pertihub-root .ph-cal-cell.holiday{
    background:#FFF7EA!important;
  }

  #pertihub-root .ph-cal-num{
    margin:0 0 2px!important;
  }
  #pertihub-root .ph-cal-num b,
  #pertihub-root .ph-cal-num b[style]{
    font-size:15px!important;
    line-height:1!important;
    font-weight:600!important;
    color:#4B5563!important;
  }
  #pertihub-root .ph-cal-cell.sunday .ph-cal-num b{
    color:#F45A5A!important;
  }
  #pertihub-root .ph-cal-cell.saturday .ph-cal-num b{
    color:#4B5563!important;
  }

  #pertihub-root .ph-cal-day-pill{
    display:none!important;
  }

  /* event chips kept readable but subtle */
  #pertihub-root .ph-cal-holiday{
    padding:2px 5px!important;
    margin:1px 0 2px!important;
    border-radius:5px!important;
    background:#FFE8D6!important;
    color:#A34F16!important;
    font-size:7.5px!important;
    font-weight:600!important;
  }
  #pertihub-root .ph-cal-leave{
    min-height:18px!important;
    padding:2px 5px!important;
    margin-top:2px!important;
    border-radius:5px!important;
    font-size:7.5px!important;
    line-height:1.15!important;
    font-weight:600!important;
  }
  #pertihub-root .ph-cal-status-dot{
    width:5px!important;
    height:5px!important;
    bottom:4px!important;
  }

  /* side rail follows same rounded-card language */
  #pertihub-root .ph-calendar-side{
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:7px!important;
  }
  #pertihub-root .ph-calendar-side section{
    padding:9px!important;
    border:0!important;
    border-radius:16px!important;
    background:#FCFCFB!important;
    box-shadow:0 5px 16px rgba(31,41,55,.055)!important;
  }
  #pertihub-root .ph-cal-side-title h3{
    font-size:11.5px!important;
    font-weight:650!important;
    color:#273449!important;
  }
  #pertihub-root .ph-cal-side-icon{
    width:22px!important;
    height:22px!important;
    border-radius:7px!important;
  }
  #pertihub-root .ph-cal-side-row{
    padding:5px 7px!important;
    border-radius:7px!important;
    background:#F7F8FA!important;
  }
  #pertihub-root .ph-cal-side-row b{
    font-size:8.8px!important;
    font-weight:600!important;
  }
  #pertihub-root .ph-cal-side-row span,
  #pertihub-root .ph-cal-side-row small{
    font-size:7.8px!important;
  }
  #pertihub-root .ph-cal-legend{
    grid-template-columns:1fr 1fr!important;
    gap:4px 6px!important;
  }
  #pertihub-root .ph-cal-legend span{
    font-size:7.6px!important;
    font-weight:500!important;
  }
  #pertihub-root .ph-cal-side-card.info{
    display:none!important;
  }
}

/* Short notebook screens */
@media screen and (min-width:1001px) and (max-height:700px){
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 60px)!important;
    min-height:520px!important;
  }
  #pertihub-root .ph-cal-month-title{min-height:44px!important}
  #pertihub-root .ph-calendar-week b{min-height:22px!important}
  #pertihub-root .ph-cal-num b,
  #pertihub-root .ph-cal-num b[style]{font-size:14px!important}
  #pertihub-root .ph-cal-cell{padding:4px 6px!important}
}


/* =========================================================
   V5.5.1 — EYE COMFORT PAPER CALENDAR
   Inspired by soft printed calendar:
   muted blue, warm paper, calm borders, compact readable grid.
   ========================================================= */
@media screen and (min-width:1001px){

  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 66px)!important;
    min-height:550px!important;
    gap:7px!important;
    overflow:hidden!important;
    background:#F2F4F5!important;
  }

  /* Compact filter header */
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head{
    min-height:48px!important;
    padding:7px 11px!important;
    border:1px solid #D8E0E5!important;
    border-radius:12px!important;
    background:#F8F9F8!important;
    box-shadow:none!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head h2{
    font-size:16px!important;
    font-weight:700!important;
    color:#26384A!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-head p{
    font-size:9px!important;
    font-weight:400!important;
    color:#68798A!important;
  }
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell) .ph-abs-controls select{
    height:31px!important;
    min-height:31px!important;
    padding:0 9px!important;
    border:1px solid #CCD8E0!important;
    border-radius:8px!important;
    background:#F8FAFB!important;
    color:#304559!important;
    font-size:9.5px!important;
    font-weight:600!important;
  }

  #pertihub-root .ph-calendar-layout{
    grid-template-columns:minmax(0,1fr) 260px!important;
    gap:8px!important;
  }

  /* Main "paper" calendar */
  #pertihub-root .ph-calendar-main{
    padding:10px 12px 12px!important;
    border:1px solid #D8E1E7!important;
    border-radius:14px!important;
    background:#F8F7F2!important;
    box-shadow:0 5px 16px rgba(38,56,74,.055)!important;
  }

  #pertihub-root .ph-cal-month-title{
    min-height:44px!important;
    padding:1px 0 7px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:19px!important;
    line-height:1.05!important;
    font-weight:700!important;
    letter-spacing:-.02em!important;
    color:#2C6FA3!important;
    border:0!important;
  }

  /* Muted weekday strip */
  #pertihub-root .ph-calendar-week{
    border:1px solid #C8D7E0!important;
    border-bottom:0!important;
    border-radius:7px 7px 0 0!important;
    background:#DDEAF2!important;
    overflow:hidden!important;
  }
  #pertihub-root .ph-calendar-week b,
  #pertihub-root .ph-calendar-week b.sat{
    min-height:24px!important;
    background:#DDEAF2!important;
    color:#34495C!important;
    border-right:1px solid #C8D7E0!important;
    font-size:8.5px!important;
    font-weight:650!important;
    letter-spacing:.015em!important;
  }
  #pertihub-root .ph-calendar-week b.sun{
    background:#F1D9DC!important;
    color:#98505A!important;
  }

  /* Calm compact grid */
  #pertihub-root .ph-calendar-grid{
    border-left:1px solid #C8D7E0!important;
    border-top:1px solid #C8D7E0!important;
    border-radius:0 0 7px 7px!important;
    background:#F8F7F2!important;
    overflow:hidden!important;
  }
  #pertihub-root .ph-cal-cell{
    padding:5px 6px!important;
    border:0!important;
    border-right:1px solid #D7E1E6!important;
    border-bottom:1px solid #D7E1E6!important;
    border-radius:0!important;
    background:#FBFAF6!important;
    box-shadow:none!important;
  }
  #pertihub-root .ph-cal-cell:hover{
    background:#F1F5F6!important;
    box-shadow:inset 0 0 0 1px #BDD0DB!important;
  }
  #pertihub-root .ph-cal-cell.blank{
    background:#F5F4EF!important;
  }
  #pertihub-root .ph-cal-cell.saturday{
    background:#F7FAFB!important;
  }
  #pertihub-root .ph-cal-cell.sunday{
    background:#F7E9EB!important;
  }
  #pertihub-root .ph-cal-cell.holiday{
    background:#FBE9E0!important;
  }

  #pertihub-root .ph-cal-num{
    margin:0 0 2px!important;
  }
  #pertihub-root .ph-cal-num b,
  #pertihub-root .ph-cal-num b[style]{
    font-size:15px!important;
    line-height:1!important;
    font-weight:650!important;
    color:#304559!important;
  }
  #pertihub-root .ph-cal-cell.saturday .ph-cal-num b{
    color:#456C88!important;
  }
  #pertihub-root .ph-cal-cell.sunday .ph-cal-num b{
    color:#B65D68!important;
  }

  #pertihub-root .ph-cal-day-pill{
    display:none!important;
  }

  /* Event chips: subdued, not fluorescent */
  #pertihub-root .ph-cal-holiday{
    padding:2px 5px!important;
    margin:1px 0 2px!important;
    border-radius:4px!important;
    background:#F2D7CB!important;
    color:#8D4A34!important;
    font-size:7.3px!important;
    line-height:1.15!important;
    font-weight:600!important;
  }
  #pertihub-root .ph-cal-leave{
    min-height:17px!important;
    padding:2px 5px!important;
    margin-top:2px!important;
    border:1px solid rgba(69,108,136,.08)!important;
    border-radius:4px!important;
    font-size:7.3px!important;
    line-height:1.15!important;
    font-weight:600!important;
  }
  #pertihub-root .ph-cal-leave.sick,
  #pertihub-root .ph-cal-side-row.sick{
    background:#F2DEDE!important;
    color:#8B4A4A!important;
  }
  #pertihub-root .ph-cal-leave.permit,
  #pertihub-root .ph-cal-side-row.permit{
    background:#F3E9CF!important;
    color:#84662A!important;
  }
  #pertihub-root .ph-cal-leave.leave,
  #pertihub-root .ph-cal-side-row.leave{
    background:#DDECF3!important;
    color:#3E6E8B!important;
  }
  #pertihub-root .ph-cal-leave.nokel,
  #pertihub-root .ph-cal-side-row.nokel{
    background:#DDEBDD!important;
    color:#487052!important;
  }

  #pertihub-root .ph-cal-more{
    font-size:7.2px!important;
    font-weight:500!important;
    color:#72808D!important;
  }
  #pertihub-root .ph-cal-status-dot{
    width:5px!important;
    height:5px!important;
    bottom:4px!important;
    box-shadow:none!important;
  }

  /* Right rail: same warm-paper family */
  #pertihub-root .ph-calendar-side{
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:7px!important;
  }
  #pertihub-root .ph-calendar-side section{
    padding:8px!important;
    border:1px solid #D8E1E7!important;
    border-radius:12px!important;
    background:#F8F7F2!important;
    box-shadow:none!important;
  }
  #pertihub-root .ph-cal-side-title{
    gap:6px!important;
    margin-bottom:5px!important;
  }
  #pertihub-root .ph-cal-side-title h3{
    font-size:11px!important;
    font-weight:650!important;
    color:#304559!important;
  }
  #pertihub-root .ph-cal-side-icon{
    width:21px!important;
    height:21px!important;
    border-radius:6px!important;
    background:#E3EDF2!important;
    color:#456C88!important;
    font-size:10px!important;
  }
  #pertihub-root .ph-cal-side-icon.ok{
    background:#E0ECE2!important;
    color:#4F7C58!important;
  }
  #pertihub-root .ph-cal-scope-note{
    margin-bottom:4px!important;
    font-size:7.7px!important;
    color:#71808E!important;
  }
  #pertihub-root .ph-cal-side-scroll{
    max-height:62px!important;
  }
  #pertihub-root .ph-cal-side-scroll.leaves{
    height:100%!important;
    max-height:none!important;
  }
  #pertihub-root .ph-cal-side-row{
    padding:5px 6px!important;
    margin-bottom:4px!important;
    border-radius:6px!important;
    background:#F1F3F2!important;
  }
  #pertihub-root .ph-cal-side-row b{
    font-size:8.5px!important;
    font-weight:600!important;
  }
  #pertihub-root .ph-cal-side-row span,
  #pertihub-root .ph-cal-side-row small{
    font-size:7.6px!important;
    font-weight:400!important;
  }

  #pertihub-root .ph-cal-legend{
    grid-template-columns:1fr 1fr!important;
    gap:3px 6px!important;
  }
  #pertihub-root .ph-cal-legend span{
    gap:5px!important;
    font-size:7.4px!important;
    font-weight:500!important;
    color:#667583!important;
  }
  #pertihub-root .ph-cal-legend i{
    width:6px!important;
    height:6px!important;
  }

  /* explanatory duplicate hidden on desktop */
  #pertihub-root .ph-cal-side-card.info{
    display:none!important;
  }
}

/* Short laptop screens */
@media screen and (min-width:1001px) and (max-height:700px){
  #pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell){
    height:calc(100vh - 60px)!important;
    min-height:515px!important;
  }
  #pertihub-root .ph-cal-month-title{
    min-height:36px!important;
    font-size:17px!important;
    padding-bottom:5px!important;
  }
  #pertihub-root .ph-calendar-week b{
    min-height:21px!important;
  }
  #pertihub-root .ph-cal-num b,
  #pertihub-root .ph-cal-num b[style]{
    font-size:14px!important;
  }
  #pertihub-root .ph-cal-cell{
    padding:4px 5px!important;
  }
}


/* =========================================================
   V5.5.2 — APK / WEB PAYMENT PARITY
   ========================================================= */
#pertihub-root .ph-pay-group.status.cancelled>summary{background:#f1f3f5!important;border-color:#d7dde3!important}
#pertihub-root .ph-pay-row.cancelled{background:#f7f7f7!important;opacity:.84}
#pertihub-root .ph-cancel-card{margin-top:12px;padding:13px;border:1px solid #efc8c8;border-radius:13px;background:#fff5f5}
#pertihub-root .ph-cancel-card h3{margin:0 0 4px;font-size:13px;color:#982c2c}
#pertihub-root .ph-cancel-card p{margin:0 0 8px;font-size:9.5px;color:#6f5960}
#pertihub-root .ph-cancel-card textarea{width:100%;box-sizing:border-box;border:1px solid #e0c5c5;border-radius:9px;padding:9px;font-size:11px;background:#fff}
#pertihub-root .ph-btn.danger{margin-top:8px;background:#b93a3a;color:#fff;border-color:#b93a3a}

#pertihub-root .ph-receive-page{padding:10px 14px 20px}
#pertihub-root .ph-receive-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
#pertihub-root .ph-receive-head h2{margin:0;font-size:17px;color:#26384a}
#pertihub-root .ph-receive-head p{margin:2px 0 0;font-size:9.5px;color:#6a7888}
#pertihub-root .ph-receive-layout{display:grid;grid-template-columns:.9fr 1fr 1.15fr;gap:9px;min-height:calc(100vh - 160px)}
#pertihub-root .ph-receive-card{min-width:0;padding:11px;border:1px solid #d8e0e8;border-radius:14px;background:#fcfcfb;overflow:auto}
#pertihub-root .ph-receive-step{display:flex;align-items:center;gap:8px;margin-bottom:9px}
#pertihub-root .ph-receive-step>span{width:25px;height:25px;border-radius:8px;background:#e8f1fb;color:#1d5b94;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
#pertihub-root .ph-receive-step b{display:block;font-size:11px;color:#26384a}
#pertihub-root .ph-receive-step small{display:block;font-size:8px;color:#758292}
#pertihub-root .ph-receive-customer-list,#pertihub-root .ph-receive-invoice-list{display:flex;flex-direction:column;gap:5px;margin-top:7px}
#pertihub-root .ph-receive-customer-list>button,#pertihub-root .ph-receive-invoice{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;padding:9px 10px;border:1px solid #dde5ec;border-radius:10px;background:#f8fafb;text-align:left;color:#26384a;cursor:pointer}
#pertihub-root .ph-receive-customer-list button:hover,#pertihub-root .ph-receive-invoice:hover{background:#eef4f8;border-color:#bfd0dc}
#pertihub-root .ph-receive-customer-list b,#pertihub-root .ph-receive-invoice b{display:block;font-size:10.5px;font-weight:650}
#pertihub-root .ph-receive-customer-list small,#pertihub-root .ph-receive-invoice small{display:block;margin-top:2px;font-size:8px;color:#738091}
#pertihub-root .ph-receive-customer-list strong,#pertihub-root .ph-receive-invoice strong{font-size:10.5px;color:#1766a2;white-space:nowrap}
#pertihub-root .ph-receive-invoice.warn{border-left:4px solid #d49a42}
#pertihub-root .ph-receive-invoice.danger{border-left:4px solid #be5a5a}
#pertihub-root .ph-receive-selected{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;background:#eef5fb;margin-bottom:9px}
#pertihub-root .ph-receive-selected small,#pertihub-root .ph-receive-selected span{display:block;font-size:8px;color:#6e7d8d}
#pertihub-root .ph-receive-selected b{display:block;font-size:13px;color:#173d63}
#pertihub-root .ph-receive-selected strong{font-size:12px;color:#1766a2}
#pertihub-root .ph-receive-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#pertihub-root .ph-receive-form-grid label{display:flex;flex-direction:column;gap:4px}
#pertihub-root .ph-receive-form-grid label.wide{grid-column:1/-1}
#pertihub-root .ph-receive-form-grid label>span{font-size:8.5px;font-weight:650;color:#506579}
#pertihub-root .ph-receive-form-grid input,#pertihub-root .ph-receive-form-grid select{height:36px;box-sizing:border-box;border:1px solid #d6e0e8;border-radius:9px;background:#fafbfb;padding:0 9px;font-size:10px;color:#26384a}
#pertihub-root #ph-receive-submit{width:100%;height:40px;margin-top:10px}
#pertihub-root .ph-receive-kolektor{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:8px;border:1px solid #cfe0d4;border-radius:11px;background:#eef6f0}
#pertihub-root .ph-receive-kolektor small{display:block;font-size:8px;color:#52735d}
#pertihub-root .ph-receive-kolektor b{font-size:10.5px;color:#2f5d3e}
#pertihub-root .ph-success-box{margin-top:8px;padding:10px;border-radius:10px;background:#eaf6ed;color:#28613a}
#pertihub-root .ph-success-box b,#pertihub-root .ph-success-box span{display:block}

#pertihub-root .ph-role-page{padding:10px 14px 70px}
#pertihub-root .ph-role-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid #d8e0e8;border-radius:13px;background:#fcfcfb;margin-bottom:9px}
#pertihub-root .ph-role-head h2{margin:0;font-size:16px;color:#26384a}
#pertihub-root .ph-role-head p{margin:2px 0 0;font-size:9px;color:#6c7a89}
#pertihub-root .ph-role-head select{height:36px;min-width:190px;border:1px solid #d5dfe7;border-radius:9px;padding:0 9px;background:#fafbfb}
#pertihub-root .ph-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#pertihub-root .ph-role-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #dde5ec;border-radius:10px;background:#f8fafb}
#pertihub-root .ph-role-row b{display:block;font-size:10px;color:#29435b}
#pertihub-root .ph-role-row small{display:block;font-size:8px;color:#748190}
#pertihub-root .ph-role-savebar{position:sticky;bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;margin-top:9px;border:1px solid #d8e0e8;border-radius:12px;background:rgba(252,252,251,.96);box-shadow:0 6px 20px rgba(23,32,51,.08)}
#pertihub-root .ph-role-savebar span{font-size:9px;color:#647386}
@media(max-width:1050px){#pertihub-root .ph-receive-layout{grid-template-columns:1fr}#pertihub-root .ph-role-grid{grid-template-columns:1fr}}


/* V5.5.3 — Receive Payment clipboard screenshot */
#pertihub-root .ph-receive-paste-zone{
  display:flex;align-items:center;gap:9px;margin-top:7px;padding:10px 11px;
  border:1px dashed #b7c9d8;border-radius:10px;background:#f5f8fa;
  cursor:text;outline:none;transition:.15s ease;
}
#pertihub-root .ph-receive-paste-zone:focus,
#pertihub-root .ph-receive-paste-zone.has-file{
  border-color:#6e9fc4;background:#edf5fa;box-shadow:0 0 0 2px rgba(79,133,176,.08)
}
#pertihub-root .ph-receive-paste-icon{
  display:flex;align-items:center;justify-content:center;min-width:34px;height:30px;
  border-radius:8px;background:#e6eef5;color:#426987;font-size:10px;font-weight:750
}
#pertihub-root .ph-receive-paste-zone b{display:block;font-size:9.5px;color:#33495e}
#pertihub-root .ph-receive-paste-zone small{display:block;margin-top:2px;font-size:8px;color:#718090}
#pertihub-root .ph-receive-photo-preview{
  display:flex;align-items:center;gap:8px;margin-top:7px;padding:7px;
  border:1px solid #d9e3ea;border-radius:10px;background:#fafbfb
}
#pertihub-root .ph-receive-photo-preview.empty{
  min-height:34px;justify-content:center;color:#83909d;font-size:8.5px
}
#pertihub-root .ph-receive-photo-preview img{
  width:58px;height:42px;object-fit:cover;border-radius:7px;border:1px solid #d9e1e8
}
#pertihub-root .ph-receive-photo-preview>div{min-width:0;flex:1}
#pertihub-root .ph-receive-photo-preview b{display:block;font-size:9px;color:#344b60;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pertihub-root .ph-receive-photo-preview small{display:block;font-size:8px;color:#7b8794}
#pertihub-root .ph-receive-photo-preview button{
  border:0;background:transparent;color:#a14e4e;font-size:8.5px;cursor:pointer
}

/* V5.5.4 CUSTOMER INPUT + REPORT FONT */
#pertihub-root .ph-customer-input-page{display:grid;gap:16px;max-width:1080px;margin:0 auto}
#pertihub-root .ph-customer-input-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:linear-gradient(135deg,#f8fbff,#eef6ff);border:1px solid #cfe1f5;border-radius:20px}
#pertihub-root .ph-customer-input-hero>div{display:flex;align-items:center;gap:12px}.ph-customer-input-hero h2{margin:0;color:#123b68}.ph-customer-input-hero p{margin:3px 0 0;color:#60758d}.ph-customer-input-hero>b{font-size:11px;color:#1769c2;background:#e5f1ff;padding:7px 10px;border-radius:999px}
#pertihub-root .ph-customer-input-card{background:#fbfdff;border:1px solid #cfe1f5;border-radius:20px;padding:20px;box-shadow:0 8px 24px rgba(31,73,125,.06)}
#pertihub-root .ph-customer-input-note{margin-top:16px;padding:12px 14px;background:#f1f7fc;border:1px solid #d7e5f1;border-radius:12px;display:grid;gap:3px;color:#47627e}.ph-customer-input-note b{color:#173d67}
#pertihub-root .ph-customer-input-actions{display:flex;justify-content:flex-end;margin-top:16px}.ph-customer-input-actions .ph-btn{min-width:190px}


/* =========================================================
   V5.5.5 — LIVE REPORT FONT PREVIEW + PRINT PARITY
   Font selector immediately affects Hitung/Hasil report on screen
   and the same selected font is forced into print output.
   ========================================================= */
#pertihub-root .ph-abs-page[data-report-font],
#pertihub-root .ph-abs-page[data-report-font] .ph-abs-head h2,
#pertihub-root .ph-abs-page[data-report-font] .ph-abs-head p,
#pertihub-root .ph-abs-page[data-report-font] .ph-attendance-report,
#pertihub-root .ph-abs-page[data-report-font] .ph-attendance-report *,
#pertihub-root .ph-abs-page[data-report-font] .ph-result-report,
#pertihub-root .ph-abs-page[data-report-font] .ph-result-report *,
#pertihub-root .ph-abs-page[data-report-font] .ph-sheet,
#pertihub-root .ph-abs-page[data-report-font] .ph-sheet *,
#pertihub-root .ph-abs-page[data-report-font] .ph-small-sheet,
#pertihub-root .ph-abs-page[data-report-font] .ph-small-sheet *,
#pertihub-root .ph-abs-page[data-report-font] .ph-report-legend-inline,
#pertihub-root .ph-abs-page[data-report-font] .ph-report-legend-inline *,
#pertihub-root .ph-abs-page[data-report-font] .ph-signatures,
#pertihub-root .ph-abs-page[data-report-font] .ph-signatures *,
#pertihub-root .ph-abs-page[data-report-font] .ph-report-generated{
  font-family:var(--ph-report-font)!important;
}

@media print{
  .ph-abs-page[data-report-font],
  .ph-abs-page[data-report-font] *{
    font-family:var(--ph-report-font)!important;
  }
}


/* =========================================================
   V5.5.6 — REPORT TYPOGRAPHY SCALE + SAFE AUTO-FIT
   - Uniform/proportional typography on screen and print.
   - Print cell text keeps an inner safety gap from borders.
   - JS shrinks only cells that truly overflow; normal cells stay uniform.
   ========================================================= */

/* SCREEN: one coherent typography scale */
#pertihub-root .ph-abs-page[data-report-font] .ph-attendance-report,
#pertihub-root .ph-abs-page[data-report-font] .ph-result-report{
  --ph-rpt-body:11px;
  --ph-rpt-head:10.5px;
  --ph-rpt-small:9.5px;
  --ph-rpt-title:20px;
}

#pertihub-root .ph-abs-page[data-report-font] .ph-abs-head h2{
  font-size:var(--ph-rpt-title)!important;
  line-height:1.18!important;
  font-weight:750!important;
}

#pertihub-root .ph-abs-page[data-report-font] .ph-abs-head p{
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:600!important;
}

#pertihub-root .ph-abs-page[data-report-font] .ph-sheet,
#pertihub-root .ph-abs-page[data-report-font] .ph-small-sheet{
  font-size:var(--ph-rpt-body)!important;
}

#pertihub-root .ph-abs-page[data-report-font] .ph-sheet th,
#pertihub-root .ph-abs-page[data-report-font] .ph-sheet td,
#pertihub-root .ph-abs-page[data-report-font] .ph-small-sheet th,
#pertihub-root .ph-abs-page[data-report-font] .ph-small-sheet td{
  font-size:var(--ph-rpt-body)!important;
  line-height:1.16!important;
  padding:5px 6px!important;
  box-sizing:border-box!important;
}

#pertihub-root .ph-abs-page[data-report-font] .ph-sheet thead th,
#pertihub-root .ph-abs-page[data-report-font] .ph-small-sheet thead th{
  font-size:var(--ph-rpt-head)!important;
  line-height:1.12!important;
  font-weight:750!important;
}

#pertihub-root .ph-abs-page[data-report-font] .ph-sheet tbody th,
#pertihub-root .ph-abs-page[data-report-font] .ph-sheet .grand th,
#pertihub-root .ph-abs-page[data-report-font] .ph-sheet .grand td{
  font-size:var(--ph-rpt-body)!important;
  font-weight:700!important;
}

#pertihub-root .ph-abs-page[data-report-font] .ph-report-legend-inline,
#pertihub-root .ph-abs-page[data-report-font] .ph-report-legend-inline *,
#pertihub-root .ph-abs-page[data-report-font] .ph-signatures small,
#pertihub-root .ph-abs-page[data-report-font] .ph-signatures b,
#pertihub-root .ph-abs-page[data-report-font] .ph-report-generated{
  font-size:var(--ph-rpt-small)!important;
  line-height:1.18!important;
}

/* PRINT: balanced base size; only overflowing cells are reduced by JS. */
@media print{
  .ph-abs-page[data-report-font]{
    --ph-print-body:9pt;
    --ph-print-head:8.6pt;
    --ph-print-small:8pt;
  }

  .ph-abs-page[data-report-font] .ph-sheet,
  .ph-abs-page[data-report-font] .ph-small-sheet{
    font-size:var(--ph-print-body)!important;
    table-layout:fixed!important;
  }

  .ph-abs-page[data-report-font] .ph-sheet th,
  .ph-abs-page[data-report-font] .ph-sheet td,
  .ph-abs-page[data-report-font] .ph-small-sheet th,
  .ph-abs-page[data-report-font] .ph-small-sheet td{
    font-size:var(--ph-print-body)!important;
    line-height:1.10!important;
    padding:1mm .7mm!important;
    box-sizing:border-box!important;
    vertical-align:middle!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  .ph-abs-page[data-report-font] .ph-sheet thead th,
  .ph-abs-page[data-report-font] .ph-small-sheet thead th{
    font-size:var(--ph-print-head)!important;
    line-height:1.08!important;
    font-weight:750!important;
  }

  .ph-abs-page[data-report-font] .ph-sheet tbody th,
  .ph-abs-page[data-report-font] .ph-sheet .grand th,
  .ph-abs-page[data-report-font] .ph-sheet .grand td{
    font-size:var(--ph-print-body)!important;
  }

  .ph-abs-page[data-report-font] .ph-report-legend-inline,
  .ph-abs-page[data-report-font] .ph-report-legend-inline *,
  .ph-abs-page[data-report-font] .ph-signatures small,
  .ph-abs-page[data-report-font] .ph-signatures b,
  .ph-abs-page[data-report-font] .ph-report-generated{
    font-size:var(--ph-print-small)!important;
    line-height:1.12!important;
  }

  /* The inner fit wrapper provides a safety zone so glyphs never touch borders. */
  .ph-print-fit-inner{
    display:block!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 .15mm!important;
    line-height:1.08!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  /* Never let a long token paint through a border. */
  .ph-sheet th,
  .ph-sheet td,
  .ph-small-sheet th,
  .ph-small-sheet td{
    overflow:hidden!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}


/* =========================================================
   V5.5.7 — VISIT PHOTO INJECT
   ========================================================= */
#pertihub-root .ph-abs-media-title-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#pertihub-root .ph-abs-photo-inject-btn{
  appearance:none;
  border:1px solid #a9c8ef;
  background:#f4f8fd;
  color:#0755a6;
  border-radius:9px;
  padding:6px 9px;
  font:inherit;
  font-size:11px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
#pertihub-root .ph-abs-photo-inject-btn:hover{
  background:#eaf3ff;
  border-color:#72a9e8;
}
#pertihub-root .ph-abs-photo-inject-btn:disabled{
  opacity:.6;
  cursor:wait;
}
@media (max-width:900px){
  #pertihub-root .ph-abs-media-title-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* PERTIHUB V5.5.9 — GIRO SALESMAN dedicated payment grouping */
#pertihub-root .ph-pay-channel-card.giro-salesman{border-color:#f5d0a9}
#pertihub-root .ph-pay-channel-card.giro-salesman .ph-pay-channel-head{background:linear-gradient(135deg,#fff9f0 0%,#fff 100%)}
#pertihub-root .ph-pay-channel-card.giro-salesman .ph-pay-channel-head>strong{color:#b45309}
#pertihub-root .ph-pay-account-group.giro-salesman>summary{border-color:#fed7aa;background:#fffaf3}


/* ============================================================
   V5.6.0 — LIST SCAN FAKTUR
   Bulan > Salesman > Senin-Rabu / Kamis-Sabtu > Excel-like invoice table
   ============================================================ */
#pertihub-root .ph-scan-faktur-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px;padding:18px 20px;border:1px solid #d7e6f5;border-radius:18px;background:linear-gradient(135deg,#f7fbff 0%,#edf6ff 100%);box-shadow:0 8px 24px rgba(27,73,112,.06)}
#pertihub-root .ph-scan-faktur-head span{font-size:9px;font-weight:800;letter-spacing:.12em;color:#2a6ca8}
#pertihub-root .ph-scan-faktur-head h1{margin:3px 0 2px;font-size:23px;line-height:1.15;color:#123a60}
#pertihub-root .ph-scan-faktur-head p{margin:0;font-size:11px;color:#6d7e8f}
#pertihub-root .ph-scan-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
#pertihub-root .ph-scan-kpis>div{padding:13px 15px;border:1px solid #dde7f0;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(31,56,78,.05)}
#pertihub-root .ph-scan-kpis small{display:block;margin-bottom:5px;font-size:9px;font-weight:700;color:#718297;text-transform:uppercase;letter-spacing:.04em}
#pertihub-root .ph-scan-kpis b{font-size:17px;color:#143b61;white-space:nowrap}
#pertihub-root .ph-scan-kpis .remain{border-color:#f2d5a7;background:#fffaf2}
#pertihub-root .ph-scan-kpis .remain b{color:#a65d06}
#pertihub-root .ph-scan-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:10px 12px;border:1px solid #e2e8ef;border-radius:13px;background:#fff}
#pertihub-root .ph-scan-toolbar .ph-pay-search{flex:1;max-width:520px}
#pertihub-root .ph-scan-toolbar>small{font-size:9px;color:#7b8795}
#pertihub-root .ph-scan-month{margin-bottom:14px;border:1px solid #cfdeec;border-radius:17px;background:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(30,68,101,.05)}
#pertihub-root .ph-scan-month>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 17px;background:linear-gradient(135deg,#eaf4ff,#f8fbff);cursor:pointer;list-style:none}
#pertihub-root .ph-scan-month>summary::-webkit-details-marker,#pertihub-root .ph-scan-salesman>summary::-webkit-details-marker,#pertihub-root .ph-scan-period>summary::-webkit-details-marker{display:none}
#pertihub-root .ph-scan-month>summary span,#pertihub-root .ph-scan-salesman>summary span,#pertihub-root .ph-scan-period>summary span{display:block;font-size:8px;font-weight:800;letter-spacing:.1em;color:#68839c}
#pertihub-root .ph-scan-month h2{margin:1px 0;font-size:17px;color:#124a78;text-transform:capitalize}
#pertihub-root .ph-scan-month>summary small{font-size:9px;color:#718397}
#pertihub-root .ph-scan-month-money{text-align:right}
#pertihub-root .ph-scan-month-money strong{display:block;margin-top:2px;font-size:15px;color:#a55c05}
#pertihub-root .ph-scan-month-body{padding:10px}
#pertihub-root .ph-scan-salesman{margin:8px 0;border:1px solid #e1e8ef;border-radius:14px;overflow:hidden;background:#fbfcfe}
#pertihub-root .ph-scan-salesman>summary{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;background:#fff;list-style:none}
#pertihub-root .ph-scan-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#e8f2fc;color:#1765a1;font-weight:800;font-size:11px}
#pertihub-root .ph-scan-salesman>summary b{display:block;font-size:11px;color:#253c50}
#pertihub-root .ph-scan-salesman>summary small{font-size:8.5px;color:#7c8996}
#pertihub-root .ph-scan-sales-metrics{text-align:right}
#pertihub-root .ph-scan-sales-metrics strong{display:block;font-size:12px;color:#a55c05}
#pertihub-root .ph-scan-sales-body{padding:0 9px 9px}
#pertihub-root .ph-scan-period{margin-top:8px;border:1px solid #dfe6ed;border-radius:11px;overflow:hidden;background:#fff}
#pertihub-root .ph-scan-period>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;background:#f7f9fb;cursor:pointer;list-style:none}
#pertihub-root .ph-scan-period>summary b{display:block;font-size:10px;color:#354c61}
#pertihub-root .ph-scan-period-metrics{text-align:right}
#pertihub-root .ph-scan-period-metrics em{font-style:normal;font-size:8.5px;color:#778694;margin-right:9px}
#pertihub-root .ph-scan-period-metrics strong{font-size:10px;color:#9b5a0a}
#pertihub-root .ph-scan-faktur-table-wrap{overflow:auto;max-width:100%;background:#fff}
#pertihub-root .ph-scan-faktur-table{width:100%;min-width:800px;border-collapse:separate;border-spacing:0;font-size:9.5px}
#pertihub-root .ph-scan-faktur-table th{position:sticky;top:0;z-index:1;padding:7px 9px;border-bottom:1px solid #cdd8e2;border-right:1px solid #e4e9ee;background:#eef3f7;color:#3d5265;text-align:left;font-size:8.5px;font-weight:800;white-space:nowrap}
#pertihub-root .ph-scan-faktur-table td{padding:7px 9px;border-bottom:1px solid #edf0f3;border-right:1px solid #f0f2f4;color:#354657;vertical-align:middle}
#pertihub-root .ph-scan-faktur-table tbody tr:hover td{background:#f8fbfe}
#pertihub-root .ph-scan-faktur-table td.invoice b{display:block;color:#075faa;font-size:10px}
#pertihub-root .ph-scan-faktur-table td small{display:block;margin-top:2px;color:#87939e;font-size:8px}
#pertihub-root .ph-scan-faktur-table .money{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#pertihub-root .ph-scan-faktur-table .paid{color:#16824d}
#pertihub-root .ph-scan-faktur-table .remain{color:#a75b04;font-weight:700}
#pertihub-root .ph-scan-faktur-table tfoot td{padding:8px 9px;background:#f5f8fa;border-top:1px solid #d9e1e8;font-weight:800;text-align:right;color:#344d62}
#pertihub-root .ph-scan-faktur-table tfoot td:first-child{text-align:left}
@media(max-width:780px){#pertihub-root .ph-scan-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}#pertihub-root .ph-scan-faktur-head{align-items:flex-start}#pertihub-root .ph-scan-toolbar{align-items:stretch;flex-direction:column}#pertihub-root .ph-scan-toolbar .ph-pay-search{max-width:none}#pertihub-root .ph-scan-month-money{display:none}}

/* =========================================================
   V5.6.2 — LIST SCAN FAKTUR COLLAPSED AGGREGATE
   Default collapsed + richer summary + proper customer name
   ========================================================= */
#pertihub-root .ph-scan-summary-main{min-width:0}
#pertihub-root .ph-scan-summary-main b{font-weight:800}
#pertihub-root .ph-scan-summary-main small{display:block;margin-top:3px;font-size:9px;color:#77889a;white-space:nowrap}
#pertihub-root .ph-scan-summary-counts{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
#pertihub-root .ph-scan-summary-counts em{font-style:normal;padding:4px 8px;border:1px solid #d9e7f4;border-radius:999px;background:#eef6ff;color:#24689e;font-size:8.5px;font-weight:800;white-space:nowrap}
#pertihub-root .ph-scan-summary-counts em.lunas{border-color:#c9ead8;background:#edf9f2;color:#16824d}
#pertihub-root .ph-scan-month>summary{display:grid;grid-template-columns:minmax(230px,1fr) auto minmax(145px,auto);align-items:center}
#pertihub-root .ph-scan-salesman>summary{grid-template-columns:38px minmax(190px,1fr) auto minmax(125px,auto)}
#pertihub-root .ph-scan-period>summary{display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(125px,auto);align-items:center}
#pertihub-root .ph-scan-period-metrics small,#pertihub-root .ph-scan-sales-metrics small{display:block;margin-bottom:2px;font-size:8px;color:#7b8997}
#pertihub-root .ph-scan-faktur-table td.customer{min-width:220px}
#pertihub-root .ph-scan-faktur-table td.customer .customer-name{display:block;color:#193b5c;font-size:11.5px;line-height:1.25;font-weight:800;letter-spacing:.005em}
#pertihub-root .ph-scan-faktur-table td.customer .customer-code{display:block;margin-top:3px;color:#6f8192;font-size:8.5px;font-weight:700;letter-spacing:.02em}
#pertihub-root .ph-scan-month:not([open])>summary,#pertihub-root .ph-scan-salesman:not([open])>summary,#pertihub-root .ph-scan-period:not([open])>summary{box-shadow:inset 0 -1px 0 rgba(29,70,108,.04)}
#pertihub-root .ph-scan-month>summary:hover,#pertihub-root .ph-scan-salesman>summary:hover,#pertihub-root .ph-scan-period>summary:hover{filter:brightness(.992)}
@media(max-width:900px){
  #pertihub-root .ph-scan-month>summary{grid-template-columns:minmax(0,1fr) auto}
  #pertihub-root .ph-scan-month-money{display:none}
  #pertihub-root .ph-scan-salesman>summary{grid-template-columns:34px minmax(0,1fr) auto}
  #pertihub-root .ph-scan-sales-metrics{display:none}
  #pertihub-root .ph-scan-period>summary{grid-template-columns:minmax(0,1fr) auto}
  #pertihub-root .ph-scan-period-metrics{display:none}
}


/* =========================================================
   V5.6.3 — LIST SCAN FAKTUR READABLE + LUNAS FIRST
   Readable typography without oversized rows.
   Row order is handled in scan-faktur.js: lunas first, then newest scan.
   ========================================================= */
#pertihub-root .ph-scan-faktur-table{font-size:11px;line-height:1.32}
#pertihub-root .ph-scan-faktur-table th{padding:8px 10px;font-size:9.5px;line-height:1.25}
#pertihub-root .ph-scan-faktur-table td{padding:8px 10px}
#pertihub-root .ph-scan-faktur-table td.invoice b{font-size:11.2px;line-height:1.25}
#pertihub-root .ph-scan-faktur-table td small{margin-top:3px;font-size:8.8px;line-height:1.25}
#pertihub-root .ph-scan-faktur-table td.customer{min-width:250px}
#pertihub-root .ph-scan-faktur-table td.customer .customer-name{font-size:12.5px;line-height:1.25;font-weight:800}
#pertihub-root .ph-scan-faktur-table td.customer .customer-code{margin-top:3px;font-size:9.2px;line-height:1.2}
#pertihub-root .ph-scan-faktur-table .money{font-size:11.2px;font-weight:650}
#pertihub-root .ph-scan-faktur-table tfoot td{padding:9px 10px;font-size:10.8px}
#pertihub-root .ph-scan-summary-main b{font-size:11.5px;line-height:1.2}
#pertihub-root .ph-scan-summary-main small{font-size:9.5px}
#pertihub-root .ph-scan-summary-counts em{font-size:9px;padding:4px 9px}
#pertihub-root .ph-scan-sales-metrics strong,#pertihub-root .ph-scan-period-metrics strong{font-size:11.5px}

/* =========================================================
   V5.6.5 — LIST SCAN FAKTUR TYPOGRAPHY PROPER
   Stronger table headers and balanced readable table text.
   ========================================================= */
#pertihub-root .ph-scan-faktur-table{font-size:12px;line-height:1.34}
#pertihub-root .ph-scan-faktur-table th{padding:10px 12px;font-size:12px;line-height:1.25;font-weight:800;color:#173b5e;background:#edf4f9;letter-spacing:.005em}
#pertihub-root .ph-scan-faktur-table td{padding:9px 12px;font-size:12px}
#pertihub-root .ph-scan-faktur-table td.invoice b{font-size:12.3px;line-height:1.25;font-weight:800}
#pertihub-root .ph-scan-faktur-table td small{margin-top:3px;font-size:9.5px;line-height:1.25}
#pertihub-root .ph-scan-faktur-table td.customer{min-width:270px}
#pertihub-root .ph-scan-faktur-table td.customer .customer-name{font-size:13px;line-height:1.25;font-weight:800}
#pertihub-root .ph-scan-faktur-table td.customer .customer-code{margin-top:3px;font-size:9.8px;line-height:1.2}
#pertihub-root .ph-scan-faktur-table .money{font-size:12.2px;font-weight:650}
#pertihub-root .ph-scan-faktur-table tfoot td{padding:10px 12px;font-size:12px;font-weight:800}


/* =========================================================
   V5.6.6 — LIST SCAN FAKTUR PERIOD TYPOGRAPHY
   Increase period-card hierarchy/readability without oversizing.
   ========================================================= */
#pertihub-root .ph-scan-period>summary{
  padding:12px 14px;
  min-height:64px;
}
#pertihub-root .ph-scan-period>summary .ph-scan-summary-main span{
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.09em;
}
#pertihub-root .ph-scan-period>summary .ph-scan-summary-main b{
  margin-top:2px;
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  color:#173b5e;
}
#pertihub-root .ph-scan-period>summary .ph-scan-summary-main small{
  margin-top:4px;
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  color:#61788d;
}
#pertihub-root .ph-scan-period>summary .ph-scan-summary-counts em{
  padding:5px 10px;
  font-size:10.5px;
  line-height:1.2;
}
#pertihub-root .ph-scan-period>summary .ph-scan-period-metrics small{
  margin-bottom:3px;
  font-size:9.5px;
  line-height:1.2;
}
#pertihub-root .ph-scan-period>summary .ph-scan-period-metrics strong{
  font-size:13px;
  line-height:1.25;
  font-weight:800;
}
@media(max-width:900px){
  #pertihub-root .ph-scan-period>summary{
    padding:11px 12px;
    min-height:58px;
  }
  #pertihub-root .ph-scan-period>summary .ph-scan-summary-main b{font-size:13px}
  #pertihub-root .ph-scan-period>summary .ph-scan-summary-main small{font-size:10.5px}
  #pertihub-root .ph-scan-period>summary .ph-scan-summary-counts em{font-size:10px}
}

/* V5.7.2 — MENU ROLE SHOW SETTING */
#pertihub-root .ph-role-policy-note{margin:0 0 10px;padding:10px 12px;border:1px solid #d7e2ec;border-radius:10px;background:#f5f9fc;font-size:10px;color:#4b6378}
#pertihub-root .ph-role-section{margin:0 0 10px}
#pertihub-root .ph-role-section h3{margin:0 0 6px;padding:0 2px;font-size:11px;letter-spacing:.04em;color:#31516c;text-transform:uppercase}
#pertihub-root .ph-role-row.locked{background:#f3f8fc;border-color:#bcd2e5}
#pertihub-root .ph-role-row em{display:block;margin-top:3px;font-size:8px;font-style:normal;color:#406c91}


/* ============================================================
   V5.7.7 — LIST SCAN TRAYEK
   ============================================================ */
#pertihub-root .ph-trayek-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
#pertihub-root .ph-trayek-head span{font-size:10px;font-weight:850;letter-spacing:.12em;color:#5f7b94}
#pertihub-root .ph-trayek-head h1{margin:3px 0 2px;font-size:24px;color:#153b5c}
#pertihub-root .ph-trayek-head p{margin:0;color:#6d8091;font-size:12px}
#pertihub-root .ph-trayek-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:13px}
#pertihub-root .ph-trayek-kpis>div{padding:14px 16px;border:1px solid #dbe5ee;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(31,65,94,.045)}
#pertihub-root .ph-trayek-kpis small{display:block;color:#718499;font-size:10px;font-weight:750}
#pertihub-root .ph-trayek-kpis b{display:block;margin-top:4px;color:#173e62;font-size:24px;line-height:1}
#pertihub-root .ph-trayek-kpis .ok b{color:#16824d} #pertihub-root .ph-trayek-kpis .remain b{color:#b26408}
#pertihub-root .ph-trayek-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}#pertihub-root .ph-trayek-toolbar small{color:#72869a;font-size:10px}
#pertihub-root .ph-trayek-month,#pertihub-root .ph-trayek-sales,#pertihub-root .ph-trayek-period{border:1px solid #d7e2ec;border-radius:15px;background:#fff;overflow:hidden;margin-bottom:10px}
#pertihub-root .ph-trayek-month>summary,#pertihub-root .ph-trayek-sales>summary,#pertihub-root .ph-trayek-period>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:linear-gradient(135deg,#edf6ff,#fbfdff)}
#pertihub-root .ph-trayek-sales>summary{display:grid;grid-template-columns:38px minmax(0,1fr) auto;background:#fff;padding:11px 13px}
#pertihub-root .ph-trayek-period>summary{background:#f7f9fb;padding:10px 12px}
#pertihub-root .ph-trayek-month>summary::-webkit-details-marker,#pertihub-root .ph-trayek-sales>summary::-webkit-details-marker,#pertihub-root .ph-trayek-period>summary::-webkit-details-marker{display:none}
#pertihub-root .ph-trayek-month span,#pertihub-root .ph-trayek-sales span,#pertihub-root .ph-trayek-period span{display:block;font-size:9px;letter-spacing:.09em;font-weight:850;color:#6b8297}
#pertihub-root .ph-trayek-month h2{margin:2px 0 0;font-size:18px;color:#174e78;text-transform:capitalize}#pertihub-root .ph-trayek-sales b,#pertihub-root .ph-trayek-period b{display:block;margin-top:2px;font-size:13px;color:#28465f}#pertihub-root .ph-trayek-period small{font-size:10px;color:#7d8e9e}
#pertihub-root .ph-trayek-counts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}#pertihub-root .ph-trayek-counts em{font-style:normal;padding:5px 9px;border-radius:999px;border:1px solid #d6e5f2;background:#eef6fd;color:#286994;font-size:10px;font-weight:800;white-space:nowrap}#pertihub-root .ph-trayek-counts em.ok{background:#edf9f2;border-color:#c6e7d4;color:#16824d}#pertihub-root .ph-trayek-counts em.remain{background:#fff7ea;border-color:#f0dcc0;color:#a25c08}
#pertihub-root .ph-trayek-avatar{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:#e9f3fb;color:#17649d;font-size:11px;font-weight:850}
#pertihub-root .ph-trayek-month-body,#pertihub-root .ph-trayek-sales-body{padding:10px}
#pertihub-root .ph-trayek-table-wrap{overflow:auto;border-top:1px solid #e2e8ee}#pertihub-root .ph-trayek-table{width:100%;min-width:760px;border-collapse:collapse;background:#fff}#pertihub-root .ph-trayek-table th{padding:10px 12px;background:#edf4f9;color:#173b5e;text-align:left;font-size:12px;font-weight:850;border-bottom:1px solid #d2dce5}#pertihub-root .ph-trayek-table td{padding:10px 12px;color:#334c61;font-size:12px;border-bottom:1px solid #edf1f4}#pertihub-root .ph-trayek-table td:first-child b{color:#075fa9;font-size:12.5px}#pertihub-root .ph-trayek-table td:nth-child(3) strong{color:#1c3f5d;font-size:12.5px}
#pertihub-root .ph-trayek-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}.ph-trayek-status.lunas{background:#eaf8f0;color:#137947;border:1px solid #c6e6d3}.ph-trayek-status.open{background:#fff5e8;color:#a65f08;border:1px solid #f0d8b9}
@media(max-width:780px){#pertihub-root .ph-trayek-kpis{grid-template-columns:1fr}#pertihub-root .ph-trayek-toolbar{align-items:stretch;flex-direction:column}#pertihub-root .ph-trayek-sales>summary{grid-template-columns:34px minmax(0,1fr)}#pertihub-root .ph-trayek-sales>summary .ph-trayek-counts{grid-column:1/-1;justify-content:flex-start}#pertihub-root .ph-trayek-period>summary{align-items:flex-start;flex-direction:column}#pertihub-root .ph-trayek-counts{justify-content:flex-start}}


/* V5.7.9 — RAW CSV/XLSX IMPORT */
#pertihub-root .ph-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#pertihub-root .ph-import-trigger{display:inline-flex;align-items:center;gap:7px;font-weight:800}
.ph-import-overlay{position:fixed;inset:0;z-index:999999;background:rgba(12,30,48,.48);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px}
.ph-import-overlay.show{display:flex}
.ph-import-modal{position:relative;width:min(620px,100%);background:#fff;border:1px solid #d9e5ef;border-radius:22px;box-shadow:0 28px 80px rgba(10,35,56,.22);padding:26px}
.ph-import-close{position:absolute;right:16px;top:14px;border:0;background:#f3f6f9;color:#47647c;width:34px;height:34px;border-radius:10px;font-size:22px;cursor:pointer}
.ph-import-kicker{font-size:10px;font-weight:900;letter-spacing:.13em;color:#557895}.ph-import-modal h2{margin:5px 0 7px;color:#123b5f;font-size:24px}.ph-import-desc{margin:0 38px 18px 0;color:#657b8d;font-size:13px;line-height:1.55}
.ph-import-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;border:1.5px dashed #b9ccdc;border-radius:17px;background:#f7fbff;cursor:pointer;padding:20px;text-align:center;transition:.16s ease}.ph-import-drop:hover{border-color:#6e9ac0;background:#f1f8fe}.ph-import-drop input{display:none}.ph-import-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e8f3fc;color:#1767a6;font-size:24px;margin-bottom:8px}.ph-import-drop b{color:#183f60;font-size:14px}.ph-import-drop small{color:#8091a1;margin-top:5px}
.ph-import-file{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding:11px 13px;background:#f7f9fb;border:1px solid #e0e8ef;border-radius:12px}.ph-import-file b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2e506b}.ph-import-file small{color:#7890a4;flex:0 0 auto}
.ph-import-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.ph-import-preview>div{border:1px solid #dce7ef;border-radius:12px;padding:11px;background:#fff}.ph-import-preview b{display:block;font-size:18px;color:#174568}.ph-import-preview span{display:block;font-size:10px;color:#71869a;margin-top:2px}.ph-import-preview .success b{color:#17734a}
.ph-import-error{white-space:pre-line;margin-top:12px;padding:11px 12px;border:1px solid #f0c8c8;background:#fff6f6;border-radius:11px;color:#a93636;font-size:12px}
.ph-import-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.ph-import-submit:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:640px){.ph-import-modal{padding:20px}.ph-import-preview{grid-template-columns:1fr}.ph-import-actions{flex-direction:column-reverse}.ph-import-actions .ph-btn{width:100%}.ph-head-actions{width:100%}}

/* V5.8.0 — blocking progress dialog for trayek import */
.ph-import-progress{text-align:center;padding:14px 8px 8px}
.ph-import-progress-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:22px;background:#eef6ff;display:grid;place-items:center}
.ph-import-progress-icon span{width:28px;height:28px;border:3px solid #c9def0;border-top-color:#1767a6;border-radius:50%;animation:phImportSpin .8s linear infinite}
.ph-import-progress h2{margin:7px auto 8px;max-width:500px;color:#123b5f;font-size:21px;line-height:1.35}
.ph-import-progress p{margin:0;color:#a34a18;font-size:13.5px;font-weight:800}
.ph-import-progress-bar{position:relative;height:9px;overflow:hidden;border-radius:99px;background:#e7eef5;margin:22px 0 11px}
.ph-import-progress-bar i{position:absolute;inset:0 auto 0 -38%;width:38%;border-radius:99px;background:linear-gradient(90deg,#5f9dca,#1767a6,#5f9dca);animation:phImportBar 1.15s ease-in-out infinite}
.ph-import-progress-meta{display:block;color:#71869a;font-size:11.5px}
@keyframes phImportSpin{to{transform:rotate(360deg)}}
@keyframes phImportBar{0%{left:-38%}100%{left:100%}}

/* V5.8.2 List Scan Trayek payment detail + readable counters */
#pertihub-root .ph-trayek-counts{gap:9px}
#pertihub-root .ph-trayek-counts em{padding:7px 12px;font-size:12px;font-weight:900;line-height:1.1}
#pertihub-root .ph-trayek-table-detail{min-width:1280px}
#pertihub-root .ph-trayek-table-detail th{font-size:12.5px;white-space:nowrap}
#pertihub-root .ph-trayek-table-detail td{font-size:12.5px;vertical-align:middle}
#pertihub-root .ph-trayek-table-detail .ph-money{font-weight:800;white-space:nowrap;color:#24465f}
#pertihub-root .ph-trayek-table-detail .ph-money.paid{color:#16824d}
#pertihub-root .ph-trayek-table-detail .ph-money.remain-money{color:#a25c08}
#pertihub-root .ph-payment-id{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:800;color:#31536d;white-space:normal;max-width:210px}

/* =========================================================
   V5.9.6 — REPORT PEMBAYARAN: DATE FILTER + SHARE PDF
   ========================================================= */
.ph-pay-report-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}
.ph-pay-report-date-filter{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  padding:7px 8px;
  border:1px solid #d6e5f4;
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);
  box-shadow:0 5px 16px rgba(21,83,145,.06);
}
.ph-pay-report-date-filter label{
  display:grid;
  gap:3px;
  min-width:132px;
}
.ph-pay-report-date-filter label span{
  padding-left:2px;
  color:#627b95;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ph-pay-report-date-filter input[type="date"]{
  width:100%;
  min-height:36px;
  padding:7px 10px;
  border:1px solid #c8dced;
  border-radius:10px;
  outline:none;
  background:#fff;
  color:#123b66;
  font:700 12px/1.2 inherit;
}
.ph-pay-report-date-filter input[type="date"]:focus{
  border-color:#3489e9;
  box-shadow:0 0 0 3px rgba(52,137,233,.12);
}
.ph-pay-report-reset{
  min-height:36px;
  padding:7px 12px;
  border:1px solid #d2e1ef;
  border-radius:10px;
  background:#f3f8fd;
  color:#365b7d;
  font-weight:800;
  cursor:pointer;
}
.ph-pay-report-reset:hover{background:#eaf4ff}
.ph-pay-report-pdf{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 18px;
  border:1px solid #166ed0;
  border-radius:14px;
  background:linear-gradient(135deg,#0d63c9 0%,#268cf0 100%);
  color:#fff;
  box-shadow:0 10px 24px rgba(19,105,201,.2);
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.ph-pay-report-pdf span{font-size:18px;line-height:1}
.ph-pay-report-pdf:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(19,105,201,.25)}
.ph-pay-report-pdf:disabled{opacity:.65;cursor:wait;transform:none}
@media(max-width:900px){
  .ph-pay-report-actions{width:100%;justify-content:stretch}
  .ph-pay-report-date-filter{flex:1 1 100%}
  .ph-pay-report-date-filter label{flex:1 1 130px}
  .ph-pay-report-pdf{flex:1 1 100%;min-height:46px}
}


/* =========================================================
   V5.9.7 — REPORT PEMBAYARAN: PREMIUM SINGLE ROW + DOWNLOAD PDF
   Desktop: KPI + date range + search + Download PDF = satu row.
   Mobile/tablet tetap responsive tanpa merusak readability.
   ========================================================= */
#pertihub-root .ph-pay-report-head{
  display:grid;
  grid-template-columns:minmax(430px,1.35fr) minmax(330px,.95fr) minmax(240px,.72fr);
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
#pertihub-root .ph-pay-report-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(96px,1fr));
  gap:7px;
  min-width:0;
}
#pertihub-root .ph-pay-report-summary>div{
  min-width:0;
  min-height:58px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#pertihub-root .ph-pay-report-summary small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:8px;
}
#pertihub-root .ph-pay-report-summary strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12.5px;
}
#pertihub-root .ph-pay-report-actions{
  width:auto;
  margin:0;
  display:grid;
  grid-template-columns:minmax(232px,1fr) 132px;
  align-items:stretch;
  gap:8px;
}
#pertihub-root .ph-pay-report-date-filter{
  min-width:0;
  height:58px;
  padding:6px 7px;
  display:grid;
  grid-template-columns:minmax(92px,1fr) minmax(92px,1fr) 58px;
  align-items:end;
  gap:6px;
  flex-wrap:nowrap;
  border-radius:12px;
}
#pertihub-root .ph-pay-report-date-filter label{
  min-width:0;
  display:grid;
  gap:2px;
}
#pertihub-root .ph-pay-report-date-filter label span{
  font-size:8.5px;
}
#pertihub-root .ph-pay-report-date-filter input[type="date"]{
  min-width:0;
  width:100%;
  min-height:32px;
  height:32px;
  padding:5px 7px;
  border-radius:8px;
  font-size:10px;
}
#pertihub-root .ph-pay-report-reset{
  min-width:0;
  min-height:32px;
  height:32px;
  padding:5px 7px;
  border-radius:8px;
  font-size:9px;
}
#pertihub-root .ph-pay-report-pdf{
  width:132px;
  min-height:58px;
  height:58px;
  padding:0 12px;
  border-radius:12px;
  gap:6px;
  white-space:nowrap;
  font-size:11px;
  box-shadow:0 7px 18px rgba(19,105,201,.18);
}
#pertihub-root .ph-pay-report-pdf span{
  font-size:16px;
}
#pertihub-root .ph-pay-report-search{
  width:100%;
  min-width:0;
  height:58px;
  padding:0 11px;
  border-radius:12px;
  flex:initial;
}
#pertihub-root .ph-pay-report-search input{
  min-width:0;
  font-size:9.5px;
}

/* 1366px class desktop: keep everything in one horizontal row. */
@media (min-width:1101px) and (max-width:1450px){
  #pertihub-root .ph-pay-report-head{
    grid-template-columns:minmax(400px,1.28fr) minmax(315px,.92fr) minmax(220px,.68fr);
    gap:8px;
  }
  #pertihub-root .ph-pay-report-summary{
    gap:5px;
  }
  #pertihub-root .ph-pay-report-summary>div{
    padding:7px 8px;
  }
  #pertihub-root .ph-pay-report-actions{
    grid-template-columns:minmax(220px,1fr) 124px;
    gap:6px;
  }
  #pertihub-root .ph-pay-report-pdf{
    width:124px;
    padding:0 9px;
    font-size:10px;
  }
}

/* Tablet/mobile: controlled wrap, not cramped. */
@media(max-width:1100px){
  #pertihub-root .ph-pay-report-head{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  #pertihub-root .ph-pay-report-summary{
    grid-template-columns:repeat(4,minmax(110px,1fr));
    overflow-x:auto;
  }
  #pertihub-root .ph-pay-report-actions{
    grid-template-columns:minmax(0,1fr) 142px;
  }
  #pertihub-root .ph-pay-report-pdf{
    width:142px;
  }
  #pertihub-root .ph-pay-report-search{
    height:44px;
  }
}
@media(max-width:640px){
  #pertihub-root .ph-pay-report-page{
    padding:10px 10px 18px;
  }
  #pertihub-root .ph-pay-report-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;
  }
  #pertihub-root .ph-pay-report-actions{
    grid-template-columns:1fr;
  }
  #pertihub-root .ph-pay-report-date-filter{
    height:auto;
    grid-template-columns:1fr 1fr 62px;
  }
  #pertihub-root .ph-pay-report-pdf{
    width:100%;
    min-height:44px;
    height:44px;
  }
}


/* =========================================================
   V5.9.8 — REPORT PEMBAYARAN PROPER SINGLE ROW
   Rebalance desktop proportions:
   KPI compact, date readable, button proper, search roomy.
   ========================================================= */
@media (min-width:1101px){
  #pertihub-root .ph-pay-report-head{
    display:flex !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    margin-bottom:10px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    flex:0 0 540px !important;
    min-width:540px !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
    overflow:visible !important;
  }

  #pertihub-root .ph-pay-report-summary>div{
    min-width:0 !important;
    min-height:58px !important;
    height:58px !important;
    padding:8px 10px !important;
    border-radius:11px !important;
  }

  #pertihub-root .ph-pay-report-summary small{
    font-size:7.5px !important;
    line-height:1.1 !important;
    margin-bottom:4px !important;
  }

  #pertihub-root .ph-pay-report-summary strong{
    font-size:12px !important;
    line-height:1.1 !important;
  }

  #pertihub-root .ph-pay-report-actions{
    flex:0 0 382px !important;
    min-width:382px !important;
    display:flex !important;
    align-items:stretch !important;
    gap:8px !important;
    margin:0 !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:58px !important;
    padding:6px 8px !important;
    display:grid !important;
    grid-template-columns:minmax(112px,1fr) minmax(112px,1fr) 52px !important;
    gap:6px !important;
    align-items:end !important;
    border-radius:11px !important;
  }

  #pertihub-root .ph-pay-report-date-filter label{
    min-width:0 !important;
    gap:2px !important;
  }

  #pertihub-root .ph-pay-report-date-filter label span{
    font-size:8px !important;
    line-height:1 !important;
  }

  #pertihub-root .ph-pay-report-date-filter input[type="date"]{
    width:100% !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    padding:4px 7px !important;
    font-size:9.5px !important;
    border-radius:8px !important;
  }

  #pertihub-root .ph-pay-report-reset{
    width:52px !important;
    min-width:52px !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    font-size:8.5px !important;
    border-radius:8px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    flex:0 0 118px !important;
    width:118px !important;
    min-width:118px !important;
    height:58px !important;
    min-height:58px !important;
    padding:0 9px !important;
    border-radius:11px !important;
    font-size:9.5px !important;
    gap:5px !important;
    box-shadow:0 5px 14px rgba(20,100,190,.15) !important;
  }

  #pertihub-root .ph-pay-report-pdf span{
    font-size:14px !important;
  }

  #pertihub-root .ph-pay-report-search{
    flex:1 1 260px !important;
    min-width:220px !important;
    max-width:none !important;
    width:auto !important;
    height:58px !important;
    padding:0 12px !important;
    border-radius:11px !important;
  }

  #pertihub-root .ph-pay-report-search input{
    font-size:9.5px !important;
  }
}

/* 1280–1366px desktop tuning */
@media (min-width:1101px) and (max-width:1366px){
  #pertihub-root .ph-pay-report-head{
    gap:8px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    flex-basis:535px !important;
    min-width:535px !important;
    gap:6px !important;
  }

  #pertihub-root .ph-pay-report-actions{
    flex-basis:374px !important;
    min-width:374px !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    grid-template-columns:minmax(108px,1fr) minmax(108px,1fr) 50px !important;
  }

  #pertihub-root .ph-pay-report-reset{
    width:50px !important;
    min-width:50px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    flex-basis:112px !important;
    width:112px !important;
    min-width:112px !important;
  }

  #pertihub-root .ph-pay-report-search{
    min-width:230px !important;
  }
}

/* Under 1100px: graceful two-row responsive layout */
@media (max-width:1100px){
  #pertihub-root .ph-pay-report-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(110px,1fr)) !important;
    gap:7px !important;
    overflow-x:auto !important;
  }

  #pertihub-root .ph-pay-report-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 132px !important;
    gap:8px !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    height:auto !important;
    min-height:56px !important;
    grid-template-columns:1fr 1fr 58px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    width:132px !important;
    min-width:132px !important;
    min-height:56px !important;
    height:56px !important;
  }

  #pertihub-root .ph-pay-report-search{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;
  }
}


/* =========================================================
   V5.9.9 — MATCH USER REFERENCE LAYOUT
   Exact desktop order:
   KPI x4 -> Date filter -> Search -> Download PDF
   ========================================================= */
@media (min-width:1101px){
  #pertihub-root .ph-pay-report-head{
    display:grid !important;
    grid-template-columns:
      minmax(520px, 1.18fr)
      minmax(470px, 1.05fr)
      minmax(320px, .76fr)
      176px !important;
    align-items:stretch !important;
    gap:14px !important;
    width:100% !important;
    margin-bottom:16px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    min-width:0 !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
    overflow:visible !important;
  }

  #pertihub-root .ph-pay-report-summary>div{
    min-width:0 !important;
    height:88px !important;
    min-height:88px !important;
    padding:16px 18px !important;
    border-radius:16px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  #pertihub-root .ph-pay-report-summary small{
    font-size:11px !important;
    line-height:1.15 !important;
    margin-bottom:8px !important;
    white-space:nowrap !important;
  }

  #pertihub-root .ph-pay-report-summary strong{
    font-size:20px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    min-width:0 !important;
    width:100% !important;
    height:88px !important;
    min-height:88px !important;
    padding:11px 14px !important;
    display:grid !important;
    grid-template-columns:minmax(145px,1fr) minmax(145px,1fr) 76px !important;
    gap:10px !important;
    align-items:end !important;
    border-radius:16px !important;
  }

  #pertihub-root .ph-pay-report-date-filter label{
    min-width:0 !important;
    display:grid !important;
    gap:6px !important;
  }

  #pertihub-root .ph-pay-report-date-filter label span{
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  #pertihub-root .ph-pay-report-date-filter input[type="date"]{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    padding:8px 12px !important;
    font-size:14px !important;
    border-radius:11px !important;
  }

  #pertihub-root .ph-pay-report-reset{
    width:76px !important;
    min-width:76px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 10px !important;
    font-size:12px !important;
    border-radius:11px !important;
  }

  #pertihub-root .ph-pay-report-search{
    min-width:0 !important;
    width:100% !important;
    height:88px !important;
    padding:0 18px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
  }

  #pertihub-root .ph-pay-report-search input{
    min-width:0 !important;
    width:100% !important;
    font-size:13px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    width:176px !important;
    min-width:176px !important;
    height:88px !important;
    min-height:88px !important;
    padding:0 18px !important;
    border-radius:16px !important;
    font-size:14px !important;
    gap:8px !important;
    box-shadow:0 8px 22px rgba(20,100,190,.18) !important;
    align-self:stretch !important;
  }

  #pertihub-root .ph-pay-report-pdf span{
    font-size:18px !important;
  }
}

/* Common 1366–1600 desktop: keep reference proportions without clipping. */
@media (min-width:1101px) and (max-width:1600px){
  #pertihub-root .ph-pay-report-head{
    grid-template-columns:
      minmax(470px, 1.18fr)
      minmax(420px, 1.04fr)
      minmax(260px, .72fr)
      150px !important;
    gap:10px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    gap:8px !important;
  }

  #pertihub-root .ph-pay-report-summary>div{
    height:72px !important;
    min-height:72px !important;
    padding:12px 13px !important;
    border-radius:13px !important;
  }

  #pertihub-root .ph-pay-report-summary small{
    font-size:8.5px !important;
    margin-bottom:6px !important;
  }

  #pertihub-root .ph-pay-report-summary strong{
    font-size:15px !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    height:72px !important;
    min-height:72px !important;
    padding:8px 10px !important;
    grid-template-columns:minmax(126px,1fr) minmax(126px,1fr) 62px !important;
    gap:7px !important;
    border-radius:13px !important;
  }

  #pertihub-root .ph-pay-report-date-filter label span{
    font-size:9px !important;
  }

  #pertihub-root .ph-pay-report-date-filter input[type="date"]{
    height:36px !important;
    min-height:36px !important;
    font-size:11px !important;
    padding:6px 8px !important;
  }

  #pertihub-root .ph-pay-report-reset{
    width:62px !important;
    min-width:62px !important;
    height:36px !important;
    min-height:36px !important;
    font-size:9.5px !important;
  }

  #pertihub-root .ph-pay-report-search{
    height:72px !important;
    padding:0 13px !important;
    border-radius:13px !important;
  }

  #pertihub-root .ph-pay-report-search input{
    font-size:10px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    width:150px !important;
    min-width:150px !important;
    height:72px !important;
    min-height:72px !important;
    font-size:11px !important;
    border-radius:13px !important;
  }
}

/* Responsive below desktop width */
@media (max-width:1100px){
  #pertihub-root .ph-pay-report-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    width:100% !important;
    min-height:64px !important;
    grid-template-columns:1fr 1fr 68px !important;
  }

  #pertihub-root .ph-pay-report-search{
    width:100% !important;
    height:48px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
  }
}


/* =========================================================
   V6.0.0 — PAYMENT REPORT FIT REAL 1366 VIEWPORT
   Goal:
   - no horizontal overflow
   - KPI text/value not clipped
   - date fields readable
   - search readable
   - Download PDF fully visible
   ========================================================= */

#pertihub-root .ph-pay-report-page{
  overflow-x:hidden !important;
}

@media (min-width:1101px){
  #pertihub-root .ph-pay-report-head{
    display:grid !important;
    grid-template-columns:
      minmax(0, 1.62fr)
      minmax(0, 1.18fr)
      minmax(0, .88fr)
      122px !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
    margin-bottom:12px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    display:grid !important;
    grid-template-columns:1.25fr .85fr .85fr .95fr !important;
    gap:7px !important;
    min-width:0 !important;
    width:100% !important;
  }

  #pertihub-root .ph-pay-report-summary>div{
    min-width:0 !important;
    height:64px !important;
    min-height:64px !important;
    padding:9px 10px !important;
    border-radius:12px !important;
    overflow:visible !important;
  }

  #pertihub-root .ph-pay-report-summary small{
    font-size:7.5px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    margin-bottom:6px !important;
  }

  #pertihub-root .ph-pay-report-summary strong{
    font-size:13px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px !important;
    gap:5px !important;
    min-width:0 !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    padding:7px 8px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
    align-items:end !important;
  }

  #pertihub-root .ph-pay-report-date-filter label{
    min-width:0 !important;
    display:grid !important;
    gap:3px !important;
  }

  #pertihub-root .ph-pay-report-date-filter label span{
    font-size:7.8px !important;
    line-height:1 !important;
  }

  #pertihub-root .ph-pay-report-date-filter input[type="date"]{
    width:100% !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
    padding:4px 6px !important;
    font-size:10px !important;
    border-radius:8px !important;
    box-sizing:border-box !important;
  }

  #pertihub-root .ph-pay-report-reset{
    width:48px !important;
    min-width:48px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    font-size:8px !important;
    border-radius:8px !important;
  }

  #pertihub-root .ph-pay-report-search{
    min-width:0 !important;
    width:100% !important;
    height:64px !important;
    padding:0 10px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
  }

  #pertihub-root .ph-pay-report-search input{
    min-width:0 !important;
    width:100% !important;
    font-size:8.5px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    width:122px !important;
    min-width:122px !important;
    max-width:122px !important;
    height:64px !important;
    min-height:64px !important;
    padding:0 8px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
    font-size:9px !important;
    gap:4px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }

  #pertihub-root .ph-pay-report-pdf span{
    font-size:13px !important;
  }
}

/* 1200–1366 exact tuning */
@media (min-width:1101px) and (max-width:1366px){
  #pertihub-root .ph-pay-report-head{
    grid-template-columns:
      minmax(0, 1.70fr)
      minmax(0, 1.20fr)
      minmax(0, .90fr)
      116px !important;
    gap:7px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    gap:6px !important;
  }

  #pertihub-root .ph-pay-report-summary>div{
    padding:8px 9px !important;
  }

  #pertihub-root .ph-pay-report-summary strong{
    font-size:12px !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px !important;
    padding:7px !important;
    gap:4px !important;
  }

  #pertihub-root .ph-pay-report-reset{
    width:46px !important;
    min-width:46px !important;
  }

  #pertihub-root .ph-pay-report-search{
    padding:0 9px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    width:116px !important;
    min-width:116px !important;
    max-width:116px !important;
    padding:0 7px !important;
    font-size:8.7px !important;
  }
}

/* Keep mobile/tablet proper */
@media (max-width:1100px){
  #pertihub-root .ph-pay-report-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #pertihub-root .ph-pay-report-summary{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  #pertihub-root .ph-pay-report-date-filter{
    display:grid !important;
    grid-template-columns:1fr 1fr 56px !important;
    width:100% !important;
  }

  #pertihub-root .ph-pay-report-search{
    width:100% !important;
    height:44px !important;
  }

  #pertihub-root .ph-pay-report-pdf{
    width:100% !important;
    max-width:none !important;
    height:46px !important;
    min-height:46px !important;
  }
}


/* =========================================================
   V6.0.2 — ADMIN MARKETING MANUAL VISIT EDIT
   ========================================================= */
#pertihub-root .ph-abs-manual-edit-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid #b7ddff;
  background:linear-gradient(135deg,#eff8ff,#e8f4ff);
  color:#0b65ba;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}
#pertihub-root .ph-abs-photo-inject-btn.manual-edit{
  border-color:#b7ddff;
  background:linear-gradient(135deg,#f7fbff,#e9f5ff);
  color:#075fae;
}
#pertihub-root .ph-abs-manual-edit-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,.9fr);
  gap:14px;
  align-items:center;
  margin:14px 0;
  padding:14px 15px;
  border:1px solid #b9ddfa;
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0,rgba(58,150,255,.12),transparent 34%),
    linear-gradient(135deg,#f8fcff,#eef7ff);
  box-shadow:0 8px 24px rgba(20,89,150,.07);
}
#pertihub-root .ph-abs-manual-edit-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
#pertihub-root .ph-abs-manual-edit-copy small{
  color:#1673c9;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
#pertihub-root .ph-abs-manual-edit-copy b{
  color:#0b3763;
  font-size:15px;
}
#pertihub-root .ph-abs-manual-edit-copy span{
  color:#5c7188;
  font-size:10px;
  line-height:1.45;
}
#pertihub-root .ph-abs-manual-edit-date{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:end;
  min-width:0;
}
#pertihub-root .ph-abs-manual-edit-date label{
  display:grid;
  gap:5px;
  min-width:0;
}
#pertihub-root .ph-abs-manual-edit-date label span{
  color:#46637e;
  font-size:9px;
  font-weight:800;
}
#pertihub-root .ph-abs-manual-edit-date input{
  width:100%;
  min-width:0;
  min-height:38px;
  box-sizing:border-box;
  border:1px solid #bdd8ee;
  border-radius:10px;
  background:#fff;
  color:#123d66;
  padding:7px 9px;
  font:inherit;
  font-size:11px;
  outline:none;
}
#pertihub-root .ph-abs-manual-edit-date input:focus{
  border-color:#2e8ee8;
  box-shadow:0 0 0 3px rgba(46,142,232,.11);
}
#pertihub-root .ph-abs-manual-edit-date .ph-btn{
  min-height:38px;
  white-space:nowrap;
}
@media(max-width:900px){
  #pertihub-root .ph-abs-manual-edit-panel{
    grid-template-columns:1fr;
  }
}
@media(max-width:560px){
  #pertihub-root .ph-abs-manual-edit-date{
    grid-template-columns:1fr;
  }
  #pertihub-root .ph-abs-manual-edit-date .ph-btn{
    width:100%;
  }
}


/* =========================================================
   V6.0.3 — PAYMENT REPORT: DETAIL PDF + SIMPLE PDF
   ========================================================= */
@media (min-width:1101px){
  #pertihub-root .ph-pay-report-head{
    grid-template-columns:
      minmax(0,1.62fr)
      minmax(0,1.18fr)
      minmax(0,.82fr)
      208px !important;
  }

  #pertihub-root .ph-pay-report-pdf-actions{
    width:208px;
    min-width:208px;
    height:64px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    align-items:stretch;
  }

  #pertihub-root .ph-pay-report-pdf-actions .ph-pay-report-pdf{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:64px !important;
    min-height:64px !important;
    padding:0 7px !important;
    font-size:8.5px !important;
    line-height:1.1 !important;
    border-radius:12px !important;
  }

  #pertihub-root .ph-pay-report-pdf-simple{
    color:#1263ad !important;
    background:linear-gradient(135deg,#f5faff,#e8f4ff) !important;
    border:1px solid #a9d2f7 !important;
    box-shadow:0 5px 14px rgba(20,100,190,.08) !important;
  }

  #pertihub-root .ph-pay-report-pdf-simple:hover{
    background:linear-gradient(135deg,#eef7ff,#dcedff) !important;
  }
}

@media (min-width:1101px) and (max-width:1366px){
  #pertihub-root .ph-pay-report-head{
    grid-template-columns:
      minmax(0,1.70fr)
      minmax(0,1.16fr)
      minmax(0,.72fr)
      194px !important;
  }

  #pertihub-root .ph-pay-report-pdf-actions{
    width:194px;
    min-width:194px;
    gap:5px;
  }

  #pertihub-root .ph-pay-report-pdf-actions .ph-pay-report-pdf{
    font-size:8px !important;
    padding:0 5px !important;
  }
}

@media (max-width:1100px){
  #pertihub-root .ph-pay-report-pdf-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  #pertihub-root .ph-pay-report-pdf-actions .ph-pay-report-pdf{
    width:100% !important;
    max-width:none !important;
    height:46px !important;
    min-height:46px !important;
  }
}

@media (max-width:520px){
  #pertihub-root .ph-pay-report-pdf-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V6.0.6 — CLEAR IMPORT SAYA DIALOG FIX
   ========================================================= */
#pertihub-root .ph-clear-import,
.ph-clear-import{
  cursor:pointer;
}
.ph-clear-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(12,31,52,.42);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease,visibility .14s ease;
}
.ph-clear-overlay.show{
  opacity:1;
  visibility:visible;
}
.ph-clear-card{
  width:min(460px,calc(100vw - 32px));
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:13px;
  padding:20px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,rgba(255,105,105,.11),transparent 32%),
    linear-gradient(145deg,#ffffff,#f8fbff);
  box-shadow:0 22px 60px rgba(15,42,72,.28);
  transform:translateY(8px) scale(.985);
  transition:transform .14s ease;
}
.ph-clear-overlay.show .ph-clear-card{
  transform:translateY(0) scale(1);
}
.ph-clear-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(145deg,#fff1f0,#ffe1df);
  color:#d53b32;
  font-size:22px;
  font-weight:900;
  box-shadow:inset 0 0 0 1px #ffc8c4;
}
.ph-clear-copy{
  min-width:0;
}
.ph-clear-copy small{
  display:block;
  margin-bottom:5px;
  color:#6c8198;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.ph-clear-copy h3{
  margin:0 0 7px;
  color:#0e3459;
  font-size:20px;
  line-height:1.15;
}
.ph-clear-copy p{
  margin:0;
  color:#526b82;
  font-size:12px;
  line-height:1.55;
}
.ph-clear-warning{
  margin-top:11px;
  padding:9px 11px;
  border:1px solid #ffe0a8;
  border-radius:10px;
  background:#fff8e9;
  color:#976111;
  font-size:10px;
  font-weight:800;
}
.ph-clear-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:4px;
  padding-top:14px;
  border-top:1px solid #e7eef5;
}
.ph-clear-actions .ph-btn{
  min-height:40px;
  padding:0 15px;
  border-radius:11px;
}
.ph-clear-actions .danger{
  border-color:#e85b52 !important;
  background:linear-gradient(145deg,#ee6258,#d94a42) !important;
  color:#fff !important;
  box-shadow:0 7px 18px rgba(218,70,61,.18);
}
.ph-clear-actions .danger:disabled{
  opacity:.66;
  cursor:wait;
}
.ph-clear-spinner{
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:6px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  vertical-align:-2px;
  animation:phClearSpin .7s linear infinite;
}
@keyframes phClearSpin{
  to{transform:rotate(360deg)}
}
@media(max-width:520px){
  .ph-clear-card{
    grid-template-columns:40px minmax(0,1fr);
    padding:16px;
    border-radius:18px;
  }
  .ph-clear-icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .ph-clear-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .ph-clear-actions .ph-btn{
    width:100%;
  }
}

/* V6.0.40 — PREMIUM USER / CUSTOMER DIALOG */
.ph-user-detail-modal.ph-user-crud-dialog{
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  background:rgba(4,18,35,.48);
  backdrop-filter:blur(7px);
}
.ph-user-crud-dialog .ph-user-detail-panel{
  width:min(920px,96vw);
  height:auto;
  max-height:min(900px,94vh);
  border-radius:22px;
  overflow:hidden;
  background:#f7faff;
  box-shadow:0 28px 80px rgba(7,31,60,.28),0 4px 18px rgba(7,31,60,.12);
  border:1px solid rgba(255,255,255,.82);
}
.ph-user-crud-dialog .ph-user-detail-head{
  padding:20px 22px 16px;
  background:linear-gradient(135deg,#ffffff 0%,#f4f9ff 100%);
}
.ph-user-crud-dialog .ph-user-detail-head h3{font-size:22px;letter-spacing:-.02em}
.ph-user-crud-dialog .ph-user-detail-head p{font-size:10px;max-width:620px}
.ph-user-crud-dialog .ph-user-detail-close{width:38px;height:38px;border-radius:12px;font-size:23px;box-shadow:0 2px 8px rgba(20,62,102,.06)}
.ph-user-crud-dialog .ph-customer-input-card{
  margin:0;
  padding:20px 22px 22px;
  background:#f7faff;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.ph-user-crud-dialog .ph-manual-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 16px;
}
.ph-user-crud-dialog .ph-manual-form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.ph-user-crud-dialog .ph-manual-form-grid label.wide{grid-column:1/-1}
.ph-user-crud-dialog .ph-manual-form-grid label>span{
  display:block;
  font-size:9px;
  font-weight:900;
  color:#496783;
  letter-spacing:.01em;
}
.ph-user-crud-dialog .ph-manual-form-grid input,
.ph-user-crud-dialog .ph-manual-form-grid select,
.ph-user-crud-dialog .ph-manual-form-grid textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #cfdeed;
  border-radius:11px;
  background:#fff;
  color:#14385e;
  padding:10px 12px;
  font:inherit;
  font-size:11px;
  line-height:1.4;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.ph-user-crud-dialog .ph-manual-form-grid input,
.ph-user-crud-dialog .ph-manual-form-grid select{height:40px}
.ph-user-crud-dialog .ph-manual-form-grid textarea{min-height:78px;resize:vertical}
.ph-user-crud-dialog .ph-manual-form-grid input:focus,
.ph-user-crud-dialog .ph-manual-form-grid select:focus,
.ph-user-crud-dialog .ph-manual-form-grid textarea:focus{
  border-color:#5aa2ef;
  box-shadow:0 0 0 3px rgba(90,162,239,.12),0 2px 8px rgba(25,91,150,.06);
}
.ph-user-crud-dialog .ph-manual-form-grid input[readonly]{background:#f1f6fa;color:#59738d}
.ph-user-crud-dialog .ph-customer-input-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #e0eaf4;
}
.ph-user-crud-dialog .ph-customer-input-actions .ph-btn{
  min-width:190px;
  min-height:42px;
  border-radius:11px;
  font-size:10.5px;
  font-weight:900;
}
@media(max-width:760px){
  .ph-user-detail-modal.ph-user-crud-dialog{padding:10px}
  .ph-user-crud-dialog .ph-user-detail-panel{width:100%;max-height:96vh;border-radius:18px}
  .ph-user-crud-dialog .ph-manual-form-grid{grid-template-columns:1fr}
  .ph-user-crud-dialog .ph-manual-form-grid label.wide{grid-column:auto}
  .ph-user-crud-dialog .ph-customer-input-card{padding:16px}
}

/* V6.0.42 — customer-focused CRUD dialog */
.ph-user-crud-dialog .ph-customer-only-panel{width:min(760px,94vw)}
.ph-user-crud-dialog .ph-customer-only-form{padding:22px 24px 24px}
.ph-user-crud-dialog .ph-customer-section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #dfeaf4}
.ph-user-crud-dialog .ph-customer-section-title span{font-size:11px;font-weight:900;color:#173d67}
.ph-user-crud-dialog .ph-customer-section-title small{font-size:8px;font-weight:800;color:#7b91a6;text-transform:uppercase;letter-spacing:.08em}
.ph-user-crud-dialog .ph-customer-only-info{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border:1px solid #d9e7f3;border-radius:12px;background:#f1f7fc;color:#47627e}
.ph-user-crud-dialog .ph-info-icon{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:#dcecff;color:#1769c2;font-weight:900;font-size:11px}
.ph-user-crud-dialog .ph-customer-only-info b{display:block;color:#173d67;font-size:10px}
.ph-user-crud-dialog .ph-customer-only-info p{margin:2px 0 0;font-size:9px;line-height:1.5}

/* V6.0.45 — List User secure PIN visibility + server-side search */
#pertihub-root .ph-user-searchbox{display:flex;align-items:center;gap:7px;height:36px;min-width:300px;padding:0 10px;border:1px solid #cfe0f3;border-radius:10px;background:#fff;color:#55718f}
#pertihub-root .ph-user-searchbox input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:#12385f;font-size:10px;font-weight:700;padding:0!important;box-shadow:none!important}
#pertihub-root .ph-user-pin b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;font-size:11px;color:#0b4f83}
@media(max-width:1100px){#pertihub-root .ph-user-filterbar{flex-wrap:wrap}#pertihub-root .ph-user-searchbox{min-width:240px;flex:1}}


/* V6.0.46 — List User detail PIN + sticky save + search empty-state */
.ph-user-crud-dialog .ph-user-detail-panel{overflow:hidden!important}
.ph-user-crud-dialog .ph-customer-input-card{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto;padding-bottom:0!important}
.ph-user-crud-dialog .ph-customer-input-actions{position:sticky;bottom:0;z-index:8;margin:18px -24px 0!important;padding:14px 24px 16px!important;background:rgba(247,250,255,.97);backdrop-filter:blur(8px);box-shadow:0 -8px 20px rgba(7,31,60,.07);border-top:1px solid #dce8f5}
.ph-user-crud-dialog .ph-customer-input-actions .ph-btn{display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;opacity:1!important}
#pertihub-root .ph-user-search-empty{text-align:center!important;padding:34px 18px!important;color:#5d738a!important;background:#fbfdff}
#pertihub-root .ph-user-search-empty b{display:block;color:#173d67;font-size:12px;margin-bottom:5px}
#pertihub-root .ph-user-search-empty small{display:block;font-size:9px;color:#7890a8}
#pertihub-root .ph-user-detail-grid .ph-user-detail-field small{font-weight:800}
@media(max-width:760px){.ph-user-crud-dialog .ph-customer-input-actions{margin:16px -16px 0!important;padding:12px 16px 14px!important}.ph-user-crud-dialog .ph-customer-input-actions .ph-btn{width:100%;min-width:0}}

/* V6.0.47 — List User smooth search, minimum 3 characters */
.ph-user-searchbox{position:relative}
.ph-user-searchbox .ph-user-search-hint{
  position:absolute;
  left:36px;
  top:calc(100% + 3px);
  font-size:11px;
  line-height:1.2;
  color:#7a8493;
  white-space:nowrap;
  pointer-events:none;
}
.ph-user-searchbox .ph-user-search-hint[data-state="loading"]{font-weight:700}
.ph-user-searchbox .ph-user-search-hint[data-state="active"]{font-weight:600}
.ph-user-filterbar{padding-bottom:16px}

/* V6.0.56: dedicated promo payment groups */
.ph-pay-channel-card.promo,.ph-pay-report-method-group.promo {border:1px solid #fed7aa;}
.ph-pay-channel-card.promo .ph-pay-channel-head,
.ph-pay-report-method-group.promo > summary,
.ph-pay-report-method.promo {background:#fff7ed;color:#9a3412;}
.ph-pay-promo-note {white-space:normal;overflow-wrap:anywhere;color:#9a3412;}

/* PertiHub 6.0.62 - payment photo gallery */
#pertihub-root .ph-payment-photos{margin:14px 0;padding:14px;border:1px solid #dbeafe;border-radius:20px;background:#f8fbff}
#pertihub-root .ph-payment-photos-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
#pertihub-root .ph-payment-photos-head small{display:block;color:#2563eb;font-size:9px;font-weight:900;letter-spacing:.08em}
#pertihub-root .ph-payment-photos-head h3{margin:2px 0;color:#0f172a;font-size:15px;font-weight:950}
#pertihub-root .ph-payment-photos-head p{margin:0;color:#64748b;font-size:10px;font-weight:650}
#pertihub-root .ph-payment-photos-head>span{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:10px;font-weight:900}
#pertihub-root .ph-payment-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#pertihub-root .ph-payment-photo-grid .ph-receipt-card{margin:0;min-width:0}
#pertihub-root .ph-payment-photo-grid .ph-proof-img{width:100%;max-height:360px;object-fit:contain;background:#f1f5f9;border-radius:12px}
@media(max-width:760px){#pertihub-root .ph-payment-photo-grid{grid-template-columns:1fr}}

/* V6.0.63 — PAYMENT PHOTO ROTATION */
#pertihub-root .ph-photo-rotate-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0 10px}
#pertihub-root .ph-photo-rotate-btn{appearance:none;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:10px;padding:7px 10px;font-size:10px;font-weight:900;cursor:pointer;line-height:1;transition:.16s ease}
#pertihub-root .ph-photo-rotate-btn:hover{background:#dbeafe;transform:translateY(-1px)}
#pertihub-root .ph-photo-rotate-btn.ghost{background:#fff;color:#475569;border-color:#e2e8f0}
#pertihub-root .ph-photo-stage{width:100%;height:360px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f1f5f9;border-radius:12px;border:1px solid #e2e8f0}
#pertihub-root .ph-photo-stage .ph-private-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#pertihub-root .ph-photo-stage .ph-proof-img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;border:0!important;border-radius:10px!important;transform-origin:center center;transition:transform .2s ease;background:transparent!important}
.ph-image-modal-body{grid-template-rows:auto 1fr!important;gap:10px!important;overflow:hidden!important}
.ph-image-modal-toolbar{position:relative;z-index:4;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px}
.ph-image-modal-toolbar button{border:1px solid rgba(255,255,255,.24);background:rgba(15,23,42,.78);color:#fff;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:850;cursor:pointer;backdrop-filter:blur(4px)}
.ph-image-modal-toolbar button:hover{background:rgba(30,64,175,.9)}
.ph-image-modal-stage{width:min(94vw,1100px);height:min(82vh,780px);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.ph-image-modal-stage img{width:auto!important;height:auto!important;min-width:0!important;max-width:100%!important;max-height:100%!important;object-fit:contain;transform-origin:center center;transition:transform .2s ease}
@media(max-width:760px){#pertihub-root .ph-photo-stage{height:320px}#pertihub-root .ph-photo-rotate-btn span{display:none}.ph-image-modal-stage{height:76vh}.ph-image-modal-toolbar button{padding:8px 10px;font-size:11px}}


/* V6.0.65 — Visit photo rotation + Official user create/edit */
#pertihub-root .ph-abs-photo-rotate-toolbar{
  display:flex;flex-wrap:wrap;gap:6px;padding:7px 8px;background:#fff;border-top:1px solid #e5edf6;
}
#pertihub-root .ph-abs-photo-rotate-toolbar button{
  border:1px solid #cbd5e1;background:#f8fafc;color:#0f172a;border-radius:9px;
  padding:6px 9px;font-size:10px;font-weight:850;cursor:pointer;
}
#pertihub-root .ph-abs-photo-rotate-toolbar button:hover{background:#eaf2ff;border-color:#93c5fd}
#pertihub-root .ph-abs-photo-stage img{transform-origin:center center;transition:transform .18s ease}
.ph-abs-photo-lightbox-bar{height:auto;min-height:54px;gap:12px}
.ph-abs-photo-lightbox-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.ph-abs-photo-lightbox-actions button{
  width:auto!important;height:36px!important;border-radius:10px!important;padding:0 11px!important;
  font-size:11px!important;font-weight:850!important;
}
.ph-abs-photo-lightbox-actions button.close{width:36px!important;padding:0!important;border-radius:50%!important;font-size:24px!important}
.ph-abs-photo-lightbox-stage img{transform-origin:center center;transition:transform .18s ease}

#pertihub-root .ph-user-type-switch{
  display:flex;gap:8px;padding:12px 28px 0;background:#f8fbff;border-top:1px solid #e2e8f0;
}
#pertihub-root .ph-user-type-switch button{
  border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:12px;padding:9px 14px;
  font-weight:900;cursor:pointer;
}
#pertihub-root .ph-user-type-switch button.active{background:#2563eb;border-color:#2563eb;color:#fff}
@media(max-width:760px){
  .ph-abs-photo-lightbox-actions{justify-content:center}
}


/* =========================================================
   V6.0.66 — GLOBAL SINGLE VERTICAL SCROLL
   One main document scroll for all ERP pages.
   Horizontal table scrolling and overlay/modal scrolling stay intact.
   ========================================================= */
#pertihub-root .ph-main,
#pertihub-root .ph-content{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
}

/* Tree/list pages: remove viewport-height vertical panes. */
#pertihub-root .ph-tree-panel,
#pertihub-root .ph-cp-table-wrap,
#pertihub-root .ph-user-table-wrap{
  max-height:none!important;
  height:auto!important;
}

/* Chat: page scroll is authoritative; no nested message scrollbar. */
#pertihub-root .ph-chat-layout,
#pertihub-root .ph-chat-main,
#pertihub-root .ph-chat-feed{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow-y:visible!important;
}
#pertihub-root .ph-chat-feed{flex:0 0 auto!important;}
#pertihub-root .ph-chat-form{position:static!important;bottom:auto!important;}

/* Announcement Marketing / Customer: list + article grow with document. */
#pertihub-root .ph-ann-center,
#pertihub-root .ph-ann-layout,
#pertihub-root .ph-ann-workspace,
#pertihub-root .ph-ann-list-pane,
#pertihub-root .ph-ann-scroll,
#pertihub-root .ph-ann-article-pane{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow-y:visible!important;
}
#pertihub-root .ph-ann-scroll{flex:0 0 auto!important;}

/* Visit / Absensi main pages: one document scroll instead of lane scrollbars. */
#pertihub-root .ph-abs-page:has(.ph-calendar-fit-shell),
#pertihub-root .ph-calendar-fit-shell,
#pertihub-root .ph-calendar-layout,
#pertihub-root .ph-calendar-main,
#pertihub-root .ph-abs-master-detail.three-lane,
#pertihub-root .ph-abs-spv-list,
#pertihub-root .ph-abs-sales-scroll,
#pertihub-root .ph-abs-master-detail.three-lane>.ph-abs-inspector,
#pertihub-root .ph-abs-left,
#pertihub-root .ph-abs-tree,
#pertihub-root .ph-abs-inspector,
#pertihub-root .ph-abs-visit-list{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow-y:visible!important;
}
#pertihub-root .ph-abs-left,
#pertihub-root .ph-abs-tree,
#pertihub-root .ph-abs-inspector{
  position:static!important;
  top:auto!important;
}
#pertihub-root .ph-calendar-layout{align-items:start!important;}

/* Receive/payment layouts must expand vertically with the page. */
#pertihub-root .ph-receive-layout,
#pertihub-root .ph-receive-card{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow-y:visible!important;
}

/* Keep horizontal data-table scroll where needed; remove only vertical caps. */
#pertihub-root .ph-items-table-wrap,
#pertihub-root .ph-pay-report-table-wrap,
#pertihub-root .ph-scan-faktur-table-wrap,
#pertihub-root .ph-trayek-table-wrap,
#pertihub-root .ph-sheet-wrap{
  max-height:none!important;
}

/* Explicit exception: dialogs, drawers, lightboxes remain independently scrollable. */
#pertihub-root .ph-drawer-body,
.ph-image-modal-body,
.ph-abs-photo-lightbox-stage,
.ph-user-detail-body,
.ph-user-crud-dialog .ph-customer-input-card{
  overscroll-behavior:contain;
}