:root {
    --problem-light: #fb3a3a;
    --problem-dark: #ff6e6e;
    --inuse-light: #0ab946;
    --inuse-dark: #80ffb9;
    --first-light: #004414;
    --first-dark: #44ff88;
    --others-light: #0a4bff;
    --others-dark: #80b3ff;
    --color-problem: #fb3a3a;
    --color-inuse: #0ab946;
    --color-first: #004414;
    --color-others: #0a4bff;
}

@media (prefers-color-scheme: light) {
    .desc-problem { color: var(--problem-light); font-weight: bold; }
    .desc-player-action { color: var(--inuse-light); font-weight: bold; }
    .desc-others { color: var(--others-light); font-weight: bold; }
}
html[data-theme="dark"] .desc-problem { color: var(--problem-dark); font-weight: bold; }
html[data-theme="dark"] .desc-player-action { color: var(--inuse-dark); font-weight: bold; }
html[data-theme="dark"] .desc-others { color: var(--others-dark); font-weight: bold; }


body #changelist #result_list tbody tr:nth-child(2n+1) {
    background-color: var(--body-bg) !important;
}

body #changelist #result_list tbody tr:nth-child(2n) {
    background-color: var(--darkened-bg) !important;
}

body #changelist #result_list tbody tr.selected {
    background-color: var(--selected-row) !important;
}

@media (prefers-color-scheme: dark) {
    body #changelist #result_list tbody tr:nth-child(2n+1) {
        background-color: var(--body-bg) !important;
    }

    body #changelist #result_list tbody tr:nth-child(2n) {
        background-color: var(--darkened-bg) !important;
    }

    body #changelist #result_list tbody tr.selected {
        background-color: var(--selected-row) !important;
    }
}

