/* [project]/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .fixed {
    position: fixed;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }
}

:root {
  --color-background: #f6f7f8;
  --color-surface: #fff;
  --color-surface-muted: #f0f3f3;
  --color-text: #202525;
  --color-text-muted: #667070;
  --color-border: #e1e6e5;
  --color-border-strong: #cdd5d3;
  --color-primary: #356d68;
  --color-primary-hover: #2b5b57;
  --color-primary-soft: #e7f0ef;
  --color-on-primary: #fff;
  --color-success: #397359;
  --color-success-soft: #e9f4ee;
  --color-warning: #946a24;
  --color-warning-soft: #faf1df;
  --color-danger: #a74949;
  --color-danger-soft: #faecec;
  --color-info: #456b8a;
  --color-info-soft: #eaf1f7;
  --shadow-card: 0 1px 2px #1423210a, 0 4px 14px #14232108;
  --shadow-dialog: 0 24px 60px #1423212e;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --sidebar-width: 252px;
  --topbar-height: 68px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-background);
  min-width: 320px;
}

body {
  background: var(--color-background);
  min-height: 100vh;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

button, input, select, textarea {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  z-index: 40;
  width: var(--sidebar-width);
  border-right: 1px solid var(--color-border);
  background: #fbfcfc;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
}

.sidebar__brand {
  height: var(--topbar-height);
  border-bottom: 1px solid var(--color-border);
  letter-spacing: -.02em;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 720;
  display: flex;
}

.brand-mark {
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.sidebar__close {
  background: none;
  border: 0;
  margin-left: auto;
  display: none;
}

.workshop-switcher {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 18px 14px 14px;
  padding: 11px;
  display: grid;
  box-shadow: 0 1px 2px #14232108;
}

.workshop-avatar, .user-avatar {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: 10px;
  place-items: center;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.workshop-avatar {
  width: 36px;
  height: 36px;
}

.workshop-switcher strong, .user-menu strong {
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  display: block;
  overflow: hidden;
}

.workshop-switcher small, .user-menu small {
  color: var(--color-text-muted);
  font-size: 11px;
  display: block;
}

.sidebar__nav {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  padding: 6px 12px;
  display: flex;
}

.nav-item {
  color: #5d6766;
  border-radius: 9px;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 570;
  transition: background .15s, color .15s;
  display: flex;
}

.nav-item:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.nav-item:focus-visible, .button:focus-visible, .icon-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #356d6833;
}

.nav-item--active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.nav-item small {
  color: #8b9594;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
}

.sidebar__footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  align-items: center;
  gap: 7px;
  margin: 12px;
  padding: 13px 11px;
  font-size: 11px;
  display: flex;
}

.sidebar__footer span:last-child {
  margin-left: auto;
  font-weight: 700;
}

.environment-dot {
  background: var(--color-success);
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.app-shell__body {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.topbar {
  z-index: 20;
  height: var(--topbar-height);
  border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffffeb;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  display: flex;
  position: sticky;
  top: 0;
}

.topbar__spacer {
  flex: 1;
}

.mobile-menu {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 9px;
  place-items: center;
  width: 40px;
  height: 40px;
  display: none;
}

.icon-button {
  border: 1px solid var(--color-border);
  cursor: pointer;
  background: #fff;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  position: relative;
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.topbar__notification span {
  background: var(--color-danger);
  border: 1px solid #fff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 9px;
  right: 9px;
}

.user-menu-wrap {
  position: relative;
}

.user-menu {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
  min-width: 198px;
  padding: 4px 6px 4px 4px;
  display: grid;
}

.user-menu:hover, .user-menu[aria-expanded="true"] {
  background: var(--color-surface-muted);
}

.user-menu:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #356d6833;
}

.user-menu > svg {
  color: var(--color-text-muted);
  transition: transform .15s;
}

.user-menu__chevron--open {
  transform: rotate(180deg);
}

.user-avatar {
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.user-dropdown {
  z-index: 30;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  width: 220px;
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  overflow: hidden;
  box-shadow: 0 14px 36px #14232124;
}

.user-dropdown__header {
  border-bottom: 1px solid var(--color-border);
  padding: 13px 14px;
}

.user-dropdown__header strong, .user-dropdown__header small {
  display: block;
}

.user-dropdown__header strong {
  font-size: 12px;
}

.user-dropdown__header small {
  color: var(--color-text-muted);
  margin-top: 2px;
  font-size: 10px;
}

.user-dropdown > button {
  width: 100%;
  min-height: 44px;
  color: var(--color-danger);
  cursor: pointer;
  background: #fff;
  border: 0;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 650;
  display: flex;
}

.user-dropdown > button:hover, .user-dropdown > button:focus-visible {
  background: var(--color-danger-soft);
  outline: none;
}

.main {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 26px 30px 48px;
  position: relative;
}

.breadcrumb {
  color: #8b9594;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 12px;
  display: flex;
}

.breadcrumb strong {
  color: var(--color-text-muted);
  font-weight: 600;
}

.page-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  min-height: 64px;
  margin-bottom: 23px;
  display: flex;
}

.page-heading h1 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: clamp(25px, 2vw, 31px);
  line-height: 1.2;
}

.page-heading p {
  max-width: 660px;
  color: var(--color-text-muted);
  margin: 7px 0 0;
  font-size: 14px;
}

.page-actions {
  position: absolute;
  top: 58px;
  right: 30px;
}

.prototype-banner {
  color: var(--color-text-muted);
  background: #f4f8f7;
  border: 1px solid #d9e5e3;
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  margin: -4px 0 16px;
  padding: 9px 12px;
  font-size: 11px;
  display: flex;
}

.prototype-banner span {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 750;
}

.button {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 650;
  transition: background .15s, border-color .15s, transform .15s;
  display: inline-flex;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.button small {
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-left: 3px;
  font-size: 9px;
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.button--secondary {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background: #fff;
}

.button--ghost {
  color: var(--color-primary);
  background: none;
}

.button--danger {
  background: var(--color-danger);
  color: #fff;
}

.button__spinner {
  border: 2px solid;
  border-right-color: #0000;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: .7s linear infinite spin;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.field {
  gap: 6px;
  display: grid;
}

.field__label {
  font-size: 13px;
  font-weight: 650;
}

.input, .select, .textarea {
  border: 1px solid var(--color-border-strong);
  width: 100%;
  color: var(--color-text);
  background: #fff;
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}

.input, .select {
  height: 42px;
  padding: 0 12px;
}

.textarea {
  resize: vertical;
  min-height: 104px;
  padding: 10px 12px;
}

.input::placeholder, .textarea::placeholder {
  color: #9aa3a2;
}

.input:hover, .select:hover, .textarea:hover {
  border-color: #aebbb9;
}

.input--error {
  border-color: var(--color-danger);
}

.field__hint, .field__error {
  margin: 0;
  font-size: 12px;
}

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

.field__error {
  color: var(--color-danger);
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.card__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 21px 16px;
  display: flex;
}

.card__title {
  letter-spacing: -.01em;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.card__description {
  color: var(--color-text-muted);
  margin: 5px 0 0;
  font-size: 12px;
}

.card__footer {
  border-top: 1px solid var(--color-border);
  padding: 16px 20px 20px;
}

.badge {
  background: var(--color-surface-muted);
  width: fit-content;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 650;
  display: inline-flex;
}

.badge__dot {
  background: currentColor;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

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

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

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

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

.metrics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 16px;
  display: grid;
}

.metric-card {
  min-height: 150px;
  padding: 19px;
  position: relative;
}

.metric-icon {
  background: var(--color-surface-muted);
  width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  border-radius: 10px;
  place-items: center;
  display: grid;
  position: absolute;
  top: 18px;
  right: 18px;
}

.metric-icon--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.metric-icon--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.metric-card p {
  color: var(--color-text-muted);
  margin: 2px 46px 16px 0;
  font-size: 12px;
  font-weight: 570;
}

.metric-card > strong {
  letter-spacing: -.03em;
  margin-bottom: 7px;
  font-size: 27px;
  line-height: 1;
  display: block;
}

.metric-detail {
  color: var(--color-text-muted);
  font-size: 11px;
}

.metric-detail--success {
  color: var(--color-success);
}

.metric-detail--warning {
  color: var(--color-warning);
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(285px, .72fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.dashboard-overview-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(245px, .7fr) minmax(280px, .9fr);
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
  display: grid;
}

.dashboard-overview-grid > .card {
  min-width: 0;
}

.activity-list {
  padding: 0 20px 14px;
}

.activity-item {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 42px 10px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px 0;
  display: grid;
}

.activity-item time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
  font-size: 11px;
}

.activity-item strong {
  font-size: 12px;
  display: block;
}

.activity-item p {
  color: var(--color-text-muted);
  margin: 2px 0 0;
  font-size: 11px;
}

.activity-dot {
  background: #889290;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  box-shadow: 0 0 0 2px #dfe4e3;
}

.activity-dot--success {
  background: var(--color-success);
  box-shadow: 0 0 0 2px var(--color-success-soft);
}

.activity-dot--info {
  background: var(--color-info);
  box-shadow: 0 0 0 2px var(--color-info-soft);
}

.quick-actions {
  gap: 9px;
  padding: 0 20px 20px;
  display: grid;
}

.quick-actions .button {
  justify-content: flex-start;
  width: 100%;
}

.quick-actions .button small {
  margin-left: auto;
}

.recent-records {
  margin-bottom: 16px;
}

.dashboard-loading {
  gap: 16px;
  display: grid;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

.table th {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #fafbfb;
  padding: 10px 20px;
  font-size: 10px;
  font-weight: 700;
}

.table td {
  border-bottom: 1px solid var(--color-border);
  color: #424b4a;
  vertical-align: middle;
  padding: 15px 20px;
  font-size: 12px;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table td strong, .table td small {
  display: block;
}

.table td strong {
  color: var(--color-text);
  margin-bottom: 3px;
  font-size: 12px;
}

.table td small {
  color: var(--color-text-muted);
  font-size: 11px;
}

.reminder-list {
  padding: 0 20px 4px;
}

.reminder-item {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  display: grid;
}

.reminder-date {
  border: 1px solid var(--color-border);
  background: #fafbfb;
  border-radius: 9px;
  align-content: center;
  place-items: center;
  width: 42px;
  height: 45px;
  display: grid;
}

.reminder-date span {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.1;
}

.reminder-date small {
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 9px;
}

.reminder-item strong {
  font-size: 12px;
}

.reminder-item p {
  color: var(--color-text-muted);
  margin: 2px 0 6px;
  font-size: 11px;
}

.reminder-item > svg {
  color: #a4adac;
}

.reminders-card .button {
  width: 100%;
}

.state {
  text-align: center;
  place-items: center;
  padding: 48px 24px;
  display: grid;
}

.state__icon {
  background: var(--color-surface-muted);
  width: 44px;
  height: 44px;
  color: var(--color-text-muted);
  border-radius: 12px;
  place-items: center;
  margin-bottom: 14px;
  display: grid;
}

.state h2, .state h3 {
  margin: 0 0 7px;
  font-size: 16px;
}

.state p {
  max-width: 440px;
  color: var(--color-text-muted);
  margin: 0;
  font-size: 13px;
}

.state--error .state__icon {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.state .button {
  margin-top: 18px;
}

.placeholder-state {
  min-height: 410px;
}

.coming-soon-label {
  color: var(--color-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 11px;
  font-size: 10px;
  font-weight: 750;
}

.loading-state {
  gap: 17px;
  padding: 24px;
  display: grid;
}

.skeleton-row {
  gap: 8px;
  display: grid;
}

.skeleton-row span {
  background: linear-gradient(90deg, #eef1f1 25%, #f7f8f8 50%, #eef1f1 75%) 0 0 / 200% 100%;
  border-radius: 6px;
  height: 12px;
  animation: 1.5s infinite shimmer;
}

.skeleton-row span:last-child {
  width: 62%;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.toast {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  width: min(390px, 100vw - 32px);
  padding: 14px;
  display: grid;
  box-shadow: 0 14px 36px #14232124;
}

.toast--success > svg {
  color: var(--color-success);
}

.toast--info > svg {
  color: var(--color-info);
}

.toast strong {
  font-size: 13px;
}

.toast p {
  color: var(--color-text-muted);
  margin: 2px 0 0;
  font-size: 12px;
}

.toast .icon-button {
  border: 0;
  width: 30px;
  height: 30px;
}

.dialog-backdrop {
  z-index: 100;
  background: #141b1a6b;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: min(440px, 100%);
  box-shadow: var(--shadow-dialog);
  background: #fff;
  padding: 24px;
}

.dialog h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.dialog p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 13px;
}

.dialog__actions {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
  display: flex;
}

.customer-page-action {
  position: absolute;
  top: 58px;
  right: 30px;
}

.customer-toolbar {
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
  display: flex;
}

.search-control {
  border: 1px solid var(--color-border-strong);
  width: min(420px, 100%);
  height: 40px;
  color: var(--color-text-muted);
  background: #fff;
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  display: flex;
}

.search-control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px #356d681f;
}

.search-control input {
  width: 100%;
  min-width: 0;
  color: var(--color-text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.filter-control {
  border: 1px solid var(--color-border-strong);
  height: 40px;
  color: var(--color-text-muted);
  background: #fff;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 11px;
  display: flex;
}

.filter-control select {
  min-width: 125px;
  height: 36px;
  color: var(--color-text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.customer-table td {
  height: 67px;
}

.customer-table th:last-child, .customer-table td:last-child {
  text-align: right;
  width: 58px;
  padding-inline: 10px;
}

.customer-identity {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.customer-identity > span:first-child {
  background: var(--color-primary-soft);
  width: 34px;
  height: 34px;
  color: var(--color-primary);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 10px;
  font-weight: 750;
  display: grid;
}

.customer-identity:hover strong {
  color: var(--color-primary);
}

.row-actions {
  display: inline-block;
  position: relative;
}

.row-actions summary {
  width: 34px;
  height: 34px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 8px;
  place-items: center;
  list-style: none;
  display: grid;
}

.row-actions summary::-webkit-details-marker {
  display: none;
}

.row-actions summary:hover {
  background: var(--color-surface-muted);
}

.row-actions > div {
  z-index: 12;
  border: 1px solid var(--color-border);
  text-align: left;
  background: #fff;
  border-radius: 10px;
  width: 180px;
  display: grid;
  position: absolute;
  top: 38px;
  right: 0;
  overflow: hidden;
  box-shadow: 0 12px 28px #14232121;
}

.row-actions > div a, .row-actions > div span {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 11px;
  display: flex;
}

.row-actions > div a:hover {
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.row-actions > div span {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.row-actions > div small {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 700;
}

.customer-mobile-list {
  display: none;
}

.pagination {
  border-top: 1px solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 15px 18px;
  display: flex;
}

.pagination p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 11px;
}

.pagination > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.pagination > div > span {
  color: var(--color-text-muted);
  font-size: 10px;
}

.pagination .button {
  min-height: 34px;
  padding-inline: 11px;
  font-size: 11px;
}

.form-page-grid {
  grid-template-columns: minmax(0, 760px) minmax(230px, 300px);
  align-items: start;
  gap: 18px;
  display: grid;
}

.customer-form {
  padding: 2px 21px 21px;
}

.form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  display: grid;
}

.form-grid .field:last-child {
  grid-column: 1 / -1;
}

.form-actions {
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
  padding-top: 18px;
  display: flex;
}

.form-guidance {
  border-radius: var(--radius-md);
  color: var(--color-primary);
  background: #f1f7f6;
  border: 1px solid #d7e4e2;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 15px;
  display: grid;
}

.form-guidance strong {
  font-size: 12px;
  display: block;
}

.form-guidance p {
  color: var(--color-text-muted);
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.success-feedback {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid #cce2d5;
  border-radius: 9px;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 13px;
  display: grid;
}

.success-feedback strong {
  font-size: 12px;
}

.success-feedback p {
  color: #526a5d;
  margin: 2px 0 0;
  font-size: 11px;
}

.detail-actions {
  justify-content: flex-end;
  gap: 9px;
  margin: 0 0 16px;
  display: flex;
}

.toast-position {
  z-index: 90;
  position: fixed;
  top: 80px;
  right: 24px;
}

.customer-profile-grid {
  grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.05fr) minmax(260px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  display: grid;
}

.profile-summary {
  align-items: center;
  gap: 15px;
  min-height: 164px;
  padding: 22px;
  display: flex;
}

.profile-avatar {
  background: var(--color-primary-soft);
  width: 62px;
  height: 62px;
  color: var(--color-primary);
  border-radius: 18px;
  flex: none;
  place-items: center;
  font-size: 18px;
  font-weight: 750;
  display: grid;
}

.profile-summary h2 {
  margin: 0;
  font-size: 18px;
}

.profile-summary p {
  color: var(--color-text-muted);
  margin: 5px 0 11px;
  font-size: 11px;
}

.contact-list {
  margin: 0;
  padding: 0 20px 16px;
}

.contact-list > div {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  display: grid;
}

.contact-list dt {
  color: var(--color-text-muted);
  align-items: center;
  gap: 7px;
  font-size: 11px;
  display: flex;
}

.contact-list dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
}

.notes-content {
  color: var(--color-text-muted);
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 2px 20px 20px;
  display: grid;
}

.notes-content p {
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}

.customer-detail-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.vehicle-summary-list, .service-summary-list {
  padding: 0 20px 8px;
}

.vehicle-summary-list article {
  border-top: 1px solid var(--color-border);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  display: grid;
}

.vehicle-icon {
  background: var(--color-surface-muted);
  width: 38px;
  height: 38px;
  color: var(--color-text-muted);
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.vehicle-summary-list strong, .service-summary-list strong {
  font-size: 12px;
  display: block;
}

.vehicle-summary-list p, .service-summary-list p {
  color: var(--color-text-muted);
  margin: 3px 0 0;
  font-size: 11px;
}

.vehicle-summary-list article > div:last-child {
  text-align: right;
}

.vehicle-summary-list article > div:last-child small {
  color: var(--color-text-muted);
  margin-bottom: 3px;
  font-size: 9px;
  display: block;
}

.service-summary-list article {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  display: grid;
}

.service-summary-list time {
  color: var(--color-text-muted);
  font-size: 10px;
}

.vehicle-table th:last-child, .vehicle-table td:last-child {
  text-align: right;
  width: 54px;
  padding-inline: 10px;
}

.vehicle-identity strong, .vehicle-identity small {
  display: block;
}

.vehicle-identity strong {
  color: var(--color-text);
  letter-spacing: .02em;
  font-size: 12px;
}

.vehicle-identity small {
  color: var(--color-text-muted);
  margin-top: 3px;
  font-size: 10px;
}

.vehicle-identity:hover strong {
  color: var(--color-primary);
}

.table-view-action {
  border: 1px solid var(--color-border);
  width: 34px;
  height: 34px;
  color: var(--color-text-muted);
  border-radius: 8px;
  place-items: center;
  display: inline-grid;
}

.table-view-action:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.vehicle-mobile-list {
  display: none;
}

.vehicle-form-grid .field:last-child {
  grid-column: 1 / -1;
}

.vehicle-hero {
  grid-template-columns: minmax(300px, 1.3fr) minmax(200px, .7fr);
  min-width: 0;
  margin-bottom: 16px;
  display: grid;
  overflow: hidden;
}

.vehicle-hero__identity {
  border-right: 1px solid var(--color-border);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 22px;
  display: grid;
}

.vehicle-hero__identity > div {
  min-width: 0;
}

.vehicle-hero__identity > span {
  background: var(--color-primary-soft);
  width: 54px;
  height: 54px;
  color: var(--color-primary);
  border-radius: 15px;
  place-items: center;
  display: grid;
}

.vehicle-hero__identity small, .vehicle-hero__owner small, .vehicle-metrics small {
  color: var(--color-text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
  display: block;
}

.vehicle-hero__identity h2 {
  letter-spacing: .03em;
  margin: 2px 0 0;
  font-size: 23px;
}

.vehicle-hero__identity p {
  color: var(--color-text-muted);
  margin: 3px 0 0;
  font-size: 11px;
}

.vehicle-hero__owner {
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  display: flex;
}

.vehicle-hero__owner strong {
  margin-top: 7px;
  font-size: 13px;
}

.vehicle-hero__owner p {
  color: var(--color-text-muted);
  margin: 2px 0 0;
  font-size: 11px;
}

.vehicle-metrics {
  border-top: 1px solid var(--color-border);
  background: #fafbfb;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.vehicle-metrics > div {
  border-right: 1px solid var(--color-border);
  padding: 15px 21px;
}

.vehicle-metrics > div:last-child {
  border-right: 0;
}

.vehicle-metrics strong {
  margin-top: 5px;
  font-size: 12px;
  display: block;
}

.vehicle-detail-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
  display: grid;
}

.timeline-card, .vehicle-detail-sidebar {
  min-width: 0;
}

.vehicle-detail-sidebar {
  gap: 16px;
  display: grid;
}

.detail-list {
  margin: 0;
  padding: 0 20px 16px;
}

.detail-list > div {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  display: grid;
}

.detail-list dt {
  color: var(--color-text-muted);
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: flex;
}

.detail-list dd {
  overflow-wrap: anywhere;
  text-align: right;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
}

.service-timeline {
  padding: 0 21px 18px;
}

.service-timeline article {
  grid-template-columns: 22px 1fr;
  gap: 10px;
  display: grid;
}

.timeline-marker {
  justify-content: center;
  display: flex;
  position: relative;
}

.timeline-marker:after {
  background: var(--color-border-strong);
  content: "";
  width: 1px;
  position: absolute;
  top: 19px;
  bottom: -1px;
}

.service-timeline article:last-child .timeline-marker:after {
  display: none;
}

.timeline-marker span {
  z-index: 1;
  background: var(--color-primary);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 2px var(--color-primary-soft);
  border: 2px solid #fff;
  border-radius: 50%;
  margin-top: 17px;
  position: relative;
}

.timeline-entry {
  border-top: 1px solid var(--color-border);
  min-width: 0;
  padding: 11px 0 18px;
}

.timeline-entry__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.timeline-entry time {
  color: var(--color-text-muted);
  font-size: 10px;
}

.timeline-entry h3 {
  margin: 3px 0 0;
  font-size: 13px;
}

.timeline-entry dl {
  background: var(--color-surface-muted);
  border-radius: 9px;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 13px 0 0;
  padding: 11px 12px;
  display: grid;
}

.timeline-entry dl div {
  min-width: 0;
}

.timeline-entry dt {
  color: var(--color-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
}

.timeline-entry dd {
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 600;
}

.service-record-table th:last-child, .service-record-table td:last-child {
  text-align: right;
  width: 54px;
  padding-inline: 10px;
}

.service-record-mobile-list {
  display: none;
}

.service-form {
  gap: 16px;
  display: grid;
}

.service-form-section {
  padding: 2px 21px 21px;
}

.service-items {
  padding: 0 21px 20px;
}

.service-items__head, .service-item {
  grid-template-columns: minmax(190px, 1.6fr) minmax(100px, .65fr) minmax(78px, .4fr) minmax(125px, .75fr) minmax(110px, .65fr) 34px;
  align-items: start;
  gap: 10px;
  display: grid;
}

.service-items__head {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 10px 0;
  font-size: 9px;
  font-weight: 700;
}

.service-item {
  border-top: 1px solid var(--color-border);
  padding: 12px 0;
}

.service-item .select, .service-item > .field > .input {
  height: 40px;
}

.price-input {
  position: relative;
}

.price-input > span {
  z-index: 1;
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  top: 12px;
  left: 10px;
}

.price-input .input {
  padding-left: 38px;
}

.item-subtotal {
  text-align: right;
  padding-top: 11px;
  font-size: 11px;
}

.remove-item {
  width: 34px;
  height: 40px;
  color: var(--color-danger);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  display: grid;
}

.remove-item:hover:not(:disabled) {
  background: var(--color-danger-soft);
}

.remove-item:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.service-total {
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  padding: 16px 44px 0 0;
  display: flex;
}

.service-total span {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 650;
}

.service-total strong {
  text-align: right;
  min-width: 110px;
  font-size: 18px;
}

.service-form-columns {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.attachment-placeholders {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 2px 20px 20px;
  display: grid;
}

.attachment-placeholders > div {
  border: 1px dashed var(--color-border-strong);
  background: #fafbfb;
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 178px;
  padding: 16px;
  display: flex;
}

.attachment-placeholders > div > span {
  background: var(--color-surface-muted);
  width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  border-radius: 9px;
  place-items: center;
  margin-bottom: 12px;
  display: grid;
}

.attachment-placeholders strong {
  font-size: 11px;
}

.attachment-placeholders p {
  color: var(--color-text-muted);
  flex: 1;
  margin: 4px 0 12px;
  font-size: 10px;
  line-height: 1.5;
}

.attachment-placeholders .button {
  width: 100%;
  min-height: 34px;
  padding-inline: 9px;
  font-size: 10px;
}

.service-form-footer {
  z-index: 15;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffffff5;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  display: flex;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -8px 24px #1423210f;
}

.service-form-footer > div {
  align-items: center;
  gap: 9px;
  display: flex;
}

.service-form-footer > div:first-child {
  color: var(--color-text-muted);
  font-size: 10px;
}

.completed-success {
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  border: 1px solid #cce2d5;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
  padding: 18px 20px;
  display: grid;
}

.completed-success > span {
  width: 46px;
  height: 46px;
  color: var(--color-success);
  background: #fff;
  border-radius: 13px;
  place-items: center;
  display: grid;
}

.completed-success small {
  color: var(--color-success);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 750;
}

.completed-success h2 {
  margin: 3px 0 0;
  font-size: 17px;
}

.completed-success p {
  color: #526a5d;
  margin: 3px 0 0;
  font-size: 11px;
}

.completed-actions {
  justify-content: flex-end;
  gap: 9px;
  margin-bottom: 16px;
  display: flex;
}

.service-summary-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 16px;
  margin-bottom: 16px;
  display: grid;
}

.service-summary-main {
  padding: 2px 21px 21px;
}

.service-summary-main h2 {
  margin: 0;
  font-size: 18px;
}

.service-summary-main > p {
  color: var(--color-text-muted);
  margin: 7px 0 18px;
  font-size: 11px;
}

.service-summary-main dl {
  border: 1px solid var(--color-border);
  background: #fafbfb;
  border-radius: 10px;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  display: grid;
}

.service-summary-main dl > div {
  border-right: 1px solid var(--color-border);
  padding: 13px;
}

.service-summary-main dl > div:last-child {
  border-right: 0;
}

.service-summary-main dt, .record-party-list dt {
  color: var(--color-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
}

.service-summary-main dd {
  margin: 5px 0 0;
  font-size: 11px;
  font-weight: 650;
}

.record-party-list {
  margin: 0;
  padding: 0 20px 16px;
}

.record-party-list > div {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 126px 1fr;
  gap: 12px;
  padding: 10px 0;
  display: grid;
}

.record-party-list dt {
  align-items: center;
  gap: 7px;
  display: flex;
}

.record-party-list dd {
  overflow-wrap: anywhere;
  text-align: right;
  margin: 0;
  font-size: 10px;
}

.record-party-list dd strong, .record-party-list dd span {
  display: block;
}

.record-party-list dd span {
  color: var(--color-text-muted);
  margin-top: 2px;
}

.record-detail-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 16px;
  display: grid;
}

.record-items {
  padding: 0 20px 18px;
}

.record-items__head, .record-item {
  grid-template-columns: minmax(170px, 1.4fr) .55fr .35fr .65fr .65fr;
  align-items: center;
  gap: 12px;
  display: grid;
}

.record-items__head {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 0;
  font-size: 9px;
  font-weight: 700;
}

.record-item {
  border-top: 1px solid var(--color-border);
  padding: 13px 0;
  font-size: 10px;
}

.record-item > :not(:first-child), .record-items__head > :not(:first-child) {
  text-align: right;
}

.record-items__total {
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
  gap: 28px;
  padding-top: 14px;
  display: flex;
}

.record-notes {
  padding: 0 20px 20px;
}

.record-notes > div {
  border-top: 1px solid var(--color-border);
  padding: 12px 0;
}

.record-notes small {
  color: var(--color-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
}

.record-notes p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.record-back {
  margin-top: 16px;
}

.login-page {
  background: #fff;
  grid-template-columns: minmax(360px, .9fr) minmax(500px, 1.1fr);
  min-height: 100vh;
  display: grid;
}

.login-brand-panel {
  color: #fff;
  background: #233b39;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 40px clamp(36px, 5vw, 76px);
  display: flex;
  position: relative;
  overflow: hidden;
}

.login-brand-panel:after {
  content: "";
  border: 90px solid #ffffff08;
  border-radius: 50%;
  width: 430px;
  height: 430px;
  position: absolute;
  bottom: -190px;
  right: -170px;
}

.login-brand {
  z-index: 1;
  letter-spacing: -.02em;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 730;
  display: flex;
  position: relative;
}

.login-brand .brand-mark {
  color: var(--color-primary);
  background: #f2f7f6;
}

.login-brand-copy {
  z-index: 1;
  max-width: 520px;
  margin: auto 0;
  padding: 80px 0;
  position: relative;
}

.eyebrow {
  color: #a9c3c0;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 720;
  display: block;
}

.login-brand-copy h1 {
  letter-spacing: -.045em;
  max-width: 500px;
  margin: 0;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 680;
  line-height: 1.06;
}

.login-brand-copy p {
  color: #c5d2d0;
  max-width: 470px;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

.login-brand-footer {
  z-index: 1;
  color: #91aaa7;
  margin: 0;
  font-size: 11px;
  position: relative;
}

.login-form-panel {
  background: #fbfcfc;
  place-items: center;
  padding: 40px 28px;
  display: grid;
}

.login-form-wrap {
  width: min(100%, 430px);
}

.login-mobile-brand {
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-size: 18px;
  display: none;
}

.prototype-notice {
  color: var(--color-primary);
  background: #f1f7f6;
  border: 1px solid #d7e4e2;
  border-radius: 10px;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-bottom: 30px;
  padding: 12px 13px;
  display: grid;
}

.prototype-notice strong {
  font-size: 11px;
  display: block;
}

.prototype-notice p {
  color: var(--color-text-muted);
  margin: 1px 0 0;
  font-size: 11px;
}

.login-heading {
  margin-bottom: 28px;
}

.login-lock {
  background: var(--color-primary-soft);
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  border-radius: 10px;
  place-items: center;
  margin-bottom: 16px;
  display: grid;
}

.login-heading h2 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.login-heading p {
  color: var(--color-text-muted);
  margin: 7px 0 0;
}

.login-form {
  gap: 18px;
  display: grid;
}

.password-field {
  position: relative;
}

.password-field .input {
  padding-right: 45px;
}

.password-field button {
  width: 38px;
  height: 38px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  place-items: center;
  display: grid;
  position: absolute;
  top: 2px;
  right: 3px;
}

.password-field button:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.login-options {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.checkbox-label {
  color: var(--color-text-muted);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: inline-flex;
}

.checkbox-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  margin: 0;
}

.text-button {
  color: var(--color-primary);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 640;
}

.form-alert {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid #efcccc;
  border-radius: 9px;
  padding: 12px 13px;
}

.form-alert strong {
  font-size: 12px;
}

.form-alert p {
  margin: 2px 0 0;
  font-size: 11px;
}

.recovery-note {
  background: var(--color-info-soft);
  color: var(--color-info);
  border-radius: 8px;
  margin: -5px 0 0;
  padding: 10px 12px;
  font-size: 11px;
}

.login-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
}

.demo-credentials {
  border: 1px dashed var(--color-border-strong);
  background: #fff;
  border-radius: 10px;
  margin-top: 23px;
  padding: 13px 15px;
}

.demo-credentials > span {
  color: var(--color-text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
  font-size: 9px;
  font-weight: 750;
  display: block;
}

.demo-credentials p {
  color: var(--color-text-muted);
  gap: 10px;
  margin: 3px 0;
  font-size: 11px;
  display: flex;
}

.demo-credentials p strong {
  min-width: 58px;
  color: var(--color-text);
}

.login-help {
  color: var(--color-text-muted);
  text-align: center;
  margin: 22px 0 0;
  font-size: 11px;
}

.login-help a {
  color: var(--color-primary);
  font-weight: 650;
}

.login-help small {
  color: #8b9594;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-left: 3px;
  font-size: 8px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .dashboard-overview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-overview-grid > .card:first-child {
    grid-row: span 2;
  }

  .login-page {
    grid-template-columns: minmax(320px, .8fr) minmax(440px, 1.2fr);
  }

  .login-brand-panel {
    padding-inline: 38px;
  }

  .customer-profile-grid {
    grid-template-columns: 1fr 1fr;
  }

  .customer-profile-grid > .card:last-child {
    grid-column: 1 / -1;
  }

  .vehicle-table {
    min-width: 960px;
  }

  .vehicle-hero {
    grid-template-columns: 1fr 1fr;
  }

  .service-form-columns, .service-summary-grid, .record-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sidebar {
    width: min(86vw, 290px);
    transition: transform .2s;
    transform: translateX(-102%);
    box-shadow: 12px 0 32px #14232124;
  }

  .sidebar--open {
    transform: translateX(0);
  }

  .sidebar__close, .mobile-menu {
    display: grid;
  }

  .sidebar-overlay {
    z-index: 35;
    background: #191f1e59;
    border: 0;
    position: fixed;
    inset: 0;
  }

  .app-shell__body {
    margin-left: 0;
  }

  .topbar {
    height: 60px;
    padding: 0 16px;
  }

  .topbar__notification {
    display: none;
  }

  .user-menu {
    min-width: 0;
  }

  .user-copy, .user-menu > svg {
    display: none;
  }

  .main {
    padding: 19px 16px 36px;
  }

  .breadcrumb {
    margin-bottom: 13px;
  }

  .page-heading {
    min-height: auto;
    margin-bottom: 18px;
  }

  .page-heading p {
    font-size: 13px;
  }

  .page-actions {
    margin: -4px 0 16px;
    position: static;
  }

  .page-actions .button {
    width: 100%;
  }

  .prototype-banner {
    align-items: flex-start;
  }

  .metrics-grid {
    gap: 10px;
  }

  .metric-card {
    min-height: 140px;
    padding: 16px;
  }

  .metric-icon {
    top: 14px;
    right: 14px;
  }

  .card__header {
    padding: 17px 16px 14px;
  }

  .activity-card .card__header .button {
    display: none;
  }

  .table thead {
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .table, .table tbody, .table tr, .table td {
    width: 100%;
    display: block;
  }

  .table tr {
    border-top: 1px solid var(--color-border);
    padding: 14px 16px;
  }

  .table td {
    text-align: right;
    border: 0;
    grid-template-columns: 120px 1fr;
    padding: 5px 0;
    display: grid;
  }

  .table td:before {
    content: attr(data-label);
    color: var(--color-text-muted);
    text-align: left;
    font-size: 11px;
  }

  .table td:first-child {
    text-align: left;
    padding-top: 0;
    padding-bottom: 11px;
    display: block;
  }

  .table td:first-child:before {
    display: none;
  }

  .table td .badge {
    margin-left: auto;
  }

  .reminder-list {
    padding-inline: 16px;
  }

  .dashboard-overview-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-overview-grid > .card:first-child {
    grid-row: auto;
  }

  .quick-actions, .activity-list {
    padding-inline: 16px;
  }

  .login-page {
    background: #fbfcfc;
    min-height: 100vh;
    display: block;
  }

  .login-brand-panel {
    display: none;
  }

  .login-form-panel {
    align-items: start;
    min-height: 100vh;
    padding: 26px 20px 40px;
  }

  .login-form-wrap {
    margin: 0 auto;
  }

  .login-mobile-brand {
    display: flex;
  }

  .prototype-notice {
    margin-bottom: 25px;
  }

  .customer-page-action {
    margin: -4px 0 16px;
    position: static;
  }

  .customer-page-action .button {
    width: 100%;
  }

  .customer-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .search-control, .filter-control select {
    width: 100%;
  }

  .customer-table-wrap {
    display: none;
  }

  .customer-mobile-list {
    display: grid;
  }

  .customer-mobile-card {
    border-top: 1px solid var(--color-border);
    padding: 16px;
  }

  .customer-mobile-card__header {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    display: flex;
  }

  .customer-mobile-card dl {
    border-top: 1px solid var(--color-border);
    grid-template-columns: 1fr 1fr;
    gap: 13px 18px;
    margin: 17px 0 0;
    padding-top: 14px;
    display: grid;
  }

  .customer-mobile-card dl div {
    min-width: 0;
  }

  .customer-mobile-card dt {
    color: var(--color-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 700;
  }

  .customer-mobile-card dd {
    margin: 0;
    font-size: 11px;
  }

  .pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination > div {
    justify-content: space-between;
  }

  .form-page-grid, .customer-profile-grid, .customer-detail-grid {
    grid-template-columns: 1fr;
  }

  .customer-profile-grid > .card:last-child {
    grid-column: auto;
  }

  .form-guidance {
    grid-row: 1;
  }

  .customer-form {
    padding-inline: 16px;
  }

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

  .form-grid .field:last-child {
    grid-column: auto;
  }

  .detail-actions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .detail-actions .button {
    width: 100%;
    min-width: 0;
  }

  .toast-position {
    inset: auto 16px 16px;
  }

  .toast-position .toast {
    width: 100%;
  }

  .profile-summary {
    min-height: 130px;
  }

  .vehicle-table-wrap {
    display: none;
  }

  .vehicle-mobile-list {
    display: grid;
  }

  .vehicle-mobile-card {
    border-top: 1px solid var(--color-border);
    padding: 16px;
  }

  .vehicle-mobile-card__header {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    display: flex;
  }

  .vehicle-mobile-card__header > div > strong {
    letter-spacing: .03em;
    font-size: 15px;
  }

  .vehicle-mobile-card__header p {
    color: var(--color-text-muted);
    margin: 3px 0 0;
    font-size: 11px;
  }

  .vehicle-mobile-card dl {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1fr 1fr;
    gap: 13px 18px;
    margin: 15px 0;
    padding: 14px 0;
    display: grid;
  }

  .vehicle-mobile-card dt {
    color: var(--color-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 700;
  }

  .vehicle-mobile-card dd {
    margin: 0;
    font-size: 11px;
  }

  .vehicle-mobile-card .button {
    width: 100%;
  }

  .vehicle-form-grid .field:last-child {
    grid-column: auto;
  }

  .vehicle-hero {
    grid-template-columns: 1fr;
  }

  .vehicle-hero__identity {
    border-right: 0;
  }

  .vehicle-hero__owner {
    border-top: 1px solid var(--color-border);
  }

  .vehicle-metrics {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }

  .vehicle-metrics > div {
    border-bottom: 1px solid var(--color-border);
  }

  .vehicle-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .vehicle-metrics > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .vehicle-detail-layout {
    grid-template-columns: 1fr;
  }

  .service-record-table-wrap {
    display: none;
  }

  .service-record-mobile-list {
    display: grid;
  }

  .service-record-mobile-card {
    border-top: 1px solid var(--color-border);
    padding: 16px;
  }

  .service-record-mobile-card header {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    display: flex;
  }

  .service-record-mobile-card header strong {
    font-size: 12px;
  }

  .service-record-mobile-card header p {
    color: var(--color-text-muted);
    margin: 3px 0 0;
    font-size: 10px;
  }

  .service-record-mobile-card dl {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin: 15px 0;
    padding: 14px 0;
    display: grid;
  }

  .service-record-mobile-card dt {
    color: var(--color-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
  }

  .service-record-mobile-card dd {
    margin: 3px 0 0;
    font-size: 11px;
  }

  .service-record-mobile-card .button {
    width: 100%;
  }

  .service-items__head {
    display: none;
  }

  .service-item {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-block: 16px;
  }

  .service-item > .field:first-child {
    grid-column: 1 / -1;
  }

  .item-subtotal {
    text-align: left;
    align-self: center;
    padding: 0;
  }

  .remove-item {
    justify-self: end;
  }

  .service-total {
    padding-right: 0;
  }

  .service-form-footer {
    flex-direction: column;
    align-items: stretch;
    position: static;
  }

  .service-form-footer > div:last-child {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .service-form-footer > div:last-child .button:last-child {
    grid-column: 1 / -1;
  }

  .attachment-placeholders {
    grid-template-columns: 1fr;
  }

  .attachment-placeholders > div {
    min-height: 150px;
  }

  .completed-actions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .completed-actions .button {
    width: 100%;
  }

  .service-summary-main dl {
    grid-template-columns: 1fr 1fr;
  }

  .service-summary-main dl > div:nth-child(2) {
    border-right: 0;
  }

  .service-summary-main dl > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }

  .record-items {
    overflow-x: auto;
  }

  .record-items__head, .record-item {
    min-width: 620px;
  }
}

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

  .metric-card {
    min-height: 126px;
  }

  .customer-mobile-card dl {
    grid-template-columns: 1fr;
  }

  .vehicle-summary-list article {
    grid-template-columns: auto 1fr;
  }

  .vehicle-summary-list article > div:last-child {
    text-align: left;
    grid-column: 2;
  }

  .service-summary-list article {
    grid-template-columns: 1fr auto;
  }

  .service-summary-list time {
    grid-column: 1 / -1;
  }

  .vehicle-mobile-card dl, .detail-actions {
    grid-template-columns: 1fr;
  }

  .vehicle-hero__identity {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
  }

  .vehicle-hero__identity .badge {
    grid-column: 2;
  }

  .vehicle-hero__identity h2 {
    font-size: 21px;
  }

  .vehicle-metrics {
    grid-template-columns: 1fr;
  }

  .vehicle-metrics > div {
    border-right: 0;
  }

  .vehicle-metrics > div:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }

  .vehicle-metrics > div:last-child {
    border-bottom: 0;
  }

  .service-timeline {
    padding-inline: 15px;
  }

  .timeline-entry__header {
    gap: 8px;
  }

  .timeline-entry dl, .service-record-mobile-card dl {
    grid-template-columns: 1fr;
  }

  .service-form-section, .service-items {
    padding-inline: 15px;
  }

  .service-item {
    grid-template-columns: 1fr;
  }

  .service-item > .field:first-child {
    grid-column: auto;
  }

  .item-subtotal {
    padding: 8px 0;
  }

  .remove-item {
    border: 1px solid var(--color-border);
    justify-self: stretch;
    width: 100%;
  }

  .completed-success {
    grid-template-columns: auto 1fr;
  }

  .completed-success > .badge {
    grid-column: 2;
  }

  .completed-actions, .service-summary-main dl {
    grid-template-columns: 1fr;
  }

  .service-summary-main dl > div {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .service-summary-main dl > div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/* [project]/app/service-records.css [app-client] (css) */
