/* === RESET & GLOBAL BASE STYLES === */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

/* === NAVIGATION (GLOBAL) === */

.navbar {
  background-color: #000;
  color: #FFF;
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.logo {
  height: 20px;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.account-icon {
  display: flex;
  align-items: center;
}

.account-icon svg {
  height: 1.75rem;
  width: 1.75rem;
  stroke: #FFF; 
}

.nav-link {
  color: #FFF;
  position: relative;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s ease;
  --u-offset: -4px;
}

/* === BUTTONS (GLOBAL) === */

.full-width { width: 100%; }

.btn-base { /* Shared button base */
  font-family: 'Inter', sans-serif;
  display: inline-block;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.btn-base:hover {
  transform: scale(1.04);
}

.btn-auth { /* White button */
  background: #FFF;
  color: #000;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.5rem;
  min-width: 5rem;
  white-space: nowrap;
  border-radius: 1.15rem;
  appearance: none;
  text-decoration: none;
}

.btn-primary { /* Black button */
  background: #000;
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 1.5rem;
  border-radius: 1.15rem;
  text-decoration: none;
}

/* Consistent sizing for compact buttons (applies to search + filter) */
.btn-compact {
  min-width: 0.10rem; /* Reduced from 3.5rem; tweak down to 2.5rem if still too wide */
  min-height: 2.1rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem; /* Trim sides for shorter overall width */
  gap: 0.25rem; /* Space between icon/text */
}

/* Ensure SVGs in buttons are uniform (no sizing drift) */
.btn-compact svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0; /* Prevents squish */
}

.btn-auth:disabled,
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filter-btn svg { stroke: #FFF; width: 16px; height: 16px; }

#filterPanel .form-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding: 0 2rem 1rem;
  width: 100%;
  justify-content: flex-start; /* override global center */
  align-items: stretch;
}

#filterPanel .form-actions .btn-primary {
  flex: 1 1 0;   /* 50/50 */
  min-width: 0;  /* allow flex to shrink/grow */
}

/* === HOMEPAGE (index.php) === */



/* === LINKS & UTILITIES (GLOBAL) === */

.underline-hover { position: relative; }
.underline-hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: var(--u-offset, -2px);
  height: var(--u-height, 2px);
  background: var(--u-color, currentColor);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}
.underline-hover:hover::after { transform: scaleX(1); }

.linkage {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem; /*linkage text camera pop up size etc*/
  text-decoration: none !important;
  /* inherits color by default; keep underline vars if you need black on light bg */
  --u-color: var(--link-underline, currentColor);
  --u-offset: -2px;
}

.link-small { font-size: .675rem; }
.links { display: inline-block; margin-top: 1.5rem; }

/* === LAYOUT & TYPOGRAPHY (GLOBAL) === */

