/* Copied global app.css for immediate loading under css/app.css */

/* Navigation and Logo Styles - Global Override */
.main-nav {
    height: 110px !important;
}

/* Layout tuning variables for profile form columns */
:root {
    --profile-col-gap: 20px;
    --profile-label-width: 140px;
}

.logo-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    padding: 8px !important;
    border-radius: 4px !important;
    transition: opacity 0.2s ease !important;
    height: 94px !important;
    max-height: 94px !important;
    overflow: hidden !important;
}

.logo-link:hover {
    opacity: 0.85 !important;
}

.nav-logo {
    height: calc(100% + 6px) !important; /* slightly taller than navbar to give a stretched look */
    max-height: none !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Subtle contrast for header actions to match Blazor theme */
.signin-btn {
    background: transparent !important;
    color: #ced5d7 !important;
    border: none !important;
}
.signin-btn:hover { opacity: 0.95 !important; }

/* --- User color customizations: use logo silver/blue - #ced5d7 --- */
.main-nav .fa-home {
    color: #ced5d7 !important;
}

/* Make sign-in / logout use the silver-blue accent but keep readable text */
.signin-btn {
    background: #ced5d7 !important;
    color: #0d1117 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
.signin-btn:hover {
    opacity: 0.95 !important;
}

/* Welcome/admin text use the accent */
.welcome-text { color: #ced5d7 !important; }

/* Ensure nav links that should be accent get the color if not otherwise specified */
.main-nav .nav-link.accent, .main-nav .nav-link[data-accent="true"] {
    color: #ced5d7 !important;
}

/* Ensure all top-level nav links use the accent color unless explicitly overridden */
.main-nav .nav-link { color: #ced5d7 !important; }

/* Logout button: transparent background, accent text */
.signin-btn.logout-btn {
    background: transparent !important;
    color: #ced5d7 !important;
    border: 1px solid rgba(206,213,215,0.12) !important;
}
.signin-btn.logout-btn:hover { background: rgba(206,213,215,0.06) !important; }


/* Sign In / Logout: match nav link sizing and use transparent background */
.signin-btn,
.signin-btn.logout-btn {
    font-size: 1rem !important; /* match nav-link font-size */
    padding: 6px 10px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    color: #ced5d7 !important;
}

.signin-btn.logout-btn { /* keep subtle border for logout if desired */
    border: 1px solid rgba(206,213,215,0.08) !important;
}

.welcome-btn {
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
}

@media (max-width: 700px) {
    .main-nav {
        height: 90px !important;
    }

    .logo-link {
        height: 74px !important;
        max-height: 74px !important;
    }

    .nav-logo {
        max-height: 58px !important;
        max-width: 200px !important;
    }

    .signin-btn, .welcome-btn {
        font-size: 2.2rem !important;
        padding: 8px 16px !important;
    }
}

h1:focus {
    outline: none;
}

/* Ensure form fields inside modals have consistent label and control widths */
.app-modal-inner .field { margin-bottom: .75rem; }
.app-modal-inner .field label { display: block; font-size: .9rem; margin-bottom: .25rem; }
.app-modal-inner .field select,
.app-modal-inner .field input,
.app-modal-inner .field textarea {
  display: block;
  width: 100%;
  max-width: 320px; /* keeps controls a reasonable width inside modal */
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42Nzc4IDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Modal styles for Login component (global) */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.app-modal-outer { max-width: 520px; width: 90%; padding: 12px; }
.app-modal-inner { background: #fff; border-radius:8px; padding:18px; box-shadow: 0 8px 24px rgba(2,6,23,0.35); }
.app-modal-inner.small { max-width: 480px; }
.app-modal-header-row { display:flex; justify-content:space-between; align-items:center; }
.app-modal-header { margin:0 0 8px 0; }
.app-modal-btn { padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.app-modal-btn-primary { background:#0b64d6; color:#fff; }
.app-modal-btn-secondary { background:#eee; color:#222; }

/* small responsive tweak */
@media (max-width: 700px) {
  .app-modal-outer { padding: 8px; }
}

/* Damage modal visuals */
/* Ensure SVG is visible and sized inside modal */
.app-modal-inner svg { display:block; width:320px; max-width:100%; height:auto; margin:0 auto; }
.part { fill: #ddd; stroke: #666; cursor: pointer; }
.part.highlight { fill: rgba(255,99,71,0.35); stroke: rgba(255,99,71,0.8); }

/* Helper for invisible SVG hit shapes so they receive pointer events */
/*.svg-hit { pointer-events: all; cursor: pointer; }
*/
/* Toggleable debug helper: add class `debug-svg-hits` to a parent to visualize hit areas */
/*.debug-svg-hits .svg-hit { stroke: rgba(0,200,0,0.75) !important; fill: rgba(0,200,0,0.12) !important; }
*/
.modal-body { display:flex; gap:16px; align-items:flex-start; }
.car-image-column { box-sizing: border-box; flex: 0 0 60%; max-width: 60%; min-width: 320px; padding: 0; display: flex; align-items: flex-start; justify-content: center; }
.car-image-wrapper { position: relative; display: block; width: 100%; max-width: 100%; overflow: hidden; }
.car-image { width: 100%; height: auto; padding-top: 0; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; min-height: 300px; }
.car-image::before { content: ''; display:block; padding-top: var(--image-aspect, 56%); }
.car-image { background-position: center center; position: relative; }
.car-image > * { position: absolute; top:0; left:0; right:0; bottom:0; }
/* Debug outline for painted image rect */
/* .vehicle-grid-debug {
  position: absolute;
 /* border: 2px dashed rgba(255,0,0,0.9);*/
  /*background: rgba(255,0,0,0.06);*/
/*  pointer-events: none;
  z-index: 9999;
} */
/* Temporary debug borders to visualize image and grid boxes */
.car-image, [id^="car-img-"] {
  /* remove light blue inset border used for debugging */
  box-shadow: none;
}
[id^="car-grid-"], .legacy-car-grid {
 /* outline: 3px dashed blue !important;*/
  box-shadow: 0 0 0 2px rgba(0,0,255,0.04) inset;
}
/* Constrain grid/image sizes to preferred values and center them */
.vehicle-grid-wrapper { max-width: 519px; margin: 0 auto; }
.car-image-wrapper { max-width: 519px; margin: 0 auto; }
.car-image { max-width: 410px; margin: 0 auto; }
   .car-grid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-collapse: collapse; z-index: 2; pointer-events: auto; overflow: hidden; box-sizing: border-box; }
   .car-grid td { box-sizing: border-box; padding: 0; margin: 0; }
.car-grid td { padding: 0; margin: 0; box-sizing: border-box; }
/* mapped overlays for table grids (admin only) */
.car-grid.admin-grid td.mapped { background: rgba(255,99,71,0.18); }
.car-grid td:hover { background: yellow; cursor: pointer; }

/* Also support grid implemented with divs (.car-cell) used in the DamageReport component */
/* show cell borders only for admins */
.car-grid.admin-grid .car-cell { box-sizing: border-box; width: 100%; height: 100%; border: 1px solid rgba(0,0,0,0.12); pointer-events: auto; }
.car-grid.admin-grid .car-cell:hover { background: lightblue; cursor: pointer; opacity:50%}
.car-grid .car-cell.mapped.severity-minor { background: rgba(255,235,59,0.45); }
.car-grid .car-cell.mapped.severity-moderate { background: rgba(255,152,0,0.45); }
.car-grid .car-cell.mapped.severity-severe { background: rgba(244,67,54,0.5); }
    .car-grid .car-cell {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        pointer-events: auto;
    }
/* admin-only mapped styling (do not override severity overlays for users) */
.car-grid.admin-grid .car-cell.mapped { background: lightgreen !important; opacity:50%}
.car-grid .car-cell.selected {background: green !important; opacity: 50%}

/* make sure the image sits below the grid overlay */
.car-image { z-index: 1; display: block; }

/* Auction grid (activities-grid) layout: 12 columns matching the vehicle row cells.
   Prevent header text wrapping and ensure consistent column widths. */
.activities-grid {
    display: grid;
    grid-template-columns: 110px 120px 120px 160px 160px 80px 120px 120px 110px 130px 90px 110px 110px 110px;
    gap: 8px 12px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
    .activities-grid .grid-header,
    .activities-grid .grid-cell {
        padding: 8px 6px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #bcc0c1;
    }
    .activities-grid .grid-header {
        text-align: left;
        color: white;
        background: rgba(3,54,91,0.55);
        padding: 6px 8px;
        font-weight: 600;
        border-radius: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 40px;
        display: flex;
        align-items: center;
        padding-top: 10px;
    }

/*.grid-header {
    text-align: left;
    color: white;
    background: rgba(3,54,91,0.85);
    padding: 6px 8px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding-top: 16px;
}
*/
/* Responsive fallback: on narrow screens switch to a stacked layout to avoid tiny columns */
@media (max-width: 900px) {
    .activities-grid { display: block; }
    .activities-grid .grid-header { display: none; }
    .activities-grid .grid-cell { display: flex; align-items: center; padding: 10px 6px; border-bottom: 1px solid rgba(0,0,0,0.04); }
}

/* My Profile page styling */
.profile-container {
    max-width: 1080px;
    margin: 24px auto;
    padding: 28px;
    /*background: linear-gradient(180deg, rgba(20,30,40,0.85), rgba(10,12,16,0.95));*/
    border-radius: 6px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.6);
}

.profile-title {
    text-align: left; /* left align header */
    font-size: 2.25rem;
    margin-bottom: 18px;
    color: #000; /* black title as requested */
    font-weight: 700;
    text-shadow: none;
}

.profile-form { max-width: 820px; margin: 0; }
.profile-card {
    display: block;
    position: relative;
    background: linear-gradient(90deg, #ffffff, #f7fbff) !important;
    background-color: #ffffff !important;
    padding: 22px !important;
    border-radius: 10px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    min-height: 120px !important;
    /* ensure cards are visible even if animations are disabled or earlier rules applied */
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    z-index: 50 !important;
    width: 100%;
}
.profile-card h5 {
    text-align: left; /* align card headings left */
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #000; /* black heading */
}

.form-row { display: grid; gap: 12px; align-items: start; }
.form-row.two-cols { grid-template-columns: repeat(2, 1fr); }
.form-row.two-cols .form-group.four-col { flex: 1 1 0; min-width: 0; }

/* Support a 4-column feel by placing four .four-col items in the row; they will wrap responsively */
.form-row.two-cols { display: flex; flex-wrap: wrap; gap: var(--profile-col-gap); }
.form-row.two-cols { margin-left: calc(var(--profile-col-gap) / -2); margin-right: calc(var(--profile-col-gap) / -2); }
.form-row.two-cols .form-group.four-col { 
    flex: 0 0 calc(50% - var(--profile-col-gap) + (var(--profile-col-gap) / 2)); 
    box-sizing: border-box; 
    padding-left: calc(var(--profile-col-gap) / 2); 
    padding-right: calc(var(--profile-col-gap) / 2); 
    max-width: calc(50% - var(--profile-col-gap) + (var(--profile-col-gap) / 2));
}
.form-row.single-col { grid-template-columns: 1fr; }
.form-group { display:flex; flex-direction:column; width:100%; }
.form-group label { font-size: 0.92rem; margin-bottom:6px; color:#000; display:block; }
.form-control { padding: 8px 10px; border: 1px solid #cfd8e3; border-radius:6px; font-size:0.95rem; color:#000; width:100%; box-sizing:border-box; }

/* Inline label layout for two-column rows (desktop) */
.form-row.two-cols .form-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* allow validation messages to wrap to new line */
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-width: 392px; /* 140px label + 12px gap + 240px input */
}
.form-row.two-cols .form-group label {
    /* use flex-basis so labels are consistent and don't affect input sizing */
    flex: 0 0 var(--profile-label-width); /* fixed label column width */
    margin-bottom: 0;
    margin-right: 0; /* rely on gap between label and input for spacing to avoid double-counting */
    text-align: left;
    padding-right: 0;
}
.form-row.two-cols .form-group .form-control {
    /* inputs fill remaining space reliably but use a fixed visual width so rows match */
    flex: 1 1 auto;
    min-width: 0; /* allow flex to shrink properly */
    display: block;
    box-sizing: border-box;
    margin: 0; /* normalize any extra margins that may cause slight width differences */
    padding-left: 8px;
    padding-right: 8px;
    width: auto !important; /* let inputs fill available space after label + gap */
    height: 35px; /* consistent visual height */
}

/* Make labels and inputs visible and use the logo/teal accent when desired */
.form-row.two-cols .form-group label {
    color: #0a8bd6 !important; /* user-adjusted teal for labels */
    font-weight: 600;
}

/* Inline label layout for single-column rows (company / bank details) */
.form-row.inline-label, .form-row.single-col.inline-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    /* match two-cols row negative margins so group content aligns with two-col rows */
    margin-left: calc(var(--profile-col-gap) / -2);
    margin-right: calc(var(--profile-col-gap) / -2);
}
.form-row.inline-label .form-group, .form-row.single-col.inline-label .form-group {
    /* use the same half-gap padding as two-cols groups so labels stay left-aligned
       but inputs line up with two-column inputs */
    padding-left: calc(var(--profile-col-gap) / 2);
    padding-right: calc(var(--profile-col-gap) / 2);
}
.form-row.inline-label .form-group, .form-row.single-col.inline-label .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.form-row.inline-label .form-group label, .form-row.single-col.inline-label .form-group label {
    flex: 0 0 var(--profile-label-width);
    margin-bottom: 0;
    text-align: left;
    color: #0a8bd6 !important;
    font-weight: 600;
}
.form-row.inline-label .form-group .form-control, .form-row.single-col.inline-label .form-group .form-control {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Inline small spinner used inside modal buttons */
.inline-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.9);
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Modal message styles */
.modal .modal-message { padding: 10px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 0.95rem; }
.modal .modal-message.success { background: #e6ffed; border: 1px solid #bfe6c6; color: #1b5e20; }
.modal .modal-message.error { background: #fff0f0; border: 1px solid #f2b8b8; color: #b00020; }
.modal .modal-message.info { background: #eef6ff; border: 1px solid #c8def8; color: #0b63a8; }

@media (max-width: 860px) {
    .form-row.inline-label, .form-row.single-col.inline-label {
        flex-direction: column;
        margin-left: 0; /* reset margins for stacked layout */
        margin-right: 0;
    }
    .form-row.inline-label .form-group, .form-row.single-col.inline-label .form-group {
        padding-left: 0; /* remove horizontal padding when stacked */
        padding-right: 0;
    }
    .form-row.inline-label .form-group label, .form-row.single-col.inline-label .form-group label {
        flex: 0 0 auto;
        width: 100%;
    }
}
.form-control {
    /* make inputs visible on white card background */
    color: #000 !important; /* input text black */
    background-color: transparent !important; /* blend with card but keep border */
    border: 1px solid #c0c0c0 !important; /* light grey border for visibility */
    box-shadow: none !important;
    display: block !important; /* ensure block-level so width:100% works consistently */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.form-control::placeholder { color: #9fbfcf !important; }

/* Ensure labels/inputs are not hidden by parent color or opacity rules */
.profile-card, .profile-card * { color: inherit !important; opacity: 1 !important; }

.save-profile { padding: 10px 22px; background: linear-gradient(90deg, #0b64d6, #0a8bd6); border: none; color: white; border-radius: 6px; font-weight:700; }
.save-profile:hover { opacity: 0.95; }

/* Fade-in animation for profile cards */
@keyframes profile-card-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Validation message small styling */
.validation-message { color: #d93025; font-size: 0.9rem; margin-top:6px; display:block; }

/* In two-column rows with inline labels, validation messages should not take up horizontal space
   They should wrap to a new line below the input */
.form-row.two-cols .form-group .validation-message {
    flex-basis: 100%;
    width: 100%;
    margin-left: calc(var(--profile-label-width) + 12px); /* align with input, not label */
}

/* small helper text when banking required */
.profile-card .text-muted { color: #6c757d; font-size: 0.85rem; display:block; margin-top:6px; }

@media (max-width: 860px) {
    .form-row.two-cols { grid-template-columns: 1fr; }
    .form-row.two-cols { display: block; }
    .profile-container { padding: 16px; }
    /* revert to stacked labels on small screens */
    .form-row.two-cols .form-group { flex-direction: column; align-items: stretch; }
    .form-row.two-cols .form-group label { width: auto; margin-right: 0; margin-bottom: 6px; }
    .form-row.two-cols .form-group.four-col { width: 100%; }
    .form-row.two-cols .form-group .form-control { max-width: 100% !important; width: 100% !important; height: auto !important; }
}


/* floating tooltip for damage parts */
.damage-tooltip { box-shadow: 0 6px 18px rgba(0,0,0,0.24); }

/* inline SVG part tooltip fallback styling (used by svgPartSelector) */
#svg-part-tooltip { pointer-events: none; position: fixed; display: none; padding: 6px 8px; background: rgba(0,0,0,0.8); color: #fff; border-radius:6px; font-size:12px; z-index:99999; }

/* Specific part styling */
.app-modal-inner svg #windshield,
.app-modal-inner svg #rear-window {
  fill: rgba(173,216,230,0.35); /* faint blue */
  stroke: rgba(100,150,200,0.6);
}

.app-modal-inner svg circle.part {
  fill: #666; /* darker than body */
  stroke: #444;
  transform-box: fill-box;
  transform-origin: center;
  /* make wheels slightly oblong vertically (taller) */
  transform: scale(0.85, 1.15);
}

/* Highlight classes for selected parts */
.svg-highlight-minor { fill: rgba(255,235,59,0.5) !important; stroke: rgba(255,193,7,0.9) !important; }
.svg-highlight-moderate { fill: rgba(255,152,0,0.45) !important; stroke: rgba(255,112,0,0.9) !important; }
.svg-highlight-severe { fill: rgba(244,67,54,0.45) !important; stroke: rgba(211,47,47,0.95) !important; }

/* Global fallback for main layout nav (duplicated from scoped CSS so styles apply immediately)
   This ensures the navigation is styled even if scoped CSS isn't yet generated/loaded in dev. */
.main-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 56px;
 /* background: linear-gradient(90deg, #0b2545, #0f3a6b);*/
 background: black;
  color: #fff;
  padding: 0 12px;
}

.main-nav .nav-item { display: flex; align-items: center; }
    .main-nav .nav-link {
        color: #e1dfdf;
        text-decoration: none;
        padding: 8px 10px;
        border-radius: 4px;
    }
.main-nav .nav-link:hover { background: rgba(255,255,255,0.06); }

.nav-actions { display:flex; gap:8px; align-items:center; margin-left:auto; }
.signin-btn, .welcome-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: #e1dfdf;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.signin-btn:hover, .welcome-btn:hover { background: rgba(255,255,255,0.06); }

.submenu { position: absolute; background: #fff; color:#111; box-shadow: 0 6px 18px rgba(0,0,0,0.16); padding:8px; border-radius:6px; margin-top:6px; list-style:none; }
.submenu .menu-item { padding:6px 10px; cursor:pointer; }
.submenu .menu-item:hover { background:#f2f6fb; }

/* Modal sizing: constrain to viewport and allow scrolling when content is tall */
.app-modal-outer {
    max-width: 880px;
    width: 90%;
    max-height: 140vh; /* limit total modal height */
    overflow: hidden; /* hide overflow so inner area controls scrolling */
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-modal-inner {
    background: #fff;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(2,6,23,0.35);
    width: 100%;
    max-height: calc(70vh - 24px); /* leave small margin from viewport edges */
    overflow: hidden; /* enable internal scrolling for tall content */
    display: flex;
    flex-direction: column;
}

/* Modal body remains flex row but should scroll if needed */
.modal-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    overflow: auto;
    max-height: calc(80vh - 150px); /* leave room for header/footer */
}

/* Image column: center content vertically and allow internal scrolling when necessary */
.car-image-column {
    box-sizing: border-box;
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 260px;
    padding: 0;
    display: flex;
    align-items: center; /* vertical center the image */
    justify-content: center;
    overflow: hidden;
}

/* Wrapper centers the image and contains overlays */
.car-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Ensure <img> scales to available space and doesn't create extra pseudo-element spacing */
.car-image {
    width: 100%;
    height: auto;
    max-width: 410px; /* keep previous visual size constraint */
    max-height: calc(80vh - 220px); /* keep image within modal vertical space */
    display: block;
    background: transparent;
}

    /* Disable aspect-ratio pseudo-element for actual img elements */
    .car-image::before {
        display: none !important;
    }