:root {
    --brand: #4f46e5;          /* indigo */
    --brand-2: #6366f1;
    --ink: #1e2435;
    --muted: #7a8196;
    --soft-bg: #f1f3f9;
    --card: #ffffff;
    --line: #e7eaf2;
    --red: #e11d48;
    --amber: #f59e0b;
    --green: #16a34a;
}

html { font-size: 15px; }

body {
    background: var(--soft-bg);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
}

code { color: #b4258d; }

/* ---------- Auth pages ---------- */
.auth-wrap {
    min-height: 92vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.auth-card { width: 100%; max-width: 380px; border: none; border-radius: 1.1rem; }
.brand-badge {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; letter-spacing: 1px; box-shadow: 0 6px 16px rgba(79,70,229,.35);
}
.otp-input { letter-spacing: .5rem; font-size: 1.5rem; font-weight: 600; }

/* ---------- Nav / tabs ---------- */
.navbar.bg-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important; }
.brand-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #a7f3d0; margin-right: 6px; vertical-align: middle; }
.sticky-tabs { top: 56px; z-index: 1019; border-bottom: 1px solid var(--line); }
.portal-tabs .nav-link { font-size: .82rem; font-weight: 600; padding: .35rem .85rem; color: #5a6274; border-radius: 999px; }
.portal-tabs .nav-link.active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }

/* ---------- Summary stat cards ---------- */
.stat-card {
    display: block; text-decoration: none; text-align: center;
    border-radius: .85rem; padding: .55rem .3rem; color: #fff;
    border: 2px solid transparent; transition: transform .1s, box-shadow .1s;
    box-shadow: 0 3px 10px rgba(20,25,55,.08);
}
.stat-card:hover { transform: translateY(-1px); }
.stat-card:active { transform: scale(.98); }
.stat-overdue { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.stat-soon { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #3d2c00; }
.stat-ok { background: linear-gradient(135deg, #16a34a, #22c55e); }
.stat-card.stat-active { outline: 3px solid rgba(79,70,229,.5); outline-offset: 1px; }
.stat-num { font-size: 1.45rem; font-weight: 800; line-height: 1; }
.stat-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .95; font-weight: 600; }
.stat-amt { font-size: .72rem; font-weight: 700; opacity: .95; }

/* ---------- Filter card ---------- */
.filter-card { border: none; border-radius: .85rem; box-shadow: 0 3px 10px rgba(20,25,55,.06); }

/* ---------- Compact customer cards ---------- */
.cust-card {
    position: relative; border: 1px solid var(--line); border-left: 4px solid var(--line);
    border-radius: .7rem; background: var(--card); overflow: hidden;
    transition: transform .1s, box-shadow .12s; box-shadow: 0 2px 6px rgba(20,25,55,.05);
}
.cust-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,25,55,.12); }
.cust-card.status-expired { border-left-color: var(--red); }
.cust-card.status-soon { border-left-color: var(--amber); }
.cust-card.status-active { border-left-color: var(--green); }
.cust-card.is-hidden { opacity: .6; }
.cc-body { padding: .55rem .6rem; }

.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem; }
.cc-name { font-weight: 700; font-size: .9rem; line-height: 1.15; }
.cc-biz { display: block; font-size: .7rem; color: var(--muted); line-height: 1.1; }

.cc-badge { font-size: .66rem; font-weight: 700; padding: .18rem .4rem; border-radius: 999px; white-space: nowrap; color: #fff; }
.badge-expired { background: var(--red); }
.badge-soon { background: var(--amber); color: #3d2c00; }
.badge-active { background: var(--green); }
.badge-unknown { background: #94a3b8; }

.cc-app { display: inline-block; font-size: .68rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    padding: .14rem .5rem; border-radius: 999px; letter-spacing: .01em;
    box-shadow: 0 1px 3px rgba(79,70,229,.3);
    margin-top: .3rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

.cc-line { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: .35rem; font-size: .76rem; }
.cc-exp { color: var(--ink); font-weight: 600; }
.cc-exp .mut { color: var(--muted); font-weight: 400; }
.cc-amt { font-weight: 800; color: #0f766e; white-space: nowrap; }
.cc-sub { font-size: .7rem; color: var(--muted); margin-top: .15rem; }
.cc-amt-sfx { font-size: .6rem; font-weight: 600; color: var(--muted); margin-left: 1px; }
.cc-prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem .5rem;
    margin-top: .3rem; font-size: .68rem; color: #334155;
    background: #f6f8fc; border: 1px solid var(--line); border-radius: 7px; padding: .3rem .45rem; }
.cc-prices b { color: var(--brand); font-weight: 700; margin-right: 2px; }

.cc-login { font-size: .73rem; margin-top: .3rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.cc-login code { font-size: .73rem; }
.pw .pw-toggle { font-size: .68rem; text-decoration: none; padding: 0 2px; }

.cc-remark { font-size: .68rem; color: var(--muted); margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-actions { display: flex; gap: .3rem; margin-top: .5rem; align-items: center; }
.cc-actions .btn { font-size: .7rem; padding: .2rem .5rem; border-radius: 7px; line-height: 1.2; }
.cc-actions .cc-hideform { margin-left: auto; }
.hidden-pill { font-size: .6rem; background: #64748b; color: #fff; padding: .1rem .35rem; border-radius: 999px; margin-left: .3rem; }

/* Larger touch targets on phones */
@media (max-width: 575.98px) {
    .cc-actions .btn { min-height: 32px; padding: .25rem .6rem; }
    .stat-num { font-size: 1.3rem; }
}