/* Stable application frame for Alpine/HTMX partial navigation. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
}

.online-order-action,
.online-order-secondary {
  display: inline-flex;
  min-height: 2.15rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: .5rem;
  padding: .5rem .8rem;
  font-size: .75rem;
  font-weight: 900;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
}
.online-order-action { color: #fff !important; box-shadow: 0 2px 5px rgba(15,23,42,.18); }
.online-order-action.accept { background: #0369a1 !important; }
.online-order-action.prepare { background: #4338ca !important; }
.online-order-action.ready { background: #6d28d9 !important; }
.online-order-action.dispatch { background: #0e7490 !important; }
.online-order-action.fulfill { background: #0f766e !important; }
.online-order-action.hold-confirm { background: #b45309 !important; }
.online-order-action.cancel-confirm { background: #be123c !important; }
.online-order-secondary.hold { list-style: none; border-color: #fcd34d; background: #fef3c7 !important; color: #92400e !important; }
.online-order-secondary.cancel { list-style: none; border-color: #cbd5e1; background: #e2e8f0 !important; color: #334155 !important; }
.online-order-action:hover { filter: brightness(1.12); }
.online-order-action:disabled { cursor: wait; opacity: .65; }

#app-navigation {
  min-height: 3.5rem;
  contain: layout style;
}

#app-navigation > div {
  width: 100%;
  flex-wrap: nowrap !important;
}

#app-navigation .app-primary-actions {
  min-width: 0;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}

#app-navigation .app-primary-actions::-webkit-scrollbar {
  display: none;
}

#app-navigation .app-primary-actions > * {
  flex: 0 0 auto;
}

#app-navigation .app-account-utilities {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-left: 1rem;
  white-space: nowrap;
}

#app-navigation .app-account-utilities::before {
  content: "|";
  display: inline-block;
  margin-right: .35rem;
  color: rgba(148, 163, 184, .9);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
}

#app-navigation .app-account-utilities .signed-in-identity {
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .24);
}

@media (max-width: 639px) {
  #app-navigation .app-account-utilities {
    margin-left: .35rem;
    gap: .5rem;
  }
}

/* Product help stays with each application; Triple D support is a separate
   company-level destination at the far-right edge of the utility controls. */
#app-navigation .triple-d-support-link {
  align-items: center;
  justify-content: center;
  margin-left: .45rem;
  border: 1px solid #f6c453 !important;
  border-radius: .6rem;
  background: #f4b942 !important;
  padding: .52rem .78rem;
  color: #17212b !important;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .2);
}
#app-navigation .triple-d-support-link:hover {
  border-color: #fde68a !important;
  background: #facc15 !important;
  color: #0f172a !important;
}

/* Installation is a single utility action, kept after every application and
   account control so it cannot be mistaken for an app-specific destination. */
#app-navigation .pwa-install-nav {
  margin-left: 0;
  border: 1px solid rgba(148, 163, 184, .72) !important;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .12) !important;
  padding: .52rem .78rem;
  color: inherit !important;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
#app-navigation .pwa-install-nav:hover { background: rgba(255, 255, 255, .22) !important; }

.app-shell-content {
  min-height: calc(100vh - 3.5rem);
  overflow-anchor: none;
}

