/* Pop-up forms in the Django admin: keep the title and buttons in view and scroll the fields between them. */
div:has(> #modal-content) {
    padding: 2rem 1rem !important;  /* Unfold uses 8rem on laptops, which leaves little room for long forms */
}
#modal-content {
    max-height: calc(100vh - 4rem);
}
#modal-content > #dialog,
#modal-content > #dialog > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#modal-content #dialog-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Rounds > round page: Stakes, Bets and Force result panels (templates/admin/lotto/round_*.html) ---- */
/* The panels use the full width instead of Unfold's label column and narrow value box. */
.field-line:has(.fun-panel) > div:first-child { display: none; }
/* Fieldsets and flex items grow to fit their content by default; let the table scroll sideways on phones instead. */
fieldset:has(.fun-panel), .field-line:has(.fun-panel) > .grow { min-width: 0; }
.readonly:has(> .fun-panel) { max-width: none; }

.fun-panel {
    --fun-border: var(--color-base-200);
    --fun-subtle: var(--color-base-50);
    --fun-muted: var(--color-base-500);
    --fun-strong: var(--color-base-900);
    --fun-surface: #fff;
    --fun-accent: var(--color-primary-600);  /* text and lines */
    --fun-fill: var(--color-primary-600);    /* filled buttons and pills, white text on it in both themes */
    --fun-ok: #15803d;  --fun-ok-soft: #f0fdf4;
    --fun-bad: #dc2626; --fun-bad-soft: #fef2f2;
    --fun-warn: #b45309; --fun-warn-soft: #fffbeb;
    width: 100%;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.dark .fun-panel {
    --fun-border: var(--color-base-800);
    --fun-subtle: rgb(255 255 255 / .03);
    --fun-muted: var(--color-base-400);
    --fun-strong: var(--color-base-100);
    --fun-surface: var(--color-base-900);
    --fun-accent: var(--color-primary-500);
    --fun-ok: #4ade80;  --fun-ok-soft: rgb(34 197 94 / .12);
    --fun-bad: #f87171; --fun-bad-soft: rgb(239 68 68 / .12);
    --fun-warn: #fbbf24; --fun-warn-soft: rgb(245 158 11 / .12);
}
.fun-muted { color: var(--fun-muted); font-weight: 400; }
.fun-note { margin: 10px 0 0; color: var(--fun-muted); font-size: 12px; }

/* Stat strip */
.fun-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: flex-end; margin-bottom: 12px; }
.fun-stat { display: flex; flex-direction: column; gap: 2px; }
.fun-stat-label { color: var(--fun-muted); font-size: 12px; }
.fun-stat-value { color: var(--fun-strong); font-size: 20px; font-weight: 600; line-height: 1.2; }
.fun-stat-note { margin-left: auto; color: var(--fun-muted); font-size: 12px; text-align: right; }
.fun-countdown { color: var(--fun-accent); }
.fun-countdown.fun-soon { color: var(--fun-bad); }

/* Messages */
.fun-alert { margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; font-weight: 500; }
.fun-alert-ok { color: var(--fun-ok); background: var(--fun-ok-soft); }
.fun-alert-error { color: var(--fun-bad); background: var(--fun-bad-soft); }
.fun-alert-warn { color: var(--fun-warn); background: var(--fun-warn-soft); }

