/**
 * AJTMBR Theme - Backend Mobile Sidebar Fallback
 * Hard mode: hide backend side nav on mobile unless explicitly toggled open.
 */

@media (max-width: 991px) {
  #app .app__body {
    display: block !important;
    position: relative;
  }

  #app .app__main,
  #app-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  #app .app__body> :first-child {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(88vw, 320px) !important;
    max-width: 320px !important;
    height: 100dvh !important;
    z-index: 10020 !important;
    background: #fff !important;
    overflow-y: auto !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  }

  body.aj-backend-nav-open #app .app__body> :first-child {
    display: block !important;
  }

  .aj-backend-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.aj-backend-nav-open .aj-backend-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .aj-backend-nav-toggle {
    position: fixed;
    top: 66px;
    left: 12px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #0a2647;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    z-index: 10030;
    box-shadow: 0 8px 20px rgba(10, 38, 71, 0.35);
    cursor: pointer;
  }

  .aj-backend-nav-toggle__icon {
    font-size: 26px;
    line-height: 1;
  }

  body.aj-backend-nav-open .aj-backend-nav-toggle {
    background: #c5a059;
    color: #0a2647;
  }

  body.aj-backend-modal-open .aj-backend-nav-toggle {
    display: none !important;
  }

  .pkp_page_workflow .pkp_submission_workflow,
  .pkp_page_workflow #informationCenterDiv,
  .pkp_page_authorDashboard #informationCenterDiv,
  .pkp_page_authorDashboard #stageTabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #stageTabs .pkp_workflow_sidebar,
  #stageTabs .pkp_workflow_content {
    float: none !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  .pkpWorkflow__identificationTitle {
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere;
    line-height: 1.25 !important;
    font-size: clamp(1.2rem, 4.8vw, 1.8rem) !important;
  }

  .pkpWorkflow__identificationAuthor,
  .pkpWorkflow__identificationId,
  .pkpWorkflow__identificationDivider {
    font-size: clamp(0.85rem, 3.2vw, 1rem) !important;
  }

  .pkpWorkflow .pkpButton,
  .pkpWorkflow button,
  .pkpWorkflow [class*="Action"] .pkpButton {
    max-width: 100%;
    white-space: normal;
  }

  .pkpWorkflow,
  .pkpTab,
  .pkpForm,
  .pkpStats,
  .pkp_controllers_grid {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 992px) {

  .aj-backend-nav-toggle,
  .aj-backend-nav-backdrop {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   THEME OPTIONS — Tab Bar + Field Pairing
   ═══════════════════════════════════════════════════════════ */
.aj-theme-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e0e4e8;
}

.aj-theme-tab {
  padding: 8px 16px;
  border: 1px solid #d0d5db;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #f5f7f9;
  color: #555;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.aj-theme-tab:hover {
  background: #eaecf0;
  color: #333;
}

.aj-theme-tab--active {
  background: #fff;
  color: #0A2647;
  border-color: #0A2647;
  border-bottom: 2px solid #fff;
  margin-bottom: -2px;
  font-weight: 700;
}

/* Paired fields (e.g. Metric Value + Label) */
.aj-field-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px;
  align-items: start;
}

@media (max-width: 768px) {
  .aj-field-pair {
    grid-template-columns: 1fr !important;
  }

  .aj-theme-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}