/**
 * BH Box Office — Breakdown Analytics Visual Override
 *
 * Reskins State Wise / City Wise / Cinema Chain Wise tables.
 * Does NOT touch .bo-summary-box, .bo-occupancy-splits, or any plugin logic.
 *
 * v1.2.0 — Fix empty grouprow gap, orange border bleed, sticky offset after rank removal.
 */

/* ── Scoped CSS custom properties ─────────────────────────────────────────────── */
.bh-bo-analytics-wrapper {
	--bh-red:     #E8172A;
	--ink:        #1A1A1A;
	--gray-800:   #333333;
	--gray-600:   #6B6B6B;
	--gray-400:   #9A9A9A;
	--gray-200:   #E4E4E4;
	--gray-100:   #F3F3F3;
	--gray-50:    #FAFAFA;
	--green:      #1CA84C;
	--green-pale: #E8F5E9;
	--white:      #FFFFFF;
}

/* ── Wrapper ───────────────────────────────────────────────────────────────────── */
.bh-bo-analytics-wrapper {
	gap:        20px;
	margin-top: 16px;
}

/* ── Card ──────────────────────────────────────────────────────────────────────── */
.bh-bo-card,
.bh-bo-section {
	border:        1px solid var(--gray-200);
	border-radius: 6px;
	box-shadow:    none;
	overflow:      hidden !important; /* lock: prevents theme table borders bleeding in */
	background:    var(--white);
}

/* ── Card header ───────────────────────────────────────────────────────────────── */
.bh-bo-head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         12px 16px 10px;
	background:      var(--white);
	border-bottom:   2px solid var(--ink);
	border-top:      none;
	border-left:     none;
	border-right:    none;
}

/* ── Section heading ───────────────────────────────────────────────────────────── */
.bh-bo-title {
	font-family: 'Bebas Neue', sans-serif;
	font-size:   22px;
	font-weight: 400;
	color:       var(--ink);
	line-height: 1;
	gap:         0;
}

/* Hide emoji icon and geographic pill */
.bh-bo-ico,
.bh-bo-pill {
	display: none;
}

/* ── Row count ─────────────────────────────────────────────────────────────────── */
.bh-bo-rows {
	font-family:    'DM Mono', monospace;
	font-size:      12px;
	font-weight:    400;
	color:          var(--gray-600);
	text-transform: none;
	letter-spacing: 0;
}

/* ── HIDE: entire grouprow <tr> — hiding only th cells leaves row height behind ─── */
.bh-bo-grouprow {
	display: none !important;
}

/* When grouprow is hidden, the colrow must sit at top:0 (not top:30px) */
.bh-bo-analytics-table.bh-bo-has-occ .bh-bo-colrow .bh-bo-th {
	top: 0 !important;
}

/* ── HIDE: rank # column — both header th and body td ─────────────────────────── */
.bh-bo-th.bh-bo-col-rank,
.bh-bo-th.bh-bo-sticky-rank,
.bh-bo-td.bh-bo-rank,
.bh-bo-td.bh-bo-sticky-rank {
	display: none !important;
}

/* ── HIDE: Gross column ────────────────────────────────────────────────────────── */
/* Header: Gross th carries .bh-bo-is-sorted */
.bh-bo-table-header .bh-bo-th.bh-bo-is-sorted {
	display: none !important;
}
/* Body: Gross is the 3rd td in each row (rank=1 hidden, name=2, gross=3) */
.bh-bo-analytics-wrapper .bh-bo-tbody .bh-bo-row .bh-bo-td:nth-child(3) {
	display: none !important;
}

/* ── Sticky Name column — NOW the first visible frozen column ──────────────────── */
/* Override plugin's left:40px → left:0 since rank column is gone */
.bh-bo-td.bh-bo-sticky-name,
.bh-bo-table-header .bh-bo-th.bh-bo-sticky-name {
	left:         0 !important;
	border-right: 1px solid var(--gray-200);
}

/* ── Table header — light style ────────────────────────────────────────────────── */
.bh-bo-table-header .bh-bo-th {
	position:       sticky;
	top:            0;
	z-index:        5;
	background:     var(--white);
	color:          var(--gray-600);
	font-family:    'DM Sans', sans-serif;
	font-size:      11px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding:        10px 12px;
	border-bottom:  1px solid var(--gray-200);
	white-space:    nowrap;
}

/* Sticky corner header cells: white bg */
.bh-bo-table-header .bh-bo-th.bh-bo-sticky-column {
	z-index:    6;
	background: var(--white);
}

/* Occupancy section divider line */
.bh-bo-colrow .bh-bo-th.bh-bo-occ-start {
	border-left: 2px solid var(--gray-200);
}

