/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/core.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
html.ios{--ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif}html.md{--ion-default-font: "Roboto", "Helvetica Neue", sans-serif}html{--ion-default-dynamic-font: -apple-system-body;--ion-font-family: var(--ion-default-font)}body{background:var(--ion-background-color)}body.backdrop-no-scroll{overflow:hidden}html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,html.ios ion-modal ion-footer ion-toolbar:first-of-type{padding-top:6px}html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type{padding-bottom:6px}html.ios ion-modal ion-toolbar{padding-right:calc(var(--ion-safe-area-right) + 8px);padding-left:calc(var(--ion-safe-area-left) + 8px)}@media screen and (min-width: 768px){html.ios ion-modal.modal-card:first-of-type{--backdrop-opacity: 0.18}}ion-modal.modal-default.show-modal~ion-modal.modal-default{--backdrop-opacity: 0;--box-shadow: none}html.ios ion-modal.modal-card .ion-page{border-top-left-radius:var(--border-radius)}.ion-color-primary{--ion-color-base: var(--ion-color-primary, #3880ff) !important;--ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;--ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;--ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important}.ion-color-secondary{--ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;--ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;--ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;--ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important}.ion-color-tertiary{--ion-color-base: var(--ion-color-tertiary, #5260ff) !important;--ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;--ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;--ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important}.ion-color-success{--ion-color-base: var(--ion-color-success, #2dd36f) !important;--ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;--ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;--ion-color-tint: var(--ion-color-success-tint, #42d77d) !important}.ion-color-warning{--ion-color-base: var(--ion-color-warning, #ffc409) !important;--ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;--ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;--ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important}.ion-color-danger{--ion-color-base: var(--ion-color-danger, #eb445a) !important;--ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;--ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;--ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important}.ion-color-light{--ion-color-base: var(--ion-color-light, #f4f5f8) !important;--ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;--ion-color-contrast: var(--ion-color-light-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;--ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important}.ion-color-medium{--ion-color-base: var(--ion-color-medium, #92949c) !important;--ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;--ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-medium-shade, #808289) !important;--ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important}.ion-color-dark{--ion-color-base: var(--ion-color-dark, #222428) !important;--ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;--ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;--ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important}.ion-page{left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:column;justify-content:space-between;contain:layout size style;z-index:0}ion-modal>.ion-page{position:relative;contain:layout style;height:100%}.split-pane-visible>.ion-page.split-pane-main{position:relative}ion-route,ion-route-redirect,ion-router,ion-select-option,ion-nav-controller,ion-menu-controller,ion-action-sheet-controller,ion-alert-controller,ion-loading-controller,ion-modal-controller,ion-picker-controller,ion-popover-controller,ion-toast-controller,.ion-page-hidden{display:none !important}.ion-page-invisible{opacity:0}.can-go-back>ion-header ion-back-button{display:block}html.plt-ios.plt-hybrid,html.plt-ios.plt-pwa{--ion-statusbar-padding: 20px}@supports(padding-top: 20px){html{--ion-safe-area-top: var(--ion-statusbar-padding)}}@supports(padding-top: env(safe-area-inset-top)){html{--ion-safe-area-top: env(safe-area-inset-top);--ion-safe-area-bottom: env(safe-area-inset-bottom);--ion-safe-area-left: env(safe-area-inset-left);--ion-safe-area-right: env(safe-area-inset-right)}}ion-card.ion-color .ion-inherit-color,ion-card-header.ion-color .ion-inherit-color{color:inherit}.menu-content{transform:translate3d(0,  0,  0)}.menu-content-open{cursor:pointer;touch-action:manipulation;pointer-events:none;overflow-y:hidden}.menu-content-open ion-content{--overflow: hidden}.menu-content-open .ion-content-scroll-host{overflow:hidden}.ios .menu-content-reveal{box-shadow:-8px 0 42px rgba(0,0,0,.08)}[dir=rtl].ios .menu-content-reveal{box-shadow:8px 0 42px rgba(0,0,0,.08)}.md .menu-content-reveal{box-shadow:4px 0px 16px rgba(0,0,0,.18)}.md .menu-content-push{box-shadow:4px 0px 16px rgba(0,0,0,.18)}ion-accordion-group.accordion-group-expand-inset>ion-accordion:first-of-type{border-top-left-radius:8px;border-top-right-radius:8px}ion-accordion-group.accordion-group-expand-inset>ion-accordion:last-of-type{border-bottom-left-radius:8px;border-bottom-right-radius:8px}ion-accordion-group>ion-accordion:last-of-type ion-item[slot=header]{--border-width: 0px}ion-accordion.accordion-animated>[slot=header] .ion-accordion-toggle-icon{transition:300ms transform cubic-bezier(0.25, 0.8, 0.5, 1)}@media(prefers-reduced-motion: reduce){ion-accordion .ion-accordion-toggle-icon{transition:none !important}}ion-accordion.accordion-expanding>[slot=header] .ion-accordion-toggle-icon,ion-accordion.accordion-expanded>[slot=header] .ion-accordion-toggle-icon{transform:rotate(180deg)}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-previous ion-item[slot=header]{--border-width: 0px;--inner-border-width: 0px}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanding:first-of-type,ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanded:first-of-type{margin-top:0}ion-input input::-webkit-date-and-time-value{text-align:start}.ion-datetime-button-overlay{--width: fit-content;--height: fit-content}.ion-datetime-button-overlay ion-datetime.datetime-grid{width:320px;min-height:320px}.popover-viewport:has(>ion-content){overflow:hidden}@supports not selector(:has(> ion-content)){.popover-viewport{overflow:hidden}}/*# sourceMappingURL=core.css.map */

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/normalize.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
audio,canvas,progress,video{vertical-align:baseline}audio:not([controls]){display:none;height:0}b,strong{font-weight:bold}img{max-width:100%}hr{height:1px;border-width:0;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}label,input,select,textarea{font-family:inherit;line-height:normal}textarea{overflow:auto;height:auto;font:inherit;color:inherit}textarea::placeholder{padding-left:2px}form,input,optgroup,select{margin:0;font:inherit;color:inherit}html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}a,a div,a span,a ion-icon,a ion-label,button,button div,button span,button ion-icon,button ion-label,.ion-tappable,[tappable],[tappable] div,[tappable] span,[tappable] ion-icon,[tappable] ion-label,input,textarea{touch-action:manipulation}a ion-label,button ion-label{pointer-events:none}button{padding:0;border:0;border-radius:0;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:1;text-transform:none;cursor:pointer;-webkit-appearance:button}[tappable]{cursor:pointer}a[disabled],button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*# sourceMappingURL=normalize.css.map */

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/structure.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}html:not(.hydrated) body{display:none}html.ion-ce body{display:block}html.plt-pwa{height:100vh}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:fixed;width:100%;max-width:100%;height:100%;max-height:100%;transform:translateZ(0);text-rendering:optimizeLegibility;overflow:hidden;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;overscroll-behavior-y:none;-webkit-text-size-adjust:none;text-size-adjust:none}/*# sourceMappingURL=structure.css.map */

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/typography.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
html{font-family:var(--ion-font-family)}@supports(-webkit-touch-callout: none){html{font:var(--ion-dynamic-font, 16px var(--ion-font-family))}}a{background-color:transparent;color:var(--ion-color-primary, #3880ff)}h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:10px;font-weight:500;line-height:1.2}h1{margin-top:20px;font-size:1.625rem}h2{margin-top:18px;font-size:1.5rem}h3{font-size:1.375rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}/*# sourceMappingURL=typography.css.map */

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/@ionic/angular/css/display.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
.ion-hide{display:none !important}.ion-hide-up{display:none !important}.ion-hide-down{display:none !important}@media(min-width: 576px){.ion-hide-sm-up{display:none !important}}@media(max-width: 575.98px){.ion-hide-sm-down{display:none !important}}@media(min-width: 768px){.ion-hide-md-up{display:none !important}}@media(max-width: 767.98px){.ion-hide-md-down{display:none !important}}@media(min-width: 992px){.ion-hide-lg-up{display:none !important}}@media(max-width: 991.98px){.ion-hide-lg-down{display:none !important}}@media(min-width: 1200px){.ion-hide-xl-up{display:none !important}}@media(max-width: 1199.98px){.ion-hide-xl-down{display:none !important}}/*# sourceMappingURL=display.css.map */

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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]!./src/global.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */
:root {
  --ccat1: #3DCE85;
  --ccat1-rgb: 61, 206, 133;
  --ccat2: #6599FB;
  --ccat2-rgb: 101, 153, 251;
  --ccat3: #7F7127;
  --ccat3-rgb: 127, 113, 39;
  --ccat4: #CDCE3D;
  --ccat4-rgb: 205, 206, 61;
  --ccat5: #E4B1F6;
  --ccat5-rgb: 228, 177, 246;
  --ccat6: #EBF348;
  --ccat6-rgb: 235, 243, 72;
  --ccat7: #FF6403;
  --ccat7-rgb: 255, 100, 3;
  --ccat8: #FFC354;
  --ccat8-rgb: 255, 195, 84;
  --ccat9: #893BFF;
  --ccat9-rgb: 137, 59, 255;
  --ccat10: #005049;
  --ccat10-rgb: 0, 80, 73;
  --ccat11: #00817A;
  --ccat11-rgb: 0, 129, 122;
  --ccat12: #728663;
  --ccat12-rgb: 114, 134, 99;
}

.color-category-chip {
  color: white;
}
.color-category-chip.ccat1 {
  background-color: var(--ccat1);
}
.color-category-chip.ccat2 {
  background-color: var(--ccat2);
}
.color-category-chip.ccat3 {
  background-color: var(--ccat3);
}
.color-category-chip.ccat4 {
  background-color: var(--ccat4);
}
.color-category-chip.ccat5 {
  background-color: var(--ccat5);
}
.color-category-chip.ccat6 {
  background-color: var(--ccat6);
  color: #333;
}
.color-category-chip.ccat7 {
  background-color: var(--ccat7);
}
.color-category-chip.ccat8 {
  background-color: var(--ccat8);
}
.color-category-chip.ccat9 {
  background-color: var(--ccat9);
}
.color-category-chip.ccat10 {
  background-color: var(--ccat10);
  color: #333;
}
.color-category-chip.ccat11 {
  background-color: var(--ccat11);
}
.color-category-chip.ccat12 {
  background-color: var(--ccat12);
}

.color-preview {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.color-preview.ccat1 {
  background-color: var(--ccat1);
}
.color-preview.ccat2 {
  background-color: var(--ccat2);
}
.color-preview.ccat3 {
  background-color: var(--ccat3);
}
.color-preview.ccat4 {
  background-color: var(--ccat4);
}
.color-preview.ccat5 {
  background-color: var(--ccat5);
}
.color-preview.ccat6 {
  background-color: var(--ccat6);
}
.color-preview.ccat7 {
  background-color: var(--ccat7);
}
.color-preview.ccat8 {
  background-color: var(--ccat8);
}
.color-preview.ccat9 {
  background-color: var(--ccat9);
}
.color-preview.ccat10 {
  background-color: var(--ccat10);
}
.color-preview.ccat11 {
  background-color: var(--ccat11);
}
.color-preview.ccat12 {
  background-color: var(--ccat12);
}

/** Ionic CSS Variables **/
:root {
  --ion-background-color: var(--ion-color-light);
  --ion-background-color-rgb: var(--ion-color-light-rgb);
  --ion-text-color: var(--ion-color-dark);
  --ion-text-color-rgb: var(--ion-color-dark-rgb);
  --ion-color-primary: #0054e9;
  --ion-color-primary-rgb: 0, 84, 233;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #004acd;
  --ion-color-primary-tint: #1a65eb;
  --ion-color-primarylight: #ecf3fc;
  --ion-color-primarylight-rgb: 236, 243, 252;
  --ion-color-primarylight-contrast: var(--ion-color-secondary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-primarylight-shade: #a7bde3;
  --ion-color-primarylight-tint: #cadaf5;
  --ion-color-secondary: #0C2CB5;
  --ion-color-secondary-rgb: 12, 44, 181;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0b279f;
  --ion-color-secondary-tint: #2441bc;
  --ion-color-secondarylight: #cdd4f4;
  --ion-color-secondarylight-rgb: 205, 212, 244;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #96a6e8;
  --ion-color-secondarylight-tint: #b3c3f6;
  --ion-color-tertiary: #6030ff;
  --ion-color-tertiary-rgb: 96, 48, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #542ae0;
  --ion-color-tertiary-tint: #7045ff;
  --ion-color-quaternary: #ff6b47;
  --ion-color-quaternary-rgb: 255, 107, 71;
  --ion-color-quaternary-contrast: #ffffff;
  --ion-color-quaternary-contrast-rgb: 255, 255, 255;
  --ion-color-quaternary-shade: #e05e3f;
  --ion-color-quaternary-tint: #ff7a59;
  --ion-color-success: #00c29f;
  --ion-color-success-rgb: 0, 194, 159;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #00ab8c;
  --ion-color-success-tint: #1ac8a9;
  --ion-color-warning: #ffda1f;
  --ion-color-warning-rgb: 255, 218, 31;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0c01b;
  --ion-color-warning-tint: #ffde35;
  --ion-color-danger: #dc1354;
  --ion-color-danger-rgb: 220, 19, 84;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #c2114a;
  --ion-color-danger-tint: #e02b65;
  --ion-color-light: #FDFDFF;
  --ion-color-light-rgb: 253, 253, 255;
  --ion-color-light-contrast: var(--ion-color-primary);
  --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-light-shade: #E9E8EC;
  --ion-color-light-shade-rgb: 233, 232, 236;
  --ion-color-light-tint: #F8F8FA;
  --ion-color-light-tint-rgb: 248, 248, 250;
  --ion-color-medium: #6B6B73;
  --ion-color-medium-rgb: 107, 107, 115;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #5e5e65;
  --ion-color-medium-tint: #7a7a81;
  --ion-color-dark: #2D2D30;
  --ion-color-dark-rgb: 45, 45, 48;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #28282a;
  --ion-color-dark-shade-rgb: 40, 40, 42;
  --ion-color-dark-tint: #424245;
  --ion-color-dark-tint-rgb: 66, 66, 69;
  --ion-text-color-step-50: #393939;
  --ion-text-color-step-100: #434344;
  --ion-text-color-step-150: #4d4d4e;
  --ion-text-color-step-200: #575758;
  --ion-text-color-step-250: #616162;
  --ion-text-color-step-300: #6b6b6d;
  --ion-text-color-step-350: #757577;
  --ion-text-color-step-400: #7f7f81;
  --ion-text-color-step-450: #89898b;
  --ion-text-color-step-500: #939496;
  --ion-text-color-step-550: #9c9ea0;
  --ion-text-color-step-600: #a6a8aa;
  --ion-text-color-step-650: #b0b2b4;
  --ion-text-color-step-700: #babcbe;
  --ion-text-color-step-750: #c4c6c9;
  --ion-text-color-step-800: #ced0d3;
  --ion-text-color-step-850: #d8dadd;
  --ion-text-color-step-900: #e2e4e8;
  --ion-text-color-step-950: #eceef2;
  --ion-background-color-step-50: #eceef2;
  --ion-background-color-step-100: #e2e4e8;
  --ion-background-color-step-150: #d8dadd;
  --ion-background-color-step-200: #ced0d3;
  --ion-background-color-step-250: #c4c6c9;
  --ion-background-color-step-300: #babcbe;
  --ion-background-color-step-350: #b0b2b4;
  --ion-background-color-step-400: #a6a8aa;
  --ion-background-color-step-450: #9c9ea0;
  --ion-background-color-step-500: #939496;
  --ion-background-color-step-550: #89898b;
  --ion-background-color-step-600: #7f7f81;
  --ion-background-color-step-650: #757577;
  --ion-background-color-step-700: #6b6b6d;
  --ion-background-color-step-750: #616162;
  --ion-background-color-step-800: #575758;
  --ion-background-color-step-850: #4d4d4e;
  --ion-background-color-step-900: #434344;
  --ion-background-color-step-950: #393939;
  --border: 0.5px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-light-shade, rgba(0, 0, 0, 0.6))));
  --ion-border-color: var(--ion-color-light-shade);
  /* Soft, solid background equivalents for former low-alpha overlays */
  --ion-color-primary-soft: #ecf3fc; /* aligns with primarylight */
  --ion-color-warning-soft: #fff5cc;
  --ion-color-danger-soft: #fbe4ed;
  --ion-color-tertiary-soft: #eee9ff;
  --ion-color-medium-soft: #eeeff2;
  --ion-color-light-soft: #f4f4f8;
}

