/* =========================================================
   BOOKMARKED OPPORTUNITIES
   ========================================================= */

:root {
  --opp-blue: #145386;
  --opp-blue-light: #edf5fb;
  --opp-green: #067647;
  --opp-green-light: #ecfdf3;
  --opp-red: #b91c1c;
  --opp-red-light: #fef2f2;
  --opp-purple: #7146aa;
  --opp-purple-light: #f6f1fd;
  --opp-orange: #c45b0a;
  --opp-text: #263746;
  --opp-text-soft: #687887;
  --opp-border: #e5e9ed;
  --opp-background-soft: #f8fafb;
}


/* Main card */

.opp-card {
  position: relative;
  margin-bottom: 7px;
  font-family: Arial, Helvetica, sans-serif;
}

.opp-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 7px 12px;
  background: #ffffff;
  border: 1px solid var(--opp-border);
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.opp-summary:hover {
  background: #fdfefe;
  border-color: #bdd8ed;
  box-shadow: 0 3px 10px rgba(20, 83, 134, 0.09);
}


/* Expand button */

.opp-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #f5f8fa;
  border: 1px solid #d8e0e7;
  border-radius: 7px;
  color: var(--opp-blue);
  cursor: pointer;
  outline: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.opp-expand-button:hover {
  background: #eaf3f9;
  border-color: #b9d4e8;
}

.opp-expand-button:active {
  transform: scale(0.95);
}

.opp-expand-button.is-open {
  background: #e5f1f9;
  border-color: #a8cade;
}

.opp-expand-icon {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.opp-expand-button.is-open .opp-expand-icon {
  transform: rotate(180deg);
}


/* Brand icon */

.opp-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  background: var(--opp-blue-light);
  border-radius: 8px;
  color: var(--opp-blue);
  font-size: 16px;
}

.opp-brand-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* Summary information */

.opp-summary-main {
  flex: 1;
  min-width: 170px;
  overflow: hidden;
}

.opp-name {
  margin-bottom: 3px;
  overflow: hidden;
  color: var(--opp-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opp-summary-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--opp-text-soft);
  font-size: 11px;
  line-height: 1.2;
}

.opp-frandev-group {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opp-meta-divider {
  flex-shrink: 0;
  color: #b5bec6;
}

.opp-type-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: #526575;
  font-weight: 600;
  white-space: nowrap;
}


/* Summary pills */

.opp-summary-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.opp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.opp-pill-blue {
  background: #eef6ff !important;
  border-color: #cfe2f4;
  color: var(--opp-blue);
}

.opp-pill-green {
  background: var(--opp-green-light);
  border-color: #b7ebc6;
  color: var(--opp-green);
}

.opp-pill-red {
  background: var(--opp-red-light);
  border-color: #fca5a5;
  color: var(--opp-red);
}

.opp-pill-grey {
  background: #f5f7f9;
  border-color: #dde4ea;
  color: #596b7a;
}

.opp-pill-rating {
  background: var(--opp-purple-light);
  border-color: #d8c9ef;
  color: var(--opp-purple);
  cursor: help;
}

.opp-pill-rating:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}


/* Comment hover icon */

.opp-icon-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  box-sizing:border-box;
  background:#f3f6f8;
  border:1px solid #dce4ea;
  border-radius:50%;
  color:#53697c;
  cursor:help;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

/* Force Font Awesome icon dead centre */
.opp-icon-pill > .fas,
.opp-icon-pill > .far {
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin:0;
  padding:0;
  font-size:11px;
  line-height:14px;
  text-align:center;
}

.opp-icon-pill:hover {
  background:#edf4f9;
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(15,23,42,0.12);
}


/* Expandable section */

.opp-expand-details {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.25s ease,
    margin-top 0.4s ease;
}

.opp-expand-details.is-open {
  margin-top: 6px;
  opacity: 1;
}

.opp-detail-card {
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--opp-border);
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}


/* Expanded header */

.opp-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #edf0f2;
}

.opp-detail-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  background: var(--opp-blue-light);
  border-radius: 8px;
  color: var(--opp-blue);
}

.opp-detail-title {
  color: var(--opp-text);
  font-size: 16px;
  font-weight: 700;
}

.opp-detail-subtitle {
  margin-top: 2px;
  color: #6b7b89;
  font-size: 12px;
}


/* Expanded fields */

.opp-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px;
}

