/*
 * Mobile-first "Penyewa" portal theme — tokens lifted from the ZaloPay
 * DESIGN.md supplied by the client (Bootstrap substrate + a bespoke
 * 9-step color ramp layered on top). Kept in its own stylesheet, separate
 * from app.css (the desktop admin theme), since the two surfaces are
 * intentionally different products sharing one backend.
 */
:root {
    --zp-blue: #0068ff;
    --zp-blue-25: #f2f7ff;
    --zp-blue-50: #e6f0ff;
    --zp-blue-100: #cce1ff;
    --zp-blue-600: #0053cc;
    --zp-blue-700: #003e99;

    --zp-green: #03ca77;
    --zp-green-50: #e6faf1;
    --zp-green-600: #02a25f;

    --zp-red: #e31748;
    --zp-red-50: #fce8ec;
    --zp-red-600: #b61230;

    --zp-orange: #faa828;
    --zp-orange-50: #fff6ea;

    --zp-dark: #001f3e;
    --zp-gray-25: #f2f4f5;
    --zp-gray-50: #e6e9ec;
    --zp-gray-100: #ccd2d8;
    --zp-gray-200: #99a5b2;
    --zp-gray-300: #66798b;

    --zp-radius: 0.5rem;
    --zp-radius-pill: 100px;
    --zp-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --zp-shadow-lift: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

body.portal-body {
    background-color: var(--zp-gray-25);
    color: var(--zp-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    padding-bottom: 76px; /* clears the fixed bottom tab bar */
}

.portal-shell {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #fff;
    position: relative;
}

/* --- Top bar --- */
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--zp-gray-50);
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.portal-brand {
    width: 2rem; height: 2rem;
    border-radius: .6rem;
    background: var(--zp-blue);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.portal-topbar h1 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--zp-dark);
}

/* --- Buttons --- */
.btn-zp-primary {
    background-color: var(--zp-blue);
    color: #fff;
    border: 1px solid var(--zp-blue);
    border-radius: .25rem;
    padding: .6rem 1rem;
    font-weight: 600;
    transition: all .15s ease-in-out;
}
.btn-zp-primary:hover, .btn-zp-primary:focus {
    background-color: var(--zp-blue-600);
    border-color: var(--zp-blue-700);
    color: #fff;
}
.btn-zp-outline {
    background: #fff;
    color: var(--zp-blue);
    border: 1px solid var(--zp-blue);
    border-radius: .25rem;
    padding: .6rem 1rem;
    font-weight: 600;
}
.btn-zp-pill {
    background-color: var(--zp-blue);
    color: #fff;
    border-radius: var(--zp-radius-pill);
    padding: .75rem 2rem;
    font-weight: 600;
    border: none;
}
.btn-google {
    background: #fff;
    color: var(--zp-dark);
    border: 1px solid var(--zp-gray-100);
    border-radius: .25rem;
    padding: .6rem 1rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn-google:hover { background: var(--zp-gray-25); }

/* --- Cards --- */
.zp-card {
    background: #fff;
    border: 1px solid var(--zp-gray-50);
    border-radius: var(--zp-radius);
    box-shadow: var(--zp-shadow);
}
.zp-card-tap {
    transition: box-shadow .15s ease-in-out;
}
.zp-card-tap:active { box-shadow: var(--zp-shadow-lift); }

/* --- Form inputs --- */
.portal-shell .form-control,
.portal-shell .form-select {
    border: 1px solid var(--zp-gray-100);
    border-radius: .25rem;
    padding: .6rem .75rem;
}
.portal-shell .form-control:focus,
.portal-shell .form-select:focus {
    border-color: var(--zp-blue);
    box-shadow: 0 0 0 .2rem var(--zp-blue-100);
}

/* --- Badges (status) --- */
.zp-badge { border-radius: var(--zp-radius-pill); padding: .25rem .65rem; font-size: .72rem; font-weight: 600; }
.zp-badge-blue { background: var(--zp-blue-50); color: var(--zp-blue-700); }
.zp-badge-green { background: var(--zp-green-50); color: var(--zp-green-600); }
.zp-badge-orange { background: var(--zp-orange-50); color: #966518; }
.zp-badge-red { background: var(--zp-red-50); color: var(--zp-red-600); }
.zp-badge-gray { background: var(--zp-gray-50); color: var(--zp-gray-300); }

/* --- Bottom tab bar (mobile app style) --- */
.portal-tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 30;
    background: #fff;
    border-top: 1px solid var(--zp-gray-50);
    box-shadow: 0 -2px 4px 0 rgba(0, 31, 62, 0.08);
    display: flex;
    max-width: 480px;
    margin: 0 auto;
}
.portal-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .55rem 0 .5rem;
    color: var(--zp-gray-300);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
}
.portal-tabbar a i { font-size: 1.25rem; }
.portal-tabbar a.active { color: var(--zp-blue); }

/* --- Promo / hero gradient card --- */
.zp-promo {
    background: linear-gradient(135deg, var(--zp-blue) 0%, var(--zp-blue-700) 100%);
    color: #fff;
    border-radius: 10px;
    padding: 1.25rem;
}

@media (min-width: 480px) {
    .portal-shell { box-shadow: 0 0 40px rgba(0,0,0,.08); }
}