/* ============================================================
   Fancy Pants Admin — Dark Theme (matches customer-facing site)
   ============================================================ */

/* Disable double-tap-to-zoom (and the 300ms tap delay); pinch/browser zoom stay. */
* { touch-action: manipulation; }

/* ── CSS variable overrides (Django 4.2+ / 5.x) ── */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --primary:    #3b82f6;
  --secondary:  #111111;
  --accent:     #3b82f6;
  --primary-fg: #f0f0f0;

  --body-fg:          #f0f0f0;
  --body-bg:          #0a0a0a;
  --body-quiet-color: #888888;
  --body-loud-color:  #ffffff;

  --header-color:          #f0f0f0;
  --header-branding-color: #ffffff;
  --header-bg:             #000000;
  --header-link-color:     #f0f0f0;

  --breadcrumbs-fg:      #666666;
  --breadcrumbs-link-fg: #3b82f6;
  --breadcrumbs-bg:      #0a0a0a;

  --link-fg:          #3b82f6;
  --link-hover-color: #60a5fa;
  --link-selected-fg: #60a5fa;

  --hairline-color: #1e1e1e;
  --border-color:   #222222;

  --error-fg: #f87171;

  --message-success-bg: rgba(74,222,128,.10);
  --message-warning-bg: rgba(251,191,36,.10);
  --message-error-bg:   rgba(248,113,113,.10);

  --darkened-bg:  #111111;
  --selected-bg:  #172033;
  --selected-row: rgba(59,130,246,.07);

  --button-fg:               #000000;
  --button-bg:               #d7ff3f;
  --button-hover-bg:         #c2e800;
  --default-button-bg:       #ffffff;
  --default-button-hover-bg: #e5e7eb;
  --close-button-bg:         #272727;
  --close-button-hover-bg:   #333333;
  --delete-button-bg:        #dc2626;
  --delete-button-hover-bg:  #b91c1c;

  --object-tools-fg:       #f0f0f0;
  --object-tools-bg:       #1c1c1c;
  --object-tools-hover-bg: #272727;
}

/* ── Font & base ── */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: #0a0a0a;
  color: #f0f0f0;
  -webkit-font-smoothing: antialiased;
}

/* ── Hide Django's built-in theme toggle (we enforce one theme always) ── */
.theme-toggle { display: none !important; }

/* ── Header ── */
#header {
  background: #000 !important;
  border-bottom: 1px solid #1a1a1a;
  padding: 0 1.75rem !important;
  min-height: 58px !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  box-shadow: none;
  position: relative;
  z-index: 200;
  box-sizing: border-box;
}
#branding { display: flex; align-items: center; flex-shrink: 0; }

/* Custom brand block */
#fp-admin-brand {
  display: flex;
  align-items: center;
  line-height: 0;
}
.fp-admin-logo {
  height: 30px;
  width: auto;
  display: block;
  opacity: .9;
}

/* Login page logo */
.fp-login-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}
.fp-login-logo img {
  height: 52px;
  width: auto;
  opacity: .9;
}

/* User tools */
#user-tools {
  font-size: .78rem;
  color: #666;
  line-height: 1;
}
#user-tools a {
  color: #555;
  font-weight: 500;
  transition: color .15s;
}
#user-tools a:hover { color: #f0f0f0; }
#user-tools strong { color: #999; }

/* User menu (hamburger) — collapses welcome / change password / log out into a
   single dropdown. Shown on all screen sizes. */
#user-tools.fp-usertools { position: relative; display: flex; align-items: center; }
#user-tools .fp-menu-btn {
  background: none; border: 0; color: #888; cursor: pointer; padding: .35rem;
  display: inline-flex; align-items: center; line-height: 0; border-radius: 8px;
}
#user-tools .fp-menu-btn:hover { color: #f0f0f0; background: #161616; }
#user-tools .fp-menu {
  position: absolute; top: calc(100% + .5rem); right: 0;
  background: #141414; border: 1px solid #262626; border-radius: 10px;
  min-width: 200px; padding: .35rem; z-index: 300;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
