@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/input/input.component.scss

@@ -0,0 +1,1337 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Material Icons */
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+/* Roboto Font */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+
+/* Angular Material Theme (Indigo Pink) */
+@import url('https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css');
+
+
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+
+@import '../styles/colors.scss';
+
+/* ===== BASE STYLES ===== */
+.al-input-field {
+  width: 100%;
+}
+
+/* Ensure proper alignment for date picker input and toggle in single row */
+::ng-deep .al-input-field .mat-mdc-form-field-flex {
+  display: flex !important;
+  align-items: center !important;
+  flex-direction: row !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field-infix {
+  display: flex !important;
+  align-items: center !important;
+  flex: 1 !important;
+}
+
+/* Date picker input alignment */
+::ng-deep .al-input-field input[matInput] {
+  flex: 1 !important;
+  text-align: left !important;
+}
+
+/* Ensure suffix elements (like datepicker toggle) are aligned to the right */
+::ng-deep .al-input-field .mat-mdc-form-field-suffix {
+  display: flex !important;
+  align-items: center !important;
+  margin-left: auto !important;
+  margin-right: 12px !important;
+}
+
+
+/* Global background color for all input fields */
+::ng-deep .al-input-field .mat-mdc-form-field-flex,
+::ng-deep .al-input-field .mat-mdc-text-field-wrapper,
+::ng-deep .al-input-field .mat-mdc-form-field-infix {
+  background-color: #F7F9FE !important;
+}
+
+/* Hide subscript wrapper by default */
+::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper {
+  background-color: transparent !important;
+  display: none !important;
+}
+
+.mdc-notched-outline.mdc-notched-outline--no-label {
+  background: #fff;
+  border-radius: 4px !important;
+}
+
+/* Show subscript wrapper only when there's helper text or error */
+::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-subscript-wrapper,
+::ng-deep .al-input-field.has-error .mat-mdc-form-field-subscript-wrapper {
+  display: block !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay {
+  background-color: #F7F9FE !important;
+}
+
+/* ===== CATEGORY STYLES ===== */
+
+/* Common border width for most categories */
+::ng-deep .al-input-category-primary,
+::ng-deep .al-input-category-success,
+::ng-deep .al-input-category-error,
+::ng-deep .al-input-category-disabled {
+  --mdc-outlined-text-field-outline-width: 1px !important;
+  --mdc-outlined-text-field-focus-outline-width: 1px !important;
+  --mdc-outlined-text-field-hover-outline-width: 1px !important;
+}
+
+/* Simple category */
+::ng-deep .al-input-category-simple {
+  --mdc-outlined-text-field-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-label-text-color: $color-blue !important;
+  --mdc-outlined-text-field-focus-label-text-color: $color-blue !important;
+}
+
+/* Success category */
+::ng-deep .al-input-category-success {
+  --mdc-outlined-text-field-outline-color: #00AD83 !important;
+  --mdc-outlined-text-field-focus-outline-color: #00AD83 !important;
+  --mdc-outlined-text-field-hover-outline-color: #00AD83 !important;
+  --mdc-outlined-text-field-label-text-color: #00AD83 !important;
+  --mdc-outlined-text-field-focus-label-text-color: #00AD83 !important;
+}
+
+::ng-deep .al-input-category-success input::placeholder {
+  color: #00AD83 !important;
+}
+
+/* Error category */
+::ng-deep .al-input-category-error {
+  --mdc-outlined-text-field-outline-color: #E854A4 !important;
+  --mdc-outlined-text-field-focus-outline-color: #E854A4 !important;
+  --mdc-outlined-text-field-hover-outline-color: #E854A4 !important;
+  --mdc-outlined-text-field-label-text-color: $color-error-500 !important;
+  --mdc-outlined-text-field-focus-label-text-color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-category-error input::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Disabled category */
+::ng-deep .al-input-category-disabled {
+  --mdc-outlined-text-field-outline-color: $color-blue !important;
+  --mdc-outlined-text-field-focus-outline-color: $color-blue !important;
+  --mdc-outlined-text-field-hover-outline-color: $color-blue !important;
+  --mdc-outlined-text-field-label-text-color: $color-blue !important;
+  --mdc-outlined-text-field-focus-label-text-color: $color-blue !important;
+}
+
+/* Primary category - 2px focus border width */
+::ng-deep .al-input-category-primary {
+  --mdc-outlined-text-field-focus-outline-width: 2px !important;
+  --mdc-outlined-text-field-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-focus-outline-color: #5473E8 !important;
+  --mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-label-text-color: $color-blue !important;
+  --mdc-outlined-text-field-focus-label-text-color: $color-blue !important;
+}
+
+
+::ng-deep .al-input-category-primary .mdc-notched-outline {
+  box-shadow: none !important;
+}
+
+/* Plain category - No border and no label */
+::ng-deep .al-input-category-plain {
+  --mdc-outlined-text-field-outline-color: transparent !important;
+  --mdc-outlined-text-field-focus-outline-color: transparent !important;
+  --mdc-outlined-text-field-hover-outline-color: transparent !important;
+  --mdc-outlined-text-field-outline-width: 0 !important;
+  --mdc-outlined-text-field-focus-outline-width: 0 !important;
+  --mdc-outlined-text-field-hover-outline-width: 0 !important;
+}
+
+/* Hide borders for plain category */
+::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,
+::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,
+::ng-deep .al-input-category-plain .mat-mdc-form-field-label,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,
+::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple {
+  display: none !important;
+}
+
+/* Icon colors for plain category */
+::ng-deep .al-input-category-plain .material-symbols-outlined,
+::ng-deep .al-input-category-plain mat-icon {
+  color: $color-grey-700 !important;
+}
+
+::ng-deep .al-input-field {
+  border-width: 1px !important;
+}
+
+::ng-deep .al-input-field.mat-focused .mdc-notched-outline__leading,
+::ng-deep .al-input-field.mat-focused .mdc-notched-outline__notch,
+::ng-deep .al-input-field.mat-focused .mdc-notched-outline__trailing {
+  border-width: 2px !important;
+}
+
+/* ===== SIZE STYLES ===== */
+
+/* Size-specific form field infix */
+::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,
+::ng-deep .al-input-size-small .mat-mdc-form-field-infix,
+::ng-deep .al-input-size-header .mat-mdc-form-field-infix {
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+}
+
+::ng-deep .al-input-size-xs .mat-mdc-form-field-infix {
+  min-height: 32px !important;
+}
+
+::ng-deep .al-input-size-small .mat-mdc-form-field-infix {
+  min-height: 34px !important;
+}
+
+::ng-deep .al-input-size-base .mat-mdc-form-field-infix {
+  padding: 8px 0 !important;
+  min-height: 24px !important;
+}
+
+::ng-deep .al-input-size-large .mat-mdc-form-field-infix {
+  padding: 16px 0 !important;
+  min-height: 48px !important;
+}
+
+::ng-deep .al-input-size-header .mat-mdc-form-field-infix {
+  min-height: 28px !important;
+}
+
+/* ===== SIZE-SPECIFIC BORDER RADIUS ===== */
+::ng-deep .al-input-size-xs .mdc-notched-outline,
+::ng-deep .al-input-size-small .mdc-notched-outline,
+::ng-deep .al-input-size-base .mdc-notched-outline,
+::ng-deep .al-input-size-header .mdc-notched-outline {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}
+
+
+::ng-deep .al-input-size-small .mdc-notched-outline__trailing,
+::ng-deep .al-input-size-base .mdc-notched-outline__trailing,
+::ng-deep .al-input-size-xs .mdc-notched-outline__trailing,
+::ng-deep .al-input-size-header .mdc-notched-outline__trailing {
+  border-top-right-radius: 4px !important;
+  border-bottom-right-radius: 4px !important;
+}
+
+::ng-deep .al-input-size-large .mdc-notched-outline__leading {
+  border-top-left-radius: 8px !important;
+  border-bottom-left-radius: 8px !important;
+}
+
+::ng-deep .al-input-size-large .mdc-notched-outline__trailing {
+  border-top-right-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+}
+
+/* ===== NO BORDER STYLES ===== */
+
+/* No border input styling - combines header and plain input functionality */
+::ng-deep .al-input-no-border {
+  --mdc-outlined-text-field-outline-color: transparent !important;
+  --mdc-outlined-text-field-focus-outline-color: transparent !important;
+  --mdc-outlined-text-field-hover-outline-color: transparent !important;
+  --mdc-outlined-text-field-outline-width: 0 !important;
+  --mdc-outlined-text-field-focus-outline-width: 0 !important;
+  --mdc-outlined-text-field-hover-outline-width: 0 !important;
+}
+
+::ng-deep .al-input-no-border .mat-mdc-form-field-outline,
+::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,
+::ng-deep .al-input-no-border .mat-mdc-form-field-label,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,
+::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple {
+  display: none !important;
+}
+
+/* ===== FONT STYLES ===== */
+
+/* Common font colors */
+::ng-deep .al-input-field input,
+::ng-deep .al-input-field .mat-mdc-select-value {
+  color: $color-grey-700 !important;
+}
+
+/* Font sizes by size category */
+::ng-deep .al-input-size-xs input,
+::ng-deep .al-input-size-xs .mat-mdc-select-value,
+::ng-deep .al-input-size-small input,
+::ng-deep .al-input-size-small .mat-mdc-select-value,
+::ng-deep .al-input-size-header input,
+::ng-deep .al-input-size-header .mat-mdc-select-value {
+  font-size: 12px !important;
+}
+
+::ng-deep .al-input-size-base input,
+::ng-deep .al-input-size-base .mat-mdc-select-value {
+  font-size: 14px !important;
+}
+
+::ng-deep .al-input-size-large input,
+::ng-deep .al-input-size-large .mat-mdc-select-value {
+  font-size: 16px !important;
+}
+
+/* Placeholder font sizes */
+::ng-deep .al-input-field input::placeholder {
+  font-size: 12px !important;
+}
+
+/* Prevent placeholder color change on hover and active */
+::ng-deep .al-input-field:hover input::placeholder,
+::ng-deep .al-input-field:focus input::placeholder,
+::ng-deep .al-input-field:active input::placeholder,
+::ng-deep .al-input-field input:hover::placeholder,
+::ng-deep .al-input-field input:focus::placeholder,
+::ng-deep .al-input-field input:active::placeholder {
+  color: $color-grey-700 !important;
+}
+
+/* Category-specific placeholder hover prevention */
+::ng-deep .al-input-category-primary:hover input::placeholder,
+::ng-deep .al-input-category-primary:focus input::placeholder,
+::ng-deep .al-input-category-primary:active input::placeholder,
+::ng-deep .al-input-category-primary input:hover::placeholder,
+::ng-deep .al-input-category-primary input:focus::placeholder,
+::ng-deep .al-input-category-primary input:active::placeholder {
+  color: $color-grey-700 !important;
+}
+
+::ng-deep .al-input-category-simple:hover input::placeholder,
+::ng-deep .al-input-category-simple:focus input::placeholder,
+::ng-deep .al-input-category-simple:active input::placeholder,
+::ng-deep .al-input-category-simple input:hover::placeholder,
+::ng-deep .al-input-category-simple input:focus::placeholder,
+::ng-deep .al-input-category-simple input:active::placeholder {
+  color: $color-grey-700 !important;
+}
+
+/* Label font sizes */
+::ng-deep .al-input-size-xs .mat-mdc-form-field-label,
+::ng-deep .al-input-size-xs .mat-mdc-floating-label,
+::ng-deep .al-input-size-small .mat-mdc-form-field-label,
+::ng-deep .al-input-size-small .mat-mdc-floating-label,
+::ng-deep .al-input-size-header .mat-mdc-form-field-label,
+::ng-deep .al-input-size-header .mat-mdc-floating-label {
+  font-size: 12px !important;
+}
+
+::ng-deep .al-input-size-base .mat-mdc-form-field-label,
+::ng-deep .al-input-size-base .mat-mdc-floating-label {
+  font-size: 14px !important;
+}
+
+::ng-deep .al-input-size-large .mat-mdc-form-field-label,
+::ng-deep .al-input-size-large .mat-mdc-floating-label {
+  font-size: 16px !important;
+}
+
+/* Font styling for simple and primary categories */
+::ng-deep .al-input-category-simple input,
+::ng-deep .al-input-category-simple .mat-mdc-select-value,
+::ng-deep .al-input-category-primary input,
+::ng-deep .al-input-category-primary .mat-mdc-select-value {
+  font-weight: 400 !important;
+  letter-spacing: 0.5px !important;
+}
+
+/* ===== ICON STYLES ===== */
+
+/* Base icon styling */
+::ng-deep .al-input-field .material-symbols-outlined,
+::ng-deep .al-input-field mat-icon {
+  height: 20px !important;
+  width: 20px !important;
+  font-size: 20px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Icon sizing by size category */
+::ng-deep .al-input-size-small .material-symbols-outlined,
+::ng-deep .al-input-size-xs .material-symbols-outlined,
+::ng-deep .al-input-size-header .material-symbols-outlined,
+::ng-deep .al-input-size-small mat-icon,
+::ng-deep .al-input-size-xs mat-icon,
+::ng-deep .al-input-size-header mat-icon {
+  height: 16px !important;
+  width: 16px !important;
+  font-size: 16px !important;
+}
+
+/* Large size icon styling */
+::ng-deep .al-input-size-large .material-symbols-outlined,
+::ng-deep .al-input-size-large mat-icon {
+  height: 24px !important;
+  width: 24px !important;
+  font-size: 24px !important;
+}
+
+/* Icon colors by category */
+::ng-deep .al-input-category-simple .material-symbols-outlined,
+::ng-deep .al-input-category-primary .material-symbols-outlined,
+::ng-deep .al-input-category-simple mat-icon,
+::ng-deep .al-input-category-primary mat-icon {
+  color: $color-grey-700 !important;
+}
+
+::ng-deep .al-input-category-success .material-symbols-outlined,
+::ng-deep .al-input-category-success mat-icon {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-category-error .material-symbols-outlined,
+::ng-deep .al-input-category-error mat-icon {
+  color: #E854A4 !important;
+}
+
+/* Icon spacing */
+::ng-deep .al-input-field .material-symbols-outlined[matPrefix],
+::ng-deep .al-input-field mat-icon[matPrefix] {
+  padding-left: 12px !important;
+  padding-right: 8px !important;
+}
+
+::ng-deep .al-input-field .material-symbols-outlined[matSuffix],
+::ng-deep .al-input-field mat-icon[matSuffix] {
+  padding-right: 12px !important;
+  padding-left: 8px;
+}
+
+.mat-mdc-form-field-icon-suffix {
+  padding: 0 !important;
+}
+
+/* Label positioning based on icon presence */
+::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label {
+  margin-left: 8px !important;
+}
+
+/* When no left icon is present, keep label in original position */
+::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,
+::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,
+::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label {
+  margin-left: 0 !important;
+}
+
+::ng-deep .mat-mdc-form-field-icon-prefix {
+  padding: 0 0px 0 0 !important;
+}
+
+.material-symbols-outlined[matSuffix],
+mat-icon[matSuffix] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ===== FLOATING LABEL POSITIONING ===== */
+
+::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 11px !important;
+}
+
+::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 10px !important;
+}
+
+::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 14px !important;
+}
+
+::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 7px !important;
+}
+
+::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 24px !important;
+}
+
+
+/* Label transform calculations - Fixed to position at top of border */
+::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+  --mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+  --mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+  --mat-mdc-form-field-label-transform: translateY(-26px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+  --mat-mdc-form-field-label-transform: translateY(-18px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+  --mat-mdc-form-field-label-transform: translateY(-35px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+/* ===== STATE STYLES ===== */
+
+/* Error state */
+::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline {
+  border-color: $color-error-500 !important;
+}
+
+/* Disabled state styling */
+::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,
+::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,
+::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,
+::ng-deep .al-input-category-disabled .material-symbols-outlined,
+::ng-deep .al-input-category-disabled mat-icon,
+::ng-deep .al-input-category-disabled input,
+::ng-deep .al-input-category-disabled .mat-mdc-select-value {
+  color: #9CA3AF !important;
+  opacity: 0.6 !important;
+}
+
+/* ===== HELPER TEXT & DROPDOWN STYLES ===== */
+
+/* Prevent label color change on hover */
+::ng-deep .al-input-field .mat-mdc-form-field-label,
+::ng-deep .al-input-field .mat-mdc-floating-label,
+::ng-deep .al-input-field .mdc-floating-label,
+::ng-deep .al-input-field .mdc-text-field__label,
+::ng-deep .al-input-field .mdc-text-field__label--float-above {
+  transition: none !important;
+}
+
+/* Comprehensive hover prevention for all possible states */
+::ng-deep .al-input-field:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field:hover .mdc-floating-label,
+::ng-deep .al-input-field:hover .mdc-text-field__label,
+::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,
+::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,
+::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,
+::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,
+::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above {
+  color: $color-blue !important;
+}
+
+/* Helper text colors */
+::ng-deep .al-input-category-success .mat-mdc-form-field-hint {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-category-error .mat-mdc-form-field-hint {
+  color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,
+::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,
+::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,
+::ng-deep .al-input-category-plain .mat-mdc-form-field-hint {
+  color: $color-grey-700 !important;
+}
+
+/* Prevent label color changes on hover for each category */
+::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,
+::ng-deep .al-input-category-simple:hover .mdc-floating-label,
+::ng-deep .al-input-category-simple:hover .mdc-text-field__label,
+::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above {
+  color: $color-blue !important;
+}
+
+::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,
+::ng-deep .al-input-category-primary:hover .mdc-floating-label,
+::ng-deep .al-input-category-primary:hover .mdc-text-field__label,
+::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above {
+  color: $color-blue !important;
+}
+
+/* Success category hover label styles with higher specificity */
+::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,
+::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above {
+  color: #00AD83 !important;
+}
+
+/* Error category hover label styles with higher specificity */
+::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-error:hover .mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label,
+::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label--float-above,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-floating-label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above {
+  color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,
+::ng-deep .al-input-category-disabled:hover .mdc-floating-label,
+::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,
+::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above {
+  color: $color-blue !important;
+}
+
+::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,
+::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,
+::ng-deep .al-input-category-plain:hover .mdc-floating-label,
+::ng-deep .al-input-category-plain:hover .mdc-text-field__label,
+::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above {
+  color: $color-blue !important;
+}
+
+/* Dropdown arrow colors */
+::ng-deep .al-input-category-success .mat-mdc-select-arrow {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-category-error .mat-mdc-select-arrow {
+  color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,
+::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper {
+  padding: 0 !important;
+}
+
+/* Ensure helper text is visible when subscript wrapper is shown */
+::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-hint,
+::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-error {
+  display: block !important;
+  opacity: 1 !important;
+}
+
+/* Hide helper text when subscript wrapper is hidden */
+::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-hint,
+::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-error {
+  display: none !important;
+  opacity: 0 !important;
+}
+
+/* ===== DATE PICKER STYLES ===== */
+
+/* Calendar Component Styles - Optimized */
+
+/* Ensure proper label and input alignment for all inputs including date picker */
+::ng-deep .al-input-field .mat-mdc-form-field .mat-mdc-floating-label {
+  transition: color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
+  pointer-events: none;
+}
+
+/* Ensure label floats when input is focused, has content, or datepicker is opened */
+::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mat-mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-form-field.mat-form-field-should-float .mat-mdc-floating-label,
+::ng-deep .al-input-field .mat-mdc-form-field:not(.mat-mdc-form-field-label-always-float) .mat-mdc-floating-label.mdc-floating-label--float-above {
+  transform: var(--mat-mdc-form-field-label-transform) !important;
+}
+
+/* Ensure floating label always appears at the top of the border when active */
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label--float-above {
+  transform: var(--mat-mdc-form-field-label-transform) !important;
+}
+
+/* Fix baseline positioning for non-floating state */
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label:not(.mdc-floating-label--float-above) {
+  transform: translateY(0) !important;
+}
+
+/* Border styling to match input field component - Direct CSS approach */
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading,
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch,
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__trailing {
+  border-color: #C3C5D1 !important;
+  border-width: 1px !important;
+}
+
+/* Focus state border color */
+::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
+::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
+::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
+  border-color: $color-blue !important;
+}
+
+/* Hover state border color */
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__leading,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__notch,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__trailing {
+  border-color: #C3C5D1 !important;
+  border-width: 1px !important;
+}
+
+/* Remove any box shadows to match input styling */
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline {
+  box-shadow: none !important;
+}
+
+/* Comprehensive hover styling for all calendar sizes */
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__leading,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__notch,
+::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__trailing {
+  border-color: #C3C5D1 !important;
+  border-width: 1px !important;
+}
+
+/* Comprehensive default border styling for all calendar sizes */
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading,
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch,
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__trailing {
+  border-color: #C3C5D1 !important;
+  border-width: 1px !important;
+}
+
+/* Remove the small grey border before the label */
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading {
+  border-right: none !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch {
+  border-left: none !important;
+  border-right: none !important;
+}
+
+/* Focus and active state border color */
+::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
+::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
+::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
+  border-color: $color-blue !important;
+  border-width: 2px !important;
+}
+
+/* Active state border color */
+::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__leading,
+::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__notch,
+::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__trailing {
+  border-color: $color-blue !important;
+  border-width: 2px !important;
+}
+
+/* Touch target sizing for datepicker toggle button */
+::ng-deep .al-input-field .mat-mdc-button-touch-target {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+/* Date picker toggle alignment - ensure it's properly aligned to the right */
+::ng-deep .al-input-field .mat-datepicker-toggle {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin-left: auto !important;
+  margin-right: 6px !important;
+}
+
+/* Ensure date picker toggle button is properly positioned */
+::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Icon button styling for datepicker toggle - Base size */
+::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base {
+  padding: 0px !important;
+  height: 24px !important;
+  width: 24px !important;
+}
+
+/* Icon button styling for datepicker toggle - Small size (higher specificity) */
+::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base {
+  height: 34px !important;
+  width: 34px !important;
+  padding: 4px !important;
+}
+
+::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle {
+  height: 34px !important;
+  width: 34px !important;
+}
+
+::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-button-touch-target {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-icon-button.mat-mdc-button-small {
+  padding: 4px !important;
+  height: 34px !important;
+  width: 34px !important;
+}
+
+/* Primary color for outlined text field floating label */
+::ng-deep .al-input-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label {
+  color: $color-blue !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper {
+  display: none !important;
+}
+
+::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper:hover {
+  border-color: transparent !important;
+}
+
+/* Success state placeholder color - higher specificity */
+::ng-deep .al-input-field.al-input-category-success input::placeholder,
+::ng-deep .al-input-field.al-input-category-success:hover input::placeholder,
+::ng-deep .al-input-field.al-input-category-success:focus input::placeholder,
+::ng-deep .al-input-field.al-input-category-success:active input::placeholder,
+::ng-deep .al-input-field.al-input-category-success input:hover::placeholder,
+::ng-deep .al-input-field.al-input-category-success input:focus::placeholder,
+::ng-deep .al-input-field.al-input-category-success input:active::placeholder {
+  color: #00AD83 !important;
+}
+
+/* Error state placeholder color - higher specificity */
+::ng-deep .al-input-field.al-input-category-error input::placeholder,
+::ng-deep .al-input-field.al-input-category-error:hover input::placeholder,
+::ng-deep .al-input-field.al-input-category-error:focus input::placeholder,
+::ng-deep .al-input-field.al-input-category-error:active input::placeholder,
+::ng-deep .al-input-field.al-input-category-error input:hover::placeholder,
+::ng-deep .al-input-field.al-input-category-error input:focus::placeholder,
+::ng-deep .al-input-field.al-input-category-error input:active::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Even higher specificity for success state placeholder */
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field input::placeholder,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover input::placeholder,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:focus input::placeholder,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:active input::placeholder {
+  color: #00AD83 !important;
+}
+
+/* Even higher specificity for error state placeholder */
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field input::placeholder,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover input::placeholder,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:focus input::placeholder,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:active input::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Default placeholder color for all inputs */
+::ng-deep .al-input-field input::placeholder {
+  color: $color-grey-700 !important;
+}
+
+/* Override default for success state */
+::ng-deep .al-input-field.al-input-category-success input::placeholder {
+  color: #00AD83 !important;
+}
+
+/* Override default for error state */
+::ng-deep .al-input-field.al-input-category-error input::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Maximum specificity for success state placeholder - should override everything */
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder {
+  color: #00AD83 !important;
+}
+
+/* Maximum specificity for error state placeholder - should override everything */
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Test rule to ensure CSS is being applied - this should make all placeholders red for testing */
+/* ::ng-deep .al-input-field input::placeholder {
+  color: red !important;
+} */
+
+/* ULTRA SPECIFIC - Success state placeholder - should definitely work */
+::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder {
+  color: #00AD83 !important;
+}
+
+/* ULTRA SPECIFIC - Error state placeholder - should definitely work */
+::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Force override with !important and higher specificity */
+::ng-deep .al-input-field.al-input-category-success input[placeholder]::placeholder {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-field.al-input-category-error input[placeholder]::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Target Material Design specific classes for success state */
+::ng-deep .mat-mdc-form-field.al-input-category-success .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder {
+  color: #00AD83 !important;
+}
+
+/* Target Material Design specific classes for error state */
+::ng-deep .mat-mdc-form-field.al-input-category-error .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Alternative approach - target by form field class */
+::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-success input::placeholder {
+  color: #00AD83 !important;
+}
+
+::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-error input::placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Try different CSS properties for success state */
+::ng-deep .al-input-field.al-input-category-success input::placeholder {
+  color: #00AD83 !important;
+  -webkit-text-fill-color: #00AD83 !important;
+}
+
+::ng-deep .al-input-field.al-input-category-success input::-webkit-input-placeholder {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-field.al-input-category-success input::-moz-placeholder {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-field.al-input-category-success input:-ms-input-placeholder {
+  color: #00AD83 !important;
+}
+
+/* Try different CSS properties for error state */
+::ng-deep .al-input-field.al-input-category-error input::placeholder {
+  color: $color-error-500 !important;
+  -webkit-text-fill-color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-field.al-input-category-error input::-webkit-input-placeholder {
+  color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-field.al-input-category-error input::-moz-placeholder {
+  color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-field.al-input-category-error input:-ms-input-placeholder {
+  color: $color-error-500 !important;
+}
+
+/* Success state floating label color */
+::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label {
+  color: #00AD83 !important;
+}
+
+/* Error state floating label color */
+::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label {
+  color: $color-error-500 !important;
+}
+
+/* Success state floating label when focused */
+::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
+  color: #00AD83 !important;
+}
+
+/* Error state floating label when focused */
+::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
+  color: $color-error-500 !important;
+}
+
+/* ===== COLOR PICKER STYLES ===== */
+
+/* Color picker container */
+.color-picker-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+/* Color picker input styling */
+.color-picker-input {
+  position: absolute;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 2;
+}
+
+/* Color picker visual indicator */
+.color-picker-container::after {
+  content: '';
+  position: absolute;
+  right: 0px;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 2px solid #C3C5D1;
+  background-color: var(--color-value, #000000);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Color picker hover state */
+.color-picker-container:hover::after {
+  border-color: $color-blue;
+}
+
+/* Color picker focus state */
+.color-picker-input:focus+.color-picker-container::after,
+.color-picker-input:focus-visible+.color-picker-container::after {
+  border-color: $color-blue;
+  box-shadow: 0 0 0 1px $color-blue;
+}
+
+/* Size-specific color picker styling */
+::ng-deep .al-input-size-xs .color-picker-input,
+::ng-deep .al-input-size-small .color-picker-input,
+::ng-deep .al-input-size-header .color-picker-input {
+  width: 20px;
+  height: 20px;
+  right: 0;
+}
+
+::ng-deep .al-input-size-xs .color-picker-container::after,
+::ng-deep .al-input-size-small .color-picker-container::after,
+::ng-deep .al-input-size-header .color-picker-container::after {
+  width: 20px;
+  height: 20px;
+  right: 0px;
+}
+
+::ng-deep .al-input-size-large .color-picker-input {
+  width: 28px;
+  height: 28px;
+  right: 0px;
+}
+
+::ng-deep .al-input-size-large .color-picker-container::after {
+  width: 28px;
+  height: 28px;
+  right: 0px;
+}
+
+/* Category-specific color picker styling */
+::ng-deep .al-input-category-success .color-picker-container::after {
+  border-color: #00AD83;
+}
+
+::ng-deep .al-input-category-success .color-picker-container:hover::after {
+  border-color: #00AD83;
+}
+
+::ng-deep .al-input-category-error .color-picker-container::after {
+  border-color: $color-error-500;
+}
+
+::ng-deep .al-input-category-error .color-picker-container:hover::after {
+  border-color: $color-error-500;
+}
+
+::ng-deep .al-input-category-disabled .color-picker-container::after {
+  border-color: #9CA3AF;
+  opacity: 0.6;
+}
+
+::ng-deep .al-input-category-disabled .color-picker-input {
+  cursor: not-allowed;
+}
+
+
+
+/* Color picker accessibility */
+.color-picker-input:focus {
+  outline: none;
+}
+
+/* Ensure proper alignment for color picker input */
+::ng-deep .al-input-field .color-picker-container .mat-mdc-form-field-infix {
+  display: flex !important;
+  align-items: center !important;
+  flex: 1 !important;
+}
+
+/* Color picker container alignment */
+::ng-deep .al-input-field .color-picker-container {
+  display: flex !important;
+  align-items: center !important;
+  width: 100% !important;
+  position: relative !important;
+}
+
+/* ===== COLOR PICKER ICON STYLES ===== */
+
+/* Color picker icon styling */
+.color-picker-icon {
+  color: $color-grey-700 !important;
+  cursor: pointer !important;
+  transition: color 0.2s ease !important;
+}
+
+/* Color picker icon hover state */
+.color-picker-container:hover .color-picker-icon {
+  color: $color-blue !important;
+}
+
+/* Color picker icon focus state */
+.color-picker-input:focus+.color-picker-icon {
+  color: $color-blue !important;
+}
+
+/* Size-specific color picker icon styling */
+::ng-deep .al-input-size-xs .color-picker-icon,
+::ng-deep .al-input-size-small .color-picker-icon,
+::ng-deep .al-input-size-header .color-picker-icon {
+  font-size: 16px !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+::ng-deep .al-input-size-base .color-picker-icon {
+  font-size: 20px !important;
+  width: 22px !important;
+  height: 20px !important;
+}
+
+::ng-deep .al-input-size-large .color-picker-icon {
+  font-size: 24px !important;
+  width: 24px !important;
+  height: 24px !important;
+}
+
+/* Category-specific color picker icon styling */
+::ng-deep .al-input-category-success .color-picker-icon {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-category-success .color-picker-container:hover .color-picker-icon {
+  color: #00AD83 !important;
+}
+
+::ng-deep .al-input-category-error .color-picker-icon {
+  color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-category-error .color-picker-container:hover .color-picker-icon {
+  color: $color-error-500 !important;
+}
+
+::ng-deep .al-input-category-disabled .color-picker-icon {
+  color: #9CA3AF !important;
+  opacity: 0.6 !important;
+}
+
+::ng-deep .al-input-category-disabled .color-picker-container:hover .color-picker-icon {
+  color: #9CA3AF !important;
+}
+
+/* Ensure proper positioning of color picker icon */
+::ng-deep .color-picker-container .color-picker-icon {
+  position: absolute !important;
+  right: 4px !important;
+  z-index: 1 !important;
+  pointer-events: none !important;
+}
+
+/* Size-specific positioning for color picker icon */
+::ng-deep .al-input-size-xs .color-picker-container .color-picker-icon,
+::ng-deep .al-input-size-small .color-picker-container .color-picker-icon,
+::ng-deep .al-input-size-header .color-picker-container .color-picker-icon {
+  right: 8px !important;
+}
+
+::ng-deep .al-input-size-large .color-picker-container .color-picker-icon {
+  right: 6px !important;
+}
+
+/* Ensure color picker input is positioned correctly over the icon */
+::ng-deep .color-picker-container .color-picker-input {
+  position: absolute !important;
+  right: 4px !important;
+  width: 24px !important;
+  height: 24px !important;
+  border: none !important;
+  border-radius: 4px !important;
+  cursor: pointer !important;
+  opacity: 0 !important;
+  z-index: 2 !important;
+}
+
+/* Size-specific color picker input positioning */
+::ng-deep .al-input-size-xs .color-picker-container .color-picker-input,
+::ng-deep .al-input-size-small .color-picker-container .color-picker-input,
+::ng-deep .al-input-size-header .color-picker-container .color-picker-input {
+  right: 8px !important;
+  width: 20px !important;
+  height: 20px !important;
+}
+
+::ng-deep .al-input-size-large .color-picker-container .color-picker-input {
+  right: 6px !important;
+  width: 28px !important;
+  height: 28px !important;
+}
+
+/* Remove the old color square styles */
+.color-picker-container::after {
+  display: none !important;
+}
+
+/* Ensure proper spacing for text input with icon */
+
+/* ::ng-deep .al-input-size-xs .color-picker-container input[matInput],
+::ng-deep .al-input-size-small .color-picker-container input[matInput],
+::ng-deep .al-input-size-header .color-picker-container input[matInput] {
+  padding-right: 12px !important;
+} */
+
+/* ===== DROPDOWN OPTION STYLES (mat-option) ===== */
+/* Base typography styling */
+::ng-deep .mat-mdc-option,
+::ng-deep .mat-option {
+  font-family: Roboto, sans-serif !important;
+  font-size: 16px !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 140% !important;
+  /* 22.4px */
+  letter-spacing: 0.04px !important;
+  color: var(--Gray-700, #414651) !important;
+}
+
+::ng-deep .mat-mdc-option .mdc-list-item__primary-text,
+::ng-deep .mat-mdc-option .mat-mdc-option-text,
+::ng-deep .mat-option .mat-option-text {
+  font-family: Roboto, sans-serif !important;
+  font-size: 16px !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 140% !important;
+  /* 22.4px */
+  letter-spacing: 0.04px !important;
+  color: var(--Gray-700, #414651) !important;
+}
+
+/* Hover state */
+::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),
+::ng-deep .mat-option:hover:not(.mat-option-disabled) {
+  background-color: #F7F9FE !important;
+}
+
+/* Focus state */
+::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),
+::ng-deep .mat-option:focus:not(.mat-option-disabled),
+::ng-deep .mat-mdc-option.cdk-keyboard-focused:not(.mdc-list-item--disabled),
+::ng-deep .mat-option.cdk-keyboard-focused:not(.mat-option-disabled) {
+  background-color: #E5E9FC !important;
+  outline: none;
+}
+
+/* Selected state */
+::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),
+::ng-deep .mat-option.mat-selected:not(.mat-option-disabled) {
+  background-color: #F7F9FE !important;
+  color: #5473E8 !important;
+}
+
+/* Active state for MDC list options */
+::ng-deep .mat-mdc-option:focus.mdc-list-item,
+::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+  background-color: #F7F9FE !important;
+}
+
+::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,
+::ng-deep .mat-mdc-option.mdc-list-item--selected .mat-mdc-option-text,
+::ng-deep .mat-option.mat-selected .mat-option-text {
+  color: #5473E8 !important;
+}
+
+/* ===== PSEUDO-CHECKBOX STYLES ===== */
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
+  background-color: $color-blue-500 !important;
+}