/*
|--------------------------------------------------------------------------
| ENTREX Customer Portal
|--------------------------------------------------------------------------
|
| Customer-facing portal theme.
|
| This stylesheet is deliberately separate from the internal ENTREX Hub.
| The branding is shared, but the portal is designed to feel simpler,
| cleaner and more customer focused.
|
*/


/* =========================================================
   ROOT
   ========================================================= */

:root {
    --portal-bg: #07101e;
    --portal-bg-deep: #050a12;

    --portal-panel: #111c2e;
    --portal-panel-light: #182640;
    --portal-panel-soft: #0c1627;

    --portal-border: rgba(255, 255, 255, 0.08);
    --portal-border-gold: rgba(209, 170, 67, 0.35);

    --portal-gold: #d1aa43;
    --portal-gold-hover: #e0bd5b;
    --portal-gold-dark: #9f7d2e;

    --portal-text: #f8fafc;
    --portal-text-soft: #aeb9c9;
    --portal-text-muted: #718096;

    --portal-green: #22c55e;
    --portal-green-bg: #13351f;

    --portal-red: #ef4444;
    --portal-red-bg: #371b1f;

    --portal-amber: #facc15;
    --portal-amber-bg: #3a2f13;

    --portal-radius: 16px;
    --portal-radius-small: 10px;

    --portal-shadow:
        0 20px 60px rgba(0, 0, 0, 0.32);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            #16233a 0%,
            var(--portal-bg) 42%,
            var(--portal-bg-deep) 100%
        );

    color: var(--portal-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: var(--portal-gold);
}

a:hover {
    color: var(--portal-gold-hover);
}


/* =========================================================
   AUTH / SETUP SHELL
   ========================================================= */

.portal-auth-page {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 32px 18px;
}

.portal-auth-shell {
    width: 100%;
    max-width: 520px;
}


/* =========================================================
   BRAND
   ========================================================= */

.portal-brand {
    text-align: center;
    margin-bottom: 28px;
}

.portal-brand-name {
    margin: 0;

    color: var(--portal-gold);

    font-size: 38px;
    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.16em;
}

.portal-brand-tagline {
    margin-top: 10px;

    color: #8d9aae;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* =========================================================
   AUTH CARD
   ========================================================= */

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

    padding: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(24, 38, 64, 0.96),
            rgba(15, 25, 43, 0.98)
        );

    border: 1px solid var(--portal-border-gold);
    border-radius: 20px;

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

