@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.page[b-f966v4p715] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-f966v4p715] {
    flex: 1;
}

.sidebar[b-f966v4p715] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-f966v4p715] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-f966v4p715]  a, .top-row[b-f966v4p715]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-f966v4p715]  a:hover, .top-row[b-f966v4p715]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-f966v4p715]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-f966v4p715] {
        justify-content: space-between;
    }

    .top-row[b-f966v4p715]  a, .top-row[b-f966v4p715]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-f966v4p715] {
        flex-direction: row;
    }

    .sidebar[b-f966v4p715] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-f966v4p715] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-f966v4p715]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-f966v4p715], article[b-f966v4p715] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-f966v4p715] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-f966v4p715] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-4e45iqgy4b] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-4e45iqgy4b] {
    flex: 1;
}

.sidebar[b-4e45iqgy4b] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-4e45iqgy4b] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-4e45iqgy4b]  a, .top-row[b-4e45iqgy4b]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-4e45iqgy4b]  a:hover, .top-row[b-4e45iqgy4b]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-4e45iqgy4b]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-4e45iqgy4b] {
        justify-content: space-between;
    }

    .top-row[b-4e45iqgy4b]  a, .top-row[b-4e45iqgy4b]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-4e45iqgy4b] {
        flex-direction: row;
    }

    .sidebar[b-4e45iqgy4b] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-4e45iqgy4b] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-4e45iqgy4b]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-4e45iqgy4b], article[b-4e45iqgy4b] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-4e45iqgy4b] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4e45iqgy4b] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* Center the whole auth area and stop margin-collapsing */
:global(.auth-shell)[b-9o1bgbok9l] {
    display: flex;
    justify-content: center;
    min-height: 100dvh;
}

/* Wrapper controls the space between branding and card */
:global(.auth-stack.tight)[b-9o1bgbok9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* distance between branding and card */
    margin: 0;
    padding: 0.1px 0; /* prevents margin-collapsing on some layouts */
}

/* LOGO ABOVE TITLE + centered */
:global(.auth-branding.local)[b-9o1bgbok9l] {
    display: flex;
    flex-direction: column; /* logo on top, title under */
    align-items: center;
    justify-content: center;
    gap: 6px; /* space between logo and title */
    margin: 0; /* tight to the card (gap above controls spacing) */
    text-align: center;
}

:global(.auth-branding.local img)[b-9o1bgbok9l] {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

:global(.auth-branding.local h1)[b-9o1bgbok9l] {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1rem, 2.6vw, 1.25rem);
    color: #109c93; /* teal */
}

/* Force a narrow card and remove stray top margins */
:global(.auth-stack.tight > .auth-card)[b-9o1bgbok9l] {
    max-width: 360px !important; /* adjust to 340/320 if you want slimmer */
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 16px 18px;
}

/* Keep inputs compact inside the narrow card */
:global(.auth-card .field)[b-9o1bgbok9l] {
    margin-bottom: 10px;
}

:global(.auth-card .btn-teal)[b-9o1bgbok9l],
:global(.auth-card .btn-google)[b-9o1bgbok9l] {
    height: 42px;
}

/* Eye inside password field */
:global(.field-password)[b-9o1bgbok9l] {
    position: relative;
}

:global(.field-password .eye)[b-9o1bgbok9l] {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    font-size: 1.1rem;
}
/* /Components/Pages/VehicleRenewal.razor.rz.scp.css */
:root[b-gvrh3sax0b] {
    /* Teal palette */
    --teal-50: #e6fffb;
    --teal-100: #b2f5ea;
    --teal-200: #81e6d9;
    --teal-300: #4fd1c5;
    --teal-400: #38b2ac;
    --teal-500: #14a197;
    --teal-600: #0f8078;
    --teal-700: #0b6a63;
    --teal-800: #094f4a;
    --teal-900: #073d39;
    --on-teal: #ffffff;
    --ring-shadow: 0 0 0 .2rem rgba(20,161,151,.28);
    --soft-border: #e9eef3;
    --tile-shadow: 0 .25rem .6rem rgba(0,0,0,.05);
}