html {
  /* 
   * For more information on dynamic font scaling, visit the documentation:
   * https://ionicframework.com/docs/layout/dynamic-font-scaling
   */
  --ion-dynamic-font: var(--ion-default-dynamic-font);
}

/* Dark theme variable remapping (Ionic 7-compatible) */
:root.dark {
  color-scheme: dark;
  --ion-color-primary: #2c92ff;
  --ion-color-primary-rgb: 44, 146, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #4aa3ff;
  --ion-color-primary-tint: #1f8aff;
  --ion-color-primarylight: #4d5b6e;
  --ion-color-primarylight-rgb: 77, 91, 110;
  --ion-color-primarylight-contrast: var(--ion-color-primary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-primarylight-shade: #5c6a7d;
  --ion-color-primarylight-tint: #4d6a86;
  --ion-color-secondary: #334ab0;
  --ion-color-secondary-rgb: 51, 74, 176;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #4f66cc;
  --ion-color-secondary-tint: #2b46d6;
  --ion-color-secondarylight: #494f68;
  --ion-color-secondarylight-rgb: 73, 79, 104;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #585e77;
  --ion-color-secondarylight-tint: #4b5a83;
  --ion-color-tertiary: #9474fe;
  --ion-color-tertiary-rgb: 148, 116, 254;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #a68dff;
  --ion-color-tertiary-tint: #8a63ff;
  --ion-color-quaternary: #d76245;
  --ion-color-quaternary-rgb: 255, 107, 71;
  --ion-color-quaternary-contrast: #ffffff;
  --ion-color-quaternary-contrast-rgb: 255, 255, 255;
  --ion-color-quaternary-shade: #e07b61;
  --ion-color-quaternary-tint: #ff6a40;
  --ion-color-success: #00c29f;
  --ion-color-success-rgb: 0, 194, 159;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #2fd1b7;
  --ion-color-success-tint: #00d1ad;
  --ion-color-warning: #ffda1f;
  --ion-color-warning-rgb: 255, 218, 31;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #ffe34f;
  --ion-color-warning-tint: #ffcf00;
  --ion-color-danger: #ff286c;
  --ion-color-danger-rgb: 255, 40, 108;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #ff4f8a;
  --ion-color-danger-tint: #ff2f78;
  --ion-color-dark: #FDFDFF;
  --ion-color-dark-rgb: 253, 253, 255;
  --ion-color-dark-contrast: var(--ion-color-light);
  --ion-color-dark-contrast-rgb: var(--ion-color-light-rgb);
  --ion-color-dark-shade: #FFFFFF;
  --ion-color-dark-shade-rgb: 255, 255, 255;
  --ion-color-dark-tint: #F3F6FF;
  --ion-color-dark-tint-rgb: 243, 246, 255;
  --ion-color-medium: #a9a9b6;
  --ion-color-medium-rgb: 169, 169, 182;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #bdbdd0;
  --ion-color-medium-tint: #c9c9e0;
  --ion-color-light: #2D2D30;
  --ion-color-light-rgb: 45, 45, 48;
  --ion-color-light-contrast: var(--ion-color-primary);
  --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-light-shade: #3a3a3f;
  --ion-color-light-shade-rgb: 58, 58, 63;
  --ion-color-light-tint: #1e1e21;
  --ion-color-light-tint-rgb: 47, 47, 49;
  /* Invert step scales by remapping to existing steps */
  --ion-text-color-step-950: #393939;
  --ion-text-color-step-900: #434344;
  --ion-text-color-step-850: #4d4d4e;
  --ion-text-color-step-800: #575758;
  --ion-text-color-step-750: #616162;
  --ion-text-color-step-700: #6b6b6d;
  --ion-text-color-step-650: #757577;
  --ion-text-color-step-600: #7f7f81;
  --ion-text-color-step-550: #89898b;
  --ion-text-color-step-500: #939496;
  --ion-text-color-step-450: #9c9ea0;
  --ion-text-color-step-400: #a6a8aa;
  --ion-text-color-step-350: #b0b2b4;
  --ion-text-color-step-300: #babcbe;
  --ion-text-color-step-250: #c4c6c9;
  --ion-text-color-step-200: #ced0d3;
  --ion-text-color-step-150: #d8dadd;
  --ion-text-color-step-100: #e2e4e8;
  --ion-text-color-step-950: #eceef2;
  --ion-background-color-step-950: #eceef2;
  --ion-background-color-step-900: #e2e4e8;
  --ion-background-color-step-850: #d8dadd;
  --ion-background-color-step-800: #ced0d3;
  --ion-background-color-step-750: #c4c6c9;
  --ion-background-color-step-700: #babcbe;
  --ion-background-color-step-650: #b0b2b4;
  --ion-background-color-step-600: #a6a8aa;
  --ion-background-color-step-550: #9c9ea0;
  --ion-background-color-step-500: #939496;
  --ion-background-color-step-450: #89898b;
  --ion-background-color-step-400: #7f7f81;
  --ion-background-color-step-350: #757577;
  --ion-background-color-step-300: #6b6b6d;
  --ion-background-color-step-250: #616162;
  --ion-background-color-step-200: #575758;
  --ion-background-color-step-150: #4d4d4e;
  --ion-background-color-step-100: #434344;
  --ion-background-color-step-50: #393939;
  --ion-color-step-950: #eceef2;
  --ion-color-step-900: #e2e4e8;
  --ion-color-step-850: #d8dadd;
  --ion-color-step-800: #ced0d3;
  --ion-color-step-750: #c4c6c9;
  --ion-color-step-700: #babcbe;
  --ion-color-step-650: #b0b2b4;
  --ion-color-step-600: #a6a8aa;
  --ion-color-step-550: #9c9ea0;
  --ion-color-step-500: #939496;
  --ion-color-step-450: #89898b;
  --ion-color-step-400: #7f7f81;
  --ion-color-step-350: #757577;
  --ion-color-step-300: #6b6b6d;
  --ion-color-step-250: #616162;
  --ion-color-step-200: #575758;
  --ion-color-step-150: #4d4d4e;
  --ion-color-step-100: #434344;
  --ion-color-step-50: #393939;
  /* Light variants used as soft surfaces in dark */
  --ion-color-primarylight: #4d5b6e;
  --ion-color-primarylight-rgb: 77, 91, 110;
  --ion-color-primarylight-contrast: var(--ion-color-primary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-primarylight-shade: #5c6a7d;
  --ion-color-primarylight-tint: #4d6a86;
  --ion-color-secondarylight: #494f68;
  --ion-color-secondarylight-rgb: 73, 79, 104;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #585e77;
  --ion-color-secondarylight-tint: #4b5a83;
  /* Soft tokens to existing surfaces */
  --ion-color-primary-soft: #223845;
  --ion-color-warning-soft: #54492e;
  --ion-color-danger-soft: #4e2c34;
  --ion-color-tertiary-soft: rgb(59, 50, 77);
  --ion-color-medium-soft: #333333;
  --ion-color-light-soft: #2d2d2d;
}

/* Explicit light override to win against system dark */
:root.light {
  color-scheme: light;
}

/* Honor OS preference by default; only when no explicit class is set */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    color-scheme: dark;
    --ion-color-primary: #2c92ff;
    --ion-color-primary-rgb: 44, 146, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #4aa3ff;
    --ion-color-primary-tint: #1f8aff;
    --ion-color-primarylight: #4d5b6e;
    --ion-color-primarylight-rgb: 77, 91, 110;
    --ion-color-primarylight-contrast: var(--ion-color-primary);
    --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-primarylight-shade: #5c6a7d;
    --ion-color-primarylight-tint: #4d6a86;
    --ion-color-secondary: #334ab0;
    --ion-color-secondary-rgb: 51, 74, 176;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #4f66cc;
    --ion-color-secondary-tint: #2b46d6;
    --ion-color-secondarylight: #494f68;
    --ion-color-secondarylight-rgb: 73, 79, 104;
    --ion-color-secondarylight-contrast: var(--ion-color-secondary);
    --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
    --ion-color-secondarylight-shade: #585e77;
    --ion-color-secondarylight-tint: #4b5a83;
    --ion-color-tertiary: #9474fe;
    --ion-color-tertiary-rgb: 148, 116, 254;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #a68dff;
    --ion-color-tertiary-tint: #8a63ff;
    --ion-color-quaternary: #d76245;
    --ion-color-quaternary-rgb: 255, 107, 71;
    --ion-color-quaternary-contrast: #ffffff;
    --ion-color-quaternary-contrast-rgb: 255, 255, 255;
    --ion-color-quaternary-shade: #e07b61;
    --ion-color-quaternary-tint: #ff6a40;
    --ion-color-success: #00c29f;
    --ion-color-success-rgb: 0, 194, 159;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #2fd1b7;
    --ion-color-success-tint: #00d1ad;
    --ion-color-warning: #ffda1f;
    --ion-color-warning-rgb: 255, 218, 31;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #ffe34f;
    --ion-color-warning-tint: #ffcf00;
    --ion-color-danger: #ff286c;
    --ion-color-danger-rgb: 255, 40, 108;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #ff4f8a;
    --ion-color-danger-tint: #ff2f78;
    --ion-color-dark: #FDFDFF;
    --ion-color-dark-rgb: 253, 253, 255;
    --ion-color-dark-contrast: var(--ion-color-primarylight);
    --ion-color-dark-contrast-rgb: var(--ion-color-primarylight-rgb);
    --ion-color-dark-shade: #FFFFFF;
    --ion-color-dark-shade-rgb: 255, 255, 255;
    --ion-color-dark-tint: #F3F6FF;
    --ion-color-dark-tint-rgb: 243, 246, 255;
    --ion-color-medium: #a9a9b6;
    --ion-color-medium-rgb: 169, 169, 182;
    --ion-color-medium-contrast: #ffffff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #bdbdd0;
    --ion-color-medium-tint: #c9c9e0;
    --ion-color-light: #2D2D30;
    --ion-color-light-rgb: 45, 45, 48;
    --ion-color-light-contrast: var(--ion-color-primary);
    --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-light-shade: #3a3a3f;
    --ion-color-light-shade-rgb: 58, 58, 63;
    --ion-color-light-tint: #1e1e21;
    --ion-color-light-tint-rgb: 47, 47, 49;
    /* Inverted step scales */
    /* Invert step scales by remapping to existing steps */
    --ion-text-color-step-950: #393939;
    --ion-text-color-step-900: #434344;
    --ion-text-color-step-850: #4d4d4e;
    --ion-text-color-step-800: #575758;
    --ion-text-color-step-750: #616162;
    --ion-text-color-step-700: #6b6b6d;
    --ion-text-color-step-650: #757577;
    --ion-text-color-step-600: #7f7f81;
    --ion-text-color-step-550: #89898b;
    --ion-text-color-step-500: #939496;
    --ion-text-color-step-450: #9c9ea0;
    --ion-text-color-step-400: #a6a8aa;
    --ion-text-color-step-350: #b0b2b4;
    --ion-text-color-step-300: #babcbe;
    --ion-text-color-step-250: #c4c6c9;
    --ion-text-color-step-200: #ced0d3;
    --ion-text-color-step-150: #d8dadd;
    --ion-text-color-step-100: #e2e4e8;
    --ion-text-color-step-50: #eceef2;
    --ion-background-color-step-950: #eceef2;
    --ion-background-color-step-900: #e2e4e8;
    --ion-background-color-step-850: #d8dadd;
    --ion-background-color-step-800: #ced0d3;
    --ion-background-color-step-750: #c4c6c9;
    --ion-background-color-step-700: #babcbe;
    --ion-background-color-step-650: #b0b2b4;
    --ion-background-color-step-600: #a6a8aa;
    --ion-background-color-step-550: #9c9ea0;
    --ion-background-color-step-500: #939496;
    --ion-background-color-step-450: #89898b;
    --ion-background-color-step-400: #7f7f81;
    --ion-background-color-step-350: #757577;
    --ion-background-color-step-300: #6b6b6d;
    --ion-background-color-step-250: #616162;
    --ion-background-color-step-200: #575758;
    --ion-background-color-step-150: #4d4d4e;
    --ion-background-color-step-100: #434344;
    --ion-background-color-step-50: #393939;
    --ion-color-step-950: #eceef2;
    --ion-color-step-900: #e2e4e8;
    --ion-color-step-850: #d8dadd;
    --ion-color-step-800: #ced0d3;
    --ion-color-step-750: #c4c6c9;
    --ion-color-step-700: #babcbe;
    --ion-color-step-650: #b0b2b4;
    --ion-color-step-600: #a6a8aa;
    --ion-color-step-550: #9c9ea0;
    --ion-color-step-500: #939496;
    --ion-color-step-450: #89898b;
    --ion-color-step-400: #7f7f81;
    --ion-color-step-350: #757577;
    --ion-color-step-300: #6b6b6d;
    --ion-color-step-250: #616162;
    --ion-color-step-200: #575758;
    --ion-color-step-150: #4d4d4e;
    --ion-color-step-100: #434344;
    --ion-color-step-50: #393939;
    /* Light variants and soft tokens */
    --ion-color-primarylight: var(--ion-color-primarylight-tint);
    --ion-color-primarylight-rgb: var(--ion-color-primarylight-tint-rgb);
    --ion-color-primarylight-contrast: var(--ion-color-primary);
    --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-primarylight-shade: var(--ion-color-primarylight);
    --ion-color-primarylight-tint: var(--ion-color-primarylight-shade);
    --ion-color-secondarylight: var(--ion-color-secondarylight-tint);
    --ion-color-secondarylight-rgb: var(--ion-color-secondarylight-tint-rgb);
    --ion-color-secondarylight-contrast: var(--ion-color-secondary);
    --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
    --ion-color-secondarylight-shade: var(--ion-color-secondarylight-shade);
    --ion-color-secondarylight-tint: var(--ion-color-secondarylight-shade);
    /* Soft tokens to existing surfaces */
    --ion-color-primary-soft: #223845;
    --ion-color-warning-soft: #54492e;
    --ion-color-danger-soft: #4e2c34;
    --ion-color-tertiary-soft: rgb(59, 50, 77);
    --ion-color-medium-soft: #333333;
    --ion-color-light-soft: #2d2d2d;
  }
}
:root {
  --ccat1: #3DCE85;
  --ccat1-rgb: 61, 206, 133;
  --ccat2: #6599FB;
  --ccat2-rgb: 101, 153, 251;
  --ccat3: #7F7127;
  --ccat3-rgb: 127, 113, 39;
  --ccat4: #CDCE3D;
  --ccat4-rgb: 205, 206, 61;
  --ccat5: #E4B1F6;
  --ccat5-rgb: 228, 177, 246;
  --ccat6: #EBF348;
  --ccat6-rgb: 235, 243, 72;
  --ccat7: #FF6403;
  --ccat7-rgb: 255, 100, 3;
  --ccat8: #FFC354;
  --ccat8-rgb: 255, 195, 84;
  --ccat9: #893BFF;
  --ccat9-rgb: 137, 59, 255;
  --ccat10: #005049;
  --ccat10-rgb: 0, 80, 73;
  --ccat11: #00817A;
  --ccat11-rgb: 0, 129, 122;
  --ccat12: #728663;
  --ccat12-rgb: 114, 134, 99;
}

