/* Mobile — touch targets, safe areas, readable forms, scrollable panels */

body.nav-scroll-lock {
  overflow: hidden;
  overscroll-behavior: none;
}

.public-body,
.app-body,
.staff-login {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

.pub-header {
  position: sticky;
  padding-top: env(safe-area-inset-top, 0);
}
.pub-header-inner {
  position: relative;
}

.topbar {
  padding-top: max(0.35rem, env(safe-area-inset-top, 0));
}

.pub-footer,
.app-footer {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0));
}

@media (max-width: 768px) {
  /* iOS avoids zoom when inputs are at least 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px;
  }

  #main-content.container,
  .container {
    padding-left: max(0.85rem, env(safe-area-inset-left, 0.85rem));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0.85rem));
  }

  .pub-section {
    padding-left: max(1rem, env(safe-area-inset-left, 1rem));
    padding-right: max(1rem, env(safe-area-inset-right, 1rem));
  }

  /* Touch-friendly controls */
  .pub-nav a,
  .nav a,
  .pub-btn,
  .btn,
  .btn-action,
  .btn-primary,
  .btn-clock-lg,
  .pub-nav-toggle,
  .nav-toggle,
  .pub-brand--menu-toggle,
  .invoice-paid-pill,
  .userbar-logout-btn,
  .mobile-nav-logout-btn {
    min-height: 44px;
  }

  .pub-nav a,
  .nav a {
    display: inline-flex;
    align-items: center;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .pub-nav-toggle,
  .nav-toggle,
  .pub-brand--menu-toggle {
    min-width: 44px;
    justify-content: center;
  }

  .topbar .brand {
    position: relative;
    z-index: 132;
    justify-self: end;
    margin-right: max(0px, env(safe-area-inset-right, 0px));
  }

  .topbar .pub-brand--menu-toggle {
    position: relative;
    align-self: center;
    flex-shrink: 0;
    margin-left: 0;
    z-index: 133;
    overflow: hidden;
  }



  .topbar .pub-brand--menu-toggle .pub-brand-video {
    display: none !important;
  }
  .topbar .pub-brand--menu-toggle .pub-brand-coin-scene {
    display: none !important;
  }
  .topbar .pub-brand--menu-toggle.pub-brand--dark-coin .pub-vips-coin-scene--css {
    display: block !important;
  }
  .topbar .pub-brand--menu-toggle.pub-brand--dark-coin .pub-vips-coin-scene--video {
    display: none !important;
  }
  .topbar .pub-brand--app.pub-brand--dark-coin .pub-vips-coin-scene {
    --vip-coin-size: 2.75rem;
  }
  .topbar .pub-brand--menu-toggle.pub-brand--app-coin .pub-app-menu-coin-video {
    display: block !important;
    visibility: visible;
    opacity: 1;
  }

  html.app-mobile-lite .topbar .pub-vips-coin-scene--video {
    display: none !important;
  }
  .topbar .pub-brand--app.pub-brand--app-coin .pub-app-menu-coin {
    width: 2.75rem;
    height: 2.75rem;
  }

  .topbar .pub-brand--app.pub-brand--video {
    padding: 0.28rem 0.38rem;
  }

  button.pub-brand--app.pub-brand--menu-toggle {
    padding: 0.28rem 0.38rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .topbar .pub-brand--menu-toggle.is-menu-open,
  .topbar .pub-brand--menu-toggle[aria-expanded="true"] {
    padding: 0.24rem;
    background: rgba(61, 174, 233, 0.18);
    box-shadow:
      0 0 0 2px var(--kde-highlight, #7cb87f),
      0 0 20px rgba(61, 174, 233, 0.55);
  }

  .topbar .pub-brand--menu-toggle.is-menu-open .pub-app-menu-coin,
  .topbar .pub-brand--menu-toggle[aria-expanded="true"] .pub-app-menu-coin {
    width: 2.6rem;
    height: 2.6rem;
  }

  .topbar .pub-brand--menu-toggle.is-menu-open .pub-app-menu-coin-video,
  .topbar .pub-brand--menu-toggle[aria-expanded="true"] .pub-app-menu-coin-video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.9),
      0 0 14px rgba(61, 174, 233, 0.7);
  }

  .owner-session .topbar .pub-brand--menu-toggle.is-menu-open,
  .owner-session .topbar .pub-brand--menu-toggle[aria-expanded="true"] {
    background: rgba(246, 197, 67, 0.2);
    box-shadow:
      0 0 0 2px var(--kde-highlight, #f6c543),
      0 0 20px rgba(246, 197, 67, 0.5);
  }

  .owner-session .topbar .pub-brand--menu-toggle.is-menu-open .pub-app-menu-coin-video,
  .owner-session .topbar .pub-brand--menu-toggle[aria-expanded="true"] .pub-app-menu-coin-video {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.9),
      0 0 14px rgba(246, 197, 67, 0.65);
  }

  /* Public mobile nav drawer */
  .pub-nav.pub-open {
    max-height: min(72vh, 24rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .pub-nav a.pub-btn {
    justify-content: center;
    width: 100%;
  }

  /* Employee app nav drawer — full list (see 900px block for layout) */
  .topbar .nav.nav-open {
    gap: 0.15rem;
  }

  .userbar-shell {
    gap: 0.4rem;
    padding: 0.28rem 0.45rem 0.28rem 0.38rem;
  }

  .userbar-name {
    max-width: 6.5rem;
  }

  .userbar-role {
    max-width: 6.5rem;
    font-size: 0.62rem;
  }

  .userbar-logout-label {
    display: none;
  }

  .userbar-settings-btn {
    min-width: var(--kde-widget-size, 2.25rem);
    min-height: var(--kde-widget-size, 2.25rem);
    width: var(--kde-widget-size, 2.25rem);
    height: var(--kde-widget-size, 2.25rem);
  }

  .userbar-logout-btn {
    min-width: var(--kde-widget-size, 2.25rem);
    min-height: var(--kde-widget-size, 2.25rem);
    padding: 0;
    justify-content: center;
    border-radius: 4px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  .userbar-logout-form {
    position: relative;
    z-index: 230;
    flex-shrink: 0;
    pointer-events: auto;
  }

  .userbar-logout-icon,
  .userbar-logout-icon * {
    pointer-events: none;
  }

  .topbar .userbar {
    position: relative;
    z-index: 230;
    overflow: visible;
    pointer-events: auto;
  }

  body.nav-scroll-lock .topbar .userbar,
  body.nav-scroll-lock .topbar .userbar-logout-form {
    z-index: 231;
  }

  .topbar .pub-brand--app .pub-brand-video {
    height: 2.75rem;
    width: 2.75rem;
  }

  /* Tables & wide content */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  .data-table {
    font-size: 0.85rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.55rem 0.5rem;
  }

  /* Quoting — use full viewport height on phones */
  .quote-list {
    max-height: none;
  }

  /* Quoting cards (not contractor jobs — jobs-page overrides below) */
  .quoting-page:not(.jobs-page) .quote-card-bar {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "toggle id totals del"
      "toggle meta meta status";
    gap: 0.45rem 0.5rem;
    padding: 0.65rem 0.75rem;
  }
  .quoting-page--dense .quote-card-bar {
    gap: 0.3rem 0.38rem;
    padding: 0.42rem 0.5rem;
  }
  .quoting-page--dense .quote-card-toggle {
    min-width: 36px;
    min-height: 36px;
  }
  .quoting-page--dense .quote-card-delete .btn {
    min-width: 36px;
    min-height: 36px;
  }

  .quoting-page:not(.jobs-page) .quote-card-toggle {
    grid-area: toggle;
    align-self: center;
    min-width: 44px;
    min-height: 44px;
  }

  .quoting-page:not(.jobs-page) .quote-card-id { grid-area: id; min-width: 0; }
  .quoting-page:not(.jobs-page) .quote-card-meta {
    grid-area: meta;
    white-space: normal;
    min-width: 0;
  }
  .quoting-page:not(.jobs-page) .quote-card-meta .quote-project-preview,
  .quoting-page:not(.jobs-page) .quote-card-meta .quote-client-preview {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .quoting-page:not(.jobs-page) .quote-card-status {
    grid-area: status;
    justify-self: stretch;
  }
  .quoting-page:not(.jobs-page) .quote-card-status .status-select {
    width: 100%;
    max-width: 100%;
  }
  .quoting-page:not(.jobs-page) .quote-card-totals {
    grid-area: totals;
    justify-self: end;
    align-self: center;
  }
  .quoting-page:not(.jobs-page) .quote-card-delete {
    grid-area: del;
    align-self: center;
  }
  .quoting-page:not(.jobs-page) .quote-card-delete .btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Contractor jobs — order builder */
  .jobs-page.quoting-page {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  .jobs-page .quoting-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .jobs-page .quoting-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .jobs-page .quoting-actions form,
  .jobs-page .quoting-actions .btn {
    width: 100%;
  }

  .jobs-page .quoting-actions form button {
    width: 100%;
    min-height: 44px;
  }

  .jobs-page .quote-list {
    max-height: none;
    overflow: visible;
    gap: 1rem;
    padding-bottom: 4.75rem;
  }

  .jobs-page .job-order-card .quote-card-bar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "toggle id total"
      "meta meta meta"
      "status actions actions";
    gap: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    touch-action: manipulation;
  }

  .jobs-page .job-order-card .quote-card-toggle {
    grid-area: toggle;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  .jobs-page .job-order-card .quote-card-id {
    grid-area: id;
    min-width: 0;
  }

  .jobs-page .job-order-card .quote-card-meta {
    grid-area: meta;
    white-space: normal;
  }

  .jobs-page .job-order-card .quote-card-meta .quote-project-preview,
  .jobs-page .job-order-card .quote-card-meta .quote-client-preview {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .jobs-page .job-order-card .quote-card-status {
    grid-area: status;
    justify-self: start;
  }

  .jobs-page .job-order-card .quote-card-total {
    grid-area: total;
    justify-self: end;
    align-self: center;
  }

  .jobs-page .job-order-actions {
    grid-area: actions;
    justify-self: end;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .jobs-page .job-order-actions .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .jobs-page .quote-fields,
  .jobs-page .quote-fields-job,
  .jobs-page .quote-fields-measure {
    grid-template-columns: 1fr;
  }

  .jobs-page .quote-field.span-2,
  .jobs-page .quote-field.span-full {
    grid-column: 1 / -1;
  }

  .jobs-page .quote-field-check {
    align-self: stretch;
    padding-bottom: 0;
  }

  .jobs-page .quote-check-label {
    white-space: normal;
    align-items: flex-start;
  }

  .jobs-page .quoting-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .jobs-page .quoting-toolbar-left,
  .jobs-page .quoting-toolbar-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .jobs-page .quoting-search-wrap {
    max-width: none;
    width: 100%;
  }

  .jobs-page .quoting-toolbar-right .btn {
    width: 100%;
    min-height: 44px;
  }

  .jobs-page .quoting-save-bar {
    margin-left: 0;
    margin-right: 0;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0.85rem));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0.85rem));
  }

  .jobs-page .job-fab-submit-form,
  .jobs-page .prod-ready-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .jobs-page .job-fab-submit-form .btn,
  .jobs-page .prod-ready-form .btn {
    width: 100%;
    min-height: 44px;
  }

  .jobs-page .jobs-sheet-panel .inline-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .jobs-page .jobs-sheet-panel .inline-form label {
    width: 100%;
    margin: 0;
  }

  .jobs-page .jobs-sheet-panel .inline-form input {
    width: 100%;
  }

  .jobs-page .jobs-sheet-panel .inline-form .btn {
    width: 100%;
    min-height: 44px;
  }

  .jobs-page .jobs-sheet-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 7.5rem;
  }

  .jobs-page .jobs-sheet-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .jobs-page .jobs-inline-delete {
    margin: 0;
  }

  /* Dashboard & actions */
  .dash-hours-mobile {
    display: block;
    margin-bottom: 1.25rem;
  }

  .dash-hours-day-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }

  .dash-hours-day-row {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
  }

  .dash-hours-day-main {
    display: grid;
    grid-template-columns: minmax(4.5rem, 1fr) minmax(5.5rem, 1.4fr) auto;
    gap: 0.35rem 0.5rem;
    align-items: baseline;
    font-size: 0.88rem;
  }

  .dash-hours-day-date {
    font-weight: 600;
    color: var(--green-dark);
  }

  .dash-hours-day-times {
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }

  .dash-hours-day-hrs {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--green-dark);
  }

  .dash-hours-day-note {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
  }

  .dash-hours-live-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }

  .dash-hours-live-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--green-dark);
  }

  .dash-hours-live-period {
    margin: 0.35rem 0;
    font-size: 0.88rem;
  }

  .dash-hours-live-link {
    margin: 0.65rem 0 0;
    font-size: 0.85rem;
  }

  .dash-hours-mobile .timeclock-hours-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .dash-hours-mobile .legacy-period h4 {
    font-size: 0.88rem;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }

  /* Employee shift dashboard — off clock vs on clock (phones only) */
  .employee-mobile-shift-dash .dash-desktop-only {
    display: none !important;
  }

  .employee-mobile-shift-dash .dash-mobile-shell {
    display: block;
  }

  .employee-mobile-shift-dash .page-header {
    display: none;
  }

  .employee-mobile-shift-dash .sop-due-banner {
    display: none;
  }

  .mob-dash {
    display: grid;
    gap: 1rem;
    padding-bottom: 1.5rem;
  }

  .mob-dash-hero {
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card);
  }

  .mob-dash-hero--on {
    border-color: rgba(46, 125, 82, 0.45);
    background: linear-gradient(145deg, rgba(30, 70, 48, 0.35), var(--card));
  }

  .mob-dash-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mob-dash-hero--on .mob-dash-kicker {
    color: #7dcea0;
  }

  .mob-dash-title {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.15;
  }

  .mob-dash-lead {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
  }

  .mob-dash-task-alert {
    margin: 0.55rem 0 0;
    font-size: 0.86rem;
    color: #e8c468;
    font-weight: 600;
  }

  .mob-dash-shift-cards {
    display: grid;
    gap: 0.55rem;
  }

  .mob-dash-shift-card {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    display: grid;
    gap: 0.15rem;
  }

  .mob-dash-shift-card--today {
    border-color: rgba(46, 125, 82, 0.4);
  }

  .mob-dash-shift-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .mob-dash-shift-time {
    font-size: 1.05rem;
  }

  .mob-dash-hours-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .mob-dash-hours-item {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    display: grid;
    gap: 0.1rem;
  }

  .mob-dash-hours-num {
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .mob-dash-hours-lbl {
    font-size: 0.78rem;
    color: var(--muted);
  }

  .mob-dash-hours-item--muted .mob-dash-hours-num {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
  }

  .mob-dash-clock-form,
  .mob-dash-clock-out-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    isolation: isolate;
    contain: none;
    pointer-events: auto;
    margin: 0;
    padding:
      0.75rem max(1rem, env(safe-area-inset-right, 1rem))
      max(1rem, env(safe-area-inset-bottom, 1rem))
      max(1rem, env(safe-area-inset-left, 1rem));
    background: var(--card, #1a1a1a);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.48);
  }

  .employee-mobile-shift-dash:has(.mob-dash-clock-out-wrap) .mob-dash,
  .employee-mobile-shift-dash:has(.mob-dash-clock-form) .mob-dash {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  .mob-dash-clock-btn {
    width: 100%;
    min-height: 56px;
    font-size: 1.05rem;
    position: relative;
    z-index: 501;
    touch-action: manipulation;
    pointer-events: auto !important;
  }

  .mob-slab-log {
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    display: grid;
    gap: 0.75rem;
  }

  .mob-slab-log-head h2 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
  }

  .mob-slab-log-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    font-size: 0.82rem;
    margin-top: 0.45rem;
  }

  .mob-slab-log-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.15);
  }

  .mob-slab-tab {
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
  }

  .mob-slab-tab--active {
    background: var(--card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  .mob-slab-hint {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
  }

  .mob-slab-form {
    display: grid;
    gap: 0.55rem;
  }

  .mob-slab-form label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.82rem;
    font-weight: 600;
  }

  .mob-slab-form input,
  .mob-slab-form select,
  .mob-slab-form textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 400;
  }

  .mob-slab-ownership {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: grid;
    gap: 0.45rem;
  }

  .mob-slab-ownership legend {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0 0.2rem;
  }

  .mob-slab-radio {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-weight: 500;
  }

  .mob-slab-radio input {
    margin-top: 0.2rem;
    width: auto;
  }

  .mob-slab-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 0.25rem;
  }

  .mob-slab-recent {
    font-size: 0.85rem;
  }

  .mob-slab-recent-list {
    list-style: none;
    margin: 0.25rem 0 0.65rem;
    padding: 0;
    display: grid;
    gap: 0.35rem;
  }

  .mob-slab-recent-list li {
    display: grid;
    gap: 0.1rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .mob-slab-recent-label {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .mob-dash-foot {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    text-align: center;
  }

  .mob-dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.55rem;
    font-size: 1rem;
  }

  .mob-dash-section-head h2 {
    margin: 0;
    font-size: 1rem;
  }

  .mob-dash-open-work-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }

  .mob-dash-open-work-link {
    display: grid;
    gap: 0.1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    text-decoration: none;
    color: inherit;
  }

  .mob-dash-open-work-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mob-dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .mob-dash-quick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    text-decoration: none;
    color: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
  }

  .action-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .schedule-week {
    grid-template-columns: repeat(7, minmax(108px, 1fr));
    scroll-snap-type: x proximity;
  }

  .schedule-week-14 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 0.55rem;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .schedule-fortnight {
    gap: 0.55rem;
  }

  .schedule-week-row {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .schedule-week-row--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .schedule-week-row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .schedule-day {
    scroll-snap-align: start;
  }

  .schedule-week-14 .schedule-day,
  .schedule-fortnight .schedule-day {
    scroll-snap-align: none;
    min-height: 118px;
  }

  /* VIP — login card first on small screens (already ordered; tighten spacing) */
  .pub-vips-hero {
    min-height: 240px;
  }

  .pub-vips-hero .pub-hero-overlay,
  .pub-vips-hero-overlay {
    min-height: 240px;
  }

  .pub-vips-hero-inner {
    padding: 0.5rem 1rem 1.5rem;
  }

  .pub-vips-login-card {
    padding: 1.35rem 1.15rem;
  }

  .pub-vips-coin-scene {
    --vip-coin-size: clamp(5.5rem, 42vw, 7.5rem);
  }

  /* Employee / VIP login cards */
  .staff-login-main {
    padding: 1.25rem max(0.85rem, env(safe-area-inset-right, 0.85rem));
  }

  .staff-login-card {
    width: 100%;
    padding: 1.5rem 1.15rem;
  }

  .login-brand-wrap .pub-brand--card .pub-brand-video {
    height: clamp(5.5rem, 38vw, 7rem);
    width: clamp(5.5rem, 38vw, 7rem);
  }

  .users-admin-manage-panel {
    min-width: 0;
    width: min(280px, 88vw);
  }

  .quotes-registry-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .quotes-registry-toolbar .quotes-filter-count {
    margin-left: 0;
  }

  .quotes-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeclock-on-duty-item {
    flex-direction: column;
    align-items: stretch;
  }

  .timeclock-force-out-form {
    flex-direction: column;
    align-items: stretch;
  }

  .timeclock-force-out-form input[type="text"],
  .timeclock-force-out-form input[type="datetime-local"] {
    width: 100%;
    min-width: 0;
  }

  .timeclock-adjust-form {
    min-width: 0;
    width: min(280px, 92vw);
  }

  .users-admin-actions-cell .inline-form {
    display: block;
    margin-top: 0.5rem;
  }

  /* Contract signing */
  .contract-doc {
    padding: 1.25rem 1.1rem;
  }

  .contract-execution-panel {
    padding: 1.15rem 1rem 1.25rem;
  }

  .contract-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  /* Toasts below sticky headers */
  .flash-toast {
    padding-left: max(1rem, env(safe-area-inset-left, 1rem));
    padding-right: max(1rem, env(safe-area-inset-right, 1rem));
  }

  .app-body .flash-toast {
    top: var(--app-header-offset);
  }

  /* Time clock — punch card scrolls with page (no sticky; avoids clipping under search row) */
  .timeclock-clock-bar--hero {
    position: relative;
    z-index: 1;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding: 1rem 1rem 1.1rem;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-margin-top: var(--app-header-offset);
  }

  .timeclock-clock-bar--hero .timeclock-actions {
    width: 100%;
  }

  .timeclock-clock-bar--hero .timeclock-form {
    width: 100%;
    max-width: none;
  }

  .timeclock-clock-bar--hero .timeclock-status {
    padding: 0.35rem 0 0;
    text-align: center;
  }

  .timeclock-clock-bar--hero .timeclock-badge {
    font-size: 0.78rem;
  }

  .timeclock-clock-bar--hero .timeclock-since {
    font-size: 0.95rem;
  }

  .shop-install-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 1rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(168, 230, 58, 0.35);
    background: rgba(46, 125, 50, 0.12);
  }

  .shop-install-banner[hidden] {
    display: none !important;
  }

  .shop-install-banner-body {
    flex: 1;
    min-width: 0;
  }

  .shop-install-banner-title {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
  }

  .shop-install-banner-copy,
  .shop-install-banner-steps {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .shop-install-banner-steps {
    margin-top: 0.45rem;
    padding-left: 1.1rem;
  }

  .shop-install-banner-dismiss {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }

  .timeclock-status {
    padding: 1.5rem 1rem;
  }

  .btn-clock-lg {
    min-height: 58px;
    font-size: 1.28rem;
    padding: 1.15rem 1.5rem;
    border-radius: 14px;
  }

  .btn-clock-in {
    box-shadow: 0 6px 22px rgba(46, 125, 50, 0.5);
  }

  .btn-clock-out {
    box-shadow: 0 6px 22px rgba(198, 40, 40, 0.45);
  }

  /* Footer stacks on narrow screens */
  .pub-footer-grid {
    gap: 1.25rem;
  }

  /* Job pipeline */
  .pipeline-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .pipeline-toolbar .search-label {
    max-width: none;
    width: 100%;
  }

  .pipeline-process-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .pipeline-process-step {
    flex: 0 0 auto;
    min-width: 4.75rem;
  }
  .pipeline-process-label {
    font-size: 0.62rem;
  }
  .pipeline-stats {
    gap: 0.4rem;
  }

  .pipeline-stat {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }

  .pipeline-table .btn-sm {
    min-height: 44px;
    white-space: nowrap;
  }

  .dash-pipeline-stages {
    gap: 0.4rem;
  }

  .dash-pipeline-chip {
    min-height: 44px;
    flex: 1 1 calc(33.333% - 0.35rem);
    min-width: 5.5rem;
  }

  .graphic-hours-grid {
    grid-template-columns: 1fr;
  }

  .digitize-manager-assign {
    flex-direction: column;
    align-items: stretch;
  }

  .digitize-manager-assign label,
  .digitize-manager-assign .btn {
    width: 100%;
  }

  /* Team announcement & owner welcome popups */
  .announce-modal {
    padding:
      max(0.65rem, env(safe-area-inset-top, 0.65rem))
      max(0.65rem, env(safe-area-inset-right, 0.65rem))
      max(0.65rem, env(safe-area-inset-bottom, 0.65rem))
      max(0.65rem, env(safe-area-inset-left, 0.65rem));
    align-items: flex-end;
  }

  .announce-modal-panel {
    width: 100%;
    max-height: min(88vh, 36rem);
    padding: 1.1rem 1rem 1rem;
  }

  .announce-modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  .announce-modal-ok {
    width: 100%;
    min-height: 48px;
  }

  .announce-modal-title {
    font-size: 1.15rem;
    padding-right: 0.25rem;
  }

  /* Quoting — actions bar, attachments */
  .quoting-actions-bar {
    justify-content: stretch;
  }

  .quoting-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .quoting-actions form,
  .quoting-actions .btn {
    width: 100%;
  }

  .quoting-actions form button {
    width: 100%;
    min-height: 44px;
  }

  .quoting-page:not(.jobs-page) .quote-fields,
  .quoting-page:not(.jobs-page) .quote-fields-job,
  .quoting-page:not(.jobs-page) .quote-fields-measure,
  .quoting-page:not(.jobs-page) .quote-fields-addons {
    grid-template-columns: 1fr;
  }

  .quoting-page:not(.jobs-page) .quote-field.span-2,
  .quoting-page:not(.jobs-page) .quote-field.span-full,
  .quoting-page:not(.jobs-page) .quote-field-ripout {
    grid-column: 1 / -1;
  }

  .quoting-page:not(.jobs-page) .quote-sections-mid {
    grid-template-columns: 1fr;
  }

  .quoting-page:not(.jobs-page) .sink-line {
    flex-direction: column;
    align-items: stretch;
  }

  .quoting-page:not(.jobs-page) .sink-remove {
    align-self: flex-end;
    min-height: 44px;
    min-width: 44px;
  }

  .quoting-toolbar-right {
    width: 100%;
  }

  .quoting-toolbar-right .btn {
    flex: 1;
    min-height: 44px;
  }

  .quoting-page:not(.jobs-page) .quote-list {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 5rem;
    gap: 0.5rem;
  }

  .quoting-page:not(.jobs-page) .quoting-lead {
    display: none;
  }

  .quoting-page:not(.jobs-page) .quote-section {
    padding: 0.32rem 0.48rem 0.38rem;
  }

  .quoting-page:not(.jobs-page) .quote-section-title {
    margin-bottom: 0.3rem;
  }

  .quoting-page:not(.jobs-page) .quote-section-title--sub {
    margin-top: 0.4rem;
  }

  .quoting-page:not(.jobs-page) .sink-hint {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .quoting-page:not(.jobs-page) .quote-file-empty {
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
  }

  .quoting-page:not(.jobs-page) .quote-file-item {
    padding: 0.3rem 0.45rem;
  }

  .quoting-page:not(.jobs-page) .quote-totals-panel {
    max-width: none;
    margin-left: 0;
  }

  .quoting-page:not(.jobs-page) .quoting-save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 130;
  }

  .quoting-page:not(.jobs-page) .quoting-submit-dock-btn {
    display: flex;
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
  }

  .quoting-page:not(.jobs-page) .quote-submit-form .btn-primary[type="submit"] {
    display: none;
  }

  .quote-upload-form,
  .digitize-upload-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .quote-upload-form input[type="file"],
  .digitize-upload-form input[type="file"] {
    width: 100%;
    max-width: 100%;
  }

  .quote-file-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .quote-file-delete {
    margin-left: 0;
    align-self: flex-end;
  }

  /* Work shifts — single column on phones */
  .work-shift-banner,
  .work-shift-employee-hub,
  .work-shift-manage {
    padding: 1rem 0.9rem;
  }

  .work-shift-banner-head,
  .work-shift-manage-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .work-shift-banner-grid {
    grid-template-columns: 1fr;
  }

  .work-shift-assign-form {
    grid-template-columns: 1fr;
  }

  .work-shift-assign-form .btn-primary {
    width: 100%;
    min-height: 44px;
  }

  .work-shift-upcoming-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  /* Notification panel — stay on screen */
  .notif-panel {
    width: min(320px, calc(100vw - 1.5rem));
    max-height: min(50vh, 22rem);
    -webkit-overflow-scrolling: touch;
  }

  .notif-bell {
    min-width: 44px;
    min-height: 44px;
  }

  .online-panel {
    width: min(300px, calc(100vw - 1.5rem));
    max-height: min(50vh, 22rem);
    -webkit-overflow-scrolling: touch;
  }

  .userbar-online-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .userbar {
    max-width: calc(100vw - 3.6rem);
  }

  .userbar-shell {
    max-width: 100%;
    min-width: 0;
  }

  /* ── Performance: shop app on phones (public homepage unchanged) ── */
  html.app-mobile-lite .app-body,
  html.app-mobile-lite .staff-login--dark {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-attachment: scroll;
    touch-action: manipulation;
    --stone-pattern: none;
  }

  html.app-mobile-lite .site-tab-strip {
    display: none !important;
  }

  html.app-mobile-lite .app-body--dark .topbar,
  html.app-mobile-lite .staff-login--dark .pub-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.mobile-nav-open .app-body--dark .topbar,
  body.nav-scroll-lock .app-body--dark .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .app-body--dark > #main-content {
    contain: layout style;
  }

  /* Defer paint for off-screen sections (skip parents of sticky bars) */
  #main-content > section:not(.timeclock-clock-bar--hero),
  #main-content > aside,
  .dash-hours-mobile,
  .mob-dash,
  .timeclock-hours-hub,
  .timeclock-tasks,
  .timeclock-sop-checklist,
  .timeclock-team,
  .dash-schedule,
  .dash-tasks,
  .dash-task-list,
  .dash-open-work,
  .pipeline-toolbar + .table-wrap,
  .quote-card,
  .digitize-list .digitize-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
  }

  html.app-mobile-lite .data-table td,
  html.app-mobile-lite .data-table th {
    contain: layout style;
  }

  .shop-app-atmosphere__canvas,
  .vip-smoke-canvas {
    display: none;
  }

  .shop-app-atmosphere__glow,
  .shop-app-atmosphere__marble {
    animation: none !important;
  }

  .shop-app-atmosphere__marble {
    display: none;
  }

  .shop-app-atmosphere__veil,
  .vip-smoke-veil {
    mix-blend-mode: normal;
    opacity: 0.85;
  }

  .shop-app-atmosphere__canvas,
  .vip-smoke-canvas {
    filter: none;
  }

  .site-tab-strip-glow {
    animation: none;
  }

  .site-tab-strip.is-dismissed {
    display: none;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hover-lift {
    transition: none;
  }

  .hover-lift:hover {
    transform: none;
    box-shadow: none;
  }

  .table-wrap {
    contain: content;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
  }

  .app-footer {
    background-image: none;
  }

}

