/* ═══════════════════════════════════════════
   VFT Design Tokens — shared across all pages
   ═══════════════════════════════════════════ */
:root {
  --vft-primary:        #1479e3;
  --vft-secondary:      #5ea3d8;
  --vft-bg-light:       #f8fafc;
  --vft-text-dark:      #1a1f36;
  --vft-text-muted:     #64748b;
  --vft-link-hover:     #0d5db8;
  --vft-icon-muted:     #8892a4;
  --vft-panel-bg:       linear-gradient(135deg, #e6eff8, #fff);
  --vft-panel-bg-hover: linear-gradient(135deg, #d6e6f5, #f0f6fc);
  --vft-panel-border:   #b8d1ed;
  --vft-gradient-bold:  linear-gradient(135deg, var(--vft-primary), var(--vft-secondary));
}

#main-container {
  background-color: white;
  flex: 1;
}

.profile-picture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2; /* or any other color */
    color: var(--bs-dark);
    font-weight: bold;
}

.highlighted {
  border: var(--bs-primary) solid 2px !important;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════
   VFT Navbar — Blue gradient theme
   ═══════════════════════════════════════════ */

/* Base sizing (responsive) */
.navbar {
  font-size: 18px;
}

@media (min-width: 992px) {
  .navbar {
    flex-wrap: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .navbar {
    font-size: 14px;
  }
  .navbar-brand {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .navbar {
    font-size: 16px;
  }
}

/* Clean white navbar */
.vft-navbar {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  transition: box-shadow 0.3s ease;
  z-index: 1030;
}

/* Logo */
.vft-navbar .navbar-brand img {
  transition: transform 0.2s ease;
}

.vft-navbar .navbar-brand:hover img {
  transform: scale(1.05);
}

/* Nav links — dark text on light blue */
.vft-navbar .nav-link {
  color: #3b4a68 !important;
  font-weight: 500;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.4rem;
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.vft-navbar .nav-link:hover,
.vft-navbar .nav-link:focus {
  color: var(--vft-link-hover) !important;
  background-color: #d6e6f5;
}

/* Icon sizing inside nav links */
.vft-navbar .nav-link .mdi {
  font-size: 1.15em;
  vertical-align: -2px;
  color: #68a3da;
  transition: color 0.2s ease;
}

.vft-navbar .nav-link:hover .mdi {
  color: var(--vft-link-hover);
}

/* "New Evaluation" — bolder to stand out */
.vft-navbar .nav-link.fw-bold {
  color: var(--vft-link-hover) !important;
}

.vft-navbar .nav-link.fw-bold .mdi {
  color: var(--vft-link-hover);
}

/* Toggler */
.vft-navbar .navbar-toggler {
  border-color: #ddd;
  color: #3b4a68;
  padding: 0.3rem 0.55rem;
}

.vft-navbar .navbar-toggler:hover {
  background-color: #edf3fa;
  border-color: var(--vft-panel-border);
}

.vft-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(50, 122, 230, 0.15);
}

/* Dropdown — white floating card */
.vft-dropdown {
  border: none !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  padding: 0.35rem !important;
  min-width: 11rem;
}

.vft-dropdown .dropdown-item {
  border-radius: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  color: #495057;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.vft-dropdown .dropdown-item:hover,
.vft-dropdown .dropdown-item:focus {
  background-color: #edf3fa;
  color: var(--vft-link-hover);
}

.vft-dropdown .dropdown-item .mdi {
  font-size: 1.1em;
  vertical-align: -2px;
  color: var(--vft-icon-muted);
  transition: color 0.15s ease;
}

.vft-dropdown .dropdown-item:hover .mdi {
  color: var(--vft-link-hover);
}

/* ─── Avatar dropdown trigger ─── */
.vft-nav-avatar-trigger {
  padding: 0 !important;
  background: none !important;
}

.vft-nav-avatar-trigger:hover {
  background: none !important;
}

.vft-nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vft-gradient-bold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.vft-nav-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 10px rgba(20, 121, 227, 0.3);
}

/* Dealer logo inside dropdown */
.vft-dropdown-dealer-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  vertical-align: -3px;
}

/* Logout item in dropdown */
.vft-dropdown-logout {
  color: #dc3545 !important;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.vft-dropdown-logout:hover {
  background-color: #fff1f0 !important;
  color: #dc3545 !important;
}

.vft-dropdown-logout .mdi {
  color: #dc3545 !important;
}

/* Navbar divider */
.vft-navbar .navbar-divider {
  width: 1px;
  height: 1.4rem;
  background-color: #ddd;
  margin: auto 0.15rem;
}

/* ─── Mobile collapse ─── */
@media (max-width: 991.98px) {
  .vft-navbar .navbar-collapse {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid #e0e0e0;
    margin-top: 0.45rem;
  }

  .vft-navbar .nav-link {
    padding: 0.55rem 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════
   VFT Shared Components — reused by profile, dealer, etc.
   ═══════════════════════════════════════════ */

/* ─── Page header (gradient banner) ─── */
.vft-page-header {
  background: var(--vft-gradient-bold);
  color: white;
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
  margin: 0 calc(-0.5 * var(--bs-gutter-x, 1.5rem));
}

.vft-page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,0v46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1047.58,5.33,1100,1.36V0Z"/></svg>') repeat-x;
  background-size: 1000px 100px;
  animation: vftWave 20s linear infinite;
}

@keyframes vftWave {
  0% { background-position-x: 0; }
  100% { background-position-x: 1000px; }
}

.vft-page-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.vft-page-header-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.vft-page-header-avatar .mdi {
  font-size: 2rem;
}

.vft-page-header-avatar img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.vft-page-header-info h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.vft-page-header-info p {
  opacity: 0.85;
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* ─── Content section ─── */
.vft-page-section {
  padding: 2.5rem 0 3rem;
}

/* ─── Cards ─── */
.vft-card {
  background: white;
  border-radius: 15px;
  padding: 1.75rem;
  border-left: 4px solid var(--vft-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.vft-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.vft-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(20, 121, 227, 0.1), rgba(94, 163, 216, 0.1));
  color: var(--vft-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.vft-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--vft-text-dark);
  margin-bottom: 1.25rem;
}

/* ─── Save / gradient buttons ─── */
.vft-save-btn {
  background: var(--vft-gradient-bold);
  color: white;
  border: none;
  padding: 0.7rem 2.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.vft-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 121, 227, 0.3);
  color: white;
}

/* ─── Setting / preference rows ─── */
.vft-setting-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.vft-setting-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vft-setting-item:first-child {
  padding-top: 0;
}

.vft-setting-label {
  font-size: 0.9rem;
  color: var(--vft-text-dark);
  line-height: 1.4;
}

.vft-setting-label small {
  display: block;
  color: var(--vft-text-muted);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

/* ─── Quick / navigation links ─── */
.vft-quick-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  color: var(--vft-text-dark);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-bottom: 0.35rem;
}

.vft-quick-link:last-child {
  margin-bottom: 0;
}

.vft-quick-link:hover {
  background: var(--vft-bg-light);
  color: var(--vft-primary);
  transform: translateX(4px);
}

.vft-quick-link i {
  font-size: 1.2rem;
  color: var(--vft-primary);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.vft-quick-link .mdi-chevron-right {
  margin-left: auto;
  color: #cbd5e1;
  font-size: 1.1rem;
}

/* ─── Shared responsive for page headers ─── */
@media (max-width: 768px) {
  .vft-page-header {
    padding: 2rem 0;
  }

  .vft-page-header-content {
    flex-direction: column;
    text-align: center;
  }

  .vft-page-header-info h1 {
    font-size: 1.4rem;
  }

  .vft-page-section {
    padding: 1.5rem 0 2rem;
  }

  .vft-card {
    padding: 1.25rem;
  }
}

/* Add animation for dropdown */
.dropdown-menu {
  display: none; /* Hide the menu initially */
  opacity: 0; /* Set initial opacity to 0 */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

.dropdown-menu.show {
  display: block; /* Show the menu when the dropdown is active */
  opacity: 1; /* Set opacity to 1 for fade-in effect */
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075)!important;
}

#footer {
  background-color: #f8f9fa; /* Slightly off-white for a soft look */
  color: #212529; /* Bootstrap's default dark shade for text */
}

#footer a {
  color: #007bff; /* Bootstrap primary color for links */
}

#footer a:hover {
  text-decoration: underline; /* Adds a bit of interaction on hover */
}

/* Bootstrap 5.3 adds a white pill ::after on focused floating labels to mask the border.
   This causes a wide clipping artifact with our forms — disable the background. */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: transparent;
}