/* Stakes table */
.fun-table-wrap { overflow-x: auto; border: 1px solid var(--fun-border); border-radius: 8px; }
.fun-table { width: 100%; border-collapse: collapse; }
.fun-table th, .fun-table td { padding: 7px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--fun-border); }
.fun-table thead th { color: var(--fun-muted); font-size: 12px; font-weight: 500; background: var(--fun-subtle); }
.fun-table .fun-num { text-align: right; }
.fun-table tr.fun-group th { padding-top: 10px; color: var(--fun-strong); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fun-table tr.fun-has-stake td { color: var(--fun-strong); font-weight: 600; }
.fun-table tr.fun-no-stake td:not(:last-child) { color: var(--fun-muted); }
.fun-table tfoot td { color: var(--fun-strong); font-weight: 700; background: var(--fun-subtle); border-bottom: 0; }
.fun-bet-name { color: var(--fun-strong); font-weight: 500; }
.fun-share-col { width: 22%; min-width: 150px; }
.fun-bar { display: inline-block; vertical-align: middle; width: calc(100% - 44px); height: 6px; border-radius: 3px; background: var(--fun-border); overflow: hidden; }
.fun-bar > span { display: block; height: 100%; background: var(--fun-accent); border-radius: 3px; }
.fun-share-pct { display: inline-block; width: 38px; text-align: right; font-size: 12px; }
.fun-tag { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.fun-tag-off { color: var(--fun-bad); background: var(--fun-bad-soft); }

/* Inputs and buttons, in Unfold's look */
.fun-odds-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.fun-input { height: 30px; padding: 0 8px; color: var(--fun-strong); background: var(--fun-surface); border: 1px solid var(--fun-border); border-radius: 6px; }
.fun-input:focus { outline: 2px solid var(--fun-accent); outline-offset: -1px; }
.fun-odds-input { width: 76px; text-align: right; }
.fun-btn { height: 30px; padding: 0 12px; color: var(--fun-strong); background: var(--fun-surface); border: 1px solid var(--fun-border); border-radius: 6px; font-weight: 500; cursor: pointer; }
.fun-btn:hover { background: var(--fun-subtle); }
.fun-btn-primary { color: #fff; background: var(--fun-fill); border-color: var(--fun-fill); }
.fun-btn-primary:hover { background: var(--color-primary-700); }
.fun-link { margin-left: 8px; padding: 0; color: var(--fun-accent); background: none; border: 0; font-size: 12px; cursor: pointer; text-decoration: underline; }

/* Force result */
.fun-status { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--fun-border); border-radius: 8px; background: var(--fun-subtle); color: var(--fun-strong); }
.fun-status .material-symbols-outlined { font-size: 20px; color: var(--fun-muted); }
.fun-status-forced { border-color: color-mix(in srgb, var(--fun-warn) 45%, transparent); background: var(--fun-warn-soft); }
.fun-status-forced .material-symbols-outlined, .fun-status-forced strong { color: var(--fun-warn); }
.fun-force-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.fun-field { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: start; }
.fun-field-label { padding-top: 6px; color: var(--fun-strong); font-weight: 600; }
.fun-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fun-pill input { position: absolute; opacity: 0; pointer-events: none; }
.fun-pill span { display: inline-block; padding: 5px 12px; border: 1px solid var(--fun-border); border-radius: 999px; background: var(--fun-surface); color: var(--fun-strong); cursor: pointer; }
.fun-pill small { color: var(--fun-muted); font-size: 12px; }
.fun-pill span:hover { border-color: var(--fun-accent); }
.fun-pill input:checked + span { color: #fff; background: var(--fun-fill); border-color: var(--fun-fill); }
.fun-pill input:checked + span small { color: rgb(255 255 255 / .85); }
.fun-pill input:focus-visible + span { outline: 2px solid var(--fun-accent); outline-offset: 2px; }
.fun-legend { margin-bottom: 8px; color: var(--fun-muted); font-size: 12px; }
.fun-chip { padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.fun-chip-in { color: var(--fun-ok); background: var(--fun-ok-soft); }
.fun-chip-out { color: var(--fun-bad); background: var(--fun-bad-soft); }
.fun-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 40px)); gap: 4px; }
.fun-cell { height: 32px; padding: 0; color: var(--fun-strong); background: var(--fun-surface); border: 1px solid var(--fun-border); border-radius: 6px; font-weight: 500; cursor: pointer; }
.fun-cell:hover { border-color: var(--fun-accent); }
.fun-cell.fun-in { color: #fff; background: #16a34a; border-color: #16a34a; }
.fun-cell.fun-out { color: var(--fun-bad); background: var(--fun-bad-soft); border-color: var(--fun-bad); text-decoration: line-through; }
.fun-picked { min-height: 18px; margin-top: 8px; font-size: 12px; }
.fun-actions { display: flex; gap: 8px; padding-left: 122px; }
@media (max-width: 640px) {
    .fun-field { grid-template-columns: 1fr; }
    .fun-actions { padding-left: 0; }
    .fun-stat-note { margin-left: 0; text-align: left; }
}

/* Bets in this round */
.fun-a { color: var(--fun-accent); text-decoration: none; }
.fun-a:hover { text-decoration: underline; }
.fun-plus { color: var(--fun-ok); }
.fun-minus { color: var(--fun-bad); }
.fun-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--fun-muted); background: var(--fun-subtle); }
.fun-badge-wait { color: var(--fun-warn); background: var(--fun-warn-soft); }
.fun-badge-win { color: var(--fun-ok); background: var(--fun-ok-soft); }
.fun-badge-lose { color: var(--fun-bad); background: var(--fun-bad-soft); }
.fun-tag-bonus { color: var(--fun-ok); background: var(--fun-ok-soft); }
.fun-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 50%; background: var(--fun-ok); animation: fun-pulse 1.6s ease-in-out infinite; }
.fun-empty { padding: 18px 12px; color: var(--fun-muted); text-align: center; border: 1px dashed var(--fun-border); border-radius: 8px; }
.fun-table tr.fun-new td { animation: fun-flash 2.5s ease-out; }
@keyframes fun-pulse { 50% { opacity: .3; } }
@keyframes fun-flash { from { background: color-mix(in srgb, var(--fun-accent) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) {
    .fun-live::before, .fun-table tr.fun-new td { animation: none; }
}

/* Big-bet alerts (Bets in this round) and Control changes */
.fun-alerts { margin: 0 0 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--fun-bad) 40%, transparent); border-radius: 8px; background: var(--fun-bad-soft); color: var(--fun-strong); }
.fun-alerts-title { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; color: var(--fun-bad); font-weight: 600; }
.fun-alerts-title .material-symbols-outlined { font-size: 18px; }
.fun-alerts ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.fun-tag-alert { margin-left: 0; color: var(--fun-bad); background: var(--fun-bad-soft); border: 1px solid color-mix(in srgb, var(--fun-bad) 35%, transparent); }
.fun-table tr.fun-row-alert td { background: color-mix(in srgb, var(--fun-bad) 7%, transparent); }
.fun-table tr.fun-row-alert td:first-child { box-shadow: inset 3px 0 0 var(--fun-bad); }
.fun-limits { margin: 0 0 10px; font-size: 12px; }
.fun-badge-info { color: var(--fun-accent); background: var(--fun-subtle); }
.fun-warn-text { color: var(--fun-warn); }
.fun-table td.fun-wrap { white-space: normal; min-width: 280px; }