/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/web-portal/src/styles.scss?ngGlobalStyle ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/web-portal/src/styles.scss?ngGlobalStyle (1) ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css ***!
  \********************************************************************************************************************************************************************************************************************************************************/
.mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale3d(0, 0, 0);background-color:var(--mat-ripple-color, rgba(0, 0, 0, 0.1))}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-drag-preview .mat-ripple-element,.cdk-drag-placeholder .mat-ripple-element{display:none}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{padding:2px 0 !important;box-sizing:content-box !important;height:auto !important;overflow:hidden !important}textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0 !important;box-sizing:content-box !important;height:0 !important}@keyframes cdk-text-field-autofill-start{/*!*/}@keyframes cdk-text-field-autofill-end{/*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}.mat-focus-indicator{position:relative}.mat-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-focus-indicator-display, none);border:var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus::before{content:""}.cdk-high-contrast-active{--mat-focus-indicator-display: block}.mat-mdc-focus-indicator{position:relative}.mat-mdc-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-mdc-focus-indicator-display, none);border:var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);border-radius:var(--mat-mdc-focus-indicator-border-radius, 4px)}.mat-mdc-focus-indicator:focus::before{content:""}.cdk-high-contrast-active{--mat-mdc-focus-indicator-display: block}.mat-app-background{background-color:var(--mat-app-background-color, var(--mat-app-background, transparent));color:var(--mat-app-text-color, var(--mat-app-on-background, inherit))}.mat-elevation-z0,.mat-mdc-elevation-specific.mat-elevation-z0{box-shadow:var(--mat-app-elevation-shadow-level-0, none)}.mat-elevation-z1,.mat-mdc-elevation-specific.mat-elevation-z1{box-shadow:var(--mat-app-elevation-shadow-level-1, none)}.mat-elevation-z2,.mat-mdc-elevation-specific.mat-elevation-z2{box-shadow:var(--mat-app-elevation-shadow-level-2, none)}.mat-elevation-z3,.mat-mdc-elevation-specific.mat-elevation-z3{box-shadow:var(--mat-app-elevation-shadow-level-3, none)}.mat-elevation-z4,.mat-mdc-elevation-specific.mat-elevation-z4{box-shadow:var(--mat-app-elevation-shadow-level-4, none)}.mat-elevation-z5,.mat-mdc-elevation-specific.mat-elevation-z5{box-shadow:var(--mat-app-elevation-shadow-level-5, none)}.mat-elevation-z6,.mat-mdc-elevation-specific.mat-elevation-z6{box-shadow:var(--mat-app-elevation-shadow-level-6, none)}.mat-elevation-z7,.mat-mdc-elevation-specific.mat-elevation-z7{box-shadow:var(--mat-app-elevation-shadow-level-7, none)}.mat-elevation-z8,.mat-mdc-elevation-specific.mat-elevation-z8{box-shadow:var(--mat-app-elevation-shadow-level-8, none)}.mat-elevation-z9,.mat-mdc-elevation-specific.mat-elevation-z9{box-shadow:var(--mat-app-elevation-shadow-level-9, none)}.mat-elevation-z10,.mat-mdc-elevation-specific.mat-elevation-z10{box-shadow:var(--mat-app-elevation-shadow-level-10, none)}.mat-elevation-z11,.mat-mdc-elevation-specific.mat-elevation-z11{box-shadow:var(--mat-app-elevation-shadow-level-11, none)}.mat-elevation-z12,.mat-mdc-elevation-specific.mat-elevation-z12{box-shadow:var(--mat-app-elevation-shadow-level-12, none)}.mat-elevation-z13,.mat-mdc-elevation-specific.mat-elevation-z13{box-shadow:var(--mat-app-elevation-shadow-level-13, none)}.mat-elevation-z14,.mat-mdc-elevation-specific.mat-elevation-z14{box-shadow:var(--mat-app-elevation-shadow-level-14, none)}.mat-elevation-z15,.mat-mdc-elevation-specific.mat-elevation-z15{box-shadow:var(--mat-app-elevation-shadow-level-15, none)}.mat-elevation-z16,.mat-mdc-elevation-specific.mat-elevation-z16{box-shadow:var(--mat-app-elevation-shadow-level-16, none)}.mat-elevation-z17,.mat-mdc-elevation-specific.mat-elevation-z17{box-shadow:var(--mat-app-elevation-shadow-level-17, none)}.mat-elevation-z18,.mat-mdc-elevation-specific.mat-elevation-z18{box-shadow:var(--mat-app-elevation-shadow-level-18, none)}.mat-elevation-z19,.mat-mdc-elevation-specific.mat-elevation-z19{box-shadow:var(--mat-app-elevation-shadow-level-19, none)}.mat-elevation-z20,.mat-mdc-elevation-specific.mat-elevation-z20{box-shadow:var(--mat-app-elevation-shadow-level-20, none)}.mat-elevation-z21,.mat-mdc-elevation-specific.mat-elevation-z21{box-shadow:var(--mat-app-elevation-shadow-level-21, none)}.mat-elevation-z22,.mat-mdc-elevation-specific.mat-elevation-z22{box-shadow:var(--mat-app-elevation-shadow-level-22, none)}.mat-elevation-z23,.mat-mdc-elevation-specific.mat-elevation-z23{box-shadow:var(--mat-app-elevation-shadow-level-23, none)}.mat-elevation-z24,.mat-mdc-elevation-specific.mat-elevation-z24{box-shadow:var(--mat-app-elevation-shadow-level-24, none)}.mat-theme-loaded-marker{display:none}html{--mat-ripple-color:rgba(0, 0, 0, 0.1)}html{--mat-option-selected-state-label-text-color:#3f51b5;--mat-option-label-text-color:rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-selected-state-layer-color:rgba(0, 0, 0, 0.04)}.mat-accent{--mat-option-selected-state-label-text-color:#ff4081;--mat-option-label-text-color:rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-selected-state-layer-color:rgba(0, 0, 0, 0.04)}.mat-warn{--mat-option-selected-state-label-text-color:#f44336;--mat-option-label-text-color:rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-option-selected-state-layer-color:rgba(0, 0, 0, 0.04)}html{--mat-optgroup-label-text-color:rgba(0, 0, 0, 0.87)}.mat-primary{--mat-full-pseudo-checkbox-selected-icon-color:#3f51b5;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#3f51b5;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}html{--mat-full-pseudo-checkbox-selected-icon-color:#ff4081;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#ff4081;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}.mat-accent{--mat-full-pseudo-checkbox-selected-icon-color:#ff4081;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#ff4081;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}.mat-warn{--mat-full-pseudo-checkbox-selected-icon-color:#f44336;--mat-full-pseudo-checkbox-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color:#fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color:#b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color:#b0b0b0;--mat-minimal-pseudo-checkbox-selected-checkmark-color:#f44336;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color:#b0b0b0}html{--mat-app-background-color:#fafafa;--mat-app-text-color:rgba(0, 0, 0, 0.87);--mat-app-elevation-shadow-level-0:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-1:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-2:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-3:0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-4:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-5:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-6:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-7:0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-8:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-9:0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-10:0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-11:0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-12:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-13:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-14:0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-15:0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-16:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-17:0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-18:0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-19:0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-20:0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-21:0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-22:0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-23:0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-24:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}html{--mat-option-label-text-font:Roboto, sans-serif;--mat-option-label-text-line-height:24px;--mat-option-label-text-size:16px;--mat-option-label-text-tracking:0.03125em;--mat-option-label-text-weight:400}html{--mat-optgroup-label-text-font:Roboto, sans-serif;--mat-optgroup-label-text-line-height:24px;--mat-optgroup-label-text-size:16px;--mat-optgroup-label-text-tracking:0.03125em;--mat-optgroup-label-text-weight:400}html{--mdc-elevated-card-container-shape:4px;--mdc-outlined-card-container-shape:4px;--mdc-outlined-card-outline-width:1px}html{--mdc-elevated-card-container-color:white;--mdc-elevated-card-container-elevation:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mdc-outlined-card-container-color:white;--mdc-outlined-card-outline-color:rgba(0, 0, 0, 0.12);--mdc-outlined-card-container-elevation:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-card-subtitle-text-color:rgba(0, 0, 0, 0.54)}html{--mat-card-title-text-font:Roboto, sans-serif;--mat-card-title-text-line-height:32px;--mat-card-title-text-size:20px;--mat-card-title-text-tracking:0.0125em;--mat-card-title-text-weight:500;--mat-card-subtitle-text-font:Roboto, sans-serif;--mat-card-subtitle-text-line-height:22px;--mat-card-subtitle-text-size:14px;--mat-card-subtitle-text-tracking:0.0071428571em;--mat-card-subtitle-text-weight:500}html{--mdc-linear-progress-active-indicator-height:4px;--mdc-linear-progress-track-height:4px;--mdc-linear-progress-track-shape:0}.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color:#3f51b5;--mdc-linear-progress-track-color:rgba(63, 81, 181, 0.25)}.mat-mdc-progress-bar.mat-accent{--mdc-linear-progress-active-indicator-color:#ff4081;--mdc-linear-progress-track-color:rgba(255, 64, 129, 0.25)}.mat-mdc-progress-bar.mat-warn{--mdc-linear-progress-active-indicator-color:#f44336;--mdc-linear-progress-track-color:rgba(244, 67, 54, 0.25)}html{--mdc-plain-tooltip-container-shape:4px;--mdc-plain-tooltip-supporting-text-line-height:16px}html{--mdc-plain-tooltip-container-color:#616161;--mdc-plain-tooltip-supporting-text-color:#fff}html{--mdc-plain-tooltip-supporting-text-font:Roboto, sans-serif;--mdc-plain-tooltip-supporting-text-size:12px;--mdc-plain-tooltip-supporting-text-weight:400;--mdc-plain-tooltip-supporting-text-tracking:0.0333333333em}html{--mdc-filled-text-field-active-indicator-height:1px;--mdc-filled-text-field-focus-active-indicator-height:2px;--mdc-filled-text-field-container-shape:4px;--mdc-outlined-text-field-outline-width:1px;--mdc-outlined-text-field-focus-outline-width:2px;--mdc-outlined-text-field-container-shape:4px}html{--mdc-filled-text-field-caret-color:#3f51b5;--mdc-filled-text-field-focus-active-indicator-color:#3f51b5;--mdc-filled-text-field-focus-label-text-color:rgba(63, 81, 181, 0.87);--mdc-filled-text-field-container-color:whitesmoke;--mdc-filled-text-field-disabled-container-color:#fafafa;--mdc-filled-text-field-label-text-color:rgba(0, 0, 0, 0.6);--mdc-filled-text-field-hover-label-text-color:rgba(0, 0, 0, 0.6);--mdc-filled-text-field-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mdc-filled-text-field-input-text-color:rgba(0, 0, 0, 0.87);--mdc-filled-text-field-disabled-input-text-color:rgba(0, 0, 0, 0.38);--mdc-filled-text-field-input-text-placeholder-color:rgba(0, 0, 0, 0.6);--mdc-filled-text-field-error-hover-label-text-color:#f44336;--mdc-filled-text-field-error-focus-label-text-color:#f44336;--mdc-filled-text-field-error-label-text-color:#f44336;--mdc-filled-text-field-error-caret-color:#f44336;--mdc-filled-text-field-active-indicator-color:rgba(0, 0, 0, 0.42);--mdc-filled-text-field-disabled-active-indicator-color:rgba(0, 0, 0, 0.06);--mdc-filled-text-field-hover-active-indicator-color:rgba(0, 0, 0, 0.87);--mdc-filled-text-field-error-active-indicator-color:#f44336;--mdc-filled-text-field-error-focus-active-indicator-color:#f44336;--mdc-filled-text-field-error-hover-active-indicator-color:#f44336;--mdc-outlined-text-field-caret-color:#3f51b5;--mdc-outlined-text-field-focus-outline-color:#3f51b5;--mdc-outlined-text-field-focus-label-text-color:rgba(63, 81, 181, 0.87);--mdc-outlined-text-field-label-text-color:rgba(0, 0, 0, 0.6);--mdc-outlined-text-field-hover-label-text-color:rgba(0, 0, 0, 0.6);--mdc-outlined-text-field-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mdc-outlined-text-field-input-text-color:rgba(0, 0, 0, 0.87);--mdc-outlined-text-field-disabled-input-text-color:rgba(0, 0, 0, 0.38);--mdc-outlined-text-field-input-text-placeholder-color:rgba(0, 0, 0, 0.6);--mdc-outlined-text-field-error-caret-color:#f44336;--mdc-outlined-text-field-error-focus-label-text-color:#f44336;--mdc-outlined-text-field-error-label-text-color:#f44336;--mdc-outlined-text-field-error-hover-label-text-color:#f44336;--mdc-outlined-text-field-outline-color:rgba(0, 0, 0, 0.38);--mdc-outlined-text-field-disabled-outline-color:rgba(0, 0, 0, 0.06);--mdc-outlined-text-field-hover-outline-color:rgba(0, 0, 0, 0.87);--mdc-outlined-text-field-error-focus-outline-color:#f44336;--mdc-outlined-text-field-error-hover-outline-color:#f44336;--mdc-outlined-text-field-error-outline-color:#f44336;--mat-form-field-focus-select-arrow-color:rgba(63, 81, 181, 0.87);--mat-form-field-disabled-input-text-placeholder-color:rgba(0, 0, 0, 0.38);--mat-form-field-state-layer-color:rgba(0, 0, 0, 0.87);--mat-form-field-error-text-color:#f44336;--mat-form-field-select-option-text-color:inherit;--mat-form-field-select-disabled-option-text-color:GrayText;--mat-form-field-leading-icon-color:unset;--mat-form-field-disabled-leading-icon-color:unset;--mat-form-field-trailing-icon-color:unset;--mat-form-field-disabled-trailing-icon-color:unset;--mat-form-field-error-focus-trailing-icon-color:unset;--mat-form-field-error-hover-trailing-icon-color:unset;--mat-form-field-error-trailing-icon-color:unset;--mat-form-field-enabled-select-arrow-color:rgba(0, 0, 0, 0.54);--mat-form-field-disabled-select-arrow-color:rgba(0, 0, 0, 0.38);--mat-form-field-hover-state-layer-opacity:0.04;--mat-form-field-focus-state-layer-opacity:0.08}.mat-mdc-form-field.mat-accent{--mdc-filled-text-field-caret-color:#ff4081;--mdc-filled-text-field-focus-active-indicator-color:#ff4081;--mdc-filled-text-field-focus-label-text-color:rgba(255, 64, 129, 0.87);--mdc-outlined-text-field-caret-color:#ff4081;--mdc-outlined-text-field-focus-outline-color:#ff4081;--mdc-outlined-text-field-focus-label-text-color:rgba(255, 64, 129, 0.87);--mat-form-field-focus-select-arrow-color:rgba(255, 64, 129, 0.87)}.mat-mdc-form-field.mat-warn{--mdc-filled-text-field-caret-color:#f44336;--mdc-filled-text-field-focus-active-indicator-color:#f44336;--mdc-filled-text-field-focus-label-text-color:rgba(244, 67, 54, 0.87);--mdc-outlined-text-field-caret-color:#f44336;--mdc-outlined-text-field-focus-outline-color:#f44336;--mdc-outlined-text-field-focus-label-text-color:rgba(244, 67, 54, 0.87);--mat-form-field-focus-select-arrow-color:rgba(244, 67, 54, 0.87)}html{--mat-form-field-container-height:56px;--mat-form-field-filled-label-display:block;--mat-form-field-container-vertical-padding:16px;--mat-form-field-filled-with-label-container-padding-top:24px;--mat-form-field-filled-with-label-container-padding-bottom:8px}html{--mdc-filled-text-field-label-text-font:Roboto, sans-serif;--mdc-filled-text-field-label-text-size:16px;--mdc-filled-text-field-label-text-tracking:0.03125em;--mdc-filled-text-field-label-text-weight:400;--mdc-outlined-text-field-label-text-font:Roboto, sans-serif;--mdc-outlined-text-field-label-text-size:16px;--mdc-outlined-text-field-label-text-tracking:0.03125em;--mdc-outlined-text-field-label-text-weight:400;--mat-form-field-container-text-font:Roboto, sans-serif;--mat-form-field-container-text-line-height:24px;--mat-form-field-container-text-size:16px;--mat-form-field-container-text-tracking:0.03125em;--mat-form-field-container-text-weight:400;--mat-form-field-outlined-label-text-populated-size:16px;--mat-form-field-subscript-text-font:Roboto, sans-serif;--mat-form-field-subscript-text-line-height:20px;--mat-form-field-subscript-text-size:12px;--mat-form-field-subscript-text-tracking:0.0333333333em;--mat-form-field-subscript-text-weight:400}html{--mat-select-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-select-panel-background-color:white;--mat-select-enabled-trigger-text-color:rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color:rgba(0, 0, 0, 0.38);--mat-select-placeholder-text-color:rgba(0, 0, 0, 0.6);--mat-select-enabled-arrow-color:rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color:rgba(0, 0, 0, 0.38);--mat-select-focused-arrow-color:rgba(63, 81, 181, 0.87);--mat-select-invalid-arrow-color:rgba(244, 67, 54, 0.87)}html .mat-mdc-form-field.mat-accent{--mat-select-panel-background-color:white;--mat-select-enabled-trigger-text-color:rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color:rgba(0, 0, 0, 0.38);--mat-select-placeholder-text-color:rgba(0, 0, 0, 0.6);--mat-select-enabled-arrow-color:rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color:rgba(0, 0, 0, 0.38);--mat-select-focused-arrow-color:rgba(255, 64, 129, 0.87);--mat-select-invalid-arrow-color:rgba(244, 67, 54, 0.87)}html .mat-mdc-form-field.mat-warn{--mat-select-panel-background-color:white;--mat-select-enabled-trigger-text-color:rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color:rgba(0, 0, 0, 0.38);--mat-select-placeholder-text-color:rgba(0, 0, 0, 0.6);--mat-select-enabled-arrow-color:rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color:rgba(0, 0, 0, 0.38);--mat-select-focused-arrow-color:rgba(244, 67, 54, 0.87);--mat-select-invalid-arrow-color:rgba(244, 67, 54, 0.87)}html{--mat-select-arrow-transform:translateY(-8px)}html{--mat-select-trigger-text-font:Roboto, sans-serif;--mat-select-trigger-text-line-height:24px;--mat-select-trigger-text-size:16px;--mat-select-trigger-text-tracking:0.03125em;--mat-select-trigger-text-weight:400}html{--mat-autocomplete-container-shape:4px;--mat-autocomplete-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-autocomplete-background-color:white}html{--mdc-dialog-container-shape:4px;--mat-dialog-container-elevation-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mat-dialog-container-max-width:80vw;--mat-dialog-container-small-max-width:80vw;--mat-dialog-container-min-width:0;--mat-dialog-actions-alignment:start;--mat-dialog-actions-padding:8px;--mat-dialog-content-padding:20px 24px;--mat-dialog-with-actions-content-padding:20px 24px;--mat-dialog-headline-padding:0 24px 9px}html{--mdc-dialog-container-color:white;--mdc-dialog-subhead-color:rgba(0, 0, 0, 0.87);--mdc-dialog-supporting-text-color:rgba(0, 0, 0, 0.6)}html{--mdc-dialog-subhead-font:Roboto, sans-serif;--mdc-dialog-subhead-line-height:32px;--mdc-dialog-subhead-size:20px;--mdc-dialog-subhead-weight:500;--mdc-dialog-subhead-tracking:0.0125em;--mdc-dialog-supporting-text-font:Roboto, sans-serif;--mdc-dialog-supporting-text-line-height:24px;--mdc-dialog-supporting-text-size:16px;--mdc-dialog-supporting-text-weight:400;--mdc-dialog-supporting-text-tracking:0.03125em}.mat-mdc-standard-chip{--mdc-chip-container-shape-radius:16px;--mdc-chip-with-avatar-avatar-shape-radius:14px;--mdc-chip-with-avatar-avatar-size:28px;--mdc-chip-with-icon-icon-size:18px;--mdc-chip-outline-width:0;--mdc-chip-outline-color:transparent;--mdc-chip-disabled-outline-color:transparent;--mdc-chip-focus-outline-color:transparent;--mdc-chip-hover-state-layer-opacity:0.04;--mdc-chip-with-avatar-disabled-avatar-opacity:1;--mdc-chip-flat-selected-outline-width:0;--mdc-chip-selected-hover-state-layer-opacity:0.04;--mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity:1;--mdc-chip-with-icon-disabled-icon-opacity:1;--mat-chip-disabled-container-opacity:0.4;--mat-chip-trailing-action-opacity:0.54;--mat-chip-trailing-action-focus-opacity:1;--mat-chip-trailing-action-state-layer-color:transparent;--mat-chip-selected-trailing-action-state-layer-color:transparent;--mat-chip-trailing-action-hover-state-layer-opacity:0;--mat-chip-trailing-action-focus-state-layer-opacity:0}.mat-mdc-standard-chip{--mdc-chip-disabled-label-text-color:#212121;--mdc-chip-elevated-container-color:#e0e0e0;--mdc-chip-elevated-selected-container-color:#e0e0e0;--mdc-chip-elevated-disabled-container-color:#e0e0e0;--mdc-chip-flat-disabled-selected-container-color:#e0e0e0;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:#212121;--mdc-chip-selected-label-text-color:#212121;--mdc-chip-with-icon-icon-color:#212121;--mdc-chip-with-icon-disabled-icon-color:#212121;--mdc-chip-with-icon-selected-icon-color:#212121;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:#212121;--mdc-chip-with-trailing-icon-trailing-icon-color:#212121;--mat-chip-selected-disabled-trailing-icon-color:#212121;--mat-chip-selected-trailing-icon-color:#212121}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mdc-chip-disabled-label-text-color:white;--mdc-chip-elevated-container-color:#3f51b5;--mdc-chip-elevated-selected-container-color:#3f51b5;--mdc-chip-elevated-disabled-container-color:#3f51b5;--mdc-chip-flat-disabled-selected-container-color:#3f51b5;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:white;--mdc-chip-selected-label-text-color:white;--mdc-chip-with-icon-icon-color:white;--mdc-chip-with-icon-disabled-icon-color:white;--mdc-chip-with-icon-selected-icon-color:white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:white;--mdc-chip-with-trailing-icon-trailing-icon-color:white;--mat-chip-selected-disabled-trailing-icon-color:white;--mat-chip-selected-trailing-icon-color:white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mdc-chip-disabled-label-text-color:white;--mdc-chip-elevated-container-color:#ff4081;--mdc-chip-elevated-selected-container-color:#ff4081;--mdc-chip-elevated-disabled-container-color:#ff4081;--mdc-chip-flat-disabled-selected-container-color:#ff4081;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:white;--mdc-chip-selected-label-text-color:white;--mdc-chip-with-icon-icon-color:white;--mdc-chip-with-icon-disabled-icon-color:white;--mdc-chip-with-icon-selected-icon-color:white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:white;--mdc-chip-with-trailing-icon-trailing-icon-color:white;--mat-chip-selected-disabled-trailing-icon-color:white;--mat-chip-selected-trailing-icon-color:white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mdc-chip-disabled-label-text-color:white;--mdc-chip-elevated-container-color:#f44336;--mdc-chip-elevated-selected-container-color:#f44336;--mdc-chip-elevated-disabled-container-color:#f44336;--mdc-chip-flat-disabled-selected-container-color:#f44336;--mdc-chip-focus-state-layer-color:black;--mdc-chip-hover-state-layer-color:black;--mdc-chip-selected-hover-state-layer-color:black;--mdc-chip-focus-state-layer-opacity:0.12;--mdc-chip-selected-focus-state-layer-color:black;--mdc-chip-selected-focus-state-layer-opacity:0.12;--mdc-chip-label-text-color:white;--mdc-chip-selected-label-text-color:white;--mdc-chip-with-icon-icon-color:white;--mdc-chip-with-icon-disabled-icon-color:white;--mdc-chip-with-icon-selected-icon-color:white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color:white;--mdc-chip-with-trailing-icon-trailing-icon-color:white;--mat-chip-selected-disabled-trailing-icon-color:white;--mat-chip-selected-trailing-icon-color:white}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height:32px}.mat-mdc-standard-chip{--mdc-chip-label-text-font:Roboto, sans-serif;--mdc-chip-label-text-line-height:20px;--mdc-chip-label-text-size:14px;--mdc-chip-label-text-tracking:0.0178571429em;--mdc-chip-label-text-weight:400}html{--mdc-switch-disabled-selected-icon-opacity:0.38;--mdc-switch-disabled-track-opacity:0.12;--mdc-switch-disabled-unselected-icon-opacity:0.38;--mdc-switch-handle-height:20px;--mdc-switch-handle-shape:10px;--mdc-switch-handle-width:20px;--mdc-switch-selected-icon-size:18px;--mdc-switch-track-height:14px;--mdc-switch-track-shape:7px;--mdc-switch-track-width:36px;--mdc-switch-unselected-icon-size:18px;--mdc-switch-selected-focus-state-layer-opacity:0.12;--mdc-switch-selected-hover-state-layer-opacity:0.04;--mdc-switch-selected-pressed-state-layer-opacity:0.1;--mdc-switch-unselected-focus-state-layer-opacity:0.12;--mdc-switch-unselected-hover-state-layer-opacity:0.04;--mdc-switch-unselected-pressed-state-layer-opacity:0.1}html .mat-mdc-slide-toggle{--mat-switch-disabled-selected-handle-opacity:0.38;--mat-switch-disabled-unselected-handle-opacity:0.38;--mat-switch-unselected-handle-size:20px;--mat-switch-selected-handle-size:20px;--mat-switch-pressed-handle-size:20px;--mat-switch-with-icon-handle-size:20px;--mat-switch-selected-handle-horizontal-margin:0;--mat-switch-selected-with-icon-handle-horizontal-margin:0;--mat-switch-selected-pressed-handle-horizontal-margin:0;--mat-switch-unselected-handle-horizontal-margin:0;--mat-switch-unselected-with-icon-handle-horizontal-margin:0;--mat-switch-unselected-pressed-handle-horizontal-margin:0;--mat-switch-visible-track-opacity:1;--mat-switch-hidden-track-opacity:1;--mat-switch-visible-track-transition:transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);--mat-switch-hidden-track-transition:transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);--mat-switch-track-outline-width:1px;--mat-switch-track-outline-color:transparent;--mat-switch-selected-track-outline-width:1px;--mat-switch-selected-track-outline-color:transparent;--mat-switch-disabled-unselected-track-outline-width:1px;--mat-switch-disabled-unselected-track-outline-color:transparent}html{--mdc-switch-selected-focus-state-layer-color:#3949ab;--mdc-switch-selected-handle-color:#3949ab;--mdc-switch-selected-hover-state-layer-color:#3949ab;--mdc-switch-selected-pressed-state-layer-color:#3949ab;--mdc-switch-selected-focus-handle-color:#1a237e;--mdc-switch-selected-hover-handle-color:#1a237e;--mdc-switch-selected-pressed-handle-color:#1a237e;--mdc-switch-selected-focus-track-color:#7986cb;--mdc-switch-selected-hover-track-color:#7986cb;--mdc-switch-selected-pressed-track-color:#7986cb;--mdc-switch-selected-track-color:#7986cb;--mdc-switch-disabled-selected-handle-color:#424242;--mdc-switch-disabled-selected-icon-color:#fff;--mdc-switch-disabled-selected-track-color:#424242;--mdc-switch-disabled-unselected-handle-color:#424242;--mdc-switch-disabled-unselected-icon-color:#fff;--mdc-switch-disabled-unselected-track-color:#424242;--mdc-switch-handle-surface-color:#fff;--mdc-switch-selected-icon-color:#fff;--mdc-switch-unselected-focus-handle-color:#212121;--mdc-switch-unselected-focus-state-layer-color:#424242;--mdc-switch-unselected-focus-track-color:#e0e0e0;--mdc-switch-unselected-handle-color:#616161;--mdc-switch-unselected-hover-handle-color:#212121;--mdc-switch-unselected-hover-state-layer-color:#424242;--mdc-switch-unselected-hover-track-color:#e0e0e0;--mdc-switch-unselected-icon-color:#fff;--mdc-switch-unselected-pressed-handle-color:#212121;--mdc-switch-unselected-pressed-state-layer-color:#424242;--mdc-switch-unselected-pressed-track-color:#e0e0e0;--mdc-switch-unselected-track-color:#e0e0e0;--mdc-switch-handle-elevation-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mdc-switch-disabled-handle-elevation-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mdc-switch-disabled-label-text-color: rgba(0, 0, 0, 0.38)}html .mat-mdc-slide-toggle{--mat-switch-label-text-color:rgba(0, 0, 0, 0.87)}html .mat-mdc-slide-toggle.mat-accent{--mdc-switch-selected-focus-state-layer-color:#d81b60;--mdc-switch-selected-handle-color:#d81b60;--mdc-switch-selected-hover-state-layer-color:#d81b60;--mdc-switch-selected-pressed-state-layer-color:#d81b60;--mdc-switch-selected-focus-handle-color:#880e4f;--mdc-switch-selected-hover-handle-color:#880e4f;--mdc-switch-selected-pressed-handle-color:#880e4f;--mdc-switch-selected-focus-track-color:#f06292;--mdc-switch-selected-hover-track-color:#f06292;--mdc-switch-selected-pressed-track-color:#f06292;--mdc-switch-selected-track-color:#f06292}html .mat-mdc-slide-toggle.mat-warn{--mdc-switch-selected-focus-state-layer-color:#e53935;--mdc-switch-selected-handle-color:#e53935;--mdc-switch-selected-hover-state-layer-color:#e53935;--mdc-switch-selected-pressed-state-layer-color:#e53935;--mdc-switch-selected-focus-handle-color:#b71c1c;--mdc-switch-selected-hover-handle-color:#b71c1c;--mdc-switch-selected-pressed-handle-color:#b71c1c;--mdc-switch-selected-focus-track-color:#e57373;--mdc-switch-selected-hover-track-color:#e57373;--mdc-switch-selected-pressed-track-color:#e57373;--mdc-switch-selected-track-color:#e57373}html{--mdc-switch-state-layer-size:40px}html .mat-mdc-slide-toggle{--mat-switch-label-text-font:Roboto, sans-serif;--mat-switch-label-text-line-height:20px;--mat-switch-label-text-size:14px;--mat-switch-label-text-tracking:0.0178571429em;--mat-switch-label-text-weight:400}html{--mdc-radio-disabled-selected-icon-opacity:0.38;--mdc-radio-disabled-unselected-icon-opacity:0.38;--mdc-radio-state-layer-size:40px}.mat-mdc-radio-button.mat-primary{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#3f51b5;--mdc-radio-selected-hover-icon-color:#3f51b5;--mdc-radio-selected-icon-color:#3f51b5;--mdc-radio-selected-pressed-icon-color:#3f51b5;--mat-radio-ripple-color:black;--mat-radio-checked-ripple-color:#3f51b5;--mat-radio-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-radio-label-text-color:rgba(0, 0, 0, 0.87)}.mat-mdc-radio-button.mat-accent{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#ff4081;--mdc-radio-selected-hover-icon-color:#ff4081;--mdc-radio-selected-icon-color:#ff4081;--mdc-radio-selected-pressed-icon-color:#ff4081;--mat-radio-ripple-color:black;--mat-radio-checked-ripple-color:#ff4081;--mat-radio-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-radio-label-text-color:rgba(0, 0, 0, 0.87)}.mat-mdc-radio-button.mat-warn{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#f44336;--mdc-radio-selected-hover-icon-color:#f44336;--mdc-radio-selected-icon-color:#f44336;--mdc-radio-selected-pressed-icon-color:#f44336;--mat-radio-ripple-color:black;--mat-radio-checked-ripple-color:#f44336;--mat-radio-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-radio-label-text-color:rgba(0, 0, 0, 0.87)}html{--mdc-radio-state-layer-size:40px;--mat-radio-touch-target-display:block}html{--mat-radio-label-text-font:Roboto, sans-serif;--mat-radio-label-text-line-height:20px;--mat-radio-label-text-size:14px;--mat-radio-label-text-tracking:0.0178571429em;--mat-radio-label-text-weight:400}html{--mdc-slider-active-track-height:6px;--mdc-slider-active-track-shape:9999px;--mdc-slider-handle-height:20px;--mdc-slider-handle-shape:50%;--mdc-slider-handle-width:20px;--mdc-slider-inactive-track-height:4px;--mdc-slider-inactive-track-shape:9999px;--mdc-slider-with-overlap-handle-outline-width:1px;--mdc-slider-with-tick-marks-active-container-opacity:0.6;--mdc-slider-with-tick-marks-container-shape:50%;--mdc-slider-with-tick-marks-container-size:2px;--mdc-slider-with-tick-marks-inactive-container-opacity:0.6;--mdc-slider-handle-elevation:0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-slider-value-indicator-width:auto;--mat-slider-value-indicator-height:32px;--mat-slider-value-indicator-caret-display:block;--mat-slider-value-indicator-border-radius:4px;--mat-slider-value-indicator-padding:0 12px;--mat-slider-value-indicator-text-transform:none;--mat-slider-value-indicator-container-transform:translateX(-50%)}html{--mdc-slider-handle-color:#3f51b5;--mdc-slider-focus-handle-color:#3f51b5;--mdc-slider-hover-handle-color:#3f51b5;--mdc-slider-active-track-color:#3f51b5;--mdc-slider-inactive-track-color:#3f51b5;--mdc-slider-with-tick-marks-inactive-container-color:#3f51b5;--mdc-slider-with-tick-marks-active-container-color:white;--mdc-slider-disabled-active-track-color:#000;--mdc-slider-disabled-handle-color:#000;--mdc-slider-disabled-inactive-track-color:#000;--mdc-slider-label-container-color:#000;--mdc-slider-label-label-text-color:#fff;--mdc-slider-with-overlap-handle-outline-color:#fff;--mdc-slider-with-tick-marks-disabled-container-color:#000;--mat-slider-ripple-color:#3f51b5;--mat-slider-hover-state-layer-color:rgba(63, 81, 181, 0.05);--mat-slider-focus-state-layer-color:rgba(63, 81, 181, 0.2);--mat-slider-value-indicator-opacity:0.6}html .mat-accent{--mdc-slider-handle-color:#ff4081;--mdc-slider-focus-handle-color:#ff4081;--mdc-slider-hover-handle-color:#ff4081;--mdc-slider-active-track-color:#ff4081;--mdc-slider-inactive-track-color:#ff4081;--mdc-slider-with-tick-marks-inactive-container-color:#ff4081;--mdc-slider-with-tick-marks-active-container-color:white;--mat-slider-ripple-color:#ff4081;--mat-slider-hover-state-layer-color:rgba(255, 64, 129, 0.05);--mat-slider-focus-state-layer-color:rgba(255, 64, 129, 0.2)}html .mat-warn{--mdc-slider-handle-color:#f44336;--mdc-slider-focus-handle-color:#f44336;--mdc-slider-hover-handle-color:#f44336;--mdc-slider-active-track-color:#f44336;--mdc-slider-inactive-track-color:#f44336;--mdc-slider-with-tick-marks-inactive-container-color:#f44336;--mdc-slider-with-tick-marks-active-container-color:white;--mat-slider-ripple-color:#f44336;--mat-slider-hover-state-layer-color:rgba(244, 67, 54, 0.05);--mat-slider-focus-state-layer-color:rgba(244, 67, 54, 0.2)}html{--mdc-slider-label-label-text-font:Roboto, sans-serif;--mdc-slider-label-label-text-size:14px;--mdc-slider-label-label-text-line-height:22px;--mdc-slider-label-label-text-tracking:0.0071428571em;--mdc-slider-label-label-text-weight:500}html{--mat-menu-container-shape:4px;--mat-menu-divider-bottom-spacing:0;--mat-menu-divider-top-spacing:0;--mat-menu-item-spacing:16px;--mat-menu-item-icon-size:24px;--mat-menu-item-leading-spacing:16px;--mat-menu-item-trailing-spacing:16px;--mat-menu-item-with-icon-leading-spacing:16px;--mat-menu-item-with-icon-trailing-spacing:16px;--mat-menu-base-elevation-level:8}html{--mat-menu-item-label-text-color:rgba(0, 0, 0, 0.87);--mat-menu-item-icon-color:rgba(0, 0, 0, 0.87);--mat-menu-item-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-menu-item-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-menu-container-color:white;--mat-menu-divider-color:rgba(0, 0, 0, 0.12)}html{--mat-menu-item-label-text-font:Roboto, sans-serif;--mat-menu-item-label-text-size:16px;--mat-menu-item-label-text-tracking:0.03125em;--mat-menu-item-label-text-line-height:24px;--mat-menu-item-label-text-weight:400}html{--mdc-list-list-item-container-shape:0;--mdc-list-list-item-leading-avatar-shape:50%;--mdc-list-list-item-container-color:transparent;--mdc-list-list-item-selected-container-color:transparent;--mdc-list-list-item-leading-avatar-color:transparent;--mdc-list-list-item-leading-icon-size:24px;--mdc-list-list-item-leading-avatar-size:40px;--mdc-list-list-item-trailing-icon-size:24px;--mdc-list-list-item-disabled-state-layer-color:transparent;--mdc-list-list-item-disabled-state-layer-opacity:0;--mdc-list-list-item-disabled-label-text-opacity:0.38;--mdc-list-list-item-disabled-leading-icon-opacity:0.38;--mdc-list-list-item-disabled-trailing-icon-opacity:0.38;--mat-list-active-indicator-color:transparent;--mat-list-active-indicator-shape:4px}html{--mdc-list-list-item-label-text-color:rgba(0, 0, 0, 0.87);--mdc-list-list-item-supporting-text-color:rgba(0, 0, 0, 0.54);--mdc-list-list-item-leading-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-trailing-supporting-text-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-trailing-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-selected-trailing-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-disabled-label-text-color:black;--mdc-list-list-item-disabled-leading-icon-color:black;--mdc-list-list-item-disabled-trailing-icon-color:black;--mdc-list-list-item-hover-label-text-color:rgba(0, 0, 0, 0.87);--mdc-list-list-item-hover-leading-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-hover-trailing-icon-color:rgba(0, 0, 0, 0.38);--mdc-list-list-item-focus-label-text-color:rgba(0, 0, 0, 0.87);--mdc-list-list-item-hover-state-layer-color:black;--mdc-list-list-item-hover-state-layer-opacity:0.04;--mdc-list-list-item-focus-state-layer-color:black;--mdc-list-list-item-focus-state-layer-opacity:0.12}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#3f51b5;--mdc-radio-selected-hover-icon-color:#3f51b5;--mdc-radio-selected-icon-color:#3f51b5;--mdc-radio-selected-pressed-icon-color:#3f51b5}.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#ff4081;--mdc-radio-selected-hover-icon-color:#ff4081;--mdc-radio-selected-icon-color:#ff4081;--mdc-radio-selected-pressed-icon-color:#ff4081}.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color:black;--mdc-radio-disabled-unselected-icon-color:black;--mdc-radio-unselected-hover-icon-color:#212121;--mdc-radio-unselected-focus-icon-color:#212121;--mdc-radio-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-unselected-pressed-icon-color:rgba(0, 0, 0, 0.54);--mdc-radio-selected-focus-icon-color:#f44336;--mdc-radio-selected-hover-icon-color:#f44336;--mdc-radio-selected-icon-color:#f44336;--mdc-radio-selected-pressed-icon-color:#f44336}.mat-mdc-list-option{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#3f51b5;--mdc-checkbox-selected-hover-icon-color:#3f51b5;--mdc-checkbox-selected-icon-color:#3f51b5;--mdc-checkbox-selected-pressed-icon-color:#3f51b5;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#3f51b5;--mdc-checkbox-selected-hover-state-layer-color:#3f51b5;--mdc-checkbox-selected-pressed-state-layer-color:#3f51b5;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-list-option.mat-accent{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#ff4081;--mdc-checkbox-selected-hover-icon-color:#ff4081;--mdc-checkbox-selected-icon-color:#ff4081;--mdc-checkbox-selected-pressed-icon-color:#ff4081;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#ff4081;--mdc-checkbox-selected-hover-state-layer-color:#ff4081;--mdc-checkbox-selected-pressed-state-layer-color:#ff4081;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-list-option.mat-warn{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#f44336;--mdc-checkbox-selected-hover-icon-color:#f44336;--mdc-checkbox-selected-icon-color:#f44336;--mdc-checkbox-selected-pressed-icon-color:#f44336;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#f44336;--mdc-checkbox-selected-hover-state-layer-color:#f44336;--mdc-checkbox-selected-pressed-state-layer-color:#f44336;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start{color:#3f51b5}.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end{opacity:1}html{--mdc-list-list-item-one-line-container-height:48px;--mdc-list-list-item-two-line-container-height:64px;--mdc-list-list-item-three-line-container-height:88px;--mat-list-list-item-leading-icon-start-space:16px;--mat-list-list-item-leading-icon-end-space:32px}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-state-layer-size:40px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}html{--mdc-list-list-item-label-text-font:Roboto, sans-serif;--mdc-list-list-item-label-text-line-height:24px;--mdc-list-list-item-label-text-size:16px;--mdc-list-list-item-label-text-tracking:0.03125em;--mdc-list-list-item-label-text-weight:400;--mdc-list-list-item-supporting-text-font:Roboto, sans-serif;--mdc-list-list-item-supporting-text-line-height:20px;--mdc-list-list-item-supporting-text-size:14px;--mdc-list-list-item-supporting-text-tracking:0.0178571429em;--mdc-list-list-item-supporting-text-weight:400;--mdc-list-list-item-trailing-supporting-text-font:Roboto, sans-serif;--mdc-list-list-item-trailing-supporting-text-line-height:20px;--mdc-list-list-item-trailing-supporting-text-size:12px;--mdc-list-list-item-trailing-supporting-text-tracking:0.0333333333em;--mdc-list-list-item-trailing-supporting-text-weight:400}.mdc-list-group__subheader{font:400 16px/28px Roboto, sans-serif;letter-spacing:.009375em}html{--mat-paginator-container-text-color:rgba(0, 0, 0, 0.87);--mat-paginator-container-background-color:white;--mat-paginator-enabled-icon-color:rgba(0, 0, 0, 0.54);--mat-paginator-disabled-icon-color:rgba(0, 0, 0, 0.12)}html{--mat-paginator-container-size:56px;--mat-paginator-form-field-container-height:40px;--mat-paginator-form-field-container-vertical-padding:8px;--mat-paginator-touch-target-display:block}html{--mat-paginator-container-text-font:Roboto, sans-serif;--mat-paginator-container-text-line-height:20px;--mat-paginator-container-text-size:12px;--mat-paginator-container-text-tracking:0.0333333333em;--mat-paginator-container-text-weight:400;--mat-paginator-select-trigger-text-size:12px}html{--mdc-secondary-navigation-tab-container-height:48px;--mdc-tab-indicator-active-indicator-height:2px;--mdc-tab-indicator-active-indicator-shape:0;--mat-tab-header-divider-color:transparent;--mat-tab-header-divider-height:0}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color:#3f51b5;--mat-tab-header-disabled-ripple-color:rgba(0, 0, 0, 0.38);--mat-tab-header-pagination-icon-color:black;--mat-tab-header-inactive-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-label-text-color:#3f51b5;--mat-tab-header-active-ripple-color:#3f51b5;--mat-tab-header-inactive-ripple-color:#3f51b5;--mat-tab-header-inactive-focus-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-inactive-hover-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-focus-label-text-color:#3f51b5;--mat-tab-header-active-hover-label-text-color:#3f51b5;--mat-tab-header-active-focus-indicator-color:#3f51b5;--mat-tab-header-active-hover-indicator-color:#3f51b5}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mdc-tab-indicator-active-indicator-color:#ff4081;--mat-tab-header-disabled-ripple-color:rgba(0, 0, 0, 0.38);--mat-tab-header-pagination-icon-color:black;--mat-tab-header-inactive-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-label-text-color:#ff4081;--mat-tab-header-active-ripple-color:#ff4081;--mat-tab-header-inactive-ripple-color:#ff4081;--mat-tab-header-inactive-focus-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-inactive-hover-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-focus-label-text-color:#ff4081;--mat-tab-header-active-hover-label-text-color:#ff4081;--mat-tab-header-active-focus-indicator-color:#ff4081;--mat-tab-header-active-hover-indicator-color:#ff4081}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mdc-tab-indicator-active-indicator-color:#f44336;--mat-tab-header-disabled-ripple-color:rgba(0, 0, 0, 0.38);--mat-tab-header-pagination-icon-color:black;--mat-tab-header-inactive-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-label-text-color:#f44336;--mat-tab-header-active-ripple-color:#f44336;--mat-tab-header-inactive-ripple-color:#f44336;--mat-tab-header-inactive-focus-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-inactive-hover-label-text-color:rgba(0, 0, 0, 0.6);--mat-tab-header-active-focus-label-text-color:#f44336;--mat-tab-header-active-hover-label-text-color:#f44336;--mat-tab-header-active-focus-indicator-color:#f44336;--mat-tab-header-active-hover-indicator-color:#f44336}.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary{--mat-tab-header-with-background-background-color:#3f51b5;--mat-tab-header-with-background-foreground-color:white}.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent{--mat-tab-header-with-background-background-color:#ff4081;--mat-tab-header-with-background-foreground-color:white}.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn{--mat-tab-header-with-background-background-color:#f44336;--mat-tab-header-with-background-foreground-color:white}.mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height:48px}.mat-mdc-tab-header{--mat-tab-header-label-text-font:Roboto, sans-serif;--mat-tab-header-label-text-size:14px;--mat-tab-header-label-text-tracking:0.0892857143em;--mat-tab-header-label-text-line-height:36px;--mat-tab-header-label-text-weight:500}html{--mdc-checkbox-disabled-selected-checkmark-color:#fff;--mdc-checkbox-selected-focus-state-layer-opacity:0.16;--mdc-checkbox-selected-hover-state-layer-opacity:0.04;--mdc-checkbox-selected-pressed-state-layer-opacity:0.16;--mdc-checkbox-unselected-focus-state-layer-opacity:0.16;--mdc-checkbox-unselected-hover-state-layer-opacity:0.04;--mdc-checkbox-unselected-pressed-state-layer-opacity:0.16}html{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#ff4081;--mdc-checkbox-selected-hover-icon-color:#ff4081;--mdc-checkbox-selected-icon-color:#ff4081;--mdc-checkbox-selected-pressed-icon-color:#ff4081;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#ff4081;--mdc-checkbox-selected-hover-state-layer-color:#ff4081;--mdc-checkbox-selected-pressed-state-layer-color:#ff4081;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black;--mat-checkbox-disabled-label-color:rgba(0, 0, 0, 0.38);--mat-checkbox-label-text-color:rgba(0, 0, 0, 0.87)}.mat-mdc-checkbox.mat-primary{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#3f51b5;--mdc-checkbox-selected-hover-icon-color:#3f51b5;--mdc-checkbox-selected-icon-color:#3f51b5;--mdc-checkbox-selected-pressed-icon-color:#3f51b5;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#3f51b5;--mdc-checkbox-selected-hover-state-layer-color:#3f51b5;--mdc-checkbox-selected-pressed-state-layer-color:#3f51b5;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}.mat-mdc-checkbox.mat-warn{--mdc-checkbox-disabled-selected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-disabled-unselected-icon-color:rgba(0, 0, 0, 0.38);--mdc-checkbox-selected-checkmark-color:white;--mdc-checkbox-selected-focus-icon-color:#f44336;--mdc-checkbox-selected-hover-icon-color:#f44336;--mdc-checkbox-selected-icon-color:#f44336;--mdc-checkbox-selected-pressed-icon-color:#f44336;--mdc-checkbox-unselected-focus-icon-color:#212121;--mdc-checkbox-unselected-hover-icon-color:#212121;--mdc-checkbox-unselected-icon-color:rgba(0, 0, 0, 0.54);--mdc-checkbox-selected-focus-state-layer-color:#f44336;--mdc-checkbox-selected-hover-state-layer-color:#f44336;--mdc-checkbox-selected-pressed-state-layer-color:#f44336;--mdc-checkbox-unselected-focus-state-layer-color:black;--mdc-checkbox-unselected-hover-state-layer-color:black;--mdc-checkbox-unselected-pressed-state-layer-color:black}html{--mdc-checkbox-state-layer-size:40px;--mat-checkbox-touch-target-display:block}html{--mat-checkbox-label-text-font:Roboto, sans-serif;--mat-checkbox-label-text-line-height:20px;--mat-checkbox-label-text-size:14px;--mat-checkbox-label-text-tracking:0.0178571429em;--mat-checkbox-label-text-weight:400}html{--mdc-text-button-container-shape:4px;--mdc-text-button-keep-touch-target:false;--mdc-filled-button-container-shape:4px;--mdc-filled-button-keep-touch-target:false;--mdc-protected-button-container-shape:4px;--mdc-protected-button-container-elevation-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-disabled-container-elevation-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-focus-container-elevation-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-hover-container-elevation-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mdc-protected-button-pressed-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-outlined-button-keep-touch-target:false;--mdc-outlined-button-outline-width:1px;--mdc-outlined-button-container-shape:4px;--mat-text-button-horizontal-padding:8px;--mat-text-button-with-icon-horizontal-padding:8px;--mat-text-button-icon-spacing:8px;--mat-text-button-icon-offset:0;--mat-filled-button-horizontal-padding:16px;--mat-filled-button-icon-spacing:8px;--mat-filled-button-icon-offset:-4px;--mat-protected-button-horizontal-padding:16px;--mat-protected-button-icon-spacing:8px;--mat-protected-button-icon-offset:-4px;--mat-outlined-button-horizontal-padding:15px;--mat-outlined-button-icon-spacing:8px;--mat-outlined-button-icon-offset:-4px}html{--mdc-text-button-label-text-color:black;--mdc-text-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mat-text-button-state-layer-color:black;--mat-text-button-disabled-state-layer-color:black;--mat-text-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-text-button-hover-state-layer-opacity:0.04;--mat-text-button-focus-state-layer-opacity:0.12;--mat-text-button-pressed-state-layer-opacity:0.12;--mdc-filled-button-container-color:white;--mdc-filled-button-label-text-color:black;--mdc-filled-button-disabled-container-color:rgba(0, 0, 0, 0.12);--mdc-filled-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mat-filled-button-state-layer-color:black;--mat-filled-button-disabled-state-layer-color:black;--mat-filled-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-filled-button-hover-state-layer-opacity:0.04;--mat-filled-button-focus-state-layer-opacity:0.12;--mat-filled-button-pressed-state-layer-opacity:0.12;--mdc-protected-button-container-color:white;--mdc-protected-button-label-text-color:black;--mdc-protected-button-disabled-container-color:rgba(0, 0, 0, 0.12);--mdc-protected-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mat-protected-button-state-layer-color:black;--mat-protected-button-disabled-state-layer-color:black;--mat-protected-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-protected-button-hover-state-layer-opacity:0.04;--mat-protected-button-focus-state-layer-opacity:0.12;--mat-protected-button-pressed-state-layer-opacity:0.12;--mdc-outlined-button-disabled-outline-color:rgba(0, 0, 0, 0.12);--mdc-outlined-button-disabled-label-text-color:rgba(0, 0, 0, 0.38);--mdc-outlined-button-label-text-color:black;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:black;--mat-outlined-button-disabled-state-layer-color:black;--mat-outlined-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-outlined-button-hover-state-layer-opacity:0.04;--mat-outlined-button-focus-state-layer-opacity:0.12;--mat-outlined-button-pressed-state-layer-opacity:0.12}.mat-mdc-button.mat-primary{--mdc-text-button-label-text-color:#3f51b5;--mat-text-button-state-layer-color:#3f51b5;--mat-text-button-ripple-color:rgba(63, 81, 181, 0.1)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color:#ff4081;--mat-text-button-state-layer-color:#ff4081;--mat-text-button-ripple-color:rgba(255, 64, 129, 0.1)}.mat-mdc-button.mat-warn{--mdc-text-button-label-text-color:#f44336;--mat-text-button-state-layer-color:#f44336;--mat-text-button-ripple-color:rgba(244, 67, 54, 0.1)}.mat-mdc-unelevated-button.mat-primary{--mdc-filled-button-container-color:#3f51b5;--mdc-filled-button-label-text-color:white;--mat-filled-button-state-layer-color:white;--mat-filled-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-unelevated-button.mat-accent{--mdc-filled-button-container-color:#ff4081;--mdc-filled-button-label-text-color:white;--mat-filled-button-state-layer-color:white;--mat-filled-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-unelevated-button.mat-warn{--mdc-filled-button-container-color:#f44336;--mdc-filled-button-label-text-color:white;--mat-filled-button-state-layer-color:white;--mat-filled-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-raised-button.mat-primary{--mdc-protected-button-container-color:#3f51b5;--mdc-protected-button-label-text-color:white;--mat-protected-button-state-layer-color:white;--mat-protected-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-raised-button.mat-accent{--mdc-protected-button-container-color:#ff4081;--mdc-protected-button-label-text-color:white;--mat-protected-button-state-layer-color:white;--mat-protected-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-raised-button.mat-warn{--mdc-protected-button-container-color:#f44336;--mdc-protected-button-label-text-color:white;--mat-protected-button-state-layer-color:white;--mat-protected-button-ripple-color:rgba(255, 255, 255, 0.1)}.mat-mdc-outlined-button.mat-primary{--mdc-outlined-button-label-text-color:#3f51b5;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:#3f51b5;--mat-outlined-button-ripple-color:rgba(63, 81, 181, 0.1)}.mat-mdc-outlined-button.mat-accent{--mdc-outlined-button-label-text-color:#ff4081;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:#ff4081;--mat-outlined-button-ripple-color:rgba(255, 64, 129, 0.1)}.mat-mdc-outlined-button.mat-warn{--mdc-outlined-button-label-text-color:#f44336;--mdc-outlined-button-outline-color:rgba(0, 0, 0, 0.12);--mat-outlined-button-state-layer-color:#f44336;--mat-outlined-button-ripple-color:rgba(244, 67, 54, 0.1)}html{--mdc-text-button-container-height:36px;--mdc-filled-button-container-height:36px;--mdc-protected-button-container-height:36px;--mdc-outlined-button-container-height:36px;--mat-text-button-touch-target-display:block;--mat-filled-button-touch-target-display:block;--mat-protected-button-touch-target-display:block;--mat-outlined-button-touch-target-display:block}html{--mdc-text-button-label-text-font:Roboto, sans-serif;--mdc-text-button-label-text-size:14px;--mdc-text-button-label-text-tracking:0.0892857143em;--mdc-text-button-label-text-weight:500;--mdc-text-button-label-text-transform:none;--mdc-filled-button-label-text-font:Roboto, sans-serif;--mdc-filled-button-label-text-size:14px;--mdc-filled-button-label-text-tracking:0.0892857143em;--mdc-filled-button-label-text-weight:500;--mdc-filled-button-label-text-transform:none;--mdc-protected-button-label-text-font:Roboto, sans-serif;--mdc-protected-button-label-text-size:14px;--mdc-protected-button-label-text-tracking:0.0892857143em;--mdc-protected-button-label-text-weight:500;--mdc-protected-button-label-text-transform:none;--mdc-outlined-button-label-text-font:Roboto, sans-serif;--mdc-outlined-button-label-text-size:14px;--mdc-outlined-button-label-text-tracking:0.0892857143em;--mdc-outlined-button-label-text-weight:500;--mdc-outlined-button-label-text-transform:none}html{--mdc-icon-button-icon-size:24px}html{--mdc-icon-button-icon-color:inherit;--mdc-icon-button-disabled-icon-color:rgba(0, 0, 0, 0.38);--mat-icon-button-state-layer-color:black;--mat-icon-button-disabled-state-layer-color:black;--mat-icon-button-ripple-color:rgba(0, 0, 0, 0.1);--mat-icon-button-hover-state-layer-opacity:0.04;--mat-icon-button-focus-state-layer-opacity:0.12;--mat-icon-button-pressed-state-layer-opacity:0.12}html .mat-mdc-icon-button.mat-primary{--mdc-icon-button-icon-color:#3f51b5;--mat-icon-button-state-layer-color:#3f51b5;--mat-icon-button-ripple-color:rgba(63, 81, 181, 0.1)}html .mat-mdc-icon-button.mat-accent{--mdc-icon-button-icon-color:#ff4081;--mat-icon-button-state-layer-color:#ff4081;--mat-icon-button-ripple-color:rgba(255, 64, 129, 0.1)}html .mat-mdc-icon-button.mat-warn{--mdc-icon-button-icon-color:#f44336;--mat-icon-button-state-layer-color:#f44336;--mat-icon-button-ripple-color:rgba(244, 67, 54, 0.1)}html{--mat-icon-button-touch-target-display:block}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 48px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:12px}html{--mdc-fab-container-shape:50%;--mdc-fab-container-elevation-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mdc-fab-focus-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-hover-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-pressed-container-elevation-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mdc-fab-small-container-shape:50%;--mdc-fab-small-container-elevation-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mdc-fab-small-focus-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-small-hover-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-fab-small-pressed-container-elevation-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mdc-extended-fab-container-height:48px;--mdc-extended-fab-container-shape:24px;--mdc-extended-fab-container-elevation-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mdc-extended-fab-focus-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-extended-fab-hover-container-elevation-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mdc-extended-fab-pressed-container-elevation-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mdc-fab-container-color:white;--mat-fab-foreground-color:black;--mat-fab-state-layer-color:black;--mat-fab-disabled-state-layer-color:black;--mat-fab-ripple-color:rgba(0, 0, 0, 0.1);--mat-fab-hover-state-layer-opacity:0.04;--mat-fab-focus-state-layer-opacity:0.12;--mat-fab-pressed-state-layer-opacity:0.12;--mat-fab-disabled-state-container-color:rgba(0, 0, 0, 0.12);--mat-fab-disabled-state-foreground-color:rgba(0, 0, 0, 0.38);--mdc-fab-small-container-color:white;--mat-fab-small-foreground-color:black;--mat-fab-small-state-layer-color:black;--mat-fab-small-disabled-state-layer-color:black;--mat-fab-small-ripple-color:rgba(0, 0, 0, 0.1);--mat-fab-small-hover-state-layer-opacity:0.04;--mat-fab-small-focus-state-layer-opacity:0.12;--mat-fab-small-pressed-state-layer-opacity:0.12;--mat-fab-small-disabled-state-container-color:rgba(0, 0, 0, 0.12);--mat-fab-small-disabled-state-foreground-color:rgba(0, 0, 0, 0.38)}html .mat-mdc-fab.mat-primary{--mdc-fab-container-color:#3f51b5;--mat-fab-foreground-color:white;--mat-fab-state-layer-color:white;--mat-fab-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-fab.mat-accent{--mdc-fab-container-color:#ff4081;--mat-fab-foreground-color:white;--mat-fab-state-layer-color:white;--mat-fab-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-fab.mat-warn{--mdc-fab-container-color:#f44336;--mat-fab-foreground-color:white;--mat-fab-state-layer-color:white;--mat-fab-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-mini-fab.mat-primary{--mdc-fab-small-container-color:#3f51b5;--mat-fab-small-foreground-color:white;--mat-fab-small-state-layer-color:white;--mat-fab-small-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-mini-fab.mat-accent{--mdc-fab-small-container-color:#ff4081;--mat-fab-small-foreground-color:white;--mat-fab-small-state-layer-color:white;--mat-fab-small-ripple-color:rgba(255, 255, 255, 0.1)}html .mat-mdc-mini-fab.mat-warn{--mdc-fab-small-container-color:#f44336;--mat-fab-small-foreground-color:white;--mat-fab-small-state-layer-color:white;--mat-fab-small-ripple-color:rgba(255, 255, 255, 0.1)}html{--mat-fab-touch-target-display:block;--mat-fab-small-touch-target-display:block}html{--mdc-extended-fab-label-text-font:Roboto, sans-serif;--mdc-extended-fab-label-text-size:14px;--mdc-extended-fab-label-text-tracking:0.0892857143em;--mdc-extended-fab-label-text-weight:500}html{--mdc-snackbar-container-shape:4px}html{--mdc-snackbar-container-color:#333333;--mdc-snackbar-supporting-text-color:rgba(255, 255, 255, 0.87);--mat-snack-bar-button-color:#ff4081}html{--mdc-snackbar-supporting-text-font:Roboto, sans-serif;--mdc-snackbar-supporting-text-line-height:20px;--mdc-snackbar-supporting-text-size:14px;--mdc-snackbar-supporting-text-weight:400}html{--mat-table-row-item-outline-width:1px}html{--mat-table-background-color:white;--mat-table-header-headline-color:rgba(0, 0, 0, 0.87);--mat-table-row-item-label-text-color:rgba(0, 0, 0, 0.87);--mat-table-row-item-outline-color:rgba(0, 0, 0, 0.12)}html{--mat-table-header-container-height:56px;--mat-table-footer-container-height:52px;--mat-table-row-item-container-height:52px}html{--mat-table-header-headline-font:Roboto, sans-serif;--mat-table-header-headline-line-height:22px;--mat-table-header-headline-size:14px;--mat-table-header-headline-weight:500;--mat-table-header-headline-tracking:0.0071428571em;--mat-table-row-item-label-text-font:Roboto, sans-serif;--mat-table-row-item-label-text-line-height:20px;--mat-table-row-item-label-text-size:14px;--mat-table-row-item-label-text-weight:400;--mat-table-row-item-label-text-tracking:0.0178571429em;--mat-table-footer-supporting-text-font:Roboto, sans-serif;--mat-table-footer-supporting-text-line-height:20px;--mat-table-footer-supporting-text-size:14px;--mat-table-footer-supporting-text-weight:400;--mat-table-footer-supporting-text-tracking:0.0178571429em}html{--mdc-circular-progress-active-indicator-width:4px;--mdc-circular-progress-size:48px}html{--mdc-circular-progress-active-indicator-color:#3f51b5}html .mat-accent{--mdc-circular-progress-active-indicator-color:#ff4081}html .mat-warn{--mdc-circular-progress-active-indicator-color:#f44336}html{--mat-badge-container-shape:50%;--mat-badge-container-size:unset;--mat-badge-small-size-container-size:unset;--mat-badge-large-size-container-size:unset;--mat-badge-legacy-container-size:22px;--mat-badge-legacy-small-size-container-size:16px;--mat-badge-legacy-large-size-container-size:28px;--mat-badge-container-offset:-11px 0;--mat-badge-small-size-container-offset:-8px 0;--mat-badge-large-size-container-offset:-14px 0;--mat-badge-container-overlap-offset:-11px;--mat-badge-small-size-container-overlap-offset:-8px;--mat-badge-large-size-container-overlap-offset:-14px;--mat-badge-container-padding:0;--mat-badge-small-size-container-padding:0;--mat-badge-large-size-container-padding:0}html{--mat-badge-background-color:#3f51b5;--mat-badge-text-color:white;--mat-badge-disabled-state-background-color:#b9b9b9;--mat-badge-disabled-state-text-color:rgba(0, 0, 0, 0.38)}.mat-badge-accent{--mat-badge-background-color:#ff4081;--mat-badge-text-color:white}.mat-badge-warn{--mat-badge-background-color:#f44336;--mat-badge-text-color:white}html{--mat-badge-text-font:Roboto, sans-serif;--mat-badge-line-height:22px;--mat-badge-text-size:12px;--mat-badge-text-weight:600;--mat-badge-small-size-text-size:9px;--mat-badge-small-size-line-height:16px;--mat-badge-large-size-text-size:24px;--mat-badge-large-size-line-height:28px}html{--mat-bottom-sheet-container-shape:4px}html{--mat-bottom-sheet-container-text-color:rgba(0, 0, 0, 0.87);--mat-bottom-sheet-container-background-color:white}html{--mat-bottom-sheet-container-text-font:Roboto, sans-serif;--mat-bottom-sheet-container-text-line-height:20px;--mat-bottom-sheet-container-text-size:14px;--mat-bottom-sheet-container-text-tracking:0.0178571429em;--mat-bottom-sheet-container-text-weight:400}html{--mat-legacy-button-toggle-height:36px;--mat-legacy-button-toggle-shape:2px;--mat-legacy-button-toggle-focus-state-layer-opacity:1;--mat-standard-button-toggle-shape:4px;--mat-standard-button-toggle-hover-state-layer-opacity:0.04;--mat-standard-button-toggle-focus-state-layer-opacity:0.12}html{--mat-legacy-button-toggle-text-color:rgba(0, 0, 0, 0.38);--mat-legacy-button-toggle-state-layer-color:rgba(0, 0, 0, 0.12);--mat-legacy-button-toggle-selected-state-text-color:rgba(0, 0, 0, 0.54);--mat-legacy-button-toggle-selected-state-background-color:#e0e0e0;--mat-legacy-button-toggle-disabled-state-text-color:rgba(0, 0, 0, 0.26);--mat-legacy-button-toggle-disabled-state-background-color:#eeeeee;--mat-legacy-button-toggle-disabled-selected-state-background-color:#bdbdbd;--mat-standard-button-toggle-text-color:rgba(0, 0, 0, 0.87);--mat-standard-button-toggle-background-color:white;--mat-standard-button-toggle-state-layer-color:black;--mat-standard-button-toggle-selected-state-background-color:#e0e0e0;--mat-standard-button-toggle-selected-state-text-color:rgba(0, 0, 0, 0.87);--mat-standard-button-toggle-disabled-state-text-color:rgba(0, 0, 0, 0.26);--mat-standard-button-toggle-disabled-state-background-color:white;--mat-standard-button-toggle-disabled-selected-state-text-color:rgba(0, 0, 0, 0.87);--mat-standard-button-toggle-disabled-selected-state-background-color:#bdbdbd;--mat-standard-button-toggle-divider-color:#e0e0e0}html{--mat-standard-button-toggle-height:48px}html{--mat-legacy-button-toggle-label-text-font:Roboto, sans-serif;--mat-legacy-button-toggle-label-text-line-height:24px;--mat-legacy-button-toggle-label-text-size:16px;--mat-legacy-button-toggle-label-text-tracking:0.03125em;--mat-legacy-button-toggle-label-text-weight:400;--mat-standard-button-toggle-label-text-font:Roboto, sans-serif;--mat-standard-button-toggle-label-text-line-height:24px;--mat-standard-button-toggle-label-text-size:16px;--mat-standard-button-toggle-label-text-tracking:0.03125em;--mat-standard-button-toggle-label-text-weight:400}html{--mat-datepicker-calendar-container-shape:4px;--mat-datepicker-calendar-container-touch-shape:4px;--mat-datepicker-calendar-container-elevation-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-container-touch-elevation-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}html{--mat-datepicker-calendar-date-selected-state-text-color:white;--mat-datepicker-calendar-date-selected-state-background-color:#3f51b5;--mat-datepicker-calendar-date-selected-disabled-state-background-color:rgba(63, 81, 181, 0.4);--mat-datepicker-calendar-date-today-selected-state-outline-color:white;--mat-datepicker-calendar-date-focus-state-background-color:rgba(63, 81, 181, 0.3);--mat-datepicker-calendar-date-hover-state-background-color:rgba(63, 81, 181, 0.3);--mat-datepicker-toggle-active-state-icon-color:#3f51b5;--mat-datepicker-calendar-date-in-range-state-background-color:rgba(63, 81, 181, 0.2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color:rgba(249, 171, 0, 0.2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color:#a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color:#46a35e;--mat-datepicker-toggle-icon-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-body-label-text-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-period-button-text-color:black;--mat-datepicker-calendar-period-button-icon-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-navigation-button-icon-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-header-divider-color:rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-header-text-color:rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-outline-color:rgba(0, 0, 0, 0.38);--mat-datepicker-calendar-date-today-disabled-state-outline-color:rgba(0, 0, 0, 0.18);--mat-datepicker-calendar-date-text-color:rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-date-outline-color:transparent;--mat-datepicker-calendar-date-disabled-state-text-color:rgba(0, 0, 0, 0.38);--mat-datepicker-calendar-date-preview-state-outline-color:rgba(0, 0, 0, 0.24);--mat-datepicker-range-input-separator-color:rgba(0, 0, 0, 0.87);--mat-datepicker-range-input-disabled-state-separator-color:rgba(0, 0, 0, 0.38);--mat-datepicker-range-input-disabled-state-text-color:rgba(0, 0, 0, 0.38);--mat-datepicker-calendar-container-background-color:white;--mat-datepicker-calendar-container-text-color:rgba(0, 0, 0, 0.87)}.mat-datepicker-content.mat-accent{--mat-datepicker-calendar-date-selected-state-text-color:white;--mat-datepicker-calendar-date-selected-state-background-color:#ff4081;--mat-datepicker-calendar-date-selected-disabled-state-background-color:rgba(255, 64, 129, 0.4);--mat-datepicker-calendar-date-today-selected-state-outline-color:white;--mat-datepicker-calendar-date-focus-state-background-color:rgba(255, 64, 129, 0.3);--mat-datepicker-calendar-date-hover-state-background-color:rgba(255, 64, 129, 0.3);--mat-datepicker-calendar-date-in-range-state-background-color:rgba(255, 64, 129, 0.2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color:rgba(249, 171, 0, 0.2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color:#a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color:#46a35e}.mat-datepicker-content.mat-warn{--mat-datepicker-calendar-date-selected-state-text-color:white;--mat-datepicker-calendar-date-selected-state-background-color:#f44336;--mat-datepicker-calendar-date-selected-disabled-state-background-color:rgba(244, 67, 54, 0.4);--mat-datepicker-calendar-date-today-selected-state-outline-color:white;--mat-datepicker-calendar-date-focus-state-background-color:rgba(244, 67, 54, 0.3);--mat-datepicker-calendar-date-hover-state-background-color:rgba(244, 67, 54, 0.3);--mat-datepicker-calendar-date-in-range-state-background-color:rgba(244, 67, 54, 0.2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color:rgba(249, 171, 0, 0.2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color:#a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color:#46a35e}.mat-datepicker-toggle-active.mat-accent{--mat-datepicker-toggle-active-state-icon-color:#ff4081}.mat-datepicker-toggle-active.mat-warn{--mat-datepicker-toggle-active-state-icon-color:#f44336}.mat-calendar-controls{--mat-icon-button-touch-target-display:none}.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:8px}html{--mat-datepicker-calendar-text-font:Roboto, sans-serif;--mat-datepicker-calendar-text-size:13px;--mat-datepicker-calendar-body-label-text-size:14px;--mat-datepicker-calendar-body-label-text-weight:500;--mat-datepicker-calendar-period-button-text-size:14px;--mat-datepicker-calendar-period-button-text-weight:500;--mat-datepicker-calendar-header-text-size:11px;--mat-datepicker-calendar-header-text-weight:400}html{--mat-divider-width:1px}html{--mat-divider-color:rgba(0, 0, 0, 0.12)}html{--mat-expansion-container-shape:4px;--mat-expansion-legacy-header-indicator-display:inline-block;--mat-expansion-header-indicator-display:none}html{--mat-expansion-container-background-color:white;--mat-expansion-container-text-color:rgba(0, 0, 0, 0.87);--mat-expansion-actions-divider-color:rgba(0, 0, 0, 0.12);--mat-expansion-header-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-expansion-header-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-expansion-header-disabled-state-text-color:rgba(0, 0, 0, 0.26);--mat-expansion-header-text-color:rgba(0, 0, 0, 0.87);--mat-expansion-header-description-color:rgba(0, 0, 0, 0.54);--mat-expansion-header-indicator-color:rgba(0, 0, 0, 0.54)}html{--mat-expansion-header-collapsed-state-height:48px;--mat-expansion-header-expanded-state-height:64px}html{--mat-expansion-header-text-font:Roboto, sans-serif;--mat-expansion-header-text-size:14px;--mat-expansion-header-text-weight:500;--mat-expansion-header-text-line-height:inherit;--mat-expansion-header-text-tracking:inherit;--mat-expansion-container-text-font:Roboto, sans-serif;--mat-expansion-container-text-line-height:20px;--mat-expansion-container-text-size:14px;--mat-expansion-container-text-tracking:0.0178571429em;--mat-expansion-container-text-weight:400}html{--mat-grid-list-tile-header-primary-text-size:14px;--mat-grid-list-tile-header-secondary-text-size:12px;--mat-grid-list-tile-footer-primary-text-size:14px;--mat-grid-list-tile-footer-secondary-text-size:12px}html{--mat-icon-color:inherit}.mat-icon.mat-primary{--mat-icon-color:#3f51b5}.mat-icon.mat-accent{--mat-icon-color:#ff4081}.mat-icon.mat-warn{--mat-icon-color:#f44336}html{--mat-sidenav-container-shape:0;--mat-sidenav-container-elevation-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);--mat-sidenav-container-width:auto}html{--mat-sidenav-container-divider-color:rgba(0, 0, 0, 0.12);--mat-sidenav-container-background-color:white;--mat-sidenav-container-text-color:rgba(0, 0, 0, 0.87);--mat-sidenav-content-background-color:#fafafa;--mat-sidenav-content-text-color:rgba(0, 0, 0, 0.87);--mat-sidenav-scrim-color:rgba(0, 0, 0, 0.6)}html{--mat-stepper-header-icon-foreground-color:white;--mat-stepper-header-selected-state-icon-background-color:#3f51b5;--mat-stepper-header-selected-state-icon-foreground-color:white;--mat-stepper-header-done-state-icon-background-color:#3f51b5;--mat-stepper-header-done-state-icon-foreground-color:white;--mat-stepper-header-edit-state-icon-background-color:#3f51b5;--mat-stepper-header-edit-state-icon-foreground-color:white;--mat-stepper-container-color:white;--mat-stepper-line-color:rgba(0, 0, 0, 0.12);--mat-stepper-header-hover-state-layer-color:rgba(0, 0, 0, 0.04);--mat-stepper-header-focus-state-layer-color:rgba(0, 0, 0, 0.04);--mat-stepper-header-label-text-color:rgba(0, 0, 0, 0.54);--mat-stepper-header-optional-label-text-color:rgba(0, 0, 0, 0.54);--mat-stepper-header-selected-state-label-text-color:rgba(0, 0, 0, 0.87);--mat-stepper-header-error-state-label-text-color:#f44336;--mat-stepper-header-icon-background-color:rgba(0, 0, 0, 0.54);--mat-stepper-header-error-state-icon-foreground-color:#f44336;--mat-stepper-header-error-state-icon-background-color:transparent}html .mat-step-header.mat-accent{--mat-stepper-header-icon-foreground-color:white;--mat-stepper-header-selected-state-icon-background-color:#ff4081;--mat-stepper-header-selected-state-icon-foreground-color:white;--mat-stepper-header-done-state-icon-background-color:#ff4081;--mat-stepper-header-done-state-icon-foreground-color:white;--mat-stepper-header-edit-state-icon-background-color:#ff4081;--mat-stepper-header-edit-state-icon-foreground-color:white}html .mat-step-header.mat-warn{--mat-stepper-header-icon-foreground-color:white;--mat-stepper-header-selected-state-icon-background-color:#f44336;--mat-stepper-header-selected-state-icon-foreground-color:white;--mat-stepper-header-done-state-icon-background-color:#f44336;--mat-stepper-header-done-state-icon-foreground-color:white;--mat-stepper-header-edit-state-icon-background-color:#f44336;--mat-stepper-header-edit-state-icon-foreground-color:white}html{--mat-stepper-header-height:72px}html{--mat-stepper-container-text-font:Roboto, sans-serif;--mat-stepper-header-label-text-font:Roboto, sans-serif;--mat-stepper-header-label-text-size:14px;--mat-stepper-header-label-text-weight:400;--mat-stepper-header-error-state-label-text-size:16px;--mat-stepper-header-selected-state-label-text-size:16px;--mat-stepper-header-selected-state-label-text-weight:400}html{--mat-sort-arrow-color:#757575}html{--mat-toolbar-container-background-color:whitesmoke;--mat-toolbar-container-text-color:rgba(0, 0, 0, 0.87)}.mat-toolbar.mat-primary{--mat-toolbar-container-background-color:#3f51b5;--mat-toolbar-container-text-color:white}.mat-toolbar.mat-accent{--mat-toolbar-container-background-color:#ff4081;--mat-toolbar-container-text-color:white}.mat-toolbar.mat-warn{--mat-toolbar-container-background-color:#f44336;--mat-toolbar-container-text-color:white}html{--mat-toolbar-standard-height:64px;--mat-toolbar-mobile-height:56px}html{--mat-toolbar-title-text-font:Roboto, sans-serif;--mat-toolbar-title-text-line-height:32px;--mat-toolbar-title-text-size:20px;--mat-toolbar-title-text-tracking:0.0125em;--mat-toolbar-title-text-weight:500}html{--mat-tree-container-background-color:white;--mat-tree-node-text-color:rgba(0, 0, 0, 0.87)}html{--mat-tree-node-min-height:48px}html{--mat-tree-node-text-font:Roboto, sans-serif;--mat-tree-node-text-size:14px;--mat-tree-node-text-weight:400}.mat-h1,.mat-headline-5,.mat-typography .mat-h1,.mat-typography .mat-headline-5,.mat-typography h1{font:400 24px/32px Roboto, sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-headline-6,.mat-typography .mat-h2,.mat-typography .mat-headline-6,.mat-typography h2{font:500 20px/32px Roboto, sans-serif;letter-spacing:.0125em;margin:0 0 16px}.mat-h3,.mat-subtitle-1,.mat-typography .mat-h3,.mat-typography .mat-subtitle-1,.mat-typography h3{font:400 16px/28px Roboto, sans-serif;letter-spacing:.009375em;margin:0 0 16px}.mat-h4,.mat-body-1,.mat-typography .mat-h4,.mat-typography .mat-body-1,.mat-typography h4{font:400 16px/24px Roboto, sans-serif;letter-spacing:.03125em;margin:0 0 16px}.mat-h5,.mat-typography .mat-h5,.mat-typography h5{font:400 calc(14px*.83)/20px Roboto, sans-serif;margin:0 0 12px}.mat-h6,.mat-typography .mat-h6,.mat-typography h6{font:400 calc(14px*.67)/20px Roboto, sans-serif;margin:0 0 12px}.mat-body-strong,.mat-subtitle-2,.mat-typography .mat-body-strong,.mat-typography .mat-subtitle-2{font:500 14px/22px Roboto, sans-serif;letter-spacing:.0071428571em}.mat-body,.mat-body-2,.mat-typography .mat-body,.mat-typography .mat-body-2,.mat-typography{font:400 14px/20px Roboto, sans-serif;letter-spacing:.0178571429em}.mat-body p,.mat-body-2 p,.mat-typography .mat-body p,.mat-typography .mat-body-2 p,.mat-typography p{margin:0 0 12px}.mat-small,.mat-caption,.mat-typography .mat-small,.mat-typography .mat-caption{font:400 12px/20px Roboto, sans-serif;letter-spacing:.0333333333em}.mat-headline-1,.mat-typography .mat-headline-1{font:300 96px/96px Roboto, sans-serif;letter-spacing:-0.015625em;margin:0 0 56px}.mat-headline-2,.mat-typography .mat-headline-2{font:300 60px/60px Roboto, sans-serif;letter-spacing:-.0083333333em;margin:0 0 64px}.mat-headline-3,.mat-typography .mat-headline-3{font:400 48px/50px Roboto, sans-serif;letter-spacing:normal;margin:0 0 64px}.mat-headline-4,.mat-typography .mat-headline-4{font:400 34px/40px Roboto, sans-serif;letter-spacing:.0073529412em;margin:0 0 64px}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/web-portal/src/styles.scss?ngGlobalStyle (2) ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* You can add global styles to this file, and also import other style files */
/* Angular Material Theme */
/* Material Icons */
/* Shared Styles from UI Library */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

:root {
  --form-font-family: "Roboto", sans-serif;
  --form-header-bg: #0f172a;
  --form-header-subtitle: #94a3b8;
}

.form-shared-header {
  background: var(--form-header-bg) !important;
  color: #ffffff !important;
  padding: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
  font-family: var(--form-font-family);
}

.form-shared-title,
.form-shared-header h1,
.form-shared-header h2,
.form-shared-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  color: #ffffff !important;
  font-family: var(--form-font-family);
}

