/*
|--------------------------------------------------------------------------
| Privilix Global Application Styles
|--------------------------------------------------------------------------
|
| Base styles used across public pages, authentication screens,
| onboarding pages and common Privilix components.
|
| SaaS dashboard/workspace-specific styling lives in:
| assets/css/privilix-app.css
|
*/

/*
|--------------------------------------------------------------------------
| Design Tokens
|--------------------------------------------------------------------------
*/

:root {
    --pvx-primary: #635bff;
    --pvx-primary-dark: #5048e5;
    --pvx-primary-soft: #f0efff;

    --pvx-text: #0f172a;
    --pvx-text-secondary: #475569;
    --pvx-muted: #64748b;

    --pvx-background: #f8fafc;
    --pvx-surface: #ffffff;
    --pvx-border: #e2e8f0;

    --pvx-success: #16a34a;
    --pvx-warning: #d97706;
    --pvx-danger: #dc2626;

    --pvx-radius-sm: 8px;
    --pvx-radius: 12px;
    --pvx-radius-lg: 16px;

    --pvx-shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.04);

    --pvx-shadow:
        0 10px 30px rgba(15, 23, 42, 0.07);

    --pvx-shadow-hover:
        0 16px 40px rgba(15, 23, 42, 0.10);

    --pvx-transition:
        0.22s ease;
}


/*
|--------------------------------------------------------------------------
| Global Reset
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        'Poppins',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    background:
        var(--pvx-background);

    color:
        var(--pvx-text);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--pvx-text);

    font-weight:
        700;

    line-height:
        1.25;
}

p {
    color:
        var(--pvx-text-secondary);
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    color:
        var(--pvx-text);

    font-weight:
        700;
}

.text-muted {
    color:
        var(--pvx-muted) !important;
}

a {
    color:
        var(--pvx-primary);

    text-decoration:
        none;

    transition:
        color var(--pvx-transition);
}

a:hover {
    color:
        var(--pvx-primary-dark);
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.navbar {
    background:
        var(--pvx-surface);

    border-bottom:
        1px solid var(--pvx-border);
}

.navbar-brand {
    font-size:
        28px;

    font-weight:
        800;

    letter-spacing:
        -0.6px;

    color:
        var(--pvx-text);
}

.navbar-brand:hover {
    color:
        var(--pvx-primary);
}

.nav-link {
    font-weight:
        500;

    color:
        var(--pvx-text-secondary);

    transition:
        color var(--pvx-transition);
}

.nav-link:hover,
.nav-link.active {
    color:
        var(--pvx-primary);
}


/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/

.card {
    border:
        1px solid var(--pvx-border);

    border-radius:
        var(--pvx-radius-lg);

    background:
        var(--pvx-surface);

    box-shadow:
        var(--pvx-shadow-sm);

    transition:
        transform var(--pvx-transition),
        box-shadow var(--pvx-transition),
        border-color var(--pvx-transition);
}

.card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--pvx-shadow-hover);
}

.card-header {
    background:
        transparent;

    border-bottom:
        1px solid var(--pvx-border);

    font-weight:
        600;
}

.card-footer {
    background:
        transparent;

    border-top:
        1px solid var(--pvx-border);
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn {
    border-radius:
        10px;

    font-weight:
        600;

    transition:
        transform var(--pvx-transition),
        box-shadow var(--pvx-transition),
        background var(--pvx-transition);
}

.btn-primary {
    padding:
        11px 24px;

    border-color:
        var(--pvx-primary);

    background:
        var(--pvx-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color:
        var(--pvx-primary-dark);

    background:
        var(--pvx-primary-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 18px rgba(99, 91, 255, 0.22);
}

.btn-outline-primary {
    color:
        var(--pvx-primary);

    border-color:
        var(--pvx-primary);
}

.btn-outline-primary:hover {
    color:
        #ffffff;

    background:
        var(--pvx-primary);

    border-color:
        var(--pvx-primary);
}

.btn-light {
    background:
        #f1f5f9;

    border-color:
        #f1f5f9;

    color:
        var(--pvx-text);
}


/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

.form-label {
    margin-bottom:
        7px;

    color:
        var(--pvx-text);

    font-size:
        14px;

    font-weight:
        600;
}

.form-control,
.form-select {
    min-height:
        46px;

    padding:
        10px 13px;

    border:
        1px solid var(--pvx-border);

    border-radius:
        10px;

    background:
        var(--pvx-surface);

    color:
        var(--pvx-text);

    transition:
        border-color var(--pvx-transition),
        box-shadow var(--pvx-transition);
}

textarea.form-control {
    min-height:
        auto;
}

.form-control:focus,
.form-select:focus {
    border-color:
        var(--pvx-primary);

    box-shadow:
        0 0 0 3px rgba(99, 91, 255, 0.12);
}

.form-control::placeholder {
    color:
        #94a3b8;
}

.form-check-input:checked {
    border-color:
        var(--pvx-primary);

    background-color:
        var(--pvx-primary);
}


/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
*/

