/* The Best Shop Admin App: a 2016-era Bootstrap 3 admin. No inline styles anywhere (strict CSP). */
body.sa-body { background: #f4f6f8; padding-top: 50px; }
.sa-topbar { background: #2d3a48; border-color: #22303d; }
.sa-topbar .navbar-brand { color: #fff; font-weight: bold; }
.sa-store { color: #c4cdd5 !important; }
.sa-layout { display: flex; min-height: calc(100vh - 50px - 60px); }
.sa-sidebar { width: 210px; flex: 0 0 210px; background: #ebeef0; border-right: 1px solid #dfe3e8; padding: 15px 10px; }
.sa-sidebar .nav > li > a { color: #212b36; border-radius: 3px; padding: 8px 12px; }
.sa-sidebar .nav > li.active > a, .sa-sidebar .nav > li.active > a:hover, .sa-sidebar .nav > li.active > a:focus { background: #5c6ac4; color: #fff; }
.sa-sidebar .glyphicon { margin-right: 6px; }
.sa-main { flex: 1 1 auto; padding: 20px 30px 90px; min-width: 0; outline: none; }
.sa-page { max-width: 1180px; }
.sa-page .page-header { margin-top: 0; border-bottom-color: #dfe3e8; }
.sa-page .page-header h1 { margin-top: 0; font-size: 26px; }
.sa-page .breadcrumb { background: transparent; padding: 0; margin-bottom: 6px; }
.sa-h-label { font-size: 12px; vertical-align: middle; }
.sa-alerts .sa-alert { margin-bottom: 10px; }
.sa-table { margin-bottom: 0; }
.sa-table > thead > tr > th { background: #f9fafb; font-weight: 600; color: #454f5b; }
.sa-check-col { width: 36px; }
.sa-tags-inline .label { margin-right: 3px; font-weight: normal; }
.sa-tabbed-panel { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.sa-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sa-filter-search { flex: 1 1 280px; }
.sa-filter { flex: 0 0 210px; }
.sa-search-wide { max-width: 520px; }
.sa-inv-search { max-width: 420px; }
.sa-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 15px; background: #f4f5fa; border-top: 1px solid #dfe3e8; border-bottom: 1px solid #dfe3e8; }
.sa-bulk-tags label { margin-right: 6px; }
.sa-pager { margin: 0; }
.sa-stat .panel-body h2 { margin: 0 0 6px; color: #637381; }
.sa-stat-value { font-size: 26px; margin: 0; }
.sa-media-placeholder { border: 2px dashed #c4cdd5; border-radius: 4px; padding: 24px; text-align: center; color: #637381; }
.sa-media-placeholder .glyphicon { font-size: 28px; }
.sa-rte-toolbar { margin-bottom: 4px; }
.sa-rte { font-family: Menlo, Consolas, monospace; font-size: 13px; }
.sa-variants td, .sa-variants th { vertical-align: middle !important; }
.sa-variants .input-group { min-width: 110px; }
.sa-qty { width: 72px; display: inline-block; }
.sa-short-input { max-width: 140px; }
.sa-money-input { max-width: 200px; }
.sa-indent { margin-left: 22px; max-width: 320px; }
.sa-form-actions { text-align: right; margin: 10px 0 30px; }
.sa-form-actions .btn { margin-left: 6px; }
.sa-empty { padding: 40px 0; text-align: center; }
.sa-summary { margin-top: 10px; }
.sa-summary dt { width: 160px; }
.sa-summary dd { margin-left: 180px; }
.sa-summary-list { padding-left: 18px; }
.sa-note { white-space: pre-wrap; }
.sa-timeline .sa-comment { background: #fcfcfd; border-left: 3px solid #5c6ac4; }
.sa-changed .sa-qty { border-color: #5c6ac4; background: #f4f5fa; }
.sa-stepper { white-space: nowrap; }
.sa-stepper .btn { width: 24px; }
.sa-delta { margin-left: 4px; color: #5c6ac4; }
.sa-inventory th[scope=row] { font-weight: normal; }
.sa-code-input { text-transform: uppercase; font-family: Menlo, Consolas, monospace; }

/* Save bar */
.sa-has-savebar { position: relative; }
.sa-savebar { position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: 50px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: #1c2260; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.sa-savebar-text { font-weight: 600; }
.sa-savebar-actions .btn { margin-left: 8px; }

/* Toast */
.sa-toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 1060; }
.sa-toast-inner { background: #212b36; color: #fff; padding: 10px 18px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }

/* Modal dialogs (role=dialog) */
.sa-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(33, 43, 54, .55); z-index: 1070; }
.sa-modal { position: fixed; top: 120px; left: 50%; transform: translateX(-50%); width: 480px; max-width: 94vw; z-index: 1080;
  background: #fff; border-radius: 4px; padding: 20px 24px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
.sa-modal h2 { margin-top: 0; }
.sa-modal-actions { text-align: right; margin-top: 16px; }
.sa-modal-actions .btn { margin-left: 8px; }

/* Div-based select */
.sa-select { position: relative; }
.sa-select-button { text-align: left; display: flex; align-items: center; justify-content: space-between; background: #fff; cursor: pointer; }
.sa-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-select-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff;
  border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); max-height: 260px; overflow-y: auto; }
.sa-select-list li { padding: 6px 12px 6px 28px; cursor: pointer; position: relative; }
.sa-select-list li.sa-active { background: #5c6ac4; color: #fff; }
.sa-select-list li.disabled { color: #919eab; cursor: not-allowed; }
.sa-select-list .sa-check { position: absolute; left: 9px; top: 9px; font-size: 11px; }
.has-error .sa-select-button, .sa-select-button[aria-invalid=true] { border-color: #a94442; }

/* Datepicker */
.sa-datepicker { position: relative; }
.sa-calendar { display: block; padding: 8px; min-width: 260px; }
.sa-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sa-cal-grid { width: 100%; text-align: center; }
.sa-cal-grid th { text-align: center; font-size: 11px; color: #637381; padding: 2px; }
.sa-cal-grid td { padding: 1px; }
.sa-day { width: 32px; padding: 4px 0; }
.sa-day.sa-other { color: #b0b8c0; }
.sa-day.sa-today { font-weight: bold; text-decoration: underline; }
.sa-cal-foot { text-align: right; }

/* Tags */
.sa-tag-list { margin: 6px 0 0; }
.sa-tag-list > li { padding: 0 2px 4px 0; }
.sa-tag { font-size: 12px; font-weight: normal; padding: 4px 4px 4px 8px; }
.sa-tag-remove { background: none; border: 0; color: #fff; padding: 0 4px; margin-left: 2px; line-height: 1; }

/* Server-rendered pages and the footer every page carries */
.sim-page { background: #f4f6f8; }
.sim-landing { max-width: 760px; padding-top: 60px; padding-bottom: 40px; }
.sim-login { max-width: 420px; padding-top: 70px; padding-bottom: 40px; }
.sim-footer { position: relative; z-index: 1; clear: both; padding: 14px 20px; border-top: 1px solid #dfe3e8; background: #fff; color: #637381;
  font-size: 12px; text-align: center; }
.sim-footer span { display: inline-block; margin: 0 6px; }
.sa-body .sim-footer { margin-left: 210px; }

@media (max-width: 767px) {
  .sa-layout { display: block; }
  .sa-sidebar { width: auto; border-right: 0; border-bottom: 1px solid #dfe3e8; }
  .sa-sidebar .nav-stacked > li { display: inline-block; }
  .sa-main { padding: 15px; }
  .sa-body .sim-footer { margin-left: 0; }
}
.sa-page h1 .label { font-size: 12px; vertical-align: middle; font-weight: 600; }
.sa-variants input[id^="sku-"], .sa-variants input[id^="barcode-"] { min-width: 120px; }
.sa-variants input[id^="stock-"] { min-width: 64px; }