/* ============================================================
   Upland Time Ticket — polished, phone-first UI
   Soft rounds · confident color · thumb-friendly actions
   ============================================================ */

:root {
  /* Surfaces — deep slate like a messaging app night theme */
  --bg: #0b1219;
  --bg-elevated: #101820;
  --surface: #17212b;
  --surface2: #1e2c3a;
  --surface3: #253545;
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.28);

  /* Text */
  --text: #f1f5f9;
  --muted: #8b9cb3;
  --muted2: #64748b;

  /* Brand — confident blue (primary actions) + warm amber (highlights) */
  --accent: #2aabee;          /* Telegram-like trust blue */
  --accent-press: #1e9ad8;
  --accent-soft: rgba(42, 171, 238, 0.14);
  --highlight: #f0b429;       /* ticket numbers, warm attention */
  --highlight-soft: rgba(240, 180, 41, 0.14);
  --ok: #3dd68c;
  --ok-soft: rgba(61, 214, 140, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #f07178;
  --danger-soft: rgba(240, 113, 120, 0.14);

  /* Shape */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 8px 28px rgba(42, 171, 238, 0.22);

  /* Single clean system stack app-wide (Telegram-like) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --tap: 44px;
  --space: 1rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Avoid horizontal scroll on mobile */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(42, 171, 238, 0.08), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* iOS/Android safe areas */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
a:hover { color: #5bc4f5; text-decoration: none; }

/* ---- Top bar ---- */
.topbar {
  background: rgba(23, 33, 43, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.45rem 0.75rem;
  padding-top: max(0.45rem, env(safe-area-inset-top));
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.tab-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem 0.65rem;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 52px;
  width: 100%;
  padding: 0 0.25rem;
}
.tab-side {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 44px;
  /* roomy drop targets left & right of ☰ */
  width: 100%;
}
.tab-left {
  justify-content: flex-end;
  padding-right: 0.35rem;
  gap: 0.35rem;
}
.tab-right {
  justify-content: flex-start;
  padding-left: 0.35rem;
  gap: 0.35rem;
}
.tab-center {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  flex-shrink: 0;
  padding: 0 0.25rem;
}

.tab-link {
  color: var(--muted);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.tab-link:hover {
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
}
.tab-link.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.topbar-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.4rem 0;
  width: 100%;
}
.topbar .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  flex-wrap: wrap;
}
.topbar .brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Phone tab copies: hidden on desktop by default */
.nav-phone-tabs { display: none; }

/* Phone / narrow screens: only ☰ in the top bar; all nav links in dropdown */
@media (max-width: 768px) {
  .tab-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    min-height: 48px;
    gap: 0;
    padding: 0;
  }
  .tab-left,
  .tab-right {
    display: none !important;
  }
  .tab-center {
    flex: 0 0 auto;
    padding: 0;
  }
  .menu-btn {
    width: 48px;
    height: 48px;
  }
  /* Show taskbar pages inside the hamburger menu */
  .nav-phone-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-phone-tabs .nav-item {
    display: block;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--text);
    text-decoration: none;
  }
  .nav-phone-tabs .nav-item:hover,
  .nav-phone-tabs .nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
  }
  .menu-customize-btn {
    /* Still available, but less prominent on phone */
    font-size: 0.8rem;
  }
  .topbar .brand span { font-size: 0.9rem; }
  .wrap {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: max(3.25rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  }
  .btn-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  .btn, .btn-lg {
    width: 100%;
    max-width: 100%;
  }
  .btn-row .btn,
  .btn-row .btn-lg {
    width: auto;
    min-width: min(100%, 9.5rem);
    flex: 1 1 auto;
  }
  .table-scroll {
    margin: 0 -0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .tickets-table {
    font-size: 0.82rem;
  }
  h1 { font-size: 1.35rem; }
  .panel {
    padding: 1rem 0.9rem;
  }
  .step-action-form .btn-lg,
  .step-action-center > .btn,
  .step-action-center > .btn-lg {
    width: 100%;
    max-width: 100%;
  }
}

/* Desktop / full width: full left + right taskbar; hide phone-only menu copies */
@media (min-width: 769px) {
  .nav-phone-tabs {
    display: none !important;
  }
}


/* Backup page + Admin backup panel */
.backup-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--text);
  line-height: 1.55;
  font-size: 0.92rem;
}
.backup-list li { margin-bottom: 0.4rem; }
.backup-list code {
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
}
.backup-admin-panel {
  border-color: rgba(42, 171, 238, 0.35);
  background: linear-gradient(180deg, rgba(42, 171, 238, 0.1), var(--surface));
  box-shadow: 0 0 0 1px rgba(42, 171, 238, 0.08), var(--shadow-sm);
}
.backup-admin-panel h2 {
  text-align: left;
  margin-top: 0;
  color: var(--accent);
}
.backup-admin-panel .btn-lg {
  min-width: min(100%, 16rem);
}

/* ---- Page shell ---- */
.wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  animation: page-in 0.35s var(--ease);
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.page > h1,
.page > .lead,
.page > .muted,
.page > .caution,
.page > .success-banner {
  text-align: center;
}

h1 {
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0.15rem 0 0.85rem;
  text-align: center;
}
h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.35rem 0 0.75rem;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 0.98rem;
  font-weight: 650;
  margin: 0 0 0.5rem;
  text-align: center;
}
.muted { color: var(--muted); font-size: 0.9rem; }
.lead {
  color: var(--muted);
  margin-bottom: 1.25rem;
  text-align: center;
}

