/* Order Sync admin panel: a few additions on top of Tabler (/vendor/tabler/tabler.min.css).
   No external fonts or assets (strict CSP). Colours come from Tabler's variables, so light and
   dark mode both work. Our own classes start with os-. */

/* -------------------------------------------------------------- layout */

:root { scroll-behavior: auto; } /* jumps stay instant (Tabler turns on smooth scrolling) */

.os-sidebar[hidden] ~ .page-wrapper { margin-inline-start: 0; } /* the sign-in page has no sidebar */
#main:focus { outline: none; }
.page-body { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.os-min-0 { min-width: 0; }
.os-narrow { max-width: 44rem; }

.page-wrapper .os-page-header { margin: 0 0 1.5rem; }
.os-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.os-title-row .page-title { margin-inline-end: 0.25rem; overflow-wrap: anywhere; }
.os-page-sub { margin-top: 0.375rem; color: var(--tblr-secondary); }
.os-crumb { display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: 0.75rem; color: var(--tblr-secondary); }
.os-crumb .icon { width: 1rem; height: 1rem; }
.os-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; color: var(--tblr-secondary); }
.os-meta + .os-meta { margin-top: 0.25rem; }
.os-meta > span > .icon { width: 1rem; height: 1rem; margin-inline-end: 0.3rem; vertical-align: -0.15em; }
.os-ext .icon { width: 0.875rem; height: 0.875rem; margin-inline-start: 0.2rem; vertical-align: -0.1em; opacity: 0.7; }
.card-header { flex-wrap: wrap; gap: 0.5rem; }
.btn .icon { flex: none; }

/* ------------------------------------------------------- brand, sidebar */

.os-brand { display: inline-flex; align-items: center; gap: 0.625rem; color: inherit; text-decoration: none; }
.os-brand:hover { text-decoration: none; }
.os-brand-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.os-brand-text { display: flex; flex-direction: column; font-size: 1rem; font-weight: 600; line-height: 1.15; text-align: start; }
.os-brand-by { color: var(--tblr-secondary); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.os-sidebar .navbar-brand.os-brand { justify-content: flex-start; }

.os-sidebar button.nav-link { width: 100%; border: 0; background: none; text-align: start; }
@media (min-width: 992px) {
  .os-sidebar .navbar-collapse { display: flex; flex-direction: column; align-items: stretch; }
  .os-nav-end { margin-top: auto; padding-bottom: 0.75rem; }
}
@media (max-width: 991.98px) {
  .os-nav-end { border-top: var(--tblr-border-width) solid var(--tblr-border-color); }
}

/* --------------------------------------------------------------- login */

.os-login { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-height: 700px) { .os-login { padding-top: 7vh; } }
.os-login-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.os-notice:empty, .os-error:empty { display: none; }
.os-error { margin: 0 0 1rem; color: var(--tblr-danger); }

/* --------------------------------------------------------------- stats */

.os-stat-main { flex: 1 1 auto; min-width: 0; }
.os-stat-value {
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.os-stat-sub { margin-top: 0.25rem; color: var(--tblr-secondary); font-size: 0.8125rem; }

/* -------------------------------------------------------------- tables */

.os-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-clickable { cursor: pointer; }
.os-clickable:hover > td { background-color: var(--tblr-bg-surface-secondary); }
.os-sub { color: var(--tblr-secondary); font-size: 0.8125rem; }
td > a + .badge { margin-inline-start: 0.375rem; }
.os-key { font-size: 0.8125rem; white-space: nowrap; }
/* Wide tables keep readable columns and scroll sideways on phones (.table-responsive). */
.os-orders-table { min-width: 54rem; }
.os-stores-table { min-width: 46rem; }
.os-keys-table { min-width: 38rem; }
.os-items-table, .os-refunds-table { min-width: 32rem; }

/* ---------------------------------------------------------- bars, legend */

.os-bars { display: grid; gap: 1rem; }
.os-bar-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.375rem; }
.os-bar-num { margin-inline-start: auto; color: var(--tblr-secondary); font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: end; }
.os-stacked { height: 0.75rem; }
.os-legend { display: grid; gap: 0.625rem; }
.os-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.os-legend-row .legend { width: 0.75rem; height: 0.75rem; border-radius: 3px; }

/* --------------------------------------------------------------- forms */

.os-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.os-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.os-toolbar-search { flex: 1 1 16rem; }
.os-toolbar .form-select { flex: 0 1 15rem; width: auto; }
.os-list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.os-list-foot:empty { display: none; }

.os-keybox { display: flex; gap: 0.5rem; }
.os-keybox .form-control { min-width: 0; }
.os-keymsg-wrap { display: grid; gap: 0.5rem; }
.os-keymsg { min-height: 10rem; font-size: 0.8125rem; line-height: 1.45; resize: vertical; }
.os-keymsg-wrap .btn { justify-self: start; }
.os-steps { margin: 1rem 0 0; padding: 0; }

.os-loading { display: flex; align-items: center; gap: 0.625rem; margin: 0; padding: 0.25rem 0; color: var(--tblr-secondary); }

/* ------------------------------------------------------------- dialogs */
/* Native <dialog> elements wearing Tabler's modal and offcanvas look. Tabler defines the modal
   variables on .modal, which we do not use (it would hide the dialog), so they are set here. */

body:has(dialog[open]) { overflow: hidden; }
dialog.os-modal, dialog.os-drawer {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tblr-body-color);
}
dialog.os-modal::backdrop, dialog.os-drawer::backdrop { background: rgba(24, 36, 51, 0.55); }