.form-shared-header .form-shared-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-shared-subtitle,
.form-shared-header .step-indicator {
  margin: 4px 0 0 0 !important;
  font-size: 12px !important;
  color: var(--form-header-subtitle) !important;
  font-family: var(--form-font-family);
}

.form-shared-close {
  color: #ffffff !important;
  border-radius: 9999px !important;
  background: rgba(15, 23, 42, 0.35) !important;
  transition: background-color 0.2s ease;
}

.form-shared-close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

:root {
  --form-control-bg: #ffffff;
  --form-control-border: #cbd5e1;
  --form-control-text: #0f172a;
  --form-control-placeholder: #94a3b8;
  --form-control-focus: #0284c7;
  --form-control-focus-ring: rgba(2, 132, 199, 0.1);
  --form-label-color: #64748b;
  --form-error-color: #dc2626;
  --form-hint-color: #94a3b8;
}

/* General form layout – use anywhere */
.form-group,
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.form-group:last-child,
.form-field:last-child {
  margin-bottom: 0;
}

/* General labels – use .form-label, .section-label, .input-label, etc. */
.form-label,
.section-label,
.field-label,
.input-label,
.datetime-label,
.fuel-label,
.specs-label,
.insurance-label,
.link-label,
.form-label-small,
.field-label-small,
.form-group label,
.form-field label,
.modal-body label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--form-label-color);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.25rem;
}

