:root {
  --bg: #F6F8FA;
  --card-bg: #ffffff;
  --surface-alt: #f6f8fa;
  --row-hover: #eef2ff;
  --border: #d1d9e0;
  --border-rgb: 209, 217, 224;
  --table-border: #e5e7eb;
  --fieldset-parent-background: #beffe9;
  --input-border: 0.063rem solid #d1d5db;
  --checkbox-color: #25292e;
  --fgColor-muted: #59636e;
  --bgColor-muted: #f6f8fa;
  --bgColor-default: #ffffff;
  --bgColor-success-emphasis: #1f883d;
  --borderColor-translucent: #1f232826;
  --button-primary-bgColor-hover: #1c8139;
  --placeholder-color: #757575;
  --white: #fff;
  --black: #000;
  --logo-color: #000;

  --text: #25292e;
  --text-light: #4b5563;

  --accent: #6366f1;
  --accent-hover: #4f46e5;

  --primary-btn-bg: #10b981;
  --primary-btn-hover-bg: #059669;

  --secondary-btn-bg: #f6f8fa;
  --secondary-btn-hover-bg: #eff2f5;
  --secondary-btn-color: #25292e;

  --danger-color: #f13232;
  --danger-hover-color: #dc2626;
  --danger-bg-subtle: #fee2e2;
  --warning-color: #e65100;

  --add-btn-bg-subtle: #d1fae5;
  --add-btn-color: #059669;

  --shadow-color: rgba(0, 0, 0, 0.1);


  --submenu-arrow-light: url("/static/images/chevron.png");
  --settings-toggle-btn-icon: url("/static/images/settings-dark.png");
  --menu-toggle-btn-icon: url("/static/images/list-dark.png");
  --logo: url("/static/images/logo-dark.png");
  --background-logo: url("/static/images/logo-dark.svg");
  --linkedin-logo: url("/static/images/linkedin-light-mode.png");
  --x-logo: url("/static/images/x-light-mode.png");
  --email-logo: url("/static/images/email-light-mode.png");


  --toggle-big: 3.8125rem;
  --toggle-small: 1.9375rem;
  --toggle-shift: 1.875rem;
  --toggle-shift-rtl: calc(-1 * var(--toggle-shift));
  --submenu-gap: .64rem;
  --card-max-w: 40.625rem;

  --font-size-medium: 0.875rem;
  --borderRadius-medium: .375rem;
  --borderRadius-small: .2rem;
  --borderWidth-thin: 0.0625rem;
  --base-text-weight-light: 300;
  --base-text-weight-medium: 500;
  --base-text-weight-normal: 400;
  --base-text-weight-semibold: 600;
  --base-size-2: 0.125rem;
  --base-size-4: 0.25rem;
  --base-size-5: 0.28rem;
  --base-size-6: 0.375rem;
  --base-size-8: 0.5rem;
  --base-size-10: 0.625rem;
  --base-size-12: 0.75rem;
  --base-size-14: 0.875rem;
  --base-size-16: 1rem;
  --base-size-18: 1.125rem;
  --base-size-20: 1.25rem;
  --base-size-22: 1.375rem;
  --base-size-24: 1.5rem;
  --base-size-26: 1.625rem;
  --base-size-28: 1.75rem;
  --base-size-32: 2rem;
  --base-size-36: 2.25rem;
  --base-size-40: 2.5rem;
  --base-size-44: 2.75rem;
  --base-size-48: 3rem;
  --base-size-64: 4rem;
  --base-size-80: 5rem;
  --base-size-96: 6rem;
  --base-size-112: 7rem;
  --base-size-128: 8rem;
  --borderRadius-full: 624.9375rem;
  --borderRadius-large: 0.75rem;
  --borderRadius-medium: 0.375rem;
  --borderRadius-small: 0.1875rem;
  --borderWidth-thick: 0.125rem;
  --borderWidth-thicker: 0.25rem;
  --borderWidth-thin: 0.0625rem;
  --outline-focus-offset: -0.125rem;
  --outline-focus-width: 0.125rem;
  --borderRadius-default: var(--borderRadius-medium);
  --borderWidth-default: var(--borderWidth-thin);
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin);
}

.dark-mode {
  --bg: #010409;
  --card-bg: #0D1117;
  --surface-alt: #212830;
  --row-hover: #010409;
  --border: #3d444d;
  --border-rgb: 61, 68, 77;
  --table-border: #686868;
  --fieldset-parent-background: #beffe9;
  --input-border: 0.063rem solid #d1d5db;
  --checkbox-color: #edeaea;
  --fgColor-muted: #9198a1;
  --bgColor-muted: #151b23;
  --bgColor-default: #0d1117;
  --bgColor-success-emphasis: #238636;
  --borderColor-translucent: #ffffff26;
  --button-primary-bgColor-hover: #29903b;
  --placeholder-color: #757575;
  --white: #fff;
  --black: #000;
  --logo-color: #fff;

  --text: #e2e8f0;
  --text-light: #a0aec0;
  --text-lighter: #cbd5e1;

  --accent: #818cf8;
  --accent-hover: #6366f1;
  --accent-light: #a78bfa;

  --primary-btn-bg: #10b981;
  --primary-btn-hover-bg: #059669;
  --primary-btn-color: #ffffff;

  --secondary-btn-bg: #212830;
  --secondary-btn-hover-bg: #262c36;
  --secondary-btn-color: #e2e8f0;

  --danger-color: #f15b5b;
  --danger-hover-color: #dc2626;
  --danger-bg-subtle: #311b1b;
  --warning-color: #ffcc80;

  --add-btn-bg-subtle: #2d453d;
  --add-btn-color: #48bb78;
  --add-btn-hover-bg-subtle: #3d5c4e;

  --chevron-color: var(--text-light);
  --shadow-color: rgba(0, 0, 0, 0.3);

  --track-light: #cbd5e1;
  --track-dark: #4f46e5;


  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");


}


.coffee-time-light {
  --bg: #faf5ee;
  --card-bg: #fffcf7;
  --surface-alt: #f5ead8;
  --row-hover: #fef8ed;
  --border: #e5d4bc;
  --border-rgb: 229, 212, 188;
  --table-border: #d9c5a8;
  --fieldset-parent-background: #edf7ed;
  --input-border: 0.063rem solid #e5d4bc;
  --checkbox-color: #8b6f47;
  --fgColor-muted: #a68968;
  --bgColor-muted: #f7efe3;
  --bgColor-default: #fffcf7;
  --bgColor-success-emphasis: #7db88a;
  --borderColor-translucent: #8b6f4715;
  --button-primary-bgColor-hover: #6ba378;
  --placeholder-color: #b89d7d;
  --white: #ffffff;
  --black: #3d2f1f;
  --text: #4a3826;
  --text-light: #8b6f47;
  --text-lighter: #a68968;
  --accent: #c99a6e;
  --accent-hover: #b8865d;
  --accent-light: #ddb088;
  --primary-btn-bg: #7db88a;
  --primary-btn-hover-bg: #6ba378;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #f5ead8;
  --secondary-btn-hover-bg: #e8dcc5;
  --secondary-btn-color: #4a3826;
  --danger-color: #d97b6f;
  --danger-hover-color: #c7675b;
  --danger-bg-subtle: #fceeed;
  --warning-color: #e8b875;
  --add-btn-bg-subtle: #e8f4eb;
  --add-btn-color: #7db88a;
  --add-btn-hover-bg-subtle: #daeee0;
  --chevron-color: #a68968;
  --shadow-color: rgba(74, 56, 38, 0.12);
  --track-light: #e5d4bc;
  --track-dark: #c99a6e;
}


