/* PanelChart additions on top of BuzzMelt's Graphite admin (admin.css). */

.pc-narrow { max-width: 8rem; }

/* A result written "780-51-489" */
.pc-result {
    font-family: var(--g-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pc-red { color: var(--g-bad); }
/* A one-line result with the blue numbers stacked on its jodi (dashboard). */
.pc-result-blue { display: inline-flex; align-items: center; }
.pc-stack { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; margin: 0 .1rem; }
.pc-stack .pc-mark { font-size: .68rem; font-weight: 700; color: #4040d0; }

/* The panel chart grid: a row per week, panna / jodi / panna per day. */
.pc-chart {
    font-family: var(--g-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    border-color: var(--g-line);
}
.pc-chart thead th {
    background: var(--g-hover);
    text-align: center;
    font-family: var(--g-font);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.pc-chart td { vertical-align: middle; padding: .25rem .3rem; }
.pc-chart .pc-week {
    font-size: .72rem;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--g-text-2);
    background: var(--g-bg);
}
.pc-chart .pc-panna { font-size: .72rem; line-height: 1.15; color: var(--g-muted); }
.pc-chart .pc-jodi { font-size: 1rem; font-weight: 700; color: var(--g-text); }
.pc-chart .pc-red { color: var(--g-bad); }
/* Blue numbers around a jodi: distance above, digit sum below. */
.pc-chart .pc-mark { display: block; font-size: .72rem; line-height: 1.1; font-weight: 700; color: #4040d0; }
.pc-chart .pc-off { color: var(--g-faint); }
.pc-chart .pc-none { background: var(--g-bg); }
/* Today's open-only result from the homepage, until the chart has the full one. */
.pc-chart .pc-open { background: #fffbe0; }
/* The newest week, marked so it is easy to find. */
.pc-chart tr#latest-week > td { box-shadow: inset 0 2px 0 var(--g-ember), inset 0 -2px 0 var(--g-ember); }
.pc-chart tr#latest-week > td.pc-week { color: var(--g-text); font-weight: 600; }
#latest-week { scroll-margin-top: 5rem; }

/* Statistics page: count grids shaded by how far each count is from chance (0 far below … 4 far above). */
.pc-grid { font-family: var(--g-mono); font-variant-numeric: tabular-nums; text-align: center; border-color: var(--g-line); }
.pc-grid th { background: var(--g-hover); font-weight: 600; }
.pc-grid td { line-height: 1.15; padding: .25rem .3rem; }
.pc-grid .pc-count { display: block; font-size: .78rem; }
.pc-grid .pc-gap { display: block; font-size: .68rem; color: var(--g-muted); }
.pc-grid .pc-total th, .pc-grid .pc-total td { font-weight: 700; }
.pc-blue { color: #4040d0; }
.pc-heat-0 { background: #dbe4ff !important; }
.pc-heat-1 { background: #eef2ff !important; }
.pc-heat-2 { background: transparent; }
.pc-heat-3 { background: #fff1e0 !important; }
.pc-heat-4 { background: #ffd8b0 !important; }
.pc-heat-row-0 > td { background: #dbe4ff; }
.pc-heat-row-1 > td { background: #eef2ff; }
.pc-heat-row-3 > td { background: #fff1e0; }
.pc-heat-row-4 > td { background: #ffd8b0; }
.pc-legend { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.pc-legend > span { padding: 0 .4rem; border: 1px solid var(--g-line); border-radius: .25rem; }

/* Technique lab and summary: the risk always comes first and stands out. */
.pc-risk-banner { font-size: .9rem; }
.pc-risk-card { border: 2px solid var(--g-bad); }
.pc-risk-card > .card-header { background: #fff1f0; color: #a50e0e; border-bottom-color: #f3c7c3; }
.pc-riskbar { display: flex; height: 1.5rem; border-radius: .375rem; overflow: hidden; font-size: .75rem; color: #fff; margin-bottom: .75rem; }
.pc-riskbar > div { display: flex; align-items: center; justify-content: center; min-width: 6px; white-space: nowrap; padding: 0 .4rem; }
.pc-riskbar-win { background: #137333; }
.pc-riskbar-lose { background: #c5221f; }
.pc-risk-table td { border-color: #f3dcda; }
.pc-risk-table td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-note { background: var(--g-hover); border-radius: .375rem; padding: .5rem .75rem; font-size: .875rem; margin-top: .5rem; }
.pc-stat { background: var(--g-hover); border-radius: .375rem; padding: .5rem .75rem; height: 100%; }
.pc-stat-label { font-size: .75rem; color: var(--g-muted); }
.pc-stat-value { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-pick { font-family: var(--g-mono); font-weight: 700; font-size: 1.1rem; background: var(--g-hover); border: 1px solid var(--g-line); border-radius: .25rem; padding: .05rem .4rem; }
.pc-curve { width: 100%; height: auto; display: block; }
.pc-curve-line { fill: none; stroke: #1f6feb; stroke-width: 2; stroke-linejoin: round; }
.pc-curve-start { stroke: var(--g-muted); stroke-width: 1; stroke-dasharray: 5 4; }
.pc-curve-grid { stroke: var(--g-line); stroke-width: 1; }
.pc-curve-label { font-size: 14px; fill: var(--g-muted); font-family: var(--g-font); }

/* Summary table: technique name sticks to the left while the markets scroll. */
.pc-sum { font-size: .8rem; border-color: var(--g-line); }
.pc-sum th { background: var(--g-hover); text-align: center; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.pc-sum td { padding: 0; text-align: center; vertical-align: top; }
.pc-sum .pc-sum-name { text-align: left; padding: .4rem .5rem; min-width: 11rem; position: sticky; left: 0; background: var(--bs-body-bg, #fff); z-index: 2; }
.pc-sum th.pc-sum-name { z-index: 3; background: var(--g-hover); }
.pc-sum .pc-sum-name small { display: block; color: var(--g-muted); }
.pc-sum-cat > td { background: var(--g-hover) !important; font-weight: 600; text-align: left !important; padding: .35rem .5rem !important; }
.pc-sum-na { color: var(--g-faint); background: var(--g-bg); padding: .4rem !important; }
.pc-sum-all { background: var(--g-bg); }
.pc-sum-cell { display: block; padding: .4rem; min-width: 7rem; color: inherit; text-decoration: none; }
a.pc-sum-cell:hover { background: #eef4ff; }
.pc-sum-cell b { display: block; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pc-sum-cell > span { display: block; font-size: .72rem; color: var(--g-muted); }
.pc-sum-cell > span.text-danger { color: var(--g-bad) !important; }
.pc-z { display: inline-block !important; font-size: .7rem; padding: 0 .35rem; border-radius: .25rem; margin-top: .15rem; background: var(--g-hover); color: var(--g-text-2); }
.pc-z.pc-z-mid { background: #fff4d6; color: #7a5200; }
.pc-z.pc-z-big { background: #7a5200; color: #fff; }
.pc-legend-line .pc-z { margin: 0 .2rem; }

/* Techniques drawn on the panel chart (/admin/markets/{id}?tech[]=…; panelchart.js). Each technique
   draws in its own colour (set inline); the classes below only set widths, dashes and fades. */
.pc-tech-form { padding: .75rem 1rem; border-top: 1px solid var(--g-line); background: var(--g-bg); scroll-margin-top: 5rem; }
.pc-tech-groups { columns: 4 13rem; column-gap: 1rem; }
.pc-tech-group { break-inside: avoid; margin: 0 0 .6rem; padding: 0; border: 0; }
.pc-tech-group legend { font-size: .72rem; font-weight: 600; color: var(--g-muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .15rem; float: none; width: auto; }
.pc-tech-option { display: flex; align-items: center; gap: .35rem; font-size: .82rem; line-height: 1.25; padding: .12rem .25rem; border-radius: .25rem; cursor: pointer; }
.pc-tech-option .form-check-input { margin: 0; flex: none; }
.pc-tech-option:hover { background: var(--g-hover); }
.pc-tech-option.is-on { font-weight: 600; }
.pc-tech-option:not(.is-on) .pc-chip { opacity: .35; }   /* every technique shows its fixed colour; faded until ticked */
.pc-tech-option.is-na { color: var(--g-faint); cursor: default; }
.pc-chip { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; flex: none; vertical-align: -1px; margin-right: .3rem; }
.pc-overlay-bar { padding: .75rem 1rem; border-top: 1px solid var(--g-line); }   /* under the chart */
.pc-overlay-risk { background: #fff1f0; border: 1px solid #f3c7c3; color: #8a1c14; border-radius: .375rem; padding: .5rem .75rem; font-size: .85rem; }
.pc-overlay-techs { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .82rem; }
.pc-overlay-techs li { padding: .15rem 0; }
.pc-overlay-info { margin-top: .5rem; background: var(--g-hover); border-radius: .375rem; padding: .45rem .75rem; font-size: .85rem; min-height: 2.2rem; }
.pc-overlay-info > div { padding: .1rem 0; }
.pc-overlay-when { display: block; }
.pc-overlay-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .4rem; }
.pc-key { display: inline-block; width: .9rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.pc-key-src { background: rgba(201, 133, 0, .15); border: 2px solid #c98500; }
.pc-key-hit { border: 2px solid var(--g-text-2); }
.pc-key-next { border: 2px dashed #1f6feb; background: #eef4ff; }
/* The drawing layer is sized to the table in whole pixels; a fraction over must not add a vertical scrollbar. */
.pc-overlay-wrap { position: relative; overflow-y: hidden; }
.pc-overlay-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.pc-ov-src { fill-opacity: .14; stroke-width: 2; }
.pc-ov-arrow { fill: none; stroke-width: 2.25; stroke-linecap: round; }
.pc-ov-hit { stroke-width: 2.75; }
.pc-ov-miss { stroke-width: 2; stroke-dasharray: 5 3; }
.pc-ov-next { stroke-width: 2.5; }
.pc-ov-dot { stroke: #fff; stroke-width: 1.2; }
.pc-chart td.pc-pickable { cursor: pointer; }
.pc-chart td.pc-pickable:focus-visible { outline: 2px solid #1f6feb; outline-offset: -2px; }
.pc-chart td.pc-hit { background: #e6f4ea; }
/* The future box: each drawn technique's pick for the next draw, in that day's empty cell. */
.pc-chart td.pc-future { background: #eef4ff; outline: 2px dashed #1f6feb; outline-offset: -3px; font-family: var(--g-font); padding: .35rem .3rem; width: 9rem; min-width: 7rem; max-width: 9rem; text-align: left; white-space: normal; }
.pc-future-label { display: block; font-size: .7rem; font-weight: 600; color: #0b3d91; }
/* Pick lists wrap inside the box, so a long one cannot widen the whole day column. */
.pc-future-line { display: block; font-family: var(--g-mono); font-size: .72rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; margin-top: .1rem; }
.pc-future-line b { color: #0b3d91; }
/* The next draw's most picked numbers (by the drawn techniques): marked, never more likely. */
.pc-future-top { display: block; font-size: .72rem; line-height: 1.35; font-weight: 600; color: #7a5200; background: #fff4d6; border-radius: .25rem; padding: .05rem .25rem; margin: .1rem 0; }
.pc-future-top .bi, .pc-future-top-key .bi { color: #c98500; font-size: .65rem; }
.pc-chart td.pc-future mark, .pc-future-top-key mark, .pc-next-picks b.is-top { background: #ffe08a; color: #3d2a00; border-radius: .2rem; padding: 0 .15rem; }
.pc-future-odds { display: block; font-size: .66rem; line-height: 1.2; color: var(--g-bad); }
/* Next-draw table under the chart. */
.pc-next-table { font-size: .82rem; }
.pc-next-table tr.is-on > td { background: #f6f9ff; }
.pc-next-group > td { background: var(--g-hover) !important; font-weight: 600; font-size: .75rem; color: var(--g-muted); }
.pc-next-picks { display: inline-flex; flex-wrap: wrap; gap: .2rem; font-family: var(--g-mono); }
.pc-next-picks b { background: var(--g-hover); border: 1px solid var(--g-line); border-radius: .25rem; padding: 0 .3rem; }
.pc-next-picks b small { font-size: .65rem; color: var(--g-muted); margin-left: .1rem; font-weight: 600; }
/* All techniques together: one line per kind of bet under the next-draw table. */
.pc-together-row { padding: .4rem 0; border-top: 1px dashed var(--g-line); font-size: .82rem; }
.pc-together-row:first-of-type { border-top: 0; }
.pc-together-kind { display: inline-block; min-width: 6.5rem; font-weight: 600; vertical-align: top; }

/* Help page (/admin/help). The top bar is sticky, so anchors stop below it. */
.pc-help section, .pc-help tr[id], #app-terms { scroll-margin-top: 4.5rem; }
.pc-help-toc { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; }
.pc-anatomy { display: flex; justify-content: center; gap: .4rem; font-family: var(--g-mono); text-align: center; margin: .25rem 0 1rem; }
.pc-anatomy > div { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.pc-anatomy small { display: block; font-family: var(--g-font); font-size: .75rem; font-weight: 400; color: var(--g-muted); }
.pc-anatomy .pc-dash { color: var(--g-faint); }
.pc-o { color: #1f6feb; }
.pc-c { color: #b35c00; }
.pc-j { color: #137333; }
.pc-flow { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; align-items: center; gap: .5rem .65rem; margin-bottom: 1rem; }
.pc-flow-box { border: 2px solid currentColor; border-radius: .5rem; padding: .2rem .65rem; text-align: center; background: #fff; }
.pc-flow-box small { display: block; font-size: .7rem; }
.pc-flow-box b { display: block; font-family: var(--g-mono); font-size: 1.2rem; color: var(--g-text); }
.pc-flow-calc { color: var(--g-text-2); font-size: .8rem; text-align: center; }
.pc-flow-arrow { color: var(--g-faint); font-size: 1.1rem; }
.pc-flow-jodi { grid-column: 5; grid-row: 1 / span 2; }
.pc-decoder-input { width: 10rem; font-size: 1rem; }
.pc-decoder th { width: 11rem; }
.table.pc-games > thead > tr > th { white-space: normal; vertical-align: bottom; }
.pc-games td { font-size: .825rem; }
.pc-games td.pc-game { min-width: 13rem; }
.pc-games td.pc-game div { margin-top: .1rem; }
.pc-games td > div + div { margin-top: .15rem; }
.pc-games .pc-rate { display: inline-block; width: 5.5rem; text-align: right; }
/* Long figures may break between their parts, never inside one. */
.pc-games td.pc-wraps span { white-space: nowrap; }
.pc-help-callouts { flex: 1; min-width: 16rem; }
.pc-glossary-search { width: 14rem; }
.pc-glossary th { width: 13rem; font-weight: 600; }
.pc-glossary th small { display: block; font-weight: 400; color: var(--g-muted); }
.pc-glossary td { font-size: .875rem; }
.pc-glossary tr:target > * { background: #fff8db; }
@media (max-width: 575.98px) {
    .pc-glossary th, .pc-glossary td { display: block; width: auto; }
    .pc-glossary th { border-bottom: 0; padding-bottom: 0; }
}

/* data-busy forms while the page loads */
.pc-spin { display: inline-block; animation: pc-spin 1s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pc-spin { animation: none; } }

/* ---------- Public site (App/Views/site): slim top bar, intro, risk, footer ---------- */
.site-header { min-height: 52px; display: flex; align-items: center; background: var(--g-surface); border-bottom: 1px solid var(--g-line); }
.site-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--g-text); text-decoration: none; }
.site-brand:hover { color: var(--g-text); }
.site-intro { margin-bottom: .75rem; }
.site-risk { margin-bottom: 1rem; }
.site-footer { padding-bottom: 2rem; line-height: 1.5; }

/* Language toggle (public site, English / Hindi) */
.site-lang { display: inline-flex; border: 1px solid var(--g-line); border-radius: .375rem; overflow: hidden; font-size: .85rem; }
.site-lang a { padding: .25rem .65rem; color: var(--g-text); text-decoration: none; }
.site-lang a + a { border-left: 1px solid var(--g-line); }
.site-lang a:hover { background: var(--g-hover); }
.site-lang a.active { background: #18181b; color: #fff; }
/* Devanagari: system fonts have it (Nirmala UI, Noto Sans Devanagari); give its taller glyphs a little more room. */
:lang(hi) body, body:lang(hi) { line-height: 1.6; }

/* Looking back at a past draw (?date=, public page): the day on the chart, the number that came, the picker */
.pc-chart td.pc-asof { box-shadow: inset 0 0 0 2px #b45309; }
.pc-chart td.pc-asof.pc-hit { background: #e6f4ea; }
.pc-next-picks b.is-hit { background: #1e7e34; border-color: #1e7e34; color: #fff; }
.pc-asof-result .pc-result { font-size: 1.05rem; letter-spacing: .02em; }
.pc-date-pick input[type="date"] { min-width: 9.5rem; }

/* ---------- Print / Save as PDF (the public page's PDF button) ----------
   A4, colours kept (hits, red jodis, highlights), controls hidden, the chart on as few pages as it
   takes with its header row repeated, rows never split. The SVG arrows are not printed: they are
   placed for the screen layout and would land in the wrong cells on paper. */
@media print {
    @page { size: A4 portrait; margin: 9mm; }
    html, body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { font-size: 10.5px; }
    .site-main { padding: 0 !important; max-width: none !important; }
    .site-header .site-lang, .site-actions, .pc-date-pick, .pc-tech-form, .pc-overlay-svg, [data-pc-toggle],
    .card-header select, .card-header .btn, #next-draw .btn, .pc-asof-banner a, .alert-success { display: none !important; }
    #pc-overlay-details[hidden] { display: block !important; }
    .site-header { min-height: 0; border: 0; padding-bottom: 4px; }
    .site-print-meta { font-size: 9px; color: #555; margin-bottom: 6px; word-break: break-all; }
    .card, .kpi-card { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: auto; }
    .card-header { background: #fff !important; }
    .row.g-3 { --bs-gutter-y: .4rem; --bs-gutter-x: .4rem; }
    .kpi-card .card-body { padding: .35rem .5rem; }
    .kpi-card .kpi-value { font-size: 1rem; }
    .table-responsive { overflow: visible !important; }
    .pc-chart { font-size: 9px; }
    .pc-chart th, .pc-chart td { padding: 1px 2px !important; }
    .pc-chart thead, .pc-next-table thead { display: table-header-group; }
    .pc-chart tr, .pc-next-table tr, .kpi-card, .pc-together-row, .pc-overlay-risk { break-inside: avoid; }
    .pc-chart td.pc-future { max-width: 7rem; }
    #next-draw { break-before: page; }
    .pc-next-table { font-size: 9.5px; }
    .pc-next-picks b { padding: 0 .2rem; }
    a { color: inherit !important; text-decoration: none !important; }
}