:root {
    --pb-bg: #f4f6fb;
    --pb-surface: #ffffff;
    --pb-border: #e7ebf3;
    --pb-text: #1f2733;
    --pb-muted: #6b7688;
    --pb-brand: #4f46e5;
    --pb-brand-soft: #eef0fe;
    --pb-sidebar-w: 252px;
}

body {
    background: var(--pb-bg);
    color: var(--pb-text);
}

/* ---------- App shell ---------- */
.pb-shell { min-height: 100vh; }

.pb-sidebar {
    width: var(--pb-sidebar-w);
    background: var(--pb-surface);
    border-right: 1px solid var(--pb-border);
}
.pb-brand {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pb-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pb-brand-dot {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(135deg, var(--pb-brand), #7c75f0);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .95rem;
}

.pb-nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .8rem;
    margin-bottom: .15rem;
    border-radius: 10px;
    color: var(--pb-muted);
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.pb-nav .nav-link:hover { background: #f1f3f9; color: var(--pb-text); }
.pb-nav .nav-link.active { background: var(--pb-brand-soft); color: var(--pb-brand); }
.pb-nav .nav-link svg { width: 19px; height: 19px; flex: 0 0 auto; }
.pb-nav-section {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--pb-muted); font-weight: 600;
    padding: .4rem .8rem; margin-top: .5rem;
}

/* ---------- Topbar ---------- */
.pb-topbar {
    background: var(--pb-surface);
    border-bottom: 1px solid var(--pb-border);
    position: sticky; top: 0; z-index: 1020;
    min-height: 60px;
}

/* ---------- Main ---------- */
.pb-main { min-width: 0; }
.pb-content { padding: 1.5rem; }
@media (min-width: 992px) {
    .pb-content { padding: 2rem 2.25rem; }
}

.pb-page-title { font-weight: 700; letter-spacing: -.02em; margin: 0; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--pb-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.card .card-body { padding: 1.25rem; }

/* ---------- Stat cards on landing ---------- */
.pb-stat { border-radius: 14px; overflow: hidden; }
.pb-stat .pb-stat-ic {
    width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pb-brand-soft); color: var(--pb-brand);
}
.pb-stat .pb-stat-ic svg { width: 22px; height: 22px; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--pb-muted); font-weight: 600; border-bottom-color: var(--pb-border);
}
.table > tbody td { border-bottom-color: #f0f2f7; vertical-align: middle; }

/* ---------- Buttons / inputs ---------- */
.btn-primary { --bs-btn-bg: var(--pb-brand); --bs-btn-border-color: var(--pb-brand); --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; }
.btn-outline-primary { --bs-btn-color: var(--pb-brand); --bs-btn-border-color: var(--pb-brand); --bs-btn-hover-bg: var(--pb-brand); --bs-btn-hover-border-color: var(--pb-brand); }
.form-control, .form-select { border-radius: 10px; border-color: var(--pb-border); }
.form-control:focus, .form-select:focus { border-color: var(--pb-brand); box-shadow: 0 0 0 .2rem rgba(79,70,229,.15); }
.form-label { font-weight: 600; font-size: .875rem; }

.alert { border-radius: 12px; border: none; }

/* ---------- Guest (auth) screen ---------- */
.pb-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.pb-auth-card { width: 100%; max-width: 420px; }