/* Components (v0.2 merged) */

/* Navbar */
.pi-navbar{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 var(--pi-space-6);
  background:var(--pi-surface);
  color:var(--pi-text);
  border-bottom:var(--pi-border);
}
/* Optional alias */
.navbar{ @extend .pi-navbar; }

/* Logo */
.logo{display:flex;align-items:center;gap:12px;font-weight:400;font-size:20px}

/* Cards */
.pi-card{
  background:var(--pi-surface);
  border:var(--pi-border);
  border-radius:var(--pi-radius-card);
  padding:var(--pi-space-6);
  box-shadow:none;
}
.pi-card > .pi-card-title{
  font-size:var(--pi-h2-size);
  line-height:var(--pi-h2-line);
  color:var(--pi-text-strong);
  margin:0 0 var(--pi-space-3);
}

/* Inputs */
.pi-input, .pi-select{
  width:100%;
  height:44px;
  padding:0 var(--pi-space-4);
  background:var(--pi-search-bckg);
  color:var(--pi-text);
  border:var(--pi-border);
  border-radius:var(--pi-radius-input);
  box-shadow:var(--pi-shadow-soft);
  transition:border-color var(--pi-quick), box-shadow var(--pi-quick);
}
.pi-input::placeholder{color:var(--pi-placeholder)}
.pi-input:focus, .pi-select:focus{
  outline:none;
  border-color:var(--pi-focus-ring);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pi-focus-ring) 20%, transparent);
}

/* Checkbox */
.pi-checkbox{
  appearance:none;
  width:18px;height:18px;
  border:var(--pi-border);
  border-radius:6px;
  display:inline-block;
  vertical-align:middle;
  position:relative;
  background:#fff;
  transition:background var(--pi-quick), border-color var(--pi-quick);
}
.pi-checkbox:checked{
  background:var(--pi-primary);
  border-color:var(--pi-primary);
}
.pi-checkbox:checked::after{
  content:"";
  position:absolute;inset:3px;
  background:#371F7F;border-radius:2px;
}

/* Buttons */
.pi-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 var(--pi-space-5);
  border-radius:var(--pi-radius-btn);
  border:1px solid transparent;
  font-size:18px;line-height:24px;font-weight:400;
  cursor:pointer;transition:all var(--pi-quick);
}
.pi-btn.primary{ background:var(--pi-primary);color:#fff; }
.pi-btn.primary:hover{ background:var(--pi-primary-600); }
.pi-btn.primary:focus-visible{ outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 3px var(--pi-primary); }
.pi-btn.danger{ background:var(--pi-danger);color:#fff; }
.pi-btn.danger:hover{ background:var(--pi-danger-600); }
.pi-btn.danger:focus-visible{ outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 3px var(--pi-danger); }

/* Table */
.pi-table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  background:var(--pi-surface);
  border:var(--pi-border);
  border-radius:16px;
  overflow:hidden;
}
.pi-table th, .pi-table td{
  padding:12px 16px;text-align:left;border-bottom:1px solid rgba(228,228,228,.6);
}
.pi-table thead th{
  background:#F2F2F2;
  color:#151515;
  font-weight:400;
}
.pi-table tbody tr:last-child td{border-bottom:0}
.pi-table tbody tr:hover td{background:color-mix(in srgb, #fff 92%, #000)}

/* Links */
a.pi-link{
  color:var(--pi-text-strong);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity var(--pi-quick);
}
a.pi-link:hover{opacity:.75}

/* Notifications */
.notification{
  border-radius:12px;
  padding:12px 16px;
  border:var(--pi-border);
  background:var(--pi-surface);
  color:var(--pi-text-strong);
  font-weight:400;
}
.notification.success{ border-color:#C8E6C9; background:#EAF7EA; }
.notification.error{   border-color:#F5C6CB; background:#FCE8EA; }

/* Searchable dropdown: prevent layout shifts/gaps */
.searchable-select-container{
  position: relative;
  margin-bottom: var(--pi-space-3); /* small, consistent spacing between inputs */
}

/* Hide by default + take out of document flow */
.searchable-select-dropdown{
  display: none;                 /* hidden until JS sets display:block */
  position: absolute;            /* don't push the input below */
  top: calc(100% + 6px);         /* 6px gap under the input */
  left: 0; right: 0;
  background: var(--pi-surface);
  border: var(--pi-border);
  border-radius: var(--pi-radius-card);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--pi-shadow-soft);
  padding: 0;                    /* avoid extra white space from .pi-card */
  z-index: 1000;
}

/* If you keep the pi-card class on the dropdown, remove its inner padding */
.searchable-select-dropdown.pi-card{ padding: 0; }

/* Option rows inside the dropdown */
.searchable-select-dropdown div {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(228,228,228,.6);
  cursor: pointer;
  transition: background var(--pi-quick), color var(--pi-quick); /* add this line */
}

.searchable-select-dropdown div:last-child {
  border-bottom: 0;
}

/* Hover state for dropdown options */
.searchable-select-dropdown div:hover {
  background: var(--pi-primary);  /* purple */
  color: #fff;                   /* white text */
}

/* Make analysis typography consistent (no fake bold for Bebas) */
#pairAnalysisResult h3,
#pairAnalysisResult h4,
#individualH2HContainer h3,
#individualH2HContainer h4,
#pair1HistoricalStats h3,
#pair1HistoricalStats h4,
#pair2HistoricalStats h3,
#pair2HistoricalStats h4,
#pair1BettingStats h3,
#pair1BettingStats h4,
.pi-card h3.pi,
.pi-card h4.pi {
  font-family: var(--pi-font-display);
  font-weight: 400;
  letter-spacing: .35px;
}

/* Labels inside cards (your <b> / <strong>) */
#pairAnalysisResult b,
#pairAnalysisResult strong,
#individualH2HContainer b,
#individualH2HContainer strong,
.pi-card b,
.pi-card strong {
  font-weight: 400 !important;
}

/* Tabs */
.pi-tabs{display:flex;gap:32px;margin:20px 0}
.pi-tab{cursor:pointer;opacity:.55;transition:opacity var(--pi-quick)}
.pi-tab.active{opacity:1}
.pi-tab.disabled{opacity:.35;pointer-events:none}

/* Accordion */
.pi-accordion{border:var(--pi-border);border-radius:16px;background:var(--pi-surface);overflow:hidden}
.pi-acc-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;cursor:pointer;border-bottom:1px solid rgba(228,228,228,.6);
}
.pi-acc-head.disabled{opacity:.45;cursor:not-allowed}
.pi-acc-body{display:none;padding:12px 16px}
.pi-acc-body.open{display:block}
.pi-acc-meta{font-size:14px;opacity:.7}

/* Loss rows appear lighter */
.row-loss{background:color-mix(in srgb, #fff 94%, #000)}

/* Grey out text (not the block) for lost rows */
.row-loss { color: rgba(0,0,0,.45); }
.pi-acc-body .row-loss b { color: inherit; } /* keep bold text grey too */