/*
 * settings_ui stylesheet - hand written, no build step, no Node.
 *
 * WHY NOT THE TAILWIND PLAY CDN
 * The brief asked for https://cdn.tailwindcss.com/3.4.x saved as
 * static/css/tailwind.css. That file is served as `Content-Type: text/javascript`
 * (verified), so a <link rel="stylesheet"> pointing at it cannot work - the
 * browser refuses to execute it as CSS. The Play build also has no RTL plugin,
 * which the ms-*/me-*/ps-*/pe-* requirement depends on, and it compiles styles
 * at runtime in the client, which is a production performance cost. The brief
 * allows the documented alternative, so this file contains only the classes
 * actually used across the settings templates.
 *
 * DIRECTION
 * Every spacing/border/floating rule uses CSS *logical* properties
 * (margin-inline-start, padding-inline-end, inset-inline-start, ...) so a single
 * `dir` attribute on <html> mirrors the entire layout. There are no physical
 * left/right rules and no RTL-specific overrides anywhere in this file.
 *
 * FONTS
 * Inter for Latin script, Cairo for Arabic. Both are variable woff2 files
 * committed under static/fonts/ - no runtime CDN request. The `html[dir=rtl]`
 * block swaps the font stack only.
 */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/cairo-latin.3c9597566d23.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/cairo-arabic.4d90a59cb181.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}

/* ------------------------------------------------------------- base/reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

html[dir="rtl"] {
  font-family: "Cairo", "Inter", ui-sans-serif, system-ui, sans-serif;
}

body {
  margin: 0;
  background: #f1f5f9;
  color: #0f172a;
}

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
  line-height: 1.25;
  font-weight: 600;
}

h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.125rem;
}
h3 {
  font-size: 1rem;
}

p {
  margin: 0 0 0.75rem;
}

a {
  color: #1d4ed8;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------ app shell -- */

.app {
  display: grid;
  grid-template-columns: 16rem 1fr;
  min-height: 100vh;
}

/* Logical: the sidebar is the inline-start column, so `dir=rtl` moves it to
   the right without a single media-query or RTL override. */
.sidebar {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem 0.75rem;
  grid-column: 1;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem 1rem;
  color: #f8fafc;
}

.sidebar .brand img {
  inline-size: 2rem;
  block-size: 2rem;
  object-fit: contain;
  border-radius: 0.375rem;
  background: #1e293b;
}

.nav-group + .nav-group {
  margin-block-start: 1rem;
}

.nav-group h3 {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  padding: 0.5rem 0.75rem 0.25rem;
  margin: 0;
}

.nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #cbd5e1;
  font-size: 0.875rem;
}
.nav-link:hover {
  background: #1e293b;
  color: #f8fafc;
  text-decoration: none;
}
.nav-link.is-active {
  background: #1d4ed8;
  color: #f8fafc;
  font-weight: 500;
}

.main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-block-end: 1px solid #e2e8f0;
  padding: 0.75rem 1.5rem;
}

.topbar .spacer {
  flex: 1 1 auto;
}

.topbar .shop-name {
  font-weight: 600;
}

.topbar .who {
  font-size: 0.875rem;
  color: #475569;
}

.content {
  padding: 1.5rem;
  flex: 1 1 auto;
}

.page-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block-end: 1.25rem;
}
.page-header .spacer {
  flex: 1 1 auto;
}
.page-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.875rem;
}

/* Bottom navigation, mobile only (TASK 1). */
/* ---- mobile settings drawer ------------------------------------------------
   These two utility classes stand in for Tailwind's translate utilities. This
   project ships hand-written CSS (static/css/tailwind.css) with no Tailwind
   build step, so the class names are defined here rather than generated. They
   use logical direction so the drawer enters from the inline-start edge and
   therefore mirrors correctly in RTL. */
.translate-x-0 {
  transform: translateX(0);
}

.-translate-x-full {
  transform: translateX(-100%);
}

/* DESCENDANT combinator, deliberately. The previous rule was
   `[dir="rtl"].-translate-x-full` - a compound selector needing dir="rtl" and
   the class on the SAME element. dir="rtl" lives on <html> and the drawer is a
   deep descendant, so it never matched and Arabic slid the drawer off to the
   left, identically to English. A space between the attribute and the class is
   the whole fix. */
