/*
 * Dev Silver admin theme.
 *
 * Layered on top of Jazzmin/AdminLTE so the admin reads as the same brand as
 * the storefront: warm brown primary, gold accent, cream page.
 */

:root {
  --ds-brown: #8f5024;
  --ds-brown-dark: #6f3d1b;
  --ds-brown-light: #a86535;
  --ds-gold: #d99726;
  --ds-gold-soft: #f6e6c8;
  --ds-cream: #faf7f2;
  --ds-ink: #23180f;
  --ds-muted: #7a6a5c;
  --ds-line: #e7ddd0;
}

/* ---------- Page ---------- */

body,
.content-wrapper {
  background-color: var(--ds-cream) !important;
  color: var(--ds-ink);
}

.content-header h1 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
}

/* ---------- Sidebar ---------- */

.main-sidebar {
  background: linear-gradient(180deg, #2b1d12 0%, #1d130b 100%) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

.main-sidebar .brand-link {
  background: rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff !important;
}

.main-sidebar .nav-sidebar .nav-link {
  border-radius: 8px;
  margin: 2px 8px;
  color: #d9cec2 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.main-sidebar .nav-sidebar .nav-link:hover {
  background-color: rgba(217, 151, 38, 0.14) !important;
  color: #fff !important;
}

.main-sidebar .nav-sidebar .nav-link.active {
  background-color: var(--ds-brown) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.main-sidebar .nav-icon {
  color: var(--ds-gold);
}

.nav-sidebar .nav-link.active .nav-icon {
  color: #fff;
}

/* ---------- Navbar ---------- */

.main-header.navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: 0 1px 3px rgba(35, 24, 15, 0.05);
}

/* ---------- Cards & tables ---------- */

.card {
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(35, 24, 15, 0.05);
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--ds-line);
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
}

.table thead th {
  background: #f3ece2;
  color: var(--ds-ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ds-line) !important;
}

.table tbody tr:hover {
  background-color: #fdf8f0;
}

#result_list td,
#result_list th {
  vertical-align: middle;
}

/* Make the computed price column stand out in the product list */
#result_list td.field-computed_price {
  font-weight: 600;
  color: var(--ds-brown);
  white-space: nowrap;
}

#result_list td.field-weight_grams {
  color: var(--ds-muted);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--ds-brown) !important;
  border-color: var(--ds-brown) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ds-brown-dark) !important;
  border-color: var(--ds-brown-dark) !important;
}

a,
a:hover {
  color: var(--ds-brown);
}

.btn-outline-primary {
  color: var(--ds-brown) !important;
  border-color: var(--ds-brown) !important;
}

.btn-outline-primary:hover {
  background-color: var(--ds-brown) !important;
  color: #fff !important;
}

/* Save row sits flush at the bottom of a long form */
.submit-row {
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  padding: 12px 16px;
}

/* ---------- Forms ---------- */

.form-control:focus,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--ds-brown-light);
  box-shadow: 0 0 0 0.15rem rgba(143, 80, 36, 0.15);
}

fieldset.module {
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  background: #fff;
  padding: 4px 0;
}

/* Fieldset descriptions carry the pricing explanation - make them readable */
.form-row .help,
fieldset .description {
  color: var(--ds-muted);
  font-size: 0.85rem;
  line-height: 1.45;
  background: var(--ds-gold-soft);
  border-left: 3px solid var(--ds-gold);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 8px 0;
}

/* The read-only price breakdown deserves emphasis */
.field-computed_price_display .readonly {
  display: inline-block;
  background: var(--ds-gold-soft);
  border: 1px solid #ecd9b4;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: #6b4a12;
}

/* ---------- Tabs on the change form ---------- */

.nav-tabs .nav-link.active {
  border-bottom: 2px solid var(--ds-brown);
  color: var(--ds-brown);
  font-weight: 600;
}

/* ---------- Login ----------
   Jazzmin puts `jazzmin-login-page` on <body>, not AdminLTE's `.login-page`,
   and ships both the light and dark Bootstrap themes. Without pinning the
   colours here the card renders dark-on-dark for anyone whose OS is in dark
   mode, which made the welcome text unreadable. */

body.jazzmin-login-page {
  background: var(--ds-cream) !important;
}

body.jazzmin-login-page .card {
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 34px rgba(35, 24, 15, 0.12) !important;
  overflow: hidden;
}

body.jazzmin-login-page .card-header,
body.jazzmin-login-page .login-card-body,
body.jazzmin-login-page .card-body {
  background: #fff !important;
  color: var(--ds-ink) !important;
}