.heading-xl,
.heading-xl-centered {
  font-size: 1.875rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.heading-xl-centered { text-align: center; }

.main {
  max-width: 75rem;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.paragraph p + p { margin-top: 1rem; }

.paragraph {
  font-size: 0.9rem;
  line-height: 1.6;
}

.text-muted { color: #6b7280; } /* No recent activity…”, “No models yet*/

.list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
.list li { margin-bottom: 0.5rem; }

.hidden { display: none !important; }

.margin-top { margin-top: 1.5rem; }
.margin-top-lg { margin: 3.75rem 0 1.5rem; }

/* === FORMS (GLOBAL) === */

.form-section {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-panel .form-group {
  display: block; /* Stack checkboxes vertically */
  width: 100%;
  margin-bottom: 1rem;
}

.form-group input,
.form-group select {
  padding: 8.5px 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
}

/* Adjust ONLY select box height */
select.form-input {
  padding-top: 0.45rem;   /* tweak these two numbers to taste */
  padding-bottom: 0.45rem;
}


.form-group select {padding-left: 0.525rem;}

.form-input {
  border: 1px solid #d1d5db;
  background-color: #FFF;
  transition: border-color 0.3s ease-in-out;
}

.form-input:hover {border-color: #000 !important;}

select.form-input option:not(:first-child) {color: #000;}

input[type="checkbox"] {accent-color: #000;}

select.form-input {color: #000;}

/* === SIGNUP (signup.php) === */

.signup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  margin-top: 1rem;
}

.signup-box {
  background-color: #FFF;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  width: 100%;
  max-width: 62rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(to bottom right, #eaeaea, #FFF);
}

@media (min-width: 768px) {
  .signup-box {
    flex-direction: row;
  }

.signup-form-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 1.5rem 4rem 1.5rem 3rem;
  }

.signup-image-wrapper {width: 50%;}
}

.signup-form-wrapper {
  width: 100%;
  padding: 1.5rem 4rem;
}

.signup-image-wrapper {
  border: 1rem solid transparent;
  border-radius: 1.5rem;
  overflow: hidden;
  background-color: transparent;
}

.signup-image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.flex-row-gap {
  display: flex;
  gap: 1rem;
}

.flex-row-gap > * {flex: 1 1 0;}

.half-width {
  width: 50%;
  box-sizing: border-box; /* Ensure padding doesn’t affect width */
}

.half-width .form-group input,
.form-group input,
.form-group select {
  width: 100%;
  box-sizing: border-box;
}

.group-hover\:spin {transition: transform 0.6s ease-in-out;}

.group:hover .group-hover\:spin {
  transform: rotate(360deg);
  transform-origin: center;
}

/* === LOGIN (login.php) — trimmed & readable === */

.login-container {
  background: linear-gradient(to bottom right, #eaeaea, #fff);
  border-radius: 1rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  margin: 4rem auto;
}

.login-prompt { /* Login prompt text + link (used on login & signup headers) */
  font-size: 0.675rem;
  font-weight: 300;
  color: #6b6b6b; /* small text login & signup */
  margin-bottom: 0;
  text-align: center;
}

.login-prompt a { /* small link colour & weight */
  color: #000; 
  text-decoration: underline;
  font-weight: 500;
}

.login-prompt a:hover {
  text-decoration: none;
}

.heading-left-xl { /* Heading + left-aligned variant used on login */
  font-size: 2rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 1rem;
}
.login-prompt-left { text-align: left; }

input:-webkit-autofill, /* Chrome/Safari autofill reset */
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
  border: 1px solid #d1d5db !important;
  transition:
    border-color 0.3s ease-in-out,
    background-color 9999s ease-out,
    color 9999s ease-out !important;
}

/* Password eye toggle (login + signup use this structure) */
.relative-input { position: relative; }
.relative-input .form-input { padding-right: 2.5rem; }

.eye-icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6b6b6b;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.eye-icon:hover { color: #000; }
.eye-icon-svg { width: 1rem; height: 1rem; }
.lucide { display: inline-block; vertical-align: middle; }

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.custom-checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.custom-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.77rem;
  cursor: pointer;
  line-height: 1.5;
}
.custom-checkbox-box {
  width: 18px;
  height: 18px;
  border: 1px solid #d1d5db;
  background: #FFF;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.custom-checkbox-icon {
  width: 14px;
  height: 14px;
  color: #FFF;
  display: none;
}
.custom-checkbox-input:checked + .custom-checkbox-box {
  background: #000;
  border-color: #000;
}
.custom-checkbox-input:checked + .custom-checkbox-box > .custom-checkbox-icon {
  display: block;
}
.custom-checkbox-box:hover {
  border-color: #000;
}

.error-wrapper {
  position: relative;
  min-height: 2rem;
}

.form-error-container {
  position: absolute;
  top: 100%;
  margin-top: 0.5rem;
  width: 100%;
}

.form-error-text {
  color: #D10000;
  font-size: 0.7rem;
}

.form-error-spot {
  min-height: 0.5rem;
  margin-top: 0.25rem !important;
}

/* Login-specific form section spacing override */
.login-container .form-section {
  margin-top: 0.5rem !important; /* Reduces the 1.5rem top nudge to 0.5rem (or tweak to 0/1rem as needed); signup untouched */
}

.signup-form-wrapper .form-section.signup-form-section .flex-row-gap:first-child {
  margin-top: 1rem;
}

.signup-form-wrapper .checkbox-wrapper {
  gap: 0.05rem; /* Terms link and text gap */
  margin-top: 1.4rem;
}

/* Signup terms checkbox spacing tweak */
.signup-terms-wrapper {
  margin: 5rem 0 0.25rem !important; /* Pushes lower from sponsor (5rem top), hugs button (0.25rem bottom) */
}

/* Signup button pull-up */
.signup-button-wrapper {
  margin-top: 1rem !important; /* From 0.25rem to 0.5rem—adds ~0.25rem more breathing room */
}

/* File upload error message (shared UI used by login area) */
.file-error-text {
  color: #D10000;
  font-size: 0.65rem;
  font-weight: 600;
  margin-top: 0.5rem;
  text-align: center;
}

.file-error-text.hidden {
  display: none;
}

.flag-img {
  width: 25px;
  height: auto;
  display: block;
  border: 0.5px solid #d1d5db;
  
}

/* === UPLOAD / FILE COMPONENTS (GLOBAL) === */

.upload-instructions {
  border: 1px solid #d1d5db;
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.375rem;
  text-align: center;
  max-width: 400px;
  margin: 0 auto 2rem;
}

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

.form-input::placeholder {
  color: #6d6b6b;
  font-size: 0.9rem;
  opacity: 1;
}

.wider-input {
  width: 100%;
  box-sizing: border-box;
}

/* Bigger upload icon inside the dropzone */
.upload-big-icon {
  width: 120px;           /* ≈ 5 × 24px */
  height: 120px;
  color: #000;            /* matches your black brand color */
  margin-bottom: 0.75rem; /* small space before the caption */
  flex-shrink: 0;
}

/* Compact caption under the icon */
.upload-accept {
  font-size: 0.9rem;
  color: #6b7280;         /* your muted gray */
  text-align: center;
  line-height: 1.2;
}

/* ADD: spacing + sizing for the hat+glasses icon in the checkbox label */
.custom-checkbox-label .lucide-hat-glasses {
  width: 20px;
  height: 20px;
  margin-left: 0.2rem;   /* gap after the checkbox box */
  margin-right: 0.35rem; /* gap before the text */
  flex-shrink: 0;
  stroke-width: 1.8;
}

/* === SETUPS TABLE (setups.php) === */

.table-wrap {
  border: none;
  background: transparent;   /* let rows be independent cards */
}

.setups-table {
  width: 100%;
  border-collapse: separate;  /* allow spacing between rows */
  border-spacing: 0 0.5rem;   /* vertical gap between row pills */
  table-layout: fixed;        /* lock widths */
  font-size: 0.875rem;
  border-spacing: 0 7px;
}

.setups-table thead th {
  background: #000;
  color: #FFF;
  font-size: 0.80rem;
  font-weight: 500;
  padding: 0.4rem 0.4rem;
  border: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25rem;
}

.setups-table thead tr {
  background: #000;
}

.setups-table thead th:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.setups-table thead th:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.setups-table tbody td {
  padding: 0.4rem 0.4rem;    /* match header height */
  border: none;
  font-size: 0.80rem;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25rem;
}

/* Zebra striping for rows */
.setups-table tbody tr:nth-child(even) { background: #f0f0f0; }

.setups-table tbody tr {
  background: #FFF;
  border-radius: 0.5rem;      /* rounds the row’s shadow */
  box-shadow: 0 0 0 1px #d1d5db, 0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease-in-out;
  overflow: hidden;
}
.setups-table tbody tr:hover,
.setups-table tbody tr:focus-within,
.setups-table tbody tr.active {
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,0.10);
}

.setups-table tbody td:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.setups-table tbody td:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.setups-table th:nth-child(1),
.setups-table td:nth-child(1) { width: 4.5rem; padding-left: 1rem; }  /* Race Date */
.setups-table th:nth-child(2),
.setups-table td:nth-child(2) { width: 7.9rem; }                       /* Driver */
.setups-table th:nth-child(3),
.setups-table td:nth-child(3) { width: 1.8rem; }                       /* Flag */
.setups-table th:nth-child(4),
.setups-table td:nth-child(4) { width: 10.5rem; }                      /* Event */
.setups-table th:nth-child(5),
.setups-table td:nth-child(5) { width: 10.3rem; }                      /* Track */
.setups-table th:nth-child(6),
.setups-table td:nth-child(6) { width: 6rem; }                         /* Brand */
.setups-table th:nth-child(7),
.setups-table td:nth-child(7) { width: 6.7rem; }                       /* Model */
.setups-table th:nth-child(8),
.setups-table td:nth-child(8) { width: 5rem; }                         /* Surface */
.setups-table th:nth-child(9),
.setups-table td:nth-child(9) { width: 1.9rem; }                       /* Download icon */
.setups-table th:nth-child(10),
.setups-table td:nth-child(10) {
  width: 2rem; text-align: center; padding-right: 1rem;                /* Download count */
}

.download-link { white-space: nowrap; }

/* Bounce animation for the download arrow */
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.download-link:hover .arrow { animation: arrow-bounce 0.6s infinite; }

/* Mirror of the download bounce, but the arrow moves UP at midpoint */
@keyframes bounce-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Make transforms apply cleanly to the arrow path(s) */
.arrow-up {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}


/* === SETUPS FILTERS & SEARCH (setups.php) */

.filter-form { display: flex; flex-direction: column; align-items: center; }
.filter-form label {
  font-size: 0.9rem;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.table-controls { /* Header row: search (left) + filter (right) */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}

.table-search { display: flex; align-items: center; gap: 0.4rem; margin: 0; flex: 1; max-width: 300px; margin-right: 0.4rem; }

.table-search-input {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #000;;
  background-color: #FFF;
  height: auto;
  max-width: 260px;
}

.table-search-input:focus { outline: #000; background-color: #FFF; }

/* Keep input focus/hover consistent with site inputs */
.table-controls .table-search .form-input { transition: border-color 0.3s ease-in-out; }
.table-controls .table-search .form-input:hover,
.table-controls .table-search .form-input:focus { border-color: #000 !important; background-color: #f0f0f0; }

/* Search icon sizing + spin */
.table-controls .table-search button svg {
  stroke: #FFF;
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.table-controls .table-search svg { overflow: visible; }
.table-controls .table-search .search-rotate {
  transform-origin: 11px 11px;
  transform-box: view-box;
  transform: rotate(0turn);
  transition: transform 0.4s linear;
  animation: none;
}

.table-controls .table-search button:hover .search-rotate { transform: rotate(1turn); }

/* Filter button piggybacks on .btn-primary (shared black pill) */
.filter-btn { display: inline-flex; align-items: center; gap: 0.6rem; }
.filter-btn:hover .slider-top    { transform: translateX(-2px); }
.filter-btn:hover .slider-bottom { transform: translateX(2px); }
.filter-btn .vert-1, .filter-btn .vert-2, .filter-btn .vert-3 { transform: translateX(0); transition: transform 0.25s ease; }
.filter-btn:hover .vert-1 { transform: translateX(7.5px); } /* top → right */
.filter-btn:hover .vert-2 { transform: translateX(-8px); }  /* middle → left */
.filter-btn:hover .vert-3 { transform: translateX(6px); }   /* bottom → right */

/* === Enhanced Pagination with Arrows (cleaned) === */
.pagination {
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  text-align: center;
}

/* Base pill (numbers + arrows share this via .page-link) */
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem; /* Slightly smaller pill */
  height: 1.4rem; /* Slightly smaller pill */
  padding: 0;
  margin: 0 0.2rem;
  border: 2px solid #000;
  border-radius: 50%;
  text-decoration: none;
  color: black;
  font-size: 0.75rem; /* Smaller numbers */
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  transition:
    transform 0.2s ease-in-out,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover scale only on non-active pills */
.page-link:hover { transform: none; }
.page-link:not(.active):hover { transform: scale(1.08); }

.page-link.active { /* Active numeric pill */
  background: #000;
  color: #fff;
  border-color: #000;
  cursor:default;
  pointer-events: none;
}

.page-link.active:hover { transform: none; } /* No hover-grow on the active pill */

.page-prev, /* --- Arrow pills only (prev/next) --- */
.page-next {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.pagination .page-prev svg,
.pagination .page-next svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.30); /* Smaller arrows */
  transform-origin: 50% 50%;
}

.pagination .page-prev svg circle,
.pagination .page-next svg circle {
  stroke-width: 2.0;
}

#filterOverlay { /* Background on filter pop up*/
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

#filterOverlay.open { opacity: 1; visibility: visible; }

#filterOverlay:not(.open), /* Closed UI shouldn’t catch clicks */
#filterPanel:not(.open) { pointer-events: none !important; }
#filterOverlay.open,
#filterPanel.open { pointer-events: auto !important; }

/* Centered modal */
#filterPanel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 34.5rem; height: 25.95rem;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1001;
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  opacity: 0; visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0;
}
#filterPanel.open {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  animation: bounceIn 0.5s ease;
}

/* Panel layout */
.filter-grid { display: flex; align-items: flex-start; gap: 1rem; padding: 0; }
.filter-right { flex: 1; display: flex; flex-direction: column; margin-top: 0.09rem; }
.filter-right .form-group { margin-bottom: 0.5rem; }

/* Footer actions + links */
.filter-actions { margin-top: 1.5rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.filter-actions .linkage,
.filter-actions .clear-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-size: 0.9rem;
}

/* Form content inside modal */
#filterPanel form { padding-top: 1.8rem; } /* space for close button */

/* Inputs inside modal */
#filterPanel select.form-input { min-width: 10.5rem; max-width: 12rem; box-sizing: border-box; }
#filterPanel #brand.form-input,
#filterPanel #model.form-input {
  border: 1px solid #d1d5db !important;
  background: #FFF !important;
  color: #000 !important;
  -webkit-text-fill-color: #000;
  transition: border-color 0.3s ease-in-out;
}
#filterPanel #brand.form-input:not(:disabled):hover,
#filterPanel #model.form-input:not(:disabled):hover { border-color: #000 !important; }
#filterPanel #brand.form-input:focus,
#filterPanel #model.form-input:focus { border-color: #000 !important; outline: none; }
#filterPanel #model.form-input:disabled {
  opacity: 1; border-color: #d1d5db !important; background: #FFF !important; color: #000 !important;
}

/* Checkbox layout + hover (scoped to modal) */
#filterPanel .custom-checkbox-label {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; gap: 0.5rem; cursor: pointer;
  margin-bottom: 0.505rem; width: 100%; min-width: 0; min-height: 0;
}
.custom-checkbox-label:hover .custom-checkbox-box { border-color: #000 !important; }
.custom-checkbox-label:hover .custom-checkbox-text { color: #000; }
.custom-checkbox-text { font-size: 1rem; white-space: nowrap; }
.custom-checkbox-input:disabled + .custom-checkbox-box,
.custom-checkbox-input:disabled ~ .custom-checkbox-text { opacity: 0.6; cursor: not-allowed; }

/* Flatpickr sizing */
#raceCalendar { margin: 0; padding: 0; }
.flatpickr-calendar {
  transform-origin: top left !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Flatpickr theme (scoped to modal) */
#filterPanel .flatpickr-calendar {
  box-shadow: none !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem;
  background: #FFF;
  transition: border-color 0.3s ease-in-out;
}
#filterPanel .flatpickr-calendar:hover { border-color: #000 !important; }

/* Force site font + stable weight */
#filterPanel .flatpickr-calendar,
#filterPanel .flatpickr-calendar *,
#filterPanel .flatpickr-months,
#filterPanel .flatpickr-month,
#filterPanel .flatpickr-current-month,
#filterPanel .flatpickr-current-month .cur-month,
#filterPanel .flatpickr-current-month .numInput,
#filterPanel .flatpickr-current-month input.cur-year,
#filterPanel .flatpickr-weekdays,
#filterPanel .flatpickr-weekday,
#filterPanel .flatpickr-days,
#filterPanel .flatpickr-day,
#filterPanel .flatpickr-time,
#filterPanel .flatpickr-time input,
#filterPanel .flatpickr-monthDropdown-months {
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Selected/hover/today styles */
#filterPanel .flatpickr-day.selected,
#filterPanel .flatpickr-day.startRange,
#filterPanel .flatpickr-day.endRange {
  background: #000 !important;
  border-color: #000 !important;
  color: #FFF !important;
  border-radius: 0.5rem !important;
}
#filterPanel .flatpickr-day:hover,
#filterPanel .flatpickr-day:focus { border-radius: 0.5rem !important; outline: none; }
#filterPanel .flatpickr-day,
#filterPanel .flatpickr-day.selected,
#filterPanel .flatpickr-day.today,
#filterPanel .flatpickr-day:hover {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#filterPanel .flatpickr-day.today:not(.selected) {
  border-color: #d1d5db !important; border-radius: 0.5rem !important;
}
#filterPanel .flatpickr-day.today:not(.selected):hover,
#filterPanel .flatpickr-day.today:not(.selected):focus { border-radius: 0.5rem !important; }

#filterPanel .flatpickr-day.inRange,
#filterPanel .rangeMode .flatpickr-day:hover {
  background: #FFF !important;
  border-color: #d1d5db !important;
  color: #111 !important;
  box-shadow: none !important;
  outline: none !important;
}
#filterPanel .flatpickr-day.startRange { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
#filterPanel .flatpickr-day.endRange   { border-top-left-radius: 0 !important;  border-bottom-left-radius: 0 !important; }
#filterPanel .flatpickr-day.startRange.endRange { border-radius: 0.5rem !important; }

/* Animations */
@keyframes bounceIn {
  0% { transform: translate(-50%, -50%) scale(0); }
  50% { transform: translate(-50%, -50%) scale(1.10); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* === DASHBOARD (dashboard.php) === */

.profile-header {
  color: #FFF;
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative; /* anchor for pencil positioning */
  border: 1px solid #d1d5db;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

.profile-edit {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.profile-edit .lucide { /* paint positioning */
  width: 22px;
  height: 22px;
  display: block;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  color: #FFF;
  transform: scale(1.15);
  display: block;
}

.profile-info h1 {
  font-size: 1.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between name and flag */
  margin-bottom: 0.25rem;
}

.profile-info .sponsor {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #FFF;
}

.profile-info .email {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #FFF;
}

.flag-img-dash {
  width: 2rem;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #FFF;
  border-radius: 4px;
}

.dashboard-wrapper {
  max-width: 1024px;   /* constrains the whole dashboard */
  margin: 0 auto;      /* centers it */
  padding: 3rem 1.5rem;
}

.dashboard-card {
  background: #FFF;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
}

/* === Dashboard layout (50/50 columns) === */

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Recent (left) | Models (right) */
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.dashboard-card--tall { /* Tall Recent Activity card */
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.dashboard-col-right { /* Right column stacks Models card + Quick Actions */
  display: grid;
  grid-auto-rows: min-content;
  gap: 1.5rem;
}

/* === Models card: donut LEFT, legend RIGHT === */

.models-card .models-card-grid {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Donut sizing so legend fits beside it (≈1/3 smaller) */
.chart-wrap {
  position: relative;
  flex: 0 0 174px;
  height: 174px;
  display: grid;
  place-items: center;
}

.chart-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* <- key: vertical centering of the two lines */
  text-align: center;
  pointer-events: none;
  line-height: 1;
  gap: 2px; /* small space between label and number */
  transform: translateY(4px);
}

.chart-center .center-label {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 1px;
  letter-spacing: .2px;
}

.chart-center .center-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #000;
}

.model-legend { /* Legend list on the RIGHT */
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.model-legend li {
  display: grid;
  grid-template-columns: 14px 1fr max-content;
  gap: .5rem .75rem;
  align-items: center;
}

.model-legend .bullet {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.model-legend .model-name {
  font-size: .9rem;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-legend .model-count {
  font-weight: 600;
  color: #000;
}

/* Profile colour modal */
.color-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.color-modal.open {
  display: flex; /* show when .open is added */
}

.color-form {
  background: #FFF;
  padding: 2rem;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 280px;
  max-width: 360px;
}

/* Colour picker header card -- Align label left, input right */
.color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.color-input-wrap { /* For rows with Remove link */
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Colour picker box for dashboard header */
input[type="color"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  cursor: pointer;
  background: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;}

input[type="color"]::-webkit-color-swatch {
  border: 1px solid #d1d5db;
  border-radius: 50%;
}

.color-row label {
  font-weight: 500;
  color: #000;
  flex: 1;
}

/* Colour picker remove text */
.color-input-wrap .linkage {
  color: #d00;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.color-input-wrap .linkage:hover {
  color: #a00;
  text-decoration: none;
}

/* Prep the droplet for transform-based animation */
.profile-edit .drip {
  transform-box: fill-box;        /* use its own bbox for transforms */
  transform-origin: 50% 0%;       /* top-center of the droplet */
}

/* Drip on hover */
.profile-edit:hover .drip {animation: drip-fall 1.1s ease-in infinite;}

/* Keyframes for the falling/fading droplet */
@keyframes drip-fall {0%   { transform: translateY(0) scale(0.9); opacity: 0;}

12%  {opacity: 1;}

80%  {transform: translateY(8px) scale(1); opacity: 1;}

100% {transform: translateY(12px) scale(1); opacity: 0;}
}

.profile-edit .drip {stroke-width: 2.25;}

/* Avatar wrapper: fixed circle frame */
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  width: var(--avatar-size, 100px);
  height: var(--avatar-size, 100px);
  border-radius: 50%;
  border: 1.5px solid #FFF;
  background: transparent;
  overflow: visible; /* allow camera button to sit outside */
}

.profile-avatar-img, /* Both image and SVG avatars fill the wrapper */
.profile-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.profile-avatar-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  border: none;  
  box-shadow: none; 
}

.avatar-camera-btn {
  position: absolute;
  right: -1.5rem;
  bottom: -0.7rem;
  z-index: 5; /* bring forward so it's not clipped */
  border: 0;
  background: none;
  color: #FFF;
  line-height: 0;
  cursor: pointer;
  padding: 6px;
  margin: 0;
}

.icon-camera {
  width: var(--avatar-icon-size);
  height: var(--avatar-icon-size);
  display: block;
}

/* If you also render an <img> avatar */
.profile-avatar-img {
  width: 100% !important;   /* fill wrapper */
  height: 100% !important;  /* fill wrapper */
  border-radius: 50%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {.avatar-camera-btn { transition: none;}
}

/* Match uploaded avatar photo size to the SVG size in the header */
.profile-header {--avatar-size: 100px;}

.avatar-modal-card { /* Pop up when you click camera */
    background: #FFF;
    border-radius: 0.75rem;
    border: solid 1px #d1d5db;
    padding: 1.25rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* === DASHBOARD: CAMERA PREVIEW === */

:root {
  --avatar-size: 100px;
  --crop-mult: 3.85;         /* camera preview circle = 3× avatar */
  --avatar-camera-x: -8px;   /* move right/left (+ = further right) */
  --avatar-camera-y: -8px;   /* move up/down   (+ = further down)  */
  --avatar-icon-size: 1.5rem;/* camera size (≈24px on 16px root)   */
}

.camera-stage { /* Camera preview area with circular mask */
  position: relative;
  width: clamp(280px, 75vw, 520px);
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
  margin: 1rem auto;
  --crop-diam: calc(var(--avatar-size) * var(--crop-mult));
}

.camera-stage::after { /* Dim everything outside the circle */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) calc(var(--crop-diam) / 2 - 1px),
      rgba(0,0,0,.65) calc(var(--crop-diam) / 2 + 1px));
}

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  line-height: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
}

.modal-close .lucide-circle-x {
  width: 24px;
  height: 24px;
  display: block;
  transform-origin: 50% 50%;
  transition: transform 0.45s linear;
}

.modal-close:hover .lucide-circle-x {
  transform: rotate(1turn); /* spin on the spot */
}

button.linkage, /* bigger linkage button on camera menus */
.avatar-reset-link {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  text-decoration: none !important; /* we use the animated underline */
}

/* === DASHBOARD: IMAGE CROPPER === */

.crop-stage {
  position: relative;
  width: clamp(280px, 75vw, 520px);
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
  margin: 1rem auto;
}

.crop-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dim outside the circle */
.crop-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) calc(var(--crop-diam) / 2 - 1px),
      rgba(0,0,0,.65) calc(var(--crop-diam) / 2 + 1px));
}

/* Bright circle edge (reuse .crop-circle from camera) */
.crop-stage .crop-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--crop-diam);
  height: var(--crop-diam);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95) inset;
  pointer-events: none;
}

.crop-stage .cropper-crop-box, /* Make Cropper.js crop box circular */
.crop-stage .cropper-view-box {
  border-radius: 50%;
  outline: none; /* Remove default Cropper.js outline */
}

.crop-stage .cropper-view-box {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.95); /* White border for visibility */
}

.crop-stage .cropper-face {
  border-radius: 50%; /* Ensure drag area is circular */
}

/* === SHARED: SECTION HEADERS === */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* === MY SETUPS TABLES (my_setups.php) === */

.public-setups-table th:nth-child(1), .public-setups-table td:nth-child(1){width:3.8rem;padding-left:1rem;}
.public-setups-table th:nth-child(2), .public-setups-table td:nth-child(2){width:9.5rem;} /* Event (wider, no Driver) */
.public-setups-table th:nth-child(3), .public-setups-table td:nth-child(3){width:10rem;} /* Track */
.public-setups-table th:nth-child(4), .public-setups-table td:nth-child(4){width:6rem;} /* Brand */
.public-setups-table th:nth-child(5), .public-setups-table td:nth-child(5){width:6.7rem;} /* Model */
.public-setups-table th:nth-child(6), .public-setups-table td:nth-child(6){width:5rem;} /* Surface */
.public-setups-table th:nth-child(7), .public-setups-table td:nth-child(7){width:1.9rem;text-align:center;} /* Download icon */
.public-setups-table th:nth-child(8), .public-setups-table td:nth-child(8){width:2rem;text-align:center;padding-right:1rem;} /* Downloads count */
.public-setups-table th:nth-child(9), .public-setups-table td:nth-child(9){width:2rem;text-align:center;padding-right:1rem;} /* Delete icon */

.private-setups-table th:nth-child(1), .private-setups-table td:nth-child(1){width:3.8rem;padding-left:1rem;}
.private-setups-table th:nth-child(2), .private-setups-table td:nth-child(2){width:9.5rem;} /* Event */
.private-setups-table th:nth-child(3), .private-setups-table td:nth-child(3){width:10rem;} /* Track */
.private-setups-table th:nth-child(4), .private-setups-table td:nth-child(4){width:6rem;} /* Brand */
.private-setups-table th:nth-child(5), .private-setups-table td:nth-child(5){width:6.7rem;} /* Model */
.private-setups-table th:nth-child(6), .private-setups-table td:nth-child(6){width:5rem;} /* Surface */
.private-setups-table th:nth-child(7), .private-setups-table td:nth-child(7){width:1.9rem;text-align:center;} /* Download icon */
.private-setups-table th:nth-child(8), .private-setups-table td:nth-child(8){width:2rem;text-align:center;} /* Publish text */
.private-setups-table th:nth-child(9), .private-setups-table td:nth-child(9){width:2rem;text-align:center;padding-right:1rem;} /* Delete icon */

.publish-link,
.delete-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.delete-link:hover {
  color: #D10000; /* trash bin hover colour */
  text-decoration: underline;
}

.delete-link svg { /* spacing box of trash bin */
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.publish-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
  display: inline-block;
}

.publish-link:hover {
  text-decoration: none;
}

.publish-link svg {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

select.form-input:has(option[value=""]:checked), /*dropdown text colour */
select.form-input:invalid {color: #6B6B6B; font-weight: normal;}

.publish-link:hover .arrow-up,
.publish-link.group:hover .arrow-up {
  animation: bounce-up 0.6s infinite;
}