.subscription-renewal-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem max(1rem, calc((100vw - 80rem) / 2));
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
  background: #fffbeb;
  box-shadow: 0 5px 16px rgba(120, 53, 15, .08);
}
.subscription-renewal-warning[hidden] { display: none !important; }
.subscription-renewal-warning strong { display: block; font-size: .82rem; }
.subscription-renewal-warning p { margin-top: .12rem; font-size: .72rem; line-height: 1.4; }
.subscription-renewal-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .7rem; font-size: .68rem; font-weight: 800; }
.subscription-renewal-actions a { border-radius: .55rem; padding: .55rem .75rem; color: #fff; background: #92400e; text-decoration: none; white-space: nowrap; }
.subscription-renewal-actions .is-online { color: #047857; }
.subscription-renewal-actions .is-offline { color: #b45309; }
.subscription-renewal-warning.is-expired { border-color: #ef4444; color: #7f1d1d; background: #fef2f2; }
.subscription-renewal-warning.is-expired .subscription-renewal-actions a { background: #b91c1c; }
@media (max-width: 720px) {
  .subscription-renewal-warning { align-items: flex-start; flex-direction: column; }
  .subscription-renewal-actions { width: 100%; justify-content: space-between; }
}

.app-shell-content.htmx-swapping {
  opacity: 1;
}

#app-navigation-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  background: rgba(20, 184, 166, .14);
}

#app-navigation-progress span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: #14b8a6;
  animation: app-navigation-progress 900ms ease-in-out infinite;
  will-change: transform;
}

@keyframes app-navigation-progress {
  from { transform: translate3d(-110%, 0, 0); }
  to { transform: translate3d(300%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #app-navigation-progress span { animation: none; width: 100%; }
}

/* Lumber workspaces use the same wood-and-forest identity as their storefront. */
.lumber-workspace-theme {
  background-color: #173528;
}

.lumber-workspace-theme .lumber-workspace-nav {
  border-color: rgba(250, 204, 21, .28) !important;
  background-color: #332115 !important;
  background-image: linear-gradient(90deg, rgba(25, 13, 7, .5), rgba(82, 49, 25, .2)), url("/static/img/storefront/lumber-nav-wood.webp") !important;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 24px rgba(31, 20, 12, .2);
}

.lumber-workspace-theme .lumber-workspace-nav a,
.lumber-workspace-theme .lumber-workspace-nav button,
.lumber-workspace-theme .lumber-workspace-nav span {
  color: #fffaf0 !important;
}

.lumber-workspace-theme .lumber-workspace-nav a:hover,
.lumber-workspace-theme .lumber-workspace-nav button:hover {
  color: #fef08a !important;
}

.lumber-workspace-theme .lumber-workspace-nav a[href="/pos/"] {
  border: 1px solid rgba(254, 240, 138, .45);
  background: rgba(15, 118, 110, .92) !important;
}

.lumber-workspace-theme .lumber-workspace-nav .signed-in-identity {
  color: #5eead4 !important;
  border: 1px solid rgba(94, 234, 212, .38);
  background: rgba(2, 44, 34, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.lumber-workspace-theme .lumber-workspace-nav .app-primary-actions > a,
.lumber-workspace-theme .lumber-workspace-nav .app-primary-actions > button,
.lumber-workspace-theme .lumber-workspace-nav .app-primary-actions > form > button,
.lumber-workspace-theme .lumber-workspace-nav .app-account-utilities > form > button {
  color: #5eead4 !important;
  border: 1px solid rgba(94, 234, 212, .35);
  border-radius: .5rem;
  background: rgba(2, 44, 34, .58);
  padding: .45rem .7rem;
  line-height: 1.15;
}

.lumber-workspace-theme .lumber-workspace-nav .app-primary-actions > a:hover,
.lumber-workspace-theme .lumber-workspace-nav .app-primary-actions > button:hover,
.lumber-workspace-theme .lumber-workspace-nav .app-primary-actions > form > button:hover,
.lumber-workspace-theme .lumber-workspace-nav .app-account-utilities > form > button:hover {
  color: #ccfbf1 !important;
  background: rgba(13, 148, 136, .72);
}

.lumber-workspace-theme .app-shell-content {
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 4rem;
  background-color: #173528;
  background-image: linear-gradient(rgba(8, 29, 21, .14), rgba(9, 26, 20, .3)), url("/static/img/storefront/lumber-forest-bg.webp");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

.lumber-workspace-theme .app-shell-content > main {
  width: min(calc(100% - 2rem), 96rem);
  margin: 0 auto !important;
  border: 1px solid rgba(221, 230, 224, .72);
  border-radius: .75rem;
  background: rgba(248, 250, 248, .94) !important;
  box-shadow: 0 22px 55px rgba(5, 23, 15, .34);
  backdrop-filter: blur(4px);
}

@media (max-width: 640px) {
  .lumber-workspace-theme .app-shell-content { padding: .5rem 0 2rem; background-attachment: scroll; }
  .lumber-workspace-theme .app-shell-content > main { width: calc(100% - 1rem); border-radius: 1rem; }
}

.pos-checkout-backdrop { background: rgba(2, 6, 23, .78); }
.pos-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; }
.pos-payment-grid { display: grid; grid-template-columns: minmax(0, 1fr) 9.375rem auto; }
@media (max-width: 767px) {
  .pos-checkout-layout, .pos-payment-grid { grid-template-columns: minmax(0, 1fr); }
}

.operations-launcher {
  margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}
.operations-launcher-head { padding: 1rem 1.1rem .8rem; border-bottom: 1px solid #e2e8f0; }
.operations-launcher-head span, .operations-record-heading span { color: #0f766e; font-size: .58rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.operations-launcher-head h2, .operations-record-heading h2 { margin-top: .15rem; font-size: 1.05rem; font-weight: 900; }
.operations-launcher-head p, .operations-record-heading p { margin-top: .2rem; color: #64748b; font-size: .72rem; }
.operations-launcher-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #dbe4e8; }
.operations-launcher-tile { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; min-height: 7.5rem; padding: .9rem; color: #0f172a; background: #fff; text-decoration: none; }
.operations-launcher-tile:hover { position: relative; z-index: 1; background: #f0fdfa; box-shadow: inset 0 0 0 2px #14b8a6; }
.operations-launcher-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .7rem; color: #ccfbf1; background: #0f766e; font-size: 1.15rem; font-weight: 900; }
.operations-launcher-copy { display: grid; min-width: 0; gap: .18rem; }
.operations-launcher-copy small { color: #0f766e; font-size: .52rem; font-style: normal; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.operations-launcher-copy b { font-size: .78rem; }
.operations-launcher-copy em { color: #64748b; font-size: .64rem; font-style: normal; line-height: 1.35; }
.operations-launcher-arrow { color: #0f766e; font-size: 1rem; font-weight: 900; }
.operations-record-heading { margin-top: 1.25rem; padding: 0 .15rem; }
@media (max-width: 1100px) { .operations-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .operations-launcher-grid { grid-template-columns: minmax(0, 1fr); }
  .operations-launcher-tile { min-height: 6.4rem; }
}

/* Navigation destinations are links, not button-shaped controls. Keep the
   account and install actions visually separate after the utility divider. */
#app-navigation .app-primary-actions > a,
#app-navigation .app-primary-actions > div > a {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .25rem .08rem !important;
  text-decoration: none;
}
#app-navigation .app-primary-actions > a:hover,
#app-navigation .app-primary-actions > div > a:hover {
  background: transparent !important;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .28em;
}
#app-navigation .triple-d-support-link {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  padding: .25rem .08rem;
  color: #f6c453 !important;
}
#app-navigation .triple-d-support-link:hover {
  border: 0 !important;
  background: transparent !important;
  color: #fde68a !important;
}