[dir="rtl"] .-translate-x-full {
  transform: translateX(100%);
}

/* x-cloak stops Alpine from flashing the closed drawer on first paint. */
[x-cloak] {
  display: none !important;
}

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  flex: 0 0 auto;
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  /* 0.65, not the 0.4 this started at: at 0.4 the form behind the drawer was
     still readable and users did not register the drawer as modal. */
  background: rgb(0 0 0 / 0.65);
  z-index: 45;
}

.sidebar-close {
  display: none;
  margin-inline-start: auto;
  background: none;
  border: 0;
  color: #e2e8f0;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.settings-back-link {
  display: none;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  flex: 0 0 auto;
}

.settings-back-link:hover {
  color: #1d4ed8;
  text-decoration: none;
}

.bottom-nav {
  display: none;
}

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

.grid {
  display: grid;
  gap: 1rem;
}
.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.grid.cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.stack > * + * {
  margin-block-start: 1rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.row.end {
  justify-content: flex-end;
}
.row.between {
  justify-content: space-between;
}

.muted {
  color: #64748b;
  font-size: 0.8125rem;
}
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}
.nowrap {
  white-space: nowrap;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- cards -- */

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.card > h2,
.card > h3 {
  margin-block-end: 0.75rem;
}
.card-link {
  display: block;
  color: inherit;
}
.card-link:hover {
  text-decoration: none;
  border-color: #94a3b8;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.08);
}
.card-link .card-title {
  font-weight: 600;
  color: #0f172a;
}
.card-link .card-desc {
  color: #64748b;
  font-size: 0.8125rem;
  margin-block-start: 0.25rem;
}

.card.danger {
  border-color: #fecaca;
}
.card.danger .card-title {
  color: #b91c1c;
}

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

.field {
  margin-block-end: 1rem;
}

.field > label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
  margin-block-end: 0.25rem;
}

.field .hint {
  font-size: 0.75rem;
  color: #64748b;
  margin-block-start: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="file"],
select,
textarea {
  inline-size: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #0f172a;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #bfdbfe;
  outline-offset: 1px;
  border-color: #3b82f6;
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  background: #f1f5f9;
  color: #64748b;
}

