/* Theme tokens */

html {
  font-size: 17px;
}

@media (max-width: 640px) {
  html {
    font-size: 16px;
  }
}

:root {
  color-scheme: light;
  --app-brand: rgb(62, 134, 125);
  --app-brand-strong: rgb(47, 108, 101);
  --brand-primary: var(--app-brand);
  --app-brand-border: rgba(28, 41, 44, 0.08);
  --app-brand-border-strong: rgba(28, 41, 44, 0.12);
  --app-brand-border-active: rgba(62, 134, 125, 0.32);
  --app-brand-soft: rgba(62, 134, 125, 0.08);
  --app-brand-soft-hover: rgba(62, 134, 125, 0.14);
  --app-surface: #fff;
  --app-surface-muted: #f6f8f8;
  --app-surface-strong: #e4e9e9;
  --app-text: #1c292c;
  --app-danger: #b45309;
  --app-danger-strong: #92400e;
  --app-shadow-panel: 0 1px 4px rgba(28, 41, 44, 0.03);
  --app-shadow-nav: 0 1px 6px rgba(28, 41, 44, 0.03);
  --app-shadow-dropdown: 0 10px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] {
  --color-primary: var(--app-brand);
  --color-primary-content: #fff;
  --color-secondary: #58666d;
  --color-secondary-content: #fff;
  --color-accent: #eef6f5;
  --color-accent-content: var(--app-text);
  --color-neutral: #f2f5f5;
  --color-neutral-content: var(--app-text);
  --color-base-100: var(--app-surface);
  --color-base-200: var(--app-surface-muted);
  --color-base-300: var(--app-surface-strong);
  --color-base-content: var(--app-text);
}

html,
body {
  background: var(--app-surface);
  color: var(--color-base-content);
}

body.app-nav-open {
  overflow: hidden;
}

/* App shell */

.app-shell {
  max-width: 1200px;
}

label.text-xs {
  font-size: 1rem;
}

.panel {
  background: color-mix(in oklab, var(--color-base-200) 86%, var(--color-base-300));
  border-color: var(--color-base-300);
  color: var(--color-base-content);
  box-shadow: var(--app-shadow-panel);
}

.field {
  background: var(--color-base-100);
  border-color: var(--app-brand-border);
  color: var(--color-base-content);
}

input.field,
select.field,
textarea.field {
  border: 1px solid var(--app-brand-border);
  background: var(--color-base-100);
  color: var(--color-base-content);
  border-radius: 0.75rem;
}

input.field:focus,
select.field:focus,
textarea.field:focus {
  border-color: var(--app-brand-border-active);
  outline: none;
}

input[type="checkbox"] {
  --chkbg: 255 255 255 !important;
  --chkfg: 62 134 125 !important;
  background-color: #fff !important;
}

input[type="checkbox"]:checked {
  --chkbg: 255 255 255 !important;
  --chkfg: 62 134 125 !important;
  background-color: #fff !important;
}

