body.kcm-form-runtime:not(.kcm-login-surface):not(.kcm-desk-surface) .layout-main-section,
body.kcm-form-runtime:not(.kcm-login-surface):not(.kcm-desk-surface) .page_content,
body.kcm-form-runtime:not(.kcm-login-surface):not(.kcm-desk-surface) .web-form-container,
body.kcm-form-runtime:not(.kcm-login-surface):not(.kcm-desk-surface) .web-form-wrapper {
  background: var(--kcm-form-page-background);
}

body.kcm-form-runtime:not(.kcm-login-surface):not(.kcm-desk-surface) .layout-main-section:has(.form-page.kcm-form-shell),
body.kcm-form-runtime:not(.kcm-login-surface):not(.kcm-desk-surface) .layout-main-section:has(.page-form .form-page.kcm-form-shell),
body.kcm-form-runtime:not(.kcm-login-surface):not(.kcm-desk-surface) .page_content:has(.form-page.kcm-form-shell) {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kcm-color-surface) 98%, var(--kcm-color-background) 2%) 0%,
      color-mix(in srgb, var(--kcm-color-surface) 96%, var(--kcm-color-background) 4%) 100%
    );
}

body.kcm-form-runtime .form-page,
body.kcm-form-runtime .web-form,
body.kcm-form-runtime .modal-content,
body.kcm-form-runtime .frappe-control[data-kcm-form-shell="1"],
body.kcm-form-runtime .kcm-form-shell {
  color: var(--kcm-color-text-primary);
}

body.kcm-form-runtime .kcm-form-shell {
  position: relative;
  /* Allow autocomplete and link-field menus to escape the card boundary. */
  overflow: visible;
  border: 1px solid var(--kcm-form-border-muted);
  border-radius: var(--kcm-form-radius-lg);
  background: var(--kcm-color-surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 74%, transparent),
    0 0.9rem 2rem color-mix(in srgb, var(--kcm-color-primary) 5%, transparent);
}

body.kcm-form-runtime .form-page.kcm-form-shell,
body.kcm-form-runtime .web-form.kcm-form-shell {
  padding: clamp(0.8rem, 1.4vw, 1.15rem);
}

body.kcm-form-runtime .form-page.kcm-form-shell::before,
body.kcm-form-runtime .web-form.kcm-form-shell::before,
body.kcm-form-runtime .modal-content.kcm-form-shell::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100% - 1.5rem);
  height: 0.35rem;
  margin-left: 0.75rem;
  border-radius: 0 0 999px 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--kcm-color-primary) 88%, transparent) 0%,
      color-mix(in srgb, var(--kcm-color-secondary) 74%, transparent) 48%,
      color-mix(in srgb, var(--kcm-color-accent) 70%, transparent) 100%
    );
  opacity: 0.9;
}

body.kcm-form-runtime .layout-main-section > .form-page,
body.kcm-form-runtime .layout-main-section > .page-form,
body.kcm-form-runtime .layout-main-section > .page-body,
body.kcm-form-runtime .layout-main-section > .frappe-card {
  isolation: isolate;
}

body.kcm-form-runtime .form-page.kcm-form-shell .form-layout,
body.kcm-form-runtime .web-form.kcm-form-shell .form-layout,
body.kcm-form-runtime .form-page.kcm-form-shell .section-body {
  background: transparent;
}

body.kcm-form-runtime .page-head,
body.kcm-form-runtime .page-head-content,
body.kcm-form-runtime .page-head .title-area,
body.kcm-form-runtime .page-head .page-form-actions,
body.kcm-form-runtime .page-head .actions-btn-group,
body.kcm-form-runtime .page-head .menu-btn-group,
body.kcm-form-runtime .page-head .custom-actions,
body.kcm-form-runtime .page-head .standard-actions {
  align-items: center;
}

body.kcm-form-runtime .page-head .title-area,
body.kcm-form-runtime .page-head .page-form-actions,
body.kcm-form-runtime .page-head .actions-btn-group,
body.kcm-form-runtime .page-head .menu-btn-group,
body.kcm-form-runtime .page-head .custom-actions,
body.kcm-form-runtime .page-head .standard-actions {
  display: flex;
  gap: var(--kcm-form-space-2);
}