/* ---- Cards & panels ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem auto 1.5rem;
  width: 100%;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  text-align: center;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.card:hover {
  box-shadow: var(--shadow);
}
.card .num {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--highlight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.card .label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
  font-weight: 600;
}
.card-manhours .num { color: var(--ok); }
.card-sub {
  font-size: 0.7rem;
  margin: 0.35rem 0 0;
  line-height: 1.3;
  color: var(--muted2);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.2rem;
  margin: 0 auto 1.1rem;
  width: 100%;
  text-align: left;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}
.panel > h2:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}
@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---- Forms ---- */
label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
  text-align: left;
  letter-spacing: 0.01em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="password"],
input[type="file"],
input[type="time"],
select,
textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font: inherit;
  /* 16px+ prevents iOS Safari auto-zoom on focus */
  font-size: 16px;
  margin-bottom: 0.85rem;
  text-align: left;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
  min-height: var(--tap);
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b9cb3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}
textarea {
  min-height: 120px;
  resize: vertical;
  min-height: 110px;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface2);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted2);
}

/* ---- Buttons — primary actions feel solid & confident ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(180deg, #39b7f0 0%, var(--accent) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.35rem;
  min-height: var(--tap);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-glow);
  transition: transform 0.12s var(--ease), filter 0.12s var(--ease), box-shadow 0.12s var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover {
  filter: brightness(1.06);
  text-decoration: none;
  color: #fff;
}
.btn:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}
.btn.secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  box-shadow: none;
}
.btn.secondary:hover {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--muted2);
}
.btn.danger {
  background: linear-gradient(180deg, #f48a90 0%, var(--danger) 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(240, 113, 120, 0.28);
}
.btn.danger:hover { color: #fff; }
.btn.small {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 650;
  min-height: 36px;
}
.btn-block {
  width: 100%;
  max-width: 100%;
}
.btn-lg {
  padding: 0.95rem 1.6rem;
  font-size: 1.05rem;
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-pill);
}

/* Action rows: primary first, centered, good spacing */
.btn-row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  justify-content: center;
  align-items: center;
}
.btn-row .btn {
  flex: 1 1 auto;
  min-width: min(140px, 100%);
  max-width: 100%;
}
.btn-row .btn.secondary {
  flex: 0 1 auto;
}

/* Sticky bottom action strip for long forms (phone thumb zone) */
.actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 15;
  margin: 1.25rem -0.25rem 0;
  padding: 0.85rem 0.75rem;
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(11, 18, 25, 0.92) 28%, var(--bg) 55%);
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* ---- Tables ---- */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto 0.5rem;
  border-radius: var(--radius-sm);
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  margin: 0 auto;
}
th, td {
  text-align: center;
  padding: 0.7rem 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.15);
}
th:first-child { border-radius: var(--radius-xs) 0 0 0; }
th:last-child { border-radius: 0 var(--radius-xs) 0 0; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(42, 171, 238, 0.04); }
td.row-actions,
th.row-actions { text-align: center; }
.row-actions form { display: inline; }

/* ---- Section chrome ---- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  text-align: center;
  flex-direction: column;
}
.section-title h2 {
  margin: 0;
  width: 100%;
}
/* Person/equipment blocks: rows stacked, add button bottom-center under them */
.lines-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5rem;
}
.lines-block #persons-rows,
.lines-block #equipment-rows {
  width: 100%;
  max-width: 520px;
}
.section-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.35rem auto 1.25rem;
  max-width: 520px;
  width: 100%;
}
.section-actions .btn {
  min-width: 10rem;
}

.row-editor {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.8rem;
  margin: 0 auto 0.65rem;
  background: var(--bg-elevated);
  max-width: 520px;
  width: 100%;
}