.coffee-time-dark {
  --bg: #1f1612;
  --card-bg: #2a211b;
  --surface-alt: #382d24;
  --row-hover: #241a15;
  --border: #574637;
  --border-rgb: 87, 70, 55;
  --table-border: #6a5545;
  --fieldset-parent-background: #2d423a;
  --input-border: 0.063rem solid #574637;
  --checkbox-color: #e5d4bb;
  --fgColor-muted: #b89d7d;
  --bgColor-muted: #2f2419;
  --bgColor-default: #2a211b;
  --bgColor-success-emphasis: #6ba378;
  --borderColor-translucent: #e5d4bb18;
  --button-primary-bgColor-hover: #7db88a;
  --placeholder-color: #8a7459;
  --white: #fffcf7;
  --black: #120f0c;
  --text: #f5ead8;
  --text-light: #d4bea0;
  --text-lighter: #e5d4bb;
  --accent: #ddb088;
  --accent-hover: #e8bd9a;
  --accent-light: #f0caa8;
  --primary-btn-bg: #7db88a;
  --primary-btn-hover-bg: #8fc99c;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #382d24;
  --secondary-btn-hover-bg: #43372d;
  --secondary-btn-color: #f5ead8;
  --danger-color: #e8927d;
  --danger-hover-color: #f3a592;
  --danger-bg-subtle: #3d2b25;
  --warning-color: #f0caa8;
  --add-btn-bg-subtle: #2f463d;
  --add-btn-color: #8fc99c;
  --add-btn-hover-bg-subtle: #3a5147;
  --chevron-color: #d4bea0;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --track-light: #574637;
  --track-dark: #ddb088;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}


.navy-cream-light {
  --bg: #f0f4f8;
  --card-bg: #fafcfe;
  --surface-alt: #e3eaf2;
  --row-hover: #edf2f7;
  --border: #b8c9db;
  --border-rgb: 184, 201, 219;
  --table-border: #a3b8cf;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #b8c9db;
  --checkbox-color: #4a6b8a;
  --fgColor-muted: #5f7a94;
  --bgColor-muted: #e8eef5;
  --bgColor-default: #fafcfe;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #4a6b8a15;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #7a91ab;
  --white: #ffffff;
  --black: #1e2d3d;
  --text: #2d3e52;
  --text-light: #4a6b8a;
  --text-lighter: #5f7a94;
  --accent: #6b8caf;
  --accent-hover: #5a7a9e;
  --accent-light: #85a3c4;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #e3eaf2;
  --secondary-btn-hover-bg: #d4dfe8;
  --secondary-btn-color: #2d3e52;
  --danger-color: #c5756f;
  --danger-hover-color: #b36058;
  --danger-bg-subtle: #f5e8e6;
  --warning-color: #d4a870;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #5f7a94;
  --shadow-color: rgba(74, 107, 138, 0.12);
  --track-light: #b8c9db;
  --track-dark: #6b8caf;
}




.navy-cream-dark {
  --bg: #050816;
  --card-bg: #0b1020;
  --surface-alt: #111827;
  --row-hover: #070b16;
  --border: #27324a;
  --border-rgb: 39, 50, 74;
  --table-border: #3b4b6a;
  --fieldset-parent-background: #f2eddc;
  --input-border: 0.063rem solid #3c4a68;
  --checkbox-color: #e7e2d2;
  --fgColor-muted: #9aa4c0;
  --bgColor-muted: #111827;
  --bgColor-default: #050816;
  --bgColor-success-emphasis: #1f6f5a;
  --borderColor-translucent: #ffffff1a;
  --button-primary-bgColor-hover: #257d66;
  --placeholder-color: #7b86a1;
  --white: #ffffff;
  --black: #000000;
  --text: #e5edf7;
  --text-light: #b7c3df;
  --text-lighter: #cfd8f0;
  --accent: #6fb4ff;
  --accent-hover: #4f9bf0;
  --accent-light: #9bcfff;
  --primary-btn-bg: #3a82e7;
  --primary-btn-hover-bg: #326fcc;
  --primary-btn-color: #f5f7ff;
  --secondary-btn-bg: #111827;
  --secondary-btn-hover-bg: #1b2334;
  --secondary-btn-color: #e5edf7;
  --danger-color: #e16a7a;
  --danger-hover-color: #d34e60;
  --danger-bg-subtle: #321922;
  --warning-color: #f2b86b;
  --add-btn-bg-subtle: #13313a;
  --add-btn-color: #3bb08a;
  --add-btn-hover-bg-subtle: #163a44;
  --chevron-color: var(--text-light);
  --shadow-color: rgba(0, 0, 0, 0.4);
  --track-light: #cfd4e6;
  --track-dark: #4f6edc;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");

}



.sky-blue-light {
  --bg: #f0f7fb;
  --card-bg: #fafcfe;
  --surface-alt: #e3f0f7;
  --row-hover: #edf5fa;
  --border: #b8d4e8;
  --border-rgb: 184, 212, 232;
  --table-border: #a3c7df;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #b8d4e8;
  --checkbox-color: #4a7a9e;
  --fgColor-muted: #5f8fab;
  --bgColor-muted: #e8f2f8;
  --bgColor-default: #fafcfe;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #4a7a9e15;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #7a9fb8;
  --white: #ffffff;
  --black: #1e3448;
  --text: #2d4659;
  --text-light: #4a7a9e;
  --text-lighter: #5f8fab;
  --accent: #5fa3c7;
  --accent-hover: #4a8eb5;
  --accent-light: #7db5d4;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #e3f0f7;
  --secondary-btn-hover-bg: #d4e5f0;
  --secondary-btn-color: #2d4659;
  --danger-color: #c5756f;
  --danger-hover-color: #b36058;
  --danger-bg-subtle: #f5e8e6;
  --warning-color: #d4a870;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #5f8fab;
  --shadow-color: rgba(74, 122, 158, 0.12);
  --track-light: #b8d4e8;
  --track-dark: #5fa3c7;
}

.sky-blue-dark {
  --bg: #0f1c28;
  --card-bg: #1a2a38;
  --surface-alt: #233544;
  --row-hover: #15212e;
  --border: #3d5566;
  --border-rgb: 61, 85, 102;
  --table-border: #4d6575;
  --fieldset-parent-background: #1f3d38;
  --input-border: 0.063rem solid #3d5566;
  --checkbox-color: #b8d4e8;
  --fgColor-muted: #8fa8ba;
  --bgColor-muted: #1f2d3a;
  --bgColor-default: #1a2a38;
  --bgColor-success-emphasis: #5a8a75;
  --borderColor-translucent: #b8d4e818;
  --button-primary-bgColor-hover: #6b9b87;
  --placeholder-color: #6a7f91;
  --white: #fafcfe;
  --black: #0a1319;
  --text: #e3f0f7;
  --text-light: #a8c5d8;
  --text-lighter: #b8d4e8;
  --accent: #7db5d4;
  --accent-hover: #91c4dd;
  --accent-light: #a8d1e5;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #7aab8a;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #233544;
  --secondary-btn-hover-bg: #2d404f;
  --secondary-btn-color: #e3f0f7;
  --danger-color: #d4877a;
  --danger-hover-color: #e09a8e;
  --danger-bg-subtle: #3d2b28;
  --warning-color: #e0b888;
  --add-btn-bg-subtle: #1f3d38;
  --add-btn-color: #7aab8a;
  --add-btn-hover-bg-subtle: #294840;
  --chevron-color: #a8c5d8;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --track-light: #3d5566;
  --track-dark: #7db5d4;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}

.orange-blue-light {
  --bg: #f8fbff;
  --card-bg: #ffffff;
  --surface-alt: #e6f2ff;
  --row-hover: #f0f7ff;
  --border: #94c5f5;
  --border-rgb: 148, 197, 245;
  --table-border: #7eb5ed;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #94c5f5;
  --checkbox-color: #2563b8;
  --fgColor-muted: #4a7db8;
  --bgColor-muted: #e9f3ff;
  --bgColor-default: #ffffff;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #2563b815;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #6b91c4;
  --white: #ffffff;
  --black: #1a2433;
  --text: #1e3a5f;
  --text-light: #2563b8;
  --text-lighter: #4a7db8;
  --accent: #ff8c42;
  --accent-hover: #ff7828;
  --accent-light: #ffa666;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #e6f2ff;
  --secondary-btn-hover-bg: #d1e5ff;
  --secondary-btn-color: #1e3a5f;
  --danger-color: #e8756f;
  --danger-hover-color: #d96058;
  --danger-bg-subtle: #fff2f0;
  --warning-color: #ff9d5c;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #4a7db8;
  --shadow-color: rgba(37, 99, 184, 0.1);
  --track-light: #94c5f5;
  --track-dark: #ff8c42;
}

.orange-blue-dark {
  --bg: #0a1929;
  --card-bg: #132f4c;
  --surface-alt: #1a3a52;
  --row-hover: #0d2238;
  --border: #2d5373;
  --border-rgb: 45, 83, 115;
  --table-border: #3d6380;
  --fieldset-parent-background: #1f3d38;
  --input-border: 0.063rem solid #2d5373;
  --checkbox-color: #ff9966;
  --fgColor-muted: #7ea8c9;
  --bgColor-muted: #102842;
  --bgColor-default: #132f4c;
  --bgColor-success-emphasis: #5a8a75;
  --borderColor-translucent: #ffffff15;
  --button-primary-bgColor-hover: #6b9b87;
  --placeholder-color: #5d7a99;
  --white: #ffffff;
  --black: #000000;
  --text: #e3f2fd;
  --text-light: #90caf9;
  --text-lighter: #b3d9f7;
  --accent: #ff8c42;
  --accent-hover: #ff9d5c;
  --accent-light: #ffaa66;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #7aab8a;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #1a3a52;
  --secondary-btn-hover-bg: #24475f;
  --secondary-btn-color: #e3f2fd;
  --danger-color: #ff6b6b;
  --danger-hover-color: #ff8585;
  --danger-bg-subtle: #3d2222;
  --warning-color: #ffaa66;
  --add-btn-bg-subtle: #1f3d38;
  --add-btn-color: #7aab8a;
  --add-btn-hover-bg-subtle: #294840;
  --chevron-color: #90caf9;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --track-light: #2d5373;
  --track-dark: #ff8c42;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}

.red-yellow-light {
  --bg: #fffef8;
  --card-bg: #ffffff;
  --surface-alt: #fffbf0;
  --row-hover: #fffef5;
  --border: #dbdb00;
  --border-rgb: 219, 219, 0;
  --table-border: #c4c400;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #dbdb00;
  --checkbox-color: #ff2612;
  --fgColor-muted: #ff5540;
  --bgColor-muted: #fffef0;
  --bgColor-default: #ffffff;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #dbdb0020;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #a89900;
  --white: #ffffff;
  --black: #1a1a1a;
  --text: #2d2420;
  --text-light: #ff2612;
  --text-lighter: #ff5540;
  --accent: #dbdb00;
  --accent-hover: #ffff1a;
  --accent-light: #e8e833;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #fffbf0;
  --secondary-btn-hover-bg: #fff8e0;
  --secondary-btn-color: #2d2420;
  --danger-color: #ff2612;
  --danger-hover-color: #e62100;
  --danger-bg-subtle: #fff0ed;
  --warning-color: #dbdb00;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #ff5540;
  --shadow-color: rgba(255, 38, 18, 0.1);
  --track-light: #dbdb00;
  --track-dark: #ff2612;
}

.red-yellow-dark {
  --bg: #1a0a08;
  --card-bg: #2d1410;
  --surface-alt: #3d1f18;
  --row-hover: #240f0a;
  --border: #ff2612;
  --border-rgb: 255, 38, 18;
  --table-border: #e62100;
  --fieldset-parent-background: #1f3d38;
  --input-border: 0.063rem solid #ff2612;
  --checkbox-color: #dbdb00;
  --fgColor-muted: #ff7a66;
  --bgColor-muted: #331a12;
  --bgColor-default: #2d1410;
  --bgColor-success-emphasis: #5a8a75;
  --borderColor-translucent: #ff261220;
  --button-primary-bgColor-hover: #6b9b87;
  --placeholder-color: #b36b52;
  --white: #ffffff;
  --black: #000000;
  --text: #fff5e6;
  --text-light: #dbdb00;
  --text-lighter: #e8e833;
  --accent: #ff2612;
  --accent-hover: #ff4433;
  --accent-light: #ff6652;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #7aab8a;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #3d1f18;
  --secondary-btn-hover-bg: #4d2920;
  --secondary-btn-color: #fff5e6;
  --danger-color: #ff5540;
  --danger-hover-color: #ff7060;
  --danger-bg-subtle: #3d1818;
  --warning-color: #dbdb00;
  --add-btn-bg-subtle: #1f3d38;
  --add-btn-color: #7aab8a;
  --add-btn-hover-bg-subtle: #294840;
  --chevron-color: #dbdb00;
  --shadow-color: rgba(0, 0, 0, 0.6);
  --track-light: #ff2612;
  --track-dark: #dbdb00;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}


.purple-white-light {
  --bg: #fafbff;
  --card-bg: #ffffff;
  --surface-alt: #f5f7ff;
  --row-hover: #f8f9ff;
  --border: #c4b5fd;
  --border-rgb: 196, 181, 253;
  --table-border: #b3a0f5;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #c4b5fd;
  --checkbox-color: #7c3aed;
  --fgColor-muted: #8b5cf6;
  --bgColor-muted: #f5f3ff;
  --bgColor-default: #ffffff;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #7c3aed15;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #a78bfa;
  --white: #ffffff;
  --black: #1f1f1f;
  --text: #2e2541;
  --text-light: #7c3aed;
  --text-lighter: #8b5cf6;
  --accent: #a855f7;
  --accent-hover: #9333ea;
  --accent-light: #c084fc;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #f5f7ff;
  --secondary-btn-hover-bg: #ede9fe;
  --secondary-btn-color: #2e2541;
  --danger-color: #dc2626;
  --danger-hover-color: #b91c1c;
  --danger-bg-subtle: #fef2f2;
  --warning-color: #f59e0b;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #8b5cf6;
  --shadow-color: rgba(124, 58, 237, 0.1);
  --track-light: #c4b5fd;
  --track-dark: #a855f7;
}

.purple-white-dark {
  --bg: #1a1625;
  --card-bg: #251f3a;
  --surface-alt: #2f2847;
  --row-hover: #1f1a2e;
  --border: #5b4a8a;
  --border-rgb: 91, 74, 138;
  --table-border: #6b5a9a;
  --fieldset-parent-background: #1f3d38;
  --input-border: 0.063rem solid #5b4a8a;
  --checkbox-color: #c4b5fd;
  --fgColor-muted: #a78bfa;
  --bgColor-muted: #221c33;
  --bgColor-default: #251f3a;
  --bgColor-success-emphasis: #5a8a75;
  --borderColor-translucent: #a855f718;
  --button-primary-bgColor-hover: #6b9b87;
  --placeholder-color: #7c6ba8;
  --white: #ffffff;
  --black: #0a0a0a;
  --text: #f5f3ff;
  --text-light: #c4b5fd;
  --text-lighter: #ddd6fe;
  --accent: #a855f7;
  --accent-hover: #c084fc;
  --accent-light: #d8b4fe;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #7aab8a;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #2f2847;
  --secondary-btn-hover-bg: #3a3252;
  --secondary-btn-color: #f5f3ff;
  --danger-color: #f87171;
  --danger-hover-color: #fca5a5;
  --danger-bg-subtle: #3d2222;
  --warning-color: #fbbf24;
  --add-btn-bg-subtle: #1f3d38;
  --add-btn-color: #7aab8a;
  --add-btn-hover-bg-subtle: #294840;
  --chevron-color: #c4b5fd;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --track-light: #5b4a8a;
  --track-dark: #a855f7;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}


.beige-white-light {
  --bg: #faf8f5;
  --card-bg: #ffffff;
  --surface-alt: #f5f0e8;
  --row-hover: #f8f5f0;
  --border: #d4c4af;
  --border-rgb: 212, 196, 175;
  --table-border: #c9b89f;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #d4c4af;
  --checkbox-color: #8b7355;
  --fgColor-muted: #a08968;
  --bgColor-muted: #f5f2ed;
  --bgColor-default: #ffffff;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #8b735515;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #b89d7d;
  --white: #ffffff;
  --black: #2d2420;
  --text: #3d342a;
  --text-light: #6f5d47;
  --text-lighter: #8b7355;
  --accent: #a08968;
  --accent-hover: #8b7355;
  --accent-light: #b89d7d;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #f5f0e8;
  --secondary-btn-hover-bg: #e8dfd1;
  --secondary-btn-color: #3d342a;
  --danger-color: #c75b4f;
  --danger-hover-color: #b34a3f;
  --danger-bg-subtle: #fef0ed;
  --warning-color: #d4a870;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #8b7355;
  --shadow-color: rgba(61, 52, 42, 0.08);
  --track-light: #d4c4af;
  --track-dark: #a08968;
}

.beige-white-dark {
  --bg: #1a1612;
  --card-bg: #2a2420;
  --surface-alt: #352f28;
  --row-hover: #1f1a15;
  --border: #574a3d;
  --border-rgb: 87, 74, 61;
  --table-border: #6a5a4d;
  --fieldset-parent-background: #1f3d38;
  --input-border: 0.063rem solid #574a3d;
  --checkbox-color: #d4c4af;
  --fgColor-muted: #b89d7d;
  --bgColor-muted: #2f2820;
  --bgColor-default: #2a2420;
  --bgColor-success-emphasis: #5a8a75;
  --borderColor-translucent: #d4c4af18;
  --button-primary-bgColor-hover: #6b9b87;
  --placeholder-color: #8a7459;
  --white: #ffffff;
  --black: #0d0a08;
  --text: #f5f0e8;
  --text-light: #d4c4af;
  --text-lighter: #e5d9c7;
  --accent: #c9b89f;
  --accent-hover: #d4c4af;
  --accent-light: #e0d4c2;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #7aab8a;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #352f28;
  --secondary-btn-hover-bg: #403930;
  --secondary-btn-color: #f5f0e8;
  --danger-color: #e8756f;
  --danger-hover-color: #f28c85;
  --danger-bg-subtle: #3d2722;
  --warning-color: #e8b875;
  --add-btn-bg-subtle: #1f3d38;
  --add-btn-color: #7aab8a;
  --add-btn-hover-bg-subtle: #294840;
  --chevron-color: #d4c4af;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --track-light: #574a3d;
  --track-dark: #c9b89f;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}


.pink-white-light {
  --bg: #fffafc;
  --card-bg: #ffffff;
  --surface-alt: #fff5f9;
  --row-hover: #fff8fb;
  --border: #ffc0d4;
  --border-rgb: 255, 192, 212;
  --table-border: #ffadc7;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #ffc0d4;
  --checkbox-color: #d946a3;
  --fgColor-muted: #ec4899;
  --bgColor-muted: #fef3f7;
  --bgColor-default: #ffffff;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #d946a315;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #f472b6;
  --white: #ffffff;
  --black: #1f1f1f;
  --text: #3d2331;
  --text-light: #d946a3;
  --text-lighter: #ec4899;
  --accent: #f472b6;
  --accent-hover: #ec4899;
  --accent-light: #f9a8d4;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #fff5f9;
  --secondary-btn-hover-bg: #ffe8f2;
  --secondary-btn-color: #3d2331;
  --danger-color: #dc2626;
  --danger-hover-color: #b91c1c;
  --danger-bg-subtle: #fef2f2;
  --warning-color: #f59e0b;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #ec4899;
  --shadow-color: rgba(217, 70, 163, 0.1);
  --track-light: #ffc0d4;
  --track-dark: #f472b6;
}

.pink-white-dark {
  --bg: #1a0f15;
  --card-bg: #2a1a22;
  --surface-alt: #3a252f;
  --row-hover: #1f1318;
  --border: #7d3a5f;
  --border-rgb: 125, 58, 95;
  --table-border: #8f456f;
  --fieldset-parent-background: #1f3d38;
  --input-border: 0.063rem solid #7d3a5f;
  --checkbox-color: #ffc0d4;
  --fgColor-muted: #f472b6;
  --bgColor-muted: #2f1d28;
  --bgColor-default: #2a1a22;
  --bgColor-success-emphasis: #5a8a75;
  --borderColor-translucent: #f472b618;
  --button-primary-bgColor-hover: #6b9b87;
  --placeholder-color: #a3506f;
  --white: #ffffff;
  --black: #0a0a0a;
  --text: #fff5f9;
  --text-light: #ffc0d4;
  --text-lighter: #ffd9e8;
  --accent: #f472b6;
  --accent-hover: #f9a8d4;
  --accent-light: #fbcfe8;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #7aab8a;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #3a252f;
  --secondary-btn-hover-bg: #4a2f3a;
  --secondary-btn-color: #fff5f9;
  --danger-color: #f87171;
  --danger-hover-color: #fca5a5;
  --danger-bg-subtle: #3d2222;
  --warning-color: #fbbf24;
  --add-btn-bg-subtle: #1f3d38;
  --add-btn-color: #7aab8a;
  --add-btn-hover-bg-subtle: #294840;
  --chevron-color: #ffc0d4;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --track-light: #7d3a5f;
  --track-dark: #f472b6;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}


.gray-orange-light {
  --bg: #f5f5f6;
  --card-bg: #fafafa;
  --surface-alt: #e8e8ea;
  --row-hover: #f0f0f2;
  --border: #a1a1aa;
  --border-rgb: 161, 161, 170;
  --table-border: #71717a;
  --fieldset-parent-background: #e8f5f0;
  --input-border: 0.063rem solid #a1a1aa;
  --checkbox-color: #52525b;
  --fgColor-muted: #71717a;
  --bgColor-muted: #e8e8ea;
  --bgColor-default: #fafafa;
  --bgColor-success-emphasis: #6b9b87;
  --borderColor-translucent: #52525b15;
  --button-primary-bgColor-hover: #5a8a75;
  --placeholder-color: #71717a;
  --white: #ffffff;
  --black: #09090b;
  --text: #18181b;
  --text-light: #3f3f46;
  --text-lighter: #52525b;
  --accent: #ff8c42;
  --accent-hover: #ff7828;
  --accent-light: #ffa666;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #5a8a75;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #e8e8ea;
  --secondary-btn-hover-bg: #d4d4d8;
  --secondary-btn-color: #18181b;
  --danger-color: #ef4444;
  --danger-hover-color: #dc2626;
  --danger-bg-subtle: #fef2f2;
  --warning-color: #ff9d5c;
  --add-btn-bg-subtle: #e0ebe8;
  --add-btn-color: #6b9b87;
  --add-btn-hover-bg-subtle: #d0ddd8;
  --chevron-color: #52525b;
  --shadow-color: rgba(82, 82, 91, 0.15);
  --track-light: #a1a1aa;
  --track-dark: #ff8c42;
}

.gray-orange-dark {
  --bg: #09090b;
  --card-bg: #18181b;
  --surface-alt: #27272a;
  --row-hover: #0f0f12;
  --border: #3f3f46;
  --border-rgb: 63, 63, 70;
  --table-border: #52525b;
  --fieldset-parent-background: #1f3d38;
  --input-border: 0.063rem solid #3f3f46;
  --checkbox-color: #ff9966;
  --fgColor-muted: #71717a;
  --bgColor-muted: #141417;
  --bgColor-default: #18181b;
  --bgColor-success-emphasis: #5a8a75;
  --borderColor-translucent: #ffffff12;
  --button-primary-bgColor-hover: #6b9b87;
  --placeholder-color: #52525b;
  --white: #ffffff;
  --black: #000000;
  --text: #fafafa;
  --text-light: #d4d4d8;
  --text-lighter: #e4e4e7;
  --accent: #ff8c42;
  --accent-hover: #ff9d5c;
  --accent-light: #ffaa66;
  --primary-btn-bg: #6b9b87;
  --primary-btn-hover-bg: #7aab8a;
  --primary-btn-color: #ffffff;
  --secondary-btn-bg: #27272a;
  --secondary-btn-hover-bg: #3f3f46;
  --secondary-btn-color: #fafafa;
  --danger-color: #f87171;
  --danger-hover-color: #fca5a5;
  --danger-bg-subtle: #3d2222;
  --warning-color: #ffaa66;
  --add-btn-bg-subtle: #1f3d38;
  --add-btn-color: #7aab8a;
  --add-btn-hover-bg-subtle: #294840;
  --chevron-color: #d4d4d8;
  --shadow-color: rgba(0, 0, 0, 0.6);
  --track-light: #3f3f46;
  --track-dark: #ff8c42;
  --logo-color: #fff;
  --submenu-arrow-light: url("/static/images/chevron-light.png");
  --settings-toggle-btn-icon: url("/static/images/settings-light.png");
  --menu-toggle-btn-icon: url("/static/images/list-light.png");
  --logo: url("/static/images/logo-light.png");
  --background-logo: url("/static/images/logo-light.svg");
  --linkedin-logo: url("/static/images/linkedin-dark-mode.png");
  --x-logo: url("/static/images/x-dark-mode.png");
  --email-logo: url("/static/images/email-dark-mode.png");
}




* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
}



body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: .313rem .75rem;
  font-size: var(--base-size-14);
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  background: var(--bgColor-muted);
  color: var(--text);
}

.flex-field-note input[type="date"]{
  height: 1.95rem;
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.sections-select button:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--accent) 15%, transparent);
  outline: none;
  background-color: var(--bgColor-default);
}


input[type="text"]:disabled,
input[type="url"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="password"]:disabled,
textarea:disabled,
select:disabled {
  color: var(--fgColor-muted);
  user-select:none;
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
}

input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

textarea {
  resize: none;
}

.label {
  display: block;
  font-weight: var(--base-text-weight-semibold);
  margin-bottom: 0.2rem;
  color: var(--text-light);
  font-size: var(--base-size-12);
}

.note {
  font-size: var(--base-size-12);
  color: var(--fgColor-muted);
  margin: var(--base-size-4) 0 .125rem;
}


kbd {
  display: inline-block;
  padding: var(--base-size-4);
  padding-top: unset;
  line-height: .625rem;
  color: var(--text);
  vertical-align: middle;
  background-color: var(--bgColor-muted);
  border: solid .063rem var(--border);
  border-radius: var(--borderRadius-medium);
  box-shadow: inset 0 -0.063rem 0 var(--border);
}

.required-star {
  color: var(--danger-color);
}


.flex-field-note,
.field {
  position: relative;
  width: -webkit-fill-available;
}

.flex-field-note .note,
.field .note {
  position: absolute;
  left: 1rem;
  bottom: calc(100% + 0.4rem);
  transform: translateY(0.15rem);
  max-width: 24rem;
  background: var(--bgColor-muted);
  color: var(--text);
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: 0.35rem 0.5rem;
  box-shadow: 0 0.25rem 0.75rem var(--shadow-color);
  font-size: var(--base-size-12);
  line-height: 1.35;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s step-end;
}

.flex-field-note:hover .note,
.flex-field-note:focus-within .note,
.field:hover .note,
.field:focus-within .note {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.flex-field-note .note.align-end {
  left: auto;
  right: 0;
}

.flex-field-note .note::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 100%;
  border: 0.4rem solid transparent;
  border-top-color: var(--border);
}

.flex-field-note .note::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: calc(100% - 0.063rem);
  border: 0.38rem solid transparent;
  border-top-color: var(--card-bg);
}

.invoice-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  line-height: 1;
}

.cta-background-text .logo{
  width: 100rem;
}

.invoice-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sr-only {
  position: absolute;
  width: .063rem;
  height: .063rem;
  margin: -.063rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.company-select,
.client-select,
.currency-select,
.modal_client_company_name-select,
.invoice-language-select,
.percent-amount-selection,
.modal-percent-amount-selection,
.amount-due-percent-amount-selection,
.lang-select,
.theme-select,
.sections-select {
  position: relative;
}

.company-select select,
.client-select select,
.modal_client_company_name-select select,
.percent-amount-selection select,
.modal-percent-amount-selection select,
.amount-due-percent-amount-selection select,
.lang-select select,
.theme-select select,
.sections-select button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.36rem 1.76rem 0.36rem 0.6rem;
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  color: var(--secondary-btn-color);
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
}

.sections-select button {
  text-align: left;
  white-space: nowrap;
}

.company-select select:focus,
.client-select select:focus,
.modal_client_company_name-select select:focus,
.percent-amount-selection select:focus,
.modal-percent-amount-selection select:focus,
.amount-due-percent-amount-selection select:focus,
.lang-select select:focus,
.theme-select select:focus,
.sections-select button:focus {
  border-color: var(--accent);
  outline: none;
}

.company-select select:hover,
.client-select select:hover,
.modal_client_company_name-select select:hover,
.percent-amount-selection select:hover,
.modal-percent-amount-selection select:hover,
.amount-due-percent-amount-selection select:hover,
.lang-select select:hover,
.theme-select select:hover,
.sections-select button:hover {
  border-color: var(--accent-hover);
}

.sections-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: max-content;
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid #767676;
  z-index: 1000;
  display: none;
  white-space: nowrap;
  user-select: none;
}

