/* ARSHINET Pelangganku — gaya tambahan. (c) ARSHINET - Risman Jafar, S.Kom. */
.ax-app--pelanggan { --ax-app: #9333EA; }
.right { margin-left: auto; font-weight: 600; }
a.card.stat { color: inherit; text-decoration: none; transition: transform .15s; } a.card.stat:hover { transform: translateY(-2px); }
.stats5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1250px) { .stats5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .stats5 { grid-template-columns: 1fr 1fr; } .stats5 > :last-child { grid-column: 1 / -1; } }
.stat .si-green { background: var(--green-l); color: var(--green); }
.stat .si-amber { background: #fef3c7; color: #b45309; }
.stat .si-orange { background: var(--amber-l); color: var(--amber); }
.stat .si-red { background: var(--red-l); color: var(--red); }
.stat .si-ungu { background: #f3e8ff; color: #9333EA; }
.badge.orange { background: #ffedd5; color: #c2410c; }
.badge.amber { background: #fef3c7; color: #b45309; }
.badge:not(.green):not(.red):not(.blue):not(.amber):not(.orange) { background: var(--soft); color: var(--ink2); }
.mono { font-family: var(--mono); font-size: .95em; }
.w-s { width: 70px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type=search] { flex: 1; min-width: 200px; }
.toolbar select { width: auto; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pills a { padding: 7px 14px; border-radius: 99px; background: var(--soft); color: var(--ink2); font-weight: 600; font-size: 13px; }
.pills a.on { background: var(--blue); color: var(--on-accent, #fff); }

/* daftar pelanggan */
.plist { display: flex; flex-direction: column; }
.prow { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-top: 1px solid var(--line); color: inherit; }
.plist > .prow:first-child { border-top: 0; }
.prow:hover { background: var(--hover, var(--soft)); border-radius: 12px; }
.pav { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--green-l); color: var(--green); }
.pav--segera { background: #fef3c7; color: #b45309; }
.pav--tenggang { background: #ffedd5; color: #c2410c; }
.pav--akan, .pav--isolir { background: var(--red-l); color: var(--red); }
.pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pmain b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmain small, .ptempo small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptempo { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 96px; }
.ptempo b { font-size: 13px; }
@media (max-width: 640px) {
  .prow { flex-wrap: wrap; row-gap: 4px; }
  .pmain { flex-basis: calc(100% - 50px); }
  .ptempo { order: 3; flex-direction: row; gap: 6px; align-items: baseline; margin-left: 50px; min-width: 0; }
  .prow .badge { order: 4; }
}

/* daftar mini */
.mini { display: flex; flex-direction: column; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); color: inherit; }
.mini > .mrow:first-child { border-top: 0; padding-top: 0; }
.mrow > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.mrow small { color: var(--muted); font-size: 12px; }
.mrow .nom { white-space: nowrap; }
.mrow form { margin: 0; }

/* detail */
.pstatus { border-left: 5px solid var(--green); }
.pstatus--segera { border-left-color: #f59e0b; }
.pstatus--tenggang { border-left-color: #ea580c; }
.pstatus--akan, .pstatus--isolir { border-left-color: var(--red); }
.psatas { display: flex; gap: 6px; flex-wrap: wrap; }
.pstempo { display: flex; flex-direction: column; margin-top: 10px; }
.pstempo small { color: var(--muted); font-size: 12px; }
.pstempo b { font-size: 24px; letter-spacing: -.02em; }
.pstempo span { color: var(--ink2); font-size: 13px; }
.pstatus form, .actions form { margin: 0; }
.bayarinfo { background: #f3e8ff; color: #6b21a8; padding: 10px 12px; border-radius: 10px; font-size: 13px; }

/* ambil */
.ambilbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.ambilbar input, .ambilbar select { width: auto; display: inline-block; }
table.ambil input, table.ambil select { min-width: 120px; padding: 6px 8px; }
table.ambil tr.on td { background: #faf5ff; }

.ucard { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.ucard summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ucard form { margin-top: 12px; }
.tips ol { padding-left: 18px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
label.chk { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.grid > div > .card + .card, .grid > div > .card + form { margin-top: 14px; }
@media (max-width: 1100px) { .grid.two > div + div { margin-top: 0; } }