/* Hide spinners in WebKit browsers */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spinners in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Language select */
.language-selector-container {
    display: inline-block;
    margin: 10px 0;
}

#language-form {
    max-width: 300px;
    transition: all 0.3s ease;
}

#language-form:hover {
    transform: translateY(-1px);
}

.input-group-text {
    border: none;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#language-select {
    border: none;
    border-radius: 0 0.375rem 0.375rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

#language-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

#language-select:hover {
    background-color: #f8f9fa;
}

/* Custom option styling */
#language-select option {
    padding: 8px 12px;
}

/* Responsive design */
@media (max-width: 768px) {
    .language-selector-container {
        width: 100%;
    }
    
    #language-form {
        max-width: 100%;
    }
    
    .input-group-text {
        font-size: 0.875rem;
    }
}

/* ═══════════════════════════════════════════
   Feature Gate — PRO badge & modal styling
   ═══════════════════════════════════════════ */
.feature-gated {
    cursor: pointer;
}

/* PRO badge — inline, solid brand gradient fill */
.feature-gate-badge {
    font-size: 0.4em;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.25em 0.5em;
    line-height: 1.4;
    vertical-align: top;
    background: var(--vft-gradient-bold) !important;
    color: #fff !important;
    border: none;
    border-radius: 0.35rem;
}