textarea {
  min-block-size: 7rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  resize: vertical;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.checkbox input {
  inline-size: 1rem;
  block-size: 1rem;
}
.checkbox label {
  margin: 0;
  font-size: 0.875rem;
}

/* Validation. `noValidate` is not used, so the browser also blocks submit. */
.has-error input,
.has-error select,
.has-error textarea {
  border-color: #dc2626;
}
.field-error {
  display: block;
  color: #b91c1c;
  font-size: 0.75rem;
  margin-block-start: 0.25rem;
}

fieldset {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0 0 1rem;
}
legend {
  padding: 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: #1d4ed8;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  background: #1e40af;
  text-decoration: none;
  color: #fff;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn.secondary {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}
.btn.secondary:hover {
  background: #f8fafc;
  color: #0f172a;
}

.btn.danger {
  background: #dc2626;
}
.btn.danger:hover {
  background: #b91c1c;
}

.btn.ghost {
  background: transparent;
  color: #1d4ed8;
  border-color: transparent;
  padding: 0.25rem 0.375rem;
}
.btn.ghost:hover {
  background: #eff6ff;
}

.btn.sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

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

.table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
}

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th {
  text-align: start;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #f8fafc;
  padding: 0.625rem 0.75rem;
  border-block-end: 1px solid #e2e8f0;
  white-space: nowrap;
}

td {
  padding: 0.625rem 0.75rem;
  border-block-end: 1px solid #f1f5f9;
  vertical-align: middle;
}

tbody tr:last-child td {
  border-block-end: none;
}
tbody tr:hover {
  background: #f8fafc;
}

td.num,
th.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* The price matrix is a grid of inputs rather than a plain table. */
.matrix th:first-child,
.matrix td:first-child {
  position: sticky;
  inset-inline-start: 0;
  background: #fff;
  z-index: 1;
  min-inline-size: 12rem;
}
.matrix th:first-child {
  background: #f8fafc;
}
.matrix input {
  inline-size: 7rem;
  padding: 0.25rem 0.375rem;
  text-align: end;
}

/* --------------------------------------------------------------- badges -- */

.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge.owner {
  background: #ede9fe;
  color: #6d28d9;
}
.badge.manager {
  background: #dbeafe;
  color: #1d4ed8;
}
.badge.technician {
  background: #d1fae5;
  color: #047857;
}
.badge.receptionist {
  background: #fef3c7;
  color: #b45309;
}
.badge.ok {
  background: #dcfce7;
  color: #15803d;
}
.badge.warn {
  background: #fef3c7;
  color: #b45309;
}
.badge.bad {
  background: #fee2e2;
  color: #b91c1c;
}
.badge.muted {
  background: #f1f5f9;
  color: #475569;
}

/* --------------------------------------------------------------- alerts -- */

.alert {
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-block-end: 1rem;
}
.alert.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.alert.success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.alert.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.alert ul {
  margin: 0.25rem 0 0;
  padding-inline-start: 1.25rem;
}

/* HTMX toast: appended to body, auto-removed by its own timeout. */
.toast {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  background: #0f172a;
  color: #f8fafc;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.3);
  z-index: 60;
  animation: toast-in 0.15s ease-out;
}
.toast.error {
  background: #b91c1c;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------- modals -- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(15 23 42 / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal {
  background: #fff;
  border-radius: 0.5rem;
  inline-size: 100%;
  max-inline-size: 32rem;
  max-block-size: 90vh;
  overflow-y: auto;
  padding: 1.25rem;
}
.modal h3 {
  margin-block-end: 0.75rem;
}

/* Alpine's x-cloak: hidden until Alpine has initialised, so a user with JS
   disabled never sees a half-built dialog. */
[x-cloak] {
  display: none !important;
}

/* ----------------------------------------------------------------- tabs -- */

.tab-list {
  display: flex;
  gap: 0.25rem;
  border-block-end: 1px solid #e2e8f0;
  margin-block-end: 1rem;
  overflow-x: auto;
}
.tab-list button {
  padding: 0.5rem 0.875rem;
  border: none;
  border-block-end: 2px solid transparent;
  background: none;
  color: #64748b;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.tab-list button:hover {
  color: #0f172a;
}
.tab-list button[aria-selected="true"] {
  color: #1d4ed8;
  border-block-end-color: #1d4ed8;
}

/* ----------------------------------------------------------------- misc -- */

.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
}

.token-reveal {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.token-reveal code {
  flex: 1 1 auto;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.5rem;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
}

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
}
.stat .stat-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