.service-detail-page {
  min-width: 0;
}

.service-detail-page .completed-success {
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  border: 1px solid #cce2d5;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
  padding: 18px 20px;
  display: grid;
}

.service-detail-page .completed-success > span {
  width: 46px;
  height: 46px;
  color: var(--color-success);
  background: #fff;
  border-radius: 13px;
  place-items: center;
  display: grid;
}

.service-detail-page .completed-success small {
  color: var(--color-success);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 750;
}

.service-detail-page .completed-success h2 {
  margin: 3px 0 0;
  font-size: 17px;
}

.service-detail-page .completed-success p {
  color: #526a5d;
  margin: 3px 0 0;
  font-size: 11px;
}

.service-detail-page .completed-actions {
  justify-content: flex-end;
  gap: 9px;
  margin-bottom: 16px;
  display: flex;
}

.service-detail-page .service-summary-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 16px;
  min-width: 0;
  margin-bottom: 16px;
  display: grid;
}

.service-detail-page .service-summary-grid > .card, .service-detail-page .record-detail-grid > .card {
  min-width: 0;
}

.service-detail-page .service-summary-main {
  padding: 2px 21px 21px;
}

.service-detail-page .service-summary-main h2 {
  margin: 0;
  font-size: 18px;
}

.service-detail-page .service-summary-main > p {
  color: var(--color-text-muted);
  margin: 7px 0 18px;
  font-size: 11px;
  line-height: 1.6;
}