.opp-detail-field {
  padding: 9px 10px;
  background: var(--opp-background-soft);
  border: 1px solid #e7ebee;
  border-radius: 7px;
}

.opp-detail-label {
  margin-bottom: 5px;
  color: #7c8995;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.opp-detail-value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #41505d;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.opp-value-blue {
  color: var(--opp-blue);
}

.opp-value-green {
  color: var(--opp-green);
}

.opp-value-red {
  color: var(--opp-red);
}

.opp-value-orange {
  color: var(--opp-orange);
}

.opp-value-purple {
  color: var(--opp-purple);
}


/* Comments and feedback */

.opp-text-panel {
  padding: 11px 13px;
  margin-top: 9px;
  background: #f8fafc;
  border: 1px solid var(--opp-border);
  border-radius: 8px;
}

.opp-feedback-panel {
  background: #faf8fd;
  border-color: #e6dcf1;
}

.opp-text-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #6c7b88;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.opp-feedback-panel .opp-text-heading {
  color: var(--opp-purple);
}

.opp-text-content {
  color: #41505d;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.opp-empty {
  color: #8b98a3;
  font-style: italic;
}


/* Hidden tooltip source */

.opp-tooltip-template {
  display: none;
}


/* Floating tooltip placed directly on the body */

.opp-floating-tooltip {
  position: fixed;
  z-index: 9999999;
  width: 320px;
  max-width: calc(100vw - 30px);
  padding: 0;
  pointer-events: none;
  background: #ffffff;
  border: 1px solid #dce3e8;
  border-radius: 11px;
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.2),
    0 3px 8px rgba(15, 23, 42, 0.08);
  animation: oppTooltipIn 0.16s ease;
}

.opp-tooltip-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: linear-gradient(135deg, #f7f2fd, #ffffff);
  border-bottom: 1px solid #ebe3f3;
  border-radius: 11px 11px 0 0;
}

.opp-tooltip-header-comment {
  background: linear-gradient(135deg, #f2f7fb, #ffffff);
  border-bottom-color: #dce9f2;
}

.opp-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  background: var(--opp-purple);
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
}

.opp-tooltip-icon-comment {
  background: var(--opp-blue);
}

.opp-tooltip-title {
  color: #4c365f;
  font-size: 12px;
  font-weight: 700;
}

.opp-tooltip-title-comment {
  color: #2f526b;
}

.opp-tooltip-rating {
  margin-top: 2px;
  color: var(--opp-purple);
  font-size: 14px;
  font-weight: 800;
}

.opp-tooltip-body {
  padding: 11px 13px 13px;
}