/* Person / equipment compact line: [−] stack | hours */
.line-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
}
.line-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.line-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.line-stack label,
.line-hours label {
  margin-bottom: 0.2rem;
  text-align: center;
}
.line-stack select,
.line-stack input,
.line-hours input {
  margin-bottom: 0;
  text-align: center;
}
.line-stack select {
  text-align-last: center;
}
.line-hours {
  flex: 0 0 6.5rem;
  max-width: 7rem;
  width: 100%;
}
.line-hours input {
  text-align: center;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Red minus remove control — left of the line */
.btn-remove-line {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  margin-top: 1.35rem; /* align with first control under label */
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background 0.12s var(--ease), transform 0.12s var(--ease), color 0.12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-remove-line:hover {
  background: rgba(240, 113, 120, 0.28);
  color: #fecaca;
  filter: none;
}
.btn-remove-line:active {
  transform: scale(0.94);
}

@media (max-width: 520px) {
  .line-main {
    flex-direction: column;
  }
  .line-hours {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
  .btn-remove-line {
    margin-top: 1.3rem;
  }
}

/* legacy grid (if any) */
.row-editor .grid-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.9fr auto;
  gap: 0.5rem;
  align-items: end;
}
.row-editor.equip .grid-row {
  grid-template-columns: 2fr 1fr 1.2fr auto;
}

.total-box {
  background: linear-gradient(145deg, var(--surface2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.35rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-direction: column;
  text-align: center;
  width: 100%;
  margin: 0.75rem auto;
  box-shadow: var(--shadow-sm);
}
.total-box .amount {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.total-box .amount.warn { color: var(--warn); }

/* ---- Feedback banners ---- */
.caution,
.info-banner,
.success-banner {
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin: 0.65rem auto 1rem;
  font-size: 0.9rem;
  font-family: var(--font);
  font-weight: 500;
  text-align: center;
  width: 100%;
  max-width: 100%;
  letter-spacing: -0.01em;
  line-height: 1.45;
}
.caution {
  background: var(--warn-soft);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
}
.caution strong { color: var(--warn); font-weight: 700; }

.info-banner {
  background: var(--accent-soft);
  border: 1px solid rgba(42, 171, 238, 0.32);
  color: #b6e5fb;
}
.info-banner strong { color: #e0f4fd; font-weight: 700; }

.success-banner {
  background: var(--ok-soft);
  border: 1px solid rgba(61, 214, 140, 0.35);
  color: #a7f3d0;
  font-weight: 600;
}
.success-banner strong { color: #d1fae5; }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge.ok {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
  background: var(--ok-soft);
}
.badge.warn {
  color: #fde68a;
  border-color: rgba(161, 98, 7, 0.45);
  background: var(--warn-soft);
}

/* ============================================================
   Invoice total unlock — iPhone-style slide → PIN → total
   ============================================================ */
.tt-unlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1.25rem auto 0.25rem;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.tt-unlock-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  animation: tt-unlock-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-unlock-stage[hidden] {
  display: none !important;
}
@keyframes tt-unlock-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* —— Stage 1: classic iOS slide bar (centered) —— */
.ios-slide {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  --slide-pct: 0;
}
.ios-slide-track {
  position: relative;
  height: 54px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #1c2633 0%, #121a24 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent browser scroll/selection fighting the drag */
  touch-action: none;
}
/* Shimmer across “slide to view total” */
.ios-slide-shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.07) 45%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.07) 55%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: ios-shine 2.6s ease-in-out infinite;
  will-change: background-position, opacity;
}
@keyframes ios-shine {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.ios-slide.is-sliding .ios-slide-shine,
.ios-slide.is-open .ios-slide-shine {
  animation: none;
}
.ios-slide-label {
  pointer-events: none;
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(226, 232, 240, 0.62);
  padding: 0 0.85rem 0 3.35rem;
  white-space: nowrap;
  will-change: opacity, transform;
}
.ios-slide-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #0b1219;
  background: linear-gradient(180deg, #ffffff 0%, #e8eef5 55%, #d4dde8 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 2px rgba(255, 255, 255, 0.55) inset,
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.12);
  /* transform is driven by JS (translate3d) — keep will-change for smooth drag */
  will-change: transform;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.ios-slide-knob:active,
.ios-slide.is-sliding .ios-slide-knob {
  cursor: grabbing;
  box-shadow:
    0 2px 2px rgba(255, 255, 255, 0.55) inset,
    0 8px 20px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(42, 171, 238, 0.22);
}
.ios-slide.is-open .ios-slide-knob {
  box-shadow:
    0 2px 2px rgba(255, 255, 255, 0.55) inset,
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(61, 214, 140, 0.35);
}
.ios-slide-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a4a5c;
  margin-left: 1px;
  pointer-events: none;
}
.ios-slide-arrows svg {
  display: block;
}

/* Keep unlock block centered inside Snapshot panel */
#pdf-preview .tt-unlock {
  margin-left: auto;
  margin-right: auto;
}

/* —— Stage 2: PIN —— */
.ios-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.25rem 0.15rem;
}
.ios-pin-title {
  margin: 0;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ios-pin-input {
  width: 10.5rem;
  margin: 0;
  text-align: center;
  font-family: var(--font);
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: 0.28em;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(16, 24, 32, 0.9);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ios-pin-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ios-pin-err {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fca5a5;
}
.ios-pin-err[hidden] {
  display: none !important;
}
.ios-pin-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  width: 100%;
}
.ios-pin-cancel,
.ios-pin-submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  border-radius: var(--radius-pill);
  padding: 0.62rem 1.15rem;
  min-width: 6.5rem;
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
.ios-pin-cancel {
  background: rgba(148, 163, 184, 0.14);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ios-pin-cancel:hover {
  background: rgba(148, 163, 184, 0.22);
}
.ios-pin-submit {
  background: linear-gradient(180deg, #39b7f0 0%, var(--accent) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(42, 171, 238, 0.28);
}
.ios-pin-submit:hover {
  filter: brightness(1.05);
}
.ios-pin-cancel:active,
.ios-pin-submit:active {
  transform: scale(0.97);
}

/* —— Stage 3: total only —— */
.ios-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(61, 214, 140, 0.1), rgba(16, 24, 32, 0.55));
  border: 1px solid rgba(61, 214, 140, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.ios-total-label {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ios-total-amount {
  font-family: var(--font);
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: #86efac;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* ---- Shared app backdrop (home / tickets / admin / etc.) ---- */
/* Dim at top → brighter blue near bottom of page */
body.page-app.page-blue-fade,
body.page-blue-fade {
  background-color: #0a1016;
  background-image:
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(42, 171, 238, 0.05), transparent 50%),
    radial-gradient(ellipse 100% 55% at 50% 100%, rgba(42, 171, 238, 0.38), transparent 55%),
    linear-gradient(
      180deg,
      #0a1016 0%,
      #0b131c 8%,
      #0d1824 22%,
      #0f2032 40%,
      #122c44 58%,
      #153a5c 75%,
      #184a78 90%,
      #1c5f96 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
body.page-app .topbar,
body.page-blue-fade .topbar {
  background: rgba(10, 16, 22, 0.88);
  border-bottom-color: rgba(42, 171, 238, 0.12);
}
body.page-app .wrap,
body.page-app .app-foot,
body.page-blue-fade .wrap,
body.page-blue-fade .app-foot {
  position: relative;
  z-index: 1;
}
body.page-app .app-foot,
body.page-blue-fade .app-foot {
  color: rgba(186, 214, 235, 0.55);
}
body.page-app .panel,
body.page-blue-fade .panel {
  background: rgba(23, 33, 43, 0.92);
  border-color: rgba(42, 171, 238, 0.14);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(42, 171, 238, 0.05);
}
body.page-app .card {
  border-radius: var(--radius);
  background: rgba(23, 33, 43, 0.92);
  border-color: rgba(42, 171, 238, 0.14);
}
body.page-ticket-new .ticket-form-stack.panel {
  border-color: rgba(42, 171, 238, 0.2);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(42, 171, 238, 0.08),
    0 0 48px rgba(42, 171, 238, 0.06);
}
body.page-ticket-new .ticket-submit-row .btn:not(.secondary) {
  box-shadow: 0 8px 32px rgba(42, 171, 238, 0.4);
}

/* ---- Accounting only: background hue red → green by invoice completion ---- */
/* --acct-done: 0 (none checked / red) … 1 (all checked / green)
   Hue angle: 0° red → 45° orange → 90° yellow-green → 120° green */
body.page-app.page-blue-fade.page-accounting,
body.page-app.page-accounting,
body.page-blue-fade.page-accounting,
body.page-accounting {
  --acct-done: 0;
  --acct-hue: calc(var(--acct-done) * 120); /* unitless degrees for hsl() */
  --acct-sat: 52%;
  --acct-glow: hsla(var(--acct-hue), var(--acct-sat), 48%, 0.38);
  --acct-mid: hsla(var(--acct-hue), 42%, 14%, 1);
  --acct-deep: hsla(var(--acct-hue), 48%, 8%, 1);
  --acct-base: #0a1016;
  /* Beat shared blue-fade backdrop (higher specificity + later rules) */
  background-color: var(--acct-deep) !important;
  background-image:
    radial-gradient(
      ellipse 115% 48% at 50% 0%,
      hsla(var(--acct-hue), var(--acct-sat), 42%, 0.14),
      transparent 55%
    ),
    radial-gradient(
      ellipse 110% 62% at 50% 100%,
      var(--acct-glow),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      var(--acct-deep) 0%,
      color-mix(in srgb, var(--acct-mid) 70%, var(--acct-base)) 28%,
      color-mix(in srgb, var(--acct-mid) 55%, #0d1824) 55%,
      color-mix(in srgb, hsla(var(--acct-hue), 50%, 18%, 1) 75%, #122018) 78%,
      hsla(var(--acct-hue), 48%, 16%, 1) 100%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  /* Smooth hue shift when --acct-done updates (checkbox → reload / live JS) */
  transition:
    background-color 0.55s ease,
    --acct-done 0.55s ease;
}
body.page-app.page-blue-fade.page-accounting .topbar,
body.page-accounting .topbar {
  background: rgba(10, 16, 22, 0.9);
  border-bottom-color: hsla(var(--acct-hue), 55%, 48%, 0.35);
  transition: border-bottom-color 0.55s ease;
}
body.page-app.page-blue-fade.page-accounting .panel,
body.page-accounting .panel {
  background: rgba(23, 33, 43, 0.93);
  border-radius: var(--radius-lg);
  border-color: hsla(var(--acct-hue), 40%, 50%, 0.16);
  transition: border-color 0.55s ease;
}
body.page-app.page-blue-fade.page-accounting .card,
body.page-accounting .card {
  border-color: hsla(var(--acct-hue), 40%, 50%, 0.16);
  transition: border-color 0.55s ease;
}
body.page-accounting .acct-progress-hint {
  margin: -0.25rem 0 1rem;
  text-align: center;
  color: hsla(var(--acct-hue), 35%, 78%, 0.92);
  transition: color 0.55s ease;
}
body.page-accounting .card .num {
  transition: color 0.35s var(--ease);
}
/* Live progress meter under hint (optional visual cue) */
body.page-accounting .acct-hue-bar {
  width: min(100%, 280px);
  height: 4px;
  margin: -0.35rem auto 1.15rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}
body.page-accounting .acct-hue-bar > span {
  display: block;
  height: 100%;
  width: calc(var(--acct-done) * 100%);
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    hsl(0, 70%, 52%),
    hsl(calc(var(--acct-done) * 120), 65%, 48%)
  );
  transition: width 0.45s var(--ease), background 0.45s ease;
}

/* Soft login polish */
body.page-login {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(42, 171, 238, 0.12), transparent 55%),
    #0a1016;
}
body.page-login .login-form.panel {
  border-radius: var(--radius-xl);
}

/* Green-hue add person / add equipment */
.btn-add-line,
.section-actions .btn-add-line {
  background: linear-gradient(180deg, rgba(61, 214, 140, 0.22), rgba(61, 214, 140, 0.12));
  color: #86efac;
  border: 1.5px solid rgba(61, 214, 140, 0.45);
  box-shadow: 0 4px 14px rgba(61, 214, 140, 0.12);
}
.btn-add-line:hover,
.section-actions .btn-add-line:hover {
  background: linear-gradient(180deg, rgba(61, 214, 140, 0.32), rgba(61, 214, 140, 0.18));
  color: #bbf7d0;
  border-color: rgba(61, 214, 140, 0.65);
  filter: none;
}

/* New ticket: one field under the next (phone scroll) */
.ticket-form-stack {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.ticket-form-stack .stack-fields {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
}
.ticket-form-stack .stack-fields > div {
  width: 100%;
}
/* Locations multi-select dropdown */
.loc-multi {
  position: relative;
  width: 100%;
  text-align: center;
}
.loc-multi-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.loc-multi-trigger:hover,
.loc-multi.is-open .loc-multi-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.loc-multi-trigger.has-selection .loc-multi-summary {
  color: var(--text);
}
.loc-multi-summary {
  flex: 1;
  text-align: center;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-multi-caret {
  color: var(--muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.loc-multi-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 0.35rem);
  z-index: 30;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  text-align: left;
}
.loc-multi-panel[hidden] {
  display: none !important;
}
.loc-multi-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.loc-multi-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.loc-multi-option:hover {
  background: var(--surface2);
}
.loc-multi-option input {
  width: auto;
  min-height: auto;
  margin: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.loc-multi-empty {
  padding: 0.85rem;
  text-align: center;
  margin: 0;
}
.loc-multi-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0.5rem;
}
.loc-multi-chips[hidden] {
  display: none !important;
}
.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(42, 171, 238, 0.35);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 650;
  max-width: 100%;
}
.loc-chip-x {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
  opacity: 0.85;
}
.loc-chip-x:hover {
  opacity: 1;
  color: #fff;
}
.ticket-form-stack h2 {
  margin-top: 1.5rem;
}
.ticket-form-stack h2:first-of-type {
  margin-top: 0;
}
/* Center text inside all fields on the ticket form */
.ticket-form-stack input[type="text"],
.ticket-form-stack input[type="email"],
.ticket-form-stack input[type="tel"],
.ticket-form-stack input[type="number"],
.ticket-form-stack input[type="date"],
.ticket-form-stack input[type="time"],
.ticket-form-stack input[type="password"],
.ticket-form-stack select,
.ticket-form-stack textarea,
.ticket-form-stack .person-hours,
.ticket-form-stack .equip-qty,
.ticket-form-stack .equip-notes,
.ticket-form-stack .person-name,
.ticket-form-stack .person-role,
.ticket-form-stack .equip-id {
  text-align: center;
}
.ticket-form-stack select {
  text-align-last: center;
}
.ticket-form-stack textarea {
  text-align: center;
}
.ticket-form-stack label {
  text-align: center;
}
.ticket-form-stack .loc-check {
  justify-content: center;
}
.ticket-submit-row {
  flex-direction: column;
  width: 100%;
  margin-top: 1.5rem;
}
.ticket-submit-row .btn,
.ticket-submit-row .btn-lg {
  width: 100%;
  max-width: 100%;
}

/* Description: full-width box, talk mic centered under it */
.field-mic-stack {
  max-width: 520px;
  width: 100%;
  margin: 0 auto 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.field-mic-stack textarea {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 120px;
  text-align: center;
  resize: vertical;
}
/* Note box with no mic bar — still centered, full rounded */
.field-mic-stack.note-stack textarea {
  border-radius: var(--radius-sm);
}
.field-mic-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 0.5rem 0.5rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.mic-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--border-strong);
  background: var(--surface2);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.mic-icon-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.mic-icon-btn.recording,
.mic-icon-btn[data-recording="1"] {
  background: var(--danger-soft);
  border-color: rgba(240, 113, 120, 0.5);
  color: #fecaca;
}
.mic-icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* legacy */
.mic-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
}
.mic-row textarea {
  width: 100%;
  margin-bottom: 0;
}

.hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.35rem 0 0.75rem;
  text-align: center;
}

.logo-preview {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
  padding: 0.35rem;
  margin: 0 auto 0.75rem;
  display: block;
  box-shadow: var(--shadow-sm);
}

.field-hidden-rates { display: none; }

footer.app-foot {
  text-align: center;
  color: var(--muted2);
  font-size: 0.75rem;
  padding: 1.25rem 1rem 2rem;
  width: 100%;
  margin-top: auto;
  letter-spacing: 0.04em;
}

/* ---- Login ---- */
body.page-login .topbar {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
}
body.page-login .wrap {
  justify-content: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
body.page-login .page {
  max-width: 420px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(72vh, 580px);
  padding: 0.5rem 0 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.login-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  display: block;
  margin: 0 auto 1.15rem;
  box-shadow: var(--shadow), 0 0 0 4px rgba(42, 171, 238, 0.12);
}
.login-card h1 {
  margin-bottom: 0.2rem;
  font-size: 1.65rem;
}
.login-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 1.35rem;
}
.login-form {
  text-align: left;
  margin-bottom: 0;
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.3rem 1.35rem;
  box-shadow: var(--shadow);
}
.login-form .btn-row {
  margin-top: 0.35rem;
}
.login-form .btn-row .btn {
  max-width: none;
  flex: 1 1 100%;
}

.user-chip {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(42, 171, 238, 0.3);
  color: var(--accent);
  margin-left: 0.25rem;
  font-weight: 600;
}

.multi-select {
  min-height: 140px;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-sm);
}
.multi-select option { padding: 0.35rem 0.5rem; }

kbd {
  font-size: 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}

.priv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.45rem 0.75rem;
  margin: 0.5rem 0;
}
.priv-grid label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  font-size: 0.85rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.hours-synced {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Signatures ---- */
.sig-canvas {
  width: 100%;
  max-width: 400px;
  height: 130px;
  background: #fff;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  touch-action: none;
  cursor: crosshair;
  display: block;
  margin: 0 auto 0.55rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}
.sig-actions {
  margin-bottom: 0.65rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.sig-modal-open {
  overflow: hidden;
  /* Prevent iOS overscroll shifting touch coords */
  position: fixed;
  width: 100%;
  height: 100%;
}
.sig-enlarge-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 10, 16, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
  /* Use dynamic viewport on modern mobile browsers */
  height: 100vh;
  height: 100dvh;
}
.sig-enlarge-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 0.75rem 0.85rem 0.9rem;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.sig-enlarge-modal.is-landscape .sig-enlarge-panel {
  max-width: 100%;
  border-radius: var(--radius-lg);
}
.sig-enlarge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sig-orient-hint {
  font-size: 0.78rem;
  flex: 1 1 auto;
  text-align: center;
}
.sig-enlarge-modal.is-landscape .sig-orient-hint {
  display: none;
}
.sig-enlarge-canvas {
  width: 100% !important;
  max-width: 100%;
  flex: 1 1 auto;
  background: #fff;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  touch-action: none;
  -ms-touch-action: none;
  cursor: crosshair;
  display: block;
  margin: 0 auto;
  /* Critical for correct finger mapping on iOS */
  touch-action: none;
}
.sig-enlarge-hint {
  flex-shrink: 0;
  margin: 0.45rem 0 0;
  text-align: center;
}
.sig-enlarge-modal.is-landscape .sig-enlarge-hint {
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

.sig-preview {
  max-height: 48px;
  background: #fff;
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  vertical-align: middle;
}

/* ---- Accounting sub-tabs (Invoices | Payroll) ---- */
.acct-subtabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto 1rem;
  padding: 0.3rem;
  width: fit-content;
  max-width: 100%;
  background: rgba(16, 24, 32, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.acct-subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.acct-subtab:hover {
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
  text-decoration: none;
}
.acct-subtab.active {
  color: #fff;
  background: linear-gradient(180deg, #39b7f0 0%, var(--accent) 100%);
  box-shadow: 0 4px 14px rgba(42, 171, 238, 0.28);
}
.payroll-draft-toggle {
  font-size: 0.85rem !important;
  color: var(--text) !important;
  cursor: pointer;
  gap: 0.45rem !important;
}
.payroll-draft-toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}
.payroll-table tfoot td {
  border-top: 1px solid var(--border-strong);
  padding-top: 0.75rem;
}
.payroll-detail {
  padding: 0.35rem 0.25rem 0.65rem;
}
.payroll-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: rgba(10, 16, 22, 0.35);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.payroll-detail-table th,
.payroll-detail-table td {
  padding: 0.4rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.payroll-detail-table th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.payroll-detail-row[hidden] {
  display: none !important;
}
.payroll-detail-row > td {
  background: rgba(42, 171, 238, 0.04);
  padding: 0.35rem 0.5rem 0.75rem;
}
button.payroll-toggle.action-link {
  cursor: pointer;
  font: inherit;
  border: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: 650;
  font-size: 0.82rem;
  padding: 0.35rem 0.55rem;
}
button.payroll-toggle.action-link:hover {
  background: var(--accent-soft);
}

/* Payroll page: calm mid-green/blue wash (not invoice red/green meter) */
body.page-payroll.page-accounting {
  --acct-done: 0.55;
}

/* ---- Accounting period ---- */
.period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.25rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  text-align: center;
  border-radius: var(--radius-lg);
}
.period-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  width: 100%;
}
.period-month-form input[type="month"] {
  width: auto;
  min-width: 10rem;
  margin: 0;
  border-radius: var(--radius-pill);
  text-align: center;
}
.period-range-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}
.period-range-form label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.period-range-form input[type="date"] {
  width: auto;
  margin: 0;
  min-width: 8.5rem;
  border-radius: var(--radius-sm);
}

/* ---- Setup PDF templates ---- */
.pdf-template-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.pdf-template-option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.05rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: pointer;
  color: var(--text);
  margin: 0;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.pdf-template-option input {
  margin-top: 0.25rem;
  width: auto;
  accent-color: var(--accent);
}
.pdf-template-option span strong {
  display: block;
  margin-bottom: 0.2rem;
}
.pdf-template-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.muted-panel { border-style: dashed; }

.filters {
  margin-bottom: 1rem;
  text-align: center;
}
.filters form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  align-items: flex-end;
}

/* ---- Steps ---- */
.step-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0 1.35rem;
}
.step-track .step {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.step-track .step.current {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.step-track .step.done {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
  background: var(--ok-soft);
}

.snapshot-facts {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.snapshot-facts .muted {
  display: inline-block;
  min-width: 5.5rem;
  margin-right: 0.35rem;
}

/* ---- Ticket paper snapshot ---- */
.ticket-snapshot {
  background: #f7f9fb;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem 1.5rem;
  font-family: var(--font);
  font-size: 0.9rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-sm);
  -webkit-font-smoothing: antialiased;
}
.snap-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: start;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
}
.snap-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
}
.snap-company strong {
  font-size: 1.05rem;
  font-weight: 700;
  display: block;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.snap-contact {
  font-size: 0.78rem;
  margin-top: 0.2rem;
  color: #64748b !important;
}
.snap-inv {
  font-weight: 750;
  font-size: 0.95rem;
  white-space: nowrap;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.snap-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
}
.snap-meta .full { grid-column: 1 / -1; }
.snap-meta .muted {
  display: inline-block;
  min-width: 5rem;
  margin-right: 0.35rem;
  color: #555;
}
.snap-box {
  border: 1px solid #999;
  border-radius: var(--radius-xs);
  margin-bottom: 0.85rem;
  overflow: hidden;
}
.snap-box-title {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.5rem;
  background: #eee;
  border-bottom: 1px solid #ccc;
}
.snap-box-body {
  padding: 0.55rem 0.65rem;
  min-height: 3rem;
  white-space: pre-wrap;
}
.snap-section-title {
  font-weight: 700;
  font-size: 0.8rem;
  margin: 0.65rem 0 0.3rem;
}
.snap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
  color: #111;
}
.snap-table th,
.snap-table td {
  border: 1px solid #bbb;
  padding: 0.3rem 0.4rem;
  text-align: left;
  background: #fff;
}
.snap-table th {
  background: #eee;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.snap-total {
  text-align: right;
  font-size: 1rem;
  margin: 0.75rem 0;
}
.snap-sigs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #ccc;
}
.snap-sig-line {
  font-size: 0.75rem;
  border-bottom: 1px solid #999;
  min-height: 2.5rem;
  padding-bottom: 0.25rem;
}
.snap-sig-img {
  display: block;
  max-height: 36px;
  max-width: 100%;
  margin: 0.2rem 0;
}
@media (max-width: 600px) {
  .snap-header { grid-template-columns: 1fr; }
  .snap-meta { grid-template-columns: 1fr; }
  .snap-sigs { grid-template-columns: 1fr; }
}

/* ---- Sortable headers ---- */
th.sortable {
  user-select: none;
  white-space: nowrap;
}
th.sortable a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--muted);
}
th.sortable a:hover {
  color: var(--text);
  text-decoration: none;
}
th.sortable.sorted a { color: var(--accent); }
th.sortable .sort-ind {
  font-size: 0.65rem;
  opacity: 0.85;
}
th.sortable .sort-ind.muted { opacity: 0.35; }
.tickets-table th.sortable { cursor: pointer; }

/* ---- Location checklist ---- */
.loc-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem 0.75rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.loc-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-xs);
}
.loc-check:hover { background: var(--surface2); }
.loc-check input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
  min-height: auto;
}