.color-category-chip {
  color: white;
}
.color-category-chip.ccat1 {
  background-color: var(--ccat1);
}
.color-category-chip.ccat2 {
  background-color: var(--ccat2);
}
.color-category-chip.ccat3 {
  background-color: var(--ccat3);
}
.color-category-chip.ccat4 {
  background-color: var(--ccat4);
}
.color-category-chip.ccat5 {
  background-color: var(--ccat5);
}
.color-category-chip.ccat6 {
  background-color: var(--ccat6);
  color: #333;
}
.color-category-chip.ccat7 {
  background-color: var(--ccat7);
}
.color-category-chip.ccat8 {
  background-color: var(--ccat8);
}
.color-category-chip.ccat9 {
  background-color: var(--ccat9);
}
.color-category-chip.ccat10 {
  background-color: var(--ccat10);
  color: #333;
}
.color-category-chip.ccat11 {
  background-color: var(--ccat11);
}
.color-category-chip.ccat12 {
  background-color: var(--ccat12);
}

.color-preview {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.color-preview.ccat1 {
  background-color: var(--ccat1);
}
.color-preview.ccat2 {
  background-color: var(--ccat2);
}
.color-preview.ccat3 {
  background-color: var(--ccat3);
}
.color-preview.ccat4 {
  background-color: var(--ccat4);
}
.color-preview.ccat5 {
  background-color: var(--ccat5);
}
.color-preview.ccat6 {
  background-color: var(--ccat6);
}
.color-preview.ccat7 {
  background-color: var(--ccat7);
}
.color-preview.ccat8 {
  background-color: var(--ccat8);
}
.color-preview.ccat9 {
  background-color: var(--ccat9);
}
.color-preview.ccat10 {
  background-color: var(--ccat10);
}
.color-preview.ccat11 {
  background-color: var(--ccat11);
}
.color-preview.ccat12 {
  background-color: var(--ccat12);
}

/** Ionic CSS Variables **/
:root {
  --ion-background-color: var(--ion-color-light);
  --ion-background-color-rgb: var(--ion-color-light-rgb);
  --ion-text-color: var(--ion-color-dark);
  --ion-text-color-rgb: var(--ion-color-dark-rgb);
  --ion-color-primary: #0054e9;
  --ion-color-primary-rgb: 0, 84, 233;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #004acd;
  --ion-color-primary-tint: #1a65eb;
  --ion-color-primarylight: #ecf3fc;
  --ion-color-primarylight-rgb: 236, 243, 252;
  --ion-color-primarylight-contrast: var(--ion-color-secondary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-primarylight-shade: #a7bde3;
  --ion-color-primarylight-tint: #cadaf5;
  --ion-color-secondary: #0C2CB5;
  --ion-color-secondary-rgb: 12, 44, 181;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0b279f;
  --ion-color-secondary-tint: #2441bc;
  --ion-color-secondarylight: #cdd4f4;
  --ion-color-secondarylight-rgb: 205, 212, 244;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #96a6e8;
  --ion-color-secondarylight-tint: #b3c3f6;
  --ion-color-tertiary: #6030ff;
  --ion-color-tertiary-rgb: 96, 48, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #542ae0;
  --ion-color-tertiary-tint: #7045ff;
  --ion-color-quaternary: #ff6b47;
  --ion-color-quaternary-rgb: 255, 107, 71;
  --ion-color-quaternary-contrast: #ffffff;
  --ion-color-quaternary-contrast-rgb: 255, 255, 255;
  --ion-color-quaternary-shade: #e05e3f;
  --ion-color-quaternary-tint: #ff7a59;
  --ion-color-success: #00c29f;
  --ion-color-success-rgb: 0, 194, 159;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #00ab8c;
  --ion-color-success-tint: #1ac8a9;
  --ion-color-warning: #ffda1f;
  --ion-color-warning-rgb: 255, 218, 31;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0c01b;
  --ion-color-warning-tint: #ffde35;
  --ion-color-danger: #dc1354;
  --ion-color-danger-rgb: 220, 19, 84;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #c2114a;
  --ion-color-danger-tint: #e02b65;
  --ion-color-light: #FDFDFF;
  --ion-color-light-rgb: 253, 253, 255;
  --ion-color-light-contrast: var(--ion-color-primary);
  --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-light-shade: #E9E8EC;
  --ion-color-light-shade-rgb: 233, 232, 236;
  --ion-color-light-tint: #F8F8FA;
  --ion-color-light-tint-rgb: 248, 248, 250;
  --ion-color-medium: #6B6B73;
  --ion-color-medium-rgb: 107, 107, 115;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #5e5e65;
  --ion-color-medium-tint: #7a7a81;
  --ion-color-dark: #2D2D30;
  --ion-color-dark-rgb: 45, 45, 48;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #28282a;
  --ion-color-dark-shade-rgb: 40, 40, 42;
  --ion-color-dark-tint: #424245;
  --ion-color-dark-tint-rgb: 66, 66, 69;
  --ion-text-color-step-50: #393939;
  --ion-text-color-step-100: #434344;
  --ion-text-color-step-150: #4d4d4e;
  --ion-text-color-step-200: #575758;
  --ion-text-color-step-250: #616162;
  --ion-text-color-step-300: #6b6b6d;
  --ion-text-color-step-350: #757577;
  --ion-text-color-step-400: #7f7f81;
  --ion-text-color-step-450: #89898b;
  --ion-text-color-step-500: #939496;
  --ion-text-color-step-550: #9c9ea0;
  --ion-text-color-step-600: #a6a8aa;
  --ion-text-color-step-650: #b0b2b4;
  --ion-text-color-step-700: #babcbe;
  --ion-text-color-step-750: #c4c6c9;
  --ion-text-color-step-800: #ced0d3;
  --ion-text-color-step-850: #d8dadd;
  --ion-text-color-step-900: #e2e4e8;
  --ion-text-color-step-950: #eceef2;
  --ion-background-color-step-50: #eceef2;
  --ion-background-color-step-100: #e2e4e8;
  --ion-background-color-step-150: #d8dadd;
  --ion-background-color-step-200: #ced0d3;
  --ion-background-color-step-250: #c4c6c9;
  --ion-background-color-step-300: #babcbe;
  --ion-background-color-step-350: #b0b2b4;
  --ion-background-color-step-400: #a6a8aa;
  --ion-background-color-step-450: #9c9ea0;
  --ion-background-color-step-500: #939496;
  --ion-background-color-step-550: #89898b;
  --ion-background-color-step-600: #7f7f81;
  --ion-background-color-step-650: #757577;
  --ion-background-color-step-700: #6b6b6d;
  --ion-background-color-step-750: #616162;
  --ion-background-color-step-800: #575758;
  --ion-background-color-step-850: #4d4d4e;
  --ion-background-color-step-900: #434344;
  --ion-background-color-step-950: #393939;
  --border: 0.5px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-light-shade, rgba(0, 0, 0, 0.6))));
  --ion-border-color: var(--ion-color-light-shade);
  /* Soft, solid background equivalents for former low-alpha overlays */
  --ion-color-primary-soft: #ecf3fc; /* aligns with primarylight */
  --ion-color-warning-soft: #fff5cc;
  --ion-color-danger-soft: #fbe4ed;
  --ion-color-tertiary-soft: #eee9ff;
  --ion-color-medium-soft: #eeeff2;
  --ion-color-light-soft: #f4f4f8;
}

