@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap);
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #f4f8fb;
  color: #102d4f;
  font-family: Arial, Helvetica, sans-serif;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.app {
  min-height: 100vh;
}

/* =====================================================
   FLUID RESPONSIVE FOUNDATION
   ===================================================== */

:root {
  --page-gutter: clamp(1rem, 3vw, 4.5rem);
  --header-gap: clamp(0.75rem, 1.6vw, 2rem);

  --text-xs: clamp(0.68rem, 0.18vw + 0.64rem, 0.78rem);
  --text-sm: clamp(0.76rem, 0.24vw + 0.7rem, 0.9rem);
  --text-base: clamp(0.9rem, 0.28vw + 0.82rem, 1.05rem);
  --text-lg: clamp(1rem, 0.45vw + 0.9rem, 1.25rem);
  --text-xl: clamp(1.3rem, 0.75vw + 1.1rem, 1.8rem);
  --text-2xl: clamp(1.8rem, 1.7vw + 1.2rem, 3rem);
  --text-hero: clamp(2.65rem, 4.3vw, 5.2rem);

  --control-height: clamp(2.35rem, 2vw + 1.7rem, 2.85rem);
  --radius-control: clamp(0.35rem, 0.4vw, 0.65rem);
}

/* =====================================================
   TOP BAR
   ===================================================== */

.top-bar {
  min-height: clamp(1.9rem, 2.5vw, 2.25rem);
  padding: 0.45rem clamp(1rem, 3vw, 4.5rem);
  padding: 0.45rem var(--page-gutter);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  background: var(--dark-blue);
  color: #ffffff;
  font-size: clamp(0.68rem, 0.18vw + 0.64rem, 0.78rem);
  font-size: var(--text-xs);
}

/* =====================================================
   MAIN HEADER
   ===================================================== */

.main-header {
  width: 100%;
  min-height: clamp(4.5rem, 5vw, 5.5rem);
  padding: clamp(0.55rem, 1vw, 0.9rem) clamp(1rem, 3vw, 4.5rem);
  padding: clamp(0.55rem, 1vw, 0.9rem) var(--page-gutter);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(0.75rem, 1.6vw, 2rem);
  grid-column-gap: clamp(0.75rem, 1.6vw, 2rem);
  grid-column-gap: var(--header-gap);
  column-gap: var(--header-gap);

  position: relative;
  z-index: 1000;

  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

/* =====================================================
   BRAND
   ===================================================== */

.brand {
  min-width: clamp(8.7rem, 11vw, 12rem);

  display: inline-flex;
  align-items: center;
  gap: clamp(0.45rem, 0.7vw, 0.75rem);

  flex-shrink: 0;
}

.logo-symbol {
  width: clamp(2.35rem, 3.2vw, 3.15rem);
  height: clamp(2.35rem, 3.2vw, 3.15rem);

  display: grid;
  place-items: center;
  flex-shrink: 0;

  border-radius: 50%;
  background: var(--primary-blue);
  color: #ffffff;
  font-size: clamp(1rem, 1.2vw, 1.45rem);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-text strong {
  color: var(--primary-blue);
  font-size: clamp(0.92rem, 0.65vw + 0.7rem, 1.25rem);
  letter-spacing: 0.05em;
}

.brand-text span {
  margin-top: 0.2rem;
  color: var(--accent-green);
  font-size: clamp(0.78rem, 0.5vw + 0.63rem, 1.05rem);
  font-weight: 800;
}

.brand-text small {
  margin-top: 0.24rem;
  color: var(--text-muted);
  font-size: clamp(0.4rem, 0.25vw + 0.34rem, 0.57rem);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* =====================================================
   DESKTOP NAVIGATION
   ===================================================== */

.main-nav {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  gap: clamp(0.45rem, 1vw, 1.4rem);
}

.main-nav > a,
.dropdown-trigger {
  min-height: clamp(2.35rem, 2vw + 1.7rem, 2.85rem);
  min-height: var(--control-height);
  padding: 0.45rem clamp(0.05rem, 0.18vw, 0.2rem);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;

  border: 0;
  background: transparent;
  color: var(--text-dark);

  font-family: inherit;
  font-size: clamp(0.68rem, 0.36vw + 0.55rem, 0.94rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  transition: color 0.2s ease;
}

.main-nav > a:hover,
.dropdown-trigger:hover,
.main-nav > a:focus-visible,
.dropdown-trigger:focus-visible {
  color: var(--secondary-blue);
}

/* =====================================================
   SAVED JOBS
   ===================================================== */

.saved-nav {
  gap: clamp(0.25rem, 0.4vw, 0.45rem) !important;
}

.saved-nav svg {
  flex-shrink: 0;
  color: #e53935;
  font-size: clamp(0.75rem, 0.55vw + 0.6rem, 1rem);
}

.saved-count {
  min-width: clamp(1.05rem, 1.4vw, 1.35rem);
  height: clamp(1.05rem, 1.4vw, 1.35rem);
  padding: 0 0.3rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #e53935;
  color: #ffffff;
  font-size: clamp(0.55rem, 0.24vw + 0.5rem, 0.7rem);
}

/* =====================================================
   DROPDOWNS
   ===================================================== */

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-trigger {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 2000;

  width: clamp(12rem, 14vw, 14.5rem);
  padding: clamp(0.4rem, 0.6vw, 0.6rem);

  display: flex;
  flex-direction: column;
  gap: 0.15rem;

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: clamp(0.55rem, 0.7vw, 0.85rem);
  box-shadow: var(--shadow-medium);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem);

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-menu a {
  width: 100%;
  padding: clamp(0.65rem, 0.7vw, 0.8rem);

  display: block;

  border-radius: 0.5rem;
  color: var(--text-dark);
  font-size: clamp(0.76rem, 0.24vw + 0.7rem, 0.9rem);
  font-size: var(--text-sm);
  font-weight: 600;
}

.dropdown-menu a:hover {
  background: var(--light-blue);
  color: var(--primary-blue);
}

/* =====================================================
   HEADER ACTIONS
   ===================================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.65vw, 0.75rem);
  flex-shrink: 0;
}

.login-button,
.apply-button {
  width: auto;
  min-width: clamp(4.3rem, 5.5vw, 5.8rem);
  min-height: clamp(2.35rem, 2vw + 1.7rem, 2.85rem);
  min-height: var(--control-height);
  padding: 0.55rem clamp(0.65rem, 0.8vw, 1rem);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: clamp(0.35rem, 0.4vw, 0.65rem);

  border-radius: var(--radius-control);
  font-size: clamp(0.67rem, 0.3vw + 0.58rem, 0.86rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.login-button {
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  background: transparent;
}

.apply-button {
  max-width: none;
  border: 1px solid var(--accent-green);
  background: var(--accent-green);
  color: #ffffff;
}

.login-button:hover {
  background: var(--light-blue);
}

.apply-button:hover {
  filter: brightness(0.94);
}

/* =====================================================
   MOBILE MENU BUTTON
   ===================================================== */

.mobile-menu-button {
  display: none;

  width: clamp(2.35rem, 2vw + 1.7rem, 2.85rem);

  width: var(--control-height);
  height: clamp(2.35rem, 2vw + 1.7rem, 2.85rem);
  height: var(--control-height);

  border: 0;
  border-radius: clamp(0.35rem, 0.4vw, 0.65rem);
  border-radius: var(--radius-control);
  background: var(--light-blue);
  color: var(--primary-blue);
  font-size: clamp(1rem, 0.45vw + 0.9rem, 1.25rem);
  font-size: var(--text-lg);
}

/* =====================================================
   HERO
   ===================================================== */

.hero-section {
  width: 100%;
  min-height: clamp(29rem, 38vw, 37rem);

  display: grid;
  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(clamp(22rem, 39vw, 43rem), 0.96fr);

  overflow: hidden;
  background: var(--light-blue);
}

.hero-copy {
  padding:
    clamp(3.2rem, 6vw, 6.5rem)
    clamp(1.4rem, 6vw, 6.5rem);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hero-copy h1 {
  width: 100%;
  max-width: clamp(33rem, 44vw, 47rem);
  margin: 0;

  color: var(--primary-blue);
  font-size: clamp(2.65rem, 4.3vw, 5.2rem);
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero-copy p {
  width: 100%;
  max-width: clamp(29rem, 36vw, 36rem);
  margin: clamp(1rem, 1.6vw, 1.5rem) 0 0;

  color: #263849;
  font-size: clamp(0.9rem, 0.28vw + 0.82rem, 1.05rem);
  font-size: var(--text-base);
  line-height: 1.65;
}

.hero-buttons {
  margin-top: clamp(1.25rem, 2vw, 2rem);

  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.65rem, 1vw, 1rem);
}

.hero-buttons a,
.hero-buttons button,
.find-staff-button,
.find-assignments-button {
  min-width: clamp(8.5rem, 10vw, 10.5rem);
  min-height: clamp(2.35rem, 2vw + 1.7rem, 2.85rem);
  min-height: var(--control-height);
  padding: 0.7rem clamp(0.85rem, 1.1vw, 1.2rem);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: clamp(0.35rem, 0.4vw, 0.65rem);
  border-radius: var(--radius-control);
  color: #ffffff;

  font-size: clamp(0.68rem, 0.3vw + 0.6rem, 0.86rem);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.find-staff-button {
  background: var(--accent-green);
}

.find-assignments-button {
  background: var(--primary-blue);
}

/* =====================================================
   HERO IMAGE
   ===================================================== */

.hero-image-wrapper {
  width: 100%;
  height: 100%;
  min-height: clamp(29rem, 38vw, 37rem);

  position: relative;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  min-height: inherit;

  display: block;
  object-fit: cover;
  object-position: center 28%;
}

.hero-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    var(--light-blue) 0%,
    rgba(237, 245, 248, 0.25) 15%,
    transparent 40%
  );
}

/* =====================================================
   RESPONSIVE NAVIGATION
   Uses the hamburger before the desktop menu becomes cramped.
   ===================================================== */

/* Compact navigation for smaller laptops */
@media (min-width: 901px) and (max-width: 1366px) {
  .main-header {
    padding-left: 14px;
    padding-right: 14px;
    column-gap: 12px;
  }

  .brand {
    min-width: 135px;
  }

  .main-nav {
    gap: 7px;
  }

  .main-nav > a,
  .dropdown-trigger {
    padding-left: 1px;
    padding-right: 1px;
    font-size: clamp(0.66rem, 0.18vw + 0.62rem, 0.76rem);
  }

  .header-actions {
    gap: 6px;
  }

  .login-button,
  .apply-button {
    min-width: 70px;
    padding-left: 9px;
    padding-right: 9px;
    font-size: 0.7rem;
  }

  .logo-symbol {
    width: 39px;
    height: 39px;
  }

  .brand-text strong {
    font-size: 0.95rem;
  }

  .brand-text span {
    font-size: 0.8rem;
  }
}
@media (max-width: 900px) {
  .main-header {
    grid-template-columns: auto 1fr auto;
  }

  .mobile-menu-button {
    display: grid;
    place-items: center;
    justify-self: end;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    display: none;
    padding: clamp(0.9rem, 2vw, 1.4rem);

    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;

    background: #ffffff;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-medium);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav > a,
  .dropdown-trigger {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.8rem;

    justify-content: space-between;

    font-size: clamp(0.76rem, 0.24vw + 0.7rem, 0.9rem);

    font-size: var(--text-sm);
  }

  .nav-dropdown {
    width: 100%;
    display: block;
  }

  .dropdown-menu,
  .dropdown-menu.show {
    position: static;

    width: 100%;
    margin-top: 0.2rem;
    padding: 0.25rem 0.7rem;

    display: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;

    border: 0;
    border-radius: 0.5rem;
    box-shadow: none;
    background: var(--background);
  }

  .dropdown-menu.show {
    display: flex;
  }

  .header-actions {
    display: none;
  }
}

/* =====================================================
   TABLET HERO
   ===================================================== */

@media (max-width: 850px) {
  .top-bar {
    display: none;
  }

  .hero-section {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding:
      clamp(3rem, 9vw, 5rem)
      clamp(1.25rem, 6vw, 3rem);
  }

  .hero-copy h1 {
    max-width: 44rem;
  }

  .hero-image-wrapper,
  .hero-image {
    min-height: clamp(18rem, 60vw, 27rem);
    max-height: 27rem;
  }

  .hero-image-wrapper::after {
    background: linear-gradient(
      180deg,
      var(--light-blue) 0%,
      rgba(237, 245, 248, 0.12) 20%,
      transparent 45%
    );
  }
}

/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 520px) {
  .main-header {
    padding: 0.65rem 1rem;
  }

  .brand {
    min-width: auto;
  }

  .brand-text small {
    display: none;
  }

  .hero-copy {
    padding: 3rem 1.2rem;
  }

  .hero-buttons {
    width: 100%;
    flex-direction: column;
  }

  .hero-buttons a,
  .hero-buttons button,
  .find-staff-button,
  .find-assignments-button {
    width: 100%;
  }
}

.board-wrapper {
  padding: 0 4%;
  margin-top: -72px;
  position: relative;
  z-index: 4;
}

.assignment-board {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px 16px;
  background: linear-gradient(180deg, #1d2022, #101315);
  border: 2px solid #3d4449;
  border-radius: 13px;
  color: white;
  box-shadow: 0 16px 30px rgba(0, 27, 48, 0.25);
}

.board-title-row {
  min-height: 54px;
  border-bottom: 1px solid #4a4e51;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.board-title-row > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.plane-icon,
.board-title-row strong,
.board-headings {
  color: #ffc400;
}

.board-title-row strong {
  font-size: 18px;
  text-transform: uppercase;
}

.board-title-row small {
  color: white;
  font-size: 11px;
}

.board-time {
  font-size: 16px;
}

.board-grid {
  display: grid;
  grid-template-columns: 2fr 1.05fr 0.7fr 0.7fr;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}

.board-headings {
  min-height: 34px;
  padding: 0 48px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.board-job {
  min-height: 37px;
  margin-bottom: 2px;
  padding: 0 48px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 18px,
      rgba(0, 0, 0, 0.05) 18px,
      rgba(0, 0, 0, 0.05) 21px
    ),
    #202426;
  border: 1px solid #303538;
  color: #f4f4f4;
  font-family: "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status {
  font-weight: 800;
}

.status.boarding,
.status.open {
  color: #00d37d;
}

.status.hiring {
  color: #ffbf00;
}

.status.urgent {
  color: #ff3e35;
}

.board-button-row {
  margin-top: 12px;
  text-align: center;
}

.board-button-row button {
  padding: 9px 20px;
  background: linear-gradient(180deg, #075b99, #063a67);
  color: white;
  border: 1px solid #52a8df;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

  .board-grid {
    grid-template-columns: 1.8fr 1fr 0.8fr 0.8fr;
  }


@media (max-width: 760px) {
  .board-wrapper {
    margin-top: -30px;
    padding: 0 14px;
    overflow-x: auto;
  }

  .assignment-board {
    min-width: 780px;
  }
}
.benefits-section {
  padding: 34px 4% 50px;
  background: #ffffff;
}

.benefits-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #dce6ed;
}

.benefit-item {
  min-height: 88px;
  padding: 10px 28px;
  border-right: 1px solid #dce6ed;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.benefit-item:last-child {
  border-right: 0;
}

.benefit-icon {
  min-width: 39px;
  height: 39px;
  background: #e1f4ef;
  color: #06936d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.benefit-item h3 {
  margin: 2px 0 7px;
  color: #073b68;
  font-size: 15px;
}

.benefit-item p {
  margin: 0;
  color: #667789;
  font-size: 12px;
  line-height: 1.55;
}

.featured-section {
  padding: 58px 4% 72px;
  background: #f4f8fb;
}

.section-title-row {
  max-width: 1400px;
  margin: 0 auto 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
}

.section-kicker {
  display: block;
  margin-bottom: 7px;
  color: #08a174;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-title-row h2,
.testimonials-heading h2 {
  margin: 0;
  color: #073b68;
  font-size: 27px;
  letter-spacing: -0.025em;
}

.outline-link-button {
  padding: 10px 17px;
  background: transparent;
  color: #064a80;
  border: 1px solid #85a5bd;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
}

.assignment-card-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 22px;
  gap: 22px;
}

.assignment-card {
  background: #ffffff;
  border: 1px solid #dfe8ee;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 7px 17px rgba(5, 47, 80, 0.07);
}

.assignment-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.assignment-image-one {
  background-image:
    linear-gradient(rgba(0, 39, 68, 0.1), rgba(0, 39, 68, 0.1)),
    url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=900&q=80");
}

.assignment-image-two {
  background-image:
    linear-gradient(rgba(0, 39, 68, 0.08), rgba(0, 39, 68, 0.08)),
    url("https://images.unsplash.com/photo-1551076805-e1869033e561?auto=format&fit=crop&w=900&q=80");
}

.assignment-image-three {
  background-image:
    linear-gradient(rgba(0, 39, 68, 0.08), rgba(0, 39, 68, 0.08)),
    url("https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=900&q=80");
}

.assignment-badge {
  position: absolute;
  top: 13px;
  left: 13px;
  padding: 6px 9px;
  color: #ffffff;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.urgent-badge {
  background: #dc3d35;
}

.hiring-badge {
  background: #f0a900;
}

.open-badge {
  background: #0aa474;
}

.assignment-card-body {
  padding: 20px;
}

.assignment-type {
  color: #08a174;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.assignment-card-body h3 {
  margin: 8px 0 15px;
  color: #073b68;
  font-size: 18px;
}

.assignment-details {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: #687b8b;
  font-size: 11px;
}

.assignment-card-body button {
  width: 100%;
  margin-top: 18px;
  padding: 10px;
  background: #064476;
  color: #ffffff;
  border: 0;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.audience-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.audience-card {
  min-height: 340px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.professional-card {
  background-image: url("https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=1200&q=85");
}

.facility-card {
  background-image: url("https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=1200&q=85");
}

.audience-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(1, 48, 82, 0.94),
    rgba(1, 58, 95, 0.76)
  );
}

.facility-card .audience-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 92, 73, 0.9),
    rgba(2, 104, 81, 0.7)
  );
}

.audience-content {
  max-width: 570px;
  padding: 55px 8%;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.audience-content > span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.audience-content h2 {
  margin: 10px 0 16px;
  font-size: 30px;
  line-height: 1.12;
}

.audience-content p {
  max-width: 500px;
  margin: 0;
  color: rgba(255, 255, 255, 0.87);
  font-size: 13px;
  line-height: 1.65;
}

.audience-content button {
  margin-top: 22px;
  padding: 11px 16px;
  background: #ffffff;
  color: #073b68;
  border: 0;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.testimonials-section {
  padding: 70px 4%;
  background: #ffffff;
}

.testimonials-heading {
  margin-bottom: 30px;
  text-align: center;
}

.testimonials-grid {
  max-width: 1050px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 25px;
  gap: 25px;
}

.testimonial-card {
  padding: 30px;
  background: #f5f8fa;
  border-left: 4px solid #08a174;
  border-radius: 5px;
}

.quote-mark {
  height: 32px;
  color: #08a174;
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 1;
}

.testimonial-card > p {
  margin: 6px 0 23px;
  color: #4e6475;
  font-size: 13px;
  line-height: 1.75;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  background: #073b68;
  color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.testimonial-person strong,
.testimonial-person span {
  display: block;
}

.testimonial-person strong {
  color: #073b68;
  font-size: 12px;
}

.testimonial-person span {
  margin-top: 3px;
  color: #788997;
  font-size: 10px;
}

.site-footer {
  padding: 55px 4% 20px;
  background: #032f53;
  color: #ffffff;
}

.footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  grid-gap: 42px;
  gap: 42px;
}

.footer-logo .brand-text strong,
.footer-logo .brand-text span {
  color: #ffffff;
}

.footer-brand p {
  max-width: 300px;
  margin: 20px 0 0;
  color: #aac0d0;
  font-size: 12px;
  line-height: 1.7;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-column h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 13px;
}

.footer-column a,
.footer-column span {
  color: #aac0d0;
  font-size: 11px;
}

.footer-column a:hover {
  color: #ffffff;
}

.footer-bottom {
  max-width: 1400px;
  margin: 42px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  justify-content: space-between;
  gap: 25px;
  color: #8eabbf;
  font-size: 10px;
}

.footer-bottom div {
  display: flex;
  gap: 18px;
}

@media (max-width: 1000px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefit-item:nth-child(2) {
    border-right: 0;
  }

  .assignment-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .assignment-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .benefits-grid,
  .assignment-card-grid,
  .audience-section,
  .testimonials-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .benefit-item {
    border-right: 0;
    border-bottom: 1px solid #dce6ed;
  }

  .assignment-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  .section-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .audience-card {
    min-height: 310px;
  }

  .audience-content h2 {
    font-size: 26px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}
.account-page {
  min-height: calc(100vh - 102px);
  padding: 70px 20px;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(0, 166, 118, 0.12),
      transparent 30%
    ),
    #f5f8fb;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.account-card {
  width: min(100%, 470px);
  padding: 38px;
  background: white;
  border: 1px solid #dce6ed;
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(0, 55, 95, 0.12);
}

.account-card-wide {
  width: min(100%, 760px);
}

.account-label {
  margin: 0 0 8px;
  color: #00a676;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-card h1 {
  margin: 0;
  color: #004a7c;
  font-size: 30px;
}

.account-introduction {
  margin: 12px 0 28px;
  color: #6b7c93;
  font-size: 14px;
  line-height: 1.65;
}

.account-form {
  display: grid;
  grid-gap: 9px;
  gap: 9px;
}

.account-form label {
  margin-top: 8px;
  color: #163247;
  font-size: 12px;
  font-weight: 700;
}

.account-form input,
.account-form select {
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #cbd9e3;
  border-radius: 5px;
  outline: none;
}

.account-form input:focus,
.account-form select:focus {
  border-color: #0a74c9;
  box-shadow: 0 0 0 3px rgba(10, 116, 201, 0.1);
}

.account-form .primary-button {
  width: 100%;
  margin-top: 18px;
}

.account-links {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
}

.account-links a {
  color: #004a7c;
  font-weight: 700;
}

.registration-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field label {
  margin-top: 0;
}

.registration-submit {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .account-page {
    padding: 35px 15px;
  }

  .account-card {
    padding: 25px 20px;
  }

  .registration-grid {
    grid-template-columns: 1fr;
  }

  .registration-submit {
    grid-column: auto;
  }

  .account-links {
    flex-direction: column;
  }
}
.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.1fr);
  background: #f5f8fb;
}

.auth-brand-panel {
  min-height: 100vh;
  padding: 42px 7%;
  background:
    linear-gradient(
      rgba(0, 55, 95, 0.88),
      rgba(0, 74, 124, 0.88)
    ),
    url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1400&q=85")
      center/cover no-repeat;
  color: white;
  display: flex;
  flex-direction: column;
}

.auth-logo {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 11px;
}

.auth-logo .brand-text strong,
.auth-logo .brand-text span {
  color: white;
}

.auth-brand-content {
  max-width: 570px;
  margin: auto 0;
  padding: 60px 0;
}

.auth-brand-content .account-label {
  color: #5ee1bd;
}

.auth-brand-content h1 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.auth-brand-content > p {
  margin: 23px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.75;
}

.auth-benefits {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.auth-benefits li {
  color: rgba(255, 255, 255, 0.93);
  font-size: 14px;
}

.auth-benefits li::before {
  content: "✓";
  margin-right: 10px;
  color: #5ee1bd;
  font-weight: 900;
}

.auth-form-panel {
  min-height: 100vh;
  padding: 45px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-form-wrapper {
  width: min(100%, 520px);
}

.auth-card {
  width: 100%;
  padding: 38px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
}

.auth-card h2 {
  margin: 0 0 24px;
  color: var(--primary-blue);
  font-size: 30px;
}

.form-options {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--text-muted);
  font-size: 12px;
}

.remember-option {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500 !important;
}

.remember-option input {
  width: 15px;
  min-height: auto;
  margin: 0;
}

.form-options a,
.auth-account-links a,
.return-home-link {
  color: var(--primary-blue);
  font-weight: 700;
}

.auth-submit {
  width: 100%;
  margin-top: 19px;
}

.auth-account-links {
  margin-top: 25px;
  justify-content: center;
}

.auth-account-links span {
  color: var(--text-muted);
}

.return-home-link {
  margin-top: 23px;
  display: block;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 900px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-brand-panel {
    min-height: auto;
    padding: 30px 25px 45px;
  }

  .auth-brand-content {
    margin: 55px 0 0;
    padding: 0;
  }

  .auth-brand-content h1 {
    font-size: 3rem;
  }

  .auth-form-panel {
    min-height: auto;
    padding: 45px 18px;
  }
}

@media (max-width: 520px) {
  .auth-card {
    padding: 28px 20px;
  }

  .form-options {
    align-items: flex-start;
    flex-direction: column;
  }
}
.hero-buttons .primary-button {
  background: var(--accent-green);
  color: #ffffff;
  border: 1px solid var(--accent-green);
}

.hero-buttons .secondary-button {
  background: var(--primary-blue);
  color: #ffffff;
  border: 1px solid var(--primary-blue);
}

.hero-buttons .primary-button:hover,
.hero-buttons .secondary-button:hover {
  color: #ffffff;
  filter: brightness(0.94);
}

.resume-replacement-area {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dce5e9;
  border-radius: 10px;
  background: #f8fbfc;
}

.resume-replacement-area .resume-upload-form {
  margin-bottom: 12px;
}

.resume-replacement-area input[type="file"] {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-bottom: 14px;
}

.resume-replacement-area .secondary-button {
  margin-top: 8px;
}

.site-footer {
  width: 100%;
  margin-top: 80px;
  background: #073b63;
  color: #ffffff;
}

.footer-container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 58px 36px 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  grid-gap: 55px;
  gap: 55px;
  padding-bottom: 45px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
}

.footer-logo-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #2ee0b2;
  font-size: 1.35rem;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.footer-brand-text strong {
  color: #ffffff;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.footer-brand-text span {
  margin-top: 3px;
  color: #2ee0b2;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.footer-brand-text small {
  margin-top: 5px;
  color: #b8cada;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
}

.footer-description {
  max-width: 390px;
  margin: 22px 0;
  color: #c4d3df;
  font-size: 0.95rem;
  line-height: 1.7;
}

.footer-contact {
  display: grid;
  grid-gap: 11px;
  gap: 11px;
  margin-bottom: 22px;
}

.footer-contact a,
.footer-contact div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c4d3df;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-contact svg {
  color: #2ee0b2;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #ffffff;
  font-size: 1rem;
  transition: 0.2s ease;
}

.footer-socials a:hover {
  background: #0b6fb8;
  border-color: #0b6fb8;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.footer-column h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.footer-column a {
  color: #c4d3df;
  text-decoration: none;
  font-size: 0.9rem;
  transition: 0.2s ease;
}

.footer-column a:hover {
  color: #2ee0b2;
  transform: translateX(2px);
}

.footer-column .footer-admin-link {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #9fb5c7;
  font-size: 0.82rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  margin: 0;
  color: #9fb5c7;
  font-size: 0.82rem;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 25px;
}

.footer-legal a {
  color: #9fb5c7;
  text-decoration: none;
  font-size: 0.82rem;
}

.footer-legal a:hover {
  color: #ffffff;
}

@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 650px) {
  .footer-container {
    padding: 45px 22px 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: 15px;
  }
}
.admin-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: #f3f7fa;
  font-family: inherit;
}

.admin-login-brand {
  position: relative;
  display: flex;
  align-items: center;
  padding: 70px;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #043f69 0%,
      #075d93 55%,
      #0878b7 100%
    );
  color: #ffffff;
}

.admin-login-brand::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  bottom: -180px;
  border: 80px solid
    rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.admin-login-brand-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.admin-login-eyebrow,
.admin-login-small-title {
  margin: 0 0 14px;
  color: #52e1bf;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.admin-login-brand h1 {
  margin: 0;
  max-width: 590px;
  font-size: clamp(
    2.8rem,
    5vw,
    5.2rem
  );
  line-height: 1;
  letter-spacing: -0.04em;
}

.admin-login-brand-copy {
  max-width: 560px;
  margin: 28px 0 0;
  color: #dcecf6;
  font-size: 1.1rem;
  line-height: 1.7;
}

.admin-login-security {
  margin-top: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 17px;
  border: 1px solid
    rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background:
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 650;
}

.admin-login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}

