/*
 * reference-togel.css — togel-specific styles for the `reference` template.
 *
 * Theme-aware: every color references a `var(--colors-*)` token from the
 * reference palette. Themes switched via admin take effect without CSS rebuild.
 *
 * Namespace: `.togel-*` to avoid collision with the reference's stitches-generated
 * `c-*` class names. Layout primitives can reuse `c-*` classes verbatim where
 * they semantically fit (e.g. c-fGHEql section, c-eBIusB text, c-gtpFUc button).
 *
 * Loaded in head per route. Append-only as views get ported.
 */

/* Page bg + default text color — body color was inheriting browser default
   (near-black) which made any text without an explicit color (e.g. .togel-table
   td, .togel-data-table td) invisible on the dark ink bg. Pin both at body
   so the entire page cascades to theme-coherent values.
   Only applies on togel routes (CSS loaded conditionally), so dashboard etc
   are unaffected. */
body {
  background-color: var(--colors-inkDark, #0c262a);
  color: var(--colors-skyDefault, #e2dadb);
}

/* === Shared togel container === */

.togel-container {
  background-color: var(--colors-inkLight, rgba(255,255,255,0.04));
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  /* Belt-and-suspenders: also pin color here in case body{} is overridden by
     a stitches/reference rule with higher specificity. Every text node inside
     a togel container is bright by default; muted text uses skyDarker. */
  color: var(--colors-skyDefault, #e2dadb);
}

/* Every td/th in any togel table inherits bright text unless overridden by
   a more specific rule (e.g. .togel-history-table .seq-col uses skyDarker).
   This catches .togel-table, .togel-data-table, .togel-history-table,
   .togel-results-table without per-table duplication. */
.togel-table td,
.togel-data-table td,
.togel-history-table td,
.togel-results-table td {
  color: var(--colors-skyDefault, #e2dadb);
}

.togel-section-title {
  margin: 0 0 16px;
}

/* === Tabs partial (_tabs.ejs) === */

.togel-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0 0 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
}

.togel-tab {
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  opacity: 0.7;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.togel-tab:hover {
  opacity: 1;
}

.togel-tab-active {
  opacity: 1;
  border-bottom-color: var(--colors-primaryDefault, #f5a623);
}

.togel-tab-active .c-eBIusB {
  color: var(--colors-primaryDefault, #f5a623) !important;
}

.togel-tab-locked::after {
  content: '🔒';
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.55;
}

/* === Breadcrumb (shared across togel pages) === */

.togel-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* === How-to-play content (howtoplay.ejs) === */

.togel-howtoplay-content {
  max-width: 960px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 14px;
}

.togel-howtoplay-content h3 {
  color: var(--colors-primaryDefault, #f5a623);
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
}

.togel-howtoplay-content h3:first-child {
  margin-top: 0;
}

.togel-howtoplay-content p {
  margin: 0 0 12px;
}

.togel-howtoplay-content ul,
.togel-howtoplay-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.togel-howtoplay-content li {
  margin-bottom: 4px;
}

.togel-howtoplay-content strong {
  color: var(--colors-skyDefault, #fff);
}

.togel-howtoplay-empty {
  padding: 30px;
  text-align: center;
  color: var(--colors-skyDarker, #bec0c1);
}

.togel-howtoplay-pdf {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
}

/* PDF download button uses reference c-gtpFUc (width:100% default). Constrain. */
.togel-howtoplay-pdf > a > button {
  width: auto !important;
}

/* === Form controls (shared: dreambook search, markets filter, etc.) === */

.togel-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

/* Same fix as .togel-markets-search > button — reference's c-gtpFUc class
   defaults to width:100% which would inflate any submit/action button inside
   a flex form row. Constrain to content width. */
.togel-form-row > button {
  width: auto !important;
  flex: 0 0 auto;
}

.togel-input,
.togel-select {
  padding: 8px 12px;
  background: var(--colors-inkDark, rgba(0,0,0,0.25));
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.12));
  border-radius: 6px;
  color: var(--colors-skyDefault, #fff);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.togel-input {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

.togel-input:focus,
.togel-select:focus {
  border-color: var(--colors-primaryDefault, #f5a623);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--colors-primaryDefault, #f5a623) 22%, transparent);
}

.togel-input::placeholder {
  color: var(--colors-skyDarker, rgba(255,255,255,0.5));
}

/* === Tables (shared: dreambook, histories, ongoing, etc.) === */

.togel-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.togel-table {
  width: 100%;
  border-collapse: collapse;
}

.togel-table thead tr {
  border-bottom: 2px solid var(--colors-primaryDefault, #f5a623);
}

.togel-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--colors-skyDefault, #e2dadb);
  white-space: nowrap;
}

.togel-table tbody tr {
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.06));
}

.togel-table tbody tr:hover {
  background-color: var(--colors-inkLighter, rgba(255,255,255,0.03));
}

.togel-table td {
  padding: 12px 14px;
  font-size: 14px;
  vertical-align: middle;
}

.togel-table-empty {
  text-align: center;
  padding: 30px;
  color: var(--colors-skyDarker, #bec0c1);
}

.togel-number-cell {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--colors-primaryDefault, #f5a623);
  letter-spacing: 0.04em;
}

.togel-muted-small {
  font-size: 12px;
  color: var(--colors-skyDarker, #bec0c1);
}

/* === Dreambook (dreambook.ejs) === */

.togel-dreambook-intro {
  color: var(--colors-skyDarker, #bec0c1);
  margin: 0 0 16px;
}

/* === Markets list (index.ejs) === */

.togel-markets-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: stretch;
}

/* Input takes the available space; button is fixed-width.
   Result: input is ALWAYS wider than the button regardless of viewport. */
.togel-markets-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  background: var(--colors-inkDark, rgba(0,0,0,0.25));
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.18));
  border-radius: 6px;
  color: var(--colors-skyDefault, #fff);
  font-size: 14px;
  outline: none;
}

/* Reference c-gtpFUc applies width:100% — pin button to a fixed width that's
   shorter than the input on any viewport >= 320px. !important + specificity
   to defeat stitches' inline cascade. */
.togel-markets-search > button.c-gtpFUc,
.togel-markets-search > button {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  flex: 0 0 120px !important;
}

.togel-markets-search input[type="search"]::placeholder {
  color: var(--colors-skyDarker, rgba(255,255,255,0.5));
}

.togel-markets-search input[type="search"]:focus {
  border-color: var(--colors-primaryDefault, #f5a623);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--colors-primaryDefault, #f5a623) 22%, transparent);
}

.togel-status-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.togel-status-chip {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--colors-skyDefault, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.75;
  transition: all 0.15s ease;
}

.togel-status-chip:hover {
  opacity: 1;
  border-color: var(--colors-primaryDefault, #f5a623);
}

.togel-status-chip.active {
  background: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-inkDefault, #1a1f25);
  border-color: var(--colors-primaryDefault, #f5a623);
  opacity: 1;
}

/* Prize-type tabs (Normal Prize / Full Prize) */

.togel-prize-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.12));
}

.togel-prize-tab-btn {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--colors-skyDefault, #fff);
  font-weight: 600;
  font-size: 14px;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.15s ease;
}

.togel-prize-tab-btn:hover {
  opacity: 1;
}

.togel-prize-tab-btn.active {
  opacity: 1;
  color: var(--colors-primaryDefault, #f5a623);
  border-bottom-color: var(--colors-primaryDefault, #f5a623);
}

.togel-prize-tab-pane {
  display: none;
}

.togel-prize-tab-pane.active {
  display: block;
}

/* Markets grid */

.togel-markets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.togel-markets-empty {
  padding: 30px;
  text-align: center;
  color: var(--colors-skyDarker, #bec0c1);
}

/* Market card */

.togel-market-card {
  background: var(--colors-inkLight, rgba(255,255,255,0.04));
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.togel-market-card:hover {
  border-color: var(--colors-primaryDefault, #f5a623);
}

.togel-market-card.market-is-closed {
  opacity: 0.65;
}

.togel-market-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--colors-skyDefault, #fff);
}

.togel-market-name a {
  color: inherit;
  text-decoration: none;
}

.togel-market-name a:hover {
  color: var(--colors-primaryDefault, #f5a623);
}

.togel-market-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--colors-success, #2ecc71);
  color: var(--colors-inkDefault, #fff);
}

.market-is-closed .togel-market-status {
  background: var(--colors-skyDarker, rgba(255,255,255,0.25));
}

.togel-market-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.06));
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.06));
}

.togel-market-prize {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 800;
  color: var(--colors-primaryDefault, #f5a623);
  letter-spacing: 0.06em;
}

.togel-market-prize-sub {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--colors-skyDarker, rgba(255,255,255,0.7));
}

.togel-market-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 6px;
}

/* Labels: kept slightly muted with theme color (skyDarker) instead of opacity
   trick — opacity dimmed the text into the card background. */
.togel-market-label {
  color: var(--colors-skyDarker, #c8c0c1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 11px;
}

.togel-market-value {
  text-align: right;
  font-weight: 600;
  color: var(--colors-skyDefault, #ffffff);
}

.togel-market-value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.togel-market-actions {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.togel-market-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  background: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-inkDefault, #1a1f25);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.togel-market-play-btn:hover {
  filter: brightness(1.1);
  color: var(--colors-inkDefault, #1a1f25);
}

.togel-market-play-btn.d-none {
  display: none;
}

/* === Market detail (market.ejs) === */

.togel-market-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.togel-market-detail-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--colors-skyDefault, #fff);
}

.togel-market-detail-name a {
  color: inherit;
  text-decoration: none;
}

.togel-market-detail-meta {
  font-size: 12px;
  color: var(--colors-skyDarker, #bec0c1);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.togel-market-detail-status {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--colors-success, #2ecc71);
  color: var(--colors-inkDefault, #fff);
}

.togel-market-detail-status.is-closed {
  background: var(--colors-skyDarker, rgba(255,255,255,0.2));
}

.togel-market-detail-result {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
  padding: 16px 0;
  border-top: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
}

.togel-market-detail-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}

.togel-market-detail-info-row + .togel-market-detail-info-row {
  border-top: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.05));
}

.togel-market-detail-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.togel-action-btn-primary,
.togel-action-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.togel-action-btn-primary {
  background: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-inkDefault, #1a1f25);
}

.togel-action-btn-primary:hover {
  color: var(--colors-inkDefault, #1a1f25);
  filter: brightness(1.1);
}

.togel-action-btn-primary[disabled] {
  background: var(--colors-skyDarker, rgba(255,255,255,0.2));
  cursor: not-allowed;
  filter: none;
}

.togel-action-btn-secondary {
  background: transparent;
  border-color: var(--colors-inkLighter, rgba(255,255,255,0.18));
  color: var(--colors-skyDefault, #fff);
}

.togel-action-btn-secondary:hover {
  border-color: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-primaryDefault, #f5a623);
}

.togel-game-picker {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  align-items: center;
}

.togel-game-picker-label {
  color: var(--colors-skyDarker, #bec0c1);
  padding: 4px 0;
}

.togel-game-chip {
  padding: 5px 12px;
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.15));
  border-radius: 6px;
  color: var(--colors-skyDefault, #fff);
  text-decoration: none;
  opacity: 0.8;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.15s ease;
}

.togel-game-chip:hover {
  opacity: 1;
  border-color: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-primaryDefault, #f5a623);
}

/* === Sub-cards (rounds + past results) === */

.togel-subcard {
  margin-top: 16px;
  background: var(--colors-inkLight, rgba(255,255,255,0.04));
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 16px;
}

.togel-subcard-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--colors-skyDefault, #fff);
}

.togel-round-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.05));
}

.togel-round-row:last-child {
  border-bottom: none;
}

.togel-round-meta {
  font-size: 12px;
  color: var(--colors-skyDarker, #bec0c1);
}

.togel-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.togel-results-table thead tr {
  border-bottom: 2px solid var(--colors-primaryDefault, #f5a623);
}

.togel-results-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--colors-skyDefault, #e2dadb);
}

.togel-results-table tbody tr {
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.05));
}

.togel-results-table td {
  padding: 8px 10px;
}

.togel-results-table .text-end {
  text-align: right;
}

.togel-results-table .mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--colors-primaryDefault, #f5a623);
}

/* === History page (history.ejs) === */

.togel-market-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.togel-market-summary-cell {
  padding: 10px 12px;
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.1));
  border-radius: 8px;
  background: var(--colors-inkLight, rgba(255,255,255,0.02));
}

.togel-market-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colors-skyDarker, #bec0c1);
  margin-bottom: 4px;
  font-weight: 600;
}

.togel-market-summary-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--colors-skyDefault, #fff);
  word-break: break-word;
}