html {
  /* 
   * For more information on dynamic font scaling, visit the documentation:
   * https://ionicframework.com/docs/layout/dynamic-font-scaling
   */
  --ion-dynamic-font: var(--ion-default-dynamic-font);
}

/* Dark theme variable remapping (Ionic 7-compatible) */
:root.dark {
  color-scheme: dark;
  --ion-color-primary: #2c92ff;
  --ion-color-primary-rgb: 44, 146, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #4aa3ff;
  --ion-color-primary-tint: #1f8aff;
  --ion-color-primarylight: #4d5b6e;
  --ion-color-primarylight-rgb: 77, 91, 110;
  --ion-color-primarylight-contrast: var(--ion-color-primary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-primarylight-shade: #5c6a7d;
  --ion-color-primarylight-tint: #4d6a86;
  --ion-color-secondary: #334ab0;
  --ion-color-secondary-rgb: 51, 74, 176;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #4f66cc;
  --ion-color-secondary-tint: #2b46d6;
  --ion-color-secondarylight: #494f68;
  --ion-color-secondarylight-rgb: 73, 79, 104;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #585e77;
  --ion-color-secondarylight-tint: #4b5a83;
  --ion-color-tertiary: #9474fe;
  --ion-color-tertiary-rgb: 148, 116, 254;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #a68dff;
  --ion-color-tertiary-tint: #8a63ff;
  --ion-color-quaternary: #d76245;
  --ion-color-quaternary-rgb: 255, 107, 71;
  --ion-color-quaternary-contrast: #ffffff;
  --ion-color-quaternary-contrast-rgb: 255, 255, 255;
  --ion-color-quaternary-shade: #e07b61;
  --ion-color-quaternary-tint: #ff6a40;
  --ion-color-success: #00c29f;
  --ion-color-success-rgb: 0, 194, 159;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #2fd1b7;
  --ion-color-success-tint: #00d1ad;
  --ion-color-warning: #ffda1f;
  --ion-color-warning-rgb: 255, 218, 31;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #ffe34f;
  --ion-color-warning-tint: #ffcf00;
  --ion-color-danger: #ff286c;
  --ion-color-danger-rgb: 255, 40, 108;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #ff4f8a;
  --ion-color-danger-tint: #ff2f78;
  --ion-color-dark: #FDFDFF;
  --ion-color-dark-rgb: 253, 253, 255;
  --ion-color-dark-contrast: var(--ion-color-light);
  --ion-color-dark-contrast-rgb: var(--ion-color-light-rgb);
  --ion-color-dark-shade: #FFFFFF;
  --ion-color-dark-shade-rgb: 255, 255, 255;
  --ion-color-dark-tint: #F3F6FF;
  --ion-color-dark-tint-rgb: 243, 246, 255;
  --ion-color-medium: #a9a9b6;
  --ion-color-medium-rgb: 169, 169, 182;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #bdbdd0;
  --ion-color-medium-tint: #c9c9e0;
  --ion-color-light: #2D2D30;
  --ion-color-light-rgb: 45, 45, 48;
  --ion-color-light-contrast: var(--ion-color-primary);
  --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-light-shade: #3a3a3f;
  --ion-color-light-shade-rgb: 58, 58, 63;
  --ion-color-light-tint: #1e1e21;
  --ion-color-light-tint-rgb: 47, 47, 49;
  /* Invert step scales by remapping to existing steps */
  --ion-text-color-step-950: #393939;
  --ion-text-color-step-900: #434344;
  --ion-text-color-step-850: #4d4d4e;
  --ion-text-color-step-800: #575758;
  --ion-text-color-step-750: #616162;
  --ion-text-color-step-700: #6b6b6d;
  --ion-text-color-step-650: #757577;
  --ion-text-color-step-600: #7f7f81;
  --ion-text-color-step-550: #89898b;
  --ion-text-color-step-500: #939496;
  --ion-text-color-step-450: #9c9ea0;
  --ion-text-color-step-400: #a6a8aa;
  --ion-text-color-step-350: #b0b2b4;
  --ion-text-color-step-300: #babcbe;
  --ion-text-color-step-250: #c4c6c9;
  --ion-text-color-step-200: #ced0d3;
  --ion-text-color-step-150: #d8dadd;
  --ion-text-color-step-100: #e2e4e8;
  --ion-text-color-step-950: #eceef2;
  --ion-background-color-step-950: #eceef2;
  --ion-background-color-step-900: #e2e4e8;
  --ion-background-color-step-850: #d8dadd;
  --ion-background-color-step-800: #ced0d3;
  --ion-background-color-step-750: #c4c6c9;
  --ion-background-color-step-700: #babcbe;
  --ion-background-color-step-650: #b0b2b4;
  --ion-background-color-step-600: #a6a8aa;
  --ion-background-color-step-550: #9c9ea0;
  --ion-background-color-step-500: #939496;
  --ion-background-color-step-450: #89898b;
  --ion-background-color-step-400: #7f7f81;
  --ion-background-color-step-350: #757577;
  --ion-background-color-step-300: #6b6b6d;
  --ion-background-color-step-250: #616162;
  --ion-background-color-step-200: #575758;
  --ion-background-color-step-150: #4d4d4e;
  --ion-background-color-step-100: #434344;
  --ion-background-color-step-50: #393939;
  --ion-color-step-950: #eceef2;
  --ion-color-step-900: #e2e4e8;
  --ion-color-step-850: #d8dadd;
  --ion-color-step-800: #ced0d3;
  --ion-color-step-750: #c4c6c9;
  --ion-color-step-700: #babcbe;
  --ion-color-step-650: #b0b2b4;
  --ion-color-step-600: #a6a8aa;
  --ion-color-step-550: #9c9ea0;
  --ion-color-step-500: #939496;
  --ion-color-step-450: #89898b;
  --ion-color-step-400: #7f7f81;
  --ion-color-step-350: #757577;
  --ion-color-step-300: #6b6b6d;
  --ion-color-step-250: #616162;
  --ion-color-step-200: #575758;
  --ion-color-step-150: #4d4d4e;
  --ion-color-step-100: #434344;
  --ion-color-step-50: #393939;
  /* Light variants used as soft surfaces in dark */
  --ion-color-primarylight: #4d5b6e;
  --ion-color-primarylight-rgb: 77, 91, 110;
  --ion-color-primarylight-contrast: var(--ion-color-primary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-primarylight-shade: #5c6a7d;
  --ion-color-primarylight-tint: #4d6a86;
  --ion-color-secondarylight: #494f68;
  --ion-color-secondarylight-rgb: 73, 79, 104;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #585e77;
  --ion-color-secondarylight-tint: #4b5a83;
  /* Soft tokens to existing surfaces */
  --ion-color-primary-soft: #223845;
  --ion-color-warning-soft: #54492e;
  --ion-color-danger-soft: #4e2c34;
  --ion-color-tertiary-soft: rgb(59, 50, 77);
  --ion-color-medium-soft: #333333;
  --ion-color-light-soft: #2d2d2d;
}

/* Explicit light override to win against system dark */
:root.light {
  color-scheme: light;
}

/* Honor OS preference by default; only when no explicit class is set */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    color-scheme: dark;
    --ion-color-primary: #2c92ff;
    --ion-color-primary-rgb: 44, 146, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #4aa3ff;
    --ion-color-primary-tint: #1f8aff;
    --ion-color-primarylight: #4d5b6e;
    --ion-color-primarylight-rgb: 77, 91, 110;
    --ion-color-primarylight-contrast: var(--ion-color-primary);
    --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-primarylight-shade: #5c6a7d;
    --ion-color-primarylight-tint: #4d6a86;
    --ion-color-secondary: #334ab0;
    --ion-color-secondary-rgb: 51, 74, 176;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #4f66cc;
    --ion-color-secondary-tint: #2b46d6;
    --ion-color-secondarylight: #494f68;
    --ion-color-secondarylight-rgb: 73, 79, 104;
    --ion-color-secondarylight-contrast: var(--ion-color-secondary);
    --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
    --ion-color-secondarylight-shade: #585e77;
    --ion-color-secondarylight-tint: #4b5a83;
    --ion-color-tertiary: #9474fe;
    --ion-color-tertiary-rgb: 148, 116, 254;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #a68dff;
    --ion-color-tertiary-tint: #8a63ff;
    --ion-color-quaternary: #d76245;
    --ion-color-quaternary-rgb: 255, 107, 71;
    --ion-color-quaternary-contrast: #ffffff;
    --ion-color-quaternary-contrast-rgb: 255, 255, 255;
    --ion-color-quaternary-shade: #e07b61;
    --ion-color-quaternary-tint: #ff6a40;
    --ion-color-success: #00c29f;
    --ion-color-success-rgb: 0, 194, 159;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #2fd1b7;
    --ion-color-success-tint: #00d1ad;
    --ion-color-warning: #ffda1f;
    --ion-color-warning-rgb: 255, 218, 31;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #ffe34f;
    --ion-color-warning-tint: #ffcf00;
    --ion-color-danger: #ff286c;
    --ion-color-danger-rgb: 255, 40, 108;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #ff4f8a;
    --ion-color-danger-tint: #ff2f78;
    --ion-color-dark: #FDFDFF;
    --ion-color-dark-rgb: 253, 253, 255;
    --ion-color-dark-contrast: var(--ion-color-primarylight);
    --ion-color-dark-contrast-rgb: var(--ion-color-primarylight-rgb);
    --ion-color-dark-shade: #FFFFFF;
    --ion-color-dark-shade-rgb: 255, 255, 255;
    --ion-color-dark-tint: #F3F6FF;
    --ion-color-dark-tint-rgb: 243, 246, 255;
    --ion-color-medium: #a9a9b6;
    --ion-color-medium-rgb: 169, 169, 182;
    --ion-color-medium-contrast: #ffffff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #bdbdd0;
    --ion-color-medium-tint: #c9c9e0;
    --ion-color-light: #2D2D30;
    --ion-color-light-rgb: 45, 45, 48;
    --ion-color-light-contrast: var(--ion-color-primary);
    --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-light-shade: #3a3a3f;
    --ion-color-light-shade-rgb: 58, 58, 63;
    --ion-color-light-tint: #1e1e21;
    --ion-color-light-tint-rgb: 47, 47, 49;
    /* Inverted step scales */
    /* Invert step scales by remapping to existing steps */
    --ion-text-color-step-950: #393939;
    --ion-text-color-step-900: #434344;
    --ion-text-color-step-850: #4d4d4e;
    --ion-text-color-step-800: #575758;
    --ion-text-color-step-750: #616162;
    --ion-text-color-step-700: #6b6b6d;
    --ion-text-color-step-650: #757577;
    --ion-text-color-step-600: #7f7f81;
    --ion-text-color-step-550: #89898b;
    --ion-text-color-step-500: #939496;
    --ion-text-color-step-450: #9c9ea0;
    --ion-text-color-step-400: #a6a8aa;
    --ion-text-color-step-350: #b0b2b4;
    --ion-text-color-step-300: #babcbe;
    --ion-text-color-step-250: #c4c6c9;
    --ion-text-color-step-200: #ced0d3;
    --ion-text-color-step-150: #d8dadd;
    --ion-text-color-step-100: #e2e4e8;
    --ion-text-color-step-50: #eceef2;
    --ion-background-color-step-950: #eceef2;
    --ion-background-color-step-900: #e2e4e8;
    --ion-background-color-step-850: #d8dadd;
    --ion-background-color-step-800: #ced0d3;
    --ion-background-color-step-750: #c4c6c9;
    --ion-background-color-step-700: #babcbe;
    --ion-background-color-step-650: #b0b2b4;
    --ion-background-color-step-600: #a6a8aa;
    --ion-background-color-step-550: #9c9ea0;
    --ion-background-color-step-500: #939496;
    --ion-background-color-step-450: #89898b;
    --ion-background-color-step-400: #7f7f81;
    --ion-background-color-step-350: #757577;
    --ion-background-color-step-300: #6b6b6d;
    --ion-background-color-step-250: #616162;
    --ion-background-color-step-200: #575758;
    --ion-background-color-step-150: #4d4d4e;
    --ion-background-color-step-100: #434344;
    --ion-background-color-step-50: #393939;
    --ion-color-step-950: #eceef2;
    --ion-color-step-900: #e2e4e8;
    --ion-color-step-850: #d8dadd;
    --ion-color-step-800: #ced0d3;
    --ion-color-step-750: #c4c6c9;
    --ion-color-step-700: #babcbe;
    --ion-color-step-650: #b0b2b4;
    --ion-color-step-600: #a6a8aa;
    --ion-color-step-550: #9c9ea0;
    --ion-color-step-500: #939496;
    --ion-color-step-450: #89898b;
    --ion-color-step-400: #7f7f81;
    --ion-color-step-350: #757577;
    --ion-color-step-300: #6b6b6d;
    --ion-color-step-250: #616162;
    --ion-color-step-200: #575758;
    --ion-color-step-150: #4d4d4e;
    --ion-color-step-100: #434344;
    --ion-color-step-50: #393939;
    /* Light variants and soft tokens */
    --ion-color-primarylight: var(--ion-color-primarylight-tint);
    --ion-color-primarylight-rgb: var(--ion-color-primarylight-tint-rgb);
    --ion-color-primarylight-contrast: var(--ion-color-primary);
    --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-primarylight-shade: var(--ion-color-primarylight);
    --ion-color-primarylight-tint: var(--ion-color-primarylight-shade);
    --ion-color-secondarylight: var(--ion-color-secondarylight-tint);
    --ion-color-secondarylight-rgb: var(--ion-color-secondarylight-tint-rgb);
    --ion-color-secondarylight-contrast: var(--ion-color-secondary);
    --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
    --ion-color-secondarylight-shade: var(--ion-color-secondarylight-shade);
    --ion-color-secondarylight-tint: var(--ion-color-secondarylight-shade);
    /* Soft tokens to existing surfaces */
    --ion-color-primary-soft: #223845;
    --ion-color-warning-soft: #54492e;
    --ion-color-danger-soft: #4e2c34;
    --ion-color-tertiary-soft: rgb(59, 50, 77);
    --ion-color-medium-soft: #333333;
    --ion-color-light-soft: #2d2d2d;
  }
}
/* Safari-focused global optimizations */
html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  overscroll-behavior-y: contain;
  /* reduce accidental pull-to-refresh */
}