[x-cloak] + .htmx-indicator {
  display: none;
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 1023.98px) {
  .app {
    grid-template-columns: 1fr;
  }

  /* The sidebar becomes a slide-out drawer instead of vanishing. The bottom
     nav covers only 5 of the 11 settings sections, so without this drawer the
     other 7 are unreachable on a phone. */
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    /* min() rather than a fixed width: 17rem (272px) was 76% of a 360px phone
       and 54% of a 414px one - the drawer ate the form it was supposed to sit
       beside. min(85vw, 320px) keeps it scoped to the viewport on small phones
       and stops it stretching on large ones: 306px at 360vw, 320px at 400vw
       and above. */
    inline-size: min(85vw, 320px);
    z-index: 50;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.2s ease-in-out;
    /* A drawer sliding out from the inline-start edge casts a shadow away from
       that edge; without it the panel reads as flush with the content. */
    box-shadow: 4px 0 16px rgb(15 23 42 / 0.35);
  }

  [dir="rtl"] .sidebar {
    box-shadow: -4px 0 16px rgb(15 23 42 / 0.35);
  }

  .sidebar-toggle,
  .sidebar-close,
  .settings-back-link {
    display: inline-flex;
  }

  /* Compact drawer header. The brand block's base padding (0.5rem 0.75rem 1rem)
     plus the shop name pushed the first nav item below the fold on a 360px
     phone; the close button sat inside that same padding. */
  .sidebar .brand {
    padding: 12px 16px;
    min-block-size: 56px;
    align-items: center;
  }

  /* 44x44 is the smallest comfortable touch target, and it must not add height:
     negative margins pull the padding back out of the flow. */
  .sidebar-close {
    min-inline-size: 44px;
    min-block-size: 44px;
    margin-block-start: -8px;
    margin-block-end: -8px;
    align-items: center;
    justify-content: center;
  }

  .sidebar-scrim {
    display: block;
  }

  .main {
    grid-row: 1;
  }

  .content {
    padding: 1rem;
    padding-block-end: 5rem; /* clear the fixed bottom nav */
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    background: #fff;
    border-block-start: 1px solid #e2e8f0;
    padding: 0.25rem;
    z-index: 40;
  }

  .bottom-nav a {
    flex: 1 1 0;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.6875rem;
    color: #475569;
    border-radius: 0.375rem;
  }
  .bottom-nav a.is-active {
    color: #1d4ed8;
    background: #eff6ff;
    font-weight: 600;
  }
  .bottom-nav a:hover {
    text-decoration: none;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .hide-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==== web_ui PWA styles ==== */
/* web_ui PWA styles.
 *
 * APPENDED to static/css/tailwind.css rather than forking it, so the PWA shares
 * the project's palette, fonts and .toast/.alert rules. Everything here is
 * mobile-first: the base rules target a phone and the desktop sidebar appears
 * only at >= 1024px.
 *
 * Two rules are load-bearing for iOS and are commented at their definition:
 * env(safe-area-inset-*) and the 16px input font.
 */

:root {
  --pwa-accent: #0ea5e9;
  --pwa-ink: #0f172a;
  --pwa-muted: #64748b;
  --pwa-line: #e2e8f0;
  --pwa-surface: #ffffff;
  --pwa-bg: #f8fafc;
  --pwa-ok: #16a34a;
  --pwa-warn: #d97706;
  --pwa-danger: #dc2626;
  --pwa-nav-h: 60px;
  /* The safe-area inset is read once and reused by every padded surface. */
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- shell ---------- */
.pwa-shell { display: block; min-height: 100vh; }

.pwa-sidebar { display: none; }

.pwa-main { padding-bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-bottom) + 12px); }

.pwa-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px;
  background: var(--pwa-surface); border-bottom: 1px solid var(--pwa-line);
}
.pwa-topbar-title {
  font-size: 1rem; font-weight: 700; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwa-topbar-actions { display: flex; align-items: center; gap: 6px; }
.pwa-lang-form, .pwa-logout-form { display: inline; margin: 0; }
/* 44x44 is the smallest comfortable touch target; anything under it misfires. */
.pwa-lang-toggle, .pwa-logout-btn, .pwa-me-chip {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border-radius: 10px; border: 1px solid var(--pwa-line);
  background: var(--pwa-surface); color: var(--pwa-ink);
  font-size: 0.85rem; text-decoration: none; cursor: pointer;
}
.pwa-content { padding: 12px; }

/* ---------- bottom navigation (mobile) ---------- */
.pwa-bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  height: calc(var(--pwa-nav-h) + var(--pwa-safe-bottom));
  /* The home indicator sits in this band; padding keeps the last icon clear. */
  padding-bottom: var(--pwa-safe-bottom);
  background: var(--pwa-surface);
  border-top: 1px solid var(--pwa-line);
}
.pwa-bottom-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 44px;
  color: var(--pwa-muted); text-decoration: none; font-size: 0.68rem;
}
.pwa-bottom-link.is-active { color: var(--pwa-accent); }
.pwa-bottom-icon { font-size: 1.25rem; line-height: 1; }
.pwa-bottom-label { white-space: nowrap; }
/* The centre Scan button is raised so it reads as the primary action. */
.pwa-bottom-link.is-center .pwa-bottom-icon {
  width: 48px; height: 48px; margin-top: -18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--pwa-accent); color: #fff;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .pwa-shell { display: flex; }
  .pwa-sidebar {
    display: flex; flex-direction: column; gap: 4px;
    width: 232px; flex: 0 0 232px; min-height: 100vh;
    padding: 16px 12px; background: var(--pwa-surface);
    border-inline-end: 1px solid var(--pwa-line);
  }
  .pwa-brand { padding: 0 8px 12px; }
  .pwa-brand-name { font-weight: 800; font-size: 1.05rem; }
  .pwa-side-link {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 10px; border-radius: 8px;
    color: var(--pwa-ink); text-decoration: none;
  }
  .pwa-side-link.is-active { background: rgba(14, 165, 233, 0.1); color: var(--pwa-accent); }
  .pwa-main { flex: 1; min-width: 0; padding-bottom: 24px; }
  .pwa-bottom-nav { display: none; }
}

