.front-layout-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.front-layout-main {
  flex: 1 0 auto;
}

.front-layout-footer {
  width: 100%;
}

.front-brand-mark {
  height: 36px;
  margin-right: 10px;
}

.backend-notification-badge {
  font-size: 0.65rem;
  padding: 0.25em 0.5em;
}

.backend-mobile-notification-badge {
  font-size: 0.6rem;
  padding: 0.2em 0.45em;
}

.backend-notification-menu {
  max-height: 420px;
  min-width: 340px;
  overflow-y: auto;
}

.backend-notification-dot {
  font-size: 0.5rem;
}

.backend-notification-copy {
  min-width: 0;
}

.backend-notification-message {
  max-width: 260px;
}

.backend-empty-notification-icon {
  font-size: 1.5rem;
}

.backend-sidebar-desktop {
  height: 100vh;
  min-width: 260px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  transition: width 0.3s ease, min-width 0.3s ease;
  width: 260px;
}

.backend-sidebar-collapsed {
  min-width: 0;
  overflow: hidden;
  width: 0;
}

.backend-main-content {
  min-width: 0;
}

.form-branding-row {
  display: flex;
  margin-bottom: 1rem;
}

.form-branding-row.is-spaced {
  margin-bottom: 1.5rem;
}

.form-branding-row.align-start {
  justify-content: flex-start;
}

.form-branding-row.align-center {
  justify-content: center;
}

.form-branding-row.align-end {
  justify-content: flex-end;
}