a,
button,
[role=button] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Utility: disable selection for non-text UI */
.no-text-select,
ion-toolbar,
ion-tab-bar,
ion-segment,
ion-chip,
ion-badge,
ion-icon,
ion-accordion [slot=header],
ion-item .ion-icon {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Safe-area padding utilities */
.safe-area-bottom-padding {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}

.safe-area-top-padding {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
}

/* Main menu + timeline filter panel — shared ion-searchbar look */
ion-searchbar.custom-searchbar {
  padding-bottom: 4px;
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 2px;
  min-height: 42px;
  --border-radius: 8px;
  --color: var(--ion-text-color);
  --icon-color: var(--ion-color-medium);
}

ion-searchbar.custom-searchbar .searchbar-input-container .searchbar-search-icon,
ion-searchbar.custom-searchbar .searchbar-input-container ion-icon,
ion-searchbar.custom-searchbar .searchbar-search-icon,
ion-searchbar.custom-searchbar ion-icon.searchbar-search-icon,
ion-searchbar.custom-searchbar .searchbar-search-icon.sc-ion-searchbar-ios,
ion-searchbar.custom-searchbar [class*=searchbar-search-icon] {
  color: var(--ion-color-medium) !important;
  width: 1.2rem !important;
  height: 90% !important;
}

ion-searchbar.custom-searchbar .searchbar-input {
  font-size: 0.9rem !important;
  min-height: 34px;
  line-height: 1.4;
}

ion-searchbar.custom-searchbar input {
  font-size: 0.9rem !important;
  min-height: 36px;
  line-height: 1.4;
}

/* Core CSS required for Ionic components to work properly */
/* Basic CSS for apps built with Ionic */
/* Custom utility classes - lightweight replacements for Ionic utilities */
/* Only includes classes actually used in the codebase */
.ion-padding {
  padding: 16px;
}

.ion-text-center {
  text-align: center;
}

.ion-text-left {
  text-align: left;
}

.ion-text-right {
  text-align: right;
}

/* Removed unused Ionic utility imports: padding.css, text-alignment.css, float-elements, text-transformation, flex-utils */
/* Optional CSS utils that can be commented out */
/* Ionic 7: no palette imports available; handled via custom CSS in theme */
/** PWA Keyboard Handling for iOS **/
:root {
  --keyboard-offset: var(--keyboard-height, 0px) !important;
}

/* iOS PWA Menu Toggle Fix - addresses WebKit bug #214781 */
html.plt-ios.plt-pwa {
  height: 100dvh !important;
  /* Use dynamic viewport height */
}

/* iOS Safari PWA Header Height Fix */
html.plt-ios.plt-pwa ion-header {
  position: relative !important;
  z-index: 1000 !important;
}

html.plt-ios.plt-pwa ion-toolbar {
  min-height: 56px !important;
  /* Modern mobile header height */
  display: flex !important;
  align-items: center !important;
  /* Vertically center content */
}
html.plt-ios.plt-pwa ion-toolbar.readonly-tracker-indicator {
  min-height: 24px !important;
}
html.plt-ios.plt-pwa ion-toolbar.latest-updates-view-indicator {
  min-height: 24px !important;
}
html.plt-ios.plt-pwa ion-toolbar.multi-select-mode-indicator {
  min-height: 24px !important;
}

/* Ensure toolbar content is properly aligned */
html.plt-ios.plt-pwa ion-toolbar ion-title {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

html.plt-ios.plt-pwa ion-toolbar ion-buttons {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Specific wrappers that need to shrink to avoid the keyboard */
html.plt-mobileweb #side-panel ion-footer.keyboard-workaround,
html.plt-mobile #side-panel ion-footer.keyboard-workaround,
html.plt-pwa #side-panel ion-footer.keyboard-workaround {
  padding-bottom: var(--keyboard-height);
  transition: padding-bottom 0.3s ease-in-out;
}

/* Remove the global rule that conflicts with native iOS panning */
/*
 html.plt-ios.plt-pwa,
 html.plt-ios.plt-pwa body {
     max-height: calc(100% - var(--keyboard-height));
     transition: max-height 0.3s ease-in-out;
 }
*/
/* Adjust Ionic Modals - they are absolutely positioned and need a manual offset */
ion-footer.keyboard-workaround {
  transition: padding-bottom 0.3s ease-in-out;
}

.compact #side-panel ion-footer.keyboard-workaround {
  padding: 0;
  background: transparent;
}

html.plt-ios ion-footer.keyboard-workaround {
  /* This example assumes a full-height modal.
   The goal is to shrink its height by the keyboard's height. */
  padding-bottom: var(--keyboard-height);
  transition: padding-bottom 0.3s ease-in-out;
}

html.plt-mobileweb #dashboard-component .row .right-column,
html.plt-mobile #dashboard-component .row .right-column,
html.plt-pwa #dashboard-component .row .right-column {
  padding-bottom: var(--keyboard-height);
}

/* Adjust Ionic Side Menus */
/*
 * If you have custom modals or panels, you'll need to target them specifically.
 * For example:
 *
 * .my-custom-modal.plt-ios.plt-pwa {
 *   bottom: var(--keyboard-inset-height);
 *   height: calc(50vh - var(--keyboard-inset-height)); // Example
 * }
 *
 * .my-custom-side-panel.plt-ios.plt-pwa .scroll-content {
 *   padding-bottom: var(--keyboard-inset-height);
 * }
 */
#main-content ion-content {
  --background: var(--ion-color-light);
}
#main-content ion-content.team-management {
  --background: var(--ion-color-light-shade);
}

ion-title.md {
  --padding-start: 0;
  padding-inline-start: 0;
  padding-left: 8px;
}

ion-content::part(scroll) {
  scroll-behavior: smooth;
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-bottom: constant(safe-area-inset-bottom, 0);
}

#container {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  line-height: 1.2rem;
  margin: 0;
}

ion-modal#timeline-day-modal {
  --width: fit-content;
  --min-width: 250px;
  --height: fit-content;
  border-radius: 6px;
  box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
ion-modal#timeline-day-modal h1 {
  margin-bottom: 20px;
  font-size: 1.2em;
}

@media (hover: hover) {
  #day-modal-content ion-list {
    margin-top: 20px;
    border-radius: 0.4rem;
  }
  #day-modal-content ion-datetime {
    --background: transparent;
  }
  #day-modal-content ion-datetime::part(calendar-day) {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
}
ion-alert.add-emoji-category-alert.is-touchdevice .alert-message {
  display: none;
}
ion-alert.add-emoji-category-alert .alert-message {
  text-align: center;
  white-space: pre-wrap;
  font-size: 0.7rem;
  padding-bottom: 0;
}

.date-picker-popover {
  --width: min(100%, 320px);
  --min-width: 280px;
}
.date-picker-popover::part(content) {
  width: var(--width);
  min-width: var(--min-width);
}
.date-picker-popover ion-datetime {
  width: 100%;
  min-width: var(--min-width);
}

ion-popover {
  --width: auto;
  --min-width: 256px;
}

ion-popover.groupview-new-entry {
  --width: 300px;
  --min-width: 300px;
  --max-width: 540px;
  --max-height: 400px;
}
ion-popover.groupview-new-entry::part(content) {
  width: 300px;
  min-width: 300px;
  max-width: 540px;
  max-height: 400px;
}
ion-popover.groupview-new-entry .popover-content {
  width: 300px;
  min-width: 300px;
  max-width: 540px;
  max-height: 400px;
}
ion-popover.groupview-new-entry ion-datetime {
  width: 100%;
  min-width: var(--min-width);
}

ion-popover.day-action-popover {
  --width: auto;
}
ion-popover.day-action-popover ion-button {
  margin: 0;
  text-transform: none;
}

ion-popover.day-header-popover ion-button {
  margin: 0;
  text-transform: none;
}
ion-popover.day-header-popover ion-item ion-icon {
  margin-inline-end: 16px;
}

ion-datetime {
  --background: var(--ion-color-light-shade);
  width: 100%;
  min-width: 280px;
}
ion-datetime::part(calendar-day), ion-datetime.md::part(calendar-day) {
  width: 38px;
  min-width: 38px;
  height: 38px;
}
ion-datetime::part(calendar-day today), ion-datetime.md::part(calendar-day today) {
  color: var(--ion-color-success);
  border: 2px solid var(--ion-color-success);
}
ion-datetime::part(calendar-day active), ion-datetime.md::part(calendar-day active) {
  border: 2px solid rgba(var(--ion-color-secondary-rgb), 0.5);
}
ion-datetime::part(calendar-day today):focus, ion-datetime.md::part(calendar-day today):focus, ion-datetime::part(calendar-day today active), ion-datetime.md::part(calendar-day today active) {
  color: var(--ion-color-success);
  border: 2px solid var(--ion-color-success);
  background-color: rgba(var(--ion-color-success-rgb), 0.1);
}

ion-toast.multi-select-toast {
  --background: rgba(var(--ion-color-warning-rgb), 0.9);
  --color: var(--ion-color-dark);
  --border-radius: 16px;
  --height: 32px;
  --min-height: 32px;
  --max-width: fit-content;
  text-align: center;
}
ion-toast.multi-select-toast .toast-wrapper {
  margin-inline-start: 6rem;
}
ion-toast.multi-select-toast::part(button) {
  color: var(--ion-color-dark);
}
ion-toast.multi-select-toast::part(container) {
  padding: 0;
}

ion-avatar {
  color: rgba(var(--ion-color-dark-rgb), 0.4);
  background-color: rgba(var(--ion-color-dark-rgb), 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
ion-avatar .member-id-avatar {
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  word-wrap: normal;
}
ion-chip ion-avatar .member-id-avatar {
  font-size: 1.5rem;
}

app-add-tracker-modal ion-content {
  --background: var(--ion-color-light-tint);
}
app-add-tracker-modal ion-content ion-list {
  border-radius: 12px;
  margin-bottom: 12px !important;
}
app-add-tracker-modal ion-content .folder-list-label {
  margin-bottom: 4px;
}
app-add-tracker-modal ion-content .hashtag-chips-container {
  padding-top: 0;
}
app-add-tracker-modal ion-content ion-chip ion-icon {
  height: 16px;
  width: 16px;
}

#timeline-settings-modal ion-content {
  --background: var(--ion-color-light-tint);
}
#timeline-settings-modal ion-content ion-list {
  border-radius: 0.8rem;
}
#timeline-settings-modal ion-content ion-list ion-item {
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 8px;
  --padding-bottom: 8px;
}
#timeline-settings-modal ion-content ion-list#members-list ion-item .member-role-buttons {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#timeline-settings-modal ion-content ion-list#members-list ion-item .member-role-buttons ion-chip {
  min-height: 24px;
  padding: 4px 12px;
  cursor: default;
}
#timeline-settings-modal ion-content ion-list#members-list ion-item .member-role-buttons ion-chip.color-owner {
  --background: rgba(var(--ion-color-primary-rgb), 0.1);
  --color: var(--ion-color-primary);
}
#timeline-settings-modal ion-content ion-list#members-list ion-item .member-role-buttons ion-chip.color-pending {
  --background: rgba(var(--ion-color-warning-rgb), 0.1);
  --color: var(--ion-color-warning);
}
#timeline-settings-modal ion-content ion-list#members-list ion-item .member-role-buttons ion-chip.color-member {
  --background: rgba(var(--ion-color-secondary-rgb), 0.1);
  --color: var(--ion-color-secondary);
}
#timeline-settings-modal ion-content ion-list#members-list ion-item .member-role-buttons ion-button {
  min-height: 24px;
  font-size: 0.6rem;
  --border-width: 1px;
  --padding-inline-start: 12px;
  --padding-inline-end: 12px;
  --padding-top: 4px;
  --padding-bottom: 4px;
}
#timeline-settings-modal ion-content ion-item.pending-member-item {
  --padding-bottom: 0px;
}
#timeline-settings-modal ion-content ion-textarea.invite-member-textarea {
  --padding-start: 12px;
  margin-top: 4px;
  margin-bottom: 12px;
  margin-left: 54px;
  font-size: 0.8rem;
}

