/* Scoped overrides loaded last to win over site.css */
.panel label,
.profile-card label,
.profile-layout .panel label,
.profile-layout label {
    color: goldenrod !important;
    text-align: left !important;
    font-weight: 600 !important;
}

/* Page-specific override: ensure the auctions / activities grid can overflow horizontally
   and is not constrained by other layout centering rules. This makes the grid behave
   like a wide, table-like component that scrolls horizontally on standard laptop viewports.
   Targets .auctions-section used by Index.cshtml so other pages are unaffected. */
.auctions-section {
    box-sizing: border-box;
    width: 100%;
    padding: 0; /* let inner wrapper control padding */
}
.auctions-section .activities-grid-wrapper {
    display: block !important;
    width: 100% !important; /* fill available body-content width so scroll bar spans container */
    overflow-x: auto !important; /* enable horizontal scrolling */
    -webkit-overflow-scrolling: touch !important;
    padding: 0 6px; /* small inner padding so tiles don't touch edges */
    margin: 0 auto !important;
}
.auctions-section .activities-grid {
    /* allow intrinsic grid width (max-content) while letting wrapper provide scrolling */
    width: max-content !important;
    min-width: 720px !important; /* sensible minimum for very small screens */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Stronger layout override to defeat body-content padding/centering so the auctions
   section can span the full page and allow horizontal scrolling. This intentionally
   uses negative margins to cancel the .body-content padding so the grid's scrollbar
   reaches the viewport edges on laptop screens. */
.auctions-section {
    box-sizing: border-box !important;
    width: calc(100% + 32px) !important; /* compensate for body-content padding:16px */
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 0 0 !important;
    text-align: left !important; /* avoid inherited centering */
}
.auctions-section .activities-grid-wrapper {
    /* Center the intrinsic-width grid inside the wrapper while still allowing
       horizontal scrolling when the grid is wider than the viewport. Keep
       vertical scrolling inside the wrapper so headers can be made sticky.
       max-height keeps the wrapper from growing beyond the viewport. */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    overflow-x: auto !important; /* horizontal scroll when needed */
    overflow-y: auto !important; /* allow vertical scrolling inside wrapper */
    -webkit-overflow-scrolling: touch !important;
    padding: 0 12px !important;
    margin: 0 auto !important;
    text-align: left !important; /* ensure child inline elements don't center */
    max-height: calc(100vh - 220px) !important; /* keep wrapper vertically constrained so headers can stick */
}
.auctions-section .activities-grid {
    width: max-content !important;
    min-width: 1540px !important; /* ensure the grid keeps horizontal layout */
}

/* Authoritative column definition: ensure the template has exactly as many
   columns as there are header cells. Use !important so this wins over other
   stylesheet rules and keeps headers from wrapping into the next row. */
    .auctions-section .activities-grid.app-grid {
        /* Adjusted column widths to match measured header+cell sizes so headers do not wrap
       and cells align under their headers. Values chosen from runtime diagnostics. */
        /* Columns: register, images, make, mmcode, model, year, condition, mileage,
       reservePrice, currentBid, damages, location, autobid, manualbid, sellerRating
       (remove the tradeValue track so template matches Index.cshtml headers) */
        /* Include TradeValue (Trade Price) column after Reserve Price so template matches Index.cshtml headers */
        /* grid-template-columns: 110px 120px 140px 160px 160px 90px 120px 100px 120px 110px 130px 110px 130px 110px 110px 120px !important; */
        grid-template-columns: 110px 120px 140px 160px 160px 90px 120px 100px 120px 110px 130px 110px 130px 110px 110px !important;
    }

/* Force the auctions grid to remain a grid at all viewport sizes so it does
   not switch to the stacked/mobile layout. This defeats the generic responsive
   fallback only for the auctions section where we prefer horizontal scrolling. */
.auctions-section .activities-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    gap: 8px 12px !important;
    align-items: center !important;
}

/* Also override the responsive rule that switches .activities-grid to block
   below 900px for the auctions section specifically. */
@media (max-width: 900px) {
    .auctions-section .activities-grid {
        display: grid !important;
    }
    .auctions-section .activities-grid .grid-header { display: block !important; }
}

/* Keep body-content-scoped rules minimal so the auctions section behaves normally
   within the page layout. */
