/*********************************************
*                FONT FAMILY                 *
******************************************** */

/* Proxima Light */
@font-face {
    font-family: 'Proxima';
    src: url('../../fonts/proxima/proxima-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Proxima Regular */
@font-face {
    font-family: 'Proxima';
    src: url('../../fonts/proxima/proxima-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Proxima Semibold */
@font-face {
    font-family: 'Proxima';
    src: url('../../fonts/proxima/proxima-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Proxima Bold */
@font-face {
    font-family: 'Proxima';
    src: url('../../fonts/proxima/proxima-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/***********************************/
/*           BODY                  */
/***********************************/

.mdl-textfield__input,
.mdl-button,
body { font-family: 'Proxima'; }

:root {
	--bs-font-sans-serif: 'Proxima';
	--font-awesome-pro: "Font Awesome 7 Pro";

	--color-primary:   #0565FF;  /* blue */
	--color-secondary: #212121; /* black */
	--color-tertiary:  #7F91AC; /* grey */
	--color-white: #FFFFFF;

	--bg-primary:      #FAFAFA; /* light grey */
	--bg-secondary:    #FEFEFE; /* white */
	--bg-tertiary:     #E9F8FF; /* light-blue */
	--bg-white:        #FFFFFF; /* white */
	--bg-section:      #F3F4F6;

	--border-primary:   #95DCFF; /* light blue */
	--border-secondary: grey; /* dark grey */
	--border-tertiary:  lightgrey; /* light grey */
	--border-section:   #DAE9F7;

	--bg-gradient-primary: linear-gradient(to bottom, #1475FF, #024ECA); /* blue to darkblue */
	--bg-gradient-secondary: linear-gradient(143.85deg, #E6EFFF 0%, #82B2FF 119.14%); /* white -> lightblue */
	--bg-gradient-secondary-100: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(202, 202, 202, 0.5) 100%);
	--bg-gradient-tertiary: linear-gradient(143.85deg, white 0%, grey 119.14%); /* placeholder */

}

/* Dark theme colors  */
:root.dark {
	--bs-font-sans-serif: 'Proxima';
	--font-awesome-pro: "Font Awesome 7 Pro";

	--color-primary:   #4D8FFF;   /* lighter blue */
	--color-secondary: #BFBFBF;   /* muted slate, not glaring */
	--color-tertiary:  #B2BDCD;   /* slightly lighter grey */
	--color-white: #FFFFFF;

	--bg-primary:      #1F1F1F;   /* deep dark */
	--bg-secondary:    #1C1C21;   /* slightly lighter dark */
	--bg-tertiary:     #242424;   /* dark blue tint */
	--bg-white:        #1C1C21;   /* "white" surfaces go dark */
	--bg-section:      #242424;

	--border-primary:   #205F7E;
	--border-secondary: #808080;
	--border-tertiary:  #454545;
	--border-section:   #303030;

	/* Gradients */
	--bg-gradient-primary:       linear-gradient(to bottom, #0A2470, #030D3A);
	--bg-gradient-secondary:     linear-gradient(143.85deg, #060E28 0%, #0C1E4A 119.14%);
	--bg-gradient-secondary-100: linear-gradient(135deg, rgba(6, 10, 24, 0.9) 0%, rgba(14, 22, 50, 0.9) 100%);
	--bg-gradient-tertiary:      linear-gradient(143.85deg, #080D1C 0%, #0E1628 119.14%);

}

/*************************/
/* COLORS                */
/*************************/

/*********************************************
*              STANDARD BG CLASSES           *
******************************************** */

.bg-primary { background: var(--bg-primary) !important; }
.bg-primary-dark { background: var(--color-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-secondary1 { background-color: rgb(31, 31, 31) !important; color: rgb(182, 194, 201); }
.bg-tertiary { background: var(--bg-tertiary) !important; }
.bg-transparent { background: transparent !important; }
.bg-white  {background:var(--bg-white) !important;}
.no-bg      {background: none; }
.bg-section-dark { background: var(--border-section); }

/*********************************************
*            GRADIENT BG CLASSES             *
******************************************** */

.bg-gradient-primary { background: var(--bg-gradient-primary); }
.bg-gradient-secondary { background: var(--bg-gradient-secondary); }
.bg-gradient-tertiary { background: var(--bg-gradient-tertiary); }

/*************************************************************************
*                       STANDARD TEXT COLOR CLASSES                      *
************************************************************************ */

.color-primary { color: var(--color-primary) !important; }
.color-secondary { color: var(--color-secondary) !important; }
.color-tertiary { color: var(--color-tertiary) !important; }
.color-white { color: var(--color-white); }

.light {
	/*********************************************
	*                BACKGROUND CLASSES          *
	******************************************** */

	.bg-warning-h1 {background:#AAAA39;}
	.bg-warning-h2 {background:#D4D46A	;}

	.bg-info-h1 {background:#143054;}
	.bg-info-h2 {background:rgba(33, 150, 243, 0.52)	;}

	.bg-light-grey      {background:#ecf0f1 !important; color: #78909c}
	.bg-light-bluegrey      {background:#eceff1 !important; color: white}
	.bg-light-blue      {background:#f9faff !important; color: #78909c}
	.bg-light-blue2     {background:#f6f9fc !important; color: #313131}
	.bg-light-blue3     {background:#EBF2FF !important; color: #313131}
	.bg-light-grey2      {background:#fafafa !important; color: #78909c}
	.bg-light-grey3      {background:#efebe9 !important; color: #78909c}
	.bg-light-grey4      {background:#eeeeee !important; color: #78909c}
	.bg-light-grey5 { background-color: #F9FAFB; }

	.bg-blue      {background:#90caf9 !important; color: white}
	.bg-purple    {background:#b39ddb !important; color: white}
	.bg-indigo    {background:#9fa8da !important; color: white}
	.bg-cyan      {background:#80deea !important; color: white}
	.bg-teal      {background:#80cbc4 !important; color: white}
	.bg-green     {background:#a5d6a7 !important; color: white}
	.bg-red       {background:#ef9a9a !important; color: white}
	.bg-pink      {background:#f48fb1 !important; color: white}
	.bg-black      {background:black !important; color: white}
	.bg-grey      {background:#b0bec5 !important; color: white}

	.bg-dark-blue      {background:#2980b9 !important; color: white}
	.bg-dark-purple    {background:#8e44ad !important; color: white}
	.bg-dark-cyan      {background:#16a085 !important; color: white}
	.bg-dark-green     {background:#27ae60 !important; color: white}
	.bg-dark-grey      {background:#7f8c8d !important; color: white}
	.bg-dark-fb-grey      {background:#19212b !important; color: white}
	.bg-light-fb-grey      {background:#262f3d !important; color: white}
	.bg-dark-red       {background:#c0392b !important; color: white}
	.bg-section         { background: var(--bg-section); }

	.bg-asphalt       {background:#cfd8dc !important; color: grey}

	.bg-success-h1 {background:#88CC88;}
	.bg-success-h2 {background:#88CC88	;}

	.bg-warning-h1 {background:#AAAA39;}
	.bg-warning-h2 {background:#D4D46A	;}

	.bg-info-h1 {background:#143054;}
	.bg-info-h2 {background:rgba(33, 150, 243, 0.52)	;}

	/*********************************************
	*               TEXT COLOR CLASSES           *
	******************************************** */

	.pink { color: #f06292 }
	.slate { color: #78909c }
	.teal { color: #4db6ac }

	.dark-blue      {color :#1976d2;}
	.dark-red       {color :#d32f2f;}
	.dark-cyan      {color :#16a085;}
	.dark-green     {color :#2e7d32;}
	.dark-grey      { color: #7E7982; }

	.primary-blue { color: #2980b9; }
	.blue      {color :#3498db;}
	.purple    {color :#9b59b6;}
	.cyan      {color :#1abc9c;}
	.green     {color :#2ecc71;}
	.grey      {color :#95a5a6 !important}
	.red       {color :#e74c3c !important;}
	.orange    {color: #f9ad5e;}
	.primary-black {color: #2E2E2E}
	.black     {color :#78909c;}
	.dark-fb-grey      {color :#19212b }
	.light-fb-grey      {color :#262f3d}
	.real-black     {color :#000000;}
	.white     {color :white !important;}
	.smoky-gray {color: #313131 !important;}

	.light-grey {color: #e9e7e7 !important}
	.light-grey2 {color: #B2B9C4 !important}

	/***********************/
	/* Custom Label Classes*/
	/***********************/

	.custom-label-white {background: white; }
	.custom-label-khaki {background: khaki;}
	.custom-label-grey { background: grey;}
	.custom-label-orange { background: orange;}
	.custom-label-black { background: black;}
	.custom-label-lightgrey { background: lightgrey;}
	.custom-label-lightblue { background: lightblue;}
	.custom-label-lightpink { background: lightpink;}
	.custom-label-lightgreen { background: lightgreen;}
	.custom-label-lightyellow {background: lightyellow;}
	.custom-label-lightsalmon { background: lightsalmon;}
	.custom-label-lightsteelblue { background: lightsteelblue;}

	.custom-label-CRITICAL {background: #e57373; color: white;}
	.custom-label-HIGH {background: #f8bbd0; color: black;}
	.custom-label-MEDIUM {background: #ffcc80; color: grey;}
	.custom-label-LOW {background: white; color: grey; border:1px solid lightgrey;}

	.custom-label-INPROGRESS {background: #64b5f6; color: white;}
	.custom-label-SCHEDULED {background: #cfd8dc; color: black;}
	.custom-label-COMPLETED {background: lightgreen; color: black;}

	/*********************************************
	*              TAG COLOR CLASSES             *
	******************************************** */

	.tag-pink { background-color: #FFEBEF; color: #FF4D72; }
	.tag-blue { background-color: #E8F4FD; color: #36A2EB; }
	.tag-yellow { background-color: #FFF6E0; color: #FFB706; }
	.tag-cyan { background-color: #F0FAFA; color: #55C3C3; }
	.tag-purple { background-color: #F7EBFF; color: #9728CC; }
	.tag-orange { background-color: #FFF3E0; color: #FF8D33; }
	.tag-peach { background-color: #FFF5EC; color: #C66B52; }
	.tag-grey { background-color: #F5F5F5; color: #616161; }
	.tag-white { background-color: white; color: #616161; }
	.tag-green { background-color: #E8F5E9; color: #2E7D32; }
	.tag-red { background-color: #FFEBEE; color: #C62828; }
	.tag-teal { background-color: #E0F2F1; color: #00796B; }
	.tag-indigo { background-color: #E8EAF6; color: #3949AB; }
	.tag-lime { background-color: #F9FBE7; color: #827717; }
	.tag-brown { background-color: #EFEBE9; color: #5D4037; }
	.tag-navy { background-color: #E3F2FD; color: #1565C0; }
	.tag-magenta { background-color: #FCE4EC; color: #C2185B; }
	.tag-amber { background-color: #FFF8E1; color: #F57F17; }
	.tag-primary { background-color: #0565FF; color: #FFFFFF; }

	/*********************************************
	*            BORDER COLOR CLASSES             *
	******************************************** */
    .border-all-light { border: 1px solid lightgrey;}

    .border-all { border: 1px solid grey;}
    .border-right { border:none; border-right: 1px solid grey;}
    .border-right-light { border:none; border-right: 1px solid lightgrey;}
    .border-left { border:none; border-left: 1px solid grey;}
    .border-top { border:none; border-top: 1px solid grey;}
    .border-top-light { border:none; border-top: 1px solid lightgrey;}
    .border-bottom { border:none; border-bottom: 1px solid grey;}
    .border-bottom-light { border:none; border-bottom: 1px solid lightgrey;}
    .border-bottom-light-grey { border:none; border-bottom: 0.5px solid #D4DFED85;}
    .border-left-light { border: none; border-left: 1px solid lightgrey !important; }
    .border-left-light-grey { border:none; border-left: 0.5px solid #D4DFED75;}
    .border-left-selected { border-left: 5px solid white }
    .border-bottom-black { border: none; border-bottom: 1px solid black; }
    .border-all-light-dashed { border: 1px dashed lightgrey;}
    .thin-border-all-blue { border: 0.5px solid #0098E2; }

    .large-border-top { border: none; border-top: 15px solid #0565FF4D; }

    /* Hover Borders */
    .border-all-primary:hover { border: 2px dashed var(--color-primary);}

    /* SLA Alert bar border */
    .border-error-left { border-left: 5px solid #FF5D5D; }
    .border-warning-left { border-left: 5px solid #FF8D33; }
}

/* -------------------------------------------------------
		DARK THEME OVERRIDES
	------------------------------------------------------- */
.dark {

	/* -------------------------------------------------------
		NAMED SOLID BG OVERRIDES
	------------------------------------------------------- */
	.bg-blue          { background: #266497 !important; color: #C2D8F0; }
	.bg-purple        { background: #4A2E7A !important; color: #D8C2F0; }
	.bg-indigo        { background: #2E3A7A !important; color: #CED5F3; }
	.bg-cyan          { background: #1A5866 !important; color: #B6E7ED; }
	.bg-teal          { background: #114541 !important; color: #A5E9DB; }
	.bg-green         { background: #14522D !important; color: #99E5B5; }
	.bg-red           { background: #7E2020 !important; color: #EDB6B6; }
	.bg-pink          { background: #6A1B39 !important; color: #F5D6E8; }
	.bg-grey          { background: #384252 !important; color: #B8BDC6; }
	.bg-black         { background: #0D0D0D !important; color: #E8E8E8; }
	.bg-asphalt       { background: #2D3748 !important; color: #B8BDC6; }
	.bg-dark-blue     { background: #1E4A76 !important; color: #A5C5E9; }
	.bg-dark-purple   { background: #3C1A60 !important; color: #CBC2F0; }
	.bg-dark-cyan     { background: #0E3935 !important; color: #99E5DA; }
	.bg-dark-green    { background: #0F3D20 !important; color: #99E5B5; }
	.bg-dark-grey     { background: #2D3748 !important; color: #B8BDC6; }
	.bg-dark-red      { background: #5B1A1A !important; color: #EDB6B6; }
	.bg-dark-fb-grey  { background: #0F141F !important; color: #D1D5DB; }
	.bg-light-fb-grey { background: #1A2232 !important; color: #D1D5DB; }
	.bg-light-grey    { background: #1F2937 !important; color: #B8BDC6; }

	/* Light variants → become muted dark surfaces */
	.bg-light-grey2    { background: #1A2232 !important; color: #B8BDC6; }
	.bg-light-grey3    { background: #1A1A1A !important; color: #B8BDC6; }
	.bg-light-grey4    { background: #242424 !important; color: #B8BDC6; }
	.bg-light-grey5    { background: #161B27 !important; }
	.bg-light-bluegrey { background: #192433 !important; color: #B5C3C9; }
	.bg-light-blue     { background: #111827 !important; color: #A5C5E9; }
	.bg-light-blue2    { background: #151F2D !important; color: #CBD5E1; }
	.bg-light-blue3    { background: #1a2a3f !important; color: #CBD5E1; }

	/* Status BG */
	.bg-success-h1 { background: #14522D; }
	.bg-success-h2 { background: #186235; }
	.bg-warning-h1 { background: #6A401B; }
	.bg-warning-h2 { background: #764D1E; }
	.bg-info-h1    { background: #0C192D; }
	.bg-info-h2    { background: rgba(42, 100, 167, 0.55); }



	/* -------------------------------------------------------
		TEXT COLOR OVERRIDES
	------------------------------------------------------- */

	.blue          { color: #99BBE5; }
	.dark-blue     { color: #A5C5E9; }
	.primary-blue  { color: #99BBE5; }
	.purple        { color: #CBC2F0; }
	.cyan          { color: #99DDE5; }
	.teal          { color: #99E5DB; }
	.green         { color: #99E5B5; }
	.dark-green    { color: #99E5B5; }
	.dark-cyan     { color: #99E5DA; }
	.red           { color: #E59999 !important; }
	.dark-red      { color: #EDB6B6; }
	.pink          { color: #E599C1; }
	.orange        { color: #E5C199; }
	.slate         { color: #B3BDCC; }
	.grey          { color: #BABDC5 !important; }
	.dark-grey     { color: #B8BDC6; }
	.black         { color: #B8BDC6; }
	.real-black    { color: #E8E8E8; }
	.white         { color: #FAFAFA !important; }
	.smoky-gray    { color: #D1D5DB !important; }
	.primary-black { color: #E1E7EF; }
	.light-grey    { color: #B3BCCB !important; }
	.light-grey2   { color: #BABDC5 !important; }
	.dark-fb-grey  { color: #B8BDC6; }
	.light-fb-grey { color: #CBD5E1; }


	/* -------------------------------------------------------
		LABEL / BADGE OVERRIDES
	------------------------------------------------------- */

	.custom-label-white          { background: #1F2937; color: #E8E8E8; }
	.custom-label-khaki          { background: #664B00; color: #E4DE9B; }
	.custom-label-grey           { background: #384252; color: #B8BDC6; }
	.custom-label-orange         { background: #3D190F; color: #E5C199; }
	.custom-label-black          { background: #0D0D0D; color: #E8E8E8; }
	.custom-label-lightgrey      { background: #2D3748; color: #B8BDC6; }
	.custom-label-lightblue      { background: #102B41; color: #99CDE5; }
	.custom-label-lightpink      { background: #390E22; color: #F5D6E8; }
	.custom-label-lightgreen     { background: #0D2B17; color: #99E5B5; }
	.custom-label-lightyellow    { background: #664B00; color: #E8D9A1; }
	.custom-label-lightsalmon    { background: #3C1810; color: #E5C199; }
	.custom-label-lightsteelblue { background: #1A2A3D; color: #A5C5E9; }

	/* Severity labels */
	.custom-label-CRITICAL { background: #7E2020; color: #EDB6B6; }
	.custom-label-HIGH     { background: #451126; color: #F5D6E8; }
	.custom-label-MEDIUM   { background: #3D190F; color: #EED5BA; }
	.custom-label-LOW      { background: #1F2937; color: #BABDC5; border: 1px solid #384252; }

	/* Status labels */
	.custom-label-INPROGRESS { background: #224F87; color: #CADCF2; }
	.custom-label-SCHEDULED  { background: #2D3748; color: #B3BDCC; }
	.custom-label-COMPLETED  { background: #14522D; color: #99E5B5; }


	/* -------------------------------------------------------
		TAG OVERRIDES
	------------------------------------------------------- */
	.tag-pink    { background-color: #390E1D; color: #E599C1; }
	.tag-blue    { background-color: #0D1E35; color: #99BBE5; }
	.tag-yellow  { background-color: #664B00; color: #E5D499; }
	.tag-cyan    { background-color: #0A2928; color: #99DDE5; }
	.tag-purple  { background-color: #2B1041; color: #BF99E5; }
	.tag-orange  { background-color: #251409; color: #E5BB99; }
	.tag-peach   { background-color: #2D1A10; color: #E5B099; }
	.tag-grey    { background-color: #1F2937; color: #B8BDC6; }
	.tag-white   { background-color: #1F2937; color: #B8BDC6; }
	.tag-green   { background-color: #0A2917; color: #99E5B5; }
	.tag-red     { background-color: #2D0B0B; color: #E59999; }
	.tag-teal    { background-color: #09251E; color: #99E5DB; }
	.tag-indigo  { background-color: #1E1B4B; color: #99A1E5; }
	.tag-lime    { background-color: #191F0A; color: #C9E599; }
	.tag-brown   { background-color: #1C1008; color: #DBC1A3; }
	.tag-navy    { background-color: #0C192D; color: #99BBE5; }
	.tag-magenta { background-color: #390E1F; color: #E599C1; }
	.tag-amber   { background-color: #251809; color: #E5D499; }
	.tag-primary { background-color: #1E3B76; color: #A5C5E9; }

	/* -------------------------------------------------------
		BORDER OVERRIDES
	------------------------------------------------------- */

	.border-all-light          { border: 1px solid #384252; }
	.border-all                { border: 1px solid #4B5563; }
	.border-right              { border: none; border-right:  1px solid #4B5563; }
	.border-right-light        { border: none; border-right:  1px solid #384252; }
	.border-left               { border: none; border-left:   1px solid #4B5563; }
	.border-left-light         { border: none; border-left:   1px solid #384252 !important; }
	.border-left-light-grey    { border: none; border-left:   0.5px solid rgba(56, 66, 82, 0.5); }
	.border-left-selected      { border: none; border-left:   5px solid #2E60B8; }
	.border-error-left         { border: none; border-left:   5px solid #9F2828; }
	.border-warning-left       { border: none; border-left:   5px solid #B86E2E; }
	.border-top                { border: none; border-top:    1px solid #4B5563; }
	.border-top-light          { border: none; border-top:    1px solid #384252; }
	.border-bottom             { border: none; border-bottom: 1px solid #4B5563; }
	.border-bottom-light       { border: none; border-bottom: 1px solid #384252; }
	.border-bottom-light-grey  { border: none; border-bottom: 0.5px solid rgba(56, 66, 82, 0.55); }
	.border-bottom-black       { border: none; border-bottom: 1px solid #6B7280; }
	.border-all-light-dashed   { border: 1px dashed #384252; }
	.thin-border-all-blue      { border: 0.5px solid #286D9F; }
	.large-border-top          { border: none; border-top:    15px solid rgba(46, 96, 184, 0.2); }

    .large-border-top { border: none; border-top: 15px solid #4D8FFF33; }

	/* SLA Alert bar border */
	.border-error-left   { border-left: 5px solid #FF6B6B; }
	.border-warning-left { border-left: 5px solid #FF9F4A; }
}