dialog.os-modal {
  --tblr-modal-padding: 1.5rem;
  --tblr-modal-color: var(--tblr-body-color);
  --tblr-modal-bg: var(--tblr-bg-surface);
  --tblr-modal-border-color: transparent;
  --tblr-modal-border-width: var(--tblr-border-width);
  --tblr-modal-border-radius: var(--tblr-border-radius-lg);
  --tblr-modal-box-shadow: var(--tblr-box-shadow);
  --tblr-modal-inner-border-radius: calc(var(--tblr-border-radius-lg) - (var(--tblr-border-width)));
  --tblr-modal-header-border-color: var(--tblr-border-color);
  --tblr-modal-header-border-width: var(--tblr-border-width);
  --tblr-modal-footer-gap: 0.75rem;
  --tblr-modal-footer-padding-y: 0.75rem;
  --tblr-modal-footer-bg: var(--tblr-bg-surface-tertiary);
  --tblr-modal-footer-border-color: var(--tblr-border-color);
  --tblr-modal-footer-border-width: var(--tblr-border-width);
  width: min(33rem, calc(100vw - 1.5rem));
  margin: auto;
  overflow: visible;
}
dialog.os-modal-wide { width: min(42rem, calc(100vw - 1.5rem)); }
dialog.os-modal .modal-content { max-height: calc(100dvh - 1.5rem); overflow: auto; }
dialog.os-modal .modal-header { position: sticky; top: 0; z-index: 1; background: var(--tblr-modal-bg); }
dialog.os-modal .modal-header .btn-close { position: absolute; top: 50%; inset-inline-end: 1rem; margin: 0; transform: translateY(-50%); }
dialog.os-modal .modal-body > :last-child { margin-bottom: 0; }
.os-modal-confirm { padding-top: 2rem; text-align: center; }
.os-modal-confirm .modal-title { margin-bottom: 0.75rem; font-size: 1.125rem; }
.os-modal-confirm p { color: var(--tblr-secondary); }
.os-modal-icon { width: 3rem; height: 3rem; margin-bottom: 0.5rem; stroke-width: 1.5; }

