/* 🏠 Hari ini — Purchasing home cards (purchasing-home.js, docs/PURCHASING_UX_PLAN.md 3(a) 3(b)).
   Status colours are the plan's section 3(b) table, all taken from colours the app already uses (stBadge, purchase-orders.css):
   Habis / Terlambat #FEF2F2 #F4B4AE #B42318, Menipis #FFFAEB #F5D58A #9A3412, Sebagian datang #EEF2FF #C7D2FE #4338CA,
   Dipesan #FFFFFF #C7D2FE #4338CA. Amber only where it means "attention" (lesson warning-colors-only-for-warnings). */
.ph-top{padding:10px 12px 4px;max-width:1080px;margin:0 auto}
.ph-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.ph-title{margin:0;font-size:1.15rem;line-height:1.25;color:var(--dark);flex:1;min-width:0}
.ph-title small{font-size:.8rem;font-weight:700;color:var(--muted)}
.ph-date{font-size:.8rem;font-weight:700;color:var(--ink2);white-space:nowrap}
.ph-reload{min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:1rem;cursor:pointer}
.ph-cards{display:grid;gap:6px}
.ph-card{display:flex;flex-direction:column;justify-content:center;gap:2px;width:100%;min-height:56px;padding:8px 12px 8px 12px;text-align:left;background:#fff;border:1px solid var(--border);border-left:4px solid var(--border);border-radius:10px;box-shadow:var(--sh-sm);font:inherit;color:var(--dark);cursor:pointer}
.ph-card:hover{background:#F8FAFC}.ph-card:focus-visible,.ph-reload:focus-visible,.ph-back:focus-visible{outline:3px solid var(--p);outline-offset:2px}
.ph-c-row{display:flex;align-items:center;gap:8px;min-width:0}
.ph-c-title{flex:1;min-width:0;font-size:1rem;line-height:1.3}
.ph-c-title b{font-size:1.1rem}
.ph-c-next{color:var(--p);font-size:1.25rem;font-weight:700;line-height:1}
.ph-c-sub{font-size:.82rem;color:var(--ink2)}
.ph-c-line{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-c-split{flex-shrink:0;font-weight:800;color:var(--dark);white-space:nowrap}
.ph-chip{flex-shrink:0;padding:1px 7px;border:1px solid;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}
.ph-c-habis{border-left-color:#B42318}.ph-chip-habis{background:#FEF2F2;border-color:#F4B4AE;color:#B42318}
.ph-c-menipis{border-left-color:#F5D58A}.ph-chip-menipis{background:#FFFAEB;border-color:#F5D58A;color:#9A3412}
.ph-c-late{border-left-color:#B42318}.ph-chip-late{background:#FEF2F2;border-color:#F4B4AE;color:#B42318}
.ph-c-part{border-left-color:#4338CA}.ph-chip-part{background:#EEF2FF;border-color:#C7D2FE;color:#4338CA}
.ph-c-due{border-left-color:#C7D2FE}.ph-chip-due{background:#FFFFFF;border-color:#C7D2FE;color:#4338CA}
.ph-c-minta{border-left-color:var(--p)}
.ph-done{padding:14px 12px;background:#fff;border:1px solid var(--border);border-radius:10px;color:#05603A;font-weight:750;font-size:.95rem}
.ph-aside{margin:10px 0}.ph-aside:empty{display:none}
.ph-aside-t{font-weight:800;font-size:.95rem;margin:0 0 6px}
@media(min-width:900px){.ph-top{padding:16px 0 4px}.ph-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.ph-aside .ph-cards{grid-template-columns:1fr}.ph-title{font-size:1.35rem}}
@media(max-width:380px){.ph-c-sub{flex-wrap:wrap}.ph-c-line{flex-basis:100%}}
/* the floor-request sheet (read only) */
.ph-ov{position:fixed;inset:0;z-index:300;background:rgba(16,24,40,.35);display:flex;justify-content:center}
.ph-sheet{display:flex;flex-direction:column;width:100%;max-width:640px;height:100%;background:#F8FAFC}
.ph-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border-bottom:1px solid var(--border)}
.ph-back{min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;font:inherit;font-weight:750;cursor:pointer}
.ph-bar-t{font-weight:800;font-size:1rem}
.ph-body{flex:1;overflow-y:auto;padding:10px 12px 24px}
.ph-note{margin:0 0 8px;font-size:.85rem;color:var(--ink2)}
.ph-req{padding:10px 12px;margin:0 0 6px;background:#fff;border:1px solid var(--border);border-radius:10px}
.ph-req-t{font-weight:750;font-size:.95rem;overflow-wrap:anywhere}
.ph-req-s{font-size:.82rem;color:var(--ink2);margin-top:2px}