/* Stupid Bastard Pool admin reskin: the dark sportsbook palette over Django's admin, by overriding
   its CSS variables (plus a few targeted tweaks). Forces the dark look regardless of OS theme. */
:root,
html[data-theme="light"],
html[data-theme="dark"],
:root[data-theme="auto"] {
  color-scheme: dark;
  --primary: #16202c;            /* header / module headers */
  --secondary: #16202c;
  --accent: #1fd18a;             /* green accent */
  --primary-fg: #e8eef6;

  --body-bg: #090c12;
  --body-fg: #e8eef6;
  --body-quiet-color: #8a98ab;
  --body-loud-color: #ffffff;

  --header-color: #e8eef6;
  --header-branding-color: #1fd18a;
  --header-bg: #0d121b;
  --header-link-color: #e8eef6;

  --breadcrumbs-fg: #8a98ab;
  --breadcrumbs-link-fg: #1fd18a;
  --breadcrumbs-bg: #121822;

  --link-fg: #1fd18a;
  --link-hover-color: #16c784;
  --link-selected-fg: #16c784;

  --hairline-color: #26303f;
  --border-color: #26303f;

  --error-fg: #ff5b6a;
  --message-success-bg: #16201b;
  --message-warning-bg: #2a2415;
  --message-error-bg: #2a1618;

  --darkened-bg: #0d121b;
  --selected-bg: #16202c;
  --selected-row: #16201b;

  --button-bg: #1fd18a;
  --button-fg: #06281c;
  --button-hover-bg: #16c784;
  --default-button-bg: #1fd18a;
  --default-button-hover-bg: #16c784;
  --close-button-bg: #26303f;
  --close-button-hover-bg: #33404f;
  --delete-button-bg: #ff5b6a;
  --delete-button-hover-bg: #e0444f;

  --object-tools-bg: #16202c;
  --object-tools-fg: #e8eef6;
  --object-tools-hover-bg: #1fd18a;
}

/* surfaces and panels */
body { background: var(--body-bg); }
.module, .dashboard .module, #content-related .module,
.inline-related, .submit-row, .object-tools a {
  background: #121822; border-radius: 12px;
}
div.breadcrumbs { border-bottom: 1px solid var(--border-color); }
#header { border-bottom: 1px solid var(--accent); }

/* branding in the header */
#site-name a { font-weight: 800; letter-spacing: -.01em; color: var(--header-color); }
#site-name .sbp-accent { color: var(--accent); }
#site-name .sbp-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: #5f6c7e; border: 1px solid #26303f; border-radius: 999px; padding: 2px 8px; margin-left: 10px;
  vertical-align: middle; font-weight: 700; }

/* module headers (table captions) */
.module h2, .module caption, .inline-group h2 {
  background: #16202c; color: var(--accent); text-transform: uppercase; letter-spacing: .08em;
  font-size: 12px; border-radius: 12px 12px 0 0;
}

/* tables */
table { background: transparent; }
thead th { background: #0f1620; color: var(--body-quiet-color); }
tr:nth-child(odd) td, tr:nth-child(odd) th { background: #10161f; }
tr:nth-child(even) td, tr:nth-child(even) th { background: #131b25; }
.row1 { background: #10161f; } .row2 { background: #131b25; }

/* inputs */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], textarea, select, .vTextField {
  background: #0b0e14; color: var(--body-fg); border: 1px solid var(--border-color);
  border-radius: 9px;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }

/* buttons */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 9px; font-weight: 700;
}
.object-tools a { border-radius: 9px; font-weight: 700; }

/* login box */
.login #container { background: #121822; border: 1px solid var(--border-color); border-radius: 14px; }
.login #header { border-radius: 14px 14px 0 0; }

/* the "paid" / boolean icons keep their meaning; just make links pop */
a:link, a:visited { color: var(--link-fg); }

/* header user tools: a prominent way back to the player-facing app, so the admin never
   feels like a dead end (must hit the browser back button). */
#user-tools { display: flex; align-items: center; gap: 14px; font-size: 12px; }
#user-tools .sbp-tosite {
  background: var(--accent); color: var(--button-fg); font-weight: 800;
  padding: 6px 13px; border-radius: 999px; text-transform: none; letter-spacing: .01em;
}
#user-tools .sbp-tosite:hover { background: var(--button-hover-bg); color: var(--button-fg); }
#user-tools .sbp-who { color: var(--body-quiet-color); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; font-size: 11px; }

/* ---- deeper pass: make the back office feel like the same product as the app ---- */

/* the app's typeface everywhere */
body, input, select, textarea, button, .button,
#header, .module h2, td, th, p, a, .submit-row {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* sticky gradient header like the app topbar */
#header {
  background: linear-gradient(180deg, #0d121b, rgba(13, 18, 27, .9));
  position: sticky; top: 0; z-index: 50; padding: 14px 40px; align-items: center;
}

/* breadcrumbs as a quiet strip */
div.breadcrumbs { padding: 9px 40px; font-size: 12px; background: var(--body-bg); }

/* modules as rounded cards with a hairline border (the app's card look) */
.module, fieldset.module, .inline-related, #changelist-filter {
  border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden;
  margin-bottom: 18px; background: #121822;
}
.module h2, .module caption, .inline-group h2, #changelist-filter h2 {
  padding: 11px 15px; border-radius: 0; font-weight: 800; font-size: 11px;
  letter-spacing: .12em; background: #16202c; border-bottom: 1px solid var(--border-color);
}

/* tables: roomier rows, hairline separators, a subtle hover, app striping */
td, th { padding: 11px 15px; border-bottom: 1px solid rgba(38, 48, 63, .5); }
thead th { text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 700; }
#result_list tbody tr:hover td, #result_list tbody tr:hover th { background: #16202c; }
table { border-collapse: collapse; }

/* the changelist toolbar / pagination spacing */
#changelist .actions { background: #121822; border: 1px solid var(--border-color);
  border-radius: 12px; padding: 9px 12px; }

/* pill buttons in the app's green */
.button, input[type=submit], input[type=button], .submit-row input, a.button, .object-tools a {
  border-radius: 10px; font-weight: 800; padding: 9px 16px; letter-spacing: .01em; border: none;
}
.submit-row { background: #121822; border: 1px solid var(--border-color); border-radius: 14px;
  padding: 14px; }

/* inputs to match the app fields */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], textarea, select, .vTextField {
  border-radius: 10px; padding: 9px 11px;
}

/* form rows and help text */
.form-row { border-bottom: 1px solid rgba(38, 48, 63, .4); padding: 11px 0; }
.help, .helptext, div.help { color: var(--body-quiet-color); font-size: 11px; }

/* messages as rounded pills */
ul.messagelist li { border-radius: 10px; border: 1px solid var(--border-color); }

/* the login screen, centered card like the app login */
.login #container { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.login .submit-row { border: none; background: transparent; padding: 0; }