.togel-market-summary-value a {
  color: var(--colors-primaryDefault, #f5a623);
  text-decoration: none;
}

.togel-history-table {
  width: 100%;
  border-collapse: collapse;
}

.togel-history-table thead tr {
  border-bottom: 2px solid var(--colors-primaryDefault, #f5a623);
}

.togel-history-table th {
  padding: 10px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colors-skyDefault, #e2dadb);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.togel-history-table td {
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.06));
}

.togel-history-table tbody tr:hover {
  background: var(--colors-inkLighter, rgba(255,255,255,0.03));
}

.togel-history-table .seq-col {
  width: 40px;
  color: var(--colors-skyDarker, #bec0c1);
}

.togel-history-table .round-col {
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.togel-history-table .time-col {
  white-space: nowrap;
  color: var(--colors-skyDefault, #e2dadb);
}

.togel-history-table .prize-col {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--colors-primaryDefault, #f5a623);
  white-space: nowrap;
}

.togel-history-table .prize-sub {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--colors-skyDefault, #e2dadb);
  white-space: nowrap;
}

.togel-history-table .text-end {
  text-align: right;
}

.togel-history-table .text-center {
  text-align: center;
}

.togel-page-meta {
  font-size: 13px;
  color: var(--colors-skyDarker, #bec0c1);
  margin-top: 4px;
}

.togel-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
}

.togel-history-pagination a {
  padding: 6px 14px;
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.15));
  border-radius: 6px;
  color: var(--colors-skyDefault, #fff);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.togel-history-pagination a:hover {
  border-color: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-primaryDefault, #f5a623);
}

.togel-history-pagination .info {
  color: var(--colors-skyDarker, #bec0c1);
  font-size: 13px;
}

/* === KPI summary card (used by ongoing.ejs + future reports) === */

.togel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.togel-kpi-cell {
  padding: 12px 14px;
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.1));
  border-radius: 8px;
  background: var(--colors-inkLight, rgba(255,255,255,0.02));
}

.togel-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colors-skyDarker, #bec0c1);
  font-weight: 600;
}

