/* company-theme.css - Comprehensive Theme Overrides */
:root {
  /* --- Core brand colours --- */
  --bs-primary: #16A388;
  /* Teal (main) */
  --bs-primary-rgb: 22, 163, 136;

  --bs-secondary: #99206C;
  /* Purple (accent) */
  --bs-secondary-rgb: 153, 32, 108;

  /* --- Soft tints --- */
  --bs-primary-soft: #D6F3EC;
  /* 90% light teal */
  --bs-secondary-soft: #F0D9E7;
  /* 90% light purple */

  /* --- Link colors --- */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #12826B;
  /* 15% darker teal */

  /* --- Text colors --- */
  --bs-body-color: #212529;
  /* Main text color */
  /* --bs-heading-color: #1a1818; */
  --bs-heading-color: #212529;
  /* Headings color */
}

/* ========================
     BASE ELEMENTS
     ======================== */

/* Body & Typography */
body {
  color: var(--bs-body-color);
  background-color: #fff;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--bs-heading-color);
}

/* Links */
a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #12826B;
  --bs-btn-hover-border-color: #12826B;
  --bs-btn-active-bg: #0F6B58;
  --bs-btn-active-border-color: #0F6B58;
}

.card:not([class*=bg-]) .card-header {
  color: rgb(71, 71, 71);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: #7C1A59;
  --bs-btn-hover-border-color: #7C1A59;
  --bs-btn-active-bg: #661447;
  --bs-btn-active-border-color: #661447;
}

/* Outline buttons */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
}

/* Soft buttons */
.btn-primary-soft {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: var(--bs-primary-soft);
  --bs-btn-border-color: var(--bs-primary-soft);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

.btn-secondary-soft {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-bg: var(--bs-secondary-soft);
  --bs-btn-border-color: var(--bs-secondary-soft);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
}

/* ========================
     COMPONENTS
     ======================== */

/* Alerts */
.alert-primary {
  --bs-alert-color: #0F6B58;
  --bs-alert-bg: var(--bs-primary-soft);
  --bs-alert-border-color: var(--bs-primary);
}

.alert-secondary {
  --bs-alert-color: #661447;
  --bs-alert-bg: var(--bs-secondary-soft);
  --bs-alert-border-color: var(--bs-secondary);
}

/* Badges */
.badge-primary {
  --bs-badge-color: #fff;
  --bs-badge-bg: var(--bs-primary);
}

.badge-secondary {
  --bs-badge-color: #fff;
  --bs-badge-bg: var(--bs-secondary);
}

/* Cards */
.card-primary {
  border-top: 3px solid var(--bs-primary);
}

.card-secondary {
  border-top: 3px solid var(--bs-secondary);
}

/* Navs & Tabs */
.nav-pills .nav-link.active {
  background-color: var(--bs-primary);
}

/* Progress bars */
.progress-bar {
  background-color: var(--bs-primary);
}

/* ========================
     FORMS
     ======================== */

/* Form controls */
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Checkboxes & Radios */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ========================
     UTILITIES
     ======================== */

/* Backgrounds */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-primary-soft {
  background-color: var(--bs-primary-soft) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-secondary-soft {
  background-color: var(--bs-secondary-soft) !important;
}

/* Text colors */
.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

/* Borders */
.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}


.bg-gradient-primary-to-secondary {
  background-color: #16A388 !important;
  /* Teal */
  background-image: linear-gradient(135deg, #16A388 0%, rgba(44, 165, 139, 0.8) 100%) !important;
  /* Teal to Purple gradient */
}


/* Links */
a {
  color: #16A388;
  /* Teal */
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

a:hover {
  color: #12826B;
  /* Darker teal */
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #46464634;
  /* Purple */
  outline-offset: 2px;
}

.sidenav,
.sidenav-menu {
  background-color: #16A388 !important;
  /* Teal */
  color: white !important;
}

.sidenav,
.sidenav-menu a,
.sidenav-menu .nav-link-icon,
.sidenav-menu .sidenav-menu-heading {
  background-color: #16A388 !important;
  /* Teal */
  color: white !important;
}

/* Dropdowns */
.dropdown-menu {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
  padding: 0.5rem 1rem;
  color: #212529;
  transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #D6F3EC;
  /* Teal soft */
  color: #16A388;
  /* Teal */
}

.dropdown-item:active {
  background-color: #16A388;
  /* Teal */
  color: white;
}

.dropdown-item:focus-visible {
  outline: 2px solid #99206C;
  /* Purple */
  outline-offset: -2px;
}

/* Buttons (including dropdown-toggle) */
.btn.dropdown-toggle {
  transition: all 0.2s ease;
}

.btn.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(22, 163, 136, 0.25);
  /* Teal with 25% opacity */
  border-color: #16A388;
  /* Teal */
}

/* Form controls */
.form-select {
  border-radius: 8px;
  padding: 0.5rem 1rem;
  border: 1px solid #ced4da;
  transition: all 0.2s ease;
}

.form-select:focus {
  border-color: #16A388;
  /* Teal */
  box-shadow: 0 0 0 0.25rem rgba(22, 163, 136, 0.25);
  /* Teal with 25% opacity */
}

/* Active/focus states for interactive elements */
[tabindex]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #20997b;
  /* Purple */
  outline-offset: 2px;
  border-radius: 4px;
}

/* Custom focus ring for accessibility */
.focus-ring-primary:focus {
  box-shadow: 0 0 0 3px rgba(22, 163, 136, 0.5);
  /* Teal with 50% opacity */
}

.focus-ring-secondary:focus {
  box-shadow: 0 0 0 3px rgba(32, 153, 107, 0.5);
  /* Purple with 50% opacity */
}

/* Active state for nav items */
.nav-link.active {
  background-color: #16A388;
  /* Teal */
  color: white !important;
}

.nav-link:not(.active):hover {
  color: #12826B;
  /* Darker teal */
}

/* Pagination */
.page-link {
  color: #16A388;
  /* Teal */
}

.page-link:hover {
  color: #12826B;
  /* Darker teal */
  background-color: #D6F3EC;
  /* Teal soft */
}

.page-item.active .page-link {
  background-color: #16A388;
  /* Teal */
  border-color: #16A388;
  /* Teal */
}

/* Tabs */
.nav-tabs .nav-link.active {
  border-bottom: 3px solid #16A388;
  /* Teal */
  color: #16A388;
  /* Teal */
}

.nav-tabs .nav-link:hover:not(.active) {
  border-bottom: 3px solid #D6F3EC;
  /* Teal soft */
}

.nav-link .active {
  /* color: rgb(59, 59, 59) !important; */
}

.nav .accordion .nav-link {
  margin: 10px auto !important;
}


@media (max-width: 768px) {
  .navbar-brand {
    /* flex-direction: column; */
    /* align-items: center; */
  }

  .navbar-brand img {
    margin-bottom: 10px;
  }

  #navbarSupportedContent>div {
    justify-content: center !important;
  }


  nav.topnav.navbar {
    min-height: 75px !important;
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
  }

  .sidenav{
    padding-top: 75px !important;
  }

  .ambassador_apply_btn{
    margin-left: 150px !important;
  }


  #result_div > .d-flex.mb-1 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  #result_div > .d-flex.mb-1 > .d-flex {
    flex-direction: column !important;
    width: 100%;
    gap: 0.5rem;
  }
  #result_div .btn,
  #result_div select.form-select {
    width: 100% !important;
  }

  .job_apps_header{
    /* padding-top: 50px !important; */
  }

}