/* Header */
.teal.teal-gradient[b-gvrh3sax0b] {
    background: linear-gradient(135deg,var(--teal-600),var(--teal-500));
    border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Badges */
.badge-teal[b-gvrh3sax0b] {
    background: var(--teal-100);
    color: var(--teal-700);
    border: 1px solid var(--teal-200);
    letter-spacing: .35px;
}

/* Buttons */
.btn-teal[b-gvrh3sax0b] {
    background: var(--teal-500);
    color: var(--on-teal);
    border: 1px solid var(--teal-500);
}

    .btn-teal:hover[b-gvrh3sax0b], .btn-teal:focus[b-gvrh3sax0b] {
        background: var(--teal-600);
        border-color: var(--teal-600);
        color: var(--on-teal);
    }

    .btn-teal:focus-visible[b-gvrh3sax0b] {
        box-shadow: var(--ring-shadow);
    }

.btn-outline-teal[b-gvrh3sax0b] {
    background: transparent;
    color: var(--teal-700);
    border: 1px solid var(--teal-300);
}

    .btn-outline-teal:hover[b-gvrh3sax0b], .btn-outline-teal:focus[b-gvrh3sax0b] {
        background: var(--teal-50);
        border-color: var(--teal-400);
        color: var(--teal-800);
    }

    .btn-outline-teal:focus-visible[b-gvrh3sax0b] {
        box-shadow: var(--ring-shadow);
    }

/* Inputs – universal teal look */
.form-control-teal[b-gvrh3sax0b],
.form-select-teal[b-gvrh3sax0b],
input[type="text"].form-control[b-gvrh3sax0b],
input[type="number"].form-control[b-gvrh3sax0b],
input[type="date"].form-control[b-gvrh3sax0b],
select.form-select[b-gvrh3sax0b] {
    border-color: var(--soft-border);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    background-color: #fff;
}

    .form-control-teal:focus[b-gvrh3sax0b],
    .form-select-teal:focus[b-gvrh3sax0b],
    input.form-control:focus[b-gvrh3sax0b],
    select.form-select:focus[b-gvrh3sax0b] {
        border-color: var(--teal-400);
        box-shadow: var(--ring-shadow);
    }

    /* Disabled controls keep consistent tone */
    .form-control-teal:disabled[b-gvrh3sax0b],
    .form-select-teal:disabled[b-gvrh3sax0b],
    input.form-control:disabled[b-gvrh3sax0b],
    select.form-select:disabled[b-gvrh3sax0b] {
        background: #f6fbfb;
        color: #6b7280;
        border-color: #e3f2f1;
        opacity: 1;
    }

/* Select caret with teal stroke (SVG data URI, no external asset) */
.form-select-teal[b-gvrh3sax0b],
select.form-select[b-gvrh3sax0b] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2314a197' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px 12px;
    padding-right: 2.2rem;
}

/* Switch */
.form-switch .form-check-input.form-switch-teal[b-gvrh3sax0b] {
    width: 2.5rem;
    height: 1.25rem;
    background-color: #eaf7f6;
    border-color: #bfe9e5;
}

    .form-switch .form-check-input.form-switch-teal:focus[b-gvrh3sax0b] {
        box-shadow: var(--ring-shadow);
        border-color: var(--teal-400);
    }

    .form-switch .form-check-input.form-switch-teal:checked[b-gvrh3sax0b] {
        background-color: var(--teal-500);
        border-color: var(--teal-500);
    }

/* Tiles */
.info-tile[b-gvrh3sax0b] {
    background: #fff;
    border: 1px solid var(--soft-border);
    border-radius: .9rem;
    padding: .95rem 1rem;
    box-shadow: var(--tile-shadow);
}

    .info-tile .label[b-gvrh3sax0b] {
        font-size: .8rem;
        color: #64748b;
        letter-spacing: .28px;
        margin-bottom: .2rem;
        text-transform: uppercase;
    }

    .info-tile .value[b-gvrh3sax0b] {
        font-weight: 600;
        color: #0f172a;
        word-break: break-word;
    }

/* Divider */
.soft-divider[b-gvrh3sax0b] {
    border-top: 1px dashed rgba(15,23,42,.12);
}

/* Alerts with teal accents */
.alert-teal[b-gvrh3sax0b] {
    border-left: 4px solid var(--teal-400);
    background: linear-gradient(0deg,#f7fffe,#ffffff);
}

.alert-teal-danger[b-gvrh3sax0b] {
    border-left: 4px solid #ef4444;
    background: linear-gradient(0deg,#fff8f8,#ffffff);
}

/* Validation summary styling */
.validation-summary[b-gvrh3sax0b] {
    border-left: 4px solid var(--teal-400);
    background: #f6fffe;
    padding: .75rem 1rem;
    border-radius: .6rem;
    margin-bottom: .9rem;
}

/* Placeholders / skeleton shimmer */
.skel-line[b-gvrh3sax0b] {
    height: 38px;
    border-radius: .6rem;
    background-image: linear-gradient(90deg,#f2f7f9 0%,#e9f2f4 20%,#f2f7f9 40%,#f2f7f9 100%);
    background-size: 200% 100%;
    animation: shimmer-b-gvrh3sax0b 1.2s infinite;
}

@keyframes shimmer-b-gvrh3sax0b {
    to {
        background-position: -200% 0;
    }
}

/* Card polish */
.card[b-gvrh3sax0b] {
    border-color: #eef3f6;
}

.card-header[b-gvrh3sax0b] {
    padding: .85rem 1rem;
}

/* Small helpers */
.text-muted[b-gvrh3sax0b] {
    color: #6b7280 !important;
}