@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --royal:#003687;
  --royal-light:#1F5FC4;
  --royal-dark:#00224F;
  --navy:#00224F;
  --navy-deep:#001630;
  --slate:#1B3B6F;
  --silver:#A2A2A3;
  --silver-light:#D6D7D9;
  --paper:#F5F4F0;
  --paper-line:#E3E0D6;
  --brass:var(--royal);
  --brass-light:var(--silver-light);
  --teal:#2F6363;
  --ink:#1A1D22;
  --muted:#6B6E76;
  --danger:#B3432B;
  --success:#1F6B44;
  --radius:6px;
  --shadow:0 1px 3px rgba(0,34,79,.08), 0 1px 2px rgba(0,34,79,.06);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;}
a{color:var(--teal);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,.brand{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.01em;}

/* ---- Top bar (shared) ---- */
header.topbar{
  background:linear-gradient(180deg, var(--navy-deep), #002050 60%, var(--navy-deep));
  color:#fff;
  padding:14px 28px;
  border-bottom:1px solid rgba(166,168,172,.18);
}
header.topbar .topbar-inner{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  min-height:44px;
}
header.topbar .brand{
  font-size:18px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  text-align:left;
}
header.topbar .brand:hover{text-decoration:none;}
header.topbar .brand-logo{
  height:44px;
  width:auto;
  display:block;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.35));
}
header.topbar .brand-text{display:flex;flex-direction:column;line-height:1.25;}
header.topbar .brand small{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silver-light);
}
header.topbar .brand-rpsl{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.03em;
  text-transform:none;
  color:var(--silver-light);
  opacity:.85;
  margin-top:1px;
}
header.topbar nav{
  display:flex;
  align-items:center;
}
header.topbar nav a{
  color:#C8D2E0;
  font-size:14px;
  font-weight:500;
  margin-left:20px;
}
header.topbar nav a:hover{color:#fff;text-decoration:none;}
header.topbar .admin-user{font-size:13px;color:#9FB0C8;}

@media (min-width:640px){
  header.topbar .topbar-inner nav{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
}

/* ---- Hero ---- */
.hero{
  background:var(--navy-deep);
  color:#fff;
  padding:44px 28px 40px;
}
.hero .eyebrow{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-light);font-weight:700;margin-bottom:8px;
}
.hero h1{font-size:clamp(26px,5vw,38px);margin:0 0 8px;color:#fff;line-height:1.1;}
.hero p{margin:0;font-size:15px;color:#C8D2E0;max-width:560px;}

/* ---- Layout ---- */
.wrap{max-width:980px;margin:0 auto;padding:0 24px;}
main.page{padding:32px 0 60px;}
.section-title{
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);margin:0 0 16px;
}

/* ---- Vacancy cards ---- */
.vacancy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.vacancy-card{
  background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(16px);
  animation:cardRise .55s cubic-bezier(.21,.75,.34,1) forwards;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vacancy-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 28px rgba(0,34,79,.14), 0 4px 10px rgba(0,34,79,.08);
  border-color:var(--royal-light);
}
.vacancy-grid .vacancy-card:nth-child(1){animation-delay:.02s;}
.vacancy-grid .vacancy-card:nth-child(2){animation-delay:.09s;}
.vacancy-grid .vacancy-card:nth-child(3){animation-delay:.16s;}
.vacancy-grid .vacancy-card:nth-child(4){animation-delay:.23s;}
.vacancy-grid .vacancy-card:nth-child(5){animation-delay:.30s;}
.vacancy-grid .vacancy-card:nth-child(n+6){animation-delay:.36s;}
@keyframes cardRise{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.vacancy-card .rank{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--navy);}
.vacancy-card .vessel{font-size:13px;color:var(--muted);}
.vacancy-card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);margin-top:2px;}
.vacancy-card .meta strong{color:var(--ink);}
.vacancy-card .desc{font-size:13px;color:#3d3f45;line-height:1.5;flex-grow:1;}
.vacancy-card .apply-btn{
  align-self:flex-start;background:linear-gradient(135deg,var(--royal),var(--royal-light));
  color:#fff;font-weight:700;padding:9px 18px;border-radius:var(--radius);font-size:13.5px;
  margin-top:4px;transition:filter .18s ease, transform .18s ease;
}
.vacancy-card .apply-btn:hover{filter:brightness(1.1);transform:translateX(2px);text-decoration:none;}
.empty-state{
  background:#fff;border:1px dashed var(--paper-line);border-radius:var(--radius);
  padding:32px;text-align:center;color:var(--muted);font-size:14px;
}
@media (prefers-reduced-motion: reduce){
  .vacancy-card{animation:none;opacity:1;transform:none;}
  .vacancy-card:hover{transform:none;}
}

/* ---- General application CTA ---- */
.general-cta{
  background:linear-gradient(135deg, var(--royal-dark), var(--royal));
  border-radius:var(--radius);padding:22px 24px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  box-shadow:var(--shadow);color:#fff;
}
.general-cta h2{margin:0 0 4px;font-size:17px;font-family:'Manrope',sans-serif;}
.general-cta p{margin:0;font-size:13.5px;color:var(--silver-light);max-width:480px;}
.general-cta .btn{background:#fff;color:var(--royal-dark);flex-shrink:0;}
.general-cta .btn:hover{filter:none;background:var(--silver-light);}

/* ---- Apply layout with vacancy sidebar ---- */
.apply-layout{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:860px){
  .apply-layout{grid-template-columns:minmax(0,720px) 1fr;align-items:start;}
}
.vac-sidebar{position:sticky;top:20px;}
.vac-sidebar .section-title{margin-bottom:12px;}
.vac-sidebar-list{display:flex;flex-direction:column;gap:10px;}
.vac-mini{
  background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:13px 15px;display:block;transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  opacity:0;transform:translateX(10px);animation:miniIn .45s ease forwards;
}
.vac-mini:nth-child(1){animation-delay:.04s;}
.vac-mini:nth-child(2){animation-delay:.1s;}
.vac-mini:nth-child(3){animation-delay:.16s;}
.vac-mini:nth-child(n+4){animation-delay:.22s;}
@keyframes miniIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}
.vac-mini:hover{border-color:var(--royal-light);box-shadow:0 6px 16px rgba(0,34,79,.1);transform:translateX(-2px);text-decoration:none;}
.vac-mini.active{border-color:var(--royal);background:#F2F6FC;}
.vac-mini .rank{font-weight:800;font-size:14px;color:var(--navy);font-family:'Manrope',sans-serif;}
.vac-mini .vessel{font-size:12px;color:var(--muted);margin-top:2px;}
.vac-mini .tags{font-size:11.5px;color:var(--muted);margin-top:4px;}
.vac-empty-mini{font-size:13px;color:var(--muted);background:#fff;border:1px dashed var(--paper-line);border-radius:var(--radius);padding:16px;text-align:center;}

/* ---- Forms (shared) ---- */
.card{background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);box-shadow:var(--shadow);}
fieldset{border:none;margin:0;padding:22px 24px 4px;border-bottom:1px solid var(--paper-line);}
fieldset:last-of-type{border-bottom:none;}
legend{font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--slate);padding:0 0 14px;}
.field{margin-bottom:16px;}
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--navy);}
label .req{color:var(--danger);margin-left:2px;}
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=password],select,textarea{
  width:100%;padding:10px 12px;font-size:14.5px;font-family:inherit;
  border:1px solid #CBC5B3;border-radius:var(--radius);background:#fff;color:var(--ink);
}
textarea{resize:vertical;min-height:90px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.hint{font-size:12px;color:var(--muted);margin-top:5px;}
.checkbox-group{display:flex;flex-wrap:wrap;gap:10px 18px;}
.checkbox-group label{display:flex;align-items:center;gap:7px;font-weight:500;font-size:14px;margin:0;}
.checkbox-group input{width:16px;height:16px;accent-color:var(--teal);}

.file-drop{
  border:1.5px dashed #B8AF98;border-radius:var(--radius);padding:20px;text-align:center;
  font-size:13px;color:var(--muted);background:#FBFAF6;cursor:pointer;transition:border-color .2s;
}
.file-drop.has-file{border-color:var(--teal);color:var(--teal);background:#F1F7F6;}
.file-drop strong{color:var(--navy);}
input[type=file]{display:none;}

.submit-wrap{padding:22px 24px;}
.btn{
  display:inline-block;background:var(--brass);color:var(--navy-deep);border:none;
  padding:12px 20px;font-size:14px;font-weight:700;letter-spacing:.01em;
  font-family:'Manrope',sans-serif;border-radius:var(--radius);cursor:pointer;transition:filter .15s;
}
.btn:hover{filter:brightness(1.06);text-decoration:none;}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-block{width:100%;text-align:center;}
.btn-outline{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12.5px;}

.status-msg{margin-top:14px;padding:12px 14px;border-radius:var(--radius);font-size:14px;}
.status-msg.success{background:#E7F1EA;color:var(--success);border:1px solid #BEDFCA;}
.status-msg.error{background:#FBE9E4;color:#7A2E1C;border:1px solid #F0C6B7;}
.status-msg.info{background:#EAF1F7;color:var(--slate);border:1px solid #C9DAEB;}

footer.foot{text-align:center;font-size:12px;color:var(--muted);padding:30px 20px 40px;}

/* ---- Admin shell ---- */
.admin-shell{display:flex;min-height:calc(100vh - 62px);}
.admin-sidebar{
  width:210px;background:var(--navy);color:#fff;padding:20px 0;flex-shrink:0;
}
.admin-sidebar a{
  display:block;padding:11px 22px;color:#C8D2E0;font-size:14px;font-weight:500;
}
.admin-sidebar a:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff;}
.admin-sidebar a.active{background:var(--brass);color:var(--navy-deep);font-weight:700;}
.admin-main{flex-grow:1;padding:26px 30px;max-width:1100px;}
.admin-main h1{font-size:22px;margin:0 0 4px;color:var(--navy);}
.admin-main .page-sub{color:var(--muted);font-size:13.5px;margin:0 0 22px;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px;}
.stat-card{background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.stat-card .num{font-family:'Manrope',sans-serif;font-weight:800;font-size:28px;color:var(--navy);}
.stat-card .label{font-size:12.5px;color:var(--muted);margin-top:2px;}

table.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
table.data-table th,table.data-table td{padding:11px 14px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--paper-line);}
table.data-table th{background:#F0EEE7;color:var(--slate);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table tr:hover td{background:#FAF9F5;}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.02em;}
.badge-open,.badge-New{background:#EAF1F7;color:var(--slate);}
.badge-closed{background:#EFEBE3;color:var(--muted);}
.badge-Shortlisted{background:#FBF0DC;color:#93650F;}
.badge-Hired{background:#E7F1EA;color:var(--success);}
.badge-Rejected{background:#FBE9E4;color:#7A2E1C;}

.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;}
.filter-bar select,.filter-bar input{padding:8px 10px;font-size:13.5px;}

.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--navy-deep);padding:20px;
}
.login-card{background:#fff;border-radius:var(--radius);padding:32px;max-width:380px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.login-card .brand{color:var(--navy);font-size:18px;margin-bottom:4px;justify-content:flex-start;}
.login-card .brand-logo{height:38px;}
.login-card p.sub{color:var(--muted);font-size:13px;margin:0 0 22px;}

@media (max-width: 720px){
  .admin-shell{flex-direction:column;}
  .admin-sidebar{width:100%;display:flex;overflow-x:auto;padding:8px;}
  .admin-sidebar a{padding:9px 14px;white-space:nowrap;}
}

/* ---- Share buttons (vacancy cards + admin table) ---- */
.share-row{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;
}
.share-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:12px;
  padding:6px 10px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;line-height:1;white-space:nowrap;
  text-decoration:none !important;color:#fff;
  transition:opacity .15s ease;
}
.share-btn:hover{opacity:.88;}
.share-wa{background:#25D366;}
.share-wa-direct{background:#128C7E;}
.share-fb{background:#1877F2;}
.share-li{background:#0A66C2;}
.share-all{background:var(--royal);}
.share-copy{background:#fff;color:var(--slate) !important;border-color:var(--silver-light);}
.share-copy:hover{background:var(--paper);}
.share-btn:disabled{opacity:.7;cursor:default;}

.vacancy-card .share-row{border-top:1px dashed var(--paper-line);padding-top:12px;}
.data-table .share-row{margin-top:0;}

@media (max-width: 520px){
  .share-btn{font-size:11.5px;padding:6px 9px;}
}