/* Customer portal (my.<domain>): platform.css components plus plans, company cards and mobile menu. */
.dk-plan { position: relative; border: 1px solid var(--dk-line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.dk-plan.hl { border-color: var(--dk-pri2); box-shadow: 0 0 0 3px rgba(22, 119, 210, .10); }
.dk-plan h4 { font-size: 15px; font-weight: 700; margin: 0; } .dk-plan p { margin: 0; font-size: 12.5px; }
.dk-plan-tag { position: absolute; top: -9px; right: 12px; background: var(--dk-pri); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.dk-plan .price b { font-size: 24px; letter-spacing: -.02em; } .dk-plan .price .per { color: var(--dk-muted); margin-left: 4px; }
.dk-plan ul { list-style: none; margin: 4px 0 8px; padding: 0; flex: 1; } .dk-plan li { display: flex; gap: 6px; padding: 2px 0; font-size: 12.5px; } .dk-plan li i { color: var(--dk-ok); font-size: 16px; }
.dk-plan .after { font-size: 12px; min-height: 16px; } .dk-plan .after.ok { color: var(--dk-ok); font-weight: 600; } .dk-plan .after.no { color: var(--dk-bad); }

/* sidebar: company names and a status dot */
.portal .dk-nav a .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal .dk-nav a .dot { width: 7px; height: 7px; border-radius: 50%; background: #8fa0b6; flex: none; }
.portal .dk-nav a .dot.active, .portal .dk-nav a .dot.trial { background: #1fb478; } .portal .dk-nav a .dot.past_due { background: #e0a020; } .portal .dk-nav a .dot.suspended, .portal .dk-nav a .dot.cancelled { background: #d9534f; }
.portal .p-menu { display: none; }

/* company cards on the dashboard */
.p-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 10px; }
.p-co { border: 1px solid var(--dk-line); border-radius: 10px; background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.p-co .h { display: flex; align-items: center; gap: 10px; } .p-co .h .ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #eaf2fd; color: var(--dk-pri); font-size: 19px; flex: none; }
.p-co .h b { display: block; font-size: 14px; } .p-co .h small { color: var(--dk-muted); font-size: 12px; }
.p-co .h .dk-b { margin-left: auto; }
.p-co dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 12.5px; } .p-co dt { color: var(--dk-muted); } .p-co dd { margin: 0; text-align: right; }
.p-co .acts { display: flex; gap: 6px; margin-top: auto; } .p-co .acts .dk-btn { flex: 1; justify-content: center; }
.p-co.add { align-items: center; justify-content: center; border-style: dashed; color: var(--dk-muted); text-decoration: none; min-height: 150px; }
.p-co.add i { font-size: 28px; color: var(--dk-pri); } .p-co.add:hover { border-color: var(--dk-pri2); color: var(--dk-ink); }
.p-link { display: inline-flex; align-items: center; gap: 5px; } .p-link i { font-size: 9px; } .p-link.online i { color: #1fb478; } .p-link.offline i, .p-link.closed i { color: #d9534f; } .p-link.never i { color: #b5bfcc; }

.p-welcome { background: linear-gradient(120deg, #0b4f9c, #0f6fc4 60%, #12805c); color: #fff; border-radius: 12px; padding: 18px 20px; margin-bottom: 10px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.p-welcome h2 { margin: 0; font-size: 18px; color: #fff; } .p-welcome p { margin: 2px 0 0; color: #dbe8fa; } .p-welcome .sp { flex: 1; }
.p-welcome .dk-btn { background: #fff; color: var(--dk-pri); border-color: #fff; }
.p-qr { width: 180px; height: 180px; padding: 8px; background: #fff; border: 1px solid var(--dk-line); border-radius: 10px; }
.p-secret { font: 600 15px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; background: #f6f8fb; border: 1px solid var(--dk-line); border-radius: 8px; padding: 8px 10px; word-break: break-all; }

@media (max-width: 900px) {
    .portal .p-menu { display: inline-flex; }
    .portal .dk-side { display: none; } .portal .dk-side.open { display: flex; }
    .portal .p-who { display: none; }
}