/************************************************************
 * Wizard Layout: Container and Sidebar
 ************************************************************/
.airb-wizard-container {
  display: flex;
  /* Was max-width:1200px, now increased for more space */
  max-width: 1400px;
  margin: 0 auto;
  gap: 20px;
}

/* Darker teal background for better contrast */
.airb-wizard-sidebar {
  width: 250px;
  background-color: #00567A; /* Teal background */
  color: #fff;
  padding: 20px;
  border-radius: 6px;
}

.airb-wizard-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Base styling for steps: visible text even if not current/completed */
.airb-wizard-sidebar li {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
  background: none; /* Let the teal sidebar show */
  transition: background 0.2s, font-weight 0.2s, color 0.2s;
  cursor: pointer;
  color: #fff; /* Force white text */
}

/* Anchor links remain white */
.airb-wizard-sidebar li a {
  color: #fff;
  text-decoration: none;
}
.airb-wizard-sidebar li a:hover {
  text-decoration: underline;
}

/* Step number circle: white background, teal text */
.airb-wizard-sidebar li span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  color: #00567A;
  font-weight: bold;
  line-height: 20px; 
}

/* CURRENT STEP: darker teal highlight, white text */
.airb-wizard-sidebar li.current {
  background: #003B5C;
  color: #fff;
}
.airb-wizard-sidebar li.current span {
  background: #fff;
  color: #003B5C;
}

/* COMPLETED STEPS: green gradient with white text */
.airb-wizard-sidebar li.completed {
  background: linear-gradient(to right, #4caf50, #8bc34a);
  color: #fff;
}
.airb-wizard-sidebar li.completed span {
  background: #fff;
  color: #4caf50;
}

/* Hover effect: darker teal, white bold text */
.airb-wizard-sidebar li:hover {
  background: #004161 !important;
  color: #fff !important;
  font-weight: bold !important;
  opacity: 1;
}
.airb-wizard-sidebar li:hover a,
.airb-wizard-sidebar li:hover span {
  color: #fff !important;
  font-weight: bold !important;
}

/************************************************************
 * Step Content
 ************************************************************/
.airb-wizard-step-content {
  flex: 1;
  min-width: 0;
  padding: 10px;
}

/************************************************************
 * Card Layout (Job Cards)
 ************************************************************/
.airb-job-card {
  background: #fafafa;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  width: 100%;
  max-width: none;
}

.airb-job-card-header {
  margin-bottom: 10px;
}

.airb-job-card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

.airb-job-number {
  background: #eee;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  margin-right: 8px;
  display: inline-block;
  font-weight: bold;
  vertical-align: middle;
}

/************************************************************
 * Buttons in Job Cards (Flex container with gap)
 ************************************************************/
.airb-job-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
}
.airb-job-card-actions > * {
  margin: 0;
}
.airb-job-card-actions .dashicons {
  transform: scale(0.85);
  margin-right: 2px;
}

/************************************************************
 * Step 2 Edit Screen ("Bullet Library" and Job Description)
 ************************************************************/
/* The container for Step 2 sub-columns */
.airb-step2-edit-container {
  display: flex;
  gap: 20px;
  max-width: 1400px; /* match container width or less */
  margin-top: 10px;
}

/* Left column: bullet library, optionally scrollable */
.airb-step2-bullet-library {
  flex: 0 0 300px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  max-height: 600px; /* so it doesn't run too long */
  overflow-y: auto;
}

/* Right column: job duties form */
.airb-step2-edit-form {
  flex: 1;
  background: #fafafa;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
}

/* Bullet items in library */
.airb-bullet-item {
  background: #eee;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.airb-bullet-item:hover {
  background: #ddd;
}

/************************************************************
 * Unified Dark-Blue Button Styles
 ************************************************************/
.btn-ada,
.btn-add-position,
.button,
.button-primary,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #0a3065 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 16px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-ada:hover,
.btn-add-position:hover,
.button:hover,
.button-primary:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: #08244c !important;
  outline: none !important;
}

/* Focus ring for accessibility */
.btn-ada:focus,
.btn-add-position:focus,
.button:focus,
.button-primary:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
  outline: 3px solid #ff0;
  outline-offset: 2px;
}

/************************************************************
 * Messages: Success / Error
 ************************************************************/
.airb-message-success {
  color: #2b6;
  margin-bottom: 10px;
  font-weight: bold;
}
.airb-message-error {
  color: #c33;
  margin-bottom: 10px;
  font-weight: bold;
}

/************************************************************
 * Document Upload
 ************************************************************/
.airb-doc-upload {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  padding: 3px;
  font-size: 14px;
}

/************************************************************
 * Mobile Responsiveness
 ************************************************************/
@media (max-width: 768px) {
  .airb-wizard-container {
    display: block;
    max-width: 100%;
  }
  .airb-wizard-sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
  .airb-wizard-step-content {
    width: 100%;
  }
  .airb-step2-edit-container {
    display: block;
    max-width: 100%;
  }
}