/* ---------- typography / helpers ---------- */
.pwa-page-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 10px; }
.pwa-muted { color: var(--pwa-muted); font-size: 0.8rem; }
.mono { font-family: ui-monospace, "Cairo", monospace; letter-spacing: 0.04em; }
.pwa-num { text-align: end; }
.pwa-empty {
  padding: 18px 12px; text-align: center; color: var(--pwa-muted);
  list-style: none;
}

/* ---------- CTA ---------- */
.pwa-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 16px; margin-bottom: 12px;
  border-radius: 12px; font-weight: 700; text-decoration: none;
}
.pwa-cta-primary { background: var(--pwa-accent); color: #fff; }
.pwa-cta-secondary { background: var(--pwa-surface); color: var(--pwa-ink); border: 1px solid var(--pwa-line); }
.pwa-cta-ghost { background: transparent; color: var(--pwa-accent); border: 1px dashed var(--pwa-accent); }

/* ---------- stats / cards ---------- */
.pwa-stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.pwa-stat-grid-inline { margin-bottom: 0; }
.pwa-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px; background: var(--pwa-surface);
  border: 1px solid var(--pwa-line); border-radius: 12px;
}
.pwa-stat-value { font-size: 1.5rem; font-weight: 800; }
.pwa-stat-label { font-size: 0.75rem; color: var(--pwa-muted); }
.pwa-card {
  padding: 12px; margin-bottom: 12px;
  background: var(--pwa-surface); border: 1px solid var(--pwa-line);
  border-radius: 12px;
}
.pwa-card-warn { border-color: var(--pwa-warn); }
.pwa-card-title { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; }
.pwa-hero { margin-bottom: 12px; }
.pwa-hero-title { margin: 0; font-size: 1.3rem; font-weight: 800; }
.pwa-hero-sub { margin: 4px 0 10px; color: var(--pwa-muted); font-size: 0.85rem; }
.pwa-plain-list { list-style: none; margin: 0; padding: 0; }
.pwa-plain-list li { display: flex; gap: 8px; padding: 4px 0; font-size: 0.85rem; }

/* ---------- tabs / search ---------- */
.pwa-tab-list {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: none;
}
.pwa-tab-list::-webkit-scrollbar { display: none; }
.pwa-tab {
  flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--pwa-line); background: var(--pwa-surface);
  color: var(--pwa-ink); font-size: 0.85rem; white-space: nowrap;
}
.pwa-tab.is-active { background: var(--pwa-ink); color: #fff; border-color: var(--pwa-ink); }
.pwa-badge {
  margin-inline-start: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--pwa-danger); color: #fff; font-size: 0.7rem;
}
.pwa-search-form { display: flex; gap: 8px; margin-bottom: 12px; }
.pwa-search-form .pwa-input { flex: 1; min-width: 0; }

/* ---------- form controls ----------
   16px is load-bearing: anything smaller makes iOS Safari zoom the viewport
   on focus, and the page never returns to its original zoom. */
.pwa-input, .pwa-select, .pwa-textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font-size: 16px; /* iOS zoom-on-focus guard - do not lower */
  line-height: 1.4; color: var(--pwa-ink);
  background: var(--pwa-surface);
  border: 1px solid var(--pwa-line); border-radius: 10px;
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.pwa-textarea { min-height: 88px; resize: vertical; }
.pwa-input-num { min-height: 40px; text-align: end; }
.pwa-field { display: block; margin-bottom: 12px; }
.pwa-fieldset { border: 1px dashed var(--pwa-line); border-radius: 12px; padding: 12px; margin: 0 0 12px; }
.pwa-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.pwa-hint { display: block; font-size: 0.75rem; color: var(--pwa-muted); margin-top: 4px; }
.pwa-req { color: var(--pwa-danger); }

