@import url("./css/core/variables.css?v=161");
@import url("./css/core/reset.css?v=161");
@import url("./css/core/layout.css?v=161");
@import url("./css/components/ocean-background.css?v=161");
@import url("./css/components/landing-brand.css?v=161");
@import url("./css/components/topbar.css?v=161");
@import url("./css/core/utilities.css?v=161");

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

@import url("./css/components/cards.css?v=161");
@import url("./css/components/buttons.css?v=161");
@import url("./css/components/forms.css?v=161");
@import url("./css/components/modals.css?v=161");
@import url("./css/components/pills.css?v=161");
@import url("./css/components/lists.css?v=161");
@import url("./css/components/actions.css?v=161");
@import url("./css/components/meta-grid-cards.css?v=161");
@import url("./css/components/tables.css?v=161");
@import url("./css/components/badges.css?v=161");
@import url("./css/components/badge-unlock.css?v=161");
@import url("./css/components/feedback.css?v=161");
@import url("./css/components/signature-pad.css?v=161");
/* progress bar styles live in css/components/pills.css */

/* =========================================
   PAGE STYLES
========================================= */

@import url("./css/pages/dashboard.css?v=161");
@import url("./css/pages/profile.css?v=161");
@import url("./css/pages/certificates.css?v=161");
@import url("./css/pages/seatime.css?v=161");
@import url("./css/pages/references.css?v=161");
@import url("./css/pages/vessels.css?v=161");
@import url("./css/pages/tenders.css?v=161");
@import url("./css/pages/achievements.css?v=161");
@import url("./css/pages/navigation.css?v=161");
@import url("./css/pages/onboard-experience.css?v=161");
@import url("./css/pages/hobbies-interests.css?v=161");
@import url("./css/pages/specialist-qualifications.css?v=161");
@import url("./css/pages/payslips.css?v=161");
@import url("./css/pages/public-profile.css?v=161");
@import url("./css/pages/verify-reference.css?v=161");
@import url("./css/pages/cv-generator.css?v=161");
@import url("./css/pages/info.css?v=161");
@import url("./css/pages/legal.css?v=161");

/* Auth / Public */
@import url("./css/pages/index.css?v=161");
@import url("./css/pages/signup.css?v=161");
@import url("./css/pages/auth.css?v=161");

/* =========================================
   TYPOGRAPHY (after pages — wins over page rules)
========================================= */

@import url("./css/core/typography.css?v=161");

/* =========================================
   RESPONSIVE
========================================= */

@import url("./css/responsive/mobile.css?v=161");

/* Logo sizes — embedded in styles.css (not @import) so cache cannot drop them */

img.seav-logo--auth,
body.index-page .container > .logo,
body.signup-page .container > .logo {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0 !important;
  height: auto !important;
}

img.seav-logo--topbar,
.app-topbar .brand img,
.public-topbar .brand img {
  width: auto !important;
  height: 34px !important;
  max-height: 34px !important;
  min-width: 0 !important;
}

body.info-page img.seav-logo--info,
body.info-page .info-logo {
  width: 95px !important;
  max-width: 95px !important;
  min-width: 0 !important;
  height: auto !important;
  margin-bottom: 4px;
}

.legal-brand img,
img.seav-logo--legal {
  display: block;
  width: auto !important;
  height: 16px !important;
  max-height: 16px !important;
}

.public-cv-brand img,
img.seav-logo--public {
  display: block;
  width: auto !important;
  height: 14px !important;
  max-height: 14px !important;
}

.verify-reference-logo,
img.seav-logo--verify {
  display: block;
  width: 27px !important;
  max-width: 27px !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 auto 18px;
}

.cv-brand-mark {
  width: 7.5mm !important;
}

@media (max-width: 1000px) {
  body[data-topbar="public"] .brand img,
  body[data-topbar="public"] img.seav-logo--topbar {
    height: 29px !important;
    max-height: 29px !important;
  }
}

@media (max-width: 640px) {
  img.seav-logo--auth,
  body.index-page .container > .logo,
  body.signup-page .container > .logo {
    width: 95px !important;
    max-width: 95px !important;
  }

  body.info-page img.seav-logo--info,
  body.info-page .info-logo {
    width: 70px !important;
    max-width: 70px !important;
  }

  body[data-topbar="public"] .brand img,
  body[data-topbar="public"] img.seav-logo--topbar {
    height: 26px !important;
    max-height: 26px !important;
  }
}

/* Tender proficiency pills — embedded (not @import) so deploy/cache cannot drop alignment */
#tendersGrid .vessel-meta-value:has(.tender-proficiency-pill) {
  display: flex;
  justify-content: center;
}

#tendersGrid .vessel-meta-value .tender-proficiency-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  min-height: var(--pill-height);
  padding: 0 var(--pill-padding-x) !important;
  color: #ffffff !important;
  font-size: var(--pill-font-size) !important;
  font-weight: var(--pill-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* Meta-grid cards — embedded so deploy/cache cannot drop layout (see css/components/meta-grid-cards.css) */
#tendersGrid .vessel-card,
#refsList .ref-page-card {
  overflow: hidden;
  border-radius: var(--seav-meta-card-radius, 24px);
  background: var(
    --seav-meta-card-bg,
    linear-gradient(180deg, rgba(20, 38, 61, 0.82), rgba(12, 28, 48, 0.76))
  );
  box-shadow: var(--seav-meta-card-shadow, 0 12px 26px rgba(0, 0, 0, 0.18));
}