select.field {
  background: color-mix(in oklab, var(--color-base-100) 88%, var(--color-base-200));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.field option {
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.field::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

/* Utility bridges */

.bg-base-200,
.bg-slate-50,
.bg-slate-100 {
  background: var(--color-base-200);
}

.bg-base-100,
.bg-slate-900,
.bg-slate-950 {
  background: var(--color-base-100);
}

.bg-slate-900\/10,
.bg-slate-900\/20,
.bg-slate-900\/30,
.bg-slate-900\/40,
.bg-slate-900\/60,
.bg-slate-950\/30,
.bg-slate-950\/40,
.bg-slate-950\/50,
.bg-slate-950\/60 {
  background: color-mix(in oklab, var(--color-base-300) 40%, transparent);
}

.text-base-content {
  color: var(--color-base-content);
}

.text-base-content\/60 {
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.btn-secondary {
  background-color: var(--app-brand);
  border-color: var(--app-brand);
  color: #f5fbfa;
}

.btn-secondary:hover {
  background-color: var(--app-brand-strong);
  border-color: var(--app-brand-strong);
}

.btn-danger {
  background-color: var(--app-danger);
  border-color: var(--app-danger);
  color: #fff;
}

.btn-danger:hover {
  background-color: var(--app-danger-strong);
  border-color: var(--app-danger-strong);
}

.border-brand {
  border-color: var(--app-brand);
}

.border-brand-soft,
.divide-brand-soft > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--app-brand-border);
}

.row-alt {
  background: rgba(28, 41, 44, 0.02);
}

.row-alt-strong {
  background: rgba(28, 41, 44, 0.035);
}

table {
  border-collapse: collapse;
}

table tbody tr:nth-child(odd) {
  background: rgba(28, 41, 44, 0.02);
}

table tbody tr:nth-child(even) {
  background: rgba(28, 41, 44, 0.035);
}

table tbody tr {
  border-bottom: 1px solid var(--app-brand-border);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) {
  table tbody tr:hover {
    background: rgba(62, 134, 125, 0.04);
    border-bottom-color: var(--app-brand-border-active);
    box-shadow: inset 3px 0 0 var(--app-brand);
  }
}

table thead tr {
  border-bottom: 1px solid var(--app-brand-border-strong);
}

.btn-ghost {
  border: 1px solid var(--app-brand-border);
  background: transparent;
  color: var(--color-base-content);
}

.btn-ghost:hover {
  border-color: var(--app-brand);
  background: var(--app-brand-soft);
}

.pill {
  border: 1px solid var(--app-brand-border);
  background: var(--app-brand-soft);
  color: var(--color-base-content);
}

.pill:hover {
  border-color: var(--app-brand-border-active);
  background: var(--app-brand-soft-hover);
}

.pill-selected,
.pill[data-selected="true"] {
  border-color: var(--app-brand);
  background: color-mix(in oklab, var(--app-brand) 82%, var(--color-base-100));
  color: #f8f6ef;
}

/* App components */

.jobsheet-page .field {
  border-color: var(--app-brand-border);
  background: color-mix(in oklab, var(--color-base-100) 88%, var(--color-base-200));
}

.jobsheet-page .field:focus {
  border-color: var(--app-brand-border-active);
  box-shadow: 0 0 0 3px rgba(62, 134, 125, 0.14);
}

.jobsheet-page select.field {
  background: color-mix(in oklab, var(--color-base-100) 82%, var(--color-base-200));
}

.jobsheet-dropdown {
  border-color: var(--app-brand-border-strong);
  background: color-mix(in oklab, var(--color-base-100) 80%, var(--color-base-200));
}

.app-dropdown {
  border: 2px solid var(--app-brand-border-strong);
  background: color-mix(in oklab, var(--color-base-100) 80%, var(--color-base-200));
  box-shadow: 0 8px 18px rgba(28, 41, 44, 0.05);
  border-radius: 0.75rem;
}

.dropdown-option {
  color: var(--color-base-content);
}

.dropdown-option:hover {
  background: var(--app-brand-soft);
  color: var(--color-base-content);
}

.border-base-300 {
  border-color: var(--color-base-300) !important;
}

.border-slate-800,
.border-slate-800\/60,
.border-slate-800\/70,
.border-slate-900\/30,
.border-slate-500,
.border-slate-500\/40 {
  border-color: color-mix(in oklab, var(--color-base-content) 24%, transparent);
}

.app-nav {
  background: #fff;
  border: 1px solid var(--app-brand-border);
  box-shadow: var(--app-shadow-nav);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
}

.app-nav-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2.25rem;
}

.app-nav-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.app-nav-brand-text {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-base-content);
}

.app-nav-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-nav-primary::-webkit-scrollbar {
  display: none;
}

.app-nav-top-link {
  position: relative;
  padding: 0.35rem 0;
  color: color-mix(in oklab, var(--color-base-content) 76%, transparent);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.app-nav-top-link:hover {
  color: var(--color-base-content);
}

.app-nav-top-link.is-active {
  color: var(--app-brand-strong);
}

.app-nav-top-link.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--app-brand);
}

.app-nav-menu-button,
.app-nav-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-base-content);
  padding: 0.45rem;
}

.app-nav-menu-icon {
  display: inline-grid;
  gap: 0.22rem;
  width: 1rem;
}

.app-nav-menu-icon span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: currentColor;
}

