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

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

body {
  padding-top: 65px;
}

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

.navbar {
  background-color: #000;
  color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  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;
  margin-right: 2rem;
}

.nav-left a {
  display: flex;
  align-items: center;
}

.logo {
  height: 2rem;
}

.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;
  white-space: nowrap;
}

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

.full-width { width: 100%; }

.btn-base { /* Shared button base */
  --btn-bg: transparent;
  font-family: 'Inter', sans-serif;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
  background: transparent;
  transition: opacity 0.2s ease-in-out;
}

.btn-base::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--btn-bg);
  z-index: -1;
  transition: transform 0.2s ease-in-out;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

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

.btn-auth { /* White button */
  --btn-bg: #FFF;
  background: transparent;
  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 */
  --btn-bg: #000;
  background: transparent;
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 1.5rem;
  border-radius: 1.15rem;
  text-decoration: none;
}

.btn-compact {
  min-width: 0.10rem;
  min-height: 2.1rem;
  padding: 0.5rem 0.75rem;
  gap: 0.25rem;
}

.btn-compact svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

.btn-auth:disabled,
.btn-primary:disabled,
.btn-base[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-auth:disabled::before,
.btn-primary:disabled::before,
.btn-base[aria-disabled="true"]::before {
  transform: none !important;
}

.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;
  align-items: stretch;
}

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

/* === 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;
  --u-color: var(--link-underline, currentColor);
  --u-offset: -2px;
}

.linkage,
.linkage:visited,
.linkage:active {
  color: #000;
}

.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;
  overflow-x: visible;
}

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

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

.text-muted { color: #6b7280; } /* Messages*/

.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;
}

select.form-input { /* Adjust ONLY select box height */
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  color:#000;
}

.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;}

/* === 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;
}

.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-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 { 
  font-size: 0.675rem;
  font-weight: 300;
  color: #6b6b6b;
  margin-bottom: 0;
  text-align: center;
}

.login-prompt a {
  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: 3rem;
}

.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-container .form-section { /* Login-specific form section spacing override */
  margin-top: 0.5rem !important;
}

.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-wrapper {
  margin: 5rem 0 0.25rem !important; /* Pushes lower from sponsor (5rem top), hugs button (0.25rem bottom) */
}

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

.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;
  text-align: center;
}

/* === UPLOAD / FILE COMPONENTS (scoped to this page) === */

#upload-box .upload-instructions {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto 1rem auto;
  gap: 0.75rem;
  place-items: center;
}

#upload-box .upload-visual {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: default; /* whole row not clickable */
  transition: opacity 0.2s ease;
  margin-inline: auto;
  width: max-content;
}
#upload-box .upload-visual > label.btn-base { cursor: pointer; } /* only icon clickable */

#upload-box #upload-instructions .linkage,
#upload-box #upload-instructions .linkage:hover { color: #000; }

#upload-box #upload-instructions p.text-muted {
  color: #000;
  text-align: center;
}

#upload-box .upload-visual .vertical-line { margin-left: -4px; }

/* --- Control sizing + colour (all six fields) --- */
#upload-box {
  --control-h: 38px;
  max-width: 32rem;
  margin: 0 auto;
}

#upload-box .form-control,
#upload-box select {
  height: var(--control-h);
  min-height: var(--control-h);
  line-height: var(--control-h);
  font-size: 1rem;
  color: #111;
}

#upload-box .date-wrapper { position: relative; } /* Date input overlay */

#upload-box .date-overlay {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #000000;
  font-size: inherit;
  pointer-events: none;
  transition: opacity .15s ease;
}

#upload-box .date-wrapper:has(input[type="date"]:focus) .date-overlay,
#upload-box .date-wrapper:has(input[type="date"]:valid) .date-overlay {
  opacity: 0;
}

#upload-box .date-wrapper input[type="date"].form-control:invalid::-webkit-datetime-edit { color: transparent; } /* Hide date */
#upload-box .date-wrapper:has(input[type="date"]:focus) input[type="date"].form-control::-webkit-datetime-edit,
#upload-box .date-wrapper:has(input[type="date"]:valid) input[type="date"].form-control::-webkit-datetime-edit { color: inherit; }

#upload-box input[type="date"].form-control::-webkit-datetime-edit { padding: 0; }

#upload-box input::placeholder { color: #111; } /* Race date over the top */

/* === UPLOAD PROGRESS (upload_setup.php) === */
.progress-container { margin-top: 1rem; display: none; }

progress { /* Base sizing */
  width: 100%;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit/Blink (Chrome/Edge/Safari) */
progress::-webkit-progress-bar { 
  background-color: #e5e7eb;
  border-radius: 0.375rem;
}
progress::-webkit-progress-value { 
  background-color: #000;
  border-radius: 0.375rem;
}

#upload-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #666;
  text-align: center;
}

.vertical-line {
  width: 1px;
  height: 60px;
  background: #6b7280;
  flex-shrink: 0;
}

.upload-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.upload-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
}

#uploadForm .checkbox-wrapper { display: flex; justify-content: center; }

/* wrapper should NOT feel clickable */
.info-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: default; /* important */
}

/* clean, thicker circle */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;   /* slightly bigger */
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #000; /* slightly thinner than before */
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

/* hover feel tighter + more intentional */
.info-icon:hover,
.info-icon:focus {
  background: #000;
  color: #fff;
}