body.kcm-form-runtime .page-head .menu-btn-group > .btn,
body.kcm-form-runtime .page-head .actions-btn-group > .btn,
body.kcm-form-runtime .page-head .page-form-actions > .btn,
body.kcm-form-runtime .page-head button,
body.kcm-form-runtime .page-head .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.kcm-form-runtime .page-head .btn .icon,
body.kcm-form-runtime .page-head button .icon,
body.kcm-form-runtime .page-head .btn svg,
body.kcm-form-runtime .page-head button svg,
body.kcm-form-runtime .page-head .btn use,
body.kcm-form-runtime .page-head button use {
  vertical-align: middle;
}

body.kcm-form-runtime .form-dashboard-section,
body.kcm-form-runtime .comment-box,
body.kcm-form-runtime .timeline,
body.kcm-form-runtime .web-form-actions {
  margin-top: var(--kcm-form-space-5);
}

body.kcm-form-runtime .form-footer .comment-box:empty {
  display: none;
  margin: 0;
  padding: 0;
}

body.kcm-form-runtime .form-layout,
body.kcm-form-runtime .form-column,
body.kcm-form-runtime .section-body,
body.kcm-form-runtime .form-grid,
body.kcm-form-runtime .grid-body,
body.kcm-form-runtime .web-form .form-column {
  gap: var(--kcm-form-space-3);
  overflow: visible;
}

body.kcm-form-runtime .form-section,
body.kcm-form-runtime .section-body,
body.kcm-form-runtime .form-column,
body.kcm-form-runtime .grid-body,
body.kcm-form-runtime .web-form .section-body {
  display: grid;
}

body.kcm-form-runtime .form-section {
  position: relative;
  margin-bottom: var(--kcm-form-space-3);
  padding: var(--kcm-form-space-3) var(--kcm-form-space-4);
  border: none;
  border-radius: var(--kcm-form-radius-md);
  background: color-mix(in srgb, var(--kcm-color-surface) 98%, white 2%);
  box-shadow: none;
  transition:
    background-color var(--kcm-motion-standard) var(--kcm-ease-standard),
    border-color var(--kcm-motion-fast) var(--kcm-ease-standard),
    box-shadow var(--kcm-motion-standard) var(--kcm-ease-standard);
}

body.kcm-form-runtime .form-section:has(.awesomplete [role="listbox"]),
body.kcm-form-runtime .form-column:has(.awesomplete [role="listbox"]) {
  z-index: calc(var(--kcm-form-layer-autocomplete) + 3);
}

body.kcm-form-runtime .form-section:last-child {
  margin-bottom: 0;
}

body.kcm-form-runtime .form-section .section-head,
body.kcm-form-runtime .form-section .section-head .section-label,
body.kcm-form-runtime .form-section .section-head .ellipsis {
  color: var(--kcm-color-text-primary);
}

body.kcm-form-runtime .form-section .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcm-form-space-4);
  min-height: 2.5rem;
  margin-bottom: var(--kcm-form-space-2);
  padding-bottom: 0;
  border-bottom: none;
  font-family: var(--kcm-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.kcm-form-runtime .form-section .section-head::after {
  content: none;
}

body.kcm-form-runtime .section-head.collapsible {
  cursor: pointer;
}

body.kcm-form-runtime .kcm-form-tabs,
body.kcm-form-runtime .form-tabs-list,
body.kcm-form-runtime .nav.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kcm-form-space-2);
  margin-bottom: var(--kcm-form-space-4);
  padding: var(--kcm-form-space-2);
  border: 1px solid color-mix(in srgb, var(--kcm-color-primary) 10%, var(--kcm-color-border) 90%);
  border-radius: var(--kcm-form-radius-pill);
  background: color-mix(in srgb, var(--kcm-color-surface) 84%, var(--kcm-color-surface-muted) 16%);
}

body.kcm-form-runtime .form-tabs-list .nav-link,
body.kcm-form-runtime .nav.nav-tabs .nav-link,
body.kcm-form-runtime .kcm-form-tabs .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: var(--kcm-form-radius-pill);
  color: var(--kcm-color-text-secondary);
  font-weight: 700;
  transition:
    color var(--kcm-motion-fast) var(--kcm-ease-standard),
    background-color var(--kcm-motion-fast) var(--kcm-ease-standard),
    box-shadow var(--kcm-motion-standard) var(--kcm-ease-standard),
    transform var(--kcm-motion-fast) var(--kcm-ease-standard);
}