@media (max-width: 575.98px) {
  .job_apps_header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  .job_apps_header h1 {
    font-size: 1.5rem !important;
  }
  .job_apps_header div {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  .job_apps_header .btn {
    width: 100% !important;
  }
  
}

@media (max-width: 575.98px) {
  /* Removed logo switching - using full logo on all screen sizes */
  #main_logo_img {
      width: 200px !important;
      max-width: 200px !important;
      content: none !important; /* Prevent any content replacement */
  }
  /* Ensure full logo is always used */
  #main_logo_img[src="/Static/images/logos/Logo Full.png"] {
      width: 200px !important;
      max-width: 200px !important;
      content: none !important;
  }
}


@media (max-width: 575.98px) {
  #cv_editor_header_menu_form{
    padding-top: 140px !important;
  }

  #analyzeCvBtn{
    min-width: 100% !important;
  }

  #editor_from_panel {
    padding-top: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .application-card .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  .application-card .d-flex.justify-content-between .d-flex {
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }
  .application-card h5 {
    font-size: 1rem !important;
  }
  .application-card .btn,
  .application-card .dropdown,
  .application-card .progress {
    width: 100% !important;
  }
}




@media (max-width: 600px) {
  /* .ambassador_apply_btn{
    font-size: 10px !important;
  } */

  .dashboard_ambassador_apply_btn{
    display: none !important;
  }
  .topnav .navbar-brand img{
    height: 2.3rem !important;
  }

  .dashboard_main_logo_img{
    margin-left: 10px !important;
  }

  #navbarSupportedContent .navbar-nav li.nav-item a.btn{
    margin-bottom: 10px !important;
  }
}