.sections-dropdown-content.show {
  display: block;
}

.section-item {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
}

.section-item:last-child {
  border-bottom: none;
}

.section-item input[type="checkbox"] {
  margin-right: 0.5rem;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.section-item input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 25%;
  border-left: 0.094rem solid transparent;
  border-bottom: 0.094rem solid transparent;
  transform: translate(-50%, -60%) rotate(-50deg) scale(0);
  transform-origin: center;
  transition: transform 0.18s ease-out, border-color 0.2s;
}

.section-item input[type="checkbox"]:checked:before {
  border-color: var(--checkbox-color);
  transform: translate(-50%, -60%) rotate(-50deg) scale(1);
}

.section-item label {
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  color: var(--text);
  cursor: pointer;
  flex: 1;
  white-space: nowrap;
}

.section-item:hover {
  background: var(--surface-alt);
}



.simplified-view-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--borderRadius-medium);
  background: var(--border);
  line-height: 0;
  position: relative;
  z-index: 60;
  flex-shrink: 0;
  cursor: pointer;
  height: var(--toggle-small);
}

.simplified-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: var(--borderRadius-medium);
  background: var(--border);
  line-height: 0;
  position: relative;
  z-index: 60;
  flex-shrink: 0;
  cursor: pointer;
}

.simplified-toggle .track {
  width: var(--toggle-big);
  height: var(--toggle-small);
  border-radius: var(--borderRadius-medium);
  background: var(--border);
  position: relative;
}

.simplified-toggle .thumb {
  position: absolute;
  width: var(--toggle-small);
  height: var(--toggle-small);
  background: var(--card-bg);
  display: grid;
  place-items: center;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  color: var(--secondary-btn-color);
  transition: transform .3s ease, color .3s ease, border-radius .3s ease;
  user-select: none;
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
}

/*.simplified-toggle .thumb:hover {
  background: var(--secondary-btn-bg);
}


#simplified-toggle:checked+.simplified-toggle .track .thumb:hover {
  background: var(--secondary-btn-bg);
}

.simplified-toggle .thumb:hover,
#simplified-toggle:checked+.simplified-toggle .track .thumb:hover{
  border-color: var(--accent);
}*/

.simplified-toggle .thumb-full {
  display: inline;
}

.simplified-toggle .thumb-simple {
  display: none;
}

#simplified-toggle:checked+.simplified-toggle .track .thumb-full {
  display: none;
}

#simplified-toggle:checked+.simplified-toggle .track .thumb-simple {
  display: inline;
}

#simplified-toggle:checked+.simplified-toggle .track {
  background: var(--border);
}

#simplified-toggle:checked+.simplified-toggle .track .thumb {
  transform: translateX(var(--toggle-shift));
  color: var(--secondary-btn-color);
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
}


#simplified-toggle:focus+.simplified-toggle {
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--border) 40%, transparent);
}


#articles_tva_selection,
#articles_discount_selection {
  width: unset;
}


.body-container {
  margin-left: 14vw;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  padding-bottom: 0;
}

.fieldsets-flex,
.section-cards-flex {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.section-card.last-sections {
  margin-bottom: 0;
}

.flex100 {
  flex: 100%;
}


.company-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bgColor-muted);
  border: var(--borderWidth-thin) solid var(--border);
  border-top: none;
  border-radius: var(--borderRadius-medium);
  max-height: 12.5rem;
  overflow-y: auto;
  z-index: 1000;
  font-size: var(--base-size-12);
}

.company-suggestion-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: var(--borderWidth-thin) solid var(--border);
}

.company-suggestion-item:hover {
  background-color: var(--bgColor-muted);
}

.company-suggestion-item:last-child {
  border-bottom: none;
}

.company-name-wrapper {
  position: relative;
}

.grid1 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid8 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.grid9 {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: start;
  gap: .5rem;
}

.invoice-body .hero-art {
  position: fixed;
  min-width: 30rem;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  transform: translateY(50%);
  z-index: 70;
  opacity: 0;
  transform: translateY(-50%) translateX(0.75rem);
  transition: opacity .24s ease-out, transform .24s ease-out;
  will-change: opacity, transform;
}

.invoice-body .hero-art.enter {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.invoice-body .hero-art.leave {
  opacity: 0;
  transform: translateY(-50%) translateX(0.75rem);
}

.invoice-body .hero-art .card.demo {
  background: var(--bg);
}

.invoice-body .demo-section {
  background: var(--bg);
}


.modal-overlay.hero-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  place-items: center;
}

.modal-overlay.hero-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0.031rem);
  -webkit-backdrop-filter: blur(0.031rem);
}

.modal-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.modal-close {
  background: var(--secondary-btn-bg);
  color: var(--secondary-btn-color);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  font-size: 1.25rem;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  cursor: pointer;
}

body.modal-open {
  overflow: auto;
}

#open-hero-btn {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.275rem;
  max-width: 0.275rem;
  background: var(--border);
  z-index: 70;
}

#open-hero-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2rem;
  width: 2rem;
  background: transparent;
  pointer-events: auto;
}

.hero-demo-button {
  height: 50%;
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.invoice-card {
  min-width: 100%;
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  padding: 1rem;
}

.invoice-card h1 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 600;
}

#invoice-form {
  display: grid;
  gap: 1rem;
}

.section-card {
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: 1rem 1rem;
  margin-bottom: 1rem;
}

.section-card .section-title {
  font-size: 1rem;
  text-align: left;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
}

.modal .section-title {
  font-size: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text);
}

.articles .section-title {
  font-size: 1rem;
  text-align: left;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--text);
}

.global-check {
  display: flex;
  flex-direction: column;
}

.property-menu .global-check {
  padding-inline-start: 0;
}

.property-menu .global-check>li {
  margin-inline-start: var(--base-size-24);
  list-style: none;
}


#create-model-modal .child-row.is-child,
#edit-model-modal .child-row.is-child {
  padding-inline-start: var(--base-size-24);
}

#create-model-modal .child-row.isChildsChild,
#edit-model-modal .child-row.isChildsChild {
  padding-inline-start: 3rem;
}

#accent-color-toggle {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.toggle-block.active .conditional.font-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  width: 100%;
}

#font-color-toggle {
  width: 100%;
}


.articles {
  position: relative;
  margin-bottom: 1rem;
}

#article-list input {
  margin-bottom: 0.6rem;
}

.icon-btn:hover {
  background: #4f46e5;
}

.tva-field {
  border: 0.05rem solid #e5e7eb;
  border-radius: 0.4rem;
  padding: 0.8rem;
}

.tva-field legend {
  padding: 0 0.4rem;
  font-weight: 600;
}

.tva-field label {
  margin-right: 1.2rem;
  cursor: pointer;
}

.input-disabled,
select:disabled {
  cursor: not-allowed;
}

.primary-btn {
  background: #10b981;
  color: #fff;
  border: none;
  padding: 0.64rem 0.96rem;
  font-size: 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.2s;
}

.primary-btn:hover {
  background: #059669;
}

.article-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.article-row input {
  flex: 1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.primary-btn {
  background: #10b981;
  color: #fff;
  border: none;
  padding: 0.64rem 1.12rem;
  font-size: 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.2s;
}

.primary-btn:hover {
  background: #059669;
}

.print-btn {
  background: var(--secondary-btn-bg);
  color: var(--secondary-btn-color);
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  padding: .313rem 1rem;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  cursor: pointer;
}

.print-btn:hover {
  background: var(--secondary-btn-hover-bg);
}

.article-table-wrapper {
  position: relative;
  margin-bottom: 0;
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  border-bottom-right-radius: 0;
  overflow: hidden;
}

#article-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.76rem;
}

#article-table th {
  background: #f9fafb;
  font-weight: var(--base-text-weight-medium);
  font-size: var(--base-size-14);
  text-align: left;
  padding: .313rem .75rem;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  border-right: 0.05rem solid #e0e0e0;
}


#article-table th:first-child,
#article-table td:first-child {
  width: 30%;
}

#article-table th:last-child,
#article-table td:last-child {
  width: 5%;
  text-align: center;
}

#article-table th:not(:first-child):not(:last-child),
#article-table td:not(:first-child):not(:last-child) {
  width: calc((100% - 30% - 5%) / 8);
}


.drag-handle-svg {
  position: absolute;
  left: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  cursor: grab;
  z-index: 10;
  filter: drop-shadow(0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.15));
}

.drag-handle-svg:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.4);
}

body.dragging {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

tr.article-row.is-dragging {
  position: absolute;
  opacity: 0.95;
  border-radius: 0.25rem;
  pointer-events: none;
  transition: box-shadow 0.3s ease;
}

.drag-placeholder td {
  border: none;
  padding: 0;
  transition: height 0.3s ease;
  background-color: transparent;
  border-radius: 0.125rem;
}

.drag-handle-svg circle {
  fill: var(--border);
  transition: fill 0.3s ease;
}

.drag-handle-svg:hover circle {
  fill: var(--border);
}

.drag-ghost {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 1000;
  border-collapse: collapse;
  border-radius: 0.25rem;
  opacity: 0.95;
  transition: transform 0.2s ease;
  table-layout: fixed;
  border-spacing: 0;
}

.drag-ghost td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.grand-total-row {
  position: absolute;
  right: 0;
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: .313rem 0.75rem;
  background: var(--surface-alt);
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-top: none;
  border-bottom-left-radius: var(--borderRadius-medium);
  border-bottom-right-radius: var(--borderRadius-medium);
}

.grandtotal,
.subtotal,
.amountdue {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

.grand-total-label,
.sub-total-label,
.amount-due-label {
  font-weight: var(--base-text-weight-semibold);
  font-size: var(--base-size-14);
}

.grand-total-amount,
.sub-total-amount,
.amount-due-amount {
  font-weight: var(--base-text-weight-semibold);
  font-size: var(--base-size-14);
  text-align: right;
}



.article-table-grand-total {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 0;
}

.grand-breakdown {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--gtr-h, 0rem) - 0.063rem);
  width: 30%;
  background: var(--surface-alt);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: .313rem 0.75rem;
  z-index: 50;

  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: opacity .15s ease, transform .15s ease, visibility .15s step-end;
}

.grand-total-row:hover+.grand-breakdown,
.grand-breakdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s;
}

.gd-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.gd-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--base-size-14);
}

.gd-row dt {
  color: var(--muted);
  font-weight: var(--base-text-weight-semibold);
  font-size: var(--base-size-14);
}

.gd-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.diff-color {
  color: var(--add-btn-color);
}

.gd-subtotal dt {
  color: var(--fg);
}

#article-table th:last-child {
  border-right: none;
}

#article-table td {
  padding: 0.24rem 0.4rem;
  border-top: 0.05rem solid #e5e7eb;
  vertical-align: middle;
}

.desc-editor {
  overflow: auto;
  padding: .36rem .4rem;
  border: 0.05rem solid transparent;
  border-radius: var(--borderRadius-medium);
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  font-size: var(--base-size-14);
  cursor: text;
}

.desc-editor:focus {
  background: var(--card-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--accent) 15%, transparent);
}

.desc-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--placeholder-color);
  pointer-events: none;
}


.percent-amount-tva,
.percent-amount-discount,
.percent-amount-additional-charges,
.percent-amount-shipping,
.modal-percent-amount-discount,
.modal-percent-amount-tva,
.amount-due-percent-amount {
  display: flex;
  gap: .5rem;
}

.percent-amount-selection {
  width: 25%;
}

.modal-percent-amount-selection {
  width: 30%;
}


.input-with-counter {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-counter input {
  flex: 1;
  padding-right: 3.5rem;
}

.character-counter {
  position: absolute;
  right: .313rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--base-size-12);
  color: var(--fgColor-muted);
  background: var(--surface-alt);
  padding: 0.125rem 0.375rem;
  border-radius: var(--borderRadius-small);
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.character-counter.near-limit {
  color: var(--warning-color);
  background: color-mix(in srgb, var(--warning-color) 10%, var(--bgColor-muted));
}

.character-counter.limit-reached {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 10%, var(--bgColor-muted));
  font-weight: var(--base-text-weight-semibold);
}


.big-field-editor {
  overflow: hidden;
  padding: .36rem .4rem;
  border: 0.05rem solid transparent;
  border-radius: var(--borderRadius-medium);
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  font-size: var(--base-size-14);
  cursor: text;
}

.big-field-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--placeholder-color);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  max-width: 100%;
}

.big-field-editor:not(:empty) {
  white-space: pre-wrap;
  overflow: auto;
}

.big-field-editor.bordered {
  padding: .313rem .75rem;
  border: var(--borderWidth-thin) solid var(--border);
  background: var(--bgColor-muted);
  border-radius: var(--borderRadius-medium);
  position: relative;
  resize: none;
}

.big-field-editor.bordered:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--accent) 15%, transparent);
  outline: none;
  background-color: var(--bgColor-default);
}

.big-field-editor.bordered::after {
  content: "";
  position: absolute;
  bottom: 0.125rem;
  right: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  background: linear-gradient(-45deg,
      transparent 0rem,
      transparent 0.0625rem,
      var(--text-light) 0.0625rem,
      var(--text-light) 0.125rem,
      transparent 0.125rem,
      transparent 0.25rem,
      var(--text-light) 0.25rem,
      var(--text-light) 0.3125rem,
      transparent 0.3125rem);
  cursor: nw-resize;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.big-field-editor.bordered:hover::after {
  opacity: 0.8;
}

.big-field-editor.bordered:focus::after {
  opacity: 1;
}


.desc-required {
  border-color: red !important;
  box-shadow: 0 0 0 0.1rem rgba(255, 0, 0, 0.5);
}

#article-table tbody tr:nth-child(even) {
  background: var(--bg);
}

#article-table tbody tr:hover {
  background: var(--card-bg);
}

#article-table input {
  width: 100%;
  border: 0.05rem solid transparent;
  padding: 0.36rem 0.4rem;
  border-radius: var(--borderRadius-medium);
  background: transparent;
  transition: border-color 0.2s, background 0.2s;
}

#article-table input:focus {
  background: #fff;
  border-color: #6366f1;
  box-shadow: 0 0 0 0.1rem rgba(99, 102, 241, 0.15);
  outline: none;
}


.icon-btn {
  position: absolute;
  right: -0.8rem;
  top: -0.8rem;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.44rem;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
  transition: transform 0.15s, background 0.2s;
}

.icon-btn:hover {
  background: #4f46e5;
  transform: scale(1.06);
}

.del-article {
  background: transparent;
  border: none;
  font-size: 1rem;
  color: #6b7280;
  width: 1.4rem;
  height: 1.4rem;
  cursor: pointer;
  line-height: 1;
  border-radius: var(--borderRadius-medium);
  transition: color 0.2s, background 0.2s;
}

.del-article:hover {
  color: #ef4444;
  background: #fee2e2;
}