/* The welcome line sits in the card header */
body.jazzmin-login-page .login-box-msg,
body.jazzmin-login-page .card-header {
  color: var(--ds-ink) !important;
  font-weight: 600;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--ds-line) !important;
  padding: 14px 16px;
}

body.jazzmin-login-page .form-control {
  background: #fff !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line) !important;
}

body.jazzmin-login-page .form-control::placeholder {
  color: #a8998a !important;
}

body.jazzmin-login-page .input-group-text {
  background: #f3ece2 !important;
  border: 1px solid var(--ds-line) !important;
  color: var(--ds-brown) !important;
}

body.jazzmin-login-page .btn-primary {
  padding: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.login-logo img,
body.jazzmin-login-page .login-logo img {
  max-height: 76px;
  width: auto;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(35, 24, 15, 0.12);
}

.login-logo a,
body.jazzmin-login-page .login-logo a {
  color: var(--ds-brown) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Status pills on the order list ---------- */

#result_list td.field-status {
  font-weight: 600;
  text-transform: capitalize;
}

/* ---------- Small screens ---------- */

@media (max-width: 767px) {
  .content-header h1 {
    font-size: 1.35rem;
  }

  .table thead th {
    font-size: 0.7rem;
  }
}

/* ---------- Dashboard app list ----------
   The default teal/blue action buttons clash with the brand palette. */

.app-list .btn-success,
.dashboard .btn-success {
  background-color: var(--ds-brown) !important;
  border-color: var(--ds-brown) !important;
  color: #fff !important;
}

.app-list .btn-success:hover,
.dashboard .btn-success:hover {
  background-color: var(--ds-brown-dark) !important;
  border-color: var(--ds-brown-dark) !important;
}

.app-list .btn-info,
.dashboard .btn-info {
  background-color: transparent !important;
  border-color: var(--ds-line) !important;
  color: var(--ds-brown) !important;
}

.app-list .btn-info:hover,
.dashboard .btn-info:hover {
  background-color: #f3ece2 !important;
  color: var(--ds-brown-dark) !important;
}

/* Model rows in the dashboard cards */
.app-list td,
.app-list th {
  border-color: var(--ds-line) !important;
}

.app-list a {
  color: var(--ds-ink) !important;
  font-weight: 500;
}

.app-list a:hover {
  color: var(--ds-brown) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent;
  padding-left: 0;
}

.breadcrumb-item a {
  color: var(--ds-brown);
}

/* Search boxes in the navbar */
.navbar .form-control {
  border: 1px solid var(--ds-line);
  border-radius: 8px 0 0 8px;
}

.navbar .btn {
  border-radius: 0 8px 8px 0;
}

/* ---------- Content link contrast ----------
   The `accent-warning` tweak gives the sidebar its gold icons, but it also
   paints content links amber (#ffc107), which is unreadable on the white
   cards. Brand brown instead - same family, ~7:1 contrast. */

.content-wrapper .card a:not(.btn),
.content-wrapper .table a:not(.btn),
.content-wrapper .breadcrumb a,
.content-header a {
  color: var(--ds-brown) !important;
  font-weight: 500;
}

.content-wrapper .card a:not(.btn):hover,
.content-wrapper .table a:not(.btn):hover,
.content-wrapper .breadcrumb a:hover {
  color: var(--ds-brown-dark) !important;
  text-decoration: underline;
}

/* Object links in change lists */
#result_list a {
  color: var(--ds-brown) !important;
}

/* Pagination + filters */
.paginator a,
#changelist-filter a {
  color: var(--ds-brown) !important;
}

#changelist-filter {
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: 12px;
}

#changelist-filter h2,
#changelist-filter h3 {
  background: #f3ece2;
  color: var(--ds-ink);
  border-radius: 12px 12px 0 0;
}

/* ---------- Primary "Add" actions ----------
   Django admin's add button is the main call to action on a change list,
   so it takes the brand colour rather than Bootstrap's teal success. */

.page-actions .btn-success,
.object-tools .btn-success,
.submit-row .btn-success,
a.addlink.btn {
  background-color: var(--ds-brown) !important;
  border-color: var(--ds-brown) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px;
}

.page-actions .btn-success:hover,
.object-tools .btn-success:hover,
.submit-row .btn-success:hover {
  background-color: var(--ds-brown-dark) !important;
  border-color: var(--ds-brown-dark) !important;
}

/* Filter/search row on change lists */
#changelist-search .btn,
#changelist-form .btn-primary {
  border-radius: 8px;
}

/* Boolean icons read better with a little breathing room */
#result_list td img {
  vertical-align: middle;
}