.note-customer {
  font-family: var(--font);
  font-size: 0.92rem;
  min-height: 110px;
  line-height: 1.45;
}

/* ---- Home ---- */
.home-hero {
  text-align: center;
  padding: 1.75rem 0 2rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-hello {
  color: var(--muted);
  margin: 0 0 1.35rem;
  font-size: 1.02rem;
  width: 100%;
  font-weight: 500;
}
.next-ticket-card {
  background: linear-gradient(165deg, var(--surface3) 0%, var(--surface) 55%, #141e28 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.85rem 1.5rem 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.next-ticket-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(42, 171, 238, 0.18), transparent 70%);
  pointer-events: none;
}
.next-ticket-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
  font-weight: 700;
}
.next-ticket-num {
  font-size: 3.15rem;
  font-weight: 800;
  color: var(--highlight);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(240, 180, 41, 0.2);
}
.home-hint {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
  color: var(--muted);
}
.home-pending {
  margin-top: 2rem;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.home-pending h2 { margin-top: 0; }

/* ---- ☰ menu ---- */
.menu-wrap { position: relative; }
.menu-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:hover,
.menu-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.04);
}
.menu-icon {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  width: 17px;
}
.menu-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: background 0.15s var(--ease);
}
.menu-btn[aria-expanded="true"] .menu-icon span {
  background: var(--accent);
}
.menu-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 12px);
  /* Wider panel — extends further left & right of the center ☰ */
  width: min(92vw, 360px);
  min-width: 280px;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.65rem 0.7rem;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  animation: menu-pop 0.18s var(--ease);
}
@keyframes menu-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.menu-dropdown a {
  display: block;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  transition: background 0.12s var(--ease);
}
.menu-dropdown a:hover {
  background: var(--surface2);
  text-decoration: none;
  color: var(--accent);
}
.menu-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
  text-align: center;
}
.menu-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}
.menu-logout { color: #fca5a5 !important; }
.menu-logout:hover {
  background: var(--danger-soft) !important;
  color: #fecaca !important;
}

/* ---- Ticket review ---- */
.ticket-review-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  text-align: center;
  flex-direction: column;
}
.ticket-review-header h1 {
  margin: 0 0 0.3rem;
  font-size: 1.4rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  width: 100%;
  color: var(--text);
}
.ticket-review-header .muted {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
}
.ticket-review-meta {
  margin-top: 0.35rem !important;
  color: var(--muted2) !important;
}
.ticket-review-header .btn-row,
.ticket-review-actions {
  width: 100%;
  justify-content: center;
}
.compact-summary h2 { margin-top: 0; }

