commons-shared-web-ui 0.0.62 → 0.0.64

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

@@ -1,2255 +0,0 @@
-@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;
-  }
-}