/* styles for admin pages only (/admin/ + the sub-nav bar at the top) */

/* admin sub-nav bar (includes/admin-nav.php) */
.admin-bar {
  background: var(--color-primary-dark);
}

.admin-bar ul {
  display: flex;
  gap: 1.2rem;
  padding: .8rem 0;
  flex-wrap: wrap;
}

.admin-bar a {
  color: rgba(255, 255, 255, .65);
  font-weight: 500;
}

/* php adds this to whatever link matches the current page */
.admin-bar a.active {
  color: #fff;
  font-weight: 700;
}

/* pushes Back to Site link to the far right */
.admin-bar-back {
  margin-left: auto;
}

/* theme picker (admin/theme.php) */
/* 4 cards per row, 2 on tablet, 1 on phone */
.theme-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

@media (max-width: 900px) {
  .theme-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .theme-options {
    grid-template-columns: 1fr;
  }
}

.theme-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.theme-card.active {
  border-color: var(--color-primary);
}

/* swatch is a mini mockup of the page (header bar, hero, 3 little cards)
   made out of divs/spans, colored per theme -- used instead of a real
   screenshot so it can't go out of date. markup is in admin/theme.php */
.theme-swatch {
  height: 118px;
  display: flex;
  flex-direction: column;
}

.theme-swatch .mock-header {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .5rem;
  flex: 0 0 auto;
}

.theme-swatch .mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.theme-swatch .mock-line {
  width: 20px;
  height: 5px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.theme-swatch .mock-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-swatch .mock-btn {
  width: 34px;
  height: 10px;
  border-radius: 999px;
}

.theme-swatch .mock-body {
  display: flex;
  gap: .35rem;
  padding: .5rem;
  flex: 0 0 auto;
}

.theme-swatch .mock-card {
  flex: 1;
  height: 16px;
  border-radius: 4px;
}

.theme-card .theme-label {
  padding: .8rem;
  font-weight: 600;
  text-align: center;
}

.theme-desc {
  font-weight: normal;
  color: var(--color-text-muted);
}

/* header row - page title next to an action button */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* row of small chips, used for the tag list on admin dashboard */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* Manage Products table (admin/products.php)
   table-layout: fixed + the .col-* widths below make header and rows line
   up exactly (browser's default "auto" layout sizes columns per row based
   on content, can't rely on that). name column has no fixed width so it's
   the one that grabs whatever space is left. widths below are eyeballed
   against the real content -- .col-actions used to be 150px and that was
   like 8px too narrow, clipped the Delete button */
.product-table {
  table-layout: fixed;
  /* sum of the fixed .col-* widths below + ~260px so name column has room
     for most product names without truncating. below this width
     .table-scroll kicks in and scrolls sideways instead of squishing cols */
  min-width: 970px;
}

.col-thumb    { width: 96px; }
.col-category { width: 100px; }
.col-price    { width: 90px; }
.col-rating   { width: 90px; }
.col-status   { width: 110px; }
.col-actions  { width: 220px; }
/* .col-name has no width on purpose, see above */

.product-table th,
.product-table td {
  padding: .65rem 1rem;
  vertical-align: middle;
}

/* long names truncate with ... instead of wrapping so rows stay one line
   tall -- full name still shows up as a tooltip via title="" in the php */
.product-table .col-name-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}

.product-thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: 4px;
}

/* the <td> itself stays a normal table-cell so its height/border match
   the rest of the row -- setting display:flex right on the td was
   breaking that (border ended up ~33px too high). flex lives on this
   inner wrapper div instead */
.actions-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.actions-cell .btn {
  flex-shrink: 0;
}

/* td.actions-td padding-right (room after Delete button) is shared in
   tables.css -- cart table uses it too */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* disabled Prev/Next becomes a plain <span> in the php (not a real
   disabled <a>) -- this just dims it so it looks inactive */
.pager [aria-disabled="true"] {
  opacity: .45;
  box-shadow: none;
}

/* sitewide :focus outline (base.css) uses --color-accent, but that's
   pure white in the White theme so it's invisible on this light bg.
   using --color-primary-dark instead since it's dark in every theme */
.filter-bar :focus-visible,
.product-table :focus-visible,
.pager :focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}