.opp-tooltip-label {
  margin-bottom: 5px;
  color: #85919b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.opp-tooltip-content {
  color: #41505d;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

@keyframes oppTooltipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Responsive layout */

@media (max-width: 900px) {
  .opp-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .opp-summary-main {
    min-width: calc(100% - 100px);
  }

  .opp-summary-pills {
    width: 100%;
    padding-left: 44px;
    justify-content: flex-start;
  }
}


.opp-detail-grid-clean {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
}

.opp-detail-section-label {
  margin:14px 0 7px;
  color:#7c8995;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

.opp-detail-section-label:first-child {
  margin-top:0;
}

/* Centre icons vertically inside pills */
.opp-pill > .fas,
.opp-pill > .far {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:14px;
  line-height:14px;
  margin:0;
  padding:0;
  vertical-align:middle;
}

/* Match icon colour to pill text */
.opp-pill-blue > .fas,
.opp-pill-blue > .far {
  color:var(--opp-blue) !important;
}

.opp-pill-green > .fas,
.opp-pill-green > .far {
  color:var(--opp-green);
}

.opp-pill-red > .fas,
.opp-pill-red > .far {
  color:var(--opp-red);
}

.opp-pill-rating > .fas,
.opp-pill-rating > .far {
  color:var(--opp-purple);
}

.opp-pill.opp-pill-blue .fa-paper-plane,
.opp-pill.opp-pill-blue .fa-paper-plane:before {
  color:#145386 !important;
  -webkit-text-fill-color:#145386 !important;
}


/* =========================================================
   EXPANDED OPPORTUNITY ACTION BAR
   ========================================================= */

.opp-action-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  margin-bottom:12px;
  background:#f8fafb;
  border:1px solid #e5e9ed;
  border-radius:8px;
}

.opp-action-label {
  display:flex;
  align-items:center;
  gap:7px;
  color:#687887;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  white-space:nowrap;
}

.opp-action-label .fas {
  color:#145386;
  font-size:11px;
}

.opp-action-buttons {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}

.opp-action-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  padding:6px 10px;
  box-sizing:border-box;
  border:1px solid #d8e0e7;
  border-radius:6px;
  background:#ffffff;
  color:#41505d !important;
  font-size:11px;
  font-weight:600;
  line-height:1;
  text-decoration:none !important;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.opp-action-btn:hover,
.opp-action-btn:focus {
  text-decoration:none !important;
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(15,23,42,0.08);
}


/* View */

.opp-action-view {
  color:#145386 !important;
  border-color:#cbddeb;
}

.opp-action-view:hover {
  background:#edf5fb;
  border-color:#a9cce3;
}


/* Territory */

.opp-action-territory {
  color:#067647 !important;
  border-color:#c6e7d1;
}

.opp-action-territory:hover {
  background:#ecfdf3;
  border-color:#a7dcb9;
}


/* Edit */

.opp-action-edit {
  color:#596b7a !important;
}

.opp-action-edit:hover {
  background:#f2f5f7;
  border-color:#cbd5dc;
}


/* Delete */

.opp-action-delete {
  color:#b42318 !important;
  border-color:#f1c4c0;
}

.opp-action-delete:hover {
  background:#fef3f2;
  border-color:#eaa6a0;
}


/* Keep Font Awesome icons aligned */

.opp-action-btn > .fas,
.opp-action-btn > .far {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:12px;
  height:12px;
  margin:0;
  line-height:12px;
  color:inherit !important;
}


/* Smaller screens */

@media (max-width:800px) {

  .opp-action-bar {
    align-items:flex-start;
    flex-direction:column;
  }

  .opp-action-buttons {
    width:100%;
    justify-content:flex-start;
  }
}

/* Territory Sent pill */
.opp-pill.opp-pill-blue .fa-paper-plane,
.opp-pill.opp-pill-blue .fa-paper-plane:before {
  color:#145386 !important;
  -webkit-text-fill-color:#145386 !important;
}

/* Territory Check action button */
.opp-action-territory .fa-paper-plane,
.opp-action-territory .fa-paper-plane:before {
  color:#067647 !important;
  -webkit-text-fill-color:#067647 !important;
}


/* =========================================================
   CLIENT PORTAL INLINE TOGGLE
   ========================================================= */

.opp-portal-field {
  min-width:220px;
}

.opp-portal-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.opp-portal-row .opp-detail-value {
  flex-shrink:0;
}


/* Toggle button */

.opp-portal-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:25px;
  padding:4px 8px;
  box-sizing:border-box;
  border:1px solid;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  text-decoration:none !important;
  cursor:pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.opp-portal-toggle:hover {
  text-decoration:none !important;
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(15,23,42,0.08);
}


/* ENABLE */

.opp-portal-enable {
  background:#ecfdf3;
  border-color:#b7ebc6;
  color:#067647 !important;
}

.opp-portal-enable:hover {
  background:#e0f9e9;
  border-color:#8ed4a6;
}


/* DISABLE */

.opp-portal-disable {
  background:#f5f7f9;
  border-color:#d8e0e7;
  color:#596b7a !important;
}

.opp-portal-disable:hover {
  background:#edf1f4;
  border-color:#c3ced6;
}


/* Keep toggle icons aligned + inherit correct colour */

.opp-portal-toggle > .fas,
.opp-portal-toggle > .far {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin:0;
  padding:0;
  line-height:14px;
  color:inherit !important;
}


/* Protect against rogue Font Awesome/theme styling */

.opp-portal-enable .fa-toggle-on,
.opp-portal-enable .fa-toggle-on:before {
  color:#067647 !important;
  -webkit-text-fill-color:#067647 !important;
}

.opp-portal-disable .fa-toggle-off,
.opp-portal-disable .fa-toggle-off:before {
  color:#596b7a !important;
  -webkit-text-fill-color:#596b7a !important;
}

/* Territory Check detail panel - fix white paper plane */
.opp-detail-value .fa-paper-plane,
.opp-detail-value .fa-paper-plane:before {
  color:#145386 !important;
  -webkit-text-fill-color:#145386 !important;
}