:root{ --colour-primary:#f1d551; }

.page-wrapper{ display:flex; flex-direction:column; min-height:100vh; }
#main{ flex:1; }
#logo{ width:15rem; }
#alerts{ position:fixed; top:0; left:0; width:100%; z-index:1000; }

img.avatar.md{ width:120px; border-radius:50%; }
img.avatar.sm{ width:32px; border-radius:50%; }

.photo-thumbs img{ width:150px; }
#photo-list img{ height:150px; object-fit:cover; }
label{ display:block; }
.table{ --bs-table-bg:#fff; }
.inner-section{ padding:2rem 0; }

.btn-primary{ background:var(--colour-primary); border-color:var(--colour-primary); color:#000; }
.btn-primary:hover{ background:#000; color:var(--colour-primary); }
.thm-btn{ border:none; }
.btn-oauth{ background:#fff; padding:.5em; margin:1em 0; border-radius:1.5em; display:flex; justify-content:center; gap:1em; width:20rem; }

.nav-tabs li button{ text-transform:capitalize; }
.naav-tabls li button span{ text-transform:lowercase; }
.nav-pills .nav-link{ border-radius:22px; padding:10px 18px; margin:4px 6px; font-weight:500; border:1px solid rgba(0,0,0,.08); transition:background-color .15s, box-shadow .15s, color .15s; }
.nav-pills .nav-link.active{ background:#0d6efd; color:#fff; border-color:transparent; box-shadow:0 2px 6px rgba(13,110,253,.35); }
.nav.nav-pills .nav-link .tab-label{ text-transform:capitalize !important; letter-spacing:.2px; font-weight:600; }
.nav-pills .badge{ vertical-align:middle; }

.htmx-swapping{ opacity:0; transition:opacity .5s ease-out; }
.swapthis{ opacity:1; transition:opacity .5s ease-in-out; }
.swapthis.htmx-settling{ opacity:0; }
.htmx-request{ opacity:.5; transition:opacity .3s ease-in-out; }

select#country_code{ border:1px solid; padding:5px; background:#fff; }
button.tab{ display:inline-flex; gap:2px; align-items:center; }

span.job-count{ font-size:9px; width:2em; height:2em; border-radius:50%; background:red; color:#fff; display:none; }
.icon-pencil{ display:inline-block; vertical-align:-2px; }

.navbar .navbar-nav{ align-items:center; }

.lang-switch .nav-link{
  border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  border:1px solid rgba(0,0,0,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.08);
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .85rem; line-height:1.2; color:#1f2937;
}
.navbar-dark .lang-switch .nav-link{ color:#f8fafc; border-color:rgba(255,255,255,.15); }
.lang-switch .nav-link:hover,.lang-switch .nav-link:focus{ background:rgba(99,102,241,.08); border-color:rgba(99,102,241,.25); box-shadow:0 6px 18px rgba(15,23,42,.15); outline:0; }
.lang-flag{ width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12); flex:0 0 20px; }
.lang-label{ font-weight:600; letter-spacing:.2px; font-size:.95rem; }

.dropdown-menu-lang{ min-width:220px; padding:.5rem; border-radius:14px; border:1px solid var(--bs-border-color, rgba(0,0,0,.08)); box-shadow:0 10px 30px rgba(2,6,23,.15); }
.dropdown-menu-lang .dropdown-item{ border-radius:10px; padding:.5rem .75rem; }
.dropdown-menu-lang .dropdown-item.active,.dropdown-menu-lang .dropdown-item:active{ background:rgba(99,102,241,.15); color:inherit; position:relative; }
.dropdown-menu-lang .dropdown-item.active::after{ content:"✓"; font-weight:700; margin-left:auto; }

.lang-switch,.lang-switch *{ font-family:inherit; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.auth-cta{ font-family:inherit; font-weight:400; letter-spacing:.2px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.btn-login-mobile{ border:1px solid var(--colour-primary); color:var(--colour-primary); background:transparent; }

.profile-cta{ font-family:inherit; font-weight:600; letter-spacing:.2px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.08); display:inline-flex; align-items:center; line-height:1; }
.profile-cta img,.profile-cta .avatar,.profile-cta i,.profile-cta .bi{ width:28px; height:28px; border-radius:50%; flex:0 0 28px; }
@media (min-width:992px){
  .profile-cta{ position:relative; padding-right:2rem; }
  .profile-cta.dropdown-toggle::after{ position:absolute; right:12px; top:50%; transform:translateY(-50%); margin:0; }
}

@media (max-width:991.98px){
  .navbar-collapse .navbar-nav{ align-items:stretch !important; }
  .navbar-collapse .nav-item{ width:100%; }
  .navbar-collapse .nav-item + .nav-item{ margin-top:.25rem; }

  #nav-primary .lang-switch{ width:100%; }
  .lang-switch .nav-link{ width:100%; justify-content:flex-start; padding:.65rem .9rem; }
  .nav-item.dropdown .dropdown-menu,#nav-primary .lang-switch .dropdown-menu{ right:auto !important; left:0 !important; transform:none !important; margin-top:.25rem; }

  .auth-cta,.profile-cta{ display:flex !important; width:100% !important; justify-content:flex-start; text-align:left; gap:.5rem; margin:0 !important; padding:.65rem .9rem; }
  .mobile-menu-header .auth-cta,.mobile-menu-header .btn-login-mobile{ width:auto !important; flex:0 0 auto !important; padding:.35rem .75rem !important; font-size:.9rem !important; line-height:1.1; border:1px solid var(--colour-primary) !important; color:var(--colour-primary) !important; background:transparent !important; }

  #nav-primary .mobile-menu-header{ margin-bottom:.75rem; padding-bottom:.6rem; border-bottom:1px solid rgba(0,0,0,.08); }
  #nav-primary .navbar-nav{ padding-left:.85rem; padding-right:.5rem; }
  #nav-primary .navbar-nav > .nav-item > .nav-link{ padding-left:.5rem; }
}

.mobile-menu-header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem .75rem .25rem; }
.mobile-user-email{ max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lang-inline .btn{ border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:0 2px 6px rgba(17,24,39,.08); line-height:1.1; }
.lang-inline .lang-flag{ width:20px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.lang-inline .lang-label{ font-weight:600; letter-spacing:.2px; font-size:.95rem; }
.mobile-menu-header .dropdown-menu{ right:0; left:auto; }
@media (min-width:992px){ .mobile-menu-header{ display:none !important; } }

.logout-cta{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:10px 18px; margin:4px 6px; font:inherit; color:#dc3545 !important; text-align:left; width:100%; }
.logout-cta::before{ content:""; display:inline-block; width:18px; height:18px; margin-right:.5rem; vertical-align:-3px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 12H8m8 0-3-3m3 3-3 3'/%3E%3C/svg%3E"); }
.logout-cta:hover,.logout-cta:focus{ color:#bb2d3b !important; text-decoration:underline; }

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

@media (max-width:991.98px){
  #nav-primary .navbar-nav .nav-link{ text-align:left !important; justify-content:flex-start !important; }
  #nav-primary .navbar-nav .logout-cta{ display:block !important; text-align:left !important; justify-content:flex-start !important; width:100% !important; background:transparent !important; border:0 !important; box-shadow:none !important; color:#dc3545 !important; padding:10px 18px !important; }
}

@supports not (gap:1rem){
  .mobile-menu-header > * + *{ margin-left:.75rem; }
  #nav-primary .navbar-nav > .nav-item + .nav-item{ margin-top:.25rem; }
}

.mobile-menu-header{ display:flex; align-items:center; }
.mobile-menu-header .auth-cta,.mobile-menu-header .btn-login-mobile{ width:auto !important; flex:0 0 auto !important; }
.mobile-menu-header .dropdown{ margin-left:auto; }

@media (max-width:991.98px){
  .auth-cta,.profile-cta{ width:100% !important; }
  .mobile-menu-header .auth-cta,.mobile-menu-header .btn-login-mobile{ width:auto !important; }
}

.job-card { 
  overflow: hidden;            
}

.job-card .job-status-badge {
  position: static !important; 
  top: auto; left: auto;       
  transform: none;
  display: inline-block;
  max-width: 100%;             
  white-space: normal;        
  line-height: 1.25;
  margin-left: .5rem;         
}

.job-card .card-body > .d-flex {
  flex-wrap: wrap;             
  gap: .25rem .5rem;
}