/* --- Paste this into public/assets/css/style.css --- */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f6f9; /* light background to highlight box */
}

/* ✅ Force boxed layout on desktop only */
@media (min-width: 992px) {
  .container {
    max-width: 1000px;  /* adjust if needed */
    margin: 0 auto;
    border: 1px solid rgb(106 129 145 / 60%);;
  }

  /* Add shadows + left/right borders */
  .top-header > .container,
  .nav-bar > .container,
  .footer > .container {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Top header */
.top-header {
  background: transparent;
  padding: 0;
}
.top-header > .container {
  background: #fff;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo img {
  max-height: 80px;
}
.login-btn {
  background: linear-gradient(to bottom, #2ea3f2, #005c9c);
  color: #fff;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
  border: none;
  white-space: nowrap;
  text-decoration: none;
}
.login-btn:hover {
  background: linear-gradient(to bottom, #1b8bd8, #004c7f);
}
.social-icons a {
  color: #a24900;
  font-size: 30px;
  margin-right: 10px;
  text-decoration: none;
}

/* Navigation bar */
.nav-bar {
  background: transparent;
  padding: 0;
}
.nav-bar > .container {
  background-color: #0d73b9;
  padding: 6px 0;
}
.nav-bar .nav-link {
  color: #fff !important;
  font-weight: 500;
  padding: 10px 15px;
}
.nav-bar .nav-link:hover {
  background: #085b90;
  border-radius: 4px;
}

/* Footer */
.footer {
  background: transparent;
  padding: 0;
}
.footer > .container {
  background: #0d73b9;
  color: #fff;
  text-align: center;
  padding: 14px 0;
}
.footer p {
  margin: 0;
  font-size: 14px;
}
.footer-links {
  margin-top: 5px;
}
.footer-links a {
  color: #fff;
  margin: 0 10px;
  font-size: 14px;
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}

/* -------------------------
   Modern Candidate Login Box
   ------------------------- */
.login-box {
  max-width: 420px;
  margin: 50px auto;
  background: #fbfcff;                      /* soft card background */
  padding: 28px 30px 26px;
  border-radius: 12px;
  border: 1px solid rgba(13,115,185,0.08);
  box-shadow:
    0 18px 40px rgb(10 20 40 / 39%), inset 0 3px 14px rgb(11 116 182 / 0%); /* subtle inner highlight */
  position: relative;
  overflow: visible;
}

/* thin multi-color top accent bar (like screenshot) */
.login-box::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1f9abb, #3aa1c7, #8b59b6, #d4686f, #f4af3b);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.login-box h2 {
  text-align: center;
  margin: 22px 0 18px; /* adjusted to account for top accent bar */
  font-size: 22px;
  font-weight: 700;
  color: #197a91; /* teal accent */
  letter-spacing: 0.2px;
}

/* small colored underline under title */
.login-box .title-underline {
  width: 72px;
  height: 6px;
  margin: 6px auto 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #197a91, #f4af3b, #8b3f78);
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}

.form-control {
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 12px 14px;
  background: #fff9c6; /* pale yellow inside inputs */
  font-size: 15px;
  color: #0b0b0b;
}
.form-control::placeholder { color: #666; font-weight:500; }

.form-control:focus {
  border-color: #0d73b9;
  box-shadow: 0 8px 24px rgba(13,115,185,0.12);
  outline: none;
  transform: translateY(-1px);
}

/* make password input and eye icon sit nicely */
.password-wrap {
  position: relative;
}
.toggle-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 16px;
  color: #475059;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toggle-eye:active { transform: translateY(-50%) scale(0.98); }

.login-submit {
  background: linear-gradient(90deg, #197a91 0%, #6f3f78 100%);
  color: #fff;
  border-radius: 30px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(20,20,40,0.12);
  border: none;
  width: 100%;
  margin-top: 8px;
}
.login-submit:active { transform: translateY(1px); }

.login-links {
  text-align: center;
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.login-links a {
  display: inline-flex;
  align-items:center;
  gap:8px;
  color: #197a91;
  font-size: 14px;
  text-decoration: none;
  font-weight:600;
}
.login-links a:hover { text-decoration: underline; }

 /* remember checkbox row */
.remember-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 6px;
  color: #555;
  font-size: 14px;
}
.remember-row input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#197a91;
}

/* small screens: keep it centered and responsive */
@media (max-width: 576px) {
  .login-box {
    margin: 28px 18px;
    padding: 22px;
  }
  .login-box h2 { font-size: 20px; margin-top: 18px; }
  .login-box::before{ left: 14px; right: 14px; top: 10px; }
}

/* Accessibility focus outlines */
.login-box .form-control:focus,
.login-box .toggle-eye:focus,
.login-box .login-submit:focus,
.login-links a:focus {
  outline: 3px solid rgba(13,115,185,0.12);
  outline-offset: 3px;
}


/* -------------------------------------------------------
   Company Login styles (appended — does not modify other CSS)
   ------------------------------------------------------- */

/* Company login card styles */
.company-login-wrap{
  padding: 36px 16px;
  display:flex;
  justify-content:center;
}
.company-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:14px;
  padding:40px 26px 22px;
  box-shadow: 0 12px 30px rgb(10 20 40 / 34%);
  position:relative;
  overflow:visible;
  border: 1px solid rgba(13,115,185,0.06);
}

/* thin multi-color top accent bar */
.company-card .top-accent{
  height:6px;
  width:100%;
  margin: -16px auto 14px auto;
  border-radius:6px;
  background: linear-gradient(90deg,#1f9abb,#8b59b6,#d4686f,#f4af3b);
  box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}

/* Title and underline */
.company-title{
  text-align:center;
  color:#0f748c;
  font-size:24px;
  margin:4px 0 6px;
  font-weight:700;
}
.small-underline{
  width:64px;
  height:8px;
  margin:0 auto 12px auto;
  border-radius:8px;
  background: linear-gradient(90deg,#197a91,#8b59b6,#f4af3b);
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}

/* Tabs */
.role-toggle{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:10px 0 8px;
}
.role-tab{
  border-radius:14px;
  padding:8px 18px;
  background:#f6f9fb;
  border:1px solid rgba(13,115,185,0.06);
  font-weight:700;
  color:#3b6b73;
  cursor:pointer;
  box-shadow:none;
}
.role-tab.active{
  background: linear-gradient(90deg,#197a91,#6f3f78);
  color:#fff;
  box-shadow: 0 8px 22px rgba(20,20,40,0.08);
}

/* note */
.muted-note{
  text-align:center;
  color:#446569;
  font-size:13px;
  margin:8px 0 12px;
}
.muted-strong{ color:#0f748c; font-weight:700; }

/* form */
.company-form{ margin-top:6px; }
.field-label{
  display:block;
  font-weight:600;
  color:#0f6b78;
  margin-bottom:8px;
}
.form-input{
  width:100%;
  display:block;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff9c6; /* pale yellow */
  font-size:15px;
  color:#111;
  box-shadow:none;
}
.input-with-eye{
  position:relative;
}
.eye-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:#475059;
  border-radius:8px;
  cursor:pointer;
}
.eye-btn:active{ transform:translateY(-50%) scale(0.98); }

/* remember + submit */
.remember{ font-weight:600; color:#444; display:inline-flex; gap:8px; align-items:center; }
.btn-login{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:30px;
  background: linear-gradient(90deg,#197a91,#6f3f78);
  color:#fff;
  border:none;
  font-weight:700;
  box-shadow: 0 10px 28px rgba(20,20,40,0.12);
  cursor:pointer;
}

/* bottom links */
.links-row{ text-align:center; padding-top:8px; border-top:1px solid rgba(13,115,185,0.03); margin-top:16px; padding-top:14px; }
.link-small{ color:#197a91; font-weight:700; text-decoration:none; font-size:14px; }
.link-small i{ margin-right:6px; }

/* Responsive */
@media (max-width:480px){
  .company-card{ padding:20px 16px; max-width:360px; }
  .role-tab{ padding:7px 12px; }
}