/* tooltip (unchanged positioning fix included) */
.info-tooltip {
  position: absolute;
  bottom: 140%;
  left: 50%;
  width: 240px;

  background: #111;
  color: #ddd;
  font-size: 12px;
  line-height: 1.4;

  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);

  opacity: 0;
  visibility: hidden;

  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;

  z-index: 100;
}

/* arrow */
.info-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #111 transparent transparent transparent;
}

/* show logic */
.info-tooltip-wrapper:hover .info-tooltip,
.info-tooltip-wrapper:focus-within .info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

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

.setups-table a.underline-hover, /* Driver name links in setups table */
.setups-table a.underline-hover:visited {
  color: #000;
  text-decoration: none;
}

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

.table-wrap .table-inner{
  display: inline-block;
  min-width: var(--mysetups-min-width);
  text-align: left;
}

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

.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;
  border: none;
  font-size: 0.80rem;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25rem;
}

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

.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;
}

/* Column widths */
.setups-table th:nth-child(1),  .setups-table td:nth-child(1)  { width: 5.1rem; padding-left: 1rem; }                 /* Race Date */
.setups-table th:nth-child(2),  .setups-table td:nth-child(2)  { width: 9rem; }                                        /* Driver */
.setups-table th:nth-child(3),  .setups-table td:nth-child(3)  { width: 2.5rem; text-align: center; }                  /* Flag */
.setups-table th:nth-child(4),  .setups-table td:nth-child(4)  { width: 10.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Event */
.setups-table th:nth-child(5),  .setups-table td:nth-child(5)  { width: 10.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Track */
.setups-table th:nth-child(6),  .setups-table td:nth-child(6)  { width: 6rem; text-align: center; }                    /* Brand */
.setups-table th:nth-child(7),  .setups-table td:nth-child(7)  { width: 8.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* Model */
.setups-table th:nth-child(8),  .setups-table td:nth-child(8)  { width: 5.7rem; }                                      /* Surface */
.setups-table th:nth-child(9),  .setups-table td:nth-child(9)  { width: 2.9rem; text-align: center; }                  /* Share */
.setups-table th:nth-child(10), .setups-table td:nth-child(10) { width: 4.5rem; text-align: center; }                  /* Download */
.setups-table th:nth-child(11), .setups-table td:nth-child(11) { width: 2.9rem; text-align: center; padding-right: 1rem; } /* DL's */

.page-setups{
  /* Sum of your setups table column widths (matches your current th/td widths) */
  --setups-min-width: calc(
    5.1rem +  /* Race Date */
    9rem +    /* Driver */
    2.5rem +  /* Flag */
    10.5rem + /* Event */
    10.3rem + /* Track */
    6rem +    /* Brand */
    8.6rem +  /* Model */
    5.7rem +  /* Surface */
    2.9rem +  /* Share */
    4.5rem +  /* Download */
    2.9rem    /* DLs */
  );
}

.page-setups .setups-width{
  width: 100%;
  min-width: var(--setups-min-width);
  box-sizing: border-box;
}

.brand-logo-cell {
  text-align: center;
}

.brand-logo-img {
  height: 25px; 
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Make sure NO other columns get ellipses applied by a global rule */
.setups-table th:not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(7)),
.setups-table td:not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(7)) {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.drivers-th-flag svg { display: block; margin: 0 auto; }

.drivers-th-flag { line-height: 0; }

.setups-table td:nth-child(3) .flag-img {
  display: block;
  margin: 0 auto;
}

.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; }

@keyframes bounce-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.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-search,
.mysetups-search{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  flex: 1;
  max-width: 300px;
  margin-right: 0.4rem;
}

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

.mysetups-search-input:hover{
  background: #e9e9e9;
}

.mysetups-search-input:focus{
  background: #e9e9e9;
}

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

.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-search + mysetups-search) */
.table-controls .table-search button svg,
.mysetups-controls .mysetups-search button svg{
  stroke: #FFF;
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.table-controls .table-search svg,
.mysetups-controls .mysetups-search svg{
  overflow: visible;
}

.table-controls .table-search .search-rotate,
.mysetups-controls .mysetups-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,
.mysetups-controls .mysetups-search button:hover .search-rotate{
  transform: rotate(1turn);
}

.setups-controls-right.table-filters .date-icon-trigger{
  background: transparent !important;
  border: 0 !important;
}

#topFilterForm .date-icon-trigger svg{
  width: 40.5px !important;
  height: 40.5px !important;
  display: block !important;
  cursor:pointer;
  transform: translateY(-2px);
  transform-origin: center;
  transition: transform 0.18s ease !important;
}

#topFilterForm .date-icon-trigger:hover svg,
#topFilterForm .date-icon-trigger:focus-visible svg{
  transform: translateY(-2px) scale(1.08) !important;
}

.page-setups .table-search-input{
  min-width: 0;
  width: 100%;
}
/* === 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;
  min-width: var(--mysetups-min-width);
  margin-left: auto;
  margin-right: auto;
}

/* Base pill (numbers + arrows share this via .page-link) */
.page-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  margin: 0 0.2rem;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  background: transparent;
  transition: color 0.2s ease;
}

/* Number pill layer scales instead of text */
.page-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  z-index: -1;
  transition: transform 0.2s ease-in-out;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* Hover grow only on non-active number pills */
.page-link:not(.active):not(.page-prev):not(.page-next):hover::before {
  transform: scale(1.10);
}