/* Feature gate modal — brand styling */
#featureGateModal .modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#featureGateModal .modal-header {
    background: var(--vft-gradient-bold);
    color: #fff;
    padding: 1.25rem 1.5rem 1rem;
}

#featureGateModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

#featureGateModal .modal-header .btn-close:hover {
    opacity: 1;
}

#featureGateModal .modal-title {
    font-weight: 700;
    font-size: 1.1rem;
}

#featureGateModal .modal-title .mdi {
    font-size: 1.3em;
    vertical-align: -3px;
    opacity: 0.9;
}

#featureGateModal .modal-body {
    padding: 1.25rem 1.5rem;
}

#featureGateModal .modal-body p {
    font-size: 0.925rem;
    line-height: 1.6;
}

#featureGateModal .fg-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--vft-bg-light);
    color: var(--vft-text-dark);
    border: 1px solid #e0e8f0;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
}

#featureGateModal .fg-tier-badge .mdi {
    color: var(--vft-primary);
    font-size: 1.1em;
}

#featureGateModal .modal-footer {
    padding: 0 1.5rem 1.25rem;
    gap: 0.5rem;
}

#featureGateModal .modal-footer .btn {
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
}

#featureGateModal .modal-footer .btn-outline-primary {
    color: var(--vft-primary);
    border-color: var(--vft-primary);
}

#featureGateModal .modal-footer .btn-outline-primary:hover {
    background: var(--vft-primary);
    color: #fff;
    transform: translateY(-1px);
}

#featureGateModal .modal-footer .btn-primary {
    background: var(--vft-primary);
    border-color: var(--vft-primary);
}

#featureGateModal .modal-footer .btn-primary:hover {
    background: #1167c4;
    border-color: #1167c4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 121, 227, 0.3);
}