/* Shop app + VIP perf-lite — all viewports (public marketing site unchanged) */
html.app-mobile-lite {
  background-color: #000;
  color-scheme: dark;
}

html.app-mobile-lite:has(.app-body--dark),
html.app-mobile-lite:has(body.staff-login--dark) {
  background-color: #000;
}

html.app-mobile-lite .app-body,
html.app-mobile-lite .staff-login--dark {
  --stone-pattern: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-attachment: scroll;
}

html.app-mobile-lite body.app-body.app-body--dark,
html.app-mobile-lite body.staff-login.staff-login--dark {
  --bg: #000;
  background-color: #000 !important;
  background-image: none !important;
}

html.app-mobile-lite .staff-login--dark .staff-login-main {
  background: transparent !important;
}

/* Static atmosphere backdrop (effects.css no longer loaded in perf-lite) */
html.app-mobile-lite .shop-app-atmosphere,
html.app-mobile-lite .vip-smoke {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

html.app-mobile-lite .shop-app-atmosphere--scoped,
html.app-mobile-lite .staff-login-main .shop-app-atmosphere,
html.app-mobile-lite .vip-login-main .shop-app-atmosphere,
html.app-mobile-lite .vip-login-main .vip-smoke {
  position: absolute;
}

html.app-mobile-lite .shop-app-atmosphere__base {
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image: linear-gradient(180deg, #050807 0%, #000 42%, #020302 100%);
}

html.app-mobile-lite .vip-smoke {
  background-color: #000;
}

html.app-mobile-lite .site-tab-strip {
  display: none !important;
}

html.app-mobile-lite .app-body--dark .topbar,
html.app-mobile-lite .staff-login--dark .pub-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.app-mobile-lite .shop-app-atmosphere__glow,
html.app-mobile-lite .shop-app-atmosphere__canvas,
html.app-mobile-lite .shop-app-atmosphere__veil,
html.app-mobile-lite .shop-app-atmosphere__marble,
html.app-mobile-lite .shop-app-atmosphere__vignette,
html.app-mobile-lite .vip-smoke-canvas,
html.app-mobile-lite .vip-smoke-veil {
  display: none !important;
}

/* Shop app + VIP — pure black theme (matches login dark shell) */
html.app-mobile-lite .app-body--dark {
  --bg: #000;
  --card: #121212;
  --text: #f0ece6;
  --muted: rgba(200, 196, 188, 0.72);
  --border: rgba(168, 230, 58, 0.2);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  --stone-pattern: none !important;
  --kde-panel-bg: #0a0a0a;
  --kde-panel-top-line: rgba(255, 255, 255, 0.06);
  --kde-panel-bottom-line: rgba(255, 255, 255, 0.08);
  --kde-highlight: #a8e63a;
  --kde-highlight-bg: rgba(168, 230, 58, 0.16);
  --kde-text: #f0ece6;
  --kde-muted: rgba(200, 196, 188, 0.72);
  --kde-widget-hover: rgba(255, 255, 255, 0.06);
  background-color: #000;
  background-image: none;
}

html.app-mobile-lite .app-body--dark .topbar {
  background: #0a0a0a;
  border-top-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

html.app-mobile-lite .app-body--dark > #main-content,
html.app-mobile-lite .app-body--dark #main-content,
html.app-mobile-lite .app-body--dark > .app-footer {
  background-color: #000;
}

html.app-mobile-lite .app-body--dark .stat,
html.app-mobile-lite .app-body--dark .table-wrap,
html.app-mobile-lite .app-body--dark .dash-schedule,
html.app-mobile-lite .app-body--dark .dash-my-work,
html.app-mobile-lite .app-body--dark .dash-my-work-link,
html.app-mobile-lite .app-body--dark .pipeline-process,
html.app-mobile-lite .app-body--dark .pipeline-page--dense .pipeline-toolbar,
html.app-mobile-lite .app-body--dark .pipeline-stat {
  background-color: var(--card);
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08);
}
html.app-mobile-lite .app-body--dark .pipeline-process-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1);
  background-image: none !important;
}
html.app-mobile-lite .app-body--dark .pipeline-process-btn:hover {
  background: rgba(168, 230, 58, 0.1) !important;
  border-color: rgba(168, 230, 58, 0.3);
}
html.app-mobile-lite .app-body--dark .pipeline-process-btn[aria-pressed="true"] {
  background: rgba(168, 230, 58, 0.16) !important;
  border-color: #a8e63a;
}
html.app-mobile-lite .app-body--dark .pipeline-kanban-col,
html.app-mobile-lite .app-body--dark .pipeline-kanban-card,
html.app-mobile-lite .app-body--dark .dash-pipeline,
html.app-mobile-lite .app-body--dark .dash-open-work-item,
html.app-mobile-lite .app-body--dark .dash-task-card,
html.app-mobile-lite .app-body--dark .dash-hours-mobile,
html.app-mobile-lite .app-body--dark .dash-hours-day-row,
html.app-mobile-lite .app-body--dark .quote-card,
html.app-mobile-lite .app-body--dark .quotes-stat,
html.app-mobile-lite .app-body--dark .quotes-group,
html.app-mobile-lite .app-body--dark .timeclock-dash,
html.app-mobile-lite .app-body--dark .timeclock-tasks,
html.app-mobile-lite .app-body--dark .timeclock-task-card,
html.app-mobile-lite .app-body--dark .timeclock-task-report,
html.app-mobile-lite .app-body--dark .timeclock-hours-hub,
html.app-mobile-lite .app-body--dark .timeclock-hours-stat,
html.app-mobile-lite .app-body--dark .timeclock-clock-bar,
html.app-mobile-lite .app-body--dark .timeclock-hours-panel,
html.app-mobile-lite .app-body--dark .work-shift-banner,
html.app-mobile-lite .app-body--dark .work-shift-card,
html.app-mobile-lite .app-body--dark .schedule-day,
html.app-mobile-lite .app-body--dark .mob-dash-hero,
html.app-mobile-lite .app-body--dark .mob-dash-shift-card,
html.app-mobile-lite .app-body--dark .mob-dash-hours-item,
html.app-mobile-lite .app-body--dark .mob-dash-open-work-link,
html.app-mobile-lite .app-body--dark .mob-dash-quick-link,
html.app-mobile-lite .app-body--dark .mob-slab-log,
html.app-mobile-lite .app-body--dark .mob-slab-recent-list li,
html.app-mobile-lite .app-body--dark .mob-slab-tab--active,
html.app-mobile-lite .app-body--dark .sop-due-banner,
html.app-mobile-lite .app-body--dark .dash-ops-alerts,
html.app-mobile-lite .app-body--dark .summary-period,
html.app-mobile-lite .app-body--dark .summary-dept-card,
html.app-mobile-lite .app-body--dark .prod-card,
html.app-mobile-lite .app-body--dark .client-rate-card,
html.app-mobile-lite .app-body--dark .client-job-card,
html.app-mobile-lite .app-body--dark .client-tools-promo-card,
html.app-mobile-lite .app-body--dark .client-stat-card,
html.app-mobile-lite .app-body--dark .client-profile-banner,
html.app-mobile-lite .app-body--dark .client-history-item,
html.app-mobile-lite .app-body--dark .client-new-order-card,
html.app-mobile-lite .app-body--dark .client-pipeline-stat,
html.app-mobile-lite .app-body--dark .client-pipeline-preview-chip,
html.app-mobile-lite .app-body--dark .client-sink-promo,
html.app-mobile-lite .app-body--dark .client-sink-catalog-details,
html.app-mobile-lite .app-body--dark .client-export-card,
html.app-mobile-lite .app-body--dark .client-invoice-tab,
html.app-mobile-lite .app-body--dark .client-calendar-sync-card,
html.app-mobile-lite .app-body--dark .client-submission-card,
html.app-mobile-lite .app-body--dark .client-pending-card,
html.app-mobile-lite .app-body--dark .client-tools-nav,
html.app-mobile-lite .app-body--dark .vip-sink-order-builder {
  background-color: var(--card);
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08);
}