.app-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(28, 41, 44, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.app-mobile-tabbar {
  display: none;
}

.app-primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(18.5rem, calc(100vw - 4.5rem));
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
  overflow-y: auto;
  background: #fff;
  padding: 1rem 0.9rem 1.25rem;
  box-shadow: 0 24px 60px rgba(28, 41, 44, 0.18);
  transform: translateX(104%);
  transition: transform 180ms ease;
}

body.app-nav-open .app-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.app-nav-open .app-primary-nav {
  transform: translateX(0);
}

.app-nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--app-brand-border);
}

.app-nav-close-button {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}

.app-nav-menu-button:hover,
.app-nav-close-button:hover {
  background: var(--app-brand-soft);
  color: var(--app-brand-strong);
}

.nav-link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid var(--app-brand-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-base-content);
  text-align: left;
}

.nav-link:hover {
  background: transparent !important;
  border-color: transparent;
  color: var(--app-brand-strong);
}

.nav-link-active {
  background: transparent;
  box-shadow: none;
  color: var(--app-brand-strong);
  border-bottom-color: var(--app-brand-border-active);
}

.nav-dropdown {
  display: none;
  position: static;
  min-width: 0;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.2rem 0 0.25rem;
}

.nav-dropdown a {
  display: block;
  border-bottom: 1px solid var(--app-brand-border);
  padding: 0.8rem 0 0.8rem 1rem;
  color: var(--color-base-content);
}

.nav-dropdown a:hover {
  background: transparent;
  color: var(--app-brand-strong);
}

.nav-group {
  width: 100%;
}

.nav-group.is-open .nav-dropdown {
  display: grid;
  gap: 0;
}

.nav-group::after {
  display: none;
}

@media (max-width: 767px) {
  .has-mobile-tabbar .app-shell {
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom));
  }

  .app-nav {
    padding: 0.8rem 0.9rem;
  }

  .app-nav-bar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .app-nav-brand-text {
    font-size: 0.9rem;
  }

  .app-nav-primary {
    display: none;
  }

  .app-mobile-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    border-top: 1px solid var(--app-brand-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -6px 20px rgba(28, 41, 44, 0.08);
    backdrop-filter: blur(16px);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-mobile-tab-link {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.7rem 0.5rem 0.8rem;
    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
    text-decoration: none;
  }

  .app-mobile-tab-link + .app-mobile-tab-link {
    border-left: 1px solid var(--app-brand-border);
  }

  .app-mobile-tab-link.is-active {
    color: var(--app-brand-strong);
  }

  .app-mobile-tab-link span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .app-mobile-tab-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  body.app-nav-open .app-mobile-tabbar {
    opacity: 0;
    pointer-events: none;
  }
}

@media (min-width: 768px) {
  .has-mobile-tabbar .app-shell {
    padding-bottom: 1.5rem;
  }

  .app-nav {
    padding: 0.8rem 1.1rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-nav-bar {
    column-gap: 1.5rem;
  }

  .app-nav-primary {
    gap: 0.95rem;
  }

  .app-nav-top-link {
    font-size: 0.9rem;
  }
}

.split-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.75rem;
  padding: 0.2rem 0.4rem;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  min-height: 2.5rem;
}

.split-field input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  min-width: 0;
}

.split-field input[type="number"] {
  -moz-appearance: textfield;
}

.split-field input[type="number"]::-webkit-outer-spin-button,
.split-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.split-field .task-time-input {
  width: 2rem;
  flex: 0 0 auto;
  text-align: center;
}

.split-field .task-time-sep {
  margin-right: 0.8rem;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.6rem 0.85rem;
  outline: none;
}

#jobsite-hours-pill {
  color: currentColor;
}

tr[data-row-href],
tr[data-row-toggle] {
  cursor: pointer;
}