.field-label-hint {
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted, #6b7280);
  margin-left: 0.25rem;
}

/* General inputs – use .form-input, .form-textarea, .form-select, .modern-input, etc.
   Inputs inside .form-group / .form-field without a class also get styled. */
.form-input,
.form-textarea,
.form-select,
.modern-input,
.form-group input:not([type=checkbox]):not([type=radio]),
.form-field input:not([type=checkbox]):not([type=radio]),
.modal-body input:not([type=checkbox]):not([type=radio]),
.time-select,
.notes-textarea,
.specs-input,
.insurance-input,
.date-input,
.gallons-input,
.supplier-input {
  width: 100%;
  padding: 0.625rem;
  background: var(--form-control-bg);
  border: 1px solid var(--form-control-border);
  border-radius: 0.5rem;
  color: var(--form-control-text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.form-input::placeholder,
.form-textarea::placeholder,
.form-select::placeholder,
.modern-input::placeholder,
.form-group input:not([type=checkbox]):not([type=radio])::placeholder,
.form-field input:not([type=checkbox]):not([type=radio])::placeholder,
.modal-body input:not([type=checkbox]):not([type=radio])::placeholder,
.time-select::placeholder,
.notes-textarea::placeholder,
.specs-input::placeholder,
.insurance-input::placeholder,
.date-input::placeholder,
.gallons-input::placeholder,
.supplier-input::placeholder {
  color: var(--form-control-placeholder);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.modern-input:focus,
.form-group input:not([type=checkbox]):not([type=radio]):focus,
.form-field input:not([type=checkbox]):not([type=radio]):focus,
.modal-body input:not([type=checkbox]):not([type=radio]):focus,
.time-select:focus,
.notes-textarea:focus,
.specs-input:focus,
.insurance-input:focus,
.date-input:focus,
.gallons-input:focus,
.supplier-input:focus {
  outline: none;
  border-color: var(--form-control-focus);
  box-shadow: 0 0 0 3px var(--form-control-focus-ring);
}
.form-input:disabled, .form-input[disabled],
.form-textarea:disabled,
.form-textarea[disabled],
.form-select:disabled,
.form-select[disabled],
.modern-input:disabled,
.modern-input[disabled],
.form-group input:not([type=checkbox]):not([type=radio]):disabled,
.form-group input:not([type=checkbox]):not([type=radio])[disabled],
.form-field input:not([type=checkbox]):not([type=radio]):disabled,
.form-field input:not([type=checkbox]):not([type=radio])[disabled],
.modal-body input:not([type=checkbox]):not([type=radio]):disabled,
.modal-body input:not([type=checkbox]):not([type=radio])[disabled],
.time-select:disabled,
.time-select[disabled],
.notes-textarea:disabled,
.notes-textarea[disabled],
.specs-input:disabled,
.specs-input[disabled],
.insurance-input:disabled,
.insurance-input[disabled],
.date-input:disabled,
.date-input[disabled],
.gallons-input:disabled,
.gallons-input[disabled],
.supplier-input:disabled,
.supplier-input[disabled] {
  background: var(--form-control-disabled-bg, #f1f5f9);
  color: var(--form-control-disabled-text, #94a3b8);
  cursor: not-allowed;
  border-color: var(--form-control-border);
  opacity: 1;
}
.form-input.error, .form-input.field-invalid,
.form-textarea.error,
.form-textarea.field-invalid,
.form-select.error,
.form-select.field-invalid,
.modern-input.error,
.modern-input.field-invalid,
.form-group input:not([type=checkbox]):not([type=radio]).error,
.form-group input:not([type=checkbox]):not([type=radio]).field-invalid,
.form-field input:not([type=checkbox]):not([type=radio]).error,
.form-field input:not([type=checkbox]):not([type=radio]).field-invalid,
.modal-body input:not([type=checkbox]):not([type=radio]).error,
.modal-body input:not([type=checkbox]):not([type=radio]).field-invalid,
.time-select.error,
.time-select.field-invalid,
.notes-textarea.error,
.notes-textarea.field-invalid,
.specs-input.error,
.specs-input.field-invalid,
.insurance-input.error,
.insurance-input.field-invalid,
.date-input.error,
.date-input.field-invalid,
.gallons-input.error,
.gallons-input.field-invalid,
.supplier-input.error,
.supplier-input.field-invalid {
  border-color: var(--form-error-color) !important;
}
.form-input.error:focus, .form-input.field-invalid:focus,
.form-textarea.error:focus,
.form-textarea.field-invalid:focus,
.form-select.error:focus,
.form-select.field-invalid:focus,
.modern-input.error:focus,
.modern-input.field-invalid:focus,
.form-group input:not([type=checkbox]):not([type=radio]).error:focus,
.form-group input:not([type=checkbox]):not([type=radio]).field-invalid:focus,
.form-field input:not([type=checkbox]):not([type=radio]).error:focus,
.form-field input:not([type=checkbox]):not([type=radio]).field-invalid:focus,
.modal-body input:not([type=checkbox]):not([type=radio]).error:focus,
.modal-body input:not([type=checkbox]):not([type=radio]).field-invalid:focus,
.time-select.error:focus,
.time-select.field-invalid:focus,
.notes-textarea.error:focus,
.notes-textarea.field-invalid:focus,
.specs-input.error:focus,
.specs-input.field-invalid:focus,
.insurance-input.error:focus,
.insurance-input.field-invalid:focus,
.date-input.error:focus,
.date-input.field-invalid:focus,
.gallons-input.error:focus,
.gallons-input.field-invalid:focus,
.supplier-input.error:focus,
.supplier-input.field-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 3rem;
}

select.form-input,
select.form-select {
  cursor: pointer;
  min-height: 2.5rem;
}

.form-input-small {
  max-width: 8rem;
}

/* Input with leading icon */
.input-with-icon {
  position: relative;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
}
.input-with-icon .input-icon.rotate-90 {
  transform: translateY(-50%) rotate(90deg);
}
.input-with-icon .form-input {
  padding-left: 36px;
}

/* General error text */
.form-error,
.field-error,
.error-message,
.upload-error {
  color: var(--form-error-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* General hint text */
.helper-text,
.field-hint,
.link-hint,
.hint-text {
  color: var(--form-hint-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Legacy alias */
.form-ui-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--form-label-color);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.25rem;
}

.form-ui-control {
  width: 100%;
  padding: 0.625rem;
  background: var(--form-control-bg);
  border: 1px solid var(--form-control-border);
  border-radius: 0.5rem;
  color: var(--form-control-text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-ui-control::placeholder {
  color: var(--form-control-placeholder);
}

.form-ui-control:focus {
  outline: none;
  border-color: var(--form-control-focus);
  box-shadow: 0 0 0 3px var(--form-control-focus-ring);
}

.form-ui-control.form-ui-control--error,
.form-ui-control.form-ui-control--error:focus {
  border-color: var(--form-error-color);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-ui-error {
  color: var(--form-error-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.form-ui-hint {
  color: var(--form-hint-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

:root {
  --form-btn-primary-bg: #0f172a;
  --form-btn-primary-hover: #1e293b;
  --form-btn-primary-text: #ffffff;
  --form-btn-secondary-bg: #ffffff;
  --form-btn-secondary-hover: #f8fafc;
  --form-btn-secondary-border: #cbd5e1;
  --form-btn-secondary-text: #475569;
  --form-btn-success-bg: #16a34a;
  --form-btn-success-hover: #15803d;
}

/* General layout – use these classes in any modal/form. No per-component scoping needed. */
.form-actions,
.modal-actions,
.dialog-actions,
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0;
  padding-top: 1rem;
}

/* Paired primary + secondary: equal width, one row (e.g. launch request footer) */
.form-actions.form-actions--equal {
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #f1f5f9;
}
.form-actions.form-actions--equal > .btn-primary,
.form-actions.form-actions--equal > .btn-secondary,
.form-actions.form-actions--equal > button.btn-primary,
.form-actions.form-actions--equal > button.btn-secondary {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.75rem;
  justify-content: center;
  white-space: nowrap;
}

/* General button classes. Use .btn-primary, .btn-secondary, .btn-ghost, .btn-success in HTML.
   Aliases allow existing class names (save-btn, cancel-btn, etc.) to work without HTML changes. */
.btn-primary,
.save-button,
.save-btn,
.submit-btn,
.btn-save,
.generate-btn,
.apply-btn,
.next-button,
.finish-button,
.quick-save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--form-btn-primary-bg);
  background: var(--form-btn-primary-bg);
  color: var(--form-btn-primary-text);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-primary:hover:not(:disabled),
.save-button:hover:not(:disabled),
.save-btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.btn-save:hover:not(:disabled),
.generate-btn:hover:not(:disabled),
.apply-btn:hover:not(:disabled),
.next-button:hover:not(:disabled),
.finish-button:hover:not(:disabled),
.quick-save-button:hover:not(:disabled) {
  background: var(--form-btn-primary-hover);
  border-color: var(--form-btn-primary-hover);
}
.btn-primary:disabled,
.save-button:disabled,
.save-btn:disabled,
.submit-btn:disabled,
.btn-save:disabled,
.generate-btn:disabled,
.apply-btn:disabled,
.next-button:disabled,
.finish-button:disabled,
.quick-save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary,
.cancel-btn,
.cancel-button,
.cancel-button-footer,
.back-button,
.close-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--form-btn-secondary-border);
  background: var(--form-btn-secondary-bg);
  color: var(--form-btn-secondary-text);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-secondary:hover:not(:disabled),
.cancel-btn:hover:not(:disabled),
.cancel-button:hover:not(:disabled),
.cancel-button-footer:hover:not(:disabled),
.back-button:hover:not(:disabled),
.close-btn-action:hover:not(:disabled) {
  background: var(--form-btn-secondary-hover);
}
.btn-secondary:disabled,
.cancel-btn:disabled,
.cancel-button:disabled,
.cancel-button-footer:disabled,
.back-button:disabled,
.close-btn-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-ghost {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-ghost:hover:not(:disabled) {
  background: #f1f5f9;
}
.btn-ghost:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-success,
.btn-confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border: none;
  background: var(--form-btn-success-bg);
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-success mat-icon,
.btn-success i-lucide,
.btn-confirm mat-icon,
.btn-confirm i-lucide {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.btn-success:hover:not(:disabled),
.btn-confirm:hover:not(:disabled) {
  background: var(--form-btn-success-hover);
}
.btn-success:disabled,
.btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/**
 * Shared status badge styles
 * Use .status-badge or scoped aliases below
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-badge.active, .status-badge.status-active {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.blocked {
  background-color: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.status-badge.status-draft {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.status-badge.status-pending, .status-badge.status-pendingsignature, .status-badge.status-pending-signature {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.status-badge.status-active {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
.status-badge.status-pending-termination {
  background-color: #fed7aa;
  color: #9a3412;
  border: 1px solid #fb923c;
}
.status-badge.status-terminated {
  background-color: #fecaca;
  color: #991b1b;
  border: 1px solid #f87171;
}
.status-badge.status-expired {
  background-color: #e2e8f0;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.status-badge.status-signedbyadmin {
  background-color: rgba(14, 165, 233, 0.15);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.3);
}
.status-badge.status-small {
  padding: 2px 8px;
  font-size: 10px;
}
.status-badge.clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.status-badge.clickable:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/**
 * Shared section styles: section-title, section-divider, form-section
 */
:root {
  --section-title-color: #1e293b;
  --section-title-icon: #0284c7;
  --section-divider: #f1f5f9;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--section-title-color);
  margin: 0 0 0.75rem 0;
}
.section-title mat-icon,
.section-title i-lucide {
  width: 18px;
  height: 18px;
  color: var(--section-title-icon);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--section-divider);
  margin: 0;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/**
 * Detail views (boat card headers, customer identity bar, etc.) — bordered neutral “Edit”, not primary CTA blue.
 */
.card-section-edit-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background-color 0.2s, border-color 0.2s;
}
.card-section-edit-button:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.card-section-edit-button mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/**
 * Shared search input styles
 * Use .search-container, .search-wrapper, or .search-section as wrapper
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.search-container,
.search-wrapper,
.search-section {
  position: relative;
  max-width: 448px;
  margin-bottom: 24px;
}
.search-container .search-icon,
.search-wrapper .search-icon,
.search-section .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 20px;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.search-container .search-input,
.search-wrapper .search-input,
.search-section .search-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 12px;
  color: #0f172a;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-container .search-input:focus,
.search-wrapper .search-input:focus,
.search-section .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}
.search-container .search-input::placeholder,
.search-wrapper .search-input::placeholder,
.search-section .search-input::placeholder {
  color: #94a3b8;
}

/**
 * Shared form layout grids
 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 100%;
  box-sizing: border-box;
}
.form-grid .form-field.full-width {
  grid-column: 1/-1;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.form-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  min-width: 0;
}
.form-two-columns > .form-column {
  min-width: 0;
}
@media (max-width: 768px) {
  .form-two-columns {
    grid-template-columns: 1fr;
  }
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-field-span-2 {
  grid-column: span 2;
}

/**
 * Shared tab navigation styles
 */
.tab-navigation {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  background-color: #f8fafc;
}
.tab-navigation .tab-button {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}
.tab-navigation .tab-button:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}
.tab-navigation .tab-button.active {
  color: #0ea5e9;
  border-bottom-color: #0ea5e9;
  background-color: white;
}

/**
 * Shared status banner (info/warning/error) styles
 */
.status-banner {
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.status-banner i-lucide {
  flex-shrink: 0;
}
.status-banner.error {
  background-color: #fef2f2;
  border: 1px solid #fee2e2;
  color: #b91c1c;
}
.status-banner.error i-lucide {
  color: #dc2626;
}
.status-banner.warning {
  background-color: #fffbeb;
  border: 1px solid #fef3c7;
  color: #92400e;
}
.status-banner.warning i-lucide {
  color: #d97706;
}
.status-banner strong {
  display: block;
  margin-bottom: 0.25rem;
}
.status-banner p {
  margin: 0;
  opacity: 0.9;
}

.status-banner-container {
  margin-top: 1rem;
}
.status-banner-container .status-banner:last-child {
  margin-bottom: 0;
}

/**
 * Shared empty-state and loading-state styles
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: #94a3b8;
  font-style: italic;
}
.empty-state p {
  margin: 0;
  font-size: 14px;
}

.loading-state {
  text-align: center;
  padding: 48px 24px;
  color: #64748b;
}

/**
 * Shared modal overlay and content styles
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 16px;
}

.modal-content {
  background: white;
  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);
  width: 100%;
  max-width: 42rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalZoomIn 0.2s ease;
}

@keyframes modalZoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-content .modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/**
 * Shared info banner styles (neutral, success, info variants)
 */
.info-banner,
.form-info-banner {
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid;
  margin-bottom: 0;
}
.info-banner strong,
.form-info-banner strong {
  font-weight: 700;
}
.info-banner p,
.form-info-banner p {
  margin: 0;
  line-height: 1.5;
}
.info-banner .placeholder-text,
.form-info-banner .placeholder-text {
  color: #94a3b8;
  font-style: italic;
}
.info-banner mat-icon,
.info-banner i-lucide,
.form-info-banner mat-icon,
.form-info-banner i-lucide {
  flex-shrink: 0;
}

/* Neutral (slate) */
.info-banner {
  background: #f8fafc;
  color: #1e293b;
  border-color: #e2e8f0;
}

/* Success (green) */
.info-banner.success-light,
.info-banner.success {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.info-banner.success-light mat-icon,
.info-banner.success-light i-lucide,
.info-banner.success mat-icon,
.info-banner.success i-lucide {
  color: #166534;
}

/* Info (blue) */
.info-banner.info,
.form-info-banner {
  background: rgba(14, 165, 233, 0.1);
  color: #1e40af;
  border-color: rgba(14, 165, 233, 0.2);
}
.info-banner.info mat-icon,
.info-banner.info i-lucide,
.form-info-banner mat-icon,
.form-info-banner i-lucide {
  color: #1e40af;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* Info with icon layout */
.info-banner.info,
.info-banner.info-with-icon {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/**
 * Shared table container styles
 */
.table-container,
.list-table-container,
.contracts-table-container,
.users-table-container {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.table-wrapper {
  overflow-x: auto;
}

/**
 * Shared clickable row for data tables (contracts, clients, vessels, etc.)
 * Apply to mat-row: class="clickable-row" (click)="onRowClick(row)"
 */
.clickable-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.clickable-row:hover {
  background-color: #f8fafc; /* slate-50 */
}

/**
 * Shared sortable column header styles
 * Use with: <button type="button" class="sortable-header" (click)="onSort('columnKey')">
 *           <span>COLUMN LABEL</span>
 *           <mat-icon>{{ getSortIcon('columnKey') }}</mat-icon>
 *         </button>
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.sortable-header:hover {
  color: #334155;
}
.sortable-header mat-icon,
.sortable-header i-lucide {
  color: #94a3b8;
  flex-shrink: 0;
}
.sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/**
 * Shared Angular Material dialog overrides
 * Base styles applied globally. Components can add ::ng-deep overrides for max-width, etc.
 *
 * White corner fix: keep the outer container transparent and clip the surface.
 * A white container behind a dark rounded header (form-shared-header) shows as
 * white triangles at the corners.
 */
.mat-mdc-dialog-container {
  --mdc-dialog-container-shape: 12px;
  --mdc-dialog-container-color: transparent;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mat-mdc-dialog-container .mdc-dialog__container {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}
.mat-mdc-dialog-container .mdc-dialog__surface,
.mat-mdc-dialog-container .mat-mdc-dialog-surface {
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff;
}

.cdk-overlay-pane.slip-selection-dialog {
  width: 95vw !important;
  max-width: 1600px !important;
  max-height: 85vh !important;
  height: 85vh !important;
  min-height: 400px !important;
}

.slip-selection-dialog .mat-mdc-dialog-container,
.mat-mdc-dialog-container.slip-selection-dialog {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
}
.slip-selection-dialog .mat-mdc-dialog-container .mdc-dialog__surface,
.slip-selection-dialog .mat-mdc-dialog-container .mat-mdc-dialog-surface,
.mat-mdc-dialog-container.slip-selection-dialog .mdc-dialog__surface,
.mat-mdc-dialog-container.slip-selection-dialog .mat-mdc-dialog-surface {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.cdk-overlay-pane.completion-return-dialog {
  max-width: 32rem !important;
}

.completion-return-dialog .mat-mdc-dialog-container,
.mat-mdc-dialog-container.completion-return-dialog {
  background: transparent !important;
  box-shadow: none !important;
}
.completion-return-dialog .mat-mdc-dialog-container .mdc-dialog__surface,
.completion-return-dialog .mat-mdc-dialog-container .mat-mdc-dialog-surface,
.mat-mdc-dialog-container.completion-return-dialog .mdc-dialog__surface,
.mat-mdc-dialog-container.completion-return-dialog .mat-mdc-dialog-surface {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
}

.cdk-overlay-pane.docusign-signing-dialog-panel {
  height: 98vh !important;
  max-height: 98vh !important;
}

.docusign-signing-dialog-panel .mat-mdc-dialog-container,
.mat-mdc-dialog-container.docusign-signing-dialog-panel {
  height: 100% !important;
  max-height: 100% !important;
}
.docusign-signing-dialog-panel .mat-mdc-dialog-container .mdc-dialog__surface,
.mat-mdc-dialog-container.docusign-signing-dialog-panel .mdc-dialog__surface {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.docusign-signing-dialog-panel .mat-mdc-dialog-container .mat-mdc-dialog-content,
.mat-mdc-dialog-container.docusign-signing-dialog-panel .mat-mdc-dialog-content {
  flex: 1 1 auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.cdk-overlay-pane.client-record-dialog {
  max-width: 1400px !important;
}

.client-record-dialog .mat-mdc-dialog-container,
.mat-mdc-dialog-container.client-record-dialog {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
}
.client-record-dialog .mat-mdc-dialog-container .mdc-dialog__surface,
.client-record-dialog .mat-mdc-dialog-container .mat-mdc-dialog-surface,
.mat-mdc-dialog-container.client-record-dialog .mdc-dialog__surface,
.mat-mdc-dialog-container.client-record-dialog .mat-mdc-dialog-surface {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/**
 * Shared add button / primary action button styles
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.add-button,
.add-button-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}
.add-button:hover,
.add-button-header:hover {
  background: #1e293b;
}
.add-button mat-icon,
.add-button i-lucide,
.add-button-header mat-icon,
.add-button-header i-lucide {
  color: white;
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.add-button-header {
  padding: 12px 16px;
}

/**
 * Shared page header card (title + description + action button)
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.page-header-card,
.staff-header,
.content-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 16px 24px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.page-header-card .header-title,
.staff-header .header-title,
.content-header-card .header-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.page-header-card .header-description,
.staff-header .header-description,
.content-header-card .header-description {
  font-size: 12px;
  color: #64748b;
}

/**
 * Shared custom toggle switch styles
 */
.custom-toggle {
  position: relative;
  width: 48px;
  height: 24px;
  border: none;
  border-radius: 9999px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
  outline: none;
  flex-shrink: 0;
  /* Red variant for destructive/void states */
}
.custom-toggle:hover {
  opacity: 0.9;
}
.custom-toggle.active {
  background: #10b981;
}
.custom-toggle.active.danger {
  background: #ef4444;
}
.custom-toggle .toggle-slider {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}
.custom-toggle.active .toggle-slider {
  transform: translateX(24px);
}

/**
 * Shared inline filter styles for table toolbars and pages
 * Use .inline-filters-container as a wrapper
 */
/**
 * Shared Styles Entry Point
 * Import this in your app's styles.scss to use shared styles
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared SCSS Mixins
 * Reusable style patterns across all Angular apps
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
/**
 * Shared Utility Classes
 * Common utility classes for consistent styling
 */
/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.container {
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: #f8fafc;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-form {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

/**
 * Primary action buttons — #0f172a (slate-900) across portal + customer.
 * Applies to Angular Material buttons with color="primary".
 */
.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-container-color: #0f172a;
}

.mat-mdc-raised-button.mat-primary:hover:not(:disabled) {
  --mdc-protected-button-container-color: #1e293b;
  --mat-protected-button-container-color: #1e293b;
}

.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-filled-button.mat-primary {
  --mdc-filled-button-container-color: #0f172a;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-container-color: #0f172a;
}

.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled),
.mat-mdc-filled-button.mat-primary:hover:not(:disabled) {
  --mdc-filled-button-container-color: #1e293b;
  --mat-filled-button-container-color: #1e293b;
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #0f172a;
  --mdc-outlined-button-outline-color: #0f172a;
}

.mat-mdc-button.mat-primary:not(.mat-mdc-raised-button):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button) {
  --mdc-text-button-label-text-color: #0f172a;
}

a.mat-mdc-raised-button.mat-primary,
a.mat-mdc-unelevated-button.mat-primary {
  --mdc-protected-button-container-color: #0f172a;
  --mdc-filled-button-container-color: #0f172a;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.status-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: white;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.status-tab:hover {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}
.status-tab.active {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
}
.status-tab.status-tab-prospective.active, .status-tab.status-tab-new.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
.status-tab.status-tab-contracted.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-terminated.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}
.status-tab.status-tab-occupied.active {
  border-color: #2563eb;
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-tab.status-tab-vacant.active, .status-tab.status-tab-available.active {
  border-color: #059669;
  background: #ecfdf5;
  color: #059669;
}
.status-tab.status-tab-void.active {
  border-color: #64748b;
  background: #f1f5f9;
  color: #475569;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.tab-badge.tab-badge-red {
  background: #dc2626;
  color: white;
}
.tab-badge.tab-badge-green {
  background: #059669;
  color: white;
}
.tab-badge.tab-badge-neutral {
  background: #e2e8f0;
  color: #475569;
}
.tab-badge.tab-badge-blue {
  background: #2563eb;
  color: white;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.active, .status-badge.contracted {
  background-color: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.status-badge.inactive, .status-badge.terminated {
  background-color: #f1f5f9;
  color: #475569;
}
.status-badge.prospective, .status-badge.new {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.status-badge.occupied {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1e40af;
}
.status-badge.vacant {
  background-color: rgba(5, 150, 105, 0.1);
  color: #065f46;
}
.status-badge.void {
  background-color: #f1f5f9;
  color: #475569;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.location-temporary {
  display: inline;
  color: #92400e;
  font-weight: 600;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .table-toolbar {
    flex-wrap: wrap;
  }
}
.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}
.table-toolbar .toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.table-toolbar .toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 220px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 0 !important;
}
.table-toolbar .toolbar-left .search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  height: 18px;
  width: 18px;
  pointer-events: none;
}
.table-toolbar .toolbar-left .search-wrapper .search-input {
  width: 100%;
  padding: 0 12px 0 36px !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  background: white;
  transition: all 0.2s;
  height: 36px !important;
  box-sizing: border-box;
}
.table-toolbar .toolbar-left .search-wrapper .search-input::placeholder {
  color: #94a3b8;
}
.table-toolbar .toolbar-left .search-wrapper .search-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 1px #0ea5e9;
}
.table-toolbar .toolbar-left .status-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border-bottom: none;
  background: transparent;
  flex-shrink: 1;
  min-width: 0;
}
.table-toolbar .toolbar-right {
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.table-toolbar.table-toolbar--compact {
  padding: 8px 12px;
  gap: 8px;
}
.table-toolbar.table-toolbar--compact .toolbar-left {
  gap: 8px;
  min-width: 0;
}
.table-toolbar.table-toolbar--compact .search-wrapper {
  max-width: 180px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .status-tabs {
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar {
  height: 4px;
}
.table-toolbar.table-toolbar--compact .status-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-toolbar.table-toolbar--compact .status-tab {
  padding: 0 6px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.table-toolbar.table-toolbar--compact .tab-badge {
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}

.inline-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.table-inline-filters-row {
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.table-inline-filters-row .filter-group label {
  display: none;
}
.table-inline-filters-row .filter-group .filter-input {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.table-inline-filters-row .filter-group .filter-input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}
.table-inline-filters-row .filter-group .filter-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.table-inline-filters-row .btn-clear-filters {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.table-inline-filters-row .btn-clear-filters:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
}
.btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-secondary:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
.btn-secondary mat-spinner {
  margin-right: 4px;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #16a34a;
  border: 1px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-success:hover:not(:disabled) {
  background: #15803d;
}
.btn-success:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-success:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-success mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.page-management-container {
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/**
 * Shared Design System Variables
 * Used across all Angular apps in the monorepo
 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px;
  flex: 1;
}

.table-container {
  min-height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.data-table {
  width: 100%;
  font-size: 12px;
  color: #475569;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
  background: transparent;
}
.data-table th .sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 0.2s;
  width: 100%;
  text-align: left;
}
.data-table th .sortable-header:hover {
  color: #334155;
}
.data-table th .sortable-header i-lucide,
.data-table th .sortable-header mat-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.data-table th .sortable-header mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.data-table th .column-header-filterable {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.data-table th .column-header-filterable .sortable-header {
  flex: 1;
}
.data-table th .column-header-filterable .header-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.data-table th .column-header-filterable .header-filter-button:hover {
  background: #f1f5f9;
  color: #0284c7;
}
.data-table th .column-header-filterable .header-filter-button mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.data-table td {
  color: #475569;
  font-size: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
}
.data-table td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.data-table tbody tr,
.data-table tr.mat-row {
  transition: background 0.2s;
}
.data-table tbody tr:hover,
.data-table tr.mat-row:hover {
  background-color: #f8fafc;
}
.data-table tbody tr:last-child td,
.data-table tr.mat-row:last-child td {
  border-bottom: none;
}
.data-table tbody tr.clickable-row,
.data-table tr.mat-row.clickable-row {
  cursor: pointer;
}
.data-table tbody tr.clickable-row:active,
.data-table tr.mat-row.clickable-row:active {
  background-color: #f1f5f9;
}
.data-table .text-right {
  text-align: right;
}
.data-table .actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.data-table .action-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}
.data-table .action-button.action-link {
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
}
.data-table .action-button.action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}
.data-table .no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #94a3b8;
}
.data-table .no-data-message mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #94a3b8;
}
.data-table .no-data-message p {
  margin: 0;
  font-size: 16px;
  color: #64748b;
}

.mat-paginator {
  border-top: 1px solid #e2e8f0;
  background: white;
  flex-shrink: 0;
}

.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #f1f5f9;
  color: #475569;
}
.type-badge.business {
  background-color: #e0f2fe;
  color: #0369a1;
}
.type-badge.boat-club {
  background-color: #fef3c7;
  color: #b45309;
}
.type-badge.boat-club-mark {
  width: 34px;
  min-width: 34px;
  height: 22px;
  min-height: 22px;
  line-height: 22px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.type-badge.boat-club-mark mat-icon {
  display: block;
  margin: 0;
}

.count-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e0f2fe;
  color: #0369a1;
  border: none;
  cursor: default;
}
.count-badge.count-badge-clickable {
  cursor: pointer;
  transition: all 0.2s;
}
.count-badge.count-badge-clickable:hover:not(:disabled) {
  background-color: #7dd3fc;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.count-badge.count-badge-clickable:active:not(:disabled) {
  transform: translateY(0);
}
.count-badge.count-badge-clickable:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-action-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #0284c7;
  text-decoration: none;
  margin-left: 8px;
}
.inline-action-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.inline-filters-container {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.inline-filters-container .filter-group {
  display: flex;
  flex-direction: column;
  position: relative;
}
.inline-filters-container .filter-group label {
  position: absolute;
  top: 6px;
  left: 12px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b; /* #64748b */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
.inline-filters-container .filter-group .filter-input,
.inline-filters-container .filter-group .filter-select {
  width: 100%;
  padding: 22px 12px 6px 12px;
  background: white;
  border: 1px solid #e2e8f0; /* #e2e8f0 */
  border-radius: 8px; /* $radius-lg */
  font-size: 14px; /* $font-size-sm */
  font-weight: 500;
  color: #334155;
  min-height: 48px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.inline-filters-container .filter-group .filter-input:focus,
.inline-filters-container .filter-group .filter-select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}
.inline-filters-container .filter-group .filter-input::placeholder,
.inline-filters-container .filter-group .filter-select::placeholder {
  color: #94a3b8;
}
.inline-filters-container .filter-group .filter-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  /* Custom SVG chevron for default select */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}
.inline-filters-container .filter-group input[type=date].filter-input {
  padding-right: 8px;
  font-family: inherit;
}
.inline-filters-container .btn-clear-filters {
  color: #64748b;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  padding: 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.inline-filters-container .btn-clear-filters:hover {
  color: #0f172a;
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.cdk-overlay-container {
  z-index: 1200;
}

.pos-transaction-success-dialog-panel .mat-mdc-dialog-container {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}
.pos-transaction-success-dialog-panel .mat-mdc-dialog-surface,
.pos-transaction-success-dialog-panel .mdc-dialog__surface {
  max-width: min(960px, 100vw - 32px);
  border-radius: 16px;
  overflow: hidden;
}

.mat-drawer-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Global Styles */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

.mat-paginator {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.success-snackbar,
.error-snackbar {
  --mdc-snackbar-container-color: transparent !important;
  --mat-mdc-snack-bar-button-color: transparent !important;
  --mat-snack-bar-button-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.success-snackbar .mdc-snackbar__surface,
.error-snackbar .mdc-snackbar__surface {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
.success-snackbar .mat-mdc-snack-bar-container,
.error-snackbar .mat-mdc-snack-bar-container {
  background: transparent !important;
  box-shadow: none !important;
}
.success-snackbar .mat-mdc-snack-bar-surface,
.error-snackbar .mat-mdc-snack-bar-surface {
  background-color: transparent !important;
  box-shadow: none !important;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
}
.page-header .header-left,
.page-header .header-title,
.page-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.page-header .header-left h1,
.page-header .header-left .page-title,
.page-header .header-title h1,
.page-header .header-title .page-title,
.page-header > div:first-child h1,
.page-header > div:first-child .page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.025em;
}
.page-header .header-left h1 mat-icon,
.page-header .header-left .page-title mat-icon,
.page-header .header-title h1 mat-icon,
.page-header .header-title .page-title mat-icon,
.page-header > div:first-child h1 mat-icon,
.page-header > div:first-child .page-title mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #0284c7;
}
.page-header .header-left p,
.page-header .header-left .page-subtitle,
.page-header .header-title p,
.page-header .header-title .page-subtitle,
.page-header > div:first-child p,
.page-header > div:first-child .page-subtitle {
  margin: 4px 0 0 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #64748b;
}
.page-header > h1,
.page-header > .page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.025em;
}
.page-header > h1 mat-icon,
.page-header > .page-title mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #0284c7;
}
.page-header > p,
.page-header > .page-subtitle {
  margin: 4px 0 0 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #64748b;
}

.page-container {
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
}

.page-full {
  width: 100%;
  padding: 30px;
}
/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/quill/dist/quill.snow.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************************************/
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}

/*# sourceMappingURL=quill.snow.css.map*/
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/quill-table-better/dist/quill-table-better.css?ngGlobalStyle ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
.ql-cell-selected-after,.ql-cell-selected::after,.ql-cell-focused::after{content:"";pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(158,207,250,.3)}.ql-table-border-shadow,.ql-table-select-container,.ql-table-dropdown-list,.ql-table-dropdown-properties-list,.ql-table-menus-container{border-radius:2px;border:1px solid #ccced1;background:#fff;box-shadow:0 1px 2px 1px rgba(0,0,0,.1490196078)}.ql-table-triangle-common,.ql-table-tooltip-error::before,.label-field-view-status::before,.ql-table-tooltip::before,.ql-table-triangle-down:not(.ql-table-triangle-none)::after,.ql-table-triangle-down:not(.ql-table-triangle-none)::before,.ql-table-triangle-up:not(.ql-table-triangle-none)::after,.ql-table-triangle-up:not(.ql-table-triangle-none)::before{position:absolute;left:50%;transform:translateX(-50%);content:"";border:10px solid rgba(0,0,0,0)}.ql-table-input-focus,.ql-table-color-container .color-picker .color-picker-select>.erase-container,.ql-table-selected,.ql-table-properties-form .ql-table-dropdown-selected,.ql-table-properties-form .ql-table-color-selected,.ql-table-input:focus,.ql-table-color-container .label-field-view-color .property-input:focus,.ql-table-properties-form .property-input:focus{border:1px solid #3779eb;box-shadow:0 0 0 3px #cae1fc}.ql-table-input,.ql-table-color-container .label-field-view-color .property-input,.ql-table-properties-form .property-input{width:80px;height:30px;border:1px solid #ccced1;outline:none;padding-left:6px;background:inherit}.ql-table-input:focus::placeholder,.ql-table-color-container .label-field-view-color .property-input:focus::placeholder,.ql-table-properties-form .property-input:focus::placeholder{color:rgba(0,0,0,0)}.ql-table-input:focus+label,.ql-table-color-container .label-field-view-color .property-input:focus+label,.ql-table-properties-form .property-input:focus+label{display:block}.ql-table-input:not(:placeholder-shown)+label,.ql-table-color-container .label-field-view-color .property-input:not(:placeholder-shown)+label,.ql-table-properties-form .property-input:not(:placeholder-shown)+label{display:block}.ql-table-temporary{display:none}.ql-table-center,.ql-table-select-container .ql-table-select-list,.ql-table-select-container,.ql-table-color-container .color-picker .color-picker-palette .color-picker-wrap .iro-container,.ql-table-color-container .color-picker,.ql-table-properties-form .properties-form-action-row>button,.ql-table-dropdown-list .ql-table-header-row,.ql-table-dropdown-properties-list .ql-table-header-row,.ql-operate-line-container{display:flex;justify-content:center;align-items:center}.ql-table-selected,.ql-table-properties-form .ql-table-dropdown-selected,.ql-table-properties-form .ql-table-color-selected{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAM1BMVEUAAAAyMjIyMjIiIiIyMjIyMjIyMjIyMjIxMTEyMjIyMjIyMjIwMDAzMzMxMTEwMDAzMzOYbpUsAAAAEXRSTlMA/XgF8HRua2fm2rI3rzk1Lf2cC1oAAAA8SURBVBjTY6AUsHKh8RnZ8PKZoHwBZhifHcLg5GVG4TPwsXAzQ/gwwAMUYWLkALIQIlxgPgLwc3JQ4h0Ae0ABBy2kuXoAAAAASUVORK5CYII=);background-repeat:no-repeat;background-size:16px;box-sizing:border-box}.ql-operate-line-container{position:absolute;z-index:10}.ql-operate-line-container .ql-operate-line{background-color:#0589f3}.ql-operate-block{position:absolute;z-index:10;border:1px solid #979797;cursor:nwse-resize}.ql-operate-block-move{cursor:crosshair;border:none}.ql-operate-drag-table{border:1px dashed #000;position:absolute}.ql-cell-focused{position:relative}.ql-cell-focused::after{border:1px solid #3779eb}.ql-cell-selected{position:relative}.ql-table-menus-container{position:absolute;display:flex;align-items:center;height:40px;width:fit-content;padding:4px;box-sizing:border-box;z-index:1}.ql-table-triangle-up:not(.ql-table-triangle-none)::before{bottom:-20px;border-top-color:rgba(0,0,0,.1490196078) !important}.ql-table-triangle-up:not(.ql-table-triangle-none)::after{bottom:-19px;border-top-color:#fff !important}.ql-table-triangle-down:not(.ql-table-triangle-none)::before{top:-20px;border-bottom-color:rgba(0,0,0,.1490196078) !important}.ql-table-triangle-down:not(.ql-table-triangle-none)::after{top:-19px;border-bottom-color:#fff !important}.label-field-view{position:relative}.label-field-view-input-wrapper{position:relative;height:100%}.label-field-view-input-wrapper>label{position:absolute;left:0;top:-50%;transform:translateY(50%) scale(0.75);color:#999;background:#fff;display:none}.label-field-view-status{max-width:160px;width:max-content}.label-field-view-error>input{border-color:#db3700 !important;animation:ql-table-input-shake .3s ease both}.label-field-view-error>input:focus{box-shadow:0 0 0 3px rgba(255,64,31,.3019607843) !important}.label-field-view-error>label{color:#db3700}.ql-table-dropdown,.ql-table-dropdown-properties{display:flex;height:100%;align-items:center;position:relative;padding:0 4px;cursor:pointer}.ql-table-dropdown:hover,.ql-table-dropdown-properties:hover{background:#f0f0f0}.ql-table-dropdown-text,.ql-table-dropdown-properties-text{flex:1;height:100%;margin-right:7px;display:flex;align-items:center}.ql-table-dropdown-list,.ql-table-dropdown-properties-list{position:absolute;left:0;bottom:0;transform:translateY(100%);margin:0;padding:0;width:170px;z-index:10}.ql-table-dropdown-list li,.ql-table-dropdown-properties-list li{list-style:none;line-height:30px;padding:0 10px;cursor:pointer}.ql-table-dropdown-list li:hover,.ql-table-dropdown-properties-list li:hover{background-color:#f0f0f0}.ql-table-dropdown-list .ql-table-header-row,.ql-table-dropdown-properties-list .ql-table-header-row{justify-content:space-between}.ql-table-dropdown-label,.ql-table-dropdown-properties-label{width:100%;min-width:100%;line-height:24px;font-weight:bold;margin-bottom:6px;display:block}.ql-table-tooltip-hover{display:flex;position:relative}.ql-table-tooltip-hover:hover .ql-table-tooltip{display:block}.ql-table-tooltip-hover:hover+.ql-table-tooltip{display:block}.ql-table-tooltip{font-size:12px;min-width:32px;line-height:20px;padding:6px;white-space:nowrap;color:#fff;text-align:center;word-wrap:break-word;background:rgba(0,0,0,.8509803922);border-radius:6px;position:absolute;z-index:11;left:50%;bottom:-10px;transform:translate(-50%, 100%)}.ql-table-tooltip::before{border-bottom-color:rgba(0,0,0,.8509803922) !important;top:-20px}.ql-table-tooltip:hover{display:block}.ql-table-tooltip-hidden{display:none !important}.ql-table-tooltip-error,.label-field-view-status{font-size:12px;min-width:32px;line-height:20px;padding:6px;white-space:nowrap;color:#fff;text-align:center;word-wrap:break-word;background:#db3700;border-radius:6px;position:absolute;z-index:11;left:50%;bottom:-10px;transform:translate(-50%, 100%);white-space:pre-wrap;z-index:9}.ql-table-tooltip-error::before,.label-field-view-status::before{border-bottom-color:#db3700 !important;top:-20px}.ql-table-tooltip-error:hover,.label-field-view-status:hover{display:block}.ql-table-tooltip-error-hidden{display:none !important}.ql-table-dropdown-properties{width:80px;height:30px;border:1px solid #ccced1;box-sizing:border-box}.ql-table-dropdown-properties:hover{background:none}.ql-table-properties-form{width:320px;position:absolute;left:50%;padding-bottom:8px;background:#fff;z-index:1;box-shadow:0 1px 2px 1px #ccced1}.ql-table-properties-form .properties-form-header{height:40px;line-height:40px;padding:0 12px;border-bottom:1px solid #ccced1;margin:0;box-sizing:border-box;color:#333;font-size:14px}.ql-table-properties-form .properties-form-row{display:flex;flex-wrap:wrap;padding:8px 12px;justify-content:space-between}.ql-table-properties-form .properties-form-row .ql-table-check-container{display:flex;border:1px solid #ccced1;align-items:center}.ql-table-properties-form .properties-form-row .ql-table-check-container .ql-table-tooltip-hover{padding:6px 10px;cursor:pointer}.ql-table-properties-form .properties-form-row .ql-table-check-container .ql-table-tooltip-hover:hover{background:#f0f0f0}.ql-table-properties-form .properties-form-row .ql-table-check-container .ql-table-btns-checked{background:#f0f7ff}.ql-table-properties-form .properties-form-row .ql-table-check-container .ql-table-btns-checked>svg path{stroke:#2977ff}.ql-table-properties-form .properties-form-row-full .ql-table-color-container{width:100%}.ql-table-properties-form .properties-form-row-full .ql-table-color-container .property-input{width:100%}.ql-table-properties-form .properties-form-action-row{display:flex;justify-content:space-around;padding:0 12px}.ql-table-properties-form .properties-form-action-row>button{background:#fff;outline:none;border:none;height:30px;cursor:pointer;flex:1}.ql-table-properties-form .properties-form-action-row>button>span{margin:0 2px;display:flex}.ql-table-properties-form .properties-form-action-row>button:hover{background:#f0f0f0}.ql-table-properties-form .properties-form-action-row>button[disabled]{background-color:rgba(0,0,0,0)}.ql-table-properties-form .ql-table-color-selected{background-position:center}.ql-table-properties-form .ql-table-dropdown-selected{background-position:calc(100% - 10px) center}.ql-table-color-container{border:1px solid #ccced1;height:30px;box-sizing:border-box;display:flex}.ql-table-color-container .label-field-view-color{flex:1}.ql-table-color-container .label-field-view-color .property-input{border:1px solid rgba(0,0,0,0);height:100%}.ql-table-color-container .color-picker{width:30px;border-left:1px solid #ccced1;box-sizing:border-box;position:relative}.ql-table-color-container .color-picker .color-button{width:20px;height:20px;border:1px solid #ccced1;box-sizing:border-box;cursor:pointer;position:relative}.ql-table-color-container .color-picker .color-unselected{position:relative}.ql-table-color-container .color-picker .color-unselected::after{content:"";position:absolute;width:1px;height:26px;background:red;transform-origin:50%;transform:rotate(45deg);left:50%;top:-4px}.ql-table-color-container .color-picker .color-picker-select{position:absolute;right:0;bottom:0;width:156px;transform:translateY(100%);background:#fff;z-index:10;box-shadow:0 1px 2px 1px #ccced1}.ql-table-color-container .color-picker .color-picker-select .erase-container{display:flex;height:30px;align-items:center;padding:0 12px;cursor:pointer}.ql-table-color-container .color-picker .color-picker-select .erase-container:hover{background:#f0f0f0}.ql-table-color-container .color-picker .color-picker-select .erase-container>button{border:none;outline:none;background:inherit;height:100%;cursor:pointer}.ql-table-color-container .color-picker .color-picker-select>.erase-container{margin-bottom:4px}.ql-table-color-container .color-picker .color-picker-select .color-list{display:flex;flex-wrap:wrap;padding:0 12px;margin:0;justify-content:space-between}.ql-table-color-container .color-picker .color-picker-select .color-list>li{list-style:none;width:24px;height:24px;margin:2px 0;position:relative;cursor:pointer}.ql-table-color-container .color-picker .color-picker-select .color-list>li[data-color="#ffffff"]{border:1px solid #ccced1;box-sizing:border-box}.ql-table-color-container .color-picker .color-picker-palette{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;background:#fff}.ql-table-color-container .color-picker .color-picker-palette .color-picker-wrap{width:100%;height:100%;display:flex;flex-direction:column}.ql-table-color-container .color-picker .color-picker-palette .color-picker-wrap .iro-container{flex:1}.ql-table-disabled{background:#f2f2f2;pointer-events:none}.ql-table-button-disabled{background:#f2f2f2 !important;pointer-events:none}.ql-table-button-disabled svg .ql-fill{fill:#999 !important}.ql-table-button-disabled svg .ql-stroke{stroke:#999 !important}button.ql-table-better{position:relative}.ql-table-select-container{flex-direction:column;width:190px;padding:2px;position:absolute;top:24px;z-index:10;box-sizing:border-box}.ql-table-select-container .ql-table-select-list{flex-wrap:wrap}.ql-table-select-container .ql-table-select-label{width:100%;line-height:16px;text-align:center;color:rgba(34,47,62,.7019607843);margin-top:2px}.ql-table-select-container span{width:16px;height:16px;border:1px solid #000;box-sizing:border-box;margin:1px}ol.table-list-container{counter-reset:list-0}.ql-editor th{border:1px solid #000;padding:2px 5px;background:rgba(0,0,0,.0509803922)}.ql-table-divider{background:#ccced1;height:1px;width:100%}.ql-table-switch{position:relative;display:inline-block;width:28px;height:16px}.ql-table-switch .ql-table-switch-inner{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:.4s;border-radius:8px}.ql-table-switch .ql-table-switch-inner:before{content:"";position:absolute;height:12px;width:12px;left:2px;top:50%;transform:translateY(-50%);background:#fff;transition:.4s;border-radius:50%}.ql-table-switch .ql-table-switch-inner[aria-checked=true]{background:#2196f3}.ql-table-switch .ql-table-switch-inner[aria-checked=true]:before{transform:translate(12px, -50%)}@keyframes ql-table-input-shake{20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}}


/*# sourceMappingURL=styles.css.map*/