/* =========================================================
   ItsQA – Consultant Forms
   FILE: forms.css  (frontend)
   Scope: form IDs starting with "consultant-"
   ========================================================= */

:root{
  --itsqa-primary: #e67568;        /* brand */
  --itsqa-primary-600: #db685b;    /* darker brand */
  --itsqa-text: #1f2937;
  --itsqa-muted: #6b7280;
  --itsqa-bg: #faf7f6;
  --itsqa-card: #ffffff;
  --itsqa-ring: 0 0 0 3px rgba(230,117,104,.25);
  --radius: 14px;
}

/* Base form */
form[id^="consultant-"]{
  font-family: Heebo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--itsqa-text);
}

/* Section titles */
form[id^="consultant-"] h3{
  margin: 28px 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--itsqa-primary-600);
}

/* Section card */
form[id^="consultant-"] .section-box{
  background: var(--itsqa-card);
  border: 1px solid #ececec;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}

/* Field rows as responsive grid */
form[id^="consultant-"] .form-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
  align-items: start;
}

/* Labels */
form[id^="consultant-"] label{
  display:block;
  margin: 2px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--itsqa-muted);
}

/* Inputs, selects, textarea */
form[id^="consultant-"] input[type="text"],
form[id^="consultant-"] input[type="email"],
form[id^="consultant-"] input[type="number"],
form[id^="consultant-"] input[type="date"],
form[id^="consultant-"] select,
form[id^="consultant-"] textarea{
  width: 100%;
  appearance: none;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  padding: 10px 12px;
  color: #202020;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

form[id^="consultant-"] input::placeholder,
form[id^="consultant-"] textarea::placeholder{
  color:#9aa3af;
}

/* Focus ring */
form[id^="consultant-"] input:focus,
form[id^="consultant-"] select:focus,
form[id^="consultant-"] textarea:focus{
  outline: none;
  border-color: var(--itsqa-primary);
  box-shadow: var(--itsqa-ring);
}

/* Readonly/disabled state */
form[id^="consultant-"] input[readonly],
form[id^="consultant-"] textarea[readonly],
form[id^="consultant-"] select[disabled]{
  background: #f8f8f8;
  color: #6f7781;
  border-color: #ededed;
  cursor: not-allowed;
  box-shadow: none;
}

/* Remove number spinners */
form[id^="consultant-"] input[type="number"]::-webkit-outer-spin-button,
form[id^="consultant-"] input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
form[id^="consultant-"] input[type="number"]{ -moz-appearance:textfield; }

/* Country chip */
#itsqa_country_name{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: var(--itsqa-bg);
  color: var(--itsqa-primary-600);
  border: 1px dashed var(--itsqa-primary-600);
  font-weight:600;
  margin-top: 4px;
}

/* + Add buttons */
form[id^="consultant-"] .btn-add{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--itsqa-primary);
  background: #fff;
  color: var(--itsqa-primary);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  align-self: end;
  margin-top: 26px; /* aligns with inputs */
}
form[id^="consultant-"] .btn-add:hover{
  background: var(--itsqa-primary-600);
  color:#fff;
  border-color: var(--itsqa-primary-600);
}

/* Submit */
form[id^="consultant-"] .form-submit{ margin: 18px 0 8px; }
form[id^="consultant-"] .btn-submit{
  background: var(--itsqa-primary);
  color:#fff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease;
}
form[id^="consultant-"] .btn-submit:hover{ background: var(--itsqa-primary-600); }
form[id^="consultant-"] .btn-submit:active{ transform: translateY(1px); }

/* =======================
   Tables within the forms
   ======================= */
form[id^="consultant-"] table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
}
form[id^="consultant-"] thead th{
  background: var(--itsqa-primary-600);      /* red header */
  color:#fff;
  font-weight:700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing:.03em;
  padding: 12px 14px;
}
form[id^="consultant-"] tbody td{
  padding: 10px 14px;
  font-size: 14px;
  border-bottom: 1px solid #eef1f3;          /* bottom border only */
color:#202020;
}
form[id^="consultant-"] tbody tr:last-child td{ border-bottom: 0; }

/* Delete cell (if present) */
form[id^="consultant-"] td.deleteRow{
  color:#b42318;
  font-weight:600;
  cursor:pointer;
}

/* Small spacing between stacked section cards */
form[id^="consultant-"] .section-box + .section-box{ margin-top: 10px; }

/* Responsive tweaks */
@media (min-width: 1024px){
  form[id^="consultant-"] .section-box{ padding: 18px 20px; }
}
@media (max-width: 767px){
  form[id^="consultant-"]{ font-size: 15px; }
  form[id^="consultant-"] .section-box{ padding: 14px; }
  form[id^="consultant-"] thead th{ font-size:12px; }
}

/* ===== Consultant Tabs (admin + frontend) ===== */
:root{
  --itsqa-primary: #db685b;
  --itsqa-pill-text: #344054;
  --itsqa-pill-border: #e7e7e7;
  --itsqa-pill-bg: #fff;
}

.cv-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 24px 0 16px;
}

.cv-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border:1px solid var(--itsqa-pill-border);
  background: var(--itsqa-pill-bg);
  color: var(--itsqa-pill-text);
  border-radius: 999px; /* pill */
  font-weight: 600;
  letter-spacing: .02em;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  user-select: none;
  white-space: nowrap;
}

.cv-tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
}

.cv-tab.active{
  background: var(--itsqa-primary);
  border-color: var(--itsqa-primary);
  color:#fff;
  box-shadow: 0 8px 22px rgba(219,104,91,.25), 0 3px 8px rgba(219,104,91,.15);
}

