body {
  background:
    radial-gradient(circle at top left, rgba(29, 111, 165, 0.08), transparent 26%),
    radial-gradient(circle at top right, rgba(31, 141, 155, 0.08), transparent 22%),
    linear-gradient(180deg, #f8fbfe 0%, #f2f7fb 42%, #ffffff 100%);
  color: #183247;
  font-family: "Segoe UI", "Aptos", sans-serif;
}

.navbar,
.navbar.navbar-default,
.navbar.navbar-light {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(196, 214, 228, 0.85);
  box-shadow: 0 14px 36px rgba(20, 50, 74, 0.08);
  backdrop-filter: blur(10px);
}

.navbar > .container-fluid,
.navbar > .container {
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 100%;
  min-height: 92px;
  gap: 1rem;
  padding-bottom: 0;
}

.navbar .navbar-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}

.app-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
}

.app-brand img {
  display: block;
  background: transparent;
  /* PNG is 1448×1086 (4:3). Rendered 84px tall → 112px wide. Regular hex R=42px:
     side x = 56 ± 36.37px → 82.5% and 17.5% of 112px width. */
  clip-path: polygon(50% 0%, 82.5% 25%, 82.5% 75%, 50% 100%, 17.5% 75%, 17.5% 25%);
}

.app-logo-wrap {
  display: inline-block;
  line-height: 0;
}

/* Logo twinkles whenever Shiny is busy (after Detect/Compare/Sync etc.).
   Scale + opacity animate on the img (clipped to hex), glow on the wrapper
   so drop-shadow traces the hex shape rather than the image rectangle. */
.app-brand-mark.app-busy img {
  animation: logo-scale 1.1s ease-in-out infinite;
}

.app-brand-mark.app-busy .app-logo-wrap {
  animation: logo-glow 1.1s ease-in-out infinite;
}

@keyframes logo-scale {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.08); opacity: 0.78; }
}

@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(95, 74, 180, 0));    }
  50%       { filter: drop-shadow(0 0 8px rgba(95, 74, 180, 0.65)); }
}

.app-brand-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  flex: 0 0 auto;
}

.app-version {
  color: #7a95a8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* ── Inline progress bar (between navbar and comparison card) ── */
#nav-progress-wrap {
  display: none;
  width: 100%;
  margin-bottom: 0.6rem;
}

#nav-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4a3d7a;
}

#nav-progress-step {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-progress-elapsed {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #5f4ab4;
}

.nav-progress-track {
  width: 100%;
  height: 10px;
  background: #e8eef4;
  border-radius: 10px;
  overflow: hidden;
}

#nav-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5f4ab4 0%, #8a52c8 50%, #5f4ab4 100%);
  background-size: 200% 100%;
  animation: nav-progress-shimmer 1.4s linear infinite;
  transition: width 0.3s ease;
  border-radius: 10px;
}

@keyframes nav-progress-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Scout hint ── */
.sync-scout-hint {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  color: #7a95a8;
  margin-bottom: 0.45rem;
  letter-spacing: 0.01em;
}

.top-install-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.top-install-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  background: #ffffff;
  border: 1px solid #d6e4ef;
  color: #355066;
  font-size: 0.72rem;
  font-weight: 700;
}

.top-install-pill-version,
.top-install-pill-location {
  display: inline-block;
  white-space: nowrap;
}

.top-install-pill-a {
  background: #fff0e4;
  border-color: #f0b07b;
  color: #9a4b17;
}

.top-install-pill-b {
  background: #e3f5f7;
  border-color: #7fc8d1;
  color: #15606a;
}

.navbar .navbar-brand,
.navbar .dropdown-toggle {
  color: #1d6fa5 !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.navbar-collapse {
  display: flex !important;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: flex-end;
}

.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  flex: 0 0 auto !important;
  width: auto !important;
  gap: 3px;
  margin-bottom: -1px;
}

.navbar-nav .nav-link {
  padding: 0.5rem 1.25rem !important;
  border: 1.5px solid transparent;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: #355066 !important;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s;
}

