/* Copyright 2013-present Software Response LLC */
/* @font-face { font-family: 'Garamond'; src: url('fonts/garamond/EBGaramond-Medium.ttf') format('ttf'); } */
/* @font-face { font-family: 'OpenSans'; src: url('fonts/opensans/OpenSans-Regular.ttf') format('ttf'); } */
/* @font-face { font-family: 'SinkinSans'; src: url('fonts/sinkinsans/SinkinSans-400Regular.otf') format('otf'); }  */
/* @font-face { font-family: 'Gotham'; src: url('fonts/gotham/Gotham-Medium.otf') format('otf'); } */
/* @font-face { font-family: 'Montserrat-Medium'; src: url('fonts/montserrat/Montserrat-Medium.ttf') format('ttf'); }  */
@font-face { font-family: "SegoeUI"; src: url("../fonts/Segoe_UI.ttf") format("truetype"); }
@font-face { font-family: "Orbitron"; src: url("../fonts/Orbitron-Regular.ttf") format("truetype"); }
@font-face { font-family: "Titillium"; src: url("../fonts/TitilliumWeb-Regular.ttf") format("truetype"); }

/* Default Colors */
:root {

     --color-highlight: #b47f16;
     --color-hover: #fbb778;

     --color-active: #4CAF50;
     --color-inactive: #d9c73e;
     --color-locked:#e1952a;
     --color-deleted: #F44336;
     --color-link: #0066cc;
     --color-info: #0066cc;

     --color-low: #3fb950;
     --color-medium: #d9c73e;
     --color-high: #ffa657;
     --color-critical: #f85149;
     --color-good: #4CAF50;

     --color-caution: #f8bb86;
     --color-warning: #f27474;
     --color-error: #d93030;
     --color-edited: #ff8b00;

     --color-gray: #6f8194;
     --color-blue: #195aba;
     --color-red: #ba1919;
     --color-green: #19ba3c;
     --color-yellow: #d1ce0c;
     --color-cyan: #19b5ba;
     --color-orange:#ff8f23;
     --color-purple:#9b19ba;  
     
     /* Status Colors */
     --status-completed: #19ba3c;
     --status-started: #448E68;

     --status-open: #6f8194;
     --status-text-light: #f5f9fa;
     --status-text-dark: #10161b;

     --status-open-back: #6f8194;
     --status-open-text: var(--status-text-light);
     --status-open-border: 1px solid #6f8194;

     --status-started-back: #1987ba;
     --status-started-text: var(--status-text-light);
     --status-started-border: 1px solid #1987ba;

     --status-completed-back: #19ba3c;
     --status-completed-text: var(--status-text-light);
     --status-completed-border: 1px solid #19ba3c;

     --status-assigned-back: #448e68;
     --status-assigned-text: var(--status-text-light);
     --status-assigned-border: 1px solid #448e68;

     --status-unassigned-back: #6f8194;
     --status-unassigned-text: var(--status-text-light);
     --status-unassigned-border: 1px solid #6f8194;

     --status-pending-back: #6f8194;
     --status-pending-text: var(--status-text-light);
     --status-pending-border: 1px solid #6f8194;

     --status-good-back: #3ca168;
     --status-good-text: var(--status-text-light);
     --status-good-border: 1px solid #266742;

     --status-bad-back: #f27474;
     --status-bad-text: var(--status-text-light);
     --status-bad-border: 1px solid #f27474;

     --status-active-back: #3ca168;
     --status-active-text: var(--status-text-light);
     --status-active-border: 1px solid #266742;

     --status-beta-back: #3c83a1;
     --status-beta-text: var(--status-text-light);
     --status-beta-border: 1px solid #3a687c;

     --status-hidden-back: #3c54a1;
     --status-hidden-text: var(--status-text-light);
     --status-hidden-border: 1px solid #3b4c84;

     --status-inactive-back: #fdd073;
     --status-inactive-text: var(--status-text-dark);
     --status-inactive-border: 1px solid #fdd073;

     --status-deleted-back: #f27474;
     --status-deleted-text: var(--status-text-light);
     --status-deleted-border: 1px solid #c53030;

     --status-caution-back: #f8bb86; ;
     --status-caution-text: var(--status-text-light);
     --status-caution-border: 1px solid #f8bb86;

     --status-warning-back: #f27474;
     --status-warning-text: var(--status-text-light);
     --status-warning-border: 1px solid #c53030;

     /* fonts */
     --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
     --font-roboto: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
     --font-orbitron: "Orbitron", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
     --font-titillium: "Titillium", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

     /* icons */
     --favicon: url("../images/favicon.png");
     --favicon-white: url("../images/favicon-white.png");
     --favicon-black: url("../images/favicon-black.png");
     --favicon-colored: url("../images/favicon-colored.png");

     /* radii, spacing */
     --radius: 8px; /*12*/
     --internal-radius: 8px;
     --input-radius: 8px;
     
     --button-radius: 8px;
     --button-transition: background .15s ease, transform .1s ease, box-shadow .1s ease;
     --button-hover-transform: translateY(-1px);
     --button-active-transform: translateY(0px);

     --gap: 8px;
     --gap-small: 4px;
     --gap-large: 16px;
     
     /* font sizes */
     --font-size: 1rem; /* 16px */
     --font-size-8: 0.5rem;
     --font-size-10: 0.625rem;
     --font-size-12: 0.75rem;
     --font-size-14: 0.875rem;
     --font-size-16: 1rem;
     --font-size-18: 1.125rem;
     --font-size-20: 1.25rem;
     --font-size-22: 1.375rem;
     --font-size-24: 1.5rem;
     --font-size-26: 1.625rem;
     --font-size-28: 1.75rem;
     --font-size-30: 1.875rem;
     --font-size-40: 2.5rem;

     --font-title: 1.1rem; /* Slightly larger than base font size for titles */

     /* line heights */
     --line-height: 1.4rem; /* 22px */
     --line-height-2: 1.875rem; /* 30px */

     /* Menu Element Sizes */
     --menu-fontsize: var(--font-size-14); 
     --menu-group-fontsize: var(--font-size-14); 
     --menu-group-icon-height: 28px;

     --menu-category-fontsize: var(--font-size-12); 

     --menu-width: 240px; /* Max Menu Width */
     
     --menu-element-height: 40px;
     --menu-element-fontsize: var(--font-size-14); 
     --menu-element-icon-height: 24px;

     /* Borders */
     --border-size: 1px;
     --border-style: solid;
     --border-good: 1px solid var(--color-good);
     --border-good-color: var(--color-good);
     --border-caution: 1px solid var(--color-caution);
     --border-caution-color: var(--color-caution);
     --border-error: 1px solid var(--color-error);
     --border-error-color: var(--color-error);

     /* Padding */
     --padding-desktop: 8px;
     --padding-mobile: 4px;
     --padding: 8px;
     --padding-x2: 16px;
     
     /* Margin */
     --margin-desktop: 8px;
     --margin-mobile: 4px;
     --margin: 4px;
     --margin-large: 8px;
     --margin-x2: 8px;

     /* Transition */
     --transition: 220ms ease;
     --transition-speed: 220ms;

     --transition-fast: 120ms ease;
     --transition-normal: 220ms ease;

     /* Mobile */
     --mobile-width: calc(100vw - 50px);
     --mobile-width-full: calc(100vw - 180px);
     --mobile-width-max: 100%;
     --mobile-width-max-full: 100%;

     /* Buttons */
     --button-height: 30px;
     --button-height-small: 24px;
     --button-height-large: 34px;
     --button-padding: 0 12px;
     --button-padding-small: 0 8px;
     --button-padding-large: 0 16px;

     /* Tabs */
     --tab-active-height: 30px;

     /* Widths */
     --width-login: 420px;
     --width-min: 320px;
     --width-box-min: 300px;
     --width-box-max: 600px;
     --width-max: 1200px;  
     
     /* Inputs */
     --input-border-radius: var(--input-radius);
     --input-check-size: 24px;

     --input-height: 30px;
     --input-height-disabled: 30px;
     --input-height-x2: 40px;

     --input-height-px: 30px;

     /* Input Toggle */
     --input-toggle-switch-height: 24px;
     --input-toggle-switch-width: 48px;
     --input-toggle-switch-size: 18px;

     --input-toggle-switch-height-small: 22px;
     --input-toggle-switch-width-small: 44px;
     --input-toggle-switch-size-small: 16px;

     --input-button-height: 30px;
     --textarea-min-height: 60px;
     --textarea-line-height: 20px;

     --input-check-slider: 22px;
}