/* Tab panels */
.cv-tab-content{ display:none; }
.cv-tab-content.active{
  display:block;
  animation: itsqaFadeIn .25s ease both;
}

@keyframes itsqaFadeIn{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Compact on small screens */
@media (max-width: 640px){
  .cv-tab{ font-size:13px; padding:8px 14px; }
}
/* ================================
   Upload tab (view="u")
   ================================ */
.cv-tab-content[view="u"] .uploadFileBox{
  background:#fff;
  border:1px solid #eef1f5;
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 18px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
  margin-bottom:20px;
}

.cv-tab-content[view="u"] .uploadFileBox h2{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.3;
}

.cv-tab-content[view="u"] .uploadFileBox .form-row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* File input – modern browsers */
.cv-tab-content[view="u"] input[type="file"]{
  width:100%;
  padding:14px;
  border:1px solid #e7e7e7;
  border-radius:12px;
  background:#fff;
  font-size:14px;
}
.cv-tab-content[view="u"] input[type="file"]::file-selector-button{
  background: var(--itsqa-primary, #db685b);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:8px 14px;
  margin-right:12px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.cv-tab-content[view="u"] input[type="file"]::file-selector-button:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 22px rgba(219,104,91,.25), 0 3px 8px rgba(219,104,91,.15);
}
/* Safari fallback */
.cv-tab-content[view="u"] input[type="file"]::-webkit-file-upload-button{
  background: var(--itsqa-primary, #db685b);
  color:#fff; border:0; border-radius:999px; padding:8px 14px; margin-right:12px; cursor:pointer;
}

/* Submit already styled elsewhere – keep consistent spacing */
.cv-tab-content[view="u"] .form-submit{ margin-top:16px; }

/* ================================
   Uploads table
   ================================ */
#uploadTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #eef1f5;
  border-radius:16px;
  overflow:hidden; /* rounds header corners */
  box-shadow:0 6px 18px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
  margin-top:14px;
}

#uploadTable thead th{
  background: var(--itsqa-primary, #db685b);
  color:#fff;
  padding:12px 16px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:0;
}

#uploadTable tbody td{
  padding:14px 16px;
  border-bottom:1px solid #edf0f4;  /* bottom only, like other tables */
  vertical-align:middle;
}
#uploadTable tbody tr:last-child td{ border-bottom:0; }
#uploadTable tbody tr:hover{ background:#fff7f6; }

/* Download button (anchor has no text in markup – add it with CSS) */
#uploadTable td.downloadFile a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid var(--itsqa-primary, #db685b);
  color: var(--itsqa-primary, #db685b);
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
}
#uploadTable td.downloadFile a::before{
  content:"";
  width:16px; height:16px;
  background: currentColor;
  /* download icon via mask */
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v8.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4.007 4.007a1 1 0 0 1-1.414 0L7.28 11.707a1 1 0 0 1 1.414-1.414L11 12.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v2h12v-2a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a1 1 0 0 1 1 1v8.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-4.007 4.007a1 1 0 0 1-1.414 0L7.28 11.707a1 1 0 0 1 1.414-1.414L11 12.586V4a1 1 0 0 1 1-1Zm-7 14a1 1 0 0 1 1 1v2h12v-2a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#uploadTable td.downloadFile a::after{ content:"Download"; }
#uploadTable td.downloadFile a:hover{
  background: var(--itsqa-primary, #db685b);
  color:#fff;
}

/* Delete button (cell is empty in markup – draw a chip and keep td clickable) */
#uploadTable td.filedeleteRow{
  width:1%;
  white-space:nowrap;
  cursor:pointer;
}
#uploadTable td.filedeleteRow.deleteRow span::before{
  content:" ";
   width:16px; 
	height:16px;
	margin-right:8px;
  background: #b42318 !important;
	font-size:16px;
	background:none;
	color:#db685b !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 3a1 1 0 0 0-1 1v1H5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2h-3V4a1 1 0 0 0-1-1H9Zm1 5a1 1 0 0 0-1 1v9a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1Zm4 0a1 1 0 0 0-1 1v9a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1ZM7 8h10l-1 11a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2L7 8Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M9 3a1 1 0 0 0-1 1v1H5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2h-3V4a1 1 0 0 0-1-1H9Zm1 5a1 1 0 0 0-1 1v9a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1Zm4 0a1 1 0 0 0-1 1v9a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1ZM7 8h10l-1 11a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2L7 8Z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: all .2s ease-in-out;
}

#uploadTable td.filedeleteRow.deleteRow{
  padding:10px 16px;
}
#uploadTable td.filedeleteRow.deleteRow::before{
	display:none;
}
#uploadTable td.filedeleteRow.deleteRow span{
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #ffd3cf;
    display: inline-flex;
    align-items: center;
	transition: all .2s ease-in-out;
}
#uploadTable td.filedeleteRow.deleteRow span::after{
  content:"Delete";
  display:inline-flex;
  align-items:center;
  background:#fff5f4;
  color:#b42318;
  font-weight:600;
  margin-left:4px;
  transition: background .2s ease, border-color .2s ease;
		font-size:16px;
	background:none;
	color:#db685b !important;
	transition: all .2s ease-in-out;
}
#uploadTable td.filedeleteRow.deleteRow:hover span{
	background:#db685b;
	color:#fff !important;
}
#uploadTable td.filedeleteRow.deleteRow:hover span::after
{
	color: #fff !important;
}
#uploadTable td.filedeleteRow.deleteRow:hover span::before{
	background: #fff !important;
}