/* ts-resumes-ui.css
   Yacht / Modern: wide, airy forms for profile, resume submit, login.
   Place: wp-content/mu-plugins/ts-resumes-ui/ts-resumes-ui.css
*/

/* ---- Theme variables (easy tuning) ---- */
:root{
  --yacht-blue-1: #078bff;
  --yacht-blue-2: #0065d6;
  --yacht-navy:  #053566;
  --yacht-accent:#bde9ff;
  --bg-light:    #f6fbff;
  --panel-bg:    #ffffff;
  --muted:       #526a83;
  --radius-lg:   14px;
  --radius-md:   10px;
  --input-height:52px;
  --transition:  220ms cubic-bezier(.2,.9,.3,1);
}

/* ---- Page / container ---- */
.ts-candidate-profile,
.ts-login-page {
  max-width: 1180px;
  margin: 28px auto;
  padding: 0 16px;
  color: var(--yacht-navy);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Panels (cards) */
.ts-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--panel-bg));
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 12px 40px rgba(7, 38, 72, 0.06);
  border: 1px solid rgba(6, 53, 100, 0.04);
  box-sizing: border-box;
}

/* Two-column layout on desktop */
.ts-resume-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 26px;
  align-items: start;
}

/* On smaller screens stack vertically */
@media (max-width: 980px) {
  .ts-resume-grid{ grid-template-columns: 1fr; }
  .ts-panel { padding: 18px; }
}

/* ---- Form container sizing (wider, centered) ---- */
.ts-panel .form-inner,
.ts-panel .resume-submit-form,
.ts-panel .ts-candidate-profile-form,
.resume-submit-form,
.ts-login-wrap {
  max-width: 920px; /* wider forms */
  margin: 0 auto;
}

/* ---- Labels & help text ---- */
.ts-candidate-profile-form label,
.ts-login-form label,
.resume-submit-form label {
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color: var(--yacht-navy);
  font-size: 14px;
}

/* ---- Input / Select / Textarea ---- */
.ts-candidate-profile-form input[type="text"],
.ts-candidate-profile-form input[type="email"],
.ts-candidate-profile-form input[type="url"],
.ts-candidate-profile-form input[type="tel"],
.ts-candidate-profile-form textarea,
.resume-submit-form input[type="text"],
.resume-submit-form input[type="email"],
.resume-submit-form textarea,
.ts-login-form input[type="text"],
.ts-login-form input[type="password"],
.ts-login-form input[type="email"],
select {
  width: 100%;
  height: var(--input-height);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(3,58,102,0.08);
  background: linear-gradient(180deg, #fff, #fbfeff);
  box-shadow: inset 0 -1px 0 rgba(3,58,102,0.03);
  font-size: 16px;
  color: #033a5a;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Larger textarea */
.ts-candidate-profile-form textarea,
.resume-submit-form textarea {
  min-height: 140px;
  height: auto;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Focus states (clean, accessible) */
.ts-candidate-profile-form input:focus,
.ts-candidate-profile-form textarea:focus,
.resume-submit-form input:focus,
.resume-submit-form textarea:focus,
.ts-login-form input:focus,
select:focus {
  outline: none;
  border-color: var(--yacht-blue-1);
  box-shadow: 0 8px 30px rgba(7,122,255,0.12), 0 0 0 4px rgba(11,102,255,0.08);
  transform: translateY(-1px);
}

/* Placeholder subtle */
::placeholder {
  color: #9fb6d0;
  opacity: 1;
}

/* ---- Form grid (two-column fields) ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 18px;
  align-items: start;
}

/* Make specific fields full width */
.form-grid .full,
.full-field {
  grid-column: 1 / -1;
}

/* On mobile make one column */
@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Buttons (primary & ghost) ---- */
.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(180deg, var(--yacht-blue-1), var(--yacht-blue-2));
  box-shadow: 0 12px 30px rgba(7,122,255,0.14);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-decoration: none;
  font-size: 16px;
}

.ts-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(7,122,255,0.18); }
.ts-btn:active { transform: translateY(-1px); }

.ts-btn--ghost {
  background: transparent;
  color: var(--yacht-navy);
  border: 1px solid rgba(3,58,102,0.08);
  box-shadow: none;
  font-weight: 700;
}

/* ---- Small UI elements ---- */
.field-note {
  display:block;
  font-size:13px;
  color: var(--muted);
  margin-top:8px;
}

/* Error / success states */
.input-error { border-color: #ff6b6b !important; box-shadow: 0 6px 24px rgba(255,107,107,0.06) !important; }
.ts-form-error { background:#fff5f6; border:1px solid #ffd6d6; color:#9b1c1c; padding:10px; border-radius:10px; margin-bottom:12px; }
.ts-form-success { background:#f0fbf7; border:1px solid #cdeee1; color:#04683a; padding:10px; border-radius:10px; margin-bottom:12px; }

/* ---- Login specific (if you use ts-login-wrap / ts-login-form classes) ---- */
.ts-login-wrap {
  max-width:560px;
  margin: 0 auto;
  padding: 28px;
  background: linear-gradient(180deg,#ffffff,#f8fdff);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(5,45,90,0.06);
  text-align: left;
}

.ts-login-wrap h2 { margin-top:0; color: var(--yacht-navy); font-size:22px; }
.ts-login-form p { margin:12px 0; }
.ts-login-form input[type="text"], .ts-login-form input[type="password"] { height:48px; }

/* ---- Resume submit form wrappers (adapt existing plugin output) ---- */
.resume-submit-form .form-row,
.resume-submit-form .field {
  margin-bottom: 12px;
}

/* Ensure submit resume's upload button looks consistent */
.resume-submit-form input[type="file"] {
  height: auto;
  padding: 10px;
  background: transparent;
  border-radius: 10px;
  border: 1px dashed rgba(3,58,102,0.06);
}

/* ---- Tiny utility classes ---- */
.mt-6 { margin-top: 6px !important; }
.mt-12 { margin-top: 12px !important; }
.mb-6 { margin-bottom: 6px !important; }

/* ---- Accessibility helpers (focus visible) ---- */
:focus { outline-offset: 2px; }

/* ---- Optional subtle decorative accent (nautical) ---- */
.ts-panel::after {
  content: "";
  display:block;
  height:6px;
  width:84px;
  border-radius:8px;
  background: linear-gradient(90deg,var(--yacht-accent), var(--yacht-blue-1));
  margin-top:16px;
  opacity:.9;
}

/* End of ts-resumes-ui.css */