#article-table tr.article-row {
  display: table-row !important;
  margin-bottom: 0;
  user-select: none;
}


.toggle-block {
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
  display: grid;
  align-items: center;
  gap: 0.6rem 1.6rem;
}

.toggle-block.fieldset-parent {
  display: block;
}

.toggle-block legend {
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  padding: 0 0.2rem;
  font-size: .8rem;
}

.toggle-block .conditional {
  display: none;
  grid-column: -1;
}

.toggle-block.active .conditional {
  display: block;
}

.add-row-btn,
.add-bulk-items-btn {
  background: #bef3e2;
  color: #10b981;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: var(--borderRadius-medium);
  margin: 0.52rem auto 0;
  outline: none;
}

.add-row-btn:hover,
.add-bulk-items-btn:hover {
  background: #bef3e2;
}

.lang-select {
  position: relative;
  display: inline-block;
}

.lang-select select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.36rem 1.76rem 0.36rem 0.6rem;
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  color: var(--secondary-btn-color);
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
}

.lang-select select:focus {
  border-color: var(--accent);
  outline: none;
}

.lang-select select:hover {
  border-color: var(--accent-hover);
}

.lang-select select:focus+.chevron {
  border-color: var(--accent);
}


.user-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: var(--borderRadius-medium);
  line-height: 1;
  cursor: pointer;
}

.user-avatar,
.user-initials {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--borderRadius-full);
  border: 0.063rem solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--base-text-weight-medium);
  font-size: var(--base-size-14);
  color: var(--secondary-btn-color);
  background: var(--card-bg);
  overflow: hidden;
  user-select: none;
}

.user-avatar:hover,
.user-initials:hover{
border-color: var(--accent);
}

.user-avatar {
  object-fit: cover;
}

.chevron {
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 0.6rem;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 0.1rem solid #6b7280;
  border-bottom: 0.1rem solid #6b7280;
  border-color: var(--chevron-color);
  transform: translateY(-60%) rotate(45deg);
  transition: border-color 0.18s;
}

.sr-only {
  position: absolute !important;
  width: 0.05rem;
  height: 0.05rem;
  padding: 0;
  margin: -0.05rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640rem) {

  .icon-btn {
    top: 0.4rem !important;
    right: 0.4rem !important;
    width: 1.76rem;
    height: 1.76rem;
    font-size: 1.12rem;
  }

}

select[name="currency"],
select[name="invoice_language"],
select[name="modal_currency"] {
  white-space: pre;
  appearance: none;
  -webkit-appearance: none;
  padding: .313rem .75rem;
  border-radius: var(--borderRadius-medium);
  cursor: pointer;
  user-select: none;

}

select[name="currency"] option {
  padding: 0.2rem 0.4rem;
}



.language-switcher {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 0.8rem;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  font-size: 0.72rem;
}

.language-switcher .theme-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: var(--borderRadius-medium);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--border);
  line-height: 0;
  position: relative;
  z-index: 60;
  flex-shrink: 0;
  cursor: pointer;
}

.language-switcher .theme-toggle .track {
  --track-light: var(--border);
  --track-dark: var(--border);

  width: var(--toggle-big);
  height: var(--toggle-small);
  border-radius: var(--borderRadius-medium);
  background: var(--track-light);
  position: relative;
}

.language-switcher .theme-toggle .thumb {
  position: absolute;
  width: var(--toggle-small);
  height: var(--toggle-small);
  background: var(--card-bg);
  display: grid;
  place-items: center;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  color: var(--secondary-btn-color);
  transition:
    transform .3s ease,
    color .3s ease,
    border-radius .3s ease;
  user-select: none;
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
}


.language-switcher .theme-toggle .thumb-light {
  display: inline;
}

.language-switcher .theme-toggle .thumb-dark {
  display: none;
}

#theme-toggle:checked+.theme-toggle .track .thumb-light {
  display: none;
}

#theme-toggle:checked+.theme-toggle .track .thumb-dark {
  display: inline;
}

#theme-toggle:checked+.theme-toggle .track {
  background: var(--track-dark);
}

#theme-toggle:checked+.theme-toggle .track .thumb {
  transform: translateX(var(--toggle-shift));
  color: var(--secondary-btn-color);
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
}



#theme-toggle:focus+.theme-toggle {
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--track-dark) 40%, transparent);
}



.language-switcher {
  gap: 0.8rem;
}

.toggle-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.language-switcher .scroll-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: var(--borderRadius-medium);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: var(--border);
  line-height: 0;
  position: relative;
  z-index: 60;
  flex-shrink: 0;
  cursor: pointer;
}

.language-switcher .scroll-toggle .track {
  width: var(--toggle-big);
  height: var(--toggle-small);
  border-radius: var(--borderRadius-medium);

  background: var(--border);
  position: relative;
}

.language-switcher .scroll-toggle .thumb {
  position: absolute;
  width: var(--toggle-small);
  height: var(--toggle-small);
  background: var(--card-bg);
  display: grid;
  place-items: center;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  color: var(--secondary-btn-color);
  transition: transform .3s ease, color .3s ease, border-radius .3s ease;
  user-select: none;
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
  border-top: 0;
}


.language-switcher .scroll-toggle .thumb-down {
  display: inline;
}

.language-switcher .scroll-toggle .thumb-up {
  display: none;
}

#scroll-toggle:checked+.scroll-toggle .track {
  background: var(--border);
}

#scroll-toggle:checked+.scroll-toggle .track .thumb {
  transform: translateX(var(--toggle-shift));
}

#scroll-toggle:checked+.scroll-toggle .track .thumb-down {
  display: none;
}

#scroll-toggle:checked+.scroll-toggle .track .thumb-up {
  display: inline;
}

#scroll-toggle:focus+.scroll-toggle {
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--track-dark) 40%, transparent);
}


.toggle-box {
  display: flex;
  flex-direction: column;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
}

.toggle-box .theme-toggle .track,
.toggle-box .scroll-toggle .track {
  width: var(--toggle-big);
  height: var(--toggle-small);
}

.invoice-card {
  background: var(--card-bg);
}

.icon-btn {
  background: var(--accent);
  color: #fff;
}

.icon-btn:hover {
  background: var(--accent-hover);
}

.primary-btn {
  background: var(--primary-btn-bg);
  color: var(--primary-btn-color);
}

.primary-btn:hover {
  background: var(--primary-btn-hover-bg);
}


.del-article {
  color: var(--danger-color);
}

.del-article:hover {
  color: var(--danger-hover-color);
  background: var(--danger-bg-subtle);
}

.add-row-btn,
.add-bulk-items-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 .5rem 0 0;
  border: 0.05rem solid var(--border);
  background: var(--add-btn-bg-subtle);
  color: var(--add-btn-color);
}


.add-row-btn:hover,
.add-bulk-items-btn:hover {
  border-color: var(--accent);
  background: var(--add-btn-hover-bg-subtle);
}

.items-add-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: flex-start;
  gap: .5rem;
}


.add-bulk-items-span,
.add-row-span {
  font-size: var(--base-size-14);
}

.tva-field,
.toggle-block {
  border-color: var(--border);
  background: var(--card-bg);
}

#article-table th {
  background: var(--surface-alt);
  border-right: 0.05rem solid var(--border);
}

#article-table td {
  border-top: 0.05rem solid var(--border);
}

#article-table tbody tr {
  background: var(--card-bg);
}

#article-table tbody tr:hover {
  background: var(--bg);
}

#article-table input {
  color: var(--text);
}

#article-table input:focus {
  background: var(--card-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--accent) 15%, transparent);
}


.toggle-block input[type="number"] {
  width: 40%;
}

.property-menu {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 60;
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0.48rem 0.64rem;
  background: var(--card-bg);
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  user-select: none;
}

.property-menu label {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  cursor: pointer;
  color: var(--fgColor-muted);
  padding: .375rem;
}

.property-menu label:hover{
  color: var(--text);
}

.property-menu input[type="checkbox"],
.bulk-item-card input[type="checkbox"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.property-menu input[type="checkbox"]::before,
.bulk-item-card input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 25%;
  border-left: 0.094rem solid transparent;
  border-bottom: 0.094rem solid transparent;
  transform: translate(-50%, -60%) rotate(-50deg) scale(0);
  transform-origin: center;
  transition: transform .18s ease-out, border-color .2s;
}

.property-menu input[type="checkbox"]:checked::before,
.bulk-item-card input[type="checkbox"]:checked::before {
  border-color: var(--checkbox-color);
  transform: translate(-50%, -60%) rotate(-50deg) scale(1);
}

.property-menu .property-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 0.64rem);
  margin: 0;
  border-color: var(--border);
  border-width: var(--borderWidth-thin);
  border-style: solid;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  flex-direction: column;
  z-index: 70;
  width: max-content;
}

.property-menu>li.with-submenu {
  position: relative;
}


.property-menu>li.with-submenu>.parent-label {
  position: relative;
  padding-left: 0.5rem;
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.property-menu>li.with-submenu>.parent-label:hover{
  border-left: var(--borderWidth-thin) solid var(--accent);
}

.property-menu>li.with-submenu:hover>.parent-label::before,
.property-menu>li.with-submenu.open>.parent-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.0.063rem;
  border-radius: var(--borderRadius-medium);
}

.with-submenu>.parent-label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-right: 1.5rem;
}

.with-submenu>.parent-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background: var(--submenu-arrow-light) no-repeat center;
  background-size: contain;
}

.property-menu>li.with-submenu:hover>.parent-label::after {
  transform: translateY(-50%);
}

.property-menu>li.with-submenu.open>.property-submenu {
  display: flex;
}



.property-menu>li.with-submenu>.property-submenu {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(100% + var(--submenu-gap));
  display: none;
  z-index: 100;
  max-inline-size: max-content;
  max-block-size: 60vh;
  overflow: auto;
}


.property-menu>li.with-submenu:hover>.property-submenu,
.property-menu>li.with-submenu.open>.property-submenu {
  display: flex;
  flex-direction: column;
}



.toggle-block input[type="file"] {
  width: 100%;
  padding: 0.36rem 0.4rem;
  border: 0.05rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}

.toggle-block input[type="file"]:focus {
  background: var(--card-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--accent) 15%, transparent);
  outline: none;
}

.file-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.file-select-btn {
  padding: 0.36rem 0.6rem;
  font-size: .8rem;
  border: 0.05rem solid var(--border);
  background: var(--add-btn-bg-subtle);
  color: var(--add-btn-color);
  border-radius: var(--borderRadius-medium);
  cursor: pointer;
  outline: none;
}

.file-select-btn:hover {
  border-color: var(--accent);
  background: var(--add-btn-hover-bg-subtle);
}

.file-name-display {
  flex: 1;
  padding: 0.36rem 0.4rem;
  border: 0.05rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  background: var(--surface-alt);
  color: var(--text-light);
  font-style: italic;
  cursor: default;
}

.toggle-block.active .conditional.contact-grid,
.toggle-block.active .conditional.client-contact-grid,
.toggle-block.active .conditional.bank-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.toggle-block.active .conditional.contact-grid .flex-field,
.toggle-block.active .conditional.client-contact-grid .flex-field,
.toggle-block.active .conditional.bank-details-grid .flex-field {
  display: flex;
  flex-direction: column;
}

.toggle-block.active .conditional.shipping-grid,
.toggle-block.active .conditional.client-contact-person-grid,
.toggle-block.active .conditional.client-address-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}

.toggle-block.active .conditional.shipping-grid .flex-field,
.toggle-block.active .conditional.client-contact-person-grid .flex-field,
.toggle-block.active .conditional.client-address-grid .flex-field {
  display: flex;
  flex-direction: column;
}


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

.status-unpaid-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: .5rem;
  flex: 1;
}


.radio-flex {
  margin-bottom: .5rem;
  display: flex;
  flex-direction: row;
  gap: .5rem;
}

.pricing-grid {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.pricing-grid .grid2 {
  flex: 1;
}

.pricing-toggle-separator {
  width: 0.063rem;
  border-radius: var(--borderRadius-full);
  height: 4rem;
  margin-inline: var(--base-size-4);
  background: var(--border);
}

.status-unpaid-grid .flex-field {
  display: flex;
  flex-direction: column;
}


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

.status-partial-grid .flex-field {
  display: flex;
  flex-direction: column;
}

#payment-status-toggle input[type="number"] {
  width: 100%;
}

.radio-group label.block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-bottom: 0.4rem;
  font-size: var(--base-size-14);
}

.radio-group label.block span {
  width: max-content;
  margin-bottom: unset;
}

.radio-group input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 1rem;
  min-height: 1rem;
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-full);
  position: relative;
  outline: none;
  cursor: pointer;
}

.radio-group input[type="radio"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 0.5rem;
  min-height: 0.5rem;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease-in-out;
}

.radio-group input[type="radio"]:checked {
  border-color: var(--accent);
}

.radio-group input[type="radio"]:checked::before {
  transform: translate(-50%, -50%);
}

.radio-group input[type="radio"]:hover {
  border-color: var(--accent);
}

.radio-group input[type="radio"]:focus {
  box-shadow: 0 0 0 0.188rem color-mix(in srgb, var(--accent) 30%, transparent);
}


.accent-picker {
  margin-bottom: 0.75rem;
}

#accent-color-toggle .accent-picker {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.accent-picker .note {
  text-align: center;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(10, 2.625rem);
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: fit-content;
  margin-inline: auto;
}

.swatch {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 624.938rem;
  border: 0.125rem solid var(--border);
  background: var(--swatch, #f1f5f9);
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.swatch[aria-checked="true"] {
  border-color: #94a3b8;
  box-shadow: 0 0 0 0.188rem rgba(148, 163, 184, .35);
}

.swatch:focus-visible {
  box-shadow: 0 0 0 0.188rem rgba(59, 130, 246, .45);
}

.swatch.custom {
  background: conic-gradient(from 0deg, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f87171);
  padding: 0.125rem;
  margin-bottom: unset;
}

.swatch.custom input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: 0.125rem solid #e2e8f0;
  width: 100%;
  height: 100%;
  border-radius: 624.938rem;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.swatch.custom input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 624.938rem;
}

.swatch.custom input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 624.938rem;
}

#prop-menu-container {
  position: fixed;
  top: 4.5rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: calc(100vh - 2rem);
  width: 13vw;
}

.scrollable-sidebar-section {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: none;
  border-radius: var(--borderRadius-medium);
}


.model-submenu.floating {
  position: fixed;
  z-index: 1000;
}


.floating-submenu {
  position: fixed;
  display: block;
  z-index: 1000;
  margin: 0;
  padding: 0.48rem 0.64rem;
  list-style: none;
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  width: max-content;
}

#models-list {
  display: grid;
  gap: 0.5rem;
}

#models-list .model-link.print-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .313rem .5rem .313rem 1rem;
  text-align: left;
  text-decoration: none;
  background-color: var(--card-bg);
}

#models-list .model-link.print-btn:hover {
  background-color: var(--secondary-btn-bg);
}

.models-title {
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  color: var(--text);
  margin-bottom: 0.4rem;
}




#models-list .model-link.print-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: .313rem .5rem .313rem 1rem;
}

.model-link-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--text);
  border: none;
  padding: 0 0 0 .5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  outline: none;
}

.model-link .model-link-dots-icon,
.invoice-link .model-link-dots-icon {
  width: 1rem;
  height: 1rem;
}

.model-link:hover .model-link-dots {
  opacity: 1;
}

.model-link.with-submenu {
  position: relative;
}

.model-link .model-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100%);
  margin: 0;
  padding: 0.48rem 0.64rem;
  list-style: none;
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  width: fit-content;
  z-index: 100;
}

.model-link.open .model-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
}


.model-submenu button {
  width: 100%;
  padding-left: 1.44rem;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--base-size-14);
  color: var(--fgColor-muted);
  cursor: pointer;
  outline: none;
}

.model-submenu button:hover {
  color: var(--text);
}

.model-submenu .remove-model:hover,
.model-submenu .remove-invoice:hover{
  color: var(--danger-color);
}



#others-models-list {
  display: grid;
  gap: 0.5rem;
}

#others-models-list .model-link.print-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: .313rem .5rem .313rem 1rem;
  text-align: left;
  text-decoration: none;
  background-color: var(--card-bg);
}

#others-models-list .model-link.print-btn:hover {
  background-color: var(--secondary-btn-hover-bg);
}

#others-models-list .model-link-dots {
  opacity: 0;
  transition: opacity .2s;
}

#others-models-list .model-link:hover .model-link-dots {
  opacity: 1;
}


#models-list .model-link.active,
#others-models-list .model-link.active,
#invoices-list .invoice-link.active {
  background-color: var(--secondary-btn-bg) !important;
}


#invoices-list {
  display: grid;
  gap: 0.5rem
}

#invoices-list .invoice-link.print-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: .313rem .5rem .313rem 1rem;
  text-align: left;
  text-decoration: none;
  background: var(--card-bg)
}

#invoices-list .invoice-link.print-btn:hover {
  background: var(--secondary-btn-hover-bg)
}

#invoices-list .model-link-dots {
  opacity: 0;
  transition: opacity .2s
}

#invoices-list .invoice-link:hover .model-link-dots {
  opacity: 1
}