/* Soft Telegram feel on review steps */
body.page-ticket-review .panel {
  border-radius: var(--radius-lg);
  border-color: rgba(148, 163, 184, 0.12);
  background: linear-gradient(180deg, rgba(30, 44, 58, 0.55), var(--surface));
}
body.page-ticket-review .panel > h2:first-child {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
body.page-ticket-review .step-track .step {
  font-family: var(--font);
  font-weight: 650;
}
body.page-ticket-review,
body.page-ticket-review button,
body.page-ticket-review input,
body.page-ticket-review textarea,
body.page-ticket-review select {
  font-family: var(--font);
}

.pdf-frame-wrap {
  background: #0a0e12;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 480px;
  box-shadow: var(--shadow-sm);
}
.pdf-frame {
  width: 100%;
  height: min(70vh, 720px);
  border: 0;
  background: #525659;
}
.lock-panel {
  border-color: rgba(61, 214, 140, 0.4);
  background: linear-gradient(180deg, rgba(61, 214, 140, 0.06), var(--surface));
}

/* Ticket steps 3–4: centered actions, no green “do not click” box */
.step-action-panel {
  text-align: center;
}
.step-action-panel h2 {
  text-align: center;
}
.step-action-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.35rem 0 0.25rem;
}
.step-action-form {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}
.step-action-form .btn-lg,
.step-action-center > .btn,
.step-action-center > .btn-lg {
  min-width: min(100%, 280px);
  max-width: 340px;
}
.step-action-btns {
  justify-content: center;
  width: 100%;
}