#user-tools .fp-menu[hidden] { display: none; }
#user-tools .fp-menu-user {
  padding: .55rem .65rem .5rem; font-size: .78rem; color: #777;
  border-bottom: 1px solid #222; margin-bottom: .3rem; line-height: 1.35;
}
#user-tools .fp-menu-user strong { color: #f0f0f0; font-weight: 700; }
#user-tools .fp-menu a,
#user-tools .fp-menu button {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: 0; color: #cfcfcf; font-weight: 500; font-size: .85rem;
  padding: .55rem .65rem; border-radius: 6px; cursor: pointer; text-decoration: none;
  font-family: inherit;
}
#user-tools .fp-menu a:hover,
#user-tools .fp-menu button:hover { background: #1e1e1e; color: #fff; }
#user-tools .fp-menu form { margin: 0; }

/* ── Breadcrumbs ── */
div.breadcrumbs {
  background: #0a0a0a;
  border-bottom: 1px solid #141414;
  color: #555;
  padding: .5rem 1.75rem;
  font-size: .78rem;
}
div.breadcrumbs a { color: #444; }
div.breadcrumbs a:hover { color: #3b82f6; }
div.breadcrumbs > a:first-child { color: #555; }

/* ── Nav sidebar ── */
#nav-sidebar {
  background: #0a0a0a;
  border-right: 1px solid #141414;
}
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited { color: #3b82f6; font-weight: 700; }
#nav-sidebar .module th { background: #0a0a0a; color: #444; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .9rem 1.1rem .35rem; }
#nav-sidebar .module td a { color: #888; font-size: .83rem; padding: .28rem 1.1rem; display: block; transition: color .12s; }
#nav-sidebar .module td a:hover { color: #f0f0f0; }
#nav-sidebar .module td.selected a { color: #3b82f6; font-weight: 600; }
.toggle-nav-sidebar {
  background: #000;
  border-right: 1px solid #141414;
  color: #333;
}
.toggle-nav-sidebar:hover { color: #666; }

/* ── Main content area ── */
#content { background: #0a0a0a; padding: 1.5rem 1.75rem; position: relative; }
#content > h1 { padding-right: 160px; }
#content-main { padding: 0; }
#content-related { background: #0a0a0a; border-left: 1px solid #141414; padding: 0; }

/* ── Messages ── */
ul.messagelist { padding: 0 1.75rem; margin: 0; }
ul.messagelist li {
  padding: .65rem 1rem;
  border-radius: 8px;
  font-size: .85rem;
  margin-bottom: .4rem;
  background-clip: padding-box;
}
ul.messagelist li.success {
  background: rgba(74,222,128,.09);
  border: 1px solid rgba(74,222,128,.2);
  color: #4ade80;
}
ul.messagelist li.warning {
  background: rgba(251,191,36,.09);
  border: 1px solid rgba(251,191,36,.2);
  color: #fbbf24;
}
ul.messagelist li.error {
  background: rgba(248,113,113,.09);
  border: 1px solid rgba(248,113,113,.2);
  color: #f87171;
}
ul.messagelist li.info {
  background: rgba(59,130,246,.09);
  border: 1px solid rgba(59,130,246,.2);
  color: #60a5fa;
}

/* ── Module cards ── */
.module {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: none;
}
.module > h2,
.module > caption,
.module > table > caption {
  background: #161616;
  color: #555;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  border-bottom: 1px solid #1a1a1a;
}
.module th {
  background: #0e0e0e;
  color: #555;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  border-bottom: 1px solid #1a1a1a;
}
.module tbody th {
  background: transparent;
  color: #f0f0f0;
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.module td { padding: .5rem 1rem; border-bottom: 1px solid #141414; font-size: .85rem; }
.module td a { color: #3b82f6; }
.module td a:hover { color: #60a5fa; }
.module tr:last-child td { border-bottom: none; }
.module tr,
.module tr.alt,
.module tr:nth-child(odd),
.module tr:nth-child(even) { background: transparent !important; }

/* ── Dashboard recent actions ── */
#recent-actions-module h2 { color: #444; }
#recent-actions-module .module ul li { padding: .3rem 0; border-bottom: 1px solid #141414; }
#recent-actions-module .module ul li:last-child { border-bottom: none; }

/* ── List / changelist ── */
#changelist {
  background: #0a0a0a;
}
#changelist .results {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
}
#result_list {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
#result_list thead th {
  background: #0d0d0d;
  color: #444;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid #1a1a1a;
  padding: .6rem 1rem;
  white-space: nowrap;
}
#result_list thead th.sorted { background: #111; }
#result_list thead th a,
#result_list thead th a:hover,
#result_list thead th a:visited { color: #666; }
#result_list thead th.sorted a { color: #f0f0f0; }
#result_list thead th .text { display: inline; }
#result_list thead .sortedColumn th a { color: #fff; }

#result_list tbody tr td {
  padding: .6rem 1rem;
  border-bottom: 1px solid #141414;
  font-size: .85rem;
  color: #d4d4d4;
  vertical-align: middle;
}
#result_list tbody tr:last-child td { border-bottom: none; }
#result_list tbody tr:nth-child(even) td { background: #0d0d0d; }
#result_list tbody tr:hover td { background: #161616 !important; }
#result_list tbody tr.selected td { background: rgba(59,130,246,.07) !important; }
#result_list td.action-checkbox { width: 24px; }

#result_list tbody .field-__str__ a,
#result_list td a { color: #f0f0f0; font-weight: 600; transition: color .12s; }
#result_list tbody .field-__str__ a:hover,
#result_list td a:hover { color: #3b82f6; }

/* ── Search bar ── */
#changelist-search {
  background: #0a0a0a;
  padding: 1rem 0;
  border-bottom: 1px solid #141414;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
#changelist-search label { color: #555; font-size: .83rem; margin-right: .3rem; }
#changelist-search input[type="text"] {
  background: #1c1c1c;
  border: 1px solid #272727;
  border-radius: 7px;
  color: #f0f0f0;
  padding: .5rem .9rem;
  font-size: .85rem;
  outline: none;
  transition: border-color .15s;
  min-width: 200px;
}
#changelist-search input[type="text"]:focus { border-color: #3c3c3c; }
#changelist-search input[type="submit"] {
  background: #1c1c1c;
  border: 1px solid #272727;
  color: #999;
  border-radius: 7px;
  padding: .48rem .9rem;
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#changelist-search input[type="submit"]:hover { background: #242424; color: #f0f0f0; }

/* ── Toolbar (actions + filter bar) ── */
#changelist .actions {
  background: #0a0a0a;
  border-bottom: 1px solid #141414;
  padding: .55rem 0;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .83rem;
}
#changelist .actions label { color: #666; }
#changelist .actions select {
  background: #1c1c1c;
  border: 1px solid #272727;
  color: #f0f0f0;
  border-radius: 7px;
  padding: .38rem .65rem;
  font-size: .83rem;
}
#changelist .actions button,
#changelist .actions input[type="submit"] {
  background: #1c1c1c;
  border: 1px solid #272727;
  color: #999;
  border-radius: 7px;
  padding: .38rem .85rem;
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#changelist .actions button:hover { background: #242424; color: #f0f0f0; }
.action-counter { color: #555; font-size: .78rem; margin-left: .25rem; }

/* ── Filters sidebar ── */
#changelist-filter {
  background: #0a0a0a;
  border-left: 1px solid #141414;
  padding: 0;
}
#changelist-filter h2 {
  background: #0a0a0a;
  color: #444;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.1rem 1.1rem .4rem;
  border-bottom: none;
}
#changelist-filter h3 {
  color: #444;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: .85rem 1.1rem .3rem;
}
#changelist-filter ul { padding: 0 .75rem .6rem; list-style: none; }
#changelist-filter li { padding: .1rem 0; }
#changelist-filter li.selected a { color: #3b82f6; font-weight: 600; }
#changelist-filter li a {
  color: #666;
  font-size: .83rem;
  padding: .18rem .35rem;
  border-radius: 4px;
  display: block;
  transition: color .12s, background .12s;
}
#changelist-filter li a:hover { color: #f0f0f0; background: #141414; }