.model-link {
  position: relative;
}

.model-submenu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  display: none;
  z-index: 100;
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
}

.model-link.open .model-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
}


.invoice-link .model-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100%);
  margin: 0;
  padding: 0.48rem 0.64rem;
  list-style: none;
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  width: fit-content;
  z-index: 100;
}

.invoice-link.open .model-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
}


.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0 0.64rem;
  margin-bottom: 0.8rem;
  transition: color 0.2s ease;
  user-select: none;
}

.section-chevron {
  width: 1em;
  height: 1em;
  background: var(--submenu-arrow-light) no-repeat center;
  background-size: contain;
  rotate: 90deg;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.collapsible-section.open .section-chevron {
  transform: rotate(0deg);
}

.collapsible-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  max-height: 0rem;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-section.open .collapsible-content {
  display: flex;
}


.collapsible-content#models-list,
.collapsible-content#others-models-list,
.collapsible-content#invoices-list {
  display: flex;
  max-height: 0rem;
}

.collapsible-section.open .collapsible-content#models-list,
.collapsible-section.open .collapsible-content#others-models-list,
.collapsible-section.open .collapsible-content#invoices-list {
  display: grid;
  gap: 0.5rem;
}


.collapsible-content span {
  width: 100%;
  max-width: 100%;

  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

  display: block;
  box-sizing: border-box;
}


#share-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#share-modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#share-modal .modal-card {

  width: 40%;
  padding: 1.8rem 2.2rem;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  color: var(--text);
  border: 0.063rem solid var(--border);

  transform: scale(.96);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
    opacity .28s ease;
}

#share-modal.show .modal-card {
  transform: scale(1);
  opacity: 1;
}

#share-modal .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--base-size-24);
  line-height: 1;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: .2rem;
  border-radius: var(--borderRadius-small);
}

#share-modal .modal-close:hover {
  color: var(--border);
}

#share-modal .modal-title {
  font-size: var(--base-size-20);
  font-weight: var(--base-text-weight-semibold);
  margin: 0 0 1rem 0;
}

#share-modal.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s step-end;
}


#share-url {
  width: 100%;
  padding: .55rem .8rem;
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  background: var(--surface-alt);
  font-size: var(--base-size-14);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  user-select: none;
  cursor: text;
}

#share-url.just-copied {
  animation: flash-bg 0.8s ease;
}

@keyframes flash-bg {
  0% {
    background-color: var(--border);
  }

  20% {
    background-color: var(--text);
  }

  100% {
    background-color: var(--border);
  }
}

#share-url::selection {
  background: transparent !important;
}

#share-url::-moz-selection {
  background: transparent !important;
}

.modal-warning {
  display: inline-block;
  color: var(--warning-color);
  font-size: var(--base-size-12);
  margin-top: 0.3rem;
}

.modal-warning::before {
  content: "⚠️";
  margin-right: 0.5em;
  vertical-align: top;
}

.modal-warning[hidden] {
  display: none !important;
}

.modal-warning[hidden]::before {
  content: none !important;
}

.modal-note,
#share-note {
  display: block;
  margin-top: .4rem;
  font-size: var(--base-size-12);
  color: var(--fgColor-muted);
}

#delete-note{
  display: block;
  margin-top: .4rem;
  font-size: var(--base-size-12);
  color: var(--danger-color);
}

#create-model-modal .child-list-container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  width: fit-content;
}

#create-model-modal .modal-note{
  padding: 1rem 0;
  width: 95%;
  border-top: var(--borderWidth-thin) solid var(--border);
  margin: 0 auto;
}

#create-model-modal .child-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#share-modal .modal-actions {
  margin-top: 1.4rem;
  display: flex;
  justify-content: flex-end;
}

#share-copy-btn {
  background: var(--bgColor-success-emphasis);
  color: var(--white);
  border: 0.063rem solid var(--borderColor-translucent);
  border-radius: var(--borderRadius-medium);
  padding: .313rem 1rem;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}

#share-copy-btn:hover {
  background: var(--button-primary-bgColor-hover);
}

#share-copy-btn:active {
  transform: scale(.96);
}


#remove-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#remove-modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#remove-modal .modal-card {
  width: 40%;
  padding: 1.8rem 2.2rem;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  color: var(--text);
  border: 0.063rem solid var(--border);

  transform: scale(.96);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
    opacity .28s ease;
}

#remove-modal.show .modal-card {
  transform: scale(1);
  opacity: 1;
}

#remove-modal .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--base-size-24);
  line-height: 1;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: .2rem;
  border-radius: var(--borderRadius-small);
}

#remove-modal .modal-close:hover {
  color: var(--border);
}

#remove-modal .modal-title {
  font-size: var(--base-size-20);
  font-weight: var(--base-text-weight-semibold);
  margin: 0 0 1rem 0;
}

#remove-modal .modal-actions {
  margin-top: 1.4rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

#remove-confirm-btn {
  background: var(--danger-hover-color);
  color: #fff;
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: .313rem 1rem;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}

#remove-confirm-btn:hover {
  background: var(--danger-color);
}

#remove-confirm-btn:active {
  transform: scale(.96);
}

#remove-cancel-btn {
  background: var(--secondary-btn-bg);
  color: var(--secondary-btn-color);
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: .313rem 1rem;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}

#remove-cancel-btn:hover {
  background: var(--secondary-btn-hover-bg);
}

#remove-cancel-btn:active {
  transform: scale(.96);
}


#options-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#options-modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#options-modal .modal-card {
  width: 40%;
  max-height: 85vh;
  padding: 1.8rem 2.2rem;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  color: var(--text);
  border: 0.063rem solid var(--border);
  display: flex;
  flex-direction: column;
  transform: scale(.96);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

#options-modal.show .modal-card {
  transform: scale(1);
  opacity: 1;
}

#options-modal .modal-title {
  font-size: var(--base-size-20);
  font-weight: var(--base-text-weight-semibold);
  margin: 0 0 1rem 0;
}

#options-modal .modal-message {
  color: var(--text-light);
  margin-bottom: .5rem;
}

#options-modal .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--base-size-24);
  line-height: 1;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: .2rem;
  border-radius: var(--borderRadius-small);
}

#options-modal .modal-close:hover {
  color: var(--border);
}

.guests-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 4.25rem);
  gap: 0.875rem;
  padding: 0.5rem 0;
  justify-content: center;
}

.guest-tile {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  border: 0.125rem solid var(--border, #e5e7eb);
  background: var(--bg, #f8fafc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: transform .08s ease;
}

.guest-tile.selected {
  outline: 0.1875rem solid var(--accent-color, #2563EB);
  outline-offset: 0.125rem;
}

.guests-container .loading {
  text-align: center;
  color: var(--text-light);
  padding: 2rem;
}

.guest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--borderRadius-small);
  margin-bottom: 0.5rem;
  background: var(--card-bg);
  transition: border-color 0.2s ease;
}

.guest-item:hover {
  border-color: var(--accent-color);
}

.guest-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.guest-avatar {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guest-avatar.initials {
  background: var(--bgColor-muted);
}

.guest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.guest-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  color: var(--text);
  padding: 0.375rem 0.5rem;
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .25);
  z-index: 10;
}

.guest-tile:hover .guest-tooltip {
  display: block;
}

.guest-details {
  display: flex;
  flex-direction: column;
}

.guest-name {
  font-weight: 500;
  color: var(--text);
}

.guest-email {
  font-size: 0.875rem;
  color: var(--text-light);
}

.remove-guest-btn {
  background: var(--danger-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--borderRadius-small);
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

.remove-guest-btn:hover {
  background: #dc2626;
}

.remove-guest-btn:disabled {
  background: var(--text-light);
  cursor: not-allowed;
}

.no-guests {
  text-align: center;
  color: var(--text-light);
  padding: 1rem 0;
  font-style: italic;
}

.guests-container .no-guests {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
}

#options-modal .modal-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

#remove-selected-btn {
  background: var(--danger-color);
  color: #fff;
  border: none;
  padding: .313rem 1rem;
  border-radius: var(--borderRadius-medium);
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

#remove-selected-btn:hover:not(:disabled) {
  background: var(--danger-hover-color);
}

#remove-selected-btn:active:not(:disabled) {
  transform: translateY(.02rem);
}

#remove-selected-btn:disabled {
  background: var(--danger-bg-subtle);
  color: var(--text-light);
  cursor: not-allowed;
  box-shadow: none;
}

#options-close-btn {
  background: var(--secondary-btn-bg);
  color: var(--secondary-btn-color);
  border: var(--borderWidth-thin) solid var(--border);
  padding: .313rem 1rem;
  border-radius: var(--borderRadius-medium);
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

#options-close-btn:hover {
  background: var(--secondary-btn-hover-bg);
  border-color: var(--accent);
}


#approve-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#approve-modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#approve-modal .modal-content {
  width: min(var(--card-max-w), 92vw);
  max-height: 85vh;
  padding: 1.8rem 2.2rem;
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  color: var(--text);
  border: 0.063rem solid var(--border);

  display: flex;
  flex-direction: column;
  transform: scale(.96);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
    opacity .28s ease;
}

#approve-modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

#approve-modal .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.4rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: .2rem;
  border-radius: var(--borderRadius-small);
  transition: background .15s, color .15s;
}

#approve-modal .modal-close:hover {
  color: var(--border);
}

#approve-modal .modal-header {
  padding: unset;
  background-color: var(--card-bg);
  margin-bottom: 1.2rem;
  border-bottom: unset;
}

#approve-modal .modal-header h2 {
  font-size: var(--base-size-20);
  font-weight: var(--base-text-weight-semibold);
  margin: 0;
}

#approve-modal #req-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

#approve-modal #req-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--surface-alt);
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  font-size: var(--base-size-14);
  border-radius: var(--borderRadius-medium);
  border: 0.063rem solid var(--border);
}

#approve-modal #req-list li:last-child {
  margin-bottom: 0;
}

#approve-modal #req-list li button {
  background: var(--bgColor-success-emphasis);
  color: var(--primary-btn-color);
  border: 0.063rem solid var(--borderColor-translucent);
  border-radius: var(--borderRadius-medium);
  padding: .313rem 1rem;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}

#approve-modal #req-list li button:hover {
  background: var(--button-primary-bgColor-hover);
}

#approve-modal #req-list li button:active {
  transform: scale(.96);
}


#prop-menu {
  position: static;
}

#create-model-btn,
#invoices-modal-btn {
  background: var(--card-bg);
  outline:none;
}

#create-model-btn:hover,
#invoices-modal-btn:hover {
  background: var(--secondary-btn-bg);
}


#home-btn {
  background: var(--card-bg);
}

#home-btn:hover {
  background: var(--secondary-btn-bg);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
}

.modal-overlay:not([hidden]) {
  display: flex;
}

.modal {
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  width: 70%;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
  border-bottom: var(--borderWidth-thin) solid var(--border);
}

.modal-header h2 {
  font-size: var(--base-size-20);
  font-weight: var(--base-text-weight-semibold);
}

.modal-close {
  background: none;
  border: none;
  padding: .2rem;
  color: var(--text-light);
  font-size: var(--base-size-24);
  line-height: 1;
  border-radius: var(--borderRadius-small);
  cursor: pointer;
}

.modal-close:hover {
  color: var(--border);
}


.modal-footer {
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-top: var(--borderWidth-thin) solid var(--border);

}

.modal-body {
  display: flex;
  flex: 1;
  overflow-x: auto;
  width: 100%;
  scrollbar-width: thin;
}

.modal-body-grid {
  display: grid;
  grid-template-columns: 20rem 1fr;
  flex: 1;
  min-height: 0;
}

.parent-list {
  border-right: var(--borderWidth-thin) solid var(--border);
  overflow-y: auto;
  scrollbar-width: thin;
}

.parent-list .modal-parent-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.parent-list .modal-parent-item.active {
  background: var(--surface-alt);
  font-weight: var(--base-text-weight-semibold);
}

.child-list {
  width: 100%;
  min-width: 40rem;
  padding: 1rem 1rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.child-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}


#create-model-modal .child-list label {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  cursor: pointer;
  color: var(--text);
}

#create-model-modal .child-list input[type="checkbox"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

#create-model-modal .child-list input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 25%;
  border-left: 0.094rem solid transparent;
  border-bottom: 0.094rem solid transparent;
  transform: translate(-50%, -60%) rotate(-50deg) scale(0);
  transform-origin: center;
  transition: transform .18s ease-out, border-color .2s;
}

#create-model-modal .child-list input[type="checkbox"]:checked::before {
  border-color: var(--checkbox-color);
  transform: translate(-50%, -60%) rotate(-50deg) scale(1);
}

#create-model-modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#create-model-modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#create-model-modal .modal {
  transform: scale(.96);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

#create-model-modal.show .modal {
  transform: scale(1);
  opacity: 1;
  height: 80vh;
}


.child-row {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.child-row>label {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  cursor: pointer;
  color: var(--text);
}

.child-row input[type="checkbox"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.child-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 25%;
  border-left: 1..313rem solid transparent;
  border-bottom: 1..313rem solid transparent;
  transform: translate(-50%, -60%) rotate(-50deg) scale(0);
  transform-origin: center;
  transition: transform .18s ease-out, border-color .2s;
}

.child-row input[type="checkbox"]:checked::before {
  border-color: var(--checkbox-color);
  transform: translate(-50%, -60%) rotate(-50deg) scale(1);
}


.modal-model-name {
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
  border-bottom: var(--borderWidth-thin) solid var(--border);
}

.modal-model-name label {
  display: block;
  font-weight: var(--base-text-weight-semibold);
  color: var(--text);
  margin-bottom: 0.25rem;
}

.modal-model-name input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  font-size: var(--base-size-14);
  box-sizing: border-box;
}


.save-data-label {
  position: absolute;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.44rem;
  cursor: pointer;
}


::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.6rem;
}

::-webkit-scrollbar-track {
  background: var(--card-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: var(--borderRadius-medium);
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--border);
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--card-bg);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background-color: var(--border);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background-color: var(--border);
}

* {
  scrollbar-width: auto;
  scrollbar-color: rgba(131, 129, 149, .6) transparent;
}

.dark-mode * {
  scrollbar-color: rgba(131, 129, 149, .6) transparent;
}

::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}



input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text, #fff);
  transition: background-color 9999s ease-out, color 9999s ease-out;
  transition-delay: 9999s;
  box-shadow: 0 0 0 1000rem var(--bgColor-muted) inset !important;
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  caret-color: var(--text);
}


.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode select:-webkit-autofill {
  box-shadow: 0 0 0 1000rem var(--bgColor-muted) inset !important;
  -webkit-text-fill-color: var(--text, #e2e8f0);
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
}



.page-footer {
  text-align: center;
  font-size: var(--base-size-12);
  color: var(--fgColor-muted);
  padding: .2rem 0;
}

.page-footer a{
  font-size: unset;
  font-weight: unset;
  color: unset;
}

.page-footer a:hover{
  text-decoration: underline;
}

.items-table-link {
  --collapsed-w: 4vw;
  --expanded-w: 8vw;
  --t-fade: .24s ease-in-out;
  position: fixed;
  inset-inline-end: 0;
  right: 1rem;
  z-index: 70;
  width: var(--toggle-small);
  height: var(--toggle-small);
  background: var(--card-bg);
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  overflow: visible;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: width var(--t-fade), opacity var(--t-fade);
}

.items-table-link.show {
  opacity: 1;
  pointer-events: auto;
}

.items-table-link:hover,
.items-table-link:focus-visible {
  width: var(--expanded-w);
}


.items-table-link::after {
  content: attr(data-label);
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 0.25rem);
  text-align: center;
  white-space: nowrap;
  font-weight: var(--base-text-weight-semibold);
  font-size: var(--base-size-14);
  color: var(--secondary-btn-color);

  opacity: 0;
  transition: opacity var(--t-fade) .05s;
  pointer-events: none;
}


.items-table-link:hover::after,
.items-table-link:focus-visible::after {
  opacity: 1;
}

.items-table-link::before {
  content: '';
  position: absolute;
  inset-block: -1.375rem;
  inset-inline: auto;
  width: 8vw;
  height: 8vh;
  background: transparent;
  pointer-events: auto;
}

#menu-toggle-btn,
#settings-toggle-btn {
  display: none;
  position: fixed;
  z-index: 81;
  background-color: var(--card-bg);
  width: var(--toggle-big);
  height: 2rem;
  padding: 0;
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem 1.25rem;
  outline: none;
}

#menu-toggle-btn {
  top: 4.5rem;
  left: 1rem;
  background-image: var(--menu-toggle-btn-icon);
}

#settings-toggle-btn {
  top: .75rem;
  right: 1rem;
  z-index: 300;
  background-image: var(--settings-toggle-btn-icon);
}

#menu-toggle-btn img,
#settings-toggle-btn img {
  display: none;
}




.defaults-modal-body {
  padding: 1.5rem;
  height: auto;
  max-height: none;
}

.defaults-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}