/* ── Table body cells ───────────────────────────────────────────────────────────── */
.bh-bo-td {
	font-family:        'DM Mono', monospace;
	font-size:          13px;
	color:              var(--ink);
	border-bottom:      1px solid var(--gray-100);
	background:         var(--white);
	transition:         background-color 150ms ease;
	padding:            10px 12px;
	white-space:        nowrap;
	font-variant-numeric: tabular-nums;
}

/* Name cell — DM Sans medium weight */
.bh-bo-td.bh-bo-name {
	font-family: 'DM Sans', sans-serif;
	font-size:   13px;
	font-weight: 500;
	color:       var(--ink);
}

/* Row hover */
.bh-bo-row:hover .bh-bo-td {
	background: var(--gray-50);
}

/* Sticky body Name cell */
.bh-bo-td.bh-bo-sticky-column {
	background: var(--white);
	z-index:    4;
}
.bh-bo-row:hover .bh-bo-td.bh-bo-sticky-column {
	background: var(--gray-50);
}

/* Occupancy col divider in body */
.bh-bo-td.bh-bo-occ-start {
	border-left: 2px solid var(--gray-200);
}

/* ── Occupancy badge ────────────────────────────────────────────────────────────── */
/*
 * Shape/size only — do NOT override background or color.
 * The plugin's PHP renderer writes inline style="background:hsl(…);color:hsl(…);"
 * on each badge, producing a dynamic color matrix tied to the occupancy value.
 * We preserve that matrix and only restyle the badge shape to match the new UI.
 */
.bh-bo-occ {
	display:       inline-block;
	min-width:     auto;
	border-radius: 3px;         /* tighter radius vs plugin's 6px */
	padding:       3px 10px;
	font-size:     12px;
	font-weight:   600;
	text-align:    center;
}

/* N.A. badge only — no inline style on these so safe to set color directly */
.bh-bo-occ.bh-bo-is-na {
	background-color: var(--gray-100);
	color:            var(--gray-400);
	font-weight:      500;
}

/* ── Scroll container ───────────────────────────────────────────────────────────── */
.bh-bo-scroll-container {
	width:      100%;
	max-width:  100%;
	min-width:  0;
	max-height: none;     /* remove 350px vertical scroll cage */
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	padding:    0;
}

/* Hide scroll hint */
.bh-bo-scroll-hint {
	display: none !important;
}

/* ── Table min-width — reduced now that rank + gross columns are hidden ──────────── */
.bh-bo-analytics-table {
	min-width: 560px;
	border-collapse: separate;
	border-spacing:  0;
}
.bh-bo-analytics-table.bh-bo-has-occ {
	min-width: 820px;
}

/* ── "Show all N ▼" control ─────────────────────────────────────────────────────── */
.bh-bo-showall {
	display:        block;
	width:          100%;
	font-size:      12px;
	font-weight:    700;
	color:          var(--bh-red);
	letter-spacing: 0.03em;
	padding:        10px 0;
	text-align:     center;
	background:     transparent;
	border:         none;
	border-top:     1px solid var(--gray-100);
	cursor:         pointer;
}
.bh-bo-showall:hover {
	background: transparent;
	color:      #C01020;
}

/* ── Responsive — mobile (≤ 640px) ─────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.bh-bo-title {
		font-size: 19px;
	}

	.bh-bo-head {
		padding: 10px 12px 8px;
	}

	/* Sticky Name column pinned at left:0 on mobile too */
	.bh-bo-td.bh-bo-sticky-name,
	.bh-bo-table-header .bh-bo-th.bh-bo-sticky-name {
		left:       0 !important;
		background: #ffffff;
	}

	.bh-bo-td.bh-bo-sticky-column,
	.bh-bo-table-header .bh-bo-th.bh-bo-sticky-column {
		background: #ffffff;
	}

	.bh-bo-analytics-table       { min-width: 420px; }
	.bh-bo-analytics-table.bh-bo-has-occ { min-width: 640px; }
}

/* ── Override theme's .bh-movie-box-office table rule ──────────────────────────
 * style.css sets margin-bottom:2.8125rem and border-bottom:2px solid #444 on
 * ALL tables inside .bh-movie-box-office via selector (0,1,1 specificity).
 * Using .bh-movie-box-office .bh-bo-analytics-table gives specificity 0,2,1
 * which beats it without !important, and without touching any other table.
 */
.bh-movie-box-office .bh-bo-analytics-table {
	margin-bottom: 1.8125rem;   /* reduced from theme's 2.8125rem               */
	border-bottom: none;        /* reset theme's dark 2px solid #444 bottom line */
}