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

body.kcm-form-runtime:not(.kcm-login-surface) .layout-main-section:has(.form-page.kcm-form-shell),
body.kcm-form-runtime:not(.kcm-login-surface) .layout-main-section:has(.page-form .form-page.kcm-form-shell),
body.kcm-form-runtime:not(.kcm-login-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);
}

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 {
  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: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 .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 {
  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);
  }
}

@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;
  }
}