.defaults-card {
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.defaults-card:hover {
  border-color: var(--accent);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1rem var(--shadow-color);
}

.defaults-card:active {
  transform: translateY(0);
}

.defaults-card h3 {
  font-size: var(--base-size-18);
  font-weight: var(--base-text-weight-semibold);
  color: var(--text);
}

#defaults-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#defaults-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#defaults-modal .modal {
  width: min(50rem, 92vw);
  max-height: 85vh;
}

#companies-modal .modal,
#clients-modal .modal,
#items-modal .modal,
#bulk-add-items-modal .modal {
  width: 70%;
  height: 80vh;
  display: flex;
  flex-direction: column;
}

#invoices-modal .modal {
  width: 80%;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

#companies-modal,
#clients-modal,
#items-modal,
#bulk-add-items-modal,
#invoices-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

/*#invoices-modal{
  visibility: visible;
  opacity: 1;
}*/


#companies-modal.show,
#clients-modal.show,
#items-modal.show,
#bulk-add-items-modal.show,
#invoices-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}


#invoices-modal .section-card{
  margin-bottom: 0;
}

#send-invoice-form{
  margin: 0 auto;
  width: 100%;
}


#user-manual-btn,
#add-defaults-btn {
  width: var(--toggle-small);
  height: var(--toggle-small);
  border-radius: var(--borderRadius-medium);
  background-color: var(--card-bg);
  color: var(--secondary-btn-color);
  border: 0.063rem solid var(--border);
  font-weight: var(--base-text-weight-medium);
  font-size: var(--base-size-14);
  cursor: pointer;
  outline: none;
}

#user-manual-btn:hover,
#add-defaults-btn:hover {
  background-color: var(--secondary-btn-bg);
  border-color: var(--accent);
}

#user-manual-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  align-items: center;
  justify-content: center;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#user-manual-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#user-manual-modal .modal {
  width: 70%;
  height: 80vh;
  background: var(--surface-alt);
  color: var(--text);
  border-radius: var(--borderRadius-medium);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
}

#user-manual-modal .modal-body {
  height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
}


.manual-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.manual-section {
  background: var(--card-bg);
}

.manual-section h3 {
  background: var(--surface-alt);
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: var(--base-size-16);
  font-weight: var(--base-text-weight-semibold);
  color: var(--text);
  border-bottom: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
}

.section-content {
  padding: 1rem;
}

.section-content p {
  margin: 0 0 0.75rem 0;
  color: var(--text-light);
  line-height: 1.5;
}

.section-content ul {
  list-style: disc;
  padding-left: 1.2rem;
  color: var(--text-light);
  line-height: 1.6;
}

.section-content li {
  margin-bottom: 0.5rem;
}

.section-content li:last-child {
  margin-bottom: 0;
}

.section-content kbd {
  background-color: var(--surface-alt);
  border-radius: var(--borderRadius-small);
  border: var(--borderWidth-thin) solid var(--border);
  padding: 0.1rem 0.4rem;
  font-size: 0.875rem;
  font-family: monospace;
  user-select: none;
  margin: 0 0.2rem;
  color: var(--text);
}

#user-manual-modal .user-manual-modal-header,
.user-company-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--borderWidth-thin) solid var(--border);
}

#user-manual-modal .user-manual-modal-header h2,
.user-company-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

#close-manual-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

#user-manual-modal ul {
  list-style: disc;
  padding-left: 1.2rem;
  color: var(--text-light);
}

#user-manual-modal .modal-close {
  font-size: 1.4rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: .2rem;
  border-radius: var(--borderRadius-small);
  transition: background .15s, color .15s;
}

#user-manual-modal .modal-close:hover {
  color: var(--border);
}



.saved-items-categories-container,
.saved-items-container,
.saved-bulk-add-items-categories-container,
.saved-bulk-add-items-container,
.saved-clients-companies-container,
.saved-clients-container,
.invoices-companies-container,
.invoices-clients-container {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  overflow: auto;
  scrollbar-width: thin;
}

.saved-clients-companies-container,
.saved-items-categories-container{
  padding: 0 1rem 1rem;
}


.invoice-breakdown-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  scrollbar-width: thin;
}

.saved-items-container,
.saved-bulk-add-items-container,
.saved-clients-container,
.invoice-breakdown-container,
.profile-parent-container,
.invoices-clients-container{
  border-right: var(--borderWidth-thin) solid var(--border);
}

.invoice-breakdown{
  width: 100%;
  height: 100%;
  padding: 1rem;
  gap: 1rem;
  justify-content: space-between;
  overflow-y: auto;
  scrollbar-width: thin;
}

.invoice-breakdown-card{
  width: 100%;
  min-height: 25rem;
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  display: flex;
  flex-direction: column;
}

.invoice-breakdown-header,
.invoice-breakdown-body,
.invoice-breakdown-footer{
  min-height: 4rem;
}

.invoice-breakdown-header{
  display: flex;
  gap: .375rem;
  flex-direction: column;
  border-bottom: var(--borderWidth-thin) solid var(--border);
  width: 85%;
  margin: 0 auto;
  height: fit-content;
  padding: 1rem;
  flex-shrink: 0;
}

.invoice-breakdown-header .flex-field {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.invoice-breakdown-header .big-field-editor.bordered,
.invoice-breakdown-footer .big-field-editor.bordered{
  border: none;
  background: var(--card-bg);
  text-align: center;
  min-height: 1.95rem;
}

.invoice-breakdown-header label:nth-child(1) .big-field-editor.bordered{
  font-size: var(--base-size-18);
}

.invoice-breakdown-header label:nth-child(2) .big-field-editor.bordered{
  font-size: var(--base-size-24);
  color: var(--danger-color);
  font-weight: bold;
}

.invoice-breakdown-body {
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.invoice-breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.invoice-row {
  display: flex;
  gap: 0.375rem;
  min-height: 0;
}

.view-invoice-button{
  background-color: var(--bgColor-success-emphasis);
  min-height: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: var(--borderRadius-medium);
  width: 80%;
}

.invoice-breakdown-body .view-invoice-button .big-field-editor.bordered{
  font-size: var(--base-size-18);
  color: var(--white);
}

.invoice-breakdown-body .flex-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.invoice-breakdown-footer{
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
}

.invoice-breakdown-body .big-field-editor.bordered {
  border: none;
  background: transparent;
  min-height: 1.95rem;
  font-size: var(--base-size-16);
}

.invoice-breakdown-footer .big-field-editor.bordered {
  border: none;
  background: transparent;
  min-height: 1.95rem;
  font-size: var(--base-size-16);
}

.invoice-breakdown-body .big-field-editor.bordered::after,
.invoice-breakdown-header .big-field-editor.bordered::after,
.invoice-breakdown-footer .big-field-editor.bordered::after {
  display: none;
}

.bordered-right{
  text-align: end;
}

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

.bordered-left{
  text-align: start;
  font-weight: bold;
}


.invoice-breakdown-body{
  height: 100%;
}

.invoice-breakdown-footer{
  border-top: var(--borderWidth-thin) solid var(--border);
  justify-self: flex-end;
}


.add-invoice-breakdown-container,
.add-invoice-attachment{
  width: 100%;
  border-top: var(--borderWidth-thin) solid var(--border);
  height: 4rem;
  display: flex;
  padding: 1rem;
}


.add-invoice-breakdown {
  display: flex;
  align-items: center;
  width: 100%;
  user-select: none;
}

.add-invoice-breakdown input[type="checkbox"] {
  margin-right: 0.5rem;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
  position: relative;
  flex-shrink: 0;
  outline: none;
}

.add-invoice-breakdown input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 25%;
  border-left: 0.094rem solid transparent;
  border-bottom: 0.094rem solid transparent;
  transform: translate(-50%, -60%) rotate(-50deg) scale(0);
  transform-origin: center;
  transition: transform 0.18s ease-out, border-color 0.2s;
}

.add-invoice-breakdown input[type="checkbox"]:checked:before {
  border-color: var(--checkbox-color);
  transform: translate(-50%, -60%) rotate(-50deg) scale(1);
}

.add-invoice-breakdown label {
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  color: var(--text);
  cursor: pointer;
  flex: 1;
  white-space: nowrap;
}

.add-invoice-breakdown-container:hover,
.add-invoice-attachment:hover {
  background: var(--surface-alt);
  cursor: pointer;
}


.invoice-attachment-checkbox-container{
  display: flex;
}

.add-invoice-attachment .add-invoice-breakdown{
  justify-content: space-between;
  gap: 1rem;
}


.invoice-attachment-name-container{
  display: flex;
  gap: .5rem;
}


#invoice-attachment-name:disabled {
  background-color: var(--surface-alt);
}

.invoice-attachment-extension{
  font-size: var(--base-size-14);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: .313rem .5rem;
  background-color: var(--surface-alt);
  cursor: default;
  user-select: none;
}


/*.saved-items-categories-container,
.saved-bulk-add-items-categories-container,
.saved-clients-companies-container {
  margin-bottom: 1rem;
}*/

.saved-items-category-modal,
.saved-bulk-add-items-category-modal,
.saved-clients-company-modal {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow: auto;
  scrollbar-width: thin;
}


.invoices-company-modal{
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.category-card,
.bulk-category-card,
.client-company-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.313rem 0.313rem 0.313rem 1rem;
  background: var(--card-bg);
  border: .063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
  word-break: break-word;
}

.category-card:hover,
.bulk-category-card:hover,
.client-company-card:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.category-card.active-category,
.bulk-category-card.active-bulk-category,
.client-company-card.active-client-company {
  background: var(--surface-alt);
  color: var(--text);
}

.category-name,
.bulk-category-name,
.client-company-name {
  font-size: var(--base-size-14);
  text-align: start;
}

.category-count,
.bulk-category-count,
.client-company-count {
  font-size: var(--base-size-12);
  color: var(--text);
  background: var(--border);
  padding: 0.125rem 0.5rem;
  border-radius: var(--borderRadius-small);
}

.category-card.active-category .category-count,
.bulk-category-card.active-bulk-category .bulk-category-count,
.client-company-card.active-client-company .client-company-count {
  color: var(--text);
  background: var(--border);
}



.company-modal-body,
.client-modal-body,
.item-modal-body,
.bulk-add-item-modal-body,
.send-invoice-modal-body,
.profile-modal-body,
.invoices-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.client-modal-content .grid2 label:nth-last-child(2) {
  grid-column: 1 / -1;
}

.client-modal-content .grid2 label:last-child {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.client-modal-content .grid2 label:last-child #send-invoice-email-body,
.client-modal-content .grid2 label:last-child #client-modal-email-body {
  min-height: 10rem;
}



.child-list .invoice-breakdown-card label {
  margin-bottom: unset;
}

#send-invoice-form .grid3 label:nth-last-child(2) {
  grid-column: 1 / -1;
}

#send-invoice-form .grid3 label:last-child {
  grid-column: 1 / -1;
  margin-bottom: 2rem;
}

#send-invoice-form .grid3 label:last-child .email-body-editor {
  min-height: 12rem;
  height: 100%;
}


.email-card {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: 0.25rem 0.5rem;
  margin: 0.125rem;
  font-size: var(--base-size-14);
  color: var(--text);
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  outline: none;
}

.email-card:focus {
  outline: 0.125rem solid var(--focus-color, #4A90E2);
  outline-offset: 0.125rem;
}

.email-card .email-text {
  pointer-events: none;
}

#send-invoice-cc.invalid-email,
#send-invoice-bcc.invalid-email {
  border-color: var(--danger-color) !important;
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--danger-color) 15%, transparent) !important;
}

#profile-form{
  display: flex;
  gap: 1rem;
  flex: 1;
}

#send-invoice-form .section-title,
#profile-form .section-title {
  font-size: 1rem;
  text-align: left;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
}

.company-modal-section,
.client-modal-section,
.item-modal-section,
.bulk-add-item-modal-section,
.send-invoice-modal-section,
.invoices-modal-section {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.manual-grid,
.company-modal-grid {
  display: grid;
  grid-template-columns: 17rem 1fr;
  flex: 1;
  background: var(--card-bg);
  min-height: 0;
  overflow: hidden;
}

.item-modal-grid,
.bulk-add-item-modal-grid,
.client-modal-grid,
.invoices-modal-grid {
  display: grid;
  grid-template-columns: 17rem 17rem 1fr;
  flex: 1;
  min-height: 0;
}

.send-invoice-modal-grid{
  display: grid;
  grid-template-columns: 24rem 1fr;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}


#user-manual-modal .modal-body,
#user-company-modal .modal-body {
  flex: 1;
  min-height: 0;
}

.manual-toc.parent-list,
.company-modal-toc.parent-list,
.client-modal-toc.parent-list,
.item-modal-toc.parent-list,
.bulk-add-item-modal-toc.parent-list,
.invoices-modal-toc.parent-list {
  display: flex;
  flex-direction: column;
  gap: 0.44rem;
  overflow-y: auto;
  border-right: var(--borderWidth-thin) solid var(--border);
  width: 100%;
  min-height: 0;
}

.manual-toc .manual-tab,
.company-modal-toc .company-modal-tab,
.client-modal-toc .client-modal-tab,
.item-modal-toc .item-modal-tab,
.bulk-add-item-modal-toc .item-modal-tab,
.invoices-modal-toc .invoices-modal-tab {
  width: 100%;
  text-align: start;
  border: none;
  padding: .5rem 1rem;
  background: var(--card-bg);
  line-height: 1.2;
  cursor: pointer;
  color: var(--text);
}

.manual-toc .manual-tab[aria-selected="true"],
.company-modal-toc .company-modal-tab[aria-selected="true"],
.client-modal-toc .client-modal-tab[aria-selected="true"],
.item-modal-toc .item-modal-tab[aria-selected="true"],
.bulk-add-item-modal-toc .item-modal-tab[aria-selected="true"],
.invoices-modal-toc .invoices-modal-tab[aria-selected="true"] {
  background: var(--surface-alt);
  color: var(--text);
  font-weight: var(--base-text-weight-semibold);
  outline: none;
}

.manual-content.child-list,
.company-modal-content.child-list,
.client-modal-content.child-list,
.item-modal-content.child-list,
.bulk-add-item-modal-content.child-list,
.profile-modal-content.child-list,
.invoices-modal-content.child-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 1rem;
}

.invoices-modal-content .grid3 .invoice-card{
  min-height: 100%;
}

.profile-modal-content.child-list{
  min-width: 45rem;
}

.profile-modal-content-container{
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.profile-modal-content{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 1rem;
}

.profile-modal-section{
  flex: 1;
}

.profile-modal-section .section-card{
  height: 100%;
}

.manual-section[hidden],
.company-modal-section[hidden],
.client-modal-section[hidden],
.item-modal-section[hidden],
.bulk-add-item-modal-section[hidden],
.send-invoice-modal-section[hidden],
.profile-modal-section[hidden] {
  display: none !important;
}


.item-modal-content .grid2 label:nth-child(3) {
  grid-column: 1 / -1;
}

.selected-item-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: .5rem 1rem;
  align-items: center;
  gap: .5rem;
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  word-break: break-all;
}

.selected-item-name {
  flex: 1;
}



.quantity-minus,
.quantity-plus {
  background: var(--card-bg);
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 1.2rem;
}

.quantity-minus:hover,
.quantity-plus:hover {
  color: var(--add-btn-color);
}


.visually-hidden {
  position: absolute !important;
  width: 0.063rem;
  height: 0.063rem;
  margin: -0.063rem;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}


#save-company-modal-btn,
#save-client-modal-btn,
#save-item-modal-btn,
#save-bulk-add-item-modal-btn,
#send-invoice-modal-btn,
#profile-modal-btn {
  background: var(--bgColor-success-emphasis);
  color: var(--white);
  border: 0.063rem solid var(--borderColor-translucent);
  border-radius: var(--borderRadius-medium);
  padding: .313rem 1rem;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
  align-self: flex-end;
  outline: none;
}

#profile-switch-account-btn,
#profile-sign-out-btn,
#profile-edit-btn{
  transition: transform .15s ease;
  outline: none;
}

#save-company-modal-btn:hover,
#save-client-modal-btn:hover,
#save-item-modal-btn:hover,
#save-bulk-add-item-modal-btn:hover,
#send-invoice-modal-btn:hover,
#profile-modal-btn:hover {
  background: var(--button-primary-bgColor-hover);
}

#save-company-modal-btn:active,
#save-client-modal-btn:active,
#save-item-modal-btn:active,
#save-bulk-add-item-modal-btn:active,
#send-invoice-modal-btn:active,
#profile-modal-btn:active,
#profile-delete-account-btn:active,
#profile-switch-account-btn:active,
#profile-sign-out-btn:active,
#profile-edit-btn:active {
  transform: scale(.96);
}


.profile-details-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: 100%;
}


.profile-details-container hr{
  border: var(--borderWidth-thin) solid var(--border);
  height: 8rem;
  border-radius: var(--borderRadius-full);
}


.profile-details-container .grid1{
  flex: 1;
}

#profile-delete-account-btn {
  background: var(--surface-alt);
  color: var(--fgColor-muted);
  border: 0.063rem solid var(--borderColor-translucent);
  border-radius: var(--borderRadius-medium);
  padding: .313rem 1rem;
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
  align-self: flex-end
}

#profile-delete-account-btn:hover {
  background: var(--danger-hover-color);
  color: var(--white);
}