.admin-login-card {
  width: min(100%, 510px);
  padding: 48px;
  border: 1px solid #dbe6ee;
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 24px 60px
    rgba(10, 52, 82, 0.1);
}

.admin-login-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 23px;
  border-radius: 15px;
  background: #e9f5fd;
  color: #0769ad;
}

.admin-login-small-title {
  margin-bottom: 8px;
  color: #00a779;
}

.admin-login-card h2 {
  margin: 0;
  color: #073e68;
  font-size: 2.3rem;
}

.admin-login-description {
  margin: 11px 0 30px;
  color: #718597;
  line-height: 1.55;
}

.admin-login-error {
  margin-bottom: 20px;
  padding: 13px 15px;
  border: 1px solid #f0bab5;
  border-radius: 9px;
  background: #fff1f0;
  color: #b83027;
  font-size: 0.92rem;
  font-weight: 650;
}

.admin-login-form {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
}

.admin-login-form label {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.admin-login-form label > span {
  color: #183b57;
  font-size: 0.93rem;
  font-weight: 750;
}

.admin-login-input {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  border: 1px solid #ccdae5;
  border-radius: 10px;
  background: #ffffff;
  color: #728a9c;
}

.admin-login-input:focus-within {
  border-color: #0873ba;
  box-shadow:
    0 0 0 3px
    rgba(8, 115, 186, 0.1);
}

.admin-login-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #123852;
  font: inherit;
}

.admin-login-input input::placeholder {
  color: #9aaab7;
}

.admin-login-button {
  min-height: 55px;
  margin-top: 5px;
  border: 0;
  border-radius: 10px;
  background: #086db1;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.admin-login-button:hover:not(:disabled) {
  background: #055c98;
  transform: translateY(-1px);
}

.admin-login-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.admin-login-footer {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid #e6edf2;
  color: #8a9aa7;
  text-align: center;
  font-size: 0.82rem;
}

@media (
  max-width: 900px
) {
  .admin-login-page {
    grid-template-columns: 1fr;
  }

  .admin-login-brand {
    min-height: 350px;
    padding: 45px 30px;
  }

  .admin-login-brand h1 {
    font-size: 3.3rem;
  }

  .admin-login-panel {
    padding: 35px 20px;
  }
}

@media (
  max-width: 520px
) {
  .admin-login-card {
    padding: 30px 22px;
  }

  .admin-login-brand h1 {
    font-size: 2.65rem;
  }
}
/* ========================================
   PROFESSIONAL PORTAL LAYOUT
======================================== */

.pro-layout {
  min-height: 100vh;
  display: flex;
  background: #f4f8fb;
  color: #173b58;
}

/* ========================================
   SIDEBAR
======================================== */

.pro-layout-sidebar {
  width: 225px;
  height: 100dvh;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-right: 1px solid #dce6ed;
  background: #ffffff;
}

/* ========================================
   SIDEBAR HEADER / BRAND
======================================== */

.pro-layout-sidebar-header {
  min-height: 86px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 16px;

  border-bottom: 1px solid #e5edf2;
}

.pro-layout-brand {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
  text-align: left;
}

.pro-layout-brand-icon {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;

  border-radius: 11px;

  background: #eaf6fd;
  color: #0870b6;
}

.pro-layout-brand-text {
  min-width: 0;
}

.pro-layout-brand-text strong {
  display: block;

  color: #0b416a;

  font-size: 0.96rem;
  font-weight: 800;

  white-space: nowrap;
}

.pro-layout-brand-text small {
  display: block;

  margin-top: 2px;

  color: #7a8e9e;

  font-size: 0.68rem;

  white-space: nowrap;
}

.pro-layout-sidebar-close {
  display: none;

  width: 34px;
  height: 34px;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #6f8392;

  cursor: pointer;
}

/* ========================================
   NAVIGATION
======================================== */

.pro-layout-nav {
  flex: 1 1;
  min-height: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 15px 10px;

  overflow-y: auto;
  overflow-x: hidden;
}

.pro-layout-nav::-webkit-scrollbar {
  width: 5px;
}

.pro-layout-nav::-webkit-scrollbar-track {
  background: transparent;
}

.pro-layout-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd8e1;
}

.pro-layout-nav-link {
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 11px;

  flex: 0 0 auto;

  padding: 0 13px;

  border: 1px solid transparent;
  border-radius: 9px;

  color: #48667d;

  text-decoration: none;

  font-size: 0.86rem;
  font-weight: 700;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.pro-layout-nav-link svg {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  color: #52738a;
}

.pro-layout-nav-link:hover {
  background: #f0f7fb;
  color: #075f9d;
}

.pro-layout-nav-link:hover svg {
  color: #0870b6;
}

.pro-layout-nav-link.active {
  border-color: #c6deed;

  background: #e8f4fc;
  color: #086bb0;
}

.pro-layout-nav-link.active svg {
  color: #086bb0;
}

/* ========================================
   SIDEBAR BOTTOM
======================================== */

.pro-layout-sidebar-bottom {
  flex: 0 0 auto;

  display: grid;
  grid-gap: 8px;
  gap: 8px;

  padding: 11px 11px 14px;

  border-top: 1px solid #e5edf2;

  background: #ffffff;
}

/* ========================================
   HOME BUTTON
======================================== */

.pro-layout-home {
  min-height: 40px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 12px;

  border: 1px solid #d3e0e8;
  border-radius: 8px;

  background: #ffffff;
  color: #3f6078;

  cursor: pointer;

  font: inherit;
  font-size: 0.81rem;
  font-weight: 700;
}

.pro-layout-home:hover {
  background: #f6fafc;
}

/* ========================================
   USER
======================================== */

.pro-layout-user {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 5px 2px;
}

.pro-layout-avatar {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 36px;

  border-radius: 50%;

  background: #0c78bd;
  color: #ffffff;

  font-size: 0.7rem;
  font-weight: 800;
}

.pro-layout-user-copy {
  min-width: 0;
}

.pro-layout-user-copy strong {
  display: block;

  overflow: hidden;

  color: #173d5c;

  font-size: 0.75rem;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-layout-user-copy span {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #7d8f9d;

  font-size: 0.61rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   LOGOUT
======================================== */

.pro-layout-logout {
  min-height: 40px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 12px;

  border: 1px solid #efbbb5;
  border-radius: 8px;

  background: #ffffff;
  color: #bd3a31;

  cursor: pointer;

  font: inherit;
  font-size: 0.81rem;
  font-weight: 700;
}

.pro-layout-logout:hover {
  background: #fff3f2;
}

/* ========================================
   MAIN CONTENT
======================================== */

.pro-layout-main {
  width: calc(100% - 225px);
  min-width: 0;
  min-height: 100vh;

  margin-left: 225px;

  background: #f4f8fb;
}

.pro-layout-content {
  width: 100%;
  min-width: 0;
  min-height: 100vh;

  overflow-x: hidden;

  background: #f4f8fb;
}

/* ========================================
   RESET OLD PROFESSIONAL PAGE OFFSETS
======================================== */

.pro-layout-content .professional-dashboard,
.pro-layout-content .professional-dashboard-page,
.pro-layout-content .professional-profile-page,
.pro-layout-content .professional-documents-page,
.pro-layout-content .professional-availability-page,
.pro-layout-content .professional-coming-soon {
  width: 100%;
  max-width: none;

  margin-left: 0;

  box-sizing: border-box;
}

/* ========================================
   PROFESSIONAL DASHBOARD BRIDGE
======================================== */

.pro-layout-content .professional-dashboard,
.pro-layout-content .professional-dashboard-page {
  min-height: 100vh;

  display: block;

  background: #f4f8fb;
}

.pro-layout-content .dashboard-main {
  width: 100%;
  min-height: 100vh;

  margin-left: 0;
}

.pro-layout-content .dashboard-content {
  width: 100%;

  box-sizing: border-box;
}

/* ========================================
   MOBILE HEADER
======================================== */

.pro-layout-mobile-header {
  display: none;
}

.pro-layout-overlay {
  display: none;
}

/* ========================================
   MEDIUM SCREEN
======================================== */

@media (max-width: 1200px) {
  .pro-layout-sidebar {
    width: 215px;
  }

  .pro-layout-main {
    width: calc(100% - 215px);
    margin-left: 215px;
  }

  .pro-layout-nav-link {
    min-height: 42px;

    padding: 0 11px;

    font-size: 0.82rem;
  }
}

/* ========================================
   TABLET / MOBILE
======================================== */

@media (max-width: 900px) {
  .pro-layout-sidebar {
    width: 240px;

    transform: translateX(-100%);

    box-shadow:
      15px 0 35px
      rgba(10, 40, 60, 0.14);

    transition: transform 0.2s ease;
  }

  .pro-layout-sidebar.open {
    transform: translateX(0);
  }

  .pro-layout-sidebar-close {
    display: inline-flex;
  }

  .pro-layout-overlay {
    position: fixed;
    inset: 0;

    z-index: 850;

    display: block;

    border: 0;

    background: rgba(
      12,
      34,
      49,
      0.48
    );
  }

  .pro-layout-main {
    width: 100%;
    margin-left: 0;
  }

  .pro-layout-mobile-header {
    min-height: 62px;

    position: sticky;
    top: 0;
    z-index: 700;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0 16px;

    border-bottom: 1px solid #dce6ed;

    background: #ffffff;
  }

  .pro-layout-mobile-header > button {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #d2e0e9;
    border-radius: 8px;

    background: #ffffff;
    color: #225371;

    cursor: pointer;
  }

  .pro-layout-mobile-header > div {
    display: grid;
  }

  .pro-layout-mobile-header strong {
    color: #0b416a;
    font-size: 0.88rem;
  }

  .pro-layout-mobile-header small {
    color: #7d8f9d;
    font-size: 0.65rem;
  }
}

/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 520px) {
  .pro-layout-sidebar {
    width: min(84vw, 240px);
  }

  .pro-layout-sidebar-header {
    min-height: 76px;

    padding: 13px;
  }

  .pro-layout-brand-icon {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }

  .pro-layout-nav {
    padding: 10px 9px;
  }

  .pro-layout-nav-link {
    min-height: 41px;

    padding: 0 10px;

    font-size: 0.81rem;
  }

  .pro-layout-sidebar-bottom {
    padding:
      9px 10px
      12px;
  }
}
.facility-dashboard-page {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 34px;
  color: #173b58;
}

.facility-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 25px;
}

.facility-dashboard-eyebrow {
  margin: 0 0 7px;
  color: #00a77b;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.facility-dashboard-header h1 {
  margin: 0;
  color: #07558c;
  font-size: clamp(
    2.2rem,
    3.5vw,
    3.4rem
  );
  line-height: 1.05;
}

.facility-dashboard-subtitle {
  max-width: 760px;
  margin: 12px 0 0;
  color: #6e8192;
  line-height: 1.6;
}

.facility-dashboard-header-actions {
  display: flex;
  gap: 10px;
}

.facility-dashboard-button {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
}

.facility-dashboard-button.secondary {
  border: 1px solid #cad9e4;
  background: #ffffff;
  color: #294a65;
}

.facility-dashboard-button.secondary:hover {
  background: #f5f9fc;
}

.facility-dashboard-button.danger {
  border: 1px solid #efb8b2;
  background: #ffffff;
  color: #c13a31;
}

.facility-dashboard-button.danger:hover {
  background: #fff2f1;
}

.facility-dashboard-identity {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
  padding: 19px 21px;
  border: 1px solid #dce7ee;
  border-radius: 14px;
  background: #ffffff;
}

.facility-dashboard-identity-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  border-radius: 12px;
  background: #eaf6fd;
  color: #086db1;
}

.facility-dashboard-identity-copy {
  min-width: 0;
  flex: 1 1;
}

.facility-dashboard-identity-copy p {
  margin: 0;
  color: #7a8e9e;
  font-size: 0.78rem;
}

.facility-dashboard-identity-copy strong {
  display: block;
  margin-top: 2px;
  color: #123b5d;
  font-size: 1.08rem;
}

.facility-dashboard-identity-copy span {
  display: block;
  margin-top: 3px;
  color: #708494;
  font-size: 0.84rem;
}

.facility-dashboard-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.facility-dashboard-status.active {
  background: #e7f7ef;
  color: #087c50;
}

.facility-dashboard-status.inactive {
  background: #fff0ef;
  color: #bf3930;
}

.facility-dashboard-error {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #efc0ba;
  border-radius: 10px;
  background: #fff1f0;
  color: #b63029;
  font-weight: 650;
}

.facility-dashboard-loading {
  padding: 80px 20px;
  color: #6b8192;
  text-align: center;
  font-weight: 700;
}

.facility-dashboard-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 24px;
}

.facility-dashboard-stat-grid article {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 8px 25px
    rgba(10, 48, 77, 0.05);
}

.facility-dashboard-stat-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  border-radius: 11px;
  background: #eef7fd;
  color: #0b67b2;
}

.facility-dashboard-stat-grid strong {
  display: block;
  color: #12395d;
  font-size: 1.1rem;
}

.facility-dashboard-stat-grid span {
  display: block;
  margin-top: 4px;
  color: #718597;
  font-size: 0.82rem;
}

.facility-dashboard-notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 24px;
  padding: 17px 19px;
  border: 1px solid #f0d39a;
  border-radius: 12px;
  background: #fff9eb;
  color: #855b0b;
}

.facility-dashboard-notice > svg {
  flex: 0 0 auto;
}

.facility-dashboard-notice strong {
  display: block;
}

.facility-dashboard-notice p {
  margin: 4px 0 0;
  color: #8b6d30;
  font-size: 0.87rem;
  line-height: 1.5;
}

.facility-dashboard-content-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.55fr);
  grid-gap: 22px;
  gap: 22px;
}

.facility-dashboard-panel {
  overflow: hidden;
  border: 1px solid #dfe8ef;
  border-radius: 15px;
  background: #ffffff;
}

.facility-dashboard-panel-header {
  padding: 20px 22px;
  border-bottom: 1px solid #e5edf3;
}

.facility-dashboard-panel-header p {
  margin: 0 0 4px;
  color: #00a77b;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.facility-dashboard-panel-header h2 {
  margin: 0;
  color: #153d5d;
  font-size: 1.3rem;
}

.facility-dashboard-module-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  padding: 20px;
}

.facility-dashboard-module {
  position: relative;
  min-height: 125px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px;
  border: 1px solid #dce7ef;
  border-radius: 12px;
  background: #fbfdff;
  text-align: left;
}

.facility-dashboard-module.available {
  cursor: pointer;
}

.facility-dashboard-module.available:hover {
  border-color: #accbde;
  background: #f7fbfe;
}

.facility-dashboard-module.disabled {
  cursor: default;
  opacity: 0.72;
}

.facility-dashboard-module-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 10px;
  background: #eaf6fd;
  color: #086db1;
}

.facility-dashboard-module-copy {
  min-width: 0;
  display: block;
  padding-right: 15px;
}

.facility-dashboard-module-copy strong {
  display: block;
  color: #153d5d;
  font-size: 0.94rem;
}

.facility-dashboard-module-copy small {
  display: block;
  margin-top: 6px;
  color: #728696;
  font-size: 0.79rem;
  line-height: 1.45;
}

.facility-dashboard-module-status {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #8798a5;
  font-size: 0.67rem;
  font-weight: 750;
}

.facility-dashboard-module-status.available {
  color: #079267;
}

.facility-dashboard-overview {
  display: grid;
}

.facility-dashboard-overview > div {
  padding: 15px 20px;
  border-bottom: 1px solid #e8eef3;
}

.facility-dashboard-overview span {
  display: block;
  color: #7c8e9c;
  font-size: 0.75rem;
}

.facility-dashboard-overview strong {
  display: block;
  margin-top: 4px;
  color: #173d5d;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.facility-dashboard-progress {
  padding: 20px;
}

.facility-dashboard-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
  color: #637b8d;
  font-size: 0.82rem;
}

.facility-dashboard-progress strong {
  color: #173d5d;
}

.facility-dashboard-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5edf2;
}

.facility-dashboard-progress-track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #0aaf7c;
}

@media (max-width: 1100px) {
  .facility-dashboard-stat-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

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

  .facility-dashboard-header {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .facility-dashboard-page {
    padding: 18px;
  }

  .facility-dashboard-header-actions {
    width: 100%;
    flex-direction: column;
  }

  .facility-dashboard-button {
    width: 100%;
  }

  .facility-dashboard-stat-grid {
    grid-template-columns: 1fr;
  }

  .facility-dashboard-module-grid {
    grid-template-columns: 1fr;
  }

  .facility-dashboard-identity {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .facility-dashboard-identity-status {
    width: 100%;
    padding-left: 67px;
  }
}
.admin-dashboard-page {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 34px;
  color: #173b58;
}

.admin-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.admin-dashboard-eyebrow {
  margin: 0 0 7px;
  color: #00a77b;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.admin-dashboard-header h1 {
  margin: 0;
  color: #07558c;
  font-size: clamp(
    2.2rem,
    3.5vw,
    3.4rem
  );
  line-height: 1.05;
}

.admin-dashboard-subtitle {
  max-width: 780px;
  margin: 12px 0 0;
  color: #6e8192;
  line-height: 1.6;
}

.admin-dashboard-header-actions {
  display: flex;
  gap: 10px;
}

.admin-dashboard-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.admin-dashboard-btn.secondary {
  border: 1px solid #cad9e4;
  background: #ffffff;
  color: #294a65;
}

.admin-dashboard-btn.secondary:hover:not(:disabled) {
  background: #f5f9fc;
}

.admin-dashboard-btn.danger {
  border: 1px solid #efb8b2;
  background: #ffffff;
  color: #c13a31;
}

.admin-dashboard-btn.danger:hover {
  background: #fff2f1;
}

.admin-dashboard-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-dashboard-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid #dce7ee;
  border-radius: 14px;
  background: #ffffff;
}

.admin-dashboard-welcome-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  border-radius: 12px;
  background: #eaf6fd;
  color: #086db1;
}

.admin-dashboard-welcome p {
  margin: 0;
  color: #7a8e9e;
  font-size: 0.82rem;
}

.admin-dashboard-welcome strong {
  display: block;
  margin-top: 2px;
  color: #123b5d;
  font-size: 1rem;
}

.admin-dashboard-welcome span {
  display: block;
  margin-top: 2px;
  color: #708494;
  font-size: 0.84rem;
}

.admin-dashboard-error {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #efc0ba;
  border-radius: 10px;
  background: #fff1f0;
  color: #b63029;
  font-weight: 650;
}

.admin-dashboard-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 28px;
}

.admin-dashboard-stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 8px 25px
    rgba(
      10,
      48,
      77,
      0.05
    );
}

.admin-dashboard-stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  border-radius: 12px;
  background: #eef7fd;
  color: #0b67b2;
}

.admin-dashboard-stat-card strong {
  display: block;
  color: #12395d;
  font-size: 1.55rem;
}

.admin-dashboard-stat-card span {
  display: block;
  margin-top: 3px;
  color: #718597;
  font-size: 0.86rem;
}

.admin-dashboard-content-grid {
  display: grid;
  grid-template-columns:
    1.05fr
    0.95fr;
  grid-gap: 22px;
  gap: 22px;
}

.admin-dashboard-section {
  overflow: hidden;
  border: 1px solid #dfe8ef;
  border-radius: 15px;
  background: #ffffff;
}

.admin-dashboard-section-heading {
  padding: 20px 22px;
  border-bottom: 1px solid #e5edf3;
}

.admin-dashboard-section-eyebrow {
  margin: 0 0 4px;
  color: #00a77b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.admin-dashboard-section-heading h2 {
  margin: 0;
  color: #153d5d;
  font-size: 1.3rem;
}

.admin-dashboard-action-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  grid-gap: 14px;
  gap: 14px;
  padding: 20px;
}

.admin-dashboard-action-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 120px;
  padding: 18px;
  border: 1px solid #dce7ef;
  border-radius: 12px;
  background: #fbfdff;
  cursor: pointer;
  text-align: left;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-dashboard-action-card:hover {
  transform: translateY(-2px);
  border-color: #accbde;
  box-shadow:
    0 10px 24px
    rgba(
      10,
      48,
      77,
      0.07
    );
}

.admin-dashboard-action-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 10px;
  background: #eaf6fd;
  color: #086db1;
}

.admin-dashboard-action-copy {
  min-width: 0;
  display: block;
}

.admin-dashboard-action-copy strong {
  display: block;
  color: #153d5d;
  font-size: 0.96rem;
}

.admin-dashboard-action-copy small {
  display: block;
  margin-top: 6px;
  color: #728696;
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-dashboard-module-list {
  display: grid;
}

.admin-dashboard-module-list button {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 18px 22px;
  border: 0;
  border-bottom: 1px solid #e8eef3;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.admin-dashboard-module-list button:last-child {
  border-bottom: 0;
}

.admin-dashboard-module-list button:hover:not(:disabled) {
  background: #f8fbfd;
}

.admin-dashboard-module-list button:disabled {
  cursor: default;
  opacity: 0.55;
}

.admin-dashboard-module-list button > svg {
  flex: 0 0 auto;
  color: #0b67b2;
}

.admin-dashboard-module-list strong {
  display: block;
  color: #173e5f;
}

.admin-dashboard-module-list span {
  display: block;
  margin-top: 4px;
  color: #758897;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (
  max-width: 1100px
) {
  .admin-dashboard-stat-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

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

@media (
  max-width: 760px
) {
  .admin-dashboard-page {
    padding: 18px;
  }

  .admin-dashboard-header {
    flex-direction: column;
  }

  .admin-dashboard-header-actions {
    width: 100%;
  }

  .admin-dashboard-header-actions
    .admin-dashboard-btn {
    flex: 1 1;
  }

  .admin-dashboard-stat-grid {
    grid-template-columns:
      1fr;
  }

  .admin-dashboard-action-grid {
    grid-template-columns:
      1fr;
  }
}

.page-loader {
  min-height: 65vh;
  padding: 40px 24px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loader-content {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 24px 28px;
  border: 1px solid #dbe5ee;
  border-radius: 14px;

  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 53, 87, 0.07);
}

.page-loader-spinner {
  width: 34px;
  height: 34px;

  flex-shrink: 0;

  border: 4px solid #dbe7f0;
  border-top-color: #0a67ad;
  border-radius: 50%;

  animation: page-loader-spin 0.75s linear infinite;
}

.page-loader-content h1 {
  margin: 0 0 5px;
  color: #12385b;
  font-size: 1.15rem;
}

.page-loader-content p {
  margin: 0;
  color: #607286;
}

@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ---------- Modal ---------- */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999;
}

.modal{
    background:white;
    width:650px;
    max-width:95%;
    border-radius:12px;
    padding:30px;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    animation:fadeIn .25s ease;
}

.modal h2{
    margin-top:0;
    margin-bottom:20px;
}

.modal button{
    margin-top:20px;
    background:#dc3545;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
}

.modal button:hover{
    background:#bb2d3b;
}

@keyframes fadeIn{
    from{
        transform:translateY(-20px);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }
}

.modal {
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.modal-header h2 {
  margin: 0;
}

.modal .modal-close {
  margin: 0;
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: #526477;
  font-size: 32px;
  line-height: 1;
}

.modal .modal-close:hover {
  background: #eef2f6;
  color: #102f54;
}

.licence-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: #16385f;
  font-weight: 600;
}

.form-group input,
.form-group select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #c7d1dc;
  border-radius: 8px;
  background: #fff;
  color: #102f54;
  font: inherit;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  outline: 2px solid rgba(11, 94, 215, 0.18);
  border-color: #0b5ed7;
}

.primary-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: #16385f;
  font-weight: 600;
}

.primary-checkbox input {
  width: 18px;
  height: 18px;
}

.form-error {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid #f1aeb5;
  border-radius: 8px;
  background: #f8d7da;
  color: #842029;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.modal .cancel-button,
.modal .save-button {
  margin: 0;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
}

.modal .cancel-button {
  border: 1px solid #b7c1cc;
  background: #fff;
  color: #30475f;
}

.modal .cancel-button:hover {
  background: #eef2f6;
}

.modal .save-button {
  border: none;
  background: #0b5ed7;
  color: #fff;
}

.modal .save-button:hover {
  background: #084298;
}

.modal button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (max-width: 700px) {
  .professional-licenses {
    padding: 22px;
  }

  .licence-form-grid {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 22px;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal .cancel-button,
  .modal .save-button {
    width: 100%;
  }
}

.form-group select {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-overflow: initial;
}

.modal {
  width: 760px;
  max-width: 95%;
}

.licence-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

@media (max-width: 850px) {
  .licence-form-grid {
    grid-template-columns: 1fr;
  }
}

.form-group.full-width {
  grid-column: 1 / -1;
}


/* Professional Licenses CSS */ 

.regulator-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}
.regulator-link:hover {
  background: #eff6ff;
  text-decoration: underline;
}

.verify-licence-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.verify-licence-button:hover {
  opacity: 0.9;
}

.verify-licence-button.disabled {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.75;
}

/* =========================================
   PROFESSIONAL LICENCES PAGE
========================================= */

.professional-licenses {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px;
}

.licences-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.licences-page-header h1 {
  margin: 4px 0 10px;
  color: #102f53;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.licences-page-description {
  max-width: 680px;
  margin: 0;
  color: #62778b;
  line-height: 1.6;
}

.add-licence-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 170px;
  padding: 13px 22px;
  flex-shrink: 0;
}

