commons-shared-web-ui 0.0.61 → 0.0.62

package/src/lib/modules/smart-form/components/form-field/form-field.component.scss

@@ -0,0 +1,2255 @@
+@import '../../../../styles/utilities.scss';
+
+.form-field {
+  font-family: var(--cc-sf-font-family, 'Poppins', sans-serif) !important;
+}
+
+// Generated (formula) values such as the donor short code can be a single long
+// token with no spaces (e.g. SAI_VENKATESH_...), which overflows the box. Force
+// it to wrap within the container.
+.generated-value {
+  word-break: break-all;
+}
+
+/* Base Variable Fallbacks (mapping to global.scss tokens) */
+:host {
+  --cc-sf-input-border: #D1D5DB;
+  --cc-sf-input-bg: #ffffff;
+  --cc-sf-input-radius: 9px;
+  --cc-sf-input-height: 44px;
+  --cc-sf-label-color: #111827;
+  --cc-sf-hint-color: #9CA3AF;
+  --cc-sf-error-border: #EF4444;
+  --cc-sf-error-bg: #FFF5F5;
+  /* Indigo accent for focus rings */
+  --cc-sf-accent-color: #6366F1;
+  --cc-sf-input-focus-border: #6366F1;
+  --cc-sf-input-hover-border: #A5B4FC;
+  --cc-sf-input-placeholder: #C4C9D4;
+  --cc-sf-input-disabled-bg: #F8F9FB;
+  --cc-sf-input-disabled-border: #E5E7EB;
+  --cc-sf-switch-track-on: #6366F1;
+  --cc-sf-switch-track-off: #D1D5DB;
+  --cc-sf-switch-thumb: #ffffff;
+  --cc-sf-selected-color: #6366F1;
+}
+
+.form-row {
+  gap: var(--cc-sf-grid-gap, 16px);
+
+  &.horizontal {
+    display: flex;
+    flex-direction: row;
+
+    >* {
+      flex: 1;
+    }
+  }
+
+  &:not(.horizontal) {
+    flex-direction: column;
+  }
+
+  &.grid-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--cc-sf-grid-gap, 16px);
+    align-items: start;
+
+    @media (max-width: 640px) {
+      grid-template-columns: 1fr;
+
+      .row-field {
+        grid-column: span 12 !important;
+      }
+    }
+  }
+}
+
+.field-label {
+  font-size: 0.8rem !important;
+  font-weight: 600 !important;
+  line-height: 1.2;
+  letter-spacing: .04em;
+  text-transform: uppercase !important;
+  color: #202124 !important;
+  margin-bottom: var(--cc-sf-label-mb, 0px) !important;
+}
+
+.field-input,
+input.matInput,
+.mat-mdc-input-element {
+  display: block;
+  width: 100%;
+  height: var(--cc-sf-input-height) !important;
+  padding: 0 14px !important;
+  font-family: inherit;
+  font-size: 0.9rem;
+  color: var(--cc-sf-label-color);
+  background-color: var(--cc-sf-input-bg) !important;
+  border: 1.5px solid var(--cc-sf-input-border) !important;
+  border-radius: var(--cc-sf-input-radius) !important;
+  box-sizing: border-box;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &::placeholder {
+    font-weight: 400;
+    font-size: 14px;
+    color: var(--cc-sf-input-placeholder);
+  }
+}
+
+.field-input {
+  opacity: var(--cc-sf-input-opacity, 1);
+  line-height: var(--cc-sf-input-line-height, 1.5);
+  transition: var(--cc-sf-input-transition, all 0.2s ease);
+
+  &::placeholder {
+    font-weight: var(--cc-sf-placeholder-weight, 400);
+    font-size: var(--cc-sf-placeholder-size, 14px);
+    line-height: var(--cc-sf-placeholder-line-height, 100%);
+    color: var(--cc-sf-input-placeholder);
+  }
+
+  &:hover:not(:disabled):not([readonly]) {
+    border-color: var(--cc-sf-input-hover-border) !important;
+    box-shadow: 0 1px 4px rgba(99, 102, 241, .08) !important;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--cc-sf-input-focus-border) !important;
+    box-shadow:
+      0 0 0 3px rgba(99, 102, 241, .14),
+      0 1px 4px rgba(99, 102, 241, .1) !important;
+    background-color: #FEFEFF !important;
+  }
+
+  &:disabled,
+  &[readonly] {
+    background-color: var(--cc-sf-input-disabled-bg) !important;
+    color: #9CA3AF !important;
+    cursor: not-allowed;
+    border-color: var(--cc-sf-input-disabled-border) !important;
+    box-shadow: none !important;
+  }
+
+  &.is-invalid {
+    border-color: var(--cc-sf-error-border) !important;
+    background-color: var(--cc-sf-error-bg) !important;
+
+    &:focus {
+      box-shadow:
+        0 0 0 3px rgba(239, 68, 68, .12),
+        0 1px 4px rgba(239, 68, 68, .1) !important;
+    }
+  }
+
+  &.textarea {
+    resize: vertical;
+    min-height: 100px;
+    height: auto;
+    padding: 12px 16px !important;
+  }
+}
+
+input[type="time"].time-input {
+  cursor: pointer;
+
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.7;
+    filter: invert(30%);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+select.field-input {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// ── Shared dropdown search input ────────────────────────────────────────────
+.dropdown-search-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--cc-sf-input-border, #E5E7EB);
+  background: var(--cc-sf-input-bg, #ffffff);
+
+  .dropdown-search-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--cc-sf-input-placeholder, #9CA3AF);
+    flex-shrink: 0;
+  }
+
+  .dropdown-search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.875rem;
+    color: var(--cc-sf-label-color, #111827);
+    font-family: inherit;
+
+    &::placeholder {
+      color: var(--cc-sf-input-placeholder, #C4C9D4);
+    }
+  }
+
+  .dropdown-search-clear {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--cc-sf-input-placeholder, #9CA3AF);
+    flex-shrink: 0;
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--cc-sf-label-color, #111827);
+    }
+  }
+}
+
+// ── Multiple-select custom dropdown ─────────────────────────────────────────
+.multi-select-wrapper {
+  position: relative;
+
+  .multi-select-trigger {
+    min-height: var(--cc-sf-input-height, 44px);
+    height: auto;
+    user-select: none;
+
+    &.ms-open {
+      border-color: var(--cc-sf-input-focus-border, #6366F1) !important;
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, .14), 0 1px 4px rgba(99, 102, 241, .1) !important;
+    }
+
+    .multi-select-value {
+      flex: 1;
+      color: var(--cc-sf-label-color, #111827);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .multi-select-placeholder {
+      flex: 1;
+      font-weight: 400;
+      font-size: 14px;
+      color: var(--cc-sf-input-placeholder, #C4C9D4);
+    }
+
+    .multi-select-arrow {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      color: var(--cc-sf-label-color, #6B7280);
+      flex-shrink: 0;
+    }
+  }
+
+  .multi-select-panel {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: var(--cc-sf-input-bg, #ffffff);
+    border: 1.5px solid var(--cc-sf-input-border, #D1D5DB);
+    border-radius: var(--cc-sf-input-radius, 9px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
+    z-index: 1050;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    max-height: 320px;
+  }
+
+  .multi-select-options-list {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 240px;
+
+    &::-webkit-scrollbar { width: 4px; }
+    &::-webkit-scrollbar-thumb {
+      background: var(--cc-sf-input-border, #D1D5DB);
+      border-radius: 2px;
+    }
+  }
+
+  .multi-select-option {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--cc-sf-input-border, #F3F4F6);
+    transition: background 0.1s;
+
+    &:last-of-type { border-bottom: none; }
+
+    &:hover { background: var(--cc-sf-input-hover-bg, #F9FAFB); }
+
+    input[type='checkbox'] {
+      flex-shrink: 0;
+      cursor: pointer;
+      accent-color: var(--cc-sf-selected-color, #6366F1);
+      width: 15px;
+      height: 15px;
+    }
+
+    &.multi-select-all {
+      border-bottom: 1px solid var(--cc-sf-input-border, #E5E7EB);
+      background: var(--cc-sf-input-bg, #FAFBFC);
+    }
+  }
+
+  .multi-select-empty {
+    padding: 12px;
+    text-align: center;
+  }
+
+  &.is-invalid .multi-select-trigger {
+    border-color: var(--cc-sf-error-border, #EF4444) !important;
+    background-color: var(--cc-sf-error-bg, #FFF5F5) !important;
+  }
+}
+
+// ── Single-select searchable custom dropdown ────────────────────────────────
+.single-select-wrapper {
+  position: relative;
+
+  .single-select-trigger {
+    min-height: var(--cc-sf-input-height, 44px);
+    height: auto;
+    user-select: none;
+
+    &.ss-open {
+      border-color: var(--cc-sf-input-focus-border, #6366F1) !important;
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, .14), 0 1px 4px rgba(99, 102, 241, .1) !important;
+    }
+
+    .single-select-value {
+      flex: 1;
+      color: var(--cc-sf-label-color, #111827);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .single-select-placeholder {
+      flex: 1;
+      font-weight: 400;
+      font-size: 14px;
+      color: var(--cc-sf-input-placeholder, #C4C9D4);
+    }
+
+    .single-select-arrow {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      color: var(--cc-sf-label-color, #6B7280);
+      flex-shrink: 0;
+    }
+  }
+
+  .single-select-panel {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: var(--cc-sf-input-bg, #ffffff);
+    border: 1.5px solid var(--cc-sf-input-border, #D1D5DB);
+    border-radius: var(--cc-sf-input-radius, 9px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
+    z-index: 1050;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    max-height: 320px;
+  }
+
+  .single-select-options-list {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 240px;
+
+    &::-webkit-scrollbar { width: 4px; }
+    &::-webkit-scrollbar-thumb {
+      background: var(--cc-sf-input-border, #D1D5DB);
+      border-radius: 2px;
+    }
+  }
+
+  .single-select-option {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--cc-sf-input-border, #F3F4F6);
+    transition: background 0.1s;
+    justify-content: space-between;
+
+    &:last-of-type { border-bottom: none; }
+
+    &:hover { background: var(--cc-sf-input-hover-bg, #F9FAFB); }
+
+    &.selected {
+      background: var(--cc-sf-input-hover-bg, #F0F5FF);
+      color: var(--cc-sf-selected-color, #6366F1);
+    }
+
+    .single-select-check {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+      color: var(--cc-sf-selected-color, #6366F1);
+    }
+  }
+
+  &.is-invalid .single-select-trigger {
+    border-color: var(--cc-sf-error-border, #EF4444) !important;
+    background-color: var(--cc-sf-error-bg, #FFF5F5) !important;
+  }
+}
+
+// ── Custom dropdown panels (rendered in a CDK connected overlay) ─────────────
+// The multi/single select panels are projected into a body-level CDK overlay so
+// they are never clipped by a scrollable modal body (cc-confirmation-modal) and
+// close on outside click. Because they no longer sit inside their *-wrapper in
+// the DOM, these styles live at the top level (still component-scoped via view
+// encapsulation). The CDK overlay pane handles positioning and width.
+.multi-select-panel,
+.single-select-panel {
+  width: 100%;
+  background: var(--cc-sf-input-bg, #ffffff);
+  border: 1.5px solid var(--cc-sf-input-border, #D1D5DB);
+  border-radius: var(--cc-sf-input-radius, 9px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 320px;
+}
+
+.multi-select-options-list,
+.single-select-options-list {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 240px;
+
+  &::-webkit-scrollbar { width: 4px; }
+  &::-webkit-scrollbar-thumb {
+    background: var(--cc-sf-input-border, #D1D5DB);
+    border-radius: 2px;
+  }
+}
+
+.multi-select-option,
+.single-select-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--cc-sf-input-border, #F3F4F6);
+  transition: background 0.1s;
+
+  &:last-of-type { border-bottom: none; }
+  &:hover { background: var(--cc-sf-input-hover-bg, #F9FAFB); }
+
+  input[type='checkbox'] {
+    flex-shrink: 0;
+    cursor: pointer;
+    accent-color: var(--cc-sf-selected-color, #6366F1);
+    width: 15px;
+    height: 15px;
+  }
+}
+
+.multi-select-option.multi-select-all {
+  border-bottom: 1px solid var(--cc-sf-input-border, #E5E7EB);
+  background: var(--cc-sf-input-bg, #FAFBFC);
+}
+
+.single-select-option {
+  justify-content: space-between;
+
+  &.selected {
+    background: var(--cc-sf-input-hover-bg, #F0F5FF);
+    color: var(--cc-sf-selected-color, #6366F1);
+  }
+
+  .single-select-check {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--cc-sf-selected-color, #6366F1);
+  }
+}
+
+.multi-select-empty {
+  padding: 12px;
+  text-align: center;
+}
+
+// CDK overlays (our dropdown panels) must render above cc-confirmation-modal,
+// whose backdrop/container sit at z-index 1000/1001.
+::ng-deep .cdk-overlay-container {
+  z-index: 1100;
+}
+
+.char-count-hint {
+  font-style: normal;
+  line-height: 100%;
+  letter-spacing: 0.02em;
+  margin-top: 0.4rem;
+}
+
+.radio-group,
+.checkbox-group {
+  &.layout-column {
+    display: grid !important;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 16px;
+    width: 100%;
+  }
+
+  &.layout-row {
+    flex-direction: column !important;
+    gap: 12px;
+    width: 100%;
+  }
+}
+
+.radio-label,
+.checkbox-label {
+  input {
+    cursor: pointer;
+    accent-color: var(--cc-sf-chip-selected-bg, #F05A28);
+  }
+
+  &.card-item {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB);
+    border-radius: 12px;
+    padding: 16px 20px;
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+    background: var(--cc-sf-input-bg, #ffffff);
+    margin-bottom: 0px;
+
+    input {
+      margin-left: 16px;
+    }
+
+    &.selected {
+      border-color: var(--cc-sf-selected-color);
+      background-color: rgba(240, 90, 40, 0.05); // Keep light tint
+    }
+
+    .option-content {
+      .label-text {
+        font-weight: var(--cc-sf-label-weight, 500);
+      }
+    }
+  }
+}
+
+.checkbox-single {
+  .checkbox-label {
+    font-weight: var(--cc-sf-label-weight, 500);
+  }
+}
+
+.chip-label {
+  transition: var(--cc-sf-input-transition, all 0.2s ease);
+
+  &:hover {
+    background: var(--cc-sf-chip-hover-bg, #F3F4F6);
+  }
+
+  &.selected {
+    background: var(--cc-sf-selected-color);
+    color: var(--cc-sf-chip-selected-color, #ffffff);
+    border-color: var(--cc-sf-selected-color);
+  }
+}
+
+.switch {
+  width: 50px;
+  height: 24px;
+  display: inline-block;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+
+    &:checked+.slider {
+      background-color: var(--cc-sf-switch-track-on) !important;
+
+      &::before {
+        transform: translateX(26px);
+      }
+    }
+  }
+
+  .slider {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: 0.4s;
+    background-color: var(--cc-sf-switch-track-off);
+    border-radius: 24px;
+
+    &::before {
+      position: absolute;
+      content: "";
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 3px;
+      background-color: var(--cc-sf-switch-thumb);
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+  }
+}
+
+.rating-group {
+  .star {
+    transition: var(--cc-sf-input-transition, all 0.2s ease);
+
+    mat-icon {
+      font-size: var(--cc-sf-star-size, 28px);
+      width: var(--cc-sf-star-size, 28px);
+      height: var(--cc-sf-star-size, 28px);
+      line-height: var(--cc-sf-star-size, 28px);
+      color: var(--cc-sf-star-empty, #D1D5DB);
+      transition: var(--cc-sf-input-transition, all 0.2s ease);
+    }
+
+    &.filled mat-icon,
+    &.half mat-icon {
+      color: var(--cc-sf-star-filled, #F59E0B);
+    }
+
+    &:hover mat-icon {
+      color: var(--cc-sf-star-filled, #F59E0B);
+    }
+  }
+}
+
+.password-wrapper {
+  .password-toggle {
+    right: 0.625rem;
+    top: 50%;
+    transform: translateY(-50%);
+    line-height: 1;
+    transition: color var(--cc-sf-input-transition, 0.2s ease);
+
+    mat-icon.eye-icon {
+      font-size: 1.125rem;
+      width: 1.125rem;
+      height: 1.125rem;
+      line-height: 1.125rem;
+    }
+
+    &:hover {
+      color: var(--cc-sf-label-color, #374151);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.group-section-wrapper {
+  // Flat — no card shell; card border/shadow removed
+
+  // ── Section heading: left accent bar ────────────────────────────────────────
+  .group-label {
+    font-size: var(--cc-sf-section-label-size, 1rem);
+    font-weight: var(--cc-sf-section-label-weight, 600);
+    color: var(--cc-sf-section-label-color, #1F2937);
+    margin: 0 0 16px 0;
+    padding-left: 12px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border-left: var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);
+    line-height: 1.4;
+  }
+
+  .group-fields {
+    &.sf-grid {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: var(--cc-sf-grid-gap, 16px);
+      align-items: start;
+
+      @media (max-width: 640px) {
+        grid-template-columns: 1fr;
+
+        .sf-col {
+          grid-column: span 12 !important;
+        }
+      }
+    }
+  }
+
+  // ── Standard GROUP accordion instance ────────────────────────────────────────
+  .group-accordion-instance {
+    border: var(--cc-sf-instance-border, 1px solid #E5E7EB);
+    border-radius: var(--cc-sf-section-border-radius-inner, 8px);
+    margin-bottom: 8px;
+    overflow: hidden;
+    transition: border-color 0.2s ease;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    .group-accordion-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 14px;
+      background: var(--cc-sf-repeater-accordion-header-bg, #F9FAFB);
+      cursor: pointer;
+      user-select: none;
+      transition: background 0.15s ease;
+
+      &:hover {
+        background: var(--cc-sf-repeater-accordion-active-bg, #EFF6FF);
+      }
+
+      .instance-badge {
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: var(--cc-sf-repeater-badge-bg, #E5E7EB);
+        color: var(--cc-sf-repeater-badge-color, #374151);
+        font-size: 0.75rem;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .instance-title {
+        font-size: var(--cc-sf-instance-num-size, 0.8125rem);
+        font-weight: 600;
+        color: var(--cc-sf-repeater-accordion-header-color, #1F2937);
+      }
+
+      .accordion-remove-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--cc-sf-btn-remove-color, #E53E3E);
+        padding: 4px;
+        border-radius: 4px;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        transition: background 0.15s ease;
+
+        mat-icon {
+          font-size: 1.1rem;
+          width: 1.1rem;
+          height: 1.1rem;
+          line-height: 1.1rem;
+        }
+
+        &:hover {
+          background: var(--cc-sf-btn-remove-hover-bg, #FED7D7);
+        }
+      }
+
+      .accordion-chevron {
+        font-size: 1.25rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        line-height: 1.25rem;
+        color: var(--cc-sf-instance-num-color, #4B5563);
+      }
+    }
+
+    .group-accordion-body {
+      padding: var(--cc-sf-instance-padding, 16px);
+      background: var(--cc-sf-instance-bg, #F9FAFB);
+      border-top: var(--cc-sf-instance-divider, 1px dashed #D1D5DB);
+    }
+  }
+
+  // ── Full-width dashed Add button ─────────────────────────────────────────────
+  .btn-add-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+    padding: 10px 20px;
+    margin-top: 12px;
+    background: var(--cc-sf-btn-add-bg, transparent);
+    color: var(--cc-sf-btn-add-color, #3B82F6);
+    border: var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);
+    border-radius: var(--cc-sf-btn-add-radius, 6px);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--cc-sf-btn-font-size, 0.875rem);
+    font-weight: var(--cc-sf-btn-font-weight, 600);
+    transition: var(--cc-sf-btn-transition, all 0.2s ease);
+
+    mat-icon {
+      font-size: 1.1rem;
+      width: 1.1rem;
+      height: 1.1rem;
+      line-height: 1.1rem;
+    }
+
+    &:hover {
+      background: var(--cc-sf-btn-add-hover-bg, #EFF6FF);
+      border-color: var(--cc-sf-btn-add-hover-border, #BFDBFE);
+    }
+  }
+
+  .group-instance {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &.multi-save-active {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    background: transparent;
+
+    .multi-save-header {
+      .btn-add-multi {
+        ::ng-deep button {
+          color: var(--ms-btn-add-color, #3B82F6);
+          font-weight: 600;
+          font-size: 0.875rem;
+          padding: 8px 12px;
+
+          &:hover {
+            color: var(--ms-btn-add-hover, #2563EB);
+            background-color: var(--cc-sf-btn-add-hover-bg, #EFF6FF);
+          }
+        }
+      }
+    }
+
+    .group-instance {
+      // box-shadow: var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.05));
+
+      // &.is-editing {
+      //    padding: 24px;
+      // }
+
+      &.is-card {
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+
+        &:hover {
+          box-shadow: var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.08));
+          border-color: var(--cc-sf-input-focus-border, #3B82F6);
+        }
+
+        .card-view {
+          .card-content {
+            .card-title {
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+
+            .card-desc {
+              line-height: 1.4;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              line-clamp: 1;
+              -webkit-box-orient: vertical;
+            }
+          }
+
+          &.is-expanded {
+            .card-content .card-desc {
+              -webkit-line-clamp: unset;
+              line-clamp: unset;
+            }
+          }
+
+          .card-actions {
+            mat-icon {
+              font-size: 22px;
+              width: 22px;
+              height: 22px;
+              color: var(--cc-sf-hint-color, #9CA3AF);
+              transition: color 0.2s;
+
+              &.icon-delete:hover {
+                color: var(--cc-sf-error-border, #DC2626);
+              }
+
+              &.icon-edit:hover {
+                color: var(--cc-sf-input-focus-border, #3B82F6);
+              }
+
+              &.icon-expand {
+                color: var(--cc-sf-input-disabled-border, #E5E7EB);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.btn-remove {
+  transition: var(--cc-sf-btn-transition, all 0.2s ease);
+
+  mat-icon {
+    font-size: 1rem;
+    width: 1rem;
+    height: 1rem;
+    line-height: 1rem;
+  }
+
+  &:hover {
+    background: var(--cc-sf-btn-remove-hover-bg, #FED7D7);
+  }
+}
+
+.btn-add-group {
+  font-weight: var(--cc-sf-btn-font-weight, 600);
+  transition: var(--cc-sf-btn-transition, all 0.2s ease);
+
+  mat-icon {
+    font-size: 1.1rem;
+    width: 1.1rem;
+    height: 1.1rem;
+    line-height: 1.1rem;
+  }
+
+  &:hover {
+    background: var(--cc-sf-btn-add-hover-bg, #EFF6FF);
+    border-color: var(--cc-sf-btn-add-hover-border, #BFDBFE);
+  }
+}
+
+.upload-drop-zone {
+  background-color: var(--cc-sf-dropzone-bg, #F8FAFC);
+  border: var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);
+  border-radius: var(--cc-sf-dropzone-radius, 12px);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--cc-sf-dropzone-hover-bg, #EFF6FF);
+    border-color: var(--cc-sf-dropzone-hover-border, #93C5FD);
+  }
+
+  &.drag-over {
+    background-color: var(--cc-sf-dropzone-hover-bg, #EFF6FF);
+    border-color: var(--cc-sf-dropzone-over-border, #3B82F6);
+    box-shadow: var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, 0.12));
+  }
+
+  &.is-invalid {
+    border-color: var(--cc-sf-error-border, #DC2626);
+    background-color: var(--cc-sf-error-bg, #FEF2F2);
+  }
+}
+
+.upload-icon-wrap {
+  .dropzone-icon-pill {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    background: var(--cc-sf-dropzone-icon-bg, rgba(59, 130, 246, 0.10));
+  }
+
+  mat-icon.upload-cloud-icon {
+    font-size: 28px;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    color: var(--cc-sf-accent-color, #3B82F6);
+  }
+}
+
+.upload-main-text {
+  color: var(--cc-sf-label-color, #1E293B);
+}
+
+.upload-sub-text {
+  color: var(--cc-sf-hint-color, #64748B);
+}
+
+.upload-link {
+  color: var(--cc-sf-dropzone-link-color, #3B82F6);
+  font-weight: 500;
+}
+
+.upload-formats {
+  color: var(--cc-sf-dropzone-link-color, #3B82F6);
+}
+
+.upload-size-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 20px;
+  background: var(--cc-sf-input-disabled-bg, #F3F4F6);
+  color: var(--cc-sf-hint-color, #6B7280);
+  font-weight: 500;
+}
+
+.uploaded-item {
+  background: var(--cc-sf-uploaded-item-bg, #ffffff);
+  border: var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);
+  border-radius: var(--cc-sf-uploaded-item-radius, 8px);
+  transition: box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  }
+
+  mat-icon.file-type-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    flex-shrink: 0;
+    color: var(--cc-sf-hint-color, #64748B);
+  }
+
+  .file-thumb {
+    width: 36px;
+    height: 36px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .file-info {
+    min-width: 0;
+    gap: 2px;
+
+    .file-name {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .file-remove-btn {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--cc-sf-uploaded-remove-color, #94A3B8);
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s ease, background 0.15s ease;
+
+    mat-icon {
+      font-size: 1.1rem;
+      width: 1.1rem;
+      height: 1.1rem;
+      line-height: 1.1rem;
+    }
+
+    &:hover:not(:disabled) {
+      color: var(--cc-sf-uploaded-remove-hover-color, #DC2626);
+      background: var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  &.uploading {
+    background: var(--cc-sf-uploaded-uploading-bg, #F8FAFC);
+    border-color: var(--cc-sf-uploaded-uploading-border, #CBD5E1);
+    opacity: 0.85;
+  }
+}
+
+.upload-spinner {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-top-color: var(--cc-sf-accent-color, #3B82F6);
+  animation: cc-spin 0.7s linear infinite;
+}
+
+@keyframes cc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.uploading-label {
+  font-style: italic;
+}
+
+.input-group {
+  align-items: stretch;
+
+  .field-input {
+    flex: 1;
+    width: auto; // Allow flex to control width
+
+    .input-prefix+& {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .field-input:has(+ .input-suffix) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .field-input.has-icon-right {
+    padding-right: 3rem;
+  }
+
+  &.readonly {
+    .field-input {
+      cursor: default;
+    }
+  }
+}
+
+.input-prefix,
+.input-suffix {
+  display: flex !important;
+  align-items: center;
+  white-space: nowrap;
+  padding: 0 14px;
+  background-color: var(--cc-sf-input-disabled-bg);
+  border: 1px solid var(--cc-sf-input-border);
+  font-size: 0.875rem;
+  color: var(--cc-sf-hint-color);
+  user-select: none;
+}
+
+.input-prefix {
+  border-right: none;
+  border-top-left-radius: var(--cc-sf-input-radius, 8px);
+  border-bottom-left-radius: var(--cc-sf-input-radius, 8px);
+}
+
+.input-suffix {
+  border-left: none;
+  border-top-right-radius: var(--cc-sf-input-radius, 8px);
+  border-bottom-right-radius: var(--cc-sf-input-radius, 8px);
+}
+
+.readonly-icons {
+  right: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+
+  mat-icon.lock-icon {
+    font-size: 1rem;
+    width: 1rem;
+    height: 1rem;
+    line-height: 1rem;
+    opacity: 0.5;
+    color: var(--cc-sf-hint-color, #6B7280);
+  }
+}
+
+.suffix-action-icons {
+  right: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  pointer-events: auto;
+
+  mat-icon.suffix-action-icon {
+    font-size: 1.125rem;
+    width: 1.125rem;
+    height: 1.125rem;
+    line-height: 1.125rem;
+    color: var(--cc-sf-hint-color, #6B7280);
+    cursor: pointer;
+    transition: color 0.2s ease, transform 0.15s ease;
+
+    &:hover {
+      color: var(--cc-sf-text-color, #202124);
+      transform: scale(1.15);
+    }
+  }
+}
+
+.date-icon-wrapper {
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: auto;
+
+  .mat-icon-button {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+}
+
+.subfields-group-wrapper {
+  .subfields-row {
+    transition: all 0.2s ease;
+
+    &.is-invalid {
+      .subfield-item ::ng-deep .field-input {
+        border-color: var(--cc-sf-error-border, #DC2626);
+        background-color: var(--cc-sf-error-bg, #FEF2F2);
+      }
+    }
+
+    .subfield-item {
+      min-width: 0;
+
+      ::ng-deep .field-label {
+        font-size: 0.75rem !important;
+        margin-bottom: 4px !important;
+        font-weight: 500 !important;
+        color: var(--cc-sf-hint-color, #6B7280) !important;
+      }
+    }
+
+    .subfield-separator {
+      font-weight: bold;
+    }
+  }
+}
+
+.autocomplete-wrapper {
+  .ac-input {
+    padding-left: 40px !important;
+  }
+
+  .ac-search-icon {
+    left: 0.75rem;
+    width: 1.1rem;
+    height: 1.1rem;
+    line-height: 1.1rem;
+    z-index: 1;
+    transition: color var(--cc-sf-input-transition, 0.2s ease);
+  }
+
+  .ac-clear-btn {
+    right: 0.6rem;
+    transition: color 0.15s ease, background 0.15s ease;
+
+    mat-icon {
+      font-size: 1rem;
+      width: 1rem;
+      height: 1rem;
+      line-height: 1rem;
+    }
+
+    &:hover {
+      color: var(--cc-sf-label-color, #374151);
+      background: var(--cc-sf-input-disabled-bg, #F3F4F6);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &:focus-within .ac-search-icon {
+    color: var(--cc-sf-accent-color, #3B82F6);
+  }
+
+  &.is-invalid .ac-input {
+    border-color: var(--cc-sf-error-border) !important;
+    background-color: var(--cc-sf-error-bg);
+  }
+
+  &.readonly .ac-input {
+    background-color: var(--cc-sf-input-disabled-bg);
+    color: var(--cc-sf-input-disabled-color, #6B7280);
+    cursor: not-allowed;
+    border-color: var(--cc-sf-input-disabled-border) !important;
+  }
+}
+
+.ac-no-results {
+  font-style: italic;
+}
+
+// ── mat-autocomplete panel global fix ───────────────────────────────────────
+// The CDK overlay is appended to <body> so it is outside component scope.
+// ::ng-deep is required to pierce view encapsulation for the panel.
+::ng-deep {
+
+  .mat-mdc-autocomplete-panel,
+  .mat-autocomplete-panel {
+    background: var(--cc-sf-input-bg, #ffffff) !important;
+    border-radius: var(--cc-sf-input-radius, 9px) !important;
+    border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
+    padding: 4px 0 !important;
+    min-width: 200px;
+
+    mat-option,
+    .mat-mdc-option,
+    .mat-option {
+      background: var(--cc-sf-input-bg, #ffffff) !important;
+      color: var(--cc-sf-label-color, #111827) !important;
+      font-size: 0.875rem !important;
+      padding: 10px 16px !important;
+      min-height: 40px !important;
+      line-height: 1.4 !important;
+      // Column direction so displayMeta fields stack below the label
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      transition: background var(--cc-sf-input-transition, 0.2s ease) !important;
+
+      &:hover:not(.mat-option-disabled):not([disabled]) {
+        background: var(--cc-sf-input-disabled-bg, #F3F4F6) !important;
+      }
+
+      &.mat-selected:not(.mat-option-multiple),
+      &.mdc-list-item--selected {
+        background: var(--cc-sf-dropzone-hover-bg, #EFF6FF) !important;
+        color: var(--cc-sf-selected-color, #6366F1) !important;
+        font-weight: 600 !important;
+      }
+
+      // ── Dynamic display fields rendered below the option label ────────────
+      .ac-option-label {
+        font-weight: 500;
+        color: var(--cc-sf-label-color, #111827);
+        font-size: 0.875rem;
+        display: block;
+      }
+
+      .ac-display-fields {
+        align-items: center;
+        line-height: 1;
+      }
+
+      .ac-df-item {
+        display: inline-flex;
+        align-items: center;
+        font-size: 0.72rem;
+        color: var(--cc-sf-hint-color, #6B7280);
+        gap: 3px;
+      }
+
+      // Chip style: used for email and phone entries
+      .ac-df-chip {
+        background: var(--cc-sf-input-disabled-bg, #F3F4F6);
+        border-radius: 4px;
+        padding: 2px 6px;
+      }
+
+      // Plain text style
+      .ac-df-text {
+        color: var(--cc-sf-hint-color, #6B7280);
+      }
+
+      // Avatar image
+      .ac-df-image {
+        // No background chip for images
+      }
+
+      .ac-df-avatar {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 1px solid var(--cc-sf-input-border, #D1D5DB);
+        vertical-align: middle;
+      }
+
+      .ac-df-label {
+        font-weight: 600;
+        color: var(--cc-sf-hint-color, #9CA3AF);
+        margin-right: 2px;
+      }
+
+      .ac-df-icon {
+        font-size: 11px;
+        width: 11px;
+        height: 11px;
+        line-height: 11px;
+        color: var(--cc-sf-hint-color, #9CA3AF);
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+.mu-layout {
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mu-title {
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.mu-badge {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.mu-description {
+  line-height: 1.6;
+}
+
+.mu-feature-item {
+  .mu-check {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    flex-shrink: 0;
+  }
+}
+
+.mu-right {
+  min-height: 260px;
+}
+
+.mu-right-empty {
+  min-height: 250px;
+  max-width: 400px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+
+  .mu-right-empty-icon {
+    width: 52px;
+    height: 52px;
+    line-height: 52px;
+    opacity: 0.3;
+  }
+
+  p {
+    margin: 0;
+    font-size: 0.85rem;
+  }
+}
+
+.media-add-container {
+  display: inline-block;
+
+  ::ng-deep button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .menu-chevron {
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      transition: transform 0.2s ease;
+    }
+  }
+}
+
+.media-dropdown {
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 200;
+  min-width: 240px;
+  box-shadow: var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  animation: mu-fade-in 0.15s ease;
+}
+
+@keyframes mu-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.media-dropdown-item {
+  transition: background 0.15s ease;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--cc-sf-dropzone-hover-bg, #F0F9FF);
+  }
+}
+
+.media-drop-icon {
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &--video {
+    background: var(--mu-icon-video-bg, #FFF0F0);
+    color: var(--mu-icon-video-color, #EF4444);
+  }
+
+  &--device {
+    background: var(--mu-icon-device-bg, #EFF6FF);
+    color: var(--mu-icon-device-color, #3B82F6);
+  }
+
+  &--library {
+    background: var(--mu-icon-library-bg, #F0FDF4);
+    color: var(--mu-icon-library-color, #22C55E);
+  }
+}
+
+.media-drop-text {
+  gap: 2px;
+}
+
+.youtube-input-panel {
+  animation: mu-fade-in 0.18s ease;
+}
+
+.youtube-panel-label {
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    color: var(--mu-icon-video-color, #EF4444);
+  }
+}
+
+.youtube-input-row {
+  align-items: stretch;
+}
+
+.media-menu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+}
+
+.media-upload-status {
+  animation: mu-fade-in 0.2s ease;
+
+  .status-icon {
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+  }
+}
+
+.media-carousel-main {
+  max-width: 400px;
+  height: var(--mu-carousel-height, 250px);
+}
+
+.carousel-viewer {
+  inset: 0;
+
+  .carousel-image {
+    object-fit: cover;
+  }
+
+  .carousel-spinner {
+    width: 36px;
+    height: 36px;
+    border-top-color: var(--cc-sf-accent-color, #3B82F6);
+    animation: cc-spin 0.7s linear infinite;
+  }
+}
+
+.carousel-nav {
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 40px;
+  height: 40px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  transition: background 0.2s ease, opacity 0.2s ease;
+  backdrop-filter: blur(4px);
+
+  mat-icon {
+    font-size: 22px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    color: #1E293B;
+  }
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 1);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  &--prev {
+    left: 12px;
+  }
+
+  &--next {
+    right: 12px;
+  }
+}
+
+.carousel-remove-btn {
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+  width: 32px;
+  height: 32px;
+  transition: background 0.2s ease;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    color: #ffffff;
+  }
+
+  &:hover:not(:disabled) {
+    background: rgba(220, 38, 38, 0.85);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.carousel-dots {
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+.carousel-dot {
+  width: 8px;
+  height: 8px;
+  transition: background 0.2s ease, transform 0.2s ease;
+
+  &.active {
+    background: #ffffff;
+    transform: scale(1.3);
+  }
+}
+
+.media-thumbnail-strip {
+  max-width: 400px;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--cc-sf-input-disabled-border, #D1D5DB);
+    border-radius: 2px;
+  }
+}
+
+.media-thumb {
+  flex-shrink: 0;
+  width: 72px;
+  height: 52px;
+  transition: border-color 0.2s ease, transform 0.15s ease;
+
+  &.active {
+    border-color: var(--mu-thumb-active-border, var(--cc-sf-accent-color, #3B82F6));
+    transform: scale(1.04);
+  }
+
+  &:hover:not(.active) {
+    border-color: var(--cc-sf-input-hover-border, #9CA3AF);
+  }
+
+  .thumb-img {
+    object-fit: cover;
+  }
+
+  .thumb-yt-placeholder {
+    mat-icon {
+      font-size: 28px;
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+    }
+  }
+
+  .thumb-uploading {
+    .thumb-spinner {
+      width: 20px;
+      height: 20px;
+      border-top-color: var(--cc-sf-accent-color, #3B82F6);
+      animation: cc-spin 0.7s linear infinite;
+    }
+  }
+}
+
+// ── Portal Modal Styles (rendered in document.body) ───────────────
+
+.media-library-portal-host {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+
+  &.is-open {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+
+    .media-library-modal {
+      transform: scale(1) translateY(0);
+    }
+  }
+}
+
+.media-library-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.media-library-modal {
+  position: relative;
+  z-index: 10000;
+  width: 90vw;
+  max-width: 900px;
+  max-height: 90vh;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  transform: scale(0.95) translateY(10px);
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+
+.library-modal-header {
+  flex-shrink: 0;
+}
+
+.library-modal-title {
+  font-weight: 700;
+}
+
+.library-modal-subtitle {
+  line-height: 1.5;
+  max-width: 600px;
+}
+
+.library-close-btn {
+  width: 32px;
+  height: 32px;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &:hover {
+    background: var(--cc-sf-input-disabled-bg, #F3F4F6);
+    color: var(--cc-sf-label-color, #374151);
+  }
+}
+
+.library-loading,
+.library-empty {
+  mat-icon {
+    font-size: 40px;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    opacity: 0.5;
+  }
+}
+
+.lib-spinner {
+  width: 36px;
+  height: 36px;
+  border-top-color: var(--cc-sf-accent-color, #3B82F6);
+  animation: cc-spin 0.7s linear infinite;
+}
+
+.library-error {
+  flex-shrink: 0;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
+.library-grid {
+  grid-template-columns: repeat(5, 1fr);
+  max-height: 50vh;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #F1F1F1;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #C1C1C1;
+    border-radius: 10px;
+    border: 2px solid #F1F1F1;
+  }
+}
+
+.library-grid-item {
+  aspect-ratio: 1 / 1;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  &:hover {
+    transform: translateY(-4px) scale(1.02);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  &.selected {
+    border-color: var(--cc-sf-accent-color, #3B82F6);
+
+    .library-grid-img {
+      opacity: 0.7;
+    }
+  }
+
+  &:hover .library-overlay-hover {
+    opacity: 1;
+  }
+}
+
+.library-grid-img {
+  object-fit: cover;
+}
+
+.library-overlay-hover {
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.library-check {
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+  }
+}
+
+.library-modal-footer {
+  flex-shrink: 0;
+
+  .library-footer-actions {
+    ::ng-deep .cc-btn-primary {
+      background-color: var(--cc-sf-accent-color, #3B82F6) !important;
+      border-color: var(--cc-sf-accent-color, #3B82F6) !important;
+      color: #ffffff !important;
+      font-weight: 600;
+      padding-left: 32px;
+      padding-right: 32px;
+
+      &:hover {
+        background-color: var(--cc-sf-btn-primary-hover-bg, #2563EB) !important;
+      }
+
+      &:disabled {
+        background-color: #93C5FD !important;
+        cursor: not-allowed;
+      }
+    }
+
+    ::ng-deep .cc-btn-outline {
+      font-weight: 600;
+      padding-left: 24px;
+      padding-right: 24px;
+      border-color: #D1D5DB;
+      color: #374151;
+
+      &:hover {
+        background-color: #F9FAFB;
+      }
+    }
+  }
+}
+
+.location-subtitle {
+  line-height: 1.5;
+}
+
+.loc-tab-btn {
+  ::ng-deep button {
+    width: 100%;
+
+    &:not(.cc-btn-warning) {
+      background-color: var(--cc-sf-input-bg, #ffffff) !important;
+      color: var(--cc-sf-label-color, #000000) !important;
+      border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB);
+
+      &:hover {
+        background-color: var(--cc-sf-input-disabled-bg, #F3F4F6) !important;
+      }
+    }
+  }
+}
+
+.loc-venue-item {
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border-color: var(--cc-sf-input-hover-border, #9CA3AF);
+  }
+}
+
+.loc-venue-search-icon {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  flex-shrink: 0;
+}
+
+.loc-venue-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.loc-action-btn {
+  transition: background 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+  }
+
+  &.loc-delete-btn {
+    color: var(--loc-delete-color, #E53E3E);
+
+    &:hover {
+      background: var(--cc-sf-error-bg, #FEF2F2);
+    }
+  }
+
+  &.loc-edit-btn {
+    color: var(--cc-sf-hint-color, #9CA3AF);
+
+    &:hover {
+      color: var(--cc-sf-input-focus-border, #3B82F6);
+      background: var(--cc-sf-dropzone-hover-bg, #EFF6FF);
+    }
+  }
+}
+
+.loc-search-icon {
+  left: 0.75rem;
+  width: 1.1rem;
+  height: 1.1rem;
+  line-height: 1.1rem;
+  z-index: 1;
+}
+
+.loc-suggestions-panel {
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 300;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
+  animation: mu-fade-in 0.15s ease;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.loc-suggestion-item {
+  transition: background 0.12s ease;
+
+  &:hover,
+  &:focus {
+    background: var(--loc-suggestion-hover-bg, #F0F9FF);
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--cc-sf-input-disabled-border, #F3F4F6);
+  }
+}
+
+.loc-suggestion-icon {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  flex-shrink: 0;
+}
+
+.loc-suggestion-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.loc-add-btn {
+  transition: opacity 0.15s ease;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.loc-map-container {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+}
+
+.loc-tba-panel {
+  min-height: 120px;
+}
+
+.loc-tba-icon {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  opacity: 0.6;
+}
+
+.loc-tba-text {
+  line-height: 1.6;
+  max-width: 360px;
+}
+
+.radio-label {
+  display: flex !important;
+
+  .option-content {
+    padding-left: 10px;
+  }
+}
+
+/* ==========================================================================
+   LINK_LIST Field Styling
+   ========================================================================== */
+.link-list-container {
+  border: none !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+}
+
+.link-items-list {
+  list-style: none;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr !important;
+    
+    .link-list-item {
+      grid-column: span 12 !important;
+    }
+  }
+}
+
+.link-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background-color: var(--cc-sf-link-item-bg, #f9fafb) !important;
+  border: 1px solid var(--cc-sf-link-item-border, #E5E7EB) !important;
+  border-radius: var(--cc-sf-input-radius, 9px) !important;
+  gap: 12px;
+  min-height: 48px;
+  
+  .link-url-text {
+    font-size: 0.875rem;
+    color: var(--cc-sf-link-item-text, #111827);
+    word-break: break-all;
+  }
+}
+
+.link-list-item .action-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border-radius: 6px;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  mat-icon {
+    font-size: 22px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.edit-btn {
+    color: var(--cc-sf-link-edit-color, #4b5563);
+    &:hover {
+      color: var(--cc-sf-accent-color, #6366F1);
+      background-color: #F3F4F6;
+    }
+  }
+
+  &.delete-btn {
+    color: var(--cc-sf-link-delete-color, #ef4444);
+    &:hover {
+      background-color: var(--cc-sf-error-bg, #FFF5F5);
+    }
+  }
+  
+  &.save-btn {
+    color: var(--cc-sf-link-save-color, #16a34a) !important;
+    &:hover {
+      background-color: #ECFDF5;
+    }
+  }
+
+  &.cancel-btn {
+    color: #ef4444 !important; // Red cancel icon color
+    &:hover {
+      background-color: var(--cc-sf-error-bg, #FFF5F5);
+    }
+  }
+}
+
+.pe-40px {
+  padding-right: 40px !important;
+}
+
+.dropdown-loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  gap: 8px;
+}
+
+.dropdown-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #E2E8F0;
+  border-top-color: var(--cc-sf-accent-color, #3B82F6);
+  border-radius: 50%;
+  animation: cc-spin 0.7s linear infinite;
+}
+
+.mini-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #E2E8F0;
+  border-top-color: var(--cc-sf-accent-color, #3B82F6);
+  border-radius: 50%;
+  animation: cc-spin 0.7s linear infinite;
+}
+
+.native-select-wrapper {
+  display: block;
+  width: 100%;
+  position: relative;
+
+  select {
+    width: 100%;
+  }
+
+  .native-select-spinner {
+    position: absolute;
+    right: 2.5rem;
+    top: calc(50% - 7px);
+    width: 14px;
+    height: 14px;
+    border: 2px solid #CBD5E1;
+    border-top-color: var(--cc-sf-accent-color, #3B82F6);
+    border-radius: 50%;
+    animation: cc-spin 0.7s linear infinite;
+    pointer-events: none;
+  }
+}