.service-detail-page .service-summary-main dl {
  border: 1px solid var(--color-border);
  background: #fafbfb;
  border-radius: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  display: grid;
  overflow: hidden;
}

.service-detail-page .service-summary-main dl > div {
  border-right: 1px solid var(--color-border);
  min-width: 0;
  padding: 13px;
}

.service-detail-page .service-summary-main dl > div:last-child {
  border-right: 0;
}

.service-detail-page .service-summary-main dt, .service-detail-page .record-party-list dt {
  color: var(--color-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
}

.service-detail-page .service-summary-main dd {
  margin: 5px 0 0;
  font-size: 11px;
  font-weight: 650;
}

.service-detail-page .record-party-list {
  margin: 0;
  padding: 0 20px 16px;
}

.service-detail-page .record-party-list > div {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  display: grid;
}

.service-detail-page .record-party-list dt {
  align-items: center;
  gap: 7px;
  display: flex;
}

.service-detail-page .record-party-list dd {
  overflow-wrap: anywhere;
  text-align: right;
  margin: 0;
  font-size: 10px;
}

.service-detail-page .record-party-list dd strong, .service-detail-page .record-party-list dd span {
  display: block;
}

.service-detail-page .record-party-list dd span {
  color: var(--color-text-muted);
  margin-top: 2px;
}

.service-detail-page .record-detail-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 16px;
  min-width: 0;
  display: grid;
}