.add-licence-button span {
  font-size: 1.3rem;
  line-height: 1;
}

/* Summary cards */

.licence-summary-label {
  color: #60758a;
  font-size: 0.9rem;
  font-weight: 700;
}

.licence-summary-card strong {
  color: #102f53;
  font-size: 2rem;
  line-height: 1.1;
}

.licence-summary-card small {
  color: #8494a3;
}

/* Main licence card */

.licences-content-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dbe5ee;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 47, 83, 0.07);
}

.licences-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
  border-bottom: 1px solid #e2eaf1;
}

.licences-content-header h2 {
  margin: 0 0 6px;
  color: #102f53;
  font-size: 1.35rem;
}

.licences-content-header p {
  margin: 0;
  color: #687d90;
}

.licence-count {
  padding: 7px 12px;
  background: #edf4fb;
  border-radius: 999px;
  color: #235f94;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Licence table */

.licences-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.licences-table {
  width: 100%;
  min-width: 950px;
  border-collapse: collapse;
}

.licences-table th {
  padding: 15px 18px;
  background: #f5f8fb;
  color: #536a80;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.licences-table td {
  padding: 19px 18px;
  color: #173a5f;
  border-top: 1px solid #e6edf3;
  vertical-align: middle;
}

.licences-table tbody tr {
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.licence-table-row {
  transition: background-color .18s ease;
}

.licence-table-row:hover {
  background: #f8fbfd;
}

.province-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}

.province-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: #e7f1fa;
  border-radius: 9px;
  color: #1768aa;
  font-weight: 800;
}

.licence-number {
  display: inline-block;
  padding: 6px 10px;
  background: #edf3f8;
  border-radius: 7px;
  color: #173a5f;
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.licence-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-active {
  background: #dcf5e7;
  color: #147544;
}

.status-expired {
  background: #fde5e5;
  color: #b42318;
}

.status-neutral {
  background: #edf1f5;
  color: #526578;
}

.verification-pending {
  background: #fff2d5;
  color: #976200;
}

.verification-verified {
  background: #dcecff;
  color: #155da8;
}

.verification-rejected {
  background: #fde5e5;
  color: #b42318;
}

.licence-expiry-date {
  white-space: nowrap;
}

/* Empty state */

.licences-empty-state {
  padding: 64px 24px;
  text-align: center;
}

.licences-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: #edf5fb;
  border-radius: 50%;
  font-size: 1.8rem;
}

.licences-empty-state h3 {
  margin: 0 0 8px;
  color: #102f53;
}

.licences-empty-state p {
  max-width: 480px;
  margin: 0 auto 22px;
  color: #687d90;
  line-height: 1.6;
}

/* Loading state */

.licences-loading-state {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #60758a;
}

.licences-loading-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid #dbe7f0;
  border-top-color: #1768d2;
  border-radius: 50%;
  animation: licence-spin 0.8s linear infinite;
}

@keyframes licence-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive */

@media (max-width: 900px) {
  .professional-licenses {
    padding: 22px;
  }

  .licences-page-header {
    flex-direction: column;
  }

  .add-licence-button {
    width: 100%;
  }

  .licences-summary-grid {
    grid-template-columns: 1fr;
  }

  .licences-content-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .professional-licenses {
    padding: 16px;
  }

  .licences-page-header h1 {
    font-size: 2rem;
  }

  .licence-summary-card {
    padding: 18px;
  }
}

.delete-licence-button {
  padding: 8px 14px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s ease;
}

.delete-licence-button:hover {
  background: #bb2d3b;
}

.licence-menu-heading,
.licence-menu-cell {
  width: 52px;
  min-width: 52px;
  padding-left: 8px !important;
  padding-right: 12px !important;
  text-align: right;
}

.licence-menu-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.licence-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #536a80;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.licence-menu-button:hover,
.licence-menu-button:focus-visible {
  background: #edf4fa;
  border-color: #d6e2ec;
  color: #123c68;
  outline: none;
}

.licence-row-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 170px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #d9e3ec;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(14, 47, 80, 0.16);
}

.licence-row-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #173a5f;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.licence-row-menu button:hover {
  background: #edf4fa;
}

.licence-row-menu .remove-menu-option {
  color: #b42318;
}

.licence-row-menu .remove-menu-option:hover {
  background: #fdf0ef;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.licences-table {
  min-width: 820px;

}
.licence-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #536a80;
  font-size: 1.4rem;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);

  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease,
    background-color .18s ease;
}

.licence-table-row:hover .licence-menu-button,
.licence-table-row:focus-within .licence-menu-button {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.licence-menu-button:hover {
  background: #eef5fb;
}

.licence-menu-button:focus-visible {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
  background: #eef5fb;
}

.licence-helper-text {
  margin-top: 0.5rem;
  max-width: 760px;
  color: #5b6777;
  font-size: 0.95rem;
  line-height: 1.6;
}


.licence-summary-card strong {
  margin-top: 0.35rem;
}

.licence-summary-card small {
  margin-top: 0.45rem;
}

/* Licence summary dashboard */

.licences-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin: 1.5rem 0;
}

.licence-summary-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  grid-gap: 0.9rem;
  gap: 0.9rem;

  min-width: 0;
  min-height: 150px;
  padding: 1.15rem;

  background: #ffffff;
  border: 1px solid #d8e3ee;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20, 55, 90, 0.05);
}

.licence-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  border-radius: 11px;
  flex-shrink: 0;
}

.licence-summary-icon-blue {
  color: #1168c4;
  background: #eaf4ff;
}

.licence-summary-icon-green {
  color: #079455;
  background: #e5f8ed;
}

.licence-summary-icon-purple {
  color: #7a3db8;
  background: #f2eafd;
}

.licence-summary-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.licence-summary-label {
  display: block;
  margin: 0;
  color: #52677c;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.licence-summary-value {
  display: block;
  margin-top: 0.55rem;
  color: #062d59;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.licence-summary-card small {
  display: block;
  margin-top: 0.75rem;
  color: #71869a;
  font-size: 0.86rem;
  line-height: 1.35;
}

.licence-primary-summary {
  display: block;
  width: 100%;
  margin-top: 0.55rem;

  color: #062d59;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.licence-primary-province {
  display: block;
  margin-top: 0.3rem;
  color: #52677c;
  font-size: 0.88rem;
  line-height: 1.3;
}

/* Small laptops: retain all four cards in one row */

/* Small laptops (14") */

@media (min-width:1024px) and (max-width:1366px){

    .licences-summary-grid{
        grid-template-columns:repeat(4,1fr);
        gap:.75rem;
    }

    .licence-summary-card{
        padding:.85rem;
        min-height:120px;
    }

    .licence-summary-icon{
        width:36px;
        height:36px;
    }

    .licence-summary-icon svg{
        width:18px;
        height:18px;
    }

    .licence-summary-label{
        font-size:.82rem;
    }

    .licence-summary-value{
        font-size:1.9rem;
    }

    .licence-primary-summary{

        font-size:.95rem;
        font-weight:700;
        line-height:1.2;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .licence-primary-province{
        font-size:.78rem;
    }

    .licence-summary-card small{
        font-size:.72rem;
    }

}
/* Tablets: two cards per row */

@media (min-width: 768px) and (max-width: 1023px) {
  .licences-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .licence-summary-card {
    min-height: 135px;
    padding: 1rem;
  }
}

/* Mobile: one compact card per row */

@media (max-width: 767px) {
  .licences-summary-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .licence-summary-card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: auto;
    padding: 0.85rem;
  }

  .licence-summary-icon {
    width: 40px;
    height: 40px;
  }

  .licence-summary-label {
    font-size: 0.8rem;
  }

  .licence-summary-value {
    font-size: 1.45rem;
  }

  .licence-primary-summary {
    font-size: 0.95rem;
  }

  .licence-summary-card small {
    margin-top: 0.4rem;
    font-size: 0.76rem;
  }
}

@media (max-width: 900px) {
  .profile-summary-details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .profile-summary-phone,
  .profile-summary-email {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .profile-summary-details {
    grid-template-columns: 1fr;
  }
}


/* ==========================================
   Professional Page Navigation
========================================== */

.professional-page-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.professional-nav-button,
.professional-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.professional-nav-button {
  border: 1px solid #cfdce7;
  background: #ffffff;
  color: #12385b;
  cursor: pointer;
}

.professional-nav-link {
  border: 1px solid #0a5c9f;
  background: #0a5c9f;
  color: #ffffff;
}

.professional-nav-button:hover {
  background: #f3f7fa;
  border-color: #9fb6c9;
}

.professional-nav-link:hover {
  background: #084d85;
  border-color: #084d85;
}

@media (max-width: 640px) {
  .professional-page-nav {
    justify-content: stretch;
  }

  .professional-nav-button,
  .professional-nav-link {
    flex: 1 1;
  }
}

/* ==========================================
   Clinical Specialties Page
========================================== */

.professional-specialties {
  width: 100%;
  min-height: 100vh;
  padding:
    clamp(24px, 3vw, 44px)
    clamp(24px, 4vw, 64px)
    clamp(40px, 5vw, 72px);

  background: #f3f7fa;

  background: var(--background, #f3f7fa);
  box-sizing: border-box;
}

.professional-specialties .professional-page-nav {
  margin: 0 0 28px;
}

/* ==========================================
   Header
========================================== */

.specialties-page-header {
  max-width: 1500px;
  margin: 0 auto 24px;
}

.specialties-page-header .account-label {
  margin: 0 0 10px;
  color: #00a676;
  color: var(--accent-green, #00a676);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.specialties-page-header h1 {
  margin: 0;
  color: #082f57;
  color: var(--primary-blue, #082f57);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.05;
}

.specialties-page-description {
  max-width: 900px;
  margin: 16px 0 0;
  color: #597087;
  color: var(--text-muted, #597087);
  font-size: clamp(1rem, 1vw + 0.35rem, 1.2rem);
  line-height: 1.6;
}

/* ==========================================
   Summary Cards
========================================== */

.specialties-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 1rem;
  gap: 1rem;

  max-width: 1500px;
  margin: 0 auto 24px;
}

.specialty-summary-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-gap: 0.85rem;
  gap: 0.85rem;
  align-items: start;

  min-width: 0;
  min-height: 142px;
  padding: 1rem;

  border: 1px solid #d7e2ec;

  border: 1px solid var(--border, #d7e2ec);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 53, 87, 0.05);
}

.specialty-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  border-radius: 11px;
  flex-shrink: 0;
}

.specialty-summary-icon-primary {
  color: #b7791f;
  background: #fff7dc;
}

.specialty-summary-icon-blue {
  color: #1168c4;
  background: #eaf4ff;
}

.specialty-summary-icon-green {
  color: #079455;
  background: #e5f8ed;
}

.specialty-summary-icon-purple {
  color: #7a3db8;
  background: #f2eafd;
}

.specialty-summary-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.specialty-summary-label {
  color: #52677c;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
}

.specialty-summary-number {
  display: block;
  margin-top: 0.5rem;
  color: #082f57;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}

.specialty-summary-text {
  display: block;
  width: 100%;
  margin-top: 0.5rem;

  color: #082f57;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;

  white-space: normal;
  overflow-wrap: anywhere;
}

.specialty-summary-card small {
  display: block;
  margin-top: 0.65rem;
  color: #71869a;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* ==========================================
   Messages
========================================== */

.specialties-message,
.specialties-error {
  max-width: 1500px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 600;
}

.specialties-message {
  color: #087657;
  background: #e6f8f1;
}

.specialties-error {
  color: #b42318;
  background: #fff0f0;
}

/* ==========================================
   Main Card
========================================== */

.specialties-card {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 42px);

  border: 1px solid #d7e2ec;

  border: 1px solid var(--border, #d7e2ec);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 53, 87, 0.06);
}

.specialties-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 22px;
}

.specialties-card h2 {
  margin: 0;
  color: #082f57;
  color: var(--primary-blue, #082f57);
  font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem);
}

.specialties-card-description {
  max-width: 850px;
  margin: 10px 0 0;
  color: #597087;
  color: var(--text-muted, #597087);
  font-size: 0.98rem;
  line-height: 1.55;
}

.specialties-selected-count {
  flex-shrink: 0;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  color: #0b5b9a;
  background: #eaf4ff;
  font-size: 0.84rem;
  font-weight: 800;
}

/* ==========================================
   Search
========================================== */

.specialties-search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  width: min(100%, 560px);
  margin-bottom: 28px;
  padding: 0 0.9rem;

  border: 1px solid #cfdbe6;
  border-radius: 10px;
  background: #ffffff;
}

.specialties-search-wrapper svg {
  flex-shrink: 0;
  color: #6d8296;
}

.specialties-search-wrapper input {
  width: 100%;
  min-height: 46px;
  padding: 0;

  border: 0;
  outline: 0;
  background: transparent;

  color: #082f57;
  font: inherit;
}

.specialties-search-wrapper:focus-within {
  border-color: #0873bd;
  box-shadow: 0 0 0 3px rgba(8, 115, 189, 0.12);
}

/* ==========================================
   Grouped Specialty Sections
========================================== */

.specialty-category-list {
  display: grid;
  grid-gap: 30px;
  gap: 30px;
}

.specialty-category {
  padding-top: 2px;
}

.specialty-category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2eaf1;
}

.specialty-category-heading h3 {
  margin: 0;
  color: #123f6c;
  font-size: 1.05rem;
}

.specialty-category-heading span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 30px;
  min-height: 30px;
  padding: 0 0.5rem;

  border-radius: 999px;
  color: #536b80;
  background: #eef3f7;

  font-size: 0.8rem;
  font-weight: 800;
}

/* ==========================================
   Specialty Cards
========================================== */

.specialties-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0.9rem;
  gap: 0.9rem;
}

.specialty-option-card {
  position: relative;
  min-width: 0;

  border: 1px solid #d7e2ec;
  border-radius: 12px;
  background: #ffffff;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.specialty-option-card:hover {
  border-color: #9bbad2;
  box-shadow: 0 8px 18px rgba(15, 53, 87, 0.07);
  transform: translateY(-1px);
}

.specialty-option-card-selected {
  border-color: #49aa86;
  background: #f1fbf7;
}

.specialty-option-card-primary {
  border-color: #e0af3b;
  background: #fffaf0;
}

.specialty-selection-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;

  width: 100%;
  min-height: 66px;
  padding: 0.9rem 1rem;

  border: 0;
  border-radius: 12px;
  background: transparent;

  color: #082f57;
  text-align: left;
  cursor: pointer;
}

.specialty-option-name {
  min-width: 0;
  font-size: 0.93rem;
  font-weight: 800;
  line-height: 1.35;
}

.specialty-selection-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex-shrink: 0;

  border: 1px solid #c9d6e1;
  border-radius: 999px;
  color: #49687f;
  background: #ffffff;

  font-size: 1.1rem;
  font-weight: 700;
}

.specialty-option-card-selected
  .specialty-selection-indicator {
  border-color: #079455;
  color: #ffffff;
  background: #079455;
}

.specialty-option-card-primary
  .specialty-selection-indicator {
  border-color: #bd7e00;
  color: #ffffff;
  background: #bd7e00;
}

.specialty-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: 0.7rem 0.9rem;
  border-top: 1px solid rgba(82, 103, 124, 0.14);
}

.specialty-selected-label,
.specialty-primary-badge,
.make-primary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  font-size: 0.76rem;
  font-weight: 800;
}

.specialty-selected-label {
  color: #087657;
}

.specialty-primary-badge {
  color: #9b6500;
}

.make-primary-button {
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 6px;
  color: #786006;
  background: transparent;
  cursor: pointer;
}

.make-primary-button:hover {
  background: #fff0bf;
}

/* ==========================================
   Empty States
========================================== */

.specialties-empty-message {
  margin: 0;
  padding: 1rem;
  border: 1px dashed #c5d1dc;
  border-radius: 10px;
  color: #5e7386;
  background: #fafcfd;
}

/* ==========================================
   Save Action
========================================== */

.specialties-save-actions {
  display: flex;
  justify-content: flex-end;

  max-width: 1500px;
  margin: 24px auto 0;
}

.specialties-save-button {
  min-width: 230px;
  min-height: 50px;
  padding: 12px 28px;

  border: 1px solid #00a676;

  border: 1px solid var(--accent-green, #00a676);
  border-radius: 10px;
  background: #0869ad;
  background: var(--secondary-blue, #0869ad);
  color: #ffffff;

  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.specialties-save-button:hover:not(:disabled) {
  background: #07558d;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(8, 105, 173, 0.2);
}

.specialties-save-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* ==========================================
   Small Laptops
   Keep four summary cards in one row
========================================== */

@media (min-width: 1024px) and (max-width: 1366px) {
  .professional-specialties {
    padding:
      24px
      28px
      48px;
  }

  .specialties-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .specialty-summary-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.65rem;
    min-height: 118px;
    padding: 0.8rem;
    border-radius: 11px;
  }

  .specialty-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }

  .specialty-summary-icon svg {
    width: 18px;
    height: 18px;
  }

  .specialty-summary-label {
    font-size: 0.72rem;
  }

  .specialty-summary-number {
    margin-top: 0.4rem;
    font-size: 1.45rem;
  }

  .specialty-summary-text {
    margin-top: 0.4rem;
    font-size: 0.84rem;
    line-height: 1.2;
  }

  .specialty-summary-card small {
    margin-top: 0.45rem;
    font-size: 0.68rem;
  }

  .specialties-card {
    padding: 24px;
  }

  .specialties-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .specialty-selection-button {
    min-height: 58px;
    padding: 0.75rem;
  }

  .specialty-option-name {
    font-size: 0.82rem;
  }

  .specialty-card-footer {
    padding: 0.55rem 0.7rem;
  }

  .specialty-selected-label,
  .specialty-primary-badge,
  .make-primary-button {
    font-size: 0.68rem;
  }
}

/* ==========================================
   Tablets
========================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .specialties-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specialties-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 767px) {
  .professional-specialties {
    padding: 20px 16px 40px;
  }

  .professional-specialties .professional-page-nav {
    margin-bottom: 22px;
  }

  .specialties-page-header {
    margin-bottom: 20px;
  }

  .specialties-summary-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .specialty-summary-card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: auto;
    padding: 0.85rem;
  }

  .specialty-summary-icon {
    width: 40px;
    height: 40px;
  }

  .specialties-card {
    padding: 22px 16px;
    border-radius: 15px;
  }

  .specialties-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .specialties-search-wrapper {
    width: 100%;
  }

  .specialties-options {
    grid-template-columns: 1fr;
  }

  .specialty-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .specialties-save-actions {
    justify-content: stretch;
  }

  .specialties-save-button {
    width: 100%;
    min-width: 0;
  }
}

.profile-page-header {
  max-width: 1500px;
  margin: 0 auto 40px;
}

.profile-page-header .account-label {
  margin: 0 0 12px;
  color: #00a676;
  color: var(--accent-green, #00a676);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-page-header h1 {
  margin: 0;
  color: #0b355f;
  color: var(--primary-blue, #0b355f);
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.08;
}

.profile-page-description {
  max-width: 850px;
  margin: 18px 0 0;
  color: #5b7085;
  color: var(--text-muted, #5b7085);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.2rem);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .profile-page-header {
    margin-bottom: 28px;
  }

  .profile-page-header h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .profile-page-description {
    margin-top: 14px;
  }
}
.profile-status-card {
  margin: 24px 0 30px;
  padding: 28px;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.06);
}

.profile-status-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.profile-status-header h2 {
  margin: 6px 0 8px;

  color: #073f68;

  font-size: 1.8rem;
}

.profile-status-description {
  margin: 0;

  color: #60758a;

  line-height: 1.55;
}

.assignment-readiness-badge {
  min-width: 205px;

  padding: 14px 18px;

  border-radius: 14px;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assignment-readiness-badge span {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.assignment-readiness-badge strong {
  font-size: 1rem;
}

.assignment-readiness-badge.ready {
  background: #e5f7ee;
  color: #087d42;
}

.assignment-readiness-badge.not-ready {
  background: #fff2d7;
  color: #a76700;
}

.profile-status-grid {
  margin-top: 26px;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  grid-gap: 22px;

  gap: 22px;
}

.profile-status-section {
  padding: 20px;

  border: 1px solid #d9e5ef;
  border-radius: 14px;

  background: #f9fbfd;
}

.profile-status-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-status-section-header > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-status-section-header span {
  color: #60758a;

  font-size: 0.83rem;
}

.profile-status-section-header strong {
  color: #073f68;

  font-size: 1rem;
}

.profile-status-percentage {
  font-size: 1.35rem !important;
}

.profile-status-progress {
  height: 9px;

  margin: 16px 0 10px;

  overflow: hidden;

  border-radius: 999px;

  background: #e1eaf2;
}

.profile-status-progress-fill {
  height: 100%;

  border-radius: inherit;

  background: #09aa79;

  transition: width 0.3s ease;
}

.profile-status-progress-fill.verification {
  background: #147dcc;
}

.profile-status-section small {
  color: #60758a;
}

.profile-verification-label {
  padding: 7px 11px;

  border-radius: 999px;

  font-size: 0.76rem !important;
  font-weight: 700;

  white-space: nowrap;
}

.profile-verification-label.verified {
  background: #e5f7ee;
  color: #087d42;
}

.profile-verification-label.pending-review {
  background: #fff2cf;
  color: #a86600;
}

.profile-verification-label.incomplete {
  background: #fde9e6;
  color: #bd3029;
}

.profile-verification-label.action-required {
  background: #fde9e6;
  color: #bd3029;
}

.verification-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.verification-counts span {
  color: #60758a;

  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 850px) {
  .profile-status-header {
    flex-direction: column;
  }

  .assignment-readiness-badge {
    min-width: 0;
    width: 100%;
  }

  .profile-status-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .profile-status-card {
    padding: 21px;
  }

  .profile-status-section-header {
    flex-direction: column;
  }
}
/* ==========================================
   Profile Section Cards
========================================== */

.profile-sections-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    grid-gap:24px;
    gap:24px;
    margin-top:30px;
}

.profile-section-card{

    background:#fff;
    border-radius:18px;
    padding:26px;

    box-shadow:0 4px 18px rgba(0,0,0,.06);

    transition:.25s ease;

    display:flex;
    flex-direction:column;
}

.profile-section-card:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}

.profile-section-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.profile-section-icon{

    width:56px;

    height:56px;

    border-radius:14px;

    background:#eef5fb;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

}

.profile-section-card h3{

    margin:0 0 10px;

    color:#12385b;

}

.profile-section-card p{

    color:#607286;

    line-height:1.6;

    margin-bottom:20px;

}

.profile-section-value{

    font-weight:700;

    color:#0a5c9f;

    margin-bottom:24px;

}

.section-status{

    padding:7px 14px;

    border-radius:100px;

    font-size:13px;

    font-weight:700;

}

.section-status.complete{

    background:#e8f7ef;

    color:#11864b;

}

.section-status.not-started{

    background:#fff4df;

    color:#bd7c00;

}

.section-status.in-progress{

    background:#eef5ff;

    color:#1560bd;

}

.section-manage-btn{

    margin-top:auto;

    background:#0a5c9f;

    color:#fff;

    text-decoration:none;

    text-align:center;

    padding:12px;

    border-radius:10px;

    font-weight:600;

    transition:.2s;

}

.section-manage-btn:hover{

    background:#084d85;

}

.section-status.incomplete {
  background: #fff4df;
  color: #a96800;
}

.profile-section-summary {
  color: #607286;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ==========================================
   Profile Summary Card
========================================== */

.profile-summary-card {
  width: 100%;
  margin: 24px 0 30px;
  padding: 24px 26px;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.06);

  overflow: hidden;
}

/* ==========================================
   Top Summary Row
========================================== */

.profile-summary-top {
  display: grid;
  grid-template-columns:
    68px
    minmax(250px, 1.45fr)
    minmax(150px, 0.8fr)
    minmax(115px, 0.65fr)
    auto;

  align-items: center;
  grid-gap: 16px 22px;
  gap: 16px 22px;
}

.profile-avatar {
  width: 68px;
  height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #0a5c9f;
  color: #ffffff;

  font-size: 26px;
  font-weight: 700;
  line-height: 1;

  flex-shrink: 0;
}

.profile-summary-name {
  min-width: 0;
}