/* Save & lock success flash → home */
.lock-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  padding: 1.25rem;
}
.lock-success-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lock-success-card {
  background: var(--surface);
  border: 1px solid rgba(61, 214, 140, 0.4);
  border-radius: var(--radius-xl);
  padding: 1.85rem 1.9rem 1.6rem;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(61, 214, 140, 0.12);
  transform: scale(0.9) translateY(12px);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.lock-success-overlay.is-visible .lock-success-card {
  transform: none;
  opacity: 1;
}
.lock-success-check {
  width: 58px;
  height: 58px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--ok-soft);
  border: 2px solid rgba(61, 214, 140, 0.55);
  color: var(--ok);
  font-size: 1.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.45s 0.08s var(--ease), opacity 0.35s 0.08s var(--ease);
}
.lock-success-overlay.is-visible .lock-success-check {
  transform: scale(1);
  opacity: 1;
}
.lock-success-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--text);
}
.lock-success-sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Gentle leave / enter when locking */
body.page-leave .wrap,
body.page-leave .topbar {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
body.lock-arrive .page {
  animation: page-arrive 0.55s var(--ease);
}
@keyframes page-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Home: locked ticket celebration */
.success-banner.lock-home-success {
  animation: lock-home-in 0.6s var(--ease);
  border-color: rgba(61, 214, 140, 0.55);
  box-shadow: 0 8px 28px rgba(61, 214, 140, 0.14);
}
@keyframes lock-home-in {
  0% { opacity: 0; transform: translateY(-12px) scale(0.96); }
  55% { transform: translateY(2px) scale(1.015); }
  100% { opacity: 1; transform: none; }
}

/* ---- Accounting ---- */
.acct-check {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}
.acct-check input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--ok);
  cursor: pointer;
  min-height: auto;
}
.inline-form {
  display: inline;
  margin: 0;
}
tr.row-invoiced td { opacity: 0.72; }
tr.row-invoiced td:first-child { opacity: 1; }