.profile-modal-buttons-container{
  align-self: flex-end;
  justify-content: flex-end;
  display: flex;
  gap: .5rem;
}

.profile-modal-buttons-container button{
  width: max-content;
}

.saved-companies-modal .company-card,
.saved-clients-modal .client-card,
.saved-items-modal .item-card,
.saved-bulk-add-items-modal .bulk-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 0.313rem 0.5rem 0.313rem 1rem;
  text-align: left;
  border: .063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  background: var(--card-bg);
  font-size: 0.875rem;
  transition: all 0.15s ease;
  cursor: pointer;
  color: var(--text);
  word-break: break-word;
}

.saved-bulk-add-items-modal .bulk-item-card {
  padding: 0.313rem 1rem 0.313rem .5rem;
}

.company-card:hover,
.client-card:hover,
.item-card:hover,
.bulk-item-card:hover {
  background: var(--surface-alt);
}


.company-card .company-name,
.client-card .client-name,
.item-card .item-name,
.bulk-item-card .bulk-item-name {
  flex: 1;
  text-align: left;
}

.company-card[aria-selected="true"],
.client-card[aria-selected="true"],
.item-card[aria-selected="true"],
.bulk-item-card[aria-selected="true"] {
  background: var(--surface-alt);
}


.company-card .delete-btn,
.client-card .delete-btn,
.item-card .delete-btn,
.selected-item-card .selected-item-remove {
  border: none;
  background: transparent;
  color: var(--border);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0.25rem;
  border-radius: 0.125rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}


.company-card .delete-btn:hover,
.client-card .delete-btn:hover,
.item-card .delete-btn:hover,
.selected-item-card .selected-item-remove:hover {
  color: var(--danger-color);
}

.saved-companies-modal,
.saved-clients-modal,
.saved-items-modal,
.saved-bulk-add-items-modal,
.invoices-clients-modal {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow-y: auto;
  scrollbar-width: thin;
}


.bulk-item-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding-left: .5rem;
  cursor: pointer;
}

.bulk-item-price {
  font-size: var(--base-size-12);
  color: var(--fgColor-muted);
}


.selected-item-quantity {
  max-width: 4rem;
  text-align: center;
}


.notification-modal {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  animation: slideIn 0.3s ease-out;
}

.notification-modal.hidden {
  display: none;
}

.notification-modal.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

.notification-content {
  background: var(--bgColor-success-emphasis);
  border: var(--borderWidth-thin) solid var(--borderColor-translucent);
  border-radius: var(--borderRadius-medium);
  font-weight: var(--base-text-weight-semibold);
  color: var(--primary-btn-color);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.notification-content.warning {
  background: var(--warning-color);
}

.notification-content.error {
  background: var(--danger-color);
}

.notification-message {
  flex: 1;
  font-size: 0.9375rem;
}

.notification-delete {
  background: transparent;
  color: var(--primary-btn-color);
  border: none;
  font-size: var(--base-size-24);
  line-height: 1;
  cursor: pointer;
  padding: .2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
}

.notification-delete:hover{
  color: var(--card-bg);
}


@keyframes slideIn {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.5rem);
  }
}

@media (max-width: 40rem) {
  .notification-modal {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    transform: none;
  }

  @keyframes slideIn {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    to {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }
}




.confirmation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirmation-modal.hidden {
  display: none;
}

.confirmation-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.188rem);
  animation: fadeIn 0.2s ease-out;
}

.confirmation-content {
  position: relative;
  background: var(--card-bg);
  border: 0.063rem solid var(--border);
  border-radius: var(--borderRadius-medium);
  width: 90%;
  max-width: 28rem;
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}

.confirmation-header {
  padding: 1rem 1rem;
  border-bottom: 0.063rem solid var(--borderColor-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
}

.confirmation-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--base-text-weight-semibold);
  color: var(--fgColor-default);
}

.confirmation-close {
  background: none;
  border: none;
  color: var(--fgColor-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--borderRadius-medium);
  transition: background-color 0.2s;
}

.confirmation-close:hover {
  background-color: var(--bgColor-neutral-muted);
  color: var(--fgColor-default);
}

.confirmation-body {
  padding: 1rem;
}

.confirmation-message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fgColor-default);
}

.confirmation-actions {
  padding: 1rem 1rem;
  border-top: 0.063rem solid var(--borderColor-default);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  background: transparent;
}

.confirmation-btn {
  padding: .313rem 1rem;
  border-radius: var(--borderRadius-medium);
  font-size: 0.875rem;
  font-weight: var(--base-text-weight-semibold);
  cursor: pointer;
  transition: all 0.2s;
  border: 0.063rem solid transparent;
}

.confirmation-cancel {
  background: var(--bgColor-default);
  color: var(--fgColor-default);
  border-color: var(--border);
}

.confirmation-cancel:hover {
  background: var(--bgColor-neutral-muted);
}

.confirmation-confirm {
  background: var(--danger-hover-color);
  color: var(--white);
  border-color: var(--border);
}

.confirmation-confirm:hover {
  background: var(--danger-color);
}


button[value="print"] {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.15s ease;
}

button[value="print"]:active:not(:disabled) {
  transform: scale(0.9);
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}



#send-invoice-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#send-invoice-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#send-invoice-modal .modal{
  height: 80vh;
}


#profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#profile-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#profile-modal .modal{
  height: fit-content;
  max-height: 80vh;
}

.profile-modal-grid{
  display: grid;
  grid-template-columns: 20rem 1fr;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}


.profile-parent-container{
  display: flex;
  flex-direction: column;
}

.profile-parent-container .profile-picture-container{
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-parent-container .profile-info-container{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 0 1rem 1rem;
  align-items: center;
  justify-content: center;
}

.full-name-container{
  font-size: var(--base-size-24);
  text-align: center;
}

.username-container{
  font-size: var(--base-size-16);
  color: var(--fgColor-muted);
  text-align: center;
}

.profile-parent-container .profile-picture-container .user-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: var(--borderRadius-medium);
  line-height: 1;
  cursor: default;
}

.profile-parent-container .profile-picture-container .user-avatar,
.profile-parent-container .profile-picture-container .user-initials {
  width: 16.125rem;
  height: 16.125rem;
  border-radius: var(--borderRadius-full);
  border: var(--borderWidth-thin) solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--base-text-weight-medium);
  font-size: var(--base-size-14);
  color: var(--secondary-btn-color);
  background: var(--card-bg);
  overflow: hidden;
  cursor: default;
}

.profile-parent-container .profile-picture-container .user-avatar {
  object-fit: cover;
}

.profile-parent-container .profile-picture-container .user-initials{
  font-size: var(--base-size-80);
}


.profile-parent-container .profile-picture-container {
  position: relative;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-parent-container .profile-picture-container .edit-profile-picture {
  position: absolute;
  bottom: 1rem;
  left: 3rem;
  z-index: 10;
  background-color: var(--surface-alt);
  border-radius: var(--borderRadius-medium);
}

.profile-parent-container .profile-picture-container .edit-profile-picture:hover{
  background-color: var(--secondary-btn-hover-bg);
}


#profile-picture-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#profile-picture-crop-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#profile-picture-crop-modal .modal {
  width: max-content;
  max-height: 80vh;
  max-width: 90%;
}

#profile-picture-crop-modal .modal-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.crop-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 25rem;
  gap: 1rem;
}

.crop-image-container {
  position: relative;
  flex: 1;
  overflow: hidden;
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-full);
  background: var(--bg);
  aspect-ratio: 1 / 1 !important;
  width: 25rem;
  margin: 0 auto;
}

.crop-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25rem;
  height: 25rem;
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-full);
  box-shadow: 0 0 0 625rem rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}

#crop-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  user-select: none;
  cursor: move;
  touch-action: none;
}

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

.crop-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.crop-zoom-controls button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.crop-zoom-controls input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 0.313rem;
  background: var(--border);
  border-radius: var(--borderRadius-medium);
  outline: none;
}

.crop-zoom-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  background: var(--accent);
  border-radius: var(--borderRadius-full);
  cursor: pointer;
}

.crop-zoom-controls input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--accent);
  border-radius: var(--borderRadius-full);
  cursor: pointer;
  border: none;
}

.crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}



#delete-account-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(0.188rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
}

#delete-account-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

#delete-account-modal .modal {
  max-width: 40rem;
}

.delete-account-content {
  padding: 1rem;
  width: 100%;
}

.delete-account-content p:nth-child(1),
.delete-account-content strong{
  color: var(--danger-color);
}


.delete-account-content p {
  margin-bottom: 1rem;
  color: var(--text);
  font-size: var(--base-size-14);
}

.delete-account-content input[type="text"] {
  width: 100%;
  margin-bottom: 1rem;
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  background: var(--bgColor-muted);
  color: var(--text);
  font-size: var(--base-size-14);
}

.delete-account-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

#delete-confirm-btn:not(:disabled) {
  background-color: var(--danger-hover-color);
  color: white;
}

#delete-confirm-btn:disabled {
  background-color: var(--secondary-btn-bg);
  color: var(--fgColor-muted);
  cursor: not-allowed;
}




.delete-profile-picture {
  position: absolute;
  top: 1rem;
  right: 3rem;
  z-index: 10;
  padding: 0.25rem;
}

#profile-delete-picture-btn {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fgColor-danger);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
  outline: none;
}

#profile-delete-picture-btn:hover {
  color: var(--danger-color);
}


.filter-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.313rem 0.313rem 0.313rem 1rem;
  background: var(--card-bg);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  color: var(--text);
  font-size: var(--base-size-14);
  text-align: start;
  outline: none;
}

.filter-card:hover {
  background: var(--surface-alt);
  border-color: var(--border);
}

.filter-card.active-filter {
  background: var(--surface-alt);
  color: var(--text);
}

.filter-count {
  color: var(--text);
  background: var(--border);
  padding: 0.125rem 0.5rem;
  border-radius: var(--borderRadius-small);
  font-size: var(--base-size-12);
  text-align: center;
}

#display-invoices .grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

#display-invoices .invoice-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface-alt);
  border: var(--borderWidth-thin) solid var(--border);
  border-radius: var(--borderRadius-medium);
  padding: 1rem;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  height: 100%;
  min-height: 10rem;
  width: min-content;
}

#display-invoices .invoice-card:hover {
  border-color: var(--accent);
}

#display-invoices .invoice-card-header {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
}

.status-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--border);
  flex-shrink: 0;
}

#display-invoices .invoice-card[data-status="paid"] .status-dot { background-color: var(--bgColor-success-emphasis); }
#display-invoices .invoice-card[data-status="unpaid"] .status-dot { background-color: var(--danger-color); }
#display-invoices .invoice-card[data-status="partially_paid"] .status-dot { background-color: var(--warning-color); }

.invoice-number {
  font-family: inherit;
  font-size: var(--base-size-16);
  font-weight: var(--base-text-weight-semibold);
  color: var(--text);
  word-break: break-word;
}

.invoice-card-body {
  margin-bottom: 1rem;
  display: flex;
  flex: 1;
}

.invoice-dates-grid {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: flex-end;
  gap: 0.5rem;
}

.date-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--base-size-14);
}

.date-label {
  color: var(--text-light);
}

.date-value {
  color: var(--text);
  font-weight: var(--base-text-weight-medium);
  font-variant-numeric: tabular-nums;
}

.invoice-card-footer {
  display: flex;
  gap: .5rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  margin-top: auto;
  padding-top: 1rem;
  border-top: var(--borderWidth-thin) dashed var(--border);
}

.total-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.total-label {
  font-size: 0.75rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invoice-total {
  display: flex;
  align-items: flex-end;
  gap: .313rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1;
}

.invoice-status-text {
  font-size: var(--base-size-14);
  font-weight: var(--base-text-weight-medium);
  text-align: end;
  align-self: end;
}

.currency-code {
  font-size: var(--base-size-12);
  opacity: 0.8;
}

#display-invoices .invoice-card[data-status="paid"] .invoice-status-text { color: var(--bgColor-success-emphasis); }
#display-invoices .invoice-card[data-status="unpaid"] .invoice-status-text { color: var(--danger-color); }
#display-invoices .invoice-card[data-status="partially_paid"] .invoice-status-text { color: var(--warning-color); }

.no-data-message, .select-prompt {
  text-align: center;
  padding: var(--base-size-40);
  color: var(--fgColor-muted);
  font-style: italic;
}

.loading-spinner {
  text-align: center;
  padding: var(--base-size-40);
  color: var(--fgColor-muted);
}



.invoice-card-actions-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--borderRadius-small);
  cursor: pointer;
  z-index: 10;
  color: var(--text-light);
  transition: color 0.2s, background-color 0.2s;
}

.invoice-card-actions-btn:hover {
  color: var(--text);
}

.invoice-card-actions-btn .model-link-dots-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.invoice-card.has-menu-open {
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7);
}

.invoice-card.has-menu-open .invoice-card-header,
.invoice-card.has-menu-open .invoice-card-body,
.invoice-card.has-menu-open .invoice-card-footer {
  opacity: 0.3;
  pointer-events: none;
}

.invoice-card-actions-menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.invoice-card.has-menu-open .invoice-card-actions-menu {
  opacity: 1;
  visibility: visible;
  background-color: var(--surface-alt);
}

.invoice-card-action {
  background: none;
  width: 100%;
  border: none;
  padding: 0.25rem 0.5rem;
  color: var(--text-lighter);
  font-size: var(--base-size-16);
  font-weight: var(--base-text-weight-medium);
  cursor: pointer;
  transition: color 0.2s, transform 0.15s;
  text-align: center;
}

.invoice-card-action:hover {
  color: var(--text);
  text-decoration: wavy;
}

.invoice-card-action:active {
  transform: scale(0.95);
}


.model-link-cancel-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.invoice-card.has-menu-open .invoice-card-actions-btn {
  color: var(--text);
  background-color: var(--surface);
  z-index: 21;
}

.invoice-card.has-menu-open .invoice-card-actions-btn:hover {
  background-color: var(--surface-hover);
  color: var(--text-strong);
}

.invoice-card-action:hover[data-action="delete"]{
  color: var(--danger-color);
}