.profile-summary-name h2 {
  margin: 0;

  color: #12385b;

  font-size: clamp(1.3rem, 1.55vw, 1.8rem);
  font-weight: 700;
  line-height: 1.12;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-profession {
  margin: 0;

  color: #12385b;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;

  white-space: nowrap;
}

.profile-location {
  margin: 0;

  color: #0a5c9f;

  font-size: clamp(0.86rem, 0.95vw, 0.98rem);
  font-weight: 600;

  white-space: nowrap;
}

.status-pill {
  justify-self: end;
  align-self: center;

  padding: 7px 14px;

  border-radius: 999px;

  font-size: 0.82rem;
  font-weight: 700;

  white-space: nowrap;
}

.status-pill.active {
  background: #e8f7ef;
  color: #138a4b;
}

/* ==========================================
   Profile Summary Details
========================================== */

.profile-summary-grid {
  margin-top: 24px;

  display: grid;
  grid-template-columns:
    minmax(145px, 0.85fr)
    minmax(150px, 0.9fr)
    minmax(235px, 1.35fr)
    minmax(185px, 1fr);

  grid-gap: 18px 26px;

  gap: 18px 26px;
  align-items: start;
}

.summary-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-item span,
.summary-item small {
  display: block;

  margin: 0;

  color: #7d8a98;

  font-size: 0.78rem;
  line-height: 1.25;

  white-space: nowrap;
}

.summary-item strong {
  display: block;

  min-width: 0;
  margin: 0;

  color: #12385b;

  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-summary-email {
  font-size: 0.82rem;
}

.profile-summary-phone {
  font-size: 0.84rem;
}

/* ==========================================
   Standard 14-Inch Laptop Screens
========================================== */

@media (max-width: 1366px) {
  .profile-summary-card {
    padding: 22px 24px;
  }

  .profile-summary-top {
    grid-template-columns:
      60px
      minmax(220px, 1.35fr)
      minmax(140px, 0.75fr)
      minmax(105px, 0.6fr)
      auto;

    gap: 14px 18px;
  }

  .profile-avatar {
    width: 60px;
    height: 60px;

    font-size: 23px;
  }

  .profile-summary-name h2 {
    font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  }

  .profile-profession,
  .profile-location {
    font-size: 0.88rem;
  }

  .status-pill {
    padding: 6px 12px;
    font-size: 0.76rem;
  }

  .profile-summary-grid {
    grid-template-columns:
      minmax(130px, 0.8fr)
      minmax(135px, 0.85fr)
      minmax(210px, 1.3fr)
      minmax(165px, 0.95fr);

    gap: 16px 20px;
  }

  .summary-item span,
  .summary-item small {
    font-size: 0.74rem;
  }

  .summary-item strong {
    font-size: 0.8rem;
  }

  .profile-summary-email {
    font-size: 0.76rem;
  }

  .profile-summary-phone {
    font-size: 0.78rem;
  }
}

/* ==========================================
   Narrow Laptop / Tablet
========================================== */

@media (max-width: 1050px) {
  .profile-summary-top {
    grid-template-columns:
      58px
      minmax(190px, 1fr)
      minmax(135px, 0.75fr)
      auto;
  }

  .profile-location {
    grid-column: 3;
  }

  .status-pill {
    grid-column: 4;
  }

  .profile-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .summary-item strong,
  .profile-summary-email,
  .profile-summary-phone {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ==========================================
   Small Tablets
========================================== */

@media (max-width: 760px) {
  .profile-summary-card {
    padding: 20px;
  }

  .profile-summary-top {
    grid-template-columns:
      56px
      minmax(0, 1fr);

    align-items: start;
  }

  .profile-avatar {
    width: 56px;
    height: 56px;

    font-size: 21px;
  }

  .profile-summary-name,
  .profile-profession,
  .profile-location,
  .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .profile-summary-name h2 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .profile-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 560px) {
  .profile-summary-top {
    grid-template-columns: 1fr;
  }

  .profile-avatar,
  .profile-summary-name,
  .profile-profession,
  .profile-location,
  .status-pill {
    grid-column: 1;
  }

  .profile-summary-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   Professional Profile Page
========================================== */

.professional-profile-page {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px);
}

/* ==========================================
   Top Navigation
========================================== */

.profile-page-top-actions {
  width: 100%;
  margin-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.profile-page-top-actions .professional-page-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================
   Edit Profile Action
========================================== */

.profile-edit-action-row {
  width: 100%;
  margin: -8px 0 24px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.profile-edit-button {
  min-height: 44px;
  padding: 10px 18px;

  border: 1px solid #0a67ad;
  border-radius: 9px;

  background: #0a67ad;
  color: #ffffff;

  font: inherit;
  font-weight: 700;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.profile-edit-button:hover {
  background: #07598f;
  border-color: #07598f;
  transform: translateY(-1px);
}

.profile-edit-button:focus-visible {
  outline: 3px solid rgba(10, 103, 173, 0.2);
  outline-offset: 2px;
}

/* ==========================================
   Page Header
========================================== */

.profile-page-header {
  max-width: 1500px;
  margin: 0 auto 40px;
}

.profile-page-header h1 {
  margin: 0;

  color: #0b355f;

  color: var(--primary-blue, #0b355f);

  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.08;
}

.profile-page-description {
  max-width: 850px;
  margin: 18px 0 0;

  color: #5b7085;

  color: var(--text-muted, #5b7085);

  font-size: clamp(
    1rem,
    0.5vw + 0.9rem,
    1.2rem
  );

  line-height: 1.65;
}

/* ==========================================
   Error Message
========================================== */

.profile-error-message {
  margin-bottom: 24px;
  padding: 16px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  border: 1px solid #efc5c1;
  border-radius: 12px;

  background: #fff4f2;
  color: #a92720;
}

.profile-error-message p {
  margin: 4px 0 0;
}

/* ==========================================
   Professional Information Section
========================================== */

.profile-sections-container {
  margin-top: 38px;
}

.profile-sections-heading {
  margin-bottom: 24px;
}

.profile-sections-heading h2 {
  margin: 7px 0 10px;

  color: #0b355f;

  color: var(--primary-blue, #0b355f);

  font-size: clamp(
    1.8rem,
    2vw,
    2.4rem
  );
}

.profile-sections-heading p:last-child {
  margin: 0;

  color: #5b7085;

  color: var(--text-muted, #5b7085);

  line-height: 1.6;
}

/* ==========================================
   Profile Section Cards
========================================== */

.profile-sections-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-gap: 24px;

  gap: 24px;
  align-items: stretch;
}

.profile-section-card {
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.profile-section-card
  .profile-section-action,
.profile-section-card
  .profile-card-button {
  margin-top: auto;
}

/* ==========================================
   Medium Screens
========================================== */

@media (max-width: 1200px) {
  .profile-sections-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================
   Tablets
========================================== */

@media (max-width: 760px) {
  .profile-page-top-actions {
    justify-content: flex-start;
  }

  .profile-page-top-actions
    .professional-page-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .profile-edit-action-row {
    justify-content: stretch;
    margin-top: 0;
  }

  .profile-edit-button {
    width: 100%;
  }

  .profile-error-message {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 650px) {
  .professional-profile-page {
    padding: 18px;
  }

  .profile-sections-grid {
    grid-template-columns: 1fr;
  }
}

.profile-page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.profile-page-header-row > :first-child {
  flex: 1 1;
  min-width: 0;
}

.profile-page-header-row .profile-edit-button {
  flex: 0 0 auto;
  margin-top: 6px;
}

@media (max-width: 760px) {
  .profile-page-header-row {
    flex-direction: column;
  }

  .profile-page-header-row .profile-edit-button {
    margin-top: 0;
  }
}
/* Do not move lines 14–19 *

.page-header {
  margin-bottom: 24px;
}

.secondary-button {
  width: auto;
}   */


/* Professional Licenses CSS- Do not move lines 23–48  

.professional-licenses{
    padding:40px;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.page-header button{
    background:#0b5ed7;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
}

.page-header button:hover{
    background:#084298;
}

*/


/*  Do not transfer lines 835–869:
.specialties-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

.form-message {
  margin-bottom: 24px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.form-message--error {
  background: #fff1f1;
  border: 1px solid #e4a5a5;
  color: #8a1f1f;
}

.form-message--success {
  background: #edf8f1;
  border: 1px solid #9fd2ae;
  color: #1d6535;
}

.primary-specialty-heading {
  margin-top: 30px;
}

.specialty-helper-text {
  margin-bottom: 18px;
  color: #666;
  font-size: 0.95rem;
}  

Do not transfer lines 1325–1346:

.professional-specialties {
  padding-top: 24px;
}

.professional-specialties .professional-page-nav {
  margin-top: 12px;
  margin-right: 24px;
  margin-bottom: 32px;
}

.professional-specialties .licences-page-header {
  margin-top: 0;
}

.professional-page-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 24px 24px 28px;
  flex-wrap: wrap;
}
 

.profile-progress-card {
  display: grid;
  grid-template-columns: 260px minmax(260px, 1fr) auto;
  align-items: center;
  gap: 30px;

  min-height: 160px;
  padding: 30px 40px;

  border-radius: 22px;
  background: linear-gradient(
    110deg,
    #07598d,
    #1878c4
  );
  color: #ffffff;
}

Do not transfer lines 1349–1413, including:

.dashboard-progress-summary p {
  margin: 0 0 10px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.dashboard-progress-summary strong {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.1;
}

.dashboard-progress-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}

.dashboard-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #58dfbd;
  transition: width 0.35s ease;
}

.dashboard-complete-profile-link {
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}




.dashboard-complete-profile-link:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .profile-progress-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dashboard-complete-profile-link {
    justify-self: start;
  }
}
*/


/* ==========================================
   Edit Professional Profile
========================================== */

.professional-profile-page {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px);
}

.profile-page-header {
  max-width: 1500px;
  margin: 0 auto 34px;
}

.profile-page-header h1 {
  margin: 0;
  color: #0b355f;
  color: var(--primary-blue, #0b355f);
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.08;
}

.profile-page-header p {
  margin: 16px 0 0;
  color: #5b7085;
  color: var(--text-muted, #5b7085);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.2rem);
  line-height: 1.6;
}

.profile-form,
.personal-information-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 22px;
  gap: 22px;
}

.registration-grid-full {
  grid-column: 1 / -1;
}

.form-field {
  min-width: 0;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  color: #0b355f;
  font-size: 0.9rem;
  font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #c9d6e2;
  border-radius: 8px;
  background: #ffffff;
  color: #102f4c;
  font: inherit;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid rgba(10, 103, 173, 0.13);
  border-color: #0a67ad;
}

.form-helper-text {
  display: block;
  margin-top: 0.45rem;
  color: #5f6f7f;
  font-size: 0.85rem;
  line-height: 1.4;
}

.profile-subsection {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d8e1ea;
}

.profile-subsection-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.profile-subsection-header h3 {
  margin: 0;
  color: #0b355f;
  font-size: 1.25rem;
}

.profile-subsection-header p {
  margin: 0.4rem 0 0;
  color: #5f6f7f;
}

.empty-form-message {
  margin: 0;
  padding: 1rem;
  border: 1px dashed #c5d1dc;
  border-radius: 8px;
  background: #f8fbfd;
}

.language-list {
  display: grid;
  grid-gap: 0.65rem;
  gap: 0.65rem;
}

.language-summary-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: #ffffff;
}

.language-summary-details {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.language-summary-details span {
  color: #5f6f7f;
}

.language-summary-details span::before {
  content: "— ";
}

.language-actions-menu {
  position: relative;
}

.language-actions-menu summary {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  list-style: none;
}

.language-actions-menu summary::-webkit-details-marker {
  display: none;
}

.language-actions-menu summary:hover {
  background: #eef4f8;
}

.language-actions-dropdown {
  position: absolute;
  top: 42px;
  right: 0;
  z-index: 20;
  min-width: 130px;
  padding: 0.4rem;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 43, 67, 0.14);
}

.language-actions-dropdown button {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.language-actions-dropdown button:hover {
  background: #eef4f8;
}

.language-remove-action {
  color: #b42318;
}

.language-entry,
.language-form-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid #d8e1ea;
  border-radius: 10px;
  background: #ffffff;
}

.language-entry .form-field {
  min-width: 0;
}

.language-entry-actions,
.language-form-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

/* Save button remains in normal document flow. */
.save-profile-container,
.save-profile-container.registration-grid-full {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 24px;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  border-top: 0;
  background: transparent;
  z-index: auto;
}

.save-profile-button,
.save-profile-btn {
  width: 100%;
  min-height: 58px;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  background: #00a676;
  color: #ffffff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.save-profile-button:hover,
.save-profile-btn:hover {
  background: #008f65;
}

.save-profile-button:disabled,
.save-profile-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .profile-form,
  .personal-information-form {
    grid-template-columns: 1fr;
  }

  .profile-subsection-header {
    flex-direction: column;
  }

  .language-summary-details {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .language-summary-details span::before {
    content: "";
  }

  .language-entry,
  .language-form-card {
    grid-template-columns: 1fr;
  }

  .language-form-actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   PROFESSIONAL CERTIFICATIONS PAGE
========================================================= */

.professional-certifications-page {
  width: 100%;
  min-height: 100vh;
  padding:
    clamp(12px, 1.8vh, 28px)
    clamp(18px, 4vw, 72px)
    clamp(18px, 3vh, 44px);

  background: #f5f8fb;

  background: var(--background, #f5f8fb);
  box-sizing: border-box;
}

/* =========================================================
   PROFESSIONAL PAGE NAVIGATION
========================================================= */

.professional-certifications-page > .professional-page-nav {
  width: 100%;
  max-width: 1600px;
  margin:
    0 auto
    clamp(8px, 1.5vh, 20px);

  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   PAGE HEADER
========================================================= */

.certifications-page-header {
  width: 100%;
  max-width: 1600px;
  margin:
    0 auto
    clamp(16px, 2.6vh, 34px);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 48px);
}

.certifications-page-header > div {
  min-width: 0;
  flex: 1 1;
}

.certifications-page-header .account-label {
  margin:
    0 0
    clamp(4px, 0.8vh, 10px);

  color: #00a676;

  color: var(--accent-green, #00a676);
  font-size: clamp(11px, 0.65vw, 13px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.certifications-page-header h1 {
  margin: 0;

  color: #004a7c;

  color: var(--primary-blue, #004a7c);
  font-size: clamp(2.2rem, 3.5vw, 4rem);
  line-height: 1.04;
}

.certifications-page-description {
  max-width: 850px;
  margin:
    clamp(7px, 1.2vh, 16px)
    0 0;

  color: #6b7c93;

  color: var(--text-muted, #6b7c93);
  font-size: clamp(0.95rem, 0.35vw + 0.9rem, 1.18rem);
  line-height: 1.5;
}

/* =========================================================
   ADD CERTIFICATION BUTTON
========================================================= */

.add-certification-button {
  min-width: clamp(190px, 16vw, 260px);
  min-height: clamp(44px, 5.5vh, 56px);
  padding:
    clamp(9px, 1.2vh, 13px)
    clamp(17px, 1.8vw, 24px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;

  border: 1px solid #00a676;

  border: 1px solid var(--accent-green, #00a676);
  border-radius: 11px;

  background: #0a74c9;

  background: var(--secondary-blue, #0a74c9);
  color: #ffffff;

  font-size: clamp(0.9rem, 0.35vw + 0.85rem, 1.05rem);
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.add-certification-button:hover {
  background: #004a7c;
  background: var(--primary-blue, #004a7c);
  border-color: #004a7c;
  border-color: var(--primary-blue, #004a7c);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 74, 124, 0.16);
}

.add-certification-button:focus-visible {
  outline: 3px solid rgba(10, 116, 201, 0.24);
  outline-offset: 3px;
}

.add-certification-button span {
  font-size: 1.25rem;
  line-height: 1;
}

/* =========================================================
   SUCCESS AND ERROR MESSAGES
========================================================= */

.certification-message {
  width: 100%;
  max-width: 1600px;
  margin:
    0 auto
    clamp(14px, 2vh, 24px);

  padding: 14px 18px;

  border-radius: 10px;

  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

.certification-message-success {
  border: 1px solid #b7e7cc;
  background: #eaf8f0;
  color: #08783f;
}

.certification-message-error {
  border: 1px solid #f1b8b5;
  background: #fdeceb;
  color: #b42318;
}

/* =========================================================
   CERTIFICATIONS GRID
========================================================= */

.certifications-grid {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 420px), 1fr)
  );

  grid-auto-rows: 1fr;
  grid-gap: clamp(18px, 2vw, 30px);
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
}

/*
  A single card does not stretch across an entire large screen.
  Multiple cards can still form responsive columns.
*/

.certifications-grid > .certification-card:only-child {
  width: min(100%, 920px);
  max-width: none;
}
/* =========================================================
   CERTIFICATION CARD
========================================================= */

.certification-card {
  width: 100%;
  height: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  border: 1px solid #dce6ed;

  border: 1px solid var(--border, #dce6ed);
  border-radius: 18px;

  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 55, 95, 0.08);
  box-shadow: var(--shadow-small, 0 4px 12px rgba(0, 55, 95, 0.08));

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.certification-card:hover {
  transform: translateY(-3px);
  border-color: rgba(10, 116, 201, 0.3);
  box-shadow: 0 12px 30px rgba(0, 55, 95, 0.14);
  box-shadow: var(
    --shadow-medium,
    0 12px 30px rgba(0, 55, 95, 0.14)
  );
}

.certification-card-top {
  margin-bottom: clamp(12px, 1.8vh, 24px);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 24px);
}

.certification-card-top > div {
  min-width: 0;
}

.certification-code {
  margin-bottom: clamp(7px, 1vh, 11px);
  padding: 5px 11px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;

  background: #edf5f8;

  background: var(--light-blue, #edf5f8);
  color: #004a7c;
  color: var(--primary-blue, #004a7c);

  font-size: clamp(11px, 0.55vw, 13px);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.certification-card h3 {
  margin: 0;

  overflow-wrap: anywhere;

  color: #004a7c;

  color: var(--primary-blue, #004a7c);
  font-size: clamp(1.2rem, 0.8vw + 1rem, 1.6rem);
  line-height: 1.3;
}

/* =========================================================
   CERTIFICATION STATUS
========================================================= */

.certification-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 42px;
  min-width: 120px;

  padding: 10px 18px;

  border-radius: 999px;
  border: 1px solid transparent;

  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;

  box-shadow: 0 4px 14px rgba(0, 55, 95, 0.08);

  transition: all 0.25s ease;
}

.certification-status svg {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.certification-status:hover {
  transform: translateY(-2px);
}

.certification-status-current {
  color: #087a43;
  background: #ddf6e9;
  border-color: #b8e5ca;
}

.certification-status-expired {
  color: #b42318;
  background: #fde8e7;
  border-color: #f4b9b5;
}

.certification-status-expiring,
.certification-status-expiring-soon {
  border-color: #f2cf82;
  background: #fff2d5;
  color: #9a6300;

  animation: certificationWarningPulse 2s ease-in-out infinite;
}

@keyframes certification-warning-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(154, 99, 0, 0.10);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(154, 99, 0, 0.28);
  }
}

.certification-status-expiring-soon {
  animation: certification-warning-pulse 2s ease-in-out infinite;
}


.certification-status-no-expiry {
  color: #0b5cab;
  background: #e7f1ff;
  border-color: #bfd8ff;
}

/* =========================================================
   CERTIFICATION DETAILS
========================================================= */

.certification-details {
  margin: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  grid-gap:
    clamp(10px, 1.5vh, 19px)
    clamp(18px, 2.5vw, 34px);

  gap:
    clamp(10px, 1.5vh, 19px)
    clamp(18px, 2.5vw, 34px);
}

.certification-details > div {
  min-width: 0;
}

.certification-details dt {
  margin:
    0 0
    clamp(3px, 0.6vh, 7px);

  color: #6b7c93;

  color: var(--text-muted, #6b7c93);
  font-size: clamp(11px, 0.55vw, 13px);
  font-weight: 600;
}

.certification-details dd {
  margin: 0;

  overflow-wrap: anywhere;

  color: #163247;

  color: var(--text-dark, #163247);
  font-size: clamp(13px, 0.45vw + 0.75rem, 15px);
  font-weight: 700;
  line-height: 1.45;
}

.verification-status {
  padding: 6px 10px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;

  background: #fff1cf;
  color: #946000;

  font-size: clamp(11px, 0.5vw, 13px);
  font-weight: 800;
}

/* =========================================================
   CARD ACTION BUTTONS
========================================================= */

.certification-card-actions {
  margin-top: auto;
  padding-top: clamp(14px, 2.2vh, 28px);

  display: flex;
  gap: clamp(10px, 1vw, 14px);
}

.certification-edit-button,
.certification-delete-button {
  min-height: clamp(38px, 5vh, 48px);
  padding:
    clamp(7px, 1vh, 11px)
    clamp(14px, 1.5vw, 20px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;

  border-radius: 9px;

  font-size: clamp(0.85rem, 0.25vw + 0.82rem, 0.98rem);
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.certification-edit-button {
  border: 1px solid #0a74c9;
  border: 1px solid var(--secondary-blue, #0a74c9);
  background: #ffffff;
  color: #004a7c;
  color: var(--primary-blue, #004a7c);
}

.certification-edit-button:hover {
  background: #edf5fb;
  transform: translateY(-1px);
}

.certification-delete-button {
  border: 1px solid #d93025;
  border: 1px solid var(--danger, #d93025);
  background: #d93025;
  background: var(--danger, #d93025);
  color: #ffffff;
}

.certification-delete-button:hover {
  border-color: #b92720;
  background: #b92720;
  transform: translateY(-1px);
}

.certification-edit-button:focus-visible,
.certification-delete-button:focus-visible {
  outline: 3px solid rgba(10, 116, 201, 0.2);
  outline-offset: 2px;
}

.certification-delete-button:disabled,
.certification-edit-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.certifications-empty-state {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding:
    clamp(42px, 7vh, 90px)
    clamp(20px, 3vw, 40px);

  border: 1px dashed #dce6ed;

  border: 1px dashed var(--border, #dce6ed);
  border-radius: 18px;

  background: #ffffff;
  text-align: center;
}

.certifications-empty-icon {
  width: clamp(58px, 5vw, 74px);
  height: clamp(58px, 5vw, 74px);
  margin:
    0 auto
    clamp(16px, 2vh, 22px);

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(0, 166, 118, 0.11);
  color: #00a676;
  color: var(--accent-green, #00a676);

  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
}

.certifications-empty-state h3 {
  margin: 0;

  color: #004a7c;

  color: var(--primary-blue, #004a7c);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
}

.certifications-empty-state p {
  max-width: 600px;
  margin:
    13px auto
    clamp(20px, 3vh, 28px);

  color: #6b7c93;

  color: var(--text-muted, #6b7c93);
  line-height: 1.7;
}

/* =========================================================
   CERTIFICATION MODAL OVERLAY
========================================================= */

.certification-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;

  padding: clamp(12px, 3vw, 28px);

  display: grid;
  place-items: center;

  overflow-y: auto;

  background: rgba(0, 31, 53, 0.64);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* =========================================================
   CERTIFICATION MODAL
========================================================= */

.certification-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);

  overflow-y: auto;

  border: 1px solid rgba(220, 230, 237, 0.85);
  border-radius: 18px;

  background: #ffffff;
  box-shadow: 0 22px 65px rgba(0, 31, 53, 0.28);
}

.certification-modal-header {
  padding:
    clamp(19px, 2.4vw, 28px)
    clamp(20px, 2.5vw, 30px);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  border-bottom: 1px solid #dce6ed;

  border-bottom: 1px solid var(--border, #dce6ed);
}

.certification-modal-header .account-label {
  margin: 0 0 7px;

  color: #00a676;

  color: var(--accent-green, #00a676);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.certification-modal-header h2 {
  margin: 0;

  color: #004a7c;

  color: var(--primary-blue, #004a7c);
  font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem);
}

.certification-modal-close {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;
  flex-shrink: 0;

  border: none;
  border-radius: 50%;

  background: #edf3f7;
  color: #004a7c;
  color: var(--primary-blue, #004a7c);

  font-size: 1.5rem;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.certification-modal-close:hover {
  background: #ddeaf2;
  transform: rotate(5deg);
}

.certification-modal-close:focus-visible {
  outline: 3px solid rgba(10, 116, 201, 0.22);
  outline-offset: 2px;
}

.certification-modal-close:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* =========================================================
   CERTIFICATION FORM
========================================================= */

.certification-form {
  padding:
    clamp(20px, 2.5vw, 30px);
}

.certification-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap:
    clamp(15px, 2vh, 22px)
    clamp(16px, 2vw, 24px);
  gap:
    clamp(15px, 2vh, 22px)
    clamp(16px, 2vw, 24px);
}

.certification-form-group {
  min-width: 0;

  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.certification-form-full {
  grid-column: 1 / -1;
}

.certification-form-group label {
  color: #163247;
  color: var(--text-dark, #163247);
  font-size: 13px;
  font-weight: 700;
}

.certification-form-group input,
.certification-form-group select,
.certification-form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;

  border: 1px solid #dce6ed;

  border: 1px solid var(--border, #dce6ed);
  border-radius: 9px;

  background: #ffffff;
  color: #163247;
  color: var(--text-dark, #163247);

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.certification-form-group textarea {
  min-height: 110px;
  resize: vertical;
}

.certification-form-group input:focus,
.certification-form-group select:focus,
.certification-form-group textarea:focus {
  border-color: #0a74c9;
  border-color: var(--secondary-blue, #0a74c9);
  box-shadow: 0 0 0 3px rgba(10, 116, 201, 0.12);
}

.certification-form-group input:disabled,
.certification-form-group select:disabled,
.certification-form-group textarea:disabled {
  cursor: not-allowed;
  background: #eef2f5;
  color: #788895;
}

/* =========================================================
   NEVER-EXPIRES CHECKBOX
   Ready for the next certification form update
========================================================= */

.certification-expiry-option {
  grid-column: 1 / -1;

  padding: 13px 15px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 1px solid #dce6ed;

  border: 1px solid var(--border, #dce6ed);
  border-radius: 9px;

  background: #f8fbfd;
}

.certification-expiry-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;

  accent-color: #00a676;

  accent-color: var(--accent-green, #00a676);
}

.certification-expiry-option label {
  color: #163247;
  color: var(--text-dark, #163247);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   MODAL ACTION BUTTONS
========================================================= */

.certification-modal-actions {
  margin-top: clamp(22px, 3vh, 32px);

  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.certification-cancel-button,
.certification-save-button {
  min-height: 47px;
  padding: 10px 22px;

  border-radius: 9px;

  font-size: 0.95rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.certification-cancel-button {
  border: 1px solid #dce6ed;
  border: 1px solid var(--border, #dce6ed);
  background: #ffffff;
  color: #004a7c;
  color: var(--primary-blue, #004a7c);
}

.certification-cancel-button:hover {
  background: #f2f6f9;
  transform: translateY(-1px);
}

.certification-save-button {
  border: 1px solid #00a676;
  border: 1px solid var(--accent-green, #00a676);
  background: #0a74c9;
  background: var(--secondary-blue, #0a74c9);
  color: #ffffff;
}

.certification-save-button:hover {
  border-color: #004a7c;
  border-color: var(--primary-blue, #004a7c);
  background: #004a7c;
  background: var(--primary-blue, #004a7c);
  transform: translateY(-1px);
}

.certification-save-button:disabled,
.certification-cancel-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

/* =========================================================
   LARGE DESKTOP SCREENS
========================================================= */

@media (min-width: 1500px) and (min-height: 820px) {
  .professional-certifications-page {
    padding:
      22px
      clamp(60px, 5vw, 100px)
      36px;
  }

  .professional-certifications-page > .professional-page-nav,
  .certifications-page-header,
  .certifications-grid,
  .certification-message,
  .certifications-empty-state {
    max-width: 1700px;
  }

  .certifications-page-header h1 {
    font-size: clamp(3.3rem, 3.4vw, 4.4rem);
  }

  .certifications-page-description {
    font-size: 1.15rem;
  }

  .certifications-grid > .certification-card:only-child {
    width: min(100%, 980px);
  }

  .certification-card {
    padding: 28px 32px;
  }

  .certification-card h3 {
    font-size: 1.65rem;
  }

  .certification-details dt {
    font-size: 13px;
  }

  .certification-details dd {
    font-size: 15px;
  }

  .certification-edit-button,
  .certification-delete-button {
    min-height: 50px;
    font-size: 1rem;
  }
}

/* =========================================================
   SHORT LAPTOP SCREENS
========================================================= */

@media (min-width: 900px) and (max-height: 820px) {
  .professional-certifications-page {
    padding:
      9px
      clamp(26px, 3.2vw, 52px)
      14px;
  }

  .professional-certifications-page > .professional-page-nav {
    margin-bottom: 6px;
  }

  .certifications-page-header {
    margin-bottom: 12px;
    gap: 18px;
  }

  .certifications-page-header .account-label {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .certifications-page-header h1 {
    font-size: clamp(2rem, 3vw, 2.85rem);
  }

  .certifications-page-description {
    margin-top: 6px;
    font-size: 0.93rem;
    line-height: 1.4;
  }

  .add-certification-button {
    min-width: 190px;
    min-height: 43px;
    padding: 8px 17px;
  }

  .certifications-grid {
    gap: 16px;
  }

  .certifications-grid > .certification-card:only-child {
  width: 100%;
  max-width: 800px;
  justify-self: center;
}

  .certification-card {
    padding: 15px 18px;
  }

  .certification-card-top {
    margin-bottom: 10px;
  }

  .certification-code {
    margin-bottom: 6px;
    padding: 4px 9px;
  }

  .certification-card h3 {
    font-size: 1.2rem;
  }

  .certification-details {
    gap: 8px 18px;
  }

  .certification-details dt {
    margin-bottom: 3px;
    font-size: 11px;
  }

  .certification-details dd {
    font-size: 13px;
  }

  .verification-status {
    padding: 5px 9px;
    font-size: 11px;
  }

  .certification-card-actions {
  margin-top: auto;
  padding-top: 12px;
}

  .certification-edit-button,
  .certification-delete-button {
    min-height: 38px;
    padding: 7px 14px;
  }
}

.certification-status {
  min-height: 36px;
  padding: 8px 13px;
  font-size: 0.82rem;
}

.certification-status svg {
  font-size: 1rem;
}

/* =========================================================
   TABLET SCREENS
========================================================= */

@media (max-width: 900px) {
  .professional-certifications-page {
    padding:
      18px
      clamp(18px, 4vw, 34px)
      36px;
  }

  .certifications-page-header {
    flex-direction: column;
  }

  .add-certification-button {
    width: 100%;
    max-width: 320px;
  }

  .certifications-grid {
    grid-template-columns: 1fr;
  }

  .certifications-grid > .certification-card:only-child {
    max-width: none;
  }
}

/* =========================================================
   MOBILE SCREENS
========================================================= */

@media (max-width: 600px) {
  .professional-certifications-page {
    padding: 16px 14px 32px;
  }

  .professional-certifications-page > .professional-page-nav {
    margin-bottom: 16px;
  }

  .certifications-page-header {
    margin-bottom: 22px;
  }

  .certifications-page-header h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .add-certification-button {
    width: 100%;
    max-width: none;
  }

  .certification-card {
    padding: 20px 17px;
  }

  .certification-card-top {
    flex-direction: column;
  }

  .certification-details {
    grid-template-columns: 1fr;
  }

  .certification-card-actions {
    flex-direction: column;
  }

  .certification-edit-button,
  .certification-delete-button {
    width: 100%;
  }

  .certification-modal-overlay {
    padding: 10px;
  }

  .certification-modal {
    max-height: calc(100vh - 20px);
    border-radius: 14px;
  }

  .certification-form-grid {
    grid-template-columns: 1fr;
  }

  .certification-form-full,
  .certification-expiry-option {
    grid-column: auto;
  }

  .certification-modal-actions {
    flex-direction: column-reverse;
  }

  .certification-cancel-button,
  .certification-save-button {
    width: 100%;
  }
}

.certification-title-group{
    display:flex;
    align-items:center;
    gap:14px;
}

.certification-icon{
    width:52px;
    height:52px;

    border-radius:14px;

    background:#eef6ff;

    color:#0a74c9;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

    flex-shrink:0;
}

/* ==========================================
   CERTIFICATION SUMMARY
========================================== */



.summary-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(0,55,95,.12);

}



.summary-card h2{

    margin:0;

    color:#004a7c;

    font-size:2rem;

    font-weight:800;

}

/* 14-inch laptops */

@media (max-width:1400px){

.certification-summary-grid{

grid-template-columns:repeat(4,1fr);

gap:14px;

}

.summary-card{

padding:18px;

}

.summary-card h2{

font-size:1.7rem;

}

}

/* tablets */

@media (max-width:900px){

.certification-summary-grid{

grid-template-columns:repeat(2,1fr);

}

}

/* phones */

@media (max-width:600px){

.certification-summary-grid{

grid-template-columns:1fr;

}

}

/* =========================================================
   CERTIFICATION SUMMARY CARDS
========================================================= */

.certification-summary-grid {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto 24px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.summary-card {
  min-width: 0;
  min-height: 130px;
  padding: 1.1rem;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border: 1px solid #dce6ed;

  border: 1px solid var(--border, #dce6ed);
  border-radius: 14px;

  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 55, 95, 0.06);
}

.summary-label {
  color: #61758a;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.summary-card h2 {
  margin: 0.55rem 0 0;

  color: #004a7c;

  color: var(--primary-blue, #004a7c);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}

.summary-card small {
  display: block;
  margin-top: 0.65rem;

  color: #71869a;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* =========================================================
   CERTIFICATION SEARCH, FILTERS AND SORTING
========================================================= */

.certification-toolbar {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto 24px;
  padding: 1rem;

  display: grid;
  grid-template-columns:
    minmax(260px, 1.4fr)
    minmax(420px, 2fr)
    minmax(150px, auto);
  align-items: end;
  grid-gap: 1rem;
  gap: 1rem;

  border: 1px solid #dce6ed;

  border: 1px solid var(--border, #dce6ed);
  border-radius: 14px;

  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 55, 95, 0.05);
}

.certification-search-field {
  min-width: 0;
}

.certification-search-field input {
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 0.95rem;

  border: 1px solid #cfdae4;
  border-radius: 9px;

  background: #ffffff;
  color: #163247;

  font: inherit;
  outline: none;
}

.certification-search-field input:focus {
  border-color: #0a74c9;
  border-color: var(--secondary-blue, #0a74c9);
  box-shadow: 0 0 0 3px rgba(10, 116, 201, 0.12);
}

.certification-search-field input::placeholder {
  color: #7a8c9d;
}

.certification-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.filter-chip {
  min-height: 38px;
  padding: 0.5rem 0.85rem;

  border: 1px solid #d3dee7;
  border-radius: 999px;

  background: #ffffff;
  color: #52677c;

  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.filter-chip:hover {
  border-color: #8cb7d8;
  background: #eef7ff;
  color: #075f9f;
}

.filter-chip.active {
  border-color: #0a74c9;
  border-color: var(--secondary-blue, #0a74c9);
  background: #0a74c9;
  background: var(--secondary-blue, #0a74c9);
  color: #ffffff;
}

.certification-sort-field {
  display: grid;
  grid-gap: 0.4rem;
  gap: 0.4rem;
}

.certification-sort-field label {
  color: #61758a;
  font-size: 0.75rem;
  font-weight: 800;
}

.certification-sort-field select {
  min-width: 160px;
  min-height: 46px;
  padding: 0.65rem 0.8rem;

  border: 1px solid #cfdae4;
  border-radius: 9px;

  background: #ffffff;
  color: #163247;

  font: inherit;
  font-size: 0.88rem;
  outline: none;
}

.certification-sort-field select:focus {
  border-color: #0a74c9;
  border-color: var(--secondary-blue, #0a74c9);
  box-shadow: 0 0 0 3px rgba(10, 116, 201, 0.12);
}

/* =========================================================
   SMALL LAPTOPS — KEEP FOUR SUMMARY CARDS
========================================================= */

@media (min-width: 1024px) and (max-width: 1366px) {
  .certification-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .summary-card {
    min-height: 112px;
    padding: 0.85rem;
    border-radius: 11px;
  }

  .summary-label {
    font-size: 0.68rem;
  }

  .summary-card h2 {
    margin-top: 0.4rem;
    font-size: 1.5rem;
  }

  .summary-card small {
    margin-top: 0.45rem;
    font-size: 0.67rem;
  }

  .certification-toolbar {
    grid-template-columns:
      minmax(230px, 1fr)
      minmax(360px, 1.7fr)
      145px;

    gap: 0.7rem;
    padding: 0.8rem;
  }

  .filter-chip {
    min-height: 34px;
    padding: 0.4rem 0.65rem;
    font-size: 0.68rem;
  }

  .certification-search-field input,
  .certification-sort-field select {
    min-height: 42px;
    font-size: 0.8rem;
  }
}

/* =========================================================
   TABLETS
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .certification-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .certification-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .certification-search-field {
    grid-column: 1 / -1;
  }

  .certification-filter-group {
    align-self: center;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .certification-summary-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .summary-card {
    min-height: auto;
    padding: 0.9rem;
  }

  .certification-toolbar {
    grid-template-columns: 1fr;
    padding: 0.85rem;
  }

  .certification-filter-group {
    gap: 0.45rem;
  }

  .filter-chip {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .certification-sort-field select {
    width: 100%;
  }
}

/* ==========================================
   Certification Child Header
========================================== */

.credential-child-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 22px;
}

.credential-child-header h2 {
  margin: 0;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.2;
}

.credential-child-header p {
  max-width: 950px;
  margin: 10px 0 0;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 1rem;
  line-height: 1.55;
}

.credential-child-action-button {
  flex-shrink: 0;

  min-height: 52px;
  padding: 12px 24px;

  border: 0;
  border-radius: 10px;

  background: #00a676;

  background: var(--accent-green, #00a676);
  color: #ffffff;

  font: inherit;
  font-size: 1rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.credential-child-action-button:hover {
  background: #008f66;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(0, 166, 118, 0.2);
}

@media (max-width: 760px) {
  .credential-child-header {
    flex-direction: column;
    gap: 18px;
  }

  .credential-child-action-button {
    width: 100%;
  }
}
/* ==========================================
   Professional Document Section
========================================== */

.professional-document-section {
  margin-top: 42px;
}

.professional-document-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}

.professional-document-section-header h2 {
  margin: 0;
  color: #082f57;
  color: var(--primary-blue, #082f57);
  font-size: 1.8rem;
}

.professional-document-section-header p {
  margin-top: 10px;
  max-width: 720px;
  color: #597087;
  color: var(--text-muted, #597087);
  line-height: 1.6;
}

.professional-document-section-badge {
  padding: 10px 18px;
  border-radius: 999px;
  background: #e7f1fb;
  color: #0b63a8;
  font-weight: 700;
  white-space: nowrap;
}

.professional-document-section-content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 768px) {
  .professional-document-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.identity-document-help {
  margin-top: 8px;
  color: #597087;
  color: var(--text-muted, #597087);
  font-size: 0.85rem;
  line-height: 1.4;
}
/* ==========================================
   Professional Documents Page
========================================== */

.professional-documents {
  width: 100%;
  min-height: 100vh;

  padding:
    clamp(22px, 3vw, 40px)
    clamp(20px, 4vw, 60px)
    clamp(36px, 5vw, 64px);

  background: #f3f7fa;

  background: var(--background, #f3f7fa);
  box-sizing: border-box;
}

.professional-documents *,
.professional-documents *::before,
.professional-documents *::after {
  box-sizing: border-box;
}

.professional-documents .professional-page-nav {
  margin-bottom: 24px;
}

/* ==========================================
   Page Header
========================================== */

.documents-page-header {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 28px;
}

.documents-page-header .account-label {
  margin: 0 0 10px;

  color: #00a676;

  color: var(--accent-green, #00a676);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.documents-page-header h1 {
  margin: 0;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: clamp(2.25rem, 4vw, 3.8rem);
  line-height: 1.05;
}

.documents-page-description {
  max-width: 900px;
  margin: 14px 0 0;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: clamp(1rem, 1vw + 0.3rem, 1.18rem);
  line-height: 1.6;
}

/* ==========================================
   Summary Cards
========================================== */

.documents-summary-grid {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 22px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.documents-summary-card {
  min-width: 0;
  min-height: 120px;
  padding: 20px 22px;

  border: 1px solid #d8e4ee;
  border-radius: 15px;

  background: #ffffff;
  box-shadow: 0 6px 16px rgba(8, 47, 87, 0.05);
}

.documents-summary-card span {
  display: block;

  color: #597087;

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.documents-summary-card strong {
  display: block;
  margin-top: 7px;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.documents-summary-card small {
  display: block;
  margin-top: 8px;

  color: #71869a;

  font-size: 0.76rem;
  line-height: 1.35;
}

/* ==========================================
   Completion Progress
========================================== */

.documents-progress-card {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 26px;
  padding: 22px 26px;

  border: 1px solid #d8e4ee;
  border-radius: 16px;

  background: #ffffff;
  box-shadow: 0 5px 15px rgba(8, 47, 87, 0.04);
}

.documents-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 14px;
}

.documents-progress-header h2 {
  margin: 0;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: 1.35rem;
  line-height: 1.25;
}

.documents-progress-header > div p {
  margin: 5px 0 0;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 0.85rem;
  line-height: 1.4;
}

.documents-progress-header > strong {
  flex-shrink: 0;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: 1rem;
  font-weight: 800;
}

.documents-progress-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;

  border-radius: 999px;

  background: #e7edf3;
}

.documents-progress-fill {
  height: 100%;

  border-radius: inherit;

  background: #0873bd;

  background: var(--secondary-blue, #0873bd);

  transition: width 0.3s ease;
}

/* ==========================================
   Document Page Content
========================================== */

.documents-content {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;

  display: grid;
  grid-gap: 24px;
  gap: 24px;
}

/* ==========================================
   Required and Optional Group Cards
========================================== */

.documents-group-card {
  padding: clamp(20px, 2.5vw, 28px);

  border: 1px solid #d8e4ee;
  border-radius: 19px;

  box-shadow: 0 8px 20px rgba(8, 47, 87, 0.05);
}

.documents-group-card-required {
  border: 1px solid #ffd8a8;
  background: #fff7ed;
}

.documents-group-card-optional {
  border: 1px solid #c9def5;
  background: #f3f8fe;
}

.documents-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 18px;
  padding-bottom: 15px;

  border-bottom: 1px solid rgba(89, 112, 135, 0.16);
}

.documents-group-header .account-label {
  margin: 0 0 6px;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.documents-group-card-required
.documents-group-header
.account-label {
    color: #c56a00;
}

.documents-group-card-optional
.documents-group-header
.account-label {
    color: #0873bd;
}

.documents-group-header h2 {
  margin: 0;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.2;
}

.documents-group-header p {
  max-width: 780px;
  margin: 6px 0 0;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 0.92rem;
  line-height: 1.45;
}

.documents-group-status {
  flex-shrink: 0;

  padding: 8px 13px;

  border-radius: 999px;

  background: #ffe8cc;
    color: #b95f00;

  font-size: 0.78rem;
  font-weight: 800;

  box-shadow: 0 3px 10px rgba(8, 47, 87, 0.05);
}

.documents-group-card-optional
  .documents-group-status {
  background: #dceeff;
    color: #005fa3;
}

.documents-group-sections {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

/* ==========================================
   Professional Document Section
========================================== */

.documents-group-sections
  .professional-document-section {
  margin-top: 0;
  padding: 18px 20px;

  border: 1px solid rgba(205, 218, 229, 0.95);
  border-radius: 14px;

  background: #ffffff;
}

.professional-document-section {
  margin-top: 28px;
}

.professional-document-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 14px;
}

.professional-document-section-header h2 {
  margin: 0;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.2;
}

.professional-document-section-header p {
  max-width: 800px;
  margin: 5px 0 0;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 0.9rem;
  line-height: 1.45;
}

.professional-document-section-badge {
  flex-shrink: 0;

  padding: 7px 12px;

  border-radius: 999px;

  background: #e7f1fb;
  color: #0b63a8;

  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.professional-document-section-badge-complete {
  background: #e4f7ed;
  color: #087657;
}

.professional-document-section-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================
   Document Upload Panel
========================================== */

.document-panel-list {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.document-upload-panel {
  padding: 16px 18px;

  border: 1px solid #d8e4ee;
  border-radius: 12px;

  background: #ffffff;
  box-shadow: 0 3px 10px rgba(8, 47, 87, 0.035);
}

.document-upload-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 10px;
}

.document-upload-panel-header h3 {
  margin: 0;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: 1.02rem;
  line-height: 1.25;
}

.document-upload-panel-header p {
  max-width: 760px;
  margin: 3px 0 0;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 0.86rem;
  line-height: 1.4;
}

/* ==========================================
   Requirement Badges
========================================== */

.document-requirement-badge {
  flex-shrink: 0;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 800;
}

.document-requirement-badge.required {
  color: #0b63a8;
  background: #e7f1fb;
}

.document-requirement-badge.optional {
  color: #66788a;
  background: #edf1f5;
}

.document-requirement-badge.completed {
  color: #087657;
  background: #e4f7ed;
}

/* ==========================================
   Shared Dropdown and Upload Row
========================================== */

.document-dropdown-upload {
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr)
    minmax(240px, 1fr)
    auto;
  align-items: end;
  grid-gap: 14px;
  gap: 14px;
}

.document-file-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.document-file-field label {
  color: #082f57;
  color: var(--primary-blue, #082f57);
  font-size: 0.88rem;
  font-weight: 800;
}

.document-file-field input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;

  border: 1px solid #cddae5;
  border-radius: 9px;

  background: #ffffff;
  color: #163247;

  font: inherit;
  font-size: 0.85rem;
}

.document-dropdown-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.document-dropdown-field label {
  color: #082f57;
  color: var(--primary-blue, #082f57);

  font-size: 0.88rem;
  font-weight: 800;
}

.document-dropdown-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;

  border: 1px solid #cddae5;
  border-radius: 9px;

  background: #ffffff;
  color: #163247;

  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.document-dropdown-field select:focus {
  border-color: #0873bd;
  border-color: var(--secondary-blue, #0873bd);

  box-shadow: 0 0 0 3px rgba(8, 115, 189, 0.11);
}

.document-dropdown-upload
  .document-upload-button {
  min-width: 190px;
  min-height: 44px;
}

/* ==========================================
   Upload Button
========================================== */

.document-upload-button {
  min-height: 44px;
  padding: 0 20px;

  border: 0;
  border-radius: 9px;

  background: #00a676;

  background: var(--accent-green, #00a676);
  color: #ffffff;

  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.document-upload-button:hover:not(:disabled) {
  background: #008f66;
  transform: translateY(-1px);

  box-shadow: 0 6px 14px rgba(0, 166, 118, 0.18);
}

.document-upload-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
  box-shadow: none;
}

/* ==========================================
   Upload Helper Text
========================================== */

.document-upload-help,
.identity-document-help {
  margin: 8px 0 0;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 0.78rem;
  line-height: 1.4;
}

/* ==========================================
   Generic Upload Control
========================================== */

.document-upload-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  min-height: 60px;
  padding: 11px 14px;

  border: 1px solid #e0e8ef;
  border-radius: 9px;

  background: #f8fbfd;
}

.document-upload-control > div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.document-upload-control strong {
  color: #082f57;
  color: var(--primary-blue, #082f57);

  font-size: 0.9rem;
}

.document-upload-control small {
  color: #597087;
  color: var(--text-muted, #597087);

  font-size: 0.76rem;
  line-height: 1.3;
}

/* ==========================================
   Uploaded Documents Area
========================================== */

.document-uploaded-area {
  margin-top: 10px;
  padding-top: 10px;

  border-top: 1px solid #e5ebf1;
}

.document-uploaded-area h4 {
  margin: 0 0 7px;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: 0.86rem;
  line-height: 1.3;
}

.documents-empty-text {
  margin: 0;

  color: #8191a0;

  font-size: 0.82rem;
  line-height: 1.4;
}

.uploaded-document-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.uploaded-document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 9px 12px;

  border: 1px solid #dce6ee;
  border-radius: 8px;

  background: #ffffff;
}

.uploaded-document-details {
  display: grid;
  min-width: 0;
  grid-gap: 2px;
  gap: 2px;
}

.uploaded-document-details strong {
  overflow: hidden;

  color: #082f57;

  color: var(--primary-blue, #082f57);

  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uploaded-document-details span,
.uploaded-document-details small {
  overflow: hidden;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uploaded-document-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.document-pending-badge {
  padding: 6px 9px;

  border-radius: 999px;

  color: #9b6500;
  background: #fff4d8;

  font-size: 0.68rem;
  font-weight: 800;
}

.document-remove-button {
  padding: 6px 9px;

  border: 1px solid #efcaca;
  border-radius: 7px;

  color: #b42318;
  background: #fff5f4;

  font-size: 0.74rem;
  font-weight: 700;

  cursor: pointer;
}

.document-remove-button:hover {
  background: #fde8e6;
}

/* ==========================================
   Legacy Identity Selector Support
========================================== */

.identity-document-selector {
  display: grid;
  grid-template-columns:
    minmax(160px, 0.65fr)
    minmax(260px, 1.5fr)
    auto;
  align-items: end;
  grid-gap: 12px;
  gap: 12px;

  padding: 14px 16px;

  border: 1px solid #d9e5ef;
  border-radius: 11px;

  background: #ffffff;
}

.identity-document-selector label {
  color: #082f57;
  color: var(--primary-blue, #082f57);

  font-size: 0.88rem;
  font-weight: 800;
}

.identity-document-selector select {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;

  border: 1px solid #cddae5;
  border-radius: 9px;

  background: #ffffff;
  color: #163247;

  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.identity-document-selector select:focus {
  border-color: #0873bd;
  border-color: var(--secondary-blue, #0873bd);
  box-shadow: 0 0 0 3px rgba(8, 115, 189, 0.11);
}

/* ==========================================
   Additional Document Input
========================================== */

.additional-document-control {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  grid-gap: 14px;
  gap: 14px;
}

.additional-document-name-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.additional-document-name-field label {
  color: #082f57;
  color: var(--primary-blue, #082f57);

  font-size: 0.88rem;
  font-weight: 800;
}

.additional-document-name-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;

  border: 1px solid #cddae5;
  border-radius: 9px;

  background: #ffffff;
  color: #163247;

  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.additional-document-name-field input:focus {
  border-color: #0873bd;
  border-color: var(--secondary-blue, #0873bd);
  box-shadow: 0 0 0 3px rgba(8, 115, 189, 0.11);
}

/* ==========================================
   Uploaded Identity Legacy Support
========================================== */

.uploaded-identity-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}

.uploaded-identity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 10px 12px;

  border: 1px solid #d9e5ef;
  border-radius: 8px;

  background: #ffffff;
}

.uploaded-identity-item strong {
  color: #082f57;
  color: var(--primary-blue, #082f57);

  font-size: 0.86rem;
}

.uploaded-identity-item span {
  padding: 6px 9px;

  border-radius: 999px;

  background: #fff4d8;
  color: #9b6500;

  font-size: 0.68rem;
  font-weight: 800;
}

/* ==========================================
   Medium Screens
========================================== */

@media (min-width: 1024px) and (max-width: 1366px) {
  .professional-documents {
    padding:
      24px
      30px
      46px;
  }

  .documents-summary-grid {
    gap: 12px;
  }

  .documents-summary-card {
    min-height: 108px;
    padding: 16px 18px;
  }

  .documents-summary-card span {
    font-size: 0.8rem;
  }

  .documents-summary-card strong {
    font-size: 1.55rem;
  }

  .documents-summary-card small {
    font-size: 0.7rem;
  }

  .documents-progress-card {
    padding: 18px 22px;
  }

  .documents-group-card {
    padding: 18px;
  }

  .documents-group-sections
    .professional-document-section {
    padding: 15px 17px;
  }

  .professional-document-section-header h2 {
    font-size: 1.35rem;
  }
}

/* ==========================================
   Tablets
========================================== */

@media (max-width: 992px) {
  .documents-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .identity-document-selector {
    grid-template-columns: 1fr 1.5fr;
  }

  .identity-document-selector
    .document-upload-button {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 760px) {
  .professional-documents {
    padding: 18px 14px 36px;
  }



  .documents-page-header h1 {
    font-size: 2.1rem;
  }

  .documents-page-description {
    font-size: 0.95rem;
  }

  .documents-summary-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .documents-summary-card {
    min-height: auto;
    padding: 15px 17px;
  }

  .documents-progress-card {
    padding: 17px;
  }

  .documents-progress-header {
    align-items: flex-start;
  }

  .documents-group-card {
    padding: 16px 13px;
    border-radius: 15px;
  }

  .documents-group-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .documents-group-status {
    align-self: flex-start;
  }

  .documents-group-sections
    .professional-document-section {
    padding: 14px;
  }

  .professional-document-section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .professional-document-section-badge {
    align-self: flex-start;
  }

  .document-upload-panel {
    padding: 14px;
  }

  .document-upload-panel-header,
  .document-upload-control,
  .uploaded-document-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-dropdown-upload,
  .additional-document-control,
  .identity-document-selector {
    grid-template-columns: 1fr;
  }

  .document-dropdown-upload
    .document-upload-button,
  .additional-document-control
    .document-upload-button,
  .identity-document-selector
    .document-upload-button,
  .document-upload-control
    .document-upload-button {
    width: 100%;
    min-width: 0;
  }

  .uploaded-document-status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .uploaded-document-details {
    width: 100%;
  }

  .uploaded-document-details strong,
  .uploaded-document-details span,
  .uploaded-document-details small {
    white-space: normal;
  }
}

.credential-child-description {
  margin-bottom: 26px;
}

.credential-child-description p {
  margin: 0;

  max-width: 900px;

  color: #597087;

  color: var(--text-muted, #597087);

  font-size: 1rem;
  line-height: 1.6;
}

.documents-group-title {
  margin: 38px 0 20px;

  font-size: 1.45rem;
  font-weight: 700;

  color: var(--primary-blue);
}

.documents-group-title.optional {
  margin-top: 48px;

  color: #3b6fb6;
}

/* ==========================================
   Current Document Status and Actions
========================================== */

.document-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 11px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.document-status-badge svg {
  flex-shrink: 0;
  font-size:13px;
}

.document-status-badge.pending {
  border-color: #f2d48a;
  background: #fff6da;
  color: #8a5b00;
}

.document-status-badge.verified {
  border-color: #b9e5cd;
  background: #e7f7ee;
  color: #087657;
}

.document-status-badge.rejected,
.document-status-badge.expired {
  border-color: #efc5c1;
  background: #fff0ef;
  color: #b42318;
}

.document-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.document-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-width: auto;
  height: 36px;
  padding: 0 11px;

  border: 1px solid transparent;
  border-radius: 8px;

  background: #fff;

  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  transition: all .2s ease;
}

.document-action-button svg {
  flex-shrink: 0;
  font-size:14px;
}

.document-action-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.document-action-button:focus-visible {
  outline: 3px solid rgba(8, 115, 189, 0.18);
  outline-offset: 2px;
}

.document-view-button {
  border-color: #0b63b6;
  color: #0b63b6;
}

.document-view-button:hover:not(:disabled) {
  background: #0b63b6;
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(11, 99, 182, 0.2);
}

.document-download-button {
  border-color: #1769aa;
  color: #1769aa;
}

.document-download-button:hover:not(:disabled) {
  background: #1769aa;
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(23, 105, 170, 0.2);
}

.document-replace-button {
  border-color: #078261;
  color: #078261;
}

.document-replace-button:hover:not(:disabled) {
  background: #078261;
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(7, 130, 97, 0.2);
}

.document-delete-button {
  border-color: #d8342a;
  color: #d8342a;
}

.document-delete-button:hover:not(:disabled) {
  background: #d8342a;
  color: #ffffff;
  box-shadow: 0 5px 14px rgba(216, 52, 42, 0.2);
}

.document-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Rotate only while the Replace action is processing. */
.document-replace-button:disabled svg {
  animation: document-action-spin 0.8s linear infinite;
}

@keyframes document-action-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================
   Current Responsive Document Rows
========================================== */

@media (max-width: 1100px) {
  .uploaded-document-item {
    align-items: flex-start;
  }

  .uploaded-document-status {
    align-items: flex-end;
    flex-direction: column;
  }

  .document-actions {
    justify-content: flex-end;
  }

  .document-action-button {
    min-width: 102px;
  }
}

@media (max-width: 760px) {
  .uploaded-document-status {
    width: 100%;
    align-items: flex-start;
  }

  .document-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .document-action-button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .document-actions {
    grid-template-columns: 1fr;
  }
}
.credential-manager-page {
  width: 100%;
  min-height: 100vh;
  padding:
    clamp(24px, 3vw, 44px)
    clamp(24px, 4vw, 64px)
    clamp(44px, 5vw, 72px);

  background: #f5f8fb;

  background: var(--background, #f5f8fb);
}

.credential-page-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-top: -6px;
}

.credential-page-actions .professional-page-nav {
  margin: 0;
}

.credential-header {
  max-width: 1500px;
  margin: 0 auto 32px;
}

.credential-header .account-label {
  margin: 0 0 10px;
  color: #00a676;
  color: var(--accent-green, #00a676);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.credential-header h1 {
  margin: 0;
  color: #004a7c;
  color: var(--primary-blue, #004a7c);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.08;
}

.credential-description {
  max-width: 820px;
  margin: 16px 0 0;
  color: #6b7c93;
  color: var(--text-muted, #6b7c93);
  font-size: 1.05rem;
  line-height: 1.7;
}

.credential-tabs {
  max-width: 1500px;
  margin: 0 auto 28px;
  padding: 8px;

  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;

  border: 1px solid #dce6ed;

  border: 1px solid var(--border, #dce6ed);
  border-radius: 14px;
  background: #ffffff;
}

.credential-tabs a {
  min-height: 44px;
  padding: 11px 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  border-radius: 9px;
  color: #6b7c93;
  color: var(--text-muted, #6b7c93);

  font-weight: 700;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.credential-tabs a:hover {
  background: #edf5fb;
  color: #004a7c;
  color: var(--primary-blue, #004a7c);
}

.credential-tabs a.active {
  background: #004a7c;
  background: var(--primary-blue, #004a7c);
  color: #ffffff;
}

.credential-content {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .credential-manager-page {
    padding: 20px 16px 40px;
  }

  .credential-tabs {
    justify-content: flex-start;
  }
}
.verification-page {
  padding: 0;
}

.verification-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 28px;
  padding: 24px 28px;

  background: #ffffff;

  border-radius: 14px;

  border: 1px solid #dbe5ee;
}

.verification-summary-card h2 {
  margin: 0 0 8px;
  color: #082f57;
}

.verification-summary-card p {
  margin: 0;
  color: #597087;
}

.verification-overall {
  padding: 8px 18px;

  border-radius: 999px;

  font-weight: 700;
}

.verification-overall.pending {
  background: #fff3cd;
  color: #b56a00;
}

.verification-list {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.verification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 18px 22px;

  background: white;

  border-radius: 12px;

  border: 1px solid #dbe5ee;
}

.verification-badge {
  padding: 7px 16px;

  border-radius: 999px;

  font-size: .9rem;

  font-weight: 700;
}

.verification-badge.verified {
  background: #dff6e7;
  color: #148447;
}

.verification-badge.pending {
  background: #fff3cd;
  color: #b56a00;
}

.verification-badge.required {
  background: #fde8e8;
  color: #c62828;
}

.verification-badge.optional {
  background: #edf4ff;
  color: #3b6fb6;
}

.verification-page-message {
  padding: 18px 20px;
  border: 1px solid #d6e3ee;
  border-radius: 12px;
  background: #ffffff;
  color: #27445f;
}

.verification-page-message-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  border-color: #efc5c1;
  background: #fff3f2;
  color: #a92720;
}

.verification-page-message button {
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.verification-overall,
.verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.verification-overall svg,
.verification-badge svg {
  flex-shrink: 0;
}

.verification-progress-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-top: 18px;

  color: #60758a;
  font-size: 0.9rem;
}

.verification-progress-summary strong {
  color: #074f7d;
}

.verification-progress-bar {
  height: 9px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5edf4;
}

.verification-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: #0a8f70;
  transition: width 0.3s ease;
}

.verification-item-details {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verification-item-details small {
  color: #6c8094;
  font-size: 0.82rem;
}

.verification-overall.required,
.verification-badge.required {
  background: #fde8e6;
  color: #c42d25;
}

.verification-overall.expired,
.verification-badge.expired {
  background: #f4e8df;
  color: #9f4f18;
}

.verification-overall.rejected,
.verification-badge.rejected {
  background: #fde8e6;
  color: #c42d25;
}
/* =====================================================
   Availability Page
===================================================== */

.availability-page {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 42px);
}

/* =====================================================
   Navigation
===================================================== */

.availability-page-nav {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 22px;
}

/* =====================================================
   Header
===================================================== */

.availability-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 34px;
}

.availability-header h1 {
    margin: 6px 0 12px;
    color: #0b355f;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.15;
}

.availability-header p {
    max-width: 760px;
    margin: 0;
    color: #5d6f80;
    line-height: 1.7;
    font-size: 1.02rem;
}

/* =====================================================
   Summary Card
===================================================== */

.availability-status-summary {
    min-width: 250px;

    padding: 22px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #0b67b2,
        #0d8de2
    );

    color: white;

    box-shadow:
        0 14px 35px rgba(11,103,178,.18);
}

.availability-status-summary span {
    display: block;
    opacity: .85;
    font-size: .9rem;
    margin-bottom: 6px;
}

.availability-status-summary strong {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.availability-status-summary small {
    opacity: .9;
    line-height: 1.5;
}

/* =====================================================
   Form
===================================================== */

.availability-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* =====================================================
   Cards
===================================================== */

.availability-card {
    background: #ffffff;

    border: 1px solid #e3edf5;
    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 8px 24px rgba(20,45,75,.05);

    transition:
        box-shadow .25s ease,
        transform .25s ease;
}

.availability-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 34px rgba(20,45,75,.08);

}

/* =====================================================
   Card Header
===================================================== */

.availability-card-header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 26px;
}

.availability-card-header > div {

    display: flex;
    align-items: center;
    gap: 20px;
}

.availability-step {

    width: 56px;
    height: 56px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background: #eef7fd;

    color: #0b67b2;

    font-size: 1.25rem;
    font-weight: 700;

    flex-shrink: 0;
}

.availability-card-header h2 {

    margin: 0 0 6px;

    color: #12385b;

    font-size: 1.4rem;
}

.availability-card-header p {

    margin: 0;

    color: #6b7b8c;
    line-height: 1.6;
}

/* =====================================================
   Form Grid
===================================================== */

.availability-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    grid-gap: 24px 28px;

    gap: 24px 28px;
}

.availability-form-grid-three {

    grid-template-columns:
        repeat(3, minmax(0,1fr));
}

/* =====================================================
   Fields
===================================================== */

.availability-field {

    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}

.availability-field-full {

    grid-column: 1 / -1;
}

.availability-field label {

    color: #234563;

    font-size: .94rem;
    font-weight: 600;
}

.availability-field small {

    color: #7d8d9c;

    line-height: 1.45;
}

/* =====================================================
   Inputs
===================================================== */

.availability-field input,
.availability-field select,
.availability-field textarea {

    width: 100%;

    min-height: 52px;

    padding: 12px 16px;

    border: 1px solid #d7e2eb;
    border-radius: 10px;

    background: #fff;

    font-size: .96rem;

    transition:
        border-color .2s,
        box-shadow .2s;
}

.availability-field textarea {

    min-height: 130px;

    resize: vertical;
}

.availability-field input:focus,
.availability-field select:focus,
.availability-field textarea:focus {

    outline: none;

    border-color: #0b67b2;

    box-shadow:
        0 0 0 4px rgba(11,103,178,.10);
}

/* =====================================================
   Required Marker
===================================================== */

.availability-field label.required::after {

    content: " *";

    color: #d92d20;
}

/* =====================================================
   Section Divider
===================================================== */

.availability-divider {

    height: 1px;

    background: #edf3f8;

    margin: 12px 0;
}

/* =====================================================
   Employment & Shift Choice Cards
===================================================== */

.availability-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    grid-gap: 18px;
    gap: 18px;
    margin-bottom: 30px;
}

.availability-choice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-height: 95px;

    padding: 18px;

    border: 2px solid #dfe9f2;
    border-radius: 14px;

    background: #ffffff;

    cursor: pointer;

    transition:
        all .22s ease;
}

.availability-choice:hover {

    border-color: #0b67b2;

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(11,103,178,.12);
}

.availability-choice.selected {

    background: #eef8ff;

    border-color: #0b67b2;

    box-shadow:
        0 8px 18px rgba(11,103,178,.12);
}

.availability-choice span {

    color: #12385b;

    font-size: 1rem;
    font-weight: 700;
}

.availability-choice small {

    margin-top: 6px;

    color: #6f8091;
}

/* =====================================================
   Province Selection
===================================================== */

.availability-province-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill,minmax(180px,1fr));

    grid-gap: 16px;

    gap: 16px;

    margin-bottom: 28px;
}

.availability-province {

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 18px;

    border: 2px solid #e3edf5;
    border-radius: 12px;

    background: white;

    cursor: pointer;

    transition: .22s;
}

.availability-province:hover {

    border-color: #0b67b2;

    transform: translateY(-2px);
}

.availability-province.selected {

    background: #eef8ff;

    border-color: #0b67b2;
}

.availability-province input {

    width: 18px;
    height: 18px;
}

.availability-province span {

    color: #234563;

    font-weight: 600;
}

/* =====================================================
   Toggle Grid
===================================================== */

.availability-toggle-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    grid-gap: 18px;

    gap: 18px;

    margin-top: 12px;
}

.availability-toggle {

    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 64px;

    padding: 18px;

    border: 1px solid #dfe8f1;
    border-radius: 12px;

    background: #fbfdff;

    cursor: pointer;

    transition: .2s;
}

.availability-toggle:hover {

    border-color: #0b67b2;

    background: #f3faff;
}

.availability-toggle input {

    width: 22px;
    height: 22px;

    accent-color: #0b67b2;

    cursor: pointer;
}

.availability-toggle span {

    color: #234563;

    font-weight: 600;
}

/* =====================================================
   Checkbox Animation
===================================================== */

.availability-toggle input:checked {

    transform: scale(1.08);
}

.availability-choice.selected span,
.availability-province.selected span {

    color: #0b67b2;
}

/* =====================================================
   Better Select Dropdowns
===================================================== */

.availability-field select {

    appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #0b67b2 50%),
        linear-gradient(135deg, #0b67b2 50%, transparent 50%);

    background-position:
        calc(100% - 20px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px);

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}

/* =====================================================
   Date Inputs
===================================================== */

.availability-field input[type="date"] {

    cursor: pointer;
}

/* =====================================================
   Number Inputs
===================================================== */

.availability-field input[type="number"] {

    text-align: center;
}

/* =====================================================
   Save Section
===================================================== */

.availability-save-container {
  width: 100%;
  margin-top: 4px;
  padding: 24px 26px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  border: 1px solid #dce7ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px rgba(20, 45, 75, 0.06);
}

.availability-save-container > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.availability-save-container strong {
  color: #12385b;

  font-size: 1.05rem;
}

.availability-save-container span {
  color: #6b7b8c;

  font-size: 0.9rem;
  line-height: 1.5;
}

.availability-save-button {
  min-width: 190px;
  min-height: 50px;

  padding: 12px 22px;

  border: 0;
  border-radius: 10px;

  background: #00a676;
  color: #ffffff;

  font: inherit;
  font-size: 0.96rem;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.availability-save-button:hover:not(:disabled) {
  background: #008f65;

  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(0, 166, 118, 0.18);
}

.availability-save-button:focus-visible {
  outline: 3px solid rgba(0, 166, 118, 0.2);
  outline-offset: 3px;
}

.availability-save-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* =====================================================
   Status Messages
===================================================== */

.availability-message {
  padding: 15px 18px;

  border: 1px solid #a9dfca;
  border-radius: 10px;

  background: #ebf9f3;
  color: #08794f;

  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
}

.availability-message.error {
  border-color: #efc5c1;

  background: #fff3f1;
  color: #a92720;
}

/* =====================================================
   Disabled and Accessible States
===================================================== */

.availability-choice:focus-visible,
.availability-province:focus-within,
.availability-toggle:focus-within {
  outline: 3px solid rgba(11, 103, 178, 0.14);
  outline-offset: 3px;
}

.availability-choice:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.availability-field input:disabled,
.availability-field select:disabled,
.availability-field textarea:disabled {
  background: #f3f6f8;
  color: #7e8c99;
  cursor: not-allowed;
}

/* =====================================================
   Subtle Entry Animation
===================================================== */

.availability-card {
  animation: availability-card-enter 0.35s ease both;
}

.availability-card:nth-of-type(2) {
  animation-delay: 0.04s;
}

.availability-card:nth-of-type(3) {
  animation-delay: 0.08s;
}

.availability-card:nth-of-type(4) {
  animation-delay: 0.12s;
}

.availability-card:nth-of-type(5) {
  animation-delay: 0.16s;
}

@keyframes availability-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
   Large Tablet and Small Laptop
===================================================== */

@media (max-width: 1100px) {
  .availability-header {
    align-items: stretch;
    flex-direction: column;
  }

  .availability-status-summary {
    min-width: 0;
    width: 100%;
  }

  .availability-form-grid-three {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .availability-choice-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .availability-province-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

/* =====================================================
   Tablet
===================================================== */

@media (max-width: 760px) {
  .availability-page {
    padding: 20px;
  }

  .availability-page-nav {
    justify-content: flex-start;
  }

  .availability-header {
    margin-bottom: 26px;
  }

  .availability-header h1 {
    font-size: 2rem;
  }

  .availability-card {
    padding: 22px;
  }

  .availability-card-header {
    align-items: flex-start;
  }

  .availability-card-header > div {
    align-items: flex-start;
  }

  .availability-step {
    width: 48px;
    height: 48px;

    font-size: 1.05rem;
  }

  .availability-form-grid,
  .availability-form-grid-three {
    grid-template-columns: 1fr;
  }

  .availability-choice-grid {
    grid-template-columns: 1fr;
  }

  .availability-toggle-grid {
    grid-template-columns: 1fr;
  }

  .availability-province-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .availability-save-container {
    align-items: stretch;
    flex-direction: column;
  }

  .availability-save-button {
    width: 100%;
  }
}

/* =====================================================
   Mobile
===================================================== */

@media (max-width: 520px) {
  .availability-page {
    padding: 16px;
  }

  .availability-header h1 {
    font-size: 1.75rem;
  }

  .availability-status-summary {
    padding: 18px;
  }

  .availability-card {
    padding: 18px;
    border-radius: 14px;
  }

  .availability-card-header > div {
    gap: 14px;
  }

  .availability-step {
    width: 42px;
    height: 42px;

    font-size: 0.95rem;
  }

  .availability-card-header h2 {
    font-size: 1.2rem;
  }

  .availability-choice {
    min-height: 82px;
    padding: 15px;
  }

  .availability-province-grid {
    grid-template-columns: 1fr;
  }

  .availability-toggle {
    min-height: 58px;
    padding: 15px;
  }

  .availability-save-container {
    padding: 20px;
  }
}

/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce) {
  .availability-card,
  .availability-choice,
  .availability-province,
  .availability-toggle,
  .availability-save-button {
    animation: none;
    transition: none;
  }
}
.professional-coming-soon {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.professional-coming-soon-card {
  width: min(100%, 620px);
  padding: 48px;
  border: 1px solid #dce7ef;
  border-radius: 18px;
  background: #ffffff;
  text-align: center;
}

.professional-coming-soon-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: #eaf6fd;
  color: #086db1;
}

.professional-coming-soon-eyebrow {
  margin: 0 0 8px;
  color: #00a77b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.professional-coming-soon-card h1 {
  margin: 0;
  color: #0a4e7c;
  font-size: 2rem;
}

.professional-coming-soon-card > p:last-child {
  margin: 14px 0 0;
  color: #718596;
  line-height: 1.6;
}
.master-data-page {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px);
  color: #15334f;
}

.master-data-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.master-data-eyebrow {
  margin: 0 0 6px;
  color: #0b67b2;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.master-data-header h1 {
  margin: 0;
  color: #0b355f;
  font-size: clamp(2rem, 3vw, 3.1rem);
}

.master-data-header p:last-child {
  max-width: 760px;
  margin: 13px 0 0;
  color: #63788b;
  line-height: 1.65;
}

.master-data-refresh-button,
.master-data-primary-button,
.master-data-secondary-button {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.master-data-refresh-button,
.master-data-secondary-button {
  border: 1px solid #ccd9e4;
  background: #ffffff;
  color: #31516d;
}

.master-data-primary-button {
  border: 1px solid #0b67b2;
  background: #0b67b2;
  color: #ffffff;
}

.master-data-primary-button:hover:not(:disabled) {
  background: #085995;
}

.master-data-refresh-button:disabled,
.master-data-primary-button:disabled,
.master-data-secondary-button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.is-spinning {
  animation: master-data-spin 0.8s linear infinite;
}

@keyframes master-data-spin {
  to { transform: rotate(360deg); }
}

.master-data-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 22px;
}

.master-data-summary-card {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(16, 52, 82, 0.05);
}

.master-data-summary-card > span {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef7fd;
  color: #0b67b2;
}

.master-data-summary-card strong {
  display: block;
  color: #12385b;
  font-size: 1.5rem;
}

.master-data-summary-card small {
  display: block;
  margin-top: 3px;
  color: #718396;
}

.master-data-message {
  margin-bottom: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 10px;
  font-weight: 650;
}

.master-data-message.success {
  border: 1px solid #a6ddc8;
  background: #ecf9f4;
  color: #087652;
}

.master-data-message.error {
  border: 1px solid #efc1bd;
  background: #fff3f1;
  color: #a92d24;
}

.master-data-message button {
  display: inline-flex;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.master-data-panel {
  overflow: hidden;
  border: 1px solid #dfe8ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(16, 52, 82, 0.06);
}

.master-data-toolbar {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e6edf3;
  background: #fbfdff;
}

.master-data-tabs {
  display: inline-flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid #dce6ee;
  border-radius: 10px;
  background: #ffffff;
}

.master-data-tabs button {
  min-height: 38px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #577086;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.master-data-tabs button.active {
  background: #0b67b2;
  color: #ffffff;
}

.master-data-toolbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.master-data-search {
  min-width: 260px;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cedbe5;
  border-radius: 9px;
  background: #ffffff;
  color: #7a8c9d;
}

.master-data-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.master-data-profession-filter {
  min-height: 44px;
  min-width: 240px;
  padding: 0 12px;
  border: 1px solid #cedbe5;
  border-radius: 9px;
  background: #ffffff;
  color: #23425e;
  font: inherit;
  font-weight: 650;
}

.master-data-toggle,
.master-data-checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #526b80;
  font-size: 0.9rem;
  font-weight: 650;
}

.master-data-toggle input,
.master-data-checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: #0b67b2;
}

.master-data-context-row {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e8eef3;
  background: #f7fbfe;
}

.master-data-context-row div span {
  display: block;
  color: #76899a;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.master-data-context-row strong {
  display: block;
  margin-top: 3px;
  color: #153b5e;
}

.master-data-context-row > span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eaf5fc;
  color: #0b67b2;
  font-size: 0.8rem;
  font-weight: 750;
}

.master-data-table-wrapper {
  overflow-x: auto;
}

.master-data-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.master-data-table th,
.master-data-table td {
  padding: 15px 20px;
  border-bottom: 1px solid #e8eef3;
  text-align: left;
  vertical-align: middle;
}

.master-data-table th {
  background: #f8fbfd;
  color: #63788b;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.master-data-table tbody tr:hover {
  background: #fbfdff;
}

.master-data-name-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.master-data-name-cell > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef7fd;
  color: #0b67b2;
}

.master-data-name-cell > span.specialty {
  background: #eef9f5;
  color: #07825c;
}

.master-data-name-cell strong,
.master-data-name-cell small {
  display: block;
}

.master-data-name-cell strong {
  color: #173a58;
}

.master-data-name-cell small {
  margin-top: 2px;
  color: #8393a1;
}

.master-data-code-badge,
.master-data-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 750;
}

.master-data-code-badge {
  padding: 6px 10px;
  background: #eef4f8;
  color: #47627a;
  font-size: 0.78rem;
}

.master-data-status {
  padding: 6px 11px;
  font-size: 0.76rem;
}

.master-data-status.active {
  background: #e9f8f1;
  color: #08774f;
}

.master-data-status.inactive {
  background: #f1f3f5;
  color: #737f89;
}

.master-data-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.master-data-row-actions button {
  min-height: 36px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d3dee7;
  border-radius: 7px;
  background: #ffffff;
  color: #38546d;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.master-data-row-actions button.danger {
  border-color: #efcbc7;
  color: #b2342b;
}

.master-data-row-actions button.success {
  border-color: #addfcf;
  color: #087751;
}

.master-data-empty {
  padding: 46px 20px;
  color: #718598;
  text-align: center;
}

.master-data-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 29, 47, 0.56);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.master-data-modal {
  width: min(540px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(5, 26, 43, 0.28);
}

.master-data-modal > header {
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e5edf3;
}

.master-data-modal > header p {
  margin: 0 0 4px;
  color: #0b67b2;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.master-data-modal > header h2 {
  margin: 0;
  color: #12385b;
}

.master-data-modal > header button {
  padding: 7px;
  display: inline-flex;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #687d8e;
  cursor: pointer;
}

.master-data-form {
  padding: 22px;
  display: grid;
  grid-gap: 18px;
  gap: 18px;
}

.master-data-form > label:not(.master-data-checkbox-field) {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: #284862;
  font-size: 0.9rem;
  font-weight: 700;
}

.master-data-form input[type="text"],
.master-data-form input[type="number"],
.master-data-form select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #cedbe5;
  border-radius: 9px;
  outline: 0;
  background: #ffffff;
  font: inherit;
}

.master-data-form input:focus,
.master-data-form select:focus {
  border-color: #0b67b2;
  box-shadow: 0 0 0 3px rgba(11, 103, 178, 0.1);
}

.master-data-form-actions {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1180px) {
  .master-data-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .master-data-toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .master-data-header {
    flex-direction: column;
  }

  .master-data-summary-grid {
    grid-template-columns: 1fr;
  }

  .master-data-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .master-data-search,
  .master-data-profession-filter,
  .master-data-primary-button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .master-data-page {
    padding: 16px;
  }

  .master-data-tabs {
    width: 100%;
  }

  .master-data-tabs button {
    flex: 1 1;
    justify-content: center;
  }

  .master-data-form-actions {
    flex-direction: column-reverse;
  }

  .master-data-form-actions button {
    width: 100%;
  }
}
.facility-management-page {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 34px;
  color: #15334f;
}

.facility-management-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 28px;
}

.facility-management-eyebrow {
  margin: 0 0 7px;
  color: #05a878;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.facility-management-header h1 {
  margin: 0;
  color: #07558c;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.05;
}

.facility-management-header p:last-child {
  max-width: 760px;
  margin: 12px 0 0;
  color: #6c8092;
  line-height: 1.6;
}

.facility-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========================================
   BUTTONS
======================================== */

.facility-management-page .app-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.facility-management-page .app-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.facility-management-page .app-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.facility-management-page .app-button-primary {
  border-color: #0b67b2;
  background: #0b67b2;
  color: #ffffff;
}

.facility-management-page .app-button-primary:hover:not(:disabled) {
  border-color: #075a9c;
  background: #075a9c;
}

.facility-management-page .app-button-secondary {
  border-color: #cddce7;
  background: #ffffff;
  color: #294a65;
}

.facility-management-page .app-button-secondary:hover:not(:disabled) {
  border-color: #aebfcd;
  background: #f5f9fc;
}

.facility-management-page .app-button-danger {
  border-color: #efb6b0;
  background: #ffffff;
  color: #c3342c;
}

.facility-management-page .app-button-danger:hover:not(:disabled) {
  border-color: #df8f87;
  background: #fff2f1;
}

.facility-management-page .app-button-small {
  min-height: 38px;
  padding: 0 13px;
  font-size: 0.86rem;
}

.facility-management-page .app-button-icon {
  display: inline-flex;
  align-items: center;
}

/* ========================================
   STAT CARDS
======================================== */

.facility-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 24px;
}

.facility-stat-grid article {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #dfe8ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(10, 48, 77, 0.05);
}

.facility-stat-grid article > svg {
  width: 46px;
  height: 46px;
  padding: 10px;
  border-radius: 12px;
  background: #eef7fd;
  color: #0b67b2;
}

.facility-stat-grid strong {
  display: block;
  color: #12395d;
  font-size: 1.55rem;
}

.facility-stat-grid span {
  display: block;
  margin-top: 3px;
  color: #718597;
  font-size: 0.86rem;
}

/* ========================================
   FEEDBACK
======================================== */

.facility-feedback {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 9px;
  font-weight: 650;
}

.facility-feedback.success {
  border: 1px solid #a9dfca;
  background: #ecf9f4;
  color: #087653;
}

.facility-feedback.error {
  border: 1px solid #efc4c0;
  background: #fff2f1;
  color: #ad332a;
}

/* ========================================
   TABLE PANEL
======================================== */

.facility-table-panel {
  overflow: hidden;
  border: 1px solid #dfe8ef;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(10, 48, 77, 0.04);
}

/* ========================================
   TOOLBAR
======================================== */

.facility-management-page .app-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #e4edf3;
  background: #fbfdfe;
}

.facility-management-page .app-table-toolbar-left,
.facility-management-page .app-table-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.facility-management-page .app-table-toolbar-left {
  flex: 1 1;
}

.facility-management-page .app-table-toolbar-right {
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ========================================
   SEARCH BOX
======================================== */

.facility-management-page .app-search-box {
  width: min(100%, 360px);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid #cedbe5;
  border-radius: 9px;
  background: #ffffff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.facility-management-page .app-search-box:focus-within {
  border-color: #0b67b2;
  box-shadow: 0 0 0 3px rgba(11, 103, 178, 0.1);
}

.facility-management-page .app-search-icon {
  flex: 0 0 auto;
  color: #7d91a1;
}

.facility-management-page .app-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #173a56;
  font: inherit;
}

.facility-management-page .app-search-box input::placeholder {
  color: #96a7b5;
}

.facility-management-page .app-search-clear {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8295a4;
  cursor: pointer;
}

.facility-management-page .app-search-clear:hover {
  background: #edf4f8;
}

/* ========================================
   FILTERS
======================================== */

.facility-filter-select {
  min-height: 44px;
  padding: 8px 38px 8px 13px;
  border: 1px solid #cedbe5;
  border-radius: 9px;
  outline: none;
  background: #ffffff;
  color: #294a65;
  font: inherit;
}

.facility-filter-select:focus {
  border-color: #0b67b2;
  box-shadow: 0 0 0 3px rgba(11, 103, 178, 0.08);
}

.facility-inactive-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
  color: #556f84;
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
}

.facility-inactive-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #0b67b2;
}

/* ========================================
   DATA TABLE
======================================== */

.facility-management-page .app-data-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.facility-management-page .app-data-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  table-layout: fixed;
}

.facility-management-page .app-data-table thead th {
  padding: 14px 12px;
  border-bottom: 1px solid #dfe8ef;
  background: #f6f9fb;
  color: #587188;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.facility-management-page .app-data-table tbody td {
  padding: 17px 12px;
  border-bottom: 1px solid #e8eef3;
  color: #294a65;
  vertical-align: middle;
  font-size: 0.91rem;
}

.facility-management-page .app-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.facility-management-page .app-data-table tbody tr {
  transition: background 0.12s ease;
}

.facility-management-page .app-data-table tbody tr:hover {
  background: #fbfdff;
}

.facility-management-page .app-table-loading {
  padding: 50px 20px;
  color: #6b8192;
  text-align: center;
  font-weight: 650;
}

/* ========================================
   TABLE COLUMN WIDTHS
======================================== */

.facility-management-page .app-data-table th:nth-child(1),
.facility-management-page .app-data-table td:nth-child(1) {
  width: 23%;
}

.facility-management-page .app-data-table th:nth-child(2),
.facility-management-page .app-data-table td:nth-child(2) {
  width: 8%;
}

.facility-management-page .app-data-table th:nth-child(3),
.facility-management-page .app-data-table td:nth-child(3) {
  width: 13%;
}

.facility-management-page .app-data-table th:nth-child(4),
.facility-management-page .app-data-table td:nth-child(4) {
  width: 9%;
}

.facility-management-page .app-data-table th:nth-child(5),
.facility-management-page .app-data-table td:nth-child(5) {
  width: 8%;
}

.facility-management-page .app-data-table th:nth-child(6),
.facility-management-page .app-data-table td:nth-child(6) {
  width: 7%;
  text-align: center;
}

.facility-management-page .app-data-table th:nth-child(7),
.facility-management-page .app-data-table td:nth-child(7) {
  width: 8%;
  text-align: center;
}

.facility-management-page .app-data-table th:nth-child(8),
.facility-management-page .app-data-table td:nth-child(8) {
  width: 9%;
  text-align: center;
}

.facility-management-page .app-data-table th:nth-child(9),
.facility-management-page .app-data-table td:nth-child(9) {
  width: 18%;
}

.facility-management-page .app-data-table th:nth-child(6),
.facility-management-page .app-data-table th:nth-child(7),
.facility-management-page .app-data-table th:nth-child(8) {
  text-align: center;
}

/* ========================================
   FACILITY CELL
======================================== */

.facility-name-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.facility-row-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 10px;
  background: #eef7fd;
  color: #0b67b2;
}

.facility-name-cell > div {
  min-width: 0;
}

.facility-name-cell strong {
  display: block;
  color: #173c5e;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.facility-name-cell small {
  display: block;
  margin-top: 3px;
  color: #8595a3;
  font-size: 0.78rem;
}

.facility-location-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #516b80;
}

.facility-location-cell svg {
  flex: 0 0 auto;
}

.facility-location-cell span {
  white-space: normal;
}

/* ========================================
   STATUS BADGES
======================================== */

.facility-management-page .app-status-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.facility-management-page .app-status-active,
.facility-management-page .app-status-approved,
.facility-management-page .app-status-verified {
  background: #e7f7ef;
  color: #087c50;
}

.facility-management-page .app-status-inactive,
.facility-management-page .app-status-rejected,
.facility-management-page .app-status-suspended {
  background: #fff0ef;
  color: #bf3930;
}

.facility-management-page .app-status-pending,
.facility-management-page .app-status-onboarding {
  background: #fff4dc;
  color: #aa6900;
}

/* ========================================
   ACTIONS
======================================== */

.facility-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.facility-actions-cell {
  text-align: right;
}

/* ========================================
   EMPTY STATE
======================================== */

.facility-management-page .app-empty-state {
  padding: 55px 20px;
  text-align: center;
}

.facility-management-page .app-empty-state h3 {
  margin: 0;
  color: #173d5d;
  font-size: 1.15rem;
}

.facility-management-page .app-empty-state p {
  margin: 8px 0 0;
  color: #758999;
}

/* ========================================
   MODAL
======================================== */

.app-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: rgba(18, 42, 61, 0.55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.app-modal {
  width: min(100%, 720px);
  max-height: calc(100vh - 50px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
}

.app-modal-small {
  max-width: 470px;
}

.app-modal-medium {
  max-width: 650px;
}

.app-modal-large {
  max-width: 940px;
}

.app-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 28px 20px;
  border-bottom: 1px solid #e5edf3;
}

.app-modal-header h2 {
  margin: 4px 0 0;
  color: #143c5d;
  font-size: 1.6rem;
}

.app-modal-eyebrow {
  margin: 0;
  color: #00a779;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-modal-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f8494;
  cursor: pointer;
}

.app-modal-close:hover {
  background: #f0f5f8;
}

.app-modal-body {
  overflow-y: auto;
  padding: 26px 28px;
}

.app-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 28px 24px;
  border-top: 1px solid #e5edf3;
}

/* ========================================
   FORM
======================================== */

.facility-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 18px;
  gap: 18px;
}

.facility-form-full {
  grid-column: 1 / -1;
}

.facility-management-page .app-form-field {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.facility-management-page .app-form-label {
  color: #294861;
  font-size: 0.9rem;
  font-weight: 700;
}

.facility-management-page .app-form-field input,
.facility-management-page .app-form-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #cedbe5;
  border-radius: 9px;
  outline: none;
  background: #ffffff;
  color: #16364f;
  font: inherit;
}

.facility-management-page .app-form-field input:focus,
.facility-management-page .app-form-field select:focus {
  border-color: #0b67b2;
  box-shadow: 0 0 0 3px rgba(11, 103, 178, 0.1);
}

.facility-textarea-field {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: #294861;
  font-size: 0.9rem;
  font-weight: 700;
}

.facility-textarea-field textarea {
  width: 100%;
  padding: 12px 13px;
  resize: vertical;
  border: 1px solid #cedbe5;
  border-radius: 9px;
  outline: 0;
  background: #ffffff;
  color: #16364f;
  font: inherit;
}

.facility-textarea-field textarea:focus {
  border-color: #0b67b2;
  box-shadow: 0 0 0 3px rgba(11, 103, 178, 0.1);
}

/* ========================================
   TOGGLE SWITCH
======================================== */

.facility-management-page .app-toggle-field {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #294861;
  font-weight: 700;
}

.facility-management-page .app-toggle {
  width: 48px;
  height: 27px;
  position: relative;
  border: 0;
  border-radius: 999px;
  background: #c7d4dd;
  cursor: pointer;
  transition: background 0.15s ease;
}

.facility-management-page .app-toggle span {
  width: 21px;
  height: 21px;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(10, 35, 52, 0.2);
  transition: transform 0.15s ease;
}

.facility-management-page .app-toggle.active {
  background: #0aaf7c;
}

.facility-management-page .app-toggle.active span {
  transform: translateX(21px);
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1200px) {
  .facility-management-page .app-table-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .facility-management-page .app-table-toolbar-left,
  .facility-management-page .app-table-toolbar-right {
    width: 100%;
  }

  .facility-management-page .app-table-toolbar-right {
    justify-content: flex-start;
  }

  .facility-management-page .app-data-table {
    min-width: 1050px;
  }
}

@media (max-width: 1100px) {
  .facility-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facility-management-header {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .facility-management-page {
    padding: 18px;
  }

  .facility-stat-grid {
    grid-template-columns: 1fr;
  }

  .facility-form-grid {
    grid-template-columns: 1fr;
  }

  .facility-form-full {
    grid-column: auto;
  }

  .facility-header-actions {
    width: 100%;
    flex-direction: column;
  }

  .facility-header-actions .app-button {
    width: 100%;
  }

  .facility-management-page .app-table-toolbar-right {
    flex-direction: column;
    align-items: stretch;
  }

  .facility-filter-select {
    width: 100%;
  }

  .facility-management-page .app-search-box {
    width: 100%;
    max-width: none;
  }

  .app-modal-backdrop {
    padding: 12px;
  }

  .app-modal-header,
  .app-modal-body,
  .app-modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}
.admin-layout {
  min-height: 100vh;
  display: flex;
  background: #f4f8fb;
  color: #173b58;
}

/* ========================================
   SIDEBAR
======================================== */

.admin-sidebar {
  width: 270px;
  height: 100dvh;

  position: fixed;
  inset: 0 auto 0 0;
  z-index: 900;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-right: 1px solid #dce6ed;
  background: #ffffff;
}

.admin-sidebar-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5edf2;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.admin-brand-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  border-radius: 11px;
  background: #e9f5fd;
  color: #0870b6;
}

.admin-brand strong {
  display: block;
  color: #0b416a;
  font-size: 1rem;
}

.admin-brand small {
  display: block;
  margin-top: 2px;
  color: #7a8e9e;
  font-size: 0.72rem;
}

.admin-sidebar-close {
  display: none;
  border: 0;
  background: transparent;
  color: #6f8392;
  cursor: pointer;
}

/* ========================================
   NAVIGATION
======================================== */
.admin-sidebar-nav {
  flex: 1 1;
  min-height: 0;

  display: grid;
  align-content: start;
  grid-gap: 6px;
  gap: 6px;

  padding: 18px 14px;

  overflow-y: auto;
  overflow-x: hidden;
}

.admin-nav-link {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 9px;
  color: #48667d;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.admin-nav-link:hover:not(.disabled) {
  background: #f0f7fb;
  color: #075f9d;
}

.admin-nav-link.active {
  background: #e8f4fc;
  color: #086bb0;
}

.admin-nav-link.disabled {
  opacity: 0.45;
  cursor: default;
}

.admin-nav-link.disabled small {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf2f5;
  color: #8193a0;
  font-size: 0.65rem;
}

/* ========================================
   SIDEBAR BOTTOM
======================================== */

.admin-sidebar-bottom {
  flex: 0 0 auto;

  display: grid;
  grid-gap: 12px;
  gap: 12px;

  padding: 14px 16px 18px;

  border-top: 1px solid #e5edf2;
  background: #ffffff;
}
.admin-nav-home,
.admin-sidebar-logout {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}

.admin-nav-home {
  border: 1px solid #d3e0e8;
  background: #ffffff;
  color: #3f6078;
}

.admin-nav-home:hover {
  background: #f6fafc;
}

.admin-sidebar-logout {
  border: 1px solid #efbbb5;
  background: #ffffff;
  color: #bd3a31;
}

.admin-sidebar-logout:hover {
  background: #fff3f2;
}

.admin-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 4px;
}

.admin-user-avatar {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border-radius: 50%;
  background: #096bad;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-sidebar-user > div:last-child {
  min-width: 0;
}

.admin-sidebar-user strong {
  display: block;
  overflow: hidden;
  color: #173d5c;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sidebar-user span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #7d8f9d;
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   MAIN CONTENT
======================================== */

.admin-layout-main {
  width: calc(100% - 270px);
  min-height: 100vh;
  margin-left: 270px;
}

.admin-layout-content {
  min-height: 100vh;
}

.admin-mobile-header {
  display: none;
}

/* ========================================
   MOBILE
======================================== */

.admin-sidebar-overlay {
  display: none;
}

@media (max-width: 900px) {
  .admin-sidebar {
    transform: translateX(-100%);
    box-shadow: 15px 0 35px rgba(10, 40, 60, 0.12);
    transition: transform 0.2s ease;
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-sidebar-close {
    display: inline-flex;
  }

  .admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 850;
    display: block;
    border: 0;
    background: rgba(12, 34, 49, 0.48);
  }

  .admin-layout-main {
    width: 100%;
    margin-left: 0;
  }

  .admin-mobile-header {
    min-height: 64px;
    position: sticky;
    top: 0;
    z-index: 700;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 18px;
    border-bottom: 1px solid #dce6ed;
    background: #ffffff;
  }

  .admin-mobile-header strong {
    color: #0c426b;
  }

  .admin-mobile-menu {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d2e0e9;
    border-radius: 8px;
    background: #ffffff;
    color: #225371;
    cursor: pointer;
  }
}
.facility-layout {
  min-height: 100vh;
  display: flex;
  background: #f4f8fb;
  color: #173b58;
}

/* ========================================
   SIDEBAR
======================================== */

.facility-sidebar {
  width: 270px;
  height: 100dvh;

  position: fixed;
  inset: 0 auto 0 0;
  z-index: 900;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-right: 1px solid #dce6ed;
  background: #ffffff;
}

.facility-sidebar-header {
  min-height: 88px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 18px 20px;

  border-bottom: 1px solid #e5edf2;
}

.facility-brand {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
  text-align: left;
}

.facility-brand-icon {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;

  border-radius: 11px;

  background: #e9f5fd;
  color: #0870b6;
}

.facility-brand strong {
  display: block;

  color: #0b416a;

  font-size: 1rem;
}

.facility-brand small {
  display: block;

  margin-top: 2px;

  color: #7a8e9e;

  font-size: 0.72rem;
}

.facility-sidebar-close {
  display: none;

  border: 0;

  background: transparent;
  color: #6f8392;

  cursor: pointer;
}

/* ========================================
   NAVIGATION
======================================== */

.facility-sidebar-nav {
  flex: 1 1;
  min-height: 0;

  display: grid;
  align-content: start;
  grid-gap: 6px;
  gap: 6px;

  padding: 18px 14px;

  overflow-y: auto;
  overflow-x: hidden;
}

.facility-sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.facility-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.facility-sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cfdae2;
}

.facility-nav-link {
  min-height: 48px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 0 14px;

  border-radius: 9px;

  color: #48667d;

  text-decoration: none;

  font-size: 0.9rem;
  font-weight: 700;

  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.facility-nav-link:hover:not(.disabled) {
  background: #f0f7fb;
  color: #075f9d;
}

.facility-nav-link.active {
  background: #e8f4fc;
  color: #086bb0;
}

.facility-nav-link.disabled {
  opacity: 0.45;
  cursor: default;
}

.facility-nav-link.disabled small {
  margin-left: auto;

  padding: 3px 7px;

  border-radius: 999px;

  background: #edf2f5;
  color: #8193a0;

  font-size: 0.65rem;
}

/* ========================================
   SIDEBAR BOTTOM
======================================== */

.facility-sidebar-bottom {
  flex: 0 0 auto;

  display: grid;
  grid-gap: 12px;
  gap: 12px;

  padding: 14px 16px 18px;

  border-top: 1px solid #e5edf2;

  background: #ffffff;
}

.facility-nav-home,
.facility-sidebar-logout {
  min-height: 42px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 12px;

  border-radius: 8px;

  cursor: pointer;

  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}

.facility-nav-home {
  border: 1px solid #d3e0e8;

  background: #ffffff;
  color: #3f6078;
}

.facility-nav-home:hover {
  background: #f6fafc;
}

.facility-sidebar-logout {
  border: 1px solid #efbbb5;

  background: #ffffff;
  color: #bd3a31;
}

.facility-sidebar-logout:hover {
  background: #fff3f2;
}

.facility-sidebar-user {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 4px;
}

.facility-user-avatar {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 38px;

  border-radius: 50%;

  background: #096bad;
  color: #ffffff;

  font-size: 0.78rem;
  font-weight: 800;
}

.facility-sidebar-user > div:last-child {
  min-width: 0;
}

.facility-sidebar-user strong {
  display: block;

  overflow: hidden;

  color: #173d5c;

  font-size: 0.82rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.facility-sidebar-user span {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #7d8f9d;

  font-size: 0.69rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   MAIN AREA
======================================== */

.facility-layout-main {
  width: calc(100% - 270px);

  min-height: 100vh;

  margin-left: 270px;
}

.facility-layout-content {
  width: 100%;

  min-height: 100vh;
}

.facility-mobile-header {
  display: none;
}

/* ========================================
   MOBILE
======================================== */

.facility-sidebar-overlay {
  display: none;
}

@media (max-width: 900px) {
  .facility-sidebar {
    transform: translateX(-100%);

    box-shadow:
      15px 0 35px
      rgba(10, 40, 60, 0.12);

    transition:
      transform 0.2s ease;
  }

  .facility-sidebar.open {
    transform: translateX(0);
  }

  .facility-sidebar-close {
    display: inline-flex;
  }

  .facility-sidebar-overlay {
    position: fixed;
    inset: 0;

    z-index: 850;

    display: block;

    border: 0;

    background:
      rgba(
        12,
        34,
        49,
        0.48
      );
  }

  .facility-layout-main {
    width: 100%;

    margin-left: 0;
  }

  .facility-mobile-header {
    min-height: 64px;

    position: sticky;
    top: 0;

    z-index: 700;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 0 18px;

    border-bottom:
      1px solid #dce6ed;

    background: #ffffff;
  }

  .facility-mobile-header strong {
    color: #0c426b;
  }

  .facility-mobile-menu {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
      1px solid #d2e0e9;

    border-radius: 8px;

    background: #ffffff;
    color: #225371;

    cursor: pointer;
  }
}
/* ========================================
   PROFESSIONAL PORTAL LAYOUT
======================================== */

.pro-layout {
  min-height: 100vh;
  display: flex;
  background: #f4f8fb;
  color: #173b58;
}

/* ========================================
   SIDEBAR
======================================== */

.pro-layout-sidebar {
  width: 225px;
  height: 100dvh;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-right: 1px solid #dce6ed;
  background: #ffffff;
}

/* ========================================
   SIDEBAR HEADER
======================================== */

.pro-layout-sidebar-header {
  min-height: 86px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 16px;

  border-bottom: 1px solid #e5edf2;
}

.pro-layout-brand {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
  text-align: left;
}

.pro-layout-brand-icon {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;

  border-radius: 11px;

  background: #eaf6fd;
  color: #0870b6;
}

.pro-layout-brand-text {
  min-width: 0;
}

.pro-layout-brand-text strong {
  display: block;

  color: #0b416a;

  font-size: 0.96rem;
  font-weight: 800;

  white-space: nowrap;
}

.pro-layout-brand-text small {
  display: block;

  margin-top: 2px;

  color: #7a8e9e;

  font-size: 0.68rem;

  white-space: nowrap;
}

.pro-layout-sidebar-close {
  display: none;

  width: 34px;
  height: 34px;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #6f8392;

  cursor: pointer;
}

/* ========================================
   NAVIGATION
======================================== */

.pro-layout-nav {
  flex: 1 1;
  min-height: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 15px 10px;

  overflow-y: auto;
  overflow-x: hidden;
}

.pro-layout-nav::-webkit-scrollbar {
  width: 5px;
}

.pro-layout-nav::-webkit-scrollbar-track {
  background: transparent;
}

.pro-layout-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd8e1;
}

.pro-layout-nav-link {
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 11px;

  flex: 0 0 auto;

  padding: 0 13px;

  border: 1px solid transparent;
  border-radius: 9px;

  color: #48667d;

  text-decoration: none;

  font-size: 0.86rem;
  font-weight: 700;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.pro-layout-nav-link svg {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  color: #52738a;
}

.pro-layout-nav-link:hover {
  background: #f0f7fb;
  color: #075f9d;
}

.pro-layout-nav-link:hover svg {
  color: #0870b6;
}

.pro-layout-nav-link.active {
  border-color: #c6deed;

  background: #e8f4fc;
  color: #086bb0;
}

.pro-layout-nav-link.active svg {
  color: #086bb0;
}

/* ========================================
   SIDEBAR BOTTOM
======================================== */

.pro-layout-sidebar-bottom {
  flex: 0 0 auto;

  display: grid;
  grid-gap: 8px;
  gap: 8px;

  padding: 11px 11px 14px;

  border-top: 1px solid #e5edf2;

  background: #ffffff;
}

/* ========================================
   HOME
======================================== */

.pro-layout-home {
  min-height: 40px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 12px;

  border: 1px solid #d3e0e8;
  border-radius: 8px;

  background: #ffffff;
  color: #3f6078;

  cursor: pointer;

  font: inherit;
  font-size: 0.81rem;
  font-weight: 700;
}

.pro-layout-home:hover {
  background: #f6fafc;
}

/* ========================================
   USER
======================================== */

.pro-layout-user {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 5px 2px;
}

.pro-layout-avatar {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 36px;

  border-radius: 50%;

  background: #0c78bd;
  color: #ffffff;

  font-size: 0.7rem;
  font-weight: 800;
}

.pro-layout-user-copy {
  min-width: 0;
}

.pro-layout-user-copy strong {
  display: block;

  overflow: hidden;

  color: #173d5c;

  font-size: 0.75rem;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-layout-user-copy span {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #7d8f9d;

  font-size: 0.61rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   LOGOUT
======================================== */

.pro-layout-logout {
  min-height: 40px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 12px;

  border: 1px solid #efbbb5;
  border-radius: 8px;

  background: #ffffff;
  color: #bd3a31;

  cursor: pointer;

  font: inherit;
  font-size: 0.81rem;
  font-weight: 700;
}

.pro-layout-logout:hover {
  background: #fff3f2;
}

/* ========================================
   MAIN AREA
======================================== */

.pro-layout-main {
  width: calc(100% - 225px);
  min-width: 0;
  min-height: 100vh;

  margin-left: 225px;

  background: #f4f8fb;
}

.pro-layout-content {
  width: 100%;
  min-width: 0;
  min-height: 100vh;

  overflow-x: hidden;

  background: #f4f8fb;
}

/* ========================================
   PAGE RESET
======================================== */

.pro-layout-content .professional-dashboard,
.pro-layout-content .professional-dashboard-page,
.pro-layout-content .professional-profile-page,
.pro-layout-content .professional-documents-page,
.pro-layout-content .professional-availability-page,
.pro-layout-content .professional-coming-soon {
  width: 100%;
  max-width: none;

  margin: 0;

  box-sizing: border-box;
}

/* ========================================
   PROFESSIONAL DASHBOARD
======================================== */

.pro-layout-content .professional-dashboard {
  min-height: 100vh;

  display: block;

  background: #f4f8fb;
}

.pro-layout-content .professional-dashboard .dashboard-main {
  width: 100%;
  min-height: 100vh;

  margin: 0;

  background: #f4f8fb;
}

/* ========================================
   DASHBOARD HEADER
======================================== */

.pro-layout-content .dashboard-topbar {
  min-height: 160px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 28px 34px;

  border-bottom: 1px solid #dbe6ee;

  background: #ffffff;
}

.pro-layout-content .dashboard-topbar > div {
  min-width: 0;
}

.pro-layout-content .dashboard-topbar p {
  margin: 0;

  color: #00a77b;

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.pro-layout-content .dashboard-topbar h1 {
  margin: 7px 0 6px;

  color: #064f7f;

  font-size: clamp(
    2rem,
    3vw,
    3rem
  );

  line-height: 1.08;
}

.pro-layout-content .dashboard-topbar h1 + p {
  color: #00a77b;

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.pro-layout-content .dashboard-notification-button {
  width: 48px;
  height: 48px;

  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 48px;

  border: 1px solid #d6e3eb;
  border-radius: 50%;

  background: #ffffff;
  color: #07588e;

  cursor: pointer;

  font-size: 1rem;
}

.pro-layout-content .dashboard-notification-button span {
  min-width: 21px;
  height: 21px;

  position: absolute;
  top: -5px;
  right: -4px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 5px;

  border-radius: 999px;

  background: #d93025;
  color: #ffffff;

  font-size: 0.66rem;
  font-weight: 800;
}

/* ========================================
   DASHBOARD CONTENT
======================================== */

.pro-layout-content .dashboard-content {
  width: 100%;

  display: grid;
  grid-gap: 24px;
  gap: 24px;

  padding: 32px 34px 42px;

  box-sizing: border-box;
}

/* ========================================
   PROFILE COMPLETION
======================================== */

.pro-layout-content .profile-progress-card {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.9fr)
    minmax(250px, 1fr)
    auto;

  align-items: center;
  grid-gap: 24px;
  gap: 24px;

  padding: 28px 34px;

  border-radius: 18px;

  background: linear-gradient(
    135deg,
    #09679f,
    #147bc0
  );

  color: #ffffff;

  box-shadow:
    0 12px 32px
    rgba(
      5,
      74,
      120,
      0.12
    );
}

.pro-layout-content .dashboard-progress-summary p {
  margin: 0 0 8px;

  color: #dbefff;

  font-size: 0.8rem;
}

.pro-layout-content .dashboard-progress-summary strong {
  display: block;

  color: #ffffff;

  font-size: 1.65rem;
}

.pro-layout-content .dashboard-readiness-status {
  display: inline-flex;

  margin-top: 10px;
  padding: 6px 11px;

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.16
    );

  color: #ffffff;

  font-size: 0.7rem;
  font-weight: 800;
}

.pro-layout-content .profile-progress-track {
  height: 10px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.23
    );
}

.pro-layout-content .profile-progress-track span {
  height: 100%;

  display: block;

  border-radius: inherit;

  background: #5ee1c6;
}

.pro-layout-content .dashboard-complete-profile-link {
  color: #ffffff;

  text-decoration: none;

  font-size: 0.82rem;
  font-weight: 800;

  white-space: nowrap;
}

/* ========================================
   SUMMARY CARDS
======================================== */

.pro-layout-content .dashboard-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  grid-gap: 18px;

  gap: 18px;
}

.pro-layout-content .dashboard-summary-card {
  min-height: 125px;

  display: flex;
  align-items: center;
  gap: 16px;

  padding: 20px;

  border: 1px solid #dce7ef;
  border-radius: 15px;

  background: #ffffff;

  box-shadow:
    0 8px 25px
    rgba(
      10,
      48,
      77,
      0.05
    );
}

.pro-layout-content .dashboard-summary-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 52px;

  border-radius: 13px;

  background: #e6f7f1;
  color: #00a77b;

  font-size: 1.25rem;
}

.pro-layout-content .dashboard-summary-card strong {
  display: block;

  color: #064b79;

  font-size: 1.65rem;
}

.pro-layout-content .dashboard-summary-card span {
  display: block;

  margin-top: 4px;

  color: #718596;

  font-size: 0.78rem;
}

/* ========================================
   TWO COLUMN
======================================== */

.pro-layout-content .dashboard-two-column {
  display: grid;

  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(280px, 0.8fr);

  grid-gap: 22px;

  gap: 22px;
}

/* ========================================
   PANELS
======================================== */

.pro-layout-content .dashboard-panel {
  overflow: hidden;

  border: 1px solid #dce7ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 25px
    rgba(
      10,
      48,
      77,
      0.04
    );
}

.pro-layout-content .dashboard-panel-heading {
  min-height: 88px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 20px 24px;

  border-bottom: 1px solid #e5edf2;
}

.pro-layout-content .dashboard-panel-heading p {
  margin: 0 0 5px;

  color: #00a77b;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.pro-layout-content .dashboard-panel-heading h2 {
  margin: 0;

  color: #064b79;

  font-size: 1.3rem;
}

.pro-layout-content .dashboard-panel-heading > a {
  color: #0870b6;

  text-decoration: none;

  font-size: 0.82rem;
  font-weight: 750;
}

.pro-layout-content .dashboard-panel-heading > svg {
  color: #00a77b;

  font-size: 1.4rem;
}

/* ========================================
   ASSIGNMENT LIST
======================================== */

.pro-layout-content .dashboard-assignment-list {
  display: grid;
  grid-gap: 11px;
  gap: 11px;

  padding: 20px;
}

.pro-layout-content .dashboard-assignment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 15px 17px;

  border: 1px solid #dbe6ee;
  border-radius: 11px;

  background: #f8fbfd;
}

.pro-layout-content .dashboard-assignment-item h3 {
  margin: 0;

  color: #073f68;

  font-size: 0.9rem;
}

.pro-layout-content .dashboard-assignment-item p {
  margin: 5px 0 0;

  color: #697e90;

  font-size: 0.78rem;
}

.pro-layout-content .dashboard-assignment-item span {
  display: block;

  margin-top: 4px;

  color: #7890a2;

  font-size: 0.74rem;
}

.pro-layout-content .dashboard-assignment-item > strong {
  flex: 0 0 auto;

  padding: 6px 11px;

  border-radius: 999px;

  background: #e4f6ef;
  color: #00845e;

  font-size: 0.68rem;
  font-weight: 800;

  text-transform: uppercase;
}

/* ========================================
   NOTIFICATIONS
======================================== */

.pro-layout-content .dashboard-notification-list {
  display: grid;
  grid-gap: 12px;
  gap: 12px;

  padding: 20px;
}

.pro-layout-content .dashboard-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 15px;

  border-radius: 11px;

  background: #f7fafc;

  color: #60788b;

  font-size: 0.78rem;
  line-height: 1.45;
}

.pro-layout-content .dashboard-notification-item svg {
  margin-top: 2px;

  flex: 0 0 auto;

  color: #00a77b;
}

/* ========================================
   UPCOMING SHIFTS
======================================== */

.pro-layout-content .dashboard-shift-empty {
  min-height: 250px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 35px;

  text-align: center;
}

.pro-layout-content .dashboard-shift-empty h3 {
  margin: 0;

  color: #064b79;

  font-size: 1rem;
}

.pro-layout-content .dashboard-shift-empty p {
  max-width: 540px;

  margin: 10px 0 20px;

  color: #718596;

  line-height: 1.6;
}

.pro-layout-content .dashboard-shift-empty .primary-button {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;

  border-radius: 8px;

  background: #00ad7c;
  color: #ffffff;

  text-decoration: none;

  font-size: 0.84rem;
  font-weight: 800;
}

/* ========================================
   LOADING
======================================== */

.pro-layout-content .dashboard-inline-loading {
  min-height: 400px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  color: #60798b;

  font-weight: 700;
}

.pro-layout-content .dashboard-inline-spinner {
  width: 28px;
  height: 28px;

  border: 3px solid #dce8ef;
  border-top-color: #0b72b7;

  border-radius: 50%;

  animation:
    pro-dashboard-spin
    0.8s linear infinite;
}

@keyframes pro-dashboard-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   MOBILE HEADER
======================================== */

.pro-layout-mobile-header {
  display: none;
}

.pro-layout-overlay {
  display: none;
}

/* ========================================
   MEDIUM
======================================== */

@media (max-width: 1200px) {
  .pro-layout-sidebar {
    width: 215px;
  }

  .pro-layout-main {
    width: calc(100% - 215px);
    margin-left: 215px;
  }

  .pro-layout-nav-link {
    min-height: 42px;

    padding: 0 11px;

    font-size: 0.82rem;
  }

  .pro-layout-content .dashboard-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 900px) {
  .pro-layout-sidebar {
    width: 240px;

    transform: translateX(-100%);

    box-shadow:
      15px 0 35px
      rgba(
        10,
        40,
        60,
        0.14
      );

    transition:
      transform 0.2s ease;
  }

  .pro-layout-sidebar.open {
    transform: translateX(0);
  }

  .pro-layout-sidebar-close {
    display: inline-flex;
  }

  .pro-layout-overlay {
    position: fixed;
    inset: 0;

    z-index: 850;

    display: block;

    border: 0;

    background:
      rgba(
        12,
        34,
        49,
        0.48
      );
  }

  .pro-layout-main {
    width: 100%;
    margin-left: 0;
  }

  .pro-layout-mobile-header {
    min-height: 62px;

    position: sticky;
    top: 0;
    z-index: 700;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0 16px;

    border-bottom:
      1px solid #dce6ed;

    background: #ffffff;
  }

  .pro-layout-mobile-header > button {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d2e0e9;
    border-radius: 8px;

    background: #ffffff;
    color: #225371;

    cursor: pointer;
  }

  .pro-layout-mobile-header > div {
    display: grid;
  }

  .pro-layout-mobile-header strong {
    color: #0b416a;
    font-size: 0.88rem;
  }

  .pro-layout-mobile-header small {
    color: #7d8f9d;
    font-size: 0.65rem;
  }

  .pro-layout-content .dashboard-topbar {
    min-height: auto;

    padding: 24px;
  }

  .pro-layout-content .dashboard-content {
    padding: 24px;
  }

  .pro-layout-content .profile-progress-card {
    grid-template-columns: 1fr;
  }

  .pro-layout-content .dashboard-two-column {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 600px) {
  .pro-layout-content .dashboard-topbar {
    align-items: flex-start;

    padding: 20px;
  }

  .pro-layout-content .dashboard-topbar h1 {
    font-size: 1.8rem;
  }

  .pro-layout-content .dashboard-content {
    padding: 18px;
  }

  .pro-layout-content .dashboard-summary-grid {
    grid-template-columns: 1fr;
  }

  .pro-layout-content .profile-progress-card {
    padding: 22px;
  }

  .pro-layout-content .dashboard-assignment-item {
    align-items: flex-start;
    flex-direction: column;
  }
}
:root {
  /* Brand colours */
  --primary-blue: #004a7c;
  --secondary-blue: #0a74c9;
  --dark-blue: #00375f;
  --accent-green: #00a676;

  /* Background colours */
  --background: #f5f8fb;
  --surface: #ffffff;
  --light-blue: #edf5f8;

  /* Text colours */
  --text-dark: #163247;
  --text-muted: #6b7c93;
  --text-light: #ffffff;

  /* Status colours */
  --success: #2eb872;
  --warning: #f4b400;
  --danger: #d93025;

  /* Borders and shadows */
  --border: #dce6ed;
  --shadow-small: 0 4px 12px rgba(0, 55, 95, 0.08);
  --shadow-medium: 0 12px 30px rgba(0, 55, 95, 0.14);

  /* Border radius */
  --radius-small: 5px;
  --radius-medium: 10px;
  --radius-large: 16px;

  /* Page width */
  --page-width: 1400px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #f5f8fb;
  background: var(--background);
  color: #163247;
  color: var(--text-dark);
  font-family: "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", Arial, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.app {
  min-height: 100vh;
}

.container {
  width: min(92%, 1400px);
  width: min(92%, var(--page-width));
  margin: 0 auto;
}

.primary-button {
  padding: 12px 20px;
  background: #00a676;
  background: var(--accent-green);
  color: #ffffff;
  border: 1px solid #00a676;
  border: 1px solid var(--accent-green);
  border-radius: 5px;
  border-radius: var(--radius-small);
  font-weight: 700;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.secondary-button {
  padding: 12px 20px;
  background: #ffffff;
  color: #004a7c;
  color: var(--primary-blue);
  border: 1px solid #004a7c;
  border: 1px solid var(--primary-blue);
  border-radius: 5px;
  border-radius: var(--radius-small);
  font-weight: 700;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 55, 95, 0.08);
  box-shadow: var(--shadow-small);
}


.statistics-section {
  padding: 85px 6%;
  background:
    linear-gradient(
      rgba(0, 55, 95, 0.94),
      rgba(0, 74, 124, 0.94)
    ),
    url("https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=1600&q=80")
      center/cover no-repeat;
  color: white;
}

.statistics-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.statistics-heading {
  max-width: 650px;
  margin-bottom: 45px;
}

.statistics-heading .section-label {
  margin-bottom: 10px;
  color: #5ee1bd;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.statistics-heading h2 {
  margin: 0;
  max-width: 600px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 22px;
  gap: 22px;
}

.statistic-card {
  padding: 30px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.statistic-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 13px;
  background: rgba(94, 225, 189, 0.16);
  color: #5ee1bd;
  display: grid;
  place-items: center;
  font-size: 21px;
}

.statistic-card strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.statistic-card span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

@media (max-width: 900px) {
  .statistics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .statistics-section {
    padding: 65px 20px;
  }

  .statistics-grid {
    grid-template-columns: 1fr;
  }
}
.how-section {
  padding: 95px 6%;
  background: #ffffff;
}

.how-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.how-heading {
  max-width: 700px;
  margin: 0 auto 52px;
  text-align: center;
}

.how-heading .section-label {
  margin-bottom: 10px;
  color: var(--accent-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.how-heading h2 {
  margin: 0;
  color: var(--primary-blue);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
}

.how-heading > p:last-child {
  margin: 18px auto 0;
  max-width: 650px;
  color: var(--text-muted);
  line-height: 1.75;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 22px;
  gap: 22px;
}

.how-card {
  position: relative;
  min-height: 285px;
  padding: 32px 26px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: var(--shadow-small);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.how-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 166, 118, 0.35);
  box-shadow: var(--shadow-medium);
}

.step-number {
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgba(0, 74, 124, 0.08);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

.how-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: rgba(0, 166, 118, 0.1);
  color: var(--accent-green);
  display: grid;
  place-items: center;
  font-size: 24px;
}

.how-card h3 {
  margin: 0 0 13px;
  color: var(--primary-blue);
  font-size: 21px;
}

.how-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1000px) {
  .how-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .how-section {
    padding: 70px 20px;
  }

  .how-grid {
    grid-template-columns: 1fr;
  }

  .how-card {
    min-height: auto;
  }
}
.audience-section {
  padding: 95px 6%;
  background: var(--background);
}

.audience-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.audience-card {
  width: 100%;
  min-width: 0;
  min-height: 420px;
  padding: 48px 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: hidden;

  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-small);

  color: #ffffff;
  text-align: center;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.audience-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-medium);
}

.audience-card > * {
  flex-shrink: 0;
}
.audience-professional {
  background:
    linear-gradient(
      rgba(0, 55, 95, 0.72),
      rgba(0, 55, 95, 0.72)
    ),
    url("https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&w=1200&q=85")
      center / cover no-repeat;
}

.audience-card:last-child {
  background:
    linear-gradient(
      rgba(0, 166, 118, 0.91),
      rgba(0, 120, 92, 0.91)
    ),
    url("https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=1200&q=85")
      center / cover no-repeat;
}

.audience-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;

  display: grid;
  place-items: center;
  flex-shrink: 0;

  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);

  color: #ffffff;
  font-size: 28px;
}

.audience-card h2 {
  width: 100%;
  margin: 0;

  color: #ffffff;
  font-size: 1.8rem;      /* Reduced from ~2.5rem */
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  white-space: nowrap;
}

.audience-buttons {
  width: 100%;
  margin-top: 32px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.audience-card .primary-button,
.audience-card .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.audience-card .primary-button {
  background: #ffffff;
  color: var(--primary-blue);
}

.audience-card:last-child .primary-button {
  color: #00785c;
}

.audience-card .primary-button:hover {
  background: #f3f7fa;
}

.audience-card .secondary-button {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
}

.audience-card .secondary-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 850px) {
  .audience-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .audience-section {
    padding: 70px 20px;
  }

  .audience-card {
    min-height: auto;
    padding: 40px 24px;
  }

  .audience-card h2 {
    font-size: 1.9rem;
  }

  .audience-buttons {
    flex-direction: column;
  }

  .audience-buttons a {
    width: 100%;
  }
  .audience-card p {
  font-size: 17px;
  line-height: 1.8;
}
}
/* ========================================
   HEALTHCARE HUB HERO
======================================== */

.news-hero {
  padding: 88px 6% 74px;
  background:
    linear-gradient(
      135deg,
      #004a7c,
      #0a74c9
    );
  color: #ffffff;
  text-align: center;
}

.news-container {
  width: min(1200px, 100%);
  margin: 0 auto;
}

.news-hero .section-label {
  margin: 0 0 14px;
  color: #66e0c2;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-hero h1 {
  max-width: 900px;
  margin: 0 auto 20px;
  color: #ffffff;
  font-size: clamp(
    2.5rem,
    5vw,
    4rem
  );
  line-height: 1.05;
}

.news-hero-copy {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(
    255,
    255,
    255,
    0.9
  );
  font-size: 1.05rem;
  line-height: 1.75;
}

/* ========================================
   NEWS SECTION
======================================== */

.news-section {
  padding: 64px 6% 90px;
  background: #f6f9fc;
}

/* ========================================
   FILTERS
======================================== */

.news-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 38px;
}

.news-filter {
  min-height: 42px;
  padding: 0 18px;

  border: 1px solid #dbe7ef;
  border-radius: 999px;

  background: #ffffff;
  color: #35556f;

  cursor: pointer;

  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.news-filter:hover {
  transform: translateY(-1px);

  border-color: #0a74c9;
  background: #eef7fd;
  color: #07558c;
}

.news-filter.active {
  border-color: #004a7c;
  background: #004a7c;
  color: #ffffff;
}

/* ========================================
   PAGE STATES
======================================== */

.news-state {
  min-height: 280px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 36px;

  border: 1px solid #dfe8ef;
  border-radius: 16px;

  background: #ffffff;

  text-align: center;
}

.news-state h2 {
  margin: 0;
  color: #064b79;
  font-size: 1.35rem;
}

.news-state p {
  max-width: 580px;
  margin: 10px 0 0;
  color: #6f8292;
  line-height: 1.6;
}

.news-error {
  border-color: #efc5c0;
  background: #fff7f6;
}

.news-loader {
  width: 34px;
  height: 34px;

  margin-bottom: 14px;

  border: 3px solid #dce8ef;
  border-top-color: #0a74c9;
  border-radius: 50%;

  animation:
    news-spin
    0.8s linear infinite;
}

@keyframes news-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   FEATURED ARTICLE
======================================== */

.news-featured-card {
  margin-bottom: 46px;

  overflow: hidden;

  border: 1px solid #d9e6ef;
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f4faff
    );

  box-shadow:
    0 16px 40px
    rgba(
      8,
      74,
      119,
      0.08
    );
}

.news-featured-content {
  padding: 38px;
}

.news-featured-card .news-category {
  margin-bottom: 16px;
}

.news-featured-card h2 {
  max-width: 900px;
  margin: 0 0 16px;

  color: #00375f;

  font-size: clamp(
    2rem,
    3vw,
    3rem
  );

  line-height: 1.15;
}

.news-featured-card p {
  max-width: 900px;

  margin: 0;

  color: #64748b;

  font-size: 1rem;
  line-height: 1.75;
}

/* ========================================
   SECTION HEADING
======================================== */

.news-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 24px;
}

.news-section-heading .section-label {
  margin: 0 0 5px;

  color: #00a676;

  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.news-section-heading h2 {
  margin: 0;

  color: #064b79;

  font-size: clamp(
    1.7rem,
    2.6vw,
    2.35rem
  );
}

/* ========================================
   ARTICLE GRID
======================================== */

.news-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        300px,
        1fr
      )
    );

  grid-gap: 24px;

  gap: 24px;
}

/* ========================================
   ARTICLE CARD
======================================== */

.news-card {
  min-height: 100%;

  display: flex;
  flex-direction: column;

  padding: 28px;

  border: 1px solid #dfe8ef;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 8px 24px
    rgba(
      0,
      0,
      0,
      0.05
    );

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.news-card:hover {
  transform:
    translateY(-5px);

  box-shadow:
    0 14px 32px
    rgba(
      0,
      0,
      0,
      0.08
    );
}

.news-category {
  display: inline-flex;
  align-items: center;

  align-self: flex-start;

  margin-bottom: 14px;
  padding: 6px 12px;

  border-radius: 999px;

  background: #e8f3ff;
  color: #004a7c;

  font-size: 0.72rem;
  font-weight: 800;

  text-transform: uppercase;
}

.news-card h2 {
  margin: 0 0 14px;

  color: #00375f;

  font-size: 1.35rem;
  line-height: 1.35;
}

.news-card > p {
  margin: 0;

  color: #64748b;

  line-height: 1.75;
}

/* ========================================
   ARTICLE META
======================================== */

.news-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;

  margin-top: auto;
  padding-top: 22px;

  color: #8b97a6;

  font-size: 0.77rem;
}

.news-meta span {
  min-width: 0;
}

.news-meta span:first-child {
  font-weight: 650;
}

/* ========================================
   ARTICLE LINK
======================================== */

.news-link {
  display: inline-block;

  margin-top: 20px;

  color: #0a74c9;

  text-decoration: none;

  font-size: 0.84rem;
  font-weight: 800;
}

.news-link:hover {
  color: #00a676;
}

.news-link.disabled {
  color: #98a6b2;
  cursor: default;
}

/* ========================================
   BUTTON
======================================== */

.news-section .primary-button {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 18px;
  padding: 0 20px;

  border: 0;
  border-radius: 8px;

  background: #0a74c9;
  color: #ffffff;

  cursor: pointer;

  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
}

/* ========================================
   TABLET
======================================== */

@media (
  max-width: 800px
) {
  .news-hero {
    padding:
      70px 6%
      58px;
  }

  .news-section {
    padding:
      48px 6%
      70px;
  }

  .news-featured-content {
    padding: 28px;
  }

  .news-meta {
    flex-direction: column;
    gap: 5px;
  }
}

/* ========================================
   MOBILE
======================================== */

@media (
  max-width: 520px
) {
  .news-hero h1 {
    font-size: 2.2rem;
  }

  .news-hero-copy {
    font-size: 0.94rem;
  }

  .news-filters {
    justify-content: flex-start;
  }

  .news-filter {
    min-height: 38px;

    padding: 0 14px;

    font-size: 0.78rem;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-card {
    padding: 23px;
  }

  .news-featured-content {
    padding: 24px;
  }

  .news-featured-card h2 {
    font-size: 1.8rem;
  }
}
.assignment-pro-section {
  padding: 95px 6%;
  background: #ffffff;
}

.assignment-pro-container {
  width: min(1200px, 100%);
  margin: 0 auto;
}

.assignment-pro-heading {
  max-width: 720px;
  margin-bottom: 40px;
}

.assignment-pro-heading .section-label {
  margin-bottom: 10px;
  color: var(--accent-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.assignment-pro-heading h2 {
  margin: 0;
  color: var(--primary-blue);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
}

.assignment-pro-heading > p:last-child {
  margin: 18px 0 0;
  color: var(--text-muted);
  line-height: 1.75;
}

.assignment-filters {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 24px;
}

.assignment-filters input,
.assignment-filters select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--text-dark);
  font: inherit;
  outline: none;
}

.assignment-filters input:focus,
.assignment-filters select:focus {
  border-color: var(--secondary-blue);
  box-shadow: 0 0 0 3px rgba(10, 116, 201, 0.12);
}

.assignment-results-header {
  margin-bottom: 22px;
  color: var(--text-dark);
}

.assignment-pro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 22px;
  gap: 22px;
}

.assignment-pro-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: var(--shadow-small);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.assignment-pro-card:hover {
  transform: translateY(-6px);
  border-color: rgba(10, 116, 201, 0.28);
  box-shadow: var(--shadow-medium);
}

.assignment-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.assignment-status,
.assignment-profession {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.assignment-status.new {
  background: rgba(0, 166, 118, 0.12);
  color: #007a58;
}

.assignment-status.urgent {
  background: rgba(217, 48, 37, 0.1);
  color: var(--danger);
}

.assignment-profession {
  background: var(--light-blue);
  color: var(--primary-blue);
}

.assignment-pro-card h3 {
  margin: 0;
  color: var(--primary-blue);
  font-size: 1.45rem;
  line-height: 1.3;
}

.assignment-facility {
  margin: 9px 0 0;
  color: var(--text-muted);
  font-weight: 600;
}

.assignment-details {
  margin-top: 24px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.assignment-details span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
}

.assignment-details svg {
  flex-shrink: 0;
  color: var(--accent-green);
}

.assignment-card-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.assignment-card-actions button {
  flex: 1 1;
  min-width: 130px;
}

.assignment-empty {
  margin-top: 20px;
  padding: 45px 20px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: var(--background);
  text-align: center;
}

.assignment-empty h3 {
  margin: 0;
  color: var(--primary-blue);
}

.assignment-empty p {
  margin: 10px 0 0;
  color: var(--text-muted);
}

@media (max-width: 950px) {
  .assignment-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .assignment-pro-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .assignment-pro-section {
    padding: 70px 20px;
  }

  .assignment-filters {
    grid-template-columns: 1fr;
  }

  .assignment-pro-card {
    padding: 23px 20px;
  }

  .assignment-card-actions {
    flex-direction: column;
  }

  .assignment-card-actions button {
    width: 100%;
  }
}
/* ===== Save Assignment Button ===== */

.assignment-save-button {
  margin-left: auto;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background: #f4f7fb;
  color: #8a98a8;

  cursor: pointer;

  transition: all 0.25s ease;
}

.assignment-save-button:hover {
  background: #ffe8eb;
  color: #e53935;
  transform: scale(1.08);
}

.assignment-save-button svg {
  font-size: 18px;
}

.assignment-save-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
}
.assignment-detail-section {
  padding: 90px 6%;
  background: var(--background);
}

.assignment-detail-container {
  width: min(1180px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-gap: 30px;
  gap: 30px;
  align-items: start;
}

.assignment-detail-main {
  padding: 38px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--shadow-small);
}

.assignment-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.assignment-detail-header h1 {
  width: 100%;
  margin: 14px 0 0;
  color: var(--primary-blue);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.assignment-detail-header p {
  width: 100%;
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 17px;
  font-weight: 600;
}

.assignment-detail-info {
  margin-top: 30px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;

  border-radius: 16px;
  background: var(--light-blue);
}

.assignment-detail-info span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dark);
  font-size: 14px;
}

.assignment-detail-info svg {
  flex-shrink: 0;
  color: var(--accent-green);
}

.assignment-detail-content {
  margin-top: 36px;
}

.assignment-detail-content h2 {
  margin: 30px 0 12px;
  color: var(--primary-blue);
  font-size: 1.45rem;
}

.assignment-detail-content p,
.assignment-detail-content li {
  color: var(--text-muted);
  line-height: 1.8;
}

.assignment-detail-content ul {
  margin: 0;
  padding-left: 22px;
}

.assignment-detail-content li + li {
  margin-top: 8px;
}

.assignment-apply-card {
  position: sticky;
  top: 25px;

  padding: 30px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-medium);
}

.assignment-apply-card h2 {
  margin: 0;
  color: var(--primary-blue);
  font-size: 1.55rem;
  line-height: 1.3;
}

.assignment-apply-card p {
  margin: 15px 0 24px;
  color: var(--text-muted);
  line-height: 1.7;
}

.assignment-apply-button,
.assignment-register-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.assignment-register-button {
  margin-top: 12px;
}

.assignment-back-link {
  margin-top: 22px;
  display: block;
  color: var(--primary-blue);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.assignment-not-found {
  grid-column: 1 / -1;
  padding: 80px 25px;
  border-radius: 20px;
  background: #ffffff;
  text-align: center;
  box-shadow: var(--shadow-small);
}

.assignment-not-found h1 {
  margin: 0;
  color: var(--primary-blue);
}

.assignment-not-found p {
  margin: 14px 0 28px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .assignment-detail-container {
    grid-template-columns: 1fr;
  }

  .assignment-apply-card {
    position: static;
  }
}

@media (max-width: 600px) {
  .assignment-detail-section {
    padding: 65px 20px;
  }

  .assignment-detail-main {
    padding: 28px 20px;
  }

  .assignment-detail-info {
    grid-template-columns: 1fr;
  }
}
.saved-jobs-section {
  padding: 90px 6%;
  background: var(--background);
}

.saved-jobs-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.saved-jobs-header {
  max-width: 700px;
  margin-bottom: 42px;
}

.saved-jobs-header .section-label {
  margin-bottom: 10px;
  color: var(--accent-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saved-jobs-header h1 {
  margin: 0;
  color: var(--primary-blue);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.15;
}

.saved-jobs-header > p:last-child {
  margin: 18px 0 0;
  color: var(--text-muted);
  line-height: 1.75;
}

.saved-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.saved-card {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: var(--shadow-small);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.saved-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
}

.saved-card h2 {
  margin: 18px 0 8px;
  color: var(--primary-blue);
  font-size: 1.5rem;
  line-height: 1.3;
}

.saved-card p {
  margin: 8px 0;
  color: var(--text-muted);
}

.saved-card h3 {
  margin: 20px 0 0;
  color: var(--accent-green);
  font-size: 1.35rem;
}

.saved-buttons {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.saved-buttons a {
  flex: 1 1;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.saved-empty {
  padding: 70px 25px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: #ffffff;
  text-align: center;
}

.saved-empty h2 {
  margin: 0;
  color: var(--primary-blue);
}

.saved-empty p {
  margin: 14px 0 28px;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .saved-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .saved-jobs-section {
    padding: 70px 20px;
  }

  .saved-card {
    padding: 24px 20px;
  }

  .saved-buttons {
    flex-direction: column;
  }

  .saved-buttons a {
    width: 100%;
  }
}

/*# sourceMappingURL=main.a8263e0d.css.map*/