.table {
    color:
        var(--pvx-text);
}

.table thead th {
    padding:
        14px 16px;

    border-bottom:
        1px solid var(--pvx-border);

    color:
        var(--pvx-muted);

    font-size:
        12px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}

.table tbody td {
    padding:
        15px 16px;

    border-color:
        var(--pvx-border);

    vertical-align:
        middle;
}

.table tbody tr {
    transition:
        background var(--pvx-transition);
}

.table tbody tr:hover {
    background:
        #fafbff;
}


/*
|--------------------------------------------------------------------------
| Alerts
|--------------------------------------------------------------------------
*/

.alert {
    border:
        0;

    border-radius:
        12px;
}

.alert-success {
    background:
        #ecfdf5;

    color:
        #166534;
}

.alert-danger {
    background:
        #fef2f2;

    color:
        #991b1b;
}

.alert-warning {
    background:
        #fffbeb;

    color:
        #92400e;
}

.alert-info {
    background:
        #eff6ff;

    color:
        #1e40af;
}


/*
|--------------------------------------------------------------------------
| Badges
|--------------------------------------------------------------------------
*/

.badge {
    padding:
        6px 10px;

    border-radius:
        999px;

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.progress {
    height:
        8px;

    border-radius:
        999px;

    background:
        #e9edf5;

    overflow:
        hidden;
}

.progress-bar {
    border-radius:
        999px;

    background:
        var(--pvx-primary);
}


/*
|--------------------------------------------------------------------------
| Authentication / Onboarding
|--------------------------------------------------------------------------
*/

.pvx-auth-wrapper {
    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        32px 16px;
}

.pvx-auth-card {
    width:
        100%;

    max-width:
        480px;

    padding:
        32px;

    border:
        1px solid var(--pvx-border);

    border-radius:
        20px;

    background:
        var(--pvx-surface);

    box-shadow:
        var(--pvx-shadow);
}

.pvx-logo {
    font-size:
        26px;

    font-weight:
        800;

    letter-spacing:
        -0.5px;

    color:
        var(--pvx-primary);
}


/*
|--------------------------------------------------------------------------
| Utility Components
|--------------------------------------------------------------------------
*/

.pvx-surface {
    background:
        var(--pvx-surface);

    border:
        1px solid var(--pvx-border);

    border-radius:
        var(--pvx-radius-lg);

    box-shadow:
        var(--pvx-shadow-sm);
}

.pvx-section-title {
    margin-bottom:
        4px;

    font-size:
        24px;

    font-weight:
        700;
}

.pvx-section-description {
    margin-bottom:
        0;

    color:
        var(--pvx-muted);
}


/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

:focus-visible {
    outline:
        3px solid rgba(99, 91, 255, 0.32);

    outline-offset:
        2px;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (
    max-width: 768px
) {

    .navbar-brand {
        font-size:
            24px;
    }

    .display-4 {
        font-size:
            34px;
    }

    .card:hover {
        transform:
            none;
    }

    .btn-primary {
        padding:
            10px 20px;
    }

    .pvx-auth-card {
        padding:
            24px;
    }
}

/*
|--------------------------------------------------------------------------
| Login / Authentication Experience
|--------------------------------------------------------------------------
*/

.pvx-auth-wrapper {
    min-height:
        calc(100vh - 120px);

    background:
        radial-gradient(
            circle at top left,
            rgba(99, 91, 255, 0.08),
            transparent 34%
        );
}

.pvx-auth-card {
    position:
        relative;

    overflow:
        hidden;
}

.pvx-auth-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        var(--pvx-primary);
}