/* Site-wide admin bar: a fixed top strip shown only when an admin is signed in.
   It sits above the shop navbar; the `has-admin-bar` body class (set in _Layout) shifts the
   navbar and page content down by the bar height so nothing is hidden behind it. */

:root {
  --admin-bar-h: 42px;
}

.admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--admin-bar-h);
  z-index: 3000; /* above the shop navbar (2000) and bottom bar (1000); below slide panels (5000) */
  background-color: #10114e;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: 'Questrial', sans-serif;
}

.admin-bar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  gap: 18px;
  overflow-x: auto; /* never wrap; scroll on very narrow screens */
}

.admin-bar-brand {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  color: #729b3b;
  white-space: nowrap;
}

.admin-bar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-bar-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.admin-bar-item:hover,
.admin-bar-item:focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.admin-bar-item i {
  font-size: 14px;
  opacity: 0.85;
}

/* Status badge: a count of items needing attention. Warm amber matches the legacy admin accent. */
.admin-bar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background-color: #e58300;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Push the page down so the fixed bar does not cover content. */
body.has-admin-bar {
  padding-top: var(--admin-bar-h);
}

/* The shop navbar is sticky on mobile and fixed on desktop, both pinned to top:0.
   Drop it below the admin bar in either case. */
body.has-admin-bar .navbar {
  top: var(--admin-bar-h);
}

@media (min-width: 992px) {
  /* Desktop: the navbar is position:fixed and the body already reserves --site-header-h.
     Add the admin-bar height on top of that reserved space. */
  body.has-admin-bar {
    padding-top: calc(var(--site-header-h) + var(--admin-bar-h));
  }
}

/* Subtle red shading for an order row that has a pending customer address change. Kept light so
   the row stays readable. Beaten by the !important action-state colours below during a change. */
body.admin-area tr.admin-row-warn > td { background-color: #fdecea; }
.admin-warn-flag {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: #b02a37;
  white-space: nowrap;
  text-decoration: none;
}
.admin-warn-flag:hover { text-decoration: underline; color: #b02a37; }

/* Admin action feedback: orange while a change is in transit, green on success, red on failure.
   Applied to a table row (shading its cells, overriding stripes) or directly to a control. */
tr.admin-row-pending > td { background-color: #ffe3b3 !important; }
tr.admin-row-ok > td      { background-color: #d1e7dd !important; }
tr.admin-row-fail > td    { background-color: #f8d7da !important; }
.admin-state-pending { background-color: #ffe3b3 !important; transition: background-color 0.2s; }
.admin-state-ok      { background-color: #d1e7dd !important; transition: background-color 0.2s; }
.admin-state-fail    { background-color: #f8d7da !important; transition: background-color 0.2s; }

/* Admin pages reuse the shop layout, whose .card-body and .product-intro-section centre their
   text (for product cards). Left-align them in the admin area so forms/labels read normally.
   Scoped to .admin-area so shop product cards stay centred when an admin browses the shop. */
body.admin-area .product-intro-section,
body.admin-area .card-body {
  text-align: left !important;
}

/* Stock page: product search dropdown (thumbnail + name + category). */
.stock-search-wrap { position: relative; max-width: 560px; }
.admin-search-results {
  position: absolute;
  z-index: 1500;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.admin-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.admin-search-item:hover { background: #f5f7f2; }
.admin-search-item img,
.admin-search-noimg { width: 48px; height: 32px; object-fit: cover; background: #eee; flex: 0 0 auto; }
.admin-search-text { display: flex; flex-direction: column; line-height: 1.2; }
.admin-search-text small { color: #777; }

/* Stock breakdown */
.stock-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.stock-head-thumb { width: 90px; height: 57px; object-fit: cover; border: 1px solid #ddd; }
.stock-table th { white-space: nowrap; }
.stock-attribs-text { font-size: 13px; }
.stock-attrib-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.stock-attrib-field { display: flex; flex-direction: column; font-size: 11px; color: #555; }
.stock-attrib-field input { width: 80px; }
.stock-add-row { background: #f8f9fa; }

/* Hide labels on small screens to keep the bar to one line; icons + badges remain. */
@media (max-width: 575.98px) {
  .admin-bar-item span:not(.admin-bar-badge) {
    display: none;
  }
}