/* ---- Users ---- */
.user-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  margin: 0 auto 0.85rem;
  background: var(--bg-elevated);
  width: 100%;
  max-width: 100%;
  box-shadow: var(--shadow-sm);
}
.user-card h3 {
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  text-align: center;
}

/* ---- Desktop refinements ---- */
@media (min-width: 800px) {
  .wrap { max-width: 900px; }
  .page { max-width: 820px; }
  .tab-bar { max-width: 900px; }

  .ticket-review-header {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .ticket-review-header h1 { text-align: left; }

  .section-title {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .section-title h2 { text-align: left; }
  .section-actions { justify-content: center; }

  th, td { text-align: left; }
  td.row-actions,
  th.row-actions { text-align: right; }

  .total-box {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .btn-row .btn {
    flex: 0 1 auto;
    min-width: auto;
  }
}

/* ---- Time tickets action links (not squished) ---- */
.ticket-actions {
  white-space: nowrap;
  min-width: 7.5rem;
}
.ticket-actions .action-link {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  margin: 0.1rem 0.15rem;
  border-radius: var(--radius-pill);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 650;
  font-size: 0.82rem;
  text-decoration: none;
  line-height: 1.2;
}
.ticket-actions .action-link:hover {
  background: var(--accent-soft);
  color: #5bc4f5;
  text-decoration: none;
}
.ticket-actions .action-link-danger {
  background: var(--danger-soft);
  color: #fca5a5;
  border-color: rgba(240, 113, 120, 0.35);
}
.ticket-actions .action-link-danger:hover {
  background: rgba(240, 113, 120, 0.28);
  color: #fecaca;
}
.ticket-actions .action-link-approve {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  margin: 0.1rem 0.15rem;
  border-radius: var(--radius-pill);
  background: var(--ok-soft);
  border: 1px solid rgba(61, 214, 140, 0.4);
  color: #86efac;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
  font-family: var(--font);
}
.ticket-actions .action-link-approve:hover {
  background: rgba(61, 214, 140, 0.28);
  color: #bbf7d0;
}
tr.row-needs-approval td {
  background: rgba(251, 191, 36, 0.07);
}
td.ticket-actions {
  text-align: center !important;
}

/* ---- Customizable taskbar (drag / drop) ---- */
.nav-zone {
  transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease), outline-color 0.15s var(--ease);
  border-radius: var(--radius-sm);
}
/* Empty left/right zones still have a generous hit target */
#nav-bar-left,
#nav-bar-right {
  min-height: 44px;
  min-width: 4.5rem;
}
.tab-bar.nav-editing #nav-bar-left,
.tab-bar.nav-editing #nav-bar-right {
  min-height: 52px;
  min-width: 7rem;
  padding: 0.35rem 0.45rem;
}
.tab-bar.nav-editing .nav-zone {
  outline: 1.5px dashed rgba(42, 171, 238, 0.5);
  outline-offset: 2px;
  min-height: 44px;
  padding: 0.3rem 0.4rem;
}
.tab-bar.nav-editing .nav-zone.nav-drop-hover {
  background: var(--accent-soft);
  outline-color: var(--accent);
  outline-width: 2px;
}
.tab-bar.nav-editing #nav-bar-left.nav-drop-hover::after,
.tab-bar.nav-editing #nav-bar-right.nav-drop-hover::after {
  content: "Drop here";
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  pointer-events: none;
  margin: 0 0.25rem;
}
.nav-item.nav-dragging {
  opacity: 0.45;
}
.tab-bar.nav-editing .nav-item,
.tab-bar.nav-editing .menu-nav-zone .nav-item {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.tab-bar.nav-editing .nav-item:active {
  cursor: grabbing;
}
.menu-nav-zone {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 3rem;
  margin-bottom: 0.35rem;
  padding: 0.25rem;
  width: 100%;
}
.menu-customize-btn {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.85rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 650;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: center;
}
.menu-customize-btn:hover,
.menu-customize-btn.active {
  background: var(--accent-soft);
}
.menu-customize-hint {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  margin: 0.25rem 0.5rem 0.5rem;
  line-height: 1.35;
}
#nav-save-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.35rem 0.5rem 0.55rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
#nav-save-form[hidden] {
  display: none !important;
}

/* ---- Admin new role fields ---- */
.new-role-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--bg-elevated);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
}
.new-role-fields[hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  .new-role-fields { grid-template-columns: 1fr; }
}

/* ---- Ticket editor / duplicate warnings ---- */
.dup-warn {
  border-width: 1.5px;
  border-color: rgba(251, 191, 36, 0.55);
}
.dup-list {
  margin: 0.65rem 0 0;
  padding-left: 1.25rem;
  text-align: left;
  color: #fde68a;
}
.dup-override {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0.5rem;
}
.check-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--warn);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
}
.check-inline input {
  width: auto;
  min-height: auto;
  margin: 0.2rem 0 0;
  accent-color: var(--warn);
}
.delete-details {
  text-align: center;
}
.delete-details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}
.delete-details summary::-webkit-details-marker { display: none; }
.delete-form {
  margin-top: 0.65rem;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  min-width: 180px;
}
.delete-form .btn {
  width: 100%;
  margin-top: 0.25rem;
}
.danger-zone {
  border-color: rgba(240, 113, 120, 0.35);
  background: linear-gradient(180deg, rgba(240, 113, 120, 0.06), var(--surface));
}
.danger-zone h2 {
  color: #fca5a5;
}

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