tr[data-row-detail] {
  cursor: default;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.calendar-day {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 0.6rem;
  padding: 0.55rem 0;
  font-size: 0.75rem;
  text-align: center;
}

.calendar-day.is-muted {
  color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
  border-color: color-mix(in oklab, var(--color-base-content) 18%, transparent);
}

.calendar-day.is-selected {
  background: color-mix(in oklab, var(--app-brand) 82%, var(--color-base-100));
  border-color: var(--app-brand);
  color: #fff;
}

.calendar-day.is-scheduled {
  border-color: var(--app-brand);
  background: color-mix(in oklab, var(--app-brand) 8%, transparent);
  color: var(--color-base-content);
}

.schedule-card-shadow {
  box-shadow: 0 0 5px 2px rgba(31, 36, 24, 0.12);
}

.tp-ui-wrapper.aslan-timepicker,
.tp-ui-modal .tp-ui-wrapper.aslan-timepicker {
  --tp-bg: var(--color-base-200);
  --tp-surface: var(--color-base-300);
  --tp-surface-hover: color-mix(in oklab, var(--color-base-300) 85%, var(--color-base-100));
  --tp-input-bg: var(--color-base-100);
  --tp-text: var(--color-base-content);
  --tp-text-secondary: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  --tp-text-icon: var(--color-base-content);
  --tp-primary: var(--app-brand);
  --tp-on-primary: #fff;
  --tp-primary-container: color-mix(in oklab, var(--app-brand) 25%, var(--color-base-200));
  --tp-on-primary-container: var(--color-base-content);
  --tp-am-pm-active: var(--app-brand);
  --tp-am-pm-text-selected: #fff;
  --tp-border: color-mix(in oklab, var(--color-base-content) 35%, transparent);
  --tp-outline: var(--app-brand);
  --tp-backdrop: rgba(31, 36, 24, 0.38);
  --tp-shadow: 0 12px 28px rgba(31, 36, 24, 0.2);
}

.flatpickr-calendar {
  background: var(--color-base-200);
  border-color: rgba(62, 134, 125, 0.35);
  box-shadow: 0 12px 28px rgba(31, 36, 24, 0.16);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-days {
  background: var(--color-base-200);
}

.flatpickr-current-month,
.flatpickr-weekday,
.flatpickr-day,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--color-base-content);
}

.flatpickr-weekday,
.flatpickr-weekdays span.flatpickr-weekday,
.flatpickr-monthSelect-month {
  color: var(--color-base-content);
  opacity: 0.9;
}

.flatpickr-day.today {
  border-color: rgba(62, 134, 125, 0.75);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--app-brand);
  border-color: var(--app-brand);
  color: #fff;
}

.flatpickr-day:hover,
.flatpickr-monthSelect-month:hover {
  background: rgba(62, 134, 125, 0.18);
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  background: transparent;
}

.flatpickr-day.nextMonthDay {
  color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
}

.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.selected:hover {
  background: var(--app-brand);
  color: #fff;
}

.flatpickr-input,
.flatpickr-input[readonly] {
  background: var(--color-base-100);
  border: 1px solid rgba(62, 134, 125, 0.32);
  color: var(--color-base-content);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-slate-100,
.text-slate-200,
.text-slate-300 {
  color: color-mix(in oklab, var(--color-base-content) 90%, transparent);
}

.text-amber-100,
.text-amber-200 {
  color: #78350f;
}

.text-rose-100,
.text-rose-200,
.text-red-200,
.text-red-300 {
  color: #9f1239;
}

.text-emerald-200,
.text-emerald-300 {
  color: #065f46;
}

.hover\:text-slate-200:hover {
  color: var(--color-base-content);
}

.hover\:bg-slate-900\/40:hover,
.hover\:bg-slate-900\/60:hover {
  background: color-mix(in oklab, var(--app-brand) 22%, transparent);
}

.app-nav .text-slate-200 {
  color: var(--color-base-content);
}

.rotate-90 {
  transform: rotate(90deg);
}

.invoice-jobsite-field {
  flex: 1.75 1 30rem;
  min-width: min(100%, 30rem);
}

@media (max-width: 768px) {
  .invoice-jobsite-field {
    flex-basis: 100%;
  }
}

.payday-summary-row.is-even {
  background: rgba(15, 17, 12, 0.45);
}

.payday-summary-row.is-odd {
  background: rgba(15, 17, 12, 0.25);
}

.payday-detail-grid {
  display: grid;
  grid-template-columns: 14rem 10rem 5rem 6rem;
  align-items: center;
}