#tendersGrid .vessel-card {
  border: 1px solid var(--seav-meta-card-border-green, rgba(76, 255, 184, 0.18));
}

#refsList .ref-page-card {
  border: 1px solid var(--seav-meta-card-border-purple, rgba(209, 107, 255, 0.24));
}

#refsList .ref-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

#refsList .ref-card-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #6f42ff, #d16bff);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

#refsList .ref-card-title {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}

#refsList .ref-card-subtitle {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.70);
  font-size: 14px;
  font-weight: 500;
}

#refsList {
  display: grid;
  gap: 16px;
}

#tendersGrid .vessel-meta-grid,
#refsList .ref-page-card .vessel-meta-grid {
  display: grid;
  gap: var(--seav-meta-grid-gap, 10px);
}

#tendersGrid .vessel-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#refsList .ref-page-card .vessel-meta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#tendersGrid .vessel-meta-item,
#refsList .ref-page-card .vessel-meta-item {
  padding: var(--seav-meta-item-padding, 10px);
  border-radius: var(--seav-meta-item-radius, 14px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
}

#refsList .ref-page-card .ref-meta-span-full {
  grid-column: 1 / -1;
}

#tendersGrid .vessel-meta-label,
#refsList .ref-page-card .vessel-meta-label {
  display: block;
  margin-bottom: 5px;
  color: var(--seav-meta-label-color, #5bbcff);
  font-size: var(--seav-meta-label-size, 11px);
  line-height: 1.2;
  font-weight: var(--seav-meta-label-weight, 800);
}

#tendersGrid .vessel-meta-value,
#refsList .ref-page-card .vessel-meta-value {
  display: block;
  color: var(--seav-meta-value-color, rgba(255, 255, 255, 0.84));
  font-size: var(--seav-meta-value-size, 14px);
  line-height: 1.45;
  font-weight: var(--seav-meta-value-weight, 600);
}

@media (max-width: 1100px) {
  #refsList .ref-page-card .vessel-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #refsList .ref-page-card .vessel-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* Verify reference confirm checkbox — embedded so cache cannot drop layout fix */
.verify-reference-page .modal-check {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}

.verify-reference-page .modal-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.verify-reference-page .modal-form input:not([type="checkbox"]):not([type="radio"]),
.verify-reference-page .modal-form select,
.verify-reference-page .modal-form textarea {
  width: 100%;
}

/* Verify reference attachment preview — embedded so cache cannot drop layout fix */
.verify-reference-page .verify-reference-attachment-body {
  width: 100%;
  min-width: 0;
}

.verify-reference-page .verify-reference-attachment-preview {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 200px;
  max-height: 200px;
  padding: 10px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  line-height: 0;
  text-align: center;
}

.verify-reference-page .verify-reference-attachment-image {
  display: inline-block;
  max-width: 100% !important;
  max-height: 180px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  object-fit: contain !important;
  object-position: center;
  vertical-align: middle;
}

.verify-reference-page a.reference-modern-attachment.verify-reference-attachment-open {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px !important;
  border: 1px solid rgba(91, 188, 255, 0.28) !important;
  background: rgba(91, 188, 255, 0.12) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Public profile — centered 75% column over animated ocean */
body.public-profile-page .public-profile-main {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  width: min(75vw, 1180px) !important;
  max-width: 75vw !important;
  margin: 0 auto !important;
  padding: 14px 16px 32px !important;
  box-sizing: border-box !important;
  min-height: auto !important;
  overflow: visible !important;
}

body.public-profile-page .public-profile-content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}

body.public-profile-page .public-profile-topbar-inner {
  width: min(75vw, 1180px) !important;
  max-width: 75vw !important;
  margin: 0 auto !important;
}

body.public-profile-page .public-profile-shell,
body.public-profile-page .dashboard-shell-card {
  width: 100% !important;
}

@media (max-width: 900px) {
  body.public-profile-page .public-profile-main,
  body.public-profile-page .public-profile-topbar-inner {
    width: min(94vw, 100%) !important;
    max-width: 94vw !important;
  }
}

/* Public profile ocean — embedded so stale @import cache cannot drop it */
body.public-profile-page {
  background: transparent !important;
}

body.public-profile-page .ocean {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 200% !important;
  min-height: 100vh !important;
  pointer-events: none !important;
  background-color: #0b1c2e !important;
  background-image:
    linear-gradient(180deg, rgba(8, 18, 35, 0.2) 0%, rgba(11, 28, 46, 0.85) 100%),
    url("/img/ocean.png") !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, repeat-x !important;
  animation: publicProfileWaveMove 60s linear infinite !important;
}

body.public-profile-page .overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  min-height: 100vh !important;
  pointer-events: none !important;
  background: rgba(8, 18, 35, 0.45) !important;
}

@keyframes publicProfileWaveMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}