body.app-order_app a.related-lookup{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-left:.4rem;
  border-radius:10px; border:1px solid #cfe1ff;
  background:#eff6ff;
  /* replace the built-in icon with your own (here: a data-URI SVG) */
background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='%2393c5fd'/><path d='M8 10l4 4 4-4' stroke='%231e40af' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat:no-repeat; background-position:center; background-size:18px;
  text-indent:-9999px; overflow:hidden;  /* hide the “Lookup” text */
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
body.app-order_app a.related-lookup:hover{
  background:#e0edff; border-color:#93c5fd;
  transform:translateY(-1px);
}


body.app-order_app.model-orderaccount.change-form .form-row.field-customer #id_customer { display: none; }
body.app-order_app.model-orderaccount.change-form .form-row.field-customer .fk-label-plain {
  margin-left:.5rem; color:#1f2937; font-weight:700;
}
body.app-order_app.model-orderaccount.change-form .form-row.field-customer a.related-lookup {
  margin-left:.4rem;
}


span.fk-label { margin-left: .5rem; color: #1f2937; font-weight: 600; }

/* static/order_app/customer_badge.css */

/* Scope to the OrderAccount change form (adjust app/model if yours differ) */
body.app-order_app.model-orderaccount.change-form .form-row.field-customer .fk-label-plain {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 9999px;
  background: #eef6ff;               /* soft blue background */
  color: #0b53b6;                     /* deep blue text */
  font-weight: 700;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px #cfe3ff,          /* pill border */
    0 1px 2px rgba(0,0,0,.06);        /* tiny lift */
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  user-select: text;                  /* allow copy */
}

/* Pretty green dot */
body.app-order_app.model-orderaccount.change-form .form-row.field-customer .fk-label-plain::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 9999px;
  background: #16a34a;                /* green dot */
  box-shadow: 0 0 0 2px #e9f8ef;
}

/* “Pop” when the label changes */
body.app-order_app.model-orderaccount.change-form .form-row.field-customer .fk-label-plain.badge-pop {
  animation: badge-pop .32s ease-out;
}

@keyframes badge-pop {
  0%   { transform: scale(.86); box-shadow: inset 0 0 0 1px #cfe3ff, 0 0 0 rgba(16,24,40,0); }
  70%  { transform: scale(1.04); box-shadow: inset 0 0 0 1px #cfe3ff, 0 6px 10px rgba(16,24,40,.10); }
  100% { transform: scale(1);    box-shadow: inset 0 0 0 1px #cfe3ff, 0 1px 2px rgba(0,0,0,.06); }
}

/* Optional: shimmer while loading new label */
body.app-order_app.model-orderaccount.change-form .form-row.field-customer .fk-label-plain.is-loading {
  color: transparent;
  position: relative;
  min-width: 7ch;
}
body.app-order_app.model-orderaccount.change-form .form-row.field-customer .fk-label-plain.is-loading::after {
  content: "";
  position: absolute; inset: .35rem .65rem .35rem .65rem;
  border-radius: 6px;
  background: linear-gradient(90deg, #e9eef7, #f6f8fc, #e9eef7);
  background-size: 200% 100%;
  animation: shimmer 1s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% 0;   }
  100% { background-position: 200% 0; }
}

/* Keep nice spacing with the lookup button */
body.app-order_app.model-orderaccount.change-form .form-row.field-customer a.related-lookup {
  margin-left: .4rem;
}


/* Profile page styles */

body.app-order_app.model-profile .profile-card {
    position: relative;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
body.app-order_app.model-profile .profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15);
}
body.app-order_app.model-profile .info-item {
    transition: all 0.2s ease;
}
body.app-order_app.model-profile .info-item:hover {
    background-color: #f8fafc;
}
body.app-order_app.model-profile .balance-value {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
body.app-order_app.model-profile .tax-rate-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
body.app-order_app.model-profile .low-tax {
    background-color: #10B981;
}
body.app-order_app.model-profile .medium-tax {
    background-color: #F59E0B;
}
body.app-order_app.model-profile .high-tax {
    background-color: #EF4444;
}
body.app-order_app.model-profile #content {
    display: flex;
    justify-content: center;
}
body.app-order_app.model-profile .tax-group {
    margin-bottom: 10px;
}
/* Quick link buttons */
.action-btn {
display: inline-flex; align-items: center; justify-content: center; gap:.6rem;
padding:.75rem 1rem; border-radius: 9999px; font-weight:700; font-size:.95rem;
border:1px solid rgba(0,0,0,.06); box-shadow: 0 6px 20px rgba(2,6,23,.06);
background: white; color:#111827; text-decoration:none; transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(2,6,23,.12); }
.action-btn i { opacity:.9; }
.action-btn--green { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.action-btn--blue { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.action-btn--amber { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.action-btn--purple { background:#f5f3ff; color:#5b21b6; border-color:#ddd6fe; }
.action-btn--gray { background:#f3f4f6; color:#374151; border-color:#e5e7eb; }

/* Theme toggle (base) */
.theme-toggle {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-flex; align-items: center; gap:.5rem;
    padding:.45rem .75rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(2,6,23,.08);
    color: #0f172a;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}

/* Dark mode button style */
html[data-theme="dark"] .theme-toggle {
    background: #1f2937;              /* dark gray */
    color: #e5e7eb;                  /* light gray text */
    border-color: rgba(255,255,255,.15);
}

/* Light mode button style */
html[data-theme="light"] .theme-toggle {
    background: #f9fafb;              /* soft light background */
    color: #1f2937;                  /* dark gray text */
    border-color: rgba(0,0,0,.08);
}

/* Hover effect for both */
.theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Icon adjustments */
.theme-toggle i {
    opacity: 0.9;
}

/* ========== Profile page — Dark mode ========== */
/* Scope it tightly so we only affect your profile card */
html[data-theme="dark"] .profile-card {
  background: #0f172a;                 /* slate-900-ish */
  color: #e5e7eb;                      /* text-gray-200 */
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.65);
}

/* Header area (“bg-blue-50”) */
html[data-theme="dark"] .profile-card > .bg-blue-50 {
  background: linear-gradient(180deg,#0b1220 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(148,163,184,.12); /* slate-400 @ 12% */
}

/* Name + balance text */
html[data-theme="dark"] .profile-card #username,
html[data-theme="dark"] .profile-card .balance-value {
  color: #f8fafc;                      /* text-gray-50 */
  text-shadow: none;
}

/* Muted captions like “Current Balance”, section titles, small labels */
html[data-theme="dark"] .profile-card .text-gray-500 {
  color: #9ca3af !important;           /* text-gray-400 */
}

/* Info rows */
html[data-theme="dark"] .profile-card .info-item {
  background: transparent;
  border-top: 1px solid rgba(148,163,184,.10);
}
html[data-theme="dark"] .profile-card .info-item:hover {
  background: rgba(148,163,184,.06);   /* subtle hover */
}

/* Dividers from “divide-gray-100” */
html[data-theme="dark"] .profile-card .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(148,163,184,.12);
}

/* Little icon circles (blue/green/orange 100) */
html[data-theme="dark"] .profile-card .bg-blue-100  { background-color: rgba(59,130,246,.18) !important; }
html[data-theme="dark"] .profile-card .bg-green-100 { background-color: rgba(16,185,129,.18) !important; }
html[data-theme="dark"] .profile-card .bg-orange-100{ background-color: rgba(245,158,11,.18) !important; }

/* Windows/PS icons (keeps your brand colors visible on dark) */
html[data-theme="dark"] .profile-card .text-blue-500   { color:#93c5fd !important; }
html[data-theme="dark"] .profile-card .text-green-500  { color:#86efac !important; }
html[data-theme="dark"] .profile-card .text-orange-500 { color:#fdba74 !important; }

/* Quick links — base button look on dark */
html[data-theme="dark"] .profile-card .action-btn {
  background: #0b1220;
  color: #e5e7eb;
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 10px 30px rgba(2,6,23,.35);
}
html[data-theme="dark"] .profile-card .action-btn:hover {
  background: #111827;                 /* a bit brighter on hover */
  box-shadow: 0 14px 34px rgba(2,6,23,.55);
}

/* Variant pills */
html[data-theme="dark"] .profile-card .action-btn--green {
  background: rgba(16,185,129,.10); color:#bbf7d0; border-color:rgba(16,185,129,.30);
}
html[data-theme="dark"] .profile-card .action-btn--blue {
  background: rgba(59,130,246,.10); color:#bfdbfe; border-color:rgba(59,130,246,.30);
}
html[data-theme="dark"] .profile-card .action-btn--amber {
  background: rgba(245,158,11,.10); color:#fde68a; border-color:rgba(245,158,11,.30);
}
html[data-theme="dark"] .profile-card .action-btn--purple {
  background: rgba(139,92,246,.10); color:#ddd6fe; border-color:rgba(139,92,246,.30);
}
html[data-theme="dark"] .profile-card .action-btn--gray {
  background: rgba(148,163,184,.10); color:#e5e7eb; border-color:rgba(148,163,184,.28);
}

/* Tax-rate colored dots keep your existing green/orange/red classes — no change */

/* Theme toggle chip (you already added base styles — just refine contrast) */
html[data-theme="dark"] .profile-card .theme-toggle {
  background:#111827; color:#e5e7eb; border-color:rgba(255,255,255,.12);
}
html[data-theme="light"] .profile-card .theme-toggle {
  background:#0f172a; color:#f8fafc; border-color:rgba(0,0,0,.12);
}
html[data-theme="light"] .profile-card .theme-toggle:hover {
  background:#162239;
}

/* Brighten numeric values in dark mode */
html[data-theme="dark"] .profile-card span,
html[data-theme="dark"] .profile-card p#snipe-price{
  color: #f1f5f9 !important;   /* text-slate-100 */
  font-weight: 600;
}

/* ===== Sender list report box – dark mode overrides ===== */
/* Scope tightly to the changelist where this lives */
body.app-order_app.model-senderaccount.change-list #sender-list-report-box {}

/* 1) Explicit dark theme (Django sets data-theme="dark") */
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list #sender-list-report-box {
  background: #0f172a !important;    /* replace bg-gray-200 */
  color: #e5e7eb !important;         /* override text-white on the wrapper */
  box-shadow: 0 12px 32px rgba(2,6,23,.55);
  border: 1px solid rgba(148,163,184,.12);
}

/* Inner white card */
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .metric-container {
  background: #0b1220 !important;    /* replace bg-white */
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 8px 24px rgba(2,6,23,.45);
}

/* Muted + strong text colors */
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .text-gray-500 { color: #9ca3af !important; }  /* slate-400 */
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .text-gray-800 { color: #f1f5f9 !important; }  /* slate-100 */

/* Colored icon bubbles (blue/green/red/yellow 100) — soften for dark */
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .bg-blue-100   { background-color: rgba(59,130,246,.18) !important; }
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .bg-green-100  { background-color: rgba(16,185,129,.18) !important; }
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .bg-red-100    { background-color: rgba(239,68,68,.18) !important; }
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .bg-yellow-100 { background-color: rgba(245,158,11,.18) !important; }

/* Download button */
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .download-btn {
  background: #2563eb !important;       /* blue-600 */
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.12);
}
html[data-theme="dark"] body.app-order_app.model-senderaccount.change-list
#sender-list-report-box .download-btn:hover {
  background: #1d4ed8 !important;       /* blue-700 */
}

/* 2) “Auto” theme following OS dark preference (Django sets data-theme="auto"),
      and some pages may omit data-theme entirely. */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list #sender-list-report-box,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list #sender-list-report-box {
    background: #0f172a !important;
    color: #e5e7eb !important;
    box-shadow: 0 12px 32px rgba(2,6,23,.55);
    border: 1px solid rgba(148,163,184,.12);
  }

  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .metric-container,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .metric-container {
    background: #0b1220 !important;
    border: 1px solid rgba(148,163,184,.14);
    box-shadow: 0 8px 24px rgba(2,6,23,.45);
  }

  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .text-gray-500,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .text-gray-500 { color: #9ca3af !important; }

  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .text-gray-800,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .text-gray-800 { color: #f1f5f9 !important; }

  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .download-btn,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .download-btn {
    background: #2563eb !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255,255,255,.12);
  }
  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .download-btn:hover,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list
  #sender-list-report-box .download-btn:hover { background: #1d4ed8 !important; }

  /* the same icon bubble overrides as above (kept short): */
  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-blue-100,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-blue-100 {
    background-color: rgba(59,130,246,.18) !important;
  }
  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-green-100,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-green-100 {
    background-color: rgba(16,185,129,.18) !important;
  }
  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-red-100,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-red-100 {
    background-color: rgba(239,68,68,.18) !important;
  }
  html[data-theme="auto"] body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-yellow-100,
  html:not([data-theme]) body.app-order_app.model-senderaccount.change-list #sender-list-report-box .bg-yellow-100 {
    background-color: rgba(245,158,11,.18) !important;
  }
}