/* Tiny optical nudge for number glyphs */
.page-link:not(.page-prev):not(.page-next) {
  padding-bottom: 1px;
}

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

.page-link.active::before {
  background: #000;
  border-color: #000;
  transform: none !important;
}

/* --- Arrow pills only (prev/next) --- */
.page-prev,
.page-next {
  overflow: visible;
}

/* No CSS fake circle on arrows */
.page-prev::before,
.page-next::before {
  display: none;
}

.pagination .page-prev svg,
.pagination .page-next svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: translateZ(0);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pagination .page-prev svg circle,
.pagination .page-next svg circle {
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.06) translateZ(0);
  transition: transform 0.2s ease-in-out;
  vector-effect: non-scaling-stroke;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.pagination .page-prev:hover svg circle,
.pagination .page-next:hover svg circle {
  transform: scale(1.16) translateZ(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 both filter panel + setups date popover) */
#filterPanel .flatpickr-calendar,
#datePopover .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,
#datePopover .flatpickr-calendar:hover{
  border-color:#000 !important;
}

#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,
#datePopover .flatpickr-calendar,
#datePopover .flatpickr-calendar *,
#datePopover .flatpickr-months,
#datePopover .flatpickr-month,
#datePopover .flatpickr-current-month,
#datePopover .flatpickr-current-month .cur-month,
#datePopover .flatpickr-current-month .numInput,
#datePopover .flatpickr-current-month input.cur-year,
#datePopover .flatpickr-weekdays,
#datePopover .flatpickr-weekday,
#datePopover .flatpickr-days,
#datePopover .flatpickr-day,
#datePopover .flatpickr-time,
#datePopover .flatpickr-time input,
#datePopover .flatpickr-monthDropdown-months{
  font-family:inherit !important;
  font-weight:inherit !important;
}

/* Selected start/end dates */
#filterPanel .flatpickr-day.selected,
#filterPanel .flatpickr-day.startRange,
#filterPanel .flatpickr-day.endRange,
#filterPanel .flatpickr-day.selected.inRange,
#filterPanel .flatpickr-day.selected.startRange,
#filterPanel .flatpickr-day.selected.endRange,
#datePopover .flatpickr-day.selected,
#datePopover .flatpickr-day.startRange,
#datePopover .flatpickr-day.endRange,
#datePopover .flatpickr-day.selected.inRange,
#datePopover .flatpickr-day.selected.startRange,
#datePopover .flatpickr-day.selected.endRange{
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  border-radius:0.5rem !important;
  box-shadow:none !important;
}

/* Hover over selectable dates = black */
#filterPanel .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):hover,
#filterPanel .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):focus,
#datePopover .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):hover,
#datePopover .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):focus{
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  border-radius:0.5rem !important;
  outline:none !important;
  box-shadow:none !important;
}

#filterPanel .flatpickr-day,
#filterPanel .flatpickr-day.selected,
#filterPanel .flatpickr-day.today,
#filterPanel .flatpickr-day:hover,
#datePopover .flatpickr-day,
#datePopover .flatpickr-day.selected,
#datePopover .flatpickr-day.today,
#datePopover .flatpickr-day:hover{
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#filterPanel .flatpickr-day.today:not(.selected),
#datePopover .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,
#datePopover .flatpickr-day.today:not(.selected):hover,
#datePopover .flatpickr-day.today:not(.selected):focus{
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  border-radius:0.5rem !important;
  box-shadow:none !important;
}

#filterPanel .flatpickr-day.inRange,
#datePopover .flatpickr-day.inRange{
  background:#fff !important;
  border-color:#d1d5db !important;
  color:#111 !important;
  box-shadow:none !important;
  outline:none !important;
}

#filterPanel .flatpickr-day.startRange,
#datePopover .flatpickr-day.startRange{
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

#filterPanel .flatpickr-day.endRange,
#datePopover .flatpickr-day.endRange{
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
}

#filterPanel .flatpickr-day.startRange.endRange,
#datePopover .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 {
  --avatar-size: 100px;
  color: #000;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  border: 1px solid #d1d5db;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  background: var(--dashboard-header-bg);
  overflow: hidden;
}

.profile-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background-image: var(--dashboard-header-stripes);
  background-repeat: no-repeat;
  background-size: 100% 18px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
}

.profile-avatar-wrap,
.profile-info,
.profile-edit {
  position: relative;
  z-index: 1;
}

/* Bounce for avatar + colour picker modals – scale only, no translate */
@keyframes avatarBounce {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}

/* Apply the bounce to BOTH the avatar card and the colour-picker form */
.color-modal.open .avatar-modal-card,
.color-modal.open .color-form {
  animation: avatarBounce 0.5s ease;
}

.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;
}

/* Palette dot hover wave */
@keyframes palette-dot-wave {
  0%, 100% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    opacity: 0;
    transform: translateX(0px);
  }
}

.profile-edit .lucide-palette circle {
  transform-box: fill-box;
  transform-origin: center;
}

.profile-edit:hover .lucide-palette circle {
  animation: palette-dot-wave 1s ease-in-out infinite;
}

.profile-edit:hover .lucide-palette circle:nth-of-type(1) {
  animation-delay: 0s;
}

.profile-edit:hover .lucide-palette circle:nth-of-type(2) {
  animation-delay: 0.12s;
}

.profile-edit:hover .lucide-palette circle:nth-of-type(3) {
  animation-delay: 0.24s;
}