.service-detail-page .record-items {
  padding: 0 20px 18px;
}

.service-detail-page .record-items__head, .service-detail-page .record-item {
  grid-template-columns: minmax(170px, 1.4fr) .55fr .35fr .65fr .65fr;
  align-items: center;
  gap: 12px;
  display: grid;
}

.service-detail-page .record-items__head {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 0;
  font-size: 9px;
  font-weight: 700;
}

.service-detail-page .record-item {
  border-top: 1px solid var(--color-border);
  padding: 13px 0;
  font-size: 10px;
}

.service-detail-page .record-item > :not(:first-child), .service-detail-page .record-items__head > :not(:first-child) {
  text-align: right;
}

.service-detail-page .record-items__total {
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
  gap: 28px;
  padding-top: 14px;
  display: flex;
}

.service-detail-page .record-notes {
  padding: 0 20px 20px;
}

.service-detail-page .record-notes > div {
  border-top: 1px solid var(--color-border);
  padding: 12px 0;
}

.service-detail-page .record-notes small {
  color: var(--color-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
}

.service-detail-page .record-notes p {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.65;
}

.service-detail-page .record-back {
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .service-detail-page .service-summary-grid, .service-detail-page .record-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .service-detail-page .completed-actions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .service-detail-page .completed-actions .button {
    width: 100%;
    min-width: 0;
  }

  .service-detail-page .service-summary-main dl {
    grid-template-columns: 1fr 1fr;
  }

  .service-detail-page .service-summary-main dl > div:nth-child(2) {
    border-right: 0;
  }

  .service-detail-page .service-summary-main dl > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }

  .service-detail-page .record-items__head {
    display: none;
  }

  .service-detail-page .record-items {
    overflow: visible;
  }

  .service-detail-page .record-item {
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    min-width: 0;
    padding: 15px 0;
  }

  .service-detail-page .record-item > * {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    display: grid;
    text-align: right !important;
  }

  .service-detail-page .record-item > :before {
    content: attr(data-label);
    color: var(--color-text-muted);
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
  }

  .service-detail-page .record-item > :first-child {
    grid-column: 1 / -1;
  }

  .service-detail-page .record-items__total {
    justify-content: space-between;
  }
}