ion-modal#category-sheet-modal,
#side-panel .category-sheet-embedded {
  --width: 100%;
  --border-radius: 16px;
  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
  ion-modal#category-sheet-modal,
  #side-panel .category-sheet-embedded {
    --width: 75%;
  }
}
@media (min-width: 1024px) {
  ion-modal#category-sheet-modal,
  #side-panel .category-sheet-embedded {
    --width: 60%;
  }
}
ion-modal#category-sheet-modal .category-wrapper,
#side-panel .category-sheet-embedded .category-wrapper {
  margin: 0;
  padding: 40px 12px 4px 4px;
  background: rgba(var(--ion-color-light-shade-rgb), 0.9);
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  flex: 1;
  min-width: 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
ion-modal#category-sheet-modal .category-scroll-container,
#side-panel .category-sheet-embedded .category-scroll-container {
  height: 100%;
  overflow: hidden;
  flex-grow: 1;
}
ion-modal#category-sheet-modal .category-footer,
#side-panel .category-sheet-embedded .category-footer {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
}
ion-modal#category-sheet-modal .selected-entry-info,
#side-panel .category-sheet-embedded .selected-entry-info {
  display: flex;
  flex-direction: row;
  white-space: break-spaces;
  flex: 1 0 auto;
  gap: 0rem;
  margin-bottom: 0.6rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ion-color-light-shade);
}
ion-modal#category-sheet-modal .selected-entry-info .selected-entry-header,
#side-panel .category-sheet-embedded .selected-entry-info .selected-entry-header {
  padding: 0.5rem;
  font-weight: 600;
}
ion-modal#category-sheet-modal .selected-entry-info .selected-entry,
#side-panel .category-sheet-embedded .selected-entry-info .selected-entry {
  flex-grow: 1;
  padding: 4px 8px;
  border: 0.5px solid rgba(var(--ion-color-primary-rgb), 0.6);
  box-shadow: 0 0 2px 0px rgba(var(--ion-color-primary-rgb), 0.8);
  border-radius: 0.5rem;
  margin: 8px 8px 0;
  color: var(--ion-color-dark);
}
ion-modal#category-sheet-modal .date-category,
#side-panel .category-sheet-embedded .date-category {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}
ion-modal#category-sheet-modal .date-category .category-header .category-label,
#side-panel .category-sheet-embedded .date-category .category-header .category-label {
  padding: 0.5rem;
}
ion-modal#category-sheet-modal .date-category .date-category-row,
#side-panel .category-sheet-embedded .date-category .date-category-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
ion-modal#category-sheet-modal .date-category .date-category-row .date-category-value,
#side-panel .category-sheet-embedded .date-category .date-category-row .date-category-value {
  font-size: 0.9rem;
  color: var(--ion-text-color);
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters:not(:empty),
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters:not(:empty),
#side-panel .category-sheet-embedded .color-filters.category-picker-filters:not(:empty),
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters:not(:empty) {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ion-color-light-shade);
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters:nth-last-child(2),
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters:nth-last-child(2),
#side-panel .category-sheet-embedded .color-filters.category-picker-filters:nth-last-child(2),
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters:nth-last-child(2) {
  border-bottom: none;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters .filter-header,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters .filter-header,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters .filter-header,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters .filter-header {
  display: flex;
  justify-content: space-between;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters .filter-header .filter-label,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters .filter-header .filter-label,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters .filter-header .filter-label,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters .filter-header .filter-label {
  padding: 0.5rem;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters .emoji-filter-icon,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters .emoji-filter-icon,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters .emoji-filter-icon,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters .emoji-filter-icon {
  margin-right: 0.25rem;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters .emoji-filter-label,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters .emoji-filter-label,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters .emoji-filter-label,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters .emoji-filter-label {
  font-size: 0.75rem;
  opacity: 0.9;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters .filter-chip-wrapper,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters .filter-chip-wrapper,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters .filter-chip-wrapper,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters .filter-chip-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters.emoji-filters .filter-header + .category-picker-emoji-section,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters.emoji-filters .filter-header + .category-picker-emoji-section,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters.emoji-filters .filter-header + .category-picker-emoji-section,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters.emoji-filters .filter-header + .category-picker-emoji-section {
  margin-top: 0;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters.emoji-filters .category-picker-emoji-section + .category-picker-emoji-section,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters.emoji-filters .category-picker-emoji-section + .category-picker-emoji-section,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters.emoji-filters .category-picker-emoji-section + .category-picker-emoji-section,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters.emoji-filters .category-picker-emoji-section + .category-picker-emoji-section {
  margin-top: 0.65rem;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters.emoji-filters .category-picker-emoji-subheading,
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters.emoji-filters .category-picker-emoji-subheading,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters.emoji-filters .category-picker-emoji-subheading,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters.emoji-filters .category-picker-emoji-subheading {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ion-color-medium-shade);
  padding: 0.2rem 0.5rem 0.35rem;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters ion-chip,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters ion-chip {
  width: 32px;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}
ion-modal#category-sheet-modal .color-filters.category-picker-filters ion-chip ion-icon,
#side-panel .category-sheet-embedded .color-filters.category-picker-filters ion-chip ion-icon {
  margin: 0;
  width: 18px;
  height: 18px;
}
@media (max-width: 767px) {
  ion-modal#category-sheet-modal .color-filters.category-picker-filters ion-chip,
  #side-panel .category-sheet-embedded .color-filters.category-picker-filters ion-chip {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 20px;
    margin: 2px;
  }
  ion-modal#category-sheet-modal .color-filters.category-picker-filters ion-chip ion-icon,
  #side-panel .category-sheet-embedded .color-filters.category-picker-filters ion-chip ion-icon {
    width: 24px;
    height: 24px;
  }
}
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters ion-chip,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters ion-chip {
  cursor: pointer;
}
ion-modal#category-sheet-modal .emoji-filters.category-picker-filters ion-chip:hover,
#side-panel .category-sheet-embedded .emoji-filters.category-picker-filters ion-chip:hover {
  opacity: 0.9;
}
ion-modal#category-sheet-modal #add-emoji-category,
#side-panel .category-sheet-embedded #add-emoji-category {
  cursor: pointer;
}

ion-chip.color-category-swatch {
  --background: rgb(var(--swatch-rgb));
  --color: rgba(255, 255, 255, 0.95);
  --border-width: 0;
  --box-shadow: none;
  border: none;
  opacity: 1;
  cursor: pointer;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
ion-chip.color-category-swatch ion-icon {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
ion-chip.color-category-swatch.selected {
  box-shadow: 0 0 0 3px var(--ion-background-color, var(--ion-background, #fff)), 0 0 0 7px rgb(var(--swatch-rgb));
  position: relative;
  z-index: 1;
  transform: scale(0.9);
}
ion-chip.color-category-swatch[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

#side-panel .category-sheet-embedded.category-picker-layout-side .category-wrapper,
#side-panel.open.category-picker-touch-sheet .category-sheet-embedded .category-wrapper {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 10px 16px;
  height: auto;
  min-height: 0;
  box-shadow: none;
  background: transparent;
}
#side-panel .category-sheet-embedded.category-picker-layout-side .category-scroll-container,
#side-panel.open.category-picker-touch-sheet .category-sheet-embedded .category-scroll-container {
  height: auto;
  min-height: 0;
  overflow: visible;
  flex: 1 1 auto;
}

.settings-modal ion-content ion-list-header {
  font-weight: 500;
}
.settings-modal .integration-instruction-text {
  font-size: 0.8rem;
  color: var(--ion-color-medium);
}
.settings-modal .integration-input-text {
  font-size: 0.8rem;
}
.settings-modal .ical-list,
.settings-modal .email-integration-list {
  margin-bottom: 16px;
}
.settings-modal .danger-zone-note {
  display: block;
}

/* Image preview panel inside the half-height side panel */
#timeline-container .image-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: max(env(safe-area-inset-bottom, 0px) + 16px, 24px);
}
#timeline-container .image-preview-panel .image-preview-img-wrap {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ion-color-light-shade);
}
#timeline-container .image-preview-panel .image-preview-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 28dvh;
}
#timeline-container .image-preview-panel .image-preview-attachment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* Web content grabber: scrollable markdown in ion-content; actions in ion-footer (sibling) */
#timeline-container .website-data-grabber-panel {
  display: block;
  min-height: 100%;
}
#timeline-container .website-data-grabber-panel .website-data-grabber-empty-state {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}
#timeline-container .website-data-grabber-panel .website-data-grabber-empty-state .website-data-grabber-url-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  background: var(--ion-color-light-tint);
  border-radius: 8px;
  border: 1px solid var(--ion-color-light-shade);
}
#timeline-container .website-data-grabber-panel .website-data-grabber-empty-state .website-data-grabber-url-icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--ion-color-medium);
  margin-top: 2px;
}
#timeline-container .website-data-grabber-panel .website-data-grabber-empty-state .website-data-grabber-url-text {
  font-size: 0.78rem;
  color: var(--ion-color-medium-shade);
  word-break: break-all;
  line-height: 1.4;
}
#timeline-container .website-data-grabber-panel .website-data-grabber-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 0;
}
#timeline-container .website-data-grabber-panel .website-data-grabber-loading-state ion-note {
  font-size: 0.88rem;
}
#timeline-container .website-data-grabber-panel .markdown-container {
  display: block;
  padding: 2rem 1rem;
  background-color: var(--ion-color-light-tint);
  border-radius: 1rem;
  margin-bottom: 0;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  -webkit-tap-highlight-color: transparent;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown {
  line-height: 1.4rem;
  font-size: 0.9rem;
  color: var(--ion-text-color-step-100);
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  -webkit-tap-highlight-color: transparent;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown > * {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  -webkit-tap-highlight-color: transparent;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown > * {
  word-break: break-word;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown h1,
#timeline-container .website-data-grabber-panel .markdown-container markdown h2,
#timeline-container .website-data-grabber-panel .markdown-container markdown h3,
#timeline-container .website-data-grabber-panel .markdown-container markdown h4,
#timeline-container .website-data-grabber-panel .markdown-container markdown h5,
#timeline-container .website-data-grabber-panel .markdown-container markdown h6 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown h1 {
  font-size: 1.4em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown h2 {
  font-size: 1.3em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown h3 {
  font-size: 1.2em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown h4 {
  font-size: 1.1em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown h5 {
  font-size: 1em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown h6 {
  font-size: 0.9em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown p {
  margin-top: 0;
  margin-bottom: 0.5em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown a {
  color: rgba(var(--ion-color-secondary-rgb), 0.8);
  text-decoration: underline;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown img {
  max-width: 80%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown ul,
#timeline-container .website-data-grabber-panel .markdown-container markdown ol {
  padding-left: 1.5em;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown code {
  background-color: var(--ion-color-light-shade);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}
#timeline-container .website-data-grabber-panel .markdown-container markdown pre {
  background-color: var(--ion-color-light-shade);
  padding: 1em;
  border-radius: 3px;
  overflow-x: auto;
}

#side-panel ion-toolbar .website-data-grabber-toolbar-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#side-panel .website-data-grabber-page-title-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

#side-panel ion-footer.website-data-grabber-ion-footer {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
#side-panel ion-footer.website-data-grabber-ion-footer ion-toolbar.website-data-grabber-footer-toolbar {
  --background: var(--ion-background-color);
  --border-width: 1px 0 0 0;
  --border-color: var(--ion-color-light-shade);
  --min-height: auto;
  --padding-top: 8px;
  --padding-bottom: 0;
  --padding-start: 0;
  --padding-end: 0;
}
#side-panel ion-footer.website-data-grabber-ion-footer .website-data-grabber-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  padding-bottom: 8px;
  box-sizing: border-box;
}
#side-panel ion-footer.website-data-grabber-ion-footer .website-data-grabber-footer-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
#side-panel ion-footer.website-data-grabber-ion-footer .website-data-grabber-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--ion-color-medium-shade);
  margin: 0;
}
#side-panel ion-footer.website-data-grabber-ion-footer .website-data-grabber-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
#side-panel ion-footer.website-data-grabber-ion-footer .website-data-grabber-footer-top-row ion-button {
  margin-top: 0;
  flex: 0 0 auto;
}
#side-panel ion-footer.website-data-grabber-ion-footer .website-data-grabber-actions ion-button {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: min(100%, 140px);
}

.link-menu-popover ion-item-divider {
  align-items: flex-start;
}
.link-menu-popover ion-item-divider ion-label {
  width: 100%;
}

/* App-level drag ghost: above split-pane so it stays visible over the LHS menu. Uses same look as timeline drag preview. */
.app-drag-ghost-root {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
}

.app-drag-ghost {
  position: fixed;
  z-index: 1000000;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  max-height: 40px;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
  opacity: 1;
  transform: scale(1.02);
  transform-origin: center center;
  animation: app-drag-ghost-in 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  background: var(--ion-background-color, #fff);
  box-sizing: border-box;
  /* Match compact theme .emoji-category-label */
  /* Match compact theme .color-category-label */
  /* Match compact theme .entry-content-display / .entry-text */
  /* Match compact theme .checkbox-entry-button (ghost: always visible, same look as timeline entries) */
  /* Match compact theme .inline-drag-handle */
  /* Entry and color-category theme colors (match timeline compact theme; vars from theme/colors) */
}
.app-drag-ghost .emoji-category-label {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  padding-top: 2px;
  font-size: 0.8rem;
  line-height: 1.2rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background-color: var(--ion-background-color, #fff);
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.app-drag-ghost .emoji-category-label .emoji-placeholder {
  color: var(--ion-text-color-step-400);
  font-size: 0.9rem;
  margin-top: 1px;
}
.app-drag-ghost .color-category-label {
  width: 8px;
  min-width: 8px;
  max-width: 8px;
  align-self: stretch;
  background-color: var(--ion-background-color, #fff);
}
.app-drag-ghost .entry-wrapper {
  min-width: 0;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  padding-right: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--ion-background-color, #fff);
}
.app-drag-ghost .timeline-drag-preview-content,
.app-drag-ghost .entry-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex: 1 1 100%;
  align-items: center;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.app-drag-ghost .entry-content-display.entry-text {
  width: 100%;
  padding: 1px 4px;
  font-size: 14.4px;
  line-height: 17px;
  min-height: 20px;
  letter-spacing: 0.144px;
  font-family: "Inter", "SF Pro Text", system-ui, sans-serif;
  color: var(--ion-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app-drag-ghost .entry-text-content {
  font-size: 14.4px;
  line-height: 17px;
  letter-spacing: 0.144px;
  font-family: "Inter", "SF Pro Text", system-ui, sans-serif;
  color: var(--ion-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app-drag-ghost .entry-text-content.entry-checked {
  opacity: 0.85;
}
.app-drag-ghost .checkbox-entry-button {
  position: relative;
  opacity: 1; /* ghost: always show (timeline uses opacity 0 until editing) */
  margin-left: 4px;
  align-self: flex-start;
  margin-top: 2px;
  margin-right: 2px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--ion-text-color-step-500);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  cursor: default;
  background-color: transparent;
  transition: opacity 0.15s ease;
}
.app-drag-ghost .checkbox-entry-button:checked {
  background-color: var(--ion-text-color-step-500);
  border-color: var(--ion-text-color-step-500);
  color: var(--ion-color-light);
}
.app-drag-ghost .checkbox-entry-button:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.app-drag-ghost .checkbox-entry-button:disabled {
  opacity: 1;
  pointer-events: none;
}
.app-drag-ghost .inline-drag-handle,
.app-drag-ghost .inline-multiselect-toggle {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1 !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--ion-color-primary, #3880ff);
  background: var(--ion-background-color, #fff);
}
.app-drag-ghost.entry-color-ccat1 .entry-wrapper {
  background-color: rgba(var(--ccat1-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat2 .entry-wrapper {
  background-color: rgba(var(--ccat2-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat3 .entry-wrapper {
  background-color: rgba(var(--ccat3-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat4 .entry-wrapper {
  background-color: rgba(var(--ccat4-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat5 .entry-wrapper {
  background-color: rgba(var(--ccat5-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat6 .entry-wrapper {
  background-color: rgba(var(--ccat6-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat7 .entry-wrapper {
  background-color: rgba(var(--ccat7-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat8 .entry-wrapper {
  background-color: rgba(var(--ccat8-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat9 .entry-wrapper {
  background-color: rgba(var(--ccat9-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat10 .entry-wrapper {
  background-color: rgba(var(--ccat10-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat11 .entry-wrapper {
  background-color: rgba(var(--ccat11-rgb), 0.1);
}
.app-drag-ghost.entry-color-ccat12 .entry-wrapper {
  background-color: rgba(var(--ccat12-rgb), 0.1);
}
.app-drag-ghost .color-category-label.color-ccat1 {
  background-color: var(--ccat1);
}
.app-drag-ghost .color-category-label.color-ccat2 {
  background-color: var(--ccat2);
}
.app-drag-ghost .color-category-label.color-ccat3 {
  background-color: var(--ccat3);
}
.app-drag-ghost .color-category-label.color-ccat4 {
  background-color: var(--ccat4);
}
.app-drag-ghost .color-category-label.color-ccat5 {
  background-color: var(--ccat5);
}
.app-drag-ghost .color-category-label.color-ccat6 {
  background-color: var(--ccat6);
}
.app-drag-ghost .color-category-label.color-ccat7 {
  background-color: var(--ccat7);
}
.app-drag-ghost .color-category-label.color-ccat8 {
  background-color: var(--ccat8);
}
.app-drag-ghost .color-category-label.color-ccat9 {
  background-color: var(--ccat9);
}
.app-drag-ghost .color-category-label.color-ccat10 {
  background-color: var(--ccat10);
}
.app-drag-ghost .color-category-label.color-ccat11 {
  background-color: var(--ccat11);
}
.app-drag-ghost .color-category-label.color-ccat12 {
  background-color: var(--ccat12);
}

@keyframes app-drag-ghost-in {
  from {
    transform: scale(0.94) translateY(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  to {
    transform: scale(1.02) translateY(0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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]!./src/theme/variables.scss?ngGlobalStyle ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/** Ionic CSS Variables **/
:root {
  --ion-background-color: var(--ion-color-light);
  --ion-background-color-rgb: var(--ion-color-light-rgb);
  --ion-text-color: var(--ion-color-dark);
  --ion-text-color-rgb: var(--ion-color-dark-rgb);
  --ion-color-primary: #0054e9;
  --ion-color-primary-rgb: 0, 84, 233;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #004acd;
  --ion-color-primary-tint: #1a65eb;
  --ion-color-primarylight: #ecf3fc;
  --ion-color-primarylight-rgb: 236, 243, 252;
  --ion-color-primarylight-contrast: var(--ion-color-secondary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-primarylight-shade: #a7bde3;
  --ion-color-primarylight-tint: #cadaf5;
  --ion-color-secondary: #0C2CB5;
  --ion-color-secondary-rgb: 12, 44, 181;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0b279f;
  --ion-color-secondary-tint: #2441bc;
  --ion-color-secondarylight: #cdd4f4;
  --ion-color-secondarylight-rgb: 205, 212, 244;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #96a6e8;
  --ion-color-secondarylight-tint: #b3c3f6;
  --ion-color-tertiary: #6030ff;
  --ion-color-tertiary-rgb: 96, 48, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #542ae0;
  --ion-color-tertiary-tint: #7045ff;
  --ion-color-quaternary: #ff6b47;
  --ion-color-quaternary-rgb: 255, 107, 71;
  --ion-color-quaternary-contrast: #ffffff;
  --ion-color-quaternary-contrast-rgb: 255, 255, 255;
  --ion-color-quaternary-shade: #e05e3f;
  --ion-color-quaternary-tint: #ff7a59;
  --ion-color-success: #00c29f;
  --ion-color-success-rgb: 0, 194, 159;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #00ab8c;
  --ion-color-success-tint: #1ac8a9;
  --ion-color-warning: #ffda1f;
  --ion-color-warning-rgb: 255, 218, 31;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0c01b;
  --ion-color-warning-tint: #ffde35;
  --ion-color-danger: #dc1354;
  --ion-color-danger-rgb: 220, 19, 84;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #c2114a;
  --ion-color-danger-tint: #e02b65;
  --ion-color-light: #FDFDFF;
  --ion-color-light-rgb: 253, 253, 255;
  --ion-color-light-contrast: var(--ion-color-primary);
  --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-light-shade: #E9E8EC;
  --ion-color-light-shade-rgb: 233, 232, 236;
  --ion-color-light-tint: #F8F8FA;
  --ion-color-light-tint-rgb: 248, 248, 250;
  --ion-color-medium: #6B6B73;
  --ion-color-medium-rgb: 107, 107, 115;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #5e5e65;
  --ion-color-medium-tint: #7a7a81;
  --ion-color-dark: #2D2D30;
  --ion-color-dark-rgb: 45, 45, 48;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #28282a;
  --ion-color-dark-shade-rgb: 40, 40, 42;
  --ion-color-dark-tint: #424245;
  --ion-color-dark-tint-rgb: 66, 66, 69;
  --ion-text-color-step-50: #393939;
  --ion-text-color-step-100: #434344;
  --ion-text-color-step-150: #4d4d4e;
  --ion-text-color-step-200: #575758;
  --ion-text-color-step-250: #616162;
  --ion-text-color-step-300: #6b6b6d;
  --ion-text-color-step-350: #757577;
  --ion-text-color-step-400: #7f7f81;
  --ion-text-color-step-450: #89898b;
  --ion-text-color-step-500: #939496;
  --ion-text-color-step-550: #9c9ea0;
  --ion-text-color-step-600: #a6a8aa;
  --ion-text-color-step-650: #b0b2b4;
  --ion-text-color-step-700: #babcbe;
  --ion-text-color-step-750: #c4c6c9;
  --ion-text-color-step-800: #ced0d3;
  --ion-text-color-step-850: #d8dadd;
  --ion-text-color-step-900: #e2e4e8;
  --ion-text-color-step-950: #eceef2;
  --ion-background-color-step-50: #eceef2;
  --ion-background-color-step-100: #e2e4e8;
  --ion-background-color-step-150: #d8dadd;
  --ion-background-color-step-200: #ced0d3;
  --ion-background-color-step-250: #c4c6c9;
  --ion-background-color-step-300: #babcbe;
  --ion-background-color-step-350: #b0b2b4;
  --ion-background-color-step-400: #a6a8aa;
  --ion-background-color-step-450: #9c9ea0;
  --ion-background-color-step-500: #939496;
  --ion-background-color-step-550: #89898b;
  --ion-background-color-step-600: #7f7f81;
  --ion-background-color-step-650: #757577;
  --ion-background-color-step-700: #6b6b6d;
  --ion-background-color-step-750: #616162;
  --ion-background-color-step-800: #575758;
  --ion-background-color-step-850: #4d4d4e;
  --ion-background-color-step-900: #434344;
  --ion-background-color-step-950: #393939;
  --border: 0.5px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-light-shade, rgba(0, 0, 0, 0.6))));
  --ion-border-color: var(--ion-color-light-shade);
  /* Soft, solid background equivalents for former low-alpha overlays */
  --ion-color-primary-soft: #ecf3fc; /* aligns with primarylight */
  --ion-color-warning-soft: #fff5cc;
  --ion-color-danger-soft: #fbe4ed;
  --ion-color-tertiary-soft: #eee9ff;
  --ion-color-medium-soft: #eeeff2;
  --ion-color-light-soft: #f4f4f8;
}

html {
  /* 
   * For more information on dynamic font scaling, visit the documentation:
   * https://ionicframework.com/docs/layout/dynamic-font-scaling
   */
  --ion-dynamic-font: var(--ion-default-dynamic-font);
}

/* Dark theme variable remapping (Ionic 7-compatible) */
:root.dark {
  color-scheme: dark;
  --ion-color-primary: #2c92ff;
  --ion-color-primary-rgb: 44, 146, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #4aa3ff;
  --ion-color-primary-tint: #1f8aff;
  --ion-color-primarylight: #4d5b6e;
  --ion-color-primarylight-rgb: 77, 91, 110;
  --ion-color-primarylight-contrast: var(--ion-color-primary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-primarylight-shade: #5c6a7d;
  --ion-color-primarylight-tint: #4d6a86;
  --ion-color-secondary: #334ab0;
  --ion-color-secondary-rgb: 51, 74, 176;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #4f66cc;
  --ion-color-secondary-tint: #2b46d6;
  --ion-color-secondarylight: #494f68;
  --ion-color-secondarylight-rgb: 73, 79, 104;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #585e77;
  --ion-color-secondarylight-tint: #4b5a83;
  --ion-color-tertiary: #9474fe;
  --ion-color-tertiary-rgb: 148, 116, 254;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #a68dff;
  --ion-color-tertiary-tint: #8a63ff;
  --ion-color-quaternary: #d76245;
  --ion-color-quaternary-rgb: 255, 107, 71;
  --ion-color-quaternary-contrast: #ffffff;
  --ion-color-quaternary-contrast-rgb: 255, 255, 255;
  --ion-color-quaternary-shade: #e07b61;
  --ion-color-quaternary-tint: #ff6a40;
  --ion-color-success: #00c29f;
  --ion-color-success-rgb: 0, 194, 159;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #2fd1b7;
  --ion-color-success-tint: #00d1ad;
  --ion-color-warning: #ffda1f;
  --ion-color-warning-rgb: 255, 218, 31;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #ffe34f;
  --ion-color-warning-tint: #ffcf00;
  --ion-color-danger: #ff286c;
  --ion-color-danger-rgb: 255, 40, 108;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #ff4f8a;
  --ion-color-danger-tint: #ff2f78;
  --ion-color-dark: #FDFDFF;
  --ion-color-dark-rgb: 253, 253, 255;
  --ion-color-dark-contrast: var(--ion-color-light);
  --ion-color-dark-contrast-rgb: var(--ion-color-light-rgb);
  --ion-color-dark-shade: #FFFFFF;
  --ion-color-dark-shade-rgb: 255, 255, 255;
  --ion-color-dark-tint: #F3F6FF;
  --ion-color-dark-tint-rgb: 243, 246, 255;
  --ion-color-medium: #a9a9b6;
  --ion-color-medium-rgb: 169, 169, 182;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #bdbdd0;
  --ion-color-medium-tint: #c9c9e0;
  --ion-color-light: #2D2D30;
  --ion-color-light-rgb: 45, 45, 48;
  --ion-color-light-contrast: var(--ion-color-primary);
  --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-light-shade: #3a3a3f;
  --ion-color-light-shade-rgb: 58, 58, 63;
  --ion-color-light-tint: #1e1e21;
  --ion-color-light-tint-rgb: 47, 47, 49;
  /* Invert step scales by remapping to existing steps */
  --ion-text-color-step-950: #393939;
  --ion-text-color-step-900: #434344;
  --ion-text-color-step-850: #4d4d4e;
  --ion-text-color-step-800: #575758;
  --ion-text-color-step-750: #616162;
  --ion-text-color-step-700: #6b6b6d;
  --ion-text-color-step-650: #757577;
  --ion-text-color-step-600: #7f7f81;
  --ion-text-color-step-550: #89898b;
  --ion-text-color-step-500: #939496;
  --ion-text-color-step-450: #9c9ea0;
  --ion-text-color-step-400: #a6a8aa;
  --ion-text-color-step-350: #b0b2b4;
  --ion-text-color-step-300: #babcbe;
  --ion-text-color-step-250: #c4c6c9;
  --ion-text-color-step-200: #ced0d3;
  --ion-text-color-step-150: #d8dadd;
  --ion-text-color-step-100: #e2e4e8;
  --ion-text-color-step-950: #eceef2;
  --ion-background-color-step-950: #eceef2;
  --ion-background-color-step-900: #e2e4e8;
  --ion-background-color-step-850: #d8dadd;
  --ion-background-color-step-800: #ced0d3;
  --ion-background-color-step-750: #c4c6c9;
  --ion-background-color-step-700: #babcbe;
  --ion-background-color-step-650: #b0b2b4;
  --ion-background-color-step-600: #a6a8aa;
  --ion-background-color-step-550: #9c9ea0;
  --ion-background-color-step-500: #939496;
  --ion-background-color-step-450: #89898b;
  --ion-background-color-step-400: #7f7f81;
  --ion-background-color-step-350: #757577;
  --ion-background-color-step-300: #6b6b6d;
  --ion-background-color-step-250: #616162;
  --ion-background-color-step-200: #575758;
  --ion-background-color-step-150: #4d4d4e;
  --ion-background-color-step-100: #434344;
  --ion-background-color-step-50: #393939;
  --ion-color-step-950: #eceef2;
  --ion-color-step-900: #e2e4e8;
  --ion-color-step-850: #d8dadd;
  --ion-color-step-800: #ced0d3;
  --ion-color-step-750: #c4c6c9;
  --ion-color-step-700: #babcbe;
  --ion-color-step-650: #b0b2b4;
  --ion-color-step-600: #a6a8aa;
  --ion-color-step-550: #9c9ea0;
  --ion-color-step-500: #939496;
  --ion-color-step-450: #89898b;
  --ion-color-step-400: #7f7f81;
  --ion-color-step-350: #757577;
  --ion-color-step-300: #6b6b6d;
  --ion-color-step-250: #616162;
  --ion-color-step-200: #575758;
  --ion-color-step-150: #4d4d4e;
  --ion-color-step-100: #434344;
  --ion-color-step-50: #393939;
  /* Light variants used as soft surfaces in dark */
  --ion-color-primarylight: #4d5b6e;
  --ion-color-primarylight-rgb: 77, 91, 110;
  --ion-color-primarylight-contrast: var(--ion-color-primary);
  --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
  --ion-color-primarylight-shade: #5c6a7d;
  --ion-color-primarylight-tint: #4d6a86;
  --ion-color-secondarylight: #494f68;
  --ion-color-secondarylight-rgb: 73, 79, 104;
  --ion-color-secondarylight-contrast: var(--ion-color-secondary);
  --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
  --ion-color-secondarylight-shade: #585e77;
  --ion-color-secondarylight-tint: #4b5a83;
  /* Soft tokens to existing surfaces */
  --ion-color-primary-soft: #223845;
  --ion-color-warning-soft: #54492e;
  --ion-color-danger-soft: #4e2c34;
  --ion-color-tertiary-soft: rgb(59, 50, 77);
  --ion-color-medium-soft: #333333;
  --ion-color-light-soft: #2d2d2d;
}

/* Explicit light override to win against system dark */
:root.light {
  color-scheme: light;
}

/* Honor OS preference by default; only when no explicit class is set */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    color-scheme: dark;
    --ion-color-primary: #2c92ff;
    --ion-color-primary-rgb: 44, 146, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #4aa3ff;
    --ion-color-primary-tint: #1f8aff;
    --ion-color-primarylight: #4d5b6e;
    --ion-color-primarylight-rgb: 77, 91, 110;
    --ion-color-primarylight-contrast: var(--ion-color-primary);
    --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-primarylight-shade: #5c6a7d;
    --ion-color-primarylight-tint: #4d6a86;
    --ion-color-secondary: #334ab0;
    --ion-color-secondary-rgb: 51, 74, 176;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #4f66cc;
    --ion-color-secondary-tint: #2b46d6;
    --ion-color-secondarylight: #494f68;
    --ion-color-secondarylight-rgb: 73, 79, 104;
    --ion-color-secondarylight-contrast: var(--ion-color-secondary);
    --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
    --ion-color-secondarylight-shade: #585e77;
    --ion-color-secondarylight-tint: #4b5a83;
    --ion-color-tertiary: #9474fe;
    --ion-color-tertiary-rgb: 148, 116, 254;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #a68dff;
    --ion-color-tertiary-tint: #8a63ff;
    --ion-color-quaternary: #d76245;
    --ion-color-quaternary-rgb: 255, 107, 71;
    --ion-color-quaternary-contrast: #ffffff;
    --ion-color-quaternary-contrast-rgb: 255, 255, 255;
    --ion-color-quaternary-shade: #e07b61;
    --ion-color-quaternary-tint: #ff6a40;
    --ion-color-success: #00c29f;
    --ion-color-success-rgb: 0, 194, 159;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #2fd1b7;
    --ion-color-success-tint: #00d1ad;
    --ion-color-warning: #ffda1f;
    --ion-color-warning-rgb: 255, 218, 31;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #ffe34f;
    --ion-color-warning-tint: #ffcf00;
    --ion-color-danger: #ff286c;
    --ion-color-danger-rgb: 255, 40, 108;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #ff4f8a;
    --ion-color-danger-tint: #ff2f78;
    --ion-color-dark: #FDFDFF;
    --ion-color-dark-rgb: 253, 253, 255;
    --ion-color-dark-contrast: var(--ion-color-primarylight);
    --ion-color-dark-contrast-rgb: var(--ion-color-primarylight-rgb);
    --ion-color-dark-shade: #FFFFFF;
    --ion-color-dark-shade-rgb: 255, 255, 255;
    --ion-color-dark-tint: #F3F6FF;
    --ion-color-dark-tint-rgb: 243, 246, 255;
    --ion-color-medium: #a9a9b6;
    --ion-color-medium-rgb: 169, 169, 182;
    --ion-color-medium-contrast: #ffffff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #bdbdd0;
    --ion-color-medium-tint: #c9c9e0;
    --ion-color-light: #2D2D30;
    --ion-color-light-rgb: 45, 45, 48;
    --ion-color-light-contrast: var(--ion-color-primary);
    --ion-color-light-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-light-shade: #3a3a3f;
    --ion-color-light-shade-rgb: 58, 58, 63;
    --ion-color-light-tint: #1e1e21;
    --ion-color-light-tint-rgb: 47, 47, 49;
    /* Inverted step scales */
    /* Invert step scales by remapping to existing steps */
    --ion-text-color-step-950: #393939;
    --ion-text-color-step-900: #434344;
    --ion-text-color-step-850: #4d4d4e;
    --ion-text-color-step-800: #575758;
    --ion-text-color-step-750: #616162;
    --ion-text-color-step-700: #6b6b6d;
    --ion-text-color-step-650: #757577;
    --ion-text-color-step-600: #7f7f81;
    --ion-text-color-step-550: #89898b;
    --ion-text-color-step-500: #939496;
    --ion-text-color-step-450: #9c9ea0;
    --ion-text-color-step-400: #a6a8aa;
    --ion-text-color-step-350: #b0b2b4;
    --ion-text-color-step-300: #babcbe;
    --ion-text-color-step-250: #c4c6c9;
    --ion-text-color-step-200: #ced0d3;
    --ion-text-color-step-150: #d8dadd;
    --ion-text-color-step-100: #e2e4e8;
    --ion-text-color-step-50: #eceef2;
    --ion-background-color-step-950: #eceef2;
    --ion-background-color-step-900: #e2e4e8;
    --ion-background-color-step-850: #d8dadd;
    --ion-background-color-step-800: #ced0d3;
    --ion-background-color-step-750: #c4c6c9;
    --ion-background-color-step-700: #babcbe;
    --ion-background-color-step-650: #b0b2b4;
    --ion-background-color-step-600: #a6a8aa;
    --ion-background-color-step-550: #9c9ea0;
    --ion-background-color-step-500: #939496;
    --ion-background-color-step-450: #89898b;
    --ion-background-color-step-400: #7f7f81;
    --ion-background-color-step-350: #757577;
    --ion-background-color-step-300: #6b6b6d;
    --ion-background-color-step-250: #616162;
    --ion-background-color-step-200: #575758;
    --ion-background-color-step-150: #4d4d4e;
    --ion-background-color-step-100: #434344;
    --ion-background-color-step-50: #393939;
    --ion-color-step-950: #eceef2;
    --ion-color-step-900: #e2e4e8;
    --ion-color-step-850: #d8dadd;
    --ion-color-step-800: #ced0d3;
    --ion-color-step-750: #c4c6c9;
    --ion-color-step-700: #babcbe;
    --ion-color-step-650: #b0b2b4;
    --ion-color-step-600: #a6a8aa;
    --ion-color-step-550: #9c9ea0;
    --ion-color-step-500: #939496;
    --ion-color-step-450: #89898b;
    --ion-color-step-400: #7f7f81;
    --ion-color-step-350: #757577;
    --ion-color-step-300: #6b6b6d;
    --ion-color-step-250: #616162;
    --ion-color-step-200: #575758;
    --ion-color-step-150: #4d4d4e;
    --ion-color-step-100: #434344;
    --ion-color-step-50: #393939;
    /* Light variants and soft tokens */
    --ion-color-primarylight: var(--ion-color-primarylight-tint);
    --ion-color-primarylight-rgb: var(--ion-color-primarylight-tint-rgb);
    --ion-color-primarylight-contrast: var(--ion-color-primary);
    --ion-color-primarylight-contrast-rgb: var(--ion-color-primary-rgb);
    --ion-color-primarylight-shade: var(--ion-color-primarylight);
    --ion-color-primarylight-tint: var(--ion-color-primarylight-shade);
    --ion-color-secondarylight: var(--ion-color-secondarylight-tint);
    --ion-color-secondarylight-rgb: var(--ion-color-secondarylight-tint-rgb);
    --ion-color-secondarylight-contrast: var(--ion-color-secondary);
    --ion-color-secondarylight-contrast-rgb: var(--ion-color-secondary-rgb);
    --ion-color-secondarylight-shade: var(--ion-color-secondarylight-shade);
    --ion-color-secondarylight-tint: var(--ion-color-secondarylight-shade);
    /* Soft tokens to existing surfaces */
    --ion-color-primary-soft: #223845;
    --ion-color-warning-soft: #54492e;
    --ion-color-danger-soft: #4e2c34;
    --ion-color-tertiary-soft: rgb(59, 50, 77);
    --ion-color-medium-soft: #333333;
    --ion-color-light-soft: #2d2d2d;
  }
}

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