.pwa-btn {
  min-height: 44px; padding: 0 14px; margin-bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--pwa-line);
  background: var(--pwa-surface); color: var(--pwa-ink);
  font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.pwa-btn-primary { background: var(--pwa-accent); border-color: var(--pwa-accent); color: #fff; }
.pwa-btn-secondary { background: var(--pwa-ink); border-color: var(--pwa-ink); color: #fff; }
.pwa-btn-ghost { background: transparent; color: var(--pwa-accent); }
.pwa-btn-small { min-height: 36px; padding: 0 10px; font-size: 0.8rem; margin: 0; }
.pwa-btn-block { width: 100%; }
.pwa-btn-row { display: flex; gap: 8px; }
.pwa-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pwa-form { margin: 0; }

/* ---------- alerts ---------- */
.pwa-alert { padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; font-size: 0.85rem; }
.pwa-alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.pwa-ok { color: var(--pwa-ok); font-weight: 600; }
.pwa-warn { color: var(--pwa-warn); font-weight: 600; }
.pwa-offline-banner {
  padding: 10px 12px; background: var(--pwa-warn); color: #1f2937;
  font-size: 0.82rem; text-align: center;
}
.pwa-offline { padding: 24px 12px; text-align: center; }
.toast-host { position: fixed; inset-inline: 0; bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-bottom) + 12px); z-index: 50; }
.toast-error { background: #7f1d1d; color: #fff; }

/* ---------- ticket lists ---------- */
.pwa-ticket-list { list-style: none; margin: 0 0 12px; padding: 0; }
.pwa-ticket-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--pwa-surface); border: 1px solid var(--pwa-line);
  border-radius: 12px;
}
.pwa-ticket-link {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
}
.pwa-ticket-main { display: flex; flex-direction: column; }
.pwa-ticket-device { font-weight: 600; font-size: 0.9rem; }
.pwa-ticket-customer { font-size: 0.78rem; color: var(--pwa-muted); }
.pwa-ticket-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwa-code {
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em;
  color: var(--pwa-ink);
}
.pwa-code-lg { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.16em; }
.pwa-pill {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: #e2e8f0; color: #334155;
}
.pwa-pill-ok { background: #dcfce7; color: #14532d; }
.pwa-pill-warn { background: #fef3c7; color: #78350f; }
.pwa-pill-danger { background: #fee2e2; color: #7f1d1d; }
.pwa-pill-accent { background: #e0f2fe; color: #075985; }
.pwa-pill-info { background: #e0e7ff; color: #3730a3; }
.pwa-pill-muted { background: #f1f5f9; color: #64748b; }

/* ---------- ticket detail ---------- */
.pwa-ticket { display: flex; flex-direction: column; gap: 12px; }
.pwa-ticket-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px; background: var(--pwa-surface);
  border: 1px solid var(--pwa-line); border-radius: 12px;
}
.pwa-ticket-codes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwa-ticket-block {
  padding: 12px; background: var(--pwa-surface);
  border: 1px solid var(--pwa-line); border-radius: 12px;
}
.pwa-block-title { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pwa-muted); }
.pwa-block-line { margin: 0 0 4px; font-size: 0.9rem; }
.pwa-tel { display: inline-block; min-height: 44px; line-height: 44px; color: var(--pwa-accent); text-decoration: none; }
.pwa-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pwa-table th, .pwa-table td { padding: 6px 4px; text-align: start; border-bottom: 1px solid var(--pwa-line); }
.pwa-note { padding: 8px 0; border-bottom: 1px solid var(--pwa-line); }
.pwa-timeline { list-style: none; margin: 0; padding: 0; }
.pwa-timeline-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.82rem; flex-wrap: wrap; }
.pwa-actions { display: flex; flex-direction: column; gap: 8px; }

/* ---------- photos / lightbox ---------- */
.pwa-photo-row, .pwa-photo-capture { display: flex; gap: 8px; flex-wrap: wrap; }
.pwa-photo-thumb {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px; background: var(--pwa-surface);
  border: 1px solid var(--pwa-line); border-radius: 10px; cursor: pointer;
}
.pwa-photo-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.pwa-photo-slot { flex: 1 1 45%; }
.pwa-photo-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; border: 2px dashed var(--pwa-accent);
  border-radius: 12px; cursor: pointer; font-weight: 700;
}
.pwa-hidden-input { display: none; }
.pwa-photo-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.pwa-photo-preview img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; }

.pwa-lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, 0.92);
}
.pwa-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.pwa-lightbox-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px;
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.6rem; cursor: pointer;
}
.pwa-no-scroll { overflow: hidden; }