.navbar-nav .nav-link.active {
  background: #ffffff;
  border-color: rgba(196, 214, 228, 0.9);
  border-bottom: 1.5px solid #ffffff;
  color: #1d6fa5 !important;
  box-shadow: none;
}

.navbar-nav .nav-link:hover:not(.active),
.navbar-nav .nav-link:focus:not(.active) {
  background: rgba(237, 244, 250, 0.65);
  border-color: rgba(196, 214, 228, 0.55);
  color: #1d6fa5 !important;
}

.card,
.bslib-card,
.sidebar {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d9e4ee;
  border-radius: 24px;
  box-shadow: 0 22px 44px rgba(15, 45, 67, 0.08);
}

.card .card-header,
.bslib-card .card-header {
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
}

.sidebar {
  padding-top: 1rem;
}

.btn-primary {
  background: #1d6fa5;
  border-color: #1d6fa5;
}

.btn-success {
  background: #21825c;
  border-color: #21825c;
}

.btn-secondary {
  background: #edf3f8;
  border-color: #cfdbe7;
  color: #173247;
}

.form-control,
.selectize-input,
.selectize-dropdown {
  border-radius: 14px !important;
}

/* Package checklist — multi-column grid */
#migrate-pkgs .shiny-options-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px 20px;
}
#migrate-pkgs .shiny-options-group .checkbox {
  break-inside: avoid;
  margin: 0;
}

/* Inline checkbox + label on same line */
#migrate-pkgs .shiny-options-group .checkbox label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 0;
}
#migrate-pkgs .shiny-options-group .checkbox input[type="checkbox"] {
  margin: 0 !important;
  flex-shrink: 0;
}

/* Package label parts */
.pkg-label  { display: flex; align-items: baseline; gap: 8px; }
.pkg-version { color: #555; font-size: 0.82em; }
.pkg-source  { color: #999; font-size: 0.78em; }

/* Stripe R installation dropdowns */
.selectize-dropdown-content .option:nth-child(even) {
  background-color: #f0f4f8;
}

.top-install-detected-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7a95a8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.3rem;
  white-space: nowrap;
}

.sync-select-block-source {
  border-left: 3px solid #d8752a;
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}

.sync-select-block-target {
  border-left: 3px solid #1f8d9b;
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}

.sync-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%);
  border-right: 1px solid #ebf1f6;
}

