:root {
  /* Prevent mobile browsers from independently inflating text on narrow
     screens; all page typography is deliberately expressed in rem units. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-hover: #eef3fb;
  --border: #d8e0ec;
  --text: #172033;
  --text-muted: #43536b;
  --accent: #2563eb;
  --paid: #15803d;
  --paid-soft: #dcfce7;
  --partial: #a16207;
  --partial-soft: #fef3c7;
  --overdue: #b91c1c;
  --overdue-soft: #fee2e2;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.subtitle {
  color: var(--text-muted);
  margin-top: 0.35rem;
  max-width: 32rem;
}

.primary-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.primary-btn:hover {
  opacity: 0.9;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stat-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.outstanding {
  color: var(--overdue);
}

.renewal-link {
  margin: 1rem 1.25rem;
  overflow-wrap: anywhere;
}

.renewal-link-status {
  margin: 0 1.25rem;
  color: var(--text-muted);
}

.delete-form { margin: 1rem 1.25rem; }
.equipment-list { margin: 1rem 2rem; color: var(--text-muted); }

.success-banner {
  color: var(--paid);
  font-weight: 600;
  margin-top: 1rem;
}

.table-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.recurring-work-description {
  padding: 0.75rem 1.25rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table th {
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.15);
}

.table td {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
}

.table tbody tr:hover {
  background: var(--surface-hover);
}

.name-cell {
  font-weight: 600;
}

.name-cell a,
.table a {
  color: inherit;
}

.link-detail,
.contact-detail {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

.contact-detail a {
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
}

.balance-due {
  color: var(--overdue);
  font-weight: 600;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.badge.paid {
  background: var(--paid-soft);
  color: var(--paid);
}

.badge.partial {
  background: var(--partial-soft);
  color: var(--partial);
}

.badge.overdue {
  background: var(--overdue-soft);
  color: var(--overdue);
}

.badge.active {
  background: var(--paid-soft);
  color: var(--paid);
}

.badge.lapsed,
.badge.cancelled {
  background: var(--overdue-soft);
  color: var(--overdue);
}

.badge.pending_renewal {
  background: var(--partial-soft);
  color: var(--partial);
}

/* App shell */
.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.shop-name {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
  background: var(--surface-hover);
  color: var(--text);
}

.logout-form {
  margin-top: auto;
}

.main {
  padding: 2rem 2rem 4rem;
  max-width: 1100px;
  min-width: 0;
}

.demo-banner {
  background: var(--partial-soft);
  border: 1px solid #f2cc69;
  border-radius: 10px;
  color: #713f12;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
}

.page-subtitle {
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dashboard-quick-links {
  padding-top: 1rem;
}

.secondary-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.secondary-btn:hover,
.ghost-btn:hover {
  background: var(--surface-hover);
}

.form-stack,
.form-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-fieldset {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.recurring-work-form {
  margin-bottom: 1.5rem;
}

.work-toolbar {
  position: sticky;
  top: 0.5rem;
  z-index: 3;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgb(23 32 51 / 8%);
}

.work-toolbar-heading,
.work-selection-controls,
.work-actions,
.work-confirmation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.work-toolbar h3 { font-size: 1rem; }
.work-selection { display: block; font-size: 0.8rem; color: var(--accent); font-weight: 500; }
.work-actions { justify-content: flex-end; margin-top: 0.5rem; }
.work-actions button, .work-confirmation button { min-height: 44px; }
.work-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.work-select-all { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.85rem; white-space: nowrap; }
.work-select-all input, .work-check-target input { width: 20px; height: 20px; padding: 0; accent-color: var(--accent); }
.work-clear { min-height: 44px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; }
.work-check-target { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.work-table td.work-select { padding: 0.25rem; }
.work-call { display: block; width: fit-content; padding: 0.5rem 0; font-size: 0.8rem; font-weight: 500; }
.work-table .work-call { color: var(--accent); }
.work-field-label { display: none; }
[data-work-row] a, [data-work-row] input { scroll-margin-top: 12rem; }
.work-row[data-selected="true"] { background: #eff6ff; box-shadow: inset 3px 0 var(--accent); }
.work-feedback { margin-top: 0.75rem; font-size: 0.9rem; overflow-wrap: anywhere; color: var(--paid); }
.work-feedback[data-error="true"] { color: var(--overdue); }
.work-success { padding: 1rem; margin-bottom: 1rem; border-radius: 8px; background: var(--paid-soft); color: var(--paid); }
.work-selection[hidden], .work-clear[hidden], .work-feedback[hidden] { display: none; }
.work-confirmation { margin: auto; width: min(28rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow-y: auto; padding: 1.5rem; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--surface); box-shadow: 0 20px 60px rgb(0 0 0 / 20%); }
.work-confirmation::backdrop { background: rgb(23 32 51 / 55%); }
.work-confirmation p { margin-top: 1rem; }
.work-confirmation-actions { margin-top: 1.5rem; }
[data-work-form] :focus-visible, .work-confirmation :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 640px) {
  .work-toolbar { top: 0.25rem; padding: 0.75rem; }
  .work-toolbar-heading { align-items: flex-start; flex-wrap: wrap; gap: 0.25rem; }
  .work-selection-controls { margin-left: auto; }
  .work-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .work-actions button { padding: 0.6rem 0.35rem; font-size: 0.85rem; }
  .work-table-wrap { overflow: visible; }
  .work-table, .work-table tbody { display: block; width: 100%; }
  .work-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .work-table .work-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "select customer customer" "service service service" "property property property" "date date state"; gap: 0.5rem; padding: 1rem; border-top: 1px solid var(--border); }
  .work-table .work-row > td { padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .work-select { grid-area: select; }
  .work-customer { grid-area: customer; align-self: center; }
  .work-service { grid-area: service; font-size: 1rem; font-weight: 600; }
  .work-property { grid-area: property; }
  .work-date { grid-area: date; padding-top: 0.5rem !important; }
  .work-state { grid-area: state; align-self: end; text-align: right; }
  .work-field-label { display: block; color: var(--text-muted); font-size: 0.75rem; }
  .work-call { min-height: 44px; }
  .work-confirmation-actions { align-items: stretch; flex-direction: column-reverse; }
}

.renewal-card {
  width: 100%;
  max-width: 42rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.renewal-card .section-title {
  padding: 0 0 1rem;
}

.renewal-link-actions {
  margin-top: 1rem;
}

.renewal-link-panel .section-title {
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}

.renewal-link-panel .empty-note {
  text-align: left;
  padding-top: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  align-items: end;
}

label span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

input,
select,
textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font: inherit;
}

.empty-cell,
.empty-note {
  color: var(--text-muted);
  text-align: center;
}

.clickable-row {
  cursor: pointer;
}

.error-banner {
  background: var(--overdue-soft);
  color: var(--overdue);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.auth-page {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}

.full-width {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

a.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.auth-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
}

.demo-entry-link {
  margin-top: 1rem;
}

.auth-footer a {
  color: var(--accent);
}

.import-columns {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  word-break: break-word;
}

.import-errors {
  padding-left: 1.25rem;
  overflow-wrap: anywhere;
}

.import-errors li + li {
  margin-top: 1rem;
}

.inline-form {
  display: inline;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.checkbox-label input {
  width: auto;
}

.schedule-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.filter-row {
  margin-bottom: 1.5rem;
}

.active-filter {
  border-color: var(--accent);
  color: var(--accent);
}

.bulk-actions {
  margin-top: 1rem;
}

.overdue-row {
  background: rgba(239, 68, 68, 0.06);
}

.badge.due {
  background: var(--partial-soft);
  color: var(--partial);
}

.badge.scheduled {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
}

.badge.completed {
  background: var(--paid-soft);
  color: var(--paid);
}

.badge.skipped {
  background: var(--surface-hover);
  color: var(--text-muted);
}

.badge.overdue {
  background: var(--overdue-soft);
  color: var(--overdue);
}

.stat-meta a {
  color: var(--accent);
  text-decoration: none;
}

.stat-meta a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1rem;
    gap: 0.75rem;
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  .sidebar .title {
    font-size: 1.35rem;
  }

  .sidebar .eyebrow {
    display: none;
  }

  .nav {
    flex-direction: row;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    width: 100%;
  }

  .nav-link {
    flex: 0 0 auto;
    padding: 0.45rem 0.65rem;
  }

  .logout-form {
    margin-top: 0;
  }

  .main {
    max-width: 100%;
    min-width: 0;
    padding: 1.25rem;
    width: 100%;
  }

  .demo-banner,
  .panel,
  .table-section {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .header,
  .page-header {
    flex-direction: column;
  }

  .primary-btn {
    width: 100%;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
.schedule-field-label { display: none; }
.schedule-table td { vertical-align: top; }
.schedule-table .secondary-btn, .work-change-date { min-height: 44px; display: inline-flex; align-items: center; }
.work-change-date { font-size: .85rem; }
.visit-date-panel { max-width: 720px; }
.visit-date-panel .primary-btn, .visit-date-panel .secondary-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.visit-date-details { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0; }
.visit-date-details dt { color: #526079; font-size: .85rem; }
.visit-date-details dd { margin: .4rem 0 0; font-weight: 600; }
.visit-date-panel input[type=date] { min-height: 44px; width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 640px) {
  .schedule-table-wrap { overflow: visible; }
  .schedule-table, .schedule-table tbody { display: block; width: 100%; }
  .schedule-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .schedule-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 1rem; border-bottom: 1px solid #dce3ef; gap: 1rem; }
  .schedule-table td { display: block; padding: 0; border: 0; overflow-wrap: anywhere; }
  .schedule-customer, .schedule-service, .schedule-adjust { grid-column: 1 / -1; }
  .schedule-field-label { display: block; color: #526079; font-size: .8rem; margin-bottom: .35rem; }
  .schedule-adjust .secondary-btn { width: 100%; justify-content: center; box-sizing: border-box; }
}
.service-calendar { padding: 1.25rem; scroll-margin-top: 1rem; }
.calendar-header, .calendar-navigation { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.calendar-header { margin-bottom: 1.5rem; }
.calendar-header .section-title { margin-bottom: .3rem; }
.calendar-navigation { margin-bottom: .65rem; }
.calendar-navigation h4 { font-size: 1.25rem; }
.calendar-navigation nav, .calendar-pagination { display: flex; gap: .5rem; }
.service-calendar .secondary-btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; }
.calendar-legend { font-size: .85rem; margin-bottom: 1rem; }
.calendar-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 1.5rem; align-items: start; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-weekdays { text-align: center; color: var(--text-muted); font-size: .8rem; margin-bottom: .5rem; }
.calendar-day { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-height: 88px; padding: .4rem .1rem; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); background: var(--surface); }
.calendar-day:hover { background: var(--surface-hover); }
.calendar-day:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.calendar-day.selected { background: #eaf1ff; border: 2px solid var(--accent); padding-top: calc(.4rem - 1px); }
.calendar-day-number { font-weight: 650; }
.calendar-count { font-size: .78rem; color: #1742a0; font-weight: 600; }
.calendar-zero, .calendar-unplanned { color: #64748b; font-size: .78rem; }
.calendar-today-label { color: #1742a0; font-size: .68rem; font-weight: 700; }
.calendar-day.incomplete { border-style: dashed; }
.calendar-horizon { margin-top: .85rem; font-size: .8rem; }
.calendar-agenda { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; min-width: 0; }
.calendar-agenda h4 { font-size: 1rem; margin-bottom: .25rem; }
.calendar-page-count { font-size: .8rem; margin: .8rem 0; }
.calendar-visit-list { list-style: none; }
.calendar-visit-list li { padding: 1rem 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.calendar-service-link { display: block; margin: .6rem 0; }
.calendar-change-date { margin-top: .4rem; }
.calendar-pagination { flex-wrap: wrap; margin-top: 1rem; }
.calendar-work-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; }
.calendar-empty { margin: 1rem 0; color: var(--text-muted); }
.calendar-notice { font-size: .85rem; margin: 1rem 0; }
.calendar-overdue { color: var(--overdue); font-weight: 600; }
@media (max-width: 1000px) { .calendar-body { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) {
  .service-calendar { padding: .75rem; }
  .calendar-grid, .calendar-weekdays { gap: 2px; }
  .calendar-navigation { gap: .5rem; }
  .calendar-navigation .secondary-btn { padding: .4rem .7rem; }
  .calendar-open-word { display: none; }
  .calendar-day { min-height: 80px; }
}