.body-content .auctions-section {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
}
.body-content .auctions-section .activities-grid-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
}
.body-content .auctions-section .activities-grid {
    width: max-content !important;
    min-width: 1540px !important;
}

/* Prevent header text wrapping by ensuring headers keep no-wrap and a slightly
   increased min-width per header tile so labels fit without wrapping. This
   complements the non-breaking-space replacements in the Razor markup. */
.auctions-section .activities-grid .grid-header {
    white-space: nowrap !important;
    min-width: 90px !important; /* ensure small headers have room */
}

/* Make headers sticky so they remain visible while vertically scrolling the grid */
.auctions-section .activities-grid.app-grid {
    position: relative; /* establish containing block for sticky headers */
}
.auctions-section .activities-grid.app-grid .grid-header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* stick to top of wrapper */
    z-index: 5; /* sit above grid cells */
    background: rgba(3,54,91,0.85) !important; /* ensure header background covers content behind */
}

.auctions-section .activities-grid .mmcode-header { min-width: 120px !important; }
.auctions-section .activities-grid .make-header { min-width: 140px !important; }
.auctions-section .activities-grid .price-header { min-width: 110px !important; }
.auctions-section .activities-grid .current-bid-header { min-width: 120px !important; }

/* Ensure the data cells match header widths so gaps appear correctly between columns */
.auctions-section .activities-grid .current-bid-cell { min-width: 120px !important; box-sizing: border-box !important; }
.auctions-section .activities-grid .damages-cell { min-width: 110px !important; box-sizing: border-box !important; }

/* Enforce consistent grid gap for the auctions grid container */
.auctions-section .activities-grid.app-grid { gap: 8px 12px !important; }


/* Always show horizontal scrollbar for auctions grid wrapper and ensure
   it scrolls horizontally with mouse/touch. Use scroll (not auto) so the
   scrollbar UI appears on platforms where it's hidden by default. */
/* Use default OS scrollbars and allow vertical scroll inside wrapper; remove
   custom scrollbar styling to defer to platform defaults. */
