/* GLOWWITHRUMI admin skin.
   Same palette as the shop front: blush, charcoal and warm white, so the
   owner moves between the two without a jolt. */

:root {
  --gwr-blush: #d3839e;
  --gwr-blush-dark: #b85e75;
  --gwr-charcoal: #2a2a2a;
  --gwr-warm: #faf7f2;
  --gwr-line: #ede4d6;
}

/* ---- sidebar ---------------------------------------------------------- */
.main-sidebar {
  background: var(--gwr-charcoal) !important;
}
.main-sidebar .brand-link {
  background: #fff !important;
  border-bottom: 1px solid var(--gwr-line) !important;
}
.main-sidebar .brand-link .brand-image {
  max-height: 34px;
  opacity: 1;
  box-shadow: none;
}
.main-sidebar .brand-link .brand-text {
  color: var(--gwr-charcoal) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active:hover {
  background: var(--gwr-blush) !important;
  color: #fff !important;
}
.nav-sidebar .nav-link:hover {
  background: rgba(211, 131, 158, 0.18) !important;
  color: #fff !important;
}
.nav-sidebar .nav-header {
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---- buttons and accents --------------------------------------------- */
.btn-primary,
.btn-success,
a.addlink,
.object-tools a,
.submit-row input[type="submit"],
.submit-row a.button {
  background-color: var(--gwr-blush) !important;
  border-color: var(--gwr-blush) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover,
.submit-row input[type="submit"]:hover {
  background-color: var(--gwr-blush-dark) !important;
  border-color: var(--gwr-blush-dark) !important;
}
a,
.card-title a,
#result_list a {
  color: var(--gwr-blush-dark);
}
a:hover {
  color: var(--gwr-charcoal);
}
.nav-tabs .nav-link.active {
  border-bottom: 2px solid var(--gwr-blush) !important;
  color: var(--gwr-charcoal) !important;
  font-weight: 600;
}

/* ---- tables ----------------------------------------------------------- */
#result_list thead th {
  background: var(--gwr-warm);
  border-bottom: 2px solid var(--gwr-line) !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
#result_list tbody tr:hover {
  background: #fdf6f8 !important;
}
/* The price and stock boxes are edited straight from the list, so make them
   obvious targets rather than hairline inputs. */
#result_list input[type="number"],
#result_list input[type="text"] {
  border: 1px solid var(--gwr-line);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 90px;
}
#result_list input:focus {
  border-color: var(--gwr-blush);
  outline: none;
  box-shadow: 0 0 0 3px rgba(211, 131, 158, 0.18);
}

/* ---- forms ------------------------------------------------------------ */
.card-primary.card-outline {
  border-top: 3px solid var(--gwr-blush) !important;
}
.form-control:focus,
.vTextField:focus,
textarea:focus {
  border-color: var(--gwr-blush) !important;
  box-shadow: 0 0 0 3px rgba(211, 131, 158, 0.15) !important;
}
.help,
.form-text,
.helptext {
  color: #6b6b6b !important;
  font-size: 12px;
}

/* ---- login ------------------------------------------------------------ */
.login-page,
.login-box {
  background: var(--gwr-warm);
}
.login-card-body {
  border-top: 4px solid var(--gwr-blush);
  border-radius: 14px;
}
/* The shop logo is a tall portrait image. Left unconstrained it renders at
   full height and covers the Log in button, so cap it and keep it out of
   the way of anything clickable. */
.login-logo {
  margin-bottom: 14px;
  pointer-events: none;
}
.login-logo img,
.login-logo .logo-light,
.login-logo .logo-dark {
  max-height: 86px;
  width: auto;
  display: inline-block;
}

/* ---- on a phone -------------------------------------------------------
   The owner adds stock and prices from a handset, so give the controls
   room and stop iOS zooming the page on focus (anything under 16px does). */
@media (max-width: 767px) {
  #result_list input,
  .form-control,
  textarea,
  select {
    font-size: 16px !important;
  }
  #result_list td,
  #result_list th {
    padding: 10px 8px !important;
  }
  .content-header h1 {
    font-size: 1.35rem;
  }
}

/* ---- brand / category pickers ----------------------------------------
   Django renders these with select2. On the *add* form Jazzmin gives the
   box no border and no background, so it is a 30px transparent gap - the
   field looks missing and a product cannot be created. Give it the same
   outline as every other input. */
.select2-container .select2-selection--single,
.select2-container--admin-autocomplete .select2-selection--single {
  height: 38px !important;
  background: #fff !important;
  border: 1px solid var(--gwr-line) !important;
  border-radius: 6px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  padding-left: 10px !important;
  color: var(--gwr-charcoal) !important;
}
.select2-container .select2-selection--single .select2-selection__arrow,
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}
.select2-container--open .select2-selection--single {
  border-color: var(--gwr-blush) !important;
  box-shadow: 0 0 0 3px rgba(211, 131, 158, 0.15);
}
.select2-dropdown {
  border: 1px solid var(--gwr-line) !important;
  border-radius: 8px !important;
}
.select2-results__option--highlighted {
  background: var(--gwr-blush) !important;
}

/* ---- Photo rows -------------------------------------------------------
   The inline table is wider than a phone, and Delete? is the last column,
   so it was the one that fell off the edge with no way to scroll to it.
   The table scrolls inside its own box now, and the tick is given room
   and a label, because it is how a photo gets removed.                  */
/* The scrolling has to go on the fieldset: that is the box the table
   actually overflows. Putting it on the inline-group did nothing, because
   the fieldset sits two levels in and spills its content past the card. */
.inline-group fieldset.module,
.inline-group .djn-tbody,
.inline-group .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Delete stays pinned to the right edge, so it is in reach whether or not
   the row is scrolled — it is the only way to remove a photo. */
/* Django gives the Delete header no class of its own, so it is addressed
   by position; without this the header scrolls away on a phone while the
   checkbox stays pinned. */
#images-group thead th:last-child,
#images-group td.delete {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

#images-group thead th:last-child,
#images-group td.delete {
  text-align: center;
  white-space: nowrap;
  min-width: 72px;
}

#images-group td.delete input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #C0392B;
}

/* A save that is already running must not look clickable. */
.gwr-saving {
  opacity: 0.55;
  pointer-events: none;
}