.profile-edit:hover .lucide-palette circle:nth-of-type(4) {
  animation-delay: 0.36s;
}

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

/* Icon colour modifiers based on gradient brightness */
.profile-edit.profile-edit-light-bg {
  color: #111; /* dark icon on light background */
}

.profile-edit.profile-edit-dark-bg {
  color: #FFF; /* light icon on dark background (default) */
}

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

.profile-info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-info h1{
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.05;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.profile-info .sponsor{
  margin: 0;
  padding: 0;
  display: block;
}

.sponsor-logo-dash{
  height: 40px;
  width:auto;
  max-width: 600px;
  display:block;
}

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

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

.dashboard-wrapper {
  max-width: 1024px;
  margin: 0 auto;
  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;
}

#cameraArea { /* Camera viewport */
  position: relative;
  overflow: visible;
}

#avatarVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

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

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

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

.dashboard-card-title {
  padding-bottom: 1rem;
}

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

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

.chart-wrap { /* Donut sizing */
  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;
  text-align: center;
  pointer-events: none;
  line-height: 1;
  gap: 2px; /* 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;
}

.color-modal { /* Profile colour / avatar modal */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

.color-modal.open {
  opacity: 1; /* fade in when open */
  pointer-events: auto; /* clickable when visible */
}

.color-form {
  background: linear-gradient(to bottom right, #eaeaea, #FFF);
  padding: 2rem;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 280px;
  max-width: 360px;
}

.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;
}

input[type="color"] { /* Colour picker box for dashboard header */
  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;
}

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

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

/* 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 #000;
  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; 
}

@keyframes camera-star-flash { /* Camera star flash on hover */
  0% {
    opacity: 0;
    transform: scale(0) rotate(45deg);
  }
  40% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(45deg);
  }
}

.avatar-camera-btn::after { /* Tiny star positioned where the flash would be */
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 2px;
  right: 4px;
  background: #000;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform-origin: center;
  transform: scale(0) rotate(45deg);
  pointer-events: none;
}

.avatar-camera-btn:hover::after { /* Trigger the star flash once on hover */
  animation: camera-star-flash 0.28s ease-out;
}

.avatar-camera-btn {
  position: absolute;
  right: -1.5rem;
  bottom: -0.7rem;
  z-index: 5;
  border: 0;
  background: none;
  color: #000000;
  line-height: 0;
  cursor: pointer;
  padding: 6px;
  margin: 0;
}

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

.profile-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
}

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

.avatar-modal-card { /* Pop up when you click camera */
  background: linear-gradient(to bottom right, #eaeaea, #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 {
  --drivers-min-width: 980px; /* adjust this number to your table’s “final” width */
  --avatar-size: 100px;
  --crop-mult: 3.85;
  --avatar-camera-x: -8px;
  --avatar-camera-y: -8px;
  --avatar-icon-size: 1.5rem;
}

.camera-stage {
  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;
  border-radius: 0.75rem;
  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);
}

button.linkage,
.avatar-reset-link {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  text-decoration: none !important;
}

/* === 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;
}

.crop-stage::after { /* Dim 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));
}

.crop-stage .crop-circle { /* Bright circle edge (reuse .crop-circle from camera) */
  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 */
}

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

.private-setups-title{
  margin-top:2rem;
  margin-bottom:0.75rem;
  transform:none;
}

