/* ============================================================================
 * A1.6 — Admin / reviewer bucket-lesson UI styling.
 * BIS v1.3 — Moonlight, Steel, Amber, Frost Blue, Sage, Brick, Rust palette.
 * ============================================================================ */

/* Form controls */
.abl-select,
.abl-input {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 9px 12px;
  border: 1.5px solid var(--bone);
  border-radius: 8px;
  background: #fff;
  color: var(--oxford);
}
.abl-select:focus,
.abl-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(212, 136, 42, 0.15);
}

/* Button system */
.abl-btn-amber {
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: filter 0.15s;
}
.abl-btn-amber:hover { filter: brightness(0.94); }
.abl-btn-amber:disabled { opacity: 0.55; cursor: not-allowed; }

.abl-btn-sage {
  background: var(--moss);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.abl-btn-sage:hover { filter: brightness(0.94); }

.abl-btn-brick {
  background: var(--brick);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.abl-btn-brick:hover { filter: brightness(0.94); }

.abl-btn-rust {
  background: var(--rust);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.abl-btn-rust:hover { filter: brightness(0.94); }

.abl-btn-ghost {
  background: transparent;
  color: var(--steel);
  border: 1.5px solid var(--steel);
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.abl-btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* Status badges */
.bl-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'DM Sans', sans-serif;
}
.bl-badge--draft           { background: #DCD7C5; color: #495B7D; }
.bl-badge--published       { background: #566849; color: #fff; }
.bl-badge--flagged         { background: #964432; color: #fff; }
.bl-badge--withdrawn       { background: #495B7D; color: #fff; }
.bl-badge--not_reviewed    { background: #DCD7C5; color: #495B7D; }
.bl-badge--under_review    { background: #CDD8E8; color: #5577A8; }
.bl-badge--reviewer_approved { background: #D4882A; color: #fff; }
.bl-badge--reviewer_flagged  { background: #964432; color: #fff; }
.bl-badge--needs_attention { background: #854810; color: #fff; }

/* Table polish */
.abl-table tbody tr:hover {
  background: var(--moonlight-tint);
}

/* Mobile: collapse two-pane to stacked */
@media (max-width: 900px) {
  .abl-detail-page .abl-preview-pane {
    position: static !important;
    flex: 1 1 100% !important;
  }
}