.bco-pn { border: 0px solid #ddd; padding: 16px; border-radius: 0px; background: #fff; }
.bco-pn-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.bco-pn-restart {
  background: #003e80;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.bco-pn-restart:hover {
  background: #002b5c;
}
.bco-pn-restart:active {
  background: #00224a;
}

/* Back button styling.  Matches the restart button but uses a slightly
   lighter background to differentiate the action.  Initially hidden
   via inline style in the template; toggled by app.js. */
.bco-pn-back {
  background: #003e80;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  margin-right: 8px;
}
.bco-pn-back:hover {
  background: #002b5c;
}
.bco-pn-back:active {
  background: #00224a;
}
.bco-pn-search-quick input{ width:100%; padding:10px; border:1px solid #0000FF; border-radius:0px; margin-bottom: 14px; }
.bco-pn-tiles { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));}
.bco-pn-tile { border:1px solid #e3e3e3; padding:12px; border-radius:0px; background:#fafafa; cursor:pointer; transition: transform .05s ease-in; }
.bco-pn-tile:hover { transform:translateY(-2px); }
.bco-pn-qa .bco-pn-question{ margin-top:14px; padding:12px; background:#f7fbff; border:1px solid #d9eaff; border-radius:0px;}
/* Arrange answers vertically instead of wrapping horizontally. Each answer occupies its own row for better separation. */
.bco-pn-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.bco-pn-answer {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 0px;
  background: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.bco-pn-answer.selected { background:#e8f3ff; border-color:#5aa8ff; }
/* Style the Next button to match the Start Over button with a navy background and white text */
/* Style the Next button to match the other primary buttons.  Use a pill shape and dark blue background. */
.bco-pn-btn-next {
  margin-top: 10px;
  display: inline-block;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  background: #003e80;
  color: #fff;
  cursor: pointer;
}
/* Provide subtle hover/active states for Next button */
.bco-pn-btn-next:hover {
  background: #002b5c;
}
.bco-pn-btn-next:active {
  background: #00224a;
}
.bco-pn-card { border:1px solid #eee; padding:12px; border-radius:0px; margin:10px 0; background:#fff; }
.bco-pn-card h4 { margin:0 0 6px 0;}
.bco-pn-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.bco-pn-btn { padding:8px 10px; border:none; background:#003e80; border-radius:999px; cursor:pointer; color:#fff; }
.bco-pn-note{ font-size:0.9em; color:#444;}
.bco-pn-empty{ color:#555; font-style:italic; margin-top:8px;}
.bco-pn-dept{ margin-top:8px; font-size:0.92em; }
.bco-pn-dept a{ text-decoration:underline;}

/* Additional styles added in v0.9.1 to address usability feedback */
.bco-pn-select-note{
  font-size:0.85em;
  color:#555;
  margin-top:4px;
  font-style:italic;
}
.bco-pn-moreinfo{
  margin-top:8px;
  padding:8px;
  border:1px dashed #ccc;
  border-radius:0px;
  background:#f9f9f9;
  font-size:0.9em;
}
.bco-pn-desc{
  margin-bottom:6px;
}
.bco-pn-moreinfo .bco-pn-note{
  margin-top:4px;
}

/* Modal overlay for question info pop‑up.  Covers the page with a semi‑transparent
   backdrop and centers the content. */
.bco-pn-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bco-pn-modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  position: relative;
}
.bco-pn-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  font-size: 1.5em;
  line-height: 1;
  cursor: pointer;
  color: #002b5c;
}
.bco-pn-modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

/* Breadcrumb bar (v1.6) */
/*
 * Breadcrumb bar styling
 *
 * Tony requested in Sprint 5 Meeting 12 that the breadcrumb text be
 * reduced in size so it does not overpower the page header and uses
 * the theme’s relative sizing instead of a fixed em unit.  Setting
 * `font-size: small;` allows the browser/theme to choose an
 * appropriate size relative to the base font, resulting in a more
 * balanced appearance across admin screens.
 */
.bco-pn-breadcrumbs {
  margin: 8px 0;
  font-size: small;
  color: #002b5c;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bco-pn-breadcrumbs a {
  color: #004a99;
  text-decoration: underline;
  cursor: pointer;
}
.bco-pn-breadcrumbs span {
  color: #666;
}

/* Disclaimer box (v1.6) */
.bco-pn-disclaimer {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 0.9em;
  color: #7a5900;
}

/* Bold highlight for multi‑application answer rows in the admin interface. */
tr.bco-pn-multi-answer td {
  font-weight: bold;
}

/* Department block styling for search results and result cards */
.bco-pn-dept-name {
  font-weight: bold;
}
.bco-pn-dept-address,
.bco-pn-dept-room,
.bco-pn-dept-contact,
.bco-pn-dept-website {
  margin-top: 2px;
}

/* Info icon shown next to questions when help text is provided */
.bco-pn-qinfo {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 50%;
  background: #eef2ff;
  color: #002b5c;
  font-weight: bold;
  cursor: help;
  font-size: 0.85em;
  line-height: 1em;
}

/* Add some space below the question text before the list of answers */
.bco-pn-question .bco-pn-qtext {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Info icon shown next to answers when hover text is provided.  Matches
   the styling of the question info icon but with its own class for
   potential future customization. */
.bco-pn-ainfo {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 50%;
  background: #eef2ff;
  color: #002b5c;
  font-weight: bold;
  cursor: help;
  font-size: 0.85em;
  line-height: 1em;
}

/* Info icon shown next to applications when info text or URL is provided.
   This matches the styling of the question and answer info icons but uses
   a separate class for clarity.  When the icon is an anchor tag
   (.bco-pn-appinfo), the same padding and appearance apply. */
.bco-pn-appinfo {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 50%;
  background: #eef2ff;
  color: #002b5c;
  font-weight: bold;
  font-size: 0.85em;
  line-height: 1em;
  text-decoration: none;
}
.bco-pn-appinfo:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------
 * v2.0 UI refinements (October 2025)
 *
 * The following overrides implement styling adjustments requested by
 * Tony during Sprint 6.  They are appended to the end of the style
 * sheet so they take precedence over earlier declarations without
 * requiring significant rewrites.  These changes include:
 *   • Uniform pill‑shaped buttons with dark navy backgrounds
 *   • Dark blue selection state for answers
 *   • Solid blue info icons with white characters
 *   • Spinner indicator for the "Download All" button when loading
 */

/* Pill‑shaped buttons: apply to all primary actions */
.bco-pn-restart,
.bco-pn-back,
.bco-pn-btn-next,
.bco-pn-btn,
#bco-pn-download-all {
  border-radius: 999px !important;
  background: #003e80 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  font-size: 0.92em;
  line-height: 1.4;
  cursor: pointer;
}
/* Hover and active states for buttons */
.bco-pn-restart:hover,
.bco-pn-back:hover,
.bco-pn-btn-next:hover,
.bco-pn-btn:hover,
#bco-pn-download-all:hover {
  background: #002b5c !important;
}
.bco-pn-restart:active,
.bco-pn-back:active,
.bco-pn-btn-next:active,
.bco-pn-btn:active,
#bco-pn-download-all:active {
  background: #001a43 !important;
}

/* Selected answers use a dark background and white text for high contrast */
.bco-pn-answer.selected {
  background: #003e80 !important;
  border-color: #003e80 !important;
  color: #ffffff !important;
}

/* Info icons: solid blue circle with white text */
.bco-pn-qinfo,
.bco-pn-ainfo,
.bco-pn-appinfo {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  padding: 0 5px !important;
  border-radius: 50% !important;
  font-weight: bold !important;
  font-size: 0.85em !important;
  line-height: 1em !important;
  font-style: normal !important;
}
.bco-pn-appinfo:hover {
  text-decoration: underline;
}

/* Spinner for the Download All button when a bulk download is initiated */
#bco-pn-download-all.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}
#bco-pn-download-all.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bco-pn-spin 0.8s linear infinite;
}
@keyframes bco-pn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}