.togel-kpi-value {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--colors-skyDefault, #fff);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* === Multi-column data tables (ongoing.ejs / histories.ejs) === */

.togel-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.togel-data-table thead tr {
  border-bottom: 2px solid var(--colors-primaryDefault, #f5a623);
}

.togel-data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colors-skyDefault, #ffffff);
  font-weight: 700;
  white-space: nowrap;
}

.togel-data-table tbody tr {
  border-bottom: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.06));
}

.togel-data-table tbody tr:hover {
  background: var(--colors-inkLighter, rgba(255,255,255,0.03));
}

.togel-data-table td {
  padding: 12px 14px;
  vertical-align: middle;
}

.togel-data-table .text-end {
  text-align: right;
}

.togel-data-table .text-center {
  text-align: center;
}

.togel-data-table .mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.togel-data-table .muted-small {
  font-size: 12px;
  color: var(--colors-skyDarker, #bec0c1);
}

.togel-data-table .empty-row {
  text-align: center;
  padding: 30px;
  color: var(--colors-skyDarker, #bec0c1);
}

/* Adjustment money (discount = green, kei = red) */

.togel-adj-discount {
  color: var(--colors-success, #2ecc71);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.togel-adj-kei {
  color: var(--colors-redDefault, #f87171);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.togel-adj-none {
  color: var(--colors-skyDarker, #bec0c1);
}

/* Win/loss color */

.togel-win-positive {
  color: var(--colors-success, #4ade80);
  font-weight: 700;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.togel-win-negative {
  color: var(--colors-redDefault, #f87171);
  font-weight: 700;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.togel-win-zero {
  color: var(--colors-skyDarker, #bec0c1);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Status pill (Berjalan/Selesai) */

.togel-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--colors-inkLight, rgba(255,255,255,0.06));
}

.togel-status-pill-active {
  color: var(--colors-primaryDefault, #f5a623);
}

.togel-status-pill-posted {
  color: var(--colors-success, #2ecc71);
}

/* "Lihat" action link in data tables */

.togel-action-link {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--colors-primaryDefault, #f5a623);
  border-radius: 4px;
  color: var(--colors-primaryDefault, #f5a623);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.togel-action-link:hover {
  background: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-inkDefault, #1a1f25);
}

/* === Bet detail pages (ongoing_detail / posted_detail) === */

.togel-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.togel-detail-head-meta {
  font-size: 12px;
  color: var(--colors-skyDarker, #c8c0c1);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  margin-top: 4px;
}

.togel-back-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.18));
  border-radius: 6px;
  color: var(--colors-skyDefault, #fff);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.togel-back-link:hover {
  border-color: var(--colors-primaryDefault, #f5a623);
  color: var(--colors-primaryDefault, #f5a623);
}

/* Highlighted Total Win KPI cell (posted_detail.ejs only) */

.togel-kpi-cell-win {
  border-color: var(--colors-success, #2ecc71);
  background: color-mix(in srgb, var(--colors-success, #2ecc71) 8%, transparent);
}

.togel-kpi-cell-win .togel-kpi-value {
  color: var(--colors-success, #2ecc71);
}

/* Bet selection cell (Pilihan column — monospace + bold) */

.togel-bet-selection {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 600;
}

/* === Error page (error.ejs) === */

.togel-error-card {
  margin-top: 24px;
  padding: 48px 24px;
  text-align: center;
  background-color: var(--colors-inkLight, rgba(255,255,255,0.04));
  border: 1px solid var(--colors-inkLighter, rgba(255,255,255,0.08));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.togel-error-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--colors-yellowDefault, #f5a623);
  margin-bottom: 4px;
}

.togel-error-title {
  margin-top: 4px;
}

.togel-error-message {
  color: var(--colors-skyDefault, #e2dadb);
  max-width: 480px;
  line-height: 1.5;
}

.togel-error-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--colors-skyDarker, #bec0c1);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

.togel-error-actions {
  margin-top: 16px;
}