.sync-sidebar select.form-control {
  min-height: 46px;
  border: 1.5px solid #aac4d8 !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23355066' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
  padding: 0.7rem 2.4rem 0.7rem 0.9rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.sync-sidebar select.form-control:hover:not(:disabled) {
  border-color: #1d6fa5 !important;
  box-shadow: 0 0 0 3px rgba(29, 111, 165, 0.1);
}

.sync-sidebar select.form-control:focus {
  border-color: #1d6fa5 !important;
  box-shadow: 0 0 0 3px rgba(29, 111, 165, 0.15);
  outline: none;
}

.sync-select-block {
  margin-bottom: 0.45rem;
}

/* Sections are separated by spacing alone (no divider rules); keep the gap
   between sidebar children tight now that the hr() separators are gone. */
.sync-sidebar > .sidebar-content,
.sync-sidebar .sidebar-content {
  gap: 0.5rem;
}

.sync-select-label {
  margin-bottom: 0.35rem;
  color: #355066;
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sync-select-block select.form-control {
  min-height: 48px;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Hint under the target dropdown when no same-or-newer install is available. */
.sync-target-hint {
  margin-top: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: #fdf2f2;
  border-left: 3px solid #d98a8a;
  color: #8a4a4a;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Label row that carries an inline "?" help badge to the right of the text. */
.sync-label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* "?" badge — hover shows the native tooltip (title attr) with the mode help,
   so the explanation no longer occupies a block under the dropdown. */
.sync-help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d9d0f2;
  color: #5f4ab4;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  text-transform: none;
  letter-spacing: 0;
}

.sync-help-badge:hover {
  background: #5f4ab4;
  color: #ffffff;
}

/* Preview plan button — secondary/outline style under the Ship button. */
.sync-preview-btn {
  width: 100%;
  margin-bottom: 0.5rem;
  background: #ffffff;
  color: #5f4ab4;
  border: 1px solid #c7bce8;
  font-weight: 700;
  font-size: 0.82rem;
}
.sync-preview-btn:hover {
  background: #f4eefb;
  color: #4a3596;
  border-color: #8a52c8;
}


.sync-compare-btn {
  margin-top: 0.35rem;
  margin-bottom: 0.45rem;
  background: linear-gradient(90deg, #5f4ab4 0%, #8a52c8 100%);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.8rem 1rem;
  box-shadow: 0 12px 24px rgba(95, 74, 180, 0.22);
}

.sync-helper-copy {
  margin: 0.25rem 0 0.6rem;
  color: #4c667a;
  font-size: 0.9rem;
}

.sync-sidebar .selectize-dropdown {
  border: 1px solid #d5e3ee !important;
  box-shadow: 0 18px 34px rgba(15, 45, 67, 0.10) !important;
}

.sync-card .card-header {
  background: linear-gradient(90deg, #f4f9fd 0%, #edf8fb 45%, #f7fbff 100%);
  color: #183247;
  font-weight: 700;
}

.sync-col-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sync-col-badge {
  justify-content: center;
  min-width: 100%;
  padding: 0.48rem 0.7rem;
  font-size: 0.94rem;
}

.sync-col-source {
  background: #fff0e4;
  color: #9a4b17;
  border: 1px solid #f0b07b;
}

.sync-col-target {
  background: #e3f5f7;
  color: #15606a;
  border: 1px solid #7fc8d1;
}

/* Color the source/target select boxes to replace the removed version badge */
.sync-select-block-source select.form-control,
.sync-select-block-source select.shiny-bound-input {
  background-color: #fff8f3;
  border-color: #f0b07b;
  color: #9a4b17;
}

.sync-select-block-target select.form-control,
.sync-select-block-target select.shiny-bound-input {
  background-color: #f0fafb;
  border-color: #7fc8d1;
  color: #15606a;
}

.sync-button-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.sync-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 72px;
  border: 1.5px solid #dce8f0;
  border-radius: 14px;
  font-weight: 700;
  color: #183247;
  background: #f8fbfe;
  box-shadow: 0 2px 6px rgba(16, 44, 63, 0.07), 0 1px 2px rgba(16, 44, 63, 0.05);
  transition: box-shadow 0.15s, background 0.15s, transform 0.1s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.sync-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
}

.sync-btn:hover {
  box-shadow: 0 8px 22px rgba(16, 44, 63, 0.14), 0 2px 6px rgba(16, 44, 63, 0.08);
  background: #ffffff;
  color: #183247;
  transform: translateY(-1px);
}

.sync-btn:active {
  transform: translateY(0px);
  box-shadow: 0 2px 6px rgba(16, 44, 63, 0.10);
}

.sync-btn-a { border-color: #f0b07b; }
.sync-btn-b { border-color: #7fc8d1; }
.sync-btn-full { border-color: #c8c0e0; }

.sync-btn-a::before  { background: #d8752a; }
.sync-btn-b::before  { background: #1f8d9b; }
.sync-btn-full::before { background: linear-gradient(90deg, #d8752a 0%, #1f8d9b 100%); }

.sync-btn-a:hover { border-color: #e09050; background: #fffaf5; }
.sync-btn-b:hover { border-color: #50aebb; background: #f3fbfc; }
.sync-btn-full:hover { border-color: #a8a0d0; background: #fafbff; }

.sync-route-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8aa4b8;
  margin-bottom: 7px;
}

.sync-route-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.sync-route-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.sync-route-arrow-icon {
  font-size: 1.05rem;
  color: #8aa4b8;
  line-height: 1;
}

#sync-comparison_table table.dataTable thead th {
  background: #f7fafc;
  color: #183247;
  border-bottom: 2px solid #cfdeea;
  box-shadow: inset 0 -1px 0 rgba(24, 50, 71, 0.04);
}

#sync-comparison_table table.dataTable tbody tr {
  background: #ffffff;
}

#sync-comparison_table table.dataTable tbody td:nth-child(2),
#sync-comparison_table table.dataTable tbody tr.odd td:nth-child(2),
#sync-comparison_table table.dataTable tbody tr.even td:nth-child(2) {
  background: rgba(216, 117, 42, 0.08);
}

#sync-comparison_table table.dataTable tbody td:nth-child(3),
#sync-comparison_table table.dataTable tbody tr.odd td:nth-child(3),
#sync-comparison_table table.dataTable tbody tr.even td:nth-child(3) {
  background: rgba(31, 141, 155, 0.08);
}

#sync-comparison_table table.dataTable tbody tr td {
  border-bottom: 1px solid #edf2f6;
}

#sync-comparison_table_wrapper {
  padding-top: 0.2rem;
}

.sync-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 0.85fr);
  align-items: start;
  gap: 1rem;
  width: 100%;
}

.sync-comparison-pane,
.sync-log-pane {
  min-width: 0;
}

.sync-log-pane {
  position: sticky;
  top: 0.75rem;
  height: calc(100vh - 148px);
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .sync-workspace {
    grid-template-columns: 1fr;
  }

  .sync-log-pane {
    position: static;
    height: auto;
  }
}

.advanced-pane .card {
  overflow: hidden;
}

.advanced-packages .card-header {
  background: linear-gradient(90deg, #eaf4fd 0%, #f5faff 100%);
  color: #145a90;
}

.advanced-receipt .card-header {
  background: linear-gradient(90deg, #eef9f8 0%, #f7fcfb 100%);
  color: #15606a;
}

.advanced-details .card-header {
  background: linear-gradient(90deg, #fff4e8 0%, #fffaf4 100%);
  color: #9a4b17;
}

.advanced-manifest .card-header {
  background: linear-gradient(90deg, #f1effd 0%, #faf8ff 100%);
  color: #5d49a7;
}

.sync-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.sync-status-same {
  background: #edf4fa;
  color: #355066;
}

.sync-status-missing-from-b,
.sync-status-missing-from-a,
.sync-status-newer-in-a,
.sync-status-newer-in-b {
  background: #fff0e6;
  color: #9a4b17;
}

#sync-comparison_table .form-control {
  border: 1px solid #d4e0ea;
  border-radius: 8px;
  background: #ffffff;
}

#sync-comparison_table_wrapper .dataTables_filter,
#sync-comparison_table_wrapper .dataTables_length,
#sync-comparison_table_wrapper .dataTables_info,
#sync-comparison_table_wrapper .dataTables_paginate {
  margin-top: 0.35rem;
}

#sync-comparison_table .dataTables_info,
#sync-comparison_table .dataTables_length,
#sync-comparison_table .dataTables_filter,
#sync-comparison_table .dataTables_paginate {
  color: #355066;
}

#sync-comparison_table_wrapper,
.sync-comparison-pane .dataTables_wrapper,
.sync-comparison-pane table.dataTable {
  width: 100% !important;
  margin: 0 !important;
}

/* Group the length selector, info text, and pagination compactly below the
   table instead of letting DataTables spread them across half-width columns. */
.sync-table-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 0.6rem;
}

.sync-table-foot .dataTables_length,
.sync-table-foot .dataTables_info,
.sync-table-foot .dataTables_paginate {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  text-align: left !important;
}

.sync-table-foot .dataTables_paginate {
  margin-left: auto !important;
}

/* Greyed-out look for sync controls disabled when nothing needs transferring. */
.sync-select-block select.form-control:disabled {
  background: #eef1f4;
  color: #9aa7b2;
  cursor: not-allowed;
  box-shadow: none;
}

.sync-compare-btn:disabled,
.sync-compare-btn[disabled] {
  background: #c4cdd6;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.85;
}

/* ── Sidebar scanning animation ── */
.sync-detecting-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 0.5rem 0.7rem;
  margin: 0.4rem 0 0.5rem;
  background: linear-gradient(135deg, #eef6ff 0%, #f0f8fe 100%);
  border: 1px solid #c3ddf5;
  border-radius: 14px;
}

.sync-detecting-pulse {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(29, 111, 165, 0.15);
  position: relative;
  animation: detect-pulse 1.4s ease-in-out infinite;
}

.sync-detecting-pulse::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #1d6fa5;
  border-right-color: #1d6fa5;
  animation: spin 0.75s linear infinite;
}

.sync-detecting-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1d6fa5;
  text-align: center;
  letter-spacing: 0.01em;
}

@keyframes detect-pulse {
  0%, 100% { transform: scale(1);    background: rgba(29, 111, 165, 0.12); }
  50%       { transform: scale(1.12); background: rgba(29, 111, 165, 0.22); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Sidebar detected-installs list ── */
.sidebar-installs {
  margin: 0.1rem 0 0.5rem;
}

.sidebar-installs-label {
  font-size: 0.9rem;
  font-weight: 800;
  color: #274158;
  margin-bottom: 0.45rem;
  letter-spacing: 0.01em;
}

.sidebar-install-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.28rem 0.55rem;
  border-radius: 8px;
  margin-bottom: 0.2rem;
  background: #f5f8fb;
  border: 1px solid #e0eaf2;
}

.sidebar-install-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.sidebar-install-current {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2f7d4f;
  background: #e3f5ea;
  border-radius: 5px;
  padding: 0.02rem 0.3rem;
}

.sidebar-install-lib,
.sidebar-install-path {
  font-size: 0.66rem;
  color: #6d879b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
  line-height: 1.25;
}

.sidebar-install-lib-prefix {
  font-family: inherit;
  color: #9aabba;
  font-weight: 600;
}

.sidebar-install-lib-shared {
  color: #b5762a;
}

.sidebar-installs-warn {
  font-size: 0.7rem;
  color: #b5762a;
  font-weight: 600;
  margin-top: 0.35rem;
  line-height: 1.3;
}

.sidebar-install-source {
  background: #fff4ec;
  border-color: #f0b07b;
}

.sidebar-install-target {
  background: #e8f9fa;
  border-color: #7fc8d1;
}

.sidebar-install-version {
  font-size: 0.8rem;
  font-weight: 800;
  color: #183247;
}

.sidebar-install-loc {
  font-size: 0.72rem;
  color: #6d879b;
  font-weight: 600;
}

.sync-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.sync-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.8rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  user-select: none;
}

.sync-summary-chip:hover {
  transform: translateY(-1px);
}

.sync-summary-chip:not(.chip-active) {
  opacity: 0.32;
  filter: grayscale(40%);
}

.chip-same {
  background: #edf4fa;
  color: #355066;
  border-color: #c8dcea;
}

.chip-diff-source {
  background: #fff4ec;
  color: #9a4b17;
  border-color: #f0b07b;
}

.chip-diff-target {
  background: #e8f9fa;
  color: #15606a;
  border-color: #7fc8d1;
}

.sync-log {
  margin-top: 0;
  border: 1px solid #d9e5ec;
  background: #f0f2f4;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  width: 100%;
  clear: both;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sync-log-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #274158;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}

.sync-log-subtitle {
  color: #6d879b;
  font-size: 0.78rem;
  font-weight: 650;
}

.sync-log pre {
  margin: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #183247;
  background: #ffffff;
  border: 1px solid #e2edf4;
  border-radius: 10px;
  padding: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.sync-log-empty pre {
  color: #183247;
}

.sync-log-error {
  color: #c0392b;
  font-weight: 700;
}

/* ── Keep the log panel fully visible while Shiny is recalculating ──
   Shiny >=1.9 busy-indicators fade the *children* of a .recalculating output
   ([data-shiny-busy-spinners] .recalculating > *), not the output element
   itself. The log re-renders on every add_sync_log() line, so during a
   Compare/Ship it would grey on every message. Force the pane and everything
   inside it to stay fully opaque, kill the fade transition, and suppress the
   busy spinner overlay. (Targeting only .recalculating — the old fix — missed
   the child that actually dims.) */
.sync-log-pane .recalculating,
.sync-log-pane.recalculating,
.sync-log-pane .shiny-html-output.recalculating,
.sync-log-pane .recalculating * {
  opacity: 1 !important;
  transition: none !important;
}
.sync-log-pane .recalculating::after {
  display: none !important;
}

/* ── Busy state: grey out and lock the sidebar controls during a sync ──
   Applied via the .sync-busy class toggled in set_sync_progress(). The log
   pane lives outside the sidebar, so it is unaffected. */
.sync-sidebar.sync-busy select,
.sync-sidebar.sync-busy button,
.sync-sidebar.sync-busy .selectize-control {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(35%);
}

/* ── Ship confirmation modal ── */
.modal-ship-header {
  background: linear-gradient(90deg, #2c1e6e 0%, #5f4ab4 100%);
  color: #ffffff;
  border-radius: 0.375rem 0.375rem 0 0;
  padding: 1rem 1.25rem;
}

.modal-ship-header .modal-title {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.modal-ship-header .btn-close {
  filter: invert(1);
}

.modal-ship-pkg-count {
  font-size: 1.4rem;
  font-weight: 800;
  color: #5f4ab4;
}

.modal-ship-mode {
  background: #f2f0fc;
  border-left: 3px solid #8a52c8;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: #3d2a8a;
  margin-top: 0.75rem;
}

/* Concrete "This will copy N · reinstall N · compile N" plan line — the
   specific summary that leads both the Preview and Confirm modals. */
.ship-plan-summary {
  margin: 0.4rem 0 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: #eef6f0;
  border-left: 3px solid #1f7a4d;
  color: #1f5a3a;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.ship-plan-summary-lead {
  font-weight: 800;
  color: #14502f;
}

.modal-ship-mode-desc {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: #5a4a8c;
}

/* ── Pre-ship invoice (itemised cost estimate) ── */
.invoice-card {
  margin-top: 0.85rem;
  border: 1px solid #e2e8ee;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  background: #fbfcfd;
}
.invoice-head {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8595a5;
  margin-bottom: 0.4rem;
}
.invoice-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.22rem 0;
  border-bottom: 1px dashed #edf1f5;
}
.invoice-qty {
  flex: 0 0 2.1rem;
  text-align: right;
  font-weight: 800;
  font-size: 0.95rem;
}
.invoice-label {
  font-weight: 700;
  font-size: 0.82rem;
  color: #3d4a59;
}
.invoice-hint {
  margin-left: auto;
  font-size: 0.7rem;
  color: #8595a5;
}
.invoice-copy   .invoice-qty { color: #1f7a4d; }
.invoice-binary .invoice-qty { color: #2c6fb0; }
.invoice-source .invoice-qty { color: #c0392b; }
/* Zero-count tier: shown for completeness but visually de-emphasised, and the
   tier colour is overridden back to grey so "0" never reads as an action. */
.invoice-line-zero { opacity: 0.45; }
.invoice-line-zero .invoice-qty { color: #8595a5 !important; }
.invoice-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  font-weight: 800;
  color: #2c1e6e;
}
.invoice-total-val {
  font-size: 1.05rem;
  color: #5f4ab4;
}

/* ── Progress overlay (withProgress) ──────────────────────────────── */
.shiny-progress-container {
  background-color: rgba(18, 40, 60, 0.38) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.shiny-progress {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 2rem 2.5rem !important;
  box-shadow: 0 24px 64px rgba(15, 45, 67, 0.24), 0 4px 16px rgba(15, 45, 67, 0.10) !important;
  border: 1.5px solid #d0e4f0 !important;
  min-width: 300px !important;
  max-width: 420px !important;
  text-align: center;
  z-index: 9999 !important;
}

.shiny-progress .detail {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #183247 !important;
  margin-bottom: 0.9rem !important;
  margin-top: 0 !important;
}

.shiny-progress .progress {
  height: 6px !important;
  border-radius: 6px !important;
  background: #edf3f8 !important;
  overflow: hidden !important;
}

.shiny-progress .progress-bar,
.shiny-progress .bar {
  background: linear-gradient(90deg, #5f4ab4 0%, #8a52c8 100%) !important;
}

/* ── Update module ─────────────────────────────────────────────────── */
.advanced-update-card-a .card-header {
  background: linear-gradient(90deg, #fff0e4 0%, #fffaf4 100%);
  color: #9a4b17;
}

.advanced-update-card-b .card-header {
  background: linear-gradient(90deg, #e3f5f7 0%, #f3fbfc 100%);
  color: #15606a;
}

.update-btn-wrap {
  margin-top: 1.25rem;
}

.update-btn {
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: 14px;
  border: 1.5px solid;
  font-size: 0.93rem;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.update-btn-a {
  background: #fff4ec;
  border-color: #e09050;
  color: #7a3510;
}
.update-btn-a:hover {
  background: #ffe8d5;
  border-color: #d8752a;
  color: #6a2e0e;
}

.update-btn-b {
  background: #e8f9fa;
  border-color: #50aebb;
  color: #0f5060;
}
.update-btn-b:hover {
  background: #d5f3f6;
  border-color: #1f8d9b;
  color: #0a3e4a;
}

.update-path-badge {
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  word-break: break-all;
}

.update-path-badge-a {
  background: #fff6ef;
  border: 1px solid #f0b07b;
  color: #7a3510;
}

.update-path-badge-b {
  background: #edfafb;
  border: 1px solid #7fc8d1;
  color: #0f5060;
}

.update-no-selection {
  color: #7a95a8;
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
}

.update-modal-warning {
  background: #fff8f0;
  border: 1px solid #f0b07b;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 0.75rem;
}

.update-modal-warning-list {
  margin: 0.4rem 0 0.4rem 1rem;
  padding: 0;
  font-size: 0.88rem;
}

.update-modal-warning-pkgs {
  color: #6a5540;
  font-size: 0.82rem;
  font-family: monospace;
  margin: 0.4rem 0 0.25rem;
  word-break: break-word;
}

.update-modal-warning-note {
  color: #7a6550;
  font-size: 0.82rem;
  margin: 0.5rem 0 0;
  font-style: italic;
}

/* ── Packages tab picker ───────────────────────────────────────────── */
.origin-picker-wrap {
  margin-bottom: 1rem;
}

.origin-picker-wrap select.form-control {
  border-radius: 14px !important;
  border: 1px solid #d5e3ee !important;
  background: #ffffff;
  padding: 0.6rem 0.9rem;
}

/* ── Error reporter modal ──────────────────────────────────────────── */
.error-reporter-msg {
  background: #fff3f3;
  border: 1px solid #f5c2c7;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.83rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
  color: #721c24;
  margin-bottom: 0.5rem;
}

.sync-inline-progress {
  margin: 0 0 0.85rem;
}

.sync-progress-label {
  color: #274158;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.sync-inline-progress .progress {
  height: 0.75rem;
  border-radius: 999px;
  background: #edf3f8;
  overflow: hidden;
}

.sync-inline-progress .progress-bar {
  background: linear-gradient(90deg, #5f4ab4 0%, #8a52c8 100%);
  font-size: 0.65rem;
  font-weight: 800;
}

/* ── Advanced tab badge ── */
.advanced-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: #5f4ab4;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

/* ── Restock sidebar ── */
.sync-restock-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sync-restock-btn {
  width: 100%;
  background: #f5f8fb;
  border: 1px solid #d0dde8;
  color: #355066;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}

.sync-restock-btn:hover {
  background: #e8f0f7;
  border-color: #aac4d8;
}

/* ── Depot ship hint (Dispatch tab) ── */
.sync-summary-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.depot-ship-hint {
  font-size: 0.78rem;
  color: #7a95a8;
  margin: 0;
}

.depot-ship-hint a {
  color: #1d6fa5;
  font-weight: 600;
  text-decoration: none;
}

.depot-ship-hint a:hover {
  text-decoration: underline;
}

.preview-custom-dispatch-note {
  margin: 0.7rem 0;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: #f6f2ff;
  border-left: 4px solid #8a52c8;
  color: #4a3d7a;
  font-size: 0.88rem;
}

.preview-custom-dispatch-note a {
  color: #5f4ab4;
  font-weight: 800;
  text-decoration: none;
}

.preview-custom-dispatch-note a:hover {
  text-decoration: underline;
}

/* ── Custom Dispatch source/target route summary ── */
.depot-route-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.depot-route-node {
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  border: 1px solid #d7e3ed;
  min-width: 0;
}

.depot-route-source {
  background: #fff8f3;
  border-color: #f0b07b;
}

.depot-route-target {
  background: #f0fafb;
  border-color: #7fc8d1;
}

.depot-route-kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: #6d879b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.depot-route-path {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #274158;
  font-size: 0.82rem;
  font-weight: 700;
}

.depot-route-arrow {
  align-self: center;
  color: #8a52c8;
  font-size: 1.2rem;
  font-weight: 900;
}

/* ── Delivery receipt panel ── */
.sync-receipt-card {
  margin-top: 1rem;
}

.sync-receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sync-receipt-elapsed {
  font-size: 0.78rem;
  color: #7a95a8;
  font-weight: 400;
}

/* ── Depot Ship pane ── */
.depot-ship-pane {
  padding: 0.75rem 0.25rem;
}

.depot-ship-context-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: #f5f8fb;
  border: 1px solid #dde8f0;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
}

.depot-ship-context-empty {
  color: #9aabba;
  font-style: italic;
}

.depot-ship-context-sep {
  font-weight: 800;
  color: #5f4ab4;
}

.depot-ship-context-mode {
  margin-left: auto;
  color: #6d879b;
}

.depot-ship-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.depot-ship-bulk {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.depot-ship-mode-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #355066;
  white-space: nowrap;
}

.depot-select-all-btn,
.depot-clear-sel-btn {
  background: #f0f2f5;
  border: 1px solid #ccd8e2;
  color: #355066;
  font-weight: 600;
  border-radius: 7px;
}

.depot-select-all-btn:hover,
.depot-clear-sel-btn:hover {
  background: #e0eaf3;
}

.depot-ship-summary-empty {
  color: #9aabba;
  font-weight: 500;
}

.depot-ship-summary {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.depot-summary-online { color: #1d6fa5; }
.depot-summary-ship   { color: #c27a3a; }
.depot-summary-skip   { color: #9aabba; }

.depot-ship-summary-busy {
  color: #5f4ab4;
  align-items: center;
  gap: 0.5rem;
}

.depot-ship-footer {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.depot-ship-timer {
  font-size: 0.82rem;
  color: #5a7e9a;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.depot-ship-execute-btn {
  min-width: 120px;
}

/* ── Browse → Ship button ── */
.browse-to-ship-btn {
  margin-top: 0.5rem;
  background: #eef6ff;
  border: 1px solid #b3d4f0;
  color: #1d6fa5;
  font-weight: 600;
  border-radius: 7px;
}

/* ── Global busy lock ──
   body.app-busy is toggled by courierAppBusy() (ui.R): set client-side from
   the Compare/Ship buttons' onclick (instant, before the blocking observer),
   cleared server-side when the operation finishes. While busy, every action
   button across all tabs is greyed and unclickable; modal buttons (e.g. a
   confirmation dialog's Cancel) stay usable. */
body.app-busy .btn,
body.app-busy .action-button {
  pointer-events: none;
  opacity: 0.5;
}
body.app-busy .modal .btn,
body.app-busy .modal .action-button {
  pointer-events: auto;
  opacity: 1;
}

/* ── Live shipping hero panel (Custom Dispatch) ───────────────────────── */
.depot-hero {
  background: linear-gradient(135deg, #1e9e62 0%, #15815a 100%);
  color: #ffffff;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(21, 129, 90, 0.25);
}
.depot-hero-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.depot-hero-main {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
}
.depot-hero-pkg {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.depot-hero-meta {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 4px;
}
.depot-summary-est {
  margin-left: 10px;
  color: #5f4ab4;
  font-weight: 700;
}