dialog.os-drawer {
  width: min(50rem, 100vw);
  height: 100vh;
  height: 100dvh;
  margin: 0 0 0 auto;
  overflow-y: auto;
  border-inline-start: var(--tblr-border-width) solid var(--tblr-border-color);
  background: var(--tblr-body-bg);
  box-shadow: var(--tblr-box-shadow);
}
.os-drawer-inner { min-height: 100%; }
.os-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}
.os-drawer-head .btn-close { margin-top: 0.125rem; }
.os-drawer-title { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.os-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.os-drawer-body { display: grid; gap: 1rem; padding: 1rem 1.25rem 2.5rem; }
.os-drawer-body .card-header { min-height: 0; padding-block: 0.75rem; }

/* ------------------------------------------------------- order details */

.os-datagrid { --tblr-datagrid-item-width: 12rem; --tblr-datagrid-padding: 1rem; margin: 0; }
.os-datagrid dd { margin: 0; overflow-wrap: anywhere; }
.os-totals { display: grid; gap: 0.375rem; max-width: 26rem; margin: 0 0 0 auto; }
.os-totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.os-totals dt { color: var(--tblr-secondary); font-weight: inherit; }
.os-totals dd { margin: 0; text-align: end; }
.os-addr { margin-bottom: 0.75rem; overflow-wrap: anywhere; white-space: pre-line; }
.os-pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.os-note-box { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary); }

.os-timeline { margin: 0; padding: 0; list-style: none; }
.os-timeline li { position: relative; padding: 0 0 1rem 1.5rem; }
.os-timeline li::before {
  position: absolute;
  top: 0.45rem;
  inset-inline-start: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--tblr-primary);
  box-shadow: 0 0 0 3px var(--tblr-primary-lt);
  content: "";
}
.os-timeline li::after {
  position: absolute;
  top: 1.35rem;
  bottom: 0.15rem;
  inset-inline-start: calc(0.5625rem - 0.5px);
  width: 1px;
  background: var(--tblr-border-color);
  content: "";
}
.os-timeline li:last-child { padding-bottom: 0; }
.os-timeline li:last-child::after { display: none; }

.os-notes { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.os-notes li { padding: 0.75rem 1rem; border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary); }
.os-raw { max-height: 60vh; margin: 0.75rem 0 0; overflow: auto; font-size: 0.75rem; white-space: pre; }

/* -------------------------------------------------------------- toasts */

.os-toasts {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 1090;
  display: grid;
  gap: 0.5rem;
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
.os-toast { width: 100%; pointer-events: auto; }
.os-toast .toast-body { display: flex; align-items: flex-start; gap: 0.625rem; }
.os-toast-text { flex: 1; min-width: 0; }
.os-toast-error { border-inline-start: 3px solid var(--tblr-danger); }

/* -------------------------------------------------------------- phones */

@media (max-width: 575.98px) {
  .page-body { margin-top: 1rem; }
  .os-stat-value { font-size: 1.25rem; }
  .os-stat .avatar { display: none; } /* two cards side by side: room for the numbers */
  .os-keybox { flex-direction: column; }
  .os-datagrid { --tblr-datagrid-item-width: 8.5rem; }
  .os-drawer-head { padding: 0.75rem 1rem; }
  .os-drawer-body { padding: 0.75rem 0.75rem 2rem; }
  .os-toasts { inset-inline-end: 1rem; }
}

/* ------------------------------------------------------------ ImageGen */
/* Additions for the ImageGen panel (classes start with ig-). */

.ig-mark { background: var(--tblr-purple); }

.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.ig-tile {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.ig-tile:hover .ig-thumb-box, .ig-tile:focus-visible .ig-thumb-box { outline: 2px solid var(--tblr-primary); outline-offset: 1px; }
.ig-tile-meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.ig-tile-meta .os-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ig-thumb-box {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
}
.ig-thumb { width: 100%; height: 100%; object-fit: cover; }
.ig-thumb-box.is-missing .ig-thumb { display: none; }
.ig-jobs-table .ig-thumb-box { width: 3rem; }
.ig-jobs-table { min-width: 52rem; }

.ig-preview { display: grid; place-items: center; }
.ig-full-box { display: block; max-width: 100%; }
.ig-full { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; border-radius: var(--tblr-border-radius); }
.ig-full-box.is-missing { display: none; }

.ig-price-table { min-width: 40rem; }
.ig-price-table .ig-price { width: 6.5rem; }
.os-clickable-rows tr.os-clickable:focus-within > td { background-color: var(--tblr-bg-surface-secondary); }