.portal-eyebrow {
    margin-bottom: 10px;

    color: var(--portal-gold);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.portal-auth-card h1 {
    margin: 0;

    color: #ffffff;

    font-size: 29px;
    line-height: 1.2;
}

.portal-intro {
    margin: 12px 0 0;

    color: var(--portal-text-soft);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   FORMS
   ========================================================= */

.portal-form-group {
    margin-top: 22px;
}

.portal-label {
    display: block;

    margin-bottom: 8px;

    color: #dce4ef;

    font-size: 13px;
    font-weight: 800;
}

.portal-input,
.portal-select,
.portal-textarea {
    width: 100%;

    padding: 14px 15px;

    background: #081222;

    border: 1px solid #33445f;
    border-radius: var(--portal-radius-small);

    color: #ffffff;

    font-family: inherit;
    font-size: 16px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.portal-input:focus,
.portal-select:focus,
.portal-textarea:focus {
    border-color: var(--portal-gold);

    background: #0a1628;

    box-shadow:
        0 0 0 3px rgba(209, 170, 67, 0.12);
}

.portal-input::placeholder,
.portal-textarea::placeholder {
    color: #526178;
}


/* =========================================================
   PASSWORD FIELD
   ========================================================= */

.portal-password-wrap {
    position: relative;
}

.portal-password-wrap .portal-input {
    padding-right: 92px;
}

.portal-password-toggle {
    position: absolute;

    right: 9px;
    top: 50%;

    transform: translateY(-50%);

    padding: 8px;

    border: 0;
    background: transparent;

    color: var(--portal-gold);

    font-size: 11px;
    font-weight: 900;

    cursor: pointer;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.portal-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 18px;

    color: var(--portal-text-soft);

    font-size: 13px;
}

.portal-checkbox-row input {
    width: 18px;
    height: 18px;

    accent-color: var(--portal-gold);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 13px 18px;

    border: 0;
    border-radius: var(--portal-radius-small);

    background: var(--portal-gold);

    color: #111827;

    font-family: inherit;
    font-size: 14px;
    font-weight: 900;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        opacity 0.15s ease;
}

.portal-button:hover {
    background: var(--portal-gold-hover);
    color: #111827;

    transform: translateY(-1px);
}

.portal-button:active {
    transform: translateY(0);
}

.portal-button-full {
    width: 100%;

    margin-top: 24px;
}

.portal-button-secondary {
    background: #2b3b53;
    color: #ffffff;
}

.portal-button-secondary:hover {
    background: #364a67;
    color: #ffffff;
}

.portal-button-danger {
    background: #991b1b;
    color: #ffffff;
}


/* =========================================================
   ALERTS
   ========================================================= */

.portal-alert {
    margin-top: 20px;

    padding: 14px 16px;

    border-radius: var(--portal-radius-small);

    font-size: 13px;
    line-height: 1.65;
}

.portal-alert-error {
    background: var(--portal-red-bg);
    border-left: 4px solid var(--portal-red);
    color: #fecaca;
}

.portal-alert-success {
    background: var(--portal-green-bg);
    border-left: 4px solid var(--portal-green);
    color: #bbf7d0;
}

.portal-alert-warning {
    background: var(--portal-amber-bg);
    border-left: 4px solid var(--portal-amber);
    color: #fde68a;
}

.portal-alert ul {
    margin: 8px 0 0 18px;
    padding: 0;
}


/* =========================================================
   HELP / SECURITY TEXT
   ========================================================= */

.portal-help {
    margin-top: 8px;

    color: var(--portal-text-muted);

    font-size: 12px;
    line-height: 1.6;
}

.portal-divider {
    height: 1px;

    margin: 22px 0;

    background: var(--portal-border);
}

.portal-security-note {
    margin-top: 20px;
    padding-top: 20px;

    border-top: 1px solid var(--portal-border);

    color: var(--portal-text-muted);

    font-size: 12px;
    line-height: 1.65;
}


/* =========================================================
   FOOTER
   ========================================================= */

.portal-footer {
    margin-top: 22px;

    text-align: center;

    color: #627087;

    font-size: 11px;
    line-height: 1.75;
}

.portal-footer strong {
    color: #929fb1;
}


/* =========================================================
   MAIN CUSTOMER PORTAL SHELL
   ========================================================= */

.portal-app {
    min-height: 100vh;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 50;

    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 22px;

    background: rgba(5, 12, 24, 0.96);

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

    backdrop-filter: blur(12px);
}

.portal-topbar-brand {
    color: var(--portal-gold);

    font-size: 21px;
    font-weight: 900;

    letter-spacing: 0.13em;
}

.portal-topbar-user {
    color: var(--portal-text-soft);

    font-size: 13px;
}

.portal-main {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 28px 22px 110px;
}


/* =========================================================
   DASHBOARD HEADER
   ========================================================= */

.portal-page-header {
    margin-bottom: 24px;
}

.portal-page-eyebrow {
    color: var(--portal-gold);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.portal-page-title {
    margin: 6px 0 0;

    color: #ffffff;

    font-size: 30px;
}

.portal-page-subtitle {
    margin: 8px 0 0;

    color: var(--portal-text-soft);

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   CARDS
   ========================================================= */

.portal-card {
    padding: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(24, 38, 64, 0.94),
            rgba(16, 27, 46, 0.96)
        );

    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14);
}

.portal-card + .portal-card {
    margin-top: 16px;
}

.portal-card-title {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
}

.portal-card-text {
    margin: 7px 0 0;

    color: var(--portal-text-soft);

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   DASHBOARD GRID
   ========================================================= */

.portal-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 16px;
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.portal-badge {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;
}

.portal-badge-active {
    background: var(--portal-green-bg);
    color: #86efac;
}

.portal-badge-pending {
    background: var(--portal-amber-bg);
    color: #fde047;
}

.portal-badge-danger {
    background: var(--portal-red-bg);
    color: #fecaca;
}


/* =========================================================
   MOBILE BOTTOM NAVIGATION
   ========================================================= */

.portal-bottom-nav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 60;

    min-height: 72px;

    display: flex;

    background: rgba(4, 10, 20, 0.98);

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

.portal-bottom-nav a {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    color: #76859a;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
}

.portal-bottom-nav a.active {
    color: var(--portal-gold);
}

.portal-bottom-nav-icon {
    font-size: 19px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .portal-auth-page {
        align-items: flex-start;

        padding-top: 30px;
    }

    .portal-auth-card {
        padding: 25px 20px;
    }

    .portal-brand-name {
        font-size: 32px;
    }

    .portal-auth-card h1 {
        font-size: 25px;
    }

    .portal-main {
        padding:
            22px
            14px
            100px;
    }

    .portal-page-title {
        font-size: 26px;
    }

    .portal-topbar {
        padding: 0 15px;
    }

}


@media (min-width: 900px) {

    .portal-bottom-nav {
        left: 50%;

        width: 600px;

        transform: translateX(-50%);

        border-left: 1px solid var(--portal-border);
        border-right: 1px solid var(--portal-border);

        border-radius: 18px 18px 0 0;
    }

}