/* ---------- intake ---------- */
.pwa-stepper { display: flex; gap: 4px; list-style: none; margin: 0 0 12px; padding: 0; }
.pwa-step {
  flex: 1; display: flex; align-items: center; gap: 4px;
  padding: 6px 4px; border-radius: 8px;
  background: var(--pwa-surface); border: 1px solid var(--pwa-line);
  font-size: 0.66rem; color: var(--pwa-muted);
}
.pwa-step.is-active { border-color: var(--pwa-accent); color: var(--pwa-ink); font-weight: 700; }
.pwa-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--pwa-line); color: var(--pwa-ink); font-size: 0.65rem;
}
.pwa-step-panel { display: none; }
.pwa-step-panel.is-active { display: block; }
.pwa-pick-list { list-style: none; margin: 0 0 12px; padding: 0; }
.pwa-pick {
  padding: 12px; min-height: 44px;
  display: flex; align-items: center;
  background: var(--pwa-surface); border: 1px solid var(--pwa-line);
  border-radius: 10px; margin-bottom: 6px; cursor: pointer; font-size: 0.88rem;
}
.pwa-selected {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; margin-bottom: 12px;
  background: #dcfce7; border-radius: 10px; font-size: 0.85rem;
}

/* ---------- scanner ---------- */
.pwa-scanner { margin-bottom: 12px; }
.pwa-scan-reader {
  min-height: 320px; border-radius: 12px; overflow: hidden;
  background: var(--pwa-ink);
}
.pwa-scan-reader video { width: 100% !important; }

/* ---------- notifications ---------- */
.pwa-notification-list { list-style: none; margin: 0 0 12px; padding: 0; }
.pwa-notification-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--pwa-surface); border: 1px solid var(--pwa-line);
  border-radius: 10px;
}
.pwa-notification-label { flex: 1; font-size: 0.88rem; font-weight: 600; }
.pwa-notification-link { font-family: ui-monospace, monospace; color: var(--pwa-accent); }

/* ---------- RTL ----------
   Logical properties throughout, so flipping dir mirrors the layout with no
   second set of rules. Only the few transforms below need an explicit flip. */
/* No overrides needed: every rule above uses logical properties, so the
   whole layout mirrors from dir="rtl" alone. */

/* -------------------------- desktop sidebar & keyboard skip link --

   Both rules below fix regressions from the mobile-drawer work.

   .sidebar: Alpine binds `translate-x-0` / `-translate-x-full` in base.html at
   every width, and those utilities live in this file's base layer. With no
   desktop override the 16rem grid column was still laid out but its content
   was translated -100% off-screen, so the sidebar was "missing" on desktop
   while its column stayed reserved. Pin it and hide the mobile affordances.

   The breakpoint below is 1024px to match this file's existing desktop
   breakpoint (.pwa-shell). The mobile drawer uses max-width: 1023.98px, so the
   two ranges meet exactly at 1024px with no gap between them. */
@media (min-width: 1024px) {
  .sidebar {
    position: relative;
    inset-block: auto;
    inset-inline-start: auto;
    transform: none !important;
    inline-size: auto;
    z-index: auto;
    overflow-y: visible;
    box-shadow: none;
  }
  .sidebar-toggle,
  .sidebar-close,
  .sidebar-scrim {
    display: none;
  }
}

/* .skip-link: the "Skip to content" anchor in base.html had no rule at all, so
   it rendered as an ordinary visible link. Keep it off-screen until focused.
   Logical `inset-inline-start` flips it under dir="rtl". */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  z-index: 100;
  padding: 8px 16px;
  background: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  inset-inline-start: 0;
}

/* --------------------------------------------------- shop logo ---------- */

/* Login card: the logo sits above the shop name and heading. */
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.login-logo img {
  max-width: 200px;
  height: auto;
  border-radius: 16px;
}

/* Top bar (settings chrome and the PWA): a badge beside the shop name. */
.topbar-logo {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 8px;
  inline-size: 32px;
  block-size: 32px;
  object-fit: contain;
  border-radius: 6px;
}