/* Default Light Theme */
:root {

     --body-back-image: none;

     --hover-color: #0065d8;
     --color-light: #eef3f5;
     --color-dark: #18181a; 
     --color-faded: #6f8194;
     --color-back: #e4e9ed;
     --color-text: #10161b;
     --color-text-neutral: #34424b;
     
     --border-internal: #8ea3b0;
     --border-outline: #34424b;  
     --border-button: #8ea3b0;

     --back-faded: #f6f6f9;

     --hover-back: #f2f6fb /* #ecf3fb */; 
     --hover-text: var(--hover-color);
     --hover-border: 1px solid var(--hover-color);

     --active-back: #ecf3fb;
     --active-text: var(--hover-color);
     --active-border: 1px solid var(--hover-color);

     --body-back: #f5f5f6;
     --body-faded: rgba(245, 245, 246, 0.70);
     --body-text: var(--color-dark);
     --body-back-faded: var(--body-faded);
     --body-text-faded: var(--color-faded);

     --box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12);
     --box-padding: 8px;

     /* Header */
     --header-back: #ffffff;
     --header-back-muted: #f9fafc;
     --header-text: var(--color-dark);
     --header-text-faded: var(--color-faded);
     --header-border: 1px solid var(--border-outline);
     --header-border-color: var(--border-outline);
     --header-shadow: none;
     --header-gap: var(--gap);

     --header-button-back: transparent;
     --header-button-text: inherit;
     --header-button-border: 1px solid transparent;
     --header-button-hover-back: transparent;
     --header-button-hover-text: var(--hover-color);
     --header-button-border-radius: var(--radius);

     /* Menu */
     --menu-back: #ffffff;
     --menu-text: var(--color-dark);
     --menu-text-muted: var(--color-faded);
     --menu-text-hover: var(--hover-color);
     --menu-border: 1px solid var(--border-outline);
     --menu-border-color: var(--border-outline);
     --menu-gap: var(--gap);
     --menu-shadow: var(--box-shadow);
     --menu-category-color: #6f8194;
     --menu-footer-back: var(--content-footer-back);
     --menu-footer-text: var(--content-footer-text);
     --menu-footer-border: var(--content-border-internal);

     /* --menu-group-text: var(--menu-text-muted); */
     --menu-group-text: var(--color-dark);
     --menu-group-back: transparent;
     --menu-group-back-active: #e3f0ff;
     --menu-group-text-active: #082C54;
     --menu-group-border-active: 1px solid #0065d8;
     --menu-group-back-hover: #e3f0ff;
     --menu-group-text-hover: #0B3D75;
     --menu-group-gap: var(--gap);

     --menu-wrapper-back-active: var(--menu-back);
     --menu-wrapper-text-active: var(--menu-text);
     --menu-wrapper-border-active: var(--menu-group-back-active);

     /* Menu Element - Page */
     /* --menu-element-back: transparent;
     --menu-element-text: var(--menu-text-muted);
     --menu-element-hover-back: transparent;
     --menu-element-hover-text: var(--active-text);
     --menu-element-active-back: #e9eef4;
     --menu-element-active-text: var(--active-text);
     --menu-element-gap: var(--gap); */
     --menu-element-back: transparent;
     --menu-element-text: var(--menu-text);
     --menu-element-hover-back: #e3f0ff;
     --menu-element-hover-text: #0B3D75;
     --menu-element-active-back: #D6E6FB;
     --menu-element-active-text: #0B3D75;
     --menu-element-gap: var(--gap);

     /* Content */
     --content-back: #ffffff;
     --content-text: var(--color-dark);
     --content-text-faded: var(--color-faded);
     --content-back-hover: var(--hover-back);
     --content-text-hover: var(--hover-text);
     --content-back-muted: var(--color-light);
     --content-title-back: var(--color-light);
     --content-title-text: #4a5b6c;
     --content-subtext: #5c6f82;
     --content-subtitle-back: transparent;
     --content-subtitle-text: #6f8194;
     --content-back-highlight: #fffbf0;
     --content-text-highlight: var(--color-dark);

     --content-border: 1px solid var(--border-outline);
     --content-border-color: var(--border-outline);

     --content-border-internal: 1px solid var(--border-internal);
     --content-border-internal-color: var(--border-internal);
     --content-border-radius: var(--radius);
     --content-gap: var(--gap);
     --content-padding: var(--padding-x2);
     --content-shadow: var(--box-shadow);
     
     --content-title-button-back: var(--color-back);
     --content-title-button-text: var(--color-text);
     --content-title-button-border: 1px solid var(--border-button);

     --content-button-back: var(--content-back);
     --content-button-text: var(--content-text);
     --content-button-border: 1px solid var(--border-outline);
     --content-button-shadow: none;
     --content-button-hover-back: var(--hover-back);
     --content-button-hover-text: var(--hover-text);
     --content-button-hover-border: var(--hover-border);
     --content-button-active-back: var(--active-back);
     --content-button-active-text: var(--active-text);
     --content-button-active-border: 1px solid var(--border-outline);

     --content-icon-color: #1463ff;

     --content-footer-back: #f9fafc;
     --content-footer-text: var(--content-subtext);

     --popup-back: #ffffff;
     --popup-text: var(--color-text);
     --popup-border: 1px solid var(--border-outline);
     --popup-shadow: 0 12px 32px rgba(0, 30, 60, 0.18);

     --notify-back: var(--color-back);
     --notify-text: var(--color-text);
     --notify-border: 2px solid rgba(255,255,255,0.06);
     --notify-shadow: 0 8px 24px rgba(0,0,0,0.25);

     --percent-back: var(--content-back);
     --percent-text: var(--content-text);
     --percent-border: var(--content-border);
     --percent-shadow: var(--content-shadow);
     --percent-track: var(--color-back);
     --percent-progress: var(--hover-color);

     --selected-back: #f5e5cc;
     --selected-text: var(--color-text-neutral);

     --neutral-back: #ebeaeb;
     --neutral-text: var(--color-text-neutral);

     /* Loader */
     --loader-back: var(--body-back-faded);
     --loader-text: var(--color-link);
     --loader-spinner: var(--color-link);     
     --loader-size: 22px;
     --loader-width: 2px;
     --loader-shadow: var(--box-shadow);

     /* Backdrop */
     --backdrop-back: var(--body-back-faded);
     --backdrop-text: var(--body-text-faded);

     /* Folder */
     --folder-back: var(--content-back-muted);
     --folder-text: var(--content-text);

     /* Table Header */
     --table-header-back: var(--content-back-muted);
     --table-header-text: var(--content-text);

     /* Grid */
     --grid-title-back: var(--content-title-back);
     --grid-title-color: var(--content-title-text);
     --grid-hover-back: var(--box-over-back);
     --grid-hover-text: var(--content-text);
     --grid-row-height: 1.5rem;
     --grid-button-height: 1.5rem;

     /* Stack */
     --stack-title-back: var(--content-title-back);
     --stack-title-color: var(--content-title-text);

     /* Scroll */
     --scroll-handle-back: rgba(100,120,140,0.25);
     --scroll-handle-hover: rgba(80,110,140,0.55);

     --scroll-track-back: rgba(0, 0, 0, 0.03);
     --scroll-track-hover: transparent;

     --contrast-back: orange;
     --contrast-color: white;

     --row-offset-back: rgba(0, 0, 0, 0.05);
     --row-hover-back: rgba(0, 0, 0, 0.08);
     --row-offset-text: inherit;

     /* Icon Button */
     --icon-back: transparent;
     --icon-color: inherit;
     --icon-color-hover: var(--hover-color);

     /* Content Tabs / Buttons */
     --button-shadow: 0 2px 6px rgba(0,0,0,0.12);
     --button-hover-shadow: 0 2px 4px rgba(0,0,0,.08);

     --button-content-back: #ffffff;
     --button-content-text: var(--color-dark);
     --button-content-border: 1px solid var(--border-outline);
     --button-content-border-radius: var(--radius);
     --button-content-hover-back: var(--color-light);
     --button-content-hover-text: var(--hover-color);
     --button-content-active-back: var(--color-light);
     --button-content-active-text: var(--hover-color);

     /* Control Tabs / Buttons */
     --button-control-back: #2f7be5;
     --button-control-text: #ffffff;
     --button-control-border: 1px solid var(--border-outline);
     --button-control-border-color: var(--border-outline);
     --button-control-border-radius: var(--button-radius);
     --button-control-shadow: var(--button-shadow);
     --button-control-hover-back: #1f5fb8;
     --button-control-hover-text: #ffffff;
     
     /* Standard Button */
     --button-standard-back: #f7f9fc;
     --button-standard-text: var(--content-text);
     --button-standard-border: 1px solid var(--border-internal);

     /* Hover: cleaner, more intentional */
     --button-standard-hover-back: #E3F0FF;
     --button-standard-hover-text: #0B3D75;
     --button-standard-hover-border: 1px solid #4A8FE7;

     /* Active: stronger press state */
     --button-standard-active-back: #CFE4FF;
     --button-standard-active-text: #082C54;
     --button-standard-active-border: 1px solid #2F6FCC;

     /* Positive Button */
     --button-positive-back: #28A745;
     --button-positive-text: #ffffff;
     --button-positive-border: 1px solid var(--border-outline);

     --button-positive-hover-back: #218838;
     --button-positive-hover-text: #ffffff;
     --button-positive-hover-border: var(--border-outline);

     /* Negative Button */
     --button-negative-back: #C82333;
     --button-negative-text: #ffffff;
     --button-negative-border: 1px solid var(--border-outline);

     --button-negative-hover-back: #b82828;
     --button-negative-hover-text: #ffffff;
     --button-negative-hover-border: var(--border-outline);

     /* Caution Button */
     --button-caution-back: #FFC107;
     --button-caution-text: #ffffff;
     --button-caution-border: 1px solid var(--border-outline);

     --button-caution-hover-back: #baaf19;
     --button-caution-hover-text: #ffffff;
     --button-caution-hover-border: var(--border-outline);

     /* Tabs */
     --tabbar-back: var(--button-standard-back);
     --tabbar-text: var(--button-standard-text);
     --tabbar-back-hover: var(--button-standard-hover-back);
     --tabbar-text-hover: var(--button-standard-hover-text);
     --tabbar-border-hover: var(--button-standard-hover-border);
     --tabbar-back-active: var(--button-standard-active-back);
     --tabbar-text-active: var(--button-standard-active-text);
     --tabbar-border-active: var(--button-standard-active-border);
     --tabbar-border: transparent;
     
     /* Standard Button
     --button-standard-back: #f7f9fc;
     --button-standard-text: var(--content-text);
     --button-standard-border: 1px solid var(--border-internal);
     
     --button-standard-hover-back: #E3F0FF;
     --button-standard-hover-text: #0B3D75;
     --button-standard-hover-border: 1px solid #4A8FE7;
     --button-standard-active-back: #CFE4FF;
     --button-standard-active-text: #082C54;
     --button-standard-active-border: 1px solid #2F6FCC; */

     /* Tab Wrapper */
     --tab-wrapper-back: transparent;
     --tab-wrapper-color: inherit;
     --tab-height: 1.875rem;
     --tab-back: transparent;
     --tab-color: var(--content-subtitle-text);
     --tab-border: none;
     --tab-hover-back: transparent;
     --tab-hover-text: var(--color-hover);
     --tab-hover-border: none;
     --tab-active-back: transparent;
     --tab-active-text: var(--active-text);
     --tab-active-border: none;

     /* Input */
     --input-back: #f9fbfe;
     --input-color: var(--content-text);
     --input-border: 1px solid #d9e4f0;
     --input-border-color: #d9e4f0;
     --input-shadow: inset 0 2px 6px rgba(0,0,0,0.25);

     --input-hover-back: #f9fbfe;
     --input-hover-text: inherit;
     --input-hover-border: 1px solid #c6d6e6;

     --input-focus-back: #ffffff;
     --input-focus-border: 1px solid #3a86e8;
     --input-focus-shadow: 0 0 0 2px rgba(47,123,229,.12);
     --input-focus-icon-color: #5c94e6;

     --input-missing-back: inherit;
     --input-missing-text: inherit;
     --input-missing-border: 1px solid var(--color-error);

     --input-disabled-back: #eef3f8;
     --input-disabled-text: #9fb2c6;
     --input-disabled-border: 1px solid #e3eaf3;

     /* Input Check */
     --input-check-back: var(--input-back);
     --input-check-color: var(--content-text);

     --input-check-hover-back: var(--color-hover);
     --input-check-hover-color: var(--content-text);
     --input-check-hover-border: var(--content-text);

     --input-check-checked-back: #2f7be5;
     --input-check-checked-color: var(--content-text);
     --input-check-disabled: #b3b3b3;

     --input-check-width: 48px;
     --input-check-height: 30px;

     /* Link */
     --link-back: transparent;
     --link-text: #0065d8;
}