@media (max-width: 40rem) {
  .confirmation-content {
    width: 95%;
    max-width: none;
  }

  .confirmation-header,
  .confirmation-body,
  .confirmation-actions {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


@media (max-width: Fiftyem) {
  .manual-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .manual-toc.parent-list {
    flex-direction: row;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .5rem;
  }

  .manual-toc .manual-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

html[dir="rtl"] .invoice-card-actions-btn{
  left: 0.5rem;
  right: unset;
}

html[dir="rtl"] .filter-card{
  padding: 0.313rem 1rem 0.313rem 0.313rem;
}

html[dir="rtl"] .delete-profile-picture{
  left: 3rem;
  right: unset;
}

html[dir="rtl"] .profile-parent-container .profile-picture-container .edit-profile-picture{
  right: 3rem;
  left: unset;
}


html[dir="rtl"] .modal .section-title {
  text-align: right;
}


html[dir="rtl"] .section-chevron {
  transform: rotate(90deg);
}

html[dir="rtl"] .collapsible-section.open .section-chevron {
  transform: rotate(0deg);
}

html[dir="rtl"] .big-field-editor.bordered::after {
  left: 0.125rem;
  right: unset;
  background: linear-gradient(45deg,
      transparent 0rem,
      transparent 0.0625rem,
      var(--text-light) 0.0625rem,
      var(--text-light) 0.125rem,
      transparent 0.125rem,
      transparent 0.25rem,
      var(--text-light) 0.25rem,
      var(--text-light) 0.3125rem,
      transparent 0.3125rem);
}


html[dir="rtl"] #simplified-toggle:checked+.simplified-toggle .track .thumb {
  transform: translateX(var(--toggle-shift-rtl));
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
}


html[dir="rtl"] .sections-select button {
  text-align: right;
}

html[dir="rtl"] .section-item input[type="checkbox"] {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .add-invoice-breakdown input[type="checkbox"] {
  margin-right: 0;
  margin-left: 0.5rem;
}


html[dir="rtl"] .input-with-counter input {
  padding-right: 0.75rem;
  padding-left: 3.5rem;
}

html[dir="rtl"] .character-counter {
  right: auto;
  left: .313rem;
}






html[dir="rtl"] .company-select select,
html[dir="rtl"] .client-select select,
html[dir="rtl"] .modal_client_company_name-select select,
html[dir="rtl"] .percent-amount-selection select,
html[dir="rtl"] .modal-percent-amount-selection select,
html[dir="rtl"] .amount-due-percent-amount-selection select {
  padding: 0.36rem 0.6rem 0.36rem 1.76rem;
}




html[dir="rtl"] .drag-handle-svg {
  left: auto;
  right: 0.375rem;
}

html[dir="rtl"] .drag-ghost {
  transform-origin: top right;
}




html[dir="rtl"] .add-row-btn,
html[dir="rtl"] .add-bulk-items-btn {
  padding: 0 0 0 0.5rem;
}

html[dir="rtl"] .saved-bulk-add-items-modal .bulk-item-card {
  padding: 0.313rem .5rem 0.313rem 1rem;
}

html[dir="rtl"] .bulk-category-card,
html[dir="rtl"] .category-card,
html[dir="rtl"] .client-company-card {
  padding: 0.313rem 1rem 0.313rem 0.313rem;
}


html[dir="rtl"] .bulk-item-label {
  padding-right: .5rem;
  padding-left: 0;
  text-align: right;
}


html[dir="rtl"] .saved-items-container,
html[dir="rtl"] .saved-bulk-add-items-container,
html[dir="rtl"] .saved-clients-container,
html[dir="rtl"] .invoice-breakdown-container,
html[dir="rtl"] .profile-parent-container,
html[dir="rtl"] .invoices-clients-container {
  border-left: var(--borderWidth-thin) solid var(--border);
  border-right: unset;
}


html[dir="rtl"] .category-card {
  padding: 0.313rem 1rem 0.313rem 0.313rem;
}


html[dir="rtl"] .saved-companies-modal .company-card,
html[dir="rtl"] .saved-clients-modal .client-card,
html[dir="rtl"] .saved-items-modal .item-card,
html[dir="rtl"] .saved-bulk-add-items-modal .bulk-add-item-card {
  padding: .313rem 1rem .313rem .5rem;
  text-align: right;
}

html[dir="rtl"] .company-card .company-name,
html[dir="rtl"] .client-card .client-name,
html[dir="rtl"] .item-card .item-name,
html[dir="rtl"] .bulk-item-card .bulk-item-name {
  text-align: right;
}



html[dir="rtl"] .company-select select,
html[dir="rtl"] .client-select select {
  padding: 0.36rem .6rem 0.36rem 1.76rem;
}

html[dir="rtl"] .lang-select select,
html[dir="rtl"] .sections-select button,
html[dir="rtl"] .theme-select select {
  padding: 0.36rem .6rem 0.36rem 1.76rem;
}

html[dir="rtl"] .flex-field-note .note,
html[dir="rtl"] .field .note {
  left: auto;
  right: 1rem;
}

html[dir="rtl"] .flex-field-note .note.align-end {
  right: auto;
  left: 0;
}


html[dir="rtl"] .flex-field-note .note::after {
  left: auto;
  right: 1.5rem;
}

html[dir="rtl"] .flex-field-note .note::before {
  left: auto;
  right: 1.5rem;
}

html[dir="rtl"] .body-container {
  margin-right: 14vw;
  margin-left: 0;
}

html[dir="rtl"] #open-hero-btn::before {
  left: auto;
  right: -2rem;
}

html[dir="rtl"] .manual-grid {
  grid-template-columns: 17rem 1fr;
}

html[dir="rtl"] .manual-toc .manual-tab {
  text-align: right;
}

html[dir="rtl"] .items-table-link {
  transform-origin: 0% 50%;
  left: 1rem;
  right: unset;
}

html[dir="rtl"] .items-table-link::after {
  inset-inline: 0;
}

html[dir="rtl"] input[type="date"] {
  text-align: right;
}

html[dir="rtl"] .language-switcher {
  right: auto;
  left: 1rem;
}

html[dir="rtl"] .chevron {
  right: auto;
  left: 0.6rem;
}

html[dir="rtl"] #article-table th {
  border-left: 0.05rem solid var(--border);
  border-right: none;
}

html[dir="rtl"] #article-table th:first-child {
  border-right: none;
  border-top-left-radius: none !important;
  text-align: right;
}

html[dir="rtl"] #article-table th:nth-child(2),
html[dir="rtl"] #article-table th:nth-child(3),
html[dir="rtl"] #article-table th:nth-child(4),
html[dir="rtl"] #article-table th:nth-child(5),
html[dir="rtl"] #article-table th:nth-child(6),
html[dir="rtl"] #article-table th:nth-child(7),
html[dir="rtl"] #article-table th:nth-child(8),
html[dir="rtl"] #article-table th:nth-child(9) {
  text-align: right;
}

html[dir="rtl"] #article-table th:last-child {
  border-left: none;
}

html[dir="rtl"] .property-menu {
  left: auto;
  right: 1rem;
  text-align: right;
}

html[dir="rtl"] .property-menu .property-submenu {
  left: auto;
  right: calc(100% + 0.64rem);
}

html[dir="rtl"] .with-submenu>.parent-label {
  padding-left: 1.5rem;
  padding-right: unset;
}

html[dir="rtl"] .with-submenu>.parent-label::after {
  left: 0;
  right: auto;
  transform: translateY(-50%) rotate(180deg);
}

html[dir="rtl"] .property-menu>li.with-submenu:hover>.parent-label::after {
  transform: translateY(-50%) rotate(180deg);
}

html[dir="rtl"] .property-menu>li.with-submenu>.parent-label {
  padding-right: 0.5rem;
}

html[dir="rtl"] .property-menu>li.with-submenu>.parent-label:hover{
  border-right: var(--borderWidth-thin) solid var(--accent);
  border-left: none;
}

html[dir="rtl"] .property-menu>li.with-submenu:hover>.parent-label::before,
html[dir="rtl"] .property-menu>li.with-submenu.open>.parent-label::before {
  right: 0;
}

html[dir="rtl"] .section-card .section-title {
  text-align: right;
}

html[dir="rtl"] .articles .section-title {
  text-align: right;
}

html[dir="rtl"] #theme-toggle:checked+.theme-toggle .track .thumb {
  transform: translateX(var(--toggle-shift-rtl));
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
}

html[dir="rtl"] .language-switcher .theme-toggle .thumb {
  border-radius: var(--borderRadius-medium);
  border: var(--borderWidth-thin) solid var(--border);
}

html[dir="rtl"] #scroll-toggle:checked+.scroll-toggle .track .thumb {
  transform: translateX(var(--toggle-shift-rtl));
}


html[dir="rtl"] .grand-total-row {
  left: 0;
  right: unset;
}

html[dir="rtl"] .article-table-wrapper {
  border-bottom-right-radius: var(--borderRadius-medium);
  border-bottom-left-radius: 0;
}

html[dir="rtl"] #prop-menu-container {
  left: auto;
  right: 1rem;
  bottom: 1rem;
}

html[dir="rtl"] #models-list .model-link.print-btn {
  text-align: right;
}

html[dir="rtl"] .save-data-label {
  left: 1rem;
  text-align: right;
  right: unset;
}

html[dir="rtl"] .model-link-dots {
  padding: 0 .5rem 0 0;
}

html[dir="rtl"] #models-list .model-link.print-btn {
  padding: .313rem 1rem .313rem .5rem;
}

html[dir="rtl"] #others-models-list .model-link.print-btn {
  text-align: right;
  padding: .313rem 1rem .313rem .5rem;
}

html[dir="rtl"] #others-models-list .model-link-dots {
  padding: 0 .5rem 0 0;
}

html[dir="rtl"] #models-list .invoice-link.print-btn {
  padding: .313rem 1rem .313rem .5rem;
}

html[dir="rtl"] #invoices-list .invoice-link.print-btn {
  padding: .313rem 1rem .313rem .5rem;
}

html[dir="rtl"] .parent-list {
  border-left: var(--borderWidth-thin) solid var(--border);
  border-right: none;
}

html[dir="rtl"] .model-submenu button {
  padding-right: 1.44rem;
  padding-left: unset;
  text-align: right;
}

html[dir="rtl"] #share-modal .modal-close {
  left: 1rem;
  right: unset;
}

html[dir="rtl"] #approve-modal .modal-close {
  left: 1rem;
  right: unset;
}

html[dir="rtl"] #remove-modal .modal-close {
  left: 1rem;
  right: unset;
}

html[dir="rtl"] #options-modal .modal-close {
  left: 1rem;
  right: unset;
}

html[dir="rtl"] #user-manual-modal .modal-close {
  left: 1rem;
  right: unset;
}

html[dir="rtl"] #invoices-list span {
  text-align: right;
}




html[dir="rtl"] #menu-toggle-btn {
  left: unset;
  right: 1rem;
}

html[dir="rtl"] #settings-toggle-btn {
  right: unset;
  left: 1rem;
}

html[dir="rtl"] #language-switcher {
  right: unset;
  left: 1rem;
}

html[dir="rtl"] .property-menu>li.with-submenu>.property-submenu {
  inset-inline-end: calc(100% + var(--submenu-gap));
}

html[dir="rtl"] #user-manual-btn {
  right: auto;
  left: 1rem;
}

html[dir="rtl"] #user-manual-modal ul {
  padding-right: 1.2rem;
  padding-left: unset;
}

html[dir="rtl"] #send-invoice-form .section-title,
html[dir="rtl"] #profile-form .section-title {
  text-align: right;
}

:root {
  --scale: 1;
}

@media (min-width: 160rem) {
  html {
    font-size: 125%;
  }

  :root {
    --scale: 1.25;
  }
}

@media (min-width: 215rem) {
  html {
    font-size: 150%;
  }

  :root {
    --scale: 1.50;
  }
}

@media (min-width: 240rem) {
  html {
    font-size: 175%;
  }

  :root {
    --scale: 1.75;
  }
}

@media (max-width: 105rem) {
  html {
    font-size: 87.5%;
  }

  :root {
    --scale: 0.875;
  }
}

@media (max-width: 96rem) {
  html {
    font-size: 80%;
  }

  :root {
    --scale: 0.80;
  }
}

@media (max-width: 90rem) {
  html {
    font-size: 80%;
  }

  :root {
    --scale: 0.80;
  }
}

@media (max-width: 85.5rem) {
  html {
    font-size: 80%;
  }

  :root {
    --scale: 0.80;
  }
}

@media (max-width: 80rem) {
  html {
    font-size: 80%;
  }

  :root {
    --scale: 0.80;
  }
}

@media (max-width: 64rem) {
  html {
    font-size: 80%;
  }

  :root {
    --scale: 0.80;
  }
}

@supports not (zoom: 1) {
  body {
    transform: scale(var(--scale));
    transform-origin: top left;
  }

  html,
  body {
    width: calc(100% / var(--scale));
    height: auto;
  }
}

#settings-toggle-btn {
  display: none;
}

@media (max-width: 105rem) {}

@media (max-width: 78.688rem) {
  .language-switcher {
    flex-direction: column-reverse;
    align-items: flex-end;
    width: 100%;
  }

  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(10, 2.625rem);
    column-gap: .5rem;
  }

  .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .status-partial-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  #prop-menu {
    width: max-content;
  }

  #prop-menu-container {
    display: none;
    width: auto;
  }

  #prop-menu-container.open {
    display: flex;
    position: fixed;
    top: 7rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 80;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: var(--borderRadius-medium);
  }

  #prop-menu-container.open::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(0.188rem);
    z-index: -1;
  }


  html[dir="rtl"] .body-container {
    margin-right: 0;
  }

  html[dir="rtl"] #prop-menu-container.open {
    display: flex;
    position: fixed;
    top: 7rem;
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
    z-index: 80;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: var(--borderRadius-medium);
  }

  html[dir="rtl"] #prop-menu-container.open::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(0.188rem);
    z-index: -1;
  }

  .scrollable-sidebar-section {
    width: var(--prop-menu-w);
    max-width: none;
  }

  #create-model-btn,
  #home-btn,
  #invoices-modal-btn {
    width: var(--prop-menu-w);
    max-width: none;
  }

  #language-switcher {
    display: none;
  }

  .language-switcher {
    flex-direction: column-reverse;
    align-items: flex-end;
    width: 100%;
  }

  #menu-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #language-switcher.open {
    display: flex;
    position: fixed;
    top: 4rem;
    right: 1rem;
    left: auto;
    z-index: 80;
  }

  #language-switcher.open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(0.188rem);
    z-index: -1;
  }

  .body-container {
    margin-left: 0;
  }

  .model-link-dots {
    opacity: 1 !important;
  }

  .articles .note {
    width: 50%;
  }


  .company-modal-body,
  .client-modal-body,
  .invoices-modal-body,
  .item-modal-body,
  #user-manual-modal .modal-body,
  .bulk-add-item-modal-body {
    overflow-x: auto;
    width: 100%;
    scrollbar-width: thin;
  }

  .manual-grid,
  .company-modal-grid,
  .client-modal-grid,
  .item-modal-grid,
  .manual-content.child-list,
  .bulk-add-item-modal-grid,
  .invoices-modal-grid {
    width: max-content;
  }

}

@media (max-width: 63.938rem) {

  #remove-modal .modal-card,
  #share-modal .modal-card,
  #options-modal .modal-card {
    width: 60%;
  }


  #companies-modal .modal,
  #clients-modal .modal,
  #items-modal .modal,
  #bulk-add-items-modal .modal,
  #create-model-modal.show .modal {
    width: 90%;
  }

  #invoices-modal .modal {
    height: 85vh;
    width: 95%;
  }


  .article-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  #article-table {
    width: max(100%, max-content);
    table-layout: auto;
  }

  #article-table th,
  #article-table td {
    white-space: nowrap;
  }

  #article-table th:first-child,
  #article-table td:first-child,
  #article-table th:last-child,
  #article-table td:last-child,
  #article-table th:not(:first-child):not(:last-child),
  #article-table td:not(:first-child):not(:last-child) {
    width: auto;
  }

  #article-table th:first-child,
  #article-table td:first-child {
    min-width: 17rem;
  }

  #article-table th:last-child,
  #article-table td:last-child {
    min-width: 4.5rem;
  }

  #article-table th:not(:first-child):not(:last-child),
  #article-table td:not(:first-child):not(:last-child) {
    min-width: 7rem;
  }

  .pricing-grid {
    flex-direction: column;
  }

  .pricing-toggle-separator {
    width: 15rem;
    height: 0.063rem;
    margin-block: 1rem;
  }

  .pricing-grid .grid2,
  .shipping-grid {
    width: -webkit-fill-available;
  }
}

@media (max-width: 60rem) {
  .invoice-body .landing-nav {
    justify-content: center !important;
  }

  .fieldsets-flex,
  .section-cards-flex {
    flex-direction: column;
    gap: 0;
  }

  .section-card.last-sections {
    margin-bottom: 1rem;
  }

  #invoice-form {
    gap: 0;
  }

  .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .invoice-body #settings-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .invoice-body .nav-actions {
    display: none !important;
    width: auto;
  }

  .invoice-body .nav-actions.open {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    left: 1rem;
    z-index: 80;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .body-container.blurred {
    filter: blur(0.188rem);
  }

  .body-container.blurred {
    pointer-events: none;
  }

  #menu-toggle-btn {
    top: .75rem;
    z-index: 300;
  }

  #prop-menu-container.open {
    display: flex;
    position: fixed;
    top: 4.5rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 80;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: var(--borderRadius-medium);
  }

  .grand-total-row,
  .grand-breakdown {
    width: 50%;
  }
}


@media (max-width: 43.125rem) {
  #invoice-form {
    width: fit-content;
  }

  .toggle-block.active .conditional.font-color-grid,
  .toggle-block.active .conditional.contact-grid,
  .toggle-block.active .conditional.client-contact-grid,
  .toggle-block.active .conditional.bank-details-grid,
  .toggle-block.active .conditional.shipping-grid,
  .toggle-block.active .conditional.client-contact-person-grid,
  .toggle-block.active .conditional.client-address-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .grand-total-row {
    font-size: 0.02rem;
  }

  .modal,
  #user-manual-modal .modal {
    width: min(var(--card-max-w), 92vw);
  }


  #remove-modal .modal-card,
  #share-modal .modal-card,
  #options-modal .modal-card {
    width: 90%;
  }

}

@media (max-width: 40rem) {
  .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .swatch-grid {
    grid-template-columns: repeat(5, 2.625rem);
  }

  .modal .swatch-grid {
    grid-template-columns: repeat(10, 2.625rem);
  }

  .radio-flex {
    flex-direction: column;
  }

  .grand-total-row,
  .grand-breakdown {
    width: 80%;
  }

  .articles .note {
    width: 100%;
    margin-top: 4rem;
  }
}

@media (max-width: 34.625rem) {
  .defaults-cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .percent-amount-selection {
    width: 40%;
  }
}


@media (max-width: 28.125rem) {

  .grid2,
  .grid3,
  .shipping-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .modal .grid2,
  .modal .grid3,
  .modal .shipping-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items-table-link {
    display: none;
  }

  #invoice-form {
    width: fit-content;
  }

  .toggle-block.active .conditional.font-color-grid,
  .toggle-block.active .conditional.contact-grid,
  .toggle-block.active .conditional.client-contact-grid,
  .toggle-block.active .conditional.bank-details-grid,
  .toggle-block.active .conditional.shipping-grid,
  .toggle-block.active .conditional.client-contact-person-grid,
  .toggle-block.active .conditional.client-address-grid {
    grid-template-columns: 1fr;
  }

  .language-switcher {
    flex-direction: column-reverse;
    align-items: flex-end;
    width: 100%;
  }

  .article-table-wrapper {
    border-bottom-left-radius: 0
  }

  html[dir="rtl"] .article-table-wrapper {
    border-bottom-right-radius: 0
  }

  .grand-total-row,
  .grand-breakdown {
    width: 100%;
  }
}


@media (max-width: 18.75rem) {
  .swatch-grid {
    grid-template-columns: repeat(2, 2.625rem);
  }

  .pricing-toggle-separator {
    width: 8rem;
  }
}