body.kcm-form-runtime .form-tabs-list .nav-link.active,
body.kcm-form-runtime .nav.nav-tabs .nav-link.active,
body.kcm-form-runtime .kcm-form-tabs .nav-link.active {
  color: var(--kcm-color-primary);
  background: color-mix(in srgb, var(--kcm-color-surface) 70%, white 30%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--kcm-color-primary) 18%, transparent),
    0 0.6rem 1.4rem color-mix(in srgb, var(--kcm-color-primary) 12%, transparent);
}

body.kcm-form-runtime .tab-content,
body.kcm-form-runtime .layout-main-section .form-layout {
  position: relative;
}

body.kcm-form-runtime .modal-dialog {
  margin-top: clamp(1rem, 6vh, 4rem);
}

body.kcm-form-runtime .modal-content.kcm-form-shell {
  border: 1px solid var(--kcm-form-border-muted);
  border-radius: var(--kcm-form-radius-lg);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kcm-color-surface) 96%, white 4%) 0%,
      color-mix(in srgb, var(--kcm-color-surface) 88%, var(--kcm-color-surface-muted) 12%) 100%
    );
}

body.kcm-form-runtime .modal-header,
body.kcm-form-runtime .modal-footer {
  border-color: color-mix(in srgb, var(--kcm-color-border) 72%, transparent);
}

body.kcm-form-runtime .modal-header,
body.kcm-form-runtime .modal-body,
body.kcm-form-runtime .modal-footer {
  padding-left: clamp(1rem, 2vw, 1.5rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
}

body.kcm-form-runtime .kcm-connection-banner {
  margin-bottom: var(--kcm-form-space-3);
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--kcm-color-warning) 24%, var(--kcm-color-border) 76%);
  border-radius: var(--kcm-form-radius-md);
  background: color-mix(in srgb, var(--kcm-color-warning) 12%, var(--kcm-color-surface) 88%);
  color: var(--kcm-color-text-primary);
  font-weight: 600;
}

body.kcm-form-runtime .kcm-recovery-draft-banner[hidden] {
  display: none;
}

body.kcm-form-runtime .kcm-recovery-draft-banner {
  display: grid;
  gap: 0.75rem;
  margin-bottom: var(--kcm-form-space-3);
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--kcm-color-info) 18%, var(--kcm-color-border) 82%);
  border-radius: var(--kcm-form-radius-md);
  background: color-mix(in srgb, var(--kcm-color-info) 8%, var(--kcm-color-surface) 92%);
  color: var(--kcm-color-text-primary);
}

body.kcm-form-runtime .kcm-recovery-draft-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

body.kcm-form-runtime .kcm-recovery-draft-banner__actions .btn {
  min-height: var(--kcm-touch-target-min, 44px);
}

body.kcm-form-runtime .kcm-sticky-action-bar[hidden] {
  display: none;
}

body.kcm-form-runtime .kcm-sticky-action-bar {
  display: none;
}

body.kcm-form-runtime .grid-body .grid-row,
body.kcm-form-runtime .result,
body.kcm-form-runtime .filter-box,
body.kcm-form-runtime .comment-input-container {
  border-radius: var(--kcm-form-radius-sm);
}

body.kcm-form-runtime .grid-body .grid-row {
  border: 1px solid color-mix(in srgb, var(--kcm-color-primary) 9%, var(--kcm-color-border) 91%);
  background: color-mix(in srgb, var(--kcm-color-surface) 90%, var(--kcm-color-surface-muted) 10%);
  transition:
    border-color var(--kcm-motion-fast) var(--kcm-ease-standard),
    box-shadow var(--kcm-motion-standard) var(--kcm-ease-standard),
    background-color var(--kcm-motion-standard) var(--kcm-ease-standard),
    transform var(--kcm-motion-fast) var(--kcm-ease-standard);
}

body.kcm-form-runtime .grid-body .grid-row:hover,
body.kcm-form-runtime .grid-body .grid-row.kcm-grid-row-active {
  border-color: color-mix(in srgb, var(--kcm-color-primary) 22%, var(--kcm-color-border) 78%);
  background: color-mix(in srgb, var(--kcm-color-surface) 84%, var(--kcm-color-accent) 16%);
  box-shadow: var(--kcm-form-shadow-soft);
}