.auctions-section .activities-grid-wrapper {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Ensure headers never wrap */
.auctions-section .activities-grid .grid-header {
    white-space: nowrap !important;
}

/* Star rating styles for seller rating (goldenrod).
   JS should set --percent (e.g., 0%..100%) based on score. */
.star-rating {
    display: inline-block;
    font-size: 0; /* hide text nodes */
    line-height: 1;
}
.star-rating::before {
    content: "★★★★★";
    letter-spacing: 3px;
    font-size: 1rem;
    --fill: var(--percent, 0%);
    background: linear-gradient(90deg, goldenrod var(--fill), #ddd var(--fill));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.star-rating[data-score] {
    /* data-score expected 0..10; JS maps to --percent for 5 stars */
}


/* Modal and shared vehicle info header styles */
.modal-content.modal-content--narrow {
    max-width: 650px;
    width: 30%;
}
@media (max-width: 900px) {
    .modal-content.modal-content--narrow { width: 90%; }
}

.app-modal-header-row {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 12px 16px !important;
    background-color: #000 !important;
    position: relative !important;
}
.app-modal-header-row .nav-btn{
    background:transparent !important;
    border:0 !important;
    cursor:pointer;
    color: #fff !important;
}

.app-modal-header { 
    margin:0 !important; 
    font-size:1.6rem !important; 
    font-weight:700 !important;
    color: goldenrod !important;
    text-align: center !important;
    line-height: 1.15 !important;
}

.app-modal-header-row .close-modal {
    position: absolute !important;
    right: 16px !important;
    background: transparent !important;
    border: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
}

.app-modal-header-row .close-modal:hover {
    color: #ccc !important;
}

.app-modal-header-row img.modal-logo {
    height: 40px !important;
    display: block !important;
    position: absolute !important;
    left: 16px !important;
}

.vehicle-info-box {
    background:#f0f8ff !important;
    padding:12px !important;
    border-radius:6px !important;
}
.vehicle-title { margin-top:8px !important; font-weight:600 !important; }
.vehicle-price { margin-top:6px !important; color:#444 !important; font-weight:600 !important; }

.modal-body--padded { padding:18px !important; }
.modal-requirements { margin:12px 18px 18px 18px !important; font-size:13px !important; color:#666 !important; }

/* Two-column modal body helper used by damages modal */
.modal-body--two-column { display:flex; gap:16px; padding-top:12px; }

/* Generic section spacing inside modals */
.modal-section { margin-bottom:16px; }

/* Modal details grid helper */
.modal-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }

/* Stacked action buttons column for modals like Register */
.modal-actions--stacked { display:flex; flex-direction:column; gap:12px; }

/* Small helper for inline value items */
.inline-value { display:inline-block; margin-left:8px; }

/* Button variants used in register modal */
.btn--ozow { padding:12px 18px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; border:none; border-radius:6px; }
.btn--manual { padding:12px 18px; background:#28a745; color:#fff; border:none; border-radius:6px; }
.btn--muted { padding:10px 18px; background:#e0e0e0; border:none; border-radius:6px; }

/* Small muted note area used in various modals */
.modal-note { font-size:12px; color:#666; padding-top:6px; }

/* Register button visual states */
.register-btn.registered {
    background:#28a745 !important;
    color:green !important;
    border-color: #28a745 !important;
}

/* Unregister button */
.unregister-btn {
    margin-top:6px !important;
    padding:6px 10px !important;
    background:#fff !important;
    color:#28a745 !important;
    border:1px solid #28a745 !important;
    border-radius:6px !important;
    cursor:pointer !important;
}

/* Additional modal widths */
.modal-content--medium { max-width: 600px; width: 40%; }
.modal-content--wide { max-width: 720px; width: 48%; }
@media (max-width: 900px) {
  .modal-content--medium, .modal-content--wide { width: 95%; }
}

/* Modal action container (buttons) */
.modal-actions { display:flex; gap:12px; justify-content:flex-end; border-top:1px solid #e9e9e9; padding-top:12px; }
.modal-actions .btn { min-width:90px; }

/* Utility vehicle info box used in modal bodies */
.vehicle-info-box { background:#f0f8ff; padding:14px; border-radius:6px; }
.vehicle-info-box .vehicle-title { margin-top:8px; }



/* Ensure grid headers and cells have identical vertical sizing and alignment
   so colored header tiles match the sizing of their corresponding cells. */
.activities-grid.app-grid .grid-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important; /* match other grids */
    min-height: 56px !important;    /* consistent header height */
    box-sizing: border-box !important;
    background: rgba(3,54,91,0.55) !important; /* ensure Blazor-like header color */
    color: #ffffff !important;
    border-radius: 4px !important;
}

.activities-grid.app-grid .grid-cell {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    min-height: 56px !important; /* match header height */
    box-sizing: border-box !important;
    background: rgba(255,255,255,0.98) !important; /* light tile */
    color: #0b2545 !important;
}

/* Center small action buttons inside their grid cell so the colored header and cell look aligned */
.activities-grid.app-grid .grid-cell .btn {
    /* Make action buttons fill their grid cell so the clickable area matches other cells
       and the visual tile appears filled. Keep the visual label centered. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 6px 10px !important; /* internal padding for the label */
   /* background: transparent !important;*/ /* let the cell background show through */
    border: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

/* Make sure specific header helpers (action cols) receive same styling */
.activities-grid.app-grid .current-bid-header,
.activities-grid.app-grid .damages-header,
.activities-grid.app-grid .autobid-header,
.activities-grid.app-grid .manualbid-header {
    /* inherit from .grid-header */
}

/* Ensure all grid rows have a uniform height and that header & cells fill that height
   so the background color covers the entire tile. */
.activities-grid.app-grid {
    /* force a sensible default row height while allowing expansion for taller content */
    grid-auto-rows: minmax(72px, auto) !important;
    align-items: stretch !important; /* make children stretch to fill the row */
}

.activities-grid.app-grid .grid-header,
.activities-grid.app-grid .grid-cell {
    align-self: stretch !important; /* ensure each cell stretches to the row height */
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Keep cell content vertically centered while the cell fills the tile */
.activities-grid.app-grid .grid-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-color: #d8dcdd !important;
}

/* Ensure image thumbnails fit within the cell height without overflowing */
.activities-grid.app-grid .image-cell .vehicle-thumb {
    max-height: calc(100% - 16px) !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Allow native select dropdowns inside the admin/activity grids to expand
   outside the horizontally-scrolling wrapper so options are visible and
   selectable. We only lift overflow while the wrapper contains focus. */
.admin-grid-wrapper:focus-within,
.activities-grid-wrapper:focus-within {
    overflow: visible !important;
}

/* Make select controls fill their grid cell for better hit target. */
.grid-cell select,
.grid-cell input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
}

/* Emergency floating button styles */
.main-layout header { position: relative; }

.main-layout .emergency-button {
    position: absolute; /* positioned relative to header */
    top: calc(100% + 8px); /* just beneath the nav/menu */
    right: 16px;
    width: 60px; /* requested width */
    height: 50px; /* requested height */
    z-index: 999; /* keep above page but below full-screen overlays */
    cursor: pointer;
    background: red; /* toast-like redd background */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.emergency-button img {
    /* show a small icon inside the coral toast-like button */
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.admin-requests-grid .emergency-row {
    background: rgba(220,20,60,0.12);
    color: #fff;
}

/* Ensure grid headers and cells align correctly: make grid a proper table-like grid */
.admin-grid.admin-requests-grid {
    /* Stronger selector to override component-scoped grid defaults */
    display: grid !important;
    /* 8 columns: EmergencyStatus, FromUser, FromAddress, Created, Description, Reply, Done, Actions */
    grid-template-columns: 140px 160px 160px 140px 1fr 200px 80px 160px !important;
    grid-auto-rows: minmax(40px, auto) !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 720px !important;
    box-sizing: border-box !important;
}

.admin-grid.admin-requests-grid > .grid-header {
    font-weight: 700 !important;
    padding: 8px !important;
    background: #7f8c8d !important;
    color: #fff !important;
    border-radius: 4px !important;
}

.admin-grid.admin-requests-grid > .grid-cell {
    padding: 8px !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: 4px !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

/* Stronger emergency row styling (applies to cells in a row marked emergency) */
.admin-grid.admin-requests-grid > .grid-cell.emergency-row {
    background: rgba(220,20,60,0.20) !important;
    color: #fff !important;
    border-left: 4px solid rgba(220,20,60,0.9) !important;
}

/* Force main nav layout to match Blazor MainLayout to avoid header wrapping */
.main-nav {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    height: 110px !important;
    padding: 0 12px !important;
    flex-wrap: nowrap !important; /* prevent items wrapping to next line */
    box-sizing: border-box !important;
}
.main-nav > div { height: 100% !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; }
.nav-title { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.main-nav .nav-actions { margin-left: auto !important; }

/* Admin dropdown menu styling: align submenu with the Admin nav item and use black background */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown summary { list-style: none; }
.nav-dropdown .nav-dropdown-menu {
    position: absolute;
    left: 0; /* align left edge with the Admin nav item */
    top: calc(100% + 8px);
    background: #000 !important; /* black background */
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important;
    border-radius: 6px;
    margin-top: 0;
    min-width: 180px;
    z-index: 9999;
}
.nav-dropdown .nav-dropdown-menu .nav-link {
    display:block;
    padding:8px 12px;
    text-decoration:none;
    color: #fff !important;
    font-weight:600;
}
.nav-dropdown .nav-dropdown-menu .nav-link:hover{
    background: rgba(255,255,255,0.06);
}

/* Modal overlay rules: keep these last so they win over component styles */
.modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 9999 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
}
.modal[aria-hidden="true"]{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Allow Bootstrap's JS to show modals by adding the .show class (used by bootstrap) */
.modal.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.modal[aria-hidden="false"]{
    visibility: visible !important;
    opacity: 1 !important;
}
.modal .modal-content{
    max-height: calc(100vh - 80px) !important;
    overflow: auto !important;
}

/* Modal spinner overlay */
.modal-spinner-overlay{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.7);
  border-radius: inherit;
  z-index: 2;
}
.modal-spinner{
  width:40px;
  height:40px;
  border-radius:50%;
  border:4px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.6);
  animation: spin 1s linear infinite;
}
@keyframes spin{ from{ transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Basic modal overlay styles for Razor Pages partial modals */
.modal {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 10000 !important;
}
.modal[aria-hidden="false"] {
    display: flex !important;
}
.modal .modal-content {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 16px !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    overflow: auto !important;
    box-shadow: 0 12px 36px rgba(2,6,23,0.4) !important;
}
/* Ensure modal content is visible above the overlay and participates in layout
   (some environments/Bootstrap versions may rely on modal-dialog wrappers; make
   the content explicitly positioned and visible). */
.modal .modal-content {
    position: relative !important;
    z-index: 10001 !important;
    display: block !important;
}