/* Small additions on top of Tabler. */
.icon { width: 1.25rem; height: 1.25rem; vertical-align: -0.2em; }
.pre-line { white-space: pre-line; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.logo-preview { max-height: 5rem; max-width: 100%; border: 1px solid var(--tblr-border-color); padding: .5rem; border-radius: 4px; background: #fff; }
@media (max-width: 767.98px) {
  .table-mobile-cards thead { display: none; }
  .table-mobile-cards tr { display: block; border-bottom: 1px solid var(--tblr-border-color); padding: .5rem 0; }
  .table-mobile-cards td { display: block; border: 0; padding: .125rem 1rem; }
}
/* Inward: the new-device fields show when "Another device" is picked. */
.new-device { display: none; }
.device-choice.show-new .new-device,
.device-choice:has(input[name=device_id][value=new]:checked) .new-device { display: block; }
.photo-previews, .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.photo-previews:empty { display: none; }
.photo-thumb { position: relative; }
.photo-thumb img, .photo-grid-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--tblr-border-color); }
.photo-thumb-remove { position: absolute; top: .25rem; right: .25rem; background: rgba(255, 255, 255, .9); line-height: 1; }
.scan-dialog, .app-dialog { width: min(34rem, 94vw); border: 0; border-radius: 8px; padding: 1rem; }
.scan-dialog::backdrop, .app-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.app-dialog { width: min(26rem, 94vw); }
.app-dialog [hidden] { display: none !important; }
.wa-send:not(:has(option[value=jobsheet]:checked)) .wa-photos-opt { display: none !important; }
.scan-video { width: 100%; max-height: 55vh; background: #000; border-radius: 4px; object-fit: cover; }
.scan-result { font-family: var(--tblr-font-monospace); }
.dash-list { max-height: 24rem; overflow-y: auto; }

/* ---- Look and feel, after the TallyWA panel: a dark sidebar in the theme
   colour (--rd-50 … --rd-950, set per shop in Settings), a light grey page
   and white rounded cards. ---- */
:root {
  --rd-page: #f8fafc;      /* slate-50 */
  --rd-line: #e2e8f0;      /* slate-200 */
  --rd-line-strong: #cbd5e1;
  --rd-text: #1e293b;      /* slate-800 */
  --rd-heading: #0f172a;   /* slate-900 */
  --rd-muted: #64748b;     /* slate-500 */
  --tblr-body-bg: var(--rd-page);
  --tblr-body-color: var(--rd-text);
  --tblr-border-color: var(--rd-line);
  --tblr-border-radius: .5rem;
  --tblr-card-border-radius: .75rem;
}
body { background: var(--rd-page); color: var(--rd-text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

/* Sidebar */
.rd-sidebar.navbar { background: var(--rd-950) !important; border: 0; box-shadow: none;
  --tblr-navbar-bg: var(--rd-950); --tblr-navbar-color: var(--rd-100); --tblr-navbar-active-bg: var(--rd-800); }
.rd-sidebar .navbar-brand { padding: .75rem .25rem; justify-content: flex-start !important; }
.rd-brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; min-width: 0; }
.rd-brand:hover { color: #fff; }
.rd-brand-mark { flex: none; width: 2.25rem; height: 2.25rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center;
  background: var(--rd-500); color: #fff; overflow: hidden; }
.rd-brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px; }
.rd-brand-mark .icon { width: 1.4rem; height: 1.4rem; }
.rd-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; text-align: start; }
.rd-brand-name { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.rd-brand-sub { font-size: .75rem; font-weight: 400; color: var(--rd-300); }
.rd-new { padding: .25rem .5rem .75rem; }
.rd-sidebar .navbar-nav .nav-link { color: var(--rd-100); border-radius: .5rem; margin: 1px 0; font-weight: 500; }
.rd-sidebar .navbar-nav .nav-link:hover { background: var(--rd-900); color: #fff; }
.rd-sidebar .navbar-nav .nav-item.active > .nav-link { background: var(--rd-800); color: #fff; }
.rd-sidebar .nav-link-icon { color: inherit !important; opacity: .9; }
.rd-sidebar-foot { margin-top: auto; border-top: 1px solid var(--rd-900); padding: .75rem .5rem .5rem; font-size: .875rem; }
.rd-user { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem .5rem; color: var(--rd-100); min-width: 0; }
.rd-user .avatar { background: var(--rd-800); color: #fff; flex: none; }
.rd-user-role { display: block; font-size: .75rem; color: var(--rd-300); }
.rd-foot-link { display: flex; align-items: center; width: 100%; padding: .375rem .5rem; border: 0; border-radius: .375rem;
  background: none; color: var(--rd-200); text-decoration: none; font: inherit; }
.rd-foot-link:hover { background: var(--rd-900); color: #fff; }
@media (min-width: 992px) {
  .rd-sidebar.navbar-vertical { width: 16rem; }
  .rd-sidebar ~ .page-wrapper { margin-inline-start: 16rem; }
  .rd-sidebar .navbar-collapse { min-height: calc(100vh - 4.5rem); }
}
@media (max-width: 991.98px) {
  .rd-sidebar .navbar-brand { margin-inline-end: auto; }
  .rd-sidebar .navbar-collapse { padding-bottom: .5rem; }
}

/* Page */
.page-header { margin-top: 0; padding-top: 1.5rem; }
.page-title { font-size: 1.5rem; font-weight: 600; color: var(--rd-heading); flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .page-header .row > .col { flex-basis: 100%; }   /* actions go under the title */
  .page-header .row > .col-auto.ms-auto { margin-inline-start: 0 !important; }
}
.page-pretitle { text-transform: none; letter-spacing: 0; font-size: .875rem; color: var(--rd-muted); }
.card { border: 1px solid var(--rd-line); border-radius: .75rem; box-shadow: 0 1px 2px 0 rgb(15 23 42 / .05); }
.card-header { background: transparent; border-bottom-color: var(--rd-line); }
.card-title { font-weight: 600; color: var(--rd-heading); }
.card-link:hover { box-shadow: 0 4px 12px -2px rgb(15 23 42 / .08); }
.list-group-item { border-color: #f1f5f9; }
.table { --tblr-table-hover-bg: var(--rd-page); }
.table thead th, .card-table thead th { background: var(--rd-page); color: var(--rd-muted); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--rd-line); }
.table > tbody > tr:hover > * { background: var(--rd-page); }
.btn { border-radius: .5rem; font-weight: 600; }
.btn-primary { box-shadow: 0 1px 2px 0 rgb(15 23 42 / .1); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--rd-700); border-color: var(--rd-700); }
.form-control, .form-select { border-radius: .5rem; border-color: var(--rd-line-strong); }
.form-control:focus, .form-select:focus { border-color: var(--rd-500); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--rd-500) 25%, transparent); }
.form-check-input:checked { background-color: var(--rd-600); border-color: var(--rd-600); }
.form-selectgroup-input:checked + .form-selectgroup-label { border-color: var(--rd-500); color: var(--rd-700); background: var(--rd-50); }
.input-icon-addon { color: #94a3b8; }
.badge { border-radius: 999px; font-weight: 500; }
.alert { border-radius: .75rem; }
.avatar { border-radius: 999px; }
.empty-title { color: var(--rd-heading); }

/* Stat tiles (dashboard) */
.rd-stat .card-body { padding: 1rem 1.25rem; }
.rd-stat-top { display: flex; align-items: center; justify-content: space-between; }
.rd-stat-label { font-size: .875rem; font-weight: 500; color: var(--rd-muted); }
.rd-stat-icon { display: flex; padding: .375rem; border-radius: .5rem; background: var(--rd-50); color: var(--rd-600); }
.rd-stat-icon.is-danger { background: #fef2f2; color: #dc2626; }
.rd-stat-icon.is-success { background: #ecfdf5; color: #059669; }
.rd-stat-icon.is-warning { background: #fffbeb; color: #d97706; }
.rd-stat-value { margin-top: .5rem; font-size: 1.875rem; font-weight: 600; line-height: 1.1; color: var(--rd-heading); }
.rd-stat-value.text-danger { color: #dc2626 !important; }
@media (max-width: 575.98px) {
  .rd-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
  .rd-stat-icon { display: none; }
  .rd-stat-value { font-size: 1.5rem; }
}

/* Sign-in, setup and the public status page */
.rd-plain { min-height: 100vh; background: linear-gradient(135deg, var(--rd-900), var(--rd-800) 55%, var(--rd-700)); }
.rd-plain .page { background: transparent; }
.rd-plain-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.rd-plain-brand .rd-brand-mark { width: 3.5rem; height: 3.5rem; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgb(0 0 0 / .3); }
.rd-plain-brand .rd-brand-mark .icon { width: 2rem; height: 2rem; }
.rd-plain-brand { flex-direction: column; align-items: center; color: #fff; }
.rd-plain-brand > .rd-brand-text { display: contents; }
.rd-plain-brand .rd-brand-name { margin-top: .75rem; font-size: 1.5rem; max-width: none; white-space: normal; text-align: center; }
.rd-plain-brand .rd-brand-sub { font-size: .875rem; color: var(--rd-200); }
.rd-plain .card { border: 0; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .2), 0 8px 10px -6px rgb(0 0 0 / .15); }
.rd-plain .page-center > .container > .text-secondary, .rd-plain .page-center > .container > p { color: var(--rd-200) !important; }

/* Settings: theme swatches */
.theme-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.theme-swatch { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border: 1px solid var(--rd-line); border-radius: .5rem; cursor: pointer; }
.theme-swatch:has(input:checked) { border-color: var(--rd-600); box-shadow: 0 0 0 1px var(--rd-600); }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch-dot { flex: none; width: 1.5rem; height: 1.5rem; border-radius: .375rem; }