/* Filter button piggybacks on .btn-primary (shared black pill) */
.filter-btn { 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 */

.public-setups-table td,
.private-setups-table td{
  overflow:hidden !important;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}

.public-setups-table th,
.private-setups-table th{
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap;
  vertical-align:middle;
}

.public-setups-table th:nth-child(7), /* Icon headers centered */
.public-setups-table th:nth-child(8),
.public-setups-table th:nth-child(9),
.private-setups-table th:nth-child(7),
.private-setups-table th:nth-child(8),
.private-setups-table th:nth-child(9){
  text-align:center !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.public-setups-table td > a,
.private-setups-table td > a{
  display:inline-block;
}

/* Race Date / Event separation */
.public-setups-table th:nth-child(1), .public-setups-table td:nth-child(1),
.private-setups-table th:nth-child(1), .private-setups-table td:nth-child(1){
  padding-right:1rem;
}
.public-setups-table th:nth-child(2), .public-setups-table td:nth-child(2),
.private-setups-table th:nth-child(2), .private-setups-table td:nth-child(2){
  padding-left:0.6rem;
}

/* Download / DL's / Publish / Delete body alignment */
.public-setups-table td:nth-child(7),
.public-setups-table td:nth-child(8),
.private-setups-table td:nth-child(7),
.private-setups-table td:nth-child(8),
.public-setups-table td:nth-child(9),
.private-setups-table td:nth-child(9){
  text-align:center !important;
}

/* === DELETE COLUMN: TRUE CENTER (kills all drift) === */
.public-setups-table th:nth-child(9),
.public-setups-table td:nth-child(9),
.private-setups-table th:nth-child(9),
.private-setups-table td:nth-child(9){
  padding:0 !important;
  text-align:center !important;
  vertical-align:middle !important;
}

.public-setups-table td:nth-child(9) .delete-link,
.private-setups-table td:nth-child(9) .delete-link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  line-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

.public-setups-table td:nth-child(9) .delete-link svg,
.private-setups-table td:nth-child(9) .delete-link svg{
  display:block;
}

/* Column sizing */
.public-setups-table th:nth-child(1), .public-setups-table td:nth-child(1){width:5.2rem;padding-left:1rem;} /* Race Date */
.public-setups-table th:nth-child(2), .public-setups-table td:nth-child(2){width:10.5rem;} /* Event */
.public-setups-table th:nth-child(3), .public-setups-table td:nth-child(3){width:10.5rem;text-align:left;} /* Track */
.public-setups-table th:nth-child(4), .public-setups-table td:nth-child(4){width:6.3rem;text-align:center;} /* Brand */
.public-setups-table th:nth-child(5), .public-setups-table td:nth-child(5){width:7.7rem;} /* Model */
.public-setups-table th:nth-child(6), .public-setups-table td:nth-child(6){width:6rem;text-align:left;} /* Surface */
.public-setups-table th:nth-child(7), .public-setups-table td:nth-child(7){width:4.4rem;text-align:center;} /* Share icon */
.public-setups-table th:nth-child(8), .public-setups-table td:nth-child(8){width:4.3rem;text-align:center;} /* Download icon */
.public-setups-table th:nth-child(9), .public-setups-table td:nth-child(9){width:4.3rem;text-align:center;} /* DL's */
.public-setups-table th:nth-child(10), .public-setups-table td:nth-child(10){width:3.2rem;text-align:center;} /* Delete icon */

/* Column sizing for private */
.private-setups-table th:nth-child(1), .private-setups-table td:nth-child(1){width:5.2rem;padding-left:1rem;} /* Race Date */
.private-setups-table th:nth-child(2), .private-setups-table td:nth-child(2){width:10.5rem;} /* Event */
.private-setups-table th:nth-child(3), .private-setups-table td:nth-child(3){width:10.5rem;text-align:left;} /* Track */
.private-setups-table th:nth-child(4), .private-setups-table td:nth-child(4){width:6.3rem;text-align:center;} /* Brand */
.private-setups-table th:nth-child(5), .private-setups-table td:nth-child(5){width:7.7rem;} /* Model */
.private-setups-table th:nth-child(6), .private-setups-table td:nth-child(6){width:6rem;text-align:left;} /* Surface */
.private-setups-table th:nth-child(7), .private-setups-table td:nth-child(7){width:4.4rem;text-align:center !important;padding-right:0.6rem !important;} /* Share icon */
.private-setups-table th:nth-child(8), .private-setups-table td:nth-child(8){width:4.3rem;text-align:center !important;padding-left:0.6rem !important;} /* Download icon */
.private-setups-table th:nth-child(9), .private-setups-table td:nth-child(9){width:4.3rem;text-align:center;} /* Publish */
.private-setups-table th:nth-child(10), .private-setups-table td:nth-child(10){width:3.2rem;text-align:center;} /* Delete icon */

.private-setups-table th:nth-child(7),
.private-setups-table td:nth-child(7),
.private-setups-table th:nth-child(8),
.private-setups-table td:nth-child(8){
  padding-left:0 !important;
  padding-right:0 !important;
  text-align:center !important;
  vertical-align:middle !important;
}

.table-ellipsis{
  display:block;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.private-setups-table {
  min-width: var(--mysetups-min-width) !important;
}

.public-setups-table,
.private-setups-table { /* Force tables to stop shrinking at the same point as the header */
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  min-width: var(--mysetups-min-width) !important;
}

.public-setups-table td.brand-logo-cell img,
.private-setups-table td.brand-logo-cell img{
  height: 24px;
  width: auto;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

/* === MY SETUPS: header + controls (PIN RIGHT LIKE DRIVERS) === */
.mysetups-header{
  --mysetups-min-width: calc(5.2rem + 10.5rem + 10.5rem + 6.3rem + 7.7rem + 6rem + 4.4rem + 4.3rem + 4.3rem + 3.2rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  margin-bottom:0.25rem;
  width:100%;
  min-width:var(--mysetups-min-width);
  box-sizing:border-box;
  padding-left:0 !important;
  padding-right:0 !important;
}

.mysetups-title{
  margin:0;
  white-space:nowrap;
  flex:0 0 auto;
}

.mysetups-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  margin-left:auto;
  gap:0.5rem;
  flex:0 0 auto;
  min-width:0;
}

.mysetups-controls .mysetups-search{
  display:flex;
  align-items:center;
  gap:0.6rem;
  flex-wrap:nowrap;
  flex:0 0 auto !important;
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  min-width:0;
}

.mysetups-search-input{
  width:18rem;
  min-width:12rem;
  max-width:18rem;
  flex:0 1 auto;
}

.mysetups-search button,
.mysetups-search .mysetups-search-btn{
  flex:0 0 auto;
  margin:0 !important;
}

/* FILTER */
.mysetups-controls .mysetups-filter,
.mysetups-controls .filter-btn{
  flex:0 0 auto;
  margin:0 !important;
  margin-left:0 !important;
}

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

.delete-link:hover {
  color: #D10000;
  text-decoration: underline;
}

.delete-link svg {
  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;
}

/* === DRIVERS (drivers.php) === */

.driver-header-top{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  gap: 10px;
}

.driver-header {
  display: flex;
  align-items: center;
}

.driver-meta-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.driver-meta-uploads{
  white-space: nowrap;
}

.driver-header-meta .driver-sponsor{
  display: inline-flex;
  align-items: center;
  height: 44px;
  max-height: 84px;
}

.driver-header-meta .driver-sponsor .sponsor-logo-dash{ /* Image fills wrapper height */
  height: 100%;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.driver-header .profile-avatar-wrap {
  border-color: #000;
}

.driver-header-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
  text-align: center;
  align-items: center;
  flex: 1;
  width: auto;
}

.driver-header-meta .driver-meta-row{
  justify-content: center;
  width: 100%;
}

.driver-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.driver-header-meta {
  font-size: 0.85rem;
}

.drivers-back-link{
  margin-top: 7px;
  margin-left: 12px;
}

.drivers-back-link > a.underline-hover{
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1.1;
  color: #000;
  text-decoration: none;
  border-bottom: none;
  font-weight: 600;
}

.drivers-back-link > a.underline-hover:visited{
  color: #000;
}

/* === DRIVER COLOUR PILL: 4 slanted blocks === */

.driver-colours-pill.slant-bars{
  width: 8rem;
  height: 1.2rem;
  border-radius: 999px;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0;
  background: transparent;
  border: none;
}

.driver-colours-pill.slant-bars .bar{ /* Each coloured block: 1px black outline */
  flex: 1 1 0;
  height: 100%;
  background: var(--bar, #000);
  border-radius: 0.25rem;
  border: 1px solid #000;       /* IMPORTANT: outline per colour */
  transform: skewX(-22deg);     /* tweak -20 to -26 to taste */
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

/* Drivers table — sponsor logo cell */
.drivers-list-table td:nth-child(3) {
  overflow: visible;
}

.sponsor-cell {
  height: 24px;
  display: flex;
  align-items: center;
}

.sponsor-logo-table {
  height: 30px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.table-controls .table-filters { /* Right-hand filters row */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;   /* pushes form to the right */
  flex-wrap: nowrap;   /* keep dropdowns + buttons on a single line */
}

.table-controls .table-filters .form-input {
  width: 10.5rem;
  flex: 0 0 auto;
  min-width: 150px;
  border-radius: 0.375rem;
  border: 1px solid #000;
}

/* Column widths (fixed layout prevents bleed) */
.driver-setups-table th:nth-child(1), .driver-setups-table td:nth-child(1) {width: 3rem; padding-left: 1rem;} /* Race Date */
.driver-setups-table th:nth-child(2), .driver-setups-table td:nth-child(2) {width: 7rem;} /* Event */
.driver-setups-table th:nth-child(3), .driver-setups-table td:nth-child(3) {width: 7rem; text-align: left;} /* Track */
.driver-setups-table th:nth-child(4), .driver-setups-table td:nth-child(4) {width: 4rem; text-align: center;} /* Brand */
.driver-setups-table th:nth-child(5), .driver-setups-table td:nth-child(5) {width: 6rem;} /* Model */
.driver-setups-table th:nth-child(6), .driver-setups-table td:nth-child(6) {width: 3.3rem; text-align:left;} /* Surface */
.driver-setups-table th:nth-child(7), .driver-setups-table td:nth-child(7) {width: 2.5rem; text-align: center;} /* Share icon */
.driver-setups-table th:nth-child(8), .driver-setups-table td:nth-child(8) {width: 2.5rem; text-align: center;} /* Download icon */
.driver-setups-table th:nth-child(9), .driver-setups-table td:nth-child(9) {width: 2rem; text-align: center; padding-right: 1rem;} /* Download count */

.driver-setups-table .brand-logo-cell img{
  height: 24px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Force Track to clip + ellipsis (wins over any setups-table defaults) */
.setups-table.driver-setups-table{ table-layout: fixed !important; width: 100% !important; }

.setups-table.driver-setups-table td:nth-child(3){
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Stop Download + DL's bleeding when table shrinks */
.setups-table.driver-setups-table th:nth-child(8),
.setups-table.driver-setups-table td:nth-child(8),
.setups-table.driver-setups-table th:nth-child(9),
.setups-table.driver-setups-table td:nth-child(9){
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

/* Drivers list table (all drivers) */

.drivers-list-table th:nth-child(1),  .drivers-list-table td:nth-child(1)  {width: 2.5rem; text-align: center;} /* Avatar */
.drivers-list-table th:nth-child(2),  .drivers-list-table td:nth-child(2)  {width: 11rem; padding-left: 1rem;} /* Name */
.drivers-list-table th:nth-child(3),  .drivers-list-table td:nth-child(3)  {width: 5rem; text-align: center;} /* Flag */
.drivers-list-table th:nth-child(4),  .drivers-list-table td:nth-child(4)  {width: 8.3rem; text-align: center;} /* Sponsor */
.drivers-list-table th:nth-child(5),  .drivers-list-table td:nth-child(5)  {width: 3.8rem; text-align: center;} /* Uploads */
.drivers-list-table th:nth-child(6),  .drivers-list-table td:nth-child(6)  {width: 5.9rem; text-align: center;} /* Last Upload */
.drivers-list-table th:nth-child(7),  .drivers-list-table td:nth-child(7)  {width: 10rem; text-align: center;} /* Colours */
.drivers-list-table th:nth-child(8),  .drivers-list-table td:nth-child(8)  {width: 3.7rem; text-align: center;} /* Share */
.drivers-list-table th:nth-child(9),  .drivers-list-table td:nth-child(9)  {width: 3.9rem; text-align: center;} /* Online circle */
.drivers-list-table th:nth-child(10), .drivers-list-table td:nth-child(10) {width: 3.9rem; text-align: center;} /* Messaging */

/* === DRIVERS PAGE: lock controls + table to the same minimum width === */

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

.table-controls .table-search,
.table-controls .table-filters{
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.table-controls .table-search-input{ width: 15rem; }

.table-controls .btn-compact{ white-space: nowrap; }

.page-drivers .table-wrap {
  min-width: var(--drivers-min-width);
}

.drivers-list-table tbody tr{
  overflow: visible !important;
}

.drivers-list-table tbody td{
  overflow: visible !important;
}

.drivers-list-table thead th.th-last-upload{
  white-space: nowrap !important;
}

.drivers-list-table thead th.th-last-upload .th-full,
.drivers-list-table thead th.th-last-upload .th-short{
  display: inline !important;
  white-space: nowrap !important;
}

/* swap to short label on small screens */
.drivers-list-table thead th.th-last-upload .th-short{ display: none !important; }

@media (max-width: 700px){
  .drivers-list-table thead th.th-last-upload .th-full{ display: none !important; }
  .drivers-list-table thead th.th-last-upload .th-short{ display: inline !important; }
}

.drivers-list-table thead th.drivers-th-avatar{
  text-align: center;
}

.drivers-list-table thead .driver-avatar-mini--header{
  margin: 0 auto;
}

.drivers-list-table thead .driver-avatar-mini--header svg{
  color: #fff;
}

.drivers-list-table td:nth-child(3) img.flag-img {
  display: block;
  margin: 0 auto;
}

.drivers-list-table th,
.drivers-list-table td{
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
}

.drivers-list-table thead th{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.drivers-list-table thead th svg{ /* Default header SVG styling */
  display: block;
  color: #fff;
}

/* Center header SVGs for centered icon columns */
.drivers-list-table thead th:nth-child(3) svg,
.drivers-list-table thead th:nth-child(8) svg,
.drivers-list-table thead th:nth-child(9) svg,
.drivers-list-table thead th:nth-child(10) svg{
  margin: 0 auto;
}

.drivers-list-table td:nth-child(4) .sponsor-logo-table{
  display: block;
  margin: 0 auto;
  height: 35px;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
}

.drivers-list-table td:nth-child(7) .driver-colours-pill{
  margin: 0 auto;
}

/* Header: colours pill outline-only, but same shape/style */
.drivers-list-table thead th .driver-colours-pill--header{
  margin: 0 auto;
  transform: scale(0.75);
}

.drivers-list-table thead th .driver-colours-pill--header .bar{
  background: transparent !important;
  border: 1.5px solid #fff;
}

/* === DRIVER DETAIL HEADER LAYOUT === */

.driver-detail-bar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 0 !important;
}

.driver-detail-bar .driver-detail-left{
  flex: 1 1 auto;
  min-width: 0;
}

.driver-detail-bar .driver-detail-right{
  flex: 0 0 auto;
  margin-left: auto;
}

.driver-detail-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 0rem;
}

.driver-detail-colours {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.driver-detail-colours-inner{
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}

.driver-profile-flag{
  width: 66px;
  height: auto;
  display: block;
  align-self: center;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 7px;
  border: 1px solid #cfd3db;
}

.driver-profile-stripes {
  width: 464px;
  height: 50px;
  border-radius: 6px;
  background: var(--stripes);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  margin-bottom: 7px;
  border: 1px solid #cfd3db;
}

.driver-detail-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.driver-detail-actions > * {
  flex: 0 0 auto;
}

.driver-detail-actions .table-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.driver-detail-actions .table-search-input {
  width: 360px;
  max-width: 360px;
}

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

.drivers-list-table tbody tr[data-href] {
  cursor: pointer;
}

/* === DRIVERS LIST: MINI AVATAR COLUMN === */

.drivers-list-table .driver-avatar-cell {
  padding-right: 0;
  white-space: nowrap;
}

.drivers-list-table .driver-avatar-mini {
  width: 30px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drivers-list-table .driver-avatar-mini-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drivers-list-table .driver-avatar-mini-svg { /* Make default SVG avatar same size as uploaded photo */
  display: block;
}

.driver-share-cell {
  width: 3.25rem;
  text-align: center;
  white-space: nowrap;
}

.driver-share-btn {
  background: transparent;
  border: 0;
  padding: 0.35rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.driver-share-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.driver-mail-cell { 
  padding: 0;
}

.driver-mail-btn{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}

.driver-mail-icon{
  width: 20px;
  height: 20px;
  display: block;
}

.driver-mail-btn.is-disabled{
  cursor: not-allowed;
}

.driver-online-cell{
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.driver-status-dot{
  display: block; 
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #999;
  box-shadow: 0 0 0 1.5px #000;
  padding: 0;
  margin: 0 auto;
}

.driver-status-dot.is-online{ background: #22c55e; }
.driver-status-dot.is-offline{ background: #ef4444; }
.driver-status-dot.is-inactive{ background: orange; }

.setup-share-cell{
  text-align: center;
  width: 3.25rem;
  vertical-align: middle;
  line-height: 0;
}

.setup-share-btn{
  display: inline-block;
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.setup-share-btn svg{
  width: 17px;
  height: 17px;
  display: block;
}

/* share icon dots */
.setup-share-btn svg circle,
.lucide-share-2 circle{fill:transparent}

.setup-share-btn:hover svg circle,
.lucide-share-2:hover circle{animation:shareDot 1.2s infinite}

.setup-share-btn:hover svg circle:nth-of-type(2),
.lucide-share-2:hover circle:nth-of-type(2){animation-delay:.2s}

.setup-share-btn:hover svg circle:nth-of-type(3),
.lucide-share-2:hover circle:nth-of-type(3){animation-delay:.4s}

/* driver button uses same animation but white dots */
#shareProfileBtn:hover svg circle{animation:shareDotWhite 1.2s infinite}
#shareProfileBtn:hover svg circle:nth-of-type(2){animation-delay:.2s}
#shareProfileBtn:hover svg circle:nth-of-type(3){animation-delay:.4s}
#shareProfileBtn span{line-height:1;display:block}

@keyframes shareDot{0%,100%{fill:transparent}50%{fill:#000}}
@keyframes shareDotWhite{0%,100%{fill:transparent}50%{fill:#fff}}

.date-icon-trigger svg path:nth-of-type(n+5){
  opacity:0.35;
}

.date-icon-trigger:hover svg path:nth-of-type(n+5){ /* animate dots */
  animation: calendarDots 1.1s linear infinite;
}

.date-icon-trigger:hover svg path:nth-of-type(5){animation-delay:0s;}
.date-icon-trigger:hover svg path:nth-of-type(6){animation-delay:.15s;}
.date-icon-trigger:hover svg path:nth-of-type(7){animation-delay:.30s;}
.date-icon-trigger:hover svg path:nth-of-type(8){animation-delay:.45s;}
.date-icon-trigger:hover svg path:nth-of-type(9){animation-delay:.60s;}
.date-icon-trigger:hover svg path:nth-of-type(10){animation-delay:.75s;}

@keyframes calendarDots{
  0%,100%{opacity:.35}
  45%{opacity:1}
}

.driver-mail-icon .mail-letter{
  opacity: 0;
  transform: translateY(3px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.driver-mail-btn:hover .mail-letter{
  opacity: 1;
  transform: translateY(0);
}

.upload-instructions label[for="setup_file"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.upload-instructions label[for="setup_file"] svg{
  display:block;
  transform-origin:center;
  transition:transform 0.22s ease;
}

.upload-instructions label[for="setup_file"]:hover svg,
.upload-instructions label[for="setup_file"]:focus-visible svg{
  transform:scale(1.1);
}

.logout-success {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.logout-success-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.logout-success-title {
  margin: 0;
  text-align: center;
}

.logout-success-icon {
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

/* Login success overlay */
.login-success-banner{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Fade whole overlay away smoothly */
.login-success-banner.is-hiding{
  opacity: 0;
  visibility: hidden;
}

/* Success card */
.login-success-inner{
  position: relative;
  background: #fff;
  padding: 2.5rem 3rem;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease;
  animation: loginSuccessPopIn 0.35s ease;
}

/* Card also softens slightly as overlay fades */
.login-success-banner.is-hiding .login-success-inner{
  opacity: 0;
  transform: scale(0.98);
}

.login-success-title{
  margin-bottom: 1.2rem;
}

.login-success-icon{
  display: block;
  margin: auto;
}

/* Only animate the entrance */
@keyframes loginSuccessPopIn{
  0%{
    opacity: 0;
    transform: scale(0.92);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}

/* Success message (e.g. verification email sent) */
.form-success-text {
  color: #166534; /* dark green text */
  background-color: #dcfce7; /* light green background */
  border: 1px solid #22c55e; /* green border */
  border-radius: 0.375rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

.form-success-text + .form-error-text {
  margin-top: 0.5rem;
}

.mysetups-empty-state {
  margin: 1.25rem 0 2.5rem;
}

.mysetups-empty-state .text-muted {
  margin: 0;
}

/* === Index === */

.container {
  width: 1100px;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* Desktop layout */
.content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 1.5rem;
  align-items: start;
}

.news-feed {
  min-width: 0;
}

.sidebar {
  width: 290px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-post {
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.post-date {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.news-post h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.news-post h2 a,
.news-post h2 a:visited,
.news-post h2 a:active {
  color: #000;
  text-decoration: none;
}

.news-post h2 a:hover {
  color: #000;
  text-decoration: underline;
}

.post-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  background-color: #eee;
  border: 1px solid #ddd;
  overflow: hidden;
  border-radius: 12px;
}

.post-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.post-excerpt {
  margin: 0 0 1rem;
  color: #333;
}

.ad-block {
  background: #f9f9f9;
  padding: 0.5rem;
  border: 1px solid #ddd;
  text-align: center;
}

.ad-placeholder {
  width: 100%;
  aspect-ratio: 2.5 / 1; /* 🔥 reduced height by ~25% */
  background: #e5e5e5;
  border-radius: 6px;
  display: block;
}

.ad-block a {
  display: inline-block; /* key fix */
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  color: #8a8a8a;
}

.section-padding {
  padding: 2rem 0;
}

.news-post h2 .linkage {
  font-size: inherit;
}

/* Tablet layout */
@media (max-width: 1140px) {
  .container {
    width: 900px;
    max-width: none;
    padding: 0;
  }

  .content-wrapper {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 1.25rem;
  }

  .sidebar {
    width: 240px;
  }

  .news-post h2 {
    font-size: 1.35rem;
  }
}

/* Mobile: remove sidebar completely */
@media (max-width: 768px) {
  .container {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
  }

  .content-wrapper {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .news-post h2 {
    font-size: 1.25rem;
  }
}