body.kcm-form-runtime .awesomplete ul,
body.kcm-form-runtime .dropdown-menu,
body.kcm-form-runtime .datepicker,
body.kcm-form-runtime .ui-autocomplete,
body.kcm-form-runtime .multiselect-list {
  z-index: var(--kcm-form-layer-autocomplete);
  border: 1px solid color-mix(in srgb, var(--kcm-color-primary) 14%, var(--kcm-color-border) 86%);
  border-radius: var(--kcm-form-radius-md);
  background: color-mix(in srgb, var(--kcm-color-surface) 96%, white 4%);
  color: var(--kcm-color-text-primary);
  font-family: var(--kcm-font-body);
  box-shadow: var(--kcm-form-shadow-ambient);
  overflow: clip;
}

body.kcm-form-runtime .awesomplete ul li[aria-selected="true"],
body.kcm-form-runtime .awesomplete ul li:hover,
body.kcm-form-runtime .dropdown-menu .dropdown-item:hover,
body.kcm-form-runtime .dropdown-menu .dropdown-item:focus,
body.kcm-form-runtime .ui-menu-item-wrapper.ui-state-active {
  background: color-mix(in srgb, var(--kcm-color-primary) 10%, var(--kcm-color-surface) 90%);
  color: var(--kcm-color-text-primary);
}

@media (max-width: 991px) {
  body.kcm-form-runtime .form-page.kcm-form-shell,
  body.kcm-form-runtime .web-form.kcm-form-shell {
    padding: var(--kcm-form-space-3);
  }

  body.kcm-form-runtime .form-section {
    padding: var(--kcm-form-space-3);
  }

  body.kcm-form-runtime .form-page.kcm-form-shell,
  body.kcm-form-runtime .web-form.kcm-form-shell,
  body.kcm-form-runtime .modal-content.kcm-form-shell {
    padding-bottom: calc(var(--kcm-mobile-sticky-action-height, 4.5rem) + var(--kcm-safe-area-bottom, 0px) + 1rem);
  }
}

@media (max-width: 1023px) {
  body.kcm-form-runtime .form-column,
  body.kcm-form-runtime .section-body,
  body.kcm-form-runtime .form-layout,
  body.kcm-form-runtime .web-form .form-column {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.kcm-form-runtime .page-head,
  body.kcm-form-runtime .page-head-content {
    align-items: stretch;
    flex-wrap: wrap;
  }

  body.kcm-form-runtime .kcm-sticky-action-bar {
    position: fixed;
    left: max(0.75rem, calc(var(--kcm-safe-area-left, 0px) + 0.5rem));
    right: max(0.75rem, calc(var(--kcm-safe-area-right, 0px) + 0.5rem));
    bottom: max(0.75rem, calc(var(--kcm-safe-area-bottom, 0px) + 0.5rem));
    z-index: 72;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--kcm-mobile-sticky-action-height, 4.5rem);
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--kcm-color-primary) 14%, var(--kcm-color-border) 86%);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--kcm-color-surface) 94%, white 6%);
    box-shadow: 0 1rem 2.2rem color-mix(in srgb, #000000 18%, transparent);
    backdrop-filter: blur(10px);
  }

  body.kcm-form-runtime .kcm-sticky-action-bar__status {
    min-height: 1rem;
    color: var(--kcm-color-text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
  }

  body.kcm-form-runtime .kcm-sticky-action-bar__button {
    width: 100%;
    min-height: var(--kcm-touch-target-comfortable, 48px);
    padding-inline: 1.1rem;
  }

  body.kcm-form-runtime .kcm-form-shell-offline .kcm-sticky-action-bar__status {
    color: var(--kcm-color-warning);
  }
}

@media (max-width: 767px) {
  body.kcm-form-runtime .kcm-sticky-action-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  body.kcm-form-runtime {
    --kcm-form-enter-distance: 0.4rem;
  }

  body.kcm-form-runtime .form-section .section-head {
    flex-wrap: wrap;
  }

  body.kcm-form-runtime .kcm-form-tabs,
  body.kcm-form-runtime .form-tabs-list,
  body.kcm-form-runtime .nav.nav-tabs {
    border-radius: var(--kcm-form-radius-md);
  }

  body.kcm-form-runtime .modal-dialog {
    margin: 0.75rem;
  }
}