/* Page-specific/shared brand styles extracted from app.css. Loaded before final app polish. */

/* ── Brand form/detail polish ──────────────────────────────────────────── */
.brand-form{padding:0;overflow:hidden}
.brand-form-bar{
  position:sticky;
  top:12px;
  z-index:21;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.brand-form-kicker{
  color:#667085;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.brand-form-name{font-size:16px;font-weight:780}
.form-section{
  padding:18px 22px;
  border-bottom:1px solid #edf1f6;
}
.form-section:last-of-type{border-bottom:0}
.form-section h3{margin-top:0}
.section-headline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.geo-quality{
  flex:0 0 auto;
  color:#475467;
  background:#f2f4f7;
  border:1px solid #e4e7ec;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:750;
}
.geo-quality.has-warnings{
  color:#b42318;
  background:#fff1f0;
  border-color:#ffd5d2;
}
.geo-actions{margin-top:12px}
.geo-row{
  background:#fff;
  border-color:#e7ebf2;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
.geo-row:hover{box-shadow:0 8px 22px rgba(16,24,40,.055)}
.geo-row.is-missing-url,.geo-row.is-missing-partner,.geo-row.is-missing-ref{
  border-color:#ffd5d2;
  background:linear-gradient(180deg,#fff,#fffafa);
}
.geo-row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-right:34px;
  margin-bottom:12px;
}
.geo-row-title{min-width:0;display:flex;align-items:center;gap:8px}
.geo-row-code{
  color:#0057b8;
  background:#eef6ff;
  border:1px solid #cfe7ff;
  border-radius:999px;
  padding:3px 9px;
  font-size:12px;
  font-weight:800;
}
.geo-row-domain{
  color:#667085;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.geo-row-flags{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.geo-flag{
  color:#027a48;
  background:#ecfdf3;
  border:1px solid #abefc6;
  border-radius:999px;
  padding:2px 7px;
  font-size:10px;
  font-weight:800;
}
.geo-row.is-missing-url .geo-flag-url,
.geo-row.is-missing-partner .geo-flag-partner,
.geo-row.is-missing-ref .geo-flag-ref{
  color:#b42318;
  background:#fff1f0;
  border-color:#ffd5d2;
}
.brand-detail-card{overflow:hidden}
.brand-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
  margin-bottom:18px;
}
.brand-summary-item{
  background:#f7f9fc;
  border:1px solid #e7ebf2;
  border-radius:8px;
  padding:12px 13px;
}
.brand-summary-item small{
  display:block;
  color:#667085;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.brand-summary-item b{
  display:block;
  margin-top:5px;
  font-size:20px;
  line-height:1.1;
}
.brand-summary-item.is-warn{
  background:#fff9f5;
  border-color:#ffd5c2;
}
.brand-summary-item.is-warn b{color:#b42318}
.brand-meta-grid{margin-bottom:12px}
.brand-geo-table .row-warn td:first-child{border-left:3px solid #ff9f0a}
.warn-text{color:#b42318;font-weight:750}
.compact-help{
  margin-top:-6px;
  margin-bottom:0;
  font-size:13px;
}
.brand-flow-head{
  margin-top:22px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.brand-flow-head h3{
  margin-top:0;
  border-bottom:0;
  padding-bottom:0;
}
.brand-flow-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.brand-flow-card{
  border:1px solid #e1e7ef;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--sh);
  overflow:hidden;
}
.brand-flow-card.is-warn{
  border-color:#ffd5c2;
  box-shadow:0 1px 2px rgba(16,24,40,.035),0 8px 24px rgba(180,35,24,.045);
}
.brand-flow-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid #edf1f6;
  background:#fbfcfe;
}
.brand-flow-title{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.brand-flow-main{min-width:0}
.brand-flow-url{
  font-weight:780;
  overflow-wrap:anywhere;
}
.brand-flow-sub{
  margin-top:2px;
  color:#667085;
  font-size:12px;
}
.brand-flow-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
}
.brand-flow-actions .btn{
  min-height:34px;
  padding:6px 10px;
  font-size:12px;
}
.brand-flow-grid{
  display:grid;
  grid-template-columns:minmax(260px,2fr) repeat(6,minmax(88px,1fr));
  gap:8px;
  padding:12px 16px 14px;
}
.brand-flow-field{
  min-width:0;
  border:1px solid #e7ebf2;
  border-radius:8px;
  background:#f7f9fc;
  padding:9px 10px;
}
.brand-flow-field small{
  display:block;
  color:#667085;
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.brand-flow-field b{
  display:block;
  margin-top:4px;
  font-size:17px;
  line-height:1.1;
}
.brand-flow-field.is-warn{
  border-color:#ffd5c2;
  background:#fff9f5;
}
.brand-flow-ref{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin-top:4px;
}
.brand-flow-ref a{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.brand-flow-ref .btn{
  flex:0 0 auto;
  min-height:28px;
  padding:3px 8px;
  font-size:11px;
}
.brand-flow-routing{
  border-top:1px solid #edf1f6;
}
.brand-flow-routing>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:46px;
  padding:10px 16px;
  cursor:pointer;
  list-style:none;
  font-weight:780;
}
.brand-flow-routing>summary::-webkit-details-marker{display:none}
.brand-flow-routing>summary:hover{background:#f8fbff}
.brand-flow-routing[open]>summary{
  border-bottom:1px solid #edf1f6;
  background:#f8fbff;
}
.brand-route-pills{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.brand-route-pills .pill{
  margin-left:0;
}
.brand-flow-routing .routing-body{
  padding:14px 16px 16px;
  background:#fff;
}
.brand-flow-empty-route{
  border-top:1px solid #edf1f6;
  padding:12px 16px;
  color:#667085;
  font-size:12px;
  background:#fbfcfe;
}
.brand-flow-routing .split-summary{
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
.brand-flow-routing .form-card{
  box-shadow:none;
  border-radius:10px;
}
@media (max-width:860px){
  .brand-form-bar{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
  .form-section{padding:16px 14px}
  .section-headline{flex-direction:column}
  .geo-quality{width:100%}
  .geo-row-head{align-items:flex-start;flex-direction:column}
  .geo-row-flags{justify-content:flex-start}
  .brand-flow-top{
    flex-direction:column;
  }
  .brand-flow-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .brand-flow-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px;
  }
  .brand-flow-field-wide{
    grid-column:1 / -1;
  }
  .brand-flow-routing>summary{
    align-items:flex-start;
    flex-direction:column;
  }
  .brand-route-pills{
    justify-content:flex-start;
  }
}

/* ── SVG Sparkline Tooltips on Brand Detail Page ── */
.svg-chart-container {
  position: relative;
}
.chart-tooltip {
  position: absolute;
  display: none;
  background: #1e293b;
  color: #fff;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11px;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 10;
  transition: left 0.08s ease, top 0.08s ease;
}
.chart-tooltip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 4px 0;
  border-style: solid;
  border-color: #1e293b transparent transparent;
  display: block;
  width: 0;
}