html.app-mobile-lite .app-body--dark .timeclock-dash-in,
html.app-mobile-lite .app-body--dark .mob-dash-hero--on,
html.app-mobile-lite .app-body--dark .mob-dash-shift-card--today,
html.app-mobile-lite .app-body--dark .work-shift-card--today {
  background: linear-gradient(145deg, #141a14, var(--card));
  border-color: rgba(168, 230, 58, 0.28);
}

html.app-mobile-lite .app-body--dark .timeclock-hours-stat--active {
  background: rgba(46, 125, 50, 0.14);
  border-color: rgba(129, 199, 132, 0.35);
}

html.app-mobile-lite .app-body--dark .work-shift-card--next {
  background: rgba(21, 101, 192, 0.1);
  border-color: rgba(100, 181, 246, 0.28);
}

html.app-mobile-lite .app-body--dark .timeclock-dash-payroll {
  background: rgba(126, 87, 194, 0.1);
  border-left-color: #7e57c2;
}

html.app-mobile-lite .app-body--dark .schedule-day-today {
  background: rgba(45, 62, 54, 0.55);
  border-color: var(--green);
}

html.app-mobile-lite .app-body--dark .schedule-day-payday {
  background: rgba(45, 90, 74, 0.52);
  border-color: rgba(124, 184, 127, 0.72);
}

html.app-mobile-lite .app-body--dark .client-stat-card--balance {
  background: rgba(120, 80, 20, 0.18);
  border-color: rgba(255, 183, 77, 0.35);
}

html.app-mobile-lite .app-body--dark .client-profile-banner {
  border-color: rgba(168, 230, 58, 0.28);
}

html.app-mobile-lite .app-body--dark .dash-pipeline-chip {
  background: rgba(255, 255, 255, 0.04);
}

html.app-mobile-lite .app-body--dark .mob-slab-log-tabs {
  background: rgba(255, 255, 255, 0.06);
}

html.app-mobile-lite .app-body--dark .timeclock-task-card--await {
  border-color: rgba(239, 154, 154, 0.45);
}

html.app-mobile-lite .app-body--dark .timeclock-task-card--active {
  border-color: rgba(100, 181, 246, 0.4);
}

html.app-mobile-lite .app-body--dark .app-footer {
  background: #000;
  border-top-color: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

html.app-mobile-lite .app-body--dark .notif-panel,
html.app-mobile-lite .app-body--dark .online-panel {
  background: #121212;
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
  html.app-mobile-lite body.app-body--dark.mobile-nav-open #main-nav.nav-open,
  html.app-mobile-lite .app-body--dark .topbar--menu-open .nav.nav-open {
    background: #0a0a0a;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

html.app-mobile-lite .app-body .flash,
html.app-mobile-lite .app-body .app-footer,
html.app-mobile-lite .app-body .quote-card,
html.app-mobile-lite .app-body .quote-section,
html.app-mobile-lite .app-body .timeclock-card,
html.app-mobile-lite .app-body .client-rate-card,
html.app-mobile-lite .app-body .client-stat-card,
html.app-mobile-lite .app-body .client-profile-banner,
html.app-mobile-lite .app-body .client-job-card,
html.app-mobile-lite .app-body .client-tools-promo-card,
html.app-mobile-lite .app-body .client-sink-promo,
html.app-mobile-lite .app-body .client-export-card,
html.app-mobile-lite .staff-login-card {
  background-image: none !important;
}

html.app-mobile-lite .app-body *,
html.app-mobile-lite .app-body *::before,
html.app-mobile-lite .app-body *::after,
html.app-mobile-lite .staff-login--dark *,
html.app-mobile-lite .staff-login--dark *::before,
html.app-mobile-lite .staff-login--dark *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html.app-mobile-lite .pub-brand-video,
html.app-mobile-lite .pub-brand-coin-scene,
html.app-mobile-lite .pub-vips-coin-scene,
html.app-mobile-lite .pub-app-menu-coin-video {
  display: none !important;
}

html.app-mobile-lite .pub-brand--card .pub-brand-wordmark {
  display: none;
}

@media (max-width: 768px) {
  html.app-mobile-lite .employee-mobile-shift-dash .dash-mobile-shell {
    display: block !important;
  }
}

@media (min-width: 769px) {
  .employee-mobile-shift-dash .dash-mobile-shell {
    display: none !important;
  }
}

html.app-mobile-lite .pub-brand--card .pub-brand-logo {
  display: block !important;
}

html.app-mobile-lite .topbar .pub-app-menu-coin-video {
  display: block !important;
}

@media (max-width: 520px) {
  .jobs-page .jobs-sheet-panel .data-table th:nth-child(3),
  .jobs-page .jobs-sheet-panel .data-table td:nth-child(3),
  .jobs-page .jobs-sheet-panel .data-table th:nth-child(4),
  .jobs-page .jobs-sheet-panel .data-table td:nth-child(4) {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Dim page content only — keep topbar + menu drawer crisp */
  body.nav-scroll-lock::before {
    content: "";
    position: fixed;
    top: var(--app-topbar-offset);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 118;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
  }

  body.nav-scroll-lock .topbar {
    z-index: 222;
    overflow: visible;
  }

  body.nav-scroll-lock .topbar .brand,
  body.nav-scroll-lock .topbar .userbar {
    position: relative;
    z-index: 223;
  }

  /* Drawer is portaled to <body> on phones — avoids topbar backdrop-filter clipping */
  body.mobile-nav-open #main-nav.nav-open,
  .topbar--menu-open .nav.nav-open {
    display: flex !important;
    position: fixed;
    top: var(--app-topbar-offset);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: none;
    height: auto;
    min-height: calc(100dvh - var(--app-topbar-offset));
    min-height: calc(100vh - var(--app-topbar-offset));
    margin: 0;
    padding:
      0.5rem
      max(0.75rem, env(safe-area-inset-right, 0.75rem))
      max(1.25rem, env(safe-area-inset-bottom, 1.25rem))
      max(0.75rem, env(safe-area-inset-left, 0.75rem));
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 221;
    background: #0a0a0a;
    color: var(--kde-text, #f0ece6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: auto;
  }

  body.mobile-nav-open #main-nav.nav-open a,
  .topbar--menu-open .nav.nav-open a {
    color: var(--kde-text, #eff0f1);
  }

  body.mobile-nav-open #main-nav.nav-open .mobile-nav-head,
  .topbar .nav.nav-open .mobile-nav-head {
    display: block;
    padding: 0.65rem 0.5rem 0.85rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(239, 240, 241, 0.12);
  }

  .mobile-nav-user {
    display: grid;
    gap: 0.1rem;
    margin-bottom: 0.55rem;
  }

  .mobile-nav-user-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--kde-text, #eff0f1);
  }

  .mobile-nav-user-role {
    font-size: 0.78rem;
    color: var(--kde-muted, rgba(189, 195, 199, 0.92));
  }

  .mobile-nav-clock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin: 0;
  }

  .mobile-nav-clock-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--kde-muted, #bdc3c7);
  }

  .mobile-nav-clock-badge--on {
    background: rgba(46, 125, 50, 0.28);
    color: #a5d6a7;
  }

  .mobile-nav-clock-badge--payroll {
    background: rgba(126, 87, 194, 0.22);
    color: #ce93d8;
  }

  .mobile-nav-clock-meta {
    font-size: 0.82rem;
    color: var(--kde-muted, rgba(189, 195, 199, 0.92));
  }

  body.mobile-nav-open #main-nav.nav-open .mobile-nav-section-label,
  .topbar .nav.nav-open .mobile-nav-section-label {
    display: block;
    padding: 0.35rem 0.5rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kde-muted, rgba(189, 195, 199, 0.75));
  }

  body.mobile-nav-open #main-nav.nav-open a,
  .topbar .nav.nav-open a {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }

  body.mobile-nav-open #main-nav.nav-open a.nav-link,
  .topbar .nav.nav-open a.nav-link {
    display: flex;
    justify-content: space-between;
    padding: 0.62rem 0.65rem;
    font-size: 0.95rem;
  }

  body.mobile-nav-open #main-nav.nav-open a.nav-link--time,
  .topbar .nav.nav-open a.nav-link--time {
    background: rgba(61, 174, 233, 0.14);
    box-shadow: inset 3px 0 0 var(--kde-highlight, #7cb87f);
    font-weight: 600;
  }

  body.mobile-nav-open #main-nav.nav-open a.nav-link--time.active,
  .topbar .nav.nav-open a.nav-link--time.active {
    background: var(--kde-highlight-bg, rgba(90, 143, 92, 0.28));
  }

  body.mobile-nav-open #main-nav.nav-open .nav-link-meta,
  .topbar .nav.nav-open .nav-link-meta {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.42rem;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(46, 125, 50, 0.22);
    color: #a5d6a7;
  }

  body.mobile-nav-open #main-nav.nav-open a.nav-website,
  .topbar .nav.nav-open a.nav-website {
    border-right: none;
    margin-right: 0;
    padding-right: 0.65rem;
    opacity: 1;
    color: var(--kde-muted, rgba(189, 195, 199, 0.92));
  }

  /* Dropdown panels — anchor to viewport, not left-edge userbar */
  .notif-panel:not([hidden]),
  .online-panel:not([hidden]),
  .account-panel:not([hidden]) {
    position: fixed;
    top: var(--app-topbar-offset);
    left: max(0.75rem, env(safe-area-inset-left, 0.75rem));
    right: max(0.75rem, env(safe-area-inset-right, 0.75rem));
    width: auto;
    max-height: min(55vh, 24rem);
    z-index: 200;
  }
}

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

  .userbar-name {
    max-width: 4.5rem;
  }

  .userbar-role {
    display: none;
  }

  .userbar-identity {
    display: none;
  }

  .pub-hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.5rem);
  }

  .dispatch-board {
    grid-template-columns: 1fr;
  }
}