/* ── Date hierarchy ── */
ul.toplinks {
  background: #0a0a0a;
  border-bottom: 1px solid #141414;
  padding: .4rem 0;
}
ul.toplinks li a { color: #3b82f6; font-size: .83rem; }
ul.toplinks li a:hover { color: #60a5fa; }

/* ── Object tools (add, history, etc) ── */
.object-tools {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.object-tools li { margin: 0; }
.object-tools a,
.object-tools a:link,
.object-tools a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1c;
  border: 1px solid #272727;
  border-radius: 7px;
  color: #999;
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .15s, color .15s;
  text-decoration: none;
  line-height: 1;
  float: none;
}
.object-tools a:hover { background: #242424; color: #f0f0f0; }
.object-tools a.addlink {
  background: #d7ff3f;
  border-color: #d7ff3f;
  color: #000;
  padding: .4rem .9rem;
  background-image: none;
}
.object-tools a.addlink:hover { background: #c2e800; border-color: #c2e800; }
.object-tools a.viewsitelink {
  background: transparent;
  border-color: #1e1e1e;
  color: #555;
}
.object-tools a.viewsitelink:hover { color: #f0f0f0; border-color: #333; }

/* ── Fieldsets (change/add form) ── */
fieldset {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  padding: 0;
  margin-bottom: .7rem;
  overflow: hidden;
}
fieldset h2 {
  background: #161616;
  color: #444;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem 1rem;
  border-bottom: 1px solid #1a1a1a;
  margin: 0;
}
fieldset .form-row {
  padding: .35rem 1rem;
  border-bottom: 1px solid #141414;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}
fieldset .form-row:last-child { border-bottom: none; }
.aligned label {
  color: #666;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding-top: .4rem;
  flex-shrink: 0;
  min-width: 150px;
}
.required label, label.required { color: #999; }
/* Red asterisk marking required fields (labels + tabular inline headers).
   The .aligned selector out-specifies Django's `.aligned label:after` rule,
   and max-height/overflow undo its mobile clip so the asterisk always shows. */
.aligned label.required::after,
label.required::after,
.inline-group .tabular th.required::after {
  content: " *";
  color: #e5484d;
  font-weight: 700;
  max-height: none;
  overflow: visible;
}
.field-box { flex: 1; min-width: 0; }
p.help { color: #444; font-size: .75rem; margin-top: .15rem; line-height: 1.35; }

/* ── Form inputs ── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select:not([class*="flatpickr"]) {
  background: #1c1c1c !important;
  border: 1px solid #272727 !important;
  border-radius: 6px !important;
  color: #f0f0f0 !important;
  font-size: .85rem;
  padding: .32rem .5rem;
  transition: border-color .15s;
  -webkit-appearance: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: #3c3c3c !important;
  outline: none;
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: #3c3c3c; }
select option { background: #1c1c1c; color: #f0f0f0; }
textarea { line-height: 1.6; }

/* Checkbox */
input[type="checkbox"] { accent-color: #3b82f6; }

/* ── Submit / save row ── */
.submit-row {
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  padding: .6rem 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.submit-row input[type="submit"],
.submit-row button[type="submit"] {
  background: #d7ff3f;
  color: #000;
  border: none;
  border-radius: 7px;
  padding: .55rem 1.4rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  letter-spacing: .01em;
}
.submit-row input[type="submit"]:hover { background: #c2e800; }
.submit-row input[name="_addanother"],
.submit-row input[name="_continue"] {
  background: #1c1c1c;
  color: #c0c0c0;
  border: 1px solid #272727;
  border-radius: 7px;
  padding: .52rem 1.1rem;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.submit-row input[name="_addanother"]:hover,
.submit-row input[name="_continue"]:hover { background: #242424; color: #f0f0f0; }
.submit-row .deletelink-box { margin-left: auto; }
.submit-row a.deletelink {
  color: #f87171;
  font-size: .83rem;
  border: 1px solid rgba(248,113,113,.18);
  padding: .5rem 1rem;
  border-radius: 7px;
  display: inline-block;
  transition: background .15s;
}
.submit-row a.deletelink:hover { background: rgba(248,113,113,.07); }

/* Save-on-top duplicate */
.submit-row + .submit-row { display: none; }

/* td.original is hidden via the HTML `hidden` attribute in our tabular.html override */
.inline-group .tabular td.original { display: none !important; }

/* ── Inline tabular ── */
.inline-group {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.inline-group h2 {
  background: #161616;
  color: #444;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem 1rem;
  border-bottom: 1px solid #1a1a1a;
  margin: 0;
}
.inline-group .tabular { border: none; overflow: visible; }
.inline-group .tabular thead th {
  background: #0d0d0d;
  color: #444;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid #1a1a1a;
  padding: .4rem .6rem;
}
/* Reset the flex layout that `fieldset .form-row` (used for stacked change-form
   rows) otherwise imposes on tabular inline rows — flex on a <tr> breaks column
   alignment with the <thead>, pushing the headers out past their columns. */
.inline-group .tabular .form-row { padding: 0; border: none; display: table-row; }
.inline-group .tabular .form-row td {
  border-bottom: 1px solid #141414;
  padding: .3rem .6rem;
  vertical-align: middle;
  color: #d4d4d4;
}
.inline-group .tabular tbody tr:last-child .form-row td { border-bottom: none; }
/* Hide the template row Django/JS clones for "Add another" — otherwise it
   shows as a phantom blank row that looks editable but never saves. New rows
   added via "Add another" lose the empty-form class, so they stay visible. */
.inline-group .tabular tr.empty-form { display: none; background: #0d0d0d; }
.inline-group .add-row {
  background: #0d0d0d;
  border-top: 1px solid #141414;
}
.inline-group .add-row td { padding: .6rem 1.1rem; }
.inline-group .add-row a {
  color: #3b82f6;
  font-size: .83rem;
  font-weight: 600;
  text-decoration: none;
}
.inline-group .add-row a:hover { color: #60a5fa; }

/* Delete row button */
.inline-deletelink {
  color: #555 !important;
  font-size: .78rem;
  transition: color .12s;
}
.inline-deletelink:hover { color: #f87171 !important; }

/* ── Collapse sections ── */
.collapse-toggle {
  color: #3b82f6 !important;
  font-size: .78rem;
}
.collapse-toggle:hover { color: #60a5fa !important; }

/* ── Pagination ── */
.paginator {
  background: #0d0d0d;
  border-top: 1px solid #141414;
  color: #555;
  font-size: .83rem;
  padding: .65rem 1rem;
}
.paginator a { color: #3b82f6; font-weight: 600; }
.paginator a:hover { color: #60a5fa; }
.paginator .this-page { color: #f0f0f0; font-weight: 700; }
.paginator .end { color: #555; }

/* ── Boolean icons ── */
img[src*="icon-yes"] { filter: hue-rotate(100deg) saturate(.8); }
img[src*="icon-no"]  { filter: hue-rotate(-10deg) saturate(.7) brightness(.9); }
img[src*="icon-unknown"] { filter: brightness(.5); }

/* ── Related lookups / popup triggers ── */
.related-lookup { filter: invert(.55) brightness(1.4); }
.related-lookup:hover { filter: invert(.9); }
.related-widget-wrapper-link { filter: invert(.5) brightness(1.2); }
.related-widget-wrapper-link:hover { filter: invert(.9); }

/* ── Selector widget (ManyToMany) ── */
.selector-available h2,
.selector-chosen h2 {
  background: #161616;
  color: #555;
  border-bottom: 1px solid #1a1a1a;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem .75rem;
}
.selector select {
  background: #1c1c1c;
  border: 1px solid #272727;
  color: #f0f0f0;
  border-radius: 0;
}
.selector-chooser li { background: #272727; }
.selector-chooser a { filter: invert(.6); }
.selector-chooser a:hover { filter: invert(.9); }
.selector-filter label { color: #555; }
.selector-filter input {
  background: #1c1c1c;
  border: 1px solid #272727;
  color: #f0f0f0;
  border-radius: 5px;
}

/* ── Calendar / clockbox (native Django) ── */
.calendarbox,
.clockbox {
  background: #1c1c1c !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  color: #f0f0f0;
}
.calendar caption,
.calendarbox h2 {
  background: #272727 !important;
  color: #f0f0f0;
}
.calendar th { color: #666; background: #161616; }
.calendar td a { color: #d4d4d4; border-radius: 4px; }
.calendar td a:hover { background: #3b82f6; color: #fff; }
.calendar td.today a { background: #172033; color: #3b82f6; }
.calendar td.selected a { background: #3b82f6; color: #fff; }
.calendar-cancel a { color: #666; }
.calendarbox .calendarnav { background: #272727; }
.clockbox h2 { background: #272727 !important; color: #f0f0f0; }
.timelist a { color: #d4d4d4; }
.timelist a:hover { background: #3b82f6; color: #fff; }

/* ── Popup window body ── */
body.popup #header { height: 46px; }
body.popup #content { padding: 1rem 1.5rem; }
body.popup #content-main { padding: 0; }

/* ── Error list ── */
ul.errorlist { margin: 0; padding: 0; list-style: none; }
ul.errorlist li {
  background: rgba(248,113,113,.09);
  border: 1px solid rgba(248,113,113,.2);
  border-radius: 6px;
  color: #f87171;
  font-size: .8rem;
  padding: .4rem .7rem;
  margin-top: .3rem;
}
.errornote {
  background: rgba(248,113,113,.09);
  border: 1px solid rgba(248,113,113,.2);
  border-radius: 8px;
  color: #f87171;
  font-size: .85rem;
  padding: .65rem 1rem;
  margin-bottom: 1rem;
}

/* ── Login page ── */
body.login {
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
body.login #header { display: none !important; }
body.login div.breadcrumbs { display: none !important; }
body.login #container {
  width: 100%;
  max-width: 420px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.login .main { width: 100%; }
body.login #content { background: transparent; padding: 0; width: 100%; }
body.login #content-main { padding: 0; }
body.login .form-row { padding: 0; border: none; margin-bottom: .75rem; }
body.login #login-form {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  padding: 2rem;
}
body.login label { color: #555; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
body.login .submit-row { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0; }
body.login .submit-row input[type="submit"] { width: 100%; padding: .7rem; font-size: .9rem; border-radius: 8px; }
body.login #id_username,
body.login #id_password { width: 100%; padding: .6rem .85rem; }

/* ── Change password / logout pages ── */
.password-change-form input[type="password"] { width: 100%; }

/* ── Prepopulated slug indicator ── */
.prepopulated_field .timezonewarning { color: #555; font-size: .78rem; }

/* ── Raw ID widget ── */
.vRawIdAdminField { background: #1c1c1c; border-color: #272727; color: #f0f0f0; }

/* ─────────────────────────────────────────────────────────────────────────
   Mobile (≤767px, matching Django's admin breakpoint)

   The wide tabular inlines (ticket tiers, inventory holds, …) overflow on
   phones. Collapse each row into a labelled card: hide the column header row
   and show each cell's own label (from data-label in our tabular.html) beside
   its input. Desktop is untouched.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Tighter content padding + smaller page title so long headings (e.g.
     "Event and Merchandise Manager") fit on one line instead of wrapping.
     The 160px right gutter (reserved for the Add button on desktop) isn't
     needed — object tools stack below the title on mobile. */
  #content { padding: 1.1rem 1rem; }
  #content > h1 { padding-right: 0; font-size: 1.05rem; line-height: 1.3; }

  /* Break the inline table out of table layout so cells can stack */
  .inline-group .tabular table,
  .inline-group .tabular tbody,
  .inline-group .tabular tr,
  .inline-group .tabular td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .inline-group .tabular thead { display: none; }

  /* Each form row becomes a compact self-contained card */
  .inline-group { margin-bottom: .9rem; }
  .inline-group h2 { padding: .5rem .8rem; }
  .inline-group .tabular .form-row {
    display: block;
    border: 1px solid #1f1f1f;
    border-radius: 8px;
    background: #141414;
    margin: .45rem;
    padding: .1rem .55rem;
  }
  /* Keep the hidden JS template row (and Django's) out of view */
  .inline-group .tabular .form-row.empty-form { display: none; }

  .inline-group .tabular .form-row td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    border: none;
    border-bottom: 1px solid #1c1c1c;
    padding: .32rem .1rem;
    text-align: right;
  }
  .inline-group .tabular .form-row td:last-child { border-bottom: none; }
  .inline-group .tabular .form-row td.hidden,
  .inline-group .tabular .form-row td.original { display: none !important; }

  /* The cell's column name, shown on the left */
  .inline-group .tabular .form-row td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #777;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
  }
  .inline-group .tabular .form-row td[data-label=""]::before { content: none; }

  /* Inputs take the remaining width but stay compact and never overflow */
  .inline-group .tabular .form-row td input:not([type="checkbox"]):not([type="radio"]),
  .inline-group .tabular .form-row td select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
    padding: .3rem .5rem;
    font-size: .85rem;
  }
  /* Textareas (e.g. description) drop to their own full-width line under the label */
  .inline-group .tabular .form-row td textarea { flex: 1 1 100%; max-width: 100%; }

  .inline-group .add-row td { display: block; text-align: left; padding: .55rem .8rem; }
  .inline-group .add-row td::before { content: none; }

  /* ── Changelist (list) screens ──
     Stack the filter sidebar below the list and keep the wide results table
     inside its own horizontal-scroll region so the PAGE never scrolls sideways. */
  #changelist { display: block; }
  #changelist .changelist-form-container { min-width: 0; max-width: 100%; }
  #changelist .results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #result_list { width: 100%; }
  #changelist-filter {
    position: static;
    width: auto;
    border-left: none;
    border-top: 1px solid #141414;
    margin-top: 1rem;
  }
}