body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.brand-logo {
    width: 34px;
    height: 34px;
    object-fit: cover;
}

.login-page {
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.85), rgba(32, 201, 151, 0.75)),
        url('https://images.unsplash.com/photo-1486006920555-c77dcf18193c?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}

.login-box {
    width: 410px;
    max-width: calc(100vw - 2rem);
}

.card-soft {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.12);
}

.stat-card {
    background: linear-gradient(135deg, #ffffff, #eef6ff);
    border-left: 4px solid #0d6efd;
}

.table td,
.table th {
    vertical-align: middle;
}

.content-header h1 {
    font-size: 1.65rem;
    font-weight: 700;
}

.img-preview {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.img-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.16);
}

.image-lightbox-img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

.client-portal-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.16), transparent 28%),
        radial-gradient(circle at top right, rgba(32, 201, 151, 0.16), transparent 24%),
        linear-gradient(180deg, #eef4fb 0%, #f8fafc 100%);
}

.client-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #22c55e 100%);
    color: #fff;
    border-radius: 1.4rem;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.18);
    overflow: hidden;
    position: relative;
}

.client-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -30% auto;
    width: 280px;
    height: 280px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
}

.client-hero .row,
.client-hero .btn,
.client-hero a {
    position: relative;
    z-index: 1;
}

.client-hero .brand-mark {
    width: 68px;
    height: 68px;
    border-radius: 1rem;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.15);
}

.client-stat-card {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
}

.client-section-card {
    border: 0;
    border-radius: 1.2rem;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
}

.vehicle-portal-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.85rem 1.5rem rgba(15, 23, 42, 0.06);
}

.vehicle-portal-card .meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.85rem;
    font-weight: 600;
}

.portal-alert-list .list-group-item {
    border: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding-left: 0;
    padding-right: 0;
}

.portal-alert-list .list-group-item:last-child {
    border-bottom: 0;
}

.portal-mini-muted {
    color: #64748b;
    font-size: 0.92rem;
}

.document-preview-image {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 0.75rem;
}

.document-preview-frame {
    width: 100%;
    height: 75vh;
    border: 0;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.document-preview-fallback {
    padding: 3rem 1rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    color: #64748b;
}