.form-branding-inline {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.form-branding-column {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-branding-overlap {
  align-items: flex-end;
  display: flex;
}

.form-branding-overlap-center {
  align-items: center;
  display: flex;
  gap: 0;
}

.form-branding-grid {
  align-items: start;
  display: inline-grid;
  gap: 0.25rem;
  grid-template-columns: 120px 120px;
}

.form-branding-hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-branding-layer {
  position: relative;
}

.form-branding-layer.base {
  z-index: 1;
}

.form-branding-layer.raised {
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  line-height: 0;
  margin-bottom: -10px;
  margin-left: -30px;
  z-index: 2;
}

.form-branding-layer.raised-side {
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  line-height: 0;
  margin-left: -20px;
  z-index: 2;
}

.form-branding-grid .start {
  justify-self: start;
}

.form-branding-grid .end {
  justify-self: end;
}

.form-branding-grid .lower {
  margin-top: 1.5rem;
}

.form-branding-image {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-height: 80px;
  max-width: 120px;
  object-fit: contain;
  padding: 4px;
}

.form-branding-image.hero-logo {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  max-height: 100px;
  max-width: 160px;
  padding: 6px;
}

.form-branding-image.hero-personal {
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 80px;
  max-width: 80px;
  object-fit: contain;
}
.form-preview-area .form-submit-row .btn-primary,
.form-preview-area .form-submit-row .btn-submit {
  background: unset;
  border: unset;
  box-shadow: unset;
  color: unset;
}

.embed-transparent-page,
.embed-transparent-page body {
  background: transparent;
  margin: 0;
  padding: 0;
}

.embed-transparent-page .form-container {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.person-card {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
}

.person-card .person-header {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.person-card .person-duration {
  color: #6c757d;
  font-size: 0.8rem;
}

.person-card .assigned-services {
  background: #fff;
  border: 2px dashed #ced4da;
  border-radius: 0.375rem;
  min-height: 36px;
  padding: 0.375rem;
}

.person-card .assigned-services.drag-over {
  background: #e8f8fd;
  border-color: #0dcaf0;
}

.service-chip {
  align-items: center;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-radius: 1rem;
  cursor: grab;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 0.25rem;
  margin: 0.125rem;
  padding: 0.25rem 0.5rem;
  user-select: none;
}

.service-chip .chip-remove {
  cursor: pointer;
  font-size: 0.7rem;
  opacity: 0.6;
}

.service-chip .chip-remove:hover {
  opacity: 1;
}

.service-chip.unassigned {
  background: #fef3c7;
  border-color: #fbbf24;
}

#unassignedServices {
  min-height: 20px;
}

#unassignedServices:empty::after {
  color: #16a34a;
  content: 'All services assigned';
  font-size: 0.8rem;
  font-style: italic;
}
.transfer-ownership-hero {
    background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
}

.transfer-current-owner {
    background: rgba(8, 145, 229, 0.06);
}

.text-menu-success {
    color: #10b981;
}

body.theme-dark .transfer-warning .list-group-item {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
.menu-preview-logo {
    max-height: 80px;
}

.menu-preview-cart-sidebar {
    top: 90px;
}
.menu-edit-logo-preview {
    max-height: 120px;
    max-width: 120px;
}
/* Shared inline-style extraction utilities */
.wf-icon-2 { font-size: 2rem; }
.wf-icon-25 { font-size: 2.5rem; }
.wf-icon-3 { font-size: 3rem; }
.wf-icon-4 { font-size: 4rem; }
.wf-icon-5 { font-size: 5rem; }
.wf-icon-gold { color: #ffb347; }
.wf-icon-brand { color: #5a4ae3; }
.wf-icon-primary-blue { color: #0891e5; }
.wf-text-dark { color: #0f172a; }
.wf-text-skygrid { color: #bae6fd; }
.wf-text-menu-success { color: #00b894; }
.wf-soft-primary { background: rgba(90, 74, 227, 0.05); }
.wf-soft-primary-subtle { background: rgba(90, 74, 227, 0.03); }
.wf-soft-info { background: rgba(8, 145, 229, 0.06); }
.wf-card-danger-left { border-left: 4px solid #dc3545 !important; }
.wf-display-inline { display: inline; }
.wf-hidden { display: none; }
.wf-delay-005 { animation-delay: 0.05s; }
.wf-delay-01 { animation-delay: 0.1s; }
.wf-delay-015 { animation-delay: 0.15s; }
.wf-clickable { cursor: pointer; }
.wf-sticky-top-20 { top: 20px; }
.wf-z-1 { z-index: 1; }
.wf-z-alert-stack { z-index: 1055; }
.wf-user-select-all { user-select: all; }
.wf-action-description { min-height: 2em; }
.wf-chart-300 { height: 300px; position: relative; }
.wf-square-52 { height: 52px; min-width: 52px; width: 52px; }
.wf-max-500 { max-width: 500px; }
.wf-max-820 { max-width: 820px; }
.wf-max-860 { max-width: 860px; }
.wf-max-900 { max-width: 900px; }
.wf-max-920 { max-width: 920px; }
.wf-max-930 { max-width: 930px; }
.wf-max-150 { max-width: 150px; }
.wf-max-480 { max-width: 480px; }
.wf-select-120 { width: 120px; }
.wf-select-120-inline { display: inline-block; width: 120px; }
.wf-select-160 { width: 160px; }
.wf-table-preview-col { width: 80px; }
.wf-badge-xs { font-size: 0.7rem; }
.wf-badge-xxs { font-size: 0.65rem; }
.wf-lead-centered { margin-left: auto; margin-right: auto; }
.wf-letter-eyebrow { letter-spacing: 0.08em; }
.wf-gradient-blue-badge {
    background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
    color: #fff;
}
.wf-gradient-system-request {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.wf-gradient-menu-customer {
    background: linear-gradient(90deg, #5a4ae3 0%, #00d2c5 100%);
}
.wf-org-logo-thumb {
    border-radius: 50%;
    height: 40px;
    object-fit: cover;
    width: 40px;
}
.wf-form-logo-thumb {
    height: 32px;
    width: auto;
}
.wf-menu-detail-thumb {
    max-height: 80px;
    max-width: 80px;
    object-fit: cover;
}
.wf-template-delete-preview {
    max-height: 120px;
    max-width: 180px;
}
.wf-template-preview-bg { background: #f8f9fa; }
.wf-template-preview-img {
    max-height: 140px;
    max-width: 180px;
}