@media (max-width: 470px) {
  .service-detail-page .completed-success {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px;
  }

  .service-detail-page .completed-success > .badge {
    grid-column: 2;
  }

  .service-detail-page .completed-actions, .service-detail-page .service-summary-main dl {
    grid-template-columns: 1fr;
  }

  .service-detail-page .service-summary-main dl > div {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .service-detail-page .service-summary-main dl > div:last-child {
    border-bottom: 0;
  }

  .service-detail-page .record-item {
    grid-template-columns: 1fr;
  }

  .service-detail-page .record-item > :first-child {
    grid-column: auto;
  }

  .service-detail-page .record-back .button {
    width: 100%;
  }
}

/* [project]/app/dashboard/dashboard.css [app-client] (css) */
.dashboard-shell {
  --sidebar-width: 260px;
  --topbar-height: 72px;
  --dashboard-ink: #1d1d1f;
  --dashboard-muted: #6e6e73;
  --dashboard-line: #e6e6eb;
  --dashboard-surface: #fff;
  --dashboard-tertiary: #fbfbfd;
  min-height: 100vh;
  color: var(--dashboard-ink);
  -webkit-font-smoothing: antialiased;
  background: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro Text, Inter, sans-serif;
}

.dashboard-shell .app-shell__body {
  background: #f5f5f7;
}

.dashboard-shell .sidebar {
  border-right-color: var(--dashboard-line);
  background: #fbfbfdf5;
}

.dashboard-shell .sidebar__brand {
  border-bottom-color: #ededf1;
}

.dashboard-shell .brand-mark {
  color: #fff;
  background: #242528;
  border-radius: 12px;
  box-shadow: 0 5px 14px #1414162e;
}

.dashboard-shell .workshop-switcher {
  background: #fff;
  border-color: #ececf0;
  border-radius: 16px;
  margin: 18px 14px 12px;
  box-shadow: 0 5px 18px #19191c0b;
}

.dashboard-shell .workshop-avatar {
  color: #4b5055;
  background: #eceef0;
  border-radius: 11px;
}

.dashboard-shell .sidebar__nav {
  padding: 7px 12px;
}

.dashboard-shell .nav-item {
  color: #66676c;
  border-radius: 13px;
  min-height: 46px;
  transition: color .16s, background-color .16s, box-shadow .16s;
}

.dashboard-shell .nav-item:hover {
  color: #242528;
  background: #f1f1f4;
}

.dashboard-shell .nav-item--active {
  color: #1d1d1f;
  background: #fff;
  box-shadow: 0 4px 15px #1d1d1f12;
}

.dashboard-shell .nav-item--active svg {
  color: #4b728e;
}

.dashboard-shell .sidebar__footer {
  color: #85858b;
  border-top-color: #ededf1;
}

.dashboard-shell .topbar {
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  background: #f5f5f7d6;
  border-bottom-color: #dcdce1d1;
}

.dashboard-shell .icon-button, .dashboard-shell .user-menu, .dashboard-shell .mobile-menu {
  border-radius: 12px;
}

.dashboard-shell .user-menu:hover {
  background: #ffffffc7;
}

.dashboard-shell .user-avatar {
  color: #fff;
  background: #27282b;
}

.dashboard-shell .main {
  width: min(100%, 1440px);
  padding: 30px 34px 54px;
}

.dashboard-shell .breadcrumb {
  color: #8a8a90;
  margin-bottom: 18px;
}

.dashboard-shell .breadcrumb strong {
  color: #56565b;
}

.dashboard-shell .page-heading {
  margin-bottom: 22px;
}

.dashboard-shell .page-heading h1 {
  color: var(--dashboard-ink);
  letter-spacing: -.045em;
  font-size: clamp(2rem, 3vw, 2.45rem);
  font-weight: 650;
}

.dashboard-shell .page-heading p {
  color: var(--dashboard-muted);
  margin-top: 8px;
  font-size: .98rem;
}

.dashboard-shell .prototype-banner {
  color: #717177;
  background: #ffffffc2;
  border: 1px solid #e7e7ec;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 3px 14px #1d1d1f08;
}

.dashboard-shell .prototype-banner span {
  color: #4c5156;
  background: #e9ebed;
}

.dashboard-shell .card {
  background: var(--dashboard-surface);
  border: 1px solid #e0e0e6e6;
  border-radius: 22px;
  box-shadow: 0 2px 7px #19191c09, 0 14px 34px #19191c0b;
}

.dashboard-shell .card__header {
  padding: 24px 24px 19px;
}

.dashboard-shell .card__heading {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.dashboard-shell .card__heading-icon {
  color: #656970;
  background: #f2f2f5;
  border-radius: 14px;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.dashboard-shell .card__title {
  color: var(--dashboard-ink);
  letter-spacing: -.018em;
  font-size: 1.08rem;
  font-weight: 650;
}

.dashboard-shell .card__description {
  color: #838388;
  margin-top: 4px;
  line-height: 1.45;
}

.dashboard-shell .metrics-grid {
  gap: 16px;
  margin-bottom: 18px;
}

.dashboard-shell .metric-card {
  min-height: 168px;
  padding: 22px;
}

.dashboard-shell .metric-icon {
  color: #62676c;
  background: #f1f1f4;
  border-radius: 14px;
  width: 43px;
  height: 43px;
  margin-bottom: 22px;
}

.dashboard-shell .metric-icon--warning {
  color: #a86518;
  background: #fff4e5;
}

.dashboard-shell .metric-card p {
  color: #74747a;
  letter-spacing: 0;
  text-transform: none;
  font-size: .79rem;
  font-weight: 560;
}

.dashboard-shell .metric-card strong {
  color: var(--dashboard-ink);
  letter-spacing: -.04em;
  margin-top: 6px;
  font-size: 2.12rem;
  font-weight: 650;
}

.dashboard-shell .metric-detail {
  color: #8a8a90;
  margin-top: 5px;
  font-weight: 500;
}

.dashboard-shell .metric-detail--warning {
  color: #a86518;
}

.dashboard-shell .dashboard-overview-grid {
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, .64fr);
  grid-template-areas: "activity actions"
                       "activity reminders";
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-shell .dashboard-activity-card {
  grid-area: activity;
}

.dashboard-shell .dashboard-actions-card {
  grid-area: actions;
}

.dashboard-shell .dashboard-reminders-card {
  grid-area: reminders;
}

.dashboard-shell .activity-list, .dashboard-shell .quick-actions, .dashboard-shell .reminder-list {
  padding: 0 24px 24px;
}

.dashboard-shell .activity-item {
  border-bottom-color: #ededf1;
  padding: 17px 0;
}

.dashboard-shell .activity-item time {
  color: #77777d;
  font-variant-numeric: tabular-nums;
}

.dashboard-shell .activity-item strong, .dashboard-shell .reminder-item strong {
  color: #2a2a2d;
  font-weight: 620;
}

.dashboard-shell .activity-item p, .dashboard-shell .reminder-item p {
  color: #808086;
  margin-top: 4px;
}

.dashboard-shell .quick-actions {
  gap: 9px;
}

.dashboard-shell .quick-actions .button {
  background: var(--dashboard-tertiary);
  color: #5e6065;
  min-height: 52px;
  box-shadow: none;
  border-color: #ededf1;
  border-radius: 14px;
  justify-content: flex-start;
}

.dashboard-shell .quick-actions .button small {
  color: #9a9aa0;
  margin-left: auto;
}

.dashboard-shell .reminder-item {
  border-bottom-color: #ededf1;
  padding: 15px 0;
}

.dashboard-shell .reminder-date {
  color: #52565b;
  background: #f2f2f5;
  border-radius: 13px;
}

.dashboard-shell .recent-records .table-wrap {
  padding: 0 24px 24px;
}

.dashboard-shell .table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ededf1;
  border-radius: 15px;
  overflow: hidden;
}

.dashboard-shell .table th {
  color: #77777d;
  letter-spacing: .025em;
  background: #f7f7f9;
  font-size: .73rem;
}

.dashboard-shell .table th, .dashboard-shell .table td {
  border-bottom-color: #ededf1;
}

.dashboard-shell .table tbody tr:hover {
  background: #fafafd;
}

.dashboard-shell .table td {
  color: #505055;
}

.dashboard-shell .table td strong {
  color: #29292c;
  font-weight: 620;
}

.dashboard-shell .badge {
  border-radius: 999px;
}

.dashboard-shell .button {
  border-radius: 12px;
  min-height: 42px;
  font-weight: 620;
  transition: color .16s, background-color .16s, border-color .16s, box-shadow .16s;
}

.dashboard-shell .button:active:not(:disabled) {
  transform: none;
}

.dashboard-shell .button--primary {
  color: #fff;
  background: #292a2d;
  box-shadow: 0 5px 14px #1d1d1f21;
}

.dashboard-shell .button--primary:hover:not(:disabled) {
  background: #3a3b3f;
}

.dashboard-shell .button--secondary {
  color: #4e4f54;
  background: #fff;
  border-color: #dedee4;
  box-shadow: 0 2px 7px #1d1d1f06;
}

.dashboard-shell .button--secondary:hover:not(:disabled) {
  background: #f8f8fa;
  border-color: #ceced5;
}

.dashboard-shell .button--ghost {
  color: #4b728e;
}

.dashboard-shell .input, .dashboard-shell .select, .dashboard-shell .textarea {
  color: #2d2d30;
  background: #fff;
  border-color: #dedee4;
  border-radius: 13px;
  box-shadow: 0 1px 2px #1d1d1f05;
}

.dashboard-shell .input, .dashboard-shell .select {
  height: 46px;
  padding-inline: 14px;
}

.dashboard-shell .textarea {
  min-height: 112px;
  padding: 12px 14px;
}

.dashboard-shell .input:hover, .dashboard-shell .select:hover, .dashboard-shell .textarea:hover {
  border-color: #c7c7ce;
}

.dashboard-shell .input:focus, .dashboard-shell .select:focus, .dashboard-shell .textarea:focus {
  border-color: #7997ad;
  box-shadow: 0 0 0 4px #4b728e1c;
}

.dashboard-shell .field label {
  color: #55565b;
  margin-bottom: 8px;
  font-weight: 610;
}

.dashboard-shell .field__hint {
  color: #8a8a90;
}

.dashboard-shell .customer-page-action {
  top: 64px;
  right: 34px;
}

.dashboard-shell .customer-toolbar {
  border-bottom-color: #ededf1;
  gap: 14px;
  padding: 19px 20px;
}

.dashboard-shell .search-control, .dashboard-shell .filter-control {
  color: #777980;
  background: #fbfbfd;
  border-color: #dedee4;
  border-radius: 13px;
  height: 44px;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}

.dashboard-shell .search-control {
  width: min(480px, 100%);
  padding-inline: 13px;
}

.dashboard-shell .filter-control {
  padding-inline: 12px 9px;
}

.dashboard-shell .search-control:focus-within, .dashboard-shell .filter-control:focus-within {
  background: #fff;
  border-color: #7997ad;
  box-shadow: 0 0 0 4px #4b728e1a;
}

.dashboard-shell .search-control input, .dashboard-shell .filter-control select {
  color: #343438;
  font-size: .78rem;
}

.dashboard-shell .customer-identity > span:first-child, .dashboard-shell .profile-avatar, .dashboard-shell .vehicle-hero__identity > span {
  color: #59636b;
  background: #f0f1f3;
}

.dashboard-shell .customer-identity > span:last-child {
  min-width: 0;
}

.dashboard-shell .customer-identity strong, .dashboard-shell .customer-identity small {
  display: block;
}

.dashboard-shell .customer-identity small {
  color: #85868c;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
}

.dashboard-shell .customer-identity:hover strong, .dashboard-shell .vehicle-identity:hover strong {
  color: #375f7a;
}

.dashboard-shell .row-actions summary, .dashboard-shell .table-view-action {
  color: #73757b;
  border-radius: 11px;
}

.dashboard-shell .table-view-action {
  background: #fbfbfd;
  border-color: #e2e2e7;
}

.dashboard-shell .row-actions summary:hover, .dashboard-shell .table-view-action:hover {
  color: #4b728e;
  background: #f3f3f6;
  border-color: #d2d2d8;
}

.dashboard-shell .row-actions > div {
  border-color: #e3e3e8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 38px #1d1d1f21;
}

.dashboard-shell .row-actions > div a:hover {
  color: #375f7a;
  background: #f6f6f8;
}

.dashboard-shell .pagination {
  border-top-color: #ededf1;
  padding: 17px 20px;
}

.dashboard-shell .customer-mobile-card, .dashboard-shell .vehicle-mobile-card, .dashboard-shell .service-record-mobile-card {
  background: #fff;
  border-color: #e5e5ea;
  border-radius: 17px;
  box-shadow: 0 7px 22px #1d1d1f0b;
}

.dashboard-shell .form-page-grid {
  grid-template-columns: minmax(0, 800px) minmax(240px, 310px);
  gap: 20px;
}

.dashboard-shell .customer-form, .dashboard-shell .service-form-section {
  padding: 4px 24px 24px;
}

.dashboard-shell .form-grid {
  gap: 20px 18px;
}

.dashboard-shell .form-actions {
  border-top-color: #ededf1;
  margin-top: 28px;
  padding-top: 20px;
}

.dashboard-shell .form-guidance {
  color: #64727c;
  background: #f9f9fb;
  border-color: #e1e4e7;
  border-radius: 17px;
  gap: 12px;
  padding: 18px;
}

.dashboard-shell .form-guidance p {
  color: #7b7d83;
  line-height: 1.65;
}

.dashboard-shell .success-feedback, .dashboard-shell .completed-success {
  border-radius: 15px;
}

.dashboard-shell .detail-actions, .dashboard-shell .completed-actions {
  margin-bottom: 18px;
}

.dashboard-shell .customer-profile-grid, .dashboard-shell .customer-detail-grid, .dashboard-shell .vehicle-detail-layout, .dashboard-shell .service-summary-grid, .dashboard-shell .record-detail-grid, .dashboard-shell .service-form-columns {
  gap: 18px;
}

.dashboard-shell .profile-summary {
  min-height: 180px;
  padding: 25px;
}

.dashboard-shell .profile-avatar {
  border-radius: 21px;
  width: 66px;
  height: 66px;
}

.dashboard-shell .contact-list, .dashboard-shell .detail-list, .dashboard-shell .vehicle-summary-list, .dashboard-shell .service-summary-list, .dashboard-shell .record-party-list, .dashboard-shell .record-notes {
  padding-left: 24px;
  padding-right: 24px;
}

.dashboard-shell .contact-list > div, .dashboard-shell .detail-list > div, .dashboard-shell .vehicle-summary-list article, .dashboard-shell .service-summary-list article, .dashboard-shell .record-party-list > div, .dashboard-shell .record-notes > div {
  border-top-color: #ededf1;
}

.dashboard-shell .notes-content {
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 24px;
}

.dashboard-shell .vehicle-icon {
  color: #686c72;
  background: #f2f2f5;
  border-radius: 13px;
}

.dashboard-shell .vehicle-hero {
  border-radius: 22px;
  margin-bottom: 18px;
}

.dashboard-shell .vehicle-hero__identity, .dashboard-shell .vehicle-hero__owner {
  padding: 25px;
}

.dashboard-shell .vehicle-hero__identity, .dashboard-shell .vehicle-metrics > div {
  border-color: #ededf1;
}

.dashboard-shell .vehicle-metrics, .dashboard-shell .service-summary-main dl {
  background: #f8f8fa;
  border-color: #ededf1;
}

.dashboard-shell .vehicle-metrics > div {
  padding: 17px 24px;
}

.dashboard-shell .service-timeline, .dashboard-shell .service-items, .dashboard-shell .record-items {
  padding-left: 24px;
  padding-right: 24px;
}

.dashboard-shell .timeline-entry, .dashboard-shell .attachment-placeholders > div {
  background: #fafafd;
  border-radius: 15px;
}

.dashboard-shell .service-form {
  gap: 18px;
}

.dashboard-shell .service-items__head, .dashboard-shell .service-item, .dashboard-shell .service-total, .dashboard-shell .record-items__head, .dashboard-shell .record-item, .dashboard-shell .record-items__total {
  border-color: #ededf1;
}

.dashboard-shell .attachment-placeholders {
  gap: 14px;
  padding: 4px 24px 24px;
}

.dashboard-shell .attachment-placeholders > div {
  border-color: #dcdce2;
}

.dashboard-shell .service-form-footer {
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-color: #dedee4;
  border-radius: 17px;
  box-shadow: 0 -8px 30px #1d1d1f0e;
}

.dashboard-shell .service-detail-page .service-summary-main dl {
  border-radius: 15px;
}

.dashboard-shell .toast {
  border-color: #e0e0e5;
  border-radius: 17px;
  box-shadow: 0 18px 46px #1d1d1f26;
}

.dashboard-shell .dialog-backdrop {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #1414175c;
}

.dashboard-shell .dialog {
  border-color: #e0e0e5;
  border-radius: 22px;
  box-shadow: 0 28px 80px #1414173b;
}

.dashboard-shell .state {
  padding: 58px 26px;
}

.dashboard-shell .state__icon {
  color: #6b6f75;
  background: #f1f1f4;
  border-radius: 15px;
  width: 48px;
  height: 48px;
}

@media (max-width: 1180px) {
  .dashboard-shell .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-shell .dashboard-overview-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "activity"
                         "reminders"
                         "actions";
  }
}

@media (max-width: 760px) {
  .dashboard-shell {
    --topbar-height: 64px;
  }

  .dashboard-shell .main {
    padding: 22px 16px 42px;
  }

  .dashboard-shell .breadcrumb {
    margin-bottom: 14px;
  }

  .dashboard-shell .page-heading {
    margin-bottom: 18px;
  }

  .dashboard-shell .page-heading h1 {
    font-size: 2rem;
  }

  .dashboard-shell .card {
    border-radius: 20px;
  }

  .dashboard-shell .metric-card {
    min-height: 155px;
    padding: 19px;
  }

  .dashboard-shell .card__header {
    padding: 20px 19px 17px;
  }

  .dashboard-shell .activity-list, .dashboard-shell .quick-actions, .dashboard-shell .reminder-list, .dashboard-shell .recent-records .table-wrap {
    padding-left: 19px;
    padding-right: 19px;
  }

  .dashboard-shell .recent-records .table {
    border: 0;
    border-radius: 0;
  }

  .dashboard-shell .customer-page-action {
    margin: -2px 0 16px;
    position: static;
  }

  .dashboard-shell .customer-page-action .button {
    width: 100%;
  }

  .dashboard-shell .customer-toolbar {
    padding: 16px;
  }

  .dashboard-shell .search-control, .dashboard-shell .filter-control {
    width: 100%;
  }

  .dashboard-shell .form-page-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-shell .customer-form, .dashboard-shell .service-form-section, .dashboard-shell .service-items, .dashboard-shell .record-items, .dashboard-shell .contact-list, .dashboard-shell .detail-list, .dashboard-shell .vehicle-summary-list, .dashboard-shell .service-summary-list, .dashboard-shell .record-party-list, .dashboard-shell .record-notes, .dashboard-shell .notes-content {
    padding-left: 19px;
    padding-right: 19px;
  }

  .dashboard-shell .customer-mobile-card, .dashboard-shell .vehicle-mobile-card, .dashboard-shell .service-record-mobile-card {
    margin-inline: 16px;
  }
}

@media (max-width: 470px) {
  .dashboard-shell .metrics-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-shell .metric-card {
    min-height: 148px;
  }

  .dashboard-shell .prototype-banner {
    align-items: flex-start;
  }

  .dashboard-shell .card__heading-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}

/* [project]/app/public-vehicle.css [app-client] (css) */
.pv-page, .pv-state-page {
  --pv-ink: #1d1d1f;
  --pv-muted: #6e6e73;
  --pv-line: #e8e8ed;
  --pv-accent: #4d535a;
  --pv-accent-soft: #f3f3f5;
  --pv-blue: #477da8;
  --pv-blue-soft: #f0f6fb;
  --pv-surface: #fff;
  min-height: 100vh;
  color: var(--pv-ink);
  -webkit-font-smoothing: antialiased;
  background: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro Text, system-ui, sans-serif;
}

.pv-page {
  width: 100%;
  padding-bottom: 34px;
}

.pv-header {
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  background: #f5f5f7e0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 20px;
  display: flex;
}

.pv-brand {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.pv-brand > span {
  color: #fff;
  background: #222326;
  border-radius: 13px;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 10px;
  font-weight: 750;
  display: grid;
  box-shadow: 0 2px 8px #0000001f;
}

.pv-brand small, .pv-brand strong {
  display: block;
}

.pv-brand small {
  color: var(--pv-muted);
  letter-spacing: .01em;
  margin-bottom: 3px;
  font-size: 10px;
}

.pv-brand strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
}

.pv-contact {
  color: #34383d;
  background: #fff;
  border: 1px solid #0000000d;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 650;
  transition: transform .2s, box-shadow .2s, background .2s;
  display: inline-flex;
  box-shadow: 0 2px 8px #0000000d;
}

.pv-contact:hover {
  background: #fbfbfd;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px #00000014;
}

.pv-hero {
  background: var(--pv-surface);
  border-radius: 28px;
  margin: 10px 12px 0;
  overflow: hidden;
  box-shadow: 0 2px 8px #0000000a, 0 16px 40px #0000000d;
}

.pv-vehicle-visual {
  isolation: isolate;
  aspect-ratio: 4 / 2.9;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.pv-vehicle-visual:before, .pv-vehicle-visual:after {
  z-index: 0;
  filter: blur(7px);
  content: "";
  background: #00000073;
  border-radius: 50%;
  width: 18%;
  height: 5%;
  position: absolute;
  bottom: 9.6%;
  transform: scaleY(.42);
}

.pv-vehicle-visual:before {
  left: 14.5%;
}

.pv-vehicle-visual:after {
  right: 14.5%;
}

.pv-car-ground-shadow {
  z-index: 0;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  transform-origin: top;
  background: radial-gradient(at 50% 12%, #0000006b 0, #00000045 32%, #00000021 58%, #0000 82%);
  height: 9%;
  position: absolute;
  bottom: 8.7%;
  left: 22%;
  right: 22%;
  transform: scaleY(.68);
}

.pv-vehicle-visual img {
  z-index: 1;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 6px #00000026);
  width: 100%;
  height: 100%;
  padding: 28px 25px 5px;
  position: relative;
}

.pv-vehicle-copy {
  padding: 24px 22px 8px;
}

.pv-vehicle-title {
  grid-template-columns: minmax(0, 1fr) minmax(148px, auto);
  align-items: end;
  gap: 20px;
  display: grid;
}

.pv-vehicle-title h1.pv-vehicle-plate {
  color: var(--pv-ink);
  letter-spacing: .02em;
  white-space: nowrap;
  margin: 0;
  font-size: clamp(28px, 7.2vw, 34px);
  font-weight: 640;
  line-height: 1.06;
}

.pv-vehicle-title .pv-vehicle-model {
  color: #3f3f43;
  letter-spacing: -.015em;
  margin: 9px 0 0;
  font-size: clamp(17px, 4.5vw, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.pv-copy-vin {
  box-sizing: border-box;
  appearance: none;
  color: #68686e;
  width: 80px;
  height: 40px;
  font: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  background: none;
  border: 1px solid #e5e5ea;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  transition: border-color .2s, background .2s, color .2s;
  display: inline-flex;
}

.pv-copy-vin svg {
  flex: none;
  display: block;
  transform: translateY(0);
}

.pv-copy-vin span {
  line-height: 1;
  display: block;
  transform: translateY(2.5px);
}

.pv-copy-vin:hover {
  background: #f7f7f9;
  border-color: #d5d5da;
}

.pv-copy-vin:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #477da8;
}

.pv-copy-vin.is-copied {
  color: #34704d;
  background: #eef7f1;
  border-color: #d8eadf;
}

.pv-verification {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.pv-vehicle-title .pv-vehicle-updated {
  color: var(--pv-muted);
  white-space: nowrap;
  margin: 10px 0 0;
  font-size: 9px;
  line-height: 1.4;
}

.pv-verified {
  color: #34704d;
  white-space: nowrap;
  background: #edf6f0;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.pv-summary-stats {
  border: 1px solid var(--pv-line);
  background: #fbfbfd;
  border-radius: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 20px 22px 24px;
  display: grid;
  overflow: hidden;
}

.pv-summary-vin {
  border-bottom: 1px solid var(--pv-line);
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 76px;
  padding: 14px 16px;
  display: flex;
}

.pv-summary-vin > div {
  min-width: 0;
}

.pv-summary-vin span, .pv-summary-vin strong {
  display: block;
}

.pv-summary-vin span {
  color: var(--pv-muted);
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 500;
}

.pv-summary-vin strong {
  color: #4f5055;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
}

.pv-summary-service {
  background: none;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 18px 16px;
  display: flex;
  position: relative;
}

.pv-summary-service + .pv-summary-service {
  border-left: 1px solid var(--pv-line);
}

.pv-summary-service > svg {
  color: #7b8086;
  stroke-width: 1.6px;
  margin-bottom: 18px;
}

.pv-summary-service > span {
  min-height: 0;
  color: var(--pv-muted);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 500;
}

.pv-summary-service > strong {
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 620;
  line-height: 1.05;
  overflow: hidden;
}

.pv-summary-service > small {
  color: #656a70;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

.pv-section {
  background: var(--pv-surface);
  border-radius: 26px;
  margin: 16px 12px 0;
  padding: 24px 20px;
  box-shadow: 0 2px 8px #0000000a, 0 12px 32px #00000008;
}

.pv-section-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.pv-section-heading > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.pv-section-heading > div > div {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 38px;
  display: flex;
}

.pv-section-icon {
  color: #62676d;
  background: #f5f5f7;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.pv-section-icon svg {
  stroke-width: 1.6px;
}

.pv-section-heading small, .pv-section-heading h2 {
  display: block;
}

.pv-section-heading small {
  color: var(--pv-muted);
  letter-spacing: 0;
  font-size: 10px;
  line-height: 1.15;
}

.pv-section-heading h2 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 20px;
  font-weight: 620;
  line-height: 1.08;
}

.pv-complete {
  color: #34704d;
  background: #eaf5ee;
  border-radius: 99px;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 750;
  display: inline-flex;
}

.pv-latest-card {
  background: #fbfbfd;
  border: 0;
  border-radius: 19px;
  overflow: hidden;
}

.pv-service-top {
  border-bottom: 1px solid var(--pv-line);
  background: none;
  padding: 16px;
}

.pv-service-top h3, .pv-timeline-item h3 {
  margin: 0;
  font-size: 14px;
}

.pv-service-top p, .pv-timeline-item p {
  color: var(--pv-muted);
  margin: 4px 0 0;
  font-size: 10px;
}

.pv-service-details {
  padding: 7px 18px 18px;
}

.pv-item-row {
  border-bottom: 1px solid var(--pv-line);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  display: flex;
}

.pv-item-copy {
  min-width: 0;
}

.pv-item-copy span, .pv-item-copy small {
  display: block;
}

.pv-item-copy span {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
}

.pv-item-copy small {
  color: var(--pv-muted);
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.35;
}

.pv-item-row > strong {
  color: #3f4044;
  white-space: nowrap;
  flex: none;
  font-size: 11px;
  font-weight: 620;
  line-height: 1.2;
}

.pv-total {
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 8px;
  font-size: 12px;
  display: flex;
}

.pv-total strong {
  font-size: 15px;
}

.pv-note {
  border: 1px solid var(--pv-line);
  color: #62676d;
  background: #fff;
  border-radius: 13px;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  display: grid;
}

.pv-note > svg {
  align-self: start;
}

.pv-note p {
  color: #526562;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.pv-note strong {
  color: var(--pv-ink);
  margin-bottom: 2px;
  font-size: 10px;
  display: block;
}

.pv-invoice-placeholder {
  margin-top: 12px;
}

.pv-invoice-placeholder > div {
  width: 100%;
  color: var(--pv-accent);
  border: 1px dashed #cad7d4;
  border-radius: 12px;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 1px 7px;
  padding: 13px;
  display: grid;
}

.pv-invoice-placeholder svg {
  grid-row: 1 / 3;
  align-self: center;
}

.pv-invoice-placeholder span {
  color: var(--pv-ink);
  font-size: 10px;
  font-weight: 700;
}

.pv-invoice-placeholder small {
  color: var(--pv-muted);
  font-size: 8px;
}

.pv-history-filters {
  scrollbar-width: none;
  background: #f5f5f7;
  border-radius: 12px;
  gap: 3px;
  margin: -2px 0 20px;
  padding: 3px;
  display: flex;
  overflow-x: auto;
}

.pv-history-filters::-webkit-scrollbar {
  display: none;
}

.pv-history-filters button {
  appearance: none;
  color: #74747a;
  min-width: max-content;
  min-height: 34px;
  font: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  flex: 1 0 auto;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 600;
  transition: background .18s, box-shadow .18s, color .18s;
}

.pv-history-filters button:hover {
  color: #3f4044;
}

.pv-history-filters button[aria-pressed="true"] {
  color: var(--pv-ink);
  background: #fff;
  box-shadow: 0 1px 4px #00000014;
}

.pv-history-filters button:focus-visible {
  outline-offset: -1px;
  outline: 2px solid #477da8;
}

.pv-timeline {
  border-left: 1px solid #d8d8dd;
  margin-left: 11px;
}

.pv-timeline-item {
  padding: 0 0 16px 24px;
  position: relative;
}

.pv-timeline-dot {
  background: #747a80;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 23px;
  left: -5px;
  box-shadow: 0 0 0 1px #b6b9bd;
}

.pv-timeline-item details {
  background: #fbfbfd;
  border: 0;
  border-radius: 18px;
  transition: background .2s;
  overflow: hidden;
}

.pv-timeline-item details:hover {
  background: #f7f7f9;
}

.pv-timeline-item summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 17px 18px;
  list-style: none;
  display: flex;
}

.pv-timeline-item summary::-webkit-details-marker {
  display: none;
}

.pv-timeline-item time {
  color: var(--pv-muted);
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  display: block;
}

.pv-record-meta {
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  display: flex;
}

.pv-record-meta time {
  margin: 0;
}

.pv-record-type {
  color: #6e6e73;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: #ededf0;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
}

.pv-timeline-item summary > svg {
  color: var(--pv-muted);
  flex: none;
  transition: transform .15s;
}

.pv-timeline-item details[open] summary > svg {
  transform: rotate(180deg);
}

.pv-timeline-item details[open] summary {
  border-bottom: 1px solid var(--pv-line);
}

.pv-empty {
  text-align: center;
  border: 1px dashed #cad7d4;
  border-radius: 13px;
  place-items: center;
  padding: 34px 18px;
  display: grid;
}

.pv-empty > span {
  background: var(--pv-accent-soft);
  width: 42px;
  height: 42px;
  color: var(--pv-accent);
  border-radius: 12px;
  place-items: center;
  display: grid;
}

.pv-empty h3 {
  margin: 12px 0 5px;
  font-size: 14px;
}

.pv-empty p {
  max-width: 280px;
  color: var(--pv-muted);
  margin: 0;
  font-size: 10px;
}

.pv-future-actions {
  background: #fff;
  border: 0;
  border-radius: 26px;
  gap: 10px;
  margin: 16px 12px 0;
  padding: 22px 20px;
  display: grid;
  box-shadow: 0 2px 8px #0000000a, 0 12px 32px #00000008;
}

.pv-future-actions > div {
  color: #62676d;
  gap: 10px;
  margin-bottom: 6px;
  display: flex;
}

.pv-future-actions > div span {
  color: var(--pv-ink);
}

.pv-future-actions strong, .pv-future-actions small {
  display: block;
}

.pv-future-actions strong {
  font-size: 12px;
}

.pv-future-actions small {
  color: var(--pv-muted);
  margin-top: 3px;
  font-size: 9px;
}

.pv-future-actions button {
  border: 1px solid var(--pv-line);
  color: #7a8784;
  cursor: not-allowed;
  background: #f7f9f8;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 43px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.pv-future-actions em {
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #e8edec;
  border-radius: 99px;
  margin-left: 3px;
  padding: 3px 5px;
  font-size: 7px;
  font-style: normal;
}

.pv-footer {
  color: var(--pv-muted);
  text-align: center;
  place-items: center;
  padding: 36px 18px 10px;
  display: grid;
}

.pv-footer-mark {
  background: var(--pv-ink);
  color: #fff;
  border-radius: 8px;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-bottom: 7px;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.pv-footer > span {
  font-size: 10px;
}

.pv-footer small {
  margin-top: 4px;
  font-size: 8px;
}

.pv-state-page {
  place-items: center;
  min-height: 100vh;
  padding: 20px;
  display: grid;
}

.pv-state-card {
  border: 1px solid var(--pv-line);
  text-align: center;
  background: #fff;
  border-radius: 18px;
  width: min(420px, 100%);
  padding: 34px 24px;
  box-shadow: 0 10px 28px #192b2812;
}

.pv-state-card > span {
  background: var(--pv-accent-soft);
  width: 50px;
  height: 50px;
  color: var(--pv-accent);
  border-radius: 14px;
  place-items: center;
  margin: 0 auto 15px;
  display: grid;
}

.pv-state-label {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 750;
  color: var(--pv-accent) !important;
  font-size: 9px !important;
}

.pv-state-card h1 {
  margin: 8px 0;
  font-size: 20px;
}

.pv-state-card p {
  color: var(--pv-muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.pv-state-card small {
  color: #84908e;
  margin-top: 18px;
  font-size: 9px;
  display: block;
}

.pv-state-card button {
  background: var(--pv-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  min-height: 41px;
  margin-top: 18px;
  padding: 0 15px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.pv-state-card--error > span {
  color: #a64b3f;
  background: #fff0ee;
}

.pv-loading {
  padding: 18px;
}

.pv-loading-header, .pv-loading-hero, .pv-loading-card {
  border: 1px solid var(--pv-line);
  background: #fff;
  border-radius: 14px;
  width: min(100%, 720px);
  margin: 0 auto 10px;
  padding: 18px;
}

.pv-loading span, .pv-loading i {
  background: linear-gradient(90deg, #e9eeed 25%, #f7f9f8 50%, #e9eeed 75%) 0 0 / 200% 100%;
  border-radius: 99px;
  height: 12px;
  animation: 1.4s infinite pv-shimmer;
  display: block;
}

.pv-loading-header {
  justify-content: space-between;
  display: flex;
}

.pv-loading-header span:first-child {
  width: 120px;
}

.pv-loading-header span:last-child {
  width: 74px;
}

.pv-loading-hero {
  align-content: center;
  gap: 14px;
  min-height: 210px;
  display: grid;
}

.pv-loading-hero > span:first-child {
  width: 90px;
}

.pv-loading-hero > span:nth-child(2) {
  width: 65%;
  height: 25px;
}

.pv-loading-hero > span:nth-child(3) {
  width: 110px;
}

.pv-loading-hero div {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  display: grid;
}

.pv-loading-hero i {
  height: 54px;
}

.pv-loading-card {
  gap: 13px;
  min-height: 180px;
  display: grid;
}

.pv-loading-card span:first-child {
  width: 42%;
  height: 18px;
}

.pv-loading-card span:nth-child(2) {
  width: 85%;
}

.pv-loading-card span:nth-child(3) {
  width: 72%;
}

.pv-loading-card span:nth-child(4) {
  width: 92%;
}

@keyframes pv-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (min-width: 680px) {
  .pv-page {
    width: min(100%, 760px);
    margin: 0 auto;
    box-shadow: 0 0 40px #192b2812;
  }

  .pv-header {
    z-index: 10;
    padding-inline: 26px;
    position: sticky;
    top: 0;
  }

  .pv-hero, .pv-section {
    margin-inline: 20px;
  }

  .pv-section {
    padding-inline: 24px;
  }

  .pv-future-actions {
    grid-template-columns: 1fr 1fr;
    margin-inline: 20px;
  }

  .pv-future-actions > div {
    grid-column: 1 / -1;
  }
}

@media (max-width: 390px) {
  .pv-summary-stats {
    margin: 18px 14px;
  }

  .pv-summary-service {
    padding: 15px 10px;
  }

  .pv-summary-service > svg {
    margin-bottom: 15px;
  }

  .pv-vehicle-copy {
    padding-inline: 18px;
  }

  .pv-vehicle-title {
    grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
    gap: 12px;
  }

  .pv-vehicle-title h1.pv-vehicle-plate {
    letter-spacing: .015em;
    font-size: clamp(25px, 7.8vw, 29px);
  }

  .pv-copy-vin {
    width: 76px;
    height: 40px;
    padding-inline: 12px;
  }

  .pv-verified {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 8px;
  }

  .pv-vehicle-title .pv-vehicle-updated {
    white-space: normal;
    text-align: right;
    font-size: 8px;
  }

  .pv-contact {
    padding-inline: 9px;
  }

  .pv-contact svg {
    display: none;
  }
}

@media (max-width: 350px) {
  .pv-vehicle-title {
    grid-template-columns: 1fr;
  }

  .pv-verification {
    align-items: flex-start;
    margin-top: 2px;
  }

  .pv-vehicle-title .pv-vehicle-updated {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-loading span, .pv-loading i {
    animation: none;
  }

  .pv-contact, .pv-timeline-item details {
    transition: none;
  }
}

/*# sourceMappingURL=app_1g_fi-j._.css.map*/