/* ---------- Form controls ----------
   The admin is a light-only theme now, so declare that explicitly. Without
   it the browser applies its dark user-agent styling to native inputs when
   the OS is in dark mode, and text fields render as black boxes. */

:root {
  color-scheme: light;
}

.content-wrapper input[type="text"],
.content-wrapper input[type="email"],
.content-wrapper input[type="url"],
.content-wrapper input[type="number"],
.content-wrapper input[type="password"],
.content-wrapper input[type="datetime-local"],
.content-wrapper input[type="date"],
.content-wrapper input[type="time"],
.content-wrapper textarea,
.content-wrapper select,
.content-wrapper .vTextField,
.content-wrapper .form-control:not(.btn) {
  background-color: #fff !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 8px;
}

.content-wrapper input::placeholder,
.content-wrapper textarea::placeholder {
  color: #a8998a !important;
}

.content-wrapper input:focus,
.content-wrapper textarea:focus,
.content-wrapper select:focus {
  border-color: var(--ds-brown-light) !important;
  box-shadow: 0 0 0 0.15rem rgba(143, 80, 36, 0.15) !important;
  outline: none;
}

/* Field labels */
.content-wrapper label {
  color: var(--ds-ink);
  font-weight: 600;
}

/* ---------- Change-form action buttons ----------
   Save is the primary action and takes the brand colour; the rest stay
   semantically distinct (delete red, history neutral). */

.submit-row input[type="submit"][name="_save"],
.submit-row .btn-success,
input[type="submit"].default {
  background-color: var(--ds-brown) !important;
  border-color: var(--ds-brown) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px !important;
}

.submit-row input[type="submit"][name="_save"]:hover,
input[type="submit"].default:hover {
  background-color: var(--ds-brown-dark) !important;
}

.submit-row .btn,
.submit-row input[type="submit"],
.submit-row a.btn {
  border-radius: 8px !important;
}

/* Secondary saves read as outlines rather than competing blues */
.submit-row .btn-info,
.submit-row input[name="_addanother"],
.submit-row input[name="_continue"] {
  background-color: #fff !important;
  border: 1px solid var(--ds-line) !important;
  color: var(--ds-brown) !important;
}

.submit-row .btn-info:hover,
.submit-row input[name="_addanother"]:hover,
.submit-row input[name="_continue"]:hover {
  background-color: #f3ece2 !important;
}


/* ---------- Change-form action column ----------
   These carry both `btn btn-*` and `form-control`, so they need explicit
   colours after the input styling above. */

.btn.btn-success.form-control,
input[type="submit"].btn-success.form-control {
  background-color: var(--ds-brown) !important;
  border-color: var(--ds-brown) !important;
  color: #fff !important;
  font-weight: 600;
}

.btn.btn-success.form-control:hover,
input[type="submit"].btn-success.form-control:hover {
  background-color: var(--ds-brown-dark) !important;
}

.btn.btn-danger.form-control {
  background-color: #b03a2e !important;
  border-color: #b03a2e !important;
  color: #fff !important;
  font-weight: 600;
}

.btn.btn-danger.form-control:hover {
  background-color: #93301f !important;
}

/* Secondary saves: outlined, so the primary Save stays obvious */
.btn.btn-info.form-control,
input[type="submit"].btn-info.form-control {
  background-color: #fff !important;
  border: 1px solid var(--ds-line) !important;
  color: var(--ds-brown) !important;
  font-weight: 500;
}

.btn.btn-info.form-control:hover,
input[type="submit"].btn-info.form-control:hover {
  background-color: #f3ece2 !important;
  color: var(--ds-brown-dark) !important;
}

/* ---------- Order fulfilment pipeline ----------
   The fulfilment column is a <select> in the change list (list_editable), so
   it is tinted by value to make the pipeline scannable at a glance. */

#result_list select[name$="fulfillment_status"] {
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--ds-line);
  background-color: #fff;
  color: var(--ds-ink);
  min-width: 120px;
}

#result_list select[name$="fulfillment_status"]:focus {
  border-color: var(--ds-brown-light);
  box-shadow: 0 0 0 0.15rem rgba(143, 80, 36, 0.15);
}

/* Timestamps in the fulfilment fieldset read as metadata, not data entry */
.field-packed_at .readonly,
.field-shipped_at .readonly,
.field-delivered_at .readonly {
  color: var(--ds-muted);
  font-size: 0.9rem;
}

/* Tracking number is a reference code - monospace makes it easier to compare */
#result_list td.field-tracking {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  white-space: nowrap;
}