/* SERVED_FROM: AutoBidz/wwwroot/css/site.css - marker v1 */

/* Normalize base font size to prevent scaling issues across browsers and devices */
html {
    font-size: 16px; /* Standard base size; rem units scale from this */
}

/* Nav gradient and helper variables */
:root {
  --nav-top: #222222;              /* current top color */
  --nav-bottom: #727272;           /* bottom color computed using color-mix when available; fallback provided */
  --accent: goldenrod;             /* adjust to make bottom lighter */
  --nav-height: 62px;              /* nav bar height used for submenu alignment */
}

/* Car grid overlay styles */
.car-image-wrapper { position: relative; width: 640px; }
.car-image { display:block; width:640px; height:auto; }
.car-grid { position:absolute; left:0; top:0; width:640px; height:100%; pointer-events:auto; }
.car-grid .car-cell { width:100%; height:100%; }

/* admin grid shows borders */
.admin-grid .car-cell { border: 1px solid rgba(255,255,255,0.06); }

/* modal reporting hides borders */
.app-modal-inner .car-grid .car-cell { border: none !important; }

/* Selected cells (admin assign mode) - darkish green */
.car-cell.selected {
    background: rgba(8, 100, 48, 0.92) !important; /* dark green */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

/* Mapped cells (persisted mapping) - slightly lighter / transparent green */
.car-cell.mapped {
    background: rgba(12, 160, 80, 0.45);
}

/* Smooth transition when selecting/deselecting */
.car-cell {
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

/* Make overlay respect the image container size so grid and image stay aligned */
.car-image-wrapper { box-sizing: border-box; }
.car-grid { box-sizing: border-box; display: grid; grid-auto-flow: row; }

/* Ensure the Blazor component host element for MapView displays as block and can size correctly
   Some browsers render unknown custom tags inline which can collapse height. Escape dots used in the tag name. */
components\.maps\.mapview {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.map-container {
    /* container height is controlled by the page layout; make inner container fill parent */
    width: 100%;
    height: 100%;
}

.map-container > div {
    width: 100%;
    height: 100%;
}

/* SVG selection and highlight helpers */
.svg-highlight-minor { stroke-width: 2px !important; stroke: #ffcc00 !important; fill: rgba(255,204,0,0.12) !important; }
.svg-highlight-moderate { stroke-width: 2px !important; stroke: #ff9900 !important; fill: rgba(255,153,0,0.16) !important; }
.svg-highlight-severe { stroke-width: 2px !important; stroke: #d9534f !important; fill: rgba(217,83,79,0.18) !important; }
.svg-part-selected {
    outline: 3px solid goldenrod;
    outline-offset: 2px;
}

/* Responsive wrapper for pages that host the map. Adjust the 220px offset to match header+toolbar height */
.map-wrapper {
    width: 100%;
    height: calc(130vh - 220px);
    min-height: 520px; /* safe fallback */
}

.map-wrapper .map-container {
    height: 100%;
}

/* Map container and inner map div rules to ensure visible height */
.map-container {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.map-container > div {
    width: 100% !important;
    height: 100% !important;
}
.admin-panel .admin-header {
    text-align: left !important;
    width: 100%;
    box-sizing: border-box;
}

.admin-panel .admin-header .admin-add-btn,
.admin-header .add-btn {
    /* ensure Add New matches other prominent buttons */
    background: transparent !important;
    color: goldenrod !important;
    border: 1px solid rgba(255,215,0,0.12) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* Body background image under the nav (use light background to match Blazor MainLayout) */
body {
    margin: 0px !important;
    /* background-image: url('/Aerial%20Image%20Large.jpg');*/
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #ffffff; /* light fallback/background to match Blazor MainLayout */
}

.body-content {
    text-align: center;
}

/* Ensure nav is horizontal and use the gradient as the final rule */
.main-layout header .main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--nav-height);
    /* only horizontal padding so height remains exact */
    padding: 0 16px;
    width: 100%;
    /* final background shorthand so it cannot be masked by later background-color */
    /* background: linear-gradient(
    to bottom,
    var(--nav-top) 0%,
    #2b2b2b 30%,
    var(--nav-bottom) 100%
  ) no-repeat 0 0 !important;*/
    background:black !important;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    color: var(--accent);
    box-sizing: border-box;
    position: relative; /* anchor absolute-positioned submenus if needed */
}

/* Ensure each top-level wrapper stretches to nav height so top:100% aligns with nav bottom */
.main-layout header .main-nav > div {
  position: relative;      /* anchor for the submenu positioned inside the wrapper */
  height: 100%;            /* match .main-nav height */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Equal-width top-level nav items */
.main-layout header .main-nav > div.nav-item {
  flex: 0 0 auto;
  min-width: 140px;                 /* ensure reasonable minimum */
  display: flex;
  align-items: center;
  justify-content: center;          /* center label/buttons */
  box-sizing: border-box;
  padding: 0 6px;                   /* small horizontal padding inside each item */
}

/* Ensure inner controls (links/buttons) don't stretch awkwardly */
.main-layout header .main-nav > div.nav-item > a,
.main-layout header .main-nav > div.nav-item > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  text-align: center;
  white-space: nowrap;
}

/* Keep the right-side actions (sign in / welcome) out of the equal-width group */
.main-layout header .main-nav > div.nav-actions {
  margin-left: auto; /* already present inline, this keeps intent clear */
  flex: 0 0 auto;
}

/* Keep dropdown darker for contrast */
.main-layout header .main-nav ul {
  background: rgba(34,34,34,0.98);
}

/* Top-level nav list: distribute items evenly */
.main-layout header .main-nav > ul {
  display: flex;
  gap: 0;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Make each top-level item take equal space */
.main-layout header .main-nav > ul > li {
  flex: 1 1 0;
  text-align: center;
  box-sizing: border-box;
}

/* Buttons/links in the nav */
.main-layout header .main-nav .nav-link,
.main-layout header .main-nav button,
.main-layout header .main-nav a {
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none !important; /* ensure no underlines */
}

/* Ensure links or anchors in nav are not underlined (covers browser defaults) */
.main-layout header .main-nav a {
  text-decoration: none !important;
}

/* Dropdown submenu: position at the bottom edge of the wrapper/nav */
.main-layout header .main-nav li > ul {
  position: absolute;
  top: 100%;                 /* aligns submenu top with bottom of its parent wrapper (which stretches to nav height) */
  left: 0;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  min-width: 160px;
  display: none;             /* hidden by default; shown on hover/focus or toggled by razor code */
  background: rgba(34,34,34,0.98);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 2500;
  box-sizing: border-box;
}

/* Improved submenu sizing and spacing (fallback) */
.main-layout header .main-nav li > ul {
  min-width: 260px;               /* ensure submenu has more horizontal room */
  padding: 10px 0;                /* vertical padding around items */
  box-sizing: border-box;
}

.main-layout header .main-nav li > ul > li.menu-item {
  display: block;
  width: 100%;
  padding: 14px 22px;             /* more padding for taller, clickable items */
  font-size: 18px;                /* larger readable font */
  font-weight: 600;
  color: var(--accent);
  line-height: 1.3;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Ensure anchor / button text inside menu-item inherits sizing */
.main-layout header .main-nav li > ul > li.menu-item * {
  font-size: inherit;
  font-weight: inherit;
}

/* Hover / focus visual affordance */
.main-layout header .main-nav li > ul > li.menu-item:hover,
.main-layout header .main-nav li > ul > li.menu-item:focus {
  background: rgba(255, 215, 0, 0.06) !important;
  color: var(--accent) !important;
  outline: none !important;
}

/* Slightly smaller on narrow screens */
@media (max-width: 900px) {
  .main-layout header .main-nav li > ul {
    min-width: 200px;
  }
  .main-layout header .main-nav li > ul > li.menu-item {
    padding: 10px 14px;
    font-size: 16px;
  }
}

/* Small utility: preserve dropdown styling for nested lists (do not force flex on nested ul) */
.main-layout header .main-nav li > ul li > ul {
  display: block;
}

#Register {
    border: none !important;
    background: transparent !important;
    color: goldenrod !important;
    --nav-top: #222222; /* current top color */
    --nav-bottom: #727272; /* bottom color computed using color-mix when available; fallback provided */
}

/* Forgot password link inside the login modal */
.forgot-password {
  color: goldenrod;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.forgot-password:hover,
.forgot-password:focus {
  text-decoration: underline;
}

/* ---- Home page / activities styles (scoped via .home-activities) ---- */
.home-activities {
  margin-top: 1.25rem;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 6px;
  border: 1px solid rgba(255, 215, 0, 0.06);
}

.home-activities .activities-title {
    color: goldenrod;
    margin-bottom: 0.5rem;
    text-align: left;
    /* background-color: grey;*/
    height: 34px;
    font-size: 22px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.home-activities .activities-grid-wrapper {
  width: 100%;
  overflow-x: auto;
}

.home-activities .activities-grid {
  display: grid;
  grid-template-columns: 90px 1fr 140px 110px 140px 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 720px;
}

.home-activities, .admin-grid .grid-header {
    font-weight: 600;
    padding: 10px 12px;
    background: #727272;
    color: #ffffff;
    border-radius: 4px;
    text-align: left;
    white-space: nowrap;
    text-align: left;
}

 .home-activities .grid-cell {
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.home-activities .type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: white;
}

/* Type colors */
.home-activities .type-fitness { background: #2d9cdb; }
.home-activities .type-maintenance { background: #f39c12; }
.home-activities .type-security { background: #e74c3c; }
.home-activities .type-upgrade { background: #8e44ad; }
.home-activities .type-social { background: #27ae60; }
.home-activities .type-hobby { background: #16a085; }
.home-activities .type-entertainment { background: #d35400; }
.home-activities .type-default { background: #7f8c8d; }

.home-activities .muted {
  color: #cccccc;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Ensure nav dividers are always visible while scoped CSS is diagnosed */
.main-layout header .main-nav ul > li.nav-divider {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  border-top: 1px solid rgba(255,215,0,0.20) !important;
  box-sizing: border-box !important;
}

/* Temporary: ensure admin grid layout applies while debugging scoped CSS */
.admin-grid-wrapper { overflow-x: auto; /* allow horizontal scrolling */ overflow-y: visible; }
.admin-grid {
    /* Do not force display mode so tables render correctly when AppGrid uses table output. */
    /* gap: 8px;*/
    align-items: center;
    width: 100%;
    min-width: 470px;
    grid-auto-flow: row; /* used when admin-grid is a grid container */
}

/* Ensure select dropdowns inside admin grids are not clipped and appear above other elements */
.admin-grid select,
.admin-grid-wrapper select {
    position: relative;
    z-index: 5000; /* higher than nav/submenu and overlays used elsewhere */
}

/* Specific layout tweaks for the Admin Residents Requests grid */
.admin-requests-grid {
    display: grid !important;
    /* Columns: FromUser | FromAddress (reduced) | Created | Category | Description | Reply (reduced) | Done | Actions */
    grid-template-columns: 180px 120px 140px 120px 1fr 120px 80px 120px !important;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 900px;
}

/* Prevent wrapping inside admin grid cells and allow horizontal scrolling on wrapper */
.admin-grid-wrapper { overflow-x: auto; }
.admin-requests-grid .grid-cell { white-space: nowrap; }
.admin-grid .grid-header {
    font-weight: 700;
    padding: 8px;
    background: #7f8c8d;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-grid .grid-cell {
  padding:8px;
  background: rgba(255,255,255,0.02);
  border-radius:4px;
  color:#fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Constrain inputs inside reply column to avoid expanding grid */
.admin-grid .edit-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Checkbox alignment in Done column */
.admin-grid .grid-cell input[type="checkbox"] {
    transform: scale(1.1);
    margin: 0;
}

/* Action buttons in admin grid use modal primary button styling */
.admin-grid .grid-cell.actions .app-modal-btn {
    padding: 6px 10px;
    border-radius: 6px;
}

/* Temporary: restore Activities page styles while scoped CSS is verified */
.activities-section {
    margin-top: 1.25rem;
    padding: 0.75rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.06);
}

.activities-title {
    color: goldenrod;
    margin-bottom: 0.5rem;
}

.activities-grid-wrapper {
    width: 100%;
    overflow-x: auto;
}

.activities-grid {
    display: grid !important;
    /* Explicit columns to match the number of headers in the auction grid (register, images, make, mmCode, model, year,
       condition, mileage, reserve price, current bid, damages, location, autobid, manualbid, seller rating) */
    grid-template-columns: 90px 110px 140px 90px 1fr 60px 120px 100px 120px 120px 100px 120px 90px 90px 120px !important;
    gap: 8px;
    align-items: center;
    width: 100%;
    /* increase min-width so the grid has room and will scroll horizontally on small screens */
    min-width: 1600px;
}

/* Tighten header/cell spacing specifically for the activities grid to avoid wrapping */
.activities-grid .grid-header,
.activities-grid .grid-cell {
    padding: 6px 8px;
    font-size: 0.92rem;
    white-space: nowrap; /* force single-line headers/cells */
}

/* Make the Seller Rating header shorter on small screens by allowing text to truncate with ellipsis */
.activities-grid .seller-rating-header {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shared grid base used across the app for consistent spacing/headers/cells */
.app-grid:not(table) {
    display: grid; /* ensure AppGrid renders as CSS grid by default for non-table containers */
    grid-auto-flow: row; /* place headers first, then cells row-by-row */
    gap: 8px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* For grids rendered as tables (fallback), apply the same header/cell appearance */
/* Table fallback class used by AppGrid when IsTable=true */
.app-grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px 8px;
}

/* Table headers/cells: match activities grid header/cell appearance */
.app-grid-table thead th.grid-header {
    font-weight: 600;
    padding: 10px 12px;
    background: #727272;
    color: #ffffff;
    border-radius: 4px;
    text-align: left;
}

.app-grid-table tbody td.grid-cell {
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    color: #ffffff;
}

/* Make Edit/Delete in admin grids use the goldenrod primary appearance so they match other submit buttons */
.admin-grid .app-modal-btn,
.admin-grid .app-modal-btn-secondary,
.admin-grid .app-modal-btn-primary {
    background: goldenrod !important;
    color: #000 !important;
    border: none !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* Keep secondary appearance slightly different when needed */
.admin-grid .app-modal-btn-secondary {
    background: transparent !important;
    color: goldenrod !important;
    border: 1px solid rgba(255,215,0,0.12) !important;
}

/* Ensure the admin grid table stretches to the wrapper width */
.admin-grid-wrapper .app-grid-table {
    width: 100%;
}

.app-grid .grid-header,
.app-grid-table .grid-header {
    font-weight: 600;
    padding: 10px 12px;
    background: #727272;
    color: #ffffff;
    border-radius: 4px;
    text-align: left;
    white-space: nowrap;
}

.app-grid .grid-cell,
.app-grid-table .grid-cell {
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Override the default activities grid for the requests view (5 columns) */
.activities-grid.requests-grid {
    grid-template-columns: 1fr 120px 120px 160px 120px !important;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 640px;
}

/* Ensure items are placed row-by-row (prevent data cells from being positioned in the header row) */
.activities-grid.requests-grid,
.requests-grid-only,
.requests-grid-template,
.requests-grid-body,
.requests-grid-header {
    grid-auto-flow: row;
}

/* Specific override for requests grid which uses different column layout (5 columns) */
.requests-grid-only {
    display: grid !important;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.requests-grid-only.requests-grid-headers > .grid-header {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.grid-header {
    font-weight: 600;
    padding: 10px 12px;
    background: #7f8c8d;
    color: #ffffff;
    border-radius: 4px;
    text-align: left;
    white-space: nowrap;
}

.grid-cell {
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* table styles for requests table fallback */
.requests-table {
    border-collapse: separate;
    /* match activities grid spacing: equal horizontal and vertical gaps */
    border-spacing: 8px 8px;
    width: 100%;
}
.requests-table th.grid-header {
    /* same header sizing as activities grid */
    padding: 10px 12px;
    background: #727272;
    color: #ffffff;
    border-radius: 4px;
    text-align: left;
}
.requests-table td.grid-cell {
    /* match activities cell appearance exactly */
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.muted {
    color: #cccccc;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* --- Quick fallback: normalize and enlarge dropdown submenu items --- */
/* Targets any dropdown UL rendered inside the nav (covers inline-styled ULs) */
.main-layout header .main-nav li > ul,
.main-layout header .main-nav li > ul[class],
.main-layout header .main-nav .submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
    background: #727272 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    z-index: 2000 !important;
    box-sizing: border-box !important;
}

    /* Ensure list items render as large, clickable blocks */
    .main-layout header .main-nav li > ul > li,
    .main-layout header .main-nav .submenu > li {
      list-style: none !important;
      display: block !important;
      padding: 4px 22px !important;
      font-size: 18px !important;
      line-height: 1.3 !important;
      font-weight: 600 !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }

    /* Make any anchor/button inside inherit sizing and remove default link decorations */
    .main-layout header .main-nav li > ul > li a,
    .main-layout header .main-nav li > ul > li button,
    .main-layout header .main-nav .submenu > li a,
    .main-layout header .main-nav .submenu > li button {
      font-size: inherit !important;
      font-weight: inherit !important;
      color: var(--accent) !important;
      text-decoration: none !important;
      display: inline-block;
      width: 100%;
    }

    /* Hover/focus affordance */
    .main-layout header .main-nav li > ul > li:hover,
    .main-layout header .main-nav .submenu > li:hover,
    .main-layout header .main-nav li > ul > li:focus,
    .main-layout header .main-nav .submenu > li:focus {
      background: rgba(255,215,0,0.06) !important;
      color: var(--accent) !important;
      outline: none !important;
    }

    /* Responsive: make items slightly smaller on narrow screens */
    @media (max-width:900px) {
      .main-layout header .main-nav li > ul,
      .main-layout header .main-nav .submenu {
        min-width: 200px !important;
      }

      .main-layout header .main-nav li > ul > li,
      .main-layout header .main-nav .submenu > li {
        padding: 4px 14px !important;
        font-size: 16px !important;
      }
    }

/* Global shared grid overrides (place in existing site.css) */
/* Lighter backgrounds, goldenrod left-aligned headers, tighter spacing, left-aligned cells */

.activities-grid,
.admin-grid,
.notices-grid,
.events-grid {
    gap: 0px; /* smaller spacing between rows/columns */
    align-items: start; /* top/left align multi-line content */
}

/* Column headers: left-aligned and goldenrod */
.grid-header {
    font-weight: 600;
    padding: 10px 12px;
    background: #727272;
    color: #ffffff;
    border-radius: 4px;
    text-align: left;
    white-space: nowrap;
    text-align: left;
}

/* Cells: lighter background, left-aligned column contents */
.grid-cell {
    text-align: left;
    padding: 6px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slightly lighter section backgrounds */
.activities-section,
.admin-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.03));
}

/* Strong, global override for the admin Add button */
.admin-add-btn {
    color: goldenrod !important;
    background: transparent !important;
    border: 1px solid rgba(255, 215, 0, 0.12) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-left: 0 !important; /* ensure flush to left */
    text-align: left !important;
}

    /* keep hover/focus behavior */
    .admin-add-btn:hover,
    .admin-add-btn:focus {
        background: rgba(255, 215, 0, 0.06) !important;
        outline: none !important;
    }

.profile-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 12px;
}

.profile-card,
.panel {
    background: #1f1f1f; /* darker panel bg */
    border: 1px solid rgba(255, 215, 0, 0.06);
    padding: 12px;
    border-radius: 6px;
    color: #eb4040;
}

    /* Form rows: label above control, left-aligned */
    .profile-card .form-row,
    .panel .form-row {
        display: block;
        margin-bottom: 10px;
        text-align: left;
    }

        /* Labels: white and clearly visible */
        .profile-card .form-row label,
        .panel .form-row label {
            display: block;
            color: #0a8bd6 !important;
            font-weight: 600;
            margin-bottom: 6px;
            font-size: 0.95rem;
        }

    /* Inputs, selects, textareas: full width, high contrast */
    .profile-card input,
    .profile-card select,
    .profile-card textarea,
    .panel input,
    .panel select,
    .panel textarea {
        width: 100% !important;
        box-sizing: border-box;
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid #7f8c8d !important;
        color: #ffffff !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
        font-size: 0.95rem;
        outline: none;
    }

        /* Placeholder text color */
        .profile-card input::placeholder,
        .profile-card textarea::placeholder,
        .panel input::placeholder,
        .panel textarea::placeholder {
            color: rgba(255,255,255,0.55) !important;
        }

        /* Focus state */
        .profile-card input:focus,
        .profile-card select:focus,
        .profile-card textarea:focus,
        .panel input:focus,
        .panel select:focus,
        .panel textarea:focus {
            box-shadow: 0 0 0 3px rgba(255,215,0,0.08) !important;
            border-color: rgba(255,215,0,0.28) !important;
        }

    /* Action buttons */
    .profile-layout .form-actions,
    .profile-card .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 8px;
    }

    /* Muted helper text */
    .profile-card .muted,
    .panel .muted {
        color: rgba(255,255,255,0.6);
        font-size: 0.9rem;
    }

    /* Ensure panel labels are left-aligned, high-contrast and win over component/global rules */
    .panel label,
    .profile-card label,
    .profile-layout .panel label,
    .profile-layout label {
        display: block;
        text-align: left !important;
        color: darkgoldenrod !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    /* Ensure panel headings are white and underlined */
    .panel h3,
    .profile-card h3 {
        color: #ffffff !important;
        text-decoration: underline !important;
        margin-bottom: 8px;
        font-weight: 700;
    }

    /* Ensure panel labels are left-aligned, high-contrast and win over component/global rules */
    .panel label,
    .profile-card label,
    .profile-layout .panel label,
    .profile-layout label {
        display: block;
        text-align: left !important;
        color: goldenrod !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

/* Reusable modal styles used by Login, MyRequests and other modals */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.app-modal-outer {
    border-radius: 10px;
    background: #5d5a5a;
    padding: 8px;
}

.app-modal-inner {
    background: #222;
    padding: 18px;
    border-radius: 6px;
    width: 250px; /* preferred fixed width */
    max-width: calc(100% - 32px) !important; /* responsive fallback so modal never overflows viewport */
    margin: 0 auto; /* center within outer wrapper */
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    color: goldenrod;
    /*box-sizing: border-box;*/
}

.app-modal-inner.narrow {
    width: 375px; /* 25% narrower than 500px */
}

/* Specific override for Add Pin modal width */
.app-modal-inner.addpin-modal {
    width: 250px !important;
}

/* Form row for modal inputs: left-aligned labels and vertically aligned inputs */
.app-modal-inner .form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.app-modal-inner .form-row > label {
    width: 130px; /* fixed label width to align inputs */
    text-align: left;
    font-weight: 600;
    color: goldenrod;
}
.app-modal-inner .form-control-wrap {
    flex: 1 1 auto;
}
.app-modal-inner .form-control {
    width: 100%;
    box-sizing: border-box;
}

.app-modal-inner.small { width: 320px; max-width: calc(100% - 32px); }

/* Responsive modal widths: larger fixed widths on wider viewports */
@media (min-width: 900px) {
    .app-modal-inner { width: 600px; }
}

@media (min-width: 1200px) {
    .app-modal-inner { width: 720px; }
}

.app-modal-header {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #708eaf !important;
}

.app-modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.app-modal-status {
    margin-top: 14px;
    color: #ffffff;
    font-size: 1.05rem;
}

.app-modal-description {
    margin-top: 12px;
    color: #ffffff;
    font-size: 1.02rem;
}

.app-modal-responses {
    margin-top: 18px;
    color: goldenrod;
}

.app-modal-inner ul li { margin-bottom: 8px; }
.app-modal-inner .response-message { color: #ffffff; }

.app-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Modal button styles matching the login modal appearance */
.app-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
}

.app-modal-btn-primary {
    background: goldenrod;
    color: #000;
    border: none;
    padding: 4px 10px;
}

.app-modal-btn-secondary {
    background: transparent;
    color: goldenrod;
    border: 1px solid rgba(255,215,0,0.12);
    padding: 8px 12px;
}

/* Make toolbar buttons prominent and consistent */
.map-toolbar .app-modal-btn {
    background: goldenrod !important;
    color: #000 !important;
    border: none !important;
}
.map-toolbar .app-modal-btn:hover {
    filter: brightness(0.96);
}

/* Small utility helpers for layout consistency */
.flex-1 { flex: 1; }
.d-flex { display: flex; }
.flex-row { display:flex; flex-direction: row; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; }
.mt-8 { margin-top: 8px; }
.text-right { text-align: right; }

/* Toast styles (simple, global) */
#blazor-toast-container {
    pointer-events: none; /* clicks pass through except for inner toasts */
}

.blazor-toast {
    pointer-events: auto;
    min-width: 180px;
    max-width: 360px;
    word-wrap: break-word;
}

/* success / error helpers are inline-styled in JS, these are fallback */
.blazor-toast-success {
    background: goldenrod;
    color: #000;
}

.blazor-toast-error {
    background: #ff6b6b;
    color: #fff;
}

/* validation message class used by component-scoped css */
.validation-message {
    color: #ff6b6b !important;
    font-size: 0.9rem;
    margin-top: 6px;
}

/* Strong global overrides to ensure header + select styles win over emitted component CSS */

/* Page header — left aligned and goldenrod */
.page-header .profile-title,
.profile-title {
    color: goldenrod !important;
    text-align: left !important;
    margin: 0 0 12px 0 !important;
    font-weight: 700 !important;
    font-size: 1.6rem !important;
    line-height: 1.15 !important;
}

/* Relationship select: dark/grey background, white text, and option backgrounds */
.panel select.form-control,
.profile-layout select,
.profile-layout .panel select {
    background: #4a4a4a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.panel select.form-control option,
.profile-layout select option {
    background: #3f3f3f !important;
    color: #ffffff !important;
}

/* Dining page styles */
.menu-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    border: 1px solid rgba(255,215,0,0.06);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.meal-heading {
    color: goldenrod;
    margin: 0 0 8px 0;
    font-family: 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
    font-size: 1.6rem;
}
.courses-grid {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.course-col {
    flex: 1 1 180px;
    text-align: center;
}
.course-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #ffffff; /* Override: keep the course-title text white for emphasis */
}
.course-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.course-list li {
    padding: 6px 0;
    border-top: 1px dashed rgba(255,255,255,0.03);
    color: goldenrod;
}

/* Ensure menu card headings/content are goldenrod for contrast */
.menu-card,
.menu-card .meal-heading,
.menu-card .course-col,
.menu-card .course-title,
.menu-card .course-list li {
    color: goldenrod;
}

/* Override: keep the course-title text white for emphasis */
.menu-card .course-title {
    color: #ffffff !important;
}

/* Day scroller */
.day-scroller-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.day-scroller {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px;
}
.day-item {
    background: rgba(255,255,255,0.03);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.03);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.day-item.selected {
    background: goldenrod;
    color: #000;
    font-weight: 700;
}
.day-nav {
    background: transparent;
    color: goldenrod;
    border: 1px solid rgba(255,215,0,0.12);
    padding: 6px 8px;
    border-radius: 6px;
}

/* Mobile: stack course columns vertically */
@media (max-width: 780px) {
    .courses-grid {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Required field asterisk styling */
.required-field::after {
    content: " *";
    color: #FF6F61; /* coral/light-red color */
    font-weight: bold;
    margin-left: 2px;
}

/* For labels that need asterisks */
label.required::after {
    content: " *";
    color: #FF6F61;
    font-weight: bold;
    margin-left: 2px;
}

/* ===== FILTER AND SORT STYLES ===== */

/* Filter section styling */
.filters-section {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

.filter-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.filter-control:hover {
    border-color: #bbb;
}

/* Clear filters button */
#clearFilters {
    background: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.1s ease;
}

#clearFilters:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

#clearFilters:active {
    transform: translateY(0);
}

/* Filter result count */
#filterResultCount {
    margin-left: 15px;
    font-weight: 600;
    color: #333;
    font-size: 1rem;
}

/* Sortable column headers */
.grid-header.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

.grid-header.sortable:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.grid-header.sortable:active {
    background-color: rgba(0, 123, 255, 0.2);
}

.sort-indicator {
    font-weight: bold;
    color: #007bff;
    margin-left: 4px;
}

/* Responsive filter layout for smaller screens */
@media (max-width: 1200px) {
    .filters-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .filters-section {
        padding: 15px;
    }

    .filters-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #clearFilters {
        width: 100%;
        margin-bottom: 10px;
    }

    #filterResultCount {
        margin-left: 0;
        display: block;
        text-align: center;
    }
}

/* ===== END FILTER AND SORT STYLES ===== */

/* ===== GLOBAL LOADING SPINNER STYLES ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.loading-spinner {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-ring {
    position: absolute;
    border: 4px solid transparent;
    border-top-color: #f39c12;
    border-radius: 50%;
    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
    width: 80px;
    height: 80px;
    border-width: 4px;
    animation-delay: -0.45s;
}

.spinner-ring:nth-child(2) {
    width: 64px;
    height: 64px;
    border-width: 3px;
    animation-delay: -0.3s;
    border-top-color: #ced5d7;
}

.spinner-ring:nth-child(3) {
    width: 48px;
    height: 48px;
    border-width: 3px;
    animation-delay: -0.15s;
    border-top-color: #f39c12;
}

.spinner-ring:nth-child(4) {
    width: 32px;
    height: 32px;
    border-width: 2px;
    border-top-color: #